JavaScript (基本教程)(2)

时间：2013-04-25 10:39 来源：网络整理作者：采集侠收藏

var w = 5; var h = 3; setDimensions(w, h); 正如我们前边所讲的，函数最好是放在 HEAD...../HEAD 标记对之间，那样可以保证当任何语句调用函数的时候函数已经被下载到客户端了，这样才不会出错，否则可能会产生找

var w = 5;
var h = 3;
setDimensions(w, h); 正如我们前边所讲的，函数最好是放在 <HEAD>.....</HEAD> 标记对之间，那样可以保证当任何语句调用函数的时候函数已经被下载到客户端了，这样才不会出错，否则可能会产生找不到函数之类的错误！

在函数中可以使用 return 语句返回一些值，例如：

function add(x, y) {
return x + y;
}
...
var total = add(7, 10);

执行你的代码

当浏览器下载(Load)一个页面时，任何嵌在网页中的 JavaScript 代码将会在浏览器解释执行网页的时候执行。实际上，JavaScript 代码可能会在图片(images)、背景声音(background sound)或页面的剩余部分下在完成之前执行。

显然，这样可能会发生一些问题。在这个中，我们试图通过 document.linkColor 对象获得用于超文本链接(hypertext links)的颜色，第一次尝试的代码是在 <HEAD>....</HEAD> 标记对之间，第二次尝试是在 <BODY>....</BODY> 标志对之间，下边的是简化后的源代码：

// 获得页面超链接的颜色.

var lc1 = document.linkColor;

</script>
</head>
<body bgcolor="#ffffff" text="#000000" link="#ff0000">
<font face="Arial,Helvetica" size=3>

// 获得页面超链接的颜色.

var lc2 = document.linkColor;

// 显示出颜色的 RGB 十六进制值.

document.writeln('link color: ' + lc1 + '<br>');
document.writeln('link color: ' + lc2);

</script>
</body>
</html>

此例运行的结果如下：

link color: #0000ff
link color: #ff0000 在第一次尝试中，超链接的颜色是浏览器默认的蓝色 #0000ff(或是其它颜色，这取决于你对浏览器的设置)，然而超链接的颜色在 <BODY> 标记中却被修改/设置了(修改处：link="#ff0000")，改成了红色(#ff0000)，在 <BODY> 被下载之前获得的颜色值 lc1 不是 #ff0000 而是浏览器的默认值 #0000ff；我们的第二次尝试是在 <BODY> 标记已经被下载完成的情况下获得超链接颜色的，所以获得的颜色是经过 <BODY> 修改/设置后的颜色 #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 以及更早的版本中正确运行。

<IMG> 标记没有鼠标移动到其上边的事件句柄 onMouseOver，但是超链接标记 <A> 由这个事件句柄，所以我们在 <IMG> 标记两边分别加了标记 <A HREF=...> 和 </A>。

让我们看一下代码先。我们事先编写了一个函数 setImage() 用来改变图片，此函数需要两个参数，name 参数是要改变图片的 <IMG> 标记对象的名字，参数 source 是名字为 name 的 <IMG> 标记对象改变后（不是改变前的）的图片文件名，改变图片的关键在于改变图片对象 <IMG> 的 src 属性：

function setImage(name, source) { 下边是对每一个超链接使用了三个事件句柄，一个是鼠标移动到超链接上边是的事件 onMouseOver，一个是鼠标从超链接上边移走的时候触发的事件 onMouseOut，最后一个事件是鼠标点击超链接时触发的 onClick，代码如下：

document.images[name].src = source;
return true;
}

onMouseOver 和 onMouseOut 事件都调用了函数 setImage() ，同时传递了参数 name 的值 (这个值在 <IMG> 标记中通过 “NAME= 图片英文名字” 来定义给出) 以及参数source 的值，这个值是我们想要改变后显示的图片的文件名 (包括路径/URL)，我们将在后边讲到对象的细节问题，在这里请集中注意力对付事件句柄的相关问题。