javascript高级程序设计
第一章 Javascript简介
一。javascript 是由三个不同部分组成
1.核心ECMAscript
2.文档对象模型DOM
3.浏览器对象模型BOM
二.ECMAscript大致来说规定下列组成部分
语法
类型
语句
关键字
保留字
操作符
对象
历史:ECMAscript开始与web没有依赖关系,web浏览器是ECMA实现可能的宿主环境之一,其他宿主环境还有Node(服务端的javascript实现平台),和Adobe Flash
三。文档对象模型DOM
四。浏览器对象模型BOM
第二章 在HTML中使用Javascript
一。使用<script>的方法有两种
1.直接页面嵌入
包含在<script>的元素会自上而下的依次解释,在解释器对<script>元素内部的代码求值完毕以前,页中的其余内容不会被浏览器显示。
注意,不要再代码上写</script>,否则浏览器认为是结束标志,如
function a(){
alert("</script>");
}
解决办法可以使用转义字符\,如
function a(){
alert("<\/script>");
}
2.包含外部javascript
<script type="text/javascript" src="aaa.js"></script>
在解释器对<script>元素内部的代码求值完毕以前,页中的其余内容不会被浏览器显示。
如果在XHTML中可以省略</script>,如
<script type="text/javascript" src="aaa.js"/>
src元素可以包含来自外部域的javascript,让<script>和<img>元素非常相似,这一点有好处又坏处,在访问不能自己控制的其他服务器上面,假如遇到恶意程序员,改了里面文件的代码。。。
<script type="text/javascript" src="http://www.sdfsdfsdf。com/aaa.js"></script>
注意:无论怎样包含代码,只要不存在defer和async属性,浏览器会根据出现的不同顺序解释,第一个解释完才第二个。然后第三个。。。
二。<script>的位置
1.
<! DOCTYPE html>
<html>
<head><title></title>
<script type="text/javascript" src="aaa.js"/>
<script type="text/javascript" src="aaa.js"/>
</head>
<body>
<!--这里放内容-->
</body>
<html>
这样放意味着必须等到所有javascript代码都下载,解释,完成后,才能开始呈现页面的内容(浏览器遇到body标签才开始呈现内容),如果很多javascript代码,会导致浏览器呈现页面时候明显延迟
,这段时间会一片空白,要避免则第二种方法
2.
<! DOCTYPE html>
<html>
<head><title></title>
</head>
<body>
<!--这里放内容-->
<script type="text/javascript" src="aaa.js"/>
<script type="text/javascript" src="aaa.js"/>
</body>
<html>
这样在解释javascript之前就会把页面呈现给用户
三,延迟脚步,异步脚本
1.defer
html4.01定义了defer属性,意思是脚本会被延迟到页面都解释完再运行
<! DOCTYPE html>
<html>
<head><title></title>
<script type="text/javascript" defer="defer "src="aaa.js"/>
<script type="text/javascript" defer="defer " src="aaa.js"/>
</head>
<body>
<!--这里放内容-->
</body>
<html>
虽然放在head标签里面,但是浏览器会遇到</html>后才解释,一般来说第二个延迟脚本会在第一个执行后再执行,但是有时并不一定,所以最好就一个延迟脚本
defer至适合于外部src的脚本文件(HTML5已经明确规定),但是还有些浏览器并不支持,所以最好办法还是把<script>放在页面底部最佳选择
2.async
1.和defer类似都只适用于外部脚本
2.不同时标志async的脚本不保证他们先后顺序执行,defer一般来说还按顺序,这个肯定不按顺序
三。在XHTML的语法
四。嵌入代码与外部文件
使用外部文件有以下优点
1.可维护
2.可缓存 浏览器根据具体的设置缓存链接的所有外部文件,也就是说,两个页面使用同一个文件,那么该文件只需要下载一次
3.适应未来 因为通过外部文件无需使用上面的XHTML或注视hack,XHTML包含外部文件语法是相同的
五。文档模式
开始(混杂模式、标准模式)
后来(混杂模式、(标准模式。准标准模式))准标准模式与标准模式非常类似,差异可以忽略不计
如果文档开始没有使用任何文档声明,则所有浏览器使用开启混杂模式
1.开启标准模式
2.开启准标准模式,可以使用过渡型和框架集型
六。<NOSCRIPT>元素
1.浏览器不支持javascript
2.支持但是脚本被禁止
<html>
<head><title></title>
<script type="text/javascript" defer="defer "src="aaa.js"/>
<script type="text/javascript" defer="defer " src="aaa.js"/>
</head>
<body>
<noscript>
<p>本页面需要开启javascript</p>
</noscript>
</body>
<html>
假如禁止了javascript,p里面的文字会显示,假如允许,p里面的文字永远不会显示
第三章 基本概念
本章内容 语法 数据类型 流控制语句 函数
目前 ECMA-262定义的第三版是各个浏览器实现最多的一个版本,第五版是接下来的实现。到2011年底还没完全实现,本文以第三版为基础,并以第五版变化作出说明
一。语法
1.区分大小写
2.标示符-变量,函数,属性,参数的名字
@首字母是字母、下划线或者美元符号$
@其他可以使字母、数字、下划线、和$
@不能用关键字、保留字、true,false、和null做标示符
3.注释
// 单行注释
/*
*
*
*/ 块注释
4.严格模式
ECMAscript 5引入,是一种定义不同的解释和执行模式,把ECMAscript 3不确定的行为处理掉,而且某些不安全的操作也抛出错误,启用办法是顶部添加
"use strict"
在函数内部也可以,如
function aa(){
"use strict"
//函数体
}
5.语句
@ ;结尾
@ 代码块,如
if(true){
}
6.关键字和保留字
7.变量
ECMAscript的变量是松散类型(就是可以保存任何类型的数据),用var来定义
@ var mes --mes为undefined
@ var mes=“hi”; mes=11; --可以,但是不推荐
@注意,用var操作符定义的变量将成为定义该变量的作用域中的局部变量
如在函数里面
1.
function a(){
var mes="HI";//局部变量
}
alert(mes);//错误
2.
function a(){
mes="HI";//全局变量
}
alert(mes);// "HI"
省略了var,默认成了全局变量,但是不推荐
@一条语句定义多个如
var mes="hi",
found=11,
age=false;
@严格模式下,不能为eval或者arguments定义变量
8.数据类型
@5种简单数据类型
Undefined
Null
Boolean
Number
String
@1种复杂类型
Object
@typeof操作符---对于一个值使用typeof操作符可能使用下面字符串
"undefined"-------该值未定义
"boolean" -------布尔
"string" -------字符串
"number" -------数字
"object" -------对象
"object" -------Null
"function" -------函数
例子
var mes="aaaaaa";
alert(typeof mes); ---"string"
alert(typeof(mes)); --"string"
alert(typeof 95); --"number"
@typeof操作符的对象可以使变量或者数值字面量
@typeof是操作符而不是函数,所以括号不是必须的
@@有时候typeof会返回一些疑惑但是技术上正确的值
@typeof null返回object,因为null被认为是一个空对象引用
@有些浏览器(Safai5-或Chrome7-)使用typeof 正则表达会返回function ,其他则object
@@技术角度上,函数在ECMA中script中时对象,不是一种数据类型,因此用typeof区分函数和其他对象
8.数据类型-Undefined
@只有一个值就是undefined
@使用var声明但是未加以初始化时就是undefined
1.
var mes;
alert(mes==undefined) --true;
2.
var mes=undefined;
alert(mes==undefined) --true;
3.
var mes;
//下面变量为声明
// age
alert(mes) --“ undefined”
alert(age) -- 报错
注意未声明和为初始化的概念
@@困惑的是
4.
var mes;
//下面变量为声明
// age
alert(typeof mes) --"undefined";
alert(typeof age) --"undefined";
对于未声明和为初始化都返回undefined
@@所以运用上面这点最好显示初始化变量是最好的明确选择,因为这样,当typeof就会返回undefined字符串,那么我们就知道该变量没有被声明而不是未初始化
如
var me==“”;
//下面变量未声明
// age
alert(typeof mes) --"String";
alert(typeof age) --"undefined"; 因为所有变量都初始化了,所以放回undefined肯定是未声明,而且这样不会报错
8.数据类型-Null
@也是只有一个值-null
@是一个空对象引用所以typeof Null是"object"
@实际上,undefined值是派生于null的,所以
alert(null==undefined); //true
@如果定义的是对象,最好先赋值为null,因为只需要检查null就知道已经是否保存一个对象的引用
var car=null;
if(car!=null){
}
@@无论在什么时候没必要把一个值显示设置为undefined,
@@null却相反,只要为明确保存什么对象时候,则设置为null
@@有助于区分null和undefined。
8.数据类型-Boolean
@只有两个值 true、false
@与数字值不是一回事,true不一定等于1,false不一定等于0
@区分大小写,True和False是标示符
@ECMA所有值都与Boolean有等价的值,可以使用Boolean()转换函数
如
var mes="hello";
var a= Boolean(mes);
规则
数据类型 | 转为true | 转为false |
Boolean | true | false |
String | 非空字符串 | ""(空字符串) |
Number | 非0,包括无穷大 | 0和nan |
object | 任何对象 | null |
Undefined | n/a | undefined |
@if语句自动执行Boolean转换
var mes="DF";
if(mes){
}
8.数据类型-Number
@整数和浮点型
@十进制,八进制,16进制
八进制第一位为0,后面为0到7,超过则前导0被忽略,后面为实际你只解释
var a=070 //八进制 56
var b=079 //八进制无效,解释为十进制 79
十六进制前面为0x,后面0到9,a到f(可以大写)
var a =0xA --十六进制的10
var b=0x1f ----、十六进制的31
在进行算术计算时,所有八进制十六进制的值都会转换成十进制数值
@浮点数
var a=1.1;
var b=.1; --有效但是不推荐
@由于浮点数需要的内存空间是整数值的两倍,所以ECMAscript有时会把 浮点数转换为整数值
var a=1. 解释为1
var b =10.0; 解释为10
@科学计数法
var a=3.125e7 等于31250000
@@浮点数的精度为17位小数,进行算术计算时精确到远远不够整数
0.1+0.2不是0.3,而是 0.3000000000000004
所以
if(a+b==0.3){
alert("you got 0.3");
}
永远不会成立,不要这样做
@数据范围
1.Number.MIN_VALUE和Number.MIAX_VALUE,超出这两个范围则转换Infinity 正无穷 - Infinity 负无穷
2.Infinity 正无穷 - Infinity 负无穷 ,某次计算返回这两个数,则无法参数下次计算
判断处于最大和最小范围之间可以使用isFinite()函数
var a=Number.MIAX_VALUE+Number.MIAX_VALUE;
alert(isFinite(a));//false;
@NaN值-非数值
1。任务语言除以0都会报错,停止程序
2。ECMAscript中 则返回NaN,而不会停止
3。NaN不等于NaN alert(NaN==NaN);--false
4。isNaN 判断这个数是否"不是数值",
如
alert(isNaN(NaN) ) //true
alert(isNaN(10)) //false 10是一个数值
alert(isNaN("10") ) //false 可以转换成10
alert(isNaN("blue") ) //true 这个字符不能转换成数值
alert(isNaN(true) ) //false 可以转换成1
@@ isNaN也可以用于对象,首先调用对象的valueof(),确定是否能返回转换成数值,若不能,基于这个返回值再调用toString()方法,再测试返回值。
@转换函数
Number() 任何数值
ParseInt() 把字符串转换成数值
parseFloat() 把字符串转换成数值
@@Number() 转换规则
1.若Boolean 则转换成0和1
2.若数字值,不变
3.null 则0
4.undefined 则NaN
5.对象则首先调用对象的valueof(),确定是否能返回转换成数值,若不能,基于这个返回值再调用toString()方法,再测试返回值
5.字符串则如下
1.只包含数字(带正负),则转换为十进制,1--1, 123--123, 011--11
2.浮点和上面一样
3.若十六进制,0xf 则转换成十进制
4.空字符串,则为0
5. 其余则NaN
如下
var a=Number("DFSDF" ) --NaN
var b=Number("" ) -- 0
var c=Number( "000011") -- 11
var d=Number( true) --1
@@ParseInt() 转换规则
1.忽略前面空格,找到第一个字符串,若不是数字或者正负号,则NaN
2.如果第一个是数字,则一直解释下去,直到解释完或者遇到非数字
如1234aaa则转换为1234
22.5则转换为22
3.八进制,十六进制也能识别(严格模式会有问题)所以增加参数ParseInt(a,b),a为要转换的值,b为进数
var a=ParseInt("10",2) 10按二进制
var b=ParseInt("10",8) 10按八进制
var c=ParseInt("10",10) 10按十进制
var d=ParseInt("10",16) 10按十六进制
因为在严格模式ParseInt() 转换会造成混乱,所以最好加上参数
@@ParseFloat() 转换规则
1.和ParseInt一样,不过第一个小数点有效,第二个无效,如22.34.5转换为22.34
2.只解释10进制,所以没有第二个参数
3.如果字符窜包含一个可解释为整数的数(没有小数点或小数点后都是0),ParseFloat() 会返回整数
var a=ParseFloat"1234aaa") //1234
var b=ParseFloat("0xA") // 0
var c=ParseFloat("22.5") //22.5
var d=ParseFloat(22.334.5) // 22.334
var e=ParseFloat("0987.4") //987.4
var f=ParseFloat("3.125e7") // 31250000
8.数据类型-String
@String类型用于表示0或多个 16位Unicode字符组成的字符序列------字符串
@""或''都一样,PHP则不同
@字符字面量--转义序列
字面量 | 含义 |
\n | 换行 |
\t | 制表 |
\b | 空格 |
\r | 回车 |
\f | 进纸 |
\\ | 斜杠 |
\' | 单引号,在用单引号表示的字符串中使用,如'He said,\'HEY.\'' |
\" | 双引号,在用双引号表示的字符串中使用,如"He said,\"HEY.\"" |
\xnn | 以十六制代码nn表示一个字符(n为0到F)。例如,\x41表示"A" |
\unnnn | 以十六制代码nnnn表示一个Unicode字符(n为0到F)。例如,\u03a3表示希腊字符"Σ" |
@任何字符串长度都可以用length属性获取长度(如果字符串包含双字节字符,那么可能不会精确)
@ECMAScript 中字符串是不变的。创建之后若改变则先销毁再填充
@转换为字符串
1.toString(),几乎每一个值都有该方法,但是 null,undefined 没有该方法
数字的时候可以加入参数指定二进制八进制十进制十六进制
var a=10
a.toString() --10
a.toString(2) -- 1010
a.toString(8) --12
a.toString(10) --10
a.toString(16) --a
2.String(),任何类型都可以包括null,undefined
1.如有有toString(),则调用
2.如果是null,则返回"null"
3.如果是undefined,则返回"undefined"
@最简单的转换时直接与字符串""相加
8.数据类型-Object
@一组数据和功能的集合--var 0=new Object();
@是所有它的实例的基础,其中包裹一下方法
1.constructor:保存用于创建当前对象的函数,var 0=new Object();构造函数就是Object();
2.hasOwnProperty(propertyName):用于检查给定的属性在当前对象实例中(而不是在实例的原型中)是否存在。参数必须是字符串,如:o. hasOwnProperty("name");
3.isPrototypeOf(Object):用于检查传入的对象是否是传入对象的原型
4.propertyIsEnumerable(propertyName):检查指定属性是否能用for-in语句,参数为字符串
5.toLocalString()
6.toString()
7.valueOf():返回对象的字符串、数值或布尔值表示
@@宿主对象可能继承也可能不继承Object,浏览器中的对象,如BOM和DOM中的对象都是宿主对象
5.操作符
5.1一元操作符
5.2位操作符
5.2布尔操作符
@一共有三个 非、与、或
@逻辑非 用!表示
1.与任何值都能返回一个布尔值,先转换为布尔值再求反
2。规则
&如果是对象,则false
&如果是空字符串,则true
&非空字符串,则false
&数值0,true
&非0包裹Infinity,则false
&null,true
&NaN,true
&undefined,true
如:
alert(!0) true
alert(!NaN) true
alert(!123) false
@逻辑与 用&& 表示
1.可以应用任何类型的操作数,不仅仅是布尔值
2.在有一个操作数不是布尔值的情况下,逻辑与操作不一定返回布尔值,一下规则
&如果第一个操作数对象,则返回第二个操作数
&如果第二个操作数是对象,则只有第一个操作数为true的情况下才会返回该对象
&如果两个操作数都是对象,则返回第二个操作数
&如果有一个数为null,则返回null
&如果有一个数为NaN,则返回NaN
&如果有一个数为undefined,则返回undefined
3.逻辑与属于短路操作,如果第一个数能够决定结果,则不会对第二个求值
如
var a=true;
var b=(a&&bbbbbbbbbbbbb);bbbbbbbbbbb未定义会发生错误
若
var a=false;
var b=(a&&bbbbbbbbbbbbb);bbbbbbbbbbb未定义不会发生错误
@逻辑或 用||表示
1.与逻辑与类似,如果有一个操作数不是布尔值,逻辑或也不一定返回布尔值
2.
&如果第一个操作数对象,则返回第一个操作数
&如果第一个操作数求值为false,则返回第二个操作数
&如果两个操作数都是对象,则返回第一个操作数
&如果有两个数为null,则返回null
&如果有两个数为NaN,则返回NaN
&如果有两个数为undefined,则返回undefined
3.也是短路操作
5.4
1.乘性操作符-- *
&处理特殊值遵守下列规则
1.如果两个值都是数值则常规计算,若超过ECMA范围,则Infinity和-Infinity
2.如果有一个是NaN,则结果是NaN
3.如果Infinity与0相乘,则NaN
4.如果Infinity与非0相乘,则是Infinity或者-Infinity
5.如果是Infinity与Infinity则Infinity
6.如果一个数不是数值,则在后台调用number()转换其数值,再计算
2
除法操作符-- 斜杠/
3
求模--%
5.5
1.加法操作符---+
如果都是数值则按照常规加法,然后根据下列返回
&如果一个为NaN,则结果为NaN
&如果Infinity加Infinity,则Infinity
&如果-Infinity加-Infinity则-Infinity
&如果Infinity加-Infinity 则NaN
如果有一个是字符串,那么按照下面
&如果两个操作数都是字符串,则前后拼接
&如果有一个是对象、数值或布尔值,则调用它们的toString()方法取得相应字符串值,如果按照前面字符串规则
&对于undefined和null,则分别调用string()函数取得字符串"undefined" 和"null"
alert(5+5); //10
alert(5+"5"); //"55"
2.减法操作符--- -
如果都是数值则按照常规加法,然后根据下列返回
&如果一个为NaN,则结果为NaN
&如果Infinity加Infinity,则NaN
&如果-Infinity加-Infinity则NaN
&如果Infinity加-Infinity 则Infinity
&如果-Infinity加Infinity 则-Infinity
如果有一个是字符串、布尔值、null或undefined,则在后台调用Number()函数将其转换成数值,再根据前面做减法,如果转换成NaN,则结果为NaN
&如果有一个是对象,则调用对象的ValueOf()方法以取得表示对象的数值,如果是NaN,则结果是NaN,如果对象没有ValueOf()方法,则调用其toString()方法并将其得到的字符串转换为数值
5-trur==4 因为true转换为1
NaN-1=NaN
5-3=2
5-""=5 因为""转换成0
5-"2"=3 因为2转换成2
5-null=5 因为null转换成0
@@如果两个操作数都是字符串呢?
5.6 关系操作符
@小于<, 大于>, 小于等于<=, 大于等于>=,这几个关系操作符都返回一个布尔值
var result=5>3 //true
var result=5<3 //false
@与ECMAscript与其他操作符一样,当操作数使用非数值时候也要转换或完成某些奇怪的操作,规则:
&如果两个都是数值则数值比较
&如果两个都是字符串,则按照字符串对应的字符编码值
&如果一个数十操作数,则将另外一个操作数转换为一个数值,然后数值比较
&如果一个操作数十对象,则调用这个对象的valueof()用结果按照前面比较,如果没有ValueOf方法,则调用toString(),并用得到结果执行比较
&如果一个是布尔值,则先转换成数值再比较
&&比较字符串时候,大写字母的字符编码全部小于小写字母的字符编码
var result ="Black" < "alphabet" //true
&&如果比较两个数字字符串
var result="23"<"3" //true,2的编码是50,3的编码是51
var result="23"<3 //false,字符23会转成23,数值与字符串比较时,字符串都会转换成数值
var result="a"<3 //false,因为"a"被转换成了NaN
var result=NaN<3 //false,因为任何操作数与NaN比较,结果都是false
var result= NaN >=3 //false
5.7
1.相等操作符
@相等和不相等 ==和!=
1.都会先转换操作数(强制转换),然后再比较相等性
在转换不同类型时候,要遵守下列
1.如果有一个操作数是布尔值,则比较前转换为数值----false转换成0,true转为1
2.如果有一个操作数是字符串,另外一个是数值,则先字符串转换成数值再比较
3.如果一个操作数是对象,另外一个操作数不是,则调用对象的ValueOf方法用得到的基本类型值再比较
另外
1.null和undefined是相等的
2.比较值钱不能将null和undefined转换成其他值
3.如果一个数是NaN,相等则返回false,不相等则返回true(两个操作数都是NaN,相等操作符也返回false,因为按规定NaN不等于NaN)
4.如果两个操作数都是对象,则比较他们是不是同一个对象,如果都是指向同一对象,则返回true,否则false
表达式 | 值 |
null ==undefined | true |
"NaN"==NaN | false |
5==NaN | false |
NaN==NaN | false |
NaN!=NaN | true |
false==0 | true |
true==1 | true |
true==2 | false |
undefined==0 | false |
null==0 | false |
"5"==5 | true |
2.全等和不全等 === !==
@除了比较之前不转换操作数之外,全等与不全等没有什么区别
var result=("55"==55); '//true 因为转换后相等
var result=("55"===55) //false 因为不同数据类型不相等
@null==undefined会返回true,但null===undefined 返回false ,因为不同类型的值
5.8条件操作符
variable=boolean_expression ?trueValue:falseValue
如:
var max=(num1>num2) ? num1: num2;
5.9赋值操作符
5.10逗号操作符
@声明变量
var num1=1,num2=2.num3=3;
@
赋值-在用于赋值时,逗号操作符总会返回表达式中的最后一项,如
var num=(5,1,4,8,0);//num的值为0
6.语句
6.1 if 语句
@ECMAScript会自动调用Boolean()转换函数表达式
6.2 do - while
6.3 while语句
6.4 for语句
@
1.
var count =10;
for(var i=0;i<count;i++)
{
alert(i);
}
由于ECMAScript中不存在块级域,因此在循环内部定义的变量可以再外部访问,如
2.
var count =10;
for(var i=0;i<count;i++)
{
alert(i);
}
alert(i);//10
3.无限循环
for(; ;){
dosonmething();
}
6.5 for-in 语句
for(var propName in window){
dociment.write(propName );
}
如果迭代的对象的变量值为null或undefined,for-in语句会抛出错误
ECMAScript 5 更正了,但是为了兼容,循环时候做好判断
6.5 label语句
6.6break和continue语句
@与label语句联合使用
6.7 with 语句--
@将代码块的作用域设置到一个特定对象中
@定义with语句的目的主要是为了简化多次编写同一个对象
var qs=location.search.substring(1);
var hostName= location.hostname;
var url= location.href;
上面那几行代码包含location对象,使用with语句可以写成
with(location){
var qs=search.substring(1);
var hostName=hostname;
var url=href;
}
严格模式会语法错误,大量使用with会性能下降,还是建议不要用
6.8 switch语句---全等操作符
switch(i){
case 25:
case 35: //25和35 合并了
alert(111);
break;
case 45:
break;
default:
alert("default");
}
@ECNAScript 相比其他语言,可以再switch语句中使用任何类型,无论是字符串还是对象都可以
@case的值不一定是常量,也可以是变量甚至表达式
var num=25;
switch(true){
case num <0:
alert(0);
break;
case num <=10 && num >0:
alert(1);
break;
default:
alert(2);
}
7.函数
1.
function Name(arg0 ,arg1,.......argN){
statements
}
@ECMAScript 中的函数在定义时不必制定是否返回值
@ 另外return 语句也可以不带任何返回值,这种情况下,函数停止执行后将返回undefined值
function Name(arg0 ,arg1,.......argN){
retrun;
}
@推荐做法要么永远返回值,要么永远不返回,否则会混乱
严格模式下限制
1.不能把函数命名为eval或arguments;
2.不能把参数命名为eval或arguments;
3.不能出现两个命名参数同名的情况
2.参数
@即便你定义的函数只接收两个参数,调用函数的时候未必一定传2个函数,可以传1,个或者3个,4个
@ECMAScript 中的参数在内部是用一个数组来表示,函数接收这个数组,而不在乎有多少个元素
@实际上,在函数体内可以通过arguments对象来访问这个参数数组
@其实arguments对象只是与数组类似(并不是Array实例),因为可以通过索引访问元素,arguments[0]第一个,arguments[1]第二个,因此
function sayHi(name,message){
alert("hello:"+name+","+ message);
}
可改为
function sayHi(name,message){
alert("hello:"+argument[0]+","+ argument[1]);
}
@ argument得length属性
function howManyArgs(){
alert(argument.length);
}
howManyArgs("123",45); //2
howManyArgs(); //0
howManyArgs(12); //1
@可以利用这点
function doAdd(){
if(argument.length==1){
//do
}else if(argument.length==2){
//do
}
}
@有趣的一点
function doAdd(num1,num2){
argument[1]=10;
alert(argument[0]+num2);
}
&每次执行这个doAdd函数都会重写第二个参数,将第二个值修改10.因为argument对象中的值会自动反映到对应的命名参数,所以修改argument[1]自动修改num2,结果值都相同,不过他们的内存空间是独立的,但是值就同步。
&如果只是传入一个参数,那么argument[1]设置的值不会反映到命名参数中,因为argument对象的长度是有传入参数决定,而不是定义函数时候决定
&没有传递的命名参数将自动赋予undefined值,像定义变量但是没初始化一样。
@@严格模式下,上面的赋值会无效,即使设argument[1]=10,num2还是undefined,其次重写argument还会报错
@@没有重载
综上所述,ECMAScript函数没有重载,如果定义多个,则名字只属于最后一个定义的函数
第四章 变量、作用域和内存问题
javascript变量松散类型的本质,可以定义任何类型和数据的规则,变量的值及其数据类型可以在脚本的生命周期内改变。
1.基本类型和引用类型
@基本类型指的是简单的数据段,引用类型值指那些可能由多个值构成的对象,
@基本数据类型:Underfined、Null、Boolean、Number、和String,都是按值访问
@引用类型,与其他语言不同,javascript不允许直接访问内存中的位置,不能直接操作对象的内存空间,引用类型的值是按引用访问的
1.1动态的属性(基本类型与引用)
var persion=new Object();
persion.name="Nicholas";
alert(persion.name);//"Nicholas";
var name="Nicholas";
persion.age=27;
alert(persion.age);//undefined ,不报错,但不推荐
1.2复制变量值(基本类型与引用)
@基本类型复制变量值时
var num1=5;
var num2=num1;
num2中的5与num1中的5是完全独立的,该值只是num1中5的一个副本。这两个值参与操作互不影响
复制前
Number类型 | |
num15 | 5 |
复制后
Number类型 | |
num2 | 5 |
num1 | 5 |
@引用类型复制变量值时
var obj1=new Object();
var obj2=obj1;
obj1.name="aaa";
alert(obj2.name); //aaa
复制引用变量时候。实际上就是复制一个指针,复制变量结束后,两个变量上将引用同一个对象,改变一个对象则会影响另外一个对象
1.3传递参数
ECMAScript中的所有函数的参数都是按照值传递。就是说函数外部的值复制给函数内部的参数,就和吧一个值复制到另外一个值的变量一样。基本类型复制就像基本类型,引用类型复制就是引用类型
引用传递就是传递该引用,而不是复制多一份变量,值传递就是复制多一份变量。
@基本类型时候
functio addTen(num{
num +=10;
return num;
)
var count =20;
car result =addTen(count);
alert(count);//20,没有变化
alert(result );//30
@引用类型时候
function setNmae(obj){
obj.name="aaa";
}
var persion=new Object();
setName(persion);
alert(persion.name); //aaa
为了证明是复制多一个,而不是直接传递引用,再看下面例子
引用传递就是传递该引用,而不是复制多一份变量,值传递就是复制多一份变量。
function setNmae(obj){
obj.name="aaa";
obj=new Object();
obj.name="bbb";
}
var persion=new Object();
setName(persion);
alert(persion.name); //aaa
用引用的复制原理就能理解出来了,局部对象obj会在函数完毕后自动毁灭。
1.4 检测类型 instanceof
@用typeof操作符确定一个变量是字符串、数值、布尔值、还是undefined的最佳工具,如果是对象或者null。则返回object
@检测基本类型用typeof是得力助手,检测引用类型,很想知道什么类型对象所以用instanceof操作符
alert(person instanceof Object); /变量是Object吗
alert(person instanceof Array); /变量是Array吗
alert(person instanceof RegExp); /变量是RegExp吗
规定,所有应用类型的值都是Object的实力,所以检测一个引用是否Object类型时,instanceof都会返回true,检测基本类型就是返回false,因为基本类型不是对象
@@typeof的兼容性-对正则应用typeof会返回function, 在ie和firefox则object
1.5 执行环境及作用域
@每个执行环境都有一个与之关联的变量对象,全局化解是最外围的一个执行环境,ECMAscript根据宿舍不同,执行环境的对象也不一样,web浏览器全局环境就认为是window对象,该环境被销毁,保存在其中的变量和函数就随之摧毁
@函数也有自己执行环境,执行流进入函数时,函数环境就会被推入环境栈中,函数执行完毕后,栈会将环境弹出,把控制权还给之前的执行环境
@当代码在一个环境执行时候,会创建变量对象的一个作用域链。母的是保证执行环境有权访问所有变量和函数的有序访问
@作用域最前端,始终是当前执行单面所在环境的变量对象,如果环境是函数最开始时候只包含一个变量,即是arguments对象(这个对象在全局环境是不存在的),下一个变量来自包含(外部)环境,而再下一个变量则来自下一个包含环境,这样一直延续到全局执行环境,全局执行环境始终是作用域中的最后一个对象
@标示符解释是沿着作用域一级一级搜索的,搜索过程从作用域最前端开始,然后聚集向后回溯,直接找到(找不到就报错)
var color="blue";
function changeColor(){
color="red";
}
changeColor();
alert(color);
这个例子中,changeColor作用域链包含两个对象:自己的变量arguments和全局变量对象,因为在作用域链向上搜索找到它
var color ="blue";
function changeColor(){
var anotherColor="red";
function swapColors(){
var tempColor= anotherColor;
anotherColor=color;
color= tempColor;
//这里可以访问color、anotherColor和tempColor
}
//这里可以访问color、anotherColor不能访问tempColor
swapColors();
}
这里有三个执行环境:全局环境,changeColor局部环境,swapColors局部环境。
1:全局环境有一个变量color,一个函数changeColor,
2:changeColor的局部环境有一个名为anotherColor变量和函数swapColors,它能向上搜索访问全局环境中的变量函数。
3:swapColors的局部环境有变量tempColor,这变量只能在这个环境环境中访问,因为其他环境向上不能搜索到。而在swapColors都可以访问两个环境中的所有变量,因为它们是是swapColors的符父执行环境
解释:内部环境可以通过作用链范文所有外部环境,外部环境则不能访问内部环境
1.6 延长作用链
在以下语句,作用链将会延长
1.try-catch中的catch语句
2.with语句
兼容问题,不推荐
1.7 没有块级作用域
@if和for
if(true){
var color="blue";
}
alert(color);//true
在其他语言if执行后所定义的变量最自动销毁,但在javascript中变量会添加到当前的执行环境(在这里是全局环境),所以。
for也是一样
@声明变量
1。使用var声明的变量会自动添加到最接近的环境中,函数内部就是函数的局部环境,(在with语句,最最近就是函数环境,with兼容问题和性能不建议使用就不描叙)
2.如果初始化变量没有使用var声明,该变量就会自动添加到全局环境(注意在严格模式中初始化未经声明的变量会导致错误)
下面两个例子(不是严格模式)
1.
function add(num1,num2){
var sum=sum1+sum2;
return sum;
}
var result=add(10,20); //30
alert(num); //会报错,因为函数里面为sum定义了var,那么sum就添加到函数的作用域
2.
function add(num1,num2){
sum=sum1+sum2;
return sum;
}
var result=add(10,20); //30
alert(num); //30,因为sum初始化没有使用var关键字,于是调用完爱到底add()后,会添加到全局环境,所以可以执行不报错
注意:(注意在严格模式中初始化未经声明的变量会导致错误
@查询标识符
1.搜索会在作用链的最前端开始,向上一级一级搜索,知道匹配了该标示符,停止
var color="blue";
function getColor(){
var color="red";
return color;
}
alert(getColor()); //red
注意,如果不使用window.color都无法访问全局color对象
1.8垃圾回收
@标记清除
@引用计数
@性能问题
@管理内存
第五章 引用类型(1)
1.object类型
1.1创建方法
@new
var person =new Object();
person .name="Nicholas";
person .age=29;
@对象字面量
var person={
name:"Nicholas",
age:29
};
对象字面量,属性也可以使用字符串如:
var person={
"name":"Nicholas",
"age":29
};
或
var person={}; //与new Object();相同
person.name="Nicholas";
person .age=29;
1.2访问对象属性
1.点表示法
person.name
2.方括号访问对象的属性
person[“name”]
方括号主要优点就是可以通过变量来访问属性
var a="name";
person[a];正确
persion.a 错误
如果属性名包括会都导致语法错误的字符,也可以用方括号,如
person["first name"]="Nicholas" //因为包含空格,使用点表示法会错误
一般除了用变量访问属性,否则还是用点表示比较方便
2.Array类型
@创建方法有两个
1.构造函数
var colors=new Array();
var colors=new Array(10); //创建一个数量为10的
var colors=new Array("1","2"); 创建一个数量为2的内容是1,2的数组
2.数组字面量
var colors=["red","blue"];
var colors=[]; //空数组
var colors=["1","2",]; //不推荐,可能创建一个数量为2,或者3的数组
var colors=[,,,,,]; //不推荐,可能创建一个数量为4,或者5的数组
3,读取或设置数组值,使用方括号并使用基于0的索引
var colors=["red","blue","green"]; //定义一个数组
alert(colors[0]); //显示第一项
colors[2]="black"; //修改第三项
colors[3]="brown"; //新增第四项
4.length属性-不是只读的,可以从数组末尾一处项目或向数组增加项
var colors=["red","blue","green"];
color.length=2; //移除数量为2之后的所有项
alert(colors[2]) ; //undefined
var colors=["red","blue","green"];
color.length=4; //新增项,新增的项都会是undefined值
alert(colors[3]) ; //undefined
技巧:利用length属性很方便在数组末尾添加新项目
var colors=["red","blue","green"];
colors[colors.length]="black";
colors[colors.length]="brown";
这样每次都会在末尾添加值
5.当把一个值放在超过当前数值大小的位置时,会重新计算长度值
var colors=["red","blue","green"];
color[99]="black";
alert(color[colors.length]) //100
alert(colors[3]); //undefined 位置3到98实际上不存在,访问会返回undefined
@检测数组
1.对于一个网页。或者一个全局作用域,使用instanceof操作符就能得到满意结果
if( value instanceof Array){
//dosomething
}
问题是成立的条件假定只有一个全局执行环境。如果网页包含多个框架,那么实际上存在两个以上不同的全局执行环境,从而有两个不同版本的Array构造函数。如果一个框架向两一个框架传入一个数组,那么传入数组在第二个框架中原生创建的分布不同构造方法。所以诞生出Array.isArray(),这个方法目的确定到底是不是数组,而不管在那个全局环境中创建
if(Array.isArray(valeu)){
//dosomething
}
@转换方法
1.所有对象都有toLocaleString、toString、valueOf方法
var color=["red","green","ye"];
alert(color.toString()); //red,blue,green
alert(color.valueof()); //red,blue,green
alert(color); //red,blue,green alert要接受字符串参数,所以在后头调用了toString方法
2.join()方法
var color=["red","green","ye"];
alert(color.join(",")); //red,blue,green
alert(color.join("||")); //red||blue||green
如果join()不加参数或者加入undefined,则用逗号作为分隔符
如果某一项值是null或者undefined,那么该值的toLocaleString、toString、valueOf方法返回都是空字符串方法
@栈方法--LIFO
1.push() 接受任意数量的参数,添加到末尾,并返回修改后的长度
2.pop() 从数组末尾移除最后一项,并减少数组的length,返回移除的项
var colors=new Array();
var count=colors.push("red","blue"); //推入两项
alert(count); //2
count=colors.push("black"); //推入另外一项
alert(count);//3
var item=colors.pop();//取得最后一项
alert(item); //black
alert(colors.length); //2
@队列方法--FIFO
1.shift() 移除数组的第一项,并返回该项,同时数组长度减1,用shift和push()模拟FIFO
var colors=new Array();
var count=colors.push("red","blue"); //推入两项
alert(count); //2
count=colors.push("black"); //推入另外一项
alert(count);//3
var item=colors.shift();//取得第一项
alert(item); //red
alert(colors.length); //2
2.unshift() 在数组前端添加任意个项,并返回长度,unshift和pop可以模拟反FIFO
var colors=new Array();
var count=colors.unshift("red","green"); //推入两项
alert(count); //2
var count=colors.unshift("black"); //推入另1项
alert(count); //3
var item=colors.pop();//取得最后一项
alert(item); //green
alert(colors.length); //2
@重排序方法
1.reverse 倒序
var values=[1,2,3,4,5];
values. reverse ();
alert(values); //5,4,3,2,1
2.sort() -默认没参数情况下按升序排列数组项,sort()会调用toString()转型方法,然后比较得到的字符串,即使数组每一项都是数字,但是比较的都是字符串。
var values=[0,1,5,10,15];
values. sort();
alert(values); //0,1,10,15,5
sort()可以接受一个比较函数作为参数,以决定排序方法
如
function compare(value1,value2){
if(value1<value2){
return -1;
}else if(value1>value2){
return 1;
}else{
return 0;
}
}
var values=[0,1,5,10,15];
values. sort(compare);
alert(values); //0,1,5,10,15
@操作方法
1.concat(),基于当前数组创建新数组,不加参数只是复制,加上则复制添加
var colors=["red","green","blue"];
var colors2= colors.concat("yellow",["black","brown"]);
alert(colors); //red,green,blue
alert(colors2); //red,green,blue, yellow, black, brown
2.slice(),基于当前数组的一个或多个项创建一个新数组
1个参数-指定位置到末尾
2个参数是起始之间,但是不包括最后一项
var colors=["red","green","blue","yellow","purple"];
var colors2= colors. slice(1);
var colors3= colors. slice(1,4);
alert(colors2); //green, blue, yellow, purple
alert(colors3); //green, blue, yellow
3.splice 主要用途向数组的中部插入项,始终返回一个数组,该数组包含从原始数组中删除的项
&第一个参数从该位置开始
&第二个参数删除多少项
&第三四五。。个参数要在该位置插入的项
var colors=["red","green","blue"];
var removed=colors. splice(0,1);
alert(colors); //green,blue
alert(removed); //red,移除的一项
removed= colors.splice (1,0,"yellow","orange")//从位置1开始插入两项
alert(colors); //green,yellow,orange,blue
alert(removed);//返回空数组,因为没有移除项
removed= colors.splice (1,1,"red","purple")//从位置1开始插入两项
alert(colors); //green, red,purple,orange,blue
alert(removed); //yellow,移除的一项
@位置方法
1.indexOf和lastIndexOf,不存在则返回-1
2.全等于
3.一个参数:查找的项
4.两个参数:起点位置和查找的项
var numbers=[1,2,3,4,5,4,3,2,1];
alert(numbers. indexOf(4)); //3
alert(numbers. lastIndexOf(4)); //5
alert(numbers. indexOf(4,4)); //5
alert(numbers. lastIndexOf(4,4)); //3
var person={name:"a"};
var people=[{name:"a"}]
var morePeople=[person];
alert(people.indexOf(person)); //-1 因为不全相等,尽管值相等
alert(morePeople.indexOf(person)); //0 因为是相同对象,全等于
@迭代方法
第一个参数:函数(数组项的值,该项的index,数组对象本身)--3个参数
第二个参数:this(可选)
1.every() ----对数组每一项运行给定的函数,如果该函数对每一项都返回true,则返回true
2.some() ----对数组每一项运行给定的函数,如果该函数对任一项返回true,则返回true
3.filter() ----对数组每一项运行给定的函数,返回函数返回true的项组成的数组
4.map() ----对数组每一项运行给定的函数,返回每次调用的结果组成的数组
5.forEach() ----对数组每一项运行给定的函数
&every()和some()
var numbers=[1,2,3,4,5,4,3,2,1];
var everyResult= numbers.every(function(item,index,array){
return (item>2);
});
alert(everyResult); //false
var everyResult= numbers.some(function(item,index,array){
return (item>2);
});
alert(everyResult); //true
&filter()
var numbers=[1,2,3,4,5,4,3,2,1];
var everyResult= numbers.filter(function(item,index,array){
return (item>2);
});
alert(everyResult); // [3,4,5,4,3]
&map
var numbers=[1,2,3,4,5,4,3,2,1];
var everyResult= numbers. map(function(item,index,array){
return (item * 2);
});
alert(everyResult); // [2,4,6,8,10,8,6,4,2]
&forEach
var numbers=[1,2,3,4,5,4,3,2,1];
var everyResult= numbers. forEach(function(item,index,array){
//执行某些操作
});
@归并方法
1.redure(),从第一项开始
2.reduceRight(),从最胡一项开始
两个参数,
第一个是函数(前一个值,当前值,项的索引,数组对象),函数的返回值会作为第一个参数传给下一项
第二个是基础的值(可选)
&求和
var values=[1,2,3,4,5];
var sum= values.reduce(function(prev,cur,index,array){
retrun prev+cur;
});
alert(sum); //15
3.Date类型
3.1基础
@创建一个日期对象 var now =new Date() ; //自动获得当前日期和时间
如果想指定特定的日期和时间创建日期对象,必须传入表示该日期的毫秒数,为简化,可用Date.pares和Date.UTC方法
。。。。
@
var someDate=new Date(Date.parse("May 25,2004"));
模仿构造函数=
var someDate=new Date("May 25,2004");
@
//GMT时间2000年1月1日午夜零时
var y2k=new Date(Date.UTC(2000,0));
//GMT时间2005年5月5日下午5:55:55
var allFives=new Date(Date.UTC(2005,4,5,17,55,55));
模仿构造函数,但是转换成本地时间
@
//本地时间2000年1月1日午夜
var y2k=new Date(2000,0)
//本地时间2005年5月5日下午5:55:55
var allFives=new Date(2000,4,5,17,55,55);
@Date.now() 返回调用这个方法时候的日期和时间的毫秒数
//取得开始时间
var start=Date.now();
//调用函数
dosomething();
//取得停止时间
var stop=Date.now();
result=stop-start;
用+操作符把Date对象转换成字符串
//取得开始时间
var start=+new Date();
//调用函数
dosomething();
//取得停止时间
var stop =+new Date();
result=stop-start;
3.2 继承的方法
1.toLocalString
2.toString
根据不同的浏览器会返回不同的字符串
3.valueOf --不返回字符串,而是返回日期的毫秒表示,可以用比较符(小于大于)来比较日期值,如
var date1=new Date(2007,0,1);
var date2=new Date(2007,1,1);
alert(date1< date2);//true
alert(date1>date2); //false
因为引用类型时object,比较会后台调用valueOf()
3.3 日期格式化
Date 类型还有一些专门用于将日期格式化为字符串的方法。如下
1.toDateString --特定的格式实现 星期几,月,日,年
2.toTimeString -- 特定的格式实现 时、分、秒和时区
3.toLocaleDateString -- 特定的地区格式实现 星期几,月,日,年
4.toLocaleTimeString -- 特定的格式实现 时、分、秒
5.toUTCString --特定格式完整的UTC日期 toGMTString()和toUTCString一样,但已过期
3.4 日期/时间组件方法
注意的是:UTC日期指的是在没有时区偏差的情况下(将日期转换为GMT时间)的日期值
|
3.RegExp类型
1.基础
var expression = / pattern / flags ;
g 全局模式,应用于所有字符串,而非发现第一个匹配时立即停止
i 不区分大小写模式
m 多行模式
//匹配字符串中所有"at"实例
var pattern1=/at/g;
//匹配第一个"bat"或"cat",不区分大小写
var pattern2=/[bc]at/i;
//匹配所有以"at"结尾的3个字符的组合,不区分大小写
var pattern3=/.at/gi;
@所有元字符都必须转义
([{\^$|)?*+.]}
//匹配第一个"[bc]at",不区分大小写
var pattern=/\[bc\]at/i
1.字面量形式
var pattern1=/[bc]at/i
2.RegExp构造函数
var pattern2=new RegExp("[bc]at","i")
&RegExp构造函数两个参数必须是字符串,不能用字面量传递给RegExp构造函数
&由于是字符串,某些情况需要双重转义(所有元字符都必须双重转义),例如\,字符串被转义为\\,正则表达式就会变成\\\\
如
/\[bc\]at/ -- "\\[bc\\]at"
@区别:使用字面量始终会共享一个RegExp实例,而构造函数创建每一个RegExp实例
var regExp=null;
for(var i=0;i<10;i++){
regExp=/cat/g;
regExp.test(catastrophe);
}
//只创建一个RegExp实例,所以在循环中再次调用test()会失败,因为第一次调用test后找到cat,第二次从索引3的字符开始,就找不到它了。
for(var i=0;i<10;i++){
regExp=new RegExp("cat","g");
regExp.test(catastrophe);
}
//第二个循环使用RegExp构造函数在循环中创建正则表达式,因为每次都会创建新的RegExp实例,所以每次调用test都会返回true
2.RegExp实例属性
2.1RegExp每个实例都具有下列属性
&global 布尔值,表示是否设置了g表示
&ignoreCase 布尔值,表示是否设置了i标志
&lastIndex 整数,表示开始搜索下一个匹配项的字符位置位置,从0算起
&multiline 布尔值,表示是否设置了m标志
&source 正则表达式的字符串表示,按照字面量形式而非传入构造函数中的字符串模式返回
var pattern=/\[bc\]at/i
pattern. global //false
pattern. ignoreCase //true
pattern. lastIndex //0
pattern. multiline //false
pattern. source //"\[bc\]at"
3.RegExp实例方法
3.1exec
参数(应用模式字符串),然后返回第一个匹配信息的数组(Array实例),没有匹配则返回null
1.包含两个属性:index(匹配项在字符串位置)和input(正则表达式的字符串)
2.第一项是匹配模式的字符串,其他项则是捕获组匹配的字符串(如果没有匹配组则只有第一项)
var text="mom and dad and bady"
var pattern=/mom(and dad(and bady)?)?/gi
var matches=pattern.exec(text);
alert(matches.index) //0
alert(matches.input) //mom and dad and bady
alert(matches[0]) //mom and dad and bady
alert(matches[1]) // and dad and bady
alert(matches[2]) //and bady
括号里面的是捕获组
@对于exec,不设置全局标志情况下,在调用一个字符串多次调用将始终返回第一个匹配项信息
设置了全局标志,则继续查找匹配项
var text="cat,bat,sat,fat";
1.
var pattern1=/.at/;
var matches= pattern1.exec(text);
alert(matches.index); //0
alert(matches[0]); //cat
alert(pattern1.lastIndex); //0
matches= pattern1.exec(text);
alert(matches.index); //0
alert(matches[0]); //cat
alert(pattern1.lastIndex); //0
2.
var pattern2=/.at/g;
var matches= pattern2.exec(text);
alert(matches.index); //0
alert(matches[0]); //cat
alert(pattern1.lastIndex); //3
matches= pattern2.exec(text);
alert(matches.index); //5
alert(matches[0]); //bat
alert(pattern1.lastIndex); //8
3.2 test
@接受一个参数,在匹配的情况下返回true,常与if一起用
if(pattern.test(text)){
//do
}
3.3
tolocaleString --返回正则表达式的字面量字符串
toString --返回正则表达式的字面量字符串
ValueOf --返回本身
3.4 RegExp构造函数的属性
3.5 模式的局限性
第五章 引用类型(2)
1.Function类型
@函数实际是对象,每个函数都是Function类型的实例
@函数名实际也是一个指向函数对象的指针
@函数定义
1.1函数声明
function sum(num1,num2){
return num1+num2;
}
2.函数表达式
var sum=function(num1,num2){
return num1+num2;
};
&使用var定义
&有分号,像声明其他变量一样
@函数是对象,函数名是指针,如
function sum(num1,num2){
return num1+num2;
}
alert(sum(10,10)); //20
var another=sum;
alert(another(10,10));//20
sum=null;
alert(another(10,10));//20
&注意:使用不带圆括号的函数名是访问函数指针,而非调用函数
1.2.没有重载(用函数时对象,函数名是指针来理解)
1.
function sum(num1){
return num1+100;
}
function sum(num1){
return num1+200;
}
alert(sum(100));//300
2.
var sum=function(num1){
return num1+100;
};
sum=function(num1){
return num1+200;
};
alert(sum(100));//300
&&可看出,创建第二个函数时候,实际覆盖引用第一个函数的变量
1.3.函数声明与函数表达式
@在解释器向执行环境加载数据时,解释器会率先读取函数声明,并使在执行任何代码之前可用
@至于函数表达式,必须等到解释器执行到所执行的代码行
alert(sum(10,10)); //20
function sum(num1,num2){
return num1+num2;
}
正确
alert(sum(10,10)); //20
var sum=function(num1){
return num1+100;
};
错误,因为在执行到函数所在的语句之前,变量sum中不会保存有对函数的引用
1.4.作为值的函数
@因为函数本身是对象,指针,所以函数能作为参数,传递给另一个参数
function call(afunction,someArgument){
return afunction(someArgument);
}
function add10(num){
retrun num+10;
}
var result= call(add10,10);
alert(result); //20
&&一个参数做函数,把另外一个参数传递
1.5.函数的内部属性
函数内部有两个对象
@arguments对象
@this
@arguments对象,是一个类数组对象,其中还有一个叫callee对象属性
例子,阶乘
function a(num){
if(num<=1){
return 1;
}else{
return num * a(num-1);
}
}
函数的执行与内部函数名紧紧耦合在一起,可以写成
function a(num){
if(num<=1){
return 1;
}else{
return arguments.callee(num-1)
}
}
@this对象,是函数以执行对象的环境对象,(当在网页的全局作用域中调用函数时,this对象引用的就是window)
window.color="red";
var o={color:"blue"};
function sayColor(){
alert(this.color);
}
sayColor();//red;
o. sayColor= sayColor;
o. sayColor();//blue
&&函数的名字仅仅是一个包含指针的变量而已,因此,即使在不同的环境中执行,全局的sayColor与o. sayColor()指向的仍然是同一个函数
@ECMAScript中arguments另外一个caller属性。省略
1.6.函数的属性和方法
函数时对象,所以有属性和方法
1.6.1属性
@每个函数都有length和prototype
length:表示函数希望接收的命名参数的个数
function sayName(name){
alert(name);
}
function sum(num1,num2){
return num1+num2;
}
function sayHi(){
alert("hi");
}
alert(sayName.length) //1
alert(sum.length) //2
alert(sayHi.length) //0
prototype:
&是保存它们所有势力方法的真正所在,也就是toString,valueOf等方法实际都是保存在prototype名下,只不过通过各自对象的实例访问
&prototype属性石不可枚举的,因此无法for-in
1.6.2方法
@都包含两个非继承的方法apply和call()方法,用途在特定作用域中调用函数,实际等于函数体内this对象的值
1. apply,两个参数,第一个(运行函数的作用域),另一个(参数数组,可以使Array的实力,也可以是arguments对象)
function sum(num1,num2){
return num1+num2;
}
function callnum1(num1,num2){
return num.apply(this,arguments);
}
function callnum2(num1,num2){
return num.apply(this,[num1,num2]);
}
alert(callnum1(10,10)); //20
alert(callnum2(10,10)); //20
&传入this作为this值(因为在全局作用域调用,所以传入是window对象)
&&严格模式,未指定环境对象调用函数,则this不会转型window。除非明确把函数添加某个对象调用apply()和call(),否则this回事undefined
2. call,和apply区别是接收参数方式不同,第一个参数this没变化,第二个直接传递参数
function sum(num1,num2){
return num1+num2;
}
function callnum1(num1,num2){
return num.apply(this,num1,num2);
}
alert(callnum1(10,10)); //20
3.apply和call真正用武之地是能够扩充函数赖以运行的作用域,如
window.color="red";
var o={color:"blue"};
function sayColor(){
alert(this.color);
}
sayColor.call(this); //red
sayColor.call(window);//red
sayColor.call(o);//blue
&&执行函数不一样,函数体内this对象的指向都不一样了。
&&最大好处是对象不需要和方法有任何耦合了
1.6.3 ECMAScript还定义一个方法bind()
2.基本包装类型
@3个特殊引用类型(基本包装类型):Boolean、Number和String
@每当读取基本类型值的时候,后台就会穿件一个基本包装类型的对象
var s1="some text";
var s2=s1.substring(2);
过程
(1)创建String类型的一个实例
(2)在实例上调用指定的方法
(3)销毁这个实例
相等于
var s1=new String("some text");
var s2=s1.substring(2);
s1=null;
@引用类型和基本包装类型区别
1.对象的生存期,使用new操作符创建的引用类型实例,在执行流离开当前域之前一直保存内存中
2.自动创建的基本包装类型的对象,存在于代码的执行巡检,然后立即销毁(意味不能再运行时为基本类型添加属性和方法)
var s1="some text";
as.color="red";
alert(s1.color); //undefined
@可以显示调用Boolean、Number、String来创建基本包装类型的对象,但绝对不建议这样做(会让人分不清自己在处理基本类型还是引用类型)
@对基本包装类型的实例用typeof会返回object,而且基本包装类型对象都会装转换true
@Object构造函数也会像工厂方法,根据传入值类型返回相应基本包装类型实例
var obj=new object("some text");
alert(obj instanceof String); //true
@@使用new调用基本包装类型的构造函数,与直接调用同名的转型函数不一样
var value="25";
var number=Number(value); //转型函数
alert(typeof number); //"number"
var obj =new Number(value);
alert(type of obj); //"object"
对应@对基本包装类型的实例用typeof会返回object,而且基本包装类型对象都会装转换true
不建议显示创建基本包装类型,让它在后台自动处理好了
2.1Boolean
@创建Boolean类型 var booleanObject=new Boolean(true);
@
Boolean类型实例重写了valueof()方法,返回true或false
Boolean类型实例重写了toString()方法,返回"true"或"false"
Boolean对象在ECMAScript中用处不大,因为常误解
var falseObject=new Boolean(false);
var result= falseObject && true;
allert(result); //true
var falseValue=false;
var result= falseValue&& true;
allert(result); //false
@@
1.因为前面讨论过,(基本包装类型对象都会装转换true),所以第一个var result= falseObject && true;结果是true
2.因为falseValue基本类型,所以。。
@@基本类型的布尔值和引用类型的布尔值还有两个区别
1.typeof操作基本类型会返回"boolean",引用类型则返回"object"
2.Boolean对象是Boolean类型的实例,所以instanceof操作Boolean返回true,而基本类型用instanceof则false,如下
如下
alert(typeof falseObject); //object
alert(typeof falseValue); //boolean
alert(falseObject instanceof Boolean); //true
alert(falseValue instanceof Boolean); //false
区别基本类型的布尔值和Boolean对象之前区别非常重要--,最好就是永远不要用Boolean对象,不要显示创建
2.2Number
@创建 var numberObject=new Number(10);
@
重写了valueof方法,返回对象表示的基本类型的值
重写了toString(),传递技术,返回几进制的字符串形式
var num=10;
alert(num.toString()); //10
alert(num.toString(2)); //1010
alert(num.toString(8)); //12
alert(num.toString(10)); //10
alert(num.toString(16)); //a
@toFixed方法 --按照指定的小数位返回数值的字符串表示,能够自动舍入的特性
var num=10;
alert(num.toFixed(2)); //"10.00"
var num=10.005;
alert(num.toFixed(2)); //"10.01"
@toExponential方法 --返回指数表示法
var num=10;
alert(num. toExponential(1)); //"1.0e+1"
@与Boolean对象类型,不建议显式创建对象
var numberObject=new Number(10);
var numberValue=10;
alert(typeof numberObject); //"object"
alert(typeof numberValue); //"number"
alert(numberObject instanceof Number); //true
alert(numberValue instanceof Number); //false
2.3 String类型
1.创建
var stringObject =new String("hello world");
valueOf,tolocale-String,toString方法都会返回对象所表示的基本字符值
2.属性-length
alert(stringObject.length);//"11"
&&注意的是,即使字符串中包含双字节的字符(不是占一个字节的ASCII字符,如汉字),每个字符也仍然算一个字符
3.方法
3.1字符方法-charAt,charCodeAt都接受一个参数(基于0的字符位置)
charAt-返回字符
var stringValue="hello world"
alert(stringValue. charAt(1)); //"e"
charCodeAt-返回字符编码
var stringValue="hello world"
alert(stringValue. charCodeAt(1)); //"101",e的字符编码是101
&&ECMAScript5还可以方括号家数字索引来访问,大部分浏览器
var stringValue="hello world"
alert(stringValue[1]); //e
3.2字符串操作方法--concat, slice, substr, substring,都不会改变原来字符串
concat-字符串相加,就好比如直接用+"",任意个参数
var stringValue="hello:
var res= stringValue. concat("world","!");
alert(res); //hello world!
alert(stringValue) //hello
slice -- 两个参数,(字符串开始位置,字符串结束位置)
substring -- 两个参数,(字符串开始位置,字符串结束位置)
substr -- 两个参数,(字符串开始位置,要返回的字符个数)
var stringValue="hello world";
stringValue.slice(3) --lo world
stringValue. substring(3) --lo world
stringValue.substr(3) --lo world
stringValue..slice(3,7) -- --lo w
stringValue.. substring(3,7) -- --lo w
stringValue..substr(3,7) -- --lo worl(要返回的个数)
&&一个参数情况下都是搜索到最后
&&参数也可以负值,比较混乱,不推荐
3.3字符串位置方法--indexOf, lansIndexOf,搜索字符串,返回其位置,没有则返回-1
indexOf从头开始,lastIndexOf从尾开始
var stringValue="hello world";
stringValue. indexOf("o")--4
stringValue. lastIndexOf("o")--7
&&如果只有一个o,那么indexOf,lastIndexOf返回相同
&可选的第二个参数,表示从哪个位置开始
var stringValue="hello world";
stringValue. indexOf("o",6)--7
stringValue. lastIndexOf("o",6)--4
&&可循环使用indexOf或lastIndexOf找到所有匹配的字符串
string stringValue="Lorem ipsum dolor sit amet, consectetur adipisicing elit"
var positong=new Array();
var pos= stringValue.indexOf("e");
while(pos>-1){
positong.push()pos;
pos== stringValue.indexOf("e",pos+1);
}
alert(positong) --3,24,32,35,52;
4.去两边空格--trim
ECMAScript5为所有字符串定义trim方法
var stringValue=" hello world ";
var res= stringValue.trim();
stringValue --" hello world "
res --"hello world"
5.字符串大小写转换--toLowerCase,toUpperCase,-toLocaleLowerCase,toLocaleUpperCase,
toLocaleLowerCase,toLocaleUpperCase是针对地区的
var stringValue="hello world";
stringValue. toLowerCase(); --HELLO WORLD
stringValue. toUpperCase(); --HELLO WORLD
stringValue. toLocaleLowerCase(); --HELLO WORLD
stringValue. toLocaleUpperCase(); --HELLO WORLD
6.字符串模式的匹配方法--match,search,replace,split
6.1match--与调用RegExp的exec方法相同,一个参数(正则表达式或RegExp对象)
var text="cat,bat,sat,fat";
var pattern=/.at/;
var matches=text. match(pattern);; --与pattern.exec(text)相同
alert(matches[0]);//cat
alert(matches.index);//0
alert(matches.lastIndex);//0
6.2search-一个参数(正则表达式或RegExp对象),返回字符串中第一个匹配的索引,没有则-1
var text="cat,bat,sat,fat";
var pos=text.search(/at/);
alert(pos);//1
6.3search-两个参数(RegExp对象或字符串【该字符串不会转成正则】,字符串或函数)
var text="cat,bat,sat,fat";
var result=text.replace("at","ond");
alert(result); //"cond,bat,sat,fat"
var result=text.replace(/at/g,"ond");
alert(); //"cond,bond,sond,fond"
如果第二个是字符参数,还可以使用($$,$&,&',$n,$nn),得到的值插入到结果字符串中
var text="cat,bat,sat,fat";
var result=text.replace(/(.at)/g,"word($1)");
alert(result); --word(cat),word(bat),word(sat),word(fat)
如果第二个是字符函数,
1.只有一个匹配性,三个参数(匹配性,匹配性在字符中位置,原始字符串)
2.多个捕获组情况,N个参数((第一个捕获数组,第二个捕获数组。。。),匹配性在字符中位置,原始字符串)
function htmlEscape(text){
return text.replace(/[<>"&]/g,function(match,pos,origunalText){
switch(match)
case"<":
return "<";
case">":
return ">";
case"&":
return "&";
case"\"":
return """;
});'
}
&&该函数能够转移4个字符(小于号,大于号,和号,双引号)
htmlEscape("<p class=\"greeting\">hello world!</p>")
//<p class="greeting">hello world!</p>
7.split 基于一个字符串分割成多个字符串,结果放在数组中
参数(字符串或者RegExp对象,可选【指定返回数组的大小】)
var colorText="red,blue,green,yellow";
var color1= colorText.split(","); --["red","blue","green","yellow"]
var color2= colorText.split(",",2); --["red","blue"]
var color3= colorText.split(/[^\,]+/); --["",",",",",",",""]
8.localeCompare比较两个字符串
1.排在字符串参数之前,则负数(大多数是-1,但不一定)
2.排在字符串参数之后,则正数(大多数是1,但不一定)
3.相等,则0
建议不要使用1,-1,0,最好如下使用
function(value){
var res= "AAA".localeCompare(value)
if(res>0){}
else if (res<0){}
else{}
}
9.fromCharCode--String的静态方法,接受一段字符编码转换成String,如
String. fromCharCode(104,101,108,108,111);//hello
3.单体内置对象
3.1定义
&由ECMAScript提供,不依赖宿主环境的对象
&在执行程序已经存在,开发人员不需要实例化内置对象,因为已经实例化,比如前面那些Object,Array,String,Number等
&ECMAScript-262还定义两个内置对象,Global和Math
3.1.1 Global
&哪里看这个对象都是不存在的,不属于任何其他对象的属性和方法,最终都是它的属性和方法
&事实上,没有全局变量或者全局函数,因为所有全局作用上的函数都是它的属性和方法
&前面那些isNan,parseInt等事实上都是Global对象的方法,还有以下的
1.URI编码方法
@encodeURI--应用于整个URI,不会对身书属于URI的特殊字符进行编码,例如冒号,鞋行,问号和井号
@ encodeURIComponent--主要应用于URI中的某一段,会对它发现的非标准字符进行编码
var uri="http://www.wrox.com/illegal value.htm#start "
encodeURI(uri);//"http://www.wrox.com/illegal%20value.htm#start "
encodeURIComponent(uri);//"http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start "
上面中encodeURI只对空格进行编码,encodeURIComponent则对使用对应的编码替换所有非字母数字字符
相应的解码
@decodeURI
@ decodeURIComponent
&&实际上使用encodeURI和encodeURIComponent替代了已经废弃的escape和unescape
2 eval()方法
@就像ECMAScript的解释器,一个参数(要执行ECMAScript的字符串)
eval("alert('hi')");等同于alert('hi')
@通过eval调用的代码被认为是包含该次调用执行环境的一部分,具有与该执行环境相同的作用域链
如
var msg="hello world";
eval("alert(msg)");
或
eval("var msg='hello world';")
alert(msg);
但是严格模式下(use strict),外部不能访问eval内部定义的变量或者函数
使用eval时候注意安全性--代码注入
3 global对象的小户型
属性 | 说明 | 属性 | 说明 |
undefined | 特殊值undefined | Date | 构造函数Date |
NaN | 特殊值NaN | RegExp | 构造函数RegExp |
Infinity | 特殊值Infinity | Error | 构造函数Error |
Object | 构造函数Object | EvalError | 构造函数EvalError |
Array | 构造函数Array | RangeError | 构造函数RangeError |
Function | 构造函数Function | ReferenceError | 构造函数ReferenceError |
Boolean | 构造函数Boolean | SyntaxError | 构造函数SyntaxError |
String | 构造函数String | TypeError | 构造函数TypeError |
Unmber | 构造函数Unmber | URIError | 构造函数URIError |
4 window对象
3.1.2 Math
1.属性
2.方法
@min和max方法
var max=Math.max(3,54,32,16)
alert(max);//54
var min=Math.max(3,54,32,16)
alert(min);//3
@舍入方法(将娴熟舍入为整数)
&Math.ceil() --向上舍入为最近的整数
&Math.floor() --向下舍入为最近的整数
&Math.round() --四舍五入为最近的整数
Math.ceil(25.9) --26
Math. ceil(25.5) --26
Math. ceil(25.1) --26
Math. floor(25.9) --25
Math.floor(25.5) --25
Math. floor(25.1) --25
Math. round(25.9) --26
Math. round(25.5) --26
Math.round(25.1) --25
@随即方法random()方法,返回大于等于0小于1的一个随机数
套用下面公式就可以利用random从某个整数范围中随即选择一个值
值=Math.floor(Math.random()*可能的总数+第一个可能的值)
1.如果1到10之间
var num=Math.floor(Math.random()*10+1)
2.如果2到10之间
var num=Math.floor(Math.random()*9+2)
3.其他方法
第七章 函数表达式
1.匿名函数(拉姆达函数)
function (){
}
2.闭包
“官方”的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。
相信很少有人能直接看懂这句话,因为他描述的太学术。其实这句话通俗的来说就是:JavaScript中所有的function都是一个闭包。不过一般来说,嵌套的function所产生的闭包更为强大,也是大部分时候我们所谓的“闭包”。看下面这段代码:
这段代码有两个特点:
1函数b嵌套在函数a内部;2函数a返回函数b。引用关系如图:
这样在执行完varc=a()后,变量c实际上是指向了函数b,b中用到了变量i,再执行c()后
就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包,
为什么?因为函数a外的变量c引用了函数a内的函数b,就是说:
当函数a的内部函数b被函数a外的一个变量引用的时候,就创建了一个我们通常所谓的“闭包”。
|
3模拟块级作用域
javascript没有块级的概念
模拟一个块级作用域
(function(){
//这里是块级作用域
})();
4,私有变量
1.严格说javascript是没有私有成员,因为所有的对象属性都是公共的,但有一个私有变量的定义,就是函数中的变量,都可以认为是私有的。外部不能访问
2.特权方法-有权访问私有变量和私有函数的公共方法
function person(name){//name就是一个私有变量
this.getName=function(){
return name;
}
this.setName=function(value){
name=value;
}
}
var persion =new person("hahahah");
alert(persion . getName());//hahahah
persion . setName("bbb");
alert(persion . getName());//bbb
5,静态私有变量
6模块模式
第八章 BOM
1.window对象
@window是javascript访问浏览器窗口的一个接口,又是浏览器上ECMAScript规定的Global对象
@网页中定义的任何一个对象、变量都是以window作为Global对象
2.窗口关系及框架
1.页面包含框架,每个框架都拥有自己的window对象,并且保存在frames集合中
以下是一个框架
例子1
<html> <head></head> <frameset> <frame src="frame.htm name="topFrame""></frame> <frameset> <frame src="anthorframe.htm name="leftFrame""></frame><frame src="yetanthorframe.htm name="rightFrame""></frame> </frameset></frameset> </html> |
以上创建一个框架集,一个居上,两个居下
window.frames[0] window.frames["topFrame"] top.frames[0] top.frames["topFrame"] frames[0] frames["topFrame"] |
|
window.frames[1]
window.frames["leftFrame"]
top.frames[1]
top.frames["leftFrame"]
frames[1]
frames["leftFrame"]
|
window.frames[2]
window.frames["rightFrame"]
top.frames[2]
top.frames["rightFrame"]
frames[2]
frames["rightFrame"]
|
top
@建议使用top来引用这些框架,因为top始终只想最高最外层,也就是浏览器窗口,可以确保在一个框架正确访问另外一个框架
@对于在一个框架中编写任何代码,其中window对象指向都是最高框架的实力,而非最高层框架
parent
parent对象始终指向当前框架的上层框架(有时等于top,在没有框架的情况下,parent=top=window)
如下
yetanthorframe.htm中
例子2
<html> <head>yetanthorframe</head> <frameset> <frameset> <frame src="red.htm name="redFrame""></frame><frame src="blue.htm name="blueFrame""></frame> </frameset></frameset> </html> |
浏览器加载例子1后会加载例子2
@如果代码在例子2的redFrame或blueFrame中,parent指的就是rightFrame
@如果代码位于例子1的topFrame中,parent就是top
下图就是加载完之后,不同window的值
topFrame window.name=topFrame top.name= parent.name= |
||
leftFrame window.name=leftFrame
top.name=
parent.name=
|
redFrame window.name=redFrame
top.name=
parent.name= rightFrame
|
blueFrame window.name=blueFrame
top.name=
parent.name=rightFrame
|
&&除非最高窗口时通过window.open(后面讨论)中打开,否则window对象的name属性不会包含任何值
self
实际上等同于window
3.窗口位置
1.位置属性
screenLeft screenTop --IE,Safari,Chrome
screenX screenY --Firefox
可以这样
var leftPos=(typeof window. screenLeft =="number")? window .screenLeft : window .screenX
var topPos=(typeof window. screenTop =="number")? window .screenTop : window . screenY
2.移动窗口位置
moveTo
moveBy
该方法不适用框架,只能对最外层window使用
4.窗口大小
浏览器
innerWidth,innerHeight
outerWidth,outerHeight
也可以用DOM
document. documentElement.clientWidth
document. documentElement.clientHeight
调整窗口大小
resizeTo
resizeBy
移动设备的窗口
5.导航和打开窗口
1.window.open--打开一个新的浏览器窗口,4个参数
参数1:要加载的URL
参数2:窗口目标
参数3:特性字符串
参数4:新页面是否取代浏览器历史中当前加载页的布尔值
@如果传递了参数2,该参数是已经有的窗口或框架,那么会在该名称的窗口或框架加载参数1的URL
window.open("http://www.wrox.com","topFrame")
=
<a href="http://www.wrox.com" target="topFrame"></a>
调用该代码如同点击http://www.wrox.com中,target属性为topFrame的链接,如果有topFrame窗口或框架,则加载
,否则创建一个新窗口并且命名为topFrame
@如果传递了参数3,则按照其设置初始化窗口,否则按照默认值
设置 | 值 | 默认 | 说明 |
fullscreen | yes or no | 仅限ie | |
height | 数值 | ||
left | 数值 | ||
location | yes or no | no | |
menubar | yes or no | no | |
resizeable | yes or no | no | |
scrollbars | yes or no | no | |
status | yes or no | no | |
toolbar | yes or no | no | |
top | 数值 | ||
width | 数值 |
打开一个新的可以调整大小的窗口,大小为400x400,离左边上边10像素
window.open("URL","demo","height=400,width=400,top=10,left=10, resizeable=yes")
@window.open会返回指向新窗口的引用,引用对象和window对象大致相似
如
var newWindow=window.open("URL","demo","height=400,width=400,top=10,left=10, resizeable=yes")
//调整大小
newWindow.resizeTo(500,500);
//移动位置
newWindow.moveTo(100,100);
//关闭窗口,尽可以是window.open打开的窗口,浏览器主窗口不能关闭
newWindow.close()
&&弹出的窗口还可以用top.close来关闭,窗口关闭后窗口引用还存在,该引用除了检测closed属性外,没其他用处
newWindow.close();
alert(newWindow.closed); //true
@新建的窗口还有一个opener属性,保存打开的的院士窗口属性
var newWindow=window.open("URL","demo","height=400,width=400,top=10,left=10, resizeable=yes")
alert(newWindow. opener==window);//true
新打开的窗口可以指向打开它的窗口,但是原始窗口并不能跟踪它所打开的窗口
某浏览器(如ie,Chrome)会在独立的进程运行每个标签(所有标签在一个进程,所以可以彼此通信)
,若设opener=null,,即表示新标签页运行在独立的进程,不需要和打开的标签通信,一旦切断不可恢复
var newWindow=window.open("URL","demo","height=400,width=400,top=10,left=10, resizeable=yes")
newWindow。opener=null
@安全限制
广告---
@弹出窗口屏蔽程序
&大多数浏览器内置弹出窗口屏蔽程序
&如果弹出窗口屏蔽了,考虑两种情况
1.如果是浏览器内置弹出窗口屏蔽程序,那么window.open很可能返回null值,检测则可确定弹出窗口是否被屏蔽
var newWindow=window.open("URL","_blank")
if(newWindow==null){
alert("block");
}
2.浏览器扩张或者其他程序阻止,则会抛出错误,可以这样检测
var block=false;
try{
var newWindow=window.open("URL","_blank")
if(newWindow==null){
block==true;
}
}catch{
block==true;
}
if(block){
alert("block");
}
这个就是通用的了,包含两个情况的检测
6.间歇调用setInterval和超时调用(setTimeout)
1.超时调用setTimeout
参数1:要执行的代码(最好是函数)
参数2:毫秒
setTimeout(function(){
alert("hi");
},1000);
&参数2表明经过多少毫秒后把代码放进javascript任务队列,如果队列为空,则马上执行,若排队等候
setTimeout会返回一耳光数值ID,是计划执行代码的唯一标识符,可以通过它取消ijihua
var ID=setTimeout(function(){
alert("hi");
},1000);
clearTimeout(ID);
若计划已经执行后,在调用clearTimeout等同没调用一样
2.间歇调用setInterval
使用和setTimeout一样,也会返回一个ID
clearInterval(ID)
7.系统对话框
系统对话框的外观是有操作系统和浏览器决定的,与CSS没关
@alert
@confitm
if(confirm("Are You Sure")){
alert("y");
}else{
alert("n");
}
@prompt
参数1:显示的文本
参数2:默认显示
var res=prompt("what is your name","")
if(res!=null){
alert("welcome,"+ res);
}
8.location对象
@它既是window的对象,也是document的对象(window.location=document. location)
@属性
属性名 | 例子 | 说明 |
hash | #content | 返回URL的hash,若没返回空字符串 |
host | www.wrox.com:80 | 服务器名称和端口号(如果有) |
hostname | www.wrox.com | 不带端口的服务器名称 |
href | http://www.wrox.com | 返回当前页面完成的URL,location.toString()一样 |
pathname | /WileyCDA/ | 返回URL目录和文件名 |
port | 8080 | 端口 |
protocol | http: | 页面使用协议 |
search | ?q=javascript&id=1 | 返回URL的查询字符串,一问号开头 |
@查询字符串参数
@位置操作
1.使用assign()传递一个URL,打开一个URL,并保存在历史记录(即使按返回可以退回)
location.assign("http://www.wrox.com");
2.与assign一样
window. location="http://www.wrox.com";
location.href="http://www.wrox.com";
@replace()
一个参数,要接受的URL,位置改变,但是不会再历史记录中生成(后退无效)
@reload() 重新加载当前页
不带参数:location.reload()--会以最有效的方法重新加载(有可能从缓存在加载)
带参数:location.reload(true)--从服务器重新加载
&&reload()之后的代码可能执行一可能不执行,取决于网络延迟或系统资源等,所以最后把reload()放在代码最后一行
8.navigator对象
@是所有支持javascript浏览器所共有的
@与其他BOM一样,没个浏览器的navigator对象都有自己一套的属性
1.属性和方法
2.检测插件
3.注册处理程序
9.screen对象
10.history对象
@保存用户上网的历史记录
@go()
history.go(-1)
history.go(1)
history.go(2)
history.go("wrox.com")
@back()
@forward()
@length属性-保存历史记录数量
对于加载到窗口,标签页或者框架中的第一个页面而言,history.length=0
确定用户是否一开始就开你的页面
if(history.length==0){
//这应该是用户打开窗口后的第一个页面
}
&&当前页面的URL改变就会生成一条历史记录,在一些高版本浏览器中,URL改变还包括hash的变化(因此设置location.hash会在浏览器中生一套新的历史记录)
第十四章 表单脚本
第二十章 JSON
1.语法
Json的语法可以表示以下三种类型的值
1.简单值
2.对象
3.数组
1.1简单之
1.2对象
3.数组
2.解释与序列化
2.1JSON对象
@stringify()
@parse()
@TOjSON()
第二十三 离线应用与客户端存储
1