JavaScript基础（二）

2018-12-02 本文已影响0人夜阑w

一、条件分支语句

条件分支语句每次只执行多种情况中的一种情况。

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"

JavaScript基础（二）

一、条件分支语句

1.if 语句

2.if-else 语句

3.else-if语句

4.swich 语句

二、循环语句

1.for 循环

2.while 循环

3.do-while循环

三、函数介绍

四、DOM介绍

1.介绍

2.获取HTML元素节点的方法

3.操作节点属性的方法

五、事件与回调函数

1.回调函数

2.事件

六、对象介绍

1.创建对象

2.表示法

3.设置对象成员

4.判断有无

七、JSON

1.介绍

2.JSON.parse()

3.JSON.stringify()

八、AJAX

1.介绍

2.Ajax对象的创建过程：

八、Localstorage

1.介绍

2.Localstorage的方法

猜你喜欢

热点阅读