JavaScript 靜宜大學 資管系 楊子青
JavaScript is the scripting language of the Web. 發展歷史 Netscape於1994年發展LiveScript電腦語言，目的： 在伺服器端， 輔助 Netscape 的伺服器程式 LiveWire 在客戶端，加強 HTML 的表達能力， 亦即提高網頁的互動性。 當時 Sun公司也在發展 Java，其後因為 Sun 公司與 Netscape 公司合作發展 ， 因此改名為 JavaScript， 於 1995 年 12 月誕生 JavaScript is the scripting language of the Web. All modern HTML pages are using JavaScript to add functionality, validate input, communicate with web servers, and much more.
JavaScript架構 JavaScript自訂函數 JavaScript事件處理程序 JavaScript HTML DOM 大綱 JavaScript架構 JavaScript自訂函數 JavaScript事件處理程序 JavaScript HTML DOM HTML5 Input Types
JavaScript程式碼的位置可以放在HTML的 基本架構 <script type="text/javascript"> <!-- JavaScript程序敘述 --> </script> JavaScript程式碼的位置可以放在HTML的 <head></head>標記內 <body></body>標記內
JavaScript根據網頁載入順序執行 <head></head>標記內 <body></body>標記內 <!DOCTYPE html> <html> <head> <script type="text/javascript"> <!-- alert("歡迎光臨！"); --> </script> </head> <body> <h1>Hello JavaScript!</h1> </body> </html> <!DOCTYPE html> <html> <head> </head> <body> <h1>Hello JavaScript!</h1> <script type="text/javascript"> <!-- alert("歡迎光臨！"); --> </script> </body> </html>
JavaScript Variables and Data Types http://www.w3schools.com/js/js_datatypes.asp
JavaScript Arithmetic Operators http://www.w3schools.com/js/js_operators.asp
JavaScript Assignment Operators http://www.w3schools.com/js/js_operators.asp
JavaScript Comparison Operators http://www.w3schools.com/js/js_comparisons.asp
JavaScript Conditional Statements http://www.w3schools.com/js/js_if_else.asp
JavaScript Switch Statement http://www.w3schools.com/js/js_switch.asp
JavaScript For Loop http://www.w3schools.com/js/js_loop_for.asp
JavaScript While Loop http://www.w3schools.com/js/js_loop_while.asp
JavaScript Do/While Loop http://www.w3schools.com/js/js_loop_while.asp
return(傳回值); //有傳回值時才需要 } 2. JavaScript自訂函數 function 函數名稱(輸入引數) { JavaScript 敘述; ... return(傳回值); //有傳回值時才需要 }
3. JavaScript事件處理程序 事件處理程序(Event Handler) onClick 滑鼠點選物件時 onMouseOver 滑鼠經過物件時 onMouseOut 滑鼠離開物件時 onLoad 網頁載入時 onUnload 離開網頁時 onError 載入發生錯誤時 onAbort 停止載入影像時 onFocus 視窗或表單元件取得焦點時 onBlur 視窗或表單元件失去焦點時 onSelect 選取表單元件內容時 onChange 改變欄位的資料時 onReset 重設表單時 onSubmit 送出表單時
函數搭配事件處理程序實例 <!DOCTYPE html> <html> <head> <script type="text/javascript"> <!-- function sum(a,b) { Result = a + b; alert(Result); } --> </script> </head> <body> <a href="#" onMouseOver="sum(3,5)">計算3+5</a> </body> </html>
DOM (Document Object Model，文件物件模型) 4. JavaScript HTML DOM DOM (Document Object Model，文件物件模型) 一種結構化文件內容的物件模型，可以將HTML網頁的標籤和文字內容視為節點(Node)，依據各節點間的關係連接成樹狀結構 The HTML DOM Tree
(1) Finding HTML elements by Id 實例：http://www.w3schools.com/js/tryit.asp?filename=try_dom_getelementbyid <!DOCTYPE html> <html> <body> <p id="intro">Hello World!</p> <p>This example demonstrates the <b>getElementById</b> method!</p> <script> x=document.getElementById("intro"); document.write("<p>The text from the intro paragraph: " + x.innerHTML + "</p>"); </script> </body> </html>
(2) Finding HTML elements by Tag Name 實例：http://www.w3schools.com/js/tryit.asp?filename=try_dom_getelementsbytagname <p>Hello World!</p> <div id="main"> <p>The DOM is very useful.</p> <p>This example demonstrates the <b>getElementsByTagName</b> method</p> </div> <script> var x=document.getElementById("main"); var y=x.getElementsByTagName("p"); document.write('First paragraph inside "main" is ' + y[0].innerHTML); </script>
Changing HTML Content 實例：http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_dom_innertext <!DOCTYPE html> <html> <body> <h1 id="header">Old Header</h1> <script> var element=document.getElementById("header"); element.innerHTML="New Header"; </script> </body> </html>
Changing CSS style 實例：http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_dom_color2 <!DOCTYPE html> <html> <body> <h1 id="id1">My Heading 1</h1> <button type="button" onclick="document.getElementById('id1').style.color='red'"> Click Me!</button> </body> </html>
Changing CSS class 實例： else { document.getElementById("CSScolor").className = "Red"; } --> </script> </head> <body> <p class="Red" id="CSScolor" onmouseover="Changing('over')" onmouseout="Changing('out')"> Changing CSS class</p> </body> </html> <!DOCTYPE html> <html> <head> <style> .Red {color: red; font-size: 12pt} .Blue {color: blue; font-size: 12pt} </style> <script type="text/javascript"> <!-- function Changing(flag) { if (flag == 'over') document.getElementById("CSScolor").className = "Blue"; }
Free JavaScript Editor 4.7 編輯上頁程式 http://key.chtouch.com/ContentView.aspx?P=425 編輯上頁程式 設定Google Chrome瀏覽器，進行測試 轉存成記事本檔案 練習： 加入onMouseDown (滑鼠按下)事件，變成綠色 加入onMouseUp (滑鼠放開)事件，變成黑色
5. HTML5 Input Types http://www.w3schools.com/html/html5_form_input_types.asp HTML 4/4.01 支援的type屬性值如下: text password radio checkbox submit reset file image hidden button HTML 5 新增的type屬性值如下: email url search tel number range color month week datetime-local date time datetime
<input>元素新增的屬性 required屬性 必填 min、max與step屬性 autofocus屬性 令焦點自動移至某個表單欄位 placeholder屬性 浮水印輸入提示 pattern屬性 自訂輸入格式 01:<form> 02: <label>手機號碼：</label> 03: <input type="tel" pattern="[0-9]{4}(\-[0-9]{6})" title="例如0932-123456"> 04: <input type="submit"> 05:</form>
HTML5 Form + Javascript實例 <!DOCTYPE html> <html> <head> <script type="text/javascript"> function processData(){ var temp = ""; var UAccount = document.getElementById("UserAccount").value; temp += "您輸入的帳號是：" + UAccount + "\n"; var UPass = document.getElementById("UserPass").value; temp += "您輸入的密碼是：" + UPass + "\n"; alert(temp); } </script> </head>
HTML5 Form + Javascript實例 (續) <body> <h2>HTML5 Form + Javascript實例</h2> <form id="form1"> 帳號: <input type="text" id="UserAccount" required autofocus/><p> 密碼: <input type="password" id="UserPass" /><p> <input type="submit" form="form1" onClick="processData()" value="輸入完畢" /><p> </form> </body> </html>
HTML5 Form + Javascript自行練習
參考資料 教科書 網路資源 榮欽科技、陳婉凌，網頁設計必學的程式實作技術：HTML5+CSS3+JavaScript，2012年，博碩。 Chap 10: JavaScript 與Canvas線上繪圖 Chap 7: 表格與表單 網路資源 http://www.w3schools.com/js/