JavaScript基礎知識

時間 2019-12-05

原文原文鏈接

1 什麼是JavaScript

JavaScript一種直譯式腳本語言，一種基於對象和事件驅動並具備安全性的客戶端腳本語言；
也是一種普遍應用客戶端web開發的腳本語言。
簡單地說，JavaScript是一種運行在瀏覽器中的解釋型的編程語言。javascript

2 JavaScript的基本結構

<script type="text/javascript">
        JS語句;
    </script>

3 JS的使用方法

HTML標籤中內嵌JS；

<button onclick="alert('歡迎進入JavaScript世界')">點擊me</button>

HTML頁面中直接使用JS：

<script type="text/javascript">
        JS語句;
      </script>

引用外部JS文件：

<script language="JScript" src="JS文件路徑"></script>

4 變量

變量：是用於存儲信息的"容器"，是命名的內存空間，可使用變量名稱找到該內存空間；
JavaScript 的變量是鬆散類型（弱類型）的，就是用來保存任何類型的數據。
在定義變量的時候不須要指定變量的數據類型。vue

JavaScript 定義變量有四種方法：const、let、var，還有一種是直接賦值，好比a = " a"（不規範，不推薦使用）
var 定義的變量能夠修改，若是不初始化會輸出undefined，不會報錯。
let let是塊級做用域，定義的變量只在let 命令所在的代碼塊內有效，變量須要先聲明再使用。
const 定義的變量不能夠修改，並且必須初始化，const定義的是一個恆定的常量，
聲明一個只讀的常量或多個，一旦聲明，常量值就不能改變。java

在函數外聲明的變量做用域是全局的，全局變量在 JavaScript 程序的任何地方均可以訪問；
在函數內聲明的變量做用域是局部的（函數內），函數內使用 var 聲明的變量只能在函數內容訪問。web

聲明變量注意：

JS中全部變量類型聲明，均使用var關鍵字。變量的具體數據類型，取決於給變量賦值的執行。
同一變量可在屢次不一樣賦值時，修改變量的數據類型。
變量的命名規範
變量命名名要符合駝峯法則：變量開頭爲小寫，以後每一個單詞首字母大寫。

5 JavaScript 變量的命名規則

變量命名必須以字母、下劃線」_」或者」$」爲開頭。其餘字符能夠是字母、_、美圓符號或數字。
變量名中不容許使用空格和其餘標點符號，首個字不能爲數字。
變量名長度不能超過255個字符。
變量名稱對大小寫敏感（y 和 Y 是不一樣的變量），JavaScript 語句和 JavaScript 變量都對大小寫敏感。
變量名必須放在同一行中。
不能使用腳本語言中保留的關鍵字、保留字、true、false 和 null 做爲標識符。

6 JS中的變量的數據類型

String：字符串類型。用""和''包裹的內容，稱爲字符串。
Number:數值類型。能夠是小數，也能夠是正數。
boolean:真假，可選值true/false。
Object:（複雜數據類型）
Null:表示爲空的引用。var a = null;
Undefined:未定義，用var聲明的變量，沒有進行初始化賦值。var a;編程

7 JavaScript對象
JavaScript 對象是擁有屬性和方法的數據，是變量的容器。
對象：是封裝一個事物的屬性和功能的程序結構，是內存中保存多個屬性和方法的一塊存儲空間。
JavaScript中全部事物都是對象：數字、字符串、日期、數組等。
JavaScript對象能夠是字面量建立、分配給變量，數組和其餘對象的屬性、做爲參數傳遞給函數、有屬性和做爲返回值。數組

用字面量建立：

function MyFun(){
        };

分配給其餘對象的變量，數組和屬性：

var myFun = function(){
        
        };
        myArray.push(function(){
        
        });
        myObject.myFun = function(){
        
        };

做爲參數傳遞給其餘函數：

function myFun(someFunc){
            someFunc();
        }
        myFunc(function(){
        
        });

有屬性：

var myFunc = function(){
        
        };

做爲返回值：

function myFunc(){ 
            return function(){
        
            }
        }

在JavaScript中定義對象有5種方式：

基於已有對象擴充其屬性和方法
工廠方式
構造函數方式
原型(「prototype」)方式
動態原型方式

JS 中的對象分爲三類：

內置對象（靜態對象）：js自己已經寫好的對象，咱們能夠直接使用不須要定義它。

常見的內置對象有 Global、Math（它們也是本地對象，根據定義每一個內置對象都是本地對象）。瀏覽器

本地對象（非靜態對象）：必須實例化才能使用其方法和屬性的就是本地對象。

常見的本地對象有 Object、Function、Data、Array、String、Boolean、Number、RegExp、Error等緩存

宿主對象：js運行和存活的地方，它的生活環境就是DOM（文檔對象模式）和BOM（瀏覽器對象模式）。

8 JavaScript函數

使用函數前要先定義才能調用，函數的定義分爲三部分：函數名，參數列表，函數體
定義函數的格式：安全

function 函數名([參數1，參數2...]){
        函數執行部分；
        return 表達式；
    }

函數有三種定義方法：

函數定義語句
函數直接量表達式
Function構造函數

函數有四種調用模式：

函數調用模式（經過函數調用）
方法調用模式（經過對象屬性調用）
構造函數模式（若是是做爲構造函數來調用，那麼this指向new建立的新對象）
函數上下文（借用方法模式：它的this指向能夠改變，而前三種模式是固定的）；函數上下文就是函數做用域；基本語法：apply 和 call 後面都是跟兩個參數。）

在javascript函數中，函數的參數一共有兩種形式：（實際參數與形式參數）
形參：在函數定義時所指定的參數就稱之爲「函數的形參」。
實參：在函數調用時所指定的參數就稱之爲「函數的實參」。閉包

9 運算符

算術運算符：主要是用來進行JavaScript中的算術操做。（+、-、*、/、%、++、--）
賦值運算符： = 用於給JavaScript 變量賦值，其做用就是把右側的值賦給左側的變量。
關係運算符：用於進行比較的運算符。
主要有小於（<）、大於（>）、等於（==）、大於等於（>=）、小於等於（<=）、不等（!=）、恆等（===）、不恆等（!==）。
邏輯運算符：邏輯運算符一般用於布爾值的操做，返回結果是一個布爾類型，通常和關係運算符配合使用；
有三個邏輯運算符：邏輯與(AND)、邏輯或(OR)、邏輯非(NOT)。
字符串鏈接運算符：是用於兩個字符串型數據之間的運算符，它的做用是將兩個字符串鏈接起來。
在JavaScript中，可使用+和+=運算符對兩個字符串進行鏈接運算。
三目操做符（條件運算符）：？ 根據不一樣的條件，執行不一樣的操做/返回不一樣的值。

10 JavaScript條件語句

分爲四種條件語句：

If 語句：只有當指定條件爲true時，使用該語句來執行代碼
if-else 語句：當條件爲true時執行代碼，當條件爲false時執行其餘代碼
if-else if-else 語句：使用該語句來選擇多個代碼塊之一來執行
switch 語句：同上，switch的工做原理呢？

首先設置表達式n(一般是一個變量)，隨後表達式的值會與結構中的每一個case值做比較；
若是存在匹配則該關聯代碼塊執行；而後使用break來阻止代碼自動的向下一個case運行；
default關鍵詞來規定匹配不存在時作的事情。

11 JavaScript 不一樣類型的循環

常見的循環主要是三種：for 循環、while 循環、do/while 循環。

for 循環：代碼塊有必定的次數。for 有三個表達式：1 聲明循環變量 2 判斷循環條件 3 更新循環變量
特色：先判斷再執行，與while相同。
while 循環：當指定的條件爲true時循環指定的代碼塊
do/while 循環：同while循環同樣。
特色：先執行再判斷，即便初始條件不成立，do/while循環至少執行一次。

循環結構的執行步驟：

聲明變量
判斷循環條件
執行循環體操做
更新循環變量
最後執行循環2-4，直到條件不成立，跳出循環

12 JavaScript Break 和Continue 語句

break：跳出本層循環，繼續執行循環後面的語句。
若是循環有多層，則break只能跳出一層。
continue：跳過本次循環剩餘的代碼，繼續執行下一次循環。
對與for循環，continue以後執行的語句，是循環變量更新語句i++；
對於while、do-while循環，continue以後執行的語句，是循環條件判斷；
所以，使用這兩個循環時，必須將continue放到i++以後使用，不然，continue將跳過i++進入死循環。

13 JavaScript 錯誤處理使用 try ... catch ... finally

一種是程序寫的邏輯不對，致使代碼執行異常；
一種是執行過程當中，程序可能遇到沒法預測的異常狀況而報錯。
throw 聲明
onerror 事件

14 JavaScript 框架（庫）

jQuery 庫

jQuery 函數是 $() 函數（jQuery 函數）。
jQuery 庫包含如下功能：
HTML 元素選取、元素操做、CSS 操做、HTML 事件函數、JavaScript 特效和動畫、HTML DOM 遍歷和修改、AJAX、Utilities
面向對象編程包括建立對象、原型繼承、class繼承。
類是對象的類型模板；實例是根據類建立的對象。
jQuery 優勢：