JavaScript学习记录（一）

下决心要学习JavaScript了，用博客来记录一下。会不断更新的。（参考资料：《精通JavaScript+JQuery》曾顺编著，《精通JavaScript动态网页编程》王俊杰编著）

简介：

先说一下我理解的JavaScript是干嘛用的，我们在写网页的时候，最开始用的是HTML，从HTML入手简单易懂，但是缺陷是HTML只是静态网页，要把其变成动态网页，就要用到JavaScript，这中间要用到JavaScript解释器，具体作用情况如下图：

其中DHTML（Dynamic HTML）包含如下3个含义：

1. 通过HTML把网页标记为各个元素；
2. 利用CSS设计元素之间的排版样式，并控制各个标记的位置；
3. 使用JavaScript来控制各个标记。

JavaScript的组成部分如下图：

ECMAScript是一个重要标准，DOM是W3C制定的规范，BOM是浏览器对象模型。

基础：

ECMAScript的基础概念如下：

1. 区分大小写；
2. 弱类型变量。定义变量只使用“var”关键字（所有类型，并可灵活变换）；
3. 每行分号可有可无（但还是都写着吧，规范）；
4. 括号用于代码块。代码块表示一系列按顺序执行的代码，这些代码封装在“{”和“}”中；
5. 注释的方式与C语言和Java相同。

这里再重申一下变量名称的规则：

1. 首字符必须是字母（大小写均可），下划线（_）或者美元符号（$）；
2. 余下的字母可以是下划线，美元符号，任意字母或者数字字符；
3. 变量名不能是关键字或者保留字。

为了代码清晰易懂，利用命名规则进行前缀标记，下图为匈牙利标记法

JavaScript一共有9种数据类型，分别是未定义（Undefined），空（Null），布尔型（Boolean），字符串（String），数值（Number），对象（Object），引用（Reference），列表（List）和完成（Completion）。其中后三种类型仅仅作为JavaScript运行时中间结果的数据类型，不能在代码中使用。

其中选几个要点来说一下：

数值型：

1. 十进制数.（十进制数）（指数），例126.5；
2. 十六进制数，以数字0开始，后面紧跟字母x（不区分大小写），其后是十六进制数，例0x23456ABC；
3. 八进制数，以数字0开头，后面紧跟一个八进制数，例021376
4. 特殊值 Infinity。当一个数值表达式的值超出了可表示的最大（最小）值得范围，将被赋值为（-）Infinity，所有（-）Infinity值都相等，且运算结果仍为Infinity，
5. 特殊值 NaN，含义是 “not a number”。当一个undefined表达式结果为数值型数据时，该数值型数据就是NaN值。

无定义数据类型（undefined）：用来表示不存在的值或尚未赋值的变量。

空值（null）：是一个表示“什么都没有”的占位符。

函数：

定义函数 function：

function 函数名([参数列表]){statements(程序语句)......[return 值;]}

注意：

1. 函数名必须唯一，且区分大小写；
2. 参数可以是常量，变量或表达式；
3. 参数列表中有多个参数时，参数间以逗号“，”隔开；
4. 若函数需要返回值，使用return语句；
5. 定义函数并不会执行组成函数的语句，只有当调用函数时，函数才会执行；
6. 如果函数中省略了return语句后面的表达式，或者函数结束时根本没有return语句，函数就会返回一个undefinded的值。

arguments 数组对象，包含了调用程序传递给函数的所有函数。如果要实现的参数个数允许不确定，或者函数的参数个数很多，又不想为每个参数都定义一个变量，在定义这样的函数时，可以保留函数的参数列表为空，在函数内部使用arguments对象来访问调用程序传递的所有参数。例子如下：

<Script language="javascript"><!--    function testparams()    {        var params="";        for(var i=0;i<arguments.length;i++)        params=params+""+arguments[i];        alert(params);    }    //函数调用与结果输出    testparams("abc",123);    testparams(123,456,"abc");//--></script>

动态函数：

定义指针变量来指向某个函数，以后就用这个指针变量来调用其指向的函数，语法格式：

var  变量名= new  Function（参数列表）；例子如下：

<Script language="javascript"><!--//等号的右边是一个动态创建的函数，注意其变量、语句及返回值的写法var square=new Function("x","y","var sum;sum=x*x+y*y;return sum;"); alert(square(3,2));    //调用该动态函数并显示其结果//--></script>

注意：这里的x，y一定要用双引号或单引号引起来，动态函数的执行代码作为 new Function（...）最后的参数内容出现。

JavaScript的系统函数：

URL编码处理函数

1. encodeURI 方法：返回一个对URI字符串编码后的结果。
2. decodeURI 方法：与encodeURI相反，decodeURI方法将一已编码的URI字符串解码成最原始的字符串并返回。

数值处理函数

1. parseInt 方法：将一个字符串指定的进制转换成一个整数，语法格式：parseInt（numString，[radix]）。
2. parseFloat 方法：将一个字符串转换成对应的小数。
3. isNaN 方法：用于检测 parseInt 和 parseFloat 方法的返回值是否为NaN。

字符串编码处理函数

1. escape 方法：返回对一个字符串编码后的结果字符串。所有空格，标点，重音符号以及任何其他非ASCLL码字符都用%xx编码替换（xx等于十六进制Unicode编码）。
2. unescape 方法：将一个用escape方法编码的结果字符串编码成原始字符串并返回。
3. eval 方法：将某个参数字符串作为一个JavaScript表达式执行。

对象：

对象是一种非常重要的数据类型，是自我包含的数据集合。对象包含属性（property）和方法（method）。

对象使用运算符 new 来创建，在 new 之后必须有用于初始化对象的构造函数名。

两种创建对象的方法：

1.用构造函数创建对象function Student(name,age,grade){this.name=name;this.age=age;this.grade=grade;}

2.直接创建对象<script language="javascript"><!--    var book = new Object();//创建一个对象，并保存在一个变量中    book.title = "Book1";//设置该对象的一个属性    //设置更多的属性，注意其层次关系    book.chapter1 = new Object();    book.chapter1.title ="第一章";    book.chapter1.pages = 25;    book.chapter2 = {title:"第二章",pages:30};    //调用该对象的某些属性    alert("输出结果："+"\n\t\n\t"+book.title+"\n\t"+"Chapter 1: "                      +book.chapter1.title+"\n\t"+"chapter 2: "+ book.chapter2.title);//--></script>

可以使用 delete 语句来删除一个对象的属性，如：delete book.chapter2; 删除该对象。

方法是通过对象调用的JavaScript函数。可以将函数赋给任何变量，甚至赋给一个对象的任何属性。在方法的主体内部，关键字this的值会变成调用该方法的对象。

JavaScript面向对象，因此也可继承，也有实例方法，类变量，类方法这些概念。

一个对象可以创建多个对象实例，在使用时，各个对象实例之间没有任何关系，为一个对象实例新增加的属性和方法，不会增加到同一个对象所产生的其他对象实例上，修改一个对象 的实例的属性值，也不会影响其他对象实例的同名属性。this 关键字一般只在用作对象成员方法的函数中出现，代表某个成员方法执行时，引用该方法的当前对象实例。在对象的构造函数中使用 “this.成员名”的形式，可以为该对象的每个对象实例都增加新成员。

数组：

用构造函数Array（）和运算符new来创建，三种调用方法：

var a=new Array();var a=new Array(5,4,3,2,1,"test,test");var a=new Array(10);

数组都有length属性。Array对象的常用方法：

1. join 方法：将一个数组的所有元素转换成字符串，并把这些字符串连接起来。
2. reverse 方法：在已有的数组中对数组元素进行重排，用来颠倒数组元素的顺序。
3. sort 方法：用来对数组元素进行排序。
4. Alice 方法：返回的是指定数组的一个子数组。带有两个参数，分别表示要返回的子数组的起止点（负数表示从最后一个元素倒数）。
5. splice 方法：可以把元素从数组中删除，也可以向数组中插入新元素。

作为关联数组的对象，区别 “.” 和 “[]”：

• 当采用 “.” 运算符存取对象属性时，属性名是用标识符表示的，而标识符必须被逐字输入。标识符不是一种数据类型，程序不能对其进行操作；
• 当用 “[]” 存取对象属性时，属性名是用字符串表示的，而字符串是JavaScript的一种数据类型，可以在程序运行过程中常见并进行操作。

JavaScript内部对象：

Object对象，String对象，Date对象，Math对象，number对象。。。

专门用于对象的语句

with语句：

语法格式：with（对象名称）{ 程序语句块 }

<script language="javascript"><!--    var curr_time = new Date();    with(curr_time)    {        //定义变量，并为其赋值为当前年份，后加中文“年”字标识        var strDate = getYear()+1900+"年";          //取当前月份。注意月份从0开始，所以需加1，后加中文“月”字标识        strDate +=getMonth()+1+"月";        strDate +=getDate()+"日"; //取当前日期，后加中文“日”字标识        strDate +=getHours()+":"; //取当前小时        strDate +=getMinutes()+":"; //取当前分钟        strDate +=getSeconds(); //取当前秒数        alert(strDate);  //结果输出    }//--></script>

for...in 语句：

语法结构：for （变量in对象）{ 程序语句 }

<script language="javascript"><!--    function Student()    {        this.name = "张华";        this.age = "19";        this.height = "172";    }    var attr = new Student();    var prop,stru ="";    for(prop in attr)    {        stru += prop+" ";    }    alert(stru);//--></script>

加以改造，使用 “对象实例名[属性名]” 的形式取出每个属性值：

<script language="javascript"><!--    function Student()    {        this.name = "张华";        this.age = "19";        this.height = "172";    }    var attr = new Student();    var prop,stru ="";    for(prop in attr)    {        stru += attr[prop]+" ";    }    alert(stru);//--></script>