陣列 (Array) ：
陣列是用來儲存多個資料， 而且這些變數是同一型態的 （但 JavaScript 允許一個陣列儲存不同型態的資料）。 陣列內的資料就稱為該陣列的元素 (elements)， 陣列內的資料數目就稱為該陣列的長度 (length)。
當你想存取很多資料， 就可以用陣列， 好處就是不用為每個資料都定義一個變數名稱， 還可以方便存取大量資料。
如何宣告一個陣列：
只宣告一個陣列的名稱， 但不指定它的內容：
var array_name = new Array() ;
2011年11月19日 星期六
JavaScript 的 if 判斷式
流程控制 (Flow Control)
一個程式未必一定要由上到下執行的，我們可以跟據一些條件來控制一個程式執行那一個部份，亦即是控制它的流程。
if語法：
if (condition) {
statements
}
//如果只有一句敘述，就可以不用大括號包起來：
if (condition) statement ;
一個程式未必一定要由上到下執行的，我們可以跟據一些條件來控制一個程式執行那一個部份，亦即是控制它的流程。
if語法：
if (condition) {
statements
}
//如果只有一句敘述，就可以不用大括號包起來：
if (condition) statement ;
JavaScript 入門簡介
什麼是JAVASCRIPT：JavaScript是一種物件導向程式碼語言，網景通訊公司(Netscape)最初在它的Netscape Navigator 2.0產品上設計並實現，原名LiveScript，目前已經在網際網路上廣泛運用於動態網頁的編程語言。
JavaScript程式由ASCII的字元來構成，可利用記事本等文書編輯軟體來開發完成；一般程式語言必須經過編譯之手續，才能執行程式，但JavaScript並不需經過編譯手續，它只要透過適當的直譯器 (browser)即可轉譯並執行。JavaScript同時是一門具有非常豐富特性的語言，它有著和其它程式語言一樣的複雜性，或更加複雜。實際上，你必需對JavaScript有紮實的理解才能用它來撰寫比較複雜的程式。
JavaScript程式由ASCII的字元來構成，可利用記事本等文書編輯軟體來開發完成；一般程式語言必須經過編譯之手續，才能執行程式，但JavaScript並不需經過編譯手續，它只要透過適當的直譯器 (browser)即可轉譯並執行。JavaScript同時是一門具有非常豐富特性的語言，它有著和其它程式語言一樣的複雜性，或更加複雜。實際上，你必需對JavaScript有紮實的理解才能用它來撰寫比較複雜的程式。
JavaScript的物件、方法與屬性
物件 (Object) ：物件到底是什麼呢？
JavaScript 是物件導向程式語言，簡單來說即是瀏覽器內的任何東西都視作物件，而每個物件又可能包含 (contain) 其它物件。大家可以用十秒時間想一想你的瀏覽器內有些什麼東西，如果想到的話可以再想想這些東西又包含了什麼其它的東西。
為了讓大家清楚JavaScript的物件架構，在這一部份課程會針對以下圖片來說明物件：
JavaScript 物件層次圖 (JavaScript Object Hierarchy)
來源： Netscape JavaScript Reference
JavaScript 是物件導向程式語言，簡單來說即是瀏覽器內的任何東西都視作物件，而每個物件又可能包含 (contain) 其它物件。大家可以用十秒時間想一想你的瀏覽器內有些什麼東西，如果想到的話可以再想想這些東西又包含了什麼其它的東西。
為了讓大家清楚JavaScript的物件架構，在這一部份課程會針對以下圖片來說明物件：
JavaScript 物件層次圖 (JavaScript Object Hierarchy)
來源： Netscape JavaScript Reference
Browser Helper Objects瀏覽器協助物件
瀏覽器協助物件 (BHO) 是 Microsoft Internet Explorer 隨附的應用程式。
一般的形式有包括工具列、搜尋協助程式以及監控應用程式。
某些廣告軟體與間諜程式會利用 BHO 監控使用者瀏覽習慣並傳送特定的廣告，而且會用它來竊取資訊。
一般的形式有包括工具列、搜尋協助程式以及監控應用程式。
某些廣告軟體與間諜程式會利用 BHO 監控使用者瀏覽習慣並傳送特定的廣告，而且會用它來竊取資訊。
在Browser上建立可移動之子視窗
本範例示範:
1.如何在Browser建立可移動之子視窗, 有點類似Porlet
2.如何以Mouse移動Browser上的物件; 本範例示範的可移動物件, 可以是物件的組合, 例如: TABLE
本範例適用於IE, Firefox, Netscape
本範例僅示範建立一個靜態的子視窗, 如何進行動態建立多個子視窗, 將於後續文章進行探討
1.如何在Browser建立可移動之子視窗, 有點類似Porlet
2.如何以Mouse移動Browser上的物件; 本範例示範的可移動物件, 可以是物件的組合, 例如: TABLE
本範例適用於IE, Firefox, Netscape
本範例僅示範建立一個靜態的子視窗, 如何進行動態建立多個子視窗, 將於後續文章進行探討
jQuery.browser.version 在 IE 中版本判斷的 Bug
IE 還真是讓設計師恨的牙癢癢的東西，且現在已經有 ，IE 6, ，IE 7 及 ，IE 8 等三種不同版本的瀏覽器，且都有一點小差異，因此為了讓網頁的畫面跟動作都一致的話，就得針對不同的地方下苦功。
幸運的是 jQuery 提供了 browser 物件來讓我們能判斷現在的訪客是用什麼瀏覽器及版本
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
$(function() {
var userAgent = window.navigator.userAgent.toLowerCase();
var version = $.browser.version;
$(".info").html(
"<h3>userAgent:</h3>" + userAgent + "<br />" +
"<h3>version:</h3>" + version
);
});
//-->
</script>
<body>
<div class="info"></div>
</body>
我用了一點簡單的範例來顯示目前瀏覽器的 userAgent 及 jQuery.browser.version，接著在 IE 6~8 中測試，但其中顯示的結果還真是讓人錯愕咧！
從結果看來， IE 7 的判斷是錯誤的，在仔細看它的 userAgent 時會發現，裡面除了 msie 7.0 之外，還包含了 msie 6.0，因此導致 jQuery.browser.version 的比對就有問題了。既然已經知道問題，那我們就能針對問題來解決。
幸運的是 jQuery 提供了 browser 物件來讓我們能判斷現在的訪客是用什麼瀏覽器及版本
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
$(function() {
var userAgent = window.navigator.userAgent.toLowerCase();
var version = $.browser.version;
$(".info").html(
"<h3>userAgent:</h3>" + userAgent + "<br />" +
"<h3>version:</h3>" + version
);
});
//-->
</script>
<body>
<div class="info"></div>
</body>
我用了一點簡單的範例來顯示目前瀏覽器的 userAgent 及 jQuery.browser.version，接著在 IE 6~8 中測試，但其中顯示的結果還真是讓人錯愕咧！
從結果看來， IE 7 的判斷是錯誤的，在仔細看它的 userAgent 時會發現，裡面除了 msie 7.0 之外，還包含了 msie 6.0，因此導致 jQuery.browser.version 的比對就有問題了。既然已經知道問題，那我們就能針對問題來解決。
setTimeout( ) 利用時間差分別啟動不同的功能
這是剛剛在網路上找到的，因為最近在開發的系統中，需要利用時間差，分別啟動不同的功能。又一時忘了這個setTimeout的function怎麼用，就Google了一下！剛好看到這一篇，描述的還滿詳細的，剛好可以讓自己複習一下，以下是原文的網址和轉載的內容：
http://www.takka.com.hk/jstutor/ch10/ch10.htm
1. setTimeout( ) 語法例子
2. 用 setTimeout() 來執行 function
3. 不斷重複執行的 setTimeout( )
4. 設定條件使 setTimeout( ) 停止
5. 計分及計秒的 counter
10.1 setTimeout( )
setTimeout( ) 是屬於 window 的 method, 但我們都是略去 window 這頂層物件名稱, 這是用來設定一個時間, 時間到了, 就會執行一個指定的 method。請先看以下一個簡單, 這是沒有實際用途的例子, 只是用來示範 setTimeout( ) 的語法。
1. setTimeout( ) 語法例子
練習-69 等候三秒才執行的 alert( )
在 第 3 章 說到 alert 對話盒, 一般是用按鈕叫出來, 在這練習, 你會看到網頁開啟後 3 秒, 就會自動出現一個 alert 對話盒。
1. 請用瀏覽器開啟示範磁碟中的 timeout1.htm, 這檔案有以下內容:
<html> <body bgcolor=lightcyan text=red>
<h1> <font color=blue> 示範網頁 </font> </h1> <p> </br>
<p> 請等三秒! <script>
setTimeout("alert('對不起, 要你久候')", 3000 )
</script> </body> </html>
2. 留意網頁開啟後三秒, 就會出現一個 alert 對話盒。
setTimeout( ) 是設定一個指定等候時間 (單位是千分之一秒, millisecond), 時間到了, 瀏覽器就會執行一個指定的 method 或 function, 有以下語法:
今次例子是設定等 3 秒 (3000 milliseconds), 瀏覽器就會執行 alert( ) 這一個method。
2. 用 setTimeout( ) 來執行 function setTimeout( ) 通常是與 function 一起使用, 以下是一個較上個練習複雜的例子。
http://www.takka.com.hk/jstutor/ch10/ch10.htm
1. setTimeout( ) 語法例子
2. 用 setTimeout() 來執行 function
3. 不斷重複執行的 setTimeout( )
4. 設定條件使 setTimeout( ) 停止
5. 計分及計秒的 counter
10.1 setTimeout( )
setTimeout( ) 是屬於 window 的 method, 但我們都是略去 window 這頂層物件名稱, 這是用來設定一個時間, 時間到了, 就會執行一個指定的 method。請先看以下一個簡單, 這是沒有實際用途的例子, 只是用來示範 setTimeout( ) 的語法。
1. setTimeout( ) 語法例子
練習-69 等候三秒才執行的 alert( )
在 第 3 章 說到 alert 對話盒, 一般是用按鈕叫出來, 在這練習, 你會看到網頁開啟後 3 秒, 就會自動出現一個 alert 對話盒。
1. 請用瀏覽器開啟示範磁碟中的 timeout1.htm, 這檔案有以下內容:
<html> <body bgcolor=lightcyan text=red>
<h1> <font color=blue> 示範網頁 </font> </h1> <p> </br>
<p> 請等三秒! <script>
setTimeout("alert('對不起, 要你久候')", 3000 )
</script> </body> </html>
2. 留意網頁開啟後三秒, 就會出現一個 alert 對話盒。
setTimeout( ) 是設定一個指定等候時間 (單位是千分之一秒, millisecond), 時間到了, 瀏覽器就會執行一個指定的 method 或 function, 有以下語法:
今次例子是設定等 3 秒 (3000 milliseconds), 瀏覽器就會執行 alert( ) 這一個method。
2. 用 setTimeout( ) 來執行 function setTimeout( ) 通常是與 function 一起使用, 以下是一個較上個練習複雜的例子。
JavaScript的Function函數
函數 (Function)
「函數」（Functions）是所有的程式語言必備的功能。JavaScript 的函數可以分成內建函數及使用者定義的函數：
內建函數：又分成兩類
一般內建函數，如 parseInt() 和 parseFloat() 等。
與物件結合的函數，例如 Math.sin() 或 string.big()等，這類的函數又稱為物件的方法（Method）。
使用者定義的函數：也可以分一般函數與物件的方法兩類。
函數其實是一組編寫好了的程序，你可以自行定義它來做指定的工作。在定義了函數之後，當你要執行該函數的程序，只須呼叫它便可。
使用函數的好處是可以將一個大的程式分成多個小部份，方便管理及偵錯，還可以讓程式的每個部份都可以共用函數，以減少重複的程序。
如何定義函數：
語法： 定義函數
function是一個關鍵字，用來定義一個函數，而函數的名稱就寫在function之後。
function_name是該函數的名稱，用來表示該函數。
( )是左括號和右括號， 括號內是用來輸入參數的，如果沒有參數，括號內就不用寫任何東西。本篇稍後會講述參數。
{ 和 } 是左大括號和右大括號，函數的程序碼就寫在大括號範圍內。
函數的定義包含函數名稱 (Function name) 及輸入引數 (Input arguments)，其基本格式如下：
function function_name(Input arguments) {
// 在大括號{ } 的範圍間寫入程序碼
...
return(output) // 非必要
}
「函數」（Functions）是所有的程式語言必備的功能。JavaScript 的函數可以分成內建函數及使用者定義的函數：
內建函數：又分成兩類
一般內建函數，如 parseInt() 和 parseFloat() 等。
與物件結合的函數，例如 Math.sin() 或 string.big()等，這類的函數又稱為物件的方法（Method）。
使用者定義的函數：也可以分一般函數與物件的方法兩類。
函數其實是一組編寫好了的程序，你可以自行定義它來做指定的工作。在定義了函數之後，當你要執行該函數的程序，只須呼叫它便可。
使用函數的好處是可以將一個大的程式分成多個小部份，方便管理及偵錯，還可以讓程式的每個部份都可以共用函數，以減少重複的程序。
如何定義函數：
語法： 定義函數
function是一個關鍵字，用來定義一個函數，而函數的名稱就寫在function之後。
function_name是該函數的名稱，用來表示該函數。
( )是左括號和右括號， 括號內是用來輸入參數的，如果沒有參數，括號內就不用寫任何東西。本篇稍後會講述參數。
{ 和 } 是左大括號和右大括號，函數的程序碼就寫在大括號範圍內。
函數的定義包含函數名稱 (Function name) 及輸入引數 (Input arguments)，其基本格式如下：
function function_name(Input arguments) {
// 在大括號{ } 的範圍間寫入程序碼
...
return(output) // 非必要
}
網頁快速移至頂端與至文末的浮動多功能按鈕(強化版)
文章落落長
手指捲動是不是快抽筋了
這裡提供一個讓您快速至上下頁面的浮動按鈕
那...
這裡以 Xuite 為對象 O.Oa
其他平台後半段會做說明!!^^
簡易版代碼:
<!--浮動鈕--><!--原始來源: http://blog.xuite.net/haloha/freegogo/25124370 --><!--修改強化: http://blog.xuite.net/frank.hgs/GE/44788152 --> <script type="text/javascript"> lastScrollY = 0; function resetPos() { var diffY; if (document.documentElement && document.documentElement.scrollTop) diffY = document.documentElement.scrollTop; else if (document.body) diffY = document.body.scrollTop; percent = .1 * (diffY - lastScrollY); percent = (percent > 0) ? Math.ceil(percent) : Math.floor(percent); document.getElementById("CustomTopBottom").style.top = parseInt(document.getElementById("CustomTopBottom").style.top) + percent + "px"; lastScrollY = lastScrollY + percent; } customArea = "<div id='CustomTopBottom' style='z-index:100;right:236px;top:305px; position:absolute;'>"; customArea += "<a title='至日誌最頂端' href='#'><img src='http://7.blog.xuite.net/7/0/0/b/11559578/blog_1350411/txt/25143665/114.gif' border='0' vspace='5'/></a><br>"; customArea += "<a title='至日誌首頁' href='http://blog.xuite.net/frank.hgs/GE'><img src='http://7.blog.xuite.net/7/0/0/b/11559578/blog_1350411/txt/25143665/123.gif' border='0' vspace='5'/></a><br>"; if (top.location.href.match("^http://blog.xuite.net/[0-z.]+/[0-z.]+/[0-9]+", "i")) { customArea += "<a title='本頁連結'href="+location.href.split('#')[0].split('?')[0]+"><img src='http://7.blog.xuite.net/7/0/0/b/11559578/blog_1350411/txt/25143665/115.gif' border='0' vspace='3'/></a><br>"; customArea += "<a title='至文章底部' href='#owner_button'><img src='http://7.blog.xuite.net/7/0/0/b/11559578/blog_1350411/txt/25143665/113.gif' border='0' vspace='5'/></a><br>"; } customArea += "</div>"; document.write(customArea); /* 設定畫面刷新間隔 */ window.setInterval("resetPos()", 1); </script>
調整
...CustomTopBottom' style='right:236px;top:305px;...
顯示位置右,上的數值
並修改"至日誌首頁"貼上你的首頁網址(若你不想改 Frank 不反對 ^^)
Xuite 日誌的用戶直接貼到自由欄位裡就 OK 囉!!
網站規劃理論
網站建置前，我們要先將自己想要做什麼樣的網站規劃一下，這個步驟非常重要，若沒有做紮實，將來會有許多的問題產生，請大家要好好看一下，規劃流程如下:
＊規劃一、決定網站內容走向與資料蒐集＊
在建置網站之前，應先分析自己的興趣與專長，以決定網站的內容及未來服務的對象。並應多加蒐集目前此類的網站，分析其優缺點。若此類網站數量已多，則須做出自己的特色，使之成為NO.1的網站。
例如自己專長在教育上，則網頁內容建置的主力可考慮以教育訊息、教育法規的提供，專長學科內容、教材教法的建置為主軸，對象並鎖定在小學生、教師或相關的家長上。再者，決定未來呈現網頁的內容及方式，包括文字、圖形、聲音、影像、互動式等。網站內容切勿貪多，以免無法專精在專長項目的建置而使得此網站淪為二流網站。
＊規劃二、熟悉相關技能並尋求支援＊
決定了網頁將呈現的形態後，接下來就是要接受相關製作技能的教育訓練，並多方蒐集相關書籍，最重要的，就是多認識朋友，以便在遇到製作瓶頸時能獲得技術支援。
例如，在圖形處理上，至少熟悉一種影像圖形處理軟體(如PSP、Flash、PhotoImpact、PhotoDraw...等)。在資料庫的連結上，須學會基本資料庫軟體的操作(如Access、MSSQL、DB2、mySQL...等)及相關語法(如ASP、VBScript、JavaScript、PHP...等)。在文字排版上，至少具備如Windows Word的文書能力。
＊規劃一、決定網站內容走向與資料蒐集＊
在建置網站之前，應先分析自己的興趣與專長，以決定網站的內容及未來服務的對象。並應多加蒐集目前此類的網站，分析其優缺點。若此類網站數量已多，則須做出自己的特色，使之成為NO.1的網站。
例如自己專長在教育上，則網頁內容建置的主力可考慮以教育訊息、教育法規的提供，專長學科內容、教材教法的建置為主軸，對象並鎖定在小學生、教師或相關的家長上。再者，決定未來呈現網頁的內容及方式，包括文字、圖形、聲音、影像、互動式等。網站內容切勿貪多，以免無法專精在專長項目的建置而使得此網站淪為二流網站。
＊規劃二、熟悉相關技能並尋求支援＊
決定了網頁將呈現的形態後，接下來就是要接受相關製作技能的教育訓練，並多方蒐集相關書籍，最重要的，就是多認識朋友，以便在遇到製作瓶頸時能獲得技術支援。
例如，在圖形處理上，至少熟悉一種影像圖形處理軟體(如PSP、Flash、PhotoImpact、PhotoDraw...等)。在資料庫的連結上，須學會基本資料庫軟體的操作(如Access、MSSQL、DB2、mySQL...等)及相關語法(如ASP、VBScript、JavaScript、PHP...等)。在文字排版上，至少具備如Windows Word的文書能力。
JavaScript保留字
保留字不可以用作變數、函數及物件名稱。
| abstract boolean break byte case catch char class const continue default delete do double | else extends false final finally float for function goto if implements import in instanceof | int interface long native new null package private protected public return short static super | switch synchronized this throw throws transient true try typeof var void while with |
網站規劃流程-分享2U
簡單來說架設一個企業網站，不只是網頁設計而已，需要為長期經營作準備，以下即是網站設計規劃管理的流程的事項：
1.為你的網站找一個住所
住所也就是網頁存放的空間亦可稱為虛擬空間，主機即是維護虛擬空間的核心機件。
眾能所提供的主機內容介紹如下
主機作業環境(OS)Linux, 資料庫(DB)MYSQL, 語言(LA)繁體中文。
2.為網站申請網址
網域名稱 (DOMAIN NAME) 就是網路世界的身份證，即通常所說的"網址" ( 例如：http://www.ourpower.com.tw/是眾能數位行銷股份有限公司所擁有的網域名稱 ) ，能讓客戶瀏覽貴公司網站，全靠每一個網站有固定獨一無二的網址，也因為它的唯一及不可重覆性，因此網域名稱每個國家均由政府單位或授權的機構負責統一管理及訂定規範。
1.為你的網站找一個住所
住所也就是網頁存放的空間亦可稱為虛擬空間，主機即是維護虛擬空間的核心機件。
眾能所提供的主機內容介紹如下
主機作業環境(OS)Linux, 資料庫(DB)MYSQL, 語言(LA)繁體中文。
2.為網站申請網址
網域名稱 (DOMAIN NAME) 就是網路世界的身份證，即通常所說的"網址" ( 例如：http://www.ourpower.com.tw/是眾能數位行銷股份有限公司所擁有的網域名稱 ) ，能讓客戶瀏覽貴公司網站，全靠每一個網站有固定獨一無二的網址，也因為它的唯一及不可重覆性，因此網域名稱每個國家均由政府單位或授權的機構負責統一管理及訂定規範。
圖片切換jQuery插件收集
CrossSlide這個jQuery插件包含不少常用的Javascript幻燈片放映效果，例如：動態移動、縮放、淡入淡出漸變、滑入滑出...等。
http://tobia.github.com/CrossSlide/
jQuery Cycle Plugin是一個slideshow插件。包含多種變換效果：shuffle、zoom、fade、turnDown、curtainX、scrollRight。
http://www.malsup.com/jquery/cycle/
jQuery.SerialScroll是一個用來創建滾動效果的jQuery插件，包含水平/垂直方向滾動和混合滾動效果。
http://flesler.blogspot.com/2008/02/jqueryserialscroll.html
http://tobia.github.com/CrossSlide/
jQuery Cycle Plugin是一個slideshow插件。包含多種變換效果：shuffle、zoom、fade、turnDown、curtainX、scrollRight。
http://www.malsup.com/jquery/cycle/
jQuery.SerialScroll是一個用來創建滾動效果的jQuery插件，包含水平/垂直方向滾動和混合滾動效果。
http://flesler.blogspot.com/2008/02/jqueryserialscroll.html
解決 PNG透明圖 在舊版IE無法正常運作的問題
之前都利用 JavaScript 的 htc 去解決 png 的透明問題
但是在 JavaScript 動作前 png 是不會正常顯示的
在學會 AlphaImageLoader 的使用後發現效果還蠻好的
但是會有一些奇怪後遺症
就是區域內的連接都失效了
解決的方式就是在利用一個元素放在區域內
然後設有 position:relative; 的屬性
連結修正無法生效在設有 position:absolute; 的區域內
但是在 JavaScript 動作前 png 是不會正常顯示的
在學會 AlphaImageLoader 的使用後發現效果還蠻好的
但是會有一些奇怪後遺症
就是區域內的連接都失效了
解決的方式就是在利用一個元素放在區域內
然後設有 position:relative; 的屬性
連結修正無法生效在設有 position:absolute; 的區域內
常用javascript function整理
這些function 是從網路收集來的，出處己經忘記
//=============檢驗Mail強制為a-z&0-9的數字==========
function ValidateFieldMail(objMail)
{
var email = objMail.value;
var rege = /^([a-zA-Z0-9])+([a-zA-Z0-9])+([a-zA-Z0-9])+([a-zA-Z0-9])+([a-zA-Z0-9])+([a-zA-Z0-9])/;
if (email.length == 0 || rege.exec(email) == null)
{
objMail.value ="";
alert("請參照密碼規則");
//return false;
}
objMail.value = objMail.value.toString().toUpperCase() ;
//return true;
}
//=============檢驗Mail強制為a-z&0-9的數字==========
function ValidateFieldMail(objMail)
{
var email = objMail.value;
var rege = /^([a-zA-Z0-9])+([a-zA-Z0-9])+([a-zA-Z0-9])+([a-zA-Z0-9])+([a-zA-Z0-9])+([a-zA-Z0-9])/;
if (email.length == 0 || rege.exec(email) == null)
{
objMail.value ="";
alert("請參照密碼規則");
//return false;
}
objMail.value = objMail.value.toString().toUpperCase() ;
//return true;
}
訂閱：
文章 (Atom)