l Java Script Netscape 1994Live Script Netscape Live

網頁設計實務 l Java. Script 發展歷史 – Netscape於 1994年發展Live. Script電腦語言，目的：在伺服器端，輔助 Netscape 的伺服器程式

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

網頁設計實務 l 1. Java. Script架構基本架構 <script type="text/javascript"> <!-Java. Script程序敘述 --> </script> l

網頁設計實務 l Java. Script根據網頁載入順序執行 <head></head>標記內 l <body></body>標記內 <!DOCTYPE html> <html> <head> <script type="text/javascript">

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

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

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

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

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

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

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

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

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

網頁設計實務 <!DOCTYPE html> <head> <script type="text/javascript"> <!-function sum(a, b) { Result = a

網頁設計實務 l Finding HTML Elements (1) Finding HTML elements by Id – 實例：

網頁設計實務 l Finding HTML Elements (2) Finding HTML elements by Tag Name –

網頁設計實務 l Changing HTML Content 實例： http: //www. w 3 schools. com/dhtml/tryit. asp?

網頁設計實務 l Changing CSS style 實例： http: //www. w 3 schools. com/dhtml/tryit. asp?

網頁設計實務 l 實例： <!DOCTYPE html> <head> <style>. Red {color: red; font-size: 12 pt}.

網頁設計實務 l l 5. HTML 5 Input Types http: //www. w 3 schools.

網頁設計實務 <input>元素新增的屬性 l required屬性 – 必填 min、max與step屬性 autofocus屬性 l 01: <form> 02: <label>手機號碼：</label>

網頁設計實務 HTML 5 Form + Javascript實例 <!DOCTYPE html> <head> <script type="text/javascript"> function process.

網頁設計實務 HTML 5 Form + Javascript實例 (續) <body> <h 2>HTML 5 Form +

Slides: 30

Download presentation

網頁設計實務 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

網頁設計實務 <!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 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 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> ltype="tel" pattern="[0 -9]{4}(-[0 -9]{6})" title="例如0932 -123456"> 03: <input 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