1、条件分支语句
（1）else-if语句
if (condition1){
// 当 condition1==true 时执行的语句块1
} else if (condition2){
// 当 condition2==true 时执行的语句块2
} else {
// 当 condition1==false && condition2==false 时执行的语句块3
}
（2）switch语句
switch(n){
case n1:
执行代码块 1
break;
case n2:
执行代码块 2
break;
default:
与 case n1 和 case n2 不同时执行的代码块3
}
- 这里的 n 是一个变量，若 n 与 n1 相等，则执行代码块1，若 n 与 n2 相等，则执行代码块2，若都不相等，则执行代码块3
- break语句在这里的作用是跳出这个switch语句块。如果不使用break,成立的case后的代码都会接着执行
2、循环语句
（1）for语句
for (循环变量初始化;循环终止条件;增量){
循环体;
}
（2）While 循环
while(循环终止条件){
循环体
}
（3）do-while循环(后测试循环)
do{
循环体
}while(循环终止条件)
3、函数
函数是一个执行特定功能的可重用的代码块。
（1）函数定义
在JavaScript中，我们使用function关键字来定义函数，后面跟一组参数以及函数体。
function functionName(arg0, arg1, arg2 ... argn){
statements;
}//无返回值
function add(num1, num2){
return num1 + num2;
}//有返回值
（2）函数调用
如下面例子，可用变量来接收函数的返回值
function add(num1, num2){
return num1 + num2;
}
var result = add(3, 5);
alert(result); // 8
4、DOM
DOM是 W3C（万维网联盟）的标准。定义了访问 HTML 和 XML 文档的标准：W3C 文档对象模型Document Object Model（DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
（1） DOM 节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
-
HTML DOM 节点树
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树，通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。
image.png
-
节点父、子和同胞
节点树中的节点彼此拥有层级关系。父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。- 在节点树中，顶端节点被称为根（root）
- 对于一个 HTML 来说，文档节点 Document （是看不到的）就是它的根节点，这个根节点对应的对象就是 document ，我们可以通过根节点来访问它的子节点(Element 、Text)。
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
（2）DOM方法
方法是我们可以在节点（HTML 元素）上执行的动作。
- 编程接口
- 可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。
- 所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。
- 一些常用的 HTML DOM 方法：
- getElementById(id) - 获取带有指定 id 的节点（元素）
- appendChild(node) - 插入新的子节点（元素）
- removeChild(node) - 删除子节点（元素）
- appendChild() 把新的子节点添加到指定节点。
- removeChild() 删除子节点。
- replaceChild() 替换子节点。
- insertBefore() 在指定的子节点前面插入新的子节点。
- createAttribute() 创建属性节点。
- createElement() 创建元素节点。
- createTextNode() 创建文本节点。
- getAttribute() 返回指定的属性值。
- setAttribute() 把指定属性设置或修改为指定的值
eg.
<!DOCTYPE html>
<html>
<body>
<p id="intro">Hello World!</p>
<script>
x=document.getElementById("intro");
document.write(x.innerHTML);//输出Hello World！
</script>
</body>
</html>
（3）DOM属性
属性是节点（HTML 元素）的值，能够获取或设置。
-
innerHTML 属性：获取元素内容
-
nodeName 属性
- nodeName 是只读的
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 与属性名相同
- 文本节点的 nodeName 始终是 #text
- 文档节点的 nodeName 始终是 #document
-
nodeValue 属性
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
-
nodeType 属性
eg.
<!DOCTYPE html>
<html>
<body>
<p id="intro" class="intr">Hello World!</p>
<script>
x=document.getElementById("intro");
document.write(x.nodeValue);//Hello World!
document.write(x.nodeName);//null
document.write(x.nodeType);//P
document.write(x.id);//intro
document.write(x.className);//intr
document.write(x.tagName);//P
</script>
</body>
</html>
5、HTLM DOM事件
HTML DOM 允许 JavaScript 对 HTML 事件作出反应。
- 当用户点击鼠标时
- 当网页已加载时
- 当图片已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户触发按键时
-
onload 和 onunload 事件
当用户进入或离开页面时，会触发 onload 和 onunload 事件。 - onchange 事件常用于输入字段的验证
- onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。
<!DOCTYPE html>
<html>
<body>
<div
onmouseover="mOver(this)"
onmouseout="mOut(this)"
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
Mouse Over Me
</div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢你"
}
function mOut(obj)
{
obj.innerHTML="把鼠标指针移动到上面"
}
</script>
</body>
</html>
- onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件。
<div
onmousedown="mDown(this)"
onmouseup="mUp(this)"
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
点击这里
</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="松开鼠标"
}
function mUp(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="谢谢你"
}
</script>
</body>
</html>
6、JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 2个程序（或服务器、语言等）需要交互通信的时候，他们倾向于使用string字符串因为string在很多语言里解析的方式都差不多。为了描述这些复杂的数据结构作为一个string字符串，制定了标准的规则和语法。JSON只是其中一种语法，它可以在string上下文里描述对象，数组，字符串，数字，布尔型和null，然后通过程序间传输，并且反序列化成所需要的格式。易于人阅读和编写。同时也易于机器解析和生成。
- JavaScript 与 JSON 的区别
let code = '"\u2028\u2029"';
JSON.parse(code); // 正常
eval(code); // 错误
-
JSON方法
- JSON.parse()解析JSON字符串并返回对应的值，构造由字符串描述的JavaScript值或对象。可以额外传入一个转换函数，用来将生成的值和其属性, 在返回之前进行某些修改。
var json = '{"result":true, "count":42}';
obj = JSON.parse(json);
console.log(obj.count);
// expected output: 42
console.log(obj.result);
// expected output: true
- JSON.stringify()方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串，如果指定了replacer是一个函数，则可以替换值，或者如果指定了replacer是一个数组，可选的仅包括指定的属性。
//布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。
JSON.stringify({x: 5, y: 6});
// "{"x":5,"y":6}"
//undefined、任意的函数以及 symbol 值，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被转换成 null（出现在数组中时）。
JSON.stringify([new Number(1), new String("false"), new Boolean(false)]);
// '[1,"false",false]'
JSON.stringify({x: undefined, y: Object, z: Symbol("")});
// '{}'
JSON.stringify([undefined, Object, Symbol("")]);
// '[null,null,null]'
JSON.stringify({[Symbol("foo")]: "foo"});
// '{}'
7、Ajax
Ajax 是 Asynchronous JavaScript And XML 的首字母缩写。Ajax并不是一种新的编程语言，而仅仅是一种新的技术，它可以创建更好、更快且交互性更强的 web 应用程序。Ajax 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据。通过与 web 服务器交换数据，而不是每当用户作出改变时重载整个 web 页面，Ajax 技术可以使网页更迅速地响应。
-
Ajax应用场景
- 场景 1. 数据验证
- 场景 2. 按需取数据
- 场景 3. 自动更新页面
-
Ajax对象的创建过程
// 1. 创建连接
var xhr = null;
xhr = new XMLHttpRequest()
// 2. 连接服务器
xhr.open('get', url, true)
// 3. 发送请求
xhr.send(null);
// 4. 接受请求
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
success(xhr.responseText); //执行success回调函数
} else {
// fail fail && fail(xhr.status);
}
}
}
-
XMLHttpRequest 对象用于在后台与服务器交换数据
创建语法：
xhr = new XMLHttpRequest()
-
onreadystatechange 事件：每当 readyState 改变时，就会触发 onreadystatechange 事件
image.png
-
Ajax请求的回调函数：
-
beforeSend
在发送请求之前调用，并且传入一个 XMLHttpRequest 作为参数。 -
error
在请求出错时调用。传入 XMLHttpRequest 对象，描述错误类型的字符串以及一个异常对象（如果有的话） -
dataFilter
在请求成功之后调用。传入返回的数据以及 "dataType" 参数的值。并且必须返回新的数据（可能是处理过的）传递给 success 回调函数。 -
success
当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。 -
complete
当请求完成之后调用这个函数，无论成功或失败。传入 XMLHttpRequest 对象，以及一个包含成功或错误代码的字符串。
-
8 、LocalStorage
localStorage特性，这个特性主要是用来作为本地存储来使用的。在localStorage下一般浏览器支持的是5M大小，这个在不同的浏览器中会有所不同。localStorage只支持String类型的存储。
- Localstorage的方法：
localStorage.setItem(keyName, keyValue); 添加新的数据到Localstorage中存储
localStorage.setItem('name', 'tws');
localStorage.getItem(keyName);返回指定keyName的Localstorage中存储的值
localStorage.getItem('name'); // "tws"
localStorage.removeItem(keyName);从Localstorage中移除指定keyName的数据项
localStorage.removeItem('name');
localStorage.key(index);返回指定顺序的Localstorage中存储的键。
localStorage.key(1); // "name"
localStorage.clear(); 清除所有的本地Localstorage存储 -
localStorage的优势
localStorage拓展了cookie的4K限制，为前端数据存储提供了新的思路
localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽 -
localstorage的不足
不同浏览器的存储大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
localStorage的值类型限定为String类型，许多使用场景下会有限制
localStorage在浏览器的隐私模式下面是不可读取的
localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
网友评论