|
|
Javascript教程篇 第 1 集 JavaScript 是什麽？JavaScript 是一种新的描述语言, 此一语言可以被箝入 HTML 的文件之中。 透过 JavaScript 可以做到回应使用者的需求事件 (如： form 的输入) 而不用任何的网路来回传输资料, 所以当一位使用者输入一项资料时, 它不用经过传给伺服端 (server)处理, 再传回来的过程, 而直接可以被客户端 (client) 的应用程式所处理。你也可以想像成有一个可执行程式在你的客端上执行一样！目前已有一些写好的程式在Internet 上你可以连过去看看, 以下有一些计算器的例子, 在 Nescape 上。
如何执行 JaveScript？JavaScript 如何执行呢？Netscape 2.0 beta 3 版以上, 就可以执行 JavaScript 的功能了, 我们测试过至少beta 3 版以上可以, 其他种类的 WWW 浏览器如:Internet Expore 3.0也有此一功能。 以下我们就以一些例子来告诉你如何将 JavaScript 写在 HTML 文件中, 并且体会一下新语言的特性, 我们从第一个例子开始：如何用 JavaScript 印出一串文字至HTML 文件中： <html>
<head>
My first JavaScript!
</head>
<body>
<br>
This is a normal HTML document.
<br>
<script language="LiveScript">
document.write("这是以 JavaScript 印出的!")
</script>
<br>
Back in HTML again.
</body>
</html>
如果你使用的 WWW 浏览器是 Netscape 2.0 beta 3 以上版本的话, 那你就可以看到相关的结果, 而如果你的浏览器并非是可以支援 JavaScript 的话, 那看起来就会有一些怪怪的了, 以上范例的结果如下： This is a normal HTML document. 此一范例并没有太大的用处, 它只是要告诉你如何使用<script>的标签, 并如何将它置於 HTML 的文件之中而已, 这个新的标签你可以特它放在文件中的任何地方。 接下来下一个例子所要介绍的是有关函数 (function) 的使用。请放心, 函数并非很难懂的东西, 但它却相当有用。函数通常是在 HTML 文件中 <body ＞的部份被呼叫, 而理所当然地, 它最好事先被宣告并放在 HTML 文件中 <body＞的部份。好让在 <body＞ 部分中使用到函数时, 它已确定被读取住来。另外, <script＞ 标签的有关描述语法剖份, 你可以用注解的符号将它括起来, 以免旧版或无法读取 JavaScript 的浏览器读到, 而误会了意思！
<html>
<head>
<script language="LiveScript">
function pushbutton() {
alert("嗨! 你好");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Push me" onclick="pushbutton()">
</form>
</body>
</html>
如果你是使用 Netscape 2.0 beta 3 以上的浏览器, 那以上 JavaScript 语法部份的结果如下, 你可以试着按按钮看看有何结果产生！ 在范例 2 中, 将会产生一个按钮, 当你用滑鼠去按它的时候, 应该会出现一个视窗上面有“嗨! 你好”的字串, 如何？不错吧！这个结果是如何产生的呢？首先, 在 <head＞内的函数会被载入并存於内存中, 接着一个新的 <form＞标签 <input type ="button".....＞将产生一个接钮。然後, 你可以在後面看到 'onClick' 的指令, 这就是告诉浏览器, 当该按钮被按时, 应会执行onClick 後的函数 'pushbutton()', 而这个函数在刚刚程式被载入时就已安放在记忆体中了！请注意, 在这个函数中我们用到了个新东西－ alert 的 method, 是 JavaScript 事先定义好的, 它会以对话视窗产生内涵的讯息, 并有一"确定"(OK)的按钮。 JavaScript 定义了许多的 method, 你可以连至 Netscape 公司去获取较完整的讯息。我想这些 method 在不久的将来会有长长的一串可以够你学的, 不过目前的 method 也已经可以做出相当多东西了！ 接着下个例子将告诉你如何由一个输入型表格中读入使用者的输入资料, 事实上, 这也是加入个函数就可以达成的。
<html>
<head>
<script language="LiveScript">
<!-- hide script from old browsers
function getname(str) {
alert("哈罗! "+ str+"!");
}
// end hiding contents -->
</script>
</head>
<body>
Please enter your name:
<form>
<input type="text" name="name" onBlur="getname(this.value)" value="">
</form>
</body>
</html>
现在你可以试试结果如何： 在这个例子中又有新的东西了。首先, 让我们注意一下, 在语法中的注解部分(<!- ... -＞) 此部分即我们之前所提到的它可以避免旧版本或是不支援 JavaScript 的 WWW 浏览器因为不认识这些函数而产生错误。它的顺序应 该为 <script＞先, 接着为注解的开头 <!-, 然後是内容, 注解尾 -＞, 最後是 </script＞。 另外要注意的一点是, 语解尾那一行的开头双斜线 "//" , 不可以省略, 它代表了 JavaScript 的注解, 若省略了的话, -＞之前的字会被误认为是 JavaScript 的指令。 这个例子可以让使用者输入一段文字, 然後再输入完毕後经由 <input＞标签中的"onBlur" 事件函数侦知, 於是呼叫 Getname(Str)这个函数来加以取得输入字串, 并将它显示在对话视窗上！函数 Getname(this.value) 中的 "this.value" 是你在文字输入格式中所输入的值。 这个范例更是帅了！我们在 HTML 文件档完成了以後, 常会加上一行文件最後修改的日期, 现在你可不用担心每次都要去改或是忘了改了。你可以很简单的写一个如下的描述语法程式, 就可以自动的为你每次产生最後修改的日期了： <html>
<body>
This is a simple HTML- page.
<br>
Last changes:
<script language="LiveScript">
<!-- hide script from old browsers
document.write(document.lastModified)
// end hiding contents -->
</script>
</body>
</html>
以上的 document.lastModified 叁数在 Netscape 2.0 beta 2 版时是被写成documeut.lastmodified 的, 然而, 之後的版本就改为 document.lastModified, 所以注意一下 ；JavaScript 本身是会区分大小写的, lastmodified 与 lastModified在它看来是不同的结果。 最後, 在这一部分结束之前, 要提醒你一点, 像范例 4 , 的用法并非每一部机器都是一样的, 例如：PC 上跑得很正确的, 在工作站上不一定会有相同的结果, 所以, 或许你仍得测一测不同机器的结果才会有所定论。当然, 这一切是因为 JavaScript 还正在发展的原因, 最新的讯息还是得去拜访一下Netscape 公司才知道。也许你也不用奇怪, 当你隔周再来访时, JavaScript 可能又作了相当大的改变了呢！ 最後修改的日期： |
||||||||