- 博客(5055)
- 收藏
- 关注
RSS订阅原创 javascript七基础学习系列四千六百零二：error 事件
况下，只有错误消息有用，因为URL 就是当前文档的地址，而行号可能指嵌入JavaScript 或外部文件中的。相反，会传入3 个参数：错误消息、发生错误的URL 和行号。会触发error 事件。早期支持的事件，为保持向后兼容，很多浏览器保持了其格式不变。通过返回false，这个函数实际上就变成了整个文档的try/catch 语句，可以捕获所有未处理的。然后，浏览器的默认行为就会生效，像往常一样显示这条错误消息。在任何错误发生时，无论是否是浏览器生成的，都会触发error 事件并执行这个事件处理程序。
2025-04-04 12:24:30
266
原创 javascript七基础学习系列四千六百零一：使用SubtleCrypto 对象
SHA-256”、"SHA-384"或"SHA-512"指定。范支持其中3 种：SHA-256、SHA-384 和SHA-512。生成的消息摘要可以是256 位（SHA-256）、TextDecoder 是经常与SubtleCrypto 一起使用的类，用于实现二进制数据与字符串之间的相互转换。384 位（SHA-384）或512 位（SHA-512）。通常，在使用时，二进制的消息摘要会转换为十六进制字符串格式。这个对象包含一组方法，用于执行常见的密码学功能，如加密、散列、签名和生成密钥。
2025-04-04 12:23:57
134
原创 javascript七基础学习系列四千六百：Web Cryptography API
所谓“伪”指的是生成值的过程不是真的随机。被称为置换循环（permutation cycle），而这个循环的长度被称为一个周期（period）。要使用CSPRNG 重新实现Math.random()，可以通过生成一个随机的32 位数值，然后用它去除。PRNG 生成的值只是模拟了随机的特性。由于算法本身是固定的，其输入只是之前的状态，因此随机数顺序也是确定的。者知道PRNG 的内部状态，就可以预测后续生成的伪随机值。明显比常规PRNG 慢很多，但CSPRNG 生成的值就很难预测，可以用于加密了。
2025-04-04 12:23:07
221
原创 javascript七基础学习系列四千五百九十九：错误类型
Error 是基类型，其他错误类型继承该类型。因此，所有错误类型都共享相同的属性（所有错误对象上的方法都是这个默认类型定义的方法）。EvalError 类型的错误会在使用eval()函数发生异常时抛出。最后一种错误类型是URIError，只会在使用encodeURI()或decodeURI()但传入了格式错误的。TypeError 在JavaScript 中很常见，主要发生在变量不是预期类型，或者访问不存在的方法时。这个类型并不是代码中通常要处理的错误，如果真发生了这种错误，很可能代码哪里弄错。
2025-04-04 12:22:32
103
原创 javascript七基础学习系列四千五百九十八：try/catch 语句
这个函数报告错误，就有必要通过try/catch 语句把该函数调用包装起来，对可能的错误进行处理。当try/catch 中发生错误时，浏览器会认为错误被处理了，因此就不会再使用本章前面提到的机。如果你明确知道自己的代码会发生某种错误，那么就不适合使用try/catch 语句。换句话说，浏览器会像通常一样报告这个错误，最终显示这个自定义错误。如果应用程序的用户不懂技术，那么他们即使看到错误也看不懂，这是一个理想的结果。使用throw 操作符时，代码立即停止执行，除非try/catch 语句捕获了抛出的值。
2025-04-04 12:22:02
259
原创 javascript七基础学习系列四千五百九十六：使用对称密钥加密和解密
SubtleCrypto 对象支持使用公钥和对称算法加密和解密消息。 postMessage() API 支持从不同源跨文档发送消息，同时保证安全和遵循同源策略。 Encoding API 用于实现字符串与缓冲区之间的无缝转换（越来越常见的操作）。加密消息需要传入参数对象以指定算法和必要的值、加密密钥和要加密的数据。 媒体元素和拥有自己的API，用于操作音频和视频。 File API 提供了发送、接收和读取大型二进制对象的可靠工具。 Streams API 支持以全新的方式读取、写入和处理数据。
2025-04-04 12:21:31
158
原创 javascript七基础学习系列四千五百九十一：使用SubtleCrypto 对象
SHA-256”、"SHA-384"或"SHA-512"指定。范支持其中3 种：SHA-256、SHA-384 和SHA-512。生成的消息摘要可以是256 位（SHA-256）、TextDecoder 是经常与SubtleCrypto 一起使用的类，用于实现二进制数据与字符串之间的相互转换。384 位（SHA-384）或512 位（SHA-512）。通常，在使用时，二进制的消息摘要会转换为十六进制字符串格式。这个对象包含一组方法，用于执行常见的密码学功能，如加密、散列、签名和生成密钥。
2025-04-04 12:20:41
193
原创 javascript七基础学习系列四千五百九十：Web Cryptography API
所谓“伪”指的是生成值的过程不是真的随机。被称为置换循环（permutation cycle），而这个循环的长度被称为一个周期（period）。要使用CSPRNG 重新实现Math.random()，可以通过生成一个随机的32 位数值，然后用它去除。PRNG 生成的值只是模拟了随机的特性。由于算法本身是固定的，其输入只是之前的状态，因此随机数顺序也是确定的。者知道PRNG 的内部状态，就可以预测后续生成的伪随机值。明显比常规PRNG 慢很多，但CSPRNG 生成的值就很难预测，可以用于加密了。
2025-04-04 11:16:11
170
原创 javascript七基础学习系列四千五百八十九：反射自定义元素属性
类似地，CustomElementRegistry.whenDefined()方法会返回一个期约，当相应自定义元素。如果自定义元素已经有定义，那么CustomElementRegistry.get()方法会返回相应自定义元素。如果自定义元素已经有定义，那么CustomElementRegistry.get()方法会返回相应自定义元素。另一个方向的反射（从DOM 到JavaScript 对象）需要给相应的属性添加监听器。并非始终可以先定义自定义元素，然后再在DOM 中使用相应的元素标签。
2025-04-04 11:15:29
138
原创 javascript七基础学习系列四千五百八十八：添加Web 组件内容
disconnectedCallback()：在每次将这个自定义元素实例从DOM中移除时调用。 connectedCallback()：在每次将这个自定义元素实例添加到DOM 中时调用。这样可以在自定义元素中实现高度的HTML 和代码重用，以及DOM封装。 constructor()：在创建元素实例或将已有DOM 元素升级为自定义元素时调用。因为每次将自定义元素添加到DOM 中都会调用其类构造函数，所以很容易自动给自定义元素添加。可以在自定义元素的不同生命周期执行代码。使用自定义元素生命周期方法。
2025-04-04 11:14:48
103
原创 javascript七基础学习系列四千五百八十七：事件重定向
当然，这些元素默认也不会做任何通用HTML 元素不能做的事。如果自定义元素继承了一个元素类，那么可以使用is 属性和extends 选项将标签指定为该自定义。建自定义的、复杂的和可重用的元素，而且只要使用简单的HTML 标签或属性就可以创建相应的实例。自定义元素为HTML 元素引入了面向对象编程的风格。逃出后，事件就好像是由影子宿主本身而非真正的包装元素触发的一样。注意，事件重定向只会发生在影子DOM中实际存在的元素上。元素不会发生事件重定向，因为从技术上讲，这些元素仍然存在于影子DOM 外部。
2025-04-04 11:13:45
97
原创 javascript七基础学习系列四千五百八十六：合成与影子DOM 槽位
带有slot="foo"属性的元素会被投射到带有name="foo"的上。注意，虽然在页面检查窗口中看到内容在影子DOM中，但这实际上只是DOM内容的投射（projection）。位于影子宿主中的HTML需要一种机制以渲染到影子DOM中去，但这些HTML又不必属于影子DOM树。影子DOM 一添加到元素中，浏览器就会赋予它最高优先级，优先渲染它的内容而不是原来的文本。现在，投射进去的内容就像自己存在于影子DOM 中一样。在这个例子中，由于影子DOM是空的，因此。会在1000 毫秒后变成空的。
2025-04-04 11:13:10
231
原创 javascript七基础学习系列四千五百八十四：影子DOM
概念上讲，影子DOM（shadow DOM） Web 组件相当直观，通过它可以将一个完整的DOM 树作为节点添加到父DOM 树。这样可以实现DOM 封装，意味着CSS 样式和CSS 选择符可以限制在影子DOM子树而不是整个顶级DOM树中。影子DOM 与HTML 模板很相似，因为它们都是类似document 的结构，并允许与顶级DOM 有一定程度的分离。不过，影子DOM 与HTML 模板还是有区别的，主要表现在影子DOM的内容会实际渲染到页面上，而HTML 模板的内容不会。
2025-04-04 11:11:24
265
原创 javascript七基础学习系列四千五百八十三：使用＜template＞标签
注意，在前面的例子中，DocumentFragment 的所有子节点都高效地转移到了foo 元素上，转移。脚本执行可以推迟到将DocumentFragment 的内容实际添加到DOM 树。下面的例子演示了这个。之后DocumentFragment 变空了。如果新添加的元素需要进行某些初始化，这种延迟执行是有用的。
2025-04-04 11:10:48
138
原创 javascript七基础学习系列四千五百八十二：Web 组件
相反，更好的方式是提前在页面中写出特殊标记，让浏览器自动将其解析为DOM子树，但跳过渲染。这正是HTML 模板的核心思想，而标签正是为这个目的而生的。比如，我们想以最快的方式给某。由于存在这些问题，因此使用Web 组件通常需要引入一个Web 组件库，比如Polymer。 并没有统一的“Web Components”规范：每个Web 组件都在一个不同的规范中定义。这里所说的Web 组件指的是一套用于增强DOM 行为的工具，包括影子DOM、自定义。在浏览器中渲染时，上面例子中的文本不会被渲染到页面上。
2025-04-04 11:10:09
229
原创 javascript七基础学习系列四千五百八十一：Navigation Timing API
Navigation Timing API 提供了高精度时间戳，用于度量当前页面加载速度。浏览器会在导航事件发生时自动记录PerformanceNavigationTiming 条目。加载资源时自动记录PerformanceResourceTiming。这个对象会捕获大量时间戳，用于描述资源加。Resource Timing API 提供了高精度时间戳，用于度量当前页面加载时请求资源的速度。通过计算并分析不同时间的差，可以更全面地审视浏览器加载页面的过程，发现可能存在的性能瓶颈。何时以及如何加载的。
2025-04-03 11:10:50
186
原创 javascript七基础学习系列四千五百八十：Performance Timeline API
Performance Timeline API 使用一套用于度量客户端延迟的工具扩展了Performance 接口。这个返回的集合代表浏览器的性能时间线（performance timeline）。浏览器会自动记录各种PerformanceEntry 对象，而使用performance.mark()也可以记录自定。除了自定义性能条目，还可以生成PerformanceMeasure（性能度量）条目，对应由名字作为标。值，而封装这个时间戳的对象是PerformanceEntry 的实例。
2025-04-03 11:09:59
272
原创 javascript七基础学习系列四千五百七十九 ：计时API
window.performance.now()，这个方法返回一个微秒精度的浮点值。因此，使用这个方法先后捕获的时间戳更不可能出现相等的情况。Date.now()只有毫秒级精度，如果foo()执行足够快，则两个时间戳的值会相等。打开页面或创建工作线程时，performance.now()就会从0 开始计时。始化时可能存在时间差，因此不同上下文之间如果没有共享参照点则不可能直接比较performance.now()。Date.now()方法只适用于日期时间相关操作，而且是不要求计时精度的操作。
2025-04-03 11:09:29
82
原创 javascript七基础学习系列四千五百七十八：通过管道连接流
从内部看，ReadableStream 先把自己的值传给TransformStream 内部的。WritableStream，然后执行转换，接着转换后的值又在新的ReadableStream 上出现。流可以通过管道连接成一串。注意，这里的管道连接操作隐式从ReadableStream 获得了一个读取器，并把产生的值填充到。// 每1000 毫秒生成一个递增的整数。// 每1000 毫秒生成一个递增的整数。// 从连接流的输出获得读取器。// 通过管道连接流。
2025-04-03 11:08:47
188
原创 javascript七基础学习系列四千五百七十七：转换流
转换流用于组合可读流和可写流。数据块在两个流之间的转换是通过transform()方法完成的。// 每1000 毫秒生成一个递增的整数。// 每1000 毫秒生成一个递增的整数。// 每1000 毫秒生成一个递增的整数。
2025-04-03 11:06:18
281
原创 javascript七基础学习系列四千五百七十五：WebGL1 与WebGL2
第二种是3D 上下文，也就是WebGL。WebGL 是浏览器对OpenGL ES 2.0 的实现。requestAnimationFrame 是简单但实用的工具，可以让JavaScript 跟进浏览器渲染周期，从而更。HTML5 的元素为JavaScript 提供了动态创建图形的API。是游戏图形开发常用的一个标准。在WebGL2 中，很多扩展都变成了默认功能。 支持定型数组，限定数组中包含数值的类型；目前所有主流浏览器的较新版本都已经支持标签。// 没有扩展的代码。 创建和操作纹理。
2025-04-03 11:03:36
192
原创 javascript七基础学习系列四千五百七十四：影子DOM
概念上讲，影子DOM（shadow DOM） Web 组件相当直观，通过它可以将一个完整的DOM 树作为节点添加到父DOM 树。这样可以实现DOM 封装，意味着CSS 样式和CSS 选择符可以限制在影子DOM子树而不是整个顶级DOM树中。影子DOM 与HTML 模板很相似，因为它们都是类似document 的结构，并允许与顶级DOM 有一定程度的分离。不过，影子DOM 与HTML 模板还是有区别的，主要表现在影子DOM的内容会实际渲染到页面上，而HTML 模板的内容不会。
2025-04-03 10:58:25
284
原创 javascript七基础学习系列四千五百七十三：使用＜template＞标签
注意，在前面的例子中，DocumentFragment 的所有子节点都高效地转移到了foo 元素上，转移。脚本执行可以推迟到将DocumentFragment 的内容实际添加到DOM 树。下面的例子演示了这个。之后DocumentFragment 变空了。如果新添加的元素需要进行某些初始化，这种延迟执行是有用的。
2025-04-03 10:56:59
198
原创 javascript七基础学习系列四千五百七十二：Web 组件
相反，更好的方式是提前在页面中写出特殊标记，让浏览器自动将其解析为DOM子树，但跳过渲染。这正是HTML 模板的核心思想，而标签正是为这个目的而生的。比如，我们想以最快的方式给某。由于存在这些问题，因此使用Web 组件通常需要引入一个Web 组件库，比如Polymer。 并没有统一的“Web Components”规范：每个Web 组件都在一个不同的规范中定义。这里所说的Web 组件指的是一套用于增强DOM 行为的工具，包括影子DOM、自定义。在浏览器中渲染时，上面例子中的文本不会被渲染到页面上。
2025-04-03 10:56:27
252
原创 javascript七基础学习系列四千五百七十一：编写着色器
浏览器并不理解原生GLSL 代码，因此GLSL 代码的字符串必须经过编译并链接到一个着色器程序中。GLSL 是一种类似于C 的语言，专门用于编写OpenGL 着色器。这个着色器创建了一个新的包含4 项的数组（vec4），个着色器定义了一个uniform，包含颜色的4 个组件（vec4），保存在uColor 中。片段着色器必须返回一个值，保存到变量gl_FragColor 中，这个值表示绘制时使用的颜色。片段着色器与顶点着色器类似，只不过是通过uniform 传入数据。uColor 的值在着色器内不能改变。
2025-04-03 10:55:53
173
原创 javascript七基础学习系列四千五百七十：缓冲区
创建缓冲区要调用gl.createBuffer()方法，并使用gl.bindBuffer()方法将缓冲区绑定到。因此，调用gl.bufferData()虽然没有包含对buffer 的直接引用，但仍然是。如果WebGL 代码没有产出想要的输出结果，那么可以调用几次getError()，这样有可能帮你找到问题所在。法后，调用gl.getError()方法。调用gl.bindBuffer()将buffer 设置为上下文的当前缓冲区。gl.bufferData()方法的最后一个参数表示如何使用缓冲区。
2025-04-03 10:55:20
232
原创 javascript七基础学习系列四千五百六十九：常量
在WebGL 中，context 对象上的常量则不包含GL_前缀。中的glClear()方法。参数gl.COLOR_BUFFER_BIT 告诉WebGL 使用之前定义的颜色填充画布。OpenGL（同时也是WebGL）中的很多方法会包含相关的数据类型信息。以上代码把清理颜色缓冲区的值设置为黑色，然后调用clear()方法，这个方法相当于OpenGL。参数的方法，会通过方法名的后缀体现这些信息。表示参数数量的数字（1~4）在先，表示数据类型的。参数，而gl.uniform3i()表示需要3 个整数值参数。
2025-04-03 10:54:49
142
原创 javascript七基础学习系列四千五百六十八：WebGL
本节假设读者了解OpenGL ES 2.0 的基本概念，并简单介绍OpenGL ES 2.0 在WebGL 中实现的部分。在完全支持的浏览器中，WebGL 2.0 上下文的名字叫"webgl2"，WebGL 1.0 上下文的名字叫。 preserveDrawingBuffer：布尔值，表示绘图完成后是否保留绘图缓冲区，默认为false。 antialias：布尔值，表示是否使用默认机制执行抗锯齿操作，默认为true。 alpha：布尔值，表示是否为上下文创建透明通道缓冲区，默认为true。
2025-04-03 10:54:16
283
原创 javascript七基础学习系列四千五百六十七：合成
destination-over：新图形绘制在原有图形下面，重叠部分只有原图形透明像素下的部分可见。 destination-atop：新图形绘制在原有图形下面，原有图形与新图形不重叠的部分完全透明。 destination-in：新图形绘制在原有图形下面，画布上只剩下二者重叠的部分，其余部分完全。 destination-out：新图形与原有图形重叠的部分完全透明，原图形其余部分不受影响。 source-atop：新图形只绘制出与原有图形重叠的部分，原有图形不受影响。
2025-04-03 10:53:37
217
原创 javascript七基础学习系列四千五百六十六：图案
background-repeat 属性是一样的，包括"repeat"、“repeat-x”、“repeat-y"和"no-repeat”。和data，其中，data 属性是包含图像的原始像素信息的数组。接收4 个参数：要取得数据中第一个像素的左上角坐标和要取得的像素宽度及高度。例如，要从(10, 5)记住，跟渐变一样，图案的起点实际上是画布的原点(0, 0)。每次循环中取得红、绿、蓝的颜色值，计算出它们的平均值。然后再把原来的值修改为这个平均值，实际上相当于过滤掉了颜色信息，只留下类似亮度的灰度信息。
2025-04-02 12:54:51
359
原创 javascript七基础学习系列四千五百六十四：绘制图像
最终，原始图像中只有一部分会绘制到画布上。如果想把现有图像绘制到画布上，可以使用drawImage()方法。的图像、源图像x 坐标、源图像y 坐标、源图像宽度、源图像高度、目标区域x 坐标、目标区域y 坐标、的图像、源图像x 坐标、源图像y 坐标、源图像宽度、源图像高度、目标区域x 坐标、目标区域y 坐标、的图像、源图像x 坐标、源图像y 坐标、源图像宽度、源图像高度、目标区域x 坐标、目标区域y 坐标、的图像、源图像x 坐标、源图像y 坐标、源图像宽度、源图像高度、目标区域x 坐标、目标区域y 坐标、
2025-04-02 12:54:18
198
原创 javascript七基础学习系列四千五百六十三：变换
会被放到一个暂存栈中。 transform(m1_1, m1_2, m2_1, m2_2, dx, dy)：像下面这样通过矩阵乘法直接修改矩阵。 setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy)：把矩阵重置为默认值，再以传入的。 translate(x, y)：把原点移动到(x, y)。执行这个操作后，坐标(0, 0)就会变成(x, y)。标移动到(100, 100)，并再次调用save()，保存设置。有计算都是基于(0, 0)，而不是(100, 100)了。
2025-04-02 12:53:37
259
原创 javascript七基础学习系列四千五百六十二：绘制文本
textAlign：指定文本的对齐方式，可能的值包括"start"、“end”、“left”、“right"和。推荐使用"start"和"end”，不使用"left"和"right"，因为前者无论在从左到右。文本底部，“hanging”、"alphabetic"和"ideographic"分别引用字体中特定的基准点。文本和图像混合也是常见的绘制需求，因此2D绘图上下文还提供了绘制文本的方法，即fillText()表示文本的左侧坐标，而"end"会让x 坐标在从左到右书写的语言中表示文本的右侧坐标。
2025-04-02 12:53:07
271
原创 javascript七基础学习系列四千五百六十一：绘制路径
arc(x, y, radius, startAngle, endAngle, counterclockwise)：以坐标(x, y)为圆。 bezierCurveTo(c1x, c1y, c2x, c2y, x, y)：以(c1x, c1y)和(c2x, c2y)为控制点， quadraticCurveTo(cx, cy, x, y)：以(cx, cy)为控制点，绘制一条从上一点到(x, y)如果路径已经完成，则既可。 moveTo(x, y)：不绘制线条，只把绘制光标移动到(x, y)。
2025-04-02 12:52:13
388
原创 javascript七基础学习系列四千五百六十：2D 绘图上下文
以上代码先将fillStyle 设置为红色并在坐标点(10, 10)绘制了一个宽高均为50 像素的矩形。strokeRect()方法使用通过strokeStyle 属性指定的颜色绘制矩形轮廓。2D 绘图上下文提供了绘制2D 图形的方法，包括矩形、弧形和路径。着，使用rgba()格式将fillStyle 设置为半透明蓝色，并绘制了另一个与第一个部分重叠的矩形。通过先绘制形状再擦除指定区域，可以创建出有趣的效果，比如从已有矩形中开个孔。以上代码同样绘制了两个重叠的矩形，不过只有轮廓，而不是实心的。
2025-04-02 12:51:39
262
原创 javascript七基础学习系列四千五百五十九：基本的画布功能
与其他元素一样，width 和height 属性也可以在DOM 节点上设置，因此可以随时修改。例如，要从画布上导出一张PNG 格式的图片，可以这。因为这个方法是后来才增加到规范中的，所以支持的浏览器也是在后面的版本实现的，使用元素时，最好先测试一下getContext()方法是否存在。可以使用toDataURL()方法导出元素上的图像。出现在开始和结束标签之间的内容是后备数据，会在浏览器不支持元素时显示。素还可以通过CSS 添加样式，并且元素在添加样式或实际绘制内容前是不可见的。// 确保浏览器支持。
2025-04-02 12:51:08
108
原创 javascript七基础学习系列四千五百五十八：手势事件
一个手指放到屏幕上时，gesturestart 事件会首先触发，然后紧接着触发这个手指的touchstart。如果两个手指或其中一个手指移动，则会触发gesturechange 事件。与触摸事件类似，每个手势事件的event 对象都包含所有标准的鼠标事件属性：bubbles、与触摸事件的例子一样，以上代码简单地将每个事件对应到一个处理函数，然后输出每个事件的信息。只有在两个手指同时接触事件接收者时，这些事件才会触发。幕，就会触发gestureend 事件，紧接着触发该手指的touchend 事件。
2025-04-02 12:50:34
118
原创 javascript七基础学习系列四千五百五十七：devicemotion 事件
accelerationIncludingGravity：对象，包含x、y 和z 属性，反映各个维度的加速信息， interval：毫秒，距离下次触发devicemotion 事件的时间。 acceleration：对象，包含x、y 和z 属性，反映不考虑重力情况下各个维度的加速信息。本节介绍的事件只适用于触屏设备。 rotationRate：对象，包含alpha、beta 和gamma 属性，表示设备朝向。当devicemotion 事件触发时，event 对象中包含如下额外的属性。
2025-04-02 12:49:51
639
原创 javascript七基础学习系列四千五百五十六：设备事件
设备事件可以用于确定用户使用设备的方式。W3C 在2011 年就开始起草一份新规范，用于。随着智能手机和平板计算机的出现，用户与浏览器交互的新方式应运而生。为此，一批新事件被发。定义新设备及设备相关的事件。
2025-04-02 12:49:13
254
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人