:::

沒有動力

布丁布丁吃布丁

2月 06, 2007 4 Comments

沒有動力

今天把自動摘要的功能重新整理了一遍，修正了許多Bug。

好不容易把事情都做完了，應該要開始好好地寫結案報告的，可是現在卻完全沒有任何動力。

整天只喊著「結案報告不知道該如何下筆啊」，但事實上卻是沒有任何下筆的動力，這實在是很糟糕的一件事情。之前在寫研究計畫的時候也是這樣的。

嗯...反正就在電腦前坐著，看看能不能找到一些動力吧...

(more...)

無題

布丁布丁吃布丁

2月 06, 2007 0 Comments

無題

「...妳也是來吞食我的夢想的人嗎？」

面對我的質問，她愣了一下，眨了眨眼
然後噗嗤地笑了一下，回答我：

「是的。」

其實，我對於這個答案，並不感到意外
我跟她的關係，早已經在「契約」上註明的相當清楚
──「利益關係」，可以這樣說吧。

我
跟她
以及，他

還有這一切中心的，「契約」

現在，還在持續進行中...
(more...)

無題

布丁布丁吃布丁

2月 06, 2007 0 Comments

無題

基於她的建議，我嚐試使用儀式物品
來輔助魔力的流動

我選擇的是卡片
塔羅牌那種，約9.5cm×14cm大小

一開始先創造出空白的卡片
再在卡片上，描繪出魔力流動的概念畫
憑著概念畫的內容，就能夠掌握魔力的方向

但是，這對沒有創意的我來說，概念畫是件很困難的事情
因此到目前為止，最順利創造出來的卡片，僅有Waker跟Protect Shield
整個過程並不是很順利

後來，我比較常借用他的儀式物品──那些他常常在換的武器
儘管並不是我專屬的道具，但是裡面包含的力量，依然是十分地好用

或是就直接依賴她的魔法，雖然這並不是好事...
(more...)

HTML & CSS & JavaScript &PHP概念教學

布丁布丁吃布丁

2月 04, 2007 0 Comments

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篩選器

  • 選擇要套用樣式的對象
    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:
  • 執行網址目錄：

參考資料

(more...)

無題

布丁布丁吃布丁

2月 04, 2007 0 Comments

無題

「那個，這樣子妳覺得如何？」
我轉頭望過去，卻沒有看到原本是坐在那邊的她
左右探望了一下，發現她趴在另一邊的桌上，睡著了

查閱到一半的書，還開開地擺在桌上
大概是累了吧

 「可是這樣不行呀，工作還沒做完耶...」
我想伸出去喚醒她的左手，被突然出現的他抓住
他盯的我看的臉孔上，沒有任何表情
兩人沉默了一陣子

「...你也該睡了。」
他只說了這句話，然後放開了我的手，轉身把她抱回床上
留下我一個人

唉... 我又來了...
(more...)

無題

布丁布丁吃布丁

2月 04, 2007 0 Comments

無題

「這個地方，我要查一下相關的資料。」
寫到一半 ，我轉頭問問站在我旁邊的她

 「好的。」
她的右手緩緩升起，手掌朝上地捧著
在那之上，發出淡藍色的光芒，描繪出書本的形狀
然後，一本書就出現在她的手上

她戴起眼鏡，一邊查閱，一邊跟我說明
對沒有近視的她來說，那個眼鏡只是提升專注力的魔法飾品
不過詳情我也不太清楚就是

「...是這樣子的，懂了嗎？」
她將書闔起來，擺在旁邊的桌子上，方便待會我還要查閱
「嗯嗯」我點點頭，說：「對了，關於這件事情的作法，妳覺得如何？」
「嗯...也許這樣子做會比較好...」

我們繼續討論著。
(more...)

無題

布丁布丁吃布丁

2月 03, 2007 0 Comments

無題

「啊，早安，你來啦。」

她坐在小圓桌旁，給剛進門的我一個燦爛的笑容
一杯散發著濃厚香味的咖啡，被她捧在手上品嚐著

「那是，他泡的吧？」 我拉了一張椅子，坐在她旁邊
「是啊」
「他呢？」
「老樣子」
他大概一樣是坐在那個地方吧。
真是的，都幫她泡咖啡了，就不會幫我順便也泡一杯嗎？

「好，」她放下咖啡，起身走向後面那排盡是抽屜的櫃子邊
「那麼，今天的行程呢，首先要把那個完成......」

 我一邊聽著她的簡報，一邊看著桌子上那杯沒喝完的咖啡
漸漸地，咖啡杯開始模糊，轉變成一本書，張開地攤在桌子上

「品嚐咖啡就像是閱讀一本書...嗎？」
她還真是會享受
(more...)
訂閱： 文章 (Atom)