進階網路程式設計
About last week 是否有練習 Session
Question 我們使用文字方塊送出一串文字, 那要如何在送出前, 判斷使用者是否有輸入資料? (E.g. 帳號是否介於 5~10 字元 ) 另外, 之前我們在 HTML 中, 用 <font > 來設定字型的大小與顏色, 是否有可能無法滿足需求的時候呢? (E.g. 超大字體 )
What s Next HTML5 JavaScript CSS 樣式 PHP 與 XML AJAX jquery
何謂 HTML5 取代 HTML 4.01 和 XHTML 1.0 標準 廣義而言,HTML5 泛指 HTML CSS 和 JavaScript 在內的一套技術組合 減少 Flash Silverlight JavaFX 等外掛程式, 提供更多有效增強網路應用的標準集
HTML5 v.s. HTML4 (1) 更容易處理網頁中的多媒體和圖片 <video> <audio> <canvas> 豐富文檔的資料內容 <section> <article> <header> <nav> 被修改的元素 <a> <menu> 被移除掉的元素 <font> <center> 以 CSS 取代
HTML5 v.s. HTML4 (2) 文件類型定義 :<!DOCTYPE HTML> 新的元素 :section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr input 元素的新類型 :date, email, url 等 新的屬性 :ping( 用於 a 與 area), charset( 用於 meta), async( 用於 script) 全域屬性 :id, tabindex, repeat 新的全域屬性 :contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck 移除元素 :acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt 取自 http://zh.wikipedia.org/wiki/html5
文件類型定義 <!DOCTYPE HTML> 基本的 HTML 標籤 ( 不含 CSS 或 JavaSceipt 語法 ), 是否加入以上宣告並不會影響顯示結果 一個簡單的 DOCTYPE 聲明能減少許多不必要的猜測行為與錯誤 更多說明, 可參考 1. W3C (World Wide Web Consortium) 網站中的 DTD (Document Type Definition) 宣告方式 http://www.w3.org/tr/html4/sgml/dtd.html 2. http://www.webpage.idv.tw/maillist/maillist4/new/02/0 2.htm 3. http://www.doubleservice.com/2011/01/html-designlesson1-doctype/
HTML5 教學網站 http://www.w3school.com.cn/html5/ http://zh.wikipedia.org/wiki/html5
HTML5 所面臨的挑戰 使用者的瀏覽器是否支援 HTML5 瀏覽器使用趨勢 http://gs.statcounter.com/ 各家瀏覽器的相容性 瀏覽器相容性 http://html5test.com/ 各元素的相容性 http://html5please.com/
瀏覽器使用趨勢
瀏覽器使用趨勢 ( 台灣 )
瀏覽器支援 HTML5 之評分 滿分為 555 分, 取自 http://html5test.com/results/desktop.html
JavaScript JavaScript 是程式嗎? 與 Java 有什麼關係? 與 PHP 有何不同? 想想它的優缺點?
JavaScript 語法應放在哪裡? W3C 建議放於 <head> </head> 中 依實際需要決定 在 body 中的 JavaScript 會在頁面載入的時候被執行 在 head 中的 JavaScript 會在被調用的時候才執行 調用 Google Map 時, 需要將一段 JavaScript 程式碼, 放於 </body> 後或 </html> 後
JavaScript 基本樣式 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>ex23</title> <script type="text/javascript" src="my.js"></script> </head> <script type="text/javascript"> </script> <body> </body> </html>
JavaScript 預防使用者之瀏覽器不支援 JavaScript, 一般會在前後加入 <!-- //--> <script type="text/javascript"> <!-- document.write("hello World!"); //--> </script>
JavaScript (Old) 若有看到以下很像 JavaScript 的宣告, 通常瀏覽器也都可以跑, 但那是舊寫法 <script language="javascript"> <script language="javascript1.1"> <script language="javascript1.2"> <script language="javascript1.3"> <script language="javascript1.4"> <script language="javascript1.5"> <script language="jscript">
JavaScript 相關教學網站 http://irw.ncut.edu.tw/peterju/jscript.ht ml http://www.takka.com.hk/jstutor/jsindex.htm http://www.w3schools.com/js/default.as p
練習題 請將上週的程式, 加入以下設定 使用 HTML 限制帳號 ( 文字方塊 ) 最多輸入 10 字 用 JavaScript 語法, 判斷帳號是否有超過 ( 含 ) 4 字, 若無, 則用 JavaScript 彈出 帳號字數不足 的警告對話方塊 Google 一下, 找找以上功能, 是否能使用 CSS 做到一樣的功能呢? 其他 中文 / 英文的長度問題 想想這樣的程式有什麼好處? 不一定需要自己寫, 但要找得到
練習題 ( 提示 ) 關於 JavaScript 部分的提示 : 1. <form onsubmit="return form_action()"> 2. <script type="text/javascript"> <!-- function form_action() { } //--> </script> if ( ) { alert(" 請輸入您的帳號 "); return false; } else { return true; }
JavaScript 由於 JavaScript 範圍太廣, 課程中將不一一介紹, 請同學課後自行拜訪上面網站, 學習相關之技術 不會 JavaScript 沒關係, 但要學會小偷 借東西
CSS 語法應放在哪裡? W3C 建議放於 <head> </head> 中 放於 <body> 前都可以, 因為在 body 中會被用到
CSS Style 基本樣式 一般會將 CSS 設定放於 <head> 中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>ex23</title> <style type="text/css"> </style> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> </body> </html>
CSS Style 舊課本 23-2 行內樣式 (ex23-1.html) <p style="font-size: 18px; font-family: ' 新細明體 '; color: #669999;"> 行內樣式 (inline style) 是直接寫在 HTML 元素內, 因此只能套用在 這個元素 您使用 HTML 元素的 style 屬性來指定行內樣式 </p>
CSS Style 舊課本 23-2 嵌入 CSS 樣式 (ex23-2.html) <style type="text/css"> <!-- h1 {color: red;} p { font-size: 18px; font-family: ' 新細明體 '; color: #669999; } --> </style> <h1> 嵌入 CSS 樣式 </h1> <p> 在網頁中加入 CSS 樣式的比較嚴謹的方式, 是使用 HTML 的 style 元素來在網頁的開頭嵌入一個樣式區塊 style 元素必須放在 head 檔頭區塊內 </p>
CSS Style 舊課本 23-3 建立外部 CSS 樣式的連結 (ex23-3.html) 推薦使用此種方法 ( 優點?) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>ex23-3</title> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> <h1> 外部 CSS 樣式 </h1> <p> 使用 CSS 最有效的方式就是將 CSS 樣式儲存在外部的文件中, 然後在網頁中建立外部 CSS 樣式文件的連結 外部 CSS 樣式文件是一個純文字的文件, 您不能在外部 CSS 樣式文件中使用 XHTML 標記或註解 </p> </body>
CSS Style 同學請參考網站上, 舊課本的範例檔 23-5 ~ 23-6 23-7 ~ 23-13 以上請同學自修 不用刻意背, 需要用的時候再查即可 要看得懂別人寫的 CSS 基本上, 所有的樣式都可以靠 CSS 完成
練習題 接續本週的上一題練習題 使用 CSS, 建立一字型大小 100px 的字體, 使用標楷體顯示, 並與前一行保持 30px 的間距 設計一 2x2 的表格 (table), 然後使用 CSS 設定 1. 表格的寬度為 80% 2. 欄位的高度為 100px 3. 以上需使用 CSS, 不能使用 HTML 指令
注意事項 練習題完成後, 別忘了上傳 之後要教的東西, 跟 JavaScript 與 CSS 都有關, 同學有時間請自行複習以上課程