==KKSky-JavaScript教學網頁

什麼是JavaScript
JavaScript如何嵌入HTML中
第一個JavaScript
超越文件視窗
處理資料與資訊
函數
物件
windows 和 documents物件
JavaScript實例觀摩
作業

什麼是 Javascript

簡單、以物件為基礎的敘述語言	若比較 Java 和 JavaScript 的不同之處： JavaScript 屬於簡單而易於使用的敘述語言。在學習使用 JavaScript 和網頁之間建立互動應用的難度上， JavaScript 和其強大的工具比起 Java 確實是要容易得多。
源自Java	JavaScript 不只保有 Java 的語法及基本結構，它也借用了 Java 大部分的流程結構並且提供某些和Java 相同的安全措施。
直譯式的程式語言	JavaScript 是一種直譯式的程式語言，這是和 Java截然不同的。 Java 的程式碼要先被編譯之後才可以執行﹔而直譯式程式語言的程式碼則直接在應用程式立即執行。
有限擴充性	JavaScript 不像 Java 可以完全的擴充下去﹔JavaScript 的模組列出有限的一群物件、屬性、方法及資料形態，這些模組已經提供了足夠的功能用來設計客戶端的應用程式。
有限的主從互動關係	JavaScript 目前並非設計成完全的主從互動。除了分析、建立、呼叫 URLs ， JavaScript 並不能直接和伺服器溝通或用不同的通訊協定。基本上，JavaScript 是用來處理客戶端的動作。
與HTML合而為一	不同於 Java 僅只是與 HTML 連結， JavaScript 是緊密地與 HTML 檔案結合。典型上 JavaScript 整個的語法和決定頁面格式的 HTML 是在同一個檔案，而這些語法會和 HTML 同時被下載。

BACK

JavaScript如何嵌入HTML中

在 HTML 中放入 JavaScript 其實很簡單，每一個 script 都必須被包在 SCRIPT 標籤中。換句話說，以 <SCRIPT> 開始 script 而以 </SCRIPT> 結束 script。

JavaScript Program

</SCRIPT>

註解：	JavaScript不像 HTML 使用 <!-- and --> 作註解，而是使以雙斜線（//）來作註解。如果不放在 HTML 註解中， JavaScript 的註解會被其他瀏覽器當作文字顯現出來。

SCRIPT 標籤有兩個屬性用來決定 Javascript 的 script 如何併入 HTML 中，這兩個屬性如下：

LANGUAGE	指出 script 所使用的語言。
SRC	包含 Javascript 原始程式檔的URL。此檔必須是副檔名為 .js 的檔。

LANGUAGE：

JavaScript Program

</SCRIPT>

對於較小的程式及基本的 HTML 而言，直接把 JavaScript 放在 HTML 檔中是很方便的，但當碰到常而複雜的程式時恐怕就不是這麼一回事了。為了使 HTML 檔和 JavaScript 程式較易於開發、維護，你可以將 JavaScript 程式放在不同的檔案，然後在 HTML 檔中以 SCRIPT 標籤的 SRC 屬性來引入其程式。

SRC：

</SCRIPT>

BACK

第一個JavaScript

輸出文字：

JavaScript有幾種方法可以輸出文字，在這裡我們先用document.write()來輸出文字到視窗中。

在 JavaScript 的呼叫方法中，須結合物件與方法的名稱：

Object - name . property - name

執行方法需要的資料被當作引述放在括弧中，

例如：

document.write("Hello World");

language.html

<html>

<title>Hello World</title>

<script language="javascript">

document.write("Hello World");

</script>

</html>

範例 1：顯示 Hello World

src.html

<html>

<title>Hello World 使用SRC </title>

<script language=" javascript " src =" src.js">

</script>

</html>

src.js

document.write ( " Hello World " );

範例 2：使用 SRC 顯示Hello World

BACK

超越文件視窗

HTML 的限制之一就是 Web Site 開發者只能在單一的客戶端視窗上開發。

JavaScript提供程式設計師創作一小對話盒的功能----對話盒的內容是獨立於包含 JavaScript的 HTML 頁面之外，並不會影響到頁面的外觀和內容。

直接輸出於對話盒最簡單的方法就是使用 alert( ) 方法。使用 alert( )方法就像使用 document.write( ) 一樣，只需提供一個文字字串即可。

alert.html

<html>

<title>Hello World 使用 alert()</title>

<script language = " javascript " >

alert ( " Hello World " );

</script>

</html>

範例 3：使用 alert( ) 顯示 Hello World

	然而， alert( ) 方法不能讓你與使用者做雙向互動，而確定按鍵也只能提供你做某些事件的控制，仍然無法讓你依使用者的輸入產生預定或動態的輸出
	與使用者做雙向互動最簡單的辦法就是使用 prompt( ) 方法，如同 alert( )方法一樣，prompt( )方法也依你的指定產生對話盒，他還提供了一個有預設值的欄位，使用者必須先填入該欄位然後按確定鍵。
	prompt( ) 方法能傳回使用者輸入的結果。由方法傳回的結果可以存放在變數中，或當作另一個方法的引數

prompt.html

<html>

<title>使用prompt()來輸入資料</title>

<script language="javascript">

document.write("你最喜歡的顏色是：");

document.write(prompt("輸入你最喜歡的顏色","藍色"));

            //或是

            // str=prompt("輸入你最喜歡的顏色","藍色")

            // document.write(str);

</script>

</html>

範例 4：使用 prompt( ) 來輸入資料

另外還有一種 confirm( ) 方法，其用法類似於 alert( ) 和 prompt( ) 方法。confirm( ) 方法以單一字串為引數，它顯示出一個包含字串和確定及取消按鍵的對話盒，並在使用者按下確定時傳回 true ，按下取消時傳回 false。

confirm.html

<html>

<title>confirm()</title>

<script language="javascript">

choose=confirm("選擇【確定】或是【取消】");

alert(choose);

</script>

</html>

範例 5：confirm( )的練習

BACK

處理資料與資訊

為了超越輸出文字與基本的使用者互動層次，就必須處理使用者或程式產生的的資料與資訊。

JavaScript 的比較運算子

運算子	說明
==	如果運算元相等傳回 True
!=	如果運算元不相等傳回 True
>	如果左邊的運算元大於右邊的運算元就傳回 True
<	如果左邊的運算元小於右邊的運算元就傳回 True
>=	如果左邊的運算元大於或等於右邊的運算元就傳回 True
<=	如果左邊的運算元小於或等於右邊的運算元就傳回 True

JavaScript 的邏輯運算子

運算子	說明
&&	邏輯 "and" ：當兩個運算元是真時傳回 True，否則傳回 False
\|\|	邏輯 "or" ：當任一個運算原是真時就傳回 True，只有在兩個運算元都是假時才傳回False
!	邏輯 "not" ：當運算元是假時傳回 True，當運算元是真時傳回 False，這是單元運算子且在運算元之前

因為運算式可以是其他運算式的運算元，了解運算子的優先順序是必要的。
你所學到的運算子會被下列的順序被評估（從最低優先順序到最高）：

指定運算元	= += -= *= /= %=
條件運算子	?:
邏輯 or	\|\|
邏輯 and	&&
等式	== !=
關係式	< <= > >=
加 / 減	+ -
乘 / 除 / modulus	* / %
括號	( )

　

為了使用變數，最好在使用前宣告它。宣告變數就告訴 JavaScript 該變數的存在，以便 JavaScript 在解釋時知道該變數代表什麼。

雖然使用變數有可能同時宣告它了，但宣告變數有助於程式的組織性及易於追查變數的範圍

可以使用var指令來宣告變數：

var.html

<html>

<title>confirm()</title>

<script language="javascript">

var example="An Example";

document.write( example );

</script>

</html>

範例 6：宣告變數使用 var

可分岔執行的 if-else 敘述

if condition
{
JavaScript Code;
}
else
{
JavaScript Code;
}

if-else.html

<html>

<title>包含if語句的confirm()</title>

<script language="javascript">

//定義變數

var question="What is 10+10 ? ";

var answer=20;

var correct="你答對了～"

var incorrect="你答錯了～"

//問問題

var response=prompt(question,"0");

//第一次檢查

if (response!=answer)
{
//答案錯誤，給第二次機會

if( confirm( "答錯了！按確定可再回答一次" ) )

response=prompt(question,"0");

}

//檢查答案

var output=(response==answer)?correct:incorrect;

document.write(output);

</script>

範例 7：詢問使用者問題並且給予第二次回答的機會。

計次執行的 for 迴圈

如果已經確定執行的次數，使用for迴圈最方便，它的格式是：

for( 計次變數＝起始值 ; 連續執行迴圈的條件 ; 更新計次變數的條件 )

敘述（區塊）；

1-10.html

<html>

<title>從1列印到10</title>

<script language = " javascript " >

for( i = 1 ; i <= 10 ; i++ )

document.write( i + "<br>") ;

</script>

</html>

範例 8：for迴圈

while迴圈

while.html

<html>

<title>while</title>

<script language = " javascript " >

i = 0

while( i < 1000 ) {

i++;

if ( i == 5 ) continue;

if ( i == 10 ) break;

document.write ( i + "<br>");

}
</script>

</html>

範例 9：while迴圈

BACK

函數

首先來看看定義（建立）函數的方法，以下是函數的基本架構：

　

function 函數名稱( ){

敘述 ( 區塊 );

}

定義函數時我們會設定一個名稱給函數，利用此一名稱，只要將敘述寫成『函數名稱( )；』即為呼叫函數枝敘述，例如：

FUN.html

<html>

<title>函數的練習</title>

<script language = " javascript " >

      function FUN( ){ //FUN是函數的名稱

      window.alert("進入範例函數FUN( )之中");

       }
    </script>

    <script language= " javascript " >

    window.alert("接著要呼叫函數 FUN( )");

    FUN( );

    <script>

</html>

範例 10：函數的練習

含有參數的函數

要讓函數可以接受參數，在格式上要寫成：

　

function 函數名稱( 參數1,參數2,參數.....) ｛

敘述 ( 區塊 )

｝

fun_para.html

<html>

<title>帶參數函數的練習</title>

<script language="javascript">

      function Add3(A,B,C){

      alert(A + "+" + B + "+" + C + "=" + (A+B+C));

       }

</script>

<script language="javascript">

     Add3(10,20,30);

</script>

</html>

範例 11：含有參數的函數

含有傳回值的函數

fun_return.html

<html>

<title>帶參數函數的練習</title>

<script language="javascript">

      function Add3(A,B,C){

      x=A+B+C;

      return x;

       }

</script>

<script language="javascript">

    y=Add3(10,20,30);

    alert("10+20+30=" + y);

</script>

</html>

範例 12：含傳回值的函數

BACK

物件

在JavaScript中定義自己的物件

在建立新物件之前必須先以屬性大綱來定義物件。這是由使用定義函式名稱和屬性的函式來完成，這類的函式稱作 constructor function。

假設在此想建立一個學生在教室李使用的物件形態，可以建立一個名稱為student的物件，有name、age、grade等屬性。

function student( name , age , grade ){

    this.name=name;

    this.age=age;

    this.grade=grade;

}

注意關鍵字 this ，this在 JavaScript 中扮演一個特殊的角色，指的是目前的這個物件。

使用 new 敘述來建立物件

student1= new student ("Johnny",10,75 );

這一行 JavaScript 程式碼建了一個名稱為 student1的物件，

且有三個屬性 (student1.name、student1.age、student1.grade)

利用 student2=new student("Rober",9,82 );

就建立了另一個不同於 student1 的新物件。

假設，今天有某種必要，必須要將 Johnny 的母親的名字也記錄起來，可以使

用下列方法：

studnet1.mother="Susan";

這將會在 student1 中增加一個屬性，但是對 student2 或是其他 student 物件

卻沒有任何效用。

如果要將 mother 屬性加到所有的 student 物件中，必須在定義物件時，把這

個屬性加到物件定義中，也就是：

function student( name , age , grade , mother ){

    this.name=name;

    this.age=age;

    this.grade=grade;

    this.mother=mother;
}

增加方法到物件

method.html

<html>

<title>加入方法到物件中</title>

<script language="javascript">

function disp( )
{
document.write(" Name:" + this.name + "<br>");

document.write(" Age:" + this.age + "<br>");

document.write("grade:" + this.grade + "<br>");

document.write("Mom's name:" +this.mother +"<br>");

}

function student(name,age,grade,mother)
{
this.name=name;

this.age=age;

this.mother=mother

this.grade=grade;

this.disp=disp;

}

</script>

<script language="javascript">

student1=new student("Johnny",10,75);

student1.mother="Susan";

student1.disp( );

</script>

</html>

範例 13：增加方法到物件

BACK

windows和 documents物件

windows物件： windows物件是 JavaScript 所不可或缺的物件，我們在前面所用過的 alert、confirm、prompt就是windows物件的方法及屬性。

　

windows.status：另外一種 JavaScript 的輸出方式，把欲輸出的訊息顯在狀態列上。

status.html

<html>

<title>Status的練習</title>

<script language="javascript">

document.write ("請看左下角狀態列");

window.status="狀態列這裡會跟著變喔！！";

</script>

</html>

範例 14：window.status的練習

　

window.setTimeout( )：

『時間到了，起來做事』這句話最適合來形容 setTimeout( )方法所扮演的角色，如果我們希望隔一段時間之後，執行某一段程式，那麼就呼叫 setTimeout( )方法！

setTimeout的格式：

window.setTimeout( " JavaScript 程式碼 " , 時間間隔 );

時間間隔的時間單位是 1 / 1000 秒

如果不只一行程式碼，則在兩行中間加上分號 (；)

window.setTimeout( " Code1 ; Code2 " , 時間間隔 );

如果敘述實在太多了，可以把它們定義在函數裡，然後在把呼叫此一函
數的敘述寫在第一個參數裡。

定義函數：

    function ABC( )
    {
      .......
       }

呼叫setTimeout( )：

window.setTimeout( " ABC ( ) ; " , 3000 );

setTimeout( )並不會一直循環的呼叫，只會執行一次。

setTimeout.html

<html>

<title>setTimeout的練習</title>

<script language="javascript">

document.write ("左下角狀態列三秒後會改變喔～");

window.status="改變前：ＡＡＡＡＡＡＡＡＡＡ";

window.setTimeout( " status= ' 改變後：ＢＢＢＢＢＢＢＢＢＢ ' ; " , 3000);

</script>

</html>

範例 15：setTimeout的練習

window.open( )及window.close( )物件

window的open( )就是 JavaScript 程式裡面用來開新視窗的方法，呼叫的基本格式是：

winid=window.open("URL");

但是也經常看到以下的變形：

winid=window.open(" ");	開啟空白的瀏覽視窗
window.open("URL");	不記錄被開啟之瀏覽視窗的 id
winid=window.open("HTML檔案 ");	HTML檔案的角色就相當於URL

特別值得注意的是傳回值 winid ( window id)，有了這個winid，我們將來可以呼叫，『winid.close( );』來關閉此一瀏覽視窗。

open&close.html

<html>

<title>Open()和Close()的練習</title>

<form>

<input type=button value="開啟空白視窗(winid1)" onclick="winid1=window.open('');"><p>

<input type=button value="開啟test01.html(winid2)" onclick="winid2=window.open('test01.html');"><p>

<hr>

<input type=button value="關閉winid1" onclick="winid1.close();"><p>

<input type=button value="關閉winid2" onclick="winid2.close();"><p>

</form>

</html>

範例 16：open( )和close( )的練習

open( )還有另外一種呼叫格式可以設定視窗的外觀：

winid=windows.open( " URL " , " 視窗名稱 " , " 視窗外觀之設定 ");

注意： " 視窗外觀設定 " 參數中的『，』之後不可以含有空白字元

toolbar=yes / no	瀏覽視窗是否顯示『工具列』
location=yes / no	瀏覽視窗是否顯示『位址欄位』
directories=yes / no	瀏覽視窗是否顯示『目錄列』
status=yes / no	瀏覽視窗是否顯示『狀態列』
menubar=yes / no	瀏覽視窗是否顯示『功能表』
scrollbars=yes / no	瀏覽視窗是否顯示『捲動軸』
resizable=yes / no	瀏覽視窗是否『可以調整大小』
width=點數	瀏覽視窗的『寬度』
height=點數	瀏覽視窗的『高度』

open2.html

<form>

<input type=button value="開啟視窗" Onclick="window.open

('','NAME','status=no,toolbar=no,location=no,menubar=no,width=400,height=300');"><p>

</form>

範例 17：開啟一個沒有『狀態列、工具列、位址欄位、功能表』，大小為400*300的空白瀏覽視窗

document物件：

document 物件也是 JavaScript 非常重要的物件，我們前面就經常利用document.write方法在頁面上輸出資料

Onload( ) 及 Unonload 事件

	Onload()是「當頁面載入時」的意思，屬於 JavaScript 的一種「事件」。
	與Unload相對應的事件是OnUnload()，意思是「當頁面載出時」，也就是離開目前頁面的時候，所以當使用者切換頁面或關閉瀏覽視窗時，都會發生此一事件。

on_unonload.html

<html>

<title>Onload( ) and Unonload( ) </title>

<body onload="window.alert('歡迎進入本頁面');"onunload="window.alert('有空再來坐');">

</html>

範例 18：Onload( ) 和Unonload( ) 的練習

location物件

	location物件是 JavaScript 用來記錄目前網頁URL的物件，每當上網者切換網頁之後， location 物件內所記錄的URL就會跟著改變。
	location物件在程式設計中很實用，舉例來說，HTML具有連結功能的只有文字及圖片，但是我們可以利用「設定URL給loacation物件」的敘述，讓按鈕也具有連結的功能。

location.html

<html>

<title>location的練習</title>

<form>

<input type=button value="連結到中原大學" onclick="location='http://www.cycu.edu.tw';">

</form>

</html>

範例 19：location的練習

BACK

JavaScript實例觀摩

	回上一頁
	加到我的最愛
	跟著滑鼠動的文字

BACK

作業

身分證號碼檢查程式

預備知識：

陣列物件的建立

使用陣列物件之前，必須先行建立，而建立陣列物件的敘述有以下兩種格式：

X=new Array(N);

X=new Array(陣列元素0 , 陣列元素1 , ........陣列元素N-1);

兩種格式都會建立出 N 個元素的陣列物件，差別只在於第二種格式會為每一個值陣列元素設定好初值。

ex:

X=new Array(10);	//建立10個元素的陣列物件,但不設定初值
Y=new Array(95,10,340);	//建立3個元素的陣列物件,而這3個元素的初值分別是Y[0]=95,Y[1]=10,Y[2]=340

String物件

charAt( )方法：依照Index N 去找出字串中第 N 個字元

ex:

x="ABCDE"

x.charAt(0)	A
x.charAt(1)	B
x.charAt(2)	C
x.charAt(3)	D
x.charAt(4)	E

indexOf( ) 與 lastIndexOf( ) 方法

想要搜尋一個較長的字串中,是否含有另一個字串,需使用indexOf( ) 或lastIndexOf( )方法,其中indexOf( )從前面向後搜尋,lastIndexOf( )則從後面向前面搜尋

ex:

x="I saw a saw saw a saw."
// 0 2 90 890

則:

x.indexOf("saw")=2
x.lastIndexOf("saw")=18

如果搜尋之後沒有找到,則傳回-1

例如:

x.indexOf("see")=-1

length屬性

字串物件只有一個屬性 length,用以讀取字串的長度,

例如:

"abc".length 等於3
"".length 等於0

x="1234567890"
x.length 等於10

parseInt、parseFloat：用來把數值型的字串轉成數值

ex:

parseInt("100") 等於 100
parseFloat("99.5") 等於 99.5

在此特此聲明，parseInt、parseFloat不是附屬於字串物件的方法，所以呼叫的語法不是『字串.parseInt』或是『字串.parseFloat』，而是『parseInt(字串)』或是『parseFloat(字串)』

isNaN(x)：如果 x 不是一個數字的話,傳回 true

規則

身分證字號一共10個字元，我們把他表示成：

其中第一個字元必須是英文字母，而此一英文字母在檢查的規則中必須先轉換成數字，轉換的規則如下表：

A	B	C	D	E	F	G	H	J	K	L	M	N
10	11	12	13	14	15	16	17	18	19	20	21	22

P	Q	R	S	T	U	V	W	X	Y	Z	I	O
23	24	25	26	27	28	29	30	31	32	33	34	35

檢查的公式：

(A0的十位數 + A0的個位數*9 + A1*8 + A2*7 + A3*6 + A4*5 + A5*4 + A6*3 + A7*2 + A8 + A9 ) ÷10

如果整除，就是正確的身分證字號

架構

<html>

<title>身分證檢查</title>

<script language="javascript">

function CheckId(id){

}

</script>

<form Name=form1>

輸入身分證號碼：<input type="Text" name=PID><p>

<input type=button value="送出" Onclick="CheckId(PID.value);">

</form>

</html>