Web - JavaScript
JavaScript
- 是一種腳本，也是程式語言，使網頁不再靜態顯示
- 可以直接嵌入 HTML 頁面，但寫成單獨的
.js可以讓結構更加分明- 宣告於 HTML 檔中是包在
<body>中的<script>裡1
2
3
4
5<body>
<script>
JavaScript Code...
</script>
</body>
- 宣告於 HTML 檔中是包在
宣告變數 & 資料型別
- JavaScript 是弱型別，在被 assign 時才會決定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<body>
<script>
var myString = "Hello";
var myInt = 123;
var myDecimal = 123.456;
var nowDate = new Date();
var myBoolean = true;
var myArray = {1, 2, 3};
var myObject = {
string: myString,
int: myInt
};
console.log(myString);
</script>
</body>
</html>
運算子
- 數值的 1 和字串的 “1” 在使用兩個等於
==時會顯示 true，因為沒有另外比較到他的型別 - 在使用三個等於
===時，才會比較到型別1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
<body>
<script>
</script>
</body>
</html>
Function 宣告
- 利用在
console.log中呼叫 functionadd()並傳值 1、2 進行運算，而後獲得運算結果的回傳值1
2
3
4
5
6
7
8
9
10
11
12
<html>
<body>
<script>
console.log(add(1, 2));
function add(x, y){
return x + y;
}
</script>
</body>
</html>
浮點數運算
- 可能會有精度浮點數問題
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<body>
<script>
</script>
</body>
</html> - 參考 JavaScript 浮點數運算 撰寫了利用 function 進行浮點數運算的方式，可以避免精度浮點數問題
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<html>
<body>
<script>
<!-- 4.31 -->
console.log(floatAdd(floatAdd(1.10, 1.21), 2.00));
<!-- 0.11 -->
console.log(floatSub(1.21, 1.10));
<!-- 9.63 -->
console.log(floatMul(3.21, 3));
<!-- 3 -->
console.log(floatDiv(0.3, 0.1));
function floatAdd(arg1, arg2){
var r1, r2, m;
try { r1 = arg1.toString().split(".")[1].length; } catch (e) { r1 = 0; }
try { r2 = arg2.toString().split(".")[1].length; } catch (e) { r2 = 0; }
m = Math.pow(10, Math.max(r1, r2));
return (floatMul(arg1, m) + floatMul(arg2, m)) / m;
}
function floatSub(arg1, arg2){
var r1, r2, m, n;
try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }
try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 }
m = Math.pow(10, Math.max(r1, r2));
n = (r1 >= r2) ? r1 : r2;
return ((arg1 * m - arg2 * m) / m).toFixed(n);
}
function floatMul(arg1, arg2){
var m = 0, s1 = arg1.toString(), s2 = arg2.toString();
try { m += s1.split(".")[1].length; } catch (e) { }
try { m += s2.split(".")[1].length; } catch (e) { }
return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);
}
function floatDiv(arg1, arg2){
var t1 = 0, t2 = 0, r1, r2;
try { t1 = arg1.toString().split(".")[1].length } catch (e) { }
try { t2 = arg2.toString().split(".")[1].length } catch (e) { }
with (Math)
{
r1 = Number(arg1.toString().replace(".", ""))
r2 = Number(arg2.toString().replace(".", ""))
return (r1 / r2) * pow(10, t2 - t1);
}
}
</script>
</body>
</html>
引入外部檔案
- 可以把 function 寫成獨立
.js檔案，用引入的方式使用 - 如果有其他要引用相同 function 的網頁都可以使用，只要寫一次就好
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<body>
<!-- 把剛剛的 function 寫在 math.js 裡 -->
<script src="math.js"></script>
<script>
</script>
</body>
</html>
FOR & IF
- 用法如下，和其他程式語言撰寫邏輯大致相仿
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<body>
<script>
for (var i = 0; i < 12; i++) {
console.log(i);
if (i === 11) {
console.log("end");
}
}
</script>
</body>
</html>
Switch
1 |
|
getElementBy
getElementById：透過 id 抓取元素getElementByTagName：透過 tag name 抓取元素1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<body>
<input type="text" id="myInput">
<p>This is p</p>
<p>This is also p</p>
<script>
</script>
</body>
</html>
Render & DOM Ready
- 渲染
- JavaScript 由上而下讀取，但若 input 宣告的比
<script>使用他還晚，則會產生錯誤 - DOM Ready
- 在
<body>中加入onload="<function>"，並把<script>中會比 input 被宣告還早使用他的 script 寫入這個 function 中DOM：文件物件模型 Document Object Model
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<body onload="showInfo()">
<script>
function showInfo() {
var myInput = document.getElementById("myInput");
myInput.value = "Hello";
var myP = document.getElementByTagName("p");
<!-- 修改 myP 中的文字 -->
myP[0].innerText = "That is p";
myP[1].innerText = "That is also p";
}
</script>
<input type="text" id="myInput">
<p>This is p</p>
<p>This is also p</p>
</body>
</html>
- 在