[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