[JavaScript] JavaScript 語法

[JavaScript] JavaScript語法

JavaScript的語法

JavaScript的語法如下:

<!DOCTYPE html>

<html>

<head>
    <title> Title</title>
</head>

<body>

    <p>
    <button type="button" onclick="Show()">顯示</button>
    </p>

     <p id="Name"></p>
   
     <p id="Age"></p>

     <p id="After10year"></p>

     <script>
         function Show()
         {   
             /*
             這個function可以顯示姓、年紀與十年後的年紀
             */
             var Name = "Berry";  //姓名
             var Age = 18;        //年紀
             var Year = 10;       //十年
             document.getElementById("Name").innerHTML = "我叫" + Name;
             document.getElementById("Age").innerHTML = "我今年" + Age + "歲";
             document.getElementById("After10year").innerHTML = "十年後" + (Age + Year) + "歲";
         }
     </script>

</body>

</html>

<script>中的JavaScript語句:

/ / /* */ 表示註解部分。/ / 用於註解後面接著的文字敘述,/* */ 則可以用來寫入多行註解。

符號作為結尾與其它語句分開。

innerHTML中用加號將字串與變數相加成一個字串。

var 用來定義JavaScript的變數。

 

JavaScript的變數

JavaScript變數的名稱必須是唯一的,變數的命名規則為:

  • 駝峰式命名,如: first-name、first_name、FirstName

  • 必須為英文字母開頭,並可包含英文字母、數字、下底線、$符號

  • 大小寫的差別(如name與Name為不同的變數)

  • 不能用關鍵字命名變數(如var)

變數的資料型態能夠有很多種,當變數的值用 " " 或 ' ' 包覆時為字串,若沒有即為數字。

<!DOCTYPE html>

<html>

<head>
    <title> Title</title>
</head>

<body>

     <script>
         var a = "This is a";
         var x = 10;
         var y = 5;
         var z = '5'

         document.write("a:"+a+"<br>");
         document.write("x:" + x + "<br>");
         document.write("y:" + y + "<br>");
         document.write("x+y:" + (x + y) + "<br>");
         document.write("x+z:" + (x + z) + "<br>");
     </script>

</body>

</html>

document 表示該頁面HTML的內容。

write 是document 的一個方法,會依照( )中的參數將參數顯示在HTML內容,<br>為換行。

a為字串"This is a"

x為數字10

y為數字5

x+y為數字10+5=15

x+z為數字10加上字串"5",會自動轉為字串相加 "10"+"5",最後結果為字串"105"

變數也可以一次定義並寫在同一行,並用 , 分開,如:

var a = "This is a", x = 10, y = 5, z = "5"

變數的資料型態除了字串與數字外,還有其它的型態:

<!DOCTYPE html>

<html>

<head>
    <title> Title</title>
</head>

<body>

     <script>
         var Number = 18;                                    // 數字
         var Name = "Berry";                                 // 字串
         var x = true;                                       //布林值
         var Cars = ["Lexus", "Audi", "BMW"];                // 陣列
         var product = { commodity: "筆電", price: 10000 };  // 物件

         document.write("Number:" + Number + "<br>");
         document.write("Name:" + Name + "<br>");
         document.write("x:" + x + "<br>");
         document.write("Cars:" + Cars[0] + "<br>");
         document.write("product:" +product.commodity +"的價格為"+product.price +"元<br>");
     </script>

</body>

</html>

使用typeof看到每個變數目前的型態:

<!DOCTYPE html>

<html>

<head>
    <title> Title</title>
</head>

<body>

     <script>
         var Number = 18;                                    // 數字
         var Name = "Berry";                                 // 字串
         var x = true;                                       //布林值
         var Cars = ["Lexus", "Audi", "BMW"];                // 陣列
         var product = { commodity: "筆電", price: 10000 };  // 物件

         document.write("Number:" + typeof Number + "<br>");
         document.write("Name:" + typeof Name + "<br>");
         document.write("x:" + typeof x + "<br>");
         document.write("Cars:" + typeof Cars[0] + "<br>");
         document.write("product:" + typeof product.commodity + "的價格為" + typeof product.price + "元<br>");
     </script>

</body>

</html>

 

動態型別 

JavaScript為動態型別(Dynamic typed),變數會依據定義的值有不同的型態:

<!DOCTYPE html>

<html>

<head>
    <title> Title</title>
</head>

<body>

     <script>
         var x;               // x 型態為 undefined
         var x = 5;           // x 型態為 Number
         var x = "Berry";      // x 型態為 String

         document.write("x的值為:" + x + ",資料型態為:" + typeof x + "<br>");
     </script>

</body>

</html>

 

JavaScript的運算

運算符號:

運算符號      描述             算式       
     +      加法          x+y
     -      減法        x-y
     *      乘法        x*y
     /      除法        x/y
    %      取餘數        x%y
    ++      加1        x++
    --      減1        x--

 

加法:

<script>
    var x = 100,y = 8;         
    x = x + y;
    document.write("x+y的值為:" + x );
</script>

 

減法:

 <script>
     var x = 100,y = 8;         
     x = x - y;
     document.write("x-y的值為:" + x );
 </script>

 

乘法:

 <script>
     var x = 100,y = 8;         
     x = x * y;
     document.write("x*y的值為:" + x );
 </script>

 

除法:

 <script>
     var x = 100,y = 8;         
     x = x / y;
     document.write("x/y的值為:" + x );
 </script>

 

取餘數:

 <script>
     var x = 100,y = 8;         
     x = x % y;
     document.write("x%y的值為:" + x );
 </script>

 

遞增:

 <script>
     var x = 100,y = 8;         
     x++;
     z = x;
     document.write("x++的值為:" + z);
 </script>

 

遞減:

 <script>
     var x = 100,y = 8;         
     x--;
     z = x;
     document.write("x--的值為:" + z);
 </script>

 

JavaScript的指派運算

指派運算:

運算符號   指派運算      算式
     =     x = y     x = y
     +=     x += y     x = x + y
     -=     x -= y      x = x - y
     *=     x *= y     x = x * y
     /=     x /= y     x = x / y
     %=     x %= y     x = x % y

 

加法:

 <script>
     var x = 100,y = 8;         
     x += y;
     document.write("x+y的值為:" + x);
 </script>

 

減法:

 <script>
     var x = 100,y = 8;         
     x -= y;
     document.write("x-y的值為:" + x);
 </script>

 

乘法:

 <script>
     var x = 100,y = 8;         
     x *= y;
     document.write("x*y的值為:" + x);
 </script>

 

除法:

 <script>
     var x = 100,y = 8;         
     x /= y;
     document.write("x/y的值為:" + x);
 </script>

 

取餘數:

 <script>
     var x = 100,y = 8;         
     x %= y;
     document.write("x%y的值為:" + x);
 </script>

 

 END 

回目錄