Java Script 基础

一、 JS的简介

JavaScript是一种网页编程技术,经常用于创建动态交互网页
JavaScript是一种基于对象和事件驱动的解释性脚本语言,类似C语言和Java的语法
事先不编译;逐行执行;无需进行严格的变量声明;内置大量现成对象,编写少量程序可以完成目标
不同的浏览器甚至同一浏览器的不同版本对JavaScript的支持程度都不一样

二、 JS的基本语法

0. 有两种JavaScript写法:

a. 直接在 html 中嵌入,程序写法:

<script type="text/javascript" language="JavaScript" charset="UTF-8">
<!--
...javaScript程序...
// -->
</script>

b. 调用独立JavaScript文件:在html中写 <script type="text/javascript" src="test1.js"> </script>

<script> 不能用空标志。 JS脚本文件中不需要脚本开始和结束声明,直接写 function

1. 在HTML中大小写是不敏感的,但标准的JavaScript是区分大小写的

2. 分号表示语句结束。有换行,分号允许不加(建议加上,以免错误和歧义)

程序忽略缩进:提倡加上空格或TAB增强程序可读性

3. 标识符:成份是 不以数字开头的字母、数字 和下划线(_)、美元符($)

ECMA v3标准保留的JavaScript的关键字:

break case catch continue default delete do else false finally
for function if in instanceof new null return switch this
throw true try typeof var void while with

4. 变量的声明: var x,y; (变量没类型;未声明的变量也可以用,且是全局的;函数体内声明的变量则是局部的)

x=1; y="hello world!"; (变量的类型由所赋的值决定)

5. 函数: function 函数名 (参数){ 函数体; return 返回值;}

参数没类型或顺序,且可变长;可以使用变量、常量或表达式作为函数调用的参数
声明函数时,参数可不明写,调用时用 arguments[number] 接收。参数是值传递的。
函数由关键字 function 定义; 函数名的定义规则与标识符一致,大小写是敏感的
返回任意类型(不需写返回类型); 返回值必须使用return
//参数数量是可变的,若要限定参数数量,如下做法: (指定参数数量为0)

```python
if ( arguments.length !== 0 ) throw Error.parameterCount();
caller: 调用此函数的函数。没有被调用则此变量为 null
arguments: 此函数的参数列表。
arguments.caller: 调用此函数的参数列表,没有被调用则为 undefined
arguments.callee: 此函数本身的一个引用。在匿名函数里会需要用到。
```

6. 数据类型:

基本类型: Number:数字、 String:字符串、 Boolean:布尔
特殊类型: Null:空、 Undefined:未定义
组合类型: Array:数组、 Object:对象

7. Number 数值类型:所有数字都采用64位浮点格式存储,相当于Java和C语言中的double格式

能表示的最大值是 ±1.7976931348623157 x 10^308;能表示的最小值是 ±5 x 10^ -324
10进制的整数的精确表达的范围是 -9007199254740992 (-2^53) 到 9007199254740992 (2^53)
16进制数据前面加上0x,八进制前面加0
保留多少位小数: var a = 111.115555; var b = a.toFixed(2); alert(b + ‘ : ‘ + typeof b); // 111.12 : string

8. String 类型:字符串常量首尾由单引号或双引号括起

没有字符,只有字符串(所有字符都按字符串处理)
常用转义符: \n换行 '单引号 "双引号 \右斜杆 (字符串中部分特殊字符必须加上右划线)
汉字常使用特殊字符写,如: \u4f60 –>”你” \u597d –>”好” (可避免乱码)

9. Boolean 类型:仅有两个值:true和false,实际运算中true=1,false=0

也可以看作on/off、yes/no、1/0对应true/false;主要用于JavaScript的控制语句

10.null, undefine 类型:

null 在程序中代表变量没有值;或者不是一个对象
undefined 代表变量的值尚未指定;或者对象属性根本不存在
有趣的比较:
null 与空字符串: 不相等, null 代表什么也没有,空字符串则代表一个为空的字符串
null 与 false : 不相等, 但是 !null 等于 true
null 与 0 : 不相等,(但是在C++等其它语言中是相等的)
null 与 undefined : 相等,但是 null 与 undefined 并不相同

11.数据类型转换:JavaScript属于松散类型的程序语言

变量在声明的时候并不需要指定数据类型;变量只有在赋值的时候才会确定数据类型
表达式中包含不同类型数据则在计算过程中会强制进行类别转换(优先级:布尔–>数字–>字符)
数字 + 字符串:数字转换为字符串
数字 + 布尔值:true转换为1,false转换为0
字符串 + 布尔值:布尔值转换为字符串true或false
函数 parseInt: 强制转换成整数(如果包含字符串,则转换到字符串为止,后面不再理) //如 parseInt(“13a2”)=13
函数 parseFloat: 强制转换成浮点数
函数 eval: 将字符串强制转换为表达式并返回结果,亦可将字节或变量转成数值。
函数 typeof: 查询数据当前类型(string / number / boolean / object ) ,未定义则返回“undefined”

12.运算符:(同java)

算术运算符: 加/字符连接(+)、 减/负号(-)、 乘(*) 、除(/)、 余数(% ); 递增(++)、 递减(–)
逻辑运算符: 等于( == )、 不等于( != ) 、 大于( > ) 、 小于( < ) ; 大于等于(>=) 、小于等于(<=)
与(&&) 、或(||) 、非(!) ; 恒等(===)、不恒等(!==)
位运算符: 左移(<<) 、有符号右移(>>);无符号右移(>>>)
位与(&) 、位或(|)、异或(^) 、NOT (~)
赋值运算符: 赋值(=) 、复合赋值(+= -= *= /= %= &= )
(先运行完右边的,再跟左边的进行赋值运算;如 var i=10;i-=5-3;结果8)

13.选择控制语句(同java)

if(…){…} else{…} if 语句允许不使用else子句;允许进行嵌套
switch(表达式){case 值1:语句1;break; case 值2:语句2;break; default:语句3;}

14.循环控制语句(类似java)

for (初始化;条件;增量){ 语句1; … }
for-each遍历: for(var key in objs){var element=objs[key];…} // 注意: in 前面的是 key,而不是下标或者集合里面的元素,获取集合里的元素要使用 集合[key]
while (条件){ 语句1; … }
do{语句1; …}while(条件);
break, continue 跳出循环;还可配合标签使用

15.对象:JavaScript是一种基于对象语言,对象是JavaScript中最重要的元素

对象由属性和方法封装而成
javaScript包含四种对象:
内置对象 Date
自定义对象 Cart
浏览器对象 window
ActiveX对象 ActionXObject

16. 异常处理:

try{ ... } catch( e ) { ... } finally { ... }
try{ throw new Error("Err0"); } catch( e ) { alert(e.description); } finally { ... }
try{ throw "Err1"; } catch( e ) { if(e == "Err1") alert("错误!"); }
try{ ... } catch( e ) { alert(e.message || e.description); } // 查看出错提示

17.选取页面的对象:

var obj = document.forms["FormName"].elements["elementName"];
var obj = document.forms[x].elements[y]; //x和y 是int类型,表示第几个表单,第几个元素
var obj = document.FormName.elementName;
var obj = document.all["elementName"];
var obj = document.all["elementID"];
var obj = document.getElementById("elementID");
var obj = document.getElementsByName("elementName"); //返回数组
var obj = document.getElementsByTagName("TagName"); //返回数组

18. typeof 查看类型:

undefined, null, boolean, number, string, object, function
也就是 typeof 返回的值只能是上面的其中一个(字符串类型)。
注意:以上单词都是小写,不要与内置对象 Number, String, Object, Function 等混淆。
null: typeof(null) 返回 “object”, 但null并非object, 具有 null 值的变量也并非object。未定义的返回”undefined”
number: typeof(NaN) 和 typeof(Infinity) 都返回 number; NaN参与任何数值的计算结果都是NaN,且 NaN != NaN, Infinity / Infinity = NaN

19.instanceof 判断类型:

instanceof 返回一个 boolean 值, 指出对象是否是特定类的一个实例, 实际上就是检测实例是否有继承某类的原型链。
对于 Array, null 等特殊对象 typeof 一律返回 object,这正是 typeof 的局限性。
instanceof 用于判断一个变量是否某个对象的实例,或者子类,如: var a=new Array();alert(a instanceof Array);会返回 true, 而 alert(a instanceof Object)也会返回 true
再如: function test(){};var a=new test();alert(a instanceof test)返回 true, alert(test instanceof Function)返回 true, 但 alert(a instanceof Function)返回 false(不明白什么原因)
注意: function 的 arguments, 使用(arguments instanceof Array)返回 false,尽管看起来很像。
另外: (window instanceof Object)返回 false, 这里的 instanceof 测试的 Object 是指js中的对象,不是dom模型对象。而 typeof(window) 会得 “object”

20.in 用法:

通常使用在 for 循环中,作 foreach 用,像 for(var i in obj)…
也可以用在类中,判断类里面是否有此 key。但注意不能有效用在数组中。
如: var ar = {a:false, b:2}; alert(‘a’ in ar)返回 true;因为 ar[‘a’] 存在。
在数组中使用时,如: var arr=[4,5,6]; alert(2 in arr)会返回 true,因为 arr[2] 存在。而 alert(5 in arr)会返回 false,arr[5] 不存在。
if (key in obj) 相当于 if(!!obj[key])。
数组中也可以使用 for, in,如: var array = ['a', 'b', 'c', 'd'];for(var item in array){alert(array[item]);}
值得注意的是,如果对类进行 .prototype.函数 来扩展, for in 时会受到影响,把扩展的内容也循环出来。
所以不赞成对 Object 类进行扩展,也不赞成数组使用 for in(因为数组有可能被扩展了)

21.闭包(closure)

是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

1) 变量的作用域

函数内部可以直接读取全局变量。(函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量!)
在函数外部无法读取函数内的局部变量。
链式作用域(chain scope):子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。

2) 闭包就是能够读取其他函数内部变量的函数。

由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成”定义在一个函数内部的函数”。
所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

3) 闭包的最大用处有两个:

一个是可以读取函数内部的变量,另一个就是避免外部修改这些变量的值。

4) 注意:

闭包使得函数中的变量都被保存在内存中,内存消耗很大,不能滥用,否则影响性能,可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

22.比较运算

1)“==” 与 “===” 的区别
“==” 双等号, 用于比较时会忽略类型, 字符串可以与数字相等, null 与 undefined 相等
“===” 三等号, 用于比较时严格区分类型,类型不相同的不会认为相等
同理还有不等于( “!=” 与 “!==” ),比较规则与上面的一样

示例:
alert( '22' == 22 ); // true
alert( '22' === 22 ); // false
alert( null == undefined ); // true
alert( null === undefined ); // false
alert( 0 == null ); // false, 注: null, undefined 这两者与其它的比较都为false
alert( 1 == true ); // true
alert( 1 === true ); // false
alert( 0 == '' ); // true
alert( 0 === '' ); // false
alert( ' \t\r\n ' == 0 ); // true, 注: 空格、跳格、换行, 都会转成 0 来处理
alert( [10] == 10 ); // true,注: 对象与基本类型比较时,会先把对象转成基本类型。
alert( [10] == '10' ); // true
alert( /\d/ > 0 || /\d/ <= 0 ); // false, 无法转换正则为数字
alert( {} > 0 || {} <= 0 ); // false, 无法转换Object为数字
alert( NaN == NaN ); // false, NaN 与所有值都不相等,包括它自己。
alert( NaN > 0 || NaN <= 0 ); // false, NaN的比较都为false
alert( NaN > NaN || NaN <= NaN ); // false

2) 比较法则(仅忽略类型的比较,不是严格比较,比较运算符有: >, >=, <, <=, ==, !=):
对于基本类型 Boolean, Number, String 三者之间做比较时,总是向 Number进行类型转换,然后再比较(String 类型的如果没法转成数字,则转成 NaN);
如果有Object,那么将Object转化成这三者,再进行比较(可以转成数字的,优先转成数字,像Date就转成数字);
对于 null 和 undefined, 只有两个都是它们时才相同,其他都为false。
比较对象、数组和函数时,进行引用比较,只有引用的是相同地址才认为相同,否则即使拥有相同的属性和函数都认为不相同。
如果不能转成数值,或者是NaN,则比较结果为false

三、 JS的内置对象

11种内置对象:Array, Boolean, Date, Math, Number , String
Error, Function, Global , Object, RegExp
在JavaScript中除了null和undefined以外其它的数据类型都被定义成了对象
可以用创建对象的方法定义变量; String、Math、Array、Date、RegExp是JavaScript中常用的对象
内置对象的分类:
数据对象: Number数据对象; String字符串对象; Boolean布尔值对象
组合对象: Array数组对象; Math数学对象; Date日期对象
高级对象: Object自定义对象;Error错误对象;Function函数对象; RegExp正则表达式对象;Global全局对象
自动创建对象:调用字符串的对象属性或方法时自动创建对象,用完就丢弃。 如: var str1=”hello world”;
手工创建对象:采用new创建字符串对象str1,全局有效。 如:var str1= new String(“hello word”);

1. String 字符串对象:

格式编排:anchor()锚、blink()闪烁、fixed()固定、bold()粗体、italics()斜体、strike()删除线
big()字变大、small()字变小、sub()下标、sup()上标;
fontcolor(color)字体颜色、fontsize(size)字体大小、link(url)超链接
大小写转换: toLowerCase()返回小写字符串、toUpperCase()返回大写字符串
获取指定字符:charAt(index)返回指定位置字符、charCodeAt(index)返回指定位置字符Unicode编码
用法:str1.bold();//字体变粗;相当于“<b>str1</b>“ str1.anchor(); //把str1标识为锚
子字符串处理:
截取:str1.substr(start,length); //返回从索引位置start开始长为length的子字符串
str1.substring(start,end); //返回start开始end结束的子字符串,不包括最后的一个
str1.slice(start,end); //同substring,但允许使用负数表示从后计算位置,不包括最后的一个
替换:str1.replace(findstr,tostr); //返回替换finstr为tostr之后的字符串
分割:str1.split(bystr); //返回由bystr分割成的字符串数组(通常bystr是连接符号,如逗号或横杆)
连接:str1.concat(string2); //返回 str1 与 string2 连接后的字符串
查询字符串: indexOf(findstr,index)返回正向的索引位置、lastIndexOf(findstr)返回反向的索引位置
match(regexp)返回匹配的字符串、search(regexp)返回找到字符串的首字符索引
用法:
str1.indexOf(findstr,index);//查找字符串findstr;从index位置开始的索引,省略index则从0开始找;类似下一句
str1.lastIndexOf(findstr); //从后面找起;返回findstr在str1中出现的首字符位置下标,没有找到返回-1
str1.match(regexp); //regexp代表正则表达式或字符串;返回匹配字符串的数组,如果没有匹配则返回null
str1.search(regexp); //返回匹配字符串的首字符位置下标;作用同indexOf方法,但可写正则表达式
str1.length; //获取字符串长度;汉字、字母长度均为1;返回大于或等于0的整数

2. Array 数组对象:

1) 创建数组:
var a = new Array(); a[0] = “元素1”; a[1] = “元素2”;
var a = new Array(){“元素1”, “元素2”};
var a = new Array(“元素1”,”元素2”); //一维数组,效果同上
var a = new Array(); a[0] = new Array(); //二维数组
简略的数组创建方法:
var a = [‘元素1’, ‘元素2’]; // 效果等同于: var a = new Array(“元素1”,”元素2”);
2) 删除数组: delete 数组名;
3) 数组操作:
arr.length; //获取数组元素的个数;返回大于或等于0的整数
连接数组: (原数组不变)
arr.join(bystr); //把数组的各元素由bystr连接起来作为字符串;与字符串的split功能刚好相反
arr.toString(); //返回由逗号(,)连接数组元素组成的字符串
document.write(v.toString());document.write(v); //这两句效果一样
arr2 = arr.concat(元素, …); //把元素添加到数组尾端后,返回另一数组;在参数里填入另一数组,返回合并数组
数组排序: (返回排序后的数组;改变原数组)
arr.reverse(); //按原顺序倒着排序
arr.sort(); //按字典顺序排序
获取子数组: (返回被删/被截取的元素数组)
arr.slice(start,end); //从start下标开始,截取到end;返回被截取的元素数组;不改变原数组
//start和end可用负数表倒数(-1代表最后一个元素);end<start时不截取;忽略end,截取start后的所有元素
arr.splice(start,n,value, …); //从start下标开始删除n个,再插入value(可理解为替换);改变原数组
//start为负数时表倒数;n<1表不删除;可忽略value(不插入);可忽略n,表删除后面所有;返回被删元素数组
4) 栈:(数组的基础; 改变原数组)
arr.pop(); //删最后的一个元素;返回删除的元素
arr.push(元素, …); //添加元素到最后位置;返回数组长度; 等价于: arr[length] = newValue;
arr.unshift(元素, …); //添加元素到最前位置(多个参数,则按参数顺序同时插入);返回数组长度
arr.shift(); //删最前的一个元素;返回被删除的元素
5) toString 和 valueOf
把每一项都调用 toString 方法,然后用半角逗号(,)连接每一项。
如: var arr = [1,2,3,4,5]; alert(arr); //output:1,2,3,4,5
toLocaleString 方法在这里不做详细说明了,他的效果与 toString 方法类似,只是每项调用 toLocateString 方法。

4. Math 数学对象:

都是数学常数:(可直接用)
Math.E (自然数) Math.LN2 (ln2) Math.LN10 (ln10) Math.LOG2E (log 2e)
Math.LOG10E (log e) Math.PI (圆周率) Math.SQRT1_2 (根号1/2) Math.SQRT2 (根号2)
三角函数:
Math.sin(x) 计算正弦值; (x在02π之间,返回值-11)
Math.cos(x) 计算余弦值; (x在02π之间,返回值-11)
Math.tan(x) 计算正切值; (x在02π之间,返回正切值)
反三角函数:
Math.asin(x) 计算反正弦值;(x在 -1与1之间,返回0
2π)
Math.acos(x) 计算反余弦值;(x在 -1与1之间,返回02π)
Math.atan(x) 计算反正切值;(x可以为任意值,返回 -π/2 ~π/2)
Math.atan2(y,x) 计算从X轴到一个点的角度;(y,x分别为点的纵坐标和横坐标,返回-π ~π)
计算函数:
Math.sqrt(x) 计算平方根
Math.pow(x,y) 计算x^y
Math.exp(x) 计算e的指数 e^x
Math.log(x) 计算自然对数 (x为大于0的整数)
数值比较函数:
Math.abs(x) 计算绝对值
Math.max(x,y,…) 返回参数中最大的一个
Math.min(x,y,…) 返回参数中最小的一个
* Math.random() 返回0
1之间的一个随机数 //若要整数时,如0~99的随机数: n=parseInt(Math.random()100);
Math.round(x) 返回舍入为最接近的整数(四舍五入,负数时五舍六入)
`
Math.floor(x)` 返回下舍入整数 (结果不大于x;正数时直接舍去小数,负数时 -1.1==-2 )
Math.ceil(x) 返回上舍入整数 (结果大于等于x)

5. Date 时间对象:

创建日期对象:
a.不指定参数时: var nowd1=new Date();document.write(nowd1.toLocaleString( ));
//显示当前时间,如:2008年11月24日 星期一 19时23分21秒
//不用”toLocaleString()”则显示: Mon Nov 24 2008 19:23:21 GMT+0800 (CST)
b.参数为日期字符串: var nowd2=new Date(“2008/3/20 11:12”);alert(nowd2.toLocaleString());
//显示: 2008年03月20日 星期六 11时12分00秒
var nowd3=new Date(“08/03/20 11:12”);alert(nowd3.toLocaleString( ));
//显示: 1920年08月03日 星期六 11时12分00秒 //按 月、日、年 的顺序
c.参数为毫秒数: var nowd3=new Date(5000); alert(nowd3.toLocaleString( ));
//显示: 1970年01月01日 星期四 08时00分05秒 //显示本国的时间
alert(nowd3.toUTCString()); //显示西方的时间: Thu, 01 Jan 1970 00:00:05 GMT
d.参数为年月日小时分钟秒毫秒: var nowd4=new Date(2008,10,24,11,12,0,300);
alert(nowd4.toLocaleString( )); //毫秒并不直接显示;月份参数从011,所以这里10对应11月份
//显示: 2008年11月24日 星期一 11时12分00秒
获取和设置日期、时间的方法:
getDate() setDate(day_of_month) 日期 (1
31)
getDay() 星期 (17; 没set方法)
getMonth() setMonth (month) 月份 (0
11; 别忘加1)
getFullYear() setFullYear (year) 完整年份(-271820275760)
getYear() setYear(year) 年 (范围同上; 1900年计算为0)
getHours() setHours (hour) 小时 (0
23)
getMinutes() setMinutes (minute) 分钟 (059)
getSeconds() setSeconds (second) 秒 (0
59)
getMilliseconds() setMillliseconds (ms) 毫秒(0-999)
getTime() setTime (allms) 累计毫秒数(从1970/1/1 00:00:00开始)
注意:set方法对任意整数有效,影响上一级的数;如setDate(-1)设为上个月30号。 但对小数没效。
日期和时间的转换:
getTimezoneOffset() 返回本地时间与GMT的时间差,以分钟为单位(中国为-480;差8小时)
toUTCString() 返回国际标准时间字符串(默认)
toLocalString() 返回本地格式时间字符串
Date.parse(x) 返回累计毫秒数(从1970/1/1 00:00:00到x的本地时间,忽略秒以下的数字)
Date.UTC(x) 返回累计毫秒数(从1970/1/1 00:00:00到x的UTC时间) 不明UTC是什么

四、 自定义对象

1. 基本语法:

使用 function 指令定义。其属性用“this.属性名”定义。

如: function ObjectName(yName,yAge) {
this.name = yName;
this.age = yAge;
}
调用时:
var myObject = new ObjectName("kk",80); // ObjectName 里面的函数会被执行
document.write("name = " + myObject.name + "<br> age = " + myObject.age);

2. 使用简略语句快速创建对象

1) 类

正常写法:
var car = new Object();
car.color = "red";
car.wheels = 4;
car.hubcaps = "spinning";
简略写法:
var car = {
color: "red",
wheels:4,
hubcaps:"spinning"
}

对象 car 就此创建,不过需要特别注意,结束花括号前一定不要加 “;” 否则在 IE 会遇到很大麻烦。

2) 数组
正常数组是这样写的: var movies = new Array('Transformers','Transformers2','Avatar','Indiana Jones 4');
更简洁的写法是: var movies = ['Transformers', 'Transformers2', 'Avatar', 'Indiana Jones 4'];

3)关联数组
这样一个特别的东西。 你会发现很多代码是这样定义对象的:

var car = new Array();
car['colour'] = 'red';
car['wheels'] = 4;
car['hubcaps'] = 'spinning';
//遍历的时候
for ( var key in car ) { alert(key + " : " + car[key]); }

3.匿名函数

var myFun = function(args1, args2){ alert('haha'); }

变量 myFun 指向一个匿名函数,这相当于创建函数 function myFun(args1, args2){ alert(‘haha’); }
由于 javascript 没有类型,所以变量可以指向任意类型,也可以指向一个函数,对它来说都只是一片内存空间而已
匿名函数一般用在只有一次使用的情况下,也是可以传递参数的
如: element.onclick = function(){ alert(0); }

4.JavaScript原生函数

//要找一组数字中的最大数,如下,可以用一个循环
var numbers = [3,342,23,22,124];
var max = 0;
for(var i=0;i<numbers.length;i++){ if(numbers[i] > max){max = numbers[i];} }
alert(max);
//也可以用排序实现同样的功能:
var numbers = [3,342,23,22,124];
numbers.sort(function(a,b){return b - a});
alert(numbers[0]);
//而最简洁的写法是:
Math.max(12,123,3,2,433,4); // returns 433
//你甚至可以使用Math.max来检测浏览器支持哪个属性:
var scrollTop = Math.max( document.documentElement.scrollTop, document.body.scrollTop );

5.如果你想给一个元素增加class样式,可能原始的写法是这样的:

function addclass(elm,newclass) {
var c = elm.className;
elm.className = (c === '') ? newclass : c+' '+newclass;
}
//而更优雅的写法是:
function addclass(elm,newclass){
var classes = elm.className.split(' ');
classes.push(newclass);
elm.className = classes.join(' ');
}

6.对象的继承,一般的做法是复制所有属性,但还有种方法,就是: Function.apply
函数的 apply 方法能劫持另外一个对象的方法,继承另外一个对象的属性
Function.apply(obj,args) 方法接收两个参数
obj:这个对象将代替Function类里this对象
args:这个是数组,它将作为参数传给Function(args–>arguments)

示范如:

function Person(name,age){ // 定义一个类,人类
this.name=name; //名字
this.age=age; //年龄
this.sayhello=function(){alert("hello " + this.name);};
}
function Print(){ // 显示类的属性
this.show=function(){
var msg=[];
for(var key in this){
if(typeof(this[key])!="function"){
msg.push([key,":",this[key]].join(""));
}
}
alert(msg.join(" "));
};
}
function Student(name,age,grade,school){ //学生类
Person.apply(this,arguments); // this 继承 Person,具备了它的所有方法和属性
Print.apply(this,arguments); // this 继承 Print,具备了它的所有方法和属性
this.grade=grade; //年级
this.school=school; //学校
}
var p1=new Person("jake",10);
p1.sayhello();
var s1=new Student("tom",13,6,"清华小学");
s1.show();
s1.sayhello();

JavaScript技术

一、 使用DHtml

DHTML
定义:使用JavaScript和CSS级联样式表操作HTML创造出各种动态视觉效果统称为DHTML
DHTML = CSS + Html + JS
是一种浏览器端的动态网页技术
DHTML对象模型(DOM)
将HTML标记、属性和CSS样式都对象化
可以动态存取HTML文档中的所有元素
可以使用属性name或id来存取或标记对象
改变元素内容或样式后浏览器中显示效果即时更新
DHTML对象模型包括浏览器对象模型和Document对象模型

Window对象的常用属性:

* document 对象,代表窗口中显示的HTML文档
frames 窗口中框架对象的数组
* history 对象,代表浏览过窗口的历史记录
* location 对象,代表窗口文件地址,修改属性可以调入新的网页
* status (defaultStatus)窗口的状态栏信息
closed 窗口是否关闭,关闭时该值为true
* name 窗口名称,用于标识该窗口对象
opener 对象,是指打开当前窗口的window对象,如果当前窗口被用户打开,则它的值为null
parent 对象,当前窗口是框架页时指的是包含该框架页的上一级框架窗口
top 对象,当前窗口是框架页时指的是包含该框架页的最外部的框架窗口
self 对象,指当前Window对象
window 对象,指当前Window对象,同self

Window对象的常用方法:

(使用这些方法时,通常不加window也没区别;但在特定情况下必须加,如在内嵌页面用open();)

* alert(sMsg); 弹出简单对话框
confirm(sMsg); 选择对话框
prompt(sMsg, sInit); 弹出输入对话框
* close(); 关闭窗口
open(sURL, sName, sFeatures, bReplace); 打开窗口
print(); 打印窗口中网页的内容
focus(); 设置焦点并执行 onfocus 事件的代码。
blur(); 失去焦点并触发 onblur 事件。
moveBy(iX, iY); 将窗口的位置移动指定 x 和 y 偏移值。
moveTo(iX, iY); 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
resizeBy(iX, iY); 更改窗口的当前位置缩放指定的 x 和 y 偏移量。
resizeTo(iWidth, iHeight); 将窗口的大小更改为指定的宽度和高度值。
scrollBy(iX, iY); 将窗口滚动 x 和 y 偏移量。
scrollTo(iX, iY); 将窗口滚动到指定的 x 和 y 偏移量。
* setInterval(vCode,iMilliSeconds,sLanguage); 每经过指定毫秒值后执行一段代码。
clearInterval(iIntervalID); 取消 setInterval 方法的事件。
* setTimeout(vCode,iMilliSeconds,sLanguage); 经过指定毫秒值后执行一段代码。(一次性)
clearTimeout(iTimeoutID); 取消 setTimeout 方法设置的超时事件。

window主要功能:

1.窗口的打开和关闭
window.open(url,name,config) 打开新窗口;url:打开的超链接,name:窗口的名称,返回新窗口对象
config为窗口的配置参数:menubar 菜单条、toolbar 工具条、location 地址栏、directories 链接、
status 状态栏、scrollbars 滚动条、resizeable 可调整大小(以上参数值为yes或no,默认yes);
width 窗口宽,以像素为单位;height 窗口高,以像素为单位(参数值为数值)
* window.close() 关闭窗口
2.对话框
简单对话框:
alert(str) 提示框,显示str字符串的内容;按[确定]关闭对话框
confirm(str) 确认对话框,显示str字符串的内容;按[确定]按钮返回true,[取消]返回false
prompt(str,value) 输入对话框,显示str的内容;按[确定]按钮返回输入值,[取消]关闭,返回null
窗口对话框:
showModalDialog(url,arguments,config) IE4或更高版本支持该方法
showModelessDialog(url,arguments,config) IE5或更高版本支持该方法
参数:url 打开链接,arguments 传入参数名,config 窗口配置参数
config 外观配置参数:status、resizable、help 是否显示标题栏中的问号按钮、center 是否在桌面中间
dialogWidth 对话框宽、dialogHeight 对话框高、(上一行参数值为yes或no,这两行参数为多少像素)
dialogTop 对话框左上角的y坐标、dialogLeft 对话框左上角的x坐标
3.状态栏
window.status 状态栏中的字符串信息允许进行设置或读取
4.定时器
tID1=setInterval(exp,time) 周期性执行exp代码;exp 代码块名,time 周期(毫秒),返回启动的定时器
clearInterval(tID1) 停止周期性的定时器
tID2=setTimeout(exp,time) 一次性触发执行代码exp;返回已经启动的定时器
clearTimeout(tID2) 停止一次性触发的定时器
5.内容滚动
window.scroll(x,y) 滚动窗口到指定位置;单位为像素
window.scrollTo(x,y) 同scroll方法
window.scrollBy(ax,ay) 从当前位置开始,向右滚动ax像素,向下滚动ay像素
6.调整窗口大小和位置
window.moveTo(x,y) 移动窗口到指定位置;单位为像素
window.moveBy(ax,ay) 向右移动ax像素,向下移动ay像素,参数为负数表示反方向移动
window.resizeTo(width,height) 调整窗口大小为指定大小
window.resizeBy(ax,ay) 放大或缩小窗口;参数为负数表示缩小
7.Screen对象 // 屏幕信息(属于window的子对象;常用于获取屏幕的分辨率和色彩)
screen.width 屏幕分辨率的宽度,例如1024*768分辨率下宽度为1024
screen.height 类似上面,屏幕分辨率的高度
screen.availWidth 屏幕中可用的宽 //排除 Windows 任务栏
screen.availHeight 屏幕中可用的高 //排除 Windows 任务栏
screen.colorDepth 屏幕的色彩数
8.History对象 // 窗口的访问历史信息(属于window的子对象,常用于返回到已经访问过的页面)
history.length 历史记录数
history.foward() 向下一页
history.back() 返回上一页
history.go(0) 刷新。括号里填”-1”就是返回上一页,填”1”就是下一页;其它数字类推

9.Navigator对象 浏览器和OS(系统)的信息 数组
10.Location对象 浏览器地址栏的信息 如: location.href=”http://www.google.com/";
location.assign(href); 前往新地址,在历史记录中,用 Back 和 Forward 按钮可回到之前的地址
location.replace(href); 替代当前文文件,在历史记录中也回不到之前的地址
location.reload(true); 类似刷新,默认 false
// location 各属性的用途
location.href 整个URl字符串(在浏览器中就是完整的地址栏),如: “http://www.test.com:8080/test/view.htm?id=209&dd=5#cmt1323"
location.protocol 返回scheme(通信协议),如: “http:”, “https:”, “ftp:”, “maito:” 等等(后面带有冒号的)
location.host 主机部分(域名+端口号),端口号是80时不显示,返回值如:”www.test.com:8080", “www.test.com"
location.port 端口部分(字符串类型)。如果采用默认的80端口(即使添加了:80),那么返回值并不是默认的80而是空字符。
location.pathname 路径部分(就是文件地址),如:"/test/view.htm"location.search 查询(参数)部分。如: "?id=209&dd=5"location.hash 锚点,如:

"#cmt1323"
不包含参数的地址: location.protocol + '//' + location.host + location.pathname;

应用例子:窗口最大化

window.moveTo(0,0); window.resizeTo(screen.availWidth,screen.availHeight);
或者: moveTo(0,0); resizeTo(screen.width, screen.height);
//采用screen对象的分辨率属性和resizeTo方法来动态确定窗口最大长度和宽度

二、 Dom 元素

处理 XML 文件的 DOM 元素属性:

<element>.childNodes 返回目前元素所有子元素的数组
<element>.children 返回目前元素所有子元素的数组(这个在IE、火狐上也可以用)
<element>.firstChild 返回目前元素的第一个子元素
<element>.lastChild 返回目前元素的最后一个子元素
<element>.nodeValue 指定表示元素值的读/写属性
<element>.parentNode 返回元素的父节点
<element>.previousSibling 返回紧邻目前元素之前的元素
<element>.nextSibling 返回目前元素的后面的元素
<element>.tagName 返回目前元素的标签名(大写)

沿 XML 文件来回移动的 DOM 元素方法:
document.getElementById(id) 取得有指定唯一ID属性值文件中的元素
document.getElementsByTagName(name) 返回目前元素中有指定标签名的子元素的数组

<element>.hasChildNodes() 返回布尔值,表示元素是否有子元素
<element>.getAttribute(name) 返回元素的属性值,属性由name指定

动态建立内容时所用的 W3C DOM 属性和方法:
document.createElement(tagName) 建立由tagName指定的元素。比如以”div”作为参数,则生成一个div元素。
document.createTextNode(text) 建立一个包含静态文字的节点。

<element>.appendChild(childNode) 将指定节点增加到目前元素的子节点中。例如:select中增加option子节点
<element>.getAttribute(name) 取得元素中的name属性的值
<element>.setAttribute(name,value) 设定元素中的name属性的值
<element>.insertBefore(Node1,Node2) 将节点Node1作为目前元素的子节点插到Node2元素前面。
<element>.removeAttribute(name) 从元素中删除属性name
<element>.removeChild(childNode) 从元素中删除子元素childNode
<element>.replaceChild(newN,oldN) 将节点oldN替换为节点newN
<element>.hasChildnodes() 返回布尔值,表示元素是否有子元素

注意:文字实际上是父元素的一个子节点,所以可以使用firstChild属性来存取元素的文字节点。
有了文字节点后,可以参考文字节点的nodeValue属性来得到文字。
读取XML时,须考虑它的空格和换行符也作为子节点。

处理 HTML DOM 元素中3个常用的属性: nodeName、 nodeValue 以及 nodeType
nodeName 属性(只读)含有某个节点的名称:
元素节点的 nodeName 是标签名称(永远是大写的)
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document

nodeValue / data
对于文本节点,nodeValue 属性包含文本。可增删改
对于属性节点,nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。会返回 null
data同样是文本的内容,这个属性下同样可以增删改。对于文档节点和元素节点不可用,返回 undefine

nodeType 属性返回节点的类型。节点类型是:
元素类型 节点类型

ELEMENT_NODE : 1 // 元素
ATTRIBUTE_NODE : 2 // 属性
TEXT_NODE : 3 // 文本
CDATA_SECTION_NODE : 4
ENTITY_REFERENCE_NODE : 5
ENTITY_NODE : 6
PROCESSING_INSTRUCTION_NODE : 7
COMMENT_NODE : 8 // 注释
DOCUMENT_NODE : 9 // 文档,即 document
DOCUMENT_TYPE_NODE : 10
DOCUMENT_FRAGMENT_NODE : 11
NOTATION_NODE : 12

注: 对于属性节点,可使用 “attr.nodeName”和“attr.nodeValue”来查看或者赋值, 也可以使用“attr.name”和“attr.value”。
只是, attr.nodeValue 会返回真实类型,如 bool,number,string,object 等; 而 attr.value 全是 string 类型(null 则返回”null”)

判断是否 dom 元素,一些特殊节点只有nodeName,没有tagName,比如document的nodeName为“#document”,tagName为空值。

三、跨浏览器

1.浏览器判断:

//如果是火狐等浏览器则为“true”
var isNav = (navigator.appName.indexOf("Netscape") != -1);
//如果是IE浏览器则为“true”
var isIE = (navigator.appName.indexOf("Microsoft") != -1); // navigator.appName == "Microsoft Internet Explorer"
var isIE = (navigator.appVersion.indexOf("MSIE") != -1);
//判断IE6
var isIE6 = (navigator.userAgent && navigator.userAgent.split(";")[1].toLowerCase().indexOf("msie 6.0")!="-1");
//如果是Opera浏览器则为“true”
var isOpera = (navigator.userAgent.indexOf("Opera") != -1);
//浏览器运行的平台,是 windows 则返回 true
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1);

2.event 事件
在 IE4+ 和 Firefox下的 event
function doEventThing(event)
{
//获取不同浏览器的 event
event = event || window.event; // window.event for IE; 参数event for firefox
//获取不同浏览器的键盘输入记录
var currentKey = event.keyCode || event.charCode; // keyCode 目前兼容了
//获取不同浏览器的事件源
var eventSource = event.target || event.srcElement; // srcElement for IE; target for firefox
var target = event.relatedTarget || event.toElement; // 将会去到的元素,像 onmouseout 会触发
//屏蔽Form提交事件
//if ( event.returnValue ) event.returnValue = false; // for IE
//if ( event.preventDefault ) event.preventDefault(); // for firefox
( e.preventDefault ) ? (e.preventDefault()) : (e.returnValue = false);
//添加事件
if ( event.attachEvent ) {
event.attachEvent('onclick', func ); // for IE; 需要加上“on”,如 onmouseover
} else if ( event.addEventListener ) {
event.addEventListener('clcik', func, false); // for firefox; 不需要加上“on”,直接写“click”
}
//改变事件; 但上面的绑定事件方法并不改变原有的onclick事件,而是添加事件
event.onclick = func;
}
//Firefox 下必须手动输入参数,调用时如: <input type="button" onclick="doEventThing(event);"/>
  1. firefox 的 click() 事件,由于 firefox 不支持 click() 事件,代替方式:
// 获取需要触发 onclick() 的元素
var element = document.getElementsByTagName('a')[0];
// For IE
if ( document.all ) {
element.click();
// FOR DOM2
} else if ( document.createEvent ) {
var ev = document.createEvent('MouseEvents'); //'MouseEvents' 改成 'HTMLEvents' 的话,firfox2不通过
ev.initEvent('click', false, true);
element.dispatchEvent(ev);
}

4. 跨浏览器技巧:

1) IE不能用setAttribute设定class属性。

解决方法1: 同时使用 setAttribute("class","newClassName") 和 setAttribute("className","newClassName")
解决方法2: <element>.className = "newClassName"
2) IE中不能使用setAttribute设定style属性。即 <element>.setAttribute("style","fontweight:bold;") 不相容。
解决方法:使用 <element>.style.cssText = "fontweight:bold;"
3) 使用appendChild将<tr>元素直接增加到<table>中,则在IE中这一行并不出现,但其它浏览器却会出现。
解决方法:在<table>下增加<tbody>元素,再添加<tr>
4) IE不能直接添加按钮处理事件。如:addButton.setAttribute("onclick","addEmployee('unid');");不适用。
解决方法:addButton.onclick = function() { addEmployee('unid'); };//用匿名函数调用addEmployee()函数。
此外,onmouseover,onmouseout 等事件也要使用此方法。
5) firefox 不支持 document.all
解决方法: 用 document.getElementsByTagName("*") 替代,可以得到得到所有元素的集合
6) 设置元素的id
同时使用 .id 和 setAttribute 来设置
var div = document.createElement('div');
div.id="btc";
div.setAttribute("id","btc");

5.Firefox注册innerText写法

if ( (navigator.appName.indexOf("Netscape") != -1) )
{
//注册 Getter
HTMLElement.prototype.__defineGetter__("innerText", function(){
var anyString = "";
var childS = this.childNodes;
for ( var i=0; i < childS.length; i++ ) {
if ( childS[i].nodeType == 1 )
anyString += childS[i].tagName == "BR" ? '\n' : childS[i].innerText;
else if(childS[i].nodeType == 3 ) {
anyString += childS[i].nodeValue;
}
}
return anyString;
});

//注册 Setter
HTMLElement.prototype.__defineSetter__("innerText",
function ( sText ) { this.textContent = sText; }
);
}
//在非IE浏览器中使用 textContent 代替 innerText

6.长度:FireFox长度必须加“px”,IE无所谓

解决方法:统一使用 obj.style.height = imgObj.height + “px”;

7.父控件下的子控件:IE是“children”,FireFox是“childNodes”

8.XmlHttp

在IE中,XmlHttp.send(content)方法的content可以为空,而firefox则不能为空,应该用send(“ “),否则会出现411错误

9.event.x 与 event.y 问题

问题: 在IE中,event 对象有x,y属性,FF中没有
解决方法:
在FF中,与 event.x 等效的是 event.pageX ,但event.pageX IE中没有
故采用 event.clientX 代替 event.x ,在IE中也有这个变量
event.clientX 与 event.pageX 有微妙的差别,就是滚动条
要完全一样,可以这样:
mX = event.x ? event.x : event.pageX;

10.禁止选取网页内容

问题:FF需要用CSS禁止,IE用JS禁止
解决方法:
IE: obj.onselectstart = function() {return false;}
FF: -moz-user-select:none;

11.各种浏览器的特征及其userAgent。

IE

只有IE支持创建ActiveX控件,因此她有一个其他浏览器没有的东西,就是 window.ActiveXObject 函数。
IE各个版本典型的userAgent如下(其中,版本号是MSIE之后的数字):

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2)
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
Mozilla/4.0 (compatible; MSIE 5.0; Windows NT)

Firefox

Firefox中的DOM元素都有一个getBoxObjectFor函数,用来获取该DOM元素的位置和大小(IE对应的中是getBoundingClientRect函数)。这是Firefox独有的,判断它即可知道是当前浏览器是Firefox。
Firefox几个版本的userAgent大致如下(其中,版本号是Firefox之后的数字):

Mozilla/5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1
Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3
Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12

Opera

Opera提供了专门的浏览器标志,就是 window.opera 属性。
Opera典型的userAgent如下(其中,版本号是Opera之后的数字):

Opera/9.27 (Windows NT 5.2; U; zh-cn)
Opera/8.0 (Macintosh; PPC Mac OS X; U; en)
Mozilla/5.0 (Macintosh; PPC Mac OS X; U; en) Opera 8.0

Safari

Safari浏览器中有一个其他浏览器没有的openDatabase函数,可做为判断Safari的标志。
Safari典型的userAgent如下(其版本号是Version之后的数字):

Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13
Mozilla/5.0 (iPhone; U; CPU like Mac OS X) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3

Chrome

Chrome有一个 window.MessageEvent 函数,但Firefox也有。不过,好在Chrome并没有Firefox的getBoxObjectFor函数,根据这个条件还是可以准确判断出Chrome浏览器的。
目前,Chrome的userAgent是(其中,版本号在Chrome之后的数字):

Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

下面是判断浏览器的代码:

var Sys = {};
var ua = navigator.userAgent.toLowerCase();
if (window.ActiveXObject)
Sys.ie = ua.match(/msie ([\d.]+)/i)[1];
else if (document.getBoxObjectFor) // 火狐判断出错
Sys.firefox = ua.match(/firefox\/([\d.]+)/i)[1];
else if (window.opera)
Sys.opera = ua.match(/opera.([\d.]+)/i)[1];
else if (window.MessageEvent)
Sys.chrome = ua.match(/chrome\/([\d.]+)/i)[1];
else if (window.openDatabase)
Sys.safari = ua.match(/version\/([\d.]+)/i)[1];

//以下进行测试
if(Sys.ie) alert('IE: '+Sys.ie);
if(Sys.firefox) alert('Firefox: '+Sys.firefox);
if(Sys.chrome) alert('Chrome: '+Sys.chrome);
if(Sys.opera) alert('Opera: '+Sys.opera);
if(Sys.safari) alert('Safari: '+Sys.safari);

等待也是约会的一部分嘛