Learning JavaScript Part 6 : Best Position of Putting Code Inside HTML JavaScipt

0

In the previous tutorial: how to enter (input) JavaScript code into the HTML code I put the JavaScript in the HTML tag <head>. However, in a position where the JavaScript code should be placed ? In this tutorial I will discuss about the position of the placement code JavaScipt in HTML.

The position of the JavaScript in the HTML in the early (within the tag <
head>)

Basically, you are free to put any part of the JavaScript code in HTML, while inside the tag <script> (or via event handler, although not recommended).

The Tag <script> can be placed at the beginning of the HTML (within the tag <head>), in the middle of HTML (inside tag <body>), as well as the end of the HTML (before the closing tag </html>). The position of this placement will affect how the sequence of the JavaScript code is executed.

HTML pages are processed by a web browser from top to bottom sequentially. This applies also for HTML, CSS, and JavaScript. The JavaScript code that is placed at the beginning of the document (within the tag <head>), will be processed first before web browsers process the contents of an HTML document that is contained within the tag <body>.

To see the effect, let’s try an example HTML and JavaScript code here :

An example of the above code exactly as the example I run when discussing on how to input the javascript code on the previous tutorial. But this time I will focus how the web browser executes the page.

In the example above, the tag <script> contains the JavaScript code placed at the beginning of the page (in the tag <head>). If you run the above program, then in the web browser will show the results as follows :

webspoint
How to-Enter code-JavaScript-to-in-HTML-tags-script

Before you click the OK button of the alert dialog box, note the appearance of the HTML text of the page. On the web page are not visible any writing, but in the HTML code, I’ve added two sentences in the tag <p>. And only if you click the OK button, the new thereafter will be performing 2 sentences.

This means that if JavaScript code is placed on the position of the tag <head>, then the code will be run (processed) before ‘ content ‘ website (tag <body>) is displayed. So it was concluded that the processing of the program starts from top to bottom of web page.

The position of the placement of JavaScript at the beginning HTML, could become its own problems in making JavaScript code.

By the time we write a JavaScript program, most of the code is used to manipulate a web page. The problem arises if when the JavaScript code is executed, a page or an HTML tag that will be processed is not yet available.

Learn HTML Label Tag

In the HTML file above, I made a couple of lines of JavaScript code, you do not need to understand the code, as we will learn later. But the core of the code is to add 1 sentence into an HTML tag that has id = “div spirit”.

HTML tag with id = “div spirit” set within a tag div on the line to. This is the tag I will fill in the sentences made with JavaScript.

If you run the page, the results display on a web browser will not display the sentence that I created from JavaScript. What happened?

To see why the sentence does not appear, you can view it from a JavaScript error. Please turn on the menu Web Developer from web browsers (as I discussed on how to display an error message (Error) JavaScript). From the console tab, you can see 1 error, i.e.:

Uncaught TypeError: Cannot set property 'innerHTML' of null
(pada Google Chrome)
or
TypeError: a is null (pada Mozilla Firefox)
webspoint
Error-on-time-JavaScript-in-position-head-HTML

Both the web browser displays an error to the effect that a variable that is used in JavaScript could not find a tag with id = “div spirit”.

This happens because when JavaScript in execution, the tag div is not yet available (yet processed), since JavaScript is run before the tag <body>. The new Tag div is available when the web browser has finished running JavaScript.

One solution to this problem is to move the JavaScript code to the end of the HTML page.

The position of the JavaScript in the HTML at the end (before the tag </html>)

From the previous example, we can see the problems that occur if JavaScript code is positioned at the beginning of the page.

To overcome these problems, several programmers suggested to put the JavaScript code at the end of the page (i.e. before the closing tag of </html>). The placement of the tag <script> page will end ensure that all HTML tags have been displayed in a web browser before the JavaScript code.

To prove it, let’s change the code base before, and moved the JavaScript code to position the end of the page :

webspoint
Results-display-examples-placement-JavaScript-in-late-HTML

And, as it seemed, the phrase “are learning JavaScript, Passion …!!!” is shown to be successful in the web browser simply by moving the JavaScript code to the end of the page.

LEAVE A REPLY

Please enter your comment!
Please enter your name here