:::
![]()
(more...)
![]()
![]()
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
meeting就是要上台報告
布丁布丁吃布丁
meeting就是要上台報告
這次meeting有學長姐上台報告。
在大學時代同學們視之洪水猛獸的報告，在這邊是很平常的功課。我也覺得應當如此，雖然我自己到目前為止還沒做過令人滿意的報告，排除掉推甄時用背的上台做自我介紹之外。
學長花了十分鐘左右講述他在網頁標注學習的進度以及survey了Greenstone跟Dspace的感想，大概就是跟老師報告一下。雖然並不是很嚴謹的報告，不過要讓沒有用過這系統的我們來看，已經是獲益良多。
下一位學長則是報告了老師交待他做peer-review(同儕評閱)的期刊投稿論文，他把paper一頁一頁地解釋這是在幹麻，然後提出他認為適合跟不適合的想法，最後在整理成結論。那篇paper被批評的狗血淋頭，雖然說經學長這樣說明之後就連我也看得出這哪裡不恰當，但是事實上我現在的實力還是停留在比那篇paper還差的程度...
接著另一位學長報告他讀的paper，總覺得用wifi做讀者定位、協助書單搜尋與查找這個領域應該是有不少人玩過了，上次聽老師說去大陸那邊看他們圖書館直接用書車做RFID定位，自動算出最短路徑做上架的動作，這個不是完全把這篇paper比過去了嗎？
然後學姊報告了一下百年圖書館史的工作進度，學姊整理的個人工作計畫書看起來還蠻完整的，比我在那邊空想要怎麼寫的來得漂亮得多，現在正在等學姊寄給我。另一個沈寶環教授圖書館的報告我就沒有力氣繼續聽了，於是出來透透氣。
每次報告結束之後，老師都會針對報告的內容做說明。陳老師還以資訊領域為著眼點，這次幾次聽下來，也大概能知道老師會想看什麼東西，而連帶的學長在報告的時候，也是把paper的重點著重在技術、實驗等層面上。我大學時期聽的報告主要是在邱老師的質性研究上，邱老師注重質性研究方法上的嚴謹性，陳老師則是很在意實作技術的內容，這些都是研究者應有的概念吧。
總覺得學長姐的報告，是把他們所知道的事物，用投影片排個順序及標注重點，然後就可以在台上侃侃而談。在短短的時間內，把自己所知所學告訴大家，讓大家一同成長。我期許自己也應該要有這種能力。而且這樣聽報告的過程中，也的確對自己有不小的刺激，花上兩個小時來政大meeting算是很有收穫的。
不過，這次報告的內容很多深入技術層面的名詞。即使經過解釋，大概會對這名詞有個概念，但是那種陌生感所帶來的挫折還是很強烈。會後跟學長聊天中，因為知識與認知上的落差，在溝通時也不是這麼順利，頗有鴨子聽雷、孤立在大家之外的落寞。
就算很明白這是環境轉換過程當中的不適應感，也知道其實不用勉強自己要懂他們純資訊領域的知識 (雖然用PDA的WIFI做定位再搭配情境學習的確很有意思，但是我還是比較想學習web basing的技術) ，不過還是無法擺脫壓力帶來的迷惑與失落感。這十足地影響了自己結案報告的撰寫動力，雖然聽報告的刺激也為結案報告的形體有了不少貢獻，這到底是好還是不好呢......
總之，這3個多小時的meeting實在是非常累人，尤其是投影影像畫面過小，眼睛盯著小小的字，看久了會容易疲憊與頭痛，再這樣下去說不定我也要戴眼鏡了。
今天本來打算早點睡，心得重點稍為提一下就帶過去，到最後還是寫了這麼多。算了，來睡。
(more...)
圖書館實習日誌：中編組 之二
布丁布丁吃布丁
圖書館實習日誌：中編組 之二
最後一天的實習，終於要結束了。
就如之前做過的同學說的一樣，今天在編完CMARK之後，接著江姐帶我們上機做比對。原來編目的資料似乎是由出版社轉過來的，有些資料會有缺，最常見的就是ISBN僅有原本的10碼那個，我們還必須額外輸入13碼的ISBN。然後我額外多打了印刷者跟地址的資料，江姐說我們不用記到這麼細，虧我還認真的慢慢寫說(笑)。整個對照的過程並沒有太大的問題，大多都是機讀格式沒有看好、書看走眼之類的小疏失，因此非常順利。
確認過機讀資料的正確性之後，江姐準備了一整車的書讓我們來印書標、貼書標。首先要先把要印的書本刷條碼，比起一個人做，一人刷條碼操作電腦、一人拿書放書這種兩人合作的方式，做起來就快很多。
但是印書標的機器在網路上似乎出了問題，看起來像是MIS的大哥沒什麼精神地飄過來弄了一下，最後說是機器死掉了，只能用磁片傳，那還真是許久不見的儲存裝置啊。在傳檔案的時候又遇到了些問題，印書標的機器解讀錯誤什麼的，我插手幫了一下忙才處理完畢，順利地把標籤印了出來。
在等待書標機器維修的時候，我跟同學就已經把3公分的線畫完了，所以貼書標的過程也十分順利。今日的實習到12點多就結束了，因為該做的事情都已經做完，江姐也就提早讓我們走人。我剛好可以利用下午補昨晚熬夜寫程式的眠，我的實習也到此全部告一段落，可以來整理一下全部的心得並寫成報告了，可喜可樂。
(more...)
訂閱：
文章 (Atom)
Comments