Web前端之——JavaScript基礎
最近在一家公司工作了，本來面試的是後端開發，但是前端這一塊沒有專門的人去負責，要後端負責一部分，框架是用我們的Vue框架，不過我沒學過就是了，所以需要先從最基本的JavaScript先學習一遍吧~
本文介紹以下幾部分內容:
- JavaScript是什麼？
- JavaScript在HTML中的運用
- JS的語言基礎
這篇隨筆主要是先簡單介紹下JavaScript，在不詳細瞭解其技術細節的情況下，我們先最快速度的讓頁面效果展示起來~
第一部分：JavaScript是什麼？
首先大家其實都很瞭解，JavaScript和Java並沒有多少關聯，它的語言祖先和Java也許有點關聯，但是目前來說JavaScirpt和Java語言的關聯性並不大了，所以大家不用擔心Java的強語言特性的繁瑣同樣在JavaScirpt上。
JavaScript（以下簡稱為JS）是一門用來與頁面互動的指令碼語言，它有三個組成部分:
- ECMAScript:這是由ECMA-262規定的核心功能(這是一種語言標準序號，過個眼熟就行)。
- DOM：文件 物件 模型，提供的是頁面內容互動的介面，也就是JS用來操控頁面的方法。
- BOM：瀏覽器 物件 模型，提供的是和瀏覽器互動的介面，也就是瀏覽器操作的方法。
其中DOM和BOM是非常關鍵的功能，JS有了這兩種核心功能也是各種框架所圍繞的重點:什麼框架能更加輕鬆可靠的編輯文件內容？
但是我們還需要說明下，JavaScript到底為什麼會誕生?
為什麼JavaScript會誕生？
曾經我們的頁面是存放於伺服器中的，我們使用者去訪問網站時會訪問網路伺服器，它會在內部計算、查詢資料……最終渲染頁面發給我們使用者，這點聽上去非常合理，宛如食堂打飯，阿姨打了一份兩葷兩素一碗湯我們坐下來就可以吧唧吧唧開始吃了，但是！隨著科技不斷髮展，家家百兆光纖入戶，智慧手機、平板電腦pad、智慧手錶等等，智慧裝置實在是太多啦！人們有各種各樣的裝置(未來一定有能上網的智慧馬桶圈！)去訪問伺服器，用以往的方式去給使用者計算、查詢最終渲染頁面的方式讓伺服器不堪重負，即便增加了N臺伺服器、開發或者優化技術以及投入大量的資金去改善這些問題，依舊不能預計下一階段網路客戶端會不會再次爆炸式增長，所以我們聰明的前輩們開創出了一種全新的方式去給服務端肩負——開發客戶端資源
每一臺智慧裝置都有一定的計算能力，天生就是一臺效能十足的Computer，那麼為什麼不將一部分計算的任務交給客戶端呢？伺服器只需負責查詢任務就行了，而客戶端將接收客戶端的核心資料，再根據這些資料進行渲染頁面，這樣伺服器只需要接收客戶端請求就可以了。通過這種方式服務端只需要考慮如何增加自身的併發量耐受力，而不需要考慮對頁面的各種繁瑣處理了。
JavaScirpt的目的就是為了減少服務端的任務量，讓客戶端分擔工作任務。
第二部分：HTML中的運用
Java Script 插入HTML的主要方法是使用<script>元素。這個元素是由網景公司創造出來的，它有八個屬性：
- async: 非同步載入，可選，表示應該立即下載指令碼，但不能阻止其他頁面動作，比如下載資源或等待其他指令碼載入。只對外部指令碼檔案有效。
- charset: 可選。使用src屬性指定的程式碼字符集。屬性很少使用，很多瀏覽器表示無視。
- crossorigin：可選。配置相關請求的CORS（跨源資源共享）設定。預設不使用CORS。corssorigin="anonymous"配置請求不必設定憑據標誌。corssorign="use-credntials"設定憑據標誌。出站會攜帶憑據
- defer:延遲載入，可選，表示指令碼可以延遲到文件被完全解析和顯示後執行。只對外部指令碼有效。IE7以及更早的瀏覽器對行內指令碼也可以使用這個屬性
- integrity:可選，允許對比接收到的資源和指定的加密簽名以驗證子資源完整性（SRI,Subresource Integrity)。如果接收到的資源和前面與這個屬性的指定前面不匹配，則頁面會報錯，指令碼不會執行。這個屬性可以用於確保內容分發網路CDN不會提供惡意內容
- language：廢棄，表示程式碼塊中的指令碼語言，目前指令碼語言已經統一
- src：可選，外部路徑，表示程式碼塊的外部檔案。
- type：可選，替代language，表示程式碼塊中的指令碼語言內容型別（MIME型別）。按照管理，這個值始終是"text/javascript"，儘管已經廢棄了"text/javascript"和"text/ecmascript"。JavaScriptMIME型別通常是"application/x-javascript"，不過給type屬性這個值通常可能導致指令碼被忽略。在非IE瀏覽器中有效的值通常還有"application/javascript"和"application/ecmascript"。
如果這個值是module，則程式碼會被當作ES6模組，而且只有這個時候程式碼才能出現import和export關鍵字。
使用<script>方式有兩種，一種是網頁內嵌入，一種是外部匯入。
1.行內匯入：
<body>
<script>
function sayScript() {
console.log("hi,JavaScript!");
}
</script>
<script>
sayScript()
</script>
</body>程式碼說明:<script>包裹的就是JS的程式碼塊了，function代表我們要宣告一個函數了，後面的是函式名，console.log()代表在瀏覽器的控制檯輸出，接下來我們直接呼叫sayScript()這個方法時他就會在控制檯上打出我們想要字串了。注意哦，如果需要呼叫函式必須加括號！
2.外部匯入
<script src="1.Fimport.js"></script>
<script>
sayScript()
</script>src代表的是JS檔案的外部路徑，它在檔案內部聲明瞭sayScript()這個方法，在我們使用各種框架時，絕大部分會使用這種方式從外部匯入框架
標籤位置
那麼我們會在什麼地方宣告、匯入JS檔案\語法呢？
首先JS檔案是通過從上到下的順序來進行匯入的，所以你寫的JS程式碼必須存放在外部引入的框架的下面，其次在匯入JS檔案在最最頂部，那麼會在JS檔案下載完畢後才會渲染頁面，所以我們推薦：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>匯入JS</title>
</head>
<body>
<h1>初次見面！請多多關照！</h1>
<!-- JS引入/宣告 在頁面載入完畢之後-->
<script>
sayScript()
</script>
<script src="1.Fimport.js"></script>
</body>
</html>將JS檔案延後載入可以在感官上加快頁面的載入，否則網路不好的情況下沒有載入完JS檔案可能會導致頁面一片空白，這樣的操作可能讓網路不好的情況下頁面呈現出渲染過程中醜陋的骨架狀態，而不是一片空白。但是至少讓使用者感受到了頁面反饋。
第二部分 語言基礎
JS的語言是讓初學者歡呼，而資深程式設計師頭疼的語法，首先它是弱語言型別，你可以通過各種方法宣告、賦值：
var message = "hi!"
let message2 = "hi!"
const message3 = "hi!"var 是最常用的一種宣告變數操作符，它會"自動推斷"變數的型別，它的特點就是聲明後會將變數附著到windows（也就是瀏覽器物件）上面去，你可以在頁面的任何地方呼叫它，似乎非常的方便？但是我必須得說：越是廣泛的方法，使用起來麻煩反而更多。var的缺點就是太過方便了，容易濫用
let 和var使用方法差不多，但是let並不會在聲明後附著在windows上面，同時它不允許出現相同命名的宣告，也不會有var自動提升的特性，變數宣告在那個位置就不會存在於上方作用域。它的限制相比於var 要多一點，但是正是施加了限制才能保證程式碼執行的安全，程式設計師能更快的排除錯誤。
const ES6時出現的操作符，它是最嚴格的宣告操作符了，它的特點就是必須宣告變數的初始變數，從而避免了"undefined"未定義這種奇葩型別的出現。所以特別嚴格的特性const成為了ES6首選宣告操作符，不過要想駕馭它還是需要下一點功夫。
基本型別：
JS一共有六種簡單資料型別和一種複雜資料型別:
| 型別 | 說明 |
| undefined | 變數的型別、值均未定義(型別無法推斷) |
| Null | 變數的值未定義 |
| Boolean | 布林值 |
| Number | 數字 |
| String | 文字字串 |
| Symbol | 符號 |
| Object | 物件，不屬於以上六種基本型別的都是Obeject |
*題外話，其中undefined和Null 另外還有一種值叫做NaN(Not a Number，Number計算錯誤所產生的異常值)，一種語言中竟然有兩種空值，這也是讓JS風評不好的原因之一，許多人認為JavaScript是沒有經過謹慎設計的語言，在此基礎上TypeScript是更好的商業實踐，它加強了型別宣告，不過JS仍然是你學習的基礎。
1.Undefined型別介紹
這是一種遺憾的型別，它是var 和 let宣告時沒有對這個變數賦值導致它並沒有初始化，JS弱語言特性可以自動推斷變數，但是你沒有初始化的話真是巧婦難為無米之炊，所以會變成Undefined，所以在宣告變數時一定要宣告以下幾種型別哦！
let abc;
var abc;
//禁止直接使用未初始化變數!2.Null型別
這是被程式設計師稱為"百萬價值"的型別！他就是聲明瞭型別物件是一個空指標，它的初始化型別就是Null，以便應對未來物件的賦值，如果你去比較它和Unfefined的物件是否相同，那麼你會得到結果是true。所以這個值物件非常令人迷惑甚至惱火！只有在特定條件下才會給變數賦予這種值。
let message = null;
message = getMessage();
//呼叫一個方法，這個方法假設是會返回一個字串，等下我們要判斷它下。
if(message){
//如果這個方法獲取成功了，就會賦值給message變數，否則如果是null值會判斷為false
console.log("說明收到訊息了")
}3.Boolean型別
Boolean型別是我們最常見的型別之一，它只有true、false兩種，但是在JS中它有很多可轉換的型別:
注意！布林值是區分大小寫的，因此True和False是有效的識別符號，而不是布林值。
|
資料型別 |
轉換為true |
轉換為false的值 |
|
Boolean |
true |
false |
|
String |
非空字串 |
""（空字串） |
|
Number |
非零數值 |
0、NaN |
|
Object |
任意物件 |
null |
|
Undefined |
N/A (不會轉化為true) |
undefined |
所以你如果你使用if去判斷一個空值、0值、空字串、未定義會產生false判斷。
4.Number型別
Number採用 IEEE 754格式表示整數和浮點值（某些語言中也叫雙精度值）。不同的數值型別相應的也有不同的數值字面量格式。
//普通10進位制直接寫出
let num = 55
// 整數也可以用八進位制或者十六進位制字面量表示，對於八進位制，第一個數字必須是0，然後是相應的八進位制數字（0~7）。
// 如果字面量中包含的數字超出了有效範圍，則會忽略字首0 ，當作十進位制
let num = 070 八進位制的56
let num = 079 十進位制的79
let num = 08 十進位制的8
// 十六進位制必須是真正的數值字首0x（區分大小寫)然後是十六進位制數字（0~9以及a~f）。十六進位制數字中字母大小寫均可。下面是幾個例子
let num = 0xA 十六進位制10
let num = 0x1f 十六進位制31
// 浮點數數值中必須包含小數點，而且小數點後面必須至少有一個數字。雖然小數點前面不必有整數，但推薦加上。
let floatNum1 = 1.1
let floatNum2 = .1 有效，但不推薦
// 因為浮點數所佔記憶體空間是整數的兩倍，所以ES總是相反設法的讓數值變為整數
let floatNum1 =1. 會被當做整數
let floatNum2 = 10.0 會被當作整數。
// 同時允許科學計數法表示
let floatNum = 3.125e7 表示31250000
//浮點數的精確度最高17個小數，但在算數計算中達不到精確，例如0.1+0.2得到的不是0.3
if （a +b == 0.3){
console.log("等於0.3"）;
}
// false，等於0.3000000000000000004
//這種問題的原因還是IEEE754數值的錯誤。 5.String 型別
String（字串）型別表示零或多個16位Unicode字元序列。字串可以使用雙引號（")、單引號、或者反引號表示。注意，開頭的引號必須和結尾的是一種，否則報錯。
// 字串物件是無法修改的，必須重新賦值!
let lang = "JAVA"
lang = lang + "script" 模板字串
ES6 新增了使用模板字面量定義字串的能力。與使用雙引號或單引號不同，模板字面量保留換行字元，可以跨行定義字串。
模板的引號和我們平常使用的不同，它是反引號，在鍵盤上Tab鍵左上方:
let myMultString = "frist line\nsecond line"
let myMultString2 = `frist line
second line`
//（注意這裡的反引號）
console.log(myMultString）;
//frist line
//nsecond line
console.log(myMultString2）;
//frist line
//nsecond line同時你可以使用這種方式進行插值
// 字串插值通過${}中使用一個JS表示式實現
let value = 5
let exponent = "second"
let interp =
`${value} to the ${exponent} + power is ${ value * value}`
// ${}中可以使用JS表示式功能非常強大:
fun cap(word){
return `${word[0].toUpperCase()}${ word.slice(1)}';
}
console.log(`${cap('hello') , ${cap('world')}};
//Hello World6.Symbo型別使用較少，Object型別會在之後的介紹中出現，它兩個本身實際上只需要瞭解即可。
Object型別包括了陣列、雜湊，它們都幾個基本方法，瞭解即可:
1.constructor : 用於建立當前物件的函式。在前面的例子中，這個屬性值就是 Object（）函式。
2.hasOwnProperty(propertyName):用於判斷當前物件例項（不是原型）上是否存在給定的屬性。要檢查的屬性名必須時字串（如 o.hasOwnProperty("name"))或符號。
3.isPrototypeOf(object):用於判斷當前物件是否為另一個物件的原型。
4.propertyIsEnumerable(propertyName):用於判斷給定的屬性是否可以使用，for-in語句每列舉。與hasOwnProperty（）一樣，屬性名必須是字串。
5.toLocaleString():返回物件的字串表示。
6.toString(): 返回物件的字串表示。
7.valueOf（）：返回物件對應的字串、數值或布林值表示。通常與toString（）的返回值相同。
那麼今天最簡單的JS介紹就結束了，我會在接下來的時間更新重點內容。