2021年3月-第03階段-前端基礎-JavaScript基礎語法-JavaScript基礎第01天

1 - 編程語言

1.1 編程

• 編程：
  就是讓計算機為解決某個問題而使用某種程式設計語言撰寫程式代碼，并最終得到結果的程序，
• 計算機程式：
  就是計算機所執行的一系列的指令集合，而程式全部都是用我們所掌握的語言來撰寫的，所以人們要控制計算機一定要通過計算機語言向計算機發出命令，

1.2 計算機語言

• 計算機語言指用于人與計算機之間通訊的語言，它是人與計算機之間傳遞資訊的媒介，

• 計算機語言的種類非常的多，總的來說可以分成機器語言，匯編語言和高級語言三大類，

• 實際上計算機最終所執行的都是 機器語言，它是由“0”和“1”組成的二進制數，二進制是計算機語言的基礎，

1.3 編程語言

編程語言： 可以通過類似于人類語言的“語言”來控制計算機，讓計算機為我們做事情，這樣的語言就叫做編程語言（Programming Language），編程語言是用來控制計算機的一系列指令，它有固定的格式和詞匯（不同編程語言的格式和詞匯不一樣），必須遵守，如今通用的編程語言有兩種形式：匯編語言和高級語言，

1.4 翻譯器

高級語言所編制的程式不能直接被計算機識別，必須經過轉換才能被執行，為此，我們需要一個翻譯器，翻譯器可以將我們所撰寫的源代碼轉換為機器語言，這也被稱為二進制化，

1.5 編程語言和標記語言區別

總結

1. 計算機可以幫助人類解決某些問題
2. 程式員利用編程語言撰寫程式發出指令控制計算機來實作這些任務
3. 編程語言有機器語言、匯編語言、高級語言
4. 高級語言需要一個翻譯器轉換為計算機識別的機器語言
5. 編程語言是主動的有很強的邏輯性

2 - 計算機基礎

2.1 計算機組成

2.2 資料存盤

1. 計算機內部使用二進制 0 和 1來表示資料，
2. 所有資料，包括檔案、圖片等最終都是以二進制資料（0 和 1）的形式存放在硬碟中的，
3. 所有程式，包括作業系統，本質都是各種資料，也以二進制資料的形式存放在硬碟中，平時我們所說的安裝軟體，其實就是把程式檔案復制到硬碟中，
4. 硬碟、記憶體都是保存的二進制資料，

2.3 資料存盤單位

大小關系：bit < byte < kb < GB < TB<.....

• 位(bit)： 1bit 可以保存一個 0 或者 1 （最小的存盤單位）

• 位元組(Byte)：1B = 8b

• 千位元組(KB)：1KB = 1024B

• 兆位元組(MB)：1MB = 1024KB

• 吉位元組(GB): 1GB = 1024MB

• 太位元組(TB): 1TB = 1024GB

2.4 程式運行

計算機運行軟體的程序：
1. 打開某個程式時，先從硬碟中把程式的代碼加載到記憶體中
2. CPU執行記憶體中的代碼
   注意：之所以要記憶體的一個重要原因，是因為 cpu運行太快了，如果只從硬碟中讀資料，會浪費cpu性能，所以，才使用存取速度更快的記憶體來保存運行時的資料，（記憶體是電，硬碟是機械）

3 - 初始JavaScript

3.1 JavaScript 是什么

• JavaScript 是世界上最流行的語言之一，是一種運行在客戶端的腳本語言 （Script 是腳本的意思）

• 腳本語言：不需要編譯，運行程序中由 js 解釋器( js 引擎）逐行來進行解釋并執行

• 現在也可以基于 Node.js 技術進行服務器端編程

3.2 JavaScript的作用

• 表單動態校驗（密碼強度檢測） （ JS 產生最初的目的 ）

• 網頁特效

• 服務端開發(Node.js)

• 桌面程式(Electron)

• App(Cordova)

• 控制硬體-物聯網(Ruff)

• 游戲開發(cocos2d-js)

3.3 HTML/CSS/JS 的關系

3.4 瀏覽器執行 JS 簡介

瀏覽器分成兩部分：渲染引擎和 JS 引擎

瀏覽器本身并不會執行JS代碼，而是通過內置 JavaScript 引擎(解釋器) 來執行 JS 代碼 ，JS 引擎執行代碼時逐行解釋每一句原始碼（轉換為機器語言），然后由計算機去執行，所以 JavaScript 語言歸為腳本語言，會逐行解釋執行，

3.5 JS 的組成

1.ECMAScript

ECMAScript 是由ECMA 國際（ 原歐洲計算機制造商協會）進行標準化的一門編程語言，這種語言在萬維網上應用廣泛，它往往被稱為 JavaScript或 JScript，但實際上后兩者是 ECMAScript 語言的實作和擴展，

ECMAScript：規定了JS的編程語法和基礎核心知識，是所有瀏覽器廠商共同遵守的一套JS語法工業標準，

更多參看MDN:MDN手冊

2.DOM——檔案物件模型

檔案物件模型（DocumentObject Model，簡稱DOM），是W3C組織推薦的處理可擴展標記語言的標準編程介面，通過 DOM 提供的介面可以對頁面上的各種元素進行操作（大小、位置、顏色等）

3.BOM——瀏覽器物件模型

瀏覽器物件模型(Browser Object Model，簡稱BOM) 是指瀏覽器物件模型，它提供了獨立于內容的、可以與瀏覽器視窗進行互動的物件結構，通過BOM可以操作瀏覽器視窗，比如彈出框、控制瀏覽器跳轉、獲取解析度等，

3.6 JS 初體驗

JS 有3種書寫位置，分別為行內、內嵌和外部，

1.行內式

<input type="button" value="https://www.cnblogs.com/minvenus/archive/2022/09/18/點我試試" onclick="alert('Hello World')" />

• 可以將單行或少量 JS 代碼寫在HTML標簽的事件屬性中（以 on 開頭的屬性），如：onclick

• 注意單雙引號的使用：在HTML中我們推薦使用雙引號, JS 中我們推薦使用單引號

• 可讀性差， 在html中撰寫JS大量代碼時，不方便閱讀；

• 引號易錯，引號多層嵌套匹配時，非常容易弄混；

• 特殊情況下使用

2.內嵌式

<script>
    alert('Hello  World~!');
</script>

• 可以將多行JS代碼寫到 script 標簽中

• 內嵌 JS 是學習時常用的方式

3.外部JS檔案

<script src="https://www.cnblogs.com/minvenus/archive/2022/09/18/my.js"></script>

• 利于HTML頁面代碼結構化，把大段 JS代碼獨立到 HTML 頁面之外，既美觀，也方便檔案級別的復用

• 參考外部 JS檔案的 script 標簽中間不可以寫代碼

• 適合于JS 代碼量比較大的情況

4 - JavaScript注釋

• flex子專案占的份數

• align-self控制子項自己在側軸的排列方式

• order屬性定義子項的排列順序（前后順序）

4.1 單行注釋

為了提高代碼的可讀性，JS與CSS一樣，也提供了注釋功能，
JS中的注釋主要有兩種，分別是 單行注釋 和 多行注釋，

單行注釋的注釋方式如下：

// 我是一行文字，不想被 JS引擎 執行，所以 注釋起來	

// 用來注釋單行文字（  快捷鍵   ctrl  +  /   ）

4.2 多行注釋

多行注釋的注釋方式如下：

/*
  獲取用戶年齡和姓名
  并通過提示框顯示出來
*/

/* */  用來注釋多行文字（ 默認快捷鍵  alt +  shift  + a ） 

快捷鍵修改為： ctrl + shift + /

vscode → 首選項按鈕 → 鍵盤快捷方式 → 查找 原來的快捷鍵 → 修改為新的快捷鍵 → 回車確認

5 - JavaScript輸入輸出陳述句

為了方便資訊的輸入輸出，JS中提供了一些輸入輸出陳述句，其常用的陳述句如下：

• 注意：alert() 主要用來顯示訊息給用戶，console.log() 用來給程式員自己看運行時的訊息，

6 - 變數的概念

白話：變數就是一個裝東西的盒子，

通俗：變數是用于存放資料的容器， 我們通過 變數名 獲取資料，甚至資料可以修改，

6.2 變數在記憶體中的存盤

本質：變數是程式在記憶體中申請的一塊用來存放資料的空間，類似我們酒店的房間，一個房間就可以看做是一個變數，

7 - 變數的使用

• 變數的宣告
• 變數的賦值

7.1 宣告變數

//  宣告變數  
var age; //  宣告一個 名稱為age 的變數  

• var 是一個 JS關鍵字，用來宣告變數( variable 變數的意思 )，使用該關鍵字宣告變數后，計算機會自動為變數分配記憶體空間，不需要程式員管
• age 是程式員定義的變數名，我們要通過變數名來訪問記憶體中分配的空間

7.2 賦值

age = 10; // 給 age  這個變數賦值為 10  

• = 用來把右邊的值賦給左邊的變數空間中 此處代表賦值的意思
• 變數值是程式員保存到變數空間里的值

7.3 變數的初始化

var age  = 18;  // 宣告變數同時賦值為 18
// 宣告一個變數并賦值， 我們稱之為變數的初始化，

7.4 變數語法擴展

• 更新變數
  一個變數被重新復賦值后，它原有的值就會被覆寫，變數值將以最后一次賦的值為準，

var age = 18;

age = 81;   // 最后的結果就是81因為18 被覆寫掉了 

• 同時宣告多個變數
  同時宣告多個變數時，只需要寫一個 var， 多個變數名之間使用英文逗號隔開，

var age = 10,  name = 'zs', sex = 2;

• 宣告變數特殊情況

7.5 變數命名規范

規則：

• 由字母(A-Za-z)、數字(0-9)、下劃線(_)、美元符號( $ )組成，如：usrAge, num01, _name

• 嚴格區分大小寫，var app; 和 var App; 是兩個變數

• 不能 以數字開頭， 18age 是錯誤的

• 不能 是關鍵字、保留字，例如：var、for、while

• 變數名必須有意義， MMD BBD nl → age

• 遵守駝峰命名法，首字母小寫，后面單詞的首字母需要大寫，myFirstName

• 推薦翻譯網站： 有道

8 - 資料型別

8.1 資料型別簡介

• 為什么需要資料型別

在計算機中，不同的資料所需占用的存盤空間是不同的，為了便于把資料分成所需記憶體大小不同的資料，充分利用存盤空間，于是定義了不同的資料型別，

簡單來說，資料型別就是資料的類別型號，比如姓名“張三”，年齡18，這些資料的型別是不一樣的，

• 變數的資料型別

變數是用來存盤值的所在處，它們有名字和資料型別，變數的資料型別決定了如何將代表這些值的位存盤到計算機的記憶體中，JavaScript 是一種弱型別或者說動態語言，這意味著不用提前宣告變數的型別，在程式運行程序中，型別會被自動確定：

var age = 10;        // 這是一個數字型
var areYouOk = '是的';   // 這是一個字串

在代碼運行時，變數的資料型別是由 JS引擎 根據 = 右邊變數值的資料型別來判斷 的，運行完畢之后， 變數就確定了資料型別，JavaScript 擁有動態型別，同時也意味著相同的變數可用作不同的型別：

var x = 6;           // x 為數字
var x = "Bill";      // x 為字串 

• 資料型別的分類
  JS 把資料型別分為兩類：
• 簡單資料型別 （Number,String,Boolean,Undefined,Null）
• 復雜資料型別 （object)

8.2 簡單資料型別

簡單資料型別（基本資料型別）

JavaScript 中的簡單資料型別及其說明如下：

• 數字型 Number
  JavaScript 數字型別既可以保存整數，也可以保存小數(浮點數），

var age = 21;       // 整數
var Age = 21.3747;  // 小數

1.數字型進制

最常見的進制有二進制、八進制、十進制、十六進制，

  // 1.八進制數字序列范圍：0~7
 var num1 = 07;   // 對應十進制的7
 var num2 = 019;  // 對應十進制的19
 var num3 = 08;   // 對應十進制的8
  // 2.十六進制數字序列范圍：0~9以及A~F
 var num = 0xA;   

現階段我們只需要記住，在JS中八進制前面加0，十六進制前面加 0x

2.數字型范圍

JavaScript中數值的最大和最小值

• 最大值：Number.MAX_VALUE，這個值為： 1.7976931348623157e+308

• 最小值：Number.MIN_VALUE，這個值為：5e-32

3.數字型三個特殊值

• Infinity ，代表無窮大，大于任何數值

• -Infinity ，代表無窮小，小于任何數值

• NaN ，Not a number，代表一個非數值

4.isNaN

用來判斷一個變數是否為非數字的型別，回傳 true 或者 false

     var usrAge = 21;
   var isOk = isNaN(userAge);
     console.log(isNum);          // false ，21 不是一個非數字
   var usrName = "andy";
     console.log(isNaN(userName));// true ，"andy"是一個非數字

因為 HTML 標簽里面的屬性使用的是雙引號，JS 這里我們更推薦使用單引號，

1.字串引號嵌套

JS 可以用單引號嵌套雙引號 ，或者用雙引號嵌套單引號 (外雙內單，外單內雙)

var strMsg = '我是"高帥富"程式猿';   // 可以用''包含""
var strMsg2 = "我是'高帥富'程式猿";  // 也可以用"" 包含''
//  常見錯誤
var badQuotes = 'What on earth?"; // 報錯，不能 單雙引號搭配

2.字串轉義符

類似HTML里面的特殊字符，字串中也有特殊字符，我們稱之為轉義符，

轉義符都是 \ 開頭的，常用的轉義符及其說明如下：

3.字串長度

字串是由若干字符組成的，這些字符的數量就是字串的長度，通過字串的 length 屬性可以獲取整個字串的長度，

var strMsg = "我是帥氣多金的程式猿！";
alert(strMsg.length); // 顯示 11

4.字串拼接

• 多個字串之間可以使用 + 進行拼接，其拼接方式為 字串 + 任何型別 = 拼接之后的新字串

• 拼接前會把與字串相加的任何型別轉成字串，再拼接成一個新的字串

//1.1 字串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 數值字串 "相加"
alert('100' + '100'); // 100100
//1.3 數值字串 + 數值
alert('11' + 12);     // 1112 

• + 號總結口訣：數值相加 ，字符相連

5.字串拼接加強

console.log('pink老師' + 18);        // 只要有字符就會相連 
var age = 18;
console.log('老師age歲啦');      // 這樣不行哦
console.log('老師' + age);         // 老師18
console.log('老師' + age + '歲啦'); // 老師18歲啦

• 經常會將字串和變數來拼接，變數可以很方便地修改里面的值

• 變數是不能添加引號的，因為加引號的變數會變成字串

• 如果變數兩側都有字串拼接，口訣“引引加加 ”，刪掉數字，變數寫加中間

布爾型Boolean

布爾型別有兩個值：true 和 false ，其中 true 表示真（對），而 false 表示假（錯），

布爾型和數字型相加的時候， true 的值為 1 ，false 的值為 0，

console.log(true + 1);  // 2
console.log(false + 1); // 1

Undefined和 Null

一個宣告后沒有被賦值的變數會有一個默認值undefined ( 如果進行相連或者相加時，注意結果）

var variable;
console.log(variable);           // undefined
console.log('你好' + variable);  // 你好undefined
console.log(11 + variable);     // NaN
console.log(true + variable);   //  NaN

一個宣告變數給 null 值，里面存的值為空（學習物件時，我們繼續研究null)

var vari = null;
console.log('你好' + vari);  // 你好null
console.log(11 + vari);     // 11
console.log(true + vari);   //  1

8.3 獲取變數資料型別

• 獲取檢測變數的資料型別

  typeof 可用來獲取檢測變數的資料型別

var num = 18;
console.log(typeof num) // 結果 number  

不同型別的回傳值

• 字面量
  字面量是在源代碼中一個固定值的表示法，通俗來說，就是字面量表示如何表達這個值，

• 數字字面量：8, 9, 10

• 字串字面量：'黑馬程式員', "大前端"

• 布爾字面量：true，false

8.4 資料型別轉換

什么是資料型別轉換？

使用表單、prompt 獲取過來的資料默認是字串型別的，此時就不能直接簡單的進行加法運算，而需要轉換變數的資料型別，通俗來說，就是把一種資料型別的變數轉換成另一種資料型別，通常會實作3種方式的轉換：

轉換為字串型別
轉換為數字型
轉換為布爾型

轉換為字串

• toString() 和 String() 使用方式不一樣，

• 三種轉換方式，更多第三種加號拼接字串轉換方式， 這一種方式也稱之為隱式轉換，

轉換為數字型（重點）

• 注意 parseInt 和 parseFloat 單詞的大小寫，這2個是重點

• 隱式轉換是我們在進行算數運算的時候，JS 自動轉換了資料型別

轉換為布爾型

• 代表空、否定的值會被轉換為 false ，如 ''、0、NaN、null、undefined

• 其余值都會被轉換為 true

console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true

9 - 解釋型語言和編譯型語言

計算機不能直接理解任何除機器語言以外的語言，所以必須要把程式員所寫的程式語言翻譯成機器語言才能執行程式，程式語言翻譯成機器語言的工具，被稱為翻譯器，

• 翻譯器翻譯的方式有兩種：一個是編譯，另外一個是解釋，兩種方式之間的區別在于翻譯的時間點不同

• 編譯器是在代碼執行之前進行編譯，生成中間代碼檔案

• 解釋器是在運行時進行及時解釋，并立即執行(當編譯器以解釋方式運行的時候，也稱之為解釋器)

9.2 執行程序

類似于請客吃飯：

	編譯語言：首先把所有菜做好，才能上桌吃飯

	解釋語言：好比吃火鍋，邊吃邊涮，同時進行

10 - 關鍵字和保留字

10.1 識別符號

標識(zhi)符：就是指開發人員為變數、屬性、函式、引數取的名字，

識別符號不能是關鍵字或保留字，

10.2 關鍵字

關鍵字：是指 JS本身已經使用了的字，不能再用它們充當變數名、方法名，

包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等，

10.3 保留字

保留字：實際上就是預留的“關鍵字”，意思是現在雖然還不是關鍵字，但是未來可能會成為關鍵字，同樣不能使用它們當變數名或方法名，

包括：boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等，

注意：如果將保留字用作變數名或函式名，那么除非將來的瀏覽器實作了該保留字，否則很可能收不到任何錯誤訊息，當瀏覽器將其實作后，該單詞將被看做關鍵字，如此將出現關鍵字錯誤，

拓展閱讀@

掃一掃下面的二維碼，關注我們，獲取更多精彩活動資訊，有好禮相送哦~

【騰訊云】618云上GO！云服務器限時秒殺，1核2G首年95元！

【華為云】特惠專區，多款產品限時特價！

【阿里云】上新必買搶先知，勁爆優惠不錯過！

【七牛云】優惠專區，多款云產品限時搶購！

【又拍云】免費CDN專區，10G免費大放送！

【知識星球】一個資料分享的站點，各種學習資料，隨時分享

微信贊助    微信打賞    支付寶打賞

免責宣告：本文所有內容均為互聯網上收集而來，僅供學習交流，整理文章為傳播相關技術，如有侵權，請聯系洗掉

標籤：其他

上一篇：從SAP ECC升級到SAP S4HANA, 幾個Key Points

下一篇：Html飛機大戰(十五): 上線