b77b65e5492c99e9134e0d1be9abeb4e.ppt
- Количество слайдов: 30
網頁設 計 實務 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
b77b65e5492c99e9134e0d1be9abeb4e.ppt