回首頁
站長的功力還不是很成熟,若有錯誤的部分請不吝來信指導哦...
JavaScript簡介
JavaScript語法
JavaScript小程式
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。

<SCRIPT>

JavaScript Program

</SCRIPT>

註解: JavaScript不像  HTML  使用  <!-- and --> 作註解,而是使以雙斜線 (//)來作註解。如果不放在  HTML  註解中,  JavaScript  的註解會被其他瀏覽器當作文字顯現出來。
SCRIPT  標籤有兩個屬性用來決定  Javascript  的 script 如何併入  HTML  中,這兩個屬性如下:

LANGUAGE 指出  script  所使用的語言。
SRC

包含  Javascript  原始程式檔的URL。此檔必須是副檔名為 .js 的檔。

 

  LANGUAGE:

  <SCRIPT LANGUAGE="JavaScript">

  JavaScript Program

  </SCRIPT>


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

  SRC:

  <SCRIPT LANGAGE="JavaScript" SRC="filename.js">

  </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;

  }
 

注意關鍵字 thisthis在 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="改變前:AAAAAAAAAA";

  window.setTimeout( " status= ' 改變後:BBBBBBBBBB ' ; " , 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個字元,我們把他表示成:

A0 A1 A2 A3 A4 A5 A6 A7 A8 A9


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

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>