簡介

• JavaScript 是世界上最流行的語言之一，是一種運行在客戶端的腳本語言 （Script 是腳本的意思）
• 腳本語言：不需要編譯，運行過程中由 js 解釋器( js 引擎）逐行來進(jìn)行解釋并執(zhí)行
• 現(xiàn)在也可以基于 Node.js 技術(shù)進(jìn)行服務(wù)器端編程

JavaScript的作用

• 表單動態(tài)校驗（密碼強(qiáng)度檢測） （ JS 產(chǎn)生最初的目的 ）
• 網(wǎng)頁特效
• 服務(wù)端開發(fā)(Node.js)
• 桌面程序(Electron)
• App(Cordova)
• 控制硬件-物聯(lián)網(wǎng)(Ruff)
• 游戲開發(fā)(cocos2d-js)

瀏覽器執(zhí)行 JS 簡介

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

JS 的組成

ECMAScript

ECMAScript 是由ECMA 國際（ 原歐洲計算機(jī)制造商協(xié)會）進(jìn)行標(biāo)準(zhǔn)化的一門編程語言，這種語言在萬維網(wǎng)上應(yīng)用廣泛，它往往被稱為 JavaScript或 JScript，但實際上后兩者是 ECMAScript 語言的實現(xiàn)和擴(kuò)展。

ECMAScript：規(guī)定了JS的編程語法和基礎(chǔ)核心知識，是所有瀏覽器廠商共同遵守的一套JS語法工業(yè)標(biāo)準(zhǔn)。

DOM——文檔對象模型

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

BOM——瀏覽器對象模型

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

JS 初體驗

JS 有3種書寫位置，分別為行內(nèi)、內(nèi)嵌和外部。
1、行內(nèi)式

<input type="button" value="點我啊" onclick="alert('點我干哈')">

• 可以將單行或少量 JS 代碼寫在HTML標(biāo)簽的事件屬性中（以 on 開頭的屬性），如：onclick
• 注意單雙引號的使用：在HTML中我們推薦使用雙引號, JS 中我們推薦使用單引號
• 可讀性差， 在html中編寫JS大量代碼時，不方便閱讀；
• 引號易錯，引號多層嵌套匹配時，非常容易弄混；
• 特殊情況下使用
  2、內(nèi)嵌式

  <script>
        // alert('歡迎來到王者峽谷')
        console.log('你在哪里')
    </script>

• 可以將多行JS代碼寫到 script 標(biāo)簽中
• 內(nèi)嵌 JS 是學(xué)習(xí)時常用的方式

3.外部JS文件

<script src="../../js/my.js"></script>

• 利于HTML頁面代碼結(jié)構(gòu)化，把大段 JS代碼獨立到 HTML 頁面之外，既美觀，也方便文件級別的復(fù)用
• 引用外部 JS文件的 script 標(biāo)簽中間不可以寫代碼
• 適合于JS 代碼量比較大的情況

JavaScript注釋

單行注釋

//
/* adada*/

JavaScript輸入輸出語句

變量的使用

• 變量的聲明
• 變量的賦值

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

• var 是一個 JS關(guān)鍵字，用來聲明變量( variable 變量的意思 )。使用該關(guān)鍵字聲明變量后，計算機(jī)會自動為變量分配內(nèi)存空間，不需要程序員管
• age 是程序員定義的變量名，我們要通過變量名來訪問內(nèi)存中分配的空間
  賦值

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

同時聲明多個變量

var name = 'zhansan', age=18, sex = 1;

變量命名規(guī)范

• 由字母(A-Za-z)、數(shù)字(0-9)、下劃線(_)、美元符號( $ )組成，如：usrAge, num01, _name
• 嚴(yán)格區(qū)分大小寫。var app; 和 var App; 是兩個變量
• 不能 以數(shù)字開頭。 18age 是錯誤的
• 不能 是關(guān)鍵字、保留字。例如：var、for、while
• 變量名必須有意義。 MMD BBD nl → age
• 守駝峰命名法。首字母小寫，后面單詞的首字母需要大寫。myFirstName

數(shù)據(jù)類型的分類

JS 把數(shù)據(jù)類型分為兩類：

• 簡單數(shù)據(jù)類型 （Number,String,Boolean,Undefined,Null）
• 復(fù)雜數(shù)據(jù)類型 （object)
  

交換變量和判斷數(shù)字

  <script>
        var name1 = '張三';
        var name2 = '李四';
        var temp;
        temp = name1;
        name1 = name2;
        name2 = temp;
        console.log(name1);
        console.log(name2)
        // 判斷 一個變量 非數(shù)字 是數(shù)字false  不是true
        console.log(isNaN(12))
        console.log(isNaN('老師真帥'))
    </script>

• 字符串長度和字符串拼接、布爾型Boolean

 <script>
        var str = '李濟(jì)帥嗎';
        alert(str.length);
        var str2 = '真的嗎';
        alert(str+str2);
        alert(true + 1);
        alert(false + 1);
    </script>

• Undefined和 Null
  一個聲明后沒有被賦值的變量會有一個默認(rèn)值undefined ( 如果進(jìn)行相連或者相加時，注意結(jié)果）
  一個聲明變量給 null 值，里面存的值為空（學(xué)習(xí)對象時，我們繼續(xù)研究null)

var  varible;
console.log(varible)
console.log('nihao' +varible);
console.log(12 + varible);
console.log(true +varible);
var vari = null;
console.log(vari)
console.log('nihao' +vari);
console.log(12 + vari);
console.log(true +vari); 

獲取變量數(shù)據(jù)類型

typeof 可用來獲取檢測變量的數(shù)據(jù)類型

<script>
        var num = 10
        console.log(typeof num) // number
        var str = 'hehe'
        console.log(typeof str) // string
        var flag = true
        console.log(typeof flag) // boolean
        var vari = undefined
        console.log(typeof vari) // undefined
        var vari2 = null
        console.log(typeof vari2) // object

        var age = prompt('請輸入您的年齡');
        console.log(age)
        console.log(typeof age)
        
    </script>

轉(zhuǎn)化為字符型

 <script>
        var num = 1000
        // 1
        var str = num.toString()
        console.log(str)
        console.log(typeof str)
        // 2
        console.log(typeof String(num))
        // 3
        str =  num + ''
        console.log(typeof  str)
    </script>

轉(zhuǎn)化為數(shù)字型

 <script>
        var num = '3.64';
        var res = parseInt(num) // 取整
       console.log(res)
       console.log(typeof res)
       console.log(parseInt('120px')) // 120
       console.log(parseInt('rem120px')) // nan
       console.log(parseFloat('2.23')) // nan
        var haha = Number('121')
       console.log(typeof  haha) 
    </script>

運算符（操作符）

• 算數(shù)運算符
• 遞增和遞減運算符
• 比較運算符
• 邏輯運算符
• 賦值運算符

算數(shù)運算符

遞增和遞減運算符

• 前置遞增運算符
  ++num 前置遞增，先自加，后返回值
  后置遞增運算符, 先返回原值，后自加

比較運算符

邏輯運算符
邏輯運算符概述
概念：邏輯運算符是用來進(jìn)行布爾值運算的運算符，其返回值也是布爾值。后面開發(fā)中經(jīng)常用于多個條件的判斷

運算符優(yōu)先級

流程控制

if else語句（雙分支語句）

// 條件成立  執(zhí)行 if 里面代碼，否則執(zhí)行else 里面的代碼
if (條件表達(dá)式) {
    // [如果] 條件成立執(zhí)行的代碼
} else {
    // [否則] 執(zhí)行的代碼
}

if else if 語句(多分支語句)

// 適合于檢查多重條件。
if (條件表達(dá)式1) {
    語句1；
} else if (條件表達(dá)式2)  {
    語句2；
} else if (條件表達(dá)式3)  {
   語句3；
 ....
} else {
    // 上述條件都不成立執(zhí)行此處代碼
}

三元表達(dá)式

表達(dá)式1 ? 表達(dá)式2 : 表達(dá)式3;

如果表達(dá)式1為 true ，則返回表達(dá)式2的值，如果表達(dá)式1為 false，則返回表達(dá)式3的值

 <script>
        var age = prompt("請輸入你的年齡")
        if (age >= 18 && age <100){
            alert("可以和我去網(wǎng)吧里偷耳機(jī)了")
        } else if(age< 18 && age >0){
            alert("消停學(xué)習(xí)吧")
        } else {
           alert("輸入有誤")
        }
    </script>

switch分支流程控制

語法結(jié)構(gòu)
switch 語句也是多分支語句，它用于基于不同的條件來執(zhí)行不同的代碼。當(dāng)要針對變量設(shè)置一系列的特定值的選項時，就可以使用 switch。

 <script>

        switch (3) {
            case 1:
                console.log('這是1');
                break;
            case 2:
                console.log('這是2');
                break;
            case 3:
                console.log('這是3');
                break;
            default:
                console.log('沒有匹配結(jié)果');

        }
    </script>

循環(huán)

for循環(huán)

for(初始化變量; 條件表達(dá)式; 操作表達(dá)式 ){
    //循環(huán)體
}

雙重 for 循環(huán)語法

for (外循環(huán)的初始; 外循環(huán)的條件; 外循環(huán)的操作表達(dá)式) {
    for (內(nèi)循環(huán)的初始; 內(nèi)循環(huán)的條件; 內(nèi)循環(huán)的操作表達(dá)式) {  
       需執(zhí)行的代碼;
   }
}

<script>
        var str = '';
        for (var i = 1; i <= 9; i++) { // 外層循環(huán)控制行數(shù)
            for (var j = 1; j <= i ; j++) {
                str += j + 'x' + i + '=' + j*i + '\t';
            }
            // 換行
            str += '\n';
        }
        console.log(str)

    </script>

while循環(huán)

while (條件表達(dá)式) {
    // 循環(huán)體代碼 
}

do-while循環(huán)

do {
    // 循環(huán)體代碼 - 條件表達(dá)式為 true 時重復(fù)執(zhí)行循環(huán)體代碼
} while(條件表達(dá)式);

  <script>
        // while循環(huán)案例
        // 1. 打印人的一生，從1歲到100歲
        var i = 1;
        while (i <= 100) {
            console.log('這個人今年' + i + '歲了');
            i++;
        }

        // // 3. 彈出一個提示框， 你愛我嗎？  如果輸入我愛你，就提示結(jié)束，否則，一直詢問。
        // var message = prompt('你愛我嗎?');
        // while (message !== '我愛你') {
        //     message = prompt('你愛我嗎?');
        // }
        // alert('我也愛你??！');
    </script>

continue、break

continue 跳出本次循環(huán)，執(zhí)行下一次循環(huán)
break 跳出本層循環(huán)

數(shù)組

<script>
        //  new 數(shù)組
        var arr = new Array();
        //
        var arr1 = [];
        //
        var arr2 = [1, 22, 'haha', true];
        console.log(arr)
        console.log(arr1)
        console.log(arr2)
        console.log(arr2[2])

    </script>

數(shù)組的遍歷

 <script>
        var arr = ['red', 'yellow', 'green']
        for (var i = 0; i < arr.length ; i++) {
            console.log(arr[i])
        }

    </script>

求數(shù)組中最大的值

<script>
        var arr = [21, 34, 343, 433, 434,7676];
        var max = arr[0]
        for (var i = 0; i < arr.length ; i++) {
            if(arr[i]> max){
                max = arr[i]
            }
        }
        console.log(max)
    </script>