JS在html中的执行顺序 一般来说在html页面中嵌入Javascript的方式有下面几种：1.放在页面的<script></script>标记之间；2.由<script>标记的src属性引入外部的js文件；3.放在页面素的事件处理程序中，比如button的onclick事件中；4.作为URL的主体，使用Javascript:协议，比如<a href=”https://www.cnblogs.com/xiaoxiaoqiang001/p/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=”https://www.cnblogs.com/xiaoxiaoqiang001/p/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=”https://www.cnblogs.com/xiaoxiaoqiang001/p/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=”https://www.cnblogs.com/xiaoxiaoqiang001/p/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=”https://www.cnblogs.com/xiaoxiaoqiang001/p/test02.js”></script> <script type=”text/javascript” src=”https://www.cnblogs.com/xiaoxiaoqiang001/p/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代码是按页面加载的先后顺序执行的。（注上述代码在不同浏览器中执行的结果会有一些小差异）。
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/90635.html
