?? javascr.html
字號:
<html><head><TITLE>JavaScript 第 1 集</TITLE><script language="LiveScript"><!-- Hiding function pushbutton() { alert("嗨! 你好"); } function getname(str) { alert("哈羅! "+ str+"!"); }// --></script></head><BODY bgcolor="ffffff" link=#ff0000 vlink=#4444dd alink=#9999dd><CENTER><a name="what"><img src="java.gif" ><br></a><BR><FONT SIZE=+2 color=blue>第 1 集</FONT></CENTER><p><HR WIDTH="80%" ALIGN="center" SIZE="2"><p><br><br><center><h2>JavaScript 是什麼？</h2></center><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><P>如需相關的更多資訊，可以去讀讀 <a href="http://www.netscape.com">Netscape</a> 的有關<a href="http://www.netscape.com/comprod/products/navigator/version_2.0/script/index.html"> Netscape JavaScript</a>之介紹。<P><br><HR WIDTH="80%" ALIGN="center" SIZE="2"><p><br><br><h2><a name="run">如何執行 JaveScript？</h2><p>JavaScript 如何執行呢？<P><B>Netscape 2.0 beta 3</B> 版以上，就可以執行 JavaScript 的功能了，我們測試過至少<P><B> beta 3</B> 版以上可以，其他種類的 WWW 瀏覽器如:Internet Expore 3.0也有此一功能。<P> <br><p><HR WIDTH="80%" ALIGN="center" SIZE="2"><p><br><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> <script language="LiveScript"><!-- Hiding document.write("這是以 JavaScript 印出的!")// --> </script><br>Back in HTML again.<p></i>此一范例并沒有太大的用處，它只是要告訴你如何使用<script>的標簽，并<P>如何將它置於 HTML 的文件之中而已，這個新的標簽你可以特它放在文件<P>中的任何地方。<br><p><HR WIDTH="80%" ALIGN="center" SIZE="2"><p><br><br><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 還正在發展的原因，最新的訊息還是得去拜訪一下<a href="http://www.netscape.com">Netscape</a> <P>公司才知道。也許你也不用奇怪，當你隔周再來訪時，JavaScript 可能又作了<P>相當大的改變了呢！<P><HR WIDTH="80%" ALIGN="center" SIZE="3"><P><CENTER><a href="index.html" TARGET=_top>回主目錄</a><P></CENTER><HR WIDTH="80%" ALIGN="center" SIZE="3"><P>本章編譯：<A HREF="mailto://cbc@it.ntc.edu.tw">錢炳全</A> <BR></body></html>?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -