JavaScript学习笔记（四十七）JSON
一、语法
JSON语法支持表示3种类型的值：
简单值：字符串、数值、布尔值和null可以在JSON中出现，就像在JavaScript中一样。特殊值undefined不可以。
对象：第一种复杂数据类型，对象表示有序键/值对。每个值可以是简单值，也可以是复杂类型。
数组：第二种复杂数据类型，数组表示可以通过数值索引访问的值的有序列表。数组的值可以是任意类型，包括简单值、对象,甚至其他数组。
JSON没有变量声明。
JSON没有变量、函数或对象实例的概念。JSON的所有记号都只为表示结构化数据
布尔值和null本身也是有效的JSON值。
JavaScript字符串与JSON字符串的主要区别是：JSON字符串必须使用双引号。
数组在 JSON 中使用 JavaScript 的数组字面量形式表示。
二、解析与序列化1、JSON对象
stringify()和parse()方法可用于将JavaScript序列化为JSON字符串，以及将JSON解析为原生JavaScript值。
如果给JSON.parse()传入的JSON字符串无效，则会导致抛出错误。
12345678910111213l ...
JavaScript学习笔记（四十六）动画与Canvas图形（二）
WebGL1、WebGL上下文
在完全支持的浏览器中：
**WebGL 2.0上下文的名字叫” webgl2”**；
**WebGL 1.0上下文的名字叫” webgl1”**。
检测浏览器是否支持WebGL：
12345678let drawing = document.getElementById("drawing"); // 确保浏览器支持<canvas> if (drawing.getContext) { let gl = drawing.getContext("webgl"); if (gl){ // 使用 WebGL } }
2、WebGL基础
可以在调用getContext ()取得WebGL上下文时指定一些选项。这些选项通过一个参数对象传入，选项就是参数对象的一个或多个属性。
12345678let drawing = document.getElementById("drawing"); // 确保浏览 ...
JavaScript学习笔记（四十五）动画与Canvas图形（一）
使用requestAnimationFrame1、早期定时动画
早期使用setInterval()控制动画的执行。
存在的问题：
无法准确知晓循环之间的延时。
不能保证时间精度。
12345678(function() { function updateAnimations() { doAnimation1(); doAnimation2(); // 其他任务 } setInterval(updateAnimations, 100); })();
2、requestAnimationFrame
requestAnimationFrame()
方法接收一个参数：要在重绘屏幕前调用的函数。这个函数就是修改DOM样式以反映下一次重绘有什么变化的地方。
为了实现动画循环，可以串联调用。12345678function updateProgress() { var div = document.getElementById("status" ...
JavaScript学习笔记（四十四）事件（二）
事件类型1、用户界面事件1）load事件
在window对象上，load事件会在整个页面（包括所有外部资源如图片、JavaScript文件和CSS文件)加载完成后触发。
可以通过两种方式指定load事件处理程序：
JavaScript方式；
向<body>元素添加onload属性。
123window.addEventListener("load", (event) => { console.log("Loaded!"); });
12345678<!DOCTYPE html> <html> <head> <title>Load Event Example</title> </head><body onload="console.log('Loaded!')"> </body> </html>
2）unload事件
与load事件相对。
u ...
JavaScript学习笔记（四十三）事件（一）
事件流
事件流描述了页面接收事件的顺序。
1、事件冒泡
IE事件流被称为事件冒泡。
事件被定义为从最具体的元素(文档树中最深的节点)开始触发，然后向上传播至没有那么具体的元素（文档)。
如下页面结构：
当点击页面中的div元素后，click事件会以如下顺序发生：
<div>
<body>
<html>
document123456789<!DOCTYPE html> <html> <head> <title>Event Bubbling Example</title> </head> <body> <div id="myDiv">Click Me</div> </body> </html>
2、事件捕获
由Netscape Communicator 团队提出。
事件捕获的意思是最不具体的节点应该最先收到事件，而最具体的节点应该最后收到事件。
事件捕获实际上是为了在事件到 ...
JavaScript学习笔记（四十二）DOM2和DOM3（三）
遍历
DOM2 Traversal and Range模块定义了两个类型用于辅助顺序遍历DOM结构。这两个类型NodeIterator和Treewalker从某个起点开始执行对DOM结构的深度优先遍历。
DOM遍历是**对DOM结构的深度优先遍历，至少允许朝两个方向移动(取决于类型)**。遍历以给定节点为根，不能在 DOM中向上超越这个根节点。
查看以下HTML：123456789<!DOCTYPE html> <html> <head> <title>Example</title> </head> <body> <p><b>Hello</b> world!</p> </body> </html>
DOM树如下：
1）NodeIterator
NodeIterator类型是两个类型中比较简单的，可以通过document.createNodeIterator()方法 ...
JavaScript学习笔记（四十一）DOM2和DOM3（二）
样式
HTML样式有3种定义方法：外部样式表、文档样式表、元素特定样式。
1、存取元素样式
任何支持style属性的HTML元素在JavaScript中都会有一-个对应的style属性。
style属性是cssstyleDeclaration类型的实例，其中包含通过HTML style属性为元素设置的所有样式信息，但不包含通过层叠机制从文档样式和外部样式中继承来的样式。
HTML style属性中的CSS属性在JavaScript style对象中都有对应的属性。
因为CSS属性名使用连字符表示法（用连字符分隔两个单词，如background-image），所以在JavaScript中这些属性必须转换为驼峰大小写形式（如backgroundImage）。
大多数属性名会这样直接转换过来。但有一个CSS属性名不能直接转换，它就是float。因为float是JavaScript的保留字，所以不能用作属性名。DOM2 Style 规定它在style对象中对应的属性应该是cssFloat。
任何时候，只要获得了有效DOM元素的引用，就可以通过JavaScript来设置样式。
通过style属 ...
JavaScript学习笔记（四十）DOM2和DOM3（一）
DOM1(DOMLevel1)主要定义了HTML和XML文档的底层结构。
DOM2(DOMLevel2)和DOM3 ( DOM Level3 )在这些结构之上加入更多交互能力，提供了更高级的XML特性。
DOM2和DOM3是按照模块化的思路来制定标准的，每个模块之间有一定关联，但分别针对某个DOM子集。这些模式如下所示。
DOM Core:在DOM1核心部分的基础上，为节点增加方法和属性。
DOM Views:定义基于样式信息的不同视图。
DOM Events:定义通过事件实现DOM文档交互。
DOM Style:定义以编程方式访问和修改CSS样式的接口。
DOM Traversal and Range:新增遍历DOM文档及选择文档内容的接口。
DOM HTML:在DOM1 HTML部分的基础上，增加属性、方法和新接口。
DOM Mutation Observers:定义基于DOM变化触发回调的接口。这个模块是DOM4级模块，用于取代Mutation Events。
DOM的演进
DOM2和DOM3Core模块的目标是扩展DOMAPI,满足XML的所有需求并提供更好的错误处理和 ...
JavaScript学习笔记（三十九）DOM扩展（二）
专有扩展1、children属性
children属性是一个HTMLCollection，只包含元素的Element类型的子节点。
如果元素的子节点类型全部是元素类型，那children和childNodes中包含的节点应该是一样的。
12let childCount = element.children.length; let firstChild = element.children[0];
2、contains()方法
DOM编程中经常需要确定一个元素是不是另一个元素的后代。
IE引入了contains()方法，让开发者可以在不遍历DOM的情况下获取这个信息。
参数为待确定的目标节点；
如果目标节点是被搜索节点的后代，返回true；否则返回false。12// 这个例子测试<html>元素中是否包含<body>元素，在格式正确的HTML中会返回true。console.log(document.documentElement.contains(document.body)); // true
使用DOM Level 3的compareDocum ...
JavaScript学习笔记（三十八）DOM扩展（二）
HTML5
HTML5规范包含了与标记相关的大量 JavaSeript API定义。其中有的API与DOM重合，定义了浏览器应该提供的DOM扩展。
一、CSS类扩展1、getElementByClassName()
该方法暴露在document对象和所有HTML元素上。
方法接收一个参数：包含一个或多个类名的字符串；
返回类名中包含相应类的元素的NodeList；
如果提供了多个类名，则顺序无关紧要。12345// 取得所有类名中包含"username"和"current"元素// 这两个类名的顺序无关紧要let allCurrentUsernames = document.getElementsByClassName("username current"); // 取得 ID 为"myDiv"的元素子树中所有包含"selected"类的元素let selected = document.getElementById("myDiv").getElementsByC ...
