教程：JS學習

程式碼當酒喝發表於2020-12-20
JS

這裡寫目錄標題

保姆級教程，你甚至可以拿去當教案，因為我也是複製貼上加自己總結

1.介紹JavaScript

js

JavaScript一種輕量級的指令碼語言，也是一種嵌入式（embedded）語言，是一種 物件模型 語言，簡稱 JS。
JavaScript被認為是客戶端“指令碼”，它不常叫“語言”，言外之意是比較簡單，但是深入瞭解之後，你會發現，簡單的外表下，蘊藏著豐富的內涵。

歷史(喜歡就看看)

1994年Netscape（網景）公司推出免費版本瀏覽器 Netscape Navigator(網景瀏覽器1.0)
1995年微軟公司釋出 Internet Explorer 1.0。
1995年網景公司為適應市場變化，需要開發一門專門在瀏覽器執行的指令碼語言，這個任務交給了布蘭登，為了應付公司安排的任務，
他只用10天時間就提交了工作，並將這門語言命名為 LiveScript;
後來為了蹭sun公司java的熱度,與sun公司合作，將其臨時改名為“JavaScript”;
1996年8月，微軟模仿JavaScript開發了一種相近的語言，取名為JScript，首先內建於IE 3.0。
1997年7月，ECMA組織（歐洲計算機制造商協會）釋出ECMAScript 1.0版；
此後，明爭暗鬥不斷，1998年6月，ECMAScript 2.0版釋出，1999年12月，ECMAScript 3.0版釋出；
2007年10月，ECMAScript 4.0版草案發布，2008年7月中止ECMAScript 4.0的開發，併發布3.1版本；
會後不久，ECMAScript 3.1就改名為ECMAScript 5。
2011年6月，ECMAscript 5.1版釋出，現在使用最為廣泛的版本 版釋出，現在使用最為廣泛的版本；
2015年6月，ECMAScript 6正式釋出，並且更名為“ECMAScript 2015”；
隨後，ECMA組織決定，每年釋出一個升級版本，以年號來代替版本號，如：ECMAScript 2016、ECMAScript 2017；

總結：es6 = ECMAScript 2015

課外知識：
1996年，樣式表標準CSS第一版釋出；
1997年，DOM模式第一版正式應用，目前的通用版本是DOM3，下一代版本DOM 4正在擬定中。
1999年，IE5部署了XMLHttpRequest介面，允許JavaScript發出HTTP請求；
2001年，提出了JSON格式，用於取代XML格式。
2002年，Mozilla專案釋出第一版Firefox。
2003年，蘋果公司釋出了Safari瀏覽器的第一版。
2006年，jQuery函式庫誕生
2007年，Webkit引擎在iPhone手機中得到部署；
2008年，為Chrome瀏覽器而開發的V8編譯器(解析引擎)誕生；
2009年，基於V8解析引擎的Node.js專案誕生,迎來前後端JS的霸權時代；
2009年，Google釋出Chrome OS
2009年，Google釋出Angular框架；
2013年，Mozilla基金會發布手機作業系統Firefox OS，該作業系統的整個使用者介面都使用JavaScript；
2013年5月，Facebook釋出UI框架庫React；
2014年，尤雨溪釋出開源前端開發庫Vue.js；
2015年3月，Facebook公司釋出了 React Native專案；

ECMAScript和JavaScript

ECMA是一個組織，是歐洲計算機協會。是它制定了JavaScript的標準
ECMAScript簡稱ES，比如ES5就表示ECMAScript5版本，ES6就表示ECMAScript6版本。JavaScript簡稱JS，JS的版本隨ECMAScript的版本變化而變化。
ECMAScript只是JavaScript的核心，我們現在學習的JavaScript包括JS的核心ECMAScript，並且還包含DOM和BOM。

總結：JavaScript = ECMAScript+DOM+BOM

JS的強大用作用

資料驗證（表單驗證）
網頁特效（目前大多數的網頁特效都是通過JS編寫）
編寫網頁小遊戲
伺服器端程式設計，資料互動（Ajax、Node.js）

2.如何學習JS

開發工具

“工欲善其事，必先利其器”

名稱描述廠家
vscode開源的微軟產品
phpstrom、webstrom收費的JetBrains 公司

總結：vscode白嫖天下第一

除錯瀏覽器

就用下面幾個就行了，別的瀏覽器不推薦。

名稱核心
Edgewebkit
chromewebkit
firefoxGecko
sarfiwebkit

總結：最新的edge微軟的天下第一，開發者工具支援中文，爽

3.語言基礎

程式碼位置

程式碼位置一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.log("可以放在");
    </script>
    
</head>
<body>
    
</body>
</html>

程式碼位置二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./demo.js"></script>

</head>
<body>
    
</body>
</html>

console.log("不用寫script標籤了，直接開擼程式碼")

在這裡插入圖片描述

輸出

document.write(輸出的內容); //這種輸出的內容會顯示在瀏覽器頁面上
alert(輸出的內容); //這種方法輸出的內容會以提示框的形式顯示
console.log(輸出的內容); //輸出的內容會顯示在瀏覽器的控制檯

語句和表示式

JavaScript程式的執行單位為行（line），也就是一行一行地執行。一般情況下，每一行就是一個語句。

語句（statement）是為了完成某種任務而進行的操作，比如下面就是一行賦值語句

var a = 1 + 3

這條語句先用var命令，宣告瞭變數a，然後將1 + 3的運算結果賦值給變數a
1 + 3叫做表示式（expression），指一個為了得到返回值的計算式

語句和表示式的區別在於，前者主要為了進行某種操作，一般情況下不需要返回值；後者則是為了得到返回值，一定會返回一個值

凡是JavaScript語言中預期為值的地方，都可以使用表示式。比如，賦值語句的等號右邊，預期是一個值，因此可以放置各種表示式。一條語句可以包含多個表示式。

語句以分號結尾，一個分號就表示一個語句結束。多個語句可以寫在一行內。

var a = 1 + 3 ; var b = ‘abc’;

分號前面可以沒有任何內容，JavaScript引擎將其視為空語句。

;;;

上面的程式碼就表示3個空語句

    <script>
        console.log("A")
        console.log(1+1)
    </script>

JS語言中，一條語句結束，可以不用寫分號，直接用回車即可。但是建議大家每條語句後面都加分號

註釋

單行註釋：//這是一行註釋
多行註釋：/這是一段註釋/

4.變數

什麼是變數

變數是計算機記憶體中儲存資料的識別符號，根據變數名稱可以獲取到記憶體中儲存的資料

為什麼要使用變數

使用變數可以方便的獲取或者修改記憶體中的資料

如何使用變數

var a = 1; //宣告變數，賦初值為1
var b; //宣告變數，但是沒有給初始值
b = 2;//給變數賦值
var c = 3, d=4, e,f=5;//一次性宣告多個變數 注意：這裡是用逗號

//使用，直接不用攜帶var 用就行了
console.log(a,b,c,d,e,f); //1 2 3 4 undefined 5

變數命名規則

規則

由字母、數字、下劃線、$符號組成，且不能以數字開頭
不能是關鍵字和保留字，例如：for、while、this、name
區分大小寫

規範

遵守駝峰命名法。(首字母小寫，後面單詞的首字母需要大寫。例如：userName、userPassword）

宣告變數沒有賦值

        var a;
        console.log(a);

結果是
在這裡插入圖片描述
總結：沒有賦值預設時undefined

重新宣告變數

         var x = 10;
        var x;
        console.log(x);

結果
在這裡插入圖片描述

總結：只宣告沒有賦值，不會改變原來的結果，這一點和php是一樣的。

變數提升(hoisting)

        console.log(a);
        var a = 10; //undefined

這段程式碼執行的時候會變成這樣

var a;
console.log(a); //會把變數的宣告提升到使用變數之前，所以結果是undefined
a = 10;

5.常量

定義常量

JS中定義常量，只有const語法

//定義常量
const A = 123;
console.log(A); // 123


        const a = 100;

        a = 200;
        console.log(a);

在這裡插入圖片描述

總結：常量定義了，就不能賦值改變。

常量的作用域

     for(i=0;i<3;i++){
         const a = 4;
         console.log(a);
     }

     console.log(a);

在這裡插入圖片描述

總結：常量的作用域，是常量所在的塊。（塊可以理解為大括號）

6.運算子

賦值運算子(Assignment operators)

賦值運算子是一個 “=”。表示將“=”後面的內容賦值給左邊的內容。

比較運算子(Comparison operators)

案例一：

var a =1;
    if(a>0){
        alert("是");
    }else{
        alert("否");
    }

案例二：

 var a =1, b = "b";
    if(a=b){
        console.log("true")
    }else{
        console.log("false")
    }

案例解析：
先把b賦值給a，實際上是判斷賦值後的結果 字串"b"，字串轉換為boolean型別則是true

算數運算子(Arithmetic operators)

加減乘除取餘

取餘操作演示

  var a = 3, b = 4;
        console.log(a % b);//3

案例：不用第三個變數交換變數的值

var a=10,b=20;

解：

      var a=10,b=20;
        a = a+b;//a = 30
        b = a-b;//b = 30-20 = 10 注意：此時的b已經從20變成10
        a = a-b; // a = 30 -10 
      
        console.log("a="+a,"b="+b);

在這裡插入圖片描述
總結：看似簡單，剛開始可能還沒思路。

邏輯運算子(Logical operators)

這個還真不怎麼好理解

    var a = 1,b=2,c=0,d=false;
    
    var x1 = a || b; 
    var y1 = c || b;

    console.log(x1); //1
    console.log(y1); //2
        
    // ||總結：如果左邊為true 則等於左邊，左邊為false，則等於右邊

    var x2 = a && b;  
    var y2 = c && b; 

    console.log(x2); //2
    console.log(y2); //0

  // &&總結：如果左邊為true 則等於右邊，左邊為false，則等於左邊

別看這個是小知識點，很多封裝的外掛中就有這個寫法的使用，基礎不好很難閱讀。


        // &&的高階示例

        //   如果這個函式存在就呼叫
        if (f1) {
            f1();
        }
        // 簡寫
        f1 && f1();

        //||的高階示例
        //相容瀏覽器的寫法
        var e = window.event || evt;

字串運算子(String operators)

php中用.來拼接字串
js中使用+號來連線字串

     console.log(2+2);
        console.log(2+"js");
        console.log("hello"+"js");

在這裡插入圖片描述

條件（三元）運算子(Conditional operator)

元，表示參與運算的引數個數。三元意思就是參與運算的有三個值。

var a = (b>c) ? x : y;

一元運算子(Unary operators)

var a = 2, b = 3;
var c = a++; // var c = a; a = a+1
var d = ++b; // b = b+1; var d=b;
console.log(a, b , c, d); // a=3, b=4, c=2, d=4

總結：++在後是先賦值後運算，++/–在前是先運算後賦值。

相關文章