羅朝淇的部落格

1月 11 週五 200817:01
with the addition of some ??

It is just plain text with the addition of some XML tags enclosed in angle brackets. 只是純文字與另外一些XML標籤密封在角括號

羅朝淇發表在痞客邦留言(0) 人氣(26)

個人分類：JavaScript

1月 11 週五 200816:45
CR & LF到底是什麼意思呢

carriage return (CR) and line feed (LF). 由來講解：
Do you know what a typewriter is? Well, a typewriter is a mechanical device which was used last century to produce printed documents. :-)
After you have typed one line of text on a typewriter, you have to manually return the printing carriage to the left margin position and
manually feed the paper up one line.

(繼續閱讀...)

羅朝淇發表在痞客邦留言(0) 人氣(1,166)

個人分類：JavaScript

▲top

12月 24 週一 200710:22
列印GridView

<head runat="server">
    <title>未命名頁面</title>
    <script type="text/javascript">
        function CallPrint(strid)
        {
         var prtContent = document.getElementById(strid);
         var strOldOne=prtContent.innerHTML;
         var WinPrint = window.open('','','letf=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status=0');
         WinPrint.document.write(prtContent.innerHTML);
         WinPrint.document.close();
         WinPrint.focus();
         WinPrint.print();
         WinPrint.close();
         prtContent.innerHTML=strOldOne;
        }
    </script>
</head> <div id="divPrint">     //用DIV將GridView包含起來，並給予一個名稱
<asp:GridView ID="GV" runat="server" Style="position: static" BackColor="White" BorderColor="#336666" BorderStyle="Double" BorderWidth="3px" CellPadding="4" GridLines="Horizontal">
...........................................
</asp:GridView>
</div> //增加列印按鈕
Button1.Attributes.Add("onClick","CallPrint('divPrint');");

(繼續閱讀...)

羅朝淇發表在痞客邦留言(0) 人氣(955)

個人分類：JavaScript

▲top

12月 14 週五 200718:17
視窗 (Window)集合函數

視窗

視窗物件即是指瀏覽器視窗，它是最高層次的物件之一，因此用途很廣，例如：開啟新視窗、彈出訊息柜和輸入柜、控制窗柜等。下表列出了視窗物件的方法屬性：

物件	方法	屬性	事件
window	alert(message) close() confirm(message) open(url, name, features) prompt(message, inputDefault) setTimeout(statement, delay) clearTimeout(timer)	defaultStatus frames[ ] length name opener parent self status top window	onLoad onUnload

方法

alert(message) 彈出訊息柜
message 可以是任何型態的資料。
例子：彈出訊息柜

<form>
<input type="button" value="Pop-up an alert box" onClick="alert('Hi, I am alert box.')">
</form>

confirm(message) 彈出詢問柜

柜內只有確定和取消兩個按鈕，按下確定就傳回 true，按下取消就傳回 false。 message 可以是任何型態的資料。

例子：彈出訊息柜

<form>
<input type="button" value="Pop-up an confirm box"
onClick="var reply = confirm('Are you sure?') ; alert(reply)">
</form>

prompt(message, inputDefault) 彈出輸入柜

inputDefault 是輸入柜預設的輸入資料， message 是輸入柜的訊息，當使用者確定輸入後，就會傳回輸入了的資料。 message 和 inputDefault 可以是任何型態的資料。

例子：彈出訊息柜

<form>
<input type="button" value="Ask me a question"
onClick=" var name = prompt('What is your name?.' , 'You name here') ; alert('Hi, ' + name) ">
</form>

window.open(url, name, features) 開啟新視窗

為免和 document.open 混淆，因此寫 winodw.open 而不應只寫 open； url 是新視窗開啟後要載入的 URL，如果它是空字串 (empty string)，就會開啟空視窗； name 是新視窗名稱，用作 <a> 和 <form> 的目標，即是它們的 target 屬性； features 是新視窗的設定，它是選擇性的參數 (optional argument)，但格式比較特別，我首先會介紹 features 的屬性 (這個屬性是指 Attribute)，然後說明它的寫法：

features 的屬性	說明
height	視窗高度的點數 (pixel)
width	視窗高度的點數 (pixel)
location	位置欄
directories	分類目錄列
menubar	主選單
scrollbars	捲軸
status	狀態列
toolbar	工具列
resizable	可否改變視窗大小

寫法： features 的屬性

例子：視窗的闊度和高度分別是 300 點和 200 點，要有位置欄和主選單，但不要有狀態列和工具列
"width=300 height=200 location,menubar=yes status,toolbar=no"

它是 name/value pairs 格式，只須把你想要的屬性指定為 yes ，不想要屬性指定為 no 便可。
除了用 yes 和 no 之外，還可以用其它表示方式，
寫法：以下三行都可以令視窗有位置欄和主選單，但沒有狀態列和工具列

"location,menubar=yes status,toolbar=no"
"location,menubar=1 status,toolbar=0"
"location,menubar" (除了位置欄和主選單名外，所有東西都不要)

例子：開啟新視窗，它要載入 Yahoo 的 URL ，名稱叫 winname ，闊度和高度分別是 300 點和 200 點，有位置欄和主選單，沒有狀態列、工具列和捲軸。

<html><head>
<script>
var winvar = window.open("http://www.yahoo.com","winname",
"location,menubar=1 status,toolbar,scrollbars=0");
</script>
</head><body>
See a new window?
</body</html>

例子：開啟新視窗，它不用載入任何 URL ，也不用設定屬性，名稱叫 winname ，新視窗開啟後要介紹自己的名稱和 title。

<html><head><title> I am opener of winname </title>
</head><body>
My son, winname, has just born.<br>
<a href="http://www.yahoo.com" target="winname">Bring my child to Yahoo</a>
</body</html>
<script>

</script>

例子說明：

var winvar = window.open("","winname");
winvar 成為新視窗物件變數，以後要表示該個新視窗就可以用 winvar 了。 winname 是用作指定目標的，頁中 "Bring my child to Yahoo" 連結的 target 屬性，它的值是 winname ，所以該連結會在 winname 視窗開啟。

window.close() 關閉視窗

主要用來關閉由 window.open() 開啟的視窗，關閉其它視窗則要經過瀏覽者同意才會關閉。

例子：關閉視窗

<html><head>
<script>
var winvar = window.open("","winname");
</script>
</head><body>
See a pop-up window? Is it annoying?
<input type="button" value="Close the pop-up window" onClick="winvar.close()">
<br>
Want to close me also? No problem, but remember to come back. I will be waiting for you.
<br>
<input type="button" value="Close this window" onClick="window.close()">
</body</html>

setTimeout(statement, delay)

在某個時段過後自動執行某敘述。 statment 是字串型態資料，表示要執行的 JavaScript 敘述； delay 是延遲的時間，單位是微秒 (milli-second)。

語法：

setTimeout(statement, delay)
如果想用 clearTimeout() 取消某個計時器，可以用一個變數來表示該計時器：
timer = setTimeout(statement, delay)

例子：在五秒之後彈出 alert

<html><head>
<script>
setTimeout("alert('5 seconds has passed')" , 5000);
</script>
</head><body>
An alert box will appear in 5 seconds
</body></html>

<html><head> <script> setTimeout("alert('5 seconds has passed')" , 5000) </script> </head><body> An alert box will appear in 5 seconds </body></html>

clearTimeout(timer)

停止某個計時器。 timer 是要停止的計時器變數。

例子：停止計時

<html><head>
<script>
var i = 0;
var timer;
function count() {
window.status = i;
i++;
timer = setTimeout("count()" , 1000);
}
count()
</script>
</head><body>
<form>
<input type="button" value="Stop counting" onClick="clearTimeout(timer)">
</form>
</body></html>

<html><head> <script> var i = 0; var timer; function count() { window.status = i; i++; timer = setTimeout("count()" , 1000); } count() </script> </head><body> <form> <input type="button" value="Stop counting" onClick="clearTimeout(timer)"> </form> </body></html>

屬性

其實某些屬性本身也可以是一個物件，下面列出了視窗物件的屬性和說明：

屬性	說明
defaultStatus	預設的狀態列文字，當狀態列沒有被設定時，就會顯示它的內容
frames[ ]	它是一個陣列，用來表示視窗內的各個窗柜 (Frame)
length	窗柜數目
name	視窗名稱
opener	表示用 window.open() 開啟本身的那個視窗
parent	可以表示視窗或窗柜，例如本身的一頁是在窗柜內， parenet 就是指有 <frameset> 並且包含本身的那個視窗或窗柜
self	是 window 的同義詞，指正在使用的視窗
status	狀態列顯示的文字
top	最上層的視窗，而 parent 則是指上一層，正如第一代與上一代的分別
window	是 window 的同義詞，指正在使用的視窗

至於有關窗柜物件的用法，請參閱中階教學的窗柜物件部份。

事件

最常用的是 onLoad 和 onUnload 。當一頁 HTML 文件完全被載入時，就會產生 onLoad 事件；而當它被釋出，例如當瀏覽者離開那頁，就會產生 onUnload 事件。這兩個事件處理者是寫在 <body> 標記內的。

例子：當使用者進入與及離開某一頁時，彈出 "擾人的" (annoying) 訊息柜 :)

<html><head><title> onLoad , onUnload </title></head>
<body onLoad="alert('Welcome')" onUnload="alert('Good Bye')">
An alert box pops up every time you visit, reload or leave this page.
</body</html>

<html><head><title> onLoad , onUnload </title></head> <body onLoad="alert('Welcome')" onUnload="alert('Good Bye')"> An alert box pops up every time you visit, reload or leave this page. </body</html>

偵測變數是否存在

只須在變數名稱之前加上 window 一字，再用 if 敘述，就可以知道該變數是否存在，或是否被定義 (defined)。

例子：偵測變數 x 和 y 是否存在

<script>
var x = 10 ;
var y ;
document.write("<br>x = " + x + "<br>");
if (window.x) document.write("x is defined");
else document.write("x is NOT defined");
document.write("<br>y = " + y + "<br>");
if (window.y) document.write("y is defined");
else document.write("y is NOT defined");
document.write("<br>");
if (window.z) document.write("z is defined");
else document.write("z is NOT defined");
document.write("z = " + z);
</script>

<script> var x = 10 ; var y ; document.write("<br>x = " + x + "<br>"); if (window.x) document.write("x is defined"); else document.write("x is NOT defined"); document.write("<br>y = " + y + "<br>"); if (window.y) document.write("y is defined"); else document.write("y is NOT defined"); document.write("<br>"); if (window.z) document.write("z is defined"); else document.write("z is NOT defined"); document.write("z = " + z); </script>

說明：

因為變數 x 被定義了，而數值是 10 ，所以 window.x 會傳回 true 給 if 敘述。雖然變數 y 被定義了，但沒有指定它的值，因此它的值是 Null， window.y 會傳回 false 給 if 敘述。變數 z 根本不存在，所以結果和變數 y 一樣，而且會導致執行錯誤： 'z' is not defined

例子：永遠只在同一個視窗開啟 URL

<script>
function openurl() {
var url = "index.html" ;
if (!window.winvar || winvar.closed) winvar = window.open(url);
else winvar.location = url;
}
</script>
<form>
<input type=button value="Open URL in one window only"
onclick="openurl()">
</form>

說明：

!window.winvar || winvar.closed
偵測變數 winvar 是否未被定義，或者是否被關閉了，如果是的話，就自行定義 winvar。否則，就表示變數 winvar 已經被定義，而且它未被關閉，因此我們可以用它的 location 屬性來開啟 URL。

(繼續閱讀...)

羅朝淇發表在痞客邦留言(0) 人氣(350)

個人分類：JavaScript

▲top

12月 13 週四 200711:02
JavaScript--事件

事件

事件是由系統轉化使用者的動作或系統訊息而得來的。使用者的動作例子包括：按下滑鼠鍵、確定送出表單等。而系統的動作包括：當一頁完全載入，或瀏覽器要離開某頁等。系統會將每個動作轉成一個事件，然後送到程式，我們便可以跟據不同的事件來設計不同的工作。這種工作模式就叫做事件處理 (Event Handling)，而負責處理事件的名稱就叫做事件處理者 (Event Handler)。

事件處理的好處就是不用在主程式內檢查某事件有否發生，我們只須把要做的工作連繫到事件，當某事件真的發生了，系統就自動把這個訊息送到程式，那就會自動執行要做的工作了。

JavaScript 的事件處理者通常是連繫著物件的，因此不同的物件就支援不同的事件處理者。以下是 JavaScript 常用的事件處理者：

事件處理者事件發生於

onBlur 使用者離開某一欄

onChange 使用者改變某一欄的內容

onClick 使用者按下某個按鈕

onFocus 使用者的輸入焦點進入某一欄

onLoad 某一頁完全載入

onMouseOver 滑鼠游標在某個物件之上

onMouseOut 滑鼠游標離開某個物件

onSelect 使用者選擇某一欄的內容

onSubmit 使用者確定送出某表單

onUnload 正在顯示的一頁被改變

把函數指定到事件

我們通常把那些在某事件發生後要做的工作寫成一個函數，不過如果你的工作很簡單，可以不用寫在函數內。

語法：把事件處理者寫成一個物件的 HTML 標記屬性，而屬性內容就是要執行的 JavaScript 敘述

<tag event_handler="statements">

例子：使用事件處理者執行函數

<script>
function bt_details(this_bt) {
var name = this_bt.name
var value = this_bt.value
var type = this_bt.type
document.write("My name is <b>" + name + "</b>");
document.write("<br>My value is <b>" + value + "</b>");
document.write("<br>My type is <b>" + type + "</b>");
}
</script>
<form>
<input type="button" name="hello"
value="Please Click me to see my name and value"
onClick="bt_details(this)">
</form>

例子說明：

onClick="bt_details(this)"
首先為大家介紹一個關鍵字 this ， this 其實是一個物件，它是指當時正在使用中的物件。例子中的 this 是在 input 的 HTML 標記範圍內，因此 this 就是指那個 input 物件了，那個 input 物件有 type、name 和 value 三個屬性，因此 this 也有這三個屬性了。用 this 的好處就是不用知道該物件的名稱也可以使用該物件。
onClick 是一個事件處理者，當使用者按下按鈕時，就會自動執行 onClick 屬性內容的 JavaScript 敘述。
bt_details(this) 是一個函數，輸入的參數就是一個物件 this ，亦即是該個 input 物件。

function bt_details(this_bt)
參數 this 會輸入到 this_bt 變數，成為一個物件型態的變數，而這個變數就儲存著該個 input 物件了，因此 this_bt 也有 type、name 和 value 三個屬性。

type="button"
JavaScript 定義了一個新的 <input> 類別 (Type)，名叫 button ，是一個普通的按鈕。

終止事件

你可以中途停止一個函數或事件。

語法：終止函數

return false;
或者
return true;

一般情況下都會用 return false; 來終止程序，但在處理連結物件或送出表單時， true 和 false 就有分別了，這點在本篇稍後會詳述。

例子：終止函數

<script>
function terminate() {
document.write("Before <b>return false;</b>");
return false;
document.write("After <b>return false;</b>");
}
</script>
<form>
<input type="button" value="hello" onClick="terminate()">
</form>

例子說明：

第二句的 document.write 不會被執行，因為上一句 return false 己經中終止了 terminate 函數。

例子： return true 的用法

<a href="index.html"
onMouseOver="window.status = 'Mouse pointer is over a link' ; return true"
onMouseOut="window.status = 'Mouse pointer is moved out' ; return true">
Please move your mouse pointer over me and notice the status bar.
</a>

例子說明：

onMouseOver 和 onMouseOut
當滑鼠游標在某個連結之上時，通常瀏覽器的狀態列 (Status Bar) 就會顯示該連結的位置，當游標離開時，狀態列就會顯示預設的文字。這兩個事件處者是用來當滑鼠移到或離開連結時，改變狀態列的文字。

window.status
window 是視窗物件，表示正在使用的視窗，而 status 就是該視窗的屬性，它儲存著視窗的狀態列文字。

return true
return true 是用來表示該連結已經被跟進 (follow)，那麼瀏覽器就不會把連結位置顯示在狀態列，否則，我們想顯示的文字就會被連結位置蓋過了。

留意例子中在一句內同時用了雙引號和單引號，目的是希望 HTML 的屬性內容不會和 window.status 的內容混淆。

(繼續閱讀...)

羅朝淇發表在痞客邦留言(0) 人氣(93)

個人分類：JavaScript

▲top

12月 13 週四 200710:46
JavaScript--函數、變數的範圍

函數

函數其實是一組程序，你可以自行定義它來做指定的工作。在定義了函數之後，當你要執行該函數的程序，只須呼叫它便可。

使用函數的好處是可以將一個大的程式分成多個小部份，方便管理及偵錯，還可以讓程式的每個部份都可以享用函數，以減少重覆的程序。

語法：定義函數

function function_name() {
// 在大括號的範圍內寫入程序
}

function 是一個關鍵字，用來定義一個函數，而函數的名稱就寫在 function 之後。
function_name 是該函數的名稱，用來表示該函數。
() 是左括號和右括號，括號內是用來輸入參數的，如果沒有參數，括號內就不用寫任何東西。本篇稍後會講述參數。
{ 和 } 是左大括號和右大括號，函數的程序就寫在大括號範圍內。

語法：呼叫函數

function_name();

例子：函數

<html>
<head><title>Define a function</title>
<script language="JavaScript">

</script>
</head>
<body>
Hello.
<script>

</script>
I will try my best to help you.
</body>
</html>

例子說明：

這個例子有兩個 <script> ，一個在 <head> 範圍，另一個在 <body> 範圍。
在 <head> 範圍內的 <script> 定義了一個 welcome 函數，而在 <body> 範圍內的 <script> 就呼叫 welcome 函數。

輸入參數

有時我們希望函數在不同的情況下有不同的結果，因此會用參數。將參數傳入函數，成為函數內的變數，就可以根據這些變數的內容來做不同的工作。

定義一般函數的寫法：

function function_name(arg1, arg2, ..., argN) {
// arg1, arg2 至到 argN 都成為本函數的變數了
}

你可以傳入任何數目的參數，參數與參數之間須用逗號分隔 (,)。

以是例子使用了參數：

<html>
<head><title>function with argument</title>
<script language="JavaScript">

</script>
</head>
<body>
<p>Student Data:</p>
<script>

</script>
<p>End of student data.</p>
</body>
</html>

例子說明：

student("Tom", 18, true);

呼叫 student 函數，同時將 "Tom", 18 和 true 分別傳入 student 函數內的 name , age 和 is_graduated 三個變數。

傳回資料

函數也可以傳回 (return) 資料，通常這些資料是該函數的運算結果。

傳回資料的寫法

function function_name() {
// 用 return 關鍵字傳回資料
return data
}

data 可以是任何型態的資料。

以下例子內的函數會傳回資料：

<html>
<head><title>function with arguments</title>
<script language="JavaScript">

</script>
</head>
<body>
</body>
</html>

例子說明：

my_name() 和 my_age() 分別傳回 "Toy" 和 16 。

變數的範圍

如果你在函數內定義一個變數，那就只有該函數可以存取這個變數。如果你定義一個變數的地方是在 <script> 範圍內，但不是在任何函數內，那麼該個變數就可以被整頁來儲取，包括不在 <script> 以內的範圍。例子：

<html>
<head><title>The Scope of a Variable</title>
<script language="JavaScript">

</script>
<script language="JavaScript">

</script>
</head>
<body>
<script>
document.write("<br>myname in body section = " + myname );
</script>
</body>
</html>
<script>
document.write("<br>myname ouside html section = " + myname );
document.write("<br>f2 = ");
document.write(f2);
</script>

例子說明：

整頁只定義了兩個變數，就是 f2 和 myname 。 myname 是在 <script> 以內定義的，因此整頁範圍內也可以用 myname 這個變數。但 f2 是 function2 以內定義的，因此 f2 只能在 function2 以內存取。
document.write(f2);
因為 f2 不能在 function2 以外存取，所以這一句會產生錯誤： "f2 未被定義" (f2 is not defined)。不過你可以在 function2 以外定義多一個 f2 變數，那麼，雖然一頁內有兩個 f2 變數，但這個新的 f2 是不會和 function2 以內的 f2 混淆的。

(繼續閱讀...)

羅朝淇發表在痞客邦留言(0) 人氣(130)

個人分類：JavaScript

▲top

12月 13 週四 200710:29
JavaScript--變數、資料型態、陣列

變數

變數是用來儲存或讀取一些資料，以方便進行運算。

寫法：定義一個變數

只定義一個變數的名稱，但不即時指定它的資料：
var variable_name ;
定義一個變數名稱，同時指定它的資料：
var variable_name = data ;

var 是用來定義變數的， variable_name 是變數的名稱， data 是任何型態的資料。

例子：定義一個字串型態的變數

var myname = "Tom" ;

例子說明

例子中定義了一個變數，變數名稱是 myname 。因為該資料是用引號括著，所以資料型態是字串 (String)，資料就是一句 Tom 字串，而 myname 就是一個字串型態的變數了。

例子：定義一個整數型態的變數

var myage = 16 ;

例子說明

例子中定義了一個變數，變數名稱是 myage 。我用 myage 來儲存整數型態，而不是字串型態的資料，因此不用引號括著。該資料型態是整數 (Integer)，資料就是一個 16 整數，而 myage 就是一個整數型態的變數了。

變數名稱（或函數名稱）的命名規則：

變數名稱只可以由英文字、數目字及底線 (_)組成
變數名稱的第一個字元不可以是數目字。
不可以是關鍵字。例如你不可以用 function 作為某個變數的名稱，因為它是一個關鍵字。

例子：

合法的名稱： my_name , myName , g2 , _2
不合法的名稱有： 01 , 1choice , var , function , Array

例子：定義變數

<script>
var student_name = "Tom";
var student_age = 16;
document.write("<br>Student Name : " + student_name);
document.write(" Age : " + student_age);
</script>

<script> var student_name = "Tom"; var student_age = 16; document.write("<br>Student Name: " + student_name); document.write(" ; Age : " + student_age); </script>

資料的型態 (Data Type)

常見的資料型態有以下幾種：

資料型態例子說明

字串
(String) var name = "Tom";
var model = "1001"; 字串通常是用雙引號 (") 或單引號(')括著，例子中表示了一個 Tom 字串和一個 1001 字串。

數目
(Number) var age = 16;
var pi = 3.141592653589793;
var expo = 54e7;
var octal_num = 010;
var hex_num = 0x10; 數目可以是實數和整數，整數包括10 進制、8 進制和 16 進制。數目前面是 0 代表 8 進制，數目前面是 0x 代表 16 進制

布林
(Boolean) var is_enabled = true;
var ie3 = false; 布林資料只有兩個值，就是 true 或者 false 任何一個，適合用作一些只有兩個可能的運算。

空白
(Null) var no_content; 資料沒有內容，例如你只定義它變數的名稱，但沒有指定內容，那麼它就等於 null 了。

物件
(Object) var dw = document.write;
var myname = document.myform.myname; 通常是為了方便而定義物件變數，例如可以用 dw 代替 documen.write，那就不用打很多字了

陣列
(Array) var even_num = new Array(2,4,6,8,10);
var fruit = new Array("apple","orange"); 陣列是用來儲存一組相同型態的資料，在本篇稍後詳述。

你可以隨時指定變數的內容，亦即是指定它的資料，但應留意該資料的型態。

大部份程式語言例如 Pascal、C++、 Java 等，變數的型態是不可以隨時改變的，例如你定義了一個字串型態的變數，你只可以用它來存取字串型態的資料，而不可存取其它型態的資料。

但 JavaScript 就不同了， JavaScript 是一種寬鬆型態語言 (Loosely Typed Language)，即是說變數的型態是可以隨時改變的。

好處：

不須定義太多變數；不須牢記那一個變數是那一種型態；不須寫太多東西來轉換資料型態，因為 JavaScript 會自動判斷你想用的資料型態。
壞處：

雖然 JavaScript 會自動判斷你想用的資料型態，但有時未必是你心目中想用的那一種型態，例如你想做整數型態的運算，它郤做了字串型態的運算。

Netscape 為了方便 JavaScript 與 Java 溝通，估計將來 JavaScript 的資料型態會盡量與 Java 相容，因此我建議大家盡量留意一個變數的型態。

陣列 (Array)

陣列是用來儲存多個資料，而且這些變數是同一型態的（但 JavaScript 允許一個陣列儲存不同型態的資料）。陣列內的資料就稱為該陣列的元素 (elements)，陣列內的資料數目就稱為該陣列的長度 (length)。

當你想存取很多資料，就可以用陣列，好處就是不用為每個資料都定義一個變數名稱，還可以方便存取大量資料。

寫法：定義一個陣列

只定義一個陣列的名稱，但不指定它的內容：
var array_name = new Array() ;
定義一個陣列的名稱和長度，但不指定它的內容：
var array_name = new Array(length) ;
定義一個陣列的名稱、長度和內容：
var array_name = new Array(data1 , data2 , data3 , ... , dataN) ;

array_name 是陣列的名稱。
new 是用來將記憶體分配給一個新的物件，它是是一個關鍵字。
Array 是用來定義陣列的。
length 是陣列的資料數目，它的值可以是由 1 開始的正整數，例如你想定義一個儲存星期的英文字陣列， length 的值就可以是 7。
data1 , data2 , data3 , ... , dataN 是 N 個資料，那麼這個陣列的長度就是 N 了，例子：
var week_array = new Array("Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday", "Sunday");
例子中定義了一個陣列來儲存星期的英文字，這個陣列有 7 個資料，因此陣列的長度就是 7 了。因為句子太長，所以寫成兩行，而分隔位置可以在逗號的左右。

定義了一個陣列後，就可以存取陣列內的資料。要存取這些資料，就要學習它們的表示方式。

表示方式：陣列內的資料

array_name[index]

index 是陣列內某個資料的位置，它是由 0 開始的，而不是由 1 開始的，大家須要留意這點，因為這個電腦概念與人類實際生活不同，所以初學者很易會弄錯的。而 index 的最大值就是 length - 1 ，而不是 length 。
[ 和 ] 是左中括號和右中括號，用來括著 index 。

我們也可以取得一個陣列的長度，就是用一個陣列的 length 屬性，而且它是整數型態的。

表示方式：陣列的長度

array_name.length

我們就用上面定義了的 week_array 做例子，下面列出了 week_array 內所有資料的表示方式和它們的內容：

表示方式
內容
week_array[0]
"Monday"
week_array[1]
"Tuesday"
week_array[2]
"Wednesday"
week_array[3]
"Thursday"
week_array[4]
"Friday"
week_array[5]
"Saturday"
week_array[6]
"Sunday"
week_array.length
7

例子：應用陣列

<script>
var student_name = new Array("Tom", "John", "Sam");
var num_of_student = student_name.length;
var student_age = new Array(num_of_student);
student_age[0] = 16;
student_age[1] = 18;
student_age[2] = 20;
document.write("There are " + num_of_student + " students.");
document.write("<br>First student : " + student_name[0]);
document.write(" ; Age : " + student_age[0]);
document.write("<br>Second student : " + student_name[1]);
document.write(" ; Age : " + student_age[1]);
document.write("<br>Third student : " + student_name[2]);
document.write(" ; Age : " + student_age[2]);
</script>
<script> var student_name = new Array("Tom", "John", "Sam"); var num_of_student = student_name.length; var student_age = new Array(num_of_student); student_age[0] = 16; student_age[1] = 18; student_age[2] = 20; document.write("There are " + num_of_student + " students."); document.write("<br>First student : " + student_name[0]); document.write(" ; Age : " + student_age[0]); document.write("<br>Second student : " + student_name[1]); document.write(" ; Age : " + student_age[1]); document.write("<br>Third student : " + student_name[2]); document.write(" ; Age : " + student_age[2]); </script>

例子說明：

var student_name = new Array("Tom", "John", "Sam");
定義一個陣列，名稱是 student_name ，同時指定它的內容，分別是 "Tom", "John", "Sam" 三個字串型態的資料。緊記第一個資料的位置是 0，而這裏有 3 個資料，所以最後一個資料的位置就是 2 了。

var num_of_student = student_name.length;
定義一個變數，名稱是 num_of_student ，然後將指定它的內容，內容是 student_name.length ，因為 student_name 陣列內有 3 個資料，所以 student_name.length 的值就是 3 了，而且它是整數型態，因此 num_of_student 是整數型態的變數。

var student_age = new Array(num_of_student);
定義一個陣列，名稱是 student_age ，同時指定它的長度，長度為 num_of_student 的內容，亦即是 3 了，所以 student_age 就是一個有 3 個資料的陣列。

student_age[0] = 16;
student_age[1] = 18;
student_age[2] = 20;

將 student_age 陣列中的第一個資料的內容指定為 16 ，第二個資料指定為 18 ，第三個資料指定為 20 。

(繼續閱讀...)

羅朝淇發表在痞客邦留言(0) 人氣(176)

個人分類：JavaScript

▲top

12月 13 週四 200710:07
JavaScript--物件

物件是什麼呢？ JavaScript 是物件導向程式語言，簡單來說即是瀏覽器內的任何東西都視作物件，而每個物件又可能包含 (contain) 其它物件。大家可以用十秒時間想一想你的瀏覽器內有些什麼東西，如果想到的話可以再想想這些東西又包含了什麼其它的東西。為了讓大家清楚 JavaScript 的物件架構，在這一節內我會針對以下圖片來說明物件：

圖一： JavaScript 物件層次圖 (JavaScript Object Hierarchy)
來源： Netscape JavaScript Reference 圖一是 Netscape 網站內一幅 JavaScript 的物件層次圖，每個長方形代表一個物件，長方形內的文字表示該物件的名稱 (Name)，連繫長方形的線表示了物件與物件之間的層次關係。最高層次的物件有兩個： window 和 navigator 。我們首先看看 window ，它包含了 document 物件，即是說 window 是 document 的包含者 (Container)，再看看 document ，它包含了 Form 物件，即是說 document 是 Form 的包含者。物件的表示方式

現在知道哪個物件包含哪個物件，那麼如何表示它們呢？

想表示某個物件，主要步驟有三個：

第一步：找出該物件的名稱，名稱是很重要的。
要找出一個物件的名稱，主要有兩個步驟：
1. 找出該物件的 HTML 標記裏 name 屬性的值，而這個值就是該物件的名稱了。例如有一個表單，它的 HTML 碼如下：
  <form name="my_form">
  <input type="text" name="my_name" value="Your name here">
  </form>
  這個表單物件的名稱就是 my_form ，而表單內的文字輸入物件的名稱就是 my_name 了。
2. 如果那個物件是唯一的 (Unique)，而且它根本沒有 HTML 標記，那就用該物件在圖一的名稱。例如 document ，因為一個瀏覽器視窗或窗柜只能有一頁，所以 document 是唯一的，我們就用 document 作為 document 物件的名稱。例如 navigator (瀏覽器物件)，一個瀏覽器視窗只能屬於該個瀏覽器，因此我們就用 navigator 作為 netvigator 物件的名稱。

第二步：找出該物件的所有包含者名稱

只要參考圖一，便很易找出某個物件的包含者名稱。在某些情況下，你無須找出某些包含者的名稱，例如在某一頁內的 JavaScript 想使用該頁的物件，你就不須要找出那一頁所在的視窗或窗柜物件的名稱，但如果你想在某頁使用另一個視窗或窗柜物件，那找必須找出那個物件的名稱了。

第三步：在物件和它的所有必須的包含者之間用一點 (.) 連貫起來

這步更加容易，例如你想表示文字輸入物件，名稱是 my_name ，它是在一個表單內，名稱是 my_form ，我假設使用這個物件的 JavaScript 與這個物件的 HTML 碼是在同一頁，因此我不須要找出視窗的名字。表示方式如下：

document.my_form.myname

大家可能會問，既然它們是在同一頁，那麼 document 也不須要寫吧，只是寫 my_form.myname 不就行了嗎？理倫上好像是對的，我在 IE 和 Opera 測試過這種寫法，它們也支援，但不知何解 Netscape 會產生錯誤，所以這裏建議大家不要漏去 document ，如果你怕打太多字也不用擔心，之後的篇章會教大家如何運用變數，令自己不用打這麼多字。

方法與屬性

相信大家已經有了物件的概念了，但有了一個物件，可以做些什麼呢？答：就是運用它的方法和屬性了：

方法 (Method)：

用來做一些與該物件有關的動作，例如 document.write() ，write 是 document 的方法，所以這一句會在 document 寫入一些東西。
表示方式：

Object_name.method()

方法必須有左括號和右括號 ()，而括號內是用來輸入參數的。當方法沒有參數時，也應在尾部加入括號，以表示它是一個方法，而括號內不用寫任何東西。
其實方法就好像一個函數 (Function)，不同之處在於方法是連繫著物件的。函數會在之後的篇章詳述。
屬性 (Property)：

用來取得該物件的屬性或資訊，也可以設定某些屬性的內容。例如 document.bgColor ，bgColor 是 document 的屬性，所以這一句的內容就是該個 document 的背景顏色，你也可以設定它的內容來改變背景顏色，例如 document.bgColor="silver" ，這句會把該頁的背景顏色轉為銀色。
表示方式：

Object_name.property

其實屬性就好像一個變數 (Variable)，不同之處在於屬性是連繫著物件的。變數會在之後的篇章詳述。

現在大家應該對方法和屬性有初步的概念了，讓我介紹一下常用 document 的方法和屬性吧：

Document 物件

方法	屬性
write()	bgColor
writeln()	fgColor
	lastModified
	title
	URL

writeln() 和 write() 的功能一樣，唯一不同的地方就是 write() 會在句尾加入斷行符號 (Carrier Return)，目的是使寫出來的東西在普通文字編輯器中 (如 Notepad) 易於閱讀，也方便列印。但在螢幕上的效果基本上是一樣的，因為 HTML 格式內的斷行符號一般會被忽略。

例子： document 的屬性：

<html>
<head><title> The Second Example: Method and Property</title>
<script>

</script>
</head>
<body>
<h2> The Second Example: Method and Property </h2>
The text and background color have been changed
because I modified the content of document.fgColor
and document.bgColor .
</body>
</html>

<html> <head><title> The Second Example: Method and Property</title> <script language="JavaScript">  </script> </head> <body> <h2> The Second Example: Method and Property </h2> The text and background color have been changed because I modified the content of document.fgColor and document.bgColor . </body> </html>

程式說明：

"The URL of this document is : " + document.URL + "<br>"

這是 write 的一個參數，而這個參數是一個字串，它有三個部份，分別是 "The URL of this document is : " , document.URL 和   "<br>" ，它們之間都有個加號 (+)，是用來將那三個部份組合成一個更長的字串，然後這個字串就作為 write 的參數了。
document.URL   不用雙引號括著，因為我們要顯示 document.URL   的內容，而不是一個 document.URL 字串。

document.write("The background color is " + document.bgColor
                       + " and the text color is " + document.fgColor);

當你發覺一句字串太長時，可以寫在下一行，而分割的位置可以在加號的左右，分割其它位置可能會造成錯誤。

document.fgColor = "gold" 和 document.bgColor = "black"

這兩句會將背景顏色轉成黑色，將文字顏色轉成金色。想改變物件屬性的內容，只須把它當作變數，再用等號 (=) 指定它的內容便可。

(繼續閱讀...)

羅朝淇發表在痞客邦留言(0) 人氣(28)

個人分類：JavaScript

▲top

12月 13 週四 200709:53
JavaScript的基本架構

因為 JavaScript 是寫在 HTML 檔的，所以 Netscape 定義了一個 <script> 標記。
瀏覽器會將 <script> 與 </script> 中間的東西視作要執行的 JavaScript，而不是HTML 。 <script> 有兩個屬性 (Attribute)：
1.第一個屬性： language
以上的 Hello, World 例子中用了 language="JavaScript"
2.第二個屬性：src
你可以將 JavaScript 放在另一個檔案，然後將 src 設定為該檔的 URL。例如：

好處：第一，所有 HTML 檔只須加入這一句就可以享用 library.js 內的 JavaScript ，第二，當瀏覽器關閉或不支援 JavaScript 功能時，瀏覽器就不用下載 JavaScript 的檔案，節省下載時間，第三就是方便在某一頁寫入資料。

其實是 HTML 的註解標記 (comment tag)，而 // 則是 JavaScript 的註解標記，為什麼要在 JavaScript 的範圍內寫 HTML 的註解標記呢？因為有些很舊的瀏覽器在未有 JavaScript 時出產，這些瀏覽器當然不知道有 JavaScript 這東西，它們會誤以為寫在 HTML 檔內 JavaScript 是 HTML 碼，所以我們會好像以上例子中加入 HTML 的註解標記，令那些舊的瀏覽器忽略 JavaScript。同理，那個 // 是用來令 JavaScript 編譯器忽略 --> 標記的。
JavaScript 的註解標記有兩款：第一是 // ，第二是 /* */。第一款用來表示在　//　右邊的東西都是註解；而第二款是用來表示所有在 /* 及 */ 範圍內的東西都是註解，如果你想打很多行註解，用這款比較方便。

document.write("Hello, World");

這一句用到第二篇：物件的方法與屬性中所教的東西，不過現在簡略說明一下，讓大家有個初步的概念。
句中的 document (頁／文件) 是指當時瀏覽器視窗或窗柜顯示的一頁內容，但未必是一個實在的檔案內容，因為該頁的全部內容可能是用 JavaScript 動態地寫出來的，所以說 document 是顯示的內容，而非檔案內容。
document 是一個物件， write 是 document 物件的一個方法，它們中間有一點 (.)，是用來連貫它們的。
"Hello, World" 是 write 的參數 (Argument / Parameter)， Hello, World 字串被雙引號括著，即是說 Hello, World 是一個字串。句尾的分號 (;) 是用來表示該行的結尾。
總括來說，這一行的作用就是叫瀏覽器在顯示中的一頁 (document) 寫 (write) 一句 Hello, World 的字串。當然你也可以用 document.write 寫 HTML 標記，這就可以動態地造出 HTML 網頁了。以下句子會寫出斜體的字串 Hello 字串：
document.write("<i>Hello</i>")

在某些情況下瀏覽器不能夠執行 JavaScript ，原因主要有兩個：第一是舊的瀏覽器不知道有 JavaScript ，第二就是使用者關閉了 JavaScript 功能。這時瀏覽器就會顯 <noscript> 範圍的內容，讓網頁管理員通知瀏覽者該網頁有些內容不能如常運作。你可以嘗試關閉 JavaScript 功能，然後開啟 Hello, World 例子，就會見到一句 Sorry, but your browser doesn't run JavaScript.。
這兩個標記一定要寫在 <body> 範圍。

(繼續閱讀...)

羅朝淇發表在痞客邦留言(0) 人氣(317)

個人分類：JavaScript

▲top

12月 13 週四 200709:46
JavaScript的簡介

誕生

Netscape 公司於 1994 年 4 月成立，初時發展了一種電腦語言 LiveScript ，其發展目的主要有兩個：第一，在伺服器端，附助 Netscape 發展的伺服器程式 LiveWire。第二，在客戶端，加強 HTML 的表達能力，亦即是提高網頁的互動性。

當時 Sun 公司也在發展 Java ，其後因為 Sun 公司與 Netscape 公司合作發展 LiveScript ，所以 LiveScript 就改名做 JavaScript，而發展目的也多了一個，就是附助 Java 在網頁上運作，最後， JavaScript 於 1995 年 12 月誕生了，版本為 1.0 ，支援的瀏覽器有 Netscape Navigator 2.0 。

根據 Netscape 公司的統計，現時網上有大約 3 百萬網頁使用了 JavaScript 。

若果想了解 JavaScript 的版本資訊，請參看本站的初階教學。

功能

JavaScript 可分成兩類： Client-Side JavaScript (客戶端 JavaScript) 和 Server-Side JavaScript (伺服器端 JavaScript)，而本站所講述的 JavaScript 只限於客戶端 JavaScript ，至於伺服器端 JavaScript ，可以去 Netscape JavaScript Reference 。

顧名思義，客戶端可以是我們所用的瀏覽器，客戶端 JavaScript 只可以在瀏覽器內執行。

很多人會以為 JavaScript 和 Java 是同一樣東西，其實它們在技術上是有很大分別的，它們只是語法相近而已。以下是 JavaScript 和 Java 的基本分別：

JavaScript	Java
編寫在 HTML 檔內	不能編寫在 HTML 檔
瀏覽器在開啟 HTML 檔時會直譯 (Interpret) JavaScript，之後就可執行	編寫的程式需要編譯 (Complie) 做 Java byte-code 才可執行
不能讀寫檔案，最多只能運用 Cookie 技術儲存少許資料在瀏覽器	可以讀寫檔案
不能控制網絡	可以控制網絡

JavaScript 沒有一般伺服器及網絡控制的功能，而為了防止網絡病毒散播， JavScript 也不能讀寫檔案。 JavaScript 的發展目的在於提高網頁的互動性，所以在網頁內容控制方面， JavaScript 算是最方便快捷的。

在未有 JavaScript 之前，很多網頁的互動都要靠 CGI (共同閘道介面)，簡單來說就是在伺服器執行一個程式，這個程式可以處理瀏覽器所提供的資料，例如接收客戶端送出的表單資料，然後檢查錯誤，有錯就傳回網頁，指出那些地方有錯，當客戶端改正錯誤後就再送出表單，直至資料正確為止。

有了 JavaScript 之後，很多工作都可以在瀏覽器完成，大大減少伺服器的工作。例如當客戶端決定送出表單，就可以用 JavaScript 來檢查表單資料的表面錯誤，例如打錯了電郵地址、打漏了姓名等，這時 JavaScript 可以彈出一個瀏覽器訊息，通知他資料錯誤，直至沒有錯誤才送出表單。檢查這些不用和伺服器溝通的錯誤，就可以用 JavaScript 了，但也不可以完全依賴 JavaScript ， JavaScript 只能減輕伺服器的工作，而不能取代它的工作。

語言特性

大小楷有別 (Case sensitve)

這點與 HTML 標記不同，例如 bgcolor、bgColor、BgColor 和 BGCOLOR 都是不同的東西。

物件導向 (Object-Oriented)

物件導向可以說是一種思考方法，它把任何東西都視作一個物件，當你想做某些工作時，只要想想該件工作與什麼物件有關，就可以很容易去表示它，而不用硬記一些沒有關聯的指令名稱。

寬鬆型態 (Loosely Typed)

如果你有電腦語言的認識，就會知道資料是有不同的型態的，例如字串、數目等，而且當要轉變資料型態時，就要寫一些敘述來處理。

不過 JavaScript 的資料型態是可以隨時變更的，例如一個變數原本是字串型態，你也可以用它來儲存數目。這就是 JavaScript 容易學習的原因，不過站長還是建議大家小心運用這個特性。

(繼續閱讀...)

羅朝淇發表在痞客邦留言(0) 人氣(40)

個人分類：JavaScript

▲top

羅朝淇的部落格

歡迎光臨羅朝淇在痞客邦的小天地

with the addition of some ??

CR & LF到底是什麼意思呢

列印GridView

視窗 (Window)集合函數

JavaScript--事件

JavaScript--函數、變數的範圍

JavaScript--變數、資料型態、陣列

JavaScript--物件

JavaScript的基本架構

JavaScript的簡介

自訂側欄

自訂側欄

個人資訊

熱門文章

文章分類

最新文章

動態訂閱

文章精選

文章搜尋

誰來我家

參觀人氣

事件處理者	事件發生於
onBlur	使用者離開某一欄
onChange	使用者改變某一欄的內容
onClick	使用者按下某個按鈕
onFocus	使用者的輸入焦點進入某一欄
onLoad	某一頁完全載入
onMouseOver	滑鼠游標在某個物件之上
onMouseOut	滑鼠游標離開某個物件
onSelect	使用者選擇某一欄的內容
onSubmit	使用者確定送出某表單
onUnload	正在顯示的一頁被改變

資料型態	例子	說明
字串 (String)	var name = "Tom"; var model = "1001";	字串通常是用雙引號 (") 或單引號(')括著，例子中表示了一個 Tom 字串和一個 1001 字串。
數目 (Number)	var age = 16; var pi = 3.141592653589793; var expo = 54e7; var octal_num = 010; var hex_num = 0x10;	數目可以是實數和整數，整數包括10 進制、8 進制和 16 進制。數目前面是 0 代表 8 進制，數目前面是 0x 代表 16 進制
布林 (Boolean)	var is_enabled = true; var ie3 = false;	布林資料只有兩個值，就是 true 或者 false 任何一個，適合用作一些只有兩個可能的運算。
空白 (Null)	var no_content;	資料沒有內容，例如你只定義它變數的名稱，但沒有指定內容，那麼它就等於 null 了。
物件 (Object)	var dw = document.write; var myname = document.myform.myname;	通常是為了方便而定義物件變數，例如可以用 dw 代替 documen.write，那就不用打很多字了
陣列 (Array)	var even_num = new Array(2,4,6,8,10); var fruit = new Array("apple","orange");	陣列是用來儲存一組相同型態的資料，在本篇稍後詳述。

歡迎光臨羅 朝淇在痞客邦的小天地

自訂側欄

自訂側欄

個人資訊

熱門文章

文章分類

最新文章

動態訂閱

文章精選

文章搜尋

誰來我家

參觀人氣

歡迎光臨羅朝淇在痞客邦的小天地