JavaScript程式设计.docx

JavaScript程式设计.docx

《JavaScript程式设计.docx》由会员分享，可在线阅读，更多相关《JavaScript程式设计.docx（25页珍藏版）》请在冰豆网上搜索。

JavaScript程式设计

JavaScript程式設計

中研院計算中心翁維瓏

Ø什麼是JavaScript？

JavaScript是一種使用者（Client）端的語言，它是Netscapecommunications以及SunMicrosystems合作下的產物，它可以讓你直接崁入你的HTML文件中，而產生動態控制網頁間的互動。

Ø要在哪一種軟體寫JavaScript程式？

一般文書處理程式均可編輯。

（ex.記事本、MicrosoftNotePad、MacSimpleText、UNIXvi或emacs...）

ØJavaScript的程式碼應該放哪裡?

1、包含於Script前後標籤（tag）之間。

想要在HTML中插入Script不是一件困難的事。

每一個Script的開始和結束都要有一個標籤來表示。

一個Script的開始用的標籤為結束。

SCRIPT標籤的屬性：

SRC–其意義包含了JavaScript原始檔的URL，此檔名必須是副檔名為.js的檔。

LANGUSGE–指script所使用的語言。

JavaScriptProgram

[範例一]

document.write（"歡迎光臨"）;

[範例二]

alert（"歡迎光臨"）;

2、如果希望HTML一載入時即執行Script，建議將嵌入前後標籤之中。

3、如果欲將JavaScript的命令嵌入Anchor之中，請加上Javascript:

的字樣。

alert（'OK!

'）">按我

4、呼叫執行某段程式（function）

test（）">按我

5、加上適當的註解增加程式的可讀性

//輸出"歡迎光臨"

document.write（"歡迎光臨"）;

Ø常見的錯誤

1、

2、

3、

4、

ØJavaScript內建對話方塊

1、警告（提示）視窗（AlertWindow）

alert（'這是警告視窗'）">按我

2、確認視窗（ConfirmWindow）

--以函數來完成此項工作-->

link2as（）">中央研究院首頁

3、輸入視窗（PromptWindow）

[範例三]網路上的整人把戲

ØJavaScript的基本邏輯敘述

1、if敘述

a、if的單一敘述法：

如果條件判斷式的值為真，執行敘述式。

if（邏輯判斷式）

程式敘述;

b、if的多重敘述法：

如果條件判斷式的值為真，則執行敘述一，否則執行敘述二。

if（邏輯判斷式）{

程式敘述區塊;

}else{

程式敘述區塊;

}

[範例]

2、for敘述

又稱為for迴圈（loop）。

依括號內三個選擇性參數的值，決定迴圈的次數。

for（[初值];[邏輯判斷式];[更新敘述]）

{

:

}

[範例四]以for迴圈繪製一8*6的表格

vari,j

for（i=1;i<=6;i++）

{

document.write（""）;

for（j=1;j<=8;j++）

{

document.write（""+i+"*"+j+""）;

}

document.write（""）;

}

3、while敘述

每一次迴圈均計算條件判斷式的值，若其值為真（true）則執行內含的敘述，否則跳出迴圈。

While（邏輯判斷式）{

程式碼區塊;

}

[練習一]改寫範例四，運用while迴圈敘述繪製一6*8的表格

4、break敘述

用來終止while或for迴圈。

[範例五]若i=3則終止迴圈

5、continue敘述

僅僅終止while或for的某一個迴圈，然後繼續進行下一個迴圈。

[範例六]若i=3則跳過，繼續進行下一個迴圈

[綜合範例]顫動視窗

functionshake（n）{

for（i=50;i>0;i--）{

for（j=n;j>0;j--）{

self.moveBy（0,i）;

self.moveBy（i,0）;

self.moveBy（0,-i）;

self.moveBy（-i,0）;

}

}

}

[綜合練習]以while迴圈敘述改寫上述範例

ØJavaScript的物件（Object）、屬性（Property）及方法（Method）

1、物件

視窗、文件、表單、頁框…等幾乎全部都是物件。

在Netscape4+/IE4+以後，被標籤所包圍的文字也都變成是物件。

針對這些物件可以作屬性的設定或指定方法…等各種處理。

2、屬性及方法

屬性也就是物件所擁有的值，像背景色、文字的顏色、疊層…等都是。

而方法則是給物件下達指令。

屬性、方法、物件名稱、屬性名稱、方法名稱以『.』區隔作敘述，如果沒有區別屬性名稱及方法名稱時，在指令後面加上（）的就是方法，如果不是的話就是屬性。

方法和屬性，它可以作覆數個的記述，例如要將某『文字』設定成粗體、斜體時可如下所述：

"文字".bold（）.italics（）。

物件、屬性、方法的表示法：

物件.屬性.方法（）

JavaScript的物件：

文件物件（document）視窗物件（window）

瀏覽器物件（navigator）字串物件（String）

日期物件（Date）事件物件（event）

歷史物件（history）表單物件（forms）

螢幕物件（screen）頁框物件（frames）

影像物件（Image）層疊物件（Layer）

……..等

舉個例子來說，如果欲開啟一個新視窗，所運用到的是視窗物件（window），所運用的方法是open（）方法，如以下表示法：

window.open（）;

又，我們可以訂定屬性決定此開啟的視窗大小、是否有捲軸、是否有工具列，如下：

window.open（'msg.htm','_new','resizable=yes,scrollbars=yes,width=320,height=300'）;

ØJavaScript的事件處理程序

onLoadonUnload

onClickonDblClick

onChangeonMouseDown

onMouseUponMouseOver

onMouseOutonMouseMove

onKeyPressonKeyDown

onKeyUponSubmit

onResetonSelect

onAbortonBlur

onDragDroponFocus

onErroronResize

Ø綜合範例

3、進版歡迎視窗

functionmsg（）{

window.open（'msg.htm','_new','resizable=yes,scrollbars=yes,width=320,height=300'）;

//msg.htm是妳的訊息頁//

//這裡是在網頁載入後開啟一個320*300的小視窗//

//resizable=yes是能讓user變更視窗大小//

//scrollbars=yes是在視窗裡有捲軸功能.......//

}

:

:

:

4、

網頁最近更新時間

3、點按鈕前往該站

4、文字變色法

onMouseOver="this.color='red'"

onMouseOut="this.color='black'"

onClick="location='.tw'"

>Seednet

onMouseOver="this.color='red'"

onMouseOut="this.color='black'"

onClick="location=''"

>Hinet

5、動態項目符號

None">◆

onMouseOut=hidden（）>游標

6、狀態列提示

onMouseOver="status='gotoSeedNet!

';returntrue">SeedNet

onMouseOver="status='gotoHiNet!

';returntrue">Hinet

onMouseOver="location='.tw'">

7、顯示現在時間

顯示結果：

TueJun2609:

35:

14UTC+08002001

8、顯示今天日期

顯示結果：

今天是6月26日星期2

9、歷史物件-上一頁、下一頁

10、搜尋引擎

輸入檢索字串

yam蕃薯籐

奇摩yahoo

google

Ø結語

正所謂『師傅領進門，修行看個人』，此課程堪稱JavaScript程式設計的基礎篇，程式是死的，而人是活的，有很多網頁特效都是靠你的創意變出來的，相信在不久的將來你也可已變成網頁高手…….

Ø

Ø

Ø

alert（'這是警告視窗'）">按我

2、確認視窗（ConfirmWindow）

--以函數來完成此項工作-->