:::

HTML & CSS & JavaScript &PHP概念教學

2月 04, 2007 0 Comments Edit Copy Download

這份是講課用的教材，本來想做成投影片的草稿，但是發現投影片還要顧慮排版，因此決定最後仍以網頁的形式講解。

預設教學對象是有基礎程式能力的人，懂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篩選器

  • 選擇要套用樣式的對象
    1. 標籤 tag
    2. 類別 class
    3. 識別代號 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時間：
    <?php
    echo time(); //echo是顯示的語法，time()會回傳UNIX TIMESTAMP
    ?>
    </p     結果：在這邊使用的是JavaScript作為模擬
    顯示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["變數名稱"]
    再搭配SQL來查詢資料庫

PHP與資料庫使用步驟

  1. 資料庫伺服器連線：mysql_connect([主機位置], [登入帳號], [密碼]);
  2. 資料庫選擇：mysql_select_db([資料庫名稱]);
  3. SQL語法執行：$result = mysql_query([SQL語法]);
    $result即是傳回來的資料結果指標
  4. 從結果指標中取出資料：$data = mysql_fetch_array($result);
    依照SQL查詢欄位的名稱，將資料以陣列型態傳回給$data
  5. 示範：
    假如SQL語法為
    select * from `table` 查詢結果表格為：灰色背景為結果指標所指定的資料列
    id name value
    1 pudding 布丁
    2 takezao 竹竿
    3 billxu 小逼
    執行$data = mysql_fetch_array($result);之後
    • $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:
  • 執行網址目錄：

參考資料

訂閱： 張貼留言 (Atom)