:::

冬天清晨的空氣就像冰淇淋一樣

布丁布丁吃布丁

2月 08, 2007 0 Comments

冬天清晨的空氣就像冰淇淋一樣

從週日開始，我就決定要早起去買照燒豬肉堡來吃了。

學校旁邊有家早餐店，賣的餐點非常非常地多，每次去都可以選擇不一樣的餐點來吃，雖然一不小心就超過50元了，但是能夠這樣選擇是很過癮呢。因此，我每次都是去那邊吃早餐的。

說每次聽起來好像很常去，其實這學期只不過吃了五次左右。這是為什麼呢？我想身為大學生的你應該知道苦衷。啊，我先聲明，並不是什麼玩麻痺玩到天亮之後倒地不起，所以就沒買早餐的這種事喔...大概...

這週倒是沒有什麼重大事件，就只有開會、寫程式、分析資料，基本上算是樸實的過的。加上春天來了，最近晚上也不怎麼冷了，太陽公公也比較早起了，那理論上我的生活作息應該是更正常才是──實際上不然。

因為回暖的關係，蚊子也甦醒過來了。晚上除了翁翁翁的聲音干擾之外，就連包緊緊的睡袋內都會有蚊子鑽入，偷偷往我弓起的背上刺下去。這種情況下幾乎是睡不著，半夜手拿捕蚊拍揮動已經成為潛意識的動作，精神完全沒辦法恢復。

只能等天亮(約八點多)蚊子減少、或是精神力消耗殆盡，才能疲憊地入眠，然後睡一個小時多又得起來做事。對，這就是在說我現在的狀況，待會10點多要準備騎車去政大，現在再不睡，我恐怕會騎車去撞砂石車。

加上筆電電池壞掉、輪胎破胎、油表停擺、簡訊沒回等種種打擊，最近心情十分低落。這種失眠的生活，還要持續到什麼時候啊...

(more...)

有行數的textarea

布丁布丁吃布丁

2月 08, 2007 0 Comments

有行數的textarea

好啦，我知道這很蠢又沒什麼技術力，可是這個是我昨晚花了兩個多小時試遍各種方法不斷折衷折衷再折衷之後所產出的孩子，就留著當紀念吧

(more...)

沒有動力

布丁布丁吃布丁

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...)
訂閱： 文章 (Atom)