网页中的JavaScript

变量的声明和赋值

var count;定义变量

count = 5;赋值

var” - 用于声明变量的关键字

“count” - 变量名

同时声明和赋值变量

var count = 10;

声明多个变量

var x, y, z = 10;

运算符号

运算符对一个或多个变量或值(操作数)进行运算,并返回一个新值

根据所执行的运算,运算符可分为以下类别:

算术运算符 +、-、 * 、 / 、%、++、--、-(求反)

比较运算符 ==、!=、>、>=、<、<=

逻辑运算符 &&、||、!

逻辑控制语句

if条件语句

if(条件) { //JavaScript代码; } else { //JavaScript代码; }

switch多分支语句

switch (表达式) { case 常量1 : JavaScript语句1; break; case 常量2 : JavaScript语句2; break; ... default : JavaScript语句3; }

for、while循环语句

for(初始化; 条件; 增量) { 语句集; } while(条件) { 语句集; }

注释

单行注释以 // 开始,以行末结束

例如: <SCRIPT language=“javascript”> //表示JavaScript代码的开始

多行注释以 /* 开始,以 */ 结束,符号 /*…… */ 指示中间的语句是该程序中的注释。

例如: /* helloWorld.html 2007-9-29 第一个JavaScript程序 */

类型转换

parseInt (String) 将字符串转换为整型数字

如: parseInt (“86”)将字符串“86”转换为整型值86

parseFloat(String) 将字符串转换为浮点型数字

如: parseInt (“34.45”)将字符串“34.45”转换为浮点值34.45

2、数据类型

与其他C++、Java等强类型语言不同,JavaScript是一种弱类型的语言,因此当你定义变量时不需要指定变量的数据类型,变量可以存储任何类型的值,而不受值的数据类型限制。但是数据类型对于任何语言来说都是很重要的。如果说语句是语言的结构,数据类型则是语言的血脉,算法和设计思想则是语言的灵魂。 在JavaScript中,数据存在两种截然不同的存储方式。其中一种是直接存储数据,称为值类型数据;另一种是存储数据的空间地址来间接保存数据,称为引用型数据(也称为指针型数据)。不同类型的数据,它们的行为方式存在很大的不同。如果要准确处理数据,需要读者对这两种类型的数据有比较深刻的理解。

数值

JavaScript语言包含三种基本的数据类型:数值、字符串和布尔型。下面我们分别进行讲解。数值是所有语言的最基本数据类型。对于JavaScript来说,数值是不区分整型和浮点数,所有数值都为浮点型数值来表示。 除了基本的数值之外,JavaScript还提供了特殊的数值,Number对象只读属性常量。

运算符

数据类型

优先级

结合性

Infinity

无穷大

非数值

Number.MAX_VALUE

可表示的最大数值

Number.MIN_VALUE

可表示的最小数值

Number.NaN

非数值

Number.POSITIVE_INFINITY

正无穷大

Number.NEGATIVE_INFINITY

负无穷大

 

字符串

字符串也是一种基本数据类型。它由Unicode字符、数字、标点符号等组成的序列,一般字符处必须使用单引号或双引号包括起来。单引号中可以包含双引号,双引号中也可以包含单引号。所有字符应该在同一行内书写。

布尔型

布尔型数据是最简单,也是最常用的一种类型,它只包括2个常量值,即true和false,表示逻辑的真与假。如果把布尔型常量转换为数值,则true为1,而false为0。

null和undefined

在JavaScript中关键字null表示空值的意思,它表示对象为空,或者变量没有引用任何对象。如果当一个变量的值为null,则表明它的值不是有效的对象、数组、数值、字符串和布尔型等。如果使用alert(typeof(null))来检测null值的类型,则返回object,说明它是一个对象类型。 而undefined与null不同,它表示无值的意思,并且具有独一无二的类型,它区别任何对象、数组、数值、字符串和布尔型。alert(typeof(undefined))的返回值为undefined。

其他数据类型

除了上面介绍的3中基本的数据类型外,JavaScript还提供了各种复杂的数据类型。这类数据一般通过指针引用数据在内存中的位置,故称为引用型数据。引用类型的数据包括:数组、对象和函数等。有关这些复杂数据结构,我们将在下面各节中进行详细讲解。

3、函数

从某种意义上来看,JavaScript是一种函数式编程,话句话说就是JavaScript语言以函数为核心进行编程。如果随意打开一个JS文件或者包含JavaScript脚本的页面,你都能够看到函数在整个代码中的分量。可以毫不夸张的说,要精通JavaScript语言,必须先精通函数的应用。

定义函数

使用函数的第一步当然是要定义函数,定义函数的方法有两种: 方法一,使用function语句声明函数,此时函数被视为一种静态的方法。 方法二,通过Function对象来构造函数,此时函数被视为一种动态对象。 使用function来定义函数有两种方式: //方式1:命名函数 function f(){ return "Hello,World!"; } //方式2:匿名函数 var f = function(){ return "Hello,World!"; }

创建函数 function 函数名( 参数1,参数2,… ) { 语句; } 调用函数 函数调用一般和表单元素的事件一起使用,调用格式为: 事件名=“函数名” ;

定义函数

命名函数的方法也被称为声明式函数,而匿名函数的方法也被称为引用式函数或者函数表达式,也就是说把函数看做一个复杂的表达式,并把表达式赋予给变量f。习惯上,人们更喜欢把命名式定义的函数称为函数常量,而把匿名函数称为函数对象,把引用了函数对象的变量称为函数引用。

使用Function对象构造函数的示例如下: var f = new Function("this.name = 'Hello,World!'"); var a = new f(); alert(a.name); 在上面代码中,首先构造一个Function对象的实例(对象),并初始化函数的内容,然后再把该函数实例f引用并赋值给变量a,最后调用该函数的name属性。 在实际开发中,使用function定义函数要比Function对象构造函数快得多、方便得多。Function仅用于某些动态要求很高的特殊场合。但是不管采用那种方式,JavaScript的函数都是Function对象的一个实例,因此有人也把Function对象称为函数模板或者元类。

调用函数

调用函数使用小括号运算符来实现。在括号运算符内部可以包含多个参数列表,参数之间通过逗号进行分隔。例如,在下面这个简单示例中使用小括号调用函数f,并把返回值传递给alert()方法。 function f(){ return "Hello,World!"; } document.write(f()); 一个函数可以包含多个return语句,但是在调用函数时一般只有一个return语句被执行,且该return语句后面的表达式的值作为函数的返回值返回。当然函数的返回值没有类型限制,它可以返回任意类型的值。

函数的参数

参数包括形参和实参。 所谓形参就是在定义函数时,传递给函数的参数,由于它仅是一个代词,因此被称为形参,即形式上参数。当函数被调用时,会传给函数实际的参数,这些参数被称为实参。例如,在下面这个函数中,参数a和b就是形参,而调用函数中的23和34就是实参。 function add(a,b) { return a+b; } alert(add(23,34)); 函数的形参没有限制,可以包括零个或多个。函数形参的数量可以通过函数的length属性获取。例如,针对上面函数可以使用下面语句读取函数的形参个数: alert(add.length);

函数的参数

在正常情况下,函数的形参和实参在数量是相同的,但是JavaScript没有硬性规定两者必须对应。如果形参数大于实参数,则多出的形参值为undefined;相反如果实参数大于形参数,则多出的实参就无法被形参标识符访问,从而被忽略掉。例如,针对上面的函数示例,你可以输入下面实参进行调用: alert(add(2,3,4)); 则将忽略第3个实参的值,最后提示的结果为5。同样,如果输入下面实参进行调用: alert(add(2)); 由于实参仅为一个,而形参为两个。于是,系统就用undefined值来代替,任何与undefined值进行运算的结果都将返回NaN。

函数的参数

为了方便用户对于函数参数的跟踪和控制,JavaScript还提供了一个Arguments数据集合(对象),利用该集合对象可以快速操纵函数的实参。使用arguments.length可以获取函数实参的个数,利用该集合的下标可以准确获取实际传递给函数的每个参数值。

函数常量

在实际开发中函数常被当作数据来进行处理。你可以把函数视为一个值赋予给变量,或者作为一个参数传递给另一个函数,这也是函数式编程的一个重要特征。 匿名函数 匿名函数就是没有名称的函数。当只需要一次性函数时,使用匿名函数是一个不错的选择,这样就不会直接把函数存放在内存中,因此使用匿名函数会更加有效率。例如,在下面示例中匿名函数被调用之后,被赋予给变量z,然后提示z变量的返回值。 var z = function(x, y) { return (x + y) / 2; }(23, 35); alert(z);

函数常量

函数作为值 函数实际也是一种结构复杂数据,因此你可以把它作为值赋予给其他变量。例如,在下面这个示例中,把函数当作一个值赋予给变量a,然后利用小括号来调用这个新实例化的函数变量。 var a = function(x,y) { return (x+y)/2; } alert( a(12,33) );

函数常量

函数作为参数 函数作为值可以进行传递,因此你可以把函数作为参数传递给一个函数,也可以作为返回值。通过这种方式增强了函数的抽象能力和灵活程度。

函数常量

函数作为表达式 函数既然可以当作值来使用,因此也可以参与到表达式运算中。例如,对于下面这个简单的函数: var a = function(x) { alert(x); } a(50); 我们可以直接使用表达式来编写: (function(x) { alert(x); })(50); 这样一看是不是更简洁、直观。其中第1个小括号运算符包含的是一个匿名函数,第2个小括号调用第1个小括号包含的函数,并传递参数和返回值。

4、JavaScript中的对象

对象(Object)是面向对象编程的核心概念。所谓对象就是已经命名的数据集合,也是一种比数组更复杂的一种数据结构。在JavaScript中对象是由new运算符生成,生成对象的函数被称为类或者构造函数,习惯上称之为对象类型。生成的对象被称为类的对象实例,简称为对象。例如: var o = new Object(); //构造原型对象 var date = new Date(); //构造日期对象 var ptn = new RegExp("ab+c","i"); //构造正则表达式对象 对象包含属性、方法和各种标识符。你可以通过点号运算符(.)来访问对象的属性,也可以通过集合运算符([])来访问对象的属性,例如,a.x等价于a[" x "]。对象的方法可以像普通的方法一样被调用,同时可以使用关键字this来代表当前对象,例如,a.x等价于this.x。这里的this代词总是指向真正调用这个方法的对象。

对象的属性和方法

在JavaScript中,Object对象是所有对象的父类。所有JavaScript核心对象必须拥有Object类的原始属性和方法。 constructor属性 它是构造函数(即对象类)本身的引用,因此常用它来准确识别运行时对象的类型,这犹如HTML中标签的id属性。

对象的属性和方法

toString()方法 该方法能够返回对象的字符串表示。当在字符串环境中使用对象时,JavaScript系统就会调用toString()方法把对象转换成字符串。例如,在下面这个示例中,定义数组对象test[],然后把数组第3个元素赋予给变量对象o,然后调用toString()方法把对象o转换为字符串,并用typeof()方法获取转换后的对象的数据类型,则返回为string类型。 <script language="javascript" type="text/javascript"> var test = new Array(1,2,3,4) var o = test[2]; document.write(typeof(o.toString())); </script>

对象的属性和方法

valueOf()方法 valueOf()方法能够返回对象的原始值(如果存在),对于类型为Object的对象,该方法只返回自身。例如,在下面这个示例中,返回的就不是string类型,而是number类型。因为valueOf()方法仅获取o对象的值,而不是对象本身。 <script language="javascript" type="text/javascript"> var test = new Array(1,2,3,4) var o = test[2]; document.write(typeof(o.valueOf())); </script>

增加和删除对象属性

为对象增加属性的方法有很多种。例如,使用点语法来增加。 var o = new Object(); o.x = 50; o.y = 100; 或者使用大括号来增加: var o = { x:50, y:100 }

增加和删除对象属性

增加多组属性,则可以使用下面方法: var a = new Array(2); a[0] = new Object(); a[0].x = 10; a[0].y = 20; a[1] = new Object(); a[1].x = 20; a[1].y = 30; a[2] = new Object(); a[2].x = 30; a[2].y = 40; 或者: var os = [ {x:10,y:20}, {x:20,y:30}, {x:30,y:40} ];

增加和删除对象属性

使用构造函数来增加属性也很方便,代码如下: function f(x,y){ this.x = x; this.y = y; } var o = [new f(10,20),new f(20,30),new f(40,50)];

增加和删除对象属性

删除属性可以使用delete运算符。例如: delete o.x; 属性被删除之后,在对象中就不会存在该属性的空间。由于一般对象的属性都是比较固定的,建议不要随意上删除对象的属性。

销毁对象

在JavaScript中要销毁对象,必须先清除对象的所有外部引用。例如,在下面这个示例中如果要销毁对象a,则需要清除对象b和c。 var a = new Array(1,2) var b = a; var c = b; 清除对象引用的方法是设置它们的值为null。代码如下: a = null; b = null; c = null; 注意:要清楚delete运算符与对象注销是两个不同的概念,使用时应注意区别。

内置对象

JavaScript提供了丰富的内置对象,除了Object基本对象之外,还包括Math对象、Date对象、Error对象、Array对象、String对象和RegExp对象。其中Array对象、String对象和RegExp对象比较实用,对于初学者来说可能会感觉操作起来会很复杂。我们将在下面章节分别进行讲解,JavaScript内置对象的详细说明和使用可以参阅相关JavaScript参考手册。

1、JavaScript中的数组

数组(Array)就是一组数据的集合。集合为数据存储提供了有序的物理空间,同时也提供了一组数据处理的功能。在JavaScript中,数组与对象是两种最重要的引用类型的数据,在复杂脚本中数组的实际应用价值是非常高的,它拥有众多方法和属性,具有强大的数据处理能力,很多时候被用作数据周转或暂寄的空间。

定义数组

定义数组通过构造函数Array()和运算符new来实现。具体实现方法如下: 方法一,定义空数组: var a = new Array(); 通过这种方式定义的数组是一个没有任何元素的空数组。 方法二,定义带有参数的数组: var a = new Array(1,2,3,"4","5"); 数组中每个参数都表示数组的一个元素值,数组的元素没有类型限制。你可以通过数组下标来定位每个元素,操作数组的值;通过数组的length属性确定数组的长度。 方法三,定义指定长度的空数组: var a = new Array(6); 采用这种方式定义的数组拥有指定的元素个数,但是没有为元素初始化赋值,这时它们的初始值都是undefined。

定义数组时,也可以省略new运算符,直接使用Array()函数来实现,这时Array()就不是构造函数了。例如,下面这两个句子的功能是相同的。 var a = new Array(6); var a = Array(6); 方法四,定义数组常量: var a = [1,2,3"4","5"]; 使用数组常量来定义数组要比使用Array()函数定义数组速度要快,操作更方便。

存取数组元素

使用[]运算符可以存取数组元素的值。在方括号左边是数组的引用,方括号内是非负整数值的表达式。例如,通过下面方式可以读取数组中第3个元素的值,即显示为“3“。 var a = [1,2,3,"4","5"]; alert(a[2]); 通过下面方式可以修改元素的值: var a = [1,2,3,"4","5"]; a[2]=2; alert(a[2]);

数组的存取和增删

JavaScript为数组对象提供了众多方法,灵活使用这些方法可以提高你的开发水平。利用数组的length属性和数组下标,可以遍历数组元素,从而实现动态控制数组元素。例如,在下面示例中通过for语句遍历数组元素,并把数组元素输出显示出来(如图14.27所示)。 var str = ""; var a = [1, 2, 3, 4, 5]; for(var i = 0 ; i < a.length; i ++ ){ str += a[i] + ","; } document.write(a + "<br />"); document.write(str);

数组的大小不是固定的,你可以随时增加和删除数组元素。

实现的方法如下:

方法一,通过改变数组的length属性来实现。 var a = [1, 2, 3, 4, 5]; a.length = 4; document.write(a); 在上面示例中,我们可以看到当改变数组的长度时,会自动在数组的末尾增加或删除元素,以实现改变数组的大小。另外,使用delete运算符也可以删除数组元素的值,但是不能够删除数组元素,也不会改变length属性的值。

方法二,使用push()和pop()方法来操作数组。它们把数组看作如同堆栈类型的数据结构,这种结构的特点就是先出后进。使用push()方法可以在数组的末尾插入一个或多个元素,而使用pop()方法可以依次把它们从数组中推出去。例如: var a = []; //定义一个空数组 a.push(1,2,3); //得到数组a[1,2,3] a.push(4,5); //得到数组a[1,2,3,4,5] a.pop(); //得到数组a[1,2,3,4]

方法三,使用unshift()和shift()方法。这也是一对堆栈方法,但是它们作用于数组的头部。与push()和pop()方法操作类似。例如: var a = []; //定义一个空数组 a.unshift(1,2,3); //得到数组a[1,2,3] a.unshift(4,5); //得到数组a[4,5,1,2,3] a.shift(); //得到数组a[5,1,2,3] 方法四,使用splice()方法。该方法是一个通用删除和插入元素的方法,它可以在数组指定的位置开始删除或插入元素,因此该方法可以包含3个参数。第1个参数指定插入的起始位置,第2个参数指定要删除元素的个数,第3个参数开始表示插入的具体元素。例如,在下面这个示例中,splice()方法从第2个元素后开始截2个元素,然后把这个截取的新子数组([3,4])赋予给变量b,而原来的数组a的值为[1,2,5,6]。 var a = [1,2,3,4,5,6]; var b = a.splice(2,2); document.write(a + "<br />"); document.write(b);

数组高级操作

把数组转换为字符串 这是一种比较常见的操作,因为我们经常需要把字符串劈开为一组数组,或者把数组合并为字符串。实现这样的操作可以借助Array对象的join()方法来实现。例如,在下面这个示例中join()方法使用参数提供的连字符把数组a中的元素连接在一起,生成一个字符串。如果join()方法不提供参数,则默认以逗号连接每个元素。 var a = [1,2,3,4,5]; var a = a.join("-"); document.write("a类型 = " + typeof(a)+"<br />"); document.write("a的值 = " + a);

把字符串折分成数组(split). 如: <script type="text/javascript"> var str="a,b,c"; var arry = str.split(","); alert(arry.length); //output: 3; </script>

转换数组元素的排列顺序 使用reverse()方法可以颠倒数组元素的顺序。例如,在下面这个示例中reverse()方法把数组[1,2,3,4,5]元素的顺序调整为[5,4,3,2,1]。当然该方法是在原数组基础上进行操作的,不会新建数组。 var a = [1,2,3,4,5]; var a = a.reverse(); document.write(a);

数组元素排序 sort()方法能够对于数组中的元素进行排序,排序的方法通过其参数来决定。这个参数是一个比较两个元素值的闭包。如果省略参数,则sort()方法将按默认的规则对数组进行排序。例如: var a = [3,2,5,1,4]; var b = a.sort(); 则b为[1,2,3,4,5]。

连接数组 concat()方法能够把该方法中的参数追加到指定数组中,形成一个新的连接数组。例如: var a = [1,2,3,4,5]; var b = a.concat(4,5); document.write(b); 上面示例将返回新数组[1,2,3,4,5,4,5]。如果concat()方法中的参数包含数组,则把数组元素展开添加到数组中。例如: var a = [1,2,3,4,5]; var b = a.concat([4,5],[1,[2,3]]); document.write(b); 则上面示例将返回数组[1,2,3,4,5,4,5,1,2,3]。

截取子数组 slice()方法将返回数组中指定的片段,所谓片段就是数组中的一个子数组。该方法包含两个参数,它们指定要返回子数组在原数组中的起止点。例如,在下面示例中将返回数组a中第3个元素到第6个元素前面的3个元素组成的子数组(即[3,4,5])。 var a = [1,2,3,4,5,6,7,8,9]; var b = a.slice(2,5); document.write(b); 请注意,slice()方法的第1个参数指定的元素是被截取的范围之内,而第2个参数指定的元素不被截取。

上一篇:微信JSSDK分享朋友圈微信自定义分享接口


下一篇:解决Windows下Tomcat控制台中文乱码