Let’s see how to insert the Javascript code inside an HTML document. In this article we will explain some important rules and the most basic ways to execute Javascript in the context of a page.

In this part of the we are going to know the most basic way of working with the language. In this article we will give the first information on how to include scripts, mixing the Javascript code itself with the HTML.

Later we will also see how it should be done. Many ideas about the operation of Javascript have already been described in previous chapters, but with the aim of not leaving anything in the dark, we are going to try to capture all the important data of this language from here on.

Javascript is written to the HTML document

The most important and basic thing that we can highlight at this moment is that Javascript programming is done within the HTML document itself. That is, the Javascript code, in most cases, is mixed with the HTML code itself to generate the page.

This means that we must learn to mix the two programming languages ​​and we will quickly see that, so that these two languages ​​can coexist without problems with each other, some delimiters must be included that separate the HTML tags from the Javascript instructions. These delimiters are the tags. All the Javascript code that we put in the page must be inserted between these two tags.

Script placement does matter

On the same page we can introduce several scripts, each one that could be introduced within different

When the user clicks OK in the dialog, the browser will display the full page.

That Javascript code will be executed as the page is opened. When the browser when processing the page encounters this code, it will stop reading the page to execute the Javascript script. As a result it will show in a dialog box “You need 38 euros for everyone to enter the cinema”. When the user clicks the “accept” button, it will continue to read the rest of the page and display the full page content in the browser window. Of course we will see many other examples throughout the manual.

This method will be the one we prefer to use in most examples of . In it we will be able to learn many things and among them we will see in detail the second script execution mode that we are going to describe below.

Execution of Javascript in response to an event

It’s the other way to run scripts, but before looking at it we need to talk about events. Events are actions that the user performs. Programs like Javascript are prepared to catch certain actions performed, in this case on the page, and perform actions in response. In this way, interactive programs can be made, since we control the user’s movements and respond to them. There are many different types of events, such as a button press, mouse movement, or text selection on the page.

The actions that we want to perform in response to an event can be indicated in many different ways, for example within the HTML code itself, in attributes that are placed within the tag that we want to respond to the user’s actions. In it we already checked that if we wanted a button to perform actions when clicked on it, we had to indicate them within the button’s onclick attribute.

So we check that Javascript code can be inserted inside certain attributes of the HTML tags. However, it is not the only possible method. We can also select page elements directly with Javascript and associate functions that will be executed in response to events. Although it is a bit early for you to understand this whole process in detail, let’s see a simple example.

< meta http-equiv="X-UA-Compatible" content="ie=edge">

Javascript Example

Mouse over here

This time you have the code of a whole page. In it you can find the Javascript code embedded within the body of the page. Unlike the previous code, when the browser reads the page it does not execute anything. It simply memorizes the script and associates the function with the element that has been defined. Specifically, we have defined an event of type “mouseenter” on a page element that has the identifier “myelement”. This means that every time the user places the mouse pointer over the “myelement” element, it will execute the “announcePasses” function.

As we say, perhaps it is a little early to see examples of this style, so do not worry if you have not understood everything. We are only starting the Javascript manual and you will be able to learn all this and much more little by little. So, we will see later this type of execution in depth and the types of events that exist. To get there we still have to learn a lot more about Javascript. In the next article we will show how we can.