Javascript 脚本标记的功能是什么？执行还是引用？_Javascript_Html

Javascript 脚本标记的功能是什么？执行还是引用？

javascript html

Javascript 脚本标记的功能是什么？执行还是引用？,javascript,html,Javascript,Html,我不是问在HTML标记中把标记放在哪里。我的问题是它的功能是什么。它是否引用脚本以便以后可以运行脚本的所有功能，或者它执行脚本而不引用例如： HTML: 它是否引用脚本以便以后可以运行脚本的所有功能，或者它执行脚本而不引用它引用一个脚本，该脚本使浏览器执行它。这可能会改变环境的状态（例如，通过创建全局变量）但是在第二种情况下，函数hello（）没有运行，因此这导致结论是标记只执行脚本，而不是引用它，在这种情况下，由于脚本在页面加载之前执行，因此它不能引用主体如果在创建全局变量之前脚本出错

我不是问在HTML标记中把

标记放在哪里。我的问题是它的功能是什么。它是否引用脚本以便以后可以运行脚本的所有功能，或者它执行脚本而不引用

例如：

HTML:

它是否引用脚本以便以后可以运行脚本的所有功能，或者它执行脚本而不引用

它引用一个脚本，该脚本使浏览器执行它。这可能会改变环境的状态（例如，通过创建全局变量）

但是在第二种情况下，函数hello（）没有运行，因此这导致结论是

标记只执行脚本，而不是引用它，在这种情况下，由于脚本在页面加载之前执行，因此它不能引用主体

如果在创建全局变量之前脚本出错（

hello

，在本例中），则当您稍后尝试访问该变量时，该变量将不存在。

（在本例中，术语

run

和

execute

是同义词，仅供参考）

脚本标记用作脚本的引用和执行点。浏览器按程序解析HTML，这意味着它从

HTML

标记开始，然后解析

head

标记，然后解析

body

，依此类推。当浏览器到达脚本标记时，它会停止，加载被引用的

脚本

，执行它，然后继续向下通过

脚本

标记解析文档的其余部分。脚本既可以是内联的

警报（'hey！'）

，也可以是外部引用

当文档解析页面的HTML时，浏览器会执行

标记。在第一种情况下，

标记是在浏览器解析了页面的大部分HTML之后执行的，这意味着

#testElement

现在已经存在，因此可以使用

document.getElementById

找到，因为大部分DOM已经构建

在第二种情况下，浏览器在分析

头

标记时执行

脚本

标记，这是在

#testElement

出现之前。因此，您的脚本无法找到元素，并且失败

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body onresize="hello();">
        <div id="navigation_pane">
            <ul>
                <li>HOME</li>
                <li>CONTACTS</li>
                <li>JOIN</li>
                <li>ABOUT US</li>
            </ul>
        </div>
        <div id="testElement"></div>
        <script type="text/javascript" src="javascript.js"></script>
    </body>
</html>

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css.css">
        <script type="text/javascript" src="javascript.js"></script>
    </head>
    <body onresize="hello();">
        <div id="navigation_pane">
            <ul>
                <li>HOME</li>
                <li>CONTACTS</li>
                <li>JOIN</li>
                <li>ABOUT US</li>
            </ul>
        </div>
        <div id="testElement"></div>
    </body>
</html>

"use strict";
var navigationPane = document.getElementById("navigation_pane");
var height = navigationPane.clientHeight;

function hello(){
    document.getElementById("testElement").textContent = navigationPane.clientHeight;
}