Java Web 随笔（1）：简单的JavaScript快速入门

简单的JavaScript快速入门

1.变量

学习语言往往会从变量入手，需要注意三个方面：变量的定义，变量的类型，变量的类型转换，掌握这三方面则一个语言的变量使用就能快速上手。

1.1变量的定义

JavaScript的变量定义有两种方式：

• 在第一次为变量赋值时定义
• 使用关键字var定义

第一种如下：

name = "姓名";       //定义name变量age = 21;           //定义age变量alert(name);        //显示name变量的值alert(age);         //显示age变量的值

第二种如下：

var name = "姓名";       //定义name变量var age = 21;           //定义age变量alert(name);           //显示name变量的值alert(age);            //显示age变量的值var num1 = 123 ,  sStr1 = "abc";  //使用var定义多个变量，用,隔开即可

对比两种定义方式发现定义方式类似，只不过第二种多了显示声明var，这样的好处在于使用一些IDE时在Content Assist时显示当前可用变量时会显示通过var定义的变量，未使用var定义的不会显示在变量列表中，这样不便于追踪查看变量。建议使用第二种方法定义变量。

JavaScript定义变量时变量命名需要遵循以下两个规则：

• 第一个字符必须是字母、下划线（_）或美元符号（$）
• 其他字符可以是下划线、美元符号、热和字母或数字字符

1.2变量的类型

JavaScript有5种原始类型：Undefined、Null、Boolean、Number和String。在JavaScript中可以使用typeof来查看变量的原始类型。如下：

var num1 = 20;          //定义整型变量num1var str1 = "abc";       //定义字符串变量str1alert(typeof num1);     //输出为numberalert(typeof str1);     //输出为string

在使用typeof查看原始类型时，可以返回下面5个值中的一个：

1. undefined：变量是Undefined，即未未声明或未赋值。
2. boolean：变量是Boolean类型。
3. number：变量是数值型，包括整型、浮点型等。
4. string：变量是字符串型。
5. object：变量是引用类型或NULL类型。

1.2.1 Undefined类型

Undefined类型只有一个值，就是undefined，如果一个变量未使用var声明或者未第一次赋值，则其类型为“undefined”，判断是否为Undefined类型需要注意，如果直接用变量名判断，则对等为undefined：

var name;                   //定义name变量if(name == undefined)    alert("name未初始化");    //弹出未初始化

如果使用typeof判断，则对等未”undefined”，这是因为typeof返回值为字符串，需要使用undefined的字符串形式：

alert(typeof abc);           //abc未定义，则弹出undefinedif(typeof abc == "undefined")    alert("abc未定义");       //弹出abc未定义

需要注意一点：未使用var定义的变量不能使用if(name == undefined)的形式判断类型是否为Undefined。

1.2.2 Boolean类型

布尔类型是JavaScript常用类型之一，其他语言类似，只有两个值：true，false，也可以用1表示true，0表示false。

var b1 = true;             //定义b1变量var b2 = false;            //定义b2变量alert(b1);alert(b2);if(b1 == 1)    alert("b1的值为true");if(b2 == 0)    alert("b2的值为false");

1.2.3 Number类型

Number类型指数值型，与其他语言有些差异，JavaScript中数值类型统一为Number，而非特定的int，float等。不过在使用时我们可以正常使用，只要注意赋值为整型或浮点型即可，要表示浮点型，必须包括小数点和小数点后的至少一位数字，例如使用1.0，不能写为1。

//整型var num1 = 123;           //十进制数字123var num2 = 0213;          //八进制数，以0开头var num3 = 0xFE;          //十六进制数，以0x开头alert(num1);              //输出为123alert(num2);              //输出为十进制数139alert(num3);              //输出为十进制数254//浮点型var fNum1 = 23.0;         //浮点型数字23.0var fNum2 = 12.34;        //浮点型数字12.34var fNum3 = 1.234e8;      //浮点型数字1.234*10^8,科学计数法中，e表示10^var fNum4 = 1.234e-8;     //浮点星数字1.234*10^-8alert(fNum1);alert(fNum2);alert(fNum3);alert(fNum4);

需要注意的是：在使用八进制和十六进制数时，虽可以表示八进制和十六进制数，但所有的数学计算的值均是十进制的数。

1.2.4 String类型

字符串类型使用方法与其他语言类似，可以使用双引号（”）或单引号（’）表示，字符串长度用length来获取：

var str1 = "abc";var str2 = "北京";alert(str1.length);     //长度为3alert(str2.length);     //长度为2

1.3 变量的类型转换

1.3.1 其他类型转换为String类型

在JavaScript中，任何类型的变量都有一个toString方法，通过这个方法可以将对应类型的值转换成字符串，如下所示：

var num1 = 123;                  //定义整型变量var str1 = num1.toString();alert(str1);                     //输出123var num1 = 0345;                  //定义八进制整型变量var str1 = num1.toString();alert(str1);                     //输出十进制结果229，十六进制同理//显示二进制、八进制或十六进制的变量值，可加参数var num1 = 123;                  //定义整型变量alert(num1.toString(2));         //输出二进制数1111011alert(num1.toString(8));         //输出八进制数173alert(num1.toString(16));        //输出十六进制数7b

1.3.1 String类型转换为其他类型

在JavaScript中，提供了两个函数来讲字符串转换为数字，一次是parseInt和parseFloat，前者转换为整型，后者转化为浮点型。

var num1 = parseInt("1234xyz");   //返回1234,与后面的强制转换区分，强制转换为NaN，Not a Number，不是数字var num2 = parseInt("0123");  //返回十进制数83var num3 = parseInt("43.4");  //返回43//按二进制、八进制、十六进制转换为整数var num4 = parseInt("110101",2);   //按二进制转换，返回53var num5 = parseInt("110101",8);   //按八进制转换，返回36929var num6 = parseInt("110101",16);   //按十六进制转换，返回1114369//布尔变量var num7 = parseInt("false");    //返回NaN//浮点型var f1 = parseFloat("1234xyz");          //返回1234.0var f2 = parseFloat("0xAB");             //返回0var f3 = parseFloat("22.4");             //返回22.4var f4 = parseFloat("22.4.11");          //返回22.4var f5 = parseFloat("0123");             //返回123var f6 = parseFloat("xyz");              //返回NaN

此外，JavaScript还可以使用强制类型转换进行转换，有3种常用的强制转换：

• Boolean(value)：把value值转换成Boolean型。
• Number(value)：把value值转换成数字（整数或浮点数）。
• String(value)：把value值转换成字符串。

//强制转换成Boolean类型var b1 = Boolean("");             //返回falsevar b2 = Boolean("abc");          //返回true，非空字符串返回truevar b3 = Boolean(100);            //返回true，非0数返回truevar b4 = Boolean(0);              //返回falsevar b5 = Boolean(null);           //返回falsevar b6 = Boolean(new String());   //返回true//强制转换成Number类型//需要注意的是，强制转换成数值类型与parseInt和parseFloat基本类似，但不同的是转换的是整个值，而非部分值，例如"123a"，parseInt是123，而Number强制转换是NaN。var n1 = Number(false);          //返回0var n2 = Number(true);           //返回1var n3 = Number(undefined);      //返回NaNvar n4 = Number(null);           //返回0var n5 = Number("12.3");         //返回12.3var n6 = Number("123");          //返回123var n7 = Number("123abc");       //返回NaNvar n8 = Number(new Object());   //返回NaN

2.函数及函数调用

2.1 函数声明

函数声明的基本语法如下：

function funName(arg0,arg1,...,argN){    statements}

函数参数可以为空，也可以为多个，多个之间用”，”隔开：

function hello(name){    alert("你好 " + name);}

或者如果你想实现动态参数，即想动态加参数，则可以使用arguments对象实现，在函数声明时并不需要定义参数，而在函数体内使用arguments对象来获得当前函数的参数值，如下：

function sum(){    var n = 0;    //从arguments对象中取出sum函数的参数值，并相加    for(var i = 0; i < arguments.length; i++){        n += arguments[i];    }    return n;}

需要注意的是，JavaScript是弱语言类型，函数不能重载，如果函数重名，则后面的会覆盖前面的：

funcrion fun1(){    alert("Hello World");}function fun1(){    alert("Hello JavaScript");}fun1();  //显示Hello JavaScript

此外，还有一种不太常用的方法，因为在JavaScript中，一个函数相当于一个对象，可以使用Function类来建立任何函数，语法如下：

var funName = new Function(arg1,arg2,...,argN,functionBody);

例如两个数求和函数：

var funSum = new Function("n1","n2","return n1+n2");

2.2 函数的调用

以此调用前面声明的hello、sum、funSum ：

hello("World");alert(sum(1,2,3));alert(sum(-1,2,3,5));alert(funSum(-3,4));

3.类和对象

3.1 动态添加类成员

JavaScript对象使用new关键字创建，对象的属性可以动态加入：

var oPerson = new Object();    //创建一个对象变量oPerson.id = '001';            //定义id属性oPerson.name = '莫欺';          //定义name属性oPerson.age = 23;              //定义age属性//定义sayHello函数oPerson.sayHello(){    alert("Hello " + this.name);};oPerson.sayHello();            //调用sayHello方法

我们可以通过工厂函数的方式来创建Person对象，这样更加方便和工程化：

function createPerson(id,name,age){    var oPerson = new Object;    oPerson.id = id;    oPerson.name = name;    oPerson.age = age;    oPerson.sayHello(){        alert("Hello " + this.name);    }    return oPerson;}

可以注意，这里虽然将其封装为一个函数，但类的声明还是在里面，我们可以将其抽出，使用构造函数方式更为简洁明了。

3.2 构造函数方式

function sayHello(){    alert("Hello " + this.name);}function Person(id,name,age){    this.id = id;    this.name = name;    this.age = age;    this.sayHello = sayHello;}var oPerson = new Person('001','Moqi',23);oPerson.sayHello();

3.3 原型方式

需要注意的是，构造方法方式创建好新对象后属性和方法相对固定，不便于扩展，如果是扩展需求高的对象，可使用对象的prototype属性，这个属性可以看成是创建新对象所依赖的原型，可以使用空构造函数来创建一个空类，然后利用prototype属性为其添加新的成员（属性和方法）：

//空构造函数function Person(){}//添加成员Person.prototype.id = '001';Person.prototype.name = 'Moqi';Person.prototype.age = 23;Person.prototype.sayHello = function(){    alert("Hello " + this.name);}var oPerson = new Person();oPerson.sayHello();

当需要添加新的方法时：

Person.prototype.eat = function(){    alert("吃饭");}var oPerson = new Person();oPerson.eat();