在网页中加入JavaScript.docVIP

在网页中加入 JavaScript要在你的网页中使用 JavaScript ，你首先必须要知道该将它放在哪儿。其实很简单，只要在你的网页（HTML文件）中插入 和 标记对，你就可以在这两个标记队之间插入你的 JavaScript 代码了： alert(Hello world!); 另外，你也可以将 JavaScript 代码放在另一个单独的文件里，然后在网页（HTML文件）中使用 “SRC= 此单独文件的路径/地址（URL）”来使用此单独文件里的 JavaScript 程序代码。一般将这个单独的文件保存为扩展名为 .JS 的文件： 你可以在一个 HTML 文件中使用 标记对任意多次。 虽然在通常情况下你都会将所有代码放在 HTML 文件的某一处，但有些时候为了保证你的JavaScript程序能够正确运行，你不得不将它们分散地放在 HTML 文件的多个地方。 不管你是在 HTML 文件中直接插入代码还是通过外部的单独的文件来使用 JavaScript ，通常都是将 标记对放在 和 标记对之间。这样能够保证在你的网页被下载到客户端后开始执行 JavaScript 的时候你的 JavaScript 代码也已经被下载到客户端了。 这同时也是放置你的 JavaScript 函数的好地方，如果你想要某些代码在你的网页显示出来之后才执行的话，你最好将这些代码放在函数里，等网页显示以后再通过调用函数来执行它们，请看示例。 另外一些时候，你有可能需要将你的脚本代码放在 和 标记对之间。这样做没什么不对的，因为如果你想要通过 JavaScript 代码来生成网页中的 HTML 语句，你就非常需要这样做，请看示例。 JavaScript 脚本标记 标记还可以通过“ LANGUAGE = JavaScript 的版本”语句来指定所要使用的 JavaScript 的版本， “=”号后边的值可以是：JavaScript、JavaScript1.1 或者 JavaScript1.2。大部分的浏览器都会自动识别它所支持的 JavaScript 的版本，而忽略它不支持的 JavaScript 。 你可以针对不同版本的浏览器使用不同的 JavaScript 脚本代码，下边的列表中列出了不同版本的 Netscape 浏览器所支持的不同版本的 JavaScript： JavaScript - Netscape 2.0 JavaScript1.1 - Netscape 3.0 JavaScript1.2 - Netscape 4.0 所以对于 Netscape 2.0 浏览器，它将会忽略标记 中定义的 JavaScript1.2 版本的脚本代码，但是 Netscape 4.0 将会执行此版本的脚本代码（同时也可以执行前边两个版本的脚本代码）。 你还可以在同一个网页（HTML 文件）中通过 标记使用不同版本的 JavaScript 代码： function f1() / 旧版本的 JavaScript 代码。 . function f1() / JavaScript 1.2 版的代码。 . 在这个例子里，Netscape 2.0 浏览器将会执行第一个 . 标志对之间的函数 f1() 而忽略第二个 . 标志对之间的函数 f1() 。而对于Netscape 4.0 浏览器来说，它将会对两个 f1() 函数都进行处理，因为它支持这两个版本的 JavaScript，但是由于两个函数名字相同，浏览器会自动使用第二个函数 f1() 来覆盖掉第一个函数 f1()，因此执行的结果应该是第二个函数 f1() 的执行结果。 想要了解更多这方面的信息请参考：Netscapes JavaScript Reference. JavaScript 语法基础 在你开始编写代码之前，你必须知道一些基本的 JavaScript 语法和结构。 JavaScript 语法与 C/C+、Java 的语法很相似，如果你想要了解非常详尽的语法，可以参考 Netscapes JavaScript Reference 或者 Microsofts JScript Reference ，在那里你可以看到很多关于 JavaScript 语句、运算符、内建函数等等的内容列表，而我们这里只是讲一些在你开始学习 JavaScript 的时候需要掌握的一些基础语法知识！ 【变量】 变量的声明使用关键字 var ，变量名可以是任意长度的字母、数字和下划线组成（“_”），同时变量名第一个字符不能是数字。注意：JavaScript 是对大小写敏感的，也就是说去分大小写，如变量 count 和变量 Count 是两个不同的变量！ 在函数外边声明的变量是全局变量，在脚本代码或函数中的任何地方都可以对全局变量进行访问和使用。需要注意的是：在函数外边声明变量的时候，关键字 var 是可选的（即可用可不用，你可以直接给一个没有被声明的变量赋值）， 但是如果你在一个函数中想要使用一个局部变量（即变量的有效使用范围只是在函数里边），而且这个变量与函数外边的一个全局变量具有相同的变量名，那么你就必须在函数里边通过 var 来重新声明这个变量，这个变量亦即是一个局部变量。 下边是一些例子： var text; var high_score; var count3 = 1; var ErrorMessage = Connect to host failed. var daysLeft = 5.7; var 82much = true; / 这行代码是有语法错误的。 【字符串】 JavaScript 中使用使用但英文的单引号（）或双引号（）将字符串括起来。如果你想在字符串中使用引号的话，只要在引号前边加上“”号即可，请看下边示例： var text1 = Hello world.; var text2 = Hello again.; var text3 = Dont click here.; var text4 = I said No; / 这行代码是有语法错误的，因为双引号里边又有双引号. var text5 = I said No; / text5 为: I said No. var text6 = I said No; / text6 为: I said No. 【运算操作符和表达式】 JavaScript 大部分的运算符和表达式都和 C/C+、Java 是一样的，例如，下边的语句都是合法： total += 4; i+; msg = Error code + code; / 字符串合并 【语句】 JavaScript 大部分的语法也是和 C/C+、 Java 一样的，请看下边列表： 注释 - 使用/ 来注释一个单行, /* 和 */ 可以注释多行； 循环 - for、do、while等等； 条件语句 - if.then.else；switch.case； 对象 - new、this、with 等等。 【函数】 使用 function 关键字来定义一个函数： function name(arg1, arg2, .) JavaScript statements. 函数名必须符合变量名的命名规则，调用函数的时候，使用函数名以及函数需要的参数即可： var w = 5; var h = 3; setDimensions(w, h); 正如我们前边所讲的，函数最好是放在 . 标记对之间，那样可以保证当任何语句调用函数的时候函数已经被下载到客户端了，这样才不会出错，否则可能会产生找不到函数之类的错误！ 在函数中可以使用 return 语句返回一些值，例如： function add(x, y) return x + y; . var total = add(7, 10); 执行你的代码 当浏览器下载(Load)一个页面时，任何嵌在网页中的 JavaScript 代码将会在浏览器解释执行网页的时候执行。实际上，JavaScript 代码可能会在图片(images)、背景声音(background sound)或页面的剩余部分下在完成之前执行。 显然，这样可能会发生一些问题。在这个 在线示例 中，我们试图通过 document.linkColor 对象获得用于超文本链接(hypertext links)的颜色，第一次尝试的代码是在 . 标记对之间，第二次尝试是在 . 标志对之间，下边的是简化后的源代码： / 获得页面超链接的颜色. var lc1 = document.linkColor; / 获得页面超链接的颜色. var lc2 = document.linkColor; / 显示出颜色的 RGB 十六进制值. document.writeln(link color: + lc1 + ); document.writeln(link color: + lc2); 此例运行的结果如下： link color: #0000ff link color: #ff0000 在第一次尝试中，超链接的颜色是浏览器默认的蓝色 #0000ff(或是其它颜色，这取决于你对浏览器的设置)，然而超链接的颜色在 标记中却被修改/设置了(修改处：link=#ff0000)，改成了红色(#ff0000)，在 被下载之前获得的颜色值 lc1 不是 #ff0000 而是浏览器的默认值 #0000ff；我们的第二次尝试是在 标记已经被下载完成的情况下获得超链接颜色的，所以获得的颜色是经过 修改/设置后的颜色 #ff0000 (即 lc2 的值)。 对于函数中的代码，只有调用这个函数的时候才会执行，但是你知道应该在什么时候调用函数吗？请看我们的下一个主题：事件。 事件 浏览器可以识别很多的事件，例如“页面下载(Load)完成”这一事件，“用户鼠标移动到超链接或按钮上”这一事件等等。这也就给你提供了一些方便，你可以通过捕捉事件来执行相应的 JavaScript 代码。 一种捕捉事件的方法是定义一个事件句柄，这是针对 HTML 标记对象而言的，不同的 HTML 标记对应不同的对象，不同的这些对象又对应不同的时间句柄 (可以参照下边的表格)。但是并不是所有的浏览器都支持所有相同的事件，我们这里所有例子中使用到的事件都是被 Netscape 和 IE 这两种浏览器所共同支持的。 【定义一个事件句柄】 定义一个事件句柄其实很简单，就是将 事件名称 和 事件触发是要执行的 JavaScript 代码 一同加到 HTML 的标记中去即可，例如： 下一页 在这个例子中，用户每次点击一下“下一页”的超链接，就会触发 onclick 事件，然后在执行跟在 onclick 事件后的 JavaScript 代码：变量 count 增加 1 (count+)。 你可以在事件句柄后边使用任何合法的 JavaScript 脚本代码，如果你想使用多条 JavaScript 语句，那么使用分号(;)将各条语句隔开, 对于调用函数也是一样的。但是有一点要提醒你：在事件句柄后边的字符串中加入 JavaScript 代码的时候一定要注意如何正确使用引号。 【图片的翻滚效果(Rollover)】 看一下这个 在线示例 ，这个例子演示了被人熟知的通过鼠标移动来改变图片(Image)的效果，即图片的翻滚(Rollover)，注意：此例无法在 Internet Explorer 3.0 以及更早的版本中正确运行。 标记没有鼠标移动到其上边的事件句柄 onMouseOver，但是超链接标记 由这个事件句柄，所以我们在 标记两边分别加了标记 和 。 让我们看一下代码先。我们事先编写了一个函数 setImage() 用来改变图片，此函数需要两个参数，name 参数是要改变图片的 标记对象的名字，参数 source 是名字为 name 的 标记对象改变后（不是改变前的）的图片文件名，改变图片的关键在于改变图片对象 的 src 属性：function setImage(name, source) document.imagesname.src = source; return true; 下边是对每一个超链接使用了三个事件句柄，一个是鼠标移动到超链接上边是的事件 onMouseOver，一个是鼠标从超链接上边移走的时候触发的事件 onMouseOut，最后一个事件是鼠标点击超链接时触发的 onClick，代码如下： Item 1 onMouseOver 和 onMouseOut 事件都调用了函数 setImage() ，同时传递了参数 name 的值 (这个值在 标记中通过 “NAME= 图片英文名字” 来定义给出) 以及参数source 的值，这个值是我们想要改变后显示的图片的文件名 (包括路径/URL)，我们将在后边讲到对象的细节问题，在这里请集中注意力对付事件句柄的相关问题。 注意到 onClick 事件，触发后它只执行 return false 语句，用来告诉浏览器制止/忽略这个事件的默认动作，否则，浏览器将会执行超链接的默认动作，跟随超链接所指向的地址/URL，下载一个新的页面，而通过返回 false 值，我们可以告知浏览器不要这样做。当然，如果你想要让它转到另一个新的页面的话，你可以使用 return true 或者干脆就不要定义 onClick 事件（即删除上边语句中的 onClick 事件）。 【另一个实用的东东】 另一个实用的事件句柄是 onLoad 事件，它用于 标记中。在这里，为了说明这一个事件句柄，我们将以前的一个 在线示例 修改一下，将会得到同样的结果，请看下边代码： An example of using the onLoad event. Use your browsers RELOAD button to run the example again. 你可以试一下修改后的 在线示例 ，alert() 函数是 JavaScript 的一个内建函数（击JavaScript自带的函数），此函数的作用是显示一个消息框，消息框里的消息即是此函数的字符串参数，在这个例子里，消息框显示的是超链接颜色 document.linkColor 的 RGB 十六进制值，这个值是在 标记中定义的。 下边是 HTML 标记和对应的事件句柄的列表，列表中还附带说明了什么时候会触发相应的事件，如果想详细了