编辑“PHP-Javascript”

<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>导航:</strong> [[PHP#PHP教程|上一页]] | {{template:开发语言导航}}</span>
<div style="clear:both;"></div>

== Javascript简介 ==
[[Javascript]]是一种解释性的，基于对象的脚本语言(an interpreted, object-based scripting language)。  <br>



[[HTML]][[网页]]在互动性方面能力较弱，例如下拉菜单，就是用户点击某一菜单项时，自动会出现该菜单项的所有子菜单，用纯HTML网页无法实现；又如验证HTML表单(Form)提交信息的有效性，用户名不能为空，密码不能少于4位，邮政编码只能是数字之类，用纯HTML网页也无法实现。要实现这些功能，就需要用到Javascript。 <br>



Javascript是一种脚本语言，比HTML要复杂。不过即便你先前不懂编程，也不用担心，因为Javascript写的程序都是以源代码的形式出现的，也就是说你在一个网页里看到一段比较好的Javascript代码，恰好你也用得上，就可以直接拷贝，然后放到你的网页中去。正因为可以借鉴、参考优秀网页的代码，所以让Javascript本身也变得非常受欢迎，从而被广泛应用。原来不懂编程的人，多参考Javascript示例代码，也能很快上手。 <br>



Javascript主要是基于客户端运行的，用户点击带有Javascript的网页，网页里的Javascript就传到浏览器，由浏览器对此作处理。前面提到的下拉菜单、验证表单有效性等大量互动性功能，都是在客户端完成的，不需要和Web Server发生任何数据交换， <br>
因此，不会增加Web Server的负担。<br>



几乎所有浏览器都支持Javascript，如Internet Explorer(IE)，Firefox， Netscape， Mozilla， Opera等。 <br>



简单的Javascript入门示例 <br>



我们先来看一个最简单的例子，代码如下： <br>



<html> <br>



<head><title>一个最简单的Javascript示例(仅使用了document.write)</title></head> <br>



<body> <br>



<script type="text/javascript"> <br>



document.write(Hello, World!); <br>



</script> <br>



</body> <br>
 


</html> <br>





在HTML网页里插入Javascript语句，应使用HTML的<script>。<script>这个tag有个属性叫type，type="text/javascript"表示插入<script></script>其中的为Javascript语句。 <br>



上面的例子中，使用了document.wirte，这是Javascript中非常常用的语句，表示输出文本。 <br>



我们还可以将这个例子写得更加复杂写，不但输出文本，而且输出带HTML格式的文本。代码如下： <br>



<script type="text/javascript">  <br>



document.write("Hello, World!");  <br>



</script>  <br>





在参考别人的Javascript代码时，你也许会看到<script>里写的不是 type="text/javascript"，而是language="javascript"。目前这两种方法都可以表示<script></script>里的代码是Javascript。其中language这个属性在W3C的HTML标准中，已不再推荐使用。<br>



----


== Javascript写在哪里 ==




Javascript程序可以放在： <br>



· <br>
HTML网页的<body></body>里  <br>



· <br>
HTML网页的<head></head>里  <br>



· <br>
外部.js文件里  <br>



Javascript在<body></body>之间 <br>


当浏览器载入网页Body部分的时候，就执行其中的Javascript语句，执行之后输出的内容就显示在网页中。 <br>



<html>  <br>
  


<head></head>  <br>



<body>  <br>



<script type="text/javascript">  <br>
 


....  <br>



</script>  <br>



</body>  <br>



</html> <br>





Javascript在<head></head>之间 <br>



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



<html> <br>



<head> <br>



<script type="text/javascript">  <br>
 


....  <br>
  


</script>  <br>



</head>  <br>



<body>  <br>



</body>  <br>



</html>  <br>





----


== Javascript放在外部文件里 ==




假使某个Javascript的程序被多个HTML网页使用，最好的方法，是将这个Javascript程序放到一个后缀名为.js的文本文件里。  <br>



这样做，可以提高Javascript的复用性，减少代码维护的负担，不必将相同的Javascript代码拷贝到多个HTML网页里，将来一旦程序有所修改，也只要修改.js文件就可以，不用再修改每个用到这个Javascript程序的HTML文件。 <br>



在HTML里引用外部文件里的Javascript，应在Head里写一句<script src="文件名"></script>，其中src的值，就是Javascript所在文件的文件路径。示例代码如下： <br>



<html>  <br>


<head>  <br>
 


<script src=""></script>  <br>
 


</head> <br>



<body>  <br>



</body>  <br>



</html> <br>




----

== 编写 Javascript 代码 ==




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



----


== 语句 (Statements) ==




一个 Javascript 程序就是一个语句的集合。一句 Javascript 语句相当于一句完整的句子。Javascript 语句将表达式 (expressions)用某种方式组合起来，得以完成某项任务。<br>



一句语句 (statement) 包含一个或多个表达式 (expressions)，关键词 (keywords) 和运算符 (operators)。一般来说，一句语句的所有内容写在同一行内。不过，一句语句也可以写成多行。此外，多句语句也可以通过用分号 (;) 分隔，写在同一行内。<br>



建议：将每句语句以显示的方式结束，即在每个语句最后加分号 (;) 来表示该句语句的结束。 <br>



以下是几个语句的例子：<br>



aBird = "Robin"; <br>





上面这句语句表示将 "Robin" 这个字符串赋值给变量 aBird。<br>



var today = new Date(); <br>





上面这句语句表示将今天的日期值赋值给变量 today。<br>



----


== 语句块 (Blocks) ==




通常来说，用 {} 括起来的一组 Javascript 语句称为语句块 (blocks)。语句块通常可以看做是一句单独的语句。也就是说，在很多地方，语句块可以作为一句单个的语句被其它 Javascript 代码调用。但是以 for 和 while 开头的循环语句例外。另外要注意的是，<br>



注意：在语句块里面的每句语句以分号 (;) 表示结束，但是语句块本身不用分号。<br>



语句块 (blocks) 通常用于函数和条件语句中。<br>



下面的例句中，{} 中间的 5 句语句构成一个语句块 (block)，而最后三行语句，不在语句块内。<br>



function convert(inches) {<br>



feet = inches / 12; <br>



miles = feet / 5280;<br>



nauticalMiles = feet / 6080;<br>



cm = inches * 2.54;<br>



meters = inches / 39.37;<br>



}<br>



km = meters / 1000; <br>



kradius = km;<br>



mradius = miles;<br>




----



== 注释 (Comments) ==




为了程序的可读性，以及便于日后代码修改和维护时，更快理解代码，你可以在 Javascript 程序里为代码写注释(comments)。<br>



在 Javascript 语言里，用两个斜杠 // 来表示单行注释。见例句：<br>



aGoodIdea = "Comment your code thoroughly."; // 这是单行注释。<br>





多行注释则用 /* 表示开始， */ 表示结束。见例句：<br>



/*<br>



这是多行注释<br>
行一。<br>



这是多行注释<br>
行二。<br>



*/<br>





推荐使用多行的单行注释来替代多行注释，这样有助于将代码和注释区分开来。<br>



----


== 表达式 (Expressions) ==




Javascript 表达式 (expressions) 相当于 javascript 语言中的一个短语，这个短语可以判断或者产生一个值，这个值可以是任何一种合法的 Javascript 类型 - 数字，字符串，对象等。最简单的表达式是字符。<br>



表达式示例：<br>



3.9                       // 数字字符<br>



"Hello!"                  // 字符串字符<br>



false                     // 布尔字符<br>



null                      // null 值字符<br>



{x:1, y:2}                // 对象字符 <br>



[1,2,3]                   // 数组字符 <br>



function(x){return x*x;}  // 函数字符 <br>





以下是比较复杂的表达式示例：  <br>



var anExpression = 3 * (4 / 5) + 6; <br>



var aSecondExpression = Math.PI * radius * radius;  <br>



var aThirdExpression = aSecondExpression + "%" + anExpression;  <br>



var aFourthExpression = "(" + aSecondExpression + ") % (" + anExpression + ")";  <br>





----


== 赋值和等于 (Assignments and Equality) ==



 
Javascript 语言中使用等号 (=) 表示变量赋值。等号左边的值可以是： <br>



·
变量  <br>



·
数组元素  <br>



·
对象属性 <br>



等号右边的值可以是任何类型的值，包括表达式。例句如下，表示将整数 8 赋值给 x 这个变量。 <br>
 


x = 8; <br>








'''注意：''' <br>
在 Javascript 里，要判断两个值是否相等，不用等号，而是用两个等号来表示 (==)。 <br>
例句如下，表示 x 等于 8。  <br>



x == 8  <br>



----


== Javascript变量(Javascript Variables) ==




----


=== 什么是变量？ ===




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



----


=== 变量的声明(Declaring Variables) ===




在使用一个变量之前，首先要声明这个变量。Javascript里，使用var来声明变量。 <br>



声明变量有以下几种方法： <br>



1. 一次声明一个变量。例句如下： <br>



var a; <br>





2. 同时声明多个变量，变量之间用逗号相隔。例句如下： <br>



var a, b, c; <br>





3.声明一个变量时，同时赋予变量初始值。例句如下： <br>



var a=2; <br>





4. 同时声明多个变量，并且赋予这些变量初始值，变量之间用逗号相隔。例句如下： <br>



var a=2, b=5; <br>





----



=== 变量的命名规则 ===





变量名可以是任意长度。变量名必须符合下列规则： <br>



·
变量名的第一个字符必须是英文字母，或者是下划线符号(underscore)_  <br>



·
变量名的第一个字母不能是数字。其后的字符，可以是英文字母，数字，和下划线符号符号(underscore)_  <br>



·
变量名不能是Javascript的保留字。  <br>






注意：Javascript代码是区分大小写的(case-sensitive)。变量myname和MyName表示的是两个不同的变量。写错变量的大小写，是初学者最常见的错误之一。 <br>






----


== Javascript条件语句 ==





在一般情况下，程序语句的执行是按照其书写顺序来执行的。前面的代码先执行，后面的代码后执行。但是这种简单的自上而下的单向流程只适于用一些很简单的程序。大多数情况下，需要根据逻辑判断来决定程序代码执行的优先顺序。要改变程序代码执行的先后顺序，任何编程语言都需要用到条件语句和循环语句，Javascript也不例外。  <br>






Javascript条件语句有以下几种： <br>



·
单项条件结构 (if条件语句)  <br>



·
双向条件结构 (if...else条件语句)   <br>



·
多项条件结构 (switch条件语句) <br>



单项条件结构 (if条件语句) <br>



If条件语句的语法如下： <br>



if (expression) <br>
 



{ <br> 




statement1 <br>




}  <br>





这句语法的含义是，如果符合expression条件，就执行statement1代码，反之，则不执行statement1代码。 <br>



下面的这个Javascript示例就用到了Javascript的if条件语句。首先用.length计算出字符串What's up?的长度，然后使用if语句进行判断，如果该字符串长度<100，就显示"该字符串长度小于100。"。 <br>
 


<html> <br>
 


<head><title>一个使用到if条件语句的Javascript示例</title></head> <br>



<body> <br>
 


<script type="text/javascript">  <br>



var vText = "What's up?"; <br>



var vLen = vText.length; <br>



if (vLen < 100) <br>



{ <br>



document.write("<p> 该字符串长度小于100。</p>")  <br>



} <br>



</script>  <br>



</body>  <br>


</html>  <br>





'''演示示例'''



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



If...else条件语句的语法如下： <br>



if (expression) <br>



{ <br>



statement1 <br> 
 


} <br>



else <br>



{ <br>



statement2 <br>



} <br>





这句语法的含义是，如果符合expression条件，则执行statement1代码，反之，则执行statement2代码。 <br>



下面的Javascript示例使用了if...else条件语句判断，如果vHour小于17，显示"日安"，反之则显示"晚安"。 <br>



<html> <br>



<head><title>使用if...else条件语句的Javascript示例</title></head> <br>



<body>  <br>



<script type="text/javascript">  <br>



var vDay = new Date()  <br>



var vHour = vDay.getHours()  <br>



if (vHour < 17)  <br>



{ <br>



document.write("<b>日安</b>")  <br>



} <br>
 


else  <br>



{  <br>



document.write("<b>晚安</b>") <br>



} <br>



</script> <br>



</body> <br>



</html> 
<br>




多项条件结构 (switch条件语句) <br>



Switch条件语句的语法如下： <br>



switch (expression)  <br>



{ <br>



case label1 : <br> 



statement1 <br>




break  <br>



case label2 : <br>



statement2 <br>




break <br>



... <br>
  


default : <br>



statementdefault <br>



}  <br>





这句语法的含义是，如果expression等于label1，则执行statement1代码；如果expression等于label2，则执行statement2代码；以此类推。如果expression不符合任何label，则执行default内的statementdefault   <br>




Javascript 循环语句 (Javascript Loop Statements)



在一般情况下，程序语句的执行是按照其书写顺序来执行的。前面的代码先执行，后面的代码后执行。但是这种简单的自上而下的单向流程只适于用一些很简单的程序。大多数情况下，需要根据逻辑判断来决定程序代码执行的优先顺序。要改变程序代码执行的先后顺序，任何编程语言都需要用到条件语句和循环语句，Javascript 也不例外。



这一节我们主要介绍 Javascript 循环语句。



Javascript 循环语句有以下几种：



·
在循环的开头测试表达式 (while 循环语句) 



·
在循环的末尾测试表达式 (do...while 循环语句) 



·
对对象的每个属性都进行操作 (for...in 循环语句) 



·
由计数器控制的循环 (for 循环语句)



使用 for 循环语句



for 循环语句指定了一个计数器变量，一个测试条件，和更新计数器的行为。



每次循环重复之前，都要测试条件。如果测试成功，则执行循环内的代码；如果测试不成功，则不执行循环内的代码，而是执行紧跟在循环后的第一行代码。当执行该循环时，计数器变量在下次重复循环前被更新。



如果循环条件一直不满足，则永不执行该循环。如果条件一直满足，则会导致无限循环。前一种，在某种情况下是需要的，但是后一种，基本不应发生，所以写循环条件时一定要注意。



for 循环语句示例代码：



<html>



<head><title>一个使用到for循环的Javascript示例</title></head>



<body>



<p>



<script type="text/javascript">



for (i = 0; i <= 5; i++)



{



document.write(i)



document.write("<br>")



}



</script>



</p>



</body>



</html>







----



== 使用 for...in 循环语句 ==




Javascript 提供了一种特别的循环方式来遍历一个对象的所有用户定义的属性或者一个数组的所有元素。for...in 循环中的循环计数器是一个字符串，而不是数字。它包含了当前属性的名称或者表示当前数组元素的下标。<br>



----


=== for...in 循环语句示例代码 ===




<html><br>



<head><title>一个使用到for...in循环的Javascript示例</title></head><br>



<body><br>



<script type="text/javascript"><br>



// 创建一个对象 myObject 以及三个属性 sitename, siteurl, sitecontent。<br>



var myObject = new Object();<br>



myObject.sitename = "站长百科
";<br>



myObject.siteurl = "blabla.cn";  <br>



myObject.sitecFONT-SIZE: 9pt; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Courier New'; mso-hansi-font-family: 'Courier New'; mso-bidi-font-family: 'Courier New'; mso-font-kerning: 0pt">网页教程代码图库的中文站点";  <br>



//遍历对象的所有属性  <br>



for (prop in myObject) <br>



{  <br>



document.write("属性 '" + prop + "' 为 " + myObject[prop]);  <br>



document.write("<br>");  <br>



}  <br>



</script>  <br>



</body> <br>



</html>  <br>






----

=== 使用 while 和 do...while 循环语句 ===




while 循环和 for 循环类似。其不同之处在于， while 循环没有内置的计数器或更新表达式。如果你希望控制语句或语句块的循环执行，不只是通过 “运行该代码 n 次”这样简单的规则，而是需要更复杂的规则，则应该用 while 循环。    <br>


注意：由于 while 循环没有显式的内置计数器变量，因此比其它类型的循环更容易产生无限循环。此外，由于不易发现循环条件是在何时何地被更新的，很容易编写一个实际上从不更新条件的 while 循环。因此在编写 while 循环时应特别小心。  <br>



while 循环语句示例代码：  <br>



<html>  <br>



<head><title>一个使用到while循环的Javascript示例</title></head>  <br>



<body>  <br>



<p>  <br>



<script type="text/javascript">  <br>



i = 0  <br>



while (i <= 5)  <br>



{  <br>



document.write(i + "<br>")  <br>



i++   <br>



}  <br>


 
</script>  <br>



</p>  <br>



</body>  <br>



</html>  <br>








在 JScript 中还有 do...while 循环与 while 循环相似，不同处在于它总是至少运行一次，因为是在循环的末尾检查条件，而不是在开头。  <br>



do...while 循环语句示例：  <br>



<html>  <br>



<head><title>一个使用到do...while循环的Javascript示例</title></head>  <br>



<body>  <br>
 


<p>  <br>



<script type="text/javascript">  <br>


<P class=MsoNormal style="BORDER-RIGHT: medium none; PADDING-RIGHT: 0cm; BORDER-TOP: medium none; PADDING-LEFT: 0cm; BACKGROUND: #f5fff5; PADDING-BOTTOM: 0cm; MARGIN: 1.5pt 0cm; BORDER-LEFT: medium none; PADDING-TOP: 0cm; BORDER-BOTTOM: medium none; TEXT-ALIGN: left; mso-pagination: widow-orphan; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt   <br>



[[category:PHP教程]]