Coding JavaScript 学习笔记整理 Lieme 2017-09-29 2024-01-04 1.字符集 1.1 区分大小写 JavaScript 是区分大小写的
1.2 空格 换行符和格式控制符
2.注释 // 要注释的前面加这个
3.直接量 程序中直接使用的数据值
4.标识符和保留字 就是JavaScript中一些变量名等
5.数据类型 5.1 number 数字型
5.2 string 字符型
5.3 boolean 布尔型 true or false 以上为原始类型 无法在分类
5.4 undefined 未定义或者不存在
5.5 null 空 以上为特殊类型
5.6 object 对象 可以是各种类型的集合
6.typeof运算符 6.1 原生使用 object.prototype.toString.call() 检查数据的类型
6.2 直接使用 typeof test 来判断类型
7.数值 7.1 正0 和 负0 是等价的
7.2 Infinity javascript 在算术运算时发生溢出,下溢 或被零整除的时候不会报错 infinity大于一切数值除了 NAN -infinity 小于一切数值 除了 NAN
7.3 NaN 不等于任何值包括它本身
7.4 JavaScript 不区分整数值和浮点数值,所有数字均采用浮点数值标识
8.字符串 '123132'
9.转义 反斜杠(\)
10.null 和 undefined null默认是一个特殊的对象,undefined 则是未定义
11.布尔值 false 和 true
12.变量声明 var a;
13.声明提前(变量提升) JavaScript 的工作方式先解析代码,获取所有被声明的对象,然后逐行运行,造成的后果就是所有变量的声明语句都会被提升到代码的头部,这就是声明提前
注意:变量提升只对var 命令声明的变量有效,如果一个变量的声明不是var则无效
变量作用域:全局作用域,局部作用域。
注意:在函数体中局部变量的优先级高于同名的全局变量。也就是说在一个函数内部声明一个局部变量或者函数中带有的变量和全局变量同名,那么局部变量会覆盖全局变量。
在函数中默认用var 声明的是局部变量,没有var 的则是全局变量声明。
14.语句 14.1 表达式语句
14.2 声明语句 var a=1,b=2;
14.3 条件语句 if switch
14.4 循环语句 for do while while for in
14.5 return语句
15.对象 JavaScript中的一种基本类型 15.1 键名 对象的所有键名都市字符串 又称为属性(prototype),它的键值可以是任何数据类型,如果一个属性的值为函数,通常把这个属性称之为方法。
15.2 创建对象
对象直接量 var a = {};
关键字new var a = new Object();
Object.creat() var a = Object.creat();
15.3 对象直接量
对象直接量 是由若干名/值对组成的映射表。键名和键值之间用冒号分隔。如果对象内部包含多个键值对,则每个键值对之间用逗号分隔。整个映射表用花括号括起来。
注意:对象直接量的最后一个属性可由可无,但是在ie中如果多了一个逗号,会报错,
15.4 构造函数
通过new创建对象 new运算符创建并初始化一个对象,关键字new后跟随一个函数调用,那这个函数称作构造函数。
例子:var a = {}
var a = new Object();
var a = Object.creat(null) 这三个是等价的
15.5 对象常见的用法
创建(create) 设置(set) 查找(query) 删除(delete) 检测(test) 枚举(enumerate)
15.6 读取属性
例子: var a = {name:"1"}; a.name = 1
15.7 查找属性
例子: var a = {name:"1"}; Object.keys(a)
15.7 删除属性
例子: var a = {name:"1"}; delete a.name
delete只能删除自身属性
16.构造函数 解释:就是用来生成对象的函数,一个构造函数可以生成多个对象,这些对象都有相同的结构
特点:函数体内使用了 this 关键字 ,代表了所要生成的对象实例 生成对象时,必须用 new命令
注意:构造函数名的第一个字母必须大写,每一个构造函数都有一个prototype属性
例子:function Cx(){
this.name = 'cx'
}
var log = new Cx();
log // Cx{name:cx}
or
function Cx(name){
this.name = name;
}
var log = new Cx('cx');
log // Cx{name:cx}
this 总是返回一个对象,返回属性或者方法当前所在的对象
例子:this.prototype
var A = {
name:"cx",
test:function(){
return this.name
}
};
var B = {
name:"xc";
}
B.test = A.test;
B.test() // cx
注意:如果一个函数在全局环境中运行,那么他的this 指向window也就是最顶层对象
17.改变this的指向 方法:call apply bind
例子:call(obj1,arr1); 第一个参数为要指向的对象,也就是要指定的上下文 后面的为传入的参数 如果参数为空,null,undefined 则默认传入全局对象
apply(obj1,[arr1,arr2]); 同上,只是参数换成了数组
bind(0bj1) 将函数体内dethis绑定到某个对象上返回一个新的函数
18.原型 解释:JavaScript中每一个对象(除null)都会和另一个对象相关联,也就是继承另一个对象。那么另一个对象就称之原型,每个对象都从原型继承属性
所有通过对象直接量创建的对象都具有一个原型对象,我们都可以通过Object.prototype获得对原型对象的引用。
通过关键字new 或者构造函数创建的对象的原型就是构造函数的prototype属性。比如 通过new Object()创建的对象继承自Object.prototype, 通过new Array()创建的对象的原型就是Array.prototype。
Object.parototype 不会继承任何属性,它没有原型
所有内置构造函数都具有一个继承自Object.prototype的原型
19.原型链 解释:对象的属性和方法可能定义在本身,也可能定义在它的原型对象。由于原型对象本身也对象又是原型,所以形成了一条链式关系,就又可能 a 的原型对象是b b的原型对象是c
原型链的作用:如果查找一个对象的属性,JavaScript是先查找这个对象本身,如果没有则查找它的原型对象,如果没有则查找原型对象的原型 如果一直没有直到最顶层的object.prototype还是没有则返回undefined
20.继承 JavaScript对象具有自身属性,也又一些属性是从原型对象继承而来,当查询一个不存在的对象的时候 不会报错而是返回undefined
如果对象自身和它的原型都定义了一个同名的属性,那么优先读取自身的属性,这个叫做覆盖。
21.constructor prototype对象有一个constructor属性,默认指向prototype对象所在的构造函数。
22.object.prototype.isPrototypeOf() 用来判断一个对象是否是另一个对象的原型
23.数组 数组是值的有序集合,每个值叫做一个元素,而且每个元素在数组中都有一个位置也就是下标从0开始也称之为索引,整个数组用[]表示
创建数组 var a = [1,2,2] or var a = new Array(1,2,2);
求数组的长度 a.length
添加/删除 a.push()往数组最后一个添加 shift() 删除数组中的元素 具体数组的操作看前面笔记
24.函数 函数就是一段可以反复调用的代码块。
函数使用关键字function来定义,还包括一个称为形参(parameter)的标识符列表,这些参数在函数体内像局部变量一样工作
函数调用会为形参提供实参的值,函数使用它们实参的值来计算返回值,称为该函数调用表达式的值
除了实参之外,每次调用还会拥有另一个值, 本次调用的上下文 也就是this关键字的值
如果函数挂载在一个对象上,作为对象的一个属性,就称之为 对象的方法
js中的函数可以嵌套在其他函数中定义,这样它们就可以访问它们当时所处作用域中的任何变量,这个就叫做闭包,闭包的作用 读取函数内部变量,让这些变量常驻内存
函数的定义有三种方法
function命令:function name(){}
函数表达式:var a = function(){}
function构造函数 var a = new Function(){} = var a = function(){}
注意:如果函数多次声明,那么后声明的会覆盖前面声明的。
函数可以调用自身,这就是递归
24.1 嵌套函数
在JS中函数内可以嵌套其他函数
24.2 函数调用
构成函数主题的JavaScript代码在定义时并不会执行,只有调用该函数,它们才会执行。有4中方法调用JS函数
1.作为函数、 f()
2.作为方法 o.f = function(){} o.f();
3.作为构造函数 var a = new Object(); var a = new Object;
4.通过它们的call() 和 apply() 方法间接调用
24.3 传参
如果传入的参数名字相同,则取最后出现的那个的值
例子: function go(x,x){
console.log(x)
}
go(1,2) // 2
24.4 函数作用域
指变量存在的范围,js中有两种作用域,一种全局作用域,变量在整个程序中一直存在,所以地方都可以读取。一种函数作用域,变量只有在函数内部存在,只有函数内部可以访问。
如果在函数内部定义一个变量和全局变量名相同,那么函数内部的变量将覆盖全局变量
24.5 函数属性、方法和构造函数
name属性 function a(){} a.name // a
length属性 function f(x,y){} f.length //2
24.6 严格模式
'use strict'
25.表达式和运算符 25.1 JS 原始表达式包含 常量 直接量 变量 或者关键字
直接量就是直接在程序中出现的常数值 如 1.2 "hello"
保留关键字 this true false this 等
变量 i num
25.2 对象和数组的初始化表达式
实际上是一个新创建的对象和数组,也可以称之为 对象直接量 和 数组直接量
例子 var a = {}, var b = [];
25.3 函数定义表达式
函数定义表达式(函数直接量)定义一个Javascript 函数 。表达式的值就是这个新定义的函数。
例子:var f = function(){}
25.4 属性访问表达式
var f = {name:"1",age:"22"} f.name // 1 or var t = [1,2,12,3] t[3] //3
26.DOM 文档对象模型,表示和操作HTML和XML文档内容的基础 firstChild lastChild 返回该节点子节点的第一个和最后一个 如果没有返回null
parentNode 当前节点的父节点 没有返回null
childNodes 当前节点的子节点列表
nextSibling previousSibling 当前节点的前一个 和 下一个。 具有相同父节点的两个节点称之为兄弟节点
textContent 返回该节点的文本内容
nodeType 返回当前节点类型
nodeValue 返回text节点或者comment节点的内容 ,其他类型一律返回null
nodeName 元素标签名,大写显示
children 类型childNodes 返回一个NodeList对象,但是children列表只包含Element对象
注意 : text 和commont 没有children 属性
firstElementChild lastElementChild 类型firstChild 和 lastChild 但是只代表子Element
nextElementChild previousElementSibling 类似nextSibling 和 previousSibling 但是只代表兄弟 Element
childElementCount 返回子元素的数量
offsetParent 返回当前HTML元素最靠近 并且css 的position 不等于static的父元素
innerHTML 返回 读取元素内部的html
outerHTML 返回所有内容 包括读取元素的本身
insertAdjacentHTML() 将任意HTML标记字符插入到指定的元素相邻的位置
createElement 创建节点
createTextNode() 创建一个text节点,参数为所要生成的文本节点的内容
createAttribute() 用来复制已存在的节点
appendChild 和 insertBefore 用来插入节点
removeChild 删除一个节点
replaceChild 删除一个节点并用新的替换一个节点
elementFromPoint() 判断元素在某点
scrollTop 滚动方法
scrollBy 用于将网页移动指定距离 可以向右 和向下滚动 像素
scrolllntoView 保证元素在视口可见
文档属性
clientWidth clientHeight 返回元素节点可见区域的宽度 和 高度
clientLeft clientTop 返回元素节点左边框的宽度 和 网页元素顶部边框的宽度 内联元素 则为0
scrollWidth scrollHeight 返回网页元素的高度和总宽度。
scrollLeft scrollTop 返回网页元素的水平滚动条向右侧滚动的像素数量 和 元素的垂直滚动条向下滚动的像素数量
offsetWidth offsetHeight 返回元素的水平宽度和垂直高度
offsetLeft offsetTop 返回当前元素相对于左上角offsetParent节点的垂直偏移 和 返回水平位移
document.cookie 操作浏览器的cookie
domain 返回当前文档的域名
lastModified 包含文档修改时间的字符串
location 与window对象的location属性引用同一个location对象
document.referrer 返回当前文档的访问来源 如果当前是从浏览器键入或者无法获取来源则返回空
title 当前文档标题
doctype document对象一般有两个子节点,第一个子节点是document.doctype 它是一个对象包含当前文档类型信息。 html5 用 <!DOCTYPE html>
documentElement 返回当前文档的根节点 它是文档的第二个节点 第一个是上面的
defaultView 在浏览器中返回document 对象所在的window对象 否则返回null
activeElement 返回当前文档中获得焦点的元素
characterSet 返回渲染当前文档的字符集 如 utf-8
readyState 返回当前文档的状态
有三种 :
loading 加载html部分还在解析
interactive 加载外部资源
complete 加载完成
compatMode 返回浏览器处理文档的模式
类型
BackCompat 向后兼容模式
CSS1Compat 严格模式
document.write docuemnt.writeIn
window.getSelection() 方法返回一个 selection 对象 查询选取的文本
contenteditable 设置div 可编辑
execCommand 插入元素 或者改变样式
27.DOM属性 和 css 27.1 属性
HTML 元素由一个标签和一组称为属性的名/值对 组成
HTML 属性作为 Element的属性
获取和设置非标准HTML属性
getAttribute() //获取属性
setAttribute() //设置属性
hasAttribute() //检测属性是否存在
removeAttribute() //删除
数据集(dataset)
例子:<div id="test" data-tip="title"></div>
var a = document.getElementById('test');
a.dataset.tip // title
attr节点属性(attributes)
用法:document.body.attributes[0] body元素的第一个属性
属性节点对象由name和value属性,对应该属性的属性名和属性值 等同于 nodeName属性和 nodeValue 属性
例子: <div id="top"></div>
var t = docuemnt.getElementById('top');
t.attributes[0].name //id
t.attributes[0].nodeName // id
t.attributes[0].value // top
t.attributes[0].nodeValue // top
27.2 元素的内容
用法: <div id="t">a</div>
var a = docuemnt.getElementById('t');
a.innerHTML //a
a.innerHTML = 'b' //b
27.3 css
例子: <div id="t">a</div>
var a = docuemnt.getElementById('t');
a.style.color = red
a.style.fontSize = '14px' // 需要带单位
a.style.cssText= "font-size:14px"
a.style.setProperty('color','blue') //设置css属性
a.style.getPropertyValue('color') //读取css属性
a.style.removeProperty('color') //删除css属性
window.getComputedStyle(t,null) 获取引用的样式或者伪元素样式 第一个参数是要获取其计算样式的元素,第二个参数也是必需的,通常是null或空字符串
例子:<style>
#tc{ height:30px;}
#tc:before{content:'t';color:green};
</style>
<div id="tc" style="background:yellow"></div>
var t = document.getElementById('tc');
window.getComputedStyle(t,null).height //30px
window.getComputedStyle(t,':before').content // t
window.getComputedStyle(t,null).getPropertyValue('line-height');
脚本化css 通过改变或者添加HTML的class属性值,也是改变内联style属性的一个方法。
例子: t.className = 'attention'; //设置class属性
t.className += 'attention2'; //添加class属性
t.className = ''; //删除全部class
t.className = t.className.replace('attention2',''); //删除名为attention2的class
在HTML5中,每个元素都定义了classList属性,该属性值是DOMTokenList对象:一个只读的类数组对象,它包含元素的单独类名,而且是实时的。它有四个方法:
element.classList.add() //添加
element.classList.remove() //删除
element.classList.contains() //是否包含
element.classList.toggle() //如果不存在类名就添加,否则删除
查询、插入和删除样式表
document.styleSheets[]数组的元素是CSSStyleSheet对象。CSSStyleSheet对象有一个CSSRules[]属性,指向一个类数组对象,它包含样式表的所有规则:
document.styleSheets[0].cssRules[0]
27.4 css事件
transitionEnd 监听 transition 结束
animationstart 监听 动画开始 触发
animationend 动画结束触发
animationiteration 开始新一轮动画循环时触发 如果循环次数为1 则不触发
例子: element.addEventListener("animationstart", listener, false);
element.addEventListener("animationend", listener, false);
element.addEventListener("animationiteration", listener, false);
注意:要加上 webkit 等前缀
通过AnimationPlayState(animation-play-state) 控制动画的状态。
例子:element.style.webkitAnimationPlayState = "paused";
element.style.webkitAnimationPlayState = "running";
28.Event 事件 28.1 相关术语
什么是事件 就是浏览器通知应用程序发生了什么事情
事件类型 用来说明发生什么类型事件的字符串 比如 mouseover
事件目标 发生的事件与之相关的对象,当江事件式,必须同时指明类型和目标
事件处理处理程序 处理或响应事件的函数
事件对象 与特定事件相关且包含该事件详细信息的对象
事件传播 浏览器决定哪个对象触发其事件处理程序的过程。 当文档元素上发生某个类型的事件时,它们会在文档树上 传播 或 冒泡
事件捕获 事件传播的另一种方式,在容器元素上注册的特定处理程序有机会在事件传播到真实目标之前捕获它。著作权归作者所有。
28.2 Event事件
注册事件处理程序 有两种基本方式
1.给事件目标对象或文档元素设置属性
2.通过 addEventListener(type,listener[,useCapture])
type 事件名称(事件类型),字符串,大小写不敏感
listerner 监听函数。事件调用时,调用它
useCapture 布尔值,在监听函数是否在捕获阶段触发,默认false(监听函数只在冒泡阶段触发)
注意:使用监听函数的时候 事件去掉on
事件分为三种阶段
捕获阶段
目标阶段
冒泡阶段
事件委托(事件委托)使用后 后面在插入的新节点还是可以监听到的
基于事件在冒泡阶段会向上传播到父节点上,我们可以将子节点的监听放到父节点上,由父节点的监听函数统一处理多个子元素事件。这种方法叫做事件的代理
事件取消
用属性注册的事件处理程序的返回值能用于取消事件的浏览器默认操作
function cancelHandler(event){
var event = event || window.event;
if(event.preventDefault) {event.preventDefault();} //标准
if(event.returnValue) { event.returnValue = false;} // IE
return false; //用于处理使用对象属性注册的处理程序
}
取消事件传播
e.stopPropagation //ie e.cancelBubble = true
文档事件
beforeunload //当你要从当前浏览页面跳走的时候出现你是否要离开的弹框
window.addEventListener('beforeunload',function(e){
var message = '你确认要离开吗!';
e.returnValue = message;
return message
});
unload //当窗口要关闭或者document事件要卸载的时候触发,排在window body frameset对象上面 触发顺序排在beforeunload 和pagehide后面 只有在页面没有被浏览缓存的时候触发
load //直到文档和所有图片都被加载完触发 缓存的页面不会触发
error //在页面加载失败的时候触发
pageshow // 在页面加载时触发
pagehide // 通过 前进后退按钮的时候触发
DOMContentLoaded事件:当文档加载解析完毕且所有延迟(deferred)脚本(图片未加载完毕)都执行完毕时会触发,此时图片和异步(async)脚本可能依旧在加载,但是文档已经为操作准备就绪了。也就是说,这个事件,发生在load事件之前。
document.addEventListener('DOMContentLoaded',handler,false);
readystatechange事件:document.readyState属性会随着文档加载过程而变,而每次状态改变,Document对象上的readystatechange事件都会触发。
document.onreadystatechange = function() {
if(document.readyState == 'complete'){
}
}
scroll事件、resize事件
scroll事件在文档或文档元素滚动时触发,主要出现在用户拖动滚动条。
resize事件在改变浏览器窗口大小时触发,发生在window、body、frameset对象上面。
hashchange事件、popstate事件
hashchange事件在URL的hash部分(即#号后面的部分,包括#号)发生变化时触发。如果老式浏览器不支持该属性,可以通过定期检查location.hash属性,模拟该事件。
popstate事件在浏览器的history对象的当前记录发生显式切换时触发。注意,调用history.pushState()或history.replaceState(),并不会触发popstate事件。该事件只在用户在history记录之间显式切换时触发,比如鼠标点击“后退/前进”按钮,或者在脚本中调用
cut事件、copy事件、paste事件
这三个事件属于文本操作触发的事件。
cut事件:在将选中的内容从文档中移除,加入剪贴板后触发。
copy事件:在选中的内容加入剪贴板后触发。
paste事件:在剪贴板内容被粘贴到文档后触发。
这三个事件都有一个clipboardData只读属性。该属性存放剪贴的数据,是一个DataTransfer对象
焦点事件
焦点事件发生在Element节点和document对象上。
focus事件:Element节点获得焦点后触发,该事件不会冒泡。
blur事件:Element节点失去焦点后触发,该事件不会冒泡。
focusin事件:Element节点将要获得焦点时触发,发生在focus事件之前。该事件会冒泡。Firefox不支持该事件。
focusout事件:Element节点将要失去焦点时触发,发生在blur事件之前。该事件会冒泡。Firefox不支持该事件。
这四个事件的事件对象,带有target属性(返回事件的目标节点)和relatedTarget属性(返回一个Element节点)。对于focusin事件,relatedTarget属性表示失去焦点的节点;对于focusout事件,表示将要接受焦点的节点;对于focus和blur事件,该属性返回null。
由于focus和blur事件不会冒泡,只能在捕获阶段触发,所以addEventListener方法的第三个参数需要设为true。
鼠标事件
click
contextmenu
dbclick
mousedown mouseup
mousemove
mouseover mouseenter
mouseout mouseleave
MouseEvent 对象的属性
button buttons
clientX clientY
mousementX mouseentY
screenX screenY
pageX pageY
relatedTarget
鼠标滚轮事件
mousewheel
键盘事件
keydown
keyup
keypress
textinput 输入文本触发
altKey属性:alt键
ctrlKey属性:key键
metaKey属性:Meta键(Mac键盘是一个四瓣的小花,Windows键盘是Windows键)
shiftKey属性:Shift键
表单事件
input propertychange
change
select
reset //表单重置的时候触发
submit //提交的时候触发
触控事件
TouchEvent
Touch
TouchList
touchstart //接触触摸屏开始触发
touchend //不在触摸触发
changedTouches // 返回一个TouchList对象 包含所有不在触摸的触摸点
touchmove //移动触摸 触发
touchcancel //触摸点取消触发
touchenter //触摸点击触发
touchleave //触摸离开触发
进度事件
进度事件用来描述一个事件进展的过程。比如XMLHttpRequest对象发出的HTTP请求的过程、<img>、<audio>、<video>、<style>、<link>加载外部资源的过程。下载和上传都会发生进度事件。
进度事件有以下几种:
abort事件:当进度事件被中止时触发。如果发生错误,导致进程中止,不会触发该事件。
error事件:由于错误导致资源无法加载时触发。
load事件:进度成功结束时触发。
loadstart事件:进度开始时触发。
loadend事件:进度停止时触发,发生顺序排在error事件\abort事件\load事件后面。
progress事件:当操作处于进度之中,由传输的数据块不断触发。
timeout事件:进度超过限时触发。
拖放事件
拖放(Drag-and-Drop,DnD)是在“拖放源(drag source)”和“拖放目标(drop target)”之间传输数据的用户界面。
<div draggable="true"> 此区域可拖拉 </div>
29. window对象 29.1 计时器
setTimeOut() 和 setlterval()
29.2 浏览器定位和导航
location
29.3 解析URL
// 当前网址为 http://user:passwd@www.example.com:4097/path/a.html?x=111#part1location.href // "http://user:passwd@www.example.com:4097/path/a.html?x=111#part1"
location.protocol // "http:"
location.host // "www.example.com:4097"
location.hostname // "www.example.com"
location.port // "4097"
location.pathname // "/path/a.html"
location.search // "?x=111"
location.hash // "#part1"
location.user // "user"
location.password // "passed"
29.4 Location对象的方法:
location.assign():使窗口载入并显示指定的URL中的文档。
location.replace():和assign()方法类似,但它在载入新文档之前会从浏览历史中把当前文档删除。这样“后退”按钮就不会把浏览器带回到原始文档。
location.reload():重新载入当前文档,可传入一个布尔值为参数,默认false。如果为true,则优先从服务器重新加载;否则优先从本地缓存中重新加载。
当然,我们还有更直接跳转到新页面的方法:
location = 'http://baidu.com';
//或者
location.href = 'http://baidu.com';
29.5 浏览历史
History.back() // 移动到上一个访问的页面,等同于浏览器的后退键
History.forward() // 移动到下一个访问页面,等同于浏览器的前进键
Histroy.go() //接受一个整数作为参数,移动到该整数指定的页面,比如go(1)相当于forward(),go(-1)相当于back(),go(0)相当于刷新页面
History.pushState() 会改变referrer的值,而在你调用方法后创建的 XMLHttpRequest 对象会在 HTTP 请求头中使用这个值。referrer的值则是创建 XMLHttpRequest 对象时所处的窗口的URL
state:一个与指定网址相关的状态对象,popstate事件触发时,该对象会传入回调函数。如果不需要这个对象,此处可以填null。
title:新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null。
url:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
history.replaceState():会修改当前历史记录条目而并非创建新的
history.state 返回当前页面的state对象
29.6 浏览器和屏幕信息
navigator.appName 浏览器的全程
navigator.userAgent 返回标识浏览器的厂商和版本信息
navigator.platform 返回用户操作系统的信息
navigator.onLine 当前浏览器是否连接到网络
navigator.geolocation 包含用户的地理位置
navigator.cookieEnable 浏览器是否能存储cookie
30.Ajax 30.1 HTTP 超文本传输协议
HTTP 请求由4个部分组成
1.HTTP请求方法或动作
2.正在请求的URL
3.一个可选的请求头集合,其中可能包括身份验证信息
4.一个可选的请求主题
服务器返回的HTTP响应包含三部分
一个数字和文字组合成的状态码,用来显示请求的成功和失败
一个响应头集合
响应主体
HTTP状态码
200, OK,访问正常
301, Moved Permanently,永久移动
302, Move temporarily,暂时移动
304, Not Modified,未修改
307, Temporary Redirect,暂时重定向
401, Unauthorized,未授权
403, Forbidden,禁止访问
404, Not Found,未发现指定网址
500, Internal Server Error,服务器发生错误
HTTP进度事件
除了使用readystatechange事件来探测HTTP请求的完成外,在XHR2中,还定义了多个有用的事件。
abort事件:当进度事件被中止时触发。如果发生错误,导致进程中止,不会触发该事件。
error事件:由于错误导致资源无法加载时触发。
load事件:进度成功结束时触发。
loadstart事件:进度开始时触发。
loadend事件:进度停止时触发,发生顺序排在error事件\abort事件\load事件后面。
progress事件:当操作处于进度之中,由传输的数据块不断触发。
timeout事件:进度超过限时触发。
HTTP请求无法完成有3种情况:
请求超时,会触发timeout事件
请求终止,会触发abort事件
请求发生错误,会触发error事件
同源策略(严格)
协议相同
域名相同
端口相同
不严格的同源策略
使用Document对象的domain属性
来自home.example.com的文档里的脚本要合法的读取developer.example.com载入的文档的属性(默认情况下是不允许的,会受到同源策略的限制
document.domain = 'example.com';
跨域资源共享
Access-Control-Allow-Origin:*,//允许所有域名的脚本访问该资源。
Access-Control-Allow-Origin:http://www.example.com //允许特定的域名访问。
跨文档消息
允许一个文档的脚本跨域传递文本消息到另一个文档里的脚本
跨站脚本 XSS
安全术语,攻击者跨域向目标web站点注入HTML标签或者脚本
防止XSS攻击的方式时,在使用任何不可信的数据来动态的创建文档内容之前,从中移除HTML标签
31.正则表达式 search():按照给定的正则表达式进行搜索,返回一个整数,表示第一个与之匹配的字符串的起始位置,如果找不到匹配的子串,将返回-1。
match():返回一个数组,成员是所有匹配的子字符串。
replace():按照给定的正则表达式进行替换,返回替换后的字符串。
split():按照给定规则进行字符串分割,返回一个数组,包含分割后的各个成员。
RegExp对象
RegExp()构造函数带有两个字符串参数,第二个参数是可选的,它指定正则表达式的修饰符(可传入修饰符g、i、m或者它们的组合);第一个参数包含正则表达式的主体部分,也就是正则表达式直接量中两条斜线之间的文本