Javascript 绝对简明手册(写作中...........) -- [email protected] TableOfContents

Include(CPUGnav)

Javascript和C++,Java,Python一样是一种博大精深的编程语言.

• --For Ajax

版本:0.1 beta

作者:张沈鹏

参考:Ajax基础教程 Javascript权威指南

[http://blog.csdn.net/zuroc 我的技术Blog] [http://www.cppblog.com/zuroc 我的C++Blog] [http://www.cnweblog.com/zuroc/ 我的文学Blog]

• -- 欢迎指出错误和遗漏,提出建议和意见,请发信到[email protected]

1. 准备

设置服务器*.xml的MIME为text/xml ,Windows Xp自带的IIS的设置如下图 js_0001.png

Firefox上有许多插件是开发必备的，用法大家Google，我列一下名称

• FireBug

• Web Developer Toolbar

• GreaseMonkey 和 XmlHttpRequestDebugging

• Html Validator

另外建议安装一下DreamWaver和EditPlus. EditPlus中可以快速切换IE和Js脚本,快捷键Ctrl+B 强烈建议学习时便学边调试

2. 语言

2.1. 如何嵌入网页?

2.1.1. 写在网页中

• <script language="JavaScript">
  //代码
  </script>

2.1.2. 在链接上使用伪协议

<a href="javascript:void window.open();">Open</a>

2.1.3. 使用独立的js脚本

• <script language="javascript" src="/js/dialog.js" />

2.2. 关于分号

javascript的分号是选加的,如果不加,javacript会在换行处自动加上分号.

但是,建议你不要省略分号,理由如下

• 加了分号的代码可以用软件压缩,来节省带宽(附带效果是加密你的Js代码:) )(Ajax基础教程 上的理由)
• 良好的编程习惯(Javascript权威指南 上的理由)

2.3. 输出Html最简单的方式

见例子1_1

• doucment.write("Hello World");

2.4. alert : 弹出窗口,调试必备

见例子1_2

• alert("弹出窗口,调试必备");

2.5. 命名规则

区分大小写,开头必须是字母或 $ 或 _

2.6. 基本类型

2.6.1. 字符串

使用Unicode字符,如

"test"

'name="zsp"' //双引号可以放在单引号中,反之亦然

'You\'re right' //转义字符,和C++的转义相同

字符串的属性

str="[email protected]"

str.length
//字符串的长度

str.charAt(str.length-1)
//字符串的最后一个字符(注意,第一个字符的索引是0,和C++数组类似)

str.indexOf("@")
//第一个 @ 字符的位置

str.substring(str.lastIndexOf(".")+1,str.length);
//提取后缀"com",提取规则是左开右闭(就是包括左边参数所代表的元素,而不包括右边的)

str.toUpperCase();
//返回大写形式

2.6.2. 十六进制

0xff //15*16+15=255 , 0x为十六进制前缀

2.6.3. 浮点

-3.14 6.02E-23 //6.02 X 10-23(10的负23次方)

2.6.4. 特殊常量

• Infinity 无穷大
• Number.POSITIVE_INFINITY 正无穷大
• Number.NEGATIVE_INFINITY 负无穷大
• NaN 或 Number.NaN 非法的值
• Number.MAX_VALUE 可表示的最大值
• Number.MIN_VALUE 可表示的最接近0的值

2.6.5. 布尔值

true==1 false==0

2.6.6. 基于对象

2.6.6.1. 创建

方式1:

var o = new Object();
o.x=2.3;
o.y=-1.2;

方式2:

var o={x:2.3 , y:-1.2};

调用 o["x"] //返回2.3

一个复杂点的例子 见例子1_3

var point={x:2.3,y:-1.2};
var side=4;
var square={
        upperLeft : {x:point.x , y:point.y},
        lowerRight : {x:(point.x + side) , y:(point.y+side)}
};

alert(square["upperLeft"]["x"]);//显示2.3

备注:内建类型字串不是Object(),即用typeof得到的是"string",和"object"不等价,但在任何需要的地方他会自动转化为一个String对象

2.6.6.2. 构造函数

function Rectangle(w,h)//构造函数.不要返回值,因为返回值会使this失效
{
        this.width=w;
        this.height=h;
}
var rect1=new Rectangle(2,4);//创建对象

2.6.6.3. 成员函数

function Rectangle_area(){return this.width * this.height;}//声明函数

function Rectangle(w,h)
{
this.width=w;this.height=h;

this.area = Rectangle_area;//关联函数为成员函数
}

var r=new Rectangle(3,2);
r.area();//返回6

2.6.6.4. 继承

• Javascript的类都自动继承了原型对象 Object.prototype
• 继承的属性为只读的,既子类不可以给继承的属性赋值
• 子类的同名属性/函数将覆盖父类的同名属性/函数
• String和Date等内部类也有原型对象

//定义一个父类
function Complex(real , imaginary){
        this.x=real;
        this.y=imaginary;
}

//为父类添加一个方法,通过定义父类原型prototype的函数
//该方法同时覆盖了Object.prototype中的同名函数
Complex.prototype.toString=function(){
        return this.x+"+"+this.y+"j";
}

//定义一个Complex函数,该函数不会被继承(这时不要加this了)
Complex.magnitude=function()
{
        return Math.sqrt(x*x+y*y);      
}

//定义一个子类
function MoreComplex(real , imaginary){
        this.x=real;
        this.y=imaginary;
}

//继承父类,注意这时MoreComplex的构造函数被父类的构造函数覆盖
MoreComplex.prototype=new Complex(0,0);

//明确指定,使MoreComplex使用自己的构造函数
MoreComplex.prototype.constructor=MoreComplex;

//定义子类自己的函数
MoreComplex.prototype.swap=function(){
        var tmp=this.x;
        this.x=this.y;
        this.y=tmp;
}

a=new MoreComplex(11,33);

alert(a);//自动调用Complex.toString()
a.swap();
alert(a);
}}

==== 公共基类的属性 ====
Object.prototype是所有类的公共基类
 * constructor属性                构造器,由于构造函数确定了一个对象的类型,可以用如下代码确定一个对象的类型
 {{{
if((typeof o=="object" )&& o.constructor == Date)//...........

但不能保证constructor属性总是存在,类的创建者可以指定一个对象来取代原型的构造器,而指定的对象可以没有 constructor (PS:)

• toString() 返回一个字串,内容为对象的值或类型,自定义的对象默认的toString通常没有什么用,你可以重载它

2.6.7. 数组

创建

方式1

var a = new Array();
a[0]=2;
a[1]="I'm a earthman ."
a[2]=true;
a[3]={x:1 , y:3}

方式2

var a=new Array(2,"I'm a earthman .",true,{x:1 , y:3});
var a2=new Array(10);//注意,这个10是表示a有10个未定义元素!(因为这时候只传给Array一个参数)

方式3

var a=[2,"I'm a earthman .",true,{x:1 , y:3}];
var a2=[[1,2,3],[1,2,3]];//可以嵌套

var base=11;
var a3[base,base+1,base+2];//可以为变量

var a4=[1,,,,5];//有3个未定义的元素

2.6.8. Date对象

var now = new Date();
//默认是当前的时间和日期

var christmas = new Date(2000,11,25);
//月份从0开始计数,所以这是表示2000年12月25日

christmas.toLocaleString();//返回时间的本地表示,如果是中国大陆,这里返回"2000年12月25日 0:00:00 "
//如果不加toLocalString,christmas自动转换为string时会用GMT时间
//GMT时间这里就是"Mon Dec 25 00:00:00 UTC+0800 2000 "

christmas.getDay()
//返回该日期是星期几,比如这里返回1,注意星期天返回的是0

2.6.9. null 和 undefined

• null : 无值,表示它的不是有效的Javascript类型
• undefined : 已经声明但是没有定义的变量的值,对象的一个不存在的属性也是该值

==运算符将两者视为相等,

可以用===区别null和undefinedes

2.7. 函数

2.7.1. 定义函数

方式1:

function square(x){
        return x*x;
}

方式2:

var square = function(x){return x*x;}

方式3://比较笨拙

var square = new Funtion("x","return x*x"); 

2.7.2. 一个函数,多个函数名

var square = function(x){return x*x;}
var b=square;
var c=b(5);//c=25

2.7.3. 函数嵌套函数

function hypotenuse(){
        function square(x){
                return x*x;
        }
        return Math.sqrt(square(a)+square(b));
}

2.7.4. 函数参数

尽管函数定义时参数个数是固定的,但调用时可以传递任意多个参数,这些参数可以通过arguments[]访问,即使是无名的.

arguments.length可以说明它所含的元素个数

注意:arguments不是数组(不可以用for...in循环),它是一个Aguments对象

arguments可以用于参数个数检查,或接受任意数目参数...

function max()
{
var m=Number.NEGATIVE_INFINITY;
for(var i=0;i< arguments.length;i++)
        if(arguments[i]>m)m=arguments[i];
        
return m;
}

2.7.5. 函数自身的length

返回函数声明中的参数的个数,通过arguments.callee.length访问

//一个检查参数是否相符的函数
function check(args){
        var actual=args.length;
        var expected=args.callee.length;
        if(actual!=expected){
                throw new Error("Wrong number of arguments");
        }
}

function f(x,y)
{
        check(arguments);
        return x+y;
}

2.7.6. arguments.callee : 递归无名函数

callee可以引用当前正在执行的函数

function(x)
{
if(x<1)return 1;
return x*arguments.callee(x-1);
}

=== 函数的静态变量 ===
类似在C++函数中声明一个static变量
{{{
uniqueInteger.counter=0;//静态变量
function uniqueInteger(){//每个返回一个不同的数 
        return uniqueInteger.counter++;
}

2.8. 作用域

没有块级作用域,其他类似于Java和C++.

即函数中无论在那里声明的变量,在整个函数体中都是有定义的.如:

(见例1_4)

var i="global";

function test(o){

document.write(i);//i为undefined,即函数中i已被声明,但没定义
var i="local";

if(typeof o == "object")
        {
                var j=0;        //j在整个函数中都有定义,不限于这个循环
                for(var k=0;k<10;k++){//k在整个函数中都有定义,不限于这个循环
                        document.write(k);
                }
                document.write("out loop k=",k);//k仍然有定义,值为10
        }

document.write("out loop j=",j);//仍然有定义,如果o不是object(),则j没有被初始化,值为undefined,否则为9

}

备注:把所有的变量集中在函数开头声明(不一定要定义)可以避免许多诡异的错误.

2.9. 引用

对与 数组 , 对象 , 函数 的拷贝只是拷贝了引用(相当于是个快捷方式),对任何一个副本的改动都会改动所有的副本

var a = [1 , 2 , 3];
var b = a;
a[0] = 99;
alert(b); //为99,2,3

a={x:1}
b=a;
a.x=2;
alert(b.x);//为2

2.10. ＝＝（等于）和＝＝＝（全等）

2.10.1. 等于

等于可以进行类型自动转换,如

"2"==2
true==1

一个对象和字串或数字比较,会尝试valueOf()和toString()转换

null == undinfined

2.10.2. 全等 (否定为!==)

• 如果类型不同,则不相同
• NaN永远不与任何值全等,包括它本身(可以用IsNaN()测试一个值是否是NaN)
• 按字符原有编码进行比较(等于操作在比较前先统一了编码)
• null != undinfined

对于数组,对象,函数等引用类型只有当他们是指向同一个实体时才相等,如

var a = [1,2,3];
var b = [1,2,3];
alert(a==b);//false

2.11. +加

加法是从左到右的 a=1+2+" blind mine" // a="3 blind mine" b="blind mine "+1+2 // a="blind mine 12"

2.12. 比较大小

符号> , < , >= , <=

• 任何和NaN的比较都返回false
• 字串和数字比较,会把字串转换为数字(如果转换不成功,则其值为NaN),再比较
• 如果对象可以被转换为数字和字串,将执行数字转换来比较

2.13. in

in运算符左边是一个字串,右边是一个对象,如果字串是对象的一个属性名则返回true

var point = {x:1};
var has_x = "x" in point ; //true
var has_y = "y" in point; //false
var ts = "toString" in point; //true,继承属性

2.14. instanceof

instanceof运算符要求左边是一个对象的实例,右边是对象名,如果两者相符返回true

var d=new Date();
d instanceof Date;//true
d instanceof Object;//true,所有的对象都是Object的实例
d instanceof Number;//false

2.15. typeof

返回对象的类型

typeof 1; //number
typeof "1";//string
typeof true;//boolean

typeof [1,2];//object
typeof {x:1};//object

typeof function(x){};//function

typeof xxx;//未定义的对象返回undefined

2.16. new

创建一个新的对象

o=new Date;

2.17. delete

删除对象的属性

var o={x:1,y:2};

delete o.x; //返回true
typeof o.x;//返回undefined

delete o.x;//删除不存在的属性,返回true

delete o;//不能删除var声明的对象,返回true

x=1;//不用var关键字,隐式声明一个变量
delete x;//返回true
x;//一个运行时错误,IE6显示为 " 'x'未定义 "

注意:delete只能删除属性值,不能删除引用对象 如

var my = new Object;

my.hire = new Date;
my.fire = my.hire;

delete my.hire;

alert(my.fire);//显示当前的时间

2.18. void

可以出现在任何操作数前,它作用是舍弃运算的结果,返回undefined.

常用于javascript : URL中.可以计算一个计算一个表达式的值,又不让浏览器显示它.如

<a href="javascript:void window.open();">Open</a><!-- 不加void,点击后链接会消失,变为一个"[object]"字串 -->

2.19. []

//用于数组
var a=[21,3];
a[0];//21

//用于对象,比"."运算符的优势是其要取的属性名可以动态生成
var b={x1:1,x2:"zsp"};
b['x1'];//1
b['x'+2];//zsp

for(f in o){
        alert('o.'+f+'='+o[f]);//由于f是动态生成的,所有不能用" . "运算符
}

== if/else/while/do...while/for== 和C++类似

== for...in === 可循环对象的所有用户定义属性,包括继承的(但是不包括内建属性)

var o={x:1,y:2};
var a=[];
var i=0;

for(a[i++] in o);//把o的属性名复制到一个数字中(注意,顺序不固定)

for (i in a)
{
alert(a[i]);//循环一个数组
}

2.20. switch

function convert(x){
        switch(typeof x){
                case 'number':  //case后可以接任意表达式,不限于常量
                        return x.toString(16);//转换为16进制
                case 'string':
                        return '"'+x+'"';
                case 'boolean':
                        return x.toSting().toUpperCase();
                default:
                        return x.toString();
        }
}

2.21. label(标签)/break/continue

break,continue的基本用法和C++中类似,不过他们可以和label配合使用(有的像Java中的label,功能限制版的goto)

outerloop:
        for(var i=0;i!=10;i++)
        {
                for (var j=0;j<10;j++){
                        if(j>3)break;
                        if(i==2)break outerloop;//跳出外层循环
                        alert("j = "+j);
                }
                alert("i = "+i);
        }

2.22. throw / try...catch...finally

throw用来抛出异常,异常对象通常是一个Error对象或其子类型

function factorial(x){
if(x<0)throw new Error("x must not be negative");//x是负数就抛出异常
return x;
}

try...catch...finally捕捉异常

try{
//代码
}
catch(e)
{
//仅当try块抛出异常,才会执行,e为异常实例
//这个块可以处理异常,也可以什么都不做
}
finally{
//无论是否有异常,这个块中的语句都将被执行
}

2.23. 正值表达式

//todo