前端學習(23)~js學習(一)

• 2020 年 3 月 18 日
• 筆記

Web前端有三層：

• HTML：從語義的角度，描述頁面結構
• CSS：從審美的角度，描述樣式（美化頁面）
• JavaScript：從交互的角度，描述行為（實現業務邏輯和頁面控制）

瀏覽器的介紹

瀏覽器是網頁運行的平台，常用的瀏覽器有Google（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等。

瀏覽器的組成

瀏覽器分成兩部分：

• 渲染引擎
• JS 引擎

1、渲染引擎：（瀏覽器內核）

瀏覽器所採用的「渲染引擎」也稱之為「瀏覽器內核」，用來解析 HTML與CSS。渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式資訊。渲染引擎是兼容性問題出現的根本原因。

常見瀏覽器的內核如下：

2、JS 引擎：

也稱為 JS 解釋器。 用來解析網頁中的JavaScript程式碼，對其處理後再運行。

瀏覽器本身並不會執行JS程式碼，而是通過內置 JavaScript 引擎(解釋器) 來執行 JS 程式碼 。JS 引擎執行時會逐行解釋源碼（轉換為機器語言），然後由電腦去執行。

常見瀏覽器的 JS 引擎如下：

瀏覽器工作原理

1、User Interface 用戶介面，我們所看到的瀏覽器

2、Browser engine 瀏覽器引擎，用來查詢和操作渲染引擎

3、Rendering engine 用來顯示請求的內容，負責解析HTML、CSS

4、Networking 網路，負責發送網路請求

5、JavaScript Interpreter(解析者) JavaScript解析器，負責執行JavaScript的程式碼

6、UI Backend UI後端，用來繪製類似組合框和彈出窗口

7、Data Persistence(持久化) 數據持久化，數據存儲 cookie、HTML5中的sessionStorage

JavaScript介紹

JavaScript入門易學性

• JavaScript對初學者比較友好、簡單易用。可以使用任何文本編輯工具編寫，只需要瀏覽器就可以執行程式。
• JavaScript是有介面效果的（相比之下，C語言只有白底黑字）。
• JavaScript是弱變數類型的語言，變數只需要用 var/let/const 來聲明。而Java中變數的聲明，要根據變數的類型來定義。

而JavaScript中，只需要用一種方式來定義：

// ES5 寫法  var a;    // ES6 寫法  const a;  let a;

JavaScript是前端語言

JavaScript是前端語言，而不是後台語言。

JavaScript運行在用戶的終端網頁上，而不是伺服器上，所以我們稱之為「前端語言」。就是服務於頁面的交互效果、美化，不能操作資料庫。

後台語言是運行在伺服器上的，比如PHP、ASP、JSP等等，這些語言都能夠操作資料庫，都能夠對資料庫進行「增刪改查」操作。

備註：Node.js是用 JavaScript 開發的，現在也可以基於 Node.js 技術進行伺服器端編程。

JavaScript的組成

JavaScript基礎分為三個部分：

• ECMAScript：JavaScript的語法標準。包括變數、表達式、運算符、函數、if語句、for語句等。
• DOM：Document Object Model（文檔對象模型），操作頁面上的元素的API。比如讓盒子移動、變色、改變大小、輪播圖等等。
• BOM：Browser Object Model（瀏覽器對象模型），操作瀏覽器部分功能的API。通過BOM可以操作瀏覽器窗口，比如彈框、控制瀏覽器跳轉、獲取瀏覽器解析度等等。

JavaScript 的特點

特點1：解釋型語言

JavaScript 是解釋型語言，不需要事先被翻譯為機器碼；而是邊翻譯邊執行（翻譯一行，執行一行）。

特點2：單執行緒

特點3：ECMAScript標準

ECMAScript是一種由 ECMA 國際（前身為歐洲電腦製造商協會,英文名稱是European Computer Manufacturers Association）制定和發布的腳本語言規範。

簡單來說，ECMAScript不是一門語言，而是一個標準。ECMAScript 規定了JS的編程語法和基礎核心知識，是所有瀏覽器廠商共同遵守的一套JS語法工業標準。

ECMAScript在2015年6月，發布了ECMAScript 6版本（ES6），語言的能力更強（也包含了很多新特性）。但是，瀏覽器的廠商不會那麼快去追上這個標準，需要時間。

程式語言的分類

翻譯器

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

由此可見，所謂的「翻譯」，指的是翻譯成電腦能夠執行的指令。

翻譯器翻譯的方式有兩種：一種是編譯，另一種是解釋。兩種方式之間的區別在於翻譯的時機不同。

• 編譯器：在程式碼執行之前，事前把所有的程式碼一次性翻譯好，生成中間程式碼文件，然後整體執行。
• 解釋器：邊翻譯，邊執行（在程式碼執行時進行及時翻譯，並立即執行）。當編譯器以解釋的方式運行時，也稱之為解釋器。

對應的語言，稱之為「編譯型語言」、「解釋型語言」。

編譯型語言

• 定義：事先把所有的程式碼一次性翻譯好，然後整體執行。
• 優點：運行更快。
• 不足：移植性不好，不跨平台。
• 編譯型語言舉例：c、c++

解釋型語言

• 定義：邊翻譯邊執行（翻譯一行，執行一行），不需要事先一次性翻譯。
• 優點：移植性好，跨平台。
• 缺點：運行更慢。
• 解釋型語言舉例：JavaScript、php、Python。

Java語言

Java 語言既不是編譯型語言，也不是解釋型語言。翻譯過程：

（1）編譯：.java程式碼文件先通過 javac 命令編譯成.class文件。

（2）執行：.class文件再通過 jvm 虛擬機，解釋執行。有了 jvm 的存在，讓 java 跨平台了。

開始寫第一行JavaScript程式碼

JavaScript 程式碼的書寫位置在哪裡呢？這個問題，也可以理解成：引入 js 程式碼，有哪幾種方式。

方式1：行內式

程式碼舉例：

<input type="button" value="點我點我" onclick="alert('千古壹號')" />

完整的可執行程式碼如下：

<!DOCTYPE html>  <html lang="en">      <head>          <meta charset="UTF-8" />          <meta name="viewport" content="width=device-width, initial-scale=1.0" />          <title>Document</title>      </head>      <body>          <input type="button" value="點我點我" onclick="alert('千古壹號的方式1')" />      </body>  </html>

分析：

• 可以將單行或少量 JS 程式碼寫在HTML標籤的事件屬性中（以 on 開頭的屬性），比如放在上面的 onclick點擊事件中。
• 這種書寫方式，不推薦使用，原因是：可讀性差，尤其是需要編寫大量 JS程式碼時，容易出錯；引號多層嵌套時，也容易出錯。
• 關於程式碼中的「引號」，在HTML標籤中，我們推薦使用雙引號, JS 中我們推薦使用單引號。

方式2、內嵌式

我們可以在html 頁面的 <body> 標籤里放入<script type=」text/javascript」></script>標籤對兒，並在<script>里書寫JavaScript 程式碼：

<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>Document</title>  </head>  <body>      <script type="text/javascript">          // 在這裡寫 js 程式碼          alert('千古壹號的方式2');          console.log('qianguyihao 方式2');      </script>  </body>  </html>

分析：

• text表示純文本，因為JavaScript也是一個純文本的語言。
• 可以將多行JS程式碼寫到 <script> 標籤中。
• 內嵌式 JS 是學習時常用的方式。

方式3：引入外部的 JS 文件

<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>Document</title>  </head>  <body>      <!-- 引入外部的 js 文件 -->      <script src="tool.js"></script>  </body>  </html>

上面這段程式碼，依然是放到body標籤里，可以和內嵌的js程式碼並列。

另外，引用外部 JS文件的 script 標籤中間不可以再寫程式碼。

總結：

我們在實戰開發中，基本都是採用方式3，因為這種方式，可以確保 html 文件和 js 文件是分開的，有利於程式碼的結構化和復用。很少會有人把一大堆 js 程式碼塞到 html 文件里。

JS一些簡單的語法規則

（1）JavaScript對換行、縮進、空格不敏感。每一條語句以分號結尾。

也就是說：

程式碼一：

<script type="text/javascript">      alert("今天藍天白雲");      alert("我很高興");  </script>

等價於程式碼二：

<script type="text/javascript">      alert("今天藍天白雲");alert("我很高興");  </script>

備註：每一條語句末尾要加上分號，雖然分號不是必須加的，如果不寫分號，瀏覽器會自動添加，但是會消耗一些系統資源。

（2）所有的符號，都是英語的。比如括弧、引號、分號。

（3）嚴格區分大小寫。

注釋

我們不要把 HTML、CSS、JavaScript三者的注釋格式搞混淆了。

HTML 的注釋

<!-- 我是注釋  -->

CSS的注釋

<style type="text/css">        /*          我是注釋      */        p{          font-weight: bold;          font-style: italic;          color: red;      }    </style>

注意：CSS只有/* */這種注釋，沒有//這種注釋。而且注釋要寫在<style>標籤裡面才算生效哦。

JavaScript 的注釋

單行注釋：

// 我是注釋

多行注釋：

/*      多行注釋1      多行注釋2  */

補充：VS Code中，單行注釋的快捷鍵是「Ctrl + /」，多行注釋的默認快捷鍵是「Alt + Shift + A」。

Javascript 輸入輸出語句

彈出警告框：alert語句

程式碼舉例如下：

<!DOCTYPE html>  <html lang="en">      <head>          <meta charset="UTF-8" />          <meta name="viewport" content="width=device-width, initial-scale=1.0" />          <title>Document</title>      </head>      <body>          <script>              alert('千古壹號');          </script>      </body>  </html>

控制台輸出：console.log("")

console.log("")表示在控制台中輸出。

在Chrome瀏覽器中，按F12即可打開控制台，選擇「console」欄，即可看到列印的內容。

總結：alert() 主要用來顯示消息給用戶，console.log() 用來給程式設計師自己調試用的。

彈出輸入框：prompt()語句

prompt()就是專門用來彈出能夠讓用戶輸入的對話框。用得少，測試的時候偶爾會用。

JS程式碼如下：

var a = prompt("請隨便輸入點什麼東西吧");  console.log(a);

上方程式碼中，用戶輸入的內容，將被傳遞到變數 a 裡面，並在控制台列印出來。

prompt()語句中，用戶不管輸入什麼內容，都是字元串。

alert()和prompt()的區別：

• alert() 可以直接使用。
• prompt() 會返回用戶輸入的內容。我們可以用一個變數，來接收用戶輸入的內容。