HTML & CSS & JavaScript &PHP概念教學
布丁布丁吃布丁
HTML & CSS & JavaScript &PHP概念教學
這份是講課用的教材，本來想做成投影片的草稿，但是發現投影片還要顧慮排版，因此決定最後仍以網頁的形式講解。
預設教學對象是有基礎程式能力的人，懂C且學到流程控制之使用，並且具備資料庫與SQL語法概念。以下教材有許多地方是要搭配我口述講解，教材只是輔助標明重點且展示範例。
目錄
HTML
- 超文件標示語言，HyperText Markup Language
- 網頁瀏覽器(IE、FireFox)讀取
- 用標籤(tag)建立資料的結構
<html>
<head>
...
</head>
<body>
...
</body>
</html> - 敘述資料外觀與語意
<font color="#FF0000">紅色的字</font>顯示結果：
<a href="http://www.google.com.tw">連到Google的超連結</a>
紅色的字 連到Google的超連結
標籤的結構
- 定義資料、決定樣式
- 基本結構：
<標籤名稱 屬性="屬性值">資料</標籤名稱><標籤名稱 屬性="屬性值" /> - 文件物件模型，Document Object Model(DOM)：
<body>
<h1>等級1的標題</h1>
<p>段落標籤中的文字<img src="圖片連結" /></p>
</body>
CSS
- 階層樣式表，Cascading Style Sheets
- 以標籤為單位，決定其顯示的樣式，包括文字、背景、框線、位置等等
- 將格式從文件中分離，簡化文件、增加文件的可讀性
示範網站：css Zen Garden: CSS設計之美
CSS三種用法
- 敘述法：
<style type="text/css">
篩選器 {
屬性: 值;
屬性: 值;
}
</style> - 嵌入法：
<標籤名稱 style="屬性: 值; 屬性: 值"></標籤名稱> - 引用法：
<link rel="stylesheet" href="樣式檔位置" type="text/css" /><style type="text/css">
@import url("樣式檔位置")
</style>
CSS樣式常用屬性
- 文字
- color：文字顏色
- font-family：字型
- font-size: 字體大小
- 框線
- border-width：框線寬度
- border-style：框線樣式，有solid(實線)、dotted(點)、double(雙線)等等
- border-color：框線顏色
- 可個別指定上下左右，如border-top-width指定上框線的寬度
- 排版
- margin：標籤之外擠的寬度
- padding：標籤之內縮的寬度
- 位置
- postion：絕對位置或相對位置
- top、bottom、left、right：距離畫面的寬度或是位移的寬度
- Layer圖層常常用到的技巧
- CSS值中的單位
- 絕對大小：px(固定像素)、cm(公分)
- 相對大小：%(百分比)、em(相對於一個字的大小)
CSS篩選器
- 選擇要套用樣式的對象
- 標籤 tag
- 類別 class
- 識別代號 id
- 結合套用與階層結合套用的靈活運用，可以管理大量文件的樣式
- 範例程式碼：
<body>顯示結果：
<h1 class="special-title">等級1的標題<img src="圖片連結" /></h1>
<p>段落標籤中的文字<img src="圖片連結" id="point-img" /></p>
</body>等級1的標題
段落標籤中的文字
CSS篩選器 對象：標籤 tag
- CSS程式碼：
<style type="text/css">
p {
color: #FF0000;
}
</style - 受影響的對象：
<body>
<h1 class="special-title">等級1的標題</h1><img src="圖片連結" />
<p>段落標籤中的文字<img src="圖片連結" id="point-img" /></p>
</body> - 顯示結果：
等級1的標題
段落標籤中的文字
CSS篩選器 對象：類別 class
- CSS程式碼
<style type="text/css">
.special-title {
color: #FF0000;
}
</style> - 受影響的對象：
<body>
<h1 class="special-title">等級1的標題<img src="圖片連結" /></h1>
<p>段落標籤中的文字<img src="圖片連結" id="point-img" /></p>
</body> - 顯示結果：
等級1的標題
段落標籤中的文字
CSS篩選器 對象：識別代碼 id
- CSS程式碼：
<style type="text/css">
#point-img {
border-width: 10px;
border-style: solid;
border-color: #FF0000;
}
</style> - 受影響的對象：
<body>
<h1 class="special-title">等級1的標題<img src="圖片連結" /></h1>
<p>段落標籤中的文字<img src="圖片連結" id="point-img" /></p>
</body> - 顯示結果：
等級1的標題
段落標籤中的文字
CSS篩選器的結合
- CSS程式碼：
<style type="text/css">
#point-img, h1 {
border-width: 10px;
border-style: solid;
border-color: #FF0000;
}
</style> - 受影響的對象：
<body>
<h1 class="special-title">等級1的標題<img src="圖片連結" /></h1>
<p>段落標籤中的文字<img id="point-img" src="圖片連結" /></p>
</body> - 顯示結果：
等級1的標題
段落標籤中的文字
CSS篩選器的階層結合
- CSS程式碼：
<style type="text/css">
body p img {
border-width: 10px;
border-style: solid;
border-color: #FF0000;
}
</style> - 受影響的對象：
<body>
<h1 class="special-title">等級1的標題<img id="point-img" src="圖片連結" /></h1>
<p>段落標籤中的文字<img id="point-img" src="圖片連結" /></p>
</body> - 顯示結果：
等級1的標題
段落標籤中的文字
JavaScript
- 瀏覽器端的控制語法
- 可以讓靜止的文件動態改變
- 透過DOM改變樣式與資料
- 搭配事件(event)或是計時器(setTimeout)觸發做流程控制
- 自動傳遞資料，如AJAX(非同步JavaScript與XML)
- 應用：
- 驗證表單資料
- 按鈕、動畫特效
- 不用換頁的讀取資料：Google Maps
- 語法參考C系列，跟JAVA差別很大
結構鬆散，維護困難
JavaScript的使用
- 插入在網頁文件任意位置
<script type="text/javascript">
[JavaScript程式碼]
</script> - 引用外部連結檔案
<script type="text/javascript" src="副檔名為.js的檔案"></script> - 透過事件呼叫
<標籤 onclick="[JavaScript程式碼]">資料</標籤>
JavaScript的寫法
- 變數與陣列宣告：不需定義資料型態及大小
var i;
i = 0;
a = new Array; - 物件導向的DOM控制：與HTML文件搭配使用
document.getElementById("識別名稱").屬性名 = "值";
document.getElementById("識別名稱").select(); //select()是一個動作 - 流程控制
- if else
- switch
- for、while
- 函式宣告：不需定義回傳值，可搭配物件導向來使用
function function_name(var)
{
[JavaScript程式碼]
return var;
}
document.getElemenyById("識別名稱").function_name(var); - 註解
//單行註解
/*
段落註解
*/
JavaScript示範之一：驗證資料
- 原始碼：
<input type="text" id="test_form" onchange="check_value()" />
<script type="text/javascript">
function check_value()
{
var x = document.getElementById("test_form").value; //從id取得值
if (x == "") //檢查值
window.alert("空值"); //回報結果
else
window.alert("值是："+x); //回報結果
}
</script> - 結果：
JavaScript示範之二：隱藏/顯示元件
- 程式碼：
<div id="main_menu" onmouseover="submenu_show()" onmouseout="submenu_hidden()">主選單</div>
<div id="sub_menu" style="display:none ">└子選單</div>
<script type="text/javascript">
function submenu_show()
{
document.getElementById("sub_menu").style.display = "block"; //透過DOM改變標籤的樣式
}
function submenu_hidden()
{
document.getElementById("sub_menu").style.display = "none";
}
</script> - 結果：
客戶端 v.s. 伺服器端
- 客戶端
client
- 請求伺服器來閱讀網頁，在瀏覽器上顯示的最終結果
- 使用CSS設定顯示畫面、JavaScript計算動態畫面，而不需要伺服器支援
- 伺服器端
server
- 回應來自於客戶端的請求，編譯出網頁回送給客戶端顯示
- 靜態回傳：直接回傳檔案
動態編譯後回傳：執行程式，即時運算出結果後，傳回結果資料。如PHP - 搭配資料庫伺服器，提升處理資料的速度
- 客戶端、伺服器端、資料庫伺服器端的關係：
PHP
- 伺服器端的程式語言
- 直譯式，開放不隱密
- 可搭配資料庫與各種函式庫使用，具備開放原始碼的延伸性
- 沒有統一且決定性的編輯器，以程式碼撰寫為主
- 內嵌式、程序導向的程式語言
<p>顯示unix timestamp時間：結果：在這邊使用的是JavaScript作為模擬
<?php
echo time(); //echo是顯示的語法，time()會回傳UNIX TIMESTAMP
?>
</p
顯示unix timestamp時間：
PHP的撰寫
- 參考C與Perl
- 變數與陣列設定：不定義資料型態、資料大小，可用關聯式陣列
$i = 0; //變數
$ary[0] = "test"; //陣列
$ary2["id"] = "0021"; //關聯式陣列，注意陣列的索引值 - 流程控制
- if else
- for、while
- switch
- 顯示輸出
<?php
echo "字串";
?>
不在PHP標籤內
<?php - 函式宣告與使用
function 函式名稱(參數)
{
[PHP程式碼];
return 變數;
}
函式名稱(參數); - 註解
//單行註解
/*段落註解*/
網頁與伺服器之間的資料傳遞
- 由使用者決定網頁的變數
- 方法
- GET (cgi)：http://www.google.com.tw/search?hl=zh-TW&q=test&meta=
- POST：無法直接看到
- 實作方式：表單form
<form method="get" action="[目標網頁]">範例：
請輸入數值<input type="text" name="[變數名稱]" />
<input type="submit" />
</form> - PHP接收變數的方式：
- $HTTP_GET_VARS["變數名稱"]
- $HTTP_POST_VARS["變數名稱"]
PHP與資料庫使用步驟
- 資料庫伺服器連線：mysql_connect([主機位置], [登入帳號], [密碼]);
- 資料庫選擇：mysql_select_db([資料庫名稱]);
- SQL語法執行：$result = mysql_query([SQL語法]);
$result即是傳回來的資料結果指標 - 從結果指標中取出資料：$data = mysql_fetch_array($result);
依照SQL查詢欄位的名稱，將資料以陣列型態傳回給$data - 示範：
假如SQL語法為
select * from `table`查詢結果表格為：灰色背景為結果指標所指定的資料列
執行$data = mysql_fetch_array($result);之後id name value 1 pudding 布丁 2 takezao 竹竿 3 billxu 小逼 - $data["id"] → "1"
- $data["name"] → "pudding"
- $data["value"] → "布丁"
id name value 1 pudding 布丁 2 takezao 竹竿 3 billxu 小逼
PHP資料庫查詢練習
請撰寫一個[學號].php檔案，並做到下述功能，並上傳到FTP，在連到指定網址去作執行的測試
- 資料庫登入
- mysql_connect("localhost", "帳號", "密碼");
- mysql_select_db("practice");
- 撰寫SQL語法
資料表：user
id name value 1 pudding 布丁 2 takezao 竹竿 3 billxu 小逼 - $sql = "[SQL語法]";
- $result = mysql_query($sql);
- 從查詢結果取出資料，並顯示資料
- $data = mysql_fetch_array($result);
- FTP
- IP:
- Port:
- user:
- password:
- 執行網址目錄：
參考資料
- HTML - Wikipedia，http://zh.wikipedia.org/w/index.php?title=HTML&variant=zh-tw
- CSS - Wikipedia，http://zh.wikipedia.org/w/index.php?title=CSS
- css Zen Garden: CSS設計之美，http://www.csszengarden.com/tr/chinese/
- JavaScript - Wikipedia，http://zh.wikipedia.org/w/index.php?title=JavaScript&variant=zh-tw
- Google Maps，http://maps.google.com/
- msdn，http://msdn2.microsoft.com/zh-tw/library/ms188279.aspx
- Apache，http://www.apache.org/
- PHP - Wikipedia，http://zh.wikipedia.org/w/index.php?title=PHP&variant=zh-tw
Comments