前端學習筆記六-JavaScript基礎（1）

一、編程語言

1.1 計算機語言

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

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

1.2 編程語言

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

語言類型 說明
匯編語言 匯編語言和機器語言實質是相同的，都是直接對硬件操作，只不過指令采用了英文縮寫的標識符，容易識別和記憶。
高級語言 高級語言主要是相對于低級語言而言，它并不是特指某一種具體的語言，而是包括了很多編程語言，常用的有C語言、C++、Java、C#、Python、PHP、JavaScript、Go語言、Objective-C、Swift等。更簡單更直接，因為適合人們去書寫程序

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

語言 說明
編程語言 編程語言有很強的邏輯和行為能力。在編程語言里, 你會看到很多 if else 、for 、while等具有邏輯性和行為能力的指令，這是主動的。
標記語言 標記語言（html）不用于向計算機發出指令，常用于格式化和鏈接。標記語言的存在是用來被讀取的, 他是被動的。

總結

  1. 程序員利用編程語言編寫程序發出指令控制計算機來實現一些任務
  2. 編程語言有機器語言、匯編語言、高級語言
  3. 高級語言需要一個翻譯器轉換為計算機識別的機器語言，翻譯器可以將我們所編寫的源代碼轉換為機器語言，這也被稱為二進制化。
  4. 編程語言是主動的有很強的邏輯性

二、計算機基礎

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（8bit）
  • 千字節(KB)：1KB = 1024B
  • 兆字節(MB)：1MB = 1024KB
  • 吉字節(GB): 1GB = 1024MB
  • 太字節(TB): 1TB = 1024GB

2.4 程序運行

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

三、初始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 引擎

  • 渲染引擎：解析HTML和CSS，俗稱內核，比如chrome的blink，以及老版本的webkit
  • JS引擎（JS解釋器）：用來讀取網頁中的JavaScript代碼，對其處理后運行，比如chrome中的V8（最快的JS引擎）

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

3.5 JS 的組成

3.5.1 ECMAScript

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


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

更多參看MDN: MDN手冊

3.5.2 DOM——文檔對象模型

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

3.5.3 BOM——瀏覽器對象模型

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

3.6 JS 初體驗

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

  1. 行內式
<input type="button" value="點我試試" onclick="alert('Hello World')" />
  • 注意單雙引號的使用：在HTML中我們推薦使用雙引號, JS 中我們推薦使用單引號
  1. 內嵌式
  <script>
      alert('Hello  World~!');
  </script>
  1. 外部JS文件
   <script src="my.js"></script>
  • 利于HTML頁面代碼結構化，把大段 JS代碼獨立到 HTML 頁面之外，既美觀，也方便文件級別的復用

四、JavaScript輸入輸出語句

為了方便信息的輸入輸出，JS中提供了一些輸入輸出語句，其常用的語句如下：

方法 說明 歸屬
alert(msg) 瀏覽器彈出警示框 瀏覽器
console.log(msg) 瀏覽器控制臺打印輸出信息 瀏覽器
prompt(info) 瀏覽器彈出輸入框，用戶可以輸入 瀏覽器

五、變量的概念

5.1 什么是變量

變量是用于存放數據的容器。 我們通過 變量名 獲取數據，甚至數據可以修改。

5.2 變量在內存中的存儲

本質：變量是程序在內存中申請的一塊用來存放數據的空間。類似酒店的房間，必須先申請了才能住人，因此一個房間就可以看做是一個變量。 我們通過【房間號】來查找到里面的內容。

六、變量的使用

6.1 聲明變量

//  聲明變量  
var age; //  聲明一個 名稱為age 的變量

  • var 是一個 JS關鍵字，用來聲明變量( variable 是可變變量的意思 )。使用該關鍵字聲明變量后，計算機會自動為變量分配內存空間，不需要程序員管

  • age 是程序員定義的變量名，我們要通過變量名來訪問內存中分配的空間

6.2 賦值

age = 10; // 給 age  這個變量賦值為 10
  • = 用來把右邊的值賦給左邊的變量空間中，此處代表賦值的意思
  • 變量值是程序員保存到變量空間里的值

6.3 變量的初始化

var age  = 18;  // 聲明變量同時賦值為 18

聲明一個變量并賦值， 我們稱之為變量的初始化。

6.4 變量語法擴展

  • 更新變量

一個變量被重新復賦值后，它原有的值就會被覆蓋，變量值將以最后一次賦的值為準。

var age = 18;

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

  • 聲明變量特殊情況

    情況 說明 結果
    var age ; console.log (age); 只聲明 不賦值 undefined
    console.log(age) 不聲明 不賦值 直接使用 報錯 is not defined
    age = 10; console.log (age); 不聲明 只賦值 10

最好的寫法：聲明并賦值

6.5 變量命名規范

規則：

  • 由字母(A-Za-z)、數字(0-9)、下劃線(_)、美元符號( $ )組成，如：usrAge, num01, _name
  • 嚴格區分大小寫。var app; 和 var App; 是兩個變量
  • 不能 以數字開頭。 18age 是錯誤的
  • 不能 是關鍵字、保留字。例如：var、for、while(name雖然不是關鍵字但盡量不要用)
  • 變量名必須有意義。 MMD BBD nl → age

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


七、數據類型

7.1 數據類型簡介

  • 為什么需要數據類型

在計算機中，不同的數據所需占用的存儲空間是不同的，為了便于把數據分成所需內存大小不同的數據，充分利用存儲空間，于是定義了不同的數據類型。
簡單來說，數據類型就是數據的類別型號。

  • 變量的數據類型

變量是用來存儲值數據的所在處，它們有名字和數據類型。變量的數據類型決定了如何將代表這些值的位存儲到計算機的內存中。JavaScript是一種弱類型或者說動態語言。這意味著不用提前聲明變量的類型，在程序運行過程中，類型會被自動確定：

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

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

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

  • 數據類型：JS 把數據類型分為兩類：

    • 簡單數據類型 （Number,String,Boolean,Undefined,Null）

    • 復雜數據類型 （object)

7.2 簡單數據類型

簡單數據類型（基本數據類型）

JavaScript 中的簡單數據類型及其說明如下：

  • 數字型 Number

JavaScript 數字類型既可以保存整數，也可以保存小數(浮點數）。

var age = 21;       // 整數
var Age = 21.3747;  // 小數
  1. 數字型進制

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

 ```js
   // 1.八進制數字序列范圍：0~7
  var num1 = 07;   // 對應十進制的7
  var num2 = 010;  // 對應十進制的8
  var num3 = 017;  // 對應十進制的15
  var num4 = 08;   // 對應十進制的8
   // 2.十六進制數字序列范圍：0~9以及A~F(代替10 11 12 13 14 15)
  var num = 0x9；  //對應十進制的9
  var num = 0xB;   //對應十進制的11 注意字母大小寫都可以
 ```

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

  1. 數字型范圍

JavaScript中數值的最大和最小值

  • 最大值：Number.MAX_VALUE，這個值為： 1.7976931348623157e+308
  • 最小值：Number.MIN_VALUE，這個值為：5e-32

  1. 數字型三個特殊值

    • Infinity ，代表無窮大，大于任何數值
    • -Infinity ，代表無窮小，小于任何數值
    • NaN ，Not a number，代表一個非數值（可以用來isNaN（is Not a Number【是非數字】）判斷一個變量是否為非數字的類型，返回 true 或者 false）
var usrAge = 21;
var isOk = isNaN(userAge);  //
console.log(isNum);          // false ，21 不是一個非數字
var usrName = "andy";
console.log(isNaN(userName));// true ，"andy"是一個非數字
  • 字符串型 String

字符串型可以是引號中的任意文本，其語法為 雙引號 "" 和 單引號''（推薦單引號''）

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

  1. 字符串引號嵌套

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

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

  2. 字符串轉義符

    ? 類似HTML里面的特殊字符，字符串中也有特殊字符，我們稱之為轉義符。轉義符都是 \ 開頭的，常用的轉義符及其說明如下：

    轉義符 解釋說明
    \n 換行符，n 是 newline 的意思
    \ \ 斜杠 \
    \t tab 縮進
    \b 空格 ，b 是 blank 的意思

  3. 字符串拼接

    • 字符串 + 任何類型 = 拼接之后的新字符串

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

      //1.1 字符串 "相加"
console.log('hello' + ' ' + 'world'); // hello world
//1.2 數值字符串 "相加"
console.log('100' + '100'); // 100100
//1.3 數值字符串 + 數值
console.log('11' + 12);     // 1112
      • + 號總結口訣：數值相加 ，字符相連

  • 布爾型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

7.3 獲取變量數據類型

7.4 數據類型轉換

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

  • 轉換為字符串
  1. toString() 和 String() 使用方式不一樣。num.toString()和String(num)
  2. 三種轉換方式，第三種加號拼接字符串轉換方式使用較多， 這種方式也稱之為隱式轉換。
  • 轉換為數字型（重點）
parseInt('3.14'); //3
parseInt('3.92'); //3
parseInt('120px') //120
  1. 使用parseInt要轉的字符串有小數，它會向下取整，如果有跟在數字后面的字母單位字，它會去掉單位，還有這個字符串不能以字母開頭。
    parseFloat也會把單位去掉。(重點運用)
  2. 隱式轉換是我們在進行算數運算的時候，JS自動轉換了數據類型
console.log('12' - 0); //12
console.log('123' - '120'); //3
console.log('33' * 1); //33
  • 轉換為布爾型
圖片21.png

  • 代表空、否定的值會被轉換為 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

八、解釋型語言和編譯型語言

8.1 概述

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

  • 翻譯器翻譯的方式有兩種：一個是編譯，另外一個是解釋。兩種方式之間的區別在于翻譯的時間點不同
  • 編譯器是在代碼執行之前進行編譯，生成中間代碼文件，運行該文件時再執行
  • 解釋器是在運行時進行及時解釋，并立即執行(當編譯器以解釋方式運行的時候，也稱之為解釋器)

8.2 執行過程

類似于請客吃飯：

編譯語言：首先把所有菜做好，才能上桌吃飯
解釋語言：好比吃火鍋，邊吃邊涮，同時進行

九、關鍵字和保留字

9.1 標識符

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

標識符不能是關鍵字或保留字。

9.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 等。

9.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 等。

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

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。