一、条件分支语句
条件分支语句每次只执行多种情况中的一种情况。
1.if 语句
语法格式：
if (condition){
// 当 condition==true 时执行的语句块
}
2.if-else 语句
语法格式：
if (condition){
// 当 condition==true 时执行的语句块1
} else {
// 当 condition==false 时执行的语句块2
}
3.else-if语句
语法格式：
if (condition1){
// 当 condition1==true 时执行的语句块1
} else if (condition2){
// 当 condition2==true 时执行的语句块2
} else {
// 当 condition1==false && condition2==false 时执行的语句块3
}
4.swich 语句
语法格式：
switch(n){
case n1:
执行代码块 1
break;
case n2:
执行代码块 2
break;
default:
与 case n1 和 case n2 不同时执行的代码块3
}
break语句在这里的作用是跳出这个switch语句块。如果不使用break,成立的case后的代码都会接着执行，用了break,就可以跳出这个switch语句块。
二、循环语句
1.for 循环
for语句的基本语法如下：
for (循环变量初始化;循环终止条件;增量){
循环体;
}
在该循环结构中，当条件成立时，执行语句1，否则跳出循环体。
2.while 循环
while语句的语法：
while(循环终止条件){
循环体
}
while循环重复执行一段代码，直到某个条件不再满足。
while语句属于前测试循环语句，在循环体内的代码被执行之前，就会对出口的条件求值。因此，循环体内的代码有可能永远不会被执行。
3.do-while循环
do-while语句的语法：
do{
循环体
}while(循环终止条件)
do-while循环语句是一种后测试循环语句，即只有在循环体中的代码执行之后，才会测试出口条件。在对条件表达式求值之前，循环体内的代码至少被执行一次。
三、函数介绍
函数的基本语法如下：
function functionName(arg0, arg1, arg2 ... argn){
statements;
}
函数可以通过其函数名来调用，后面还有加上一对圆括号和参数，圆括号中的参数如果有多个，可以用逗号隔开。
在JavaScript中定义函数的时候，不必指定是否有返回值，不过任何函数在任何时候都可以通过return语句后跟要返回的值来实现返回值。示例：
function add(num1, num2){
return num1 + num2;
}
var result = add(3, 5);
alert(result); // 8
四、DOM介绍
1.介绍
DOM全称 Document Object Model，即文档对象模型。将文档抽象成一个树型结构，文档中的标签、标签属性或标签内容可以表示为树上的结点。如图所示。
2.获取HTML元素节点的方法
- getElementById(id) ：获取指定ID的元素，这个是常用的方法。
var element=document.getElementById("intro");
- getElementsByClassName(className) ：返回一个包含指定class名称的的元素数组
- getElementsByTagName(elementName) ：返回一个指定标签名称的的元素数组
3.操作节点属性的方法
通常我们在使用 document 对象来获取节点时，返回的节点类型就是 Element 类型，所以我们想要对获取的节点进行操作，我们只需要使用 Element 包含的属性和方法即可。获取到属性后，可直接对其赋值进行修改。
- innerHTML 属性：获取元素内容
- 获取属性并进行修改：
document.getElementById("p1").innerHTML="New text!";//将id为p1的元素内容修改为New text!
document.getElementById('result').value = "";//将id为result的输入框的值设为空。
五、事件与回调函数
- JavaScript语言将任务的执行模式可以分成两种：同步（Synchronous）和异步（Asychronous）。
- “同步模式”就是一个任务完成之后，后边跟着一个任务接着执行；程序的执行顺序和排列顺序是一直的；”异步模式”则完全不同，每一个任务都有一个或者多个回调函数（callback），前一个任务结束的时候，不是执行下一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务顺序不一致的，异步的。
- 回调函数和事件监听就是最基本的“异步模式”处理方法。
1.回调函数
- 回调函数具体的定义为：函数A作为参数(函数引用)传递到另一个函数B中，并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式)，就叫做匿名回调函数。
- 回调函数不一定用于异步，一般同步(阻塞)的场景下也经常用到回调，比如要求执行某些操作后执行回调函数。
- 回调函数，一般在同步情境下是最后执行的，而在异步情境下有可能不执行，因为事件没有被触发或者条件不满足。
- 回调函数简单，容易理解和部署。但是不利于代码的阅读，和维护，各部分之间高度耦合，流程会很混乱，而且每一个任务只能指定一个回调函数。
2.事件
- 事件监听采用事件驱动模式，任务的执行不取决代码的顺序，而取决于某一个事件是否发生。
- 常用的事件
1.onclick：当用户点击某个对象时调用。示例代码：
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
function myFunction(){
document.getElementById("demo").innerHTML="Hello World";
}
- ondblclick：当用户双击某个对象时调用
- onmousedown：鼠标按钮被按下
- onkeydown：某个键盘按键被按下
- onfocus：元素获取焦点时触发
- 不同事件使用的方法类似，还有很多其他的事件，可在使用时查看参考手册。
六、对象介绍
JavaScript对象就是一组属性和方法（函数）的集合。
1.创建对象
- 使用字面量表示法：
var book = {
title: 'Music',
author: 'Bob',
year: 2017
};
- 使用new关键字：
var o = new Object();
2.表示法
- 点表示法
console.log(book.title); // Music
- 括号表示法
console.log(book['title']); //Music
3.设置对象成员
因为JavaScript的对象是动态类型, 建立完对象后,还可以修改、添加或删除。
- 修改：
book.title= 'Math'; - 添加：
book.subTitle = 'tech and others';
book['published date'] = 'future';
- 删除：
delete book.subTitle;
4.判断有无
'title' in book; //true
七、JSON
1.介绍
- JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是一种语法，用来序列化对象、数组、数值、字符串、布尔值和 null 。
- JSON 语法中数据是以键值对的形式存储的；不同数据项之间以逗号分隔；通过大括号来保存JSON对象；在JSON对象内容，数据的值也可以是数组，通过中括号来保存数组。
- 当2个程序（或服务器、语言等）需要交互通信的时候，倾向于使用string字符串。JSON可以在string上下文里描述对象，数组，字符串，数字，布尔型和null，然后通过程序间传输，并且反序列化成所需要的格式。
2.JSON.parse()
解析JSON字符串并返回对应的值，可以额外传入一个转换函数，用来将生成的值和其属性, 在返回之前进行某些修改。
var person = JSON.parse('{"name":"tws"}');
person.name; // tws
3.JSON.stringify()
返回与指定值对应的JSON字符串，可以通过额外的参数, 控制仅包含某些属性, 或者以自定义方法来替换某些key对应的属性值。
JSON.stringify({ name: "tws" }); // '{"name":"tws"}'
八、AJAX
1.介绍
- Ajax 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据。通过与 web 服务器交换数据，而不是每当用户作出改变时重载整个 web 页面，Ajax 技术可以使网页更迅速地响应。
- 一般使用 JSON 作为接收服务器数据的格式。
2.Ajax对象的创建过程：
1、创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
2、准备请求
xhr.open(method,url,async);
- 第一个参数表示请求类型的字符串，其值可以是GET或者POST。
- 第二个参数是要作为请求发送目标的URL。
- 第三个参数是true或false，表示请求是以异步还是同步的模式发出。（默认为true，一般不建议为false）
3、发送请求
xhr.send();
一般情况下，使用Ajax提交的参数多是些简单的字符串，可以直接使用GET方法将要提交的参数写到open方法的url参数中，此时send方法的参数为null或为空。
4、处理响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
}
八、Localstorage
1.介绍
- Localstorage主要是用来作为本地存储来使用的。在localStorage下一般浏览器支持的是5M大小，在不同的浏览器中localStorage会有所不同。
- localStorage只支持String类型的存储。
- localStorage是一种持久化的存储方式，也就是说如果不手动清除，数据就永远不会过期。
- 由于Localstorage在HTML5中才被提出，所以在使用localStorage的时候，需要先判断浏览器是否支持localStorage属性，示例如下：
if(!window.localStorage){
alert("浏览器支持localstorage");
return false;
} else {
// some code here...
}
2.Localstorage的方法
- 添加新的数据到Localstorage中存储
localStorage.setItem('name', 'tws'); //localStorage.setItem(keyName, keyValue);
- 返回指定keyName的Localstorage中存储的值
localStorage.getItem('name'); // "tws"
- 从Localstorage中移除指定keyName的数据项
localStorage.removeItem('name');
- 返回指定顺序的Localstorage中存储的键。
localStorage.key(1); // "name"
网友评论