JavaScript的編程

2019-11-18 13:27:39

字體：大中小

來源：轉載

供稿：網友

　　(1)一個簡單的例子
　　
　　javascript的編程工作復雜與否和Html文檔所
　　提供的功能大小密切相關 ,我們用幾個簡
　　單的例子來介紹它的編程特點。
　　
　　例 1.一個簡單的 Script
　　
　?。糎TML＞
　　
　　＜TITLE＞This is a test＜/TITLE＞
　　
　?。糎EAD＞
　　
　　＜SCRIPT LANGUAGE="Javascript"＞
　　
　?。?-- to hide script contents from old browsers
　　
　　// end hiding contents from old browsers--＞
　　
　　＜/SCRIPT＞
　　
　?。?HEAD＞
　　
　?。糂ODY＞
　　
　　This is a test:
　　
　?。糞CRIPT LANGUAGE="JavaScript"＞
　　
　　document.write "Hello!"
　　
　?。?SCRIPT＞
　　
　　＜/BODY＞
　　
　　＜/HTML＞
　　
　　例 1顯示結果為 :
　　
　　This is a test:Hello!
　　
　　從以上例子中可以發現 ,JavaScript源代碼
　　被嵌在一個 HTML文檔中,它可以出現在文檔
　　頭部 (HEAD節 )和文檔體部 (BODY節 )。SCRIPT標
　　記的一般格式為 :
　　
　?。糞CRIPT LANGUAGE="JavaScript"＞
　　
　　JavaScript語句串 ...
　　
　?。?SCRIPT＞
　　
　　為了使老版本的瀏覽器(即Navigator2.0版以前的
　　瀏覽器 )避開不識別的"JavaScript語句串 ",用
　　JavaScript編寫的源代碼可以用注解括起來
　　,即 ,使用 HTML 的注解標記＜!--???--＞(如上例
　　所示 ),而 Navigator 2.x可以識別放在注解行
　　中的 JavaScri pt源代碼。
　　
　　(2)一個調用函數的例子
　　
　　內建函數在 JavaScript中占有很大的比例,由
　　于它由 Netscape瀏覽器支持并解釋執行 ,給
　　Web制作者提供了編寫的工具函數 ;JavaScript還
　　為用戶提供自己定義函數和調用函數的能力
　　,使 Web編寫者具有編程手段的靈活性。
　　
　　函數的定義與調用同一般的程序設計語
　　言類似 ,但由于瀏覽器瀏覽的Web頁是順序
　　從 WWW服務器調出 ,并由 Netscape瀏覽器解釋
　　執行的 ,函數必須先定義(一般放在 HEAD節)后
　　調用 (一般放在 BODY節 )。
　　
　　例 2.一個有函數定義和調用的 JavaScript
　　
　　＜HTML＞
　　
　?。糡ITLE＞This is a function's test ＜/TITLE＞
　　
　　＜HEAD＞
　　
　?。糞CRIPT LANGUAGE="JavaScript"＞
　　
　　＜!-- to hide script contents from old browsers＞
　　
　　function square(i){
　　
　　document.write("The call passed",i,"to the square
　　function.","
")
　　
　　return i*i
　　
　　}
　　
　　document.write("The function re-turned",square(8)
　　,".")
　　
　　//end hiding contents from old drowsers
　　--＞
　　
　?。?SCRIPT＞
　　
　?。?HEAD＞
　　
　?。糂ODY＞
　　
　　

　　
　　All done.
　　
　?。?BODY＞
　　
　　＜/HTML＞
　　
　　該例顯示結果為 :
　　
　　The call passed 8 to the square
　　func-tion.
　　
　　The function returned 64.
　　
　　All done.
　　從執行結果可以看出 ,一個函數定義時并
　　不發生作用 ,只有在引用時 (函數定義后的
　　document.write語句 )才被激活。
　　
　　(3)編寫事件處理程序
　　
　　JavaScript的應用中大量采用事件驅動。Web
　　頁中的一個事件是指用戶做一件事后引起
　　的動作。例如 ,用戶移動鼠標到某個鏈接點
　　、點擊鼠標、針表格填寫后的提交動作等
　　都被認為是一個事件。 Web頁作者可以定義
　　事件處理程序(event handl er),在出現一個事
　　件后自動觸發執行該事件處理程序。
　　例 3是一個由事件驅動(輸入后點擊 Cal-culate按
　　鈕的動作 )的例子。
　　
　　例 3.具有填表和提交功能的事件處理 Script
　　
　?。糎TML＞
　　
　?。糡ITLE＞Form Object example ＜/TITLE＞
　　
　?。糎EAD＞
　　
　　＜SCRIPT LANGUAGE="JavaScript"＞
　　
　　function compute(obj){
　　
　　obj.result.value=eval(obj.eXPR.value)
　　
　　}
　　
　?。?SCRIPT＞
　　
　　＜/HEAD＞
　　
　?。糂ODY＞
　　
　　＜FORM NAME="evalform" METHOD="get"＞
　　
　　Enter an expression:
　　
　?。糡NPUT TYPE="text"NAME="expr" SIZE=20＞
　　
　　

　　
　　Result:
　　
　　＜INPUT TYPE="text"NAME="result"
　　SIZE=15＞
　　
　　

　　
　?。糏NPUT TYPE="button"NAME="Bottom1"
　　VALUE="Calculate"
　　
　　onClick="compute(this.form)"＞
　　
　?。?FORM＞
　　
　?。?BODY＞
　　
　?。?HTML＞
　　
　　該例運行時出現 :
　　
　　Enter an expression: ______
　　
　　Result: ______
　　
　　Calculate
　　在 Enter an expression:欄中輸入一個表達式(如
　　22*3-6),然后點擊Calculate按鈕 ,相應的結果顯
　　示在 Result欄內 (如 60)。
　　
　　由例 3源代碼和運行結果可以看出 :
　　
　?、?在 HTML源代碼的頭部定義了一個名叫compute的
　　函數 ,其形式參數 obj是一個form(表格 )。當用
　　戶輸入表達式后 ,點擊 Calculate按鈕 ,由此
　　觸發的事件處理程序 onClick調用compute函數
　　,并攜帶了參數 this.form,將表格對象(由＜
　　FORM＞販?＜/FOR M＞定義 )交給事件處理程序調
　　用的函數 compute去處理。
　　
　　函數 compute由一條賦值語句構成 ,其右部是
　　JavaScript的內建函數 eval,它可以自動分析表
　　格中名為 "expr"欄內的輸入字符串 ,計算出
　　其值 ;計算出的結果傳送給表格(form)中名為
　　"result"的欄內 ,這樣 ,在屏幕上 Result:后的框
　　中出現計算結果。
　　
　　除例 3中出現的JavaScript事件處理程序onClick,另
　　外還有一些類似程序 ,包括：on-Blur,onChange
　　,onFocus,onLoad,on-MouSEOver,onSelect,onSubmit,
　　onUn-load等。

上一篇：Java與JavaScript的通信lixiaolong3456

下一篇：javascript特效：飄動的圖片