JavaScript

JavaScript 介紹

瀏覽器解釋型語言, 嵌入到 HTML 中交給 瀏覽器解析和執行

JS 用於實現頁面動畫, 特效, 與用戶的交互 ( 事件處理 ), 遊戲等

組成

基礎語法 ( ECMAScript ) ,  內置對象

BOM　　操做瀏覽器窗口的對象和方法

DOM　　提供操做文檔的方法

自定義對象

引入方式

元素綁定方式

<h1 onclick="alert('你好啊')">點擊</h1>

內嵌方式

可書寫在任意屢次使用

位置不一樣會影響到代碼的執行

<script>
  // 在這裏寫你的JS代碼
</script>

外鏈方式

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

注意

外鏈方式的 script 標籤中不能再內嵌 js 代碼

只會執行外部 js 文件的代碼

JavaScript語言基礎

註釋語法

// 單行註釋
/* 多行註釋 */

結束標誌

以 ; 做爲結束標誌, 可是不寫也不會影響代碼的執行

語法規範

嚴格區分大小寫

常量使用大寫

變量使用小寫

聲明變量

<script>
    var a;  // 聲明
    a = 100;    // 賦值
    var b = 100;    // 聲明賦值
    var c = 100, d = 200;   // 多變量聲明賦值
    // var f, g = 100, 1000;  // 不行,不支持這樣
</script>

變量必須先聲明在賦值. 未聲明直接賦值會報錯

訪問未聲明的變量會報錯

聲明未賦值默認值爲 undefined

var 省略會影響做用域, 不建議省略 var 關鍵字

命名規範

• 變量.常量,函數名自定義最好一眼知其意
• 能夠由 數字, 字母, 下劃線, $ 組成
• 不能數字開頭
• 禁止關鍵字衝突
• 變量採用小寫, 小駝峯
• 常量使用全大寫

聲明常量

<script>
    const PIE = 3.14
</script>

常量一經定義沒法修改,修改會報錯

經常使用輸出語句

警告框

alert("") 

帶輸入框的彈窗

propmt("")　

控制檯輸出

console.log("")

網頁中輸出

在文檔的相應位置添加內容, 可識別 HTML語法

若是經過綁定事件方式在 body 中插入內容會致使頁面(body) 重寫

document.write(""")

JavaScript數據類型

JavaScript擁有動態類型

var x;  // 此時x是undefined
var x = 1;  // 此時x是數字
var x = "Alex"  // 此時x是字符串 

數值(Number)

 JavaScript不區分整型和浮點型，就只有一種數字類型

var a = 12.34;  // 普通小數
var b = 20; 
var c = 123e5;  // 12300000  科學計數法 e 表示 10 爲底, 後面的數值爲此方式
var d = 123e-5;  // 0.00123  e 後取值爲 負表示 -次方


var e = 053; // 8進制  以 0 開頭作標識
var f = 0x53; // 16進制 以 0x 開頭標識

不管是哪種進制在控制檯展現的時候都是 以 10進制形式

還有一種NaN，表示不是一個數字（Not a Number）

經常使用方法

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN屬性是表明非數字值的特殊值。該屬性用於指示某個值不是數字。
parseFloat("123.456")  // 返回123.456
len.toFixed("2")  // 返回截取 len 小數點後兩位

字符串(String)

字符串使用引號表示,採用相似數組的存儲方式，自動爲每位字符分配下標,從0開始

var a = "Hello"　　// 單雙引號都行
var b = "world;

 字符串拼接

// 拼接字符串通常使用 " + "
// 什麼類型均可以和字符串拼接 , 結合須要考慮順序
// 除了字符串之間的拼接, 其餘的拼接都是轉換成  number 類型進行拼接


var r1 = 10 + "110"  // "10110"
var r2 = true + "110"  // "true110"
var r3 = 15 + 5 + "10" // "2010"
var r4 = "10" + 5 + 15 // "10515"

內置方法

字符串切割

截取字符串

substring(startIndex,endIndex)

 

功能　　根據指定的下標範圍截取字符串 start ~ end-1

參數 

　　起始下標

　　結束下標能夠省略，表示截至末尾

分割字符串

split(param)

 

功能　　根據指定的分隔符，分隔字符串

返回　　數組

參數

　　選填，省略的話沒有分隔效果，而且只能指定字符串中存在的字符做爲分隔符

ps 二者的區別:

二者的相同點：

　　若是start等於end，返回空字符串

　　若是stop參數省略，則取到字符串末

　　若是某個參數超過string的長度，這個參數會被替換爲string的長度

substirng()的特色：

　　若是 start > stop ，start和stop將被交換

　　若是參數是負數或者不是數字，將會被0替換

silce()的特色：

　　若是 start > stop 不會交換二者

　　若是start小於0，則切割從字符串末尾往前數的第abs(start)個的字符開始(包括該位置的字符)

　　若是stop小於0，則切割在從字符串末尾往前數的第abs(stop)個字符結束(不包含該位置字符)

布爾值(Boolean)

區別於Python，true和false都是小寫。

var a = true;
var b = false;

""(空字符串)、0、null、undefined、NaN都是false。

拼接狀況

在於數值拼接的時候會作轉換

ture 被視爲 1 

false / null 會被視爲 0 

NaN 不變化

underfinded 視爲 NaN

null 和 undefined

null表示值是空，通常在須要指定或清空一個變量時纔會使用，如 name=null;

undefined表示當聲明一個變量但未初始化時，該變量的默認值是undefined。還有就是函數無明確的返回值時，返回的也是undefined。

null表示變量的值是空
undefined則表示只聲明瞭變量，但尚未賦值。

對象(Object)

JavaScript 中的全部事物都是對象：字符串、數值、數組、函數...此外，JavaScript 容許自定義對象。

JavaScript 提供多個內建對象，好比 String、Date、Array 等等。

對象只是帶有屬性和方法的特殊數據類型。

數組

數組對象的做用是：使用單獨的變量名來存儲一系列的值。相似於Python中的列表。

var a = [123, "ABC"];
console.log(a[1]);  // 輸出"ABC"

類型查詢

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"

typeof 是一個一元運算符（就像++，--，！，- 等一元運算符），不是一個函數，也不是一個語句。

返回值 ：

• undefined - 若是變量是 Undefined 類型的
• boolean - 若是變量是 Boolean 類型的
• number - 若是變量是 Number 類型的
• string - 若是變量是 String 類型的
• object - 若是變量是一種引用類型或 Null 類型的

數據類型轉換

強制類型轉換

轉換字符串類型

方法　　toString();

返回　　轉換後的字符串結果

轉換number類型

方法　　Number(n);

返回　　轉換後的結果

實例

 數值字符串和布爾值，null均可以轉換爲number類型

• true -> 1
• false ->0
• null -> 0

字符串中一旦出現非數字字符（"hello","a1"）一概轉換失敗，返回NaN（Not a Number）

undefined沒法轉換number，返回NaN

轉換布爾類型

方法　　Boolean(n)

返回　　布爾值

注意　　除「零值」之外的全部值都爲真，「零值」爲假

如下狀況都爲假：

0, 0.0, "", null, undefined, NaN

解析數據中的number部分

方法　　parseInt(n) / parseFloat(n)

做用　　解析數據中的整數部分/解析包含整數和小數部分

過程　　首先對數據自動轉換成字符串，逐一對每位字符進行轉number的操做，一旦轉換失敗，則中止向後解析，返回結果

自動類型轉換

不一樣類型的數據在參與運算的過程當中會自動轉換

任意數據類型 + string

表示字符串的拼接，返回拼接後最終的字符串

number + boolean

將布爾值轉換 number 進行數學運算

number + 非字符串類型：將其餘類型轉number作數學運算

boolean + boolean

轉換爲 numbe r作數學運算

注意

除了字符串拼接，其餘狀況下，都涉及將操做數轉換爲number，一旦某個操做數轉換失敗，即爲NAN參與數學運算，結果永遠是NAN

運算符

算數運算符

+ - * / % ++ --

n++ 和 ++n 是有區別的 

n++ 表示先加減在賦值, 賦值再語句後執行

n = 5
n++ = 5
n = 6 

++n 先賦值再加減, 賦值在語句中執行

n = 5
++n  = 6
n = 6

實例

若是實在不方便弄清楚, 就這樣一步一步的拆分開算

 

比較運算符

> >= < <= != == === !==

注意：

1 == 「1」  // true
1 === "1"  // false

邏輯運算符

&& || !

賦值運算符

= += -= *= /=

流程控制

 if  ，else

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

if ，else-if ，else 

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

switch

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}

 switch中的case子句一般都會加break語句，不然程序會繼續執行後續case中的語句。

for

for (var i=0;i<10;i++) {
  console.log(i);
}

循環控制 

1. break，跳出循環，其後的代碼都不執行

2. continue，結束這次循環，直接開始下一次循環

嵌套循環 

for(var i = 1; i < 10;i ++){
    for(var j = 1; j < 10; j ++){
    }

實例

實現 99 乘法表

<script>
    for (var i = 1; i < 10; i++) {
        var show = "";
        for (var j = 1; j <= i; j++) {
            show += i + "*" + j + "=" + i * j +"\t";

        }
        console.log(show)
    }
</script>

<script>

    var year = prompt("請輸入年");
    var month = prompt("請輸入月");
    var day = prompt("請輸入日");
    var sum = 0;
    for (var i = 1990; i < year; i++) {
        sum += 365;
        if (i % 4 == 0 && i % 100 != 0 || i % 400 == 0) {
            sum++;
        }
    }
    for (var j = 1; j < month; j++) {
        switch (j) {
            case 1:
            case 3:
            case 5:
            case 7:
            case 8:
            case 10:
                sum += 31;
                break;
            case 4:
            case 6:
            case 9:
            case 11:
                sum += 30;
                break;
            case 2:
                sum += 28;
                if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                    sum++;
                }
                break;
        }
    }
    // 累加當前月天數
    sum += day;
    // 對7 取餘
    var week = sum % 7;
    var show = "";
    switch (week) {
        case 0:
            show = "星期日";
            break;
        case 1:
            show = "星期一";
            break;
        case 2:
            show = "星期二";
            break;
        case 3:
            show = "星期三";
            break;
        case 4:
            show = "星期四";
            break;
        case 5:
            show = "星期五";
            break;
        case 6:
            show = "星期六";
            break;
    }
    console.log(show)

</script>

實現輸入年月日查詢星期幾

while

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

do-while

1. 執行循環體，更新循環變量

2. 判斷循環條件，決定是否開始下一次循環

與while循環的區別

while循環根據條件是否知足選擇執行循環體；

do-while循環不論條件是否知足，先執行一次循環體。

//定義循環變量
do{
    //循環體
    //更新循環變量
}while(循環條件);

三元運算

var a = 1;
var b = 2;
var c = a > b ? a : b

函數

 函數定義

JavaScript中的函數和Python中的很是相似，只是定義方式有點區別。

// 普通函數定義
function f1() {
  console.log("Hello world!");
}

// 帶參數的函數
function f2(a, b) {
  console.log(arguments);  // 內置的arguments對象
  console.log(arguments.length);
  console.log(a, b);
}

// 帶返回值的函數
function sum(a, b){
  return a + b;
}
sum(1, 2);  // 調用函數

// 匿名函數方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 當即執行函數
()function(a, b){
  return a + b;
})(1, 2);

實例

<script>
    // 閏年判斷
    function isRun(year) {
        var res = year % 4 == 0 && year % 100 != 0 || year % 400 == 0;
        return res;
    }

    function caculateDate() {
        var year = prompt("請輸入年");
        var month = prompt("請輸入月");
        var day = prompt("請輸入日");
        var sum = 0;
        for (var i = 1990; i < year; i++) {
            sum += 365;
            if (isRun(i)) {
                sum++;
            }
        }
        for (var j = 1; j < month; j++) {
            switch (j) {
                case 1:
                case 3:
                case 5:
                case 7:
                case 8:
                case 10:
                    sum += 31;
                    break;
                case 4:
                case 6:
                case 9:
                case 11:
                    sum += 30;
                    break;
                case 2:
                    sum += 28;
                    if (isRun(year)) {
                        sum++;
                    }
                    break;
            }
        }
        sum += day;
        var week = sum % 7;
        var show = "";
        switch (week) {
            case 0:
                show = "星期日";
                break;
            case 1:
                show = "星期一";
                break;
            case 2:
                show = "星期二";
                break;
            case 3:
                show = "星期三";
                break;
            case 4:
                show = "星期四";
                break;
            case 5:
                show = "星期五";
                break;
            case 6:
                show = "星期六";
                break;
        }
        console.log(show)
    }
</script>

函數版本實現用戶輸入年月日輸出星期幾

函數中的arguments參數

function add(a,b){
  console.log(a+b);
  console.log(arguments.length)
}

add(1,2)

輸出：
3
2

 函數只能返回一個值，若是要返回多個值，只能將其放在數組或對象中返回。

函數做用域

局部變量

在JavaScript函數內部聲明的變量（使用 var）是局部變量，因此只能在函數內部訪問它（該變量的做用域是函數內部）。只要函數運行完畢，本地變量就會被刪除。

全局變量

在函數外聲明的變量是全局變量，網頁上的全部腳本和函數都能訪問它。

變量生存週期

JavaScript變量的生命期從它們被聲明的時間開始。

局部變量會在函數運行之後被刪除。

全局變量會在頁面關閉後被刪除。

做用域

同Python 鏈式查找，首先在函數內部查找變量，找不到則到外層函數查找，逐步找到最外層。

內置對象和方法

自定義對象

建立字典形式的對象，鍵只能是字符串

var a = {"name": "Alex", "age": 18};
console.log(a.name);
console.log(a["age"]);

遍歷

var a = {"name": "Alex", "age": 18};
for (var i in a){
  console.log(i, a[i]);
}

 建立對象

var person=new Object();  // 建立一個person對象
person.name="Alex";  // person對象的name屬性
person.age=18;  // person對象的age屬性

數組對象( Array )

數組

數組對象的做用是：使用單獨的變量名來存儲一系列的值。相似於Python中的列表。

var a = [123, "ABC"];
console.log(a[1]);  // 輸出"ABC"

 

相關方法

push

push(data1,data2)

做用　　在數組末尾添加元素

返回值　　添加後的數組長度

pop

pop()

做用　　移除數組的末尾元素

返回值　　被刪除的元素

unshift

unshift(a,b,c)

做用　　在數組的頭部添加元素

返回值　　添加以後的數組長度

shift

shift()

做用　　移除數組頭部元素

返回值　　被刪除的元素

toString

toString()

做用　　將數組轉換字符串

返回值　　字符串結果

join

join(param)

做用　　將數組轉換字符串

返回值　　字符串結果

參數　　選填，若是省略，等同於 toString(), 可用於指定元素之間的鏈接符

reverse

reverse()

做用　　倒序重排數組元素

返回值　　從新排列後的數組,是對原始數組的直接修改

sort

sort(param)

做用　　對數組中的元素排序，直接修改數組結構

參數　　選填，指定排序算法；默認按照字符的Unicode碼升序排列

返回值　　排序以後的數組

關於 sort 有必定的問題，詳情請看這裏 點下我啊

forEach

forEach(param)

做用　　遍歷數組

參數　　函數，自動將數組元素及下標傳入函數並執行

arr2.forEach(function (elem,index){
　　console.log(elem,index);
});

map

功能　　遍歷數組.對每一個元素執行相關方法

參數　　

　　函數名 每一個元素被中此函數執行 可帶參數

　　索引值  可選 當前元素索引值

　　數組 可選 當前元素所屬數組對象

返回值　　返回一個每一個元素都被預約函數處理後的新數組

var numbers = [4, 9, 16, 25];

function myFunction() {
    x = document.getElementById("demo")
    x.innerHTML = numbers.map(Math.sqrt);
}

// 2,3,4,5

splice()

功能　　替換指定索引位置的

參數

　　索引 　　指定處理元素索引位置

　　數字　　指定處理的元素個數

　　被添加元素　　可選 若是須要在預約位置添加元素可經過此參數傳遞

返回值　　被處理後的數組

// 移除數組的第三個元素，並在數組第三個位置添加新元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");

// Banana,Orange,Lemon,Kiwi,Mango

二維數組

[[1],[2,3],[4,5,6]]

數組中的每一個元素又是數組

讀取元素

arr[2][1];　　//5

字符串對象

 

Date對象

建立Date對象

//方法1：不指定參數
var d1 = new Date();
console.log(d1.toLocaleString());

//方法2：參數爲日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());

//方法3：參數爲毫秒數
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4：參數爲年月日小時分鐘秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒並不直接顯示

相關方法

var d = new Date(); 
//getDate()                 獲取日
//getDay ()                 獲取星期
//getMonth ()               獲取月（0-11）
//getFullYear ()            獲取完全年份
//getHours ()               獲取小時
//getMinutes ()             獲取分鐘
//getSeconds ()             獲取秒
//getMilliseconds ()        獲取毫秒
//getTime ()                返回累計毫秒數(從1970/1/1午夜)

JSON對象

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串轉換成對象
var obj = JSON.parse(str1); 
// 對象轉換成JSON字符串
var str = JSON.stringify(obj1);

RegExp對象

//RegExp對象

//建立正則對象方式1
// 參數1 正則表達式(不能有空格)
// 參數2 匹配模式：經常使用g(全局匹配;找到全部匹配，而不是在第一個匹配後中止)和i(忽略大小寫)

// 用戶名只能是英文字母、數字和_，而且首字母必須是英文字母。長度最短不能少於6位 最長不能超過12位。

// 建立RegExp對象方式（逗號後面不要加空格）
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");

// 匹配響應的字符串
var s1 = "bc123";

//RegExp對象的test方法，測試一個字符串是否符合對應的正則規則，返回值是true或false。
reg1.test(s1);  // true

// 建立方式2
// /填寫正則表達式/匹配模式（逗號後面不要加空格）
//  雙斜線裏面不要加 引號 ,若是加了引號會把引號做爲查詢內容處理

var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;

reg2.test(s1);  // true


// String對象與正則結合的4個方法
var s2 = "hello world";

s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正則 的內容
s2.search(/h/g);        // 0                      查找字符串中符合正則表達式的內容位置
s2.split(/o/g);         // ["hell", " w", "rld"]  按照正則表達式對字符串進行切割
s2.replace(/o/g, "s");  // "hells wsrld"          對字符串按照正則進行替換

// 關於匹配模式：g和i的簡單示例
var s1 = "name:Alex age:18";

s1.replace(/a/, "哈哈哈");      // "n哈哈哈me:Alex age:18"
s1.replace(/a/g, "哈哈哈");     // "n哈哈哈me:Alex 哈哈哈ge:18"      全局匹配
s1.replace(/a/gi, "哈哈哈");    // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18"  不區分大小寫


// 注意事項1：
// 若是regExpObject帶有全局標誌g，test()函數不是從字符串的開頭開始查找，而是從屬性regExpObject.lastIndex所指定的索引處開始查找。
// 該屬性值默認爲0，因此第一次仍然是從字符串的開頭查找。
// 當找到一個匹配時，test()函數會將regExpObject.lastIndex的值改成字符串中本次匹配內容的最後一個字符的下一個索引位置。
// 當再次執行test()函數時，將會從該索引位置處開始查找，從而找到下一個匹配。
// 所以，當咱們使用test()函數執行了一次匹配以後，若是想要從新使用test()函數從頭開始查找，則須要手動將regExpObject.lastIndex的值重置爲 0
// 若是test()函數再也找不到能夠匹配的文本時，該函數會自動把regExpObject.lastIndex屬性重置爲 0。

var reg3 = /foo/g;
// 此時 regex.lastIndex=0
reg3.test('foo'); // 返回true
// 此時 regex.lastIndex=3
reg3.test('xxxfoo'); // 仍是返回true
// 因此咱們在使用test()方法校驗一個字符串是否徹底匹配時，必定要加上^和$符號。

// 注意事項2(說出來你可能不信系列)：
// 當咱們不加參數調用RegExpObj.test()方法時, 至關於執行RegExpObj.test("undefined"), 而且/undefined/.test()默認返回true。
var reg4 = /^undefined$/;
reg4.test(); // 返回true
reg4.test(undefined); // 返回true
reg4.test("undefined"); // 返回true

Math對象

相關方法

abs(x)      //返回數的絕對值。
exp(x)      //返回 e 的指數。
floor(x)    //對數進行下舍入。
log(x)      //返回數的天然對數（底爲e）。
max(x,y)    //返回 x 和 y 中的最高值。
min(x,y)    //返回 x 和 y 中的最低值。
pow(x,y)    //返回 x 的 y 次冪。
random()    //返回 [0 ~ 1) 之間的隨機數。(包含0 不含有1 會是個很長的小數 0.1215463)
round(x)    //把數四捨五入爲最接近的整數。
sin(x)      //返回數的正弦。
sqrt(x)     //返回數的平方根。
tan(x)      //返回角的正切。