JavaScript 基礎回顧 · 地表最強JS文檔

[toc] # 每日英語 1. `unexpected` 未符合期望(關鍵字沒寫對的時候) 2. `document` 文檔(有時候縮寫為doc/docs) 3. `print` 打印(python print "hello world" ) 4. `identifier` 標識符(解釋器碰見不認識的代碼時, 報錯) 5. `model` 模型(DOM) 6. `current` 當前(currentStyle 當前樣式) 7. `computed` 計算(getComputedStyle 計算當前樣式) 8. `bug` 錯誤(本意臭蟲) 9. `debug` 排錯/調試(高級編輯器,ide必備功能) # 重點再講解 ## 什么是解釋性語言, 什么是編譯性語言? * 高級語言：人類可以看懂的語言（人類可以看懂，電腦看不懂） * 機器語言：電腦可以看懂的語言（人類看不懂，電腦可以看懂） * 解釋性語言的翻譯時機：讀取一句，解釋一句，運行一句 > JIT（just in time）：即時性的 * 解釋器（翻譯角色）js解釋器也叫js引擎 * 編譯性語言的翻譯時機：先整體翻譯，轉成機器碼，打包成操作系統可以識別的格式（exe） * 編譯器（翻譯角色） ## 什么是弱類型語言, 什么是強類型語言? * 弱類型語言：變量的數據類型改變，不會報錯，沒有問題（根據變量的值，來確定變量類型） * 強類型語言：變量的數據類型改變，會報錯（變量類型是提前聲明的） * 最主要的區別：數據類型是否可變 ```javascript // 有一個name是China； var name = "China"; // 初始化語句，聲明一個變量name，賦值“China” name = "USA"; // 強類型，弱類型都可以 name = 123; // 弱類型沒問題，強類型會報錯 ``` ## JavaScript由哪幾部分組成? ### ECMAScript #### ECMAScript是什么? * javascript 可以看成英語 * ECMAScript 標準, 語法 ```javascript // 有一個name是China； var name = "China"; // 初始化語句，聲明一個變量name，賦值“China” name = "USA"; // 強類型，弱類型都可以 name = 123; // 弱類型沒問題，強類型會報錯 ``` * 為什么有標準, 就會存在兼容性問題? * 不同瀏覽器, javascript解釋器不同, 對標準的執行嚴格程度(支持率)不同 * 解決兼容性, 只能增加代碼量, 適配不同瀏覽器 * 越新的標準, 越不容易被兼容, 不要喜新厭舊, 穩定是第一位的. ## DOM是什么? ### DOM > document object model(文檔對象模型) * javascript最主要做兩件事 1. 找對象 2. 操作對象 * 兼容性問題(不同瀏覽器, DOM支持的屬性和方法不一樣) * 兼容性導致代碼量上升 ![](https://box.kancloud.cn/5708c3107981623ef2f2379c46b0fb69_425x215.png) 代碼必須符合規范才能執行. 初級bug ```javascript var name1 = "Hello"; // 正常初始化 console.log(name1); // hello def name2 = "hello"; // 報錯, 不認識def console.log(name2); // Unexpected identifier ``` ## BOM是什么? ### BOM #### 什么是BOM? > browser object model #### 兼容性問題完全不用擔心兼容性問題, 因為完全不兼容不建議使用BOM, 完全解決兼容性問題 # JavaScript的有哪三種引用方式? ## 行內樣式 ```html <!DOCTYPE html> <html lang="en"> <head> ??<meta charset="UTF-8"> ??<meta name="viewport" content="width=device-width, initial-scale=1.0"> ??<meta http-equiv="X-UA-Compatible" content="ie=edge"> ??<title>Document</title> </head> <body> ??<input type="button" value="快點我, 快!!!" onclick="javascript:alert('good!!!')"> </body> </html> ``` ## 嵌入式 ```html <!DOCTYPE html> <html lang="en"> <head> ??<meta charset="UTF-8"> ??<meta name="viewport" content="width=device-width, initial-scale=1.0"> ??<meta http-equiv="X-UA-Compatible" content="ie=edge"> ??<title>Document</title> ??<script> ????function clickMe(){ ??????alert('hello world'); ???} ??</script> </head> <body> ??<input type="button" value="快點我, 快!!!" onclick="clickMe()"> </body> </html> ``` ## 引入式 ```javascript <!DOCTYPE html> <html lang="en"> <head> ??<meta charset="UTF-8"> ??<meta name="viewport" content="width=device-width, initial-scale=1.0"> ??<meta http-equiv="X-UA-Compatible" content="ie=edge"> ??<title>Document</title> ??<script src="hello.js"></script> </head> <body> ??<input type="button" value="快點我, 快!!!" onclick="clickMe()"> </body> </html> ``` > hello.js ```javascript function clickMe(){ ??alert('click me, please!!!!'); } ``` ## 什么是變量? > 值可以變化的量 ### 如何初始化變量? > 變量的聲明+變量的賦值 = 變量的初始化 > 注意: name 是瀏覽器的保留字 , 不建議在 js 中使用 ```javascript var name = "China"; // 變量初始化語句 var name1; // 變量的聲明語句 name1 = "USA"; // 變量的賦值語句 ``` ### 變量命名 #### 命名注意事項 1. 保留字不能用, name 不建議使用, 也是保留字 ## 變量命名 ### 命名注意事項 1. 保留字不能用, name 不建議使用, 也是保留字 1. 字母, 數字, 下劃線,美元符號來組成, 但是數字不能開頭 ![](https://box.kancloud.cn/2bc9e2c234a8f4942d9ce6bfd504461c_637x138.png) 1. 可以使用中文作為變量名嗎(可以) ```javascript var 帥哥 = "許竣皓"; console.log(帥哥); ``` ## 命名方式 1. 推薦駝峰命名(js大小寫敏感) ```javascript var userPassword; // 用戶密碼, 小駝峰 var UserPassword; // 用戶密碼, 大駝峰 ``` ## md5加密 > MD5是一種加密算法他只是加密對象的簡單描述身份證和本人的關系用來驗證加密對象與文件大小無關理論上, md5無法解密可支持, 一次md5的簡單內容, 進行解密可以多次md5, 修改加密后的字符串來提高安全性 ## md5驗證用戶信息原理 1. 接受用戶信息, 手機號, 密碼明文 2. 如果手機號不存在, 提示用戶不存在 3. 通過手機號, 查詢數據庫, 獲取對應的密碼密文 4. 使用同樣的加密方式, 加密用戶的密碼明文, 得到當前密文 5. 比對數據庫中的密文和當前密文 ## 如何一次初始化多個變量? ```javascript var a = 1, b = 2, c = 3, d = 4; // 一次聲明多個不同變量,逗號分開 var a = b = c = d = 4; // 一次聲明多個相同值的變量 ``` ## 如何顯示變量值? 1. 控制臺 console.log(變量) ```javascript var a = 1, b = 2, c = 3, d = 4; // 一次聲明多個不同變量,逗號分開 console.log(a); console.log(b); console.log(c); console.log(d); ``` 1. 彈窗 alert(變量) ```html <!DOCTYPE html> <html lang="en"> <head> ??<meta charset="UTF-8"> ??<meta name="viewport" content="width=device-width, initial-scale=1.0"> ??<meta http-equiv="X-UA-Compatible" content="ie=edge"> ??<title>Document</title> </head> <body> ??<script> ????var userName = "China"; ????alert(userName); // 彈出變量的值 ??</script> </body> </html> ``` 1. 控制臺中實時查看 ```javascript var userName = "China"; // undefined userName; // 直接返回結果 ``` ## 什么是數據類型? > 數據的分類 ## js有哪些數據類型? 1. number 2. string 3. boolean 4. undefined&null 5. object 6. array ## 字符串和引號的關系 ```javascript var userName = "I love China !!!"; // 沒有問題 var userName = 'I love China !!!'; // 沒有問題 var userName = "I love China !!!'; // 有問題, 要成對出現 var userName = 'I love' China '!!!'; // 括號要包裹完全 var userName = 'I love "China" !!!'; // 單引號套雙引號沒有問題 var userName = "I love 'China' !!!"; // 雙引號套單引號沒有問題 // 轉義: 把標點符號, 變成了字符串 var userName = "I love \"China\" !!!"; // 雙引號套雙引號, 需要轉義 console.log(userName); ``` ## 如何顯示變量類型 > typeof 用來顯示變量類型 ```javascript var userName = "I love China !!!"; // 沒有問題 console.log(typeof userName); // string console.log(typeof 1.33); // number console.log(typeof []); // 數組, 是一個特殊的對象, 所以是object console.log(typeof {}); // 是一個對象, 所以是object ``` ## js的注釋 ### 什么是注釋? > 注釋就是對代碼的解釋, 運行時直接跳過 ### 注釋方式有哪些? > `//` , 單行注釋, 一般寫在行尾, 解釋當前行 > ![](https://box.kancloud.cn/83b38d596114852de9ae2c5e53255a4b_668x188.png) > /**/ 多行注釋 , 可以單行可以多行, 單獨寫一行, 用來解釋多行代碼 > ![](https://box.kancloud.cn/eb16cf59600c31dfff872caeab578f46_671x193.png) > 多行注釋也可以對文件進行注釋 > ![](https://box.kancloud.cn/52f2bc8b8a05c9c638ad951c733cb12a_675x301.png) ### 注釋的作用? 1. 解釋代碼，讓代碼易于閱讀 2. 先注釋，方便修改 3. 方便排錯（把最有可能出現問題的地方，注釋掉，如果其他沒有問題，則可以定位錯誤） ### 排錯有幾種方式 1. 瀏覽器的控制臺 2. 編輯器和ide的代碼提示，代碼審查 3. debug ## 什么是語句? > 一行代碼就是一個語句, 用分號結束 ```javascript var a = 1; var b = 2; ``` > 多行寫一行, 需要加分號 ```javascript var a ?= 1; var b = 2; ``` ## 什么是代碼壓縮? 1. 壓縮文件大小, 加快下載速度 1. 把空白行, 換行干掉, 隱藏變量名