JavaScript

1.变量

变量的声明： 使用var关键字声明一个变量。

变量的赋值： 使用=为变量赋值。

声明和赋值同时进行：

2.数据类型

数据类型决定了一个数据的特征，比如：123和"123"，直观上看这两个数据都是123，但实际上前者是一个数字，而后者是一个字符串。

javascript有五种类型：

• 字符串型（String）
• 数值型（Number）
• 布尔型（Boolean）
• undefined型（Undefined）
• null型（Null）
• 这5种之外的类型都称为Object，所以总的来看JavaScript中共有六种数据类型。

typeof运算符

使用typeof操作符可以用来检查一个变量的数据类型。

使用方式：typeof 数据

代码示例：

String

String用于表示一个字符序列，即字符串。字符串需要使用 单引号 或 双引号 括起来。加引号都是字符串。

Number

Number 类型用来表示整数和浮点数，最常用的功能就是用来表示10进制的整数和浮点数。

Number表示的数字大小是有限的，如果超过了这个范围，则会返回 ±Infinity（代表无穷）。

Boolean

布尔型也被称为逻辑值类型或者真假值类型。

布尔型只能够取真（true）和假（false）两种数值。除此以外， 其它的值都不被支持。

Undefined

Undefined 类型只有一个值，即特殊的 undefined。

在使用 var 声明变量但未对其加以初始化时，这个变量的值就是 undefined。

注意：使用typeof对没有初始化和没有声明的变量，会返回“undefined”。

Null

ull 类型是第二个只有一个值的数据类型，这个特殊的值是 null。用于清空变量内容，表示空。

注意：从语义上看null表示的是一个空的对象，所以使用typeof检查null会返回一个Object。
 

运算符

数字，字符串都可加，减，乘，除

比较运算符

二个等号不准确，要三个等号。

语句

if

if有两个功能区，小括号和大括号，小括号用来表示大括号要不要执行。小括号中为true就执行。

if...else

if..else if..else

for

if+for

函数

函数返回值

可以使用 return 来设置函数的返回值，return后的值将会作为函数的执行结果返回，可以定义一个变量，来接收该结果。函数内部声明的变量无法被外界访问，所以需要使用返回值。

数组

数组也是对象的一种，数组是一种用于表达有顺序关系的值的集合的语言结构，也就是同类数据元素的有序集合。

数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据。但是在JavaScript中是支持数组可以是不同的元素，这跟JavaScript的弱类型有关，此处不用纠结，我们大多数时候都是相同类型元素的集合。数组内的各个值被称作元素，每一个元素都可以通过索引（下标）来快速读取，索引是从零开始的整数。

对象

对象是一个无序的数据存储方式，不再存在索引，能清晰标明每个数据的含义。

DOM，BOM的功能

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被结构化为 对象树 ：

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件

元素获取

方法	描述
document.getElementById(id)	通过元素 id 来查找元素。
document.getElementsByTagName(name)	通过标签名来查找元素。
document.getElementsByClassName(name)	通过类名来查找元素。
document.querySelector(CSS选择器)	通过CSS选择器选择一个元素。
document.querySelectorAll(CSS选择器)	通过CSS选择器选择多个元素。

document.getElementById()

文本修改 textcontent

document.getElementsByTagName(name),

伪数组模式

document.querySelectorAll(CSS选择器)

document.querySelector(CSS选择器)

样式处理

方法	描述
元素节点.innerText = new text content	改变元素的 inner Text。
元素节点.innerHTML = new html content	改变元素的 inner HTML。
元素节点.属性 = new value	改变 HTML 元素的属性值。
元素节点.setAttribute(attribute, value)	改变 HTML 元素的属性值。
元素节点.style.样式 = new style	改变 HTML 元素的行内样式值。

事件处理

属性	描述
onclick	当单击鼠标时运行脚本。
ondblclick	当双击鼠标时运行脚本。
onmousedown	当按下鼠标按钮时运行脚本。
onmouseup	当松开鼠标按钮时运行脚本。
onmousemove	当鼠标指针移动时运行脚本。
onmouseover	当鼠标指针移至元素之上时运行脚本，不可以阻止冒泡。
onmouseout	当鼠标指针移出元素时运行脚本，不可以阻止冒泡。
onmouseenter	当鼠标指针移至元素之上时运行脚本，可以阻止冒泡。
onmouseleave	当鼠标指针移出元素时运行脚本，可以阻止冒泡。
onmousewheel	当转动鼠标滚轮时运行脚本。
onscroll	当滚动元素的滚动条时运行脚本。

文本处理，innerhtml可以进行标签的生成。

ES6

变量和常量

let 关键字用来声明变量，使用 let 声明的变量有几个特点：

• 不允许重复声明
• 块儿级作用域
• 不存在变量提升
• 不影响作用域链

注意：以后声明变量使用 let 就对了

const 关键字用来声明常量，const 声明有以下特点：

• 不允许重复声明
• 块儿级作用域
• 声明必须赋初始值
• 值不允许修改
• 标识符一般为大写

注意：声明对象类型使用 const，非对象类型声明选择 let

模板字符串

解构赋值

针对数组

对象

箭头函数

匿名函数的简写方式。ES6 允许使用「箭头」（=>）定义函数

promise

异步与同步：

常见的异步：定时器和Ajax

异步任务会在当前同步任务触发完后再触发，跟时间没有关系。

promise就是解决异步嵌套的问题。

多个异步处理

async

异步操作简化功能：async搭配await使用

async 函数的返回值：

1. 返回的结果不是一个 Promise 类型的对象，返回的结果就是成功 Promise 对象
2. 返回的结果如果是一个 Promise 对象，具体需要看执行resolve方法还是reject方法
3. 抛出错误，返回的结果是一个失败的 Promise

async 和 await 两种语法结合可以让异步代码像同步代码一样

await 表达式的注意事项：

1. await 必须写在 async 函数中
2. await 右侧的表达式一般为 promise 对象
3. await 返回的是 promise 成功的值
4. await 的 promise 失败了, 就会抛出异常, 需要通过 try…catch 捕获处理

js实现滑动切换的注册登录界面