Javascript – 个人随笔

JS 高级（一）数据类型转化、执行流程、错误处理、作用域

Mr.Lee — Sat, 19 May 2018 07:01:22 +0000

JavaScript高级（1）

一、概述

1、JavaScript简介

JavaScript被认为是客户端“脚本”，它不常叫“语言”，言外之意是比较简单，但是深入了解之后，你会发现简单的外表下，蕴藏着丰富的内涵。

JavaScript是由Netscape（网景）提出并发展，它起初名为“livescript”，后从营销角度考虑更名为“javascript”，但它和java没有直接关系，顶多是js被期望发展成java那样面向对象的语言（基于对象）。

现在JavaScript标准由ECMA（European Computer Manufactures Assiocation）制定和维护，因此也叫“ECMAScript”，它是包含了网景的Javascript和微软的Jscript，最新的js版本是ES6（ECMAScript6.0）。

作为客户端脚本的JavaScript常用于网页浏览器的开发，然则它的设计却是一种通用性的脚本语言，可以被嵌入任何应用，例如嵌入falsh脚本化falsh player 嵌入applet脚本化java。

JavaScript应该包含：ECMAScript、DOM、BOM

2、应用场景

① 数据验证（表单验证）

② 网页特效（目前大多数的网页特效都是通过JS编写）

③ 编写网页小游戏

④ 服务器端编程，数据交互（Ajax、Node.js）

二、JavaScript基础回顾

1、检测JavaScript的执行情况

document.write();

alert(); === window.alert();

console.log(); — 它可以输出任何类型的变量，而且可以一次性输出多个变量。可以看到数据的结构。

2、JavaScript变量

1、命名规则

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

2、一条语句，多个变量

3、只声明变量，没有赋初值

4、重新声明变量

3、常量

常量必须给初始值；

常量不能改变值；

常量不能重新定义；

使用const来声明常量。

4、运算符

1、算数运算符

加减乘除累加累减

2、赋值运算符

编程中，“=”表示赋值，意思是将等号后面的值赋值给等号前面的变量。

3、用于字符串的+运算符《》

js中用“+”连接字符串，类似于php中的“点”。

如果“+”前后都是数值型，那么“+”表示加法运算。

4、比较运算符

大于、小于、大于等于…. 全等于、不全等

== ：表示相等判断，只判断值是否想等，不考虑数据类型。比如5 == ‘5’ 结果为true

=== ：表示全等判断，即考虑值是否想等，也考虑数据类型是否相同。比如5===’5’，结果为false。

5、三元运算符（三目、条件）

PHP：

$res = isset($_GET[‘type’]) ? ‘a’ : ‘b’;

JavaScript：

var a = 5==’5′ ? ‘hello’ : ‘nihao’;

6、逻辑运算符

and &&

or ||

5、流程控制

循环：for while do…while for…in

跳出循环：break continue

循环结构另一种写法

案例：

查找质数（素数），只能被1和它本身整除的数就是质数。1既不是质数也不是和数。

质数举例：2,3,5,7,11,13

和数举例：4,6,8,9,10

用程序查找100以内的质数。

跳出循环：

break跳出循环，终止该循环

continue跳过当前这次循环，继续执行下一次循环

6、函数

1、定义

function functionName(参数列表){

函数体

//return

}

2、函数参数默认值

JavaScript中函数的参数不能有默认值。ES6中的函数才允许参数有默认值。目前IE11不支持函数参数有默认值，但是火狐、谷歌、UC支持。

如果就想实现y有默认值这种效果，怎么办？

3、函数参数不固定

使用arguments可以获取到函数的所有参数。

arguments[0]表示函数的第一个参数

arguments[1]表示函数的第二个参数

….

以此类推。

arguments.length表示函数参数的个数。

4、函数作为变量

另一种把函数当做另一个函数的参数的形式：

5、函数自调用

6、函数在内存中的形式

7、数组

声明数组的方式：

①、var arr = new Array(数组的单元1, 单元2, 单元3….);

②、var arr = new Array(数字); //数字表示数组元素的个数

③、var arr = [数组的单元1, 单元2, 单元3….];

用length表示数组元素的个数，数组的长度。

8、数据类型

1、类型种类

PHP有8中数据类型：

4种基本数据类型：bool、string、int、float

2种复合数据类型：array、object

2种特殊数据类型：null、resource

JavaScript有7种数据：

3种基本数据类型：string、bool、number

2种复合数据类型：array、object

2种特殊数据类型：null、undefined

2、判断数据类型

使用typeof来判断变量的数据类型：

undefined – 如果变量是 Undefined 类型的

boolean – 如果变量是 Boolean 类型的

number – 如果变量是 Number 类型的

string – 如果变量是 String 类型的

object – 如果变量是一种引用类型（数组、对象）或 Null 类型的

注释：您也许会问，为什么 typeof 运算符对于 null 值会返回 “object”。这实际上是 JavaScript 最初实现中的一个错误，然后被 ECMAScript 沿用了。现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。

三、数据类型转化

1、转化成字符串

1、使用toString()方法。

常规转化：

用法：变量.toString();

基模式：

基模式针对的是整型的变量。

1110 十进制：

0*2⁰ + 1*2¹ + 1*2² + 1*2³ = 0 + 2 + 4 + 8 = 14

14 二进制：辗转相除法，最后取余数

14/2 = 7 ….. 0

7/2 = 3 …… 1

3/2 = 1 …….1

1/2 = 0 …….1

将余数反过来就是结果：1110

2、使用String()强制类型转化。

强制类型转化使用的方法是String();

用法：String(变量);

2、转化成数字

1、转化成整型parseInt()

parseInt() 方法首先查看位置 0 处的字符，判断它是否是个有效数字；如果不是，该方法将返回 NaN（not a number），不再继续执行其他操作。但如果该字符是有效数字，该方法将查看位置 1 处的字符，进行同样的测试。这一过程将持续到发现非有效数字的字符为止，此时 parseInt() 将把该字符之前的字符串转换成数字。

字符串中包含的数字字面量会被正确转换为数字，比如 “0xA” 会被正确转换为数字 10。不过，字符串 “22.5” 将被转换成 22，因为对于整数来说，小数点是无效字符。

parseInt() 方法还有基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成十进制整数。基是由 parseInt() 方法的第二个参数指定的.

2、转化成浮点型parseFloat()

parseFloat() 方法与 parseInt() 方法的处理方式相似，从位置 0 开始查看每个字符，直到找到第一个非有效的字符为止，然后把该字符之前的字符串转换成整数。

不过，对于这个方法来说，第一个出现的小数点是有效字符。如果有两个小数点，第二个小数点将被看作无效的。parseFloat() 会把这个小数点之前的字符转换成数字。这意味着字符串 “11.22.33” 将被解析成 11.22。

使用 parseFloat() 方法的另一不同之处在于，字符串必须以十进制形式表示浮点数，而不是用八进制或十六进制。该方法会忽略前导 0，所以八进制数 0102 将被解析为 102。对于十六进制数 0xA，该方法将返回 NaN，因为在浮点数中，x 不是有效字符。（注释：经测试，具体的浏览器实现会返回 0，而不是 NaN。）

此外，parseFloat() 方法也没有基模式。

3、强制类型转化Number()

3、转化成布尔

当要转换的值是至少有一个字符的字符串(非空字符串)、非 0 数字或对象时，Boolean() 函数将返回 true。

如果该值是空字符串、数字 0、undefined 或 null，它将返回 false。

四、执行流程

1、全局环境

js在运行时，首先会创建一个全局执行环境，这个全局环境就是定义一个全局对象，页面中所有的内容（不同的script中的内容）都是这个全局对象的成员，在浏览器javascript中（嵌入网页的js）这个全局对象是window。

除此之外，还可以调用window对象中的a或者b，看一下window对象中是否有这两个成员。

2、执行流程

读一段（一个script标签）代码编译（分析词法、句法）执行（输出、调用）继续读下一段script

对于同一个script代码段中的函数来说，函数会预先加载。也就是说可以先调用函数，后声明函数。

但是不能在前一个script代码段中调用后一个script代码段中的函数。

3、错误类型

编译错误：对词法、句法的分析，也就是语法上有没有错误。

执行错误：输出、调用函数等。

如果出现语法上的错误，当前的script代码段的内容全部终止执行

如果发现执行错误，当前script代码段错误之前的代码还能够正常执行，错误之后的代码会终止执行。

无论发生哪种错误，都不会影响下一个script代码段。

4、异常处理

可以用try…catch…来处理。在js中，错误处理类是Error（类似于PHP中的Exception）。

自然抛出：

手动抛出：

五、作用域（链）

1、作用域分类

js中只有全局作用域和局部作用域，ES6中还有块作用域。

2、作用域

作用域就是变量有效的活动空间。比如函数内部的用var声明的变量，它的活动空间就是函数内部，那么函数内部就是改变量的作用域。

局部作用域：函数内部。

全局作用域：函数外部。

案例一：函数内部可以使用函数外部的变量

复杂一点的案例

案例二：函数外部不能够使用函数内部用var声明的变量

案例三：函数外部能够使用函数内部没有用var声明的变量

案例四：带参数的情况

4、作用域链

当访问一个变量的时候，首先看当前的作用域中是否有这个变量的声明，如果有，直接使用它，如果没有，那么去上一层作用域中查找，上一层作用域如果也没有该变量的声明，则继续向上一层作用域中查找，直到全局作用域。这个链式的查找方式就是作用域链。

六、事件

1、事件定义

事件由什么组成：

用户的行为（鼠标行为、键盘行为） + JavaScript引擎 + 事件表达式

2、事件表达式

3、事件绑定的三种方式

1、使用dom对象，绑定事件（动态绑定）

这种方式完全不用考虑html。

这种方式，就是获取要绑定事件的dom对象，然后给其绑定一个事件处理函数即可。

事件处理函数中的 this表示绑定该事件的dom对象。

2、行内绑定

直接在标签内绑定一个事件。

这种绑定事件的方式，js中的this表示当前的标签的dom对象。

3、行内绑定

这种绑定方式中的this表示window对象。

4、常用事件

页面事件

onload ：当页面载入完毕后触发

焦点事件

onfocus ：当获取焦点时触发

onblur ：当失去焦点时触发

鼠标事件

onmouseover ：当鼠标悬浮时触发

onmouseout ：当鼠标离开时触发

键盘事件

onkeypress ：当键盘按下时触发

onkeydown ：当键盘按下时触发

onkeyup ：当键盘弹起时触发

其他事件：

onclick ：单击事件

onchange ：改变选项时触发的事件（多用于select>option）

onresize：当窗口改变大小时触发的事件

onscroll：当滚动条滚动时，触发的事件

onsubmit：当表单提交时触发的事件

5、案例-点击页面中的li，能够显示它的下标

先找到页面中的li，然后用循环的方式给每个li都绑定一个单击事件

错误的输出方式：

正确的方式：

七、案例—标签页效果

JS高级（二）事件、JS闭包、DOM

Mr.Lee — Sat, 19 May 2018 06:56:20 +0000

JavaScript高级（2）

一、回顾与加强

1、JavaScript错误类型及特点

1、编译类型的错误

编译错误就是语法错误。

2、执行错误

语法上没有错误，结合上下午出现的错误，比如调用了一个不存在的变量或函数等。

2、事件

1、事件驱动式

事件驱动式由：用户的行为+JavaScript引擎捕获用户的行为+调用处理函数。实际上就是一个事件的组成。

2、事件处理函数的绑定与执行

①、行内绑定

在HTML标签内指定事件并写处理程序。

②、行内绑定—动态绑定

如果事件的处理程序又大段的js代码，那么直接写到行内，肯定是不合理的，解决的办法是将大段的js代码封装成函数，然后触发事件的时候，调用这个函数。

③、动态绑定

通过获取元素（标签、节点）的dom对象，然后给dom对象绑定事件的方式来实现事件的绑定。

3、在事件处理程序中，this分别表示什么

①、行内绑定

②、行内绑定—动态执行

③、动态绑定

二、闭包

1、概念

闭包，指的是词法表示包括不被计算的变量的函数，也就是说，函数可以使用函数之外定义的变量。

2、特点（作用）

1、和作用域的特定一致

可以在函数内部使用函数外部的变量。

2、使用闭包，内存不会释放

3、案例

1、点击页面中的三个li标签，能够正常输出li的下标

上面案例的另一种写法：

2、页面刷新后，每隔1秒分别输出1/2/3/4/5

三、DOM

1、什么是DOM

DOM全称是Document Object Model（文档对象模型），它是JS将HTML按文档结构和内容层次抽象出的模型，使得JS有了访问HTML的能力，能够实现对HTML中内容的操作。DOM存在广泛，PHP以及其他语言也有各自的DOM模型。

DOM模型呈现树状结构，因此也叫“树模型”，树中的内容（标签、属性、文本）称为“节点”，包含有元素节点（标签）、属性节点、文本节点。每个节点，都是一个dom节点对象。

2、节点与DOM模型

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点，用document对象表示

每个 HTML 元素是元素节点，比如html、head、body、a、h1

HTML 元素内的文本是文本节点

每个 HTML 属性是属性节点，比如href

注释是注释节点

3、节点之间的关系

4、元素节点查询操作

1、基于文档（document）查询

document.getElementById(元素id); //得到一个dom对象

document.getElementsByTagName(标签名); //得到的是一个数组，数组的每个单元是一个dom对象

前面这两种方法推荐使用，因为兼容性好。

document.getElementsByClassName(类名); //IE8+支持，就是从IE9支持得到的是一个数组，数组的每个单元是一个dom对象

document.getElementsByName(元素的name属性); //得到的是一个数组

//h5中提供的方法

document.querySelector(css选择器); //IE7+支持得到的是一个dom对象

document.querySelectorAll(css选择器); //IE7+支持得到的是一个数组

测试的html：

js代码及效果：

2、相互关系查询

①、根据父节点查找子节点

②、根据子节点查父节点

③、查询兄弟节点

3、遗留DOM

早期DOM访问形式，在一些特定元素的获取上比较方便。被保留下来使用，W3C标准化之后称为“0级DOM”。

document.body 访问body节点

document.forms 访问所有的表单返回集合

document.formName[index].name 访问表单项

document.anchors 访问所有的锚点返回集合

document.links 访问所有的链接返回集合

document.images 访问所有的图片返回集合

document.all 访问所有的元素

5、元素节点增删改操作

1、增加元素节点/创建节点

方法一：父节点.appendChild(子节点)

方法二：父节点.insertBefore(新节点, 参照的节点);

2、修改节点

方法：父节点.replaceChild(新节点, 待替换的节点);

3、删除节点

方法：父节点.removeChild(子节点);

6、属性节点操作

1、获取元素的属性

elementNode.attributes 获取元素的所有属性

elementNode.getAttribute() 读取一个属性值

elementNode.属性名获取元素的属性

2、添加/修改元素的属性

elementNode.setAttribute() 设置（修改/添加）一个属性值

elementNode.属性名 = 值设置元素的属性

3、删除元素的属性

elementNode.removeAttribute() 删除一个属性

4、判断元素是否有哪个属性

elementNode.hasAttribute() 检测是否有某个属性，有返回true，没有返回false

5、案例—全选，反选，取消

代码见19全选反选取消.html

7、操作css样式

1、设置css样式：

语法： node.style.css样式 = 值

不带中横线的css：node.style.样式 = 值。比如有color，border，width

带中横线的，样式要去掉中横线，后面的首字母大写，backgroundColor、fontSize、lineHeight

2、获取css样式

使用node.style.样式的方式只能获取行内样式和js已经设置过的样式。

在IE8及更低版本浏览器中支持node.currentStyle.样式

高版本浏览器支持getComputedStyle(node).样式

兼容的性的写法：

8、DOM属性

DOM有四个属性，分别是：

innerHTML

获取/设置元素里的html内容

nodeName

nodeName 是只读的

元素节点的 nodeName 与标签名相同

属性节点的 nodeName 与属性名相同

文本节点的 nodeName 始终是 #text

文档节点的 nodeName 始终是 #document

nodeValue

元素节点的 nodeValue 是 undefined 或 null

文本节点的 nodeValue 是文本本身

属性节点的 nodeValue 是属性值

nodeType

表示节点的类型

元素 1

属性 2

文本 3

注释 8

文档 9

案例：完成兼容性的查找子节点的方法，及查找上一个兄弟的方法，及查找下一个兄弟的方法

获取子元素的兼容性写法：

获取上一个兄弟的兼容性写法：

获取下一个兄弟的兼容性写法：

9、获取元素的位置

offsetLeft 元素在网页中水平坐标值 ele.offsetLeft

offsetTop 元素在网页中垂直坐标值 ele.offsetTop

offsetWidth 元素在页面中占据的宽度 ele.offsetWidth

offsetHeight 元素在页面中占据的高度 ele. offsetHeight

HTML+css：

js及输出结果：

scrollLeft 滚动条在容器中水平滚动的距离 ele.scrollLeft

scrollTop 滚动条在容器中垂直滚动的距离 ele.scrollTop

测试的时候，先将页面设置的大一点，能看到滚动条：

当滚动条滚动的时候，输出滚动的距离：

JS高级（三）Json、淡入、事件、冒泡事件、可编辑表格、内置对象

Mr.Lee — Sat, 19 May 2018 06:53:28 +0000

JavaScript高级（3）

0、知识点补充

查找节点：

firstChild lastChild：会把空白计算在内

firstElementChild lastElementChild ：只查找元素类型的子节点，不会计算空白，但是在IE8+才支持

克隆节点：cloneNode()

一、案例—淡入效果

1、做默认的html+css

2、每隔两秒生硬的变化

加入临界条件，控制inIndex和outIndex的范围：

3、创建一个设置透明图的方法

4、让图片慢慢变化

5、解决变化过程中，最后一张总是显示的问题

变化过程中，待显示的图片的透明度还没有达到1，也就是半透明状态，而其他图片的z-index值又都为1，z-index值相同的话，默认总是显示最后一张。

解决的办法，变化这一刻（在变化的1秒钟之内），待显示的图片的z-index设置为3，其他的图片的z-index的值设置为1，让待隐藏的图片的z-index值为2.

二、事件与事件对象

1、事件监听与移除事件监听

事件监听要解决的问是给一个dom对象绑定多个事件。

1、事件监听

针对IE8+及火狐浏览器，使用addEventLister()，在绑定事件的时候，不要写on。

针对IE8及更低版本浏览器使用attachEvent()，绑定的事件倒序执行。

写一个兼容性的函数：

2、移除事件监听

兼容性写法：

2、事件对象

事件对象存在于事件处理函数中。

事件对象就是描述当前事件的具体的情况的对象。这个对象根据事件的不同，内容可能会发生细微的变化，比如键盘事件，事件对象就会包括keyCode，比如单击事件，事件对象就会包含点击的坐标。

获取事件对象的兼容性写法：

shiftKey：表示是否按了shift键，如果按了返回true，没有按返回false

ctrlKey：表示是否按了ctrl键，如果按了返回true，没有按返回false

altKey：表示是否按了alt键，如果按了返回true，没有按返回false

keyCode：表示键盘的代码，是一个数字，每个键都会对应一个数字。具体查看“键盘KeyCode对照表.docx”

判断是否按了@键：

3、阻止冒泡事件

1、什么是冒泡事件？

在点击b这个div的时候，由于b在a的上面，也相当于点击了a。所以会触发两个事件，这种情况就是冒泡事件。

2、如何阻止冒泡行为

如果要阻止冒泡，

标准浏览器使用evt.stopPropagation()

IE内核浏览器使用window.event.cancelBubble = true;

4、阻止默认行为

比如表单提交或者超链接跳转，都会有一个地址，点击表单中的提交按钮或者超链接就会跳转到相应的地址。如果点击之后不希望这样跳转，就使用js方法阻止它，这就是阻止默认行为。

另外的方法：

三、案例—可编辑的表格

1、完成html+css布局

css：

2、隔行换色

3、找到包括名字的td，并绑定单击事件

4、点击td后，将input放到td中

设置input的样式，阻止产生多个input

5、给input绑定事件

四、面向对象概述

1、什么是对象

我喜欢大眼睛，长头发，大长腿，小蛮腰，会洗衣服，会做饭，会生孩子的女孩。比如有孙俪，范冰冰。

上面这句话中的“大眼睛，长头发，大长腿，小蛮腰，会洗衣服，会做饭，会生孩子”表示一类人，在程序中就是一个类。而孙俪，范冰冰是符合这类的人，在程序中就的对象。

2、面向对象编程

面向对象编程简称OOP（Object-Oritened Programming）为软件开发人员敞开了一扇大门，它使得代码的编写更加简洁、高效、可读性和维护性增强。它实现了软件工程的三大目标：（代码）重用性、（功能）扩展性和（操作）灵活性，它的实现是依赖于面向对象的三大特性：封装、继承、多态。在实际开发中使用面向对象编程可以实现系统化、模块化和结构化的设计它是每位软件开发员不可或缺的一项技能。

五、自定义对象

1、构造函数和类的说明

PHP中要声明一个对象的话，必须先声明一个类，然后通过关键字new实例化得到一个对象。

在js中，没有类的概念，只有构造函数的概念，js中会把构造函数当做类。

在ES6（ECMAScript6）中才引入了类的概念。

2、this关键字和成员

用this关键字，在构造函数中添加成员：

this表示根据Person实例化的每个对象。当前用的是哪个对象，this就表示哪个对象。

3、删除成员

使用的关键字是delete。delete关键字用于删除对象的成员，既可以删除成员属性，也可以删除成员方法。

4、练习

案例目的是设置dom对象的css样式：

使用的办法不是直接设置，而是将设置dom对象css样式写到对象的成员方法中

完成链式调用：

5、自定义对象在内存中的表现形式

创建一个对象后，会在内存中栈和堆都开辟一个新的空间，堆中存储的是对象的实际内容，栈区存放的是堆的地址。

删除其中一个对象，会不会对另外的对象有影响？

六、json格式的对象

1、json简介

json就是符合某种格式的字符串。

JavaScript 对象表示法（JavaScript Object Notation）。

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快，更易解析

JSON是独立于语言和平台的。所有的编程语言都认识JSON，这一点和XML一样。

2、json格式

有两种写法：

①：方括号在外层，和JavaScript中的数组格式一样。

[‘apple’, ‘banana’, ‘pear’, ‘orange’, ‘xigua’]

[{id:1, name:’宋江’, nickname:’及时雨’}, {id:2, name:’卢俊义’, nickname:’玉麒麟’},{id:1, name:’林冲’, nickname:’豹子头’}]

②、大括号在外，和JavaScript中的对象格式一样。

{键:值, 键:值, ….}

{键:[], 键:[], …}

只要是[]，就要符合中括号的语法（和数组写法一样）;

只要是大括号，就要符合大括号的语法（键:值, …）

3、json格式的对象

我们最终要讨论的是JavaScript的对象写法，只不过这种写法和json的格式一样。

成员属性和成员方法：

调用成员：

七、内置对象

手册位置：上面的JavaScript—左侧的JavaScript—右侧的参考书

1、Object

2、String对象

使用方法：

属性

length：表示字符串的长度。

方法：

indexOf() – 查找一个字符串是否存在，返回值是存在的位置（存在的情况），或-1（不存在）

substr() – 截取字符串。两个参数，第一个参数表示起始位置可以是负数；第二个参数可选，表示长度，非负，不填表示到结尾

substring() –截取字符串。两个参数，都是非负数。分别表示起始位置和结束位置，第二个参数不写表示到结尾

slice() –截取字符串。两个参数，第一个表示起始位置，可以是负数。第二个是结尾位置。注意结尾位置不能在起始位置之前。

split() – 将字符串分割成数组。两个参数，第一个表示分隔符，第二个可选表示数组的最大长度

replace – 替换字符串中的值。两个参数，第一个表示查找的值，第二个表示替换后的值。

3、Date对象

使用方法，先new Date()，得到一个对象，然后用这个对象调用它里面的成员方法。

4、Array对象

属性：

length，表示数组元素个数

方法：

concat() 连接两个或更多的数组，并返回结果。

join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

pop() 删除并返回数组的最后一个元素

push() 向数组的末尾添加一个或更多元素，并返回新的长度。

reverse() 颠倒数组中元素的顺序。

shift() 删除并返回数组的第一个元素

slice() 从某个已有的数组返回选定的元素

splice() 删除元素，并向数组添加新元素。

toString() 把数组转换为字符串，并返回结果。

unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

5、Math对象

方法：

abs(x) 返回数的绝对值。正数的绝对值是它本身，负数的绝对值是它的相反数。

ceil(x) 对数进行上舍入。

floor(x) 对数进行下舍入。

max(x,y) 返回 x 和 y 中的最高值。

min(x,y) 返回 x 和 y 中的最低值。

random() 返回 0 ~ 1 之间的随机数。包含0，不包含1。[0,1)

随机整数公式：Math.floor(i + Math.random() * (j – i + 1))

round(x) 把数四舍五入为最接近的整数。

6、window对象

方法：

alert(); — 弹出一个警告框

confirm(‘你确定要删除吗’); 点击确定返回true，点击取消返回false

prompt() – 弹出一个可输入的对话框，点击确定返回输入的内容，点击取消返回null

open() – 打开一个新窗口

var s =setTimeout(“js代码或js函数”, 毫秒数) – 表示多少毫秒后，执行前面的js代码或函数，只执行一次

var t =setInterval(“js代码或js函数”, 毫秒数) – 表示每隔多少毫秒，执行一次前面的js代码或函数。

clearTimeout(s); — 清除由setTimeout产生的定时器

clearInterval(t); — 清除由setInterval产生的定时器

7、navigator

navigator.userAgent，从这个结果中可以查看到浏览器及浏览器的版本。

8、screen

screen.availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。

screen.availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。

screen.height返回显示屏幕的高度

screen.width返回显示屏幕的宽度

9、history

back() 加载 history 列表中的前一个 URL。

forward() 加载 history 列表中的下一个 URL。

go() 加载 history 列表中的某个具体页面。

10、location

reload() – 刷新页面，和点击浏览器中的刷新按钮是一个意思，如果添加参数为true表示强制刷新，和按Ctrl+F5一样，都表示清除缓存刷新。

location的属性：

JS高级（四）原型链、定义类或对象、私有和封装、静态属性和方法、继承、操作符 instanceof、for…in、顶层函数、贪吃蛇

Mr.Lee — Sat, 19 May 2018 06:50:44 +0000

JavaScript面向对象（4）

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

http://javascript.ruanyifeng.com/

一、原型（原型链）

1、原型对象

案例：根据构造方法创建两个对象，看内存中的存在形式

内存存在形式：

根据内存图，可以看出，在内存中，两个对象的成员方法占用了两个空间，但实际上这两个方法完全一样，没有必要占用两个空间。

解决的办法就是使用原型对象。把两个对象相同的内容都放到构造方法的原型对象中。

原型对象和构造器的关系：

将person中的jineng方法放到它的原型对象中。

2、原型链

原型对象也是对象。它也可以充当其他构造器的原型对象。

上图中，Object对象是person的原型对象，根据person实例化得到p1对象，p1对象是Boy构造器的原型对象，根据Boy实例化得到b1.

在查找一个对象的成员属性的时候，优先从对象自身查找，如果没有从它的构造方法中查找，如果构造方法中也没有，那么去构造方法的原型对象中查找，如果还没有，那么都构造器的原型对象的构造器中查找，一直找到Object对象为止。这种链式的查找方式就是原型链。

3、扩展内置对象

内置对象有：String、Array、Date、Math、等。

比如使用String对象的方法：

var s = new String(‘hello’);

s.substr();

String是JavaScript内置的一个构造函数。

如果在String这个构造函数的原型对象上绑定一个方法的话，那么所有的字符串都可以使用这个方法。

其他我们所学的哪些String对象中的方法，都是String的原型中的方法。

4、DOM对象的原型对象

DOM对象实际上就是通过getElement….这类方法获取页面中的元素、属性等生产的对象。

完成链式的设置dom对象的css的方法：

三、定义类或对象多种方式

手册位置：上面JavaScript 左侧的JavaScript 到页面最下方点击“马上学生JavaScript高级教程吧” 左侧找到定义类或对象

1、原始的定义对象的方式（构造函数方式）

这种方式创建对象，如果创建多个对象的话，会为每个对象在内存中生成一个新的空间，比较占内存。

2、原型对象方式

3、混合方式（构造方法方式+原型对象方式）

原则是：

把所有的对象的成员属性全部写到构造方法中，

把所有的对象的成员方法全部写到原型对象上。

4、动态混合方式

有些开发人员认为混合方式看起来不想是一个类，因为成员方法的绑定在构造函数外面，使用动态混合方式可以解决。

5、到底采用哪种方式

在开发中，用的最多的就是混合方式和动态混合方式。

四、私有和封装

在JavaScript中，没有类，那么只能模拟私有的成员。

五、静态属性和方法

PHP中调用静态成员：类名::成员

六、继承

1、原型链方式继承

通过指定构造函数的原型对象方式，可以实现继承。

2、对象冒充方式继承

1、原始的对象冒充

2、call和apply完成继承

3、实际开发中，使用哪种方式实现继承

答案是使用混合方式，对于成员属性，使用对象冒充方式，对于成员方法，使用原型链方式

七、操作符instanceof

用来判断一个对象的构造器是否是xxx

语法：Obj instanceof Constructor

person的prototype是Object对象，Object对象的构造器是Object函数，所以检测p1的构造器的时候，person和Object都返回true。

八、for…in

用来遍历数组和对象的。

语法：

for(var x in arr){

//通过指定下标的形式，找到数组的每个单元，如 arr[x];

}

九、顶层函数

顶层函数也就是全局函数，这些函数的调用不需要使用对象去调用。

比如有Number()、String()。

在手册的位置：上方的JavaScript 左侧的JavaScript 右侧的参考书左侧JavaScript对象列表中有一个Functions.

encodeURI()不会对“：;/?:@&=+$,#”进行编码，如果要对这些字符进行编码的话，使用encodeURIComponent()；

十、面向对象应用案例 – 贪吃蛇

1、分析

游戏有有三个对象，一个地图、一个食物、一条蛇。

所以默认先创建三个对象。

2、完成地图类（构造函数）

地图有宽、高、背景颜色。这都是地图这个对象属性。

3、完成食物类

计算食物的left和top的方案：

把食物放到地图中：

首先把Map类的对象，升级为全局变量。

在地图类中用一个成员属性_map表示地图那个div

把食物放到地图上：

4、开发一条静态的小蛇

蛇是由三个小div组成，每个小div都有宽度、高度、背景颜色、定位。

将蛇显示在地图上：

5、蛇移动

写一个蛇移动的方法，这个方法实际上就是改变蛇的坐标即可。

每隔两秒调用一个move方法，并重新生成蛇。

从新显示蛇的时候，会发现蛇越来越长，原因是每次显示蛇（show方法调用的时候），都会重新创建一个div，这样的话，div会越来越多，解决的办法是判断：

6、控制蛇的方向

通过按键（上下左右键）控制蛇的运动方向

1、通过按键获取键盘的keyCode

2、将keyCode传递给snake类的direct方法

3、direct方法设置蛇的方向的属性directtion

4、在move方法中，根据directtion属性，设置蛇头的坐标

7、吃食物

判断，如果蛇头的坐标和食物的坐标一致，就表示吃到了

解决食物不会减少的问题：

8、其他问题还有，越来越快，快到某一个点应该保持这个速度就可以了

9、边界问题，判断蛇头的坐标是否超出边界的坐标

10、不能撞自身，判断蛇头坐标是否和蛇身中的某一节坐标相同

JS高级（五）正则、分组、捕获、反向引用、匹配、属性、方法

Mr.Lee — Sat, 19 May 2018 06:46:40 +0000

JavaScript应该掌握的知识：

DOM操作：

元素：获取节点，添加节点，修改节点，删除节点，克隆节点

属性：获取元素的属性，增删改属性

事件绑定：

domObj.onclick = function(){

//这个函数不是直接执行，由用户的行为来触发这个函数

}

常用事件：

window.onload事件：

onclick

onkeyup / onkeydown / onkeypress

onmouseover / onmouseout

onfocus / onblur

onchange

正则表达式

一、概述

1、概述

正则表达式(regular expression)描述了一种字符串匹配的模式，可以用来检查一个字符串中是否含有某种子串、将匹配的子串做替换或者从某个字符串中取出符合某个条件的子串等。

匹配就是在某个字符串中查找你想要查找的内容（由正则表达式决定），如果查找到了，就表示匹配。没有查找到就表示不匹配。

abacabad

正则表达式本身是一门独立的技术，可以被大多数编程语言所使用，如Javascript、PHP、Java

2、应用场景

（1）表单验证里面，验证字符的合法性，如邮箱是否合法，手机号是否合法等等。

（2）信息过滤，如论坛帖子或者评论中的非法字符，例如 sql注入、js脚本注入、煽动性的言论。

（3）信息采集，采集别人网站上面的内容，例如整页采集时筛选出需求的部分

（4）信息替换。

（5）页面伪静态的规则

二、入门案例

1、正则用法说明

这个案例是在字符串str中查找是否有p。

正则语法：

以两条斜线，作为正则表达式起始和结尾的定界符。不能加引号。

match是字符串方法，所以应该由字符串调用。意思是在字符串中匹配要查找的值，如果匹配将返回匹配的内容，如果不匹配返回null。

2、全局修饰符g

g是global，表示全局的意思，它是正则表达式语法中的修饰符，修饰符应该放到定界符(/)的后面。

三、正则语法

1、量词

n+ 匹配任何包含至少一个 n 的字符串。匹配一个或多个前导字符（前导字符就是紧挨着+的前一个字符）

n* 匹配任何包含零个或多个 n 的字符串。前导字符有没有都行

n? 匹配任何包含零个或一个 n 的字符串。

n{X} 匹配包含 X 个 n 的序列的字符串。

n{X,Y} 匹配包含 X 或 Y 个 n 的序列的字符串。

n{X,} 匹配包含至少 X 个 n 的序列的字符串。

n$ 匹配任何结尾为 n 的字符串。从末尾开始匹配

^n 匹配任何开头为 n 的字符串。（注意位置在前面）

^n$ 表示只匹配字符串n。也就是匹配整个字符串。

2、元字符

. 表示单个字符，表示任意字符。除了换行和行结束符。

.* 表示任意字符串（0个或多个任意字符，除了换行和行结束符）

\w 匹配任何数字、字母、下划线。一个\w表示一个字符。

\W 匹配任何非数字、非字母、非下划线。

\d 查找数字。

\D 查找非数字字符。

\s 查找空白字符。

\S 查找非空白字符。

\b 匹配单词边界。（边界字母个数没有限制；\b放前面表示匹配单词前面的边界，\b表示匹配单词后面的边界）

\B 匹配非单词边界。

\n 查找换行符。

\r 查找回车符。

\t 查找制表符。

3、方括号

方括号表示一个范围，也称为字符簇。

[abc] 查找方括号之间的任何字符。

[^abc] 查找任何不在方括号之间的字符。（方括号中的^表示取反）

[0-9] 查找任何从 0 至 9 的数字。表示一个字符

[a-z] 查找任何从小写 a 到小写 z 的字符。

[A-Z] 查找任何从大写 A 到大写 Z 的字符。

[A-z] 查找任何从大写 A 到小写 z 的字符。包括下划线。

[5-8] 查找5 <= 目标 <= 8的字符

(red|blue|green) 查找任何指定的选项。（竖线|表示或者）

4、修饰符

i 执行对大小写不敏感的匹配。

g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。

m 执行多行匹配。

5、转义字符

四、分组/捕获和反向引用

捕获和反向引用的语法的解释：

正则中出现的小括号，就叫捕获或者分组

在正则语法中（在/…/内），在捕获的后面，用“\1”来引用前面的捕获。用\2表示第二个捕获的内容….

在正则语法外（如replace时），用“$1”来引用前面的捕获。

禁止引用

(?:正则) 这个小括号中的内容不能够被引用

五、匹配中文（utf-8编码）

每个字符（中文、英文字母、数字、各种符号、拉丁文、韩文、日文等）都对应着一个Unicode编码。

查看Unicode编码，找到中文的部分，然后获取中文的Unicode编码的区间，就可以用正则匹配了。

中文的Unicode编码从4E00开始，到9FA5结束。

[4E00-9FA5]

完整的Unicode编码表：http://blog.csdn.net/hherima/article/details/9045861

六、环视（断言/零宽断言）

every(?=n) 匹配任何其后紧接指定字符串 n 的字符串。

查找a，什么样的a呢？后面必须是b的a

every(?!n) 匹配任何其后没有紧接指定字符串 n 的字符串。

查找a，什么样的a呢？后面不能是b的a

另外，还会看到(?!B)[A-Z]这种写法，其实它是[A-Z]范围里，排除B的意思，前置的(?!B)只是对后面数据的一个限定，从而达到过滤匹配的效果。

七、正则对象的属性和方法

正则对象中的成员方法和属性的正确调用方式：

1、exec方法和lastIndex属性

exec方法执行一个正则匹配，只匹配一次，匹配到结果就返回一个数组类型的结果，匹配不到就返回null。并将表示匹配的位置置为下一个匹配的位置。

lastIndex一个整数，标示开始下一次匹配的字符位置。没有更多匹配重置lastIndex为0.

依次调用exec匹配下一个的例子：

匹配带子表达式的例子：

带子表达式并且依次调用的例子：

2、test方法

test方法检测目标字符串和正则表达式是否匹配，如果匹配返回true，不匹配返回false。

八、支持正则表达式的 String 对象的方法

1、search()

在字符串中搜索符合正则表达式的结果。如果找到结果返回结果的位置，停止向后检索，也就是说忽略全局标识符g；如果没有匹配结果，返回-1.

2、match()

在字符串中检索匹配正则表达式的子串；如果匹配，返回包含匹配结果的一个数组；不匹配返回null。

不加全局g的情况：

获取的结果只是第一个匹配的内容，匹配的内容中的第一个单元是匹配的结果，后面的单元是子表达式

加全局的g的情况：

获取的结果是所有匹配的内容，但是不包含子表达式。

多次调用和调用一次效果一样。

3、split()

将字符串分割成数组：

4、replace()替换

默认只替换一次，加g全部替换

替换的时候，使用”$1″表示第一个字表达式：

替换abc为a[a-b-c]c hds h[h-d-s]s

替换aaa bbb ccc为Aaa Bbb Ccc

九、案例

1、匹配手机号格式是否正确

要求：

基本的要求：11位，1打头，纯数字

特别精细的话，必须联系各大运营商，查看23位都是什么，比如有136的，但是可以没有163的。

2、匹配邮箱格式是否正确

邮箱：

@前面有4~16个字符（都可以有数字，字母，下划线，点，中横线）

@后面点前面：允许数字字母组合，长度2~10位

点后面：只允许出现字母，长度为2~5；

还有一种情况是后面是两个点，如xxxx@xx.com.cn

3、解决结巴程序

把叠字的字符串，换成单子，比如，“今今今今天天天天天天天天中午吃吃吃了泡面”换成“今天中午吃了泡面”

4、用户名验证

注册的时候，要求用户名：长度4~10位，不能是纯数字，不能是纯字母，不能有特殊符号，不能以数字打头。

十、PHP中的正则表达式

语法和JavaScript中的正则语法基本一致。

PHP中的正则函数：

1、preg_match()

基础语法练习：

基础语法和js中正则语法基本相同。

具体查看preg_match的用法：

带有子表达式的例子：

2、preg_match_all();

执行正则表达式的全局匹配

查看匹配情况（不带子表达式）：

查看匹配情况（带子表达式）：

3、preg_replace();

案例：解决贪婪问题？

4、php中匹配中文

JS初级（一）变量、声明、引用、数据类型、输出、运算符

Mr.Lee — Thu, 17 May 2018 14:16:05 +0000

JavaScript（一）

作业

第一题

请输入信息：>>” />

第四题

分析页面结构如下：

页面总宽度：8+206+500+8=722

页面总高度：110+519=629

难点：

实现代码

西湖春天简介

　　西湖春天是一家经旅游局批准，工商局登记注册，具有独立法人资格，并足额缴纳旅行社质量保证金的股份制企业。

公司下设组团部、地接部、导游部、财务部、石浦门市部、丹城门市部等机构，承接旅游、休闲、度假、疗养、会务、商务考察等业务，公司管理高度重视人力资源的合理利用和开发，现已拥有一批长期从事旅游工作、精通各项旅游业务、重信誉、讲实效、高素质的管理人员和一支训练有素、经验丰富的导游队伍，并且已做到人人持证上岗。

公司凭借象山旅游发展大好趋势，结合自身的规模优势，全力打造出“西湖春天”的旗帜品牌形象。目前，公司开发的公司网站，可以让您广泛的了解旅游信息。

公司自成立以来，坚持以“质量就是生命”的座右铭，虚心接受客户的监督，不断完善管理机制，全体员工积极进取，开拓创新、奋发图强；公司连续获得2003年度《安全生产先进集体》、《浙江省旅游消费推荐单位》、《“安康杯”竞赛优胜企业》、2004年度《石浦首届旅游消费诚信单位》等荣誉称号。

公司与国内众多旅行社建立了良好的义务关系，在主要城市已形成了客房、餐饮、交通等完善的旅游服务网络，“西湖春天”全体工作人员将以最合理的旅游线路，最实惠的价格，最细致的服务，热诚期待您的到来。

圆角矩形

区分上下左右四个点

例题

圆角矩形的应用

2D转换

在二维平面上桌变化，关键字：transform

2D转换之移动（translate）

例题：让div居于屏幕的中间

2D转换之旋转

2D转换之缩放（scale）

例题：三角做法

过渡（transition）

动画类型有：

例题（对象移动）：

例题：（头像旋转）

例题：（头像变大）

Sublime介绍

生成HTML框架结构

按tab键或ctrl+E生成

注意要将页面保存再按快捷键生成

常用的其他技巧

什么是JavaScript

JavaScript是一种解释型的，基于对象的脚本语言。
Javascript（JS）可以运行在客户端，也可以运行在服务器端。默认是运行在客户端。

script：脚本

页面的执行过程

解释型与编译型

要看一门语言是否是解释型还是编译型，主要看是否会生成中间文件。

运行在客户端的语言都是解释型

运行在服务器端的语言都是编译型。

脚本语言

脚本语言也是语言一种，脚本语言的特点要结合其他语言一起实现功能。

JavaScript的应用场景

客户端特效
验证表单

变量

变量就是一个会变的量

x+1=2 x=1

x+10=20 x=10

变量就是内存中的一段空间

变量的命名规则

变量以字母、下划线，$开头，后面跟的在字母、数字、下划线，$
关键字不能做变量名
变量名区分大小写（aa和Aa是两个空间）

下列变量名是否合法

aa 合法
a1 合法
1a 不合法（不能以数字开头）
_1a 合法
a-1 不合法
a% 不合法
x 合法
do 不合法（关键字不可以做变量名 if for else case …）

声明变量

通过var关键字来声明变量。

声明变量有两种方法

显式声明：通过var关键字声明后使用
隐式声明：不声明，直接使用

输出的方法

1、document.write(‘锄禾日当午’); //输出在浏览器上

2、alert(‘锄禾日当午’); //弹出一个对话框（就是window.alert()）

3、prompt()：弹出一个用于输入的对话框

4、弹出一个对话框，有“确定”和“取消”按钮

5、console.log(‘锄禾日当午’)：在控制台输出，用于代码调试

几个需要记忆的单词

window：窗口
document：文档
console：控制台
log：日志

变量数据类型

变量的数据类型取决于变量中存储的值。如果存放的是数字就是数字型，存放字符串就是字符串型。

基本数据类型

数据类型	例题
数字型（Number）	10 10.5
字符串型（String）	“锄禾日当午” ‘锄禾日当午’
布尔型（Boolean）	true（真） false（假）

特殊数据类型

Null（空）	空型
Undefined（未定义型）	变量声明后当没有赋值，这个变量是未定义型

typeof：显示变量的数据类型

多学一招：JS支持八进制，十进制，十六进制。

多学一招：JS支持无穷大

JavaScript的基本语法规则

解释型语言，可以随时运行
大小写敏感
弱类型语言（变量的数据类型取决于存放的数据）
分号表示语句的结束（也可以使用换行替代分号，但不推荐）

注释

单行注释： //
多行注释： /* */

运算符

赋值运算符（=）

a=5：将5付给a

算术运算符

一元运算符	描述	二元运算符	描述
–	负号	+	加
++	自增	–	减
—	自减	*	乘
		/	除
		%	模（取模就是取余数）

注意：

1、“+”除了做数字运算，还可以做字符串相加，字符串相加就是字符串相连。

2、字符串和数字相加，将数字转成字符串型再相连

3、字符串只能做加法，不能做减法，不能做乘法，不能做除法。

4、取模就是取余数

自增

++前置：先自增，后运行

++后置：后自增，先运算

作业：

实现旋转的效果

JS初级（二）else if、 if、 if else、 switch、函数、判断语句、数组、更改颜色

Mr.Lee — Thu, 17 May 2018 14:15:55 +0000

回顾

JavaScript是一个解释型、基于对象的脚本语言
可以运行在客户端和服务器端，但是一般运行在客户端。
主要运用在页面的特效，页面交互。
变量：计算机内存中的一段空间
变量的命名规则：
1. 变量名以字母、下划线、$开头，后面跟的是字母、数字、下划线、$
2. 关键字不能变量名 var
3. 变量名区分大小写
声明变量
1. 显式声明：通过var声明
2. 隐式声明：不声明直接使用
变量的数据类型
1. 基本类型
  1. 数字型（支持八进制，十进制，十六进制，支持无穷大）
  2. 字符串型（单引号、双引号字符串是一样的）
  3. 布尔型（true和false）
2. 复合类型
  1. 对象
  2. 数组
3. 特殊类型
  1. Null
  2. Undefined：如果一个变量声明了没有赋值，就是未定义型
注释
1. 单行 //
2. 多行 /* */
常用的输出
1. document.write()：输出在浏览器上
2. alert()：弹出一个对话框，对话框上有一个“确定”按钮
3. prompt()：弹出一个可以输入的对话框
4. confirm()：弹出一个对话框，对话框上“确定”和“取消”按钮
5. console.log()：在控制器输出。

运算符

算术运算符

二元运算符：+ – * / %

“+”：不但可以做数字相加，还可以做字符串相加，字符串相加就是字符串相连

比如：1+2=3 “1”+”2”=”12”

一元运算符：++ —

++前置先自增，++后置就是后自增。

关系运算符

运算符	描述
>	大于
>=	大于等于
<	小于
<=	小于等于
==	等于
!=	不等于

关系运算符运算的结果就两个：true和false

5>2 true

5<2 false

5>=2 true

5>=5 true

5<=5 true

5==5 true

5==2 false

5!=5 false

5!=2 true

逻辑运算符

运算符	描述
&&（与）	并且
\|\|（或）	或者
!（非）	取反

练习

true && true true

true && false false

false && true false

false && false false

true || true true

true || false true

false || true true

false || false false

!true false

!false true

练习：写出如下表达式

1、评三好学生的条件语文（ch）数学（math）不低于90

方法一：ch>=90 && math>=90

方法二：!(ch<90 || math<90)

2、评三好学生的条件语文（ch）或者数学（math）超过90

方法一：Ch>90 || math>90

方法二：!(ch<=90 && math<=90)

3、年龄（age）在20到30之间

方法一：age>=20 && age<=30

方法二：!(age<20 || age>30)

4、小红嫁人的条件，年龄（age）在20到30之间，而且兜里的钱（money）不低于100。

age>=20 && age<=30 && money>=100

5、小红嫁人的条件，要么年龄（age）在20到30之间，要么兜里的钱（money）不低于100。

age>=20 && age<=30 || money>=100

赋值运算符（=）

计算机的“=”和数学的“=”不一样。

a=5：计算机在内存中划出一段空间，取名为a，并且将5付给a。

运算符	描述
=	赋值 a=5 将5付给a
+=	a+=b a=a+b
-=	a-=b a=a-b
*=	a=b a=ab
/=	a/=b a=a/b
%=	a%=b a=a%b

例题

条件语句（判断语句）

单分支（if）

流程图

语法：

if(条件表达式){

//代码

}

{：表示程序的开始

}：表示程序的结束

if中的条件如果为true，就执行if中的代码，如果为false，就不执行。

例题：

双分支（if-else-）

流程图：

语法：

if(条件){

//代码1，条件成立执行这段

}else{

//代码2，条件不成立执行这段

}

例题

多分支（else if）

场景：输入成绩，成绩大于90是A，大于80是B，以此类推…

语法：

if(条件){

//代码1

}else if(条件){

//代码2

}

else if(条件){

//代码3

}else{

//代码4

}

从上往下一次匹配，匹配到那段就执行那段代码
只要有一个匹配成功，下面的条件不再执行
如果上面都没有匹配成功，就执行else部分的代码

例题

多路判断（switch-case-）

语法：

switch(表达式){

case 值1:

代码;

[break;]

case 值2:

代码2;

[break;]

default: //如果上面都没有匹配到，就执行default这一段

代码3

}

脚下留心：break是可以省略的，代码一直从匹配处开始执行，一直执行到break结束。

switch：开关

case：事件

break：中断

default：默认

例题

思考：如下代码输入0,1,2 各输出什么?

var num=prompt(‘请输入一个数’,”);

switch(num%3){

case 0:

alert(‘十全十美’);

break;

case 1:

alert(‘一心一意’);

case 2:

alert(‘两全其美’);

break;

default:

alert(‘输入错误’);

}

输入0 输出十全十美

输入1 输出 ‘一心一意’ ‘两全其美’

输入2 输出’两全其美’

多学一招：

判断语句中，如果代码就一句，“{}”是可以省略的

练习

switch语句与if语句的区别

答:switch的条件与一个固定的值匹配的，if的条件是比较表达式

if语句嵌套

数组

数组是计算机内存中一段连续的空间，这段连续的空间就一个名字（stu），通过下标来区分每个元素的值，下标从0开始，每次递增1。

创建数组的方式

方法一：var 数组名=[元素1,元素2,…]

方法二：var 数组名=new Array([元素1，元素2，…])

多维数组

二维及二维以上的数组都称为多维数组，多维数组中用的最多的就是二维数组
二维数组有行和列组成

JS不支持多维数组，我们可以通过数组中存放数组来实现二维数组。

函数

函数就是代码块，只要调用就可以执行。函数也叫方法

好处：

实现了代码的可重用性
实现模块化编程

函数的分类

预定义函数，JS已经定义好了，我们只要调用就行（参照手册）
自定义函数

预定义函数例题（操作数组）

自定义函数

语法：

function 函数名([参数1,参数2,…]){

//函数体

}

函数名的命名规则：

义字母、下划线开头，后面跟的是字母、数字、下划线
关键字不能做函数名

最简单的函数

参数的分类：

形式参数（形参），告诉调用者需要传递几个参数
实际参数（实参）

函数的调用

通过函数名来调用函数

函数定义好了是不执行的，函数只有在调用的时候才执行。

例题

判断奇偶数

isNaN()：不是数字返回true，是数字返回false
indexOf()：返回字符串内第一次出现子字符串的字符位置，位置从0开始，没有找到返回-1

实现代码

判断成绩

parseInt()：转成数字整数
parseFloat()：转成浮点数（小数）

例题

更改颜色

锄禾日当午，

汗滴禾下土。

谁知盘中餐，

粒粒皆辛苦。

作业

1、判断闰年

JS初级（三）do-while、 for、 for-in、 while、三元运算符、循环、最值、流程控制、跳转语句、遍历

Mr.Lee — Thu, 17 May 2018 14:14:31 +0000

回顾

运算符
1. 算术运算符
  1. 一元运算符：++ —
  2. 二元运算符 + – * / %
2. 关系运算符：> >= < <= == !=
3. 逻辑运算符：&& || !
4. 赋值运算符：= += -+ *= /= %=
5. 点运算符 document.write()
判断语句（条件语句）
1. if：单分支
2. if-else-：双分支
3. else if：多分支
4. switch-case ：多路选择
数组：
1. 内存中一组连续的空间
2. 通过下标来区分各个空间，下标从0开始
3. 声明数组：
  1. var 数组名=[]
  2. var 数组名=new Array([元素1,元素2]);
4. 数组的方法：
  1. 数组名.sort() 数组排序
  2. 数组名.reverse()：数组翻转
  3. 数组名.join()：数组连接成字符串
  4. 数组.length：数组的长度
函数
1. 函数是一个代码块，可以多次调用，能够很容易的实现模块化编程
2. 函数分为预定义函数和自定义函数
3. 预定义函数：isNaN()，indexOf()，parseInt()，parseFloat(),select()
4. 自定义函数语法

function 函数名([参数]){

//函数体

}

1. 参数分为形式形数（形参）和实际参数（实参）
2. 通过函数名来调用函数
3. 函数定义的时候不执行，调用的时候才执行函数

三元运算符（?:）

语法：表达式?值1:值2

描述：如果表达式的结果为真，返回值1，否则返回值2

循环

重复执行称为循环

循环的分类

for循环
while循环
do-while循环
for-in循环

for循环

语法：

for(初始值;条件;增量){

//循环体

}

只要条件为真，就一直循环，一直循环到条件不成立为止

最简单的例题（输出十句字符串）

调整一下增量

分析题：

如下循环输出什么？

for(var j=1;j<=10;j–){

document.write(”);

}

答：死循环，j–,j永远小于10

如下循环输出什么？

for(var j=1;j<=10;){

alert(”);

}

答：死循环，因为j永远等于1,1永远小于10

如下循环输出什么？

for(var j=1;;j–){

alert(”);

}

答：没有条件永远为true，这也是死循环

一个典型的死循环

for(;;){

alert(‘我注意你好久了’);

}

脚下留心：循环必须要有出口，不能出现死循环。

思考：在一个循环了n次的循环中，初始值执行了几次？条件执行了几次？增量执行了几次？

答：初始值1次，条件n+1次，增量n次

for循环括号中可以放多个表达式

while循环

语法：

while(条件){

//代码

}

只要条件为true，就一直循环，一直循环到条件为false

简单的例题

多学一招：如果for和while的循环体就一句代码，大括号可以省略。

do-while

语法：

{

//循环体

}while(条件)

例题

可以更改成如下：

也可以更改如下：

for-in循环

for-in循环用了遍历数组和对象

语法：

for(变量 in 数组){

//循环体

}

脚下留心：变量保存的不是数组中的值，而是数组值的下标

例题：

例题（打印金字塔直线）

代码

拼接后的字符串

运行结果

例题（遍历一维数组）

脚下留心：数组的长度是4，下标最大值是3，因为下标是从0开始的。

在上面的例题中，stu.length执行了n+1次，效率低了，其实stu.length只要执行一次就可以。

例题（求数组中的最大值）

思路：声明一个变量（num）用来保存最大值，首先假设第0个数据是最大的，然后从第一个元素开始依次和num比较，如果有个数大于num,就将这个数付给num，这样就保证num中的数据肯定是最大的。

实现代码：

例题：(求数组的平均值)

思路：声明一个变量（sum）用来保存数组的和，然后依次从第0个元素依次向后加，每次加的和都付给sum。

分析

i值 sum值

0 score[0]

1 score[0]+score[1]

2 score[0]+score[1]+score[2]

3 score[0]+score[1]+score[2]+score[3]

4 score[0]+score[1]+score[2]+score[3]+score[4]

跳转语句

break（中断）：中断循环
continue（继续）：中断当前循环，进入下一个循环

例题一：

例题二：

总结流程控制语句的分类

判断语句
1. if 单分支
2. if-else 双分支
3. else if 多分支
4. switch-case 多路选择，多路判定
循环语句
1. for
2. while
3. do-whlie
4. for-in 就是用来遍历数组和对象
跳转语句
1. break 中断循环
2. continue 跳出当前循环，进入下一个循环

思考：for、while、do-while的区别？

答：

这三种循环是相通的，相互可以替代。
如果明确知道循环多少次首选for循环,while和do-while用于循环到条件不成立为止。
While是先判断再执行，do-while先执行再判断
While条件不成立就不执行，do-while条件不成立也要执行一次。

循环的例题

例题一：打印埃及图像

每个字母对应一个埃及图像，输入n或N退出

do-while实现（首选）

while循环实现

var str=prompt(‘请输入一个字符，输入n或N退出’,”);

while(str!=’n’ && str!=’N’){

document.write(str);

str=prompt(‘请输入一个字符，输入n或N退出’,”);

}

for循环实现

for(;;){

var str=prompt(‘请输入一个字符，输入n或N退出’,”);

if(str==’n’ || str==’N’)

break;

document.write(str);

}

例题二：从1加到100

for循环实现

分析

While循环实现

Do-while循环实现

例题三：（自动分行）

多重循环

两重以上称为多重循环，最常用的就是两重循环

例题（打印阶梯数字）

例题（遍历二维数组）

分析：

代码：

作业

去除字符串中的空格
九九乘法表
打印水仙花数（三位数abc a³+b³+c³=abc）

JS初级（四）事件、传值与引用、函数类型、匿名函数、转义字符

Mr.Lee — Thu, 17 May 2018 14:13:04 +0000

回顾

for(初始值;条件;增量){

//循环体

}

while

while(条件){

//循环体

}

do-while

do{

//循环体

}while(条件)

for-in

for(var 变量 in 数组){

//循环体

}

注意：切记不能出现死循环
跳转语句
1. Break：中断循环
2. Continue：跳出当前循环，进入下一个循环

函数

函数就是代码块，可以多次调用，很容易实现模块化编程。
函数也叫方法（其实函数和方法有一点点的区别，在面向对象中去讲解，目前我们认为他们是一样的）。
函数分为预定义函数和自定义函数
自定义函数的语法

function 函数名([参数…]){

//函数体

}

参数分为形式参数（形参）和实际参数（实参）。形参只起一个形式的作用，没有具体的值，只是告诉调用者调用的时候传递几个参数，在定义函数的时候使用。实际参数是传递给函数的具体的值，在调用函数的时候使用。

通过函数名来调用函数

函数的预加载

函数有预编译（预加载）的过程，可以实现调用在前，声明再后。在编译的时候先把函数编译好放在内存中，在执行JS的时候函数其实已经编译好了，所以直接调用就可以了。

多学一招：不只是函数可以预加载，只要先声明的都可以预加载。

提醒一下：在有的资料上也说变量不能预加载，原因是只是声明了空间，并没有将值加载进入。有的资料上称为“预编译”。

思考：形参和实参个数不一样会怎么样？

总结：

少传递的参数是undefined
多传递的参数函数中接受不到。

函数的调用

函数是通过函数名来调用的

一般函数的调用要结合“事件”来调用

调用的方式：

方法一（通过HTML标签调用）：<标签事件=”函数名()”/>

方法二（JS调用）：对象.事件=函数

方法一：

方法二：

事件

事件和事件处理

事件：以“on”开头的都是事件，每个事件后面都有“事件处理”，事件处理一般是由函数来担当。

<标签事件=’事件处理[函数]’>

常用的事件

onclick：当鼠标点击的时候
onfocus：当获得焦点的时候
onblur：当失去焦点的时候
onchange：发生改变的时候
onkeydown：当键盘按键按下去的时候
onkeyup：当键盘的键抬起的时候
onmouseover：当鼠标滑过的时候
onload：当加载的时候

例题

字符串.substr(start [, length ])
字符串.substring(start, end)

代码如下

匿名函数

没有名字的函数，

语法

function(){

//匿名函数

}

例题

匿名函数自调用

匿名函数的使用

return

作用：

作用一：终止函数的执行

作用二：返回数据

脚下留心：如果要返回多个数据，将多个数据放到数组中返回，不能写多个return;

应该这样写：

使用类型函数进行类型的获取或转换

在计算机内部，所有的数据都可以转成布尔值。转换规律：

1、数字和布尔值转换规律： 0为false，非0为true

2、字符串和布尔值转换规律：空字符串为false，非空字符串为true

我们也可以通过类型函数显式转换

String()：转成字符串

Boolean()：转成布尔型

Number()：转成数字型

typeof 获取数据类型

值传递和引用传递

函数中参数的传递有两种方式，值传递，引用传递（传递地址）

分析如下代码执行过程（值传递）

第一步：将保存10的空间的地址付给x。（x保存的是10的地址）

第二步：将10复制一份，将10的副本的地址付给y

分析如下代码执行过程（地址传递）

总结：只要是基本数据类型都是值传递，复杂类型都是地址传递。

传递不确定参数

通过arguments关键字保存传递的参数数组

变量作用域

变量按照作用的范围不一样分为

全局变量：在整个页面使用的变量
局部变量：在函数内部使用的变量

思考：隐式声明局部变量

总结：在函数中，通过var声明的变量是局部变量，不用var声明的变量在全局变量。

JS嵌入到网页的方法

方法一：内嵌引入，直接将函数体写到事件处理中

方法二：内部引入：在HTML页面的内部通过结束

方法三：外部文件引入

第一步：创建JS文件，并在JS文件中写入代码

第二步：在HTML中引入外部的JS文件

具有特殊含义的字符

“”：字符串

‘’：字符串

JS换行 \n （new）

JS回车 \r （return）

制表位： \t

转义字符（\）

作用：将具有特殊含义的字符转成普通字符。

对象

能够了解对象的概念以及对象的分类

对象是属性（变量）和方法（函数）的组合。

调用对象的属性：对象.属性

调用对象的方法: 对象.方法()

JavaScript三类对象

HTML对象：就是HTML标签
脚本对象
浏览器对象

作业题

计算器

去字符串的空格

思路：声明一个变量用来保存结果字符串，遍历循环字符串，如果不是空格就保存到变量中。最后这个变量就是去掉空格的字符串。

JS初级（五）BOM、 DOM、定时器、对象、时钟周期

Mr.Lee — Thu, 17 May 2018 14:12:06 +0000

回顾

函数预加载：在页面编译的时候就将函数编译到内存中，就可以先调用，再定义。
通过arguments关键字可以实现传递的参数个数不一样
事件：以on开头的都是事件
事件后面肯定有事件处理程序，事件处理程序一般都是函数
函数调用
1. 方法一：<标签事件=’函数()’>
2. 方法二：对象.事件=函数
匿名函数：没有名字的函数
匿名函数自调用 (匿名函数)();
return
1. 作用一：终止函数的执行
2. 作用二：从函数内部将值返回到调用处
变量的作用域
1. 全局变量：供整个页面使用
2. 局部变量：在函数内部使用变量，注意在函数内部通过var声明的变量是局部变量，不通过var声明的是全局变量。
Js嵌入到页面的方法
1. 方法一：直接写在事件处理程序中
2. 方法二：通过结束嵌套在页面的内部
3. 方法三：写在页面的外部，通过
  
  String（字符串）
  
  字符串的声明
  
  方法一：把字符串当成基本类型直接赋值
  
  方法二：把字符串当成对象来声明
  
  字符串是基本类型，在字符串运行的时候会在内存中生成一个临时对象，通过临时对象调用属性和方法
  1. 截取子字符串语法：字符串.substr(开始位置,[截取长度])
  1. 截取子字符串语法：字符串.substring(起始位置，结束位置)
  例题
  1. indexOf()：返回 String 对象内第一次出现子字符串的字符位置
  2. lastIndexOf（）：返回字符串最后出现的位置
  1. toLowerCase()：转成小写
  2. toUpperCase()：转成大写
  1. 字符串长度
  多学一招：字符串可以当成字符数组来使用
  
  Math（数学）
  
  例题：产生一个1~100的随机整数
  
  Date（日期）
  
  Date()对象的方法有很多，我们可以把它分为3组
  
  第一组：setXXX：设置时间
  
  第二组：getXXX：获取时间
  
  第三组：toXXX：转化时间格式
  
  例题：获取当前时间
  
  例题：转换时间格式
  
  例题：上月的1号是星期几？
  
  浏览器对象
  
  浏览器的分层结构
  
  window（窗口）
  
  在浏览器对象中最顶层的对象。
  
  脚下留心：由于window是最顶层对象，所以window可以省略。
  
  document（文档）【重点】
  1. window.document.write(‘’)；将字符串输出到浏览器上
  2. document.bgColor=’#cccccc’; //背景色
  3. document.fgColor=’#FF0000′; //前景色
  4. 获取网页标签对象（重点）
  例题：标签属性进行取值赋值
  
  结果：当文本框失去焦点的时候变成按钮
  
  history（历史）
  
  back ( ) 方法相当于后退按钮
  
  forward ( ) 方法相当于前进按钮
  
  go (1)代表前进1页，等价于forward( )方法；
  
  go(-1) 代表后退1页，等价于back( )方法；
  
  第一页
  
  当前是第一页
  
  跳转到第二页
  
  第二页
  
  当前是第二页
  
  跳转到第三页
  
  第三页
  
  这是第三页
  
  location（地址）
  
  location对象主要用来做页面的跳转
  
  属性：href——设置或检索完整的 URL 字符串
  
  方法：
  
  assign(“url”)：跳转到指定页面
  
  reload()：重新加载当前页面
  
  replace(“url”) ：通过加载 URL 指定的文档来替换当前文档
  
  例题：
  
  screen（屏幕）【了解】
  
  包含有关客户端显示屏幕的信息
  
  注意：没有应用于 screen 对象的公开标准，不过所有浏览器都支持该对象。
  
  width：返回显示器屏幕的宽度。
  
  height：返回显示屏幕的高度。
  
  availWidth：返回显示屏幕的宽度 (除 Windows 任务栏之外)。
  
  availHeight：返回显示屏幕的高度 (除 Windows 任务栏之外)。
  
  例题
  
  脚下留心：screen对象的属性都是只读属性
  
  navigator（导航）【了解】
  
  navigator 对象包含有关浏览器的信息。
  
  注意：没有应用于 navigator 对象的公开标准，不过所有浏览器都支持该对象。
  
  appCodeName：返回浏览器的代码名。
  
  在所有以 Netscape 代码为基础的浏览器中，它的值是 “Mozilla”。为了兼容起见，在 Microsoft 的浏览器中，它的值也是 “Mozilla”。
  
  appName：返回浏览器的名称。
  
  appVersion：返回浏览器的平台和版本信息。
  
  对象操作语句
  
  this语句
  
  this表示当前对象
  
  with语句
  
  with用来执行一组方法和属性，所有的属性和方法都属于with后面的对象
  
  eval语句
  
  用来执行字符串表达式
  
  DOM和BOM
  
  DOM：document object model 文档对象模型
  
  BOM：brower object model 浏览器对象模型
  
  DOM由HTMDOM，XMLDOM，CSSDOM组成
  
  CSSDOM的语法结构：对象.style.样式属性
  
  oDiv.style.width
  
  oDiv.style.height
  
  例题
  
  表单验证
  
  难点：
  1. 验证表单的函数在表单提交的时候调用，表单提交的事件是onsubmit
  2. Onsubmit事件后面如果return fasle就终止提交，return true就提交
  代码
  
  用户名：
  
  密码：
  
  设置时钟周期
  
  设置定时器
  
  作业
  1. 打印100以内的6的倍数，一行放7个
  2. 求一元二次方程的根
  3. 倒计时

Javascript – 个人随笔

JS 高级（一）数据类型转化、执行流程、错误处理、作用域

一、概述

二、JavaScript基础回顾

三、数据类型转化

四、执行流程

五、作用域（链）

六、事件

七、案例—标签页效果

JS高级（二）事件、JS闭包、DOM

一、回顾与加强

二、闭包

三、DOM

JS高级（三）Json、淡入、事件、冒泡事件、可编辑表格、内置对象

0、知识点补充

一、案例—淡入效果

二、事件与事件对象

三、案例—可编辑的表格

四、面向对象概述

五、自定义对象

六、json格式的对象

七、内置对象

JS高级（四）原型链、定义类或对象、私有和封装、静态属性和方法、继承、操作符 instanceof、for…in、顶层函数、贪吃蛇

一、原型（原型链）

三、定义类或对象多种方式

四、私有和封装

五、静态属性和方法

六、继承

七、操作符instanceof

八、for…in

九、顶层函数

十、面向对象应用案例 – 贪吃蛇

JS高级（五）正则、分组、捕获、反向引用、匹配、属性、方法

一、概述

二、入门案例

三、正则语法

四、分组/捕获和反向引用

五、匹配中文（utf-8编码）

六、环视（断言/零宽断言）

七、正则对象的属性和方法

八、支持正则表达式的 String 对象的方法

九、案例

十、PHP中的正则表达式

JS初级（一）变量、 声明、 引用、 数据类型、 输出、 运算符

JavaScript（一）

作业

第一题

第四题

圆角矩形

2D转换

2D转换之移动（translate）

2D转换之旋转

2D转换之缩放（scale）

例题：三角做法

过渡（transition）

Sublime介绍

什么是JavaScript

页面的执行过程

解释型与编译型

脚本语言

JavaScript的应用场景

变量

变量的命名规则

声明变量

输出的方法

变量数据类型

JavaScript的基本语法规则

注释

运算符

赋值运算符（=）

算术运算符

作业：

JS初级（二）else if、 if、 if else、 switch、 函数、 判断语句、 数组、 更改颜色

回顾

运算符

算术运算符

关系运算符

逻辑运算符

赋值运算符（=）

条件语句（判断语句）

JS初级（一）变量、声明、引用、数据类型、输出、运算符

JS初级（二）else if、 if、 if else、 switch、函数、判断语句、数组、更改颜色

JS初级（三）do-while、 for、 for-in、 while、三元运算符、循环、最值、流程控制、跳转语句、遍历

JS初级（四）事件、传值与引用、函数类型、匿名函数、转义字符

JS初级（五）BOM、 DOM、定时器、对象、时钟周期