javascript代码引入【小结】

最新推荐文章于 2024-01-01 22:20:10 发布

jk_x

最新推荐文章于 2024-01-01 22:20:10 发布

阅读量662

点赞数

分类专栏： javascript总结文章标签： javascript html

本文链接：https://blog.csdn.net/love_x_you/article/details/54868920

版权

javascript总结专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、在html文档中引入javascript代码有两种方式：

1.内嵌javascript代码。如下所示：

<!DOCTYPE>
<html>
    <head>
        <title>example</title>
        <script>
            <!-- javascript code -->
        </script>
    </head>
</html>

2.引入javascript文件。如下所示：

<!DOCTYPE>
<html>
    <head>
        <title>example</title>
        <script src="example.js"></script>
    </head>
</html>

二、javascript代码引入位置及影响

1.内嵌js代码位置

<!--<script>标签放在<head>中时-->
<!DOCTYPE>
<html>
    <head>
        <title>example</title>
        <script>
            <!-- javascript code -->
        </script>
    </head>
</html>

如果放在<head>标签里面，会先执行js代码，然后再呈现页面的内容。

<!--<script>标签放在<body>中时-->
<!DOCTYPE>
<html>
    <head>
        <title>example</title>
    </head>
    <body>
        <!-- page content -->
        <script>
            <!-- javascript code -->
        </script>
    </body>
</html>

如果放在<body>标签尾部，会先呈现页面的内容，再执行js代码。如果放在<body>中其他位置，则会在加载页面内容到<script>标签位置处执行js代码，再继续加载页面。

注：对于内嵌js代码，如何在页面加载之后执行js代码，常用方法如下：
1.如果js代码写在<head>标签里面，则用： window.onload=function(){};
如果使用jquery，则可以用：
$(document).ready(function(){});
或者：
$(window).load(function(){});
来实现，但是这三种方法是有区别的：
window.onload需要等到页面内所有元素包括图片加载完毕后才能执行，而且
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个。

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。而且可以同时编写多个，并且都可以得到执行。
$(window).load();也是所有元素包括图片加载完毕才能执行，而且可以编写多个。

如果js代码量很大的话，一般不建议直接内嵌js代码，因为容易造成代码冗余，而且不好维护。

2.外部js文件引入位置

<!--<script>标签放在<head>中时-->
<!DOCTYPE>
<html>
    <head>
        <title>example</title>
        <script src="example.js"></script>
    </head>
    <body>
        <!-- page content -->
    </body>
</html>

<!--<script>标签放在<body>中时-->
<!DOCTYPE>
<html>
    <head>
        <title>example</title>
    </head>
    <body>
        <!-- page content -->
        <script src="example.js"></script>
    </body>
</html>

如果在<head>标签中引入外部js文件，意味着必须等到全部js代码都被下载、解析和执行完成以后，才能开始呈现页面的内容。
如果想在页面内容被呈现之后再执行js代码，可以把js外部文件放在<body>标签尾部。

注：如果在<head>标签中引入外部js文件，而且还想在页面内容呈现之后再下载执行js代码，可以在<script>标签中增加defer="defer"属性，这个属性的用途是表明js脚本在执行时不会影响页面的构造，也就是说js脚本会被延迟到整个页面都被解析完毕后再运行。即浏览器会立即下载js代码文件，但是延迟执行。