JavaScript基礎
阿新 • • 發佈：2020-08-04
JavaScript基礎
目錄
1. 什麼是JavaScript
1. 概述
JavaScript是一門世界上最流行的指令碼語言
Java和JavaScript無關
一個合格的後端人員，必須要精通JavaScript
2. 歷史
https://blog.csdn.net/kese7952/article/details/79357868
ECMAScript可以理解為JavaScript的一個標準
最新版本已經到es6版本
但是大部分瀏覽器還只停留在支援es5程式碼上
開發環境和線上環境的版本不一致
2. 快速入門
1. 引入JavaScript
1. 內部標籤
<script>
//.......
</script>
2.外部引入
abc.js
//.....
test.html
<script src="abc.js"></script>
測試程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <!–script標籤內，寫JavaScript程式碼–>--> <!-- <script>--> <!-- alert('hello,world');--> <!-- </script>--> <!--外部引入--> <!--注意：script必須成對出現--> <script src="js/qj.js"></script> <!--不用顯示type,預設使用JavaScript--> <script type="text/javascript"></script> </head> <body> <!--這裡也可以存放JS程式碼--> </body> </html>
2. 基本語法入門
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--JavaScript嚴格區分大小寫--> <script> //1.定義變數 變數型別 變數名 = 變數值 var score = 1; // var name = "Wang"; //2.條件控制 if (score > 60 && score < 70) { alert("60~70"); } else if(score > 70 && score < 80){ alert("70~80"); }else{ alert("other"); } // console.log(score); 在瀏覽器的控制檯列印變數，相當於sout </script> </head> <body> </body> </html>
3. 資料型別
數值，文字，圖形，音訊，視訊......
1. number
js不區分小數和整數，都用number定義
123 //整數123
123.1 //浮點數123.1
1.123e3 //科學記數法
-99 //負數
NaN //not a number
Infinity //表示無限大
2. 字串
"abc" 'abc'
3 .布林值
true false
4. 邏輯運算
&& 兩個都為真，結果為真
|| 一個為真，結果為真
! 非
5. 比較運算子（重要）
=
== 等於（型別不一樣，值一樣，也會判斷為true）
=== 絕對等於（型別一樣，值一樣，結果為true）
這是一個JS的缺陷，堅持不要使用==比較
須知：
- NaN === NaN，結果為false，NaN與所有的數值都不相等，包括自己
- 只能通過isNaN( )判斷其是否為NaN
6. 浮點數問題
console.log((1/3) === (1-2/3)); //結果為false，精度會被截斷
儘量避免使用浮點數進行運算，存在精度問題
Java中使用BigDecimal類進行判斷
JS中如下
Math.abs(1 / 3 - (1 - (2 / 3))) < 0.0000001
7. null和undefined
- null 空
- undefined 未定義
8. 陣列
Java的陣列必須是相同型別的物件，JS不需要這樣
//保證程式碼的可讀性，儘量使用第一種方法定義陣列[]
var arr = [1, 2, 3, 4, "hello", null, true];
new Array(1, 12, 3, "hello");
取陣列下標：如果越界了，就會undefined
9. 物件
物件是大括號，陣列是中括號
每個屬性之間使用逗號隔開，最後一個不用加逗號
var person = {
name: "wang",
age: 3,
tags: ['js', 'java', 'web', '...']
}
取物件的值
var name = person.name;
var age = person.age;
var tags = person.tags;
10. 變數
var
4. 嚴格檢查模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
前提:IDEA 需要設定支援ES6語法
'use strict'; 嚴格檢查模式，預防JavaScript的隨意性導致產生一些問題
必須寫在JavaScript的第一行
區域性變數建議都是用let去定義
-->
<script>
'use strict';
// 區域性變數
let i = 1; // ES6支援
</script>
</head>
<body>
</body>
</html>