Advanced PHP Programming

Size: px

Start display at page:

Download "Advanced PHP Programming"

熙悦乌
6 years ago
Views:

1 進階網路程式設計

2 About last week 是否有練習 Session

3 Question 我們使用文字方塊送出一串文字, 那要如何在送出前, 判斷使用者是否有輸入資料? (E.g. 帳號是否介於 5~10 字元 ) 另外, 之前我們在 HTML 中, 用 <font > 來設定字型的大小與顏色, 是否有可能無法滿足需求的時候呢? (E.g. 超大字體 )

4 What s Next HTML5 JavaScript CSS 樣式 PHP 與 XML AJAX jquery

5 何謂 HTML5 取代 HTML 4.01 和 XHTML 1.0 標準廣義而言,HTML5 泛指 HTML CSS 和 JavaScript 在內的一套技術組合減少 Flash Silverlight JavaFX 等外掛程式, 提供更多有效增強網路應用的標準集

6 HTML5 v.s. HTML4 (1) 更容易處理網頁中的多媒體和圖片 <video> <audio> <canvas> 豐富文檔的資料內容 <section> <article> <header> <nav> 被修改的元素 <a> <menu> 被移除掉的元素 <font> <center> 以 CSS 取代

7 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, , 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 取自

8 文件類型定義 <!DOCTYPE HTML> 基本的 HTML 標籤 ( 不含 CSS 或 JavaSceipt 語法 ), 是否加入以上宣告並不會影響顯示結果一個簡單的 DOCTYPE 聲明能減少許多不必要的猜測行為與錯誤更多說明, 可參考 1. W3C (World Wide Web Consortium) 網站中的 DTD (Document Type Definition) 宣告方式 htm 3.

9 HTML5 教學網站

10 HTML5 所面臨的挑戰使用者的瀏覽器是否支援 HTML5 瀏覽器使用趨勢各家瀏覽器的相容性瀏覽器相容性各元素的相容性

11 瀏覽器使用趨勢

12 瀏覽器使用趨勢 ( 台灣 )

13 瀏覽器支援 HTML5 之評分滿分為 555 分, 取自

14 JavaScript JavaScript 是程式嗎? 與 Java 有什麼關係? 與 PHP 有何不同? 想想它的優缺點?

15 JavaScript 語法應放在哪裡? W3C 建議放於 <head> </head> 中依實際需要決定在 body 中的 JavaScript 會在頁面載入的時候被執行在 head 中的 JavaScript 會在被調用的時候才執行調用 Google Map 時, 需要將一段 JavaScript 程式碼, 放於 </body> 後或 </html> 後

16 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>

17 JavaScript 預防使用者之瀏覽器不支援 JavaScript, 一般會在前後加入  <script type="text/javascript">  </script>

18 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.

19 JavaScript 相關教學網站 ml p

20 練習題請將上週的程式, 加入以下設定使用 HTML 限制帳號 ( 文字方塊 ) 最多輸入 10 字用 JavaScript 語法, 判斷帳號是否有超過 ( 含 ) 4 字, 若無, 則用 JavaScript 彈出帳號字數不足的警告對話方塊 Google 一下, 找找以上功能, 是否能使用 CSS 做到一樣的功能呢? 其他中文 / 英文的長度問題想想這樣的程式有什麼好處? 不一定需要自己寫, 但要找得到

21 練習題 ( 提示 ) 關於 JavaScript 部分的提示 : 1. <form onsubmit="return form_action()"> 2. <script type="text/javascript">  </script> if ( ) { alert(" 請輸入您的帳號 "); return false; } else { return true; }

22 JavaScript 由於 JavaScript 範圍太廣, 課程中將不一一介紹, 請同學課後自行拜訪上面網站, 學習相關之技術不會 JavaScript 沒關係, 但要學會小偷借東西

23 CSS 語法應放在哪裡? W3C 建議放於 <head> </head> 中放於 <body> 前都可以, 因為在 body 中會被用到

24 CSS Style 基本樣式一般會將 CSS 設定放於 <head> 中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <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>

25 CSS Style 舊課本 23-2 行內樣式 (ex23-1.html) <p style="font-size: 18px; font-family: ' 新細明體 '; color: #669999;"> 行內樣式 (inline style) 是直接寫在 HTML 元素內, 因此只能套用在這個元素您使用 HTML 元素的 style 屬性來指定行內樣式 </p>

26 CSS Style 舊課本 23-2 嵌入 CSS 樣式 (ex23-2.html) <style type="text/css">  </style> <h1> 嵌入 CSS 樣式 </h1> <p> 在網頁中加入 CSS 樣式的比較嚴謹的方式, 是使用 HTML 的 style 元素來在網頁的開頭嵌入一個樣式區塊 style 元素必須放在 head 檔頭區塊內 </p>

27 CSS Style 舊課本 23-3 建立外部 CSS 樣式的連結 (ex23-3.html) 推薦使用此種方法 ( 優點?) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <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

28 CSS Style 同學請參考網站上, 舊課本的範例檔 23-5 ~ ~ 以上請同學自修不用刻意背, 需要用的時候再查即可要看得懂別人寫的 CSS 基本上, 所有的樣式都可以靠 CSS 完成

29 練習題接續本週的上一題練習題使用 CSS, 建立一字型大小 100px 的字體, 使用標楷體顯示, 並與前一行保持 30px 的間距設計一 2x2 的表格 (table), 然後使用 CSS 設定 1. 表格的寬度為 80% 2. 欄位的高度為 100px 3. 以上需使用 CSS, 不能使用 HTML 指令

30 注意事項練習題完成後, 別忘了上傳之後要教的東西, 跟 JavaScript 與 CSS 都有關, 同學有時間請自行複習以上課程

關於本書 Part 3 CSS XHTML Ajax Part 4 HTML 5 API JavaScript HTML 5 API Canvas API ( ) Video/Audio API ( ) Drag and Drop API ( ) Geolocation API ( ) Part 5

關於本書 Part 3 CSS XHTML Ajax Part 4 HTML 5 API JavaScript HTML 5 API Canvas API ( ) Video/Audio API ( ) Drag and Drop API ( ) Geolocation API ( ) Part 5 網頁程式設計 HTML JavaScript CSS HTML JavaScript CSS HTML 5 JavaScript JavaScript HTML 5 API CSS CSS Part 1 HTML HTML 5 API HTML 5 Apple QuickTime Adobe Flash RealPlayer Ajax XMLHttpRequest HTML 4.01 HTML 5