您的位置：首页 > Web前端 > JavaScript

Javascript基础

2008-12-02 14:08 351 查看

Javascript简介

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

简单的Javascript入门示例

我们先来看一个最简单的例子，代码如下：
<html>
<head><title>一个最简单的Javascript示例(仅使用了document.write)</title></head>
<body>
<scripttype="text/javascript">
document.write("Hello,World!");
</script>
</body>
</html>
演示示例在HTML网页里插入Javascript语句，应使用HTML的<script>。<script>这个tag有个属性叫type，type="text/javascript"表示插入<script></script>其中的为Javascript语句。上面的例子中，使用了document.wirte，这是Javascript中非常常用的语句，表示输出文本。我们还可以将这个例子写得更加复杂写，不但输出文本，而且输出带HTML格式的文本。代码如下：
<scripttype="text/javascript">
document.write("<h1>Hello,World!</h1>");
</script>
演示示例在参考别人的Javascript代码时，你也许会看到<script>里写的不是type="text/javascript"，而是language="javascript"。目前这两种方法都可以表示<script></script>里的代码是Javascript。其中language这个属性在W3C的HTML标准中，已不再推荐使用。

Javascript写在哪里

关键词：Javascript写在哪里Javascript程序可以放在：HTML网页的<body></body>里HTML网页的<head></head>里外部.js文件里

Javascript在<body></body>之间

当浏览器载入网页Body部分的时候，就执行其中的Javascript语句，执行之后输出的内容就显示在网页中。
<html>
<head></head>
<body>
<scripttype="text/javascript">
....
</script>
</body>
</html>
演示示例

Javascript在<head></head>之间

有时候并不需要一载入HTML就运行Javascript，而是用户点击了HTML中的某个对象，触发了一个事件，才需要调用Javascript。这时候，通常将这样的Javascript放在HTML的<head></head>里。
<html>
<head>
<scripttype="text/javascript">
....
</script>
</head>
<body>
</body>
</html>
演示示例

Javascript放在外部文件里

假使某个Javascript的程序被多个HTML网页使用，最好的方法，是将这个Javascript程序放到一个后缀名为.js的文本文件里。这样做，可以提高Javascript的复用性，减少代码维护的负担，不必将相同的Javascript代码拷贝到多个HTML网页里，将来一旦程序有所修改，也只要修改.js文件就可以，不用再修改每个用到这个Javascript程序的HTML文件。在HTML里引用外部文件里的Javascript，应在Head里写一句<scriptsrc="文件名"></script>，其中src的值，就是Javascript所在文件的文件路径。示例代码如下：
<html>
<head>
<scriptsrc="http://book.chinaz.com/html/asdocs/js_tutorials/common.js"></script>
</head>
<body>
</body>
</html>
演示示例演示示例里的common.js其实就是一个文本文件，内容如下：
functionclickme()
{
alert("Youclickedme!")
}

编写Javascript代码

关键词：编写Javascript代码象很多其它编程语言一样，Javascript也是用文本格式编写，由语句(statements)，语句块(blocks)和注释(comments)构成。语句块(blocks)是由一些相互有关联的语句构成的语句集合。在一句语句(statement)里，你可以使用变量，字符串和数字(literals)，以及表达式(expressions)。

语句(Statements)

一个Javascript程序就是一个语句的集合。一句Javascript语句相当于一句完整的句子。Javascript语句将表达式(expressions)用某种方式组合起来，得以完成某项任务。一句语句(statement)包含一个或多个表达式(expressions)，关键词(keywords)和运算符(operators)。一般来说，一句语句的所有内容写在同一行内。不过，一句语句也可以写成多行。此外，多句语句也可以通过用分号(;)分隔，写在同一行内。建议：将每句语句以显示的方式结束，即在每个语句最后加分号(;)来表示该句语句的结束。以下是几个语句的例子：
aBird="Robin";
上面这句语句表示将"Robin"这个字符串赋值给变量aBird。
vartoday=newDate();
上面这句语句表示将今天的日期值赋值给变量today。

语句块(Blocks)

通常来说，用{}括起来的一组Javascript语句称为语句块(blocks)。语句块通常可以看做是一句单独的语句。也就是说，在很多地方，语句块可以作为一句单个的语句被其它Javascript代码调用。但是以for和while开头的循环语句例外。另外要注意的是，注意：在语句块里面的每句语句以分号(;)表示结束，但是语句块本身不用分号。语句块(blocks)通常用于函数和条件语句中。下面的例句中，{}中间的5句语句构成一个语句块(block)，而最后三行语句，不在语句块内。
functionconvert(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="Commentyourcodethoroughly.";//这是单行注释。
多行注释则用/*表示开始，*/表示结束。见例句：
/*
这是多行注释行一。
这是多行注释行二。
*/
推荐使用多行的单行注释来替代多行注释，这样有助于将代码和注释区分开来。

表达式(Expressions)

Javascript表达式(expressions)相当于javascript语言中的一个短语，这个短语可以判断或者产生一个值，这个值可以是任何一种合法的Javascript类型-数字，字符串，对象等。最简单的表达式是字符。表达式示例：
3.9//数字字符
"Hello!"//字符串字符
false//布尔字符
null//null值字符
{x:1,y:2}//对象字符
[1,2,3]//数组字符
function(x){returnx*x;}//函数字符
以下是比较复杂的表达式示例：
varanExpression=3*(4/5)+6;
varaSecondExpression=Math.PI*radius*radius;
varaThirdExpression=aSecondExpression+"%"+anExpression;
varaFourthExpression="("+aSecondExpression+")%("+anExpression+")";

赋值和等于(AssignmentsandEquality)

Javascript语言中使用等号(=)表示变量赋值。等号左边的值可以是：变量数组元素对象属性等号右边的值可以是任何类型的值，包括表达式。例句如下，表示将整数8赋值给x这个变量。
x=8;
注意：在Javascript里，要判断两个值是否相等，不用等号，而是用两个等号来表示(==)。例句如下，表示x等于8。
x==8

Javascript变量

关键词：Javascript变量

什么是变量？

变量是用来临时存储数值的容器。在程序中，变量存储的数值是可以变化的。

变量的声明(DeclaringVariables)

在使用一个变量之前，首先要声明这个变量。Javascript里，使用var来声明变量。声明变量有以下几种方法：1.一次声明一个变量。例句如下：
vara;
2.同时声明多个变量，变量之间用逗号相隔。例句如下：
vara,b,c;
3.声明一个变量时，同时赋予变量初始值。例句如下：
vara=2;
4.同时声明多个变量，并且赋予这些变量初始值，变量之间用逗号相隔。例句如下：
vara=2,b=5;

变量的命名规则

变量名可以是任意长度。变量名必须符合下列规则：变量名的第一个字符必须是英文字母，或者是下划线符号(underscore)_变量名的第一个字母不能是数字。其后的字符，可以是英文字母，数字，和下划线符号符号(underscore)_变量名不能是Javascript的保留字(参见Javascript保留字)。注意：Javascript代码是区分大小写的(case-sensitive)。变量myname和MyName表示的是两个不同的变量。写错变量的大小写，是初学者最常见的错误之一。

Javascript常用运算符(Operators)

关键词：Javascript常用运算符

算术运算符

运算符运算符说明示例示例说明
+加法x+y如果x为整数2,y为整数5,x+y等于7如果x为字符串"text1",y为字符串"fun",x+y则等于"text1fun"
-减法x-y
*乘法x*y
/除法x/y
%两者相除求余数x%y如果x等于10,y等于3,x%y结果等于1
++递增x++如果x等于10,x++等于11
--递减y--如果y等于10,y--等于9

逻辑运算符

运算符运算符说明示例示例说明
==等于x==y如果x等于2,y等于2,则x==y
===全等于(值相等,数据类型也相等)x===y如果x等于整数2,y为字符串"2",则x===y不成立
>大于x>y
>=大于等于x>=y
<小于x<y
<=小于等于x<=y
!=不等于x!=y
!==不全等于x!==y
&&与(and)x<10&&y>1
!非(not)!(x==y)
||或(or)x==8||y==8

赋值运算符

运算符运算符说明示例示例说明
＝赋值x=5将整数5这个值赋给变量x
注意：请注意赋值(=)和等于(==)的区别。

Javascript条件语句

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

单项条件结构(if条件语句)

If条件语句的语法如下：
if(expression)
{
statement1
}
这句语法的含义是，如果符合expression条件，就执行statement1代码，反之，则不执行statement1代码。下面的这个Javascript示例就用到了Javascript的if条件语句。首先用.length计算出字符串What'sup?的长度，然后使用if语句进行判断，如果该字符串长度<100，就显示"该字符串长度小于100。"。
<html>
<head><title>一个使用到if条件语句的Javascript示例</title></head>
<body>
<scripttype="text/javascript">
varvText="What'sup?";
varvLen=vText.length;
if(vLen<100)
{
document.write("<p>该字符串长度小于100。</p>")
}
</script>
</body>
</html>
演示示例

双向条件结构(if...else条件语句)

If...else条件语句的语法如下：
if(expression)
{
statement1
}
else
{
statement2
}
这句语法的含义是，如果符合expression条件，则执行statement1代码，反之，则执行statement2代码。下面的Javascript示例使用了if...else条件语句判断，如果vHour小于17，显示"日安"，反之则显示"晚安"。
<html>
<head><title>使用if...else条件语句的Javascript示例</title></head>
<body>
<scripttype="text/javascript">
varvDay=newDate()
varvHour=vDay.getHours()
if(vHour<17)
{
document.write("<b>日安</b>")
}
else
{
document.write("<b>晚安</b>")
}
</script>
</body>
</html>
演示示例

多项条件结构(switch条件语句)

Switch条件语句的语法如下：
switch(expression)
{
caselabel1:
statement1
break
caselabel2:
statement2
break
...
default:
statementdefault
}
这句语法的含义是，如果expression等于label1，则执行statement1代码；如果expression等于label2，则执行statement2代码；以此类推。如果expression不符合任何label，则执行default内的statementdefault代码。Switch条件语句中的break，表示switch语句结束。如果没有使用一个break语句，则多个label块被执行。下面的Javascript示例使用了switch条件语句，根据星期天数的不同，显示不同的话。
<html>
<head><title>使用swith条件语句的Javascript示例</title></head>
<body>
<scripttype="text/javascript">
vard=newDate()
theDay=d.getDay()
switch(theDay)
{
case5:
document.write("<b>总算熬到星期五了。</b>")
break
case6:
document.write("<b>哈哈，周末啦！</b>")
break
case0:
document.write("<b>明天又要上班，想想就烦。</b>")
break
default:
document.write("<b>每个工作日慢得都象蜗牛爬啊！</b>")
}
</script>
</body>
</html>
演示示例

Javascript循环语句

关键词：Javascript循环语句在一般情况下，程序语句的执行是按照其书写顺序来执行的。前面的代码先执行，后面的代码后执行。但是这种简单的自上而下的单向流程只适于用一些很简单的程序。大多数情况下，需要根据逻辑判断来决定程序代码执行的优先顺序。要改变程序代码执行的先后顺序，任何编程语言都需要用到条件语句和循环语句，Javascript也不例外。这一节我们主要介绍Javascript循环语句。Javascript循环语句有以下几种：在循环的开头测试表达式(while循环语句)在循环的末尾测试表达式(do...while循环语句)对对象的每个属性都进行操作(for...in循环语句)由计数器控制的循环(for循环语句)

使用for循环语句

for循环语句指定了一个计数器变量，一个测试条件，和更新计数器的行为。每次循环重复之前，都要测试条件。如果测试成功，则执行循环内的代码；如果测试不成功，则不执行循环内的代码，而是执行紧跟在循环后的第一行代码。当执行该循环时，计数器变量在下次重复循环前被更新。如果循环条件一直不满足，则永不执行该循环。如果条件一直满足，则会导致无限循环。前一种，在某种情况下是需要的，但是后一种，基本不应发生，所以写循环条件时一定要注意。for循环语句示例代码：
[code]
演示for循环语句示例
使用for...in循环语句
Javascript提供了一种特别的循环方式来遍历一个对象的所有用户定义的属性或者一个数组的所有元素。for...in循环中的循环计数器是一个字符串，而不是数字。它包含了当前属性的名称或者表示当前数组元素的下标。for...in循环语句示例代码：
[code]
演示for...in循环语句示例
使用while和do...while循环语句
while循环和for循环类似。其不同之处在于，while循环没有内置的计数器或更新表达式。如果你希望控制语句或语句块的循环执行，不只是通过“运行该代码n次”这样简单的规则，而是需要更复杂的规则，则应该用while循环。注意：由于while循环没有显式的内置计数器变量，因此比其它类型的循环更容易产生无限循环。此外，由于不易发现循环条件是在何时何地被更新的，很容易编写一个实际上从不更新条件的while循环。因此在编写while循环时应特别小心。while循环语句示例代码：
演示while循环语句示例在JScript中还有do...while循环与while循环相似，不同处在于它总是至少运行一次，因为是在循环的末尾检查条件，而不是在开头。do...while循环语句示例：
演示do...while循环语句示例
使用break和continue语句
在Javascript中，当某些条件得到满足时，用break语句来中断一个循环的运行。（请注意，也用break语句退出一个switch块。参见Javascript条件语句）。如果是一个for或者for...in循环，在更新计数器变量时使用continue语句越过余下的代码块而直接跳到循环的下一次重复中。break示例代码：
//设函数BreakTest参数breakpoint值为23，得到从1加到22的合计。
document.write(BreakTest(23))
演示break示例continue示例代码：
演示continue示例
[/code][/code]
Javascript保留字
关键词：Javascript保留字Javascript保留字(ReservedWords)是指在Javascript语言中有特定含义，成为Javascript语法中一部分的那些字。Javascript保留字是不能作为变量名和函数名使用的。使用Javascript保留字作为变量名或函数名，会使Javascript在载入过程中出现编译错误。Javascript保留字列表：
breakdeletefunctionreturntypeof
casedoifswitchvar
catchelseinthisvoid
continuefalseinstanceofthrowwhile
debuggerfinallynewtruewith
defaultfornulltry
Javascript未来保留字(JavascriptFutureReservedWords)
Javascript还有一些未来保留字，这些字虽然现在没有用到Javascript语言中，但是将来有可能用到。Javascript未来保留字列表：
abstractdoublegotonativestatic
booleanenumimplementspackagesuper
byteexportimportprivatesynchronized
charextendsintprotectedthrows
classfinalinterfacepublictransient
constfloatlongshortvolatile

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航