臺灣海洋大學 資訊工程系 馬尚彬
Web程式設計簡介
(Web Programming Introduction)
HTML+CSS+JavaScript

是否(大概)聽過以下名詞?
2
Internet
WWW
(World Wide
Web)
Web Page
Web Site
Youtube
Google
Map
Facebook
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:albert@ntou.edu.tw">寄信給馬老師</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
 Facebook
 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