深海小魚's Blog

2014-01-22

[JavaScript]基本程式碼介紹

  • 2935
  • 0

[JavaScript]基本程式碼介紹

 

因小編目前在學習JavaScript，故在此記錄小編的學習過程，若以後忘記，方能查詢。

 

JavaScript的執行方法有 2種 :

  1. 循序執行：當網頁載入後，執行網頁的JavaScript的程式碼，不用觸發任何物件就顯示程式碼要呈現的內容。
  2. 事件驅動：當網頁載入後，執行網頁的JavaScript的程式碼，但不會顯示程式碼要呈現的內容，需要使用者去觸發(點擊)該物件才會顯示(處理)該程式碼。例如：當使用者按下網頁上的「Button」，執行該「Button」的程式碼。

 

 

1.循序執行

簡單的說就是直接在頁面上顯示文字(資訊)，達成這功能不須透過其他物件。

document：代表程式碼所在的文件。

write：為document物件的方法。

「write」 與 「writeln」 的差別在於：

  write:輸出完不會換列。

  writeln:輸出完會換列。

   1: <html>
   2: <head>
   3: <meta HTTP-EQUIV="Content-Type" Content="text/html; charset=big5">
   4: </head>
   5: <body>
   6:  
   7: <script>
   8:   name="小編";
   9:   age=14;
  10:   document.write("Name :"+ name);
  11:   document.write("Age :"+ age+"<br>");
  12:   document.writeln("Name :"+name);
  13:   document.writeln("Age :"+age);
  14: </script>
  15:  
  16: </body>
  17: </html>

 

 

2.事件驅動

即需要有點擊物件，方能執行程式碼。

JavaScript提供三種內建的視窗:

  • 警告視窗(Alert Window)
  • 確認視窗(Confirm Window)
  • 提示視窗(Prompt Window)

 

a.警告視窗(Alert Window)

   這裡是將JavaScript的程式碼寫在href的連結位置，並使用Alert()產生警告視窗。

   下面的程式碼是當網頁載入後，取得今天的日期後存至loadtime，等使用者按下連結後，將loadtime以Alert Window方式呈現。

   1: <html>
   2: <head>
   3: <meta HTTP-EQUIV="Content-Type" Content="text/html; charset=big5">
   4: </head>
   5: <body>
   6:  
   7: <A href="javascript:alert(loadtime)">取得本日日期</a>
   8:  
   9: <script>
  10:      now=new Date();
  11:      m=now.getMonth()+1;
  12:      d=now.getDate();
  13:      y=now.getFullYear();
  14:      loadtime="本日為" + y + "年" + m + "月" + d + "日";
  15: </script>
  16:  
  17: </body>
  18: </html>

 

b.確認視窗(Confirm Window) 

   1: <html>
   2: <head>
   3: <meta HTTP-EQUIV="Content-Type" Content="text/html; charset=big5"> 
   4: </head>
   5: <body>
   6: <script>
   7: function link()
   8: {
   9:     ans=confirm("將連至奇摩");
  10:     if (ans) location.href="http://www.yahoo.com.tw";
  11: }
  12: </script>
  13:  
  14: <a href="http://www.youtube.com" onClick="return(confirm('將連至Youtube'))">Youtube</a>
  15:  
  16: <a href="javascript:if (confirm('將連至Google'))
  17:   location.href='http://www.google.com'">Google</a><br>
  18:  
  19: <a href="javascript:link()"> 奇摩</a><br>
  20:  
  21: </body>
  22: </html>

 

這裡使用三種方式呈現該視窗方法

I.使用「onClick()」屬性，當此回傳值是 true時，方會執行該href。

II.直接將Confirm window寫在href裡面，並使用If來判斷使用者是否按下「確定」，若為true，方會執行下方程式碼。

III.呼叫Script的函式，讓函式來判斷並執行。

 

c.提示視窗(Prompt Window)

  先將要程式碼寫至函式，prompt的使用方式為「prompt(提示,預設)」，並寫入If判斷使用者是否輸入的值在合理範圍內。

   1: <html>
   2: <head>
   3: <meta HTTP-EQUIV="Content-Type" Content="text/html; charset=big5">
   4: </head>
   5: <body>
   6: <script>
   7: function stu()
   8: {
   9:   student=prompt("輸入學生編號:(s001,s002,s003)","s001");
  10:   if ((student=="s001") || (student=="s002") || (student=="s003"))
  11:     document.write(student);
  12:   else
  13:     document.write("Error");
  14:  
  15: }
  16: </script>
  17:  
  18: <a href="javascript:stu()">編號輸入</a>
  19: </body>
  20: </html>

 

Reference

第 3 章 Alert、confirm 及 prompt 對話盒

JavaScript: 日期與時間

javascript 的 location 各種用法

JavaScript程式設計與應用(修訂第二版)

若有觀念錯誤、內容錯誤，勞請告知。 謝謝。

若要轉載請註明出處，謝謝。

本頁段落