Download presentation
Presentation is loading. Please wait.
1
JavaScript 靜宜大學 資管系 楊子青
2
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.
3
JavaScript架構 JavaScript自訂函數 JavaScript事件處理程序 JavaScript HTML DOM
大綱 JavaScript架構 JavaScript自訂函數 JavaScript事件處理程序 JavaScript HTML DOM HTML5 Input Types
4
JavaScript程式碼的位置可以放在HTML的
基本架構 <script type="text/javascript"> <!-- JavaScript程序敘述 --> </script> JavaScript程式碼的位置可以放在HTML的 <head></head>標記內 <body></body>標記內
5
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>
6
JavaScript Variables and Data Types
7
JavaScript Arithmetic Operators
8
JavaScript Assignment Operators
9
JavaScript Comparison Operators
10
JavaScript Conditional Statements
11
JavaScript Switch Statement
12
JavaScript For Loop
13
JavaScript While Loop
14
JavaScript Do/While Loop
15
return(傳回值); //有傳回值時才需要 }
2. JavaScript自訂函數 function 函數名稱(輸入引數) { JavaScript 敘述; ... return(傳回值); //有傳回值時才需要 }
16
3. JavaScript事件處理程序 事件處理程序(Event Handler) onClick 滑鼠點選物件時 onMouseOver
滑鼠經過物件時 onMouseOut 滑鼠離開物件時 onLoad 網頁載入時 onUnload 離開網頁時 onError 載入發生錯誤時 onAbort 停止載入影像時 onFocus 視窗或表單元件取得焦點時 onBlur 視窗或表單元件失去焦點時 onSelect 選取表單元件內容時 onChange 改變欄位的資料時 onReset 重設表單時 onSubmit 送出表單時
17
函數搭配事件處理程序實例 <!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>
18
DOM (Document Object Model，文件物件模型)
4. JavaScript HTML DOM DOM (Document Object Model，文件物件模型) 一種結構化文件內容的物件模型，可以將HTML網頁的標籤和文字內容視為節點(Node)，依據各節點間的關係連接成樹狀結構 The HTML DOM Tree
19
(1) Finding HTML elements by Id
實例： <!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>
20
(2) Finding HTML elements by Tag Name
實例： <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>
21
Changing HTML Content 實例： <!DOCTYPE html> <html> <body> <h1 id="header">Old Header</h1> <script> var element=document.getElementById("header"); element.innerHTML="New Header"; </script> </body> </html>
22
Changing CSS style 實例： <!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>
23
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"; }
24
Free JavaScript Editor 4.7 編輯上頁程式
編輯上頁程式 設定Google Chrome瀏覽器，進行測試 轉存成記事本檔案 練習： 加入onMouseDown (滑鼠按下)事件，變成綠色 加入onMouseUp (滑鼠放開)事件，變成黑色
25
5. HTML5 Input Types HTML 4/4.01 支援的type屬性值如下: text password radio checkbox submit reset file image hidden button HTML 5 新增的type屬性值如下: url search tel number range color month week datetime-local date time datetime
26
<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="例如 "> 04: <input type="submit"> 05:</form>
27
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>
28
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>
29
HTML5 Form + Javascript自行練習
30
參考資料 教科書 網路資源 榮欽科技、陳婉凌，網頁設計必學的程式實作技術：HTML5+CSS3+JavaScript，2012年，博碩。
Chap 10: JavaScript 與Canvas線上繪圖 Chap 7: 表格與表單 網路資源
Similar presentations
