零、JS引入
外部引入
<script type="text/javascript" src="js/index.js"></script> //寫到body內的最後面
複製程式碼一、註釋
快捷鍵：ctrl+/ //單行註釋
快捷鍵：ctrl+shift+/ /*多行註釋*/
二、輸出
下面是三種不同的輸出方式：
var name = 'Petter'; //將字串Petter賦值給 變數name
1.控制檯輸出
console.log('Hello,world01'); //輸出字串 "Hello,world"
console.log(name); //輸出變數 "Petter"
console.log('Hello,' + name + '01!'); //輸出變數+字串 "Hello,Petter!"
2.頁面輸出
document.write('hello,world02'); //能夠在HTML頁面裡面輸出內容
3.提示框輸出
alert('hello,world03');
複製程式碼1.控制檯輸出
2.頁面輸出
3.提示框輸出
三、變數
1.原始變數宣告賦值用法（宣告與賦值分開寫）
var a; //宣告變數a，分配記憶體
a = 10; //為變數a賦值
console.log(a); //控制檯輸出為10
複製程式碼2.簡化變數宣告賦值用法（宣告與賦值一起寫）
var a = 10;
console.log(a);
複製程式碼3.通過typeof來檢視變數的資料型別
var a;
a = 10; // number
a = true; // boolean
a = 'Henrry Browne' // string
a = function(){}; // function
a = {age:26}; // object
console.log(a);
console.log(typeof a); //輸出語句
複製程式碼四、識別符號命名
- 識別符號首字母可以用 abc _ $ 來開頭，用駝峰命名法的英文單詞
- 不能用關鍵字與保留字命名變數
- 變數名對大小寫敏感 a 和 A 不是一個物種
五、關鍵字與保留字
- 關鍵字
JS正在使用的名稱，用途包括：系統變數名、JS內建方法函式名、已知宿主環境提供的API
| break | do | instanceof | typeof | if | else |
|---|---|---|---|---|---|
| case | var | new | finally | return | void |
| continue | for | switch | while | debugger | function |
| this | with | try | catch | throw | delete |
| default | in | implements | package | public | interface |
| private | static | let | protected | yield |
- 保留字
將來javascript可能會用的名稱。
| abstract | enum | int | short | boolean | export |
|---|---|---|---|---|---|
| byte | extends | long | super | native | synchronized |
| class | float | throws | const | goto | transient |
| volatile | double | import |
六、全域性變數與區域性變數
var a = "local var"; //a 在函式外部建立的 為全域性變數
function print(){
console.log(a); // a 為全域性變數，因為前面沒加var
}
------
function test(y) { // 引數y為區域性變數
var x = "global var" // x在函式內部建立 為區域性變數
}
console.log(x); //x為區域性變數
console.log(y); //y為區域性變數
----------
// 塊（block）
{
var x1 = "hello,world";
}
console.log(x1); // hello,world 結論：js（ES5）沒有塊級作用域
var n1 = "123"; // 宣告全域性變數
console.log(n1); //123
(function () {
var x2 = "Hi,boy";
console.log("自呼叫函式執行"); //自呼叫函式執行
console.log(n1); //123
})();
console.log(x2); x2為區域性變數，這裡無法訪問
複製程式碼-
全域性變數：函式外部定義的變數，其作用域（全域性作用域）範圍為整個檔案系統。
-
區域性變數：函式內部定義的變數/函式引數，其作用域範圍為函式內部。
-
函式作用域：作用域就是函式變數起作用的區域 。
七、運算子與表示式
1. 基本運算子
+：加法運算子，如a + b-：減法運算子，如a - b*：乘法運算子，如a * b/：除法運算子，如a / b%：模運算（取餘數），如a % b++：自增運算子（自身+1）--：自減運算子（自身-1）
var a = 'My name si:'; //字串相加
var b = 'laoYe';
console.log(a + b); //控制檯輸出：My name si:laoYe
複製程式碼var a = 10;
var x = ++a; // x = 11, a = 11
var a = 10;
var x = a++; // x = 10, a = 11
console.log(x);
複製程式碼
- 不管++在前，還是++在後，變數自身都會+1
- ++在前，先自增再賦值；++在後，先賦值在自增
2. 賦值運算子
var num = 10;
num = num + 10; //可以被簡寫為 num += 10;
console.log(num);
複製程式碼賦值運算子是為JavaScript中的變數賦值，即將該運算子右方計算出的值賦予左側的變數。
=：賦值運算子，如x = 10;，將10賦值給變數x+=：變數與值相加，如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
3. 關係運算子
關係運算子描述兩個變數的關係，其返回值型別為布林型別（boolean），即 true 和 false。
==：判斷兩個變數是否相等，如'Henrry Lee' == 'Henrry Lee'，返回true>：判斷等號左邊的變數是否大於等號右邊的變數，如20 > 10，返回true<：判斷等號左邊的變數是否小於等號右邊的變數，如20 < 10，返回false>=：判斷等號左邊的變數是否大於等於等號右邊的變數，如20 >= 10，返回true<=：判斷等號左邊的變數是否小於等於等號右邊的變數，如20 <= 10，返回false===：恆等於，要求不僅資料型別要一致，值也要一致，如1 === '1'，返回false!==：不恆等於，只要型別或值不一樣，結果為true，如1 !== '1'，返回true
4. 邏輯運算子
邏輯運算子是JavaScript用於判斷幾條語句成立情況的一種運算，該運算子的返回值型別為布林型別。
- 邏輯與：
&&，同時為真才為真，如(1 > 2) && (2 > 3)，返回false - 邏輯或：
||，同時為假才為假，如(1 > 2) || (2 > 3)，返回true - 邏輯非：
!，取反，如!(1 > 2)，返回true
5. 三元運算子
var isLogin = false;
isLogin ? console.log('已登入') : console.log('未登入');
-----
var a = 40, b = 30;
var max = a > b ? a : b;
console.log("max = " + max);
複製程式碼三元運算子：a ? b : c;
首先判斷表示式a的值（true false），如果為true，則執行語句b
如果為false，執行語句c。
八、基本資料型別
1. 數值型別(number)
“0”、正數、負數、浮點數（小數）
var a = 0;
var b = 1;
var c = -1;
var d = 1.1;
console.log(typeof a); //控制檯輸出型別：number
console.log(typeof b); //控制檯輸出型別：number
console.log(typeof c); //控制檯輸出型別：number
console.log(typeof d); //控制檯輸出型別：number
複製程式碼2. 字串型別(string)
放到 '' "" 單引號、雙引號裡面的就是字串型別 "Hi" 'hi'
var a = '0';
var b = '1';
var c = '-1';
var d = '1.1';
console.log(typeof a); //控制檯輸出型別：string
console.log(typeof b); //控制檯輸出型別：string
console.log(typeof c); //控制檯輸出型別：string
console.log(typeof d); //控制檯輸出型別：string
複製程式碼注意：該型別特點是，引號內的值，你輸入什麼就顯示什麼。
3. 布林型別(boolean)
true false
var a = true;
var b = false;
console.log(typeof a); //控制檯輸出型別：boolean
console.log(typeof b); //控制檯輸出型別：boolean
複製程式碼4. 物件型別(object)
陣列是物件、空值
null也是物件 {}, []
console.log(typeof []); // object
console.log(typeof {}); // object
複製程式碼5. 函式型別(function)
// 定義函式
function sum(a, b) {
return a + b;
}
// 呼叫函式
var result = sum(10, 20);
console.log(result); // 30
複製程式碼函式型別是JavaScript中最複雜的一個資料型別，但它在JavaScript中扮演中相當重要的作用，它也同是物件導向程式設計中一個非常核心的內容。函式的設計非常大程度地決定了一個網站或應用的效能。從程式設計角度來講，它直接影響到了程式碼的可複用性，程式碼量，可以維護性，可擴充套件性等因素。這個對於JavaScript的初學者來說也是最難掌握好的一個部分，就算一個已經工作了好幾年的Web前端開發工程師，在對函式的組織和優化上都會下不少功夫。