Javascript 绝对简明手册(写作中!!!!!!!) -- zsp007@gmail.com

Contents

  1. 序言
  2. 准备
  3. 如何嵌入网页?
    1. 写在网页中
    2. 在链接上使用伪协议
    3. 使用独立的js脚本
  4. 语言核心
    1. 关于分号
    2. 输出Html最简单的方式
    3. alert : 弹出窗口,调试必备
    4. 命名规则
    5. 基本类型
      1. 字符串
      2. 十六进制
      3. 浮点
      4. 特殊常量
      5. 布尔值
      6. 基于对象
        1. 创建
        2. 构造函数
        3. 成员函数
        4. 继承
        5. 公共基类的属性
      7. 数组
        1. 创建
        2. 数组的函数
      8. Date对象
      9. null 和 undefined
    6. 函数
      1. 定义函数
      2. 一个函数,多个函数名
      3. 函数嵌套函数
      4. 函数参数
      5. 函数自身的length
      6. arguments.callee : 递归无名函数
      7. 函数的静态变量
    7. 作用域
    8. 引用
    9. ==(等于)和===(全等)
      1. 等于
      2. 全等 (否定为!==)
    10. +加
    11. 比较大小
    12. in
    13. instanceof
    14. typeof
    15. new
    16. delete
    17. void
    18. []
    19. switch
    20. label(标签)/break/continue
    21. throw / try...catch...finally
    22. 正值表达式
  5. 浏览器中的Javascript概览
    1. window对象
      1. 简单的对话框
      2. 状态栏
      3. 定时器
      4. 错误处理onerror
      5. 浏览器信息navigator
      6. 屏幕screen
      7. 打开窗口open
      8. 移动窗口/改变大小moveTo , moveBy , resizeTo , resizeBy
      9. 焦点控制 focus 和 blur
      10. 文档滚动
      11. 当前地址栏 location
      12. 历史History
      13. 框架
    2. 文档Documents
      1. 基本常识
        1. 属性
        2. 数组
      2. DOM树
        1. 搜索文档的特定元素
        2. 动态改变文档内容
        3. 一个动态改变Document内容的演示
        4. 一个把文章中字母都变为大写的演示
        5. 把指定标签改为粗体
        6. 更改属性
        7. 临时容器DocumentFragment
        8. 选中内容 getSelection
      3. CSS
        1. 当前的CSS设置
        2. 指定样式表
      4. 事件驱动
        1. HTML中事件设置
        2. Javascript中事件设置
        3. 事件列表
        4. 原始事件vs语义事件
        5. 同时执行原有动作和自定义动作
        6. 事件的返回值
        7. this关键字
        8. 2级DOM标准的消息机制
          1. Event事件对象
          2. UIEvent事件对象
        9. MouseEvent事件对象
          1. MutationEvent
        10. IE事件模型
        11. Key Event事件对象
        12. 加载事件 onload Event
        13. 合成事件 Synthetic Events
      5. cookie
  6. JS库:prototype
    1. $()等价getElementById()
    2. $F()返回输入控件的值
    3. $A()参数转Array
    4. $H()转类似联合数组的Hash对象
    5. Try.these()尝试直到一个成功

本文用IE浏览会出现排版错误,请用Firefox浏览

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

版本:0.1 beta

作者:张沈鹏

参考: Ajax基础教程 Javascript权威指南(中文第4版) JavaScript.The.Definitive.Guide.5th.Edition prototype.js开发笔记 http://www.sergiopereira.com/articles/prototype.js.html

另外我写了一个JsEasy-Ajax开源库大家多多关注

1. 序言

现在学的东西很容易忘记,写这篇文章的目的是能让我在需要时快速找回当时的感觉.

入门学习和参考手册建议翻阅JavaScript.The.Definitive.Guide.5th.Edition的附录(有电子版).

2. 准备

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

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

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

3. 如何嵌入网页?

3.1. 写在网页中

3.2. 在链接上使用伪协议

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

3.3. 使用独立的js脚本

4. 语言核心

4.1. 关于分号

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

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

4.2. 输出Html最简单的方式

见例子1_1

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

见例子1_2

4.4. 命名规则

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

4.5. 基本类型

4.5.1. 字符串

使用Unicode字符,如

"test"

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

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

字符串的属性

str="zsp007@gmail.com"

str.length
//字符串的长度

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

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

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

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

4.5.2. 十六进制

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

4.5.3. 浮点

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

4.5.4. 特殊常量

4.5.5. 布尔值

true==1 false==0

4.5.6. 基于对象

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

调用 ox //返回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对象

4.5.6.2. 构造函数

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

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

4.5.6.4. 继承

//定义一个父类
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);

4.5.6.5. 公共基类的属性

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

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

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

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

Object.prototype.toString.apply(x);

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

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

4.5.7. 数组

4.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个未定义的元素

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

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

4.5.9. null 和 undefined

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

可以用===区别null和undefinedes

4.6. 函数

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

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

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

4.6.3. 函数嵌套函数

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

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

4.6.5. 函数自身的length

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