JS复习--更新结束
js复习-01---03
一 JS简介
1，文档对象模型
2，浏览器对象模型
二 在HTML中使用JS
1，在html中使用<script></script>标签
2，引入外部JS文件
三，JS基本概念
1，ECMAScript中的一切（变量，函数名，操作符）都区分大小写，函数名不能用关键字
2，ECMAScript变量是松散型的，松散型：可以用来保存任何值
3，全局变量和局部变量（var）
4，数据类型：ECMAScript有5种简单的数据类型（基本数据类型）：undefined,, null, boolean, number, string. 一种复杂数据类型：object（无序的名值对组成）。不支持自定义数据类型。
5，Typeof 操作符：可能返回的类型：undefined,, null, boolean, number, string， object ， function
6，数值转换：parseInt()函数（比较合理）；Number()函数（不够合理）。
7，转换为字符串：toString()方法（每个值都有的一个方法，每个字符串也都有一个这个方法）
操作符：
1，一元操作符 一元加减操作符
2，位操作符
3，布尔操作符：
加：
|
var num1 = 5, num2 = 10; var message1 = "5+10 = " + num1 + num2; var message2 = "5+10 = " + (num1 + num2); |
510
10 |
逗号：
|
var num = (1,2,3,4,5); alert(num); |
5（返回最后一个值） |
JS复习 4-5章
变量，作用域，内存问题
1，数据类型：
基本类型：简单的数据段
引用类型：可能由多个值构成的对象
JS不允许访问内存中的位置
数据类型：typeof instanceof
2，执行环境，作用域
执行环境是JS中最重要的概念之一，每个执行环境都有与之相关联的变量对象 ： 全局环境，局部环境。
代码在执行时，会创建变量对象的作用域链
可以延长作用于链：
引用类型
一，对象
引用类型：一类对象所具有的属性和方法。是一种数据结构
1，object
创建object实例的方式有两种
A，var person = new Object;
person.name = “micro”;
B， 使用对象字面量的表示法
var person = {
name ：”micro”,
age : 18
}
访问属性的两种方法
A， person[“name”]
B， person.name
第一种方法相对比较好，可以通过变量来访问属性，如果属性中包含导致语法错误或者关键字保留字，可以使用[]来表示。
但是：：！！！除非必须使用变量来访问属性，否则通常使用点表示法！！！
二，Array类型
1， 创建数组的方法有两种
A， 使用array构造函数 var colors = new Array();
B， 给构造函数传递一个值，创建数组 var colors = new Array(20);
2，数组的length属性：可以通过设置该属性的值在数组的末尾添加或者删除属性。
,3，检测数组：instanceof
检测该值是否为数组：Array.isArray(value);
4，转换方法：
每个对象都具有toLocaleString(), toString(), valueOf() 方法。
|
toString() |
返回数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。 |
|
valueOf() |
返回一个数组 |
（早上在前后端交互时，有遇到这里边的一个问题，取出来的数组没有整个赋值给一个变量。后来想到了拼接方法join() 最后改成了toString()方法，数据就成功赋值给一个变量，传送给后台。）
Join方法只接收一个参数 ， 作为分隔符分字符串 如： join(“,”)
Join里面可以是任何字符串。如果没有传入参数，则默认使用逗号分隔。
5，栈方法 先进后出
栈中的插入和移除都只发生在一个地方：栈顶
|
push() |
可以接收任意数量的参数，它会把它们逐个添加栈的顶端，返回修改后数组的length值 |
|
pop() |
从数组末尾移除最后一项，并减少length值，然后返回移除的项 |
6，队列方法 后进先出
队列在列表的末端现价项，从列表的前端移除项.结合使用以下两个方法可以像操作队列一样操作数组。
|
push() |
向数组末端添加项， |
|
shift() |
移除数组中的第一个想并返回该项，同时数组长度-1 |
7，重排序方法
|
reverse() |
反转数组项的顺序 |
|
sort() |
默认按升序方法排序。该方法会调用每个数组项的tostring()方法。Sort方法比较的是字符串。 |
都返回经过排序后的数组。
8，操作方法
|
contat() |
追加 |
|
splice() |
删除：splice(0, 2) 删除数组中的前两项 插入：splice(2,0,”red”),从第二项的位置出入red，没有删除任何项 替换：splice(2,1,”red”)，删除位置为二开始的一项，并插入red |
|
slice() |
切割：接收切割一个或两个参数： 一个参数，切割从该参数开始到结束。两个参数： 从第一个参数到第二个参数之间的东西 |
9，位置方法
两个位置方法，都接收两个参数：要查找的项（可选）和表示查找起点的位置的索引
|
indexOf() |
从数组的开头开始查找 |
|
lastIndexOf() |
从数组的末尾开始查找 |
10，迭代方法
|
every() |
对数组中的每一项运行给定函数，如果该函数每一项都返回true则返回true |
|
filter() |
对数组中的每一项运行给定函数，返回函数会返回true的项组成的数组 |
|
forEach() |
对数组中的每一项运行给定函数，没有返回值 |
|
map() |
对数组中的每一项运行给定函数，返回函数每次调用的结果组成的数组 |
|
some() |
对数组中的每一项运行给定函数，如果该函数对任意一项返true，则返回true |
三 Date类型
调用date构造函数而不传递参数的情况下，新建对象会自动获得当前的日期和时间。
1,两个方法可以根据特定的日期和时间创建日期对象。
Date.parse()
Date.UTC()
2,日期格式化方法
|
toDateString() |
以特定于实现的格式显示星期几、月、日、年 |
|
toTimeString() |
以特定于实现的格式显示时、分、秒、时区 |
|
toLocaleDateString() |
以特定于地区的格式显示星期几、月、日、年 |
|
toTimeeDateString() |
以特定于实现的格式显示时、分、秒 |
|
toUTCString() |
以特定于实现的格式完整的UTC日期 |
四，RegExp 类型
var expression = / pattern / flags ;
flages支持以下3个标志：
g ： 全局模式
I ： 不区分大小写
m : 可以多行
正则表达式中的元字符 ： （ { [ \ ^ $ | ） * + . ] }
如果需要用到这些字符，则需要转义。转义符为：\
五，function2
JS复习 6-7章
面向对象的程序设计
一，属性类型：数据属性和访问器属性
数据属性的4个描述其行为的特性：（内部值，因此规范写法是加两个中括号）
|
[[Configurable]] |
表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性。默认值为：true |
|
[[Enumerable]] |
表示能否通过for-in循环返回属性。默认值为：true |
|
[[Writable]] |
表示能否修改属性的值。默认值为：true |
|
[[Value]] |
包含这个属性的数据值，读取属性值的时候，从这个位置读；写入属性值的时候，把新值保存到这个位置，这个特性的默认值为Undefined |
访问器属性的4个特性：
|
[[Configurable]] |
表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性。默认值为：true |
|
[[Enumerable]] |
表示能否通过for-in循环返回属性。默认值为：true |
|
[[Get]] |
读取访问器属性时调用的函数，默认值为：Undefined |
|
[[Set]] |
写入访问器属性是调用的函数，默认值为：Undefined |
定义了一二方法可以通过描述符一次性定义多个属性。Object.defineProperties() 该方法接收两个对象参数， 1，要添加和修改其属性的对象，2，要添加或修改到第一个对象中的属性和值（名值对）
二，创建对象
1，工厂模式 （无法得知一个对象的类型）
2，构造函数模式 （可以用来创建特定类型的对象） （相对于工厂模式的三个区别：1，没有明显的创建对象； 2， 直接把属性和方法赋给了this对象； 3， 没有return语句 ； 4 ， 函数名首字母大写）构造函数应该以一个大写字母开头要创建新实例要使用new操作符
3，原型模式
每个函数都应该有一个原型属性，这个属性是一个指针，指向一个对象。这个对象用途是包含可以由特定类型的所有实例共享的属性和方法。Prototype就是通过构造函数而创建的那个对象实例的原型对象hasOwnProperty()方法可以查询一个属性是来自实例还是来自原型。
4，原型与in操作符
in 有两种使用方法：单独使用和在for-in中循环使用。
1，单独使用：in操作符会在通过对象能够访问给定属性时返回true，不论是在实例中还是在原型中。同时使用hasOwnProperty()和in操作符，就可以确定属性是在对象中还是存在原型中。（只使用hasOwnProperty()不是也能确定属性是否存在原型中，对象中和实例中是什么区别？？）P152
2，使用for-in循环:返回能够通过对象访问的，课枚举的属性，包括存在实例中和原型中的属性。屏蔽了原型中不可枚举属性（将Enumerable）标记为false的属性
三，继承
1，两种继承方式：接口继承和实现继承。实现继承主要是依靠原型链来实现的
2，原型链
3，（继承没看懂。记得再来看一遍）
函数表达式
定义函数的方法有两种：1，函数声明； 2，函数表达式
1，递归。
|
function factorial(num){ if (num <= 1) { return 1; }else{ return num * factorial(num - 1); } } |
通过使用arguments.callee代替函数名，可以确保无论函数怎么调用，都不会出问题
return num * arguments.callee (num - 1);
或者使用命名函数来解决调用时的问题 function factorial = (function f(num)){ if (num <= 1) { return 1; }else{ return num * f(num - 1); } }
|
2，闭包
闭包：有权访问另一个函数作用域中的变量的函数。创建闭包常见的方式：在函数内部创建另一个函数。
闭包只能取得包含函数中任何一个变量的最后一个值。
|
function createFunction(){ var result = new Array(); for (var i = 0; i < 10; i++) { result[i] = function(){ return i; }; } return result; } |
表面上看，每个函数都返回自己的索引值。但是事实上每个返回的都是10因为每个函数的作用域链中都保存着createFunction()函数的活动对象，所以他们引用的都是同一个变量i |
可以通过常见一个匿名函数强制让闭包的行为符合预期：
|
function createFunction(){ var result = new Array(); for (var i = 0; i < 10; i++) { result[i] = function(num){ return function(){ return num; }; }(i); } return result; } |
定义一个匿名函数，并将执行该匿名函数的结果传给数组，匿名函数有一个参数num，是最终要返回的值。 |
匿名函数的环境具有全局性。所以this对象在运行时会出现问题
BOM
一，window对象
1，由于window对象也是ECMAScript种的global对象的角色，所以所有全局作用域中声明的变量，函数都会变成window对象的属性和方法。
网页中定义的任何一个对象，变量和函数，都一window作为其global对象，因此有权访问parseIn()等方法。
2, 窗口位置
screenX 和 screenY 属性
screenLeft 和 screenTop 属性
通过以上4个属性可以确定window对象的位置
3，窗口大小
跨浏览器的确定一个窗口大小：4个属性
innerWidth innerHeight outWidth outHeight
调整窗口大小： window.resizeTo(200 , 300 );
4,导航和打开窗口
Window.open();
可以传4个参数，：url ，窗口目标，一个特性自粗穿，一个表示页面是否取代浏览器历史记录中当前加载页面的布尔值。
5，间歇调用和超时调用
超时调用：setTimeout() 调用后要清除：clearTimeout()
接收两个参数：要执行的函数，时间
间歇调用：setInterVal() 调用后要清除：clearInterVal()
6，系统对话框
alert() confirm() prompt()
7,location对象
它既是window对象说的属性也是document对象的属性，window.location 和 document.location引用的是同一个对象
8，位置操作
location.assign(“https://www.baidu.com/”);
location.href
禁用后退：replace()
9, navigator对象
A，插件检测
plugins 数组 navigator.plogins
10,screen 对象
11， history 对象，历史记录
go history.go(“https://www.baidu.com/”);
可以传1或者-1来表示是向前还是向后
DOM
DOM 文档对象模型
1，节点层次：节点之间的关系勾陈过了层次
A，node类型
每个节点都有一个nodeType属性，用于表明节点的类型，
最常用:元素和文本节点
nodename 和 nodeValue
B, 节点关系：每个节点都有一个childnode属性，其中保存着一个nodelist对象（数组对象）
var fitst = someNode.chileNode[0];
或者：
var second = someNode.chileNode.item[0];
每个节点都有一个parentNode属性
C, 操作节点
appendChild() 添加节点 和 cloneNode() 复制节点
2，document类型
a， 所有的浏览器都支持的属性：docement.body 和 document.getElement
b，查找元素
document.getElementById
document.getElementByTagName()
c,特殊结合
document.anchors 带有name属性的a元素
document.forms .links
3,element类型
a，html元素都是element类型
#id title lang dir .classname
b, 取得特性
var div = document.getElementById("id");
div.getAttribute("id");
div.getAttribute("class");
c,设置特性
var div = document.getElementById("id");
div.setAttribute("id",'mydiv');
d,attributes属性
Element是使用attitude属性的唯一一个DOM节点类型
取元素id的特性：
var id = element.attrbutes.getElementById(‘id’).nodeValue;
e, 创建元素
document.createElement()
var div = document.createElement(‘div’);
div.id = ‘mydiv’;
div.class = ‘divclass’;
document.body.appendChild(div);
var div = document.createElement(‘<div id=\”my\” class=\”box\”></div>’);
4.Text类型
a,创建文本节点
document.createTextNode(“<strong>Hello</strong>”);
var element = document.createTextNode(‘div’);
element.className = ‘message’;
var textNode = document.createTextNode(‘Hello’);
element.appendChild(TextNode);
document.body.appendChild(element);
b,规范化文本节点
c,分割文本节点
splitText() 按位置分割
5.comment类型
与Text类型继承形同的基类
6.CDATASetion
7.DocumentFragment
8.DocumentType
9.Attr
二、Dom操作技术
1. 动态脚本
2. 动态样式
var link = document.createElement(‘link’);
link.ref = ‘stylesheet’;
link.type = ‘text/css’;
link.head = document.getElementByTagName(‘head’)[0];
head.appendChild(link);
3.操作表格
4.使用NodeList
DOM扩展
一、API (选择符API)
1.querySelector()
接收一个css选择符，返回与该模式匹配的第一个元素
2.querySelectorAll()
。。。。css。。。。,若匹配：true 否则：false
二、元素遍历
Element Traversal API为DOM添加了以下5个属性
a,childElementCount : 返回元素个数
b,firstElementchild：第一个元素
c,last。。。:最后
d,previousElementSibling：前同胞
e,nextElementSibling: 后同胞
三、HTML5
1.getElementByClassName()
2.焦点管理：document.activeElement属性
3.插入标记
innerHTML属性
div.innerHTML = ‘Hello’;
outerHTML 属性
4.Children 属性
5.contain() 方法
6.滚动
事件
事件流：从页面接收事件的顺序
事件冒泡：事件捕获
DOM2级中事件流前三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段
事件处理程序
事件：click load
事件处理程序 onclick onload
- HTML事件处理程序
<input type=”button” onclick = “alert(‘Hello’)”/>
双引号："
例：alert("Hello");
- with 扩展作用域
DOM 0级处理事件处理程序
每个元素都有自己的事件处理程序的属性、一般为小鸟 如：onclick
将此属性的值设为一个函数，就可以指定事件处理程序
如：var btn = document.getElementById(‘mybtn’);
btn.onclick = function(){
alert(‘Hello’);
}
DOM 0 级指定的事件为元素的方法
如：var btn = document.getElementById(‘mybutton’);
btn.onclick = function(){
alert(this.id); //mybutton
}
删除事件处理程序：btn.onclick = null;
DOM 2 级事件处理程序
DOM 2 级指定处理和删除处理程序的操作
a,处理：addEvmentListener()
b,删除：removeEventListener()
所有Dom节点都接受这俩方法
3个参数：要处理的事件名，作为事件处理程序的函数
一个布尔值（true:捕获 false:冒泡）
加：var btn = document.getElementById(‘mybtn’);
btn.addEventListener(‘click’,function){
alert(this.id);
},false);
使用DOM 2级好处之一：可以添加多个事件处理程序，多个事件处理程序会按顺序触发
移除事件处理程序removeEventlistener()传入的参数与添加时一致;
(DOM 2 级添加的匿名函数无法移除)
如：a,var btn = document.getElementById(‘mybtn’);
btn.addEventListener(‘click’,function(){
alert(‘Hello’);
}),false);
btn.removeEventListener(‘click’,function(){
alert(‘Hello’);
},false);
b,var btn = ….
var handler = function(){
alert(this.id);
}
btn.addEventListener(‘click’,handler,false);
btn.removeEventListener(‘click’,handler,false);
IE事件处理程序
a,attachEvent()
b,detachEvent()
参数：事件处理程序名称，事件处理程序函数可以绑定多个事件处理程序：顺序为反顺序
如：DOM 2级中的a 是可以移除的，其他特性与DOM 2级一样
跨浏览器的事件处理程序
a,addHandler
b,removeHandler
3个参数：要操作的元素之一，事件名称，事件处理程序
13.3事件对象
所有的浏览器都支持event事件
- DOM中的事件对象
阻止默认行为：preventDefault(),只有cancleable:true的事件可以使用该方法
- IE中的事件对象
- 跨浏览器的事件对象
1.3.4事件类型
UI事件
a, load事件：页面完全加载都触发
b, unload : 页面完全卸载后再window上触发
c, abort ：用户停下载过程
d, select : 用户选择文本框中一个或多个字符时
e, resize : 窗口框架大小变化时在window下触发
f, scroll : 用户滚动带滚动条内容时触发
多数这些事件都与window对象或表单控件有关
2,焦点事件
a, blur b, focus
顺序：focus ---focusin –blur –DOMFocusinIn –focus –DOMFocuIn
- 鼠标与滚轮事件
a) clink
b) clbclick
c) mousedown
d) mouseenter
e) mouseleave
f) mousemove
g) mouseout
h) mouseup
顺序：mousedown –mouserup –click –mousedown—mouseip—click—dbclick
位置
a) 客户区的坐标位置
属性clickx,clicky
var div = document.getElementById(‘mydiv’);
EventUtil..addHandler(div,’click’,function(event){
event = EventUtil.getEventlevent();
alert(‘位置’,+event.clientX+’,’+event.clientY);
});
b) 页面坐标位置
属性：pageX , pageY
c) 屏幕坐标位置
screenX , screenY
d) 修改键
4.键盘与文本事件
DOM 0 级
a) keydown : 按下任意键触发
b) keypress: 按下字符键触发
c) keyup : 释放键盘上的键时触发
所有元素都支持以上3个事件，文本输入时最为常用
textInput事件
键码：P380
5，复合事件 （DOM 3级）
a) compositionstart
b) compositionupdate
c) compositionend
6, 变动事件 （DOM2级）
7, HTML5事件
13.5 内存和性能
1，事件委托
利用了事件冒泡，只指定一个事件处理程序，便可管理某一类事件。
2,移除事件处理程序：如：btn.onClick = null;
13.6 模拟事件
1，dom中的事件模拟
createEvent() 参数：要创建的事件类型的字符串
a) 模拟鼠标事件：createEvent(MouseEvent)
b) 模拟键盘事件：createEvent(keyboardEvent)
14，表单脚本
1，基础知识
Html: <form>
JS : HTMLFormElement
HTMLFormElement 有以下属性：
a) acceptcharset: 服务器能够处理的字符集
b) action: 接受请求的url
c) elements: 表单中所有控件的集合
d) enctype: 请求的编码类型
e) length: 表单中的控件数量
f) method： get或者post
g) reset(): 将所有表单重置为默认值
h) submit(): 提交表单
i) target():用于发送请求和接受相应的窗口名称
获取表单的方法：以下几种：
a) var form = getElementById(“formid”);
b) document.forms; (获取页面中的所有表单)
c) document.forms[0]; (获取页面中第一个表单)
d) document.forms[“form2”]; (获取页面中name（名称）为form2的表单)
表单中如果有包含提交按钮的话，只要按下enter键就会提交表单。
如何阻止表单提交：
var form = getElementById(“myform”);
EventUtil.addHandler(form,”submit”,function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止默认事件
EventUtil.preventDefault(event);
});
2，重置表单
<input type=”reset”, value = “reset”>
form.reset();
<button type=”reset”>reset</button>
Reset:用户点击reset按钮时，表单中的每个字段都会恢复到页面加载时的样子。
3，表单字段
A) 共有的表单字段属性
除了<fieldset>外所有的表单字段都有一只共有的属性：
a)disabled b)form c)name d)readonly e)tabIndex f)type g)value
B) 避免多次提交表单
EventUtil.addHandler(form,”submit”,function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//取得提交表单
var btn = target.elements[‘submit-btn”];
//禁用它
btn.disabled = true;
});
C)共有的表单字段方法
每个表单字段都有2个方法：focus() blur()
D) 共有的表单字段事件
blur change focus
14.2 文本框脚本
1)，<input>
2), <textarea>
1,选择文本
select()方法 不接受参数
var textbox = document.form[0].element[“textbod1”];
textbod.select();
获得焦点是选择所有文本
a) select事件
b) 取得选择的文本 select的两个属性：selectionStart ， selectionEnd
c) 选择部分文本
2，过滤输入（表单验证）
A) keypress 事件
B) 自动切换焦点
3，表单验证（HTML5验证API）
a) 必填字段 required
b) 其他输入类型 如：email href
c) 数字范围
,<input type=”number” min=”0” max=”100” step=”5”>
d) 输入模式
,<input type=”text” pattern=”\d+ ” name=”count” >
e) 检测有效性
checkValidity() 表单自身的方法可直接调用
f)禁用验证
,<input type=”text” name=”count” novalidate >
14.3 选择框脚本
<select> <option
选择框的属性（type）：select-one select-multiple
1，选择选项：
只允许选择一项：selectedIndex
2，添加选项：
3，移除选项：
removeChild(selectbox.options[0]);
remove();
selectbox.remove(0);
selectbox.option[0] = null;
4，移除和重排选项
appendChild()
如：asd.appendChild(dfg)
