将JavaScript插入到HTML中，主要的方法就是使用<script>标签。

<noscript>

作用

针对早起浏览器不支持JavaScript的问题，提供一个页面优雅降级的处理方案。

<noscript>显示的条件

浏览器不支持脚本。
浏览器对脚本的支持被关闭。

这两个条件只要满足其中之一包含在<noscript>中的内容就会进行渲染；否则，浏览器不会渲染其中的内容。

出现的位置

<noscript>元素可以包含任何可以出现在<body>中的HTML元素。【<script>除外】

<script>元素

type：【可选】表示代码块中脚本语言的类型（MIME类型）。默认值为text/javascript。
取值：application/x-javascript表示JavaScript。module表示模块，只能使用import和export。
src：【可选】表示包含要执行的脚本的外部文件。引用外部文件的时候使用。
async：【可选】表示立即下载页面，但是不能阻止其他页面动作。
defer：【可选】表示脚本可以延迟到文档完全解析和显示之后在执行。

使用脚本的两种方式

直接在网页中嵌入JavaScript代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        
    </head>

    <body>
        <script>
            function sayHi() {
                console.log("sayHi");
            }
            
            sayHi() // sayHi
        </script>
    </body>
</html>

引用外部JavaScript文件

hello.js

console.log("hello.js 文件");

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        
    </head>

    <body>
        <script src="hello.js"></script>
    </body>
</html>

注意事项

1、直接将js代码嵌入到HTML文件中时，字符串中不能出现</script>，否则将会报错。通过使用转义字符\进行编码。
2、引用外部文件时，不应该在<script>标签内插入JavaScript代码。
3、加载外部JS文件的时候，不受浏览器同源策略限制。
4、HTML中的<script>是按顺序进行解释【在没有使用defer和async的情况下】。
5、尽量使用引入外部文件，这样便于维护、缓存【如果两个页面引用同一个js，这个js文件只需要下载一次即可】。

<script>标签的位置

之前：所有的<script>标签放在<head>中，这样把外部的css、js文件都集中放在一起。

缺点：导致页面渲染的延迟：因为必须把<head>中所有的JS文件全部下载、解析和解释之后，才开始进行页面的渲染。

现在：将<script>标签放在</body>标签之前。

推迟执行脚本-defer

属性defer：告诉浏览器立即下载js文件，但是延迟执行。脚本会延迟到整个页面都解释完毕后再运行。

异步执行脚本- async

属性async：告诉浏览器立即下载js文件，但是延迟执行。有多个外部脚本时，可以同时运行。

动态加载脚本

使用JavaScript中的DOM API进行动态加载脚本。

方法一：使用document.create()进行
通过DOM动态添加script元素同时加载指定的脚本。

function loadScript(url) {
  let script = document.createElement("script");
  script.src = url;
  script.type = "text/javascript";
  document.head.appendChild(script);
}

方法二：使用XMLHttpRequest进行动态加载JS

// 获取js
function getJS(url) {
    let xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                runJS(xhr.responseText);
            } else {
                throw Error("加载失败")
            }
        }
    }
    xhr.send();
}

// 运行js
function runJS(text) {
    let script = document.createElement("script");
    script.type = "text/javascript";
    // script.text = text;  // 和下一行作用一致。
    script.appendChild(document.createTextNode(text))
    document.head.appendChild(script);
}

HTML中的JavaScript