給高中生的web programming教材
DESCRIPTION
給高中生的Web programming教材，包含HTML、CSS以及JavaScript。TRANSCRIPT
臺灣海洋大學 資訊工程系 馬尚彬
Web程式設計簡介 (Web Programming Introduction)
HTML+CSS+JavaScript
是否(大概)聽過以下名詞? 2
Internet
WWW (World Wide
Web) Web Page
Web Site Youtube
Google Map
HTML
JavaScript
你瀏覽網頁嗎? 3
是否試過[另存網頁]？
點擊儲存的網頁會看到甚麼?
是否觀看過網頁原始碼？
[檢視網頁原始碼]功能；或
直接用文字編輯器看儲存的網頁檔案
網頁原始碼 4
所有網頁都是遠端Server來的，瀏覽器再將網頁透過URL下載到本地端電腦(或手機或平版)
網頁包含甚麼? 5
文字
其實網頁本來就是網際網路上的文件
非文字內容
圖片、圖形、聲音、影片、應用程式
網頁的核心: 標籤(Tag) 6
網頁的語法遵循HTML (HyperText Markup Language)
成對標籤:
<h1>最大標題</h1>
<p>字型與大小設定</p>
單一標籤:
換行<br>
標籤屬性(Attribute):
<img src = "tabletennis.jpg" width = "400" height = "271" alt = "世桌賽金牌">
有哪一些標籤可以使用? 7
目前的標準已轉移到HTML5
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
第一個HTML5程式 8
標頭 (head)
主體(body)
註解(comment)
編輯與執行 9
編輯
使用一般記事本即可編輯HTML5 建議使用Notepad++
亦可使用其他更豐富之編輯器，如Dreamweaver、Aptana
要將附檔名存成.html或.htm
執行
用瀏覽器即可開啟執行網頁
開發期間建議用Chrome或Firefox，測試期間要確保IE、 Chrome、Firefox、Opera四種主流瀏覽器均可支援
若要能想一般網站一樣讓所有人連結，需架設Web Server。
超連結(Hyperlink) 10
範例： <a href="http://www.google.com.tw">Google</a>
<a href="mailto:[email protected]">寄信給馬老師</a>
<a href="浪費.mp3">音樂</a>
<a href="動畫.ogg">影片</a>
<a href="#menu">主選單</a>
<a>是錨(anchor)的意思，href是指超連結(hyper reference) href可放相對路徑或絕對路徑
圖片(Image) 11
範例：
<img src = "tabletennis.jpg" alt = "世桌賽金牌" />
<img src = "tabletennis.jpg" width = "400" height = "271" alt = "世桌賽金牌" />
<img src = "tabletennis.jpg" width = "200" height = "135" alt = "世桌賽金牌" />
透過width和height屬性設定，可以做到放大縮小圖片的效果，也可以讓圖片載入更快。
表格(Table)1
12
如何產生以下的功課表網頁?
表格(Table)2
13
範例:
表格(Table)3
14
範例 (續):
表格(Table)4
15
一個table分為三區: 頭(thead)、腳(tfoot)、身體(tbody)
每一區都可加入表格行(table row, tr)，每個表格行可加入表格資料(table data, td)
rowspan屬性: 將一個td往橫的方向擴展幾格
colspan 屬性: 將一個td往縱的方向擴展幾格
表單(Form)1
16
如何產生以下的輸入選單?
表單(Form)2
17
範例：
表單(Form)3
18
Input標籤可允許的type屬性:
• button • checkbox • color • date • datetime • datetime-local • email • file • hidden • image • month • number
• password • radio • range • reset • search • submit • tel • text • time • url • week
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
其他標籤列表1
19
<p></p>: 段落 <br >: break 斷行 <hr >: horizontal line 水平橫線
<ol></ol>: ordered list 有順序編號之清單 <ul></ul>: unordered list 無順序之項目清單 <li></li>: list item 清單項目
<frameset></frameset>: 框架集 <frame></frame>: 框架 <iframe></ifame>: 內部框架
其他標籤列表2
20
<b>: 粗體字
<i>: 斜體字
<big>: 加大字體
<small>: 縮小字體
<sub>:下標
<sup>:上標
<tt>: 單行間距字型
<u>: 加底線
練習1 21
目前已有一個HTML檔: example-html-partial.html，其內容為條列商品名稱之表格，請將其改寫為包含商品價格與「聯絡經理」連結(可自動開啟e-mail程式)之表格。
習題下載網址：http://goo.gl/RaR10
CSS (Cascading Style Sheets)1
22
Why CSS?
是否發現自己編寫的HTML與一般網站中的網頁有很大的差異?
CSS (Cascading Style Sheets)2
23
HTML v.s CSS
HTML 只用來設定網頁結構與內容
CSS則負責裝飾網頁
CSS Demo
https://developer.mozilla.org/en-US/demos/tag/tech:css3
CSS規則1
24
CSS 可以適用於特定的HTML tag、特定類別(class)的HTML元素(element)或特定ID的HTML元素(element)
多個適用對象之間以逗點（,）分隔
CSS屬性
屬性定義以大括弧（{ }）括住
屬性定義的寫法：屬性名稱:屬性值
多個屬性定義間以分號（;）分隔
CSS規則2
25
選擇器(Selector)可挑選出特定的HTML tag、特定類別(class)的HTML元素(.class形式)、或特定ID的HTML元素(#id形式)，然後套用後面宣告中的CSS屬性。
(資料來源：W3School)
CSS規則3
26
標籤選擇器(Type Selector)
p { font-size: 12pt; font-family: calibri, helvetica, sans-serif;}
把<p>元素內的文字之字型設定為calibri; 若calibri不支援，則設定為helvetica; 若helvetica再不支援，則設定為sans-serif。
類別選擇器(Class Selector)
.special { color: purple; }
把class屬性設定為special之HTML元素之顏色設定為紫色。
設定顏色的好用工具: http://www.w3schools.com/tags/ref_colorpicker.asp
CSS規則4
27
ID選擇器(ID selector)
#intro { font-family: 微軟正黑體, 標楷體; } 將id為intro之HTML元素之字型設定為微軟正黑體; 若微軟正黑體不支援，則設定為標楷體。
假類別選擇器(pseudo-class selector)
針對預設的行為觸發CSS規則的套用
a:hover { background-color: yellow; }
滑鼠游標移至超連結時，背景色改為黃色。
如何在HTML中加入CSS? 28
在HTML標頭中加入<style>標籤，設定CSS規則！
在HTML中加入了CSS 29
CSS使用前： CSS使用後：
背景(Background) 30
可設定背景顏色與圖片
範例:
背景色: 淺灰色
背景圖片: ntoulogo.gif 固定放置於右下角、不重複顯示。
邊框(Border)1
31
CSS可以細部設定HTML元素之留白、邊框、邊界等細節。
Margin: 邊界 Border: 邊框 Padding: 留白 Content: 主內容
邊框(Border)2
32
範例
CSS規則-後代(descendant)選擇器 33
後代選擇器
利用Tag之間的階層關係來做選擇
範例
只有<table>底下的<td>會套用這兩個規則
如何使用外部CSS? 34
在HTML的<head>部分使用<link>標籤
因此，我們可以將CSS設定獨立一份檔案，並命名為xxx.css，讓多個HTML網頁連結使用。
<link rel = "stylesheet" type = "text/css" href = "table.css">
練習2 35
目前已有一個HTML檔: example-html+css-partial.html，請將其改寫，增加三個CSS規則:
(1) 字型改為微軟正黑體
(2) 表格標頭之背景色改為#C8C8C8 (灰色)
(3) 新增滑鼠移至<td>會將<td>背景改為#FFFFCC (淡黃色)
JavaScript1
36
到目前我們開發的網頁(HTML+CSS)只是文件，無法完全根據使用者互動產生變化。
JavaScript是讓網頁可以動起來的方法！
JavaScript2
37
JavaScript is NOT Java!
Java是編譯式(compiled)語言。
JavaScript是直譯式(interpreted)語言，不需要編譯(compile) 只要有瀏覽器，就可以執行JavaScript
JavaScript可以讓網頁動起來
可以回應使用者的要求 使用者點擊button、使用者移動滑鼠、使用者按下鍵盤
可以抓取目前網頁的內容、執行運算程式、再修改目前網頁的內容
第一個JavaScript程式 38
基本JavaScript指令 39
window.alert("透過跳出式視窗顯示的訊息");
window.prompt("要求使用者輸入一些資料:");
document.write("<h1>你想直接印在網頁的文字內容(Tag可以派上用場了)</h1>");
變數(Variable)宣告與型態
變數宣告方式:
一般變數宣告: [var] 變數名稱[=變數值];
範例: var count = 10;
基本資料型態:
number 數字（有小數點） 如20.46
string 文字（用雙引號或單引號括住）
如“周杰倫”、'Nexus 7'
boolean 布林值 true/false
40
函式(Function)呼叫與宣告 41
函式呼叫範例:
var count = parseInt("10");
將字串“10”轉換成數字10
函式宣告範例:
計算球體體積
物件(Object)操作 42
利用「.」來連接 「物件」與其所擁有的屬性(Property)以及具備的功能(Method)
物件名稱.屬性名稱 範例: Math.Pi
物件名稱.方法名稱()
範例: Math.random()
透過JavaScript在網頁上輸入資料 43
方法一: 透過window.prompt()取得資料
var name = window.prompt("請輸入姓名:“)
方法二: 透過HTML Form取得資料
HTML:
JavaScript:
點擊事件(event)
透過JavaScript在網頁上輸出資料 44
方法一: 透過document.write()寫HTML code
方法二: 修改HTML元素的內容
HTML:
JavaScript:
其他程式邏輯 45
判斷式(condition)
迴圈(loop)
HTML + CSS + JavaScript 46
HTML: 網頁結構與內容
CSS: 網頁的呈現與美觀
JavaScript: 網頁的功能
練習3 47
目前已有一個HTML檔: example-html+css+form+javascript-partial ，其可透過點擊[銷售分析]按鈕計算一位銷售員銷售產品後可得到的佣金，請將其改寫，判斷當佣金高於30000元時，額外顯示圖片“congratulations.jpg ” 。
何謂完整的Web Application? 48
必須有「前端」與「後端」
前端：網頁的外觀與使用者介面 技術：HTML, CSS, JavaScript (jQuery), Flash
執行環境：瀏覽器
後端：接受前端的請求(request)、進行運算與資料處理
技術：PHP、.Net、JavaEE
執行環境：伺服器(Server)
其他Web技術 49
Google Map
Youtube
Google Calendar
Flicker / Picasa
練習4 50
目前已有一個美食筆記(slideshow/index.html)的網頁，請將其從展示圖片的功能改為展示Youtube影片的功能。
學習資源 51
MDN
https://developer.mozilla.org/en/HTML/Element
w3schools
http://www.w3schools.com/tags/default.asp
CSS菜鳥救星
http://www.slideshare.net/clayliao/css101-for-beginner
接案我最行！JavaScript & Ajax 商業範例必殺技
Any Question? 52