JS在html中的执行顺序
Posted 小小强001
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS在html中的执行顺序相关的知识，希望对你有一定的参考价值。
一般来说在html页面中嵌入javascript的方式有下面几种：1.放在页面的<script></script>标记之间；2.由<script>标记的src属性引入外部的js文件；3.放在页面元素的事件处理程序中，比如button的onclick事件中；4.作为URL的主体，使用Javascript:协议，比如<a href="window.open("about:blank");"></a>;5.Javascript本身的document.write()写入的JavaScript代码；6.利用Ajax异步获取javascript代码.其中3,4需要事件的事件的触发才能执行，除非特别设置一般在页面加载时不会执行。5，6可以看做是js代码动态调用执行的，一般是在调用该代码的js执行时执行。
下面看看<script></script>在html中所放的不同位置来看js的执行顺序。
js代码在js外部文件和<script></script>内的区别：
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript"src="test.js" ></script>
<script type="text/javascript">
alert("head中js");
</script>
</head>
<body>
</body>
</html>
其中test.js为外部js文件，代码为：
alert("文件中js");
程序运行结果为先打印"文件中js"，再打印"head中js"，如果把<script src="test.js">放在后面，则是先输出"head中js",即浏览器是按<script>载入的先后顺序执行的。
一般来说每个脚本定义的全局变量和函数，都可以被后面执行的脚本所调用。变量的调用必须是在前面已经声明, 否则是undefined。而函数的调用可以在函数定义之前,前提是函数调用与定义在同一个<script></script>中，看下面的代码：
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> alert(str);//程序打印出，undefined Sayhello("小明");//程序打印出，小明你好 function Sayhello(name) { alert(name+"你好!"); } var str="abcd"; </script> </head> <body> </body> </html>
函数定义可以出现在函数调用的后面，但是如果是分别在两段代码，且函数调用在前面代码中，则会报函数未定义错误。
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> Sayhello("小明");//浏览器报错Sayhello未定义 </script> <script type="text/javascript"> function Sayhello(name) { alert(name+"你好!"); } var str="abcd"; </script> <script type="text/javascript"> Sayhello("小红"); alert(str); </script> </head> <body> </body> </html>
程序正常打印‘‘小红你好‘‘和‘‘abcd‘‘。
在实际js的编程中，可能会页面<script>标签内的js代码中调用外部js文件中的变量或函数，这个需要js文件的加载在前，而调用在后。下面的代码可以说明：
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="test.js"></script> <script type="text/javascript"> alert(num1); alert(num2) alert(sum(3,7)); </script> </head> <body> </body> </html>
test.js中的代码：
var num1=2;
var num2=3;
function sum(a,b)
{
return a+b;
}
程序正常输出，如果把test.js放在后面，调用却在前面，会出现undefined的错误。如果把js文件test.js放在后可以调用前面html页面<script>标签中的变量和函数，也可以调用前面的js文件中定义的变量和函数。
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var string1="abc"; var string2="def"; function Print(str1,str2) { alert(str1+str2) ; } </script> <script type="text/javascript" src="test.js"></script> </head> <body> </body> </html>
上面程序中string1，string2，Print声明或定义在前，在test.js中调用，test.js的代码为：
alert(string1);//输出abc
alert(string2);//输出def
var str1="12";
var str2="34";
Print(str1,str2);//输出1234
后面引用的js文件调用前面js文件中定义的变量和函数，把前面的html改为如下：
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="test02.js"></script> <script type="text/javascript" src="test.js"></script> </head> <body> </body> </html>
test.js中的代码不变，调用前面test02.js中定义变量和函数，test02.js的代码如下：
var string1="abc";
var string2="def";
function Print(str1,str2)
{
alert(str1+str2) ;
}
程序运行结果与前面一样，上面程序交换test.js和test02.js的先后会出现undefined的错误。这充分说明js外部文件和页面内<script>标签里的js代码一样，让先后顺序加载执行的。
下面来看看<script>加入html的不同位置执行的顺序：在<head>和<body>中以及与页面元素加载的先后关系
下面的程序对比<head>和<body>中js的执行顺序：
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> alert("我在head中"); </script> </head> <body> <script type="text/javascript"> alert("我在body中"); </script> </body> </html>
上面程序先弹出"我在head中"后body中，与页面加载的顺序一致。放入<body>中的js随页面元素加载时执行。可以把js放在</html>的后面，在页面加载完成后执行，相当于onload事件中的代码。
综合上面所述情况可以归结为一点，即JavaScript代码是按页面加载的先后顺序执行的。（注上述代码在不同浏览器中执行的结果会有一些小差异）。
以上是关于JS在html中的执行顺序的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript笔记--- ECMAScript(续) (JS事件；JS代码的执行顺序；设置节点属性；捕捉回车键；void 运算符；JS中的控制语句)