JS高级javascript

是客户端浏览器里边的语言技术

1995年网景公司 livescript ----> javascript

1. 引入方式

apple.js

2. 区分大小写

该语言严格区分大小写 name Name

3. 注释方式

// 注释单行

注释多行

4. 结束处分号可选

var name="tom";

var age = 23;

5. 变量命名规则

????名字组成：字母、数字、下划线、$

????开始的第一个字符不能是数字的。

????var $ = "china"; //可以的，jquery框架

????var 9 = "hello";????//不可以

6. i++ 和 ++i的区别

????

7. 连接符号+

????

8. 逻辑运算符使用细节

????

9. switch表达式用法

????

10. break和continue使用

????

11. 函数

????定义：有一定功能代码的封装体

12. 函数参数使用

????内部属性arguments，以数组形式获得具体参数信息

????????????arguments.length获得参数的个数

????

13. arguments属性本质是一个对象，里边有数组层分

????

14. 函数参数个数

????

15. 函数返回值

????return

????

16. 全局变量和局部变量

????

????全局变量使用其实就是使用window对象的属性

????window.province 调用window对象的属性信息

????window.cat() 调用window对象的成员方法

总结：

数据类型
流程结构
函数使用

17. 函数的声明

????function f1(){}

????var f1 = function(){}

????

18. 函数调用(两种方式)

????funciton f1(){}

????f1();

????

19. arguments.callee

????属性在函数内部代表当前本身函数的引用

????

20. caller

????返回调用当前函数的函数。

????

【数组使用】

声明
1. var fruit = [‘applie‘,‘pear‘,‘banana‘,‘orange‘];
2. var fruit = new Array(‘applie‘,‘pear‘,‘banana‘,‘orange‘);
3. var fruit = new Array(4); //4表示数组元素个数和

对象具体分辨
数组元素长度length属性

?
二维数组的声明和遍历使用
数组常用函数

?
元素排序函数
数组元素获取及截取
获得指定元素的位置
数组高级函数使用
every() 全部符合条件返回真

filter() 把符合条件的项目组成一个新数组

forEach() 遍历数组

map() ????对数组每一项运行指定函数，返回每次函数调用的结果组成的数组

some() 部分符合条件返回真

?
字符串截取
slice(开始位置，结尾位置)

substring(开始位置，结束位置)

substr(开始位置，长度)
eval()函数使用

总结：

函数的使用(匿名函数的声明和调用)
arguments.callee caller
数组 for for in forEach
字符串

校验以下真实日期：

var dd = new Date(2005,1,31);

练习：

获得10-20之间的随机数字

【DOM】

document object model 文档对象模型

dom把html中需要元素标签等内容都划分为节点(元素、属性、文本)

<html>

????<head></head>

????<body>

????????<div id="apple">

????????????<span name="orange">今天是周一</span>

</div>

????</body>

</html>

document.getElementById();

利用dom获得页面元素节点
1. document.getElementById() //id获得元素节点对象
2. document.getElementsByTagName() //html标签获得元素节点对象
3. document.getElementsByName();
属性判断当前节点类型
1. nodeType
2. 1 元素节点
3. 2 属性节点
4. 3 文本节点
5. 9 文档节点

childNodes、length、nodeValue具体使用

获得父节点
获得兄弟节点
获得第一个和最后子节点
dom节点获得属性、设置属性
属性操作class注意
css样式属性获取和设置
针对行级样式起作用

节点创建

appendChild()

insertBefore()

以上方法不只可以执行节点追加动作，还可以执行节点位置移动操作

节点替换
节点复制

总结：

获取元素节点
1. getElementById() 通过id获得是一个具体对象
2. getElementsByTagName() 通过tag标签获得返回数组对象
3. getElementsByName() form表单返回数组对象
属性
1. length 获得元素节点的个数
2. nodeType 节点类型
3. nodeName 元素节点的tag标签名称
4. nodeValue????获得文本节点里边的内容
子节点
1. childNodes 获得子节点，会把回车空白等信息也算作子节点
2. parentNode 获得父节点（）
3. firstChild???? lastChild
4. previousSibling 上一个兄弟节点
5. nextSibling????????下一个兄弟节点
操作属性节点
1. 获得属性
2. node.属性
3. node.getAttribute(属性)
4. 设置属性
5. node.属性= value
6. node.setAttribute(attr,value)
操作css样式属性
1. node.style.属性获得
2. node.style.属性= value; 设置css样式
3. node.style.borderLeft = 20px;
4. 只针对行内样式起作用
创建节点
1. createTextNode(内容)
2. createElement(tag标签)
节点追加
1. 父节点.appendChild(子节点)
2. 父节点.insertBefore(子节点，目标节点); 子节点被放置到目标节点的前边
3. 父节点.replaceChild(替换节点，被替换节点) 被替换节点最后被删除
复制节点
1. cloneNode(true) 深层复制[默认]
2. cloneNode(false) 浅层复制

【事件】

事件：通过鼠标、键盘对页面所做的操作就是事件。

????????我们可以对事件做一些处理，处理过程称为"事件驱动"。

????????事件驱动通常用"函数"做相应。

分类：onclick onmouseover onmouseout ondblclick

????????onload onkeydown onkeyup onfocus onblur

????????onkeypress

1. 写html和js原则：

????结构和行为相分离。

????

如何设置事件

onclick是input框的属性

DOM0级事件设置方式：
1. <input onclick="alert(this)"> this指引当前input框
2. <input onclick="fn()"> fn内部的this指引window对象
3. it.onclick=fn???? ????????????fn内部this指引input框对象
4. it[‘onclick‘] = fn fn内部this指引input框对象

事件取消
1. it.onclick = null;
DOM2级事件设置方式
1. 为一个对象设置多个相同的事件，例如onclick事件。[dom0级不能实现]
2. 取消事件
设置事件

addEventListener(事件类型，处理，捕捉冒泡);

?
捕捉、冒泡事件流

?
事件流设置(捕捉、冒泡)
事件解除绑定

????addEventListener()????????????//自己测试IE9和IE10是否有此方法

????removeEventListener()

????以上两个方法是主流浏览器支持的方法

IE事件绑定清除

????在IE里边有自己的事件绑定方法

attachEvent(类型, 处理) 绑定事件
detachEvent(类型, 处理) 解除绑定
类型必须有on标志
没有第三个参数，事件流就是"冒泡型"

在工作中，用哪种事件绑定方式多些呢？
1. 给事件绑定做兼容处理
事件对象event
1. 键盘事件，需要知道哪个键盘被按下
2. 鼠标事件，我们可能需要知道鼠标当前的位置
3. 事件流，冒泡型，确定事件对象目标
4. 需要借助事件对象获得以上信息
5. 获得事件对象：
  
  function(evt){}是主浏览器获得事件对象的固定用法
  
  window.event IE浏览器的事件对象是window对象下的一个属性
通过事件event对象获得鼠标对应的信息
通过事件对象获得键盘被点击信息

?

查看事件是哪个对象触发的

获得事件制作作用的目标对象

加载事件

【BOM浏览器对象模型】

打开新窗口
在子窗口中向父窗口添加内容
间歇函数setInterval()
间隔指定的事件，程序被重新执行一遍

?

?

总结：

????事件

????设置<input onclick="代码">

????????<input onclick="fn">

????????it.onclick = fn / 匿名函数

????????it[‘onclick‘] = fn / 匿名函数

????????

????????addEventListener()

????????removeEventListener()

????????attachEvent()

????????detachEvent()

????????

????????event事件对象

????BOM浏览器对象

????????javascript BOM DOM

????????window.location.href 页面重定向使用

????????open()????????????window.opener

????????setInterval()

作业：

利用js生成一个无序列表<ul><li> (dom操作节点的创建、追加)
利用事件使得许多li元素有效果：当前行高亮显示。（事件使用）

2013-12-3 昨天内容回顾

DOM操作
获得页面元素节点
1. getElementById() id获得只有一个节点对象
2. getElementsByTagName() tag标签名字节点对象以数组形式给我们返回
3. getElementsByName() <input name="xxxx"> 根据name属性，form表单有经常使用
操作属性节点
1. 获得属性节点信息：
2. 对象.属性名字 w3c规定的属性可以使用
3. 对象.getAttribute(属性名) 全部属性都可以使用，包括自定义的
4. 设置属性信息
5. 对象.属性名= 属性值;????????w3c规定的属性可以使用
6. 对象.setAttribute(名字，值); 全部属性都可以使用,也可以设置自定义属性
css样式操作
1. 获得样式信息
2. 对象.style.属性名称
3. 设置样式信息
4. 对象.style.属性名称= 属性值
5. border-top: 对象.style.borderTop
节点创建
1. 文本节点创建 createTextNode(文本内容)
2. 元素节点创建 createElement(tag标签名称)
获得子节点
1. childNodes
2. 如果子节点里边有回车、空白等信息也算作子节点(文本节点) -----(非IE)主流浏览器
3. firstChild 属性获得第一个子节点
4. lastChild 最后一个子节点
5. previousSibling 上一个兄弟节点
6. nextSibling
7. parentNode 获得节点的父节点
获得文本节点的文本内容
1. 文本节点.nodeValue 属性
2. 元素节点.nodeName????????获得元素节点对应的标签名称
节点追加
1. 父节点.appendChild(子节点) ：创建一个新的子节点、也可以在页面上获得具体子节点
2. 父节点.insertBefore(子节点，目标节点); 子节点被追加到目标节点的前边
3. 父节点.replaceChild(替换节点,被替换节点) 节点替换，最后被替换节点就被删除了
复制节点
1. 被复制节点.cloneNode([true]) 默认，深层复制
2. 被复制节点.cloneNode(false)????????????浅层复制
3. <div><span>双方的身份</span></div>
事件
设置具体事件
1. DOM0级事件设置方式(全部浏览器都有支持)
2. <input type="text" onclick="处理/fn" />
3. 元素节点.onclick = 处理(匿名函数表达式) / fn
4. DOM2
5. 主流浏览器事件绑定
6. 元素节点.addEventListener(类型，fn，捕捉true冒泡false)
7. 元素节点.removeEventListener(类型，fn，捕捉true冒泡false)
8. 取消事件操作，参数与add的参数需要完全一致
9. 事件处理需要是一个具体的函数句柄，不能是匿名函数表达式。
10. 使用addEventlistener可以为同一个对象的同一个事件设置多个不同的处理
11. 类型没有关键字"on"，例如click mouseover mouseout
12. ?
13. IE浏览器事件绑定(事件流是冒泡型)
14. attachEvent(类型，处理) 设置事件
15. detachEvent(类型，处理)
16. 类型有关键字"on" 例如 onclick onmouseover onmouseout

事件对象event
1. 我们可以通过这个event对象获得鼠标信息、键盘信息、确定事件目标
2. 主流浏览器获得事件对象
3. 节点.onclick = function(event){}
4. IE浏览器事件对象是window对象的一个属性
5. 几点.onclick=function(){window.event}
通过event事件对象可以获得具体信息
1. clientX clientY 鼠标相对浏览器左边和上边的距离
2. pageX pageY 鼠标相对浏览器左边和上边的距离，有考虑滚动条的距离
3. screenX screenY 计算鼠标在屏幕的物理位置
事件流
1. 捕捉、冒泡
BOM浏览器对象模型
1. window.location.href 获得url地址或进行页面重定向(跳转)
2. open()
3. setInterval("处理/fn()",时间)

15. 事件调用传递参数

昨天作业

作业：

利用js生成一个无序列表<ul><li> (dom操作节点的创建、追加)
利用事件使得许多li元素有效果：当前行高亮显示。（事件使用）

父节点parentNode

????文本节点、元素节点都有父节点

????属性节点是否有父节点

获得具体属性节点

【作用域链】

作用域链可以保证程序在执行的时候按照一定的顺序访问变量。

作用域：外边的变量可以被内部函数使用

作用域链：

????

????
?

????内部函数获得一个变量

????首先在自己的环境里边找，如果没有则到下个环境获得，没有就继续向下个环境寻找。

????变量在寻找的过程走了一条路线，

变量在外部环境可以给内部环境使用，我们称作是变量的作用域，变量有外到内作用域形成了一个链条，我们称作是作用域链。

函数和变量执行顺序
作用域链的优先级关系
作用域链、活动对象
在函数内部获得具体变量信息通过作用域链查找

活动对象，每个局部环境内部都有自己的活动对象，它包含的信息不光有自己本身环境的信息，还包括外部环境的信息，也包括最外边环境信息。

作用域链作用

可以保证活动对象沿着一定顺序访问变量和函数。

具体使用

【闭包】

1. 闭包引入

2. 闭包具体使用：

总结：

作用域链
闭包：函数（函数嵌套函数，内部函数就是闭包）

闭包

闭包使用
闭包解决问题
计数器实现
如何形成闭包
函数嵌套

f1(){

????????f2(){}

????????return f2;

}

闭包特点，可以访问原先作用域的变量信息，变量信息在函数内部的"活动对象"有保留。
变量作用域

【(面向)基于对象】

有许多人说js里边一切东西都是对象。
1. 因为在程序代码里边所有变量都是通过"活动对象"调用的。
对象里边有两样基本属性：属性(变量)和成员方法(函数)
1. 在js里边，对象就是许多"方法"和"变量"的集合体。
创建基本对象
1. 对象字面量

b) json方式创建对象

对象创建

对象在内存中的存放

对象赋值

把对象的地址/引用传递给变量。会形成多个引用指引同一个对象的情况

删除对象属性
实例化对象细节
创建对象具体方式
1. json对象 var per = {name:‘tom‘,age:23}
2. 通过具体函数进行对象实例化 new 函数();
3. Object()
4. constructor ：获得对象构造函数
获得对象的构造函数
json和构造函数方式使用区分
第三种Object创建对象方式

this关键字是谁

函数的执行方式
1. 普通函数执行
2. 对象方法执行
3. 函数可以作为构造函数执行
4. call
  apply执行函数
  
  具体使用：
作用域延伸with
函数是对象
new 函数() 创建一个对象

总结：

闭包
1. 数组闭包显示对应数字
2. 闭包计数器使用
面向对象
创建
1. json
2. new 函数()
3. new Object()
对象在内存的存在
函数的执行方式
with延长作用域 Function(参数1，参数2。。。。函数体)

作业：

????1. 通过闭包+for循环实现每个li标签被点击后

弹出对应的内容

li[i] = function(){alert(li[i].firstChild.nodeValue)}

自己总结函数使用方式(在笔记里边)
自己总结不同情况下this的指引（笔记本总结）

2013-12-5 昨天内容回顾

作用域链
1. js代码在执行的时候有对应的环境
2. 内部环境可以访问外部环境的变量信息，不断可以访问外边环境变量信息，一直可以访问到window对象的变量信息
3. 变量信息：普通变量var、本身函数、参数信息
4. function f1(){
  1. function f2(){
    1. function f3(){
      1. 在函数内部会把变量信息保存在"活动对象"里边
    2. }
  2. }
5. }
6. f3()可以访问到的变量信息有本身自己的，还有f2()的，还有f1() 的，还有window的，f3在寻找变量信息的过程是通过"作用域链"寻找
7. ?
闭包
1. 闭包就是函数
2. 常见闭包，是函数内部嵌套一个函数，内部函数就称为"闭包"
3. function f1(){
  1. var name ="tom";
  2. function f2(){
    1. alert(name);
  3. }
  4. return f2; //返回闭包函数
4. }
5. var f3 = f1(); //f1内部的f2没有被销毁，我们为其找了一个新的指引f3
6. 在f1执行完毕之后，f2有返回，但是f2的作用域链被销毁了，但是它的"活动对象"没有销毁。因此我们使用f3还可以访问到原先f2的活动对象信息
对象创建
1. json var per = {name:‘tom‘,age:23}
2. new 函数() //构造函数
3. new Object()
this是谁
1. 从大的范围说,谁调用方法this就指引谁
2. window
3. 对象
4. dom对象
call()和apply()方法调用
1. 函数.call(对象this指引,参数1,参数2.....)
2. 函数.apply(对象this指引,[参数1,参数2。。。。])
作业

通过闭包+for循环实现每个li标签被点击后

弹出对应的内容

this

OOP三大特性：封装、继承、多态

【封装】

class Person{

????private $money = "20000"; 私有的访问权限

}

为函数定义"私有成员"：

在javascript面向对象成员修饰有：私有的、公开的

【静态成员】

class Person{

????static function run(){}

????static $name = "jack";

}

Person::run(); ????类调用静态方法

Person::$name; 类调用静态属性

在js里边，静态成员只能是函数自己调用，普通对象不能调用。

通过name获得函数名字：

【继承】

类-----extends-----类 php

在javascript里边，可以直接创建一个对象出来

json 字面量对象

new 函数() 构造函数

????函数本身是一个对象，等于说从一个对象创建另外一个对象。

1. 在js里边如何实现继承。

????一个对象可以继承另外一个对象

????dog--------继承---------wolf

????pig---------继承---------yepig

????

2. 单个原型属性继承：

3. 原型对象继承

????

4. 原型对象继承的是对象，不是构造函数????

????

5. 对象访问属性顺序

????//对象寻找自己的属性

//① 在[自己本身对象]里边获得属性

//② 在本身构造函数里边获得

//③ 在构造函数的[原型对象]里边获得

//④ 在构造函数的原型对象的构造函数里边找

????

原型链

一个对象获得具体属性，

会不断在构造函数和原型对象里边层层向上查找，整体说形成了一个有下至上的链条，

我们称为"原型链"

在javascript内部，原型链的顶端是Object

因此我们访问的一些方法，虽然函数本身没有定义，但是还可以访问到，具体是Object原型的方法
原型顶端Object

区分属性是实例的还是原型的
冒充继承
复制继承
把一个对象的属性复制到我本身自己对象身上。

复制和冒充继承：

????冒充继承占用空间更大

????复制继承更灵活，需要就复制，否则不用复制
作用域，内部函数比参数优先级高

总结：

构造函数私有成员属性设置
给函数定义静态成员
继承：
原型继承
1. 单一原型属性继承 black.prototype.run = function(){}
2. 原型对象继承????black.prototype = new Cat();
冒充继承函数.call(this)
复制继承
1. 函数.prototype.extend = function(){}
2. 对象 = new 函数（）
3. 对象.extend(obj);

7. 原型链Object

【多态】

1. 方法重载

????function setname(){}

????function setname(name){} name数据类型string

????function setname(age){} age数据类型int

????function setname(name,age)

????在重载的地方有多态体现，同名函数，他们的参数个数不一样或参数数据类型不一样

????调用同一个方法，体现的结果不一样，是多态

2. 工厂设计模式也是多态

3. 在js里边调用函数，传递参数的个数不一样，在函数内部做判断。

4. 在js的对象里边体现多态

????

【异常】

try{

}catch(error){

}finally{

}

相同的一段程序，不同人执行可能结果不一样，由于传递参数的不同，有的可能会发生错误，这样我们需要通过异常把具体的错误给捕捉到。

异常处理的错误会使得我们的程序是流畅的，不会因为错误停止执行。

如果程序有语法解析错误，不会通过异常捕捉

异常会捕捉运行时的错误。

1. 异常具体使用：

2. 自定义异常抛出使用

????

【正则表达式】

1. 正则作用：

????匹配指定的字符串

????进行注册表单域信息的验证

????在许多内容里边帮组我们匹配出想要的信息。

2. 什么是正则表达式

????文字模式

????手机号码：13245632145

????如何验证：内容是1开始，内容长度是11位，内容必须都是数字的，

头3位在一个指定集合里边(139、135、156、189)

????????????var arr = [‘13476587698‘,‘‘,‘‘];

13476587698

????我们验证手机号码，可以定义一个数组，把全部情况都罗列在里边，但是这样做数组的元素个数非常多，以至于没有可行性。

????现在我们就制作一个简短的文字模式，可以匹配全部的手机号码。

????例如 139|135|136|189数字8

正则表达式的组成（普通字符）
定义字符集组成

特别字符集
小括号()模式单元使用，从目标字符串中析取指定内容

模式修正符
1. g 全局匹配,把每个符合条件的内容都给匹配出来
2. i 忽略大小写
3. m 将内容看作多行

总结：

异常
1. 未声明变量使用
2. 数组长度不是自然数
3. 实例化对象的构造函数不是真正的构造函数等等
4. 异常是会捕捉程序运行的错误
5. 抛出异常 throw 字符串/对象
6. try{
7. }catch(){
8. }finally{
  1. 无论程序走到try或catch里边，该代码都会执行(即使try-catch里边有return)
9. }
多态
1. 一个对象的方法可以被许多对象调用，呈现不同的结果
正则
1. 普通字符
2. 定义字符集 [a-z] [0-9] [kdjksjd] [a-z0-9A-Z]
3. 特别字符 * + ? | . (模式单元)

作业：

练习，声明一个对象，对象里边有若干属性
1. 通过4种方式给该对象再增加3个属性。原型冒充复制原型属性
写一个正则
1. 匹配手机号码。
2. 匹配ip地址

????????
?

2013-12-6 昨天内容回顾

封装
1. 在构造函数里边通过 var 修饰属性或方法
2. 私有成员
3. 在js里边有：私有和公开成员
继承
1. 原型：单个原型属性继承、原型对象继承
2. 冒充继承：在构造函数内部通过call/apply调用另一个构造函数
3. 复制：一个对象可以复制另一个对象的属性或方法
多态
1. 许多对象可以调用同一个方法，大家的结果不一样，呈现多种状态，就是多态
静态成员
1. Math.random() Math.floor()
2. 可以给函数设置本身自己的成员，就是静态成员
3. function setname(){}
4. setname.ABC = "hello";
5. console.log(setname.ABC);
6. setname.f1 = function(){}
正则表达式
1. match() 函数进行正则表达式匹配
2. 字符串.match(模式)
3. 返回结果：0匹配到的内容 index 匹配到内容在目标字符串中开始位置
  input 被匹配的目标字符串
4. 模式单元 () 可以从大的内容里边提取小的内容出来
5. 正则组成：普通字符、定义字符集 [a-z] [0-9]
  特殊字符 * + . \ | ^ $ ?