JavaScript 思维导图模板_ProcessOn思维导图、流程图

语法基础

书写区域

写在.js文件中，需要使用script标签引入

写在html的script标签中

写在标签的事件属性中

script标签使用

输出

alert();

缺点

可以被用户禁止

样式不可修改

阻塞

功能不可定制化

document.write();

console.log();

语法构成

区分大小写

标识符

注释

关键字

变量

概念

特点

命名规范

运算符

除法运算与java的不同

java

js

比较运算符

==

===

！=

！==

流程控制语句

for in循环

for of循环

方法

声明

调用

参数

arguments

return

定义

方法参数的默认值

方法表达式

回调

方法可以嵌套任意层

事件

绑定事件方式

在标签上使用事件属性

js访问事件属性

js访问addEventListener()方法

事件对象

event

事件冒泡

当一个事件点击以后，把事件传递给父元素

不同绑定方式的区别

this指向不同

标签绑定指向的Window

js绑定this指向的是标签

可见性

通过标签绑定在页面上可见

通过js绑定在页面上不可见

this关键字

this指向取决于运行这个代码的环境

this指向是可变的

新函数 = 函数名.bind（新的指向）；

js对象

创建对象

利用构造函数

function 函数名（a,b）{this.a = a;this.b = b;}

var 对象名 = new 函数名（a,b）;

利用Object模板

var 对象名 = new Object();

对象名.属性 = 值

JSON语法

var 对象名 = {“属性名”：“值”，“方法名”：function( ){ }   }

Ajax

概念

Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

作用

在不重新加载整个网页的情况下，对网页的某部分进行更新。

使用步骤

创建连接对象

var xhr = new XMLHTTPRequest()；

打开请求

xhr.open("get/post","url")

绑定处理函数

使用

xhr.onreadystatechange = function(){};

ajax的五种状态

0

未初始化

还没有调用send()方法

1

载入

已调用send()方法，正在发送请求

2

载入完成

send()方法执行完成，已经接收到全部响应内容

3

交互

正在解析响应内容

4

完成

响应内容解析完成，可以在客户端调用了

status

200

OK

404

未找到页面

获取ajax的状态

xhr.readyState

xhr.status

当 readyState 等于 4 且状态为 200 时，表示响应已就绪

发送请求

xhr.send();

其他

xhr.responseText

JSON

概念

一种轻量级的数据交换格式

JSON是一个序列化的对象或数组。

本质是一个字符串

作用

存储和交换数据

格式

[{"键":"值"，"键":"值"},{},{}]

值的内容

对象

用{ }表示

数组

用[ ]表示

字符串

用“ ”表示

数字

字面量

false、null、true

必须小写

方法

把对象转化为JSON字符串

JSON.stringify(对象名)

把JSON转化为对象

JSON.parse()

语言介绍

作用

组成部分

ECMAScript

DOM

BOM

特点

数据类型

基本数据类型

number

String

Boolean

null

undefined

对象类型（Object）

基本数据类型之间的转换

数字转字符串

数字 + ''

数字.toString()方法

String(数字)

new String(数字)

字符串转数字

parseInt(字符串)

parseFloat(字符串)

Number(x)

new Number(x)

其他类型转boolean

非零数字转boolean都是true，0转boolean是false

空字符串转boolean为false，其他为true

null和undefined转boolean都是false

boolean转数字和字符串

boolean转字符串

boolean转数字

typeof运算符和typeof()函数

内置对象

数学对象

字符串对象

数组对象

定义

var arr = [ ];

var arr = new Array( );

取值和赋值

取值：var x = 数组名[1];

赋值：数组名[1] = 1;

特点

长度可以任意改变

数组中可以放任意类型数据

遍历

普通for循环

for of循环

forEach

Arrays

from（）方法  将一个类似数组的数据转换为数组

时间对象

缺点

DOM模型

获取节点

getElementById()

getElementsByName

getElementsByTagName

getElementsByClassName

完整使用

document.getElementById();

分类

W3C DOM

操作节点内容

innerHTML

能识别标签

innerText

不能识别标签

完整使用

document.getElementById().innerText = ‘abcdefg’；

操作节点属性

setAttribute(属性名, 属性值);

getAttribute(属性名)

removeAttribute(属性名)

完整使用

document.getElementById().setAttribute('color','red')；

优缺点

HTML DOM

取值

dom对象.标准属性名字

完整使用

document.getElementById().className；

赋值

dom对象.标准属性名字 = 值

完整使用

document.getElementById().width= 100px；

document.getElementById().style.backgroundColor = red；

注意

class属性

该属性是关键字，访问class属性使用className

abc-def式属性

访问时使用abcDef

使用style属性中的属性

访问时可以 dom对象.style.属性

属性名

value 可获得input中的值

checked 为true多选框被选中

区别

HTML DOM不支持自定义属性，W3C DOM支持

HTML DOM能获取到看不见的属性值，W3C DOM不能

HTML DOM比W3C DOM功能强大

BOM模型

Window

代表浏览器的窗口

特点

所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

可以省略不写

Screen

包含用户屏幕的信息。

Location

获取当前页面地址（URL）并把浏览器重定向到新页面。

History

包含浏览器历史。

Navigator

包含有关访问者的信息。

即访问该网站的浏览器的信息

Timing

定时事件

分类

setTimeout(function, milliseconds)

setInterval(function, milliseconds)

Cookies

通过document.cookie创建cookie

弹出框

警告框

alert();

确认框

confirm();

会返回布尔值

提示框

prompt（）；

可输入内容