JavaScript教程

来源:百度文库 编辑:神马文学网 时间:2024/04/20 22:17:54
Javascript简介
Javascript是一种解释性的,基于对象的脚本语言(an interpreted, object-based scripting language)。
HTML网页在互动性方面能力较弱,例如下拉菜单,就是用户点击某一菜单项时,自动会出现该菜单项的所有子菜单,用纯HTML网页无法实现;又如验证HTML表单(Form)提交信息的有效性,用户名不能为空,密码不能少于4位,邮政编码只能是数字之类,用纯HTML网页也无法实现。要实现这些功能,就需要用到Javascript。
Javascript是一种脚本语言,比HTML要复杂。不过即便你先前不懂编程,也不用担心,因为Javascript写的程序都是以源代码的形式出现的,也就是说你在一个网页里看到一段比较好的Javascript代码,恰好你也用得上,就可以直接拷贝,然后放到你的网页中去。正因为可以借鉴、参考优秀网页的代码,所以让Javascript本身也变得非常受欢迎,从而被广泛应用。原来不懂编程的人,多参考Javascript示例代码,也能很快上手。
Javascript主要是基于客户端运行的,用户点击带有Javascript的网页,网页里的Javascript就传到浏览器,由浏览器对此作处理。前面提到的下拉菜单、验证表单有效性等大量互动性功能,都是在客户端完成的,不需要和Web Server发生任何数据交换, 因此,不会增加Web Server的负担。
几乎所有浏览器都支持Javascript,如Internet Explorer(IE),Firefox, Netscape, Mozilla, Opera等。
简单的Javascript入门示例
我们先来看一个最简单的例子,代码如下:

一个最简单的Javascript示例(仅使用了document.write)




代码演示

一个最简单的Javascript示例(仅使用了document.write)




在HTML网页里插入Javascript语句,应使用HTML的其中的为Javascript语句。
上面的例子中,使用了document.wirte,这是Javascript中非常常用的语句,表示输出文本。
我们还可以将这个例子写得更加复杂些,不但输出文本,而且输出带HTML格式的文本。代码如下:

代码演示

用document.write输出带格式的HTML文本的Javascript示例




在参考别人的Javascript代码时,你也许会看到里的代码是Javascript。其中language这个属性在W3C的HTML标准中,已不再推荐使用。
Javascript写在哪里
Javascript程序可以放在:
HTML网页的里 HTML网页的里 外部.js文件里
Javascript在之间
当浏览器载入网页Body部分的时候,就执行其中的Javascript语句,执行之后输出的内容就显示在网页中。






代码演示

用document.write输出带格式的HTML文本的Javascript示例




Javascript在之间
有时候并不需要一载入HTML就运行Javascript,而是用户点击了HTML中的某个对象,触发了一个事件,才需要调用Javascript。这时候,通常将这样的Javascript放在HTML的里。







代码演示






请点击下面的“click me”。


click me



Javascript放在外部文件里
假使某个Javascript的程序被多个HTML网页使用,最好的方法,是将这个Javascript程序放到一个后缀名为.js的文本文件里。
这样做,可以提高Javascript的复用性,减少代码维护的负担,不必将相同的Javascript代码拷贝到多个HTML网页里,将来一旦程序有所修改,也只要修改.js文件就可以,不用再修改每个用到这个Javascript程序的HTML文件。
在HTML里引用外部文件里的Javascript,应在Head里写一句,其中src的值,就是Javascript所在文件的文件路径。示例代码如下:







代码演示






请点击下面的“click me”。


click me



演示示例里的common.js其实就是一个文本文件,内容如下:
function clickme()
{
alert("You clicked me!")
}
Javascript 教程 -- 编写 Javascript 代码
象很多其它编程语言一样,Javascript 也是用文本格式编写,由语句 (statements),语句块 (blocks) 和注释 (comments) 构成。语句块 (blocks) 是由一些相互有关联的语句构成的语句集合。在一句语句 (statement) 里,你可以使用变量,字符串和数字 (literals),以及表达式 (expressions)。
语句 (Statements)
一个 Javascript 程序就是一个语句的集合。一句 Javascript 语句相当于一句完整的句子。Javascript 语句将表达式 (expressions)用某种方式组合起来,得以完成某项任务。
一句语句 (statement) 包含一个或多个表达式 (expressions),关键词 (keywords) 和运算符 (operators)。一般来说,一句语句的所有内容写在同一行内。不过,一句语句也可以写成多行。此外,多句语句也可以通过用分号 (;) 分隔,写在同一行内。
建议:将每句语句以显示的方式结束,即在每个语句最后加分号 (;) 来表示该句语句的结束。
以下是几个语句的例子:
aBird = "Robin";
上面这句语句表示将 "Robin" 这个字符串赋值给变量 aBird。
var today = new Date();
上面这句语句表示将今天的日期值赋值给变量 today。
语句块 (Blocks)
通常来说,用 {} 括起来的一组 Javascript 语句称为语句块 (blocks)。语句块通常可以看做是一句单独的语句。也就是说,在很多地方,语句块可以作为一句单个的语句被其它 Javascript 代码调用。但是以 for 和 while 开头的循环语句例外。另外要注意的是,
注意:在语句块里面的每句语句以分号 (;) 表示结束,但是语句块本身不用分号。
语句块 (blocks) 通常用于函数和条件语句中。
下面的例句中,{} 中间的 5 句语句构成一个语句块 (block),而最后三行语句,不在语句块内。
function convert(inches) {
feet = inches / 12;
miles = feet / 5280;
nauticalMiles = feet / 6080;
cm = inches * 2.54;
meters = inches / 39.37;
}
km = meters / 1000;
kradius = km;
mradius = miles;
注释 (Comments)
为了程序的可读性,以及便于日后代码修改和维护时,更快理解代码,你可以在 Javascript 程序里为代码写注释(comments)。
在 Javascript 语言里,用两个斜杠 // 来表示单行注释。见例句:
aGoodIdea = "Comment your code thoroughly."; // 这是单行注释。
多行注释则用 /* 表示开始, */ 表示结束。见例句:
/*
这是多行注释 行一。
这是多行注释 行二。
*/
推荐使用多行的单行注释来替代多行注释,这样有助于将代码和注释区分开来。
表达式 (Expressions)
Javascript 表达式 (expressions) 相当于 javascript 语言中的一个短语,这个短语可以判断或者产生一个值,这个值可以是任何一种合法的 Javascript 类型 - 数字,字符串,对象等。最简单的表达式是字符。
表达式示例:
3.9 // 数字字符
"Hello!" // 字符串字符
false // 布尔字符
null // null 值字符
{x:1, y:2} // 对象字符
[1,2,3] // 数组字符
function(x){return x*x;} // 函数字符
以下是比较复杂的表达式示例:
var anExpression = 3 * (4 / 5) + 6;
var aSecondExpression = Math.PI * radius * radius;
var aThirdExpression = aSecondExpression + "%" + anExpression;
var aFourthExpression = "(" + aSecondExpression + ") % (" + anExpression + ")";
赋值和等于 (Assignments and Equality)
Javascript 语言中使用等号 (=) 表示变量赋值。等号左边的值可以是:
变量 数组元素 对象属性
等号右边的值可以是任何类型的值,包括表达式。例句如下,表示将整数 8 赋值给 x 这个变量。
x = 8;
注意: 在 Javascript 里,要判断两个值是否相等,不用等号,而是用两个等号来表示 (==)。 例句如下,表示 x 等于 8。
x == 8
Javascript变量(Javascript Variables)
什么是变量?
变量是用来临时存储数值的容器。在程序中,变量存储的数值是可以变化的。
变量的声明(Declaring Variables)
在使用一个变量之前,首先要声明这个变量。Javascript里,使用var来声明变量。
声明变量有以下几种方法:
1. 一次声明一个变量。例句如下:
var a;
2. 同时声明多个变量,变量之间用逗号相隔。例句如下:
var a, b, c;
3.声明一个变量时,同时赋予变量初始值。例句如下:
var a=2;
4. 同时声明多个变量,并且赋予这些变量初始值,变量之间用逗号相隔。例句如下:
var a=2, b=5;
变量的命名规则
变量名可以是任意长度。变量名必须符合下列规则:
变量名的第一个字符必须是英文字母,或者是下划线符号(underscore)_ 变量名的第一个字母不能是数字。其后的字符,可以是英文字母,数字,和下划线符号符号(underscore)_ 变量名不能是Javascript的保留字(参见Javascript保留字)。
注意:Javascript代码是区分大小写的(case-sensitive)。变量myname和MyName表示的是两个不同的变量。写错变量的大小写,是初学者最常见的错误之一。
Javascript常用运算符(Operators)


Javascript条件语句(Javascript Conditional Statements)
在一般情况下,程序语句的执行是按照其书写顺序来执行的。前面的代码先执行,后面的代码后执行。但是这种简单的自上而下的单向流程只适于用一些很简单的程序。大多数情况下,需要根据逻辑判断来决定程序代码执行的优先顺序。要改变程序代码执行的先后顺序,任何编程语言都需要用到条件语句和循环语句,Javascript也不例外。
这一节我们主要介绍Javascript条件语句。
Javascript条件语句有以下几种:
单项条件结构 (if条件语句) 双向条件结构 (if...else条件语句) 多项条件结构 (switch条件语句)



一个使用到if条件语句的Javascript示例



Javascript示例代码解释:这个Javascript示例用到了Javascript的if条件语句。
首先用.length计算出字符串What's up?的长度,然后使用if语句。if语句的内容是:如果该字符串长度<100,就显示"该字符串长度小于100。"。







使用if...else条件语句的Javascript示例


Javascript代码示例解释:首先将今天的日期赋值给变量vDay,然后用.getHours得出vDay的小时数,赋值给变量vHour,然后使用if...else条件语句判断,如果vHour小于17,显示"日安",反之则显示"晚安"。







使用swith条件语句的Javascript示例


该Javascript示例解释:首先将今天的日期值赋值给变量d,然后用.getDay得出天数,赋值给变量theDay,然后使用switch条件语句。如果theDay等于5,表示是星期五;如果是6,表示是星期六;如果是0,表示是星期天;如果是其它数,表示是星期一到星期四。根据值的不同,显示不同的内容。




Javascript 教程 -- Javascript 循环语句 (Javascript Loop Statements)
在一般情况下,程序语句的执行是按照其书写顺序来执行的。前面的代码先执行,后面的代码后执行。但是这种简单的自上而下的单向流程只适于用一些很简单的程序。大多数情况下,需要根据逻辑判断来决定程序代码执行的优先顺序。要改变程序代码执行的先后顺序,任何编程语言都需要用到条件语句和循环语句,Javascript 也不例外。
这一节我们主要介绍 Javascript 循环语句。
Javascript 循环语句有以下几种:
在循环的开头测试表达式 (while 循环语句) 在循环的末尾测试表达式 (do...while 循环语句) 对对象的每个属性都进行操作 (for...in 循环语句) 由计数器控制的循环 (for 循环语句)
使用 for 循环语句
for 循环语句指定了一个计数器变量,一个测试条件,和更新计数器的行为。
每次循环重复之前,都要测试条件。如果测试成功,则执行循环内的代码;如果测试不成功,则不执行循环内的代码,而是执行紧跟在循环后的第一行代码。当执行该循环时,计数器变量在下次重复循环前被更新。
如果循环条件一直不满足,则永不执行该循环。如果条件一直满足,则会导致无限循环。前一种,在某种情况下是需要的,但是后一种,基本不应发生,所以写循环条件时一定要注意。
for 循环语句示例代码:



一个使用到for循环的Javascript示例





Javascript示例代码解释:这个Javascript示例用到了for循环语句。
循环语句允许重复执行一行或数行代码,for循环要使用一个计数器变量,每重复一次循环之后,计数器变量的值就会增加或者减少。这个Javascript示例中,计数器变量为i,i初始值为0,i++表示每次重复执行后i的值就加1,终止循环条件为i<=5,也就是说,一旦i的值大于5,就终止循环。该示例中,重复循环的语句是for循环里面的两句document.write语句。







一个使用到for...in循环的Javascript示例








一个使用到while循环的Javascript示例





Javascript示例代码解释:这个Javascript示例用到了while循环语句。
循环语句允许重复执行一行或数行代码,while后面紧跟的是终止循环的条件。这个Javascript示例中,设一个变量为i,i初始值为0,i++表示每次重复执行后i的值就加1,终止循环条件为while (i <= 5),也就是说,一旦i的值大于5,就终止循环。该示例中,重复循环的语句是while循环里面的document.write语句。







一个使用到do...while循环的Javascript示例





Javascript示例代码解释:这个Javascript示例用到了do...while循环语句。
循环语句允许重复执行一行或数行代码,do后面跟的是重复执行的代码,while后面跟的是终止循环的条件。这个Javascript示例中,设一个变量为i,i初始值为0,i++表示每次重复执行后i的值就加1,终止循环条件为while (i <= 5),也就是说,一旦i的值大于5,就终止循环。该示例中,重复循环的语句是while循环里面的document.write语句。







一个用break中断循环的Javascript代码示例




//设函数BreakTest参数breakpoint值为23,得到从1加到22的合计。
document.write(BreakTest(23))






一个用continue跳过后面代码,开始循环的下一次重复的Javascript示例代码





Javascript保留字(Javascript Reserved Words)