1. The method of embedding Javascript in HTML is to directly place the Javascript code between the tag pair <script> and </script>. Use the src attribute of the <script /> tag to formulate an external js file and place it in the event handler, such as: <p onclick="alert('I am the Javascript executed by the onclick event')">Click me</p>
As the body of the URL, this URL uses the special Javascript: protocol, such as: <a href="javascript:alert('I am a javascript executed by the javascript: protocol')">Click me</a>
Use the document.write() method of javascript itself to write new javascript code. Use Ajax to asynchronously obtain the javascript code, and then execute
the 3rd and 4th methods. The written Javascript needs to be triggered before it can be executed, so unless it is specially set, the page is loaded. will not be executed.
2. The execution order of Javascript on the page. The Javascript code on the page is part of the HTML document, so the order in which Javascript is executed when the page is loaded is the order in which the introduction tag <script /> appears. In the <script /> tag or through src The imported external JS is executed in the order in which its statements appear, and the execution process is part of the document loading.
The global variables and functions defined by each script can be called by scripts executed later.
The variable call must have been declared previously, otherwise the obtained variable value will be undefined.
<script type="text/javscrpt">//<![CDATA[
alert(tmp); //output undefined
var tmp = 1;
alert(tmp); //output 1
//]]></script>
In the same script, the function definition can appear after the function call. However, if it is in two pieces of code and the function call is in the first piece of code, an undefined function error will be reported.
<script type="text/javscrpt">//<![CDATA[
aa(); //Browser error
//]]></script>
<script type="text/javscrpt">//<![CDATA[
aa(); //Output 1
function aa(){alert(1);}
//]]></script>
document.write() will write the output to the location of the script document. After the browser parses the content of the document where documemt.write() is located, it will continue to parse the content output by document.write(), and then continue to parse the HTML document.
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"></script>');
document.write('<script type="text/javascript">');
document.write('alert(2);')
document.write('alert("I am" + tmpStr);');
document.write('</script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
alert(3);
//]]></script>
The content of test.js is:
var tmpStr = 1;
alert(tmpStr);
The order of popup values in Firefox and Opera is: 1, 2, I am 1, 3
The order of pop-up values in IE is: 2, 1, 3. At the same time, the browser reports an error: tmpStr is undefined. The reason may be that IE does not wait for the Javascript code in SRC to be loaded before executing the next line when document.write. Therefore, 2 pops up first, and when document.write('document.write("I am" + tmpStr)') is executed and tmpStr is called, tmpStr is not defined, resulting in an error.
To solve this problem, you can use the principle of HTML parsing to parse one HTML tag and then execute the next one, and split the code to achieve this:
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"></script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript">');
document.write('alert(2);')
document.write('alert("I am" + tmpStr);');
document.write('</script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
alert(3);
//]]></script>
In this way, the order of output values under IE and other browsers is consistent: 1, 2, I am 1, 3.
3. How to change the execution order of Javascript on the page using onload
<script type="text/javascript">//<![CDATA[
window.onload = f;
function f(){alert(1);}
alert(2);
//]]></script>
The order of output values is 2, 1.
It should be noted that if there are multiple winodws.onload, only the most effective one will take effect. The solution is:
window.onload = function(){f();f1();f2();..... }
Utilizing level 2 DOM event types
if(document.addEventListener){
window.addEventListener('load',f,false);
window.addEventListener('load',f1,false);
...
}else{
window.attachEvent('onload',f);
window.attachEvent('onload',f1);
...
}
Defer can be used in IE. The function of defer is to load the code and not execute it immediately. It will be executed after the document is loaded. It is somewhat similar to window.onload, but it does not have the limitations of window.onload. It can be used repeatedly, but only in It is valid in IE, so the above example can be modified to
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"></script>');
document.write('<script type="text/javascript" defer="defer">');
document.write('alert(2);')
document.write('alert("I am" + tmpStr);');
document.write('</script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
alert(3);
//]]></script>
In this way, IE will not report an error, and the order of output values becomes: 1, 3, 2, I am 1.
When the HTML parser encounters a script, it must terminate the parsing of the document as usual and wait for the script to execute. To solve this problem, the HTML4 standard defines defer. Use defer to prompt the browser to continue parsing the HTML document and delay execution of the script. This delay is very useful when a script is loaded from an external file, so that the browser does not have to wait for all external files to be loaded before continuing execution, which can effectively improve performance. IE is currently the only browser that supports the defer attribute, but IE does not implement the defer attribute correctly because delayed scripts are always delayed until the end of the document, rather than only delayed to the next non-delayed script. This means that the execution order of delayed scripts in IE is quite confusing, and any functions and variables that are not required by subsequent non-delayed scripts cannot be defined. The execution time of all defer scripts in IE should be after the HTML document tree is established and before window.onload.
Take advantage of Ajax.
Because xmlhttpRequest can determine the loading status of external documents, it can change the loading order of the code.