编程笔记 html5&css&js 021 JavaScript

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 编程笔记 html5&css&js 021 JavaScript


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

一、<script>:脚本元素

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

内容分类  元数据内容、流式内容、短语内容。
允许的内容 动态脚本,如 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> 元素来导入(外部)脚本。

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

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

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

四、操作

<!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>

小结

这里先认识一下哈,后面慢慢学习!

相关文章
|
1月前
|
前端开发 JavaScript C++
震惊!!!html竟然被...... 一篇博客让你从0开始熟悉并掌握html 超详细html笔记 全网独一份
本文是一份超详细的HTML学习笔记,从基础认知开始,介绍了网页的构成、五大浏览器、web标准、HTML/CSS/JavaScript的区别,然后详细讲解了HTML的概念、骨架结构、常用快捷键、注释、标签结构和关系。接着,通过大量实例深入探讨了HTML的各种标签,包括排版标签、文本格式化标签、媒体标签、链接标签、列表标签、表格标签、表单标签、语义化标签和字符实体,旨在帮助读者从0开始熟悉并掌握HTML。
35 2
震惊!!!html竟然被...... 一篇博客让你从0开始熟悉并掌握html 超详细html笔记 全网独一份
|
2月前
|
存储 JavaScript 前端开发
用 HTML + JavaScript DIY 渐进式延迟法定退休年龄测算器
用 HTML + JavaScript DIY 渐进式延迟法定退休年龄测算器
|
2月前
|
JavaScript 前端开发
用html+javascript打造公文一键排版系统12:删除附件说明中“附件:”里的空格
用html+javascript打造公文一键排版系统12:删除附件说明中“附件:”里的空格
|
5天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
33 1
|
10天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
22 3
|
13天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
27 4
|
21天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
72 6
|
2月前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
|
2月前
|
小程序 JavaScript 前端开发
你的生日是星期几?HTML+JavaScript帮你列出来
你的生日是星期几?HTML+JavaScript帮你列出来
|
1月前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
26 0