编程笔记 html5&css&js 021 JavaScript

一、`<script>`：脚本元素
二、属性
三、基本用法
四、操作
小结

网页的以一重要的角色JavaScript开始登场。它能使 HTML 页面更具动态性和交互性。

一、`<script>`：脚本元素

HTML <script> 元素用于嵌入可执行代码或数据，这通常用作嵌入或者引用 JavaScript 代码。<script> 元素也能在其他语言中使用，比如 WebGL 的 GLSL 着色器语言和 JSON。

html 复制代码

内容分类	元数据内容、流式内容、短语内容。
允许的内容	动态脚本，如 text/javascript。
标签省略	不允许，开始标签和结束标签都不能省略。
允许的父元素	任何可以接受元数据内容，或者短语内容的元素。
隐含的 ARIA 角色	没有对应的角色
允许的 ARIA 角色	不允许任何 role
DOM 接口	HTMLScriptElement

二、属性

该元素包含全局属性。
async

对于普通脚本，如果存在 async 属性，那么普通脚本会被并行请求，并尽快解析和执行。

对于模块脚本，如果存在 async 属性，那么脚本及其所有依赖都会在延缓队列中执行，因此它们会被并行请求，并尽快解析和执行。

该属性能够消除解析阻塞的 Javascript。解析阻塞的 Javascript 会导致浏览器必须加载并且执行脚本，之后才能继续解析。defer 在这一点上也有类似的作用。

这是个布尔属性：布尔属性的存在意味着 true 值，布尔属性的缺失意味着 false 值。
crossorigin

正常的 script 元素将最小的信息传递给 window.onerror，用于那些没有通过标准 CORS 检查的脚本。要允许对静态媒体使用独立域名的网站进行错误记录，请使用此属性。参见 CORS 设置属性，以获得对其有效参数的更多描述性解释。
defer

这个布尔属性的设置是为了向浏览器表明，该脚本是要在文档被解析后，但在触发 DOMContentLoaded 事件之前执行的。

包含 defer 属性的脚本将阻塞 DOMContentLoaded 事件触发，直到脚本完成加载并执行。

警告：本属性不应在缺少 src 属性的情况下使用（也就是内联脚本的情况下），这种情况下将不会生效。

defer 属性对模块脚本也不会生效------它们默认是 defer 的。

包含 defer 属性的脚本会按照它们出现在文档中的顺序执行。

这个属性能够消除阻塞解析的 JavaScript，在这种情况下，浏览器必须在继续解析之前加载和执行脚本。async 在这种情况下也有类似的效果。
fetchpriority 实验性

提供一个指示，说明在获取外部脚本时要使用的相对优先级。允许的值：

high

获取该脚本的优先级比其他外部脚本的等级要高。

low

获取该脚本的优先级比其他外部脚本的等级要低。

auto

默认值：自动确定获取该脚本的相对优先级。
integrity

包含用户代理可用于验证所获取到资源的完整性的内联元数据。参见子资源完整性。
nomodule

这个布尔属性被设置来标明这个脚本不应该在支持 ES 模块的浏览器中执行。实际上，这可用于在不支持模块化 JavaScript 的旧浏览器中提供回退脚本。
nonce

在 script-src Content-Security-Policy (en-US) 中允许脚本的一个一次性加密随机数（nonce）。服务器每次传输策略时都必须生成一个唯一的 nonce 值。提供一个无法猜测的 nonce 是至关重要的，因为绕过一个资源的策略是微不足道的。
referrerpolicy

表示在获取脚本或脚本获取资源时，要发送哪个 referrer：
src

这个属性定义引用外部脚本的 URI，这可以用来代替直接在文档中嵌入脚本。
type (en-US)

该属性表示所代表的脚本类型。该属性的值可能为以下类型：

属性未设置（默认），一个空字符串，或一个 JavaScript MIME 类型

代表脚本为包含 JavaScript 代码的"传统的脚本"。如果脚本指的是 JavaScript 代码，我们鼓励作者省略这个属性，而不是指定一个 MIME 类型。所有的 JavaScript MIME 类型都列在 IANA 的媒体类型规范中。
module

此值导致代码被视为 JavaScript 模块。其中的代码内容会延后处理。charset 和 defer 属性不会生效。对于使用 module 的更多信息，请参见 JavaScript 模块指南。与传统代码不同的是，模块代码需要使用 CORS 协议来跨源获取。
importmap

此值代表元素体内包含导入映射（importmap）表。导入映射表是一个 JSON 对象，开发者可以用它来控制浏览器在导入 JavaScript 模块时如何解析模块标识符。

任何其他值

所嵌入的内容被视为一个数据块，不会被浏览器处理。开发人员必须使用有效的 MIME 类型，但不是 JavaScript MIME 类型来表示数据块。所有其他属性，包括 src 均会被忽略。
blocking 实验性

这个属性明确指出，在获取脚本的过程中，某些操作应该被阻断。要阻断的操作必须是一个以空格分隔的列表，下面列出了阻断属性。
render：屏幕上渲染内容的操作应该被阻断。

三、基本用法

下面这些示例说明了如何使用 <script> 元素来导入（外部）脚本。

html 复制代码

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

以下示例展示了如何向 <script> 元素内放入（内联）脚本。

html 复制代码

<script>
  alert("Hello World!");
</script>

四、操作

html 复制代码

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <title>编程笔记 html5&css&js html脚本</title>
        <meta charset="utf-8" />
        <style>
            /* 选择你喜欢的颜色吧 */
            body {
                color: cyan;
                background-color: teal;
                margin-top: 20px;
                margin-bottom: 20px;
                margin-left: 150px;
                margin-right: 150px;
            }
        </style>
    </head>
    <body>
        <h1 align="center">编程笔记 html5&css&js html脚本</h1>
        <br />
        <p id="js001" align="center">这是一个段落内容</p>
        <br />
        <script>
            document.getElementById("js001").innerText =
                "这个内容是通过javascrip写入此处的";
        </script>
    </body>
</html>

小结

这里先认识一下哈，后面慢慢学习！

编程笔记 html5&css&js 021 JavaScript

编程笔记 html5&css&js 021 JavaScript

一、<script>：脚本元素

二、属性

三、基本用法

四、操作

小结

一、`<script>`：脚本元素