:::

HTML & CSS & JavaScript &PHP概念教學

2月 04, 2007 0 Comments Edit Post

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

預設教學對象是有基礎程式能力的人,懂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:
  • 執行網址目錄:

參考資料

0 意見:

留言工具: