JavaScript學習記錄（基礎）

文章目錄

• JavaScript 變數名稱的規則：
• 規則是：
• 文法
• 文法：
• 文法：
• 文法：
• 建立函數的文法：
• JavaScript 有兩種不同種類的迴圈：
• 事件舉例：

什麼是 JavaScript？

• JavaScript 被設計用來向 HTML 頁面添加互動行為。
• JavaScript 是一種指令碼語言（指令碼語言是一種輕量級的程式設計語言）。
• JavaScript 由數行可執行電腦程式碼群組成。
• JavaScript 通常被直接嵌入 HTML 頁面。
• JavaScript 是一種解釋性語言（就是說，代碼執行不進行先行編譯）。
• 所有的人無需購買許可證均可使用 JavaScript。

 

document.write 欄位是標準的 JavaScript 命令，用來向頁面寫入輸出。

 

當頁面載入時，會執行位於 body 部分的 JavaScript。

當被調用時，位於 head 部分的 JavaScript 才會被執行。

 

JavaScript 注釋

可以添加註釋來對 JavaScript 進行解釋，或者提高其可讀性。

單行的注釋以 // 開始。

 

JavaScript 多行注釋

多行注釋以 /* 開頭，以 */ 結尾。

 

JavaScript 變數名稱的規則：

• 變數對大小寫敏感（y 和 Y 是兩個不同的變數）
• 變數必須以字母或底線開始

注釋：由於 JavaScript 對大小寫敏感，變數名也對大小寫敏感。

 

聲明（建立） JavaScript 變數

在 JavaScript 中建立變數經常被稱為“聲明”變數。

您可以通過 var 語句來聲明 JavaScript 變數：

var x;var carname;

重新聲明 JavaScript 變數
如果您再次聲明了 JavaScript 變數，該變數也不會丟失其原始值。
var x=5;var x;
在以上語句執行後，變數 x 的值仍然是 5。在重新聲明該變數時，x 的值不會被重設或清除。
 
運算子 = 用於賦值。
運算子 + 用於加值。
運算子 = 用於給 JavaScript 變數賦值。
算術運算子 + 用於把值加起來。
y=5;z=2;x=y+z;
JavaScript 算術運算子
算術運算子用於執行變數與/或值之間的算術運算。
給定 y=5，下面的表格解釋了這些算術運算子：
 

  

   

    
運算子
    
描述
    
例子
    
結果
   
   

    
+
    
加
    
x=y+2 
    
x=7 
   
   

    
-
    
減
    
x=y-2
    
x=3
   
   

    
*
    
乘
    
x=y*2
    
x=10
   
   

    
/
    
除
    
x=y/2
    
x=2.5
   
   

    
%
    
求係數 (保留整數)
    
x=y%2
    
x=1
   
   

    
++
    
累加
    
x=++y
    
x=6 
   
   

    
--
    
遞減
    
x=--y
    
x=4 
   
  
 
JavaScript 賦值運算子
賦值運算子用於給 JavaScript 變數賦值。
給定 x=10 和 y=5，下面的表格解釋了賦值運算子：
 

  

   

    
運算子
    
例子
    
等價於
    
結果
   
   

    
=
    
x=y
    
 
    
x=5
   
   

    
+=
    
x+=y
    
x=x+y
    
x=15
   
   

    
-=
    
x-=y
    
x=x-y
    
x=5
   
   

    
*=
    
x*=y
    
x=x*y
    
x=50
   
   

    
/=
    
x/=y
    
x=x/y
    
x=2
   
   

    
%=
    
x%=y
    
x=x%y
    
x=0
   
  
 
用於字串的 + 運算子
+ 運算子用於把文本值或字串變數加起來（串連起來）。
如需把兩個或多個字串變數串連起來，請使用 + 運算子。
規則是：
如果把數字與字串相加，結果將成為字串。
比較子
比較子在邏輯語句中使用，以測定變數或值是否相等。
給定 x=5，下面的表格解釋了比較子：
 

  

   

    
運算子
    
描述
    
例子
   
   

    
==
    
等於
    
x==8 為 false
   
   

    
===
    
全等（值和類型）
    
x===5 為 true；x==="5" 為 false
   
   

    
!=
    
不等於
    
x!=8 為 true
   
   

    
>
    
大於
    
x>8 為 false
   
   

    
<
    
小於
    
x<8 為 true
   
   

    
>=
    
大於或等於
    
x>=8 為 false
   
   

    
<=
    
小於或等於
    
x<=8 為 true
   
  
 
邏輯運算子
邏輯運算子用於測定變數或值之間的邏輯。
給定 x=6 以及 y=3，下表解釋了邏輯運算子：
 

  

   

    
運算子
    
描述
    
例子
   
   

    
&&
    
and
    
(x < 10 && y > 1) 為 true
   
   

    
||
    
or
    
(x==5 || y==5) 為 false
   
   

    
!
    
not
    
!(x==y) 為 true
   
  
 
條件運算子
JavaScript 還包含了基於某些條件對變數進行賦值的條件運算子。
文法
variablename=(condition)?value1:value2 
 
  

   

    if 語句
   
   

    在一個指定的條件成立時執行代碼。
   
   

    if...else 語句
   
   

    在指定的條件成立時執行代碼，當條件不成立時執行另外的代碼。
   
   

    if...else if....else 語句
   
   

    使用這個語句可以選擇執行若干塊代碼中的一個。
   
   

    switch 語句
   
   

    使用這個語句可以選擇執行若干塊代碼中的一個。 
   
  
警告框
警告框經常用於確保使用者可以得到某些資訊。
當警告框出現後，使用者需要點擊確定按鈕才能繼續進行操作。
文法：
alert("文本")
<script type="text/javascript">
function disp_alert()
{
alert("我是警告框！！")
}
</script>

 
確認框
確認框用於使使用者可以驗證或者接受某些資訊。
當確認框出現後，使用者需要點擊確定或者取消按鈕才能繼續進行操作。
如果使用者點擊確認，那麼傳回值為 true。如果使用者點擊取消，那麼傳回值為 false。
文法：
confirm("文本")
function disp_confirm()
  {
  var r=confirm("按下按鈕")
  if (r==true)
    {
    document.write("您按了確認！")
    }
  else
    {
    document.write("您按了取消！")
    }
  }
</script>
提示框
提示框經常用於提示使用者在進入頁面前輸入某個值。
當提示框出現後，使用者需要輸入某個值，然後點擊確認或取消按鈕才能繼續操縱。
如果使用者點擊確認，那麼傳回值為輸入的值。如果使用者點擊取消，那麼傳回值為 null。
文法：
prompt("文本","預設值")
<script type="text/javascript">
function disp_prompt()
  {
  var name=prompt("請輸入您的名字","Bill Gates")
  if (name!=null && name!="")
    {
    document.write("你好！" + name + " 今天過得怎麼樣？")
    }
  }
</script>
如何定義函數建立函數的文法：
function 函數名(var1,var2,...,varX){代碼．．．}
return 語句
return 語句用來規定從函數返回的值。
因此，需要返回某個值的函數必須使用這個 return 語句。
 
JavaScript 有兩種不同種類的迴圈：
    

     

      for
     
     

      將一段代碼迴圈執行指定的次數
     
     

      while
     
     

      當指定的條件為 true 時迴圈執行代碼 
     
    
執行個體
    

     

      break 語句
     
     

      使用 break 語句來終止迴圈。
     
     

      continue 語句
     
     

      使用 continue 語句來終止當前的迴圈，然後從下一個值繼續執行。 
     
    
 
For...In 聲明用於遍曆數組或者對象的屬性（對數組或者對象的屬性進行迴圈操作）。
for (變數 in 對象)
{
    在此執行代碼
}
 
事件舉例：
    

     
滑鼠點擊
     
頁面或映像載入
     
滑鼠懸浮於頁面的某個熱點之上
     
在表單中選取輸入框
     
確認表單
     
鍵盤按鍵 
    
onload 和 onUnload
當使用者進入或離開頁面時就會觸發 onload 和 onUnload 事件。
 
onFocus, onBlur 和 onChange
onFocus、onBlur 和 onChange 事件通常相互配合用來驗證表單。
下面是一個使用 onChange 事件的例子。使用者一旦改變了域的內容，checkEmail() 函數就會被調用。
<input type="text" size="30" id="email" onchange="checkEmail()">
 
onSubmit
onSubmit 用於在提交表單之前驗證所有的表單域。
<form method="post" action="xxx.htm" onsubmit="return checkForm()">
 
onMouseOver 和 onMouseOut
onMouseOver 和 onMouseOut 用來建立“動態”按鈕。
<a href="http://www.w3school.com.cn"
onmouseover="alert('An onMouseOver event');return false"> <img src="w3school.gif" width="100" height="30"></a>
 
有兩種在網頁中捕獲錯誤的方法：
    

     
使用 try...catch 語句。(在 IE5+、Mozilla 1.0、和 Netscape 6 中可用)
     
使用 onerror 事件。這是用於捕獲錯誤的老式方法。(Netscape 3 以後的版本可用) 
    
 
Try...Catch 語句
try...catch 可以測試代碼中的錯誤。try 部分包含需要啟動並執行代碼，而 catch 部分包含錯誤發生時啟動並執行代碼。
 
throw 聲明的作用是建立 exception（異常或錯誤）。
try
{ 
if(x>10) 
throw "Err1"
else if(x<0)
throw "Err2"
} 
catch(er)
{
if(er=="Err1") 
alert("Error! The value is too high")
if(er == "Err2") 
alert("Error! The value is too low") 
}
 
下面的表格列出了其餘的特殊字元，這些特殊字元都可以使用反斜線來添加到文本字串中：

    

     

      

       
代碼
       
輸出
      
      

       
\'
       
單引號
      
      

       
\"
       
雙引號
      
      

       
\&
       
和號
      
      

       
\\
       
反斜線
      
      

       
\n
       
分行符號
      
      

       
\r
       
斷行符號符
      
      

       
\t
       
定位字元
      
      

       
\b
       
退格符
      
      

       
\f
       
換頁符