第二章前端開發——JavaScript

時間 2019-11-19

標籤第二前端開發 javascript 欄目 JavaScript 简体版

原文原文鏈接

第二章前端開發學習——JavaScriptjavascript

1、初識JavaScriptcss

2、JavaScript基礎html

3、JavaScript數據類型前端

4、JavaScript運算符java

5、JavaScript流程控制node

6、JavaScript函數與對象python

7、JavaScript實用技巧正則表達式

8、JavaScript事件Event數據庫

9、JavaScript內置對象編程

1、初識JavaScript

什麼是JavaScript（what）：

JavaScript，一般會簡稱爲'JS', 是一種瀏覽器腳本語言。

JavaScript特色：

JavaScript是一種腳本編程語言
JavaScript是一種解釋型語言
Javas的語法結構與C++、java十分相似
JavaScript是弱類型語言
***********************註釋***************************

動態類型：不須要提早爲變量指定數據類型

靜態類型：須要爲變量提早指定數據類型

強類型：數據類型不能自動轉換

弱類型：數據庫能夠自動轉換
JavaScript：弱類型動態類型
Python：強類型動態類型
********************************************************

JavaScript是事件驅動的語言
JavaScript是一種基於對象的語言
JavaScript具備跨平臺性
JavaScript具備安全性與簡單性

JavaScript版本：

ECMAScript3.0
ECMAScript5.0
ECMAScript6.0 (ECMA201五、ECMAScript201六、ECMAScript2017)

JavaScript應用領域：

WEB前端 (網頁)
後端（node.js）
混合APP(IOS 安卓)
遊戲

2、JavaScript基礎

1.如何在Html中使用JS

①引入外部腳本文件

②在<script>標籤內寫代碼

③經過事件屬性定義在元素內部

2.JavaScript註釋

單行註釋

多行註釋

3.語句結束符（爲了方便記憶末尾都加上分號，實際也能夠不使用分號）

4.JavaScript中的輸出

①輸出到控制檯

②輸出到屏幕

③彈窗

5.JavaScript變量定義

變量名規範：

標識符必須由 "數字","字母", "_" 或者 "$" 組成,而且不能以數字開頭
標識符不能與保留字（關鍵字）衝突
區分大小寫（user_name/userName(推薦)/UserName/UserNameAge）

6.JavaScript彈框

①警告框alert（沒有返回值）

②確認框confirm（返回布爾值True/False）

③輸入框prompt（返回用戶輸入的內容，點擊取消視爲null）

7.獲取html中的DOM屬性

document.getElementById()

eleObj.innerHTML 獲取/設置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>簡易計算器</title>
    <style>
        input {
            width: 300px;
            font-size: 16px;
            line-height: 18px;
            padding:10px;
            border: 1px solid #ccc;
        }
        
        button {
            padding: 10px 20px;
            border: 1px solid #ccc;
            background: #f5f5f5;
        }
        .res {
            width: 300px;
            height: 100px;
            padding: 10px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>計算器</h1>
    <hr>
    
    <table>
        <tr>
            <td>加數1：</td>
            <td>
                <input type="text" id="num1">
            </td>
        </tr>

        <tr>
            <td>加數2：</td>
            <td>
                <input type="number" id="num2">
            </td>
        </tr>

        <tr>
            <td></td>
            <td>
                <button onclick="add()">+</button>
            </td>
        </tr>

        <tr>
            <td></td>
            <td>
                <div class="res" id="box"></div>
            </td>
        </tr>
    </table>

    <script>
        
        //定義函數
        function add() {
            // 獲取 用戶在 input 中輸入的內容
            // 獲取元素對象 返回對象 對象描述 id是num1的元素 
            var inputEle1 = document.getElementById('num1');
            var inputEle2 = document.getElementById('num2');

            //獲取用戶在input中輸入的值
            var v1 = inputEle1.value;
            var v2 = inputEle2.value;

            //判斷用戶輸入是不是純數字
            if (isNaN(v1)) {
                alert('加數1必須是純數字');
                return; 
            }
            if (isNaN(v2)) {
                alert('加數2必須是純數字');
                return;
            }

            //把字符串轉換爲數字
            v1 = Number(v1);
            v2 = Number(v2);

            //兩個數相加
            var sum = v1 + v2;

            //獲取放結果的div元素 innerHTML 獲取或者設置 雙標籤內的內容
            var boxEle = document.getElementById('box');
            boxEle.innerHTML = sum;

        }
    </script>
    
</body>
</html>

簡單計算器（加法）

3、JavaScript數據類型

1.數據類型分類

原始類型 Number(數字)、 String(字符串)、Boolean(布爾值)、Null(空)、Undefined(未定義）
對象類型 Object、Array、Date、Math、Error Set(ES6).....
函數檢測：typeof

2.Number數字類型

Tips：JavaScript不區分整型和浮點型

定義方式：

//十進制
var num = 100
//十六進制
var num = 0x10f
//科學計數法
var num = 123e100

浮點精度：

console.log(.1 + .2)

數值範圍：

可表示的數字範圍： -5e324 ~ 1.7976931348623157e+308

超過範圍，會顯示爲 Infinity(正無窮) 或 -Infinity(負無窮)

isFinite()    //函數判斷是否在範圍內

特殊值NaN：

表示Not A Number，類型是Number 但又不是常規的數字

和任何值都不相等

與任何值運算,結果仍是NaN

isNaN()    //函數 判讀是不是 NaN

3.String字符串類型

聲明方式：

①單引號：

②雙引號

③反引號

Tips：${}方式嵌入變量

轉義字符：

\b 退格         
\f 走紙換頁     
\n 換行         
\r 回車         
\t 水平製表符    
\' 單引號     
\" 雙引號     
\\ 反斜槓     
\xXX 十六進制XX指定的Latin-1 字符        
\xXXXX 十六進制XXXX指定的Unicode 字符

4.Boolean布爾值類型

let a = true
let b = false
while (true) {

}

5.null和undefined

null ：函數的默認返回值，表示未定義的對象（被動產生）
undefined ：沒有賦值的變量會默認爲undefined，表示"缺乏值"（被動產生）

6.數據類型轉換

①自動類型轉換

②強制類型轉換

4、JavaScript運算符

1.算數運算符

表達式 表達式一般由運算符和操做數組成。簡單表達式也有複雜表達式
表達式的特色表達式有計算結果
有些表達式還會產生額外的做用（對操做產生影響）

加法運算符 +
減法運算符 -
乘法運算符 *
除法運算符 /
模運算符 %
負號運算符 -
正號運算符 +
遞增運算符 ++（重要）
遞減運算符 --（重要）

2.關係運算符

相等運算符 ==
全等運算符 ===（推薦）
不等運算符 !=
不全等運算符 !==
小於運算符 <
大於運算符 >
小於或等於運算符 <=
大於或等於運算符 >=
in運算符判斷一個值是否屬於某個數組或者一個屬性是否屬於一個對象
instanceof 判斷一個對象的實例是否屬於某個對象

3.邏輯運算符

邏輯與 &&
邏輯或 ||
邏輯非 !

4.位運算符

按位與 &
按位或 |
按位異或 ^
按位非 ~
左移 <<
右移 >>

5.賦值運算符

=
+=
-=
/=
*=
%=

6.其餘運算符

條件運算符 ?:
typeof運算符判斷操做數類型
delete運算符刪除對象屬性或者數組元素
void運算符忽略操做數的值
逗號運算符 ,
字符串鏈接 +

5、JavaScript流程控制

1.條件語句（分支結構）

①單向分支if

if (表達式) {
    code...
}

注意：

當分支語句和循環語句結構體({}內) 只有一行代碼的時候，能夠省略{}

if (條件) 
    代碼

②雙向分支if...else...

if (表達式) {
    code...
} else {
    code...
}

③多向分支if...else if...

if (表達式) {
    code...
} else if (表達式) {
    code...
} else if (表達式) {
    code...
} else {
    code...
}

④多向分支switch...case..

switch (表達式) {
    case 表達式可能的值: code....; break;
    case 表達式可能的值: code....; break;
    case 表達式可能的值: code....; break;
    case 表達式可能的值: code....; break;
    default: code....;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>多向分支——switch</title>
</head>
<body>
    <h2>多向分支——switch</h2>
    <hr>
    <h3>請輸入生日</h3>
    <input type="date" id="dt">
    <button onclick="check_result()">查詢</button>


    <script type="text/javascript">
        function check_result() {
            var date = document.getElementById('dt').value;
            
            var year = Number(date.split('-')[0]);

            var animal = '';

            switch(year % 12) {
                case 0: animal = '猴'; break;
                case 1: animal = '雞'; break;
                case 2: animal = '狗'; break;
                case 3: animal = '豬'; break;
                case 4: animal = '鼠'; break;
                case 5: animal = '牛'; break;
                case 6: animal = '虎'; break;
                case 7: animal = '兔'; break;
                case 8: animal = '龍'; break;
                case 9: animal = '蛇'; break;
                case 10: animal = '馬'; break;
                case 11: animal = '羊'; break;
                default: animal = '驢';  //前面的條件都不知足
            }

            alert(animal);
        }
    </script>
</body>
</html>

生肖查詢

⑤分支結構嵌套

if (表達式) {
    if (表達式) {
        code....
    }
    code ...
} else {
    code...
}

2.循環語句

①while循環

while (循環條件) {
    //循環體
}

②do...while循環

do {
    code...
} while (循環條件)

③for循環

for (循環變量; 循環條件; 循環變量變化) {
    code ...
}

3.其餘語句

①跳轉語句

continue;   跳出當前循環  繼續下一次
break;      結束循環
return;     結束函數

②異常捕捉

try {
    tryCode - 嘗試執行代碼塊
}
catch(err) {
    catchCode - 捕獲錯誤的代碼塊
} 
finally {
    finallyCode - 不管 try / catch 結果如何都會執行的代碼塊
}

Tips：

嚴格模式

//寫在全部代碼的最前面
//開啓嚴格模式
‘use strict’

嚴格模式下聲明不加 var 會報錯
eval() 在嚴格模式不能用

6、JavaScript函數與對象

（一）函數

1.JavaScript定義函數

方式一：關鍵字方式（存在函數提高狀況，便可以先調用後定義）

方式二：表達式方式（不存在變量提高狀況）

2.JavaScript函數特色

函數名就是變量名
函數調用必須加 ()
關鍵字方式定義的函數，會存在函數提高（在函數定義的前面調用函數）

3.JavaScript函數參數

實參數量>形參數量多給的實參會被忽略
實參數量<形參梳理多出的形參，默認值undefined
//ES6 新增的語法
function demo(a, b=默認值) {

}
//有默認值的參數必定在後面
arguments對象能夠獲取全部的實參
只能在函數中使用
arguments是類數組對象，用法同數組，可使用for循環遍歷

4.回調函數

一個函數就能夠接收另外一個函數做爲參數，這種函數就稱之爲回調函數(高階函數)

//有名函數 從小到大
        function mySort(v1,v2) {
            /*if (v1 > v2) {
                return 5 //換過來 只要是正數 就會交換
            } else {
                return -7 //不變  只要是負數 就不換
            }*/

            return v1 - v2;
        }


        //有些方法的參數 要求就是函數
        var list = [10,23,1,456,8,3,5]; //數組 Array
        console.log(list);
        //排序 字符串排序
        //list.sort();
        //按照天然排序
        //list.sort(mySort)
        list.sort(function(v1, v2){
            return v1 - v2;
        })

        console.log(list);

數組排序

5.自調函數

函數生聲明完直接調用

Tips：要是寫JS文件的話，最好每一個JS文件都聲明一個自調函數，這樣每一個JS文件都有各自的做用域。

6.JavaScript做用域

①全局做用域

在函數外面，定義的變量是全局變量。哪均可以用

全局變量

②局部做用域

函數中使用定義的變量就是局部變量，只能在本函數中使用

Tips：

1.局部做用域中的變量加上var不會改變全局做用域的變量值

輸出結果爲小梅梅

2.局部做用域中的變量不加var會改變全局做用域的變量值

輸出結果爲小麗麗

總結：變量，使用var是聲明，沒有var是使用變量。若是在函數內使用var來聲明變量，在函數內會覆蓋同名的全局變量。

③變量提高

加var的狀況下才會出現變量提高
在變量聲明以前去使用變量會獲得 undefined ，而不是報錯
函數內，若是聲明瞭跟全局變量同名的局部變量，在聲明以前使用改變量，獲得undefined( 該變量已是局部的啦)

④做用域鏈

函數嵌套函數會造成做用域鏈
當一個做用域使用某個變量時，先從本做用域中找，若是沒有去父做用域，再沒有，父做用域的父做用域，一直到全局做用域。構成了一個做用域鏈

⑤塊狀做用域

使用let關鍵字聲明的變量會具備塊狀做用域。

局部做用域調內使用let，調用時報錯

全部的結構語句 for while do while if switch 都有塊狀做用域

7.閉包函數

當一個函數返回了一個函數後，其內部的局部變量還被新函數引用，造成閉包

（二）對象

1.構造函數和對象

JavaScript中沒有類的概念，JS中叫構造函數

構造函數就是類
function User([參數]) {
    this.屬性 = 值;
    this.屬性 = 值;
    
    this.方法 = function(){
        
    }
}

#實例一個對象
new 構造函數();
若是構造函數沒有參數 能夠 不加()

①定義構造函數（當作Python中的類使用）

注意：

A）函數名採用首字母大寫或者駝峯體命名法

B）聲明對象屬性用this（等同於python中的self）

this表示方法所屬的對象
全局函數中的this 指向 window

②實例化對象

若是構造函數沒有參數能夠不加()。

③使用對象的屬性

④調用對象方法

⑤全部的對象都有與之對應的構造函數，而且都有一個屬性【.constructor】用來查看其對應的構造函數

⑥對象屬性的增刪改查：

A）修改

console.log(obj.name)
obj.name = 'lili'

console.log(obj['name'])
obj['name'] = 'honghong'

B）刪除

delete obj['name']
delete obj.name

C）監測屬性是否存在

'name' in obj

2.原型和原型鏈

①原型

每一個對象都有原型（原型仍然是一個對象）
對象能夠繼承原型的屬性和方法
__proto__ 全部對象都有該屬性，該屬性指向該對象的原型

②原型鏈

原型做爲對象也有原型
原型的原型的原型就構成了原型鏈
使用對象中某個屬性的時候，先從對象中找，若是沒有，從原型上找，原型若是也沒有，繼續向上找，知道頂層（頂層的原型對象是一個類型(類)(構造函數)是Object 的對象）

3.JavaScript對象屬性的調用

①點.

②方括號[]

任意的對象均可以在對象實例化完成後，添加屬性和方法

4.使用Object構造函數

js內建的構造方法叫 Object
var obj = new Object()

josn方式定義對象
var obj = {屬性：值, 屬性:值} // new Object的簡寫
obj的構造含是 Object

7、JavaScript實用技巧

1.從頁面中獲取元素

document.getElementById() 根據ID的值
document.getElementsByTagName() 根據標籤名
document.getElmenntsByClassName() 根據class的值
document.getElementsByName() 根據name屬性的值
document.querySelector(css選擇器) 返回知足條件的第一個元素對象（經常使用）

document.querySelectorAll(css選擇器) 返回全部知足條件元素組成的類數組對象（經常使用）

2.修改元素的CSS樣式

①ele.style.css屬性名
②ele.style.background
③ele.style.border
④ele.style.backgroundColor
⑤ele.style['background-color']

3.改變元素內class的值

①ele.className 能夠賦值，也能夠獲取
②ele.classList.add(‘值’) 添加一個class值
③ele.classList.remove(‘值’) 刪除一個class值
④ele.classList.toggle(‘值’) 自動切換一個class值(有就刪除，沒有就添加)

4.JavaScript定時器

單詞定時

setTimeout(fn, delay)
clearTimeout()  清除定時

屢次定時

setInterval(fn, dealy)
clearInterval()  清除定時

範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定時案例</title>
    <style>
        h1 {
            margin-top:100px;
            text-align: center;
            font-size: 300px;
        }
    </style>
</head>
<body>
    <h1>10</h1>

    <script>
        var h1 = document.querySelector('h1');
        var m = 10;

        var time = setInterval(function(){
            h1.innerHTML = --m;

            //當m <= 0的時候
            if (m <= 0) {
                clearInterval(time); //清除定時
                h1.innerHTML = '你死定了'
            }
        }, 1000)




    </script>
</body>
</html>

倒計時範例

8、JavaScript事件Event

1.什麼是事件（what）：

JavaScript 使咱們有能力建立動態頁面。事件是能夠被 JavaScript 偵測到的行爲。

網頁中的每一個元素均可以產生某些能夠觸發 JavaScript 函數的事件。比方說，咱們能夠在用戶點擊某按鈕時產生一個 onClick 事件來觸發某個函數。事件在 HTML 頁面中定義。

2.如何將事件綁定給元素（how）：

方式一：（更經常使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>給元素綁定事件</title>
    <style>
        .list {
            list-style: none;
            padding: 0;
            margin: 0;
            width: 600px;
        }
        .list li {
            padding:10px;
            margin:5px 0px;
            border: 1px solid #ccc;
        }

        .list li.active {
            border-color: red;
            background: #ccc;
        }

    </style>
</head>
<body>
    <h1 >同志交友</h1>
    <hr>
    <ul class="list">
        <li>Lorem ipsum dolor sit amet.</li>
        <li class="item">Lorem ipsum dolor sit amet.</li>
        <li >Lorem ipsum dolor sit amet.</li>
        <li class="item">Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li class="item">Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li class="item">Lorem ipsum dolor sit amet.</li>
    </ul>


    <script>
        //獲取全部li的集合
        var lis = document.querySelectorAll('.list li');

        //遍歷 給每一個li 綁定單擊事件
        for (var i = 0; i < lis.length; i ++) {
            lis[i].onclick = function(){
                //把全部的li都去掉class active
                for (var j = 0; j < lis.length; j ++) {
                    lis[j].classList.remove('active');
                }

                //把當前的添加上
                this.classList.add('active')
            }
        }


        
    </script>
</body>
</html>

範例

①先獲取元素
②ele.onclick = function(){

　　..................
}

③獲取元素的類數組對象，遍歷，挨個給每一個元素綁定事件

方式二：

<button onclick="code..">

方式三：（標準方式）

addEventListener(Event, fn) (非IE IE9+)

attachEvent(Event, fn) (IE8-)

3.事件的捕獲與冒泡

捕獲階段：從祖先元素到子元素
冒泡階段：從子元素到祖先元素
事件默認在冒泡階段觸發

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的捕獲和冒泡</title>
    <style>
        #wrapper {
            width: 200px;
            height: 200px;
            border: 2px solid pink;
            background-color: #ccc;
        }
        #inner {
            width: 100px;
            height: 100px;
            margin: 50px;
            background: green;
        }
    </style>
</head>
<body>
    
    <h1>同志交友</h1>
    <hr>

    <div id="wrapper">
        <div id="inner"></div>
    </div>


    <script>
        //事件實在冒泡階段觸發的
        var wrapperEle = document.querySelector('#wrapper');
        var innerEle = document.querySelector('#inner');

        wrapperEle.addEventListener('click', function(){
            alert('我是大的');
        }, true)

        innerEle.addEventListener('click', function(event) {
            alert('我是小的');
            event.stopPropagation(); //阻止冒泡
        }, true)
    </script>

</body>
</html>

控制事件在捕獲階段觸發

4.事件列表

①鼠標事件

onclick         單擊
ondblclick       雙擊
oncontextmenu   右擊
onmouseover/onmouseenter       鼠標懸浮到元素上
onmouseout/onmouseleave        鼠標離開元素
onmousemove   鼠標在上面移動
onmousedown   鼠標的按鍵按下
onmouseup     鼠標的按鍵擡起

②鍵盤事件

keydown        鍵盤按鍵 按下
keyup        鍵盤按鍵 擡起
keypress     鍵盤按鍵 按下 (只有字符按鍵)  (控制按鍵不能夠 Ctrl shift 上下左右都不行)

經過keydown控制div移動位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鍵盤事件</title>
    <style>
        input {
            width: 300px;
            padding: 10px;
            border: 1px solid #ccc;
            font-size: 16px;
        }

        #res {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <input type="text" id="inputEle">
    <div id="res"></div>

    <script>
        
        var inputEle = document.querySelector('#inputEle');
        inputEle.onkeyup = function(){
            document.querySelector('#res').innerHTML = this.value;
        }
    </script>
</body>
</html>

經過keyup控制用戶輸入內容實時交互

③表單事件

submit 表單提交的時候, 綁定給form元素
reset 表單重置, 綁定給form元素
blur 失去焦點
focus 得到焦點
change 表單控制的內容改變一般綁定給 radio checkbox select 若是綁定給輸入的input, 必須知足內容改變和失去焦點才能觸發
select input 或 textarea 內容被選中的時候觸發

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地址聯動</title>
    <style>
        select {
            width: 100px;
            padding: 5px;
            font-size:16px;
        }
    </style>
</head>
<body>
    <h1>選擇地址</h1>
    <hr>
    <select id="prov"></select>
    <select id="city"></select>

    <script>
        //定義省市的信息
        var provList = ['江蘇','浙江','福建','湖南'];
        var cityList = [];
        cityList[0] = ['南京', '蘇州', '宿遷', '揚州'];
        cityList[1] = ['杭州', '溫州', '寧波', '台州'];
        cityList[2] = ['福州', '廈門', '泉州', '漳州'];
        cityList[3] = ['長沙', '湘潭', '株洲', '湘西'];

        //獲取select元素
        var provSelect = document.querySelector('#prov');
        var citySelect = document.querySelector('#city');


        //把省的信息 添加到第一個select元素中
        provList.forEach(function(val, index){
            //DOM操做  瞭解
            provSelect.add(new Option(val, index))
        });


        //給第一個select綁定change事件
        provSelect.onchange = function(){
            //獲取 當前的選項
            var index = this.value;

            //清空第二個select原先內容
            citySelect.length = 0;

            //選擇對應的城市列表，添加到第二個select
            cityList[index].forEach(function(val, index){
                citySelect.add(new Option(val, index));
            })
        }


        //手工觸發一次 change事件
        provSelect.onchange();

    </script>
</body>
</html>

change事件實現地址聯動

④文檔事件

load 加載完成
unload 文檔關閉
beforeunload 文檔關閉 (兼容性好)

⑤圖片事件

abort 圖片加載中斷
load 圖片加載完成
error 圖片加載錯誤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片事件</title>
    <style>
        #imgList img {
            width: 200px;
            height: 300px;
        }
    </style>
</head>
<body>
    <h1>圖片事件</h1>
    <hr>

    <div id="imgList">
        <img src="../../dist/images_one/1.jpg" alt="">
        <img src="../../dist/images_one/2.jpg" alt="">
        <img src="../../dist/images_one/3.jpg" alt="">
        <img src="../../dist/images_one/4.jpg" alt="">
        <img src="../../dist/images_one/41.jpg" alt="美圖">
        <img src="../../dist/images_one/7.jpg" alt="">
        <img src="../../dist/images_one/8.jpg" alt="">
    </div>

    <script>
        //獲取全部圖片的列表
        var imgs = document.querySelectorAll('#imgList img');

        //給每一個img元素綁定 error 事件
        for (var i = 0; i < imgs.length; i ++) {
            imgs[i].onerror = function() {
                this.src = '../../dist/images_two/11.jpg'
            }
        }
    </script>
</body>
</html>

error事件實現圖片加載錯誤用其餘圖片替代

⑥其餘事件

scroll 元素內部的內容滾動適合於有滾動條的元素
resize 綁定給window, 窗口尺寸發生變化

5.Event對象

A）屬性

clientX 鼠標的x座標
clientY 鼠標的Y座標
button 鼠標按鍵的標示
keyCode 鍵盤按鍵的值
cancelBubble 阻止事件冒泡設置爲true
target 返回觸發此事件的元素
tyep 返回事件類型
timeStamp 返回觸發事件的那一刻的時間戳(從頁面打開的那一刻開始
altKey 返回當事件被觸發時，"ALT" 是否被按下。
ctrlKey 返回當事件被觸發時，"CTRL" 鍵是否被按下。
shiftKey 返回當事件被觸發時，"SHIFT" 鍵是否被按下。

B）方法

stopPropagation() 阻止事件冒泡
preventDefault() 阻止元素默認的事件

9、JavaScript內置對象

1.Number

A）屬性

MAX_VALUE JS能夠表示的最大的數字
MIN_VALUE JS能夠表示的最小的數字

B）方法

toFixed(length) 指定保留長度的小數
toExponential() 用科學計數法表示
toPrecision(length) 要求數字按照指定長度顯示整數+小數
toString(number) 把數字轉換爲字符串能夠按照指定的進制返回

2.String

A）屬性

length 字符串長度

B）方法

charAt(index) 返回指定位置的字符
concat(string) 鏈接字符串
indexOf(str) 返回小字符串在字符串對象中第一次出現位置 -1表示不存在
lastIndexOf() 返回小字符在字符串中最一次出現的位置
substr(start, length) 截取字符串省略長度截取到結束
substring(start, end) 截取字符串, 省略結束位置一直到最後
slice(start, end) 與substring 如出一轍
split(char) 把字符串分割爲數組
toUpperCase() 把字符串轉爲大寫
toLowerCase() 把字符串轉爲小寫
match() 匹配字符串可用正則
search() 查找字符串可用正則
replace() 替換字符串可用正則
charCodeAt() 返回在指定的位置的字符的 Unicode 編碼。
String.formCharCode() 從字符編碼建立一個字符串。
trim() 去掉兩邊空格

3.Array

A）建立數組

方式一：

var list = [item1, item2, item3 ...]

方式二：

var list = new Array()

B）數組的添加、刪除、修改

添加：

爲新索引賦值
利用數組長度,在數組尾部插入新元素
push() 在最後追加
unshift() 在最前面追加
splice(位置,0,新值) 指定位置加

刪除：

改變數組長度
pop()
shift()
splice(位置,刪除的個數) 指定位置刪除指定個數
運算符 delete

修改：

list[index] = value
list.splice(位置，刪除個數,值1,值2...)

C）屬性

length 數組長度元素個數

D）方法

reverse() 翻轉數組

sort() 數組排序

toString() 和 toLocalString() 把數組轉換爲字符串

join() 把數組的元素拼接成字符串

slice() 截取數組中的一部分,返回新的數組 slice(start, end)

concat() 合併多個數組

indexOf() 搜索數組中的元素，並返回它所在的位置。

lastIndexOf() 返回一個指定的字符串值最後出現的位置，在一個字符串中的指定位置從後向前搜索。

map() 經過指定函數處理數組的每一個元素，並返回處理後的數組。

filter() 檢測數值元素，並返回符合條件全部元素的數組。

every() 檢測數值元素的每一個元素是否都符合條件。

some() 檢測數組元素中是否有元素符合指定條件。

reduce() 將數組元素索引值從低到高進行組合 reduceRight() 將數組元素索引值從高到低進行組合

E）數組的遍歷（迭代）

for 循環遍歷
for...in 循環
forEach 循環推薦

4.類數組對象

類型不是Array，特性很是像Array
具備length屬性
常見類數組對象： arguments，元素的列表(NodeList)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>類數組對象</title>
</head>
<body>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>


    <script>
        //for ... of
        var list = [1,2,3,4,5];  //純的
        var itemList = document.querySelectorAll('.item');

        console.log(list);
        console.log(itemList);

        console.log(list.constructor);
        console.log(itemList.constructor);


        function demo(){
            console.log(arguments.constructor)
        }

        demo();


        console.log(itemList[0])
        console.log(itemList.length);


        for (var i = 0; i < itemList.length; i ++) {
            console.log(itemList[i])
        }

        console.log('');

        for (var i in itemList) {
            console.log(i, itemList[i])
        }


        itemList.forEach(function(value, index) {
            console.log(value)
        })
    </script>
</body>
</html>

view code

5.Function

A）屬性

prototype 原型
length 形參的數量

B）方法

apply() 將函數做爲一個對象的方法調用
call() 將函數做爲對象的方法調用

function fn() {
            //遍歷全部的實參
            [].forEach.call(arguments, function(val, index){
                console.log(val)
            })
        }

遍歷全部的實參

bind() 返回一個做爲方法調用的函數

6.Math

A）屬性

PI 返回圓周率（約等於3.14159）

B）方法

abs(x) 返回數的絕對值。
sqrt(x) 返回數的平方根。
pow(x,y) 返回 x 的 y 次冪。
ceil(x) 對數進行上舍入。
floor(x) 對數進行下舍入。
round(x) 把數四捨五入爲最接近的整數。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
random() 返回 0 ~ 1 之間的隨機數。

//取 0到10之間的隨機數
console.log( Math.floor(Math.random() * 11));

//0到11
console.log( Math.round(Math.random() * 11));

//0到28
console.log(Math.floor(Math.random() * 29));


//7-17隨機數
//取0~10 + 7
console.log(Math.floor(Math.random() * 11) + 7);