570 likes | 960 Views
非常簡易版. JavaScript 語法介紹. 大綱. 大綱 介紹 JavaScript 的背景及特性,並說明 JavaScript 的執行方式及基本範例。 主題 1-1:背景及特色 1-2:執行方式一:循序執行 1-3:執行方式二:事件驅動 1-4:基本表單 (HTML). 1-1 背景及特色. 介紹 JavaScript 程式語言的發展背景及相關特色。. 背景. JavaScript 程式語言的背景
E N D
非常簡易版 JavaScript 語法介紹
大綱 • 大綱 • 介紹 JavaScript 的背景及特性,並說明 JavaScript 的執行方式及基本範例。 • 主題 • 1-1:背景及特色 • 1-2:執行方式一:循序執行 • 1-3:執行方式二:事件驅動 • 1-4:基本表單 (HTML)
1-1 背景及特色 • 介紹JavaScript程式語言的發展背景及相關特色。
背景 • JavaScript程式語言的背景 • 由 Netscape Communications 公司所開發的一種解譯式程式語言,專門用在網頁中,並在用戶端的電腦執行,以提高網頁的互動性為主要目標 • 網頁內訂預設的客戶端程式語言。因此只有 JavaScript 能同時適用於 IE、FireFox 或 Chrome 等各大瀏覽器。 • 滿足 ECMA(European Computer Manufacturer‘s Association,歐洲電腦製造商協會)所制訂的標準。
可使用之平台 • JavaScript 可發揮的平台 • 用戶端:預設的網頁程式語言,可用於 IE、FireFox或 Chrome 等各大瀏覽器。 • 伺服器:適用於Apache(PHP)和微軟 IIS 網頁伺服器的 ASP 語言環境等,可在網頁送到客戶端之前,進行各種處理,或和資料庫進行資料存取。 • 單機版:適用於任何的視窗作業系統。
在網頁程式設計的主要功能 • JavaScript 在網頁程式設計的主要功能 • 提高網頁互動性及趣味性,例如以 JavaScript 所發展出來的各種遊戲。 • 執行在用戶端的計算及驗證,以減少伺服器端的計算及網路流量,例如表單驗證(Form Validation)。 • Cache功能,可將未用到的圖檔(或其他檔案)預先抓回,以增加使用者的便利。 • AJAX 功能:在不換頁的情況下來存取伺服器資料並顯示於網頁
程式語言特性 • JavaScript 語言特性 • JavaScript 的程式碼是內嵌於 HTML 原始碼之中,並由瀏覽器的 JavaScript 解譯器(Interpreter)來執行程式碼,最後將結果呈現於瀏覽器。換句話說,JavaScript 的程式碼是由瀏覽器來執行,所以在用戶端可看到其原始碼,較難加以保護。 • 由於安全性的考量,除了讀寫 Cookies之外,JavaScript 並無法讀取用戶端的檔案或硬碟。 • 使用變數時,不需要宣告變數型態,JavaScript 會自動決定。 • 對於不同的資料型態(如字串與數值),JavaScript 可以根據不同情況,自動進行資料型態的合理轉換。
JavaScript vs. Java • JavaScript 和 Java 沒有什麼親戚關係! • 比較表:
1-2:執行方式一:循序執行 • 說明如何以「循序執行」的方式,來執行網頁中的 JavaScript 程式碼。
JavaScript 於網頁的執行方式 • JavaScript 於網頁執行的兩種基本方式: • 循序執行(Sequential Execution): 瀏覽器讀入網頁後,即載入並執行 JavaScript 程式碼,最後將結果直接呈現在瀏覽器上。 • 事件驅動(Event Driven): 瀏覽器讀入網頁後,即載入 JavaScript 程式碼,但必須等到使用者點選連結或影像,或是啟動其他滑鼠事件(例如當滑鼠離開某個影像),才能觸發 JavaScript 的執行。
如何加入JavaScript 於網頁 • JavaScript 如何加入網頁 <script language=javascript> JavaScript 程式碼… </script> • 注意事項 • 標籤中的大小寫並無任何影響。 • 「language=javascript」也可以完全省略。 • 雖然 HTML 內的 JavaScript 標籤是可以不分大小寫,但是標籤內部的 JavaScript 程式碼本身會區分大小寫,這是要特別注意的地方!
通常放置兩個地方 01 <html> <!---------HTML文檔開始--------------------> 02 <head> <!---------文檔頭開始--------------------------> 03 <title> <!---------標題開始-----------------------------> 04 </title> <!---------標題結束-----------------------------> 05 </head> <!---------文檔頭結束--------------------------> 06 <body><!---------文檔體開始--------------------------> 07 <script language="JavaScript"> <!---------腳本程式-----------------------------> 08 // JavaScript程式語句 // JavaScript程式語句 09 // …… // 更多的JavaScript程式語句 10 </script> <!---------腳本結束-----------------------------> 11 </body><!---------文檔體結束--------------------------> 12 </html> <!---------HTML文檔結束--------------------> 01 <html> <!---------HTML文檔開始--------------------> 02 <head><!---------文檔頭開始--------------------------> 03 <title> <!---------標題開始-----------------------------> 04 </title><!---------標題結束-----------------------------> 05 <script language="JavaScript"> <!---------腳本程式-----------------------------> 06 // JavaScript程式語句 // JavaScript程式語句 07 // …… // 更多的JavaScript程式語句 08 </script> <!---------腳本結束-----------------------------> 09</head><!---------文檔頭結束--------------------------> 10 <body> <!---------文檔體開始--------------------------> 11 </body> <!---------文檔體結束--------------------------> 12 </html> <!---------HTML文檔結束-------------------->
範例1-1 • 主題:利用 JavaScript 來印出 "Hello World!" • 連結:以瀏覽器開啟hello01.htm • 程式碼重點 <script language="javascript"> str = "Hello World!"; document.write(str); </script> • 說明 • str是一個字串變數,其值為 "Hello World!" • document 則是一個物件,代表程式碼所在的文件 • write 則是 document 的一個方法,可將一個字串印出於瀏覽器
「以物件為基礎」的語言 • JavaScript 是「以物件為基礎」的語言 • 所有的變數在 JavaScript 中都是一個物件 • 一個物件通常有一些性質(Property)和方法(Method) • 範例:把一個微波爐A看成一個物件 • 性質: • 微波爐的顏色:A.color • 微波爐的容量: A.volume • 方法: • 加熱:“溫水”=A.heat(“冷水”, 30秒) • 加熱:“沸水”=A.heat(“冷水”, 300秒)
範例1-2 • 主題:document.write() 和 document.writeln() 的差別 • 連結:writeln01.htm • 程式碼重點 <script>document.write("Good"); document.write("Bye!");</script> <script>document.writeln("Good"); document.writeln("Bye!");</script> • 說明 • writeln()和 write() 的最大差別在於writeln() 在列印完畢後會換列,但 write() 不會。 • 如果連續呼叫document.write("Good") 和 document.write("Bye!"),在網頁會呈現連在一起的 "GoodBye!",但是如果連續呼叫document.writeln("Good") 和 document.writeln("Bye!"),則在網頁會呈現中間有空格的 "Good Bye!",
範例1-3 • 主題:呈現 JavaScript 印出的原始效果 • 連結:writeln02.htm • 程式碼重點 <pre> 使用 document.write(): <script>document.write("Good"); document.write("Bye!");</script> 使用 document.writeln(): <script>document.writeln("Good"); document.writeln("Bye!");</script> 使用 document.write() 再加上 "\n": <script>document.write("Good\n"); document.write("Bye!\n");</script> </pre> • 說明 • 使用 <pre> 和 </pre> 來包夾 JavaScript 的程式碼,可以得到JavaScript 的原始輸出結果(未經瀏覽器排版), 非常適用於JavaScript 程式碼的偵錯。
範例1-4 • 主題:利用 JavaScript 來印出 size 由 1 到 5 的"Hello World!" • 連結:hello02.htm • 程式碼重點 <script> // 由 for 迴圈來產生 5 個由小變大的 "Hello World!" for (i=1; i<=5; i++) document.writeln("<font size=" + i + ">Hello World!</font><br>"); </script> • 說明 • For-loop的格式和C語言一樣 • 字串的並排是由「+」來達成。 • JavaScript 有兩種加入註解的方法 • 單行註解 • 多行註解
範例1-5 • 主題:利用 <xmp> 和 </xmp> 來印出未經瀏覽器排版的結果 • 連結:helloXmp01.htm • 程式碼重點 <script> // 由 for 迴圈來產生 5 個由小變大的 "Hello World!" document.write('<xmp>'); for (i=1; i<=5; i++) document.writeln("<font size=" + i + ">Hello World!</font><br>"); document.write('</xmp>'); </script> • 說明 • 若要得到未經瀏覽器排版前的 JavaScript 輸出結果,可以使用 <pre> 和 </pre>,但是對於含有 HTML 標籤的文字資料,我們就必須改用 <xmp> 和 </xmp>
HTML/JavaScript解譯及排版流程 HTML/JavaScript解譯及排版流程 HTML 原始碼 JavaScript: 解譯及執行 瀏覽器: 解譯標籤 瀏覽器: 排版 網頁 呈現結果 使用<xmp>來觀看資料 使用<pre>來觀看資料
範例1-6 • 主題:使用註解來隱藏程式碼,使不支援 JavaScript 的瀏覽器不會產生錯誤訊息 • 連結:hello03.htm • 程式碼重點 <script language="javascript"> <!-- 如果瀏灠器無法辨識JavaScript程式, 則從下行開始隱藏 str = "Hello World!"; document.write(str); // 隱藏至上行為止 --> </script> • 說明 • 混合使用 HTML 及 JavaScript 的註解,可以避開無法解譯 JavaScript的瀏覽器。 • 現在各大瀏覽器都支援 JavaScript,所以使用這種「隱藏程式碼」的 JavaScript 的程式已經越來越少了。
1-3 執行方式二:事件驅動 • 介紹JavaScript如何用事件驅動來執行程式碼。
內建視窗類別 • JavaScript提供了三種和使用者互動的內件對話視窗 • 警告視窗(Alert Window) • 確認視窗(Confirm Window) • 提示視窗(Prompt Window),或稱為輸入視窗 • 說明 • 所謂「滑鼠事件」(Mouse events),指的是能由瀏覽器偵測到的滑鼠動作,例如點選某一個連結、將游標移到一的影像上、游標的移動等。
範例1-7 • 主題:使用者點選連結會出現罵人的警告視窗 • 連結: alert01.htm • 程式碼重點<A href="javascript:alert('!@#$%^&*!')">按了你會後悔喔!</A> • 說明 • 若要讓使用指點選連結來執行 JavaScript 的程式碼,則連結的格式必須是<a href="javascript:[程式碼]">被連結文字</a> • 程式碼內的字串(例如上例中'!@#$%^&*!'),可用單引號來界定,避免和「href=」之後的雙引號混淆。
範例1-8 • 主題:顯示網頁載入時間的警告視窗 • 連結:alert02.htm • 程式碼重點<script> today = new Date();hour = today.getHours();minute = today.getMinutes();second = today.getSeconds();string = "網頁載入時間是"+hour+"點"+minute+"分"+second+"秒“;</script> • 說明 • 我們產生字串 string,當連結被按下去時,再將字串送至警告視窗。 • 有關於日期物件和各種時間的用法,會在後面詳述。
範例1-9 • 主題:囉里叭唆的警告視窗 • 連結:alert03.htm • 說明 • 字串可以用”+”連接在一起,而數字以”+”做相加運算,當數值和字串相加時,數值會被當成字串型態,兩者再用”+”相連接。 • JavaScript 可以用雙引號(“)或單引號(‘)來定義字串的開始和結束。 • 若改用無窮迴圈,在Windows平台可同時按 Ctrl、Alt、Del 三鍵來開啟工作管理員,以關閉瀏覽器。
範例1-10 • 主題:沒完沒了的警告視窗(將執行1000次以上) • 連結:alert05.htm • 程式碼重點 function talk() { for (i=0; i<1000; i++) alert('第 ' + (i+1) + ' 次!'); } <a href="javascript:talk()">有膽你就給我按看看!</a> • 說明: • 可以用"javascript:talk()"直接呼叫自訂的函式talk()。 • 如果要快速跳出,請勿壓著Enter鍵,改以ESC鍵壓著,否則程式有可能會再執行一次。
範例1-11(1) • 主題:使用確認視窗來確認連結動作 • 連結:confirm01.htm • 程式碼重點<a href="javascript:link2nthu()">清大首頁</a><br> <a href="javascript:if (confirm('你確定要連到交大的首頁嗎?')) location.href='http://www.nctu.edu.tw'">交大首頁</a><br> <a href="http://www.ntu.edu.tw" onClick="return(confirm('你確定要連到台大的首頁嗎?'))">台大首頁</a>
範例1-11(2) • 說明 • 第一種方式呼叫函式link2nthu(),location.href 代表瀏覽器的網址,改變即可連到不同網址。 • 第二種方式直接寫在連結內,若按確定confirm會回傳true連結新網址,取消則回傳false。 • 第三種使用了 onClick 的屬性,所指定的字串格式是「return(程式碼)」,其中「程式碼」是一段 JavaScript 的程式碼,只有當此程式碼回傳的值是 true 時,對此連結的點選才會連到指定的網址,否則就完全沒有作用。 • 除了在用在上述範例之外,一般而言 onClick 可以觸發點擊事件,繼而執行 onClick 屬性字串中的程式碼。
範例1-12(1) • 主題:使用輸入視窗來決定連結網址 • 連結:prompt01.htm • 程式碼重點course = prompt(“請輸入課程編號:(cs3431, cs3331, cs3334, cs5652, or isa5571)”, “cs3431”); if((course==“cs3431”)||(course==“cs3331”)||(course==“cs3334”)||(course==“cs5652”)||(course==“isa5571”))location.href="http://neural.cs.nthu.edu.tw/jang/courses/" + course; • 說明 • 我們使用 if 敘述來判斷使用者輸入的字串是否等於 這四種字串。 • "||" 代表邏輯運算的「或」,而 "&&" 則代表邏輯運算的「且」,這部分會在後面章節詳述。
範例1-12(2) • 說明 • alert()、confirm() 和 prompt() 都是 window 物件的方法,所以要呼叫這些方法,完整的寫法應該是 window.alert()、window.confirm() 和 window.prompt(),因為他們太常被用到,所以可以省略 window 此物件,直接呼叫這些函數。
1-4:基本表單 • 介紹表單(form)各種元件的寫法以及使用方法。
form • 基本結構 <form> <input…> … </form> • 說明 • 表單是由 form 標籤所形成,可包含數個表單元件,而這些元件大部分是使用 input 標籤。 • input標籤可以不寫在form標籤裡面,但是這樣會失去傳送表單的功能。
範例1-13 • 主題:基本表單範例 • 連結:form01.htm • 說明 • form標籤中,action代表表單傳送的目的位址(也就是處理表單資訊的伺服器程式),method 則代表傳送方法,encType是資料編碼格式。 • input標籤中,name是標籤的變數名稱,在之後操作javascript的時候會更常用到。 • type是表單元件的型態,如果沒有指定預設是單行文字(text),剩下的之後會列表說明。
使用 onChange事件將文字欄位改成大寫 • 連結: hdom_onchange • 程式碼重點<input type="text" id="fname" onchange="upperCase(this.id)"/> • 說明 • 文字轉換的動作定義於文字欄位的 onChange屬性,可以省掉按鈕的使用(此事件只有在文字欄位失去滑鼠焦點時才會起作用)。 • 我們可以使用 this 來代表目前元件,使網頁更為簡潔。 • 在上述範例中,如果希望在文字欄位填入文字時,狀態列能夠立即改變,可將 onChange改成 onKeyUp即可。
範例1-14 • 主題:使用 this.form傳送兩個文字欄位的訊息 • 連結:formTextMasterSlave01.htm • 程式碼重點<input type=button value="=====>" onClick="this.form.text2.value=this.form.text1.value"> • 說明 • this.form就是代表按鈕所在的表單 • 一般而言,以「a.b」的方式來指到一個物件,例如 form1.input1 等,是由大(表單)到小(控制項)的方式,但唯一的例外,就是 this.form,這是由小(控制項)到大(表單)的方式。
範例1-15 • 主題:使用 this.form,傳送兩個核記欄位的訊息 • 連結1:formCheckboxMasterSlave01.htm • 連結2:formCheckboxMasterSlave02.htm • 程式碼重點<input type=button value="=====>" onClick="this.form.box2.checked=this.form.box1.checked"> <input type=button value="=====>" onClick="document.myForm.box2.checked=document.myForm.box1.checked"> • 說明 • checked 的值,true 代表勾選,false 代表不勾選。 • 如果不是用 this.form,程式碼比較繁雜(連結2)。
範例1-16 • 主題:單選的下拉式選單 • 連結:formSelectSingle01.htm • 程式碼重點<select name=courseList size=4 onChange="alert('你選的課程是「'+this.options[this.selectedIndex].text+'」')"> <option> 1. Linear Algebra …</select> • 說明 • 下拉式選單不是使用input標籤,而是用select和option。 • options[n]代表select中第幾個option標籤。 • selectedIndex代表所選取option標籤的index值。
範例1-17 • 主題:多選的下拉式選單 • 連結:formSelectMultiple01.htm • 程式碼重點<select name=courseList size=4 multiple onChange="listSummary(this.form)"> • 說明 • 從單選變多選只要加入multiple屬性。 • listSummary()函式中,我們在 result 變數之前加上了 var,這代表 result 是一個區域變數(Local Variable),如果沒有,這個變數就預設成全域變數(Global Variable),可以在函式以外的任何地方存取此變數。 • 一般我們建議在函式內的變數都盡量設定成局部變數,以減少函式呼叫後可能產生的非預期副作用。
範例1-18 • 主題:多列文字欄位(textarea) • 連結:formTextarea01.htm • 程式碼重點<textarea name=courseList cols=80 rows=10 onChange="alert('更改後的文字:\n'+this.value)"> This is the text within the textarea tag. 這是位於 textarea標籤內的文字。 </textarea> • 說明 • 和select一樣,不用input標籤。
學習 • http://www.w3schools.com/js/
SAMPLE • http://yudans.net/javascript/index.php?action=code