SVVRL IM NTU IE Firefox HTML CSS Javascript

SVVRL @ IM. NTU 網站架構：客戶端與伺服端架構 客戶端電腦－ 瀏覽器 (例. IE、 Firefox) 解讀 HTML CSS Javascript 2021/3/9 伺服端電腦－ Application Container (例. Apache) 運算 PHP 資料庫 (例. My. SQL) 執行 SQL 4

SVVRL @ IM. NTU HTML (1/4) HTML結構 DIV區塊 (極重要) <html> <head> <title>網頁名稱</title> </head> <body> 網頁內容 </body> </html> <div>我是區塊</div> 2021/3/9 <div>區塊一</div> <div>區塊二</div> 6

SVVRL @ IM. NTU HTML (2/4) HTML常用語法 HTML表格 超連結 <a href="http: //www. pcnet. idv. tw/">link</a> <table border=“ 1”> <tr> <td>第一列第一欄</td> <td>第一列第二欄</td> </tr> <tr> <td>第二列第一欄</td> <td>第二列第二欄</td> </tr> </table> 圖片 <img src=“/example. jpg” alt=“我是標籤" /> 2021/3/9 7

SVVRL @ IM. NTU HTML (3/4) HTML進階表格 HTML表單 <table border=“ 1”> <tr> <td colspan=“ 2”>第一列(跨兩欄)</td> </tr> <tr> <td>第二列第一欄</td> <td>第二列第二欄</td> </tr> </table> 請輸入自己的名字： <form action=“next_page. php" method="GET"> <input type=text name="name" size=30> <input type=submit value="確定"> <input type=reset value="重設"> </form> 2021/3/9 8

HTML (4/4) SVVRL @ IM. NTU HTML input 文字輸入 <input type="text" name="firstname" /> 單選 <input type=“radio” name=“gender” value=“male” /> Male <input type=“radio” name=“gender” value=“female” /> Female 多選(check box) Soccer: <input type="checkbox" name=“soccer" value=“yes" /><br /> Football: <input type="checkbox" name=“football" value=“yes" /><br /> Baseball: <input type="checkbox" name=“baseball" value=“yes" /><br /> Basketball: <input type="checkbox" name=“basketball" value=“yes" /> 下拉選單 <select name="degree"> <option value=“ 1”>Choose One</option> <option value=“ 2”>Some High School</option> </select> 2021/3/9 9

SVVRL @ IM. NTU CSS (1/2) CSS引入方式 1 CSS引入方式 2 直接在HTML標籤中寫CSS 寫在<head></head>中 <div id=“a_block" style="width: 310 px; height: 480 px"> <style> #id_name{ width: 960 px; height: 30 px; } . class_name{ width: 960 px; height: 490 px; } </style> 2021/3/9 11

javascript常見語法 n 寫在 q n <script type="text/javascript"></script> 變數宣告 q n SVVRL @ IM. NTU variable_name; 其它常見語法 q q 2021/3/9 if(){} else{} while(){} for(){} function_name(v 1, v 2){} 14

javascript事件概念 (1/2) <html> <head> <title>第一個網頁程式</title> <script type="text/javascript"> var a=2; function load(){ a=3; } </script> </head> <body on. Load="load()"> Hello World! </body> </html> 2021/3/9 SVVRL @ IM. NTU 寫在<script>中 事件概念 執行順序？ 15

javascript事件概念 (2/2) n SVVRL @ IM. NTU onclick、onchange、onmouseover、onmouseout、 onsubmit、onresize、onload、onunload、onkeyup、 onkeydown <html> <head> <title>第一個網頁程式</title> <script type="text/javascript"> var a=2; function action(){ a=3; } </script> </head> <body> <select name="gender" id="gender" onchange=“action()" > </select> </body> </html> 2021/3/9 16

SVVRL @ IM. NTU javascript：DOM操作 (1/4) JS可對DOM模型進行操作 document 新增、刪除、改變 DOM物件 Html Head body Title <div> 標題 <a> 使用者使用網頁時 進行DOM模型操作 <img> 雅虎首頁 2021/3/9 17

SVVRL @ IM. NTU javascript：DOM操作 (2/4) 取得DOM物件 <html> <head> <title>第一個網頁程式</title> <script type="text/javascript"> function load(){ var b 1 = document. get. Element. By. Id("block 21"); var block_id=b 1. id; var block_width=b 1. style. width; } </script> </head> <body on. Load="load()"> <div id="block 21" style="width: 100 px"></div> </body> </html> 2021/3/9 18

SVVRL @ IM. NTU javascript：DOM操作 (3/4) <html> 創造DOM物件 <head> <script type="text/javascript"> var div_top=200; function load(){ var new. Resort=document. create. Element('div'); new. Resort. id="new. Resort_id"; new. Resort. style. left="100 px"; new. Resort. style. top=div_top+"px"; new. Resort. style. background. Color="red"; document. body. append. Child(new. Resort); } </script> </head> <body on. Load="load()"> </body> </html> 2021/3/9 19

SVVRL @ IM. NTU javascript：DOM操作 (4/4) 改變DOM物件 <html> <head> <title>第一個網頁程式</title> <script type="text/javascript"> function load(){ var b 1 = document. get. Element. By. Id("block 21"); var b 1. style. width="200 px"; } </script> </head> <body on. Load="load()"> <div id="block 21" style="width: 100 px"></div> </body> </html> 2021/3/9 20

jquery n n SVVRL @ IM. NTU jquery是一個JS函式庫 引入方式： <script type="text/javascript" src="jquery. js"></script> 2021/3/9 22

jquery語法結構 SVVRL @ IM. NTU $("#user"). css("background-color", "#a 00 a 06"); 選擇器 2021/3/9 對這些物件做事情 23

jquery選擇器 n $("#user") q n 選擇屬於title類別的DOM物件 $("div") q n 選擇id為user的DOM物件 $(". title") q n SVVRL @ IM. NTU 選擇標籤名稱為div的DOM物件 其它 q 2021/3/9 請見jquery官網 24

常用jquery函式 (1/2) n 類別操作： q n . has. Class()、. add. Class()、. remove. Class()、. toggle. Class()、. find()、. each()、. eq() 性質操作： q n SVVRL @ IM. NTU . attr()、. val()、. css() html字串操作： q 2021/3/9 . html()、. append()、. prepend()、. empty()、. remove() 25

常用jquery函式 (2/2) n 事件： q n . click()、. dbclick()、. mousedown()、. mouseover()、. mouseup()、. mouseout()、. ready() 動畫效果： q n SVVRL @ IM. NTU . annimate()、. fade. In()、. fade. Out() 其它 q 2021/3/9 請見jquery官網 26

常用SQL語法 (1/2) n 取資料 q n SVVRL @ IM. NTU select name, longitude, latitude from resort where country= "日本" and name= "金閣寺" 加入資料 q 2021/3/9 insert into journey_people(journey_id, user_account) values(" journey-001 ", " steve 750312") 29

常用SQL語法 (2/2) n 更新資料 q n SVVRL @ IM. NTU update resort set price= " 500", phone = "3333 -2211" where country = "台灣” and name = "陽明山" 刪除資料 q 2021/3/9 delete from resort where name = "陽明山" 30

PHP資料庫操作 SVVRL @ IM. NTU <? $name="steve"; $link = mysqli_connect("localhost", "user", "password", "db_name"); mysqli_query("SET NAMES 'UTF 8'"); mysqli_query("SET CHARACTER_SET_CLIENT=UTF 8"); mysqli_query("SET CHARACTER_SET_RESULTS=UTF 8"); $query=" select money from account where user=? "; $stmt=mysqli_prepare($link, $query); mysqli_stmt_bind_param($stmt, "s", $name); mysqli_stmt_execute($stmt); mysqli_stmt_store_result($stmt); mysqli_stmt_bind_result($stmt, $money); while(mysqli_stmt_fetch($stmt)){ echo $money; Prepared Statement } ? > 2021/3/9 31

php程式 (1/2) <html> <head> <title> 第一個網頁程式 </title> </head> <body> <? $a= “Hello World!”; echo $a; ? > </body> </html> 2021/3/9 SVVRL @ IM. NTU PHP程式指令 寫在<? ? >中 變數以＄開頭 輸出指令：echo 33

SVVRL @ IM. NTU php程式 (２/2) n 變數 q q n 不須宣告 型態可改變 其它程式概念皆相同 q q q 2021/3/9 <? $a=“Hello!”; echo $a; $a=1; echo $a; ? > if(){} else if() {} else{} for($i=0; $i<10; $i++){} while(){} function_name($v 1, $v 2){} 陣列、物件…… 34

SVVRL @ IM. NTU 伺服端程式輸出 – 與網站架構關 客戶端電腦－ 瀏覽器 (例. IE、 Firefox) 解讀 HTML CSS Javascript 2021/3/9 伺服端電腦－ Application Container (例. Apache) 運算 PHP 資料庫 (例. My. SQL) 執行 SQL 35

SVVRL @ IM. NTU 伺服端程式輸出 – 與網站架構關係 使用者請求 (HTTPRequest) http: //example. com/a. php 客戶端電腦－瀏覽器 (例. IE、Firefox) 解讀運算 <html> <head> 執行結果 <title> 第一個網頁程式 </title> </head> <body> Hello World! </body> </html> 2021/3/9 傳送 <html> <head> <title> 第一個網頁程式 </title> </head> <body> Hello World! </body> </html> 伺服端電腦－ Application Container (例. Apache) <html> 運算a. php <head> <title> 第一個網頁程式 </title> </head> <body> <? echo “Hello World!”; ? > </body> </html> 36

SVVRL @ IM. NTU 伺服端程式輸出 – 與網站架構關係 差異點？ <? echo “<html>”; echo “<head>”; echo “<title>第一個網頁程式</title>”; echo “</head>”; echo “<body>”; echo “Hello World! ”; echo “</body>”; echo “</html>”; ? > 2021/3/9 <html> <head> <title>第一個網頁程式</title> </head> <body> Hello World! </body> </html> 37

PHP網頁間變數傳遞(GET) SVVRL @ IM. NTU <form action=“page 2. php" method="GET"> page 1. php <input type=text name="name" size=30> <input type=submit value="確定"> <input type=reset value="重設"> </form> <? ? > 2021/3/9 $name=$_GET["name"]; page 2. php echo "Hi, "; echo $name; echo "!"; 38

PHP網頁間變數傳遞(GET) SVVRL @ IM. NTU page 1. php <a href=". /page 2. php? name=steve&age=10">Steve檔 案</a> <? ? > 2021/3/9 $name=$_GET["name"]; $name=$_GET["age"]; page 2. php echo "Hi, "; echo $name; echo "!"; 39

SVVRL @ IM. NTU PHP網頁間變數傳遞(POST) <form action=“page 2. php" method=“POST">page 1. php <input type=text name="name" size=30> <input type=submit value="確定"> <input type=reset value="重設"> </form> <? ? > 2021/3/9 $name=$_POST["name"]; page 2. php echo "Hi, "; echo $name; echo "!"; 40

Session概念 (2/2) $account="steve"; SVVRL @ IM. NTU page 1. php session_start(); if(!isset($_SESSION["account"])){ session_register("account"); $_SESSION["account"]=$account; } if (!isset($_SESSION['account'])){ echo "尚未登入"; } else{ echo 'Hi'. $_SESSION['account']; } 2021/3/9 page 2. php 42

AJAX ：網站架構 (1/2) 客戶端電腦－ 瀏覽器 (例. IE、 Firefox) 解讀 HTML CSS Javascript 2021/3/9 伺服端電腦－ Application Container (例. Apache) 運算 PHP SVVRL @ IM. NTU 資料庫 (例. My. SQL) 執行 SQL 44

AJAX：網站架構 (2/2) SVVRL @ IM. NTU 使用者請求 (HTTPRequest) 客戶端電腦－瀏覽器 (例. IE、Firefox) 改變頁面 2021/3/9 傳送資料 (str, XML, JSON) 伺服端電腦－ Application Container (例. Apache) 運算php 45

AJAX：XML格式溝通 SVVRL @ IM. NTU 哪個資訊承載比較多？ <person> <name> Steve</name> <gender>Male</gender> <age>25</age> <girlfriend> <name> Karen</name> <gender>Female</gender> <age>24</age> </girlfriend> </person> <person gender=“Male”> <name> Steve</name> <age>25</age> <girlfriend gender=“Female”> <name> Karen</name> <age>24</age> </girlfriend> </person> 哪個方式比較好？ 2021/3/9 46

AJAX：JSON格式溝通 SVVRL @ IM. NTU { { } “name”: ”Steve”, “gender”: ”Male”, “age”: ” 25” 2021/3/9 “name”: ”Steve”, “gender”: ”Male”, “age”: ” 25”, “girlfriend”: { “name”: ”Karen”, “gender”: ”Female ”, “age”: ” 24” } } 47

AJAX SVVRL @ IM. NTU j. Query. ajax({ url: " receive. php ", data: { name 1: "value 1", name 2: "value 2" }, type: "POST" , data. Type: "xml" , async: true, success: function(response){ var v 1=$(response). find(" tag_name "). text(); }, error: function(){ } }) 2021/3/9 48

SVVRL @ IM. NTU Q & A 2021/3/9 52