JavaScript·JavaScript 第六集 -- 追寻梦想＞编程乐园

Javascript教程篇

第 6 集

许多网友问我一个有趣的问题: 如何用 mouse 按一下便可同时载入两页文件。基本上有三种方法可以达到这种功能。第一种方法是制作一个按钮, 让使用者按下後去启动一个能同时将两份文件载入不同frames或新视窗的函式 (function)。若您曾经看过此份简介文件的其它章节的话, 我相信您可以很轻易写出这种语法:

我们制作了三个 frame, 第一个 frame 中包含了一个按钮。请注意, 第一个 HTML 档案只是用来打开 frame 和给予每个 frame 一个名字。若您还不清楚 JavaScript 和frame 的关系, 可以先阅读第三章。不过在此还是照例让您瞧瞧原始码(不知您是否在很多电脑书籍中遇到一个相同的困扰, 那就是作者常把一些自认很简单的东西忽略不提, 结果那些东西正是读者搞不懂的地方! 所以, 若您对我提的东西已很了解, 请发挥一下您的耐性 :-)

frames2.html

<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
    <FRAMESET COLS="295,*"> 
  <FRAMESET ROWS="100%,*"> 
    <FRAME SRC="loadtwo.html" NAME="fr1"> 
      </FRAMESET> 
  <FRAMESET ROWS="75%,25%"> 
    <FRAME SRC="cell.html" NAME="fr2"> 
    <FRAME SRC="cell.html" NAME="fr3"> 
      </FRAMESET> 
</FRAMESET> 
</HTML>

第一个 frame 会载入 loadtwo.html 并产生一个按钮:

loadtwo.html

<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
  function loadtwo(page2, page3) {
     parent.fr2.location.href=page2;
     parent.fr3.location.href=page3;
}
// -->
</script>
</HEAD>
<BODY>
<FORM NAME="buttons">
     <INPUT TYPE="button" VALUE="同时载入两份文件"
      onClick="loadtwo('frtest1.html','frtest2.html')">
</FORM>
</BODY>
</HTML>

按下按钮後, 电脑会传递两个字串给 loadtwo() 并将之启动。由 loadtwo() 中可以看出, 第一个串是用来定义第二个 frame fr2所载入文件的位址和档案名。若您想定义另外的按钮来载入不同的文件, 您可以重复使用此函式。只要将文件的 URLs (addresses) 传给 loadtwo()即可。

接下来谈谈用 hyperlinks 同时载入两页文件的第二种方法。在 Internet 上您可以发现许多网页使用<a href="yourlink.html" onCLick="yourfunction()">来达到上述提及的功能。但此语法并不能在所有平台上均正常执行, 因此最好不要用此语法。现在我告诉您另一种写法: 我们可改用下述JavaScript 语法:

<a href="javascript:myfunction()">My Link</a>

此种方式非常简单而且在所有浏览器中均能正常执行。您只要写上 javascript: 并加上您想联结的函式名即可。若此函式名称设为 'loadtwo()' , 那您就可藉由按下此 hyperlink 来达到同时载入两份文件的目的了。

再接着谈谈用 mouse 按一下便可同时载入两页文件的第三种方法, 此方法可以以 hyperlinks 或按钮来执行。您可先在第二个frame 中载入一个 HTML 文件:
<a href="getfr2.html" target="fr2">请按这里!</a>
然後在此文件中(getfr2.html)加入 onLoad 这项指令, 用来触发第三个 frame 载入另一份文件。如此一来便可同时载入两份文件。getfr2.html 档的原始码如下 :

<HTML>
<BODY onLoad="parent.fr3.location.href='getfr3.html'; return true;">
文 件 内 容.....。
</body>
</html>

当然, 您必须在所有会被载入到第二个 frame 的文件中加入 onLoad 这项指令。

另一个常遇见的问题是如何开一个新视窗并载入文件? 我们想达到的效果是当使用者按一下 mouse 便会'弹'出一个新视窗。很简单, 只要在 <a href...> 中利用 target 这项特性就可达到此效果。例如 :
<a href="goanywhere.html" target="Resource Window">Go!</a>

现在我将谈谈在 JavaScript 中几种常用的运算子(operator)。运算子可以使您的 JavaScript 语法更精简。假设您想测试变数 x是否大於 3 且小於 10, 您可写成:

if (x>3) 
  if (x<10) doanything();

当满足 x>3 且 x<10 时, 就会执行doanything()。还有一种更精简的写法:

if (x>3 && x<10) doanything();

' &&' 称为 AND- 运算子。还有另一种被称为 OR- 运算子的东东可让您用来检视是否变数 x 等於 5 或变数 y 等於 17 :

if (x==5 || y==17) doanything();

当满足 x==3 或 y==17 时, 就会执行 doanything()。当然, 当两者皆成立时也会执行oanything()。
在 JavaScript 中是利用 == 来做比较的工作(其它尚有 <, >, <= 和 >=), 这些都和 C/C++ 的语法相同。另外单一 '=' 是用来将数值存入变数用的。 (在 Pascal 语法中将数值指定给变数是用:=, 而做比较是用单一的'=', 这和 JavaScript 语法有点不同)

若您想利用 '不等於' 这项特性, 您可以用!=。例如 : x != 17.

尚有许多可以精简您的 JavaScript 语法的运算子, 去翻翻 Netscape 的文件吧 !