📄 javascr.html
字号:
<html>
<meta http-equiv="Content-Type" content="text/html; charset=gb_2312-80">
<title>网页教学网->>免费教程</title>
<link rel="stylesheet" type="text/css" href="samp.css">
</head>
<body background="backgr.gif">
<table border="0" WIDTH="750" valign=top>
<tr>
<td width="150" valign=top><br><br><br>
</td><td width="150">
</td><td width="450">
<br><h1 align="center" size="6">第 1 集</h1>
<HR WIDTH="100%" ALIGN="center" >
<p>
<h2>
JavaScript 是什麽？
</h2>
<p>
JavaScript 是一种新的描述语言，此一语言可以被箝入 HTML 的文件之中。<P>
透过 JavaScript 可以做到回应使用者的需求事件 (如： form 的输入) 而不用任何的网路<P>
来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端 (server)<P>
处理，再传回来的过程，而直接可以被客户端 (client) 的应用程式所处理。你也可<P>
以想像成有一个可执行程式在你的客端上执行一样！目前已有一些写好的程式在<P>
Internet 上你可以连过去看看，以下有一些计算器的例子，在 Nescape 上。<P>
<BR>
JavaScript 和 Java 很类似，但到底并不一样！ Java 是一种比 JavaScript 更复杂<P>
许多的程式语言，而 JavaScript 则是相当容易了解的语言。JavaScript 创作者<P>
可以不那麽注重程式技巧，所以许多 Java 的特性在 Java Script 中并不支援。
<P>
<HR WIDTH="80%" ALIGN="center" SIZE="2">
<br>
<h2>
<a name="run">
如何执行 JaveScript？
</h2>
<p>
JavaScript 如何执行呢？<P>
<B>Netscape 2.0 beta 3</B> 版以上，就可以执行 JavaScript 的功能了，我们测试过至少<P>
<B> beta 3</B> 版以上可以，或许<B> beta 2</B> 版就已经有此功能了（猜的）。但目前为止，<P>
除了<B> Netscape </B>外，似乎尚没有其他种类的 WWW 浏览器有此一功能。不过，<P>
资讯科技变化脚步是很快的，也许说著说著就有一大堆出来了。<P>
如果你没有 <B>Netscape Navigator 2.0</B> 的话，建议去取得该程式。目前最新版是 <P>
<B>Netscape 2.01</B> 版！而 Netscape 3.0 beta4 版都出来了 呢！
<p>
<HR WIDTH="80%" ALIGN="center" SIZE="2">
<br>
<a name="ex1"><FONT SIZE="+2" color=green> 范例 1：</FONT></a><P>
以下我们就以一些例子来告诉你如何将 JavaScript 写在 HTML 文件中，并且体会<P>
一下新语言的特性，我们从第一个例子开始：如何用 JavaScript 印出一串文字至<P>
HTML 文件中：
<pre>
<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>
</pre>
<p>
如果你使用的 WWW 浏览器是<B> Netscape 2.0 beta 3</B> 以上版本的话，那你就可以<P>
看到相关的结果，而如果你的浏览器并非是可以支援 JavaScript 的话，那看起<P>
来就会有一些怪怪的了，以上范例的结果如下：
<p>
<i>
This is a normal HTML document.
<br>
这是以 JavaScript 印出的!
<BR>
Back in HTML again.
<P>
</I>
此一范例并没有太大的用处，它只是要告诉你如何使用script的标签，并<P>
如何将它置於 HTML 的文件之中而已，这个新的标签你可以特它放在文件<P>
中的任何地方。
<P>
<HR WIDTH="80%" ALIGN="center" SIZE="2">
<P>
<A name="ex2"><FONT SIZE="+2" color=green> 范例 2：</FONT></A><P>
接下来下一个例子所要介绍的是有关函数 (function) 的使用。请放心，函数并<P>
非很难懂的东西，但它却相当有用。函数通常是在 HTML 文件中 <body ＞的<P>
部份被呼叫，而理所当然地，它最好事先被宣告并放在 HTML 文件中 <body＞<P>
的部份。好让在 <body＞ 部分中使用到函数时，它已确定被读取住来。另外，<P>
<script＞ 标签的有关描述语法剖份，你可以用注解的符号将它括起来，以免旧<P>
版或无法读取 JavaScript 的浏览器读到，而误会了意思！
<PRE>
<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>
<P>
</PRE>
如果你是使用<B> Netscape 2.0 beta 3</B> 以上的浏览器，那以上 JavaScript 语法部份<P>
的结果如下，你可以试著按按钮看看有何结果产生！
<FORM>
<INPUT type="button" name="Button1" value="Push me" onclick="pushbutton()">
</FORM>
<P>
在范例 2 中，将会产生一个按钮，当你用滑鼠去按它的时候，应该会出现<P>
一个视窗上面有“嗨! 你好＂的字串，如何？不错吧！这个结果是如何产生<P>
的呢？首先，在 <head＞内的函数会被载入并存於记忆体中，接著一个新<P>
的 <form＞标签 <<I>input type ="button"</I>.....＞将产生一个接钮。然後，你可以<P>
在後面看到 '<I>onClick</I>' 的指令，这就是告诉浏览器，当该按钮被按时，应会执行<P>
<I>onClick</I> 後的函数 '<I>pushbutton()</I>'，而这个函数在刚刚程式被载入时就已安放在<P>
记忆体中了！请注意，在这个函数中我们用到了个新东西─ <I>alert</I> 的 method，<P>
是 JavaScript 事先定义好的，它会以对话视窗产生内涵的讯息，并有一"确定"<P>
(OK)的按钮。 JavaScript 定义了许多的 method，你可以连至 Netscape 公司去<P>
获取较完整的讯息。我想这些 method 在不久的将来会有长长的一串可以够你<P>
学的，不过目前的 method 也已经可以做出相当多东西了！<P>
接著下个例子将告诉你如何由一个输入型表格中读入使用者的输入资料，<P>
事实上，这也是加入个函数就可以达成的。<BR>
<P>
<HR WIDTH="80%" ALIGN="center" SIZE="2">
<P>
<BR>
<BR>
<A name="ex3"><FONT SIZE="+2" color=green> 范例 3：</FONT></A>
<P>
<PRE>
<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>
<P>
</PRE>
现在你可以试试结果如何：
<I>
<BR>
<BR>
请输入你的名字：
<FORM>
<INPUT type="text" name="name" onBlur="getname(this.value)" value="">
</FORM>
<P>
</I>
在这个例子中又有新的东西了。首先，让我们注意一下，在语法中的注解部分<P>
(<!- ... -＞) 此部分即我们之前所提到的它可以避免旧版本或是不支援 JavaScript <P>
的 WWW 浏览器因为不认识这些函数而产生错误。它的顺序应 该为 <script＞<P>
先，接著为注解的开头 <!-，然後是内容，注解尾 -＞， 最後是 </script＞。<P>
另外要注意的一点是，语解尾那一行的开头双斜线 "//" ，不可以省略，它代表了 <P>
JavaScript 的注解，若省略了的话， -＞之前的字会被误认为是 JavaScript 的指令。<P>
<BR>
这个例子可以让使用者输入一段文字，然後再输入完毕後经由 <input＞标签中的<P>
"<I>onBlur</I>" 事件函数侦知，於是呼叫<I> Getname(Str)</I>这个函数来加以取得输入字串，<P>
并将它显示在对话视窗上！函数 <I>Getname(this.value)</I> 中的 "<I>this.value</I>" 是你在文<P>
字输入格式中所输入的值。
<BR>
<P>
<HR WIDTH="80%" ALIGN="center" SIZE="2">
<P>
<BR>
<BR>
<A name="ex4"><FONT SIZE="+2" color=green> 范例 4：</FONT>：</A><P>
这个范例更是帅了！我们在 HTML 文件档完成了以後，常会加上一行文件<P>
最後修改的日期，现在你可不用担心每次都要去改或是忘了改了。你可以<P>
很简单的写一个如下的描述语法程式，就可以自动的为你每次产生最後修<P>
改的日期了：
<PRE>
<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>
</PRE>
以上的 <I>document.lastModified</I> 参数在 <B>Netscape 2.0 beta 2</B> 版时是被写成<P>
<I>documeut.lastmodified</I> 的，然而，之後的版本就改为 <I>document.lastModified</I>，<P>
所以注意一下 ；JavaScript 本身是会区分大小写的，<I> lastmodified</I> 与 <I>lastModified</I><P>
在它看来是不同的结果。
<P>
最後，在这一部分结束之前，要提醒你一点，像范例 4 ，的用法并非每一部<P>
机器都是一样的，例如：PC 上跑得很正确的，在工作站上不一定会有相同的<P>
结果，所以，或许你仍得测一测不同机器的结果才会有所定论。当然，这一切<P>
是因为 JavaScript 还正在发展的原因，
也许你也不用奇怪，当你隔周再来访时，JavaScript 可能又作了<P>
相当大的改变了呢！<P>
<p align=center><a href=./index.htm>[返回]</a></p>
</td></tr></table>
</BODY>
</HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -