1. 編程語言
1.1 編程：
- 就是讓計算機為解決某個問題而使用某種程序設計語言編寫程序代碼，并最終得到結果的過程。
1.2 計算機程序：
- 就是計算機所執行的一系列的指令集合，而程序全部都是用我們所掌握的語言來編寫的，所以人們要控制計算機一定要通過計算機語言向計算機發出命令。
1.3 計算機語言
計算機語言指用于人與計算機之間通訊的語言，它是人與計算機之間傳遞信息的媒介。
計算機語言的種類非常的多，總的來說可以分成機器語言，匯編語言和高級語言三大類。
-
實際上計算機最終所執行的都是 機器語言，它是由
“0”和“1”組成的二進制數，二進制是計算機語言的基礎。
機器語言
1.4 編程語言
編程語言：
可以通過類似于人類語言的“語言”來控制計算機，讓計算機為我們做事情，這樣的語言就叫做編程語言
（Programming Language）。編程語言是用來控制計算機的一系列指令，它有固定的格式和詞匯（不同編程
語言的格式和詞匯不一樣），必須遵守。如今通用的編程語言有兩種形式：匯編語言和高級語言。
| 語 言 類 型 | 說明 |
|---|---|
| 匯編語言 | 匯編語言和機器語言實質是相同的，都是直接對硬件操作，只不過指令采用了英文縮寫的標識符，容易識別和記憶。 |
| 高級語言 | 高級語言主要是相對于低級語言而言，它并不是特指某一種具體的語言，而是包括了很多編程語言，常用的有C 語言、C++、Java、C#、Python、PHP、JavaScript、Go語言、Objective-C、Swift 等。 |
1.5 翻譯器
高級語言所編制的程序不能直接被計算機識別，必須經過轉換才能被執行，為此，我們需要一個翻譯
翻譯器可以將我們所編寫的源代碼轉換為機器語言，這也被稱為二進制化。
1.6 編程語言和標記語言區別
| 語言 | 說明 |
|---|---|
| 編程語言 | 編程語言有很強的邏輯和行為能力。在編程語言里, 你會看到很多if else 、for 、while等具有邏輯性和行為能力的指令，這是主動的。 |
| 標記語言 | 標記語言（html）不用于向計算機發出指令，常用于格式化和鏈接。標記語言的存在是用來被讀取的, 他是被動的。 |
1.7 總結
計算機可以幫助人類解決某些問題。
程序員利用編程語言編寫程序發出指令控制計算機來實現這些任務。
編程語言有機器語言、匯編語言、高級語言。
高級語言需要一個翻譯器轉換為計算機識別的機器語言。
編程語言是主動的有很強的邏輯性。
2. 計算機基礎
2.1 計算機組成
2.2 數據存儲
計算機內部使用二進制 0 和 1來表示數據。
所有數據，包括文件、圖片等最終都是以二進制數據（0 和 1）的形式存放在硬盤中的。
所有程序，包括操作系統，本質都是各種數據，也以二進制數據的形式存放在硬盤中。平時我們所說的安裝軟件，其實就是把程序文件復制到硬盤中。
硬盤、內存都是保存的二進制數據。
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 語言歸為腳本語言，會逐
行解釋執行。
-
JS的V8引擎。V8在運行之前將JavaScript編譯成了機器代碼，而非字節碼或是解釋執行它，以此提升性能。更進一步，使用了如內聯緩存（inline caching）等方法來提高性能。有了這些功能，JavaScript程序與V8引擎的速度媲美二進制編譯。
3.5 JS 的組成
3.5.1 ECMAScript
-
ECMAScript是由ECMA國際（ 原歐洲計算機制造商協會）進行標準化的一門編程語言，這種語言在萬維網上應用廣泛，它往往被稱為JavaScript或JScript，但實際上后兩者是ECMAScript語言的實現和擴展。
-
ECMAScript：規定了JS的編程語法和基礎核心知識，是所有瀏覽器廠商共同遵守的一套JS語法工業標準。
3.5.2 DOM - 文檔對象模型
-
文檔對象模型（
DocumentObject Model，簡稱DOM） ，是W3C組織推薦的處理可擴展標記語言的標準編程接口。通過 DOM 提供的接口可以對頁面上的各種元素進行操作（大小、位置、顏色等）。
3.5.3 BOM-瀏覽器對象模型
-
瀏覽器對象模型(
Browser Object Model，簡稱BOM) 是指瀏覽器對象模型，它提供了獨立于內容的、可以與瀏覽器窗口進行互動的對象結構。通過BOM可以操作瀏覽器窗口，比如彈出框、控制瀏覽器跳轉、獲取分辨率等。
3.6 JS 初體驗
JS 有3種書寫位置，分別為行內、內嵌和外部。
3.6.1 行內式
<input type="button" value="點我試試" onclick="alert('Hello World')" />
可以將單行或少量
JS代碼寫在HTML標簽的事件屬性中（以on開頭的屬性），如：onclick。注意單雙引號的使用：在
HTML中我們推薦使用雙引號,JS中我們推薦使用單引號。可讀性差， 在
html中編寫JS大量代碼時，不方便閱讀。引號易錯，引號多層嵌套匹配時，非常容易弄混。
特殊情況下使用。
3.6.2 內嵌式
<script>
alert('Hello World~!');
</script>
可以將多行JS代碼寫到 script 標簽中。
內嵌 JS 是學習時常用的方式。
3.6.3 外部 JS 文件
<script src="my.js"></script>
- 利于HTML頁面代碼結構化，把大段 JS代碼獨立到 HTML 頁面之外，既美觀，也方便文件級別的復用。
2.引用外部 JS文件的 script 標簽中間不可以寫代碼。
- 適合于JS 代碼量比較大的情況。
4. JavaScript 輸入輸出語句
- 為了方便信息的輸入輸出，
JS中提供了一些輸入輸出語句，其常用的語句如下：
| 方法 | 說明 | 歸屬 |
|---|---|---|
| alert(msg) | 瀏覽器彈出警示框 | 瀏覽器 |
| console.log(msg) | 瀏覽器控制臺打印輸出信息 | 瀏覽器 |
| prompt(info) | 瀏覽器彈出輸入框，用戶可以輸入 | 瀏覽器 |
- 注意：
alert()主要用來顯示消息給用戶，console.log()用來給程序員自己看運行時的消息。
5. 變量
5.1 什么是變量？
白話：變量就是一個裝東西的盒子。
通俗：變量是用于存放數據的容器。 我們通過 變量名 獲取數據，甚至數據可以修改。
5.2 變量在內存中的存儲
- 本質：變量是程序在內存中申請的一塊用來存放數據的空間。類似我們酒店的房間，一個房間就可以看做是一個變量。
5.3 變量命名規范
由字母(A-Za-z)、數字(0-9)、下劃線(_)、美元符號( $ )組成，如：
usrAge, num01,_name。嚴格區分大小寫。
var app; 和var App; 是兩個變量。不能 以數字開頭。
18age是錯誤的。不能 是關鍵字、保留字。例如：
var、for、while。變量名必須有意義。
MMDBBDnl→age。遵守駝峰命名法。首字母小寫，后面單詞的首字母需要大寫。
myFirstName。
5.4 變量的使用
變量的聲明 。
變量的賦值 。
5.4.1 聲明變量
// 聲明變量
var age; // 聲明一個 名稱為age 的變量
var是一個JS關鍵字，用來聲明變量(variable變量的意思 )。使用該關鍵字聲明變量后，計算機會自動為變量分配內存空間，不需要程序員管。age是程序員定義的變量名，我們要通過變量名來訪問內存中分配的空間。
5.4.2 賦值
age = 10; // 給 age 這個變量賦值為 10
=用來把右邊的值賦給左邊的變量空間中 此處代表賦值的意思。變量值是程序員保存到變量空間里的值。
5.4.3 變量的初始化
var age = 18; // 聲明變量同時賦值為 18
// 聲明一個變量并賦值， 我們稱之為變量的初始化。
5.4.4 變量語法擴展
- 更新變量 ：一個變量被重新復賦值后，它原有的值就會被覆蓋，變量值將以最后一次賦的值為準。
var age = 18;
age = 81; // 最后的結果就是81因為18 被覆蓋掉了
- 同時聲明多個變量：同時聲明多個變量時，只需要寫一個 var， 多個變量名之間使用英文逗號隔開。
var age = 10, name = 'zs', sex = 2;
- 聲明變量特殊情況：
| 情況 | 說明 | 結果 |
|---|---|---|
var age ; console.log (age);
|
只聲明 不賦值 | undefined |
console.log(age) |
不聲明 不賦值 直接使用 | 報錯 |
age = 10; console.log (age); |
不聲明 只賦值 | 10 |
6. 數據類型
6.1 數據類型簡介
6.1.1 為什么需要數據類型
在計算機中，不同的數據所需占用的存儲空間是不同的，為了便于把數據分成所需內存大小不同的數據，充分利用存儲空間，于是定義了不同的數據類型。
簡單來說，數據類型就是數據的類別型號。比如姓名“張三”，年齡18，這些數據的類型是不一樣的。
6.1.2 變量的數據類型
- 變量是用來存儲值的所在處，它們有名字和數據類型。變量的數據類型決定了如何將代表這些值的位存儲到計算機的內存中。
JavaScript是一種弱類型或者說動態語言。這意味著不用提前聲明變量的類型，在程序運行過程中，類型會被自動確定。
var age = 10; // 這是一個數字型
var areYouOk = '是的'; // 這是一個字符串
- 在代碼運行時，變量的數據類型是由 JS引擎 根據 = 右邊變量值的數據類型來判斷 的，運行完畢之后， 變量就確定了數據類型。JavaScript 擁有動態類型，同時也意味著相同的變量可用作不同的類型：
var x = 6; // x 為數字
var x = "Bill"; // x 為字符串
6.2 數據類型的分類
- 簡單數據類型 和 復雜數據類型；
6.2.1 簡單數據類型 （Number ,String , Boolean ,Undefined , Null ）
-
JavaScript中的簡單數據類型及其說明如下：
JavaScript中的簡單數據類型
數字型 Number : JavaScript 數字類型既可以保存整數，也可以保存小數(浮點數）。
var age = 21; // 整數
var Age = 21.3747; // 小數
- 數字型進制 ：最常見的進制有二進制、八進制、十進制、十六進制。
// 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。數字型范圍：
JavaScript中數值的最大和最小值
最大值：
Number.MAX_VALUE，這個值為：1.7976931348623157e+308
最小值：Number.MIN_VALUE，這個值為：5e-32
- 數字型三個特殊值:
Infinity，代表無窮大，大于任何數值。Infinity，代表無窮小，小于任何數值。NaN ，Not a number，代表一個非數值。
-
isNaN。
- 用來判斷一個變量是否為非數字的類型，返回
true或者false。
<script>
// isNaN() 這個方法是用來判斷非數字 ,并且返回一個值
console.log(isNaN(2)); // 是非數字嗎? false
console.log(isNaN('xxx')); // 是非數字嗎? true
</script>
字符串型 String 字符串型可以是引號中的任意文本，其語法為 雙引號 "" 和 單引號''。
var strMsg = "我愛北京天安門~"; // 使用雙引號表示字符串
var strMsg2 = '我愛吃豬蹄~'; // 使用單引號表示字符串
// 常見錯誤
var strMsg3 = 我愛大肘子; // 報錯，沒使用引號，會被認為是js代碼，但js沒有這些語法
因為
HTML標簽里面的屬性使用的是雙引號，JS這里我們更推薦使用單引號。字符串引號嵌套: JS 可以用單引號嵌套雙引號 ，或者用雙引號嵌套單引號 (外雙內單，外單內雙)
字符串轉義符,類似HTML里面的特殊字符，字符串中也有特殊字符，我們稱之為轉義符。轉義符都是 \ 開頭的，常用的轉義符及其說明如下：
| 轉義符 | 解釋說明 |
|---|---|
| \n | 換行符，n 是 newline 的意思 |
| \ \ | 斜杠 \ |
| ' | ' 單引號 |
| " | ”雙引號 |
| \t | tab 縮進 |
| \b | 空格 ，b 是 blank 的意思 |
- 字符串長度:字符串是由若干字符組成的，這些字符的數量就是字符串的長度。通過字符串的
length屬性可以獲取整個字符串的長度。
<script>
var str = '12 34 56 78 9';
console.log(str.length);
</script>
- 字符串拼接: 多個字符串之間可以使用 + 進行拼接，其拼接方式為 字符串 + 任何類型 = 拼接之后的新字符串，拼接前會把與字符串相加的任何類型轉成字符串，再拼接成一個新的字符串。
//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 數值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 數值字符串 + 數值
alert('11' + 12); // 1112
- + 號總結口訣：數值相加 ，字符相連。
- 字符串拼接加強
console.log('pink老師' + 18); // 只要有字符就會相連
var age = 18;
console.log('pink老師age歲啦'); // 這樣不行哦
console.log('pink老師' + age); // pink老師18
console.log('pink老師' + age + '歲啦'); // pink老師18歲啦
- 經常會將字符串和變量來拼接，變量可以很方便地修改里面的值
- 變量是不能添加引號的，因為加引號的變量會變成字符串
- 如果變量兩側都有字符串拼接，口訣“引引加加 ”，刪掉數字，變量寫加中間
布爾型 Boolean
布爾類型有兩個值：
true和false，其中true表示真（對），而false表示假（錯）。布爾型和數字型相加的時候，
true的值為1，false 的值為0。
console.log(true + 1); // 2
console.log(false + 1); // 1
Undefined 和 Null
- 一個聲明后沒有被賦值的變量會有一個默認值
undefined( 如果進行相連或者相加時，注意結果）
ar 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
6.2.2 復雜數據類型 （ object )
6.2.3 簡單數據類型 Boolean
1.Boolean類型true 為 1 false 為0；
<script>
// Boolean 類型是 true = 1 和 false = 0
var b = true; // 1
var f = false; // 0
console.log(b + 1); // 2
console.log(f + 1); // 1
</script>
6.2.4 簡單數據類型Undefine
如果一個變量聲明后未給值，就是
Undefined。獲取直接聲明一個變量 ， 賦值為
Undefined。Undefinde和 數字相加最后的結果是NaN
6.2.5 簡單數據類型 NULL。
<script>
var a;
console.log(a); // 只聲明未賦值，輸出是 undefined
// 字符串和 undefined 相加
console.log('str' + a); // strundefine
// 數字和 undefined 相加
console.log(11 + a); // NaN
// 一個聲明的變量給 null 值里面是一個空值
var vari = null;
// 字符串和 null 相加
console.log('str' + vari);
// 數字和null相加
console.log(11 + vari);
// Boolean和null相加
console.log(vari + true);
</script>
6.3 獲取變量數據類型
- 獲取檢測變量的數據類型。typeof 可用來獲取檢測變量的數據類型。
<script>
var num = 10;
var str = 'string';
var flag = true;
var unVar = undefined
var timer = null;
console.log(typeof num);
console.log(typeof str);
console.log(typeof flag);
console.log(typeof unVar);
console.log(typeof timer); // object
</script>
- 字面量 : 字面量是在源代碼中一個固定值的表示法，通俗來說，就是字面量表示如何表達這個值。
數字字面量：
8,9,10字符串字面量：
'黑馬程序員', "大前端"布爾字面量：
true，false
6.4 數據類型轉換
6.4.1 什么是數據類型轉換？
- 使用表單、prompt 獲取過來的數據默認是字符串類型的，此時就不能直接簡單的進行加法運算，而需要轉換變量的數據類型。通俗來說，就是把一種數據類型的變量轉換成另一種數據類型，通常會實現3種方式的轉換：
- 轉換為字符串類型。
- 轉換為數字型。
- 轉換為布爾型。
轉換為字符串類型
- 使用
toString進行轉換 :
<script>
var num = 10;
var str = num.toString();
console.log(str, typeof str);
</script>
- 使用
String(args)方法進行轉換:
<script>
var num = 10;
var str = String(num);
console.log(str);
console.log(typeof str);
</script>
- 使用加字符串的方式:
<script>
var num = 12;
var str = 12 + '';
console.log(str);
console.log(typeof str)
</script>
轉換為數字型（重點）
- 使用
parseInt()轉換為數字類型：
<script>
var age = prompt("請輸入您的年齡");
console.log(age); // '12'
console.log(parseInt(age)); // 12
console.log(parseInt('3.14')); // 3 向下取整
console.log(parseInt('9.94')); // 9 向下取整
console.log(parseInt('120px')); // 120
console.log(parseInt('rem120px')); // NaN Not a Number
</script>
- 使用
parseFloat()轉換:
<script>
var value = prompt("請輸入單價:");
console.log(value);
console.log(parseFloat(value)); // 12.3
console.log(parseFloat('3.14')); // 3.14
console.log(parseFloat('9.94')); // 9.94
console.log(parseFloat('120px')); // 120
console.log(parseFloat('rem120px')); // NaN
</script>
- 使用
Number()函數進行轉換：
<script>
var value = prompt("請輸入單價:");
console.log(value);
console.log(Number(value)); // 12.3
console.log(Number('3.14')); // 3.14
console.log(Number('9.94')); // 9.94
console.log(Number('120px')); // 120
console.log(Number('rem120px')); // NaN
</script>
- 使用
運算符 - * /進行轉換:
<script>
/* 1. 使用減法 */
var str = '123';
var less = str - 0;
console.log(less);
console.log(typeof less);
console.log(typeof ('123' - '121'),('123' - '121'));
/* 2. 使用乘法 */
var multiply = str * 1;
console.log(multiply);
console.log(typeof multiply);
/* 3. 使用除法 */
var except = str / 1;
console.log(except);
console.log(typeof except);
</script>
注意
parseInt和parseFloat單詞的大小寫，這2個是重點。隱式轉換是我們在進行算數運算的時候，JS 自動轉換了數據類型
6.4.2 轉換為布爾類型
代表空、否定的值會被轉換為
false，如''，0、NaN、null、undefined。其余值都會被轉換為
true。
7. 解釋型語言和編譯型語言
7.1 概述
計算機不能直接理解任何除機器語言以外的語言，所以必須要把程序員所寫的程序語言翻譯成機器語言才能執行程序。程序語言翻譯成機器語言的工具，被稱為翻譯器。
7.2 執行過程
類似于請客吃飯：
編譯語言：首先把所有菜做好，才能上桌吃飯
解釋語言：好比吃火鍋，邊吃邊涮，同時進行
8. 關鍵字和保留字
8.1 標識符
標識(zhi)符：就是指開發人員為變量、屬性、函數、參數取的名字。
標識符不能是關鍵字或保留字。
8.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 等。
