[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>