Best IT Recipes

How does the location of the script tag on the page affect the JavaScript function that is defined in it?

I read that you should define your JavaScript functions in the <head> , but how the location of the <script> (whether in the <head> , <body> or any other tag) affects the JavaScript function,

In particular, how does this affect the scope of a function, and where can you name it?

+38
javascript function html tags
Jan 30 '09 at 18:36
source share
9 answers

Telling people to add <SCRIPT> only to their heads sounds like reasonable things, but as others have said, there are many reasons why this is not recommended or even practical - basically the speed and way to create dynamic HTML pages.

Here's what the HTML 4 spec says:

The SCRIPT element places the script in the document. This element can appear any number of times in a HEAD or BODY HTML document.

And some HTML sample. Doesn't it look completely formatted here :)

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>A document with SCRIPT</TITLE> <META http-equiv="Content-Script-Type" content="text/tcl"> <SCRIPT type="text/vbscript" src="http://someplace.com/progs/vbcalc"> </SCRIPT> </HEAD> <BODY> <SCRIPT type="text/javascript"> ...some JavaScript... </SCRIPT> </BODY> </HTML>

And what we look forward to in HTML 5 :

New async attribute in <SCRIPT> :

Note. There are [sic] methods: SCRIPT can be executed:

The asynchronous attribute is true: SCRIPT will execute asynchronously with the rest of the page, so SCRIPT will execute while the page continues parsing.

The asynchronous attribute is false, but the defer attribute is true: SCRIPT will execute when the page ends with parsing.

+23
Feb 03 '09 at 6:10
source share

The usual rules of the game are still standing; Do not use material until it is defined. :)

Also, note that the “put everything down” advice is not the only rule in the book - in some cases it may not be possible, and in other cases it may make more sense to put the script in another place.

The main reason for placing a script at the bottom of the document is for performance reasons, scripts, unlike other HTTP requests, do not load in parallel, that is, they slow down the loading of the rest of your page. Another reason for installing the scripts below, so you do not need to use any "DOM ready" functions. Since the script tag is below all elements, the DOM will be ready for manipulation!

EDIT: Read this: http://developer.yahoo.com/performance/rules.html#js_bottom

+18
Jan 30 '09 at 20:24
source share

One aspect of placement is performance. See this excellent article in YSlow's discussion of why it is sometimes recommended to place it at the bottom of a document.

Regarding scope issues, the usual visibility rules for Javascript (vars defined inside or outside functions, local, global, closures, etc.), as far as I know, are not affected.

+10
Jan 30 '09 at 18:43
source share

The value of the script tag matters. If you attach a function to a document element, the document element must be loaded first before we begin implementing the function. suppose getTeachers () is a function in the getTeachers.js file. This will give you an error message:

 <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Unit Teachers</title> <head> <script type="text/javascript" src="getTeachers.js"></script> <script type="text/javascript"> document.getElementById("buttonId").onclick=function(){getResults()}; </script> </head> <body> <form> <input type = "button" id="buttonId" value = "Press for Results" /><br /> </form> <span id="results" /></span> </body> </html>

It gives an error before the first loading of the chapter and cannot find the element with the specified identifier. Code below:

 <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Unit Teachers</title> <head> <script type="text/javascript" src="getTeachers.js"></script> </head> <body> <form> <input type = "button" id="buttonId" value = "Press for Results" /><br /> </form> <script type="text/javascript"> document.getElementById("buttonId").onclick=function(){getResults()}; </script> <span id="results" /></span> </body> </html>
+3
May 11 '14 at 12:38
source share

This is not true. Most software scripts are scattered throughout the page. Because of this, I rarely saw problems (and only from older browsers).

+2
Jan 30 '09 at 18:39
source share

If you pull Javascripts through XMLHttpRequest, as Diodeus said, this probably won't work. In my case, there was no error, the browser simply ignores the new script (s).

In the end, I used this, but not very elegantly, but it still works for me:

http://zeta-puppis.com/2006/03/07/javascript-script-execution-in-innerhtml-the-revenge/

How to use execJS: http://zeta-puppis.com/2006/02/23/javascript-script-execution-in-innerhtml/

Note. Watch out for &lt; in this line: for(var i=0;i<st.length; i++)

+2
Apr 29 '11 at 18:45
source share

If you have a built-in script (external functions) that is in front of the functions that it can call, you may receive an error message because they may not be available. Not to say that this will always happen, simply that it may be depending on the type of browser or version.

+1
Jan 30 '09 at 18:39
source share

If your script refers to the ID on the page and the page has not been displayed (i.e. the script before HTML, or your script is executed with onload and not the DOM ready), you may also receive an error message.

+1
Jan 30 '09 at 18:43
source share

Javascript scope rules are similar to perl - you can call any function at the current or any higher level of visibility. The only limitation is that the function must be defined during its call. The position in the source does not matter - only the position in time is important.

You should avoid placing scripts in <head> if possible, as this slows down the page display (see Alan link).

+1
Jan 30 '09 at 18:46
source share


More articles: