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. 写在网页中

• <script type="text/javaScript">
  //代码
  </script>

2.2. 在链接上使用伪协议

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

2.3. 使用独立的js脚本

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

3. 语言核心

3.1. 关于分号

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

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

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

3.2. 输出Html最简单的方式

见例子1_1

• doucment.write("Hello World");

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

见例子1_2

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

3.4. 命名规则

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

3.5. 基本类型

3.5.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();
//返回大写形式

3.5.2. 十六进制

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

3.5.3. 浮点

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

3.5.4. 特殊常量

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

3.5.5. 布尔值

true==1 false==0

3.5.6. 基于对象

3.5.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对象

3.5.6.2. 构造函数

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

3.5.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

3.5.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);

3.5.6.5. 公共基类的属性

Object.prototype是所有类的公共基类

• constructor属性 构造器,由于构造函数确定了一个对象的类型,可以用如下代码确定一个对象的类型

  if((typeof o=="object" )&& o.constructor == Date)//...........

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

• toString() 返回一个字串,内容为对象的值或类型. 默认的toString对于对象返回

[object class]
//class为类名,如自定义对象为Object
//类似的还有Array,Function,Date,Math,Error,Window,Document,Form

由于可以重载toString.所以,如果你想明确的调用默认的toString来获得类型信息,你可以这样

Object.prototype.toString.apply(x);

• toLocaleString() Object默认的toLocaleString返回值和toString相等;Array,Date,Number都绑定了自己的toLocaleString
• valueof() Object默认定valueof不执行任何转换,Number和Boolean等有自定义的valueof(). 当你自定义了valueof时需要注意的是:valueOf()优先级比toString()高,所以,你常不得不明确的调用toString()
• hasOwnProperty()

  var o = new Object();
  o.hasOwnProperty("undef"); //false:没有定义该属性
  o.hasOwnProperty("toString"); //false:该属性是继承的
  
  Math.hasOwnProperty("cos");//true:Math有cos属性

* propertylsEnumerable() 一个属性如果可以由for...in循环枚举出来就返回true,否则,返回false

var o = {x:1};
o.propertylsEnumerable("x");//true
o.propertylsEnumerable("y");//false,无该属性
o.propertylsEnumerable("valueOF");//false,该属性不可枚举

• isPrototypeOf() 调用该函数的对象如果是参数的原型,就返回true

   var o=new Object();
   Object.prototype.isPrototypeOf(o);
   //true,o.constructor == Object
  
   Object.isPrototypeOf(o);//false
   o.isPrototypeOf(Object.prototype);//false
  
   Function.prototype.isPrototypeOF(Object);
   //true:Object.constructor == Function

3.5.7. 数组

3.5.7.1. 创建

方式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个未定义的元素

3.5.7.2. 数组的函数

* join() 把所有的元素转换为字串,参数作为分隔符(默认分隔符是 ,)

var a=[1,2,3];
a.join();//1,2,3
a.join(" : ");//1 : 2 : 3

* reverse() 对数组反向排序 * sort() 默认按照UTF-8码的顺序排序,可以传一个参数,如果返回一个小于等于0的数,第1个参数出现在第2个参数前面,反之同理.

 function randOrd(){
return (Math.round(Math.random())-0.5);
}

anyArray = new Array('3','a','5','F','x','47');
anyArray.sort( randOrd );       //把数组乱序排列

* concat() 返回一个数组,包含了原数组和参数

anyArray = new Array(47,33);

anyArray.concat(8,99,88 );
//[47,33,8,99,88]

anyArray.concat([8,99],[88,53] );       
//[47,33,8,99,88,53],会自动把参数中数组拆包一层

anyArray.concat(2,[3,[4,5]]);   
//[47,33,2,3,[4,5]],拆包只拆一层

* slice() 返回一个数组的切片,返回规则如下

var a = [1,2,3,4,5]
a.slice(0,3); //返回a[0]至a[2],即[1,2,3]
a.slice(3);        //返回a[3]至结尾,即[4,5]
a.slice(1,-1);//返回a[1]至最后一个元素[2,3,4]
a.slice(-3,-2);//返回[3]

* splice() 可以删除/添加原数组元素,同时返回删除的值

var a = [1,2,3,4,5,6,7];
a.splice(4);
//删除a[4]至结尾,同时返回删除的值,即a=[1,2,3,4],返回[5,6,7]

var a = [1,2,3,4,5,6,7];
a.splice(3,3,"a","b");
//从a[3]开始,删除3个元素(包括a[3]),同时在从a[3]开始插入"a","b"作为新的元素,返回删除的值
//即a=[1,2,3,"a","b",7],返回[4,5,6]

var a = [1,2,3,4,5,6,7];
a.splice(3,0,["a",2],"k");
//返回[],a=[1,2,3,["a",2],"k",4,5,6,7] ,splice()不会对添加的数组拆包

* push()和pop()

var stack=[];

stack.push(1,2);//stack=[1,2],return 2(2表示数组长度)

stack.pop();//stack=[1],return 2

stack.push(3);//stack=[1,3],return 2(2表示数组长度)

stack.pop();//stack=[1],return 3

stack.push([4,5]);//stack=[1,[4,5]],return 2

stack.pop();//stack=[1],return [4,5]

stack.pop();//stack=[],return 1

* unshift()和shift() 和push()和pop()类似,不过是在数组的头进行操作

var a=[2];
a.unshift(1);
//a=[1,2]
//IE(包括IE7)和标准的规定返回值却不同，Gecko/Opera 中返回值为新数组的长度，而 IE 中没有返回值，也就是返回值是 undefined。因此，编程时不要依赖这个返回值。

a.unshift(3,[4,5]);//a=[3,[4,5],1,2]

a.shift();
//返回3

* toString() toString等价于不加参数的join

3.5.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

3.5.9. null 和 undefined

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

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

可以用===区别null和undefinedes

3.6. 函数

3.6.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"); 

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

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

3.6.3. 函数嵌套函数

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

3.6.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;
}

3.6.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;
}

3.6.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++;
}

3.7. 作用域

没有块级作用域,其他类似于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

}

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

3.8. 引用

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

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

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

3.9.1. 等于

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

"2"==2
true==1

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

null == undinfined

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

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

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

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

3.10. +加

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

3.11. 比较大小

符号> , < , >= , <=

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

3.12. 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,继承属性

3.13. instanceof

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

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

3.14. 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

3.15. new

创建一个新的对象

o=new Date;

3.16. 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);//显示当前的时间

3.17. void

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

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

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

3.18. []

//用于数组
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]);//循环一个数组
}

3.19. 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();
        }
}

3.20. 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);
        }

3.21. 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{
//无论是否有异常,这个块中的语句都将被执行
}

3.22. 正值表达式

//todo

4. 浏览器中的Javascript

window对象代表显示浏览器的窗口,document对象代表文档中窗口.window是全局对象.