簡介

image

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

JavaScript的作用

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

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

image

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

JS 的組成

image

ECMAScript

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

image

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

DOM——文檔對(duì)象模型

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

BOM——瀏覽器對(duì)象模型

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

JS 初體驗(yàn)

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

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

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

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

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

3.外部JS文件

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

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

JavaScript注釋

單行注釋

//
/* adada*/

JavaScript輸入輸出語句

image

變量的使用

變量的聲明
變量的賦值

//  聲明變量  
var age; //  聲明一個(gè) 名稱為age 的變量

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

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

同時(shí)聲明多個(gè)變量

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

變量命名規(guī)范

由字母(A-Za-z)、數(shù)字(0-9)搞挣、下劃線(_)带迟、美元符號(hào)( $ )組成，如：usrAge, num01, _name
嚴(yán)格區(qū)分大小寫囱桨。var app; 和 var App; 是兩個(gè)變量
不能以數(shù)字開頭仓犬。 18age 是錯(cuò)誤的
不能是關(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)

image

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

  <script>
        var name1 = '張三';
        var name2 = '李四';
        var temp;
        temp = name1;
        name1 = name2;
        name2 = temp;
        console.log(name1);
        console.log(name2)
        // 判斷 一個(gè)變量 非數(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
一個(gè)聲明后沒有被賦值的變量會(huì)有一個(gè)默認(rèn)值undefined ( 如果進(jìn)行相連或者相加時(shí)制圈，注意結(jié)果）
一個(gè)聲明變量給 null 值们童，里面存的值為空（學(xué)習(xí)對(duì)象時(shí)，我們繼續(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);

image

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

typeof 可用來獲取檢測(cè)變量的數(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('請(qǐng)輸入您的年齡');
        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>

image

運(yùn)算符（操作符）

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

算數(shù)運(yùn)算符

image

遞增和遞減運(yùn)算符

前置遞增運(yùn)算符
++num 前置遞增鲸鹦，先自加慧库，后返回值
后置遞增運(yùn)算符, 先返回原值，后自加

比較運(yùn)算符

image

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

image

賦值運(yùn)算符

image

運(yùn)算符優(yōu)先級(jí)

image

流程控制

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("請(qǐng)輸入你的年齡")
        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)要針對(duì)變量設(shè)置一系列的特定值的選項(xià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 時(shí)重復(fù)執(zhí)行循環(huán)體代碼
} while(條件表達(dá)式);

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

        // // 3\. 彈出一個(gè)提示框， 你愛我嗎我纪？  如果輸入我愛你慎宾，就提示結(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>

image

數(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>

javaScript_day01

javaScript_day01

簡介

JavaScript的作用

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

JS 的組成

ECMAScript

DOM——文檔對(duì)象模型

BOM——瀏覽器對(duì)象模型

JS 初體驗(yàn)

3.外部JS文件

JavaScript注釋

變量的使用

變量命名規(guī)范

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

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

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

轉(zhuǎn)化為字符型

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

運(yùn)算符（操作符）

算數(shù)運(yùn)算符

遞增和遞減運(yùn)算符

比較運(yùn)算符

流程控制

switch分支流程控制

循環(huán)

while循環(huán)

do-while循環(huán)

continue之宿、break

數(shù)組

數(shù)組的遍歷

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