網頁設計實務 Java Script 靜宜大學資管系楊子青

網頁設計實務 Java. Script 靜宜大學資管系楊子青

網頁設計實務 l Java. Script 發展歷史 – Netscape於 1994年發展 Live. Script電腦語言，目的：在伺服器端，輔助 Netscape 的伺服器程式 Live. Wire l 在客戶端，加強 HTML 的表達能力，亦即提高網頁的互動性。 – 當時 Sun公司也在發展 Java，其後因為 Sun 公司與 Netscape 公司合作發展，因此改名為 Java. Script，於 1995 年 12 月誕生 l l Java. Script is the scripting language of the Web. – All modern HTML pages are using Java. Script to add functionality, validate input, communicate with web servers, and much more. 2

網頁設計實務大綱 l Java. Script架構 l Java. Script自訂函數 l Java. Script事件處理程序 l Java. Script l HTML 5 HTML DOM Input Types 3

網頁設計實務 l 1. Java. Script架構基本架構 <script type="text/javascript"> <!-Java. Script程序敘述 --> </script> l Java. Script程式碼的位置可以放在 HTML的 – <head></head>標記內 – <body></body>標記內 4

網頁設計實務 l Java. Script根據網頁載入順序執行 <head></head>標記內 l <body></body>標記內 <!DOCTYPE html> <html> <head> <script type="text/javascript"> <!-alert("歡迎光臨！ "); --> </script> </head> <body> <h 1>Hello Java. Script!</h 1> </body> </html> <body> <h 1>Hello Java. Script!</h 1> <script type="text/javascript"> <!-alert("歡迎光臨！ "); --> </script> </body> </html> 5

網頁設計實務 l Java. Script Variables and Data Types http: //www. w 3 schools. com/js/js_datatypes. asp 6

網頁設計實務 l Java. Script Arithmetic Operators http: //www. w 3 schools. com/js/js_operators. asp 7

網頁設計實務 l Java. Script Assignment Operators http: //www. w 3 schools. com/js/js_operators. asp 8

網頁設計實務 l Java. Script Comparison Operators http: //www. w 3 schools. com/js/js_comparisons. asp 9

網頁設計實務 l Java. Script Conditional Statements http: //www. w 3 schools. com/js/js_if_else. asp 10

網頁設計實務 l Java. Script Switch Statement http: //www. w 3 schools. com/js/js_switch. asp 11

網頁設計實務 l Java. Script For Loop http: //www. w 3 schools. com/js/js_loop_for. asp 12

網頁設計實務 l Java. Script While Loop http: //www. w 3 schools. com/js/js_loop_while. asp 13

網頁設計實務 l Java. Script Do/While Loop http: //www. w 3 schools. com/js/js_loop_while. asp 14

網頁設計實務 2. Java. Script自訂函數 function 函數名稱 (輸入引數 ) { Java. Script 敘述 ; . . . return(傳回值 ); //有傳回值時才需要 } 15

網頁設計實務 3. Java. Script事件處理程序(Event Handler) on. Click 滑鼠點選物件時 on. Mouse. Over 滑鼠經過物件時 on. Mouse. Out 滑鼠離開物件時 on. Load 網頁載入時 on. Unload 離開網頁時 on. Error 載入發生錯誤時 on. Abort 停止載入影像時 on. Focus 視窗或表單元件取得焦點時 on. Blur 視窗或表單元件失去焦點時 on. Select 選取表單元件內容時 on. Change 改變欄位的資料時 on. Reset 重設表單時 on. Submit 送出表單時 16

網頁設計實務 <!DOCTYPE html> <head> <script type="text/javascript"> <!-function sum(a, b) { Result = a + b; alert(Result); } --> </script> </head> 函數搭配事件處理程序實例 <body> <a href="#" on. Mouse. Over="sum(3, 5)"> 計算 3+5</a> </body> </html> 17

網頁設計實務 l 4. Java. Script HTML DOM (Document Object Model，文件物件模型 ) – 一種結構化文件內容的物件模型，可以將頁的標籤和文字內容視為節點間的關係連接成樹狀結構 l HTML網 (Node)，依據各節點 The HTML DOM Tree 18

網頁設計實務 l Finding HTML Elements (1) Finding HTML elements by Id – 實例： http: //www. w 3 schools. com/js/tryit. asp? filename=try_dom_getelementbyid <!DOCTYPE html> <body> <p id="intro">Hello World!</p> <p>This example demonstrates the <b>get. Element. By. Id</b> method!</p> <script> x=document. get. Element. By. Id("intro"); document. write("<p>The text from the intro paragraph: " + x. inner. HTML + "</p>"); </script> </body> </html> 19

網頁設計實務 l Finding HTML Elements (2) Finding HTML elements by Tag Name – 實例： http: //www. w 3 schools. com/js/tryit. asp? filename=try_dom_getelementsbytagna me <p>Hello World!</p> <div id="main"> <p>The DOM is very useful. </p> <p>This example demonstrates the <b>get. Elements. By. Tag. Name</b> method</p> </div> <script> var x=document. get. Element. By. Id("main"); var y=x. get. Elements. By. Tag. Name("p"); document. write('First paragraph inside "main" is ' + y[0]. inner. HTML); </script> 20

網頁設計實務 l Changing HTML Content 實例： http: //www. w 3 schools. com/dhtml/tryit. asp? filename=trydhtml_dom_innertext <!DOCTYPE html> <body> <h 1 id="header">Old Header</h 1> <script> var element=document. get. Element. By. Id("header"); element. inner. HTML="New Header"; </script> </body> </html> 21

網頁設計實務 l Changing CSS style 實例： http: //www. w 3 schools. com/dhtml/tryit. asp? filename=trydhtml_dom_color 2 <!DOCTYPE html> <body> <h 1 id="id 1">My Heading 1</h 1> <button type="button" onclick="document. get. Element. By. Id('id 1'). style. color='red'"> Click Me!</button> </body> </html> 22

網頁設計實務 l 實例： <!DOCTYPE html> <head> <style>. Red {color: red; font-size: 12 pt}. Blue {color: blue; font-size: 12 pt} </style> <script type="text/javascript"> <!-function Changing(flag) { if (flag == 'over') { document. get. Element. By. Id("CSScolor"). class. Name = "Blue"; } Changing CSS class else { document. get. Element. By. Id("CSScolor"). class Name = "Red"; } } --> </script> </head> <body> <p class="Red" id="CSScolor" onmouseover="Changing('over')" onmouseout="Changing('out')"> Changing CSS class</p> </body> </html> 23

網頁設計實務 l Java. Script免費編輯器 Free Java. Script Editor 4. 7 – http: //key. chtouch. com/Content. View. aspx? P=425 l 編輯上頁程式 – 設定 Google Chrome瀏覽器，進行測試 – 轉存成記事本檔案 – 練習：加入 on. Mouse. Down (滑鼠按下 )事件，變成綠色 l 加入 on. Mouse. Up (滑鼠放開 )事件，變成黑色 l 24

網頁設計實務 l l 5. HTML 5 Input Types http: //www. w 3 schools. com/html 5_form_input_types. asp HTML 4/4. 01 支援的 type屬性值如下 : l HTML 5 新增的 type屬性值如下 : – text uemail umonth – password uurl uweek usearch udatetime-local – submit utel udate – reset unumber utime – file urange udatetime – radio – checkbox – image – hidden ucolor – button 25

網頁設計實務 <input>元素新增的屬性 l required屬性 – 必填 min、 max與 step屬性 autofocus屬性 l 01: <form> 02: <label>手機號碼：</label> l 03: <input type="tel" pattern="[0 -9]{4}(-[0 -9]{6})" title="例如 0932 -123456"> 04: <input type="submit"> – 令焦點自動移至某個表單欄位 05: </form> l placeholder屬性 – 浮水印輸入提示 l pattern屬性 – 自訂輸入格式 26

網頁設計實務 HTML 5 Form + Javascript實例 <!DOCTYPE html> <head> <script type="text/javascript"> function process. Data(){ var temp = ""; var UAccount = document. get. Element. By. Id("User. Account"). value; temp += "您輸入的帳號是： + UAccount + "n"; " var UPass = document. get. Element. By. Id("User. Pass"). value; temp += "您輸入的密碼是： + UPass + "n"; " alert(temp); } </script> </head> 27

網頁設計實務 HTML 5 Form + Javascript實例 (續 ) <body> <h 2>HTML 5 Form + Javascript實例 </h 2> <form id="form 1"> 帳號 : <input type="text" id="User. Account" required autofocus/><p> 密碼 : <input type="password" id="User. Pass" /><p> <input type="submit" form="form 1" on. Click="process. Data()" value="輸入完畢 " /><p> </form> </body> </html> 28

網頁設計實務 HTML 5 Form + Javascript自行練習 29

網頁設計實務參考資料 l 教科書 – 榮欽科技、陳婉凌，網頁設計必學的程式實作技術： HTML 5+CSS 3+Java. Script， 2012年，博碩。 l Chap 10: Java. Script 與 Canvas線上繪圖 l Chap 7: 表格與表單 l 網路資源 – http: //www. w 3 schools. com/js/ 30

網頁設 計 實務 Java Script 靜宜大學 資管系 楊子青

網頁設計實務 Java Script 靜宜大學資管系楊子青