编程笔记 html5&css&js 021 JavaScript

简介: 编程笔记 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天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
13 0
HTML5/CSS3粒子效果进度条代码
|
5天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践
21 1
|
9天前
|
JSON JavaScript 前端开发
使用JavaScript和XLSX.js将数据导出为Excel文件
使用JavaScript和XLSX.js将数据导出为Excel文件
20 0
|
10天前
|
移动开发 前端开发 JavaScript
【专栏:HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
【4月更文挑战第30天】本文介绍了使用HTML5和CSS3创建动态表单验证页面的方法。首先,简述HTML5用于构建网页内容,CSS3用于描述样式。接着,分四步展示实现过程:1) 设计包含输入框和提示信息的表单结构;2) 使用CSS3创建样式,增强视觉效果;3) 使用JavaScript监听输入事件,动态验证表单并显示错误信息;4) 测试和调试确保跨平台兼容性。通过学习,开发者能掌握创建带验证功能的表单,提升用户体验。
|
11天前
|
JavaScript 前端开发 开发工具
【JavaScript 技术专栏】Node.js 基础与实战
【4月更文挑战第30天】本文介绍了Node.js的基础及应用,包括事件驱动的非阻塞I/O、单线程模型和模块系统。内容涵盖Node.js的安装配置、核心模块(如http、fs、path)及实战应用,如Web服务器、文件操作和实时通信。文章还讨论了Node.js的优劣势、与其他技术的结合,并通过案例分析展示项目实施流程。总结来说,Node.js是高效后端开发工具,适合构建高并发应用,其广阔的应用前景值得开发者探索。
|
11天前
|
JSON JavaScript 前端开发
深入探讨javascript的流程控制与分支结构,以及js的函数
深入探讨javascript的流程控制与分支结构,以及js的函数
|
17天前
|
JavaScript 前端开发 算法
< JavaScript小技巧:如何优雅的用【一行代码 】实现Js中的常用功能 >
在开发中,采用简洁的语法和结构,遵循一致的命名规范,具有良好的代码组织和注释,能很好的提高代码的质量。可读性:易于阅读和理解。清晰的命名、简洁的语法和良好的代码结构可以使代码的意图更加明确,降低理解代码的难度,提高代码的可读性。可维护性:易于维护。当代码逻辑清晰、结构简洁时,开发者可以更快速地定位和修复bug,进行功能扩展或修改。同时,可读性高的代码也有助于后续的代码重构和优化。可扩展性:更具有扩展性和灵活性。清晰的代码结构和简洁的代码风格使得添加新功能、修改现有功能或扩展代码更加容易。
< JavaScript小技巧:如何优雅的用【一行代码 】实现Js中的常用功能 >
|
18天前
|
JavaScript 前端开发
js开发:请解释this关键字在JavaScript中的用法。
【4月更文挑战第23天】JavaScript的this关键字根据执行环境指向不同对象:全局中指向全局对象(如window),普通函数中默认指向全局对象,作为方法调用时指向调用对象;构造函数中指向新实例,箭头函数继承所在上下文的this。可通过call、apply、bind方法显式改变this指向。
8 1
|
26天前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
7 0
|
26天前
|
Web App开发 XML 前端开发
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
33 0