js代码写在head和body的区别

JavaScript010

js代码写在head和body的区别,第1张

javascript代码写在<head>里面:

由于这时候网页主体(body)还未加载,所以这里适合放一些不是立即执行的自定义函数,立即执行的语句则很可能会出错(视浏览器而定)

javascript代码写在<body>里面:

这里可以放函数也可以放立即执行的语句,但是如果需要和网页元素互动的(比如获取某个标签的值或者给某个标签赋值),Javascript代码务必在标签的后面

javascript代码写在<body>下面:

这时候整个网页已经加载完毕了,所以这里最适合放需要立即执行的命令,而自定义函数之类的则不适合。

Javascript写在哪里?概括起来就是三种形式:

1. 内部:Html网页的<body></body>中;

2. 内部:Html网页的<head></head>中;

3. 外部:外部JS文件里。(1) Javascript写在<body></body>中

当浏览器载入网页Body部分的时候,就执行其中的Javascript语句,执行之后输出的内容就显示在网页中。

<html>

<head></head>

<body>

<script type="text/javascript">....</script>

</body>

</html>(2) Javascript写在<head></head>中

有时候并不需要一载入HTML就运行Javascript,而是用户点击了HTML中的某个对象,触发了一个事件,才需要调用Javascript。这时候,通常将这样的Javascript放在HTML的<head></head>里。

<html>

<head>

<script type="text/javascript">....</script>

</head>

<body>

</body>

</html>(2) Javascript写在<head></head>中

将Javascript程序放到一个后缀名为.js的文本文件里。

在HTML里引用外部文件里的Javascript,应在Head里写一句<script src="文件名"></script>,其中src的值,就是Javascript所在文件的文件路径。示例代码如下:

<html>

<head>

<script src="js/001.js">...</script>

</head>

<body>

</body>

</html>

主要是先加载和后加载的区别。

如果JavaScript脚本写在head标签里面,那么需要用window.onload起到一个延迟加载的作用。

如果JavaScript脚本写在body里面,也要看具体位置。如果写在body里面,一般都是写在了body标签的最后面。

例子:写在body里:<body>

<input type="button" id="btn"/>

<a href="javascript:" id="div-box"></a>

<script>

    var oBtn = document.getElementById('btn')

    var oBox = document.getElementById('div-box')

    oBtn.onclick = function () {

        var html = '<div style="width:100px height:100px background: #ccc"></div>'

        if (oBox.innerHTML == '') {

            oBox.innerHTML = html

        } else {

            oBox.innerHTML = ''

        }

    }

</script>

</body> 例子:写在head里:<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script>

       window.onload = function (){

           var oBtn = document.getElementById('btn')

           var oBox = document.getElementById('div-box')

           oBtn.onclick = function () {

               var html = '<div style="width:100px height:100px background: #ccc"></div>'

               if (oBox.innerHTML == '') {

                   oBox.innerHTML = html

               } else {

                   oBox.innerHTML = ''

               }

           }

       }

    </script>

</head>

<body>

<input type="button" id="btn"/>

<a href="javascript:" id="div-box"></a>

</body>