簡介

image

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

JavaScript的作用

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

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

image

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

JS 的組成

image

ECMAScript

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

image

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

DOM——文檔對象模型

文檔對象模型（DocumentObject Model赫悄，簡稱DOM），是W3C組織推薦的處理可擴展標記語言的標準編程接口想际。通過 DOM 提供的接口可以對頁面上的各種元素進行操作（大小、位置畸悬、顏色等）

BOM——瀏覽器對象模型

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

JS 初體驗

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

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

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

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

可以將多行JS代碼寫到 script 標簽中
內(nèi)嵌 JS 是學習時常用的方式

3.外部JS文件

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

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

JavaScript注釋

單行注釋

//
/* adada*/

JavaScript輸入輸出語句

image

變量的使用

變量的聲明
變量的賦值

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

var 是一個 JS關(guān)鍵字烟阐，用來聲明變量( variable 變量的意思 )搬俊。使用該關(guān)鍵字聲明變量后，計算機會自動為變量分配內(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
嚴格區(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）
復雜數(shù)據(jù)類型（object)

image

交換變量和判斷數(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 = '李濟帥嗎';
        alert(str.length);
        var str2 = '真的嗎';
        alert(str+str2);
        alert(true + 1);
        alert(false + 1);
    </script>

Undefined和 Null
一個聲明后沒有被賦值的變量會有一個默認值undefined ( 如果進行相連或者相加時菇曲，注意結(jié)果）
一個聲明變量給 null 值，里面存的值為空（學習對象時抚吠，我們繼續(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 可用來獲取檢測變量的數(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>

image

運算符（操作符）

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

算數(shù)運算符

image

遞增和遞減運算符

前置遞增運算符
++num 前置遞增烘浦，先自加，后返回值
后置遞增運算符, 先返回原值项阴，后自加

比較運算符

image

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

image

賦值運算符

image

運算符優(yōu)先級

image

流程控制

if else語句（雙分支語句）

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

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

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

三元表達式

表達式1 ? 表達式2 : 表達式3;

如果表達式1為 true ，則返回表達式2的值何址，如果表達式1為 false里逆，則返回表達式3的值

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

switch分支流程控制

語法結(jié)構(gòu)
switch 語句也是多分支語句，它用于基于不同的條件來執(zhí)行不同的代碼用爪。當要針對變量設(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(初始化變量; 條件表達式; 操作表達式 ){
    //循環(huán)體
}

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

for (外循環(huán)的初始; 外循環(huán)的條件; 外循環(huán)的操作表達式) {
    for (內(nèi)循環(huán)的初始; 內(nèi)循環(huán)的條件; 內(nèi)循環(huán)的操作表達式) {  
       需執(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 (條件表達式) {
    // 循環(huán)體代碼 
}

do-while循環(huán)

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

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

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>

JavaScript1

JavaScript1

簡介

JavaScript的作用

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

JS 的組成

ECMAScript

DOM——文檔對象模型

BOM——瀏覽器對象模型

JS 初體驗

3.外部JS文件

JavaScript注釋

變量的使用

變量命名規(guī)范

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

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

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

轉(zhuǎn)化為字符型

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

運算符（操作符）

算數(shù)運算符

遞增和遞減運算符

比較運算符

流程控制

switch分支流程控制

循環(huán)

while循環(huán)

do-while循環(huán)

continue阿弃、break

數(shù)組

數(shù)組的遍歷

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