JavaScirpt(JS)——js介紹及ECMAScript

時間 2019-11-16

原文原文鏈接

1、JavaScript歷史發展

　　JavaScript語言的歷史：http://javascript.ruanyifeng.com/introduction/history.htmljavascript

　　1994年12月，Navigator發佈了1.0版，市場份額一舉超過90%。Netscape 公司很快發現，Navigator瀏覽器須要一種能夠嵌入網頁的腳本語言，用來控制瀏覽器行爲。當時，網速很慢並且上網費很貴，有些操做不宜在服務器端完成。好比，若是用戶忘記填寫「用戶名」，就點了「發送」按鈕，到服務器再發現這一點就有點太晚了，最好能在用戶發出數據以前，就告訴用戶「請填寫用戶名」。這就須要在網頁中嵌入小程序，讓瀏覽器檢查每一欄是否都填寫了。html

　　1995年，Netscape公司僱傭了程序員Brendan Eich開發這種網頁腳本語言。Brendan Eich有很強的函數式編程背景，但願以Scheme語言（函數式語言鼻祖LISP語言的一種方言）爲藍本，實現這種新語言。爲了保持簡單，這種腳本語言缺乏一些關鍵的功能，好比塊級做用域、模塊、子類型（subtyping）等等，可是能夠利用現有功能找出解決辦法。前端

　　最初名字叫作 Mocha，1995年9月改成LiveScript。12月，Netscape公司與Sun公司（Java語言的發明者和全部者）達成協議，後者容許將這種語言叫作JavaScript。這樣一來，Netscape公司能夠藉助Java語言的聲勢。java

　　1996年8月，微軟模仿JavaScript開發了一種相近的語言，取名爲JScript。威脅瀏覽器腳本語言的主導權python

　　1996年11月，Netscape公司決定將JavaScript提交給國際標準化組織ECMA（European Computer Manufacturers Association），但願JavaScript可以成爲國際標準。程序員

　　1997年7月，ECMA組織發佈262號標準文件（ECMA-262）的初版，規定了瀏覽器腳本語言的標準，並將這種語言稱爲ECMAScript。這個版本就是ECMAScript 1.0版。ECMAScript和JavaScript的關係是，前者是後者的規格，後者是前者的一種實現。es6

　　ECMAScript只用來標準化JavaScript這種語言的基本語法結構，與部署環境相關的標準都由其餘標準規定，好比DOM的標準就是由W3C組織（World Wide Web Consortium）制定的。web

2、js的引入方式和輸出

一、javascript有三種引入方式

　　1.行內引入面試

　　<開始標籤 on+事件類型=「js代碼」></結束標籤>正則表達式

　　行內引入方式必須結合事件來使用，可是內部js和外部js能夠不結合事件。

<body>  
    <input type="button" onclick="alert('行內引入')" value="button" name="button">  
    <button onclick="alert(123)">點擊我</button>  
</body>

　　2.內部引入

　　在head或body中，定義script標籤，而後在script標籤裏面寫js代碼。

<!--內部式 建議
引入的時候要在body以後，咱們要等待全部的dom元素加載完成以後再去執行相應的js操做-->
<script type="text/javascript">
    function clickhandler() {
        // 彈出警告框
        /* 丹蔘滴丸無
            阿達 阿達
        */
        alert(1);
    }
</script>

　　3.外部引入

　　定義外部js文件(.js結尾的文件)。

<head>
    <!--外鏈式-->
    <script src="1.js"></script>
</head>

　　注意：

　　1. script標籤通常定義在head或body中。

　　2. Script標籤要單獨使用，要麼引入外部js，要麼定義內部js，不要混搭；使用外部的JS文件，它具備維護性高、可緩存(加載一次，無需加載)、方便將來擴展、複用性高等特色。新建外部的js文件1.js文件。

alert("外部引入")

二、javascript輸出方式

//document.write()向文檔內輸入內容，不會覆蓋原文檔的內容
document.write('<span class="span1">233<span>')
//console控制檯 輸出【開發者工具】
console.log('星兒今天很漂亮！')   //向控制檯拋出一個信息
console.error('錯誤了')   //向控制檯拋出一個異常
console.dir(window)    //console.dir()輸入一個對象的所有屬性
console.clear()     //清除
每一個能獨立完成一個功能的代碼以分號結束，這就是一個代碼塊

alert()  //彈出一個帶有一條指定信息的消息
innerHTML/innerText   //獲取或者向指定元素內添加內容
innerHTML   //獲取元素內全部的內容（包括元素），還能夠解析內容的樣式
innerText    //獲取元素內的文本內容

3、變量

一、JS中變量的含義

　　程序運行過程當中它的值是容許改變的量。與它對應的就是常量：即在程序運行過程當中它的值是不容許改變的量。

　　變量是用來儲存信息的容器，因爲JS是鬆散數據類型，因此變量中能夠放置任何的數據類型。

　　js是跟python同樣一樣是弱類型的語言，python中定義變量沒有關鍵字： str = ‘alex’；可是在js中定義變量使用關鍵字：var str = ‘alex’；

注意：

　　（1）聲明建立變量使用var關鍵字，「var a;」此時這個變量中什麼都沒有，獲取變量中返回值時，返回值爲udefined。

　　（2）「=」在js中是賦值的意義將等號右邊的值賦值給等號左邊的變量。「+=」在js中是保留原來的值上累加。

　　（3）一次聲明多個變量：每一個變量用逗號隔開，通常會相同數據類型使用一個聲明　　　　　

var a = [], fn = function(){}, num=5

二、JS變量的聲明

　　1.先聲明後定義

// js中代碼的執行順序：自上往下
// 聲明
var dog;
alert(dog)  //undefined 未定義
// 定義
dog = "小黃";
alert(dog)

　　2.聲明馬上定義

var dog_2 = '小紅';
console.log(dog_2); //小紅

三、JS變量名規範

嚴格區分大小寫
命名時名稱能夠出現字母、數字、下劃線、$ ,可是不能數字開頭，也不能純數字，不能包含關鍵字和保留字。
```
關鍵字：var number等

除了關鍵字 top name 也儘可能不使用。
```
推薦駝峯命名法：有多個有意義的單詞組成名稱的時候，第一個單詞的首字母小寫，其他的單詞首字母寫
```
//建議使用駝峯標識來對變量進行命名
var myHousePrice = "$1234";
```
匈牙利命名：就是根據數據類型單詞的的首字符做爲前綴

關鍵字：

保留字：

4、數據類型

　　js中有兩種數據類型：基本數據類型和引用數據類型

　　基本數據類型指的是簡單的數據段，包含數字number、字符串string、布爾、null、undefined。

　　引用數據類型指的是有多個值構成的對象，包含對象數據類型（數組array、對象object、正則REGEXP）和函數數據類型（function）。

　　當咱們把變量賦值給一個變量時，解析器首先要確認的就是這個值是基本類型值仍是引用類型值。

五種基本數據類型以下所示：

一、數字（number）

// 1.數字類型
var a = 123;
console.log(a)
// typeof 檢查當前變量是什麼數據類型
console.log(typeof a)

//特例
var e1 = 5/8;
console.log(typeof e1)
console.log(e1)// Infinity無限大. number類型

二、字符串（string）

// 2.字符串類型
var str = "123";
console.log(str)
console.log(typeof(str))

三、布爾（boolean）

// 3.boolean類型
var b1 = true;
var b2 = false;
console.log(b1)
console.log(typeof b1)

四、空值Null

// 4.null
var c1 = null;  //空對象,object類型
console.log(c1)
console.log(typeof c1)

五、空值Undefine

// 5.undefined
var d1;
console.log(d1)
console.log(typeof d1)

　　五種數據類型代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本數據類型</title>
</head>
<body>
    <script type="text/javascript">
        // js中有兩種數據類型：基本數據類型和引用數據類型
        // 基本數據類型：number  string boolean null undefined
        // 1.數字類型
        var a = 123;
        console.log(a)
        // typeof 檢查當前變量是什麼數據類型
        console.log(typeof a)

        //特例
        var e1 = 5/8;
        console.log(e1)// Infinity無限大. number類型
        console.log(typeof e1)

        // 2.字符串類型
        var str = "123";
        console.log(str)
        console.log(typeof(str))

        // 3.boolean類型
        var b1 = true;
        var b2 = false;
        console.log(b1)
        console.log(typeof b1)

        // 4.null
        var c1 = null;  //空對象,object類型
        console.log(c1)
        console.log(typeof c1)

        // 5.undefined
        var d1;
        console.log(d1)
        console.log(typeof d1)
    </script>
</body>
</html>

基本數據類型代碼示例

　　執行後在瀏覽器控制檯查看輸出：

引用數據類型以下所示：

一、Function

二、Object

三、Array

四、String

五、Date

5、運算符

　　js中的運算符跟python中的運算符有點相似，但也有不一樣。所謂運算,在數學上，是一種行爲，經過已知量的可能的組合，得到新的量。

一、賦值運算符

　　賦值運算符有=,+=,-=,*=,/=,%=這幾種。

var money = prompt("請輸入金額....");
var saveMoney = money * (1+0.02);
console.log(saveMoney);  // 打開頁面輸入100，控制檯輸出102

二、算數運算符

　　算數運算符最經常使用的是+，-，*，/，%取餘。

var a = 10;
var b = 4;
var sum = a + b;
var min = a - b;

// + - * /除  %取餘
var div = a/b;
console.log(div);

var lef = a%b;
console.log(lef);

　　此外還有複合運算符、自增（++）自減（--）。

//複合運算符
var c = 7, d = 8;
// d = c + d;
d += c;  //d = 15
console.log(d);

//自增  自減
//d++是先賦值後++：現將d的值賦值給c1，而後再讓d加上1對d賦值
var c1 = d++;  // c1=15 d=16
console.log(c1);
console.log(d);

//++d：先相加後賦值
var c2 = ++d;  // c2=17 d=17
console.log(c2);
console.log(d);

三、比較運算符

　　比較運算符主要有>,<,>=,<=,==(等於),===(全等),!=,!==(不等同於，值和類型有一個不相同)

// 比較運算符  >,<,>=,<=,==,===全等
console.log(5>6);  // 輸出false

// 隱式轉換==比較的是值的大小，===是類型和值的比較
console.log("5"==5);   // 輸出true
console.log("5"===5);  // 輸出false

四、邏輯運算符

// 邏輯運算符
// &&(and)都真才爲真
console.log(true&&true);    // 輸出true
console.log(true&&false);   // 輸出false
console.log(false&&false);    // 輸出false

// ||(or)有真就真
console.log(true||false);   // 輸出true
console.log(false||false);  // 輸出false

五、字符串處理

　　字符串拼接+字符串運算特殊狀況。python中有拼接字符串中更簡便的辦法，其實在js中也有，你們能夠百度引擎搜索es6模板字符串。（擴展）

// 字符串運算
var firstName = "欣";
var lastName = "Li";

// 字符串拼接
var fullName = firstName + " " +lastName;
console.log(fullName);

var name = "伊拉克";
var amy = "美軍";
var str = "2003年3月20日，" + name + "戰爭爆發，以美軍爲主的聯合部隊僅用20多天就擊潰了薩達姆的軍隊。這是繼十多年前的海灣戰爭後，" + amy + "又一次取得的大規模壓倒性軍事勝利";
var fullStr = str;
console.log(fullStr);

// 不能對字符串進行加運算
var a1 = "1";
var a2 = "2";
console.log(a1+a2);   // 輸出"12"
console.log(typeof(a1+a2));  // string
console.log(parseInt(a1+a2));  // 轉化爲12（int）
// 除了加法外，瀏覽器會自動把字符串轉化爲數字進行運算
console.log(a1*a2);   // 輸出2
console.log(typeof(a1*a2));   // number

console.log(a1-a2);   // 輸出-1
console.log(typeof(a1-a2));   // number

　　特殊的NaN:

// NaN即not a number，但倒是number類型
var b1 = "one";
var b2 = "two";
console.log(b1*b2);   // 輸出NaN
console.log(typeof(b1*b2));   // number

6、數據類型轉換

一、將數值類型轉換成字符串類型

// 1.將數字類型轉換成字符串類型
var n1 = 123;
var n2 = '';

//隱式轉換
var n3 = n1 + n2;
console.log(n3);  // 輸出：123
console.log(typeof n3);  //string
//對比
var n4 = '123';
var n5 = n1+n4;
console.log(n5);  //輸出：123123
console.log(typeof n5);  //string

// 強制類型轉換 String()方法
var str1 = String(n1);
console.log(typeof str1);   // string

// toString()方法
var num = 234;
console.log(num.toString());

二、將字符串類型轉換成數值類型

//2.將字符串類型轉換成數字類型
var stringNum = '789';
var num2 = Number(stringNum);
console.log(num2);
var stringNum2 = '789.123sdawfwwa9';

// parseInt() 能夠解析一個字符串而且返回一個整數
console.log(parseInt(stringNum));
//parseFloat()
console.log(parseFloat(stringNum2));  //789.123

三、任何數據類型均可以轉換爲boolean類型

//3.將各類數據類型轉換爲布爾類型
// 在咱們js中全部的數據類型均可以轉換爲boolean
var b1 = '123';
console.log(Boolean(b1));  // true
// 非0真1
var b2 = 1;
var b3 = 0;
var b4 = -123;
console.log(Boolean(b2));  //true
console.log(Boolean(b3));  //false
console.log(Boolean(b4));  //true
//無限大
var b5 = Infinity;
console.log(Boolean(b5));  //true
//NaN
var b6 = NaN;
console.log(Boolean(b6));  //false
//undefined
var b7;
console.log(Boolean(b7));  //false
//null
var b8 = null;
console.log(Boolean(b8));  //false

7、流程控制

一、if，if-else，if-else if-else

// if語句 若是() .....
var ji = 10;
if(ji>=20){
    console.log("大吉大利，今晚吃雞")  //command +'+'|'-' 能夠控制控制檯放大縮小
}else{
    console.log('很遺憾，繼續努力')
}

　　if...else...僞代碼：

if (true) {
    //執行操做
}else if(true){
    //知足條件執行
}else if(true){
    //知足條件執行
}else{
    //知足條件執行
}

　　注意：瀏覽器解析代碼的順序是——從上往下執行，從左往右。

二、邏輯與&& 、邏輯或||

// 考試系統錄入
var math = 90;
var english = 85;
var sum= 485;

// 1.模擬 總分>400而且數學成績>89分，被清華大學錄入
// 邏輯與&& 兩個條件都成立的狀況下才成立
if (sum>400 && math>90) {
    alert("被清華大學錄取")
}else{
    alert('高考失利，繼續努力')
}
// 2.模擬 總分>400或者你的英語成績>85，被複旦大學錄取
// 邏輯或  只要有一個條件成立，就成立
if (sum>400 || english>85) {
    alert("被複旦大學錄取")
}else{
    alert("高考又失利，繼續努力")
}

// if條件內還容許計算
if ((sum>500) || (math + english)>170) {
    alert(211)
}

三、switch　　

　　case表示一個條件：知足這個條件就會走進來遇到break跳出。break終止循環。若是某個條件中不寫 break，那麼直到該程序遇到下一個break中止。

// switch 開關
var gameScore = 'best';
// case表示一個條件
switch(gameScore){
    case 'good':
        console.log('玩得很好');
        break;  // 表示退出

    case 'better':
        console.log("玩得牛逼了啊");
        break;

    case 'best':
        console.log('恭喜你，吃雞成功');
        break;

    default:
        console.log('很遺憾');

}

四、while循環

　　循環三個步驟：1.初始化循環變量 2.判斷循環條件 3.更新循環變量　　

var i = 1;
while(i<=9){
    console.log(i)
    i++
}

// 練習：將1-100之間全部3的倍數輸出出來
var n = 1;
while (n<=100) {
    if (n % 3 == 0){
        console.log(n);
    }
    n++;
}

五、do_while循環

// 循環三個步驟：1.初始化循環變量  2.判斷循環條件  3.更新循環變量
// 無論有沒有知足while中的條件,do裏面的代碼都會走一次
var i = 3;      // 初始化循環變量
do {
    console.log(i);
    i++;        // 更新循環條件
}while (i<3);   // 判斷循環條件

六、for循環

// 1.初始化  2.循環條件  3.更新循環變量
for(var i = 1; i<=10; i++) {
    console.log(i)
}

　　課堂練習：打印1-100偶數、打印1-100之間數之和。

//練習1： 1-100之間全部的偶數
for (var i =1; i<=100; i++) {
    if (i%2==0) {
        //偶數
        console.log(i)
    }
}

//練習2：計算1-100之間全部數的和
var sum = 0;
for(var j=1; j<=100; j++) {
    sum = sum + j;
}
console.log(sum);

//練習3：利用document.write('*')畫出長方形
//雙重for循環
for (var i=1;i<=3;i++) {   // 表示行
    for(var j=1;j<=6;j++) {
        document.write('* ');
    }
    document.write('<br>');  // 換行
}

課堂練習

　　做業：打印直角三角形、打印等邊三角形。

//做業：使用*打印直角三角形  6行
// *
// * *
// * * *
// * * * *
// * * * * *
// * * * * * *
for (var i=1;i<=6;i++) {
    for (var j=1;j<=i;j++){
        document.write('* ')
    }
    document.write('<br>')
}

//做業：使用*打印等邊三角形
//      *
//     ***
//    *****
//   *******
//  *********
// ***********
for (var i=1;i<=6;i++) {   //行數
    //控制空格數
    for(var s=i;s<=6-1;s++) {
        document.write('&nbsp;');
    }
    for(var j=1;j<=2*i-1;j++) {
        document.write('*');
    }
    document.write('<br>')
}

課堂做業

8、經常使用內置對象——數組

　　所謂內置對象就是ECMAScript提供出來的一些對象，咱們知道對象都是有相應的屬性和方法，其實這裏不少的js對象跟python的不少語法相似。

　　數組是一種類列表對象，它的原型中提供了遍歷和修改元素的相關操做。JavaScript 數組的長度和元素類型都是非固定的。

一、數組的建立方式

字面量方式建立（推薦你們使用這種方式，簡單粗暴）

var colors =['red','green','yellow'];
console.log(colors);    // 輸出：Array(3)  控制檯另外一種展示方式：(3) ["red", "green", "yellow"]

// 空數組
var emptyArray = [];

使用構造函數（後面會講）的方式建立使用new關鍵詞對構造函數進行建立對象

var colors2 = new Array();  // 建立了一個空數組

var colors3 = new Array('white','red','orange');
console.log(colors3);   // (3) ["white", "red", "orange"]

二、數組的賦值

// 數組賦值
var arr = [];
arr[0] = 123;
arr[1] = '哈哈哈';
arr[2] = '嘿嘿嘿';
console.log(arr);  // (3) ["white", "red", "orange"]
// 經過下標取到相應的值
console.log(arr[2]);   // 嘿嘿嘿
console.log(arr.length);  // 3

// 數組遍歷
for(var i=0;i<arr.length;i++) {
    console.log(arr[i]);
}

三、數組經常使用方法

// 1.數組的合併  concat()
var north = ['北京','山東','天津'];
var south = ['東莞','深圳','上海'];

var newArr = north.concat(south);
console.log(newArr);    // (6) ["北京", "山東", "天津", "東莞", "深圳", "上海"]

// 2.將數組轉換成字符串
var score = [98,78,76,100,0];

// toString() 直接轉換爲字符串  每一個元素之間使用逗號隔開
var str = score.toString();
console.log(str);   // 98,78,76,100,0

// join()方法，將數組中的元素使用指定的字符串連接起來，它會造成一個新的字符串
var str2 = score.join('|');
console.log(str2);   // 98|78|76|100|0

// 3.查找下標
// indexOf()  正向查找
var index = score.indexOf(78);
console.log(index);   // 輸出：1,說明數組是從0開始
// 若是查找的值再也不數組中則返回-1
var indexNull = score.indexOf(101);
console.log(indexNull);   // -1

// lastindex() s 反向查找
var lastIndex = score.lastIndexOf(78);
console.log(lastIndex);    // 1  (依然是1，依然是從0開始)

// 4.數組的排序
var names = ['alex','xiaoma','tanhuang','angel'];

// 反轉數組
var reverseNames = names.reverse();
console.log(reverseNames); // (4) ["angel", "tanhuang", "xiaoma", "alex"]
console.log(names);   // (4) ["angel", "tanhuang", "xiaoma", "alex"]

// sort():按照26個英文字母排序數組
var enames = names.sort();
console.log(enames);   // (4) ["alex", "angel", "tanhuang", "xiaoma"]

// 5.移除元素和添加元素
// shift()移除數組中第一個元素 ,返回的結果是移除的第一個元素，原來數組的第一個元素已被移除
var firstName = names.shift();
console.log(firstName);   // alex
console.log(enames);    // (3) ["angel", "tanhuang", "xiaoma"]

// unshift() 想數組的開頭添加一個或多個元素，並返回新的長度。
var lastname = names.unshift();  // 添加爲空，可是names中原本就有三個元素
console.log(lastname);   // 3
var lastname = names.unshift("shanshan");
console.log(lastname);   // 4  返回的是新的長度

// push()  pop()
// push()  向數組的末尾添加一個或多個元素，並返回新的長度
var newNames = names.push('老村長', '嘿嘿嘿');
console.log(newNames);   // 6
console.log(names);     // (6) ["shanshan", "angel", "tanhuang", "xiaoma", "老村長", "嘿嘿嘿"]

// pop()  刪除數組的最後一個元素
var a = names.pop()  // a 是被刪除的元素（注意：不是索引了）
console.log(a)       // 嘿嘿嘿
console.log(names)   // (5) ["shanshan", "angel", "tanhuang", "xiaoma", "老村長"]

// 練習，把下面的字符串反轉
// length 是一個屬性，惟一的一個，獲取數組的長度，能夠結合for循環遍歷操做
var str = 'hello luffy';
console.log(str.split('').reverse().join(''))  // yfful olleh

　　關於前端的各類語法、方法能夠查看MDN網站：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

9、經常使用內置對象——String、Number、Date和Math

一、字符串String

　　String 對象用於處理文本（字符串）。

// String 字符串對象
var str = "hello alex";
console.log(str.length);  // 輸出：10 （5+1+4）

　　JavaScript String對象方法：http://www.w3school.com.cn/jsref/jsref_obj_string.asp

// 轉換爲大寫
var bigStr = str.toUpperCase();
console.log(bigStr);     // HELLO ALEX
// 轉換爲小寫
console.log(bigStr.toLowerCase());   // hello alex

// split()第一個參數是以什麼樣的字符串進行切割；第二個參數是返回的數組的最大長度
var newArr = str.split(' ',1);
console.log(newArr);  // ["hello"]
var newArr2 = str.split('',3);
console.log(newArr2);  // (3) ["h", "e", "l"]

// substring 左閉右開，會返回一個新的字符串
var a = str.substring(2,6);
console.log(a);    // llo

　　注意：JavaScript 的字符串是不可變的（immutable），String 類定義的方法都不能改變字符串的內容。像 String.toUpperCase() 這樣的方法，返回的是全新的字符串，而不是修改原始字符串。

二、Number對象

　　Number 對象是原始數值的包裝對象。

// toString()將number類型轉換成字符串類型
var num = 132.32;
var numStr = num.toString();
console.log(typeof numStr);   // string

// toFixed()四捨五入
var num2 = 33.31331341;
var newNum = num2.toFixed(2);
console.log(newNum);  // 33.31

　　Number其餘對象介紹：http://www.w3school.com.cn/jsref/jsref_obj_number.asp

三、Date日期對象

　　Date 對象用於處理日期和時間。能夠經過 new 關鍵詞來定義 Date 對象。Date 對象自動使用當前的日期和時間做爲其初始值。

// 建立日期對象
var myDate=new Date();

// 獲取一個月中的某一天
console.log(myDate.getDate());   // 7 (今天是6月7日)
console.log(Date());    // Thu Jun 07 2018 11:58:22 GMT+0800 (CST)
// 獲取一年中的某一個月 從 Date 對象返回月份 (0 ~ 11)
// 注意：表示月份的參數介於 0 到 11 W3C Javascript 最新Chm格式手冊.chm之間。也就是說，若是但願把月設置爲 6 月，則參數應該是 5。
console.log(myDate.getMonth()+1); // 6

// getDay()  從 Date 對象返回一週中的某一天 (0 ~ 6)
console.log(myDate.getDay());  // 4 (今天是週四)
// 注意：星期一是"1"；星期天是"0"。

四、Math對象的使用

　　Math（算數）對象的做用是：執行常見的算數任務。

　　使用Math的屬性和方法的語法：

var pi_value=Math.PI;
var sqrt_value=Math.sqrt(15);

　　注意：Math 對象並不像 Date 和 String 那樣是對象的類，所以沒有構造函數 Math()，像 Math.sin() 這樣的函數只是函數，不是某個對象的方法。您無需建立它，經過把 Math 做爲對象使用就能夠調用其全部屬性和方法。

var x = 1.234;
// 天花板函數  返回值大於等於 x，而且與它最接近的整數
var a = Math.ceil(x);
console.log(a);   // 2

// 地板函數， 返回值小於等於 x，且與 x 最接近的整數
var b = Math.floor(x);
console.log(b);   // 1

// 求 兩個數的最大值和最小值
console.log(Math.max(2,5));  // 5
console.log(Math.min(3,7));  // 3

// 常用的random 方法可返回介於 0 ~ 1 之間的一個隨機數
var ran = Math.random();
console.log(ran);  // 返回值包含0，可是不包含1

// 100-200之間的隨機數
var c = Math.random()*100 + 100;
console.log(c)   // 137.9650704173937(隨機)

// min - max 之間的隨機數公式：
// min + Math.random()*(max-min)
// 5-15
var d = 5+Math.random()*(15-5);

10、函數

　　函數是由事件驅動的或者當它被調用時執行的可重複使用的代碼塊。

　　回顧Python中函數的建立：

/*
py中函數的聲明：
def add():
    pass
py中函數的調用：
    add()
*/

一、js中函數調用形式

// 1.js中函數的聲明  記得：有函數的聲明，就必定有調用
function add() {
    // 執行的一些操做
    alert();
}
// 2.js中函數的調用
add();

　　另一種聲明函數的方式：

var add = function(){
    alert('函數被調用了')；
}
add()

二、聲明函數的時候帶參數　　

// 2、聲明函數的時候帶參數
function add2(a,b) {
    alert(a+b);
}

add2(3,4);

三、聲明函數的時候帶有參數且有返回值

// 3、聲明函數的時候帶有參數，且有返回值
function add3(x,y) {
    return x+y;
}

var sum = add3(3,5);  // 聲明變量接收返回值
alert(sum);

11、對象

一、使用Object或對象字面量建立對象

　　JS中最基本建立對象的方式：

var student = new Object();
student.name = "easy";
student.age = "20";

　　這樣，一個student對象就建立完畢，擁有2個屬性name以及age，分別賦值爲"easy"和20。

　　上面這種方法有一種封裝性不良的感受，字面量方式建立對象以下：

// 字面量方式建立  (推薦使用這種方式  簡單直觀)
// key:value 字典的方式存儲
var stu = {
    name:'alex',
    age:22,
    fav:'雞湯'
}
console.log(stu);    // {name: "alex", age: 22, fav: "雞湯"}
console.log(window);  // window經過構造函數實現  Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

　　會發現一個十分尖銳的問題：當咱們要建立同類的student1，student2，…，studentn時，咱們不得不將以上的代碼重複n次....

// 點語法：包括get方法和set方法
var n = stu.name;
console.log(n);     // alex

stu.age = 34;
console.log(stu.age);  // 34

二、工廠模式建立對象

　　JS中沒有類的概念，那麼咱們不妨就使用一種函數將以上對象建立過程封裝起來以便於重複調用，同時能夠給出特定接口來初始化對象。

function createStudent(name, age) {
  var obj = new Object();
  obj.name = name;
  obj.age = age;
  return obj;
}

var student1 = createStudent("easy1", 20);
var student2 = createStudent("easy2", 20);
...
var studentn = createStudent("easyn", 20);

三、構造函數模式建立對象

　　Object() 構造函數，首字母大寫，碰到構造函數，要想建立對象，須要用new。

var obj = new Object();
obj.name = 'xiaomage';
console.log(obj);    // {name: "xiaomage"}

　　在建立原生數組Array類型對象時也使用過其構造函數：

var arr = new Array(10);  //構造一個初始長度爲10的數組對象

　　在進行自定義構造函數建立對象以前，咱們首先了解一下構造函數和普通函數有什麼區別：

　　（1）實際上並不存在建立構造函數的特殊語法，其與普通函數惟一的區別在於調用方法。對於任意函數，使用new操做符調用，那麼它就是構造函數；不使用new操做符調用，那麼它就是普通函數。

　　（2）按照慣例，咱們約定構造函數名以大寫字母開頭，普通函數以小寫字母開頭，這樣有利於顯性區分兩者。例如上面的new Array()，new Object()。

　　（3）使用new操做符調用構造函數時，會經歷 1)建立一個新對象；2)將構造函數做用域賦給新對象（使this指向該新對象）；3)執行構造函數代碼；4)返回新對象；4個階段。

//------------------構造函數---------------------------
// 1.函數名首字母要大寫
// 2.構造函數不須要return
// 3.爲對象添加成員變量：this  (相似python中self)
var Stu = function () {
    this.name = '武大';
    this.age = 110;
    this.fav = function () {
        console.log('泡妹子')
    }
}

// 建立這個對象
var s = new Stu();
console.log(s);    // Stu {name: "武大", age: 110, fav: ƒ}

var s1 = new Stu();
console.log(s1);
// 弊端：每次new一個新對象，裏面的成員變量和方法都同樣。

　　構造函數的方式有兩種：

// 推薦使用的構造函數的方式一：
function Animal() {
    this.name = 'jingjing';
    this.age = 12;
    this.fav = function () {
        console.log(this.age)
    }
}
var a = new Animal();
a.fav();   // 輸出：12

// 另外一種寫法，方式二：
function Animal2() {
    this.name = "jingjing";
    this.age = 12;
}
Animal2.prototype.showname = function () {
    alert(this.name);
}
// 能夠在外部任意添加新的方法,不用把全部的方法寫在函數中
Animal2.prototype.showage = function () {
    alert(this.age);
}
var b = new Animal2()
b.showname()

四、原型模式建立對象　

　　原型鏈甚至原型繼承，是整個JS中最難的一部分也是最很差理解的一部分，在這裏因爲咱們課程定位的緣由，若是對js有興趣的同窗，能夠去查閱一下相關JS原型的一些知識點。更加有助於你之後前端JS的面試。

function Student() {
    this.name = 'easy';
    this.age = 20;
}


Student.prototype.alertName = function(){
                                alert(this.name);
                              };

var stu1 = new Student();
var stu2 = new Student();

stu1.alertName();  //easy
stu2.alertName();  //easy

alert(stu1.alertName == stu2.alertName);  //true 兩者共享同一函數

12、定時器

　　在js中的定時器分兩種：一、setTimeout() 二、setInterval()

一、setInterval()

　　在指定時間爲週期循環執行。

// 實時刷新時間單位爲毫秒
var n = 0;
var time = null;   // 空對象
time = setInterval(function () {
    n++;
    console.log(n);
}, 1000);

二、setTimeout()

　　只在指定時間後執行一次。　　

setTimeout(function () {
    console.log(time);   // 1
    clearInterval(time);   // 結束定時器
}, 5000);


//定時器 異步運行  
function hello(){  
alert("hello");  
}  
//使用方法名字執行方法  
var t1 = window.setTimeout(hello,1000);  
var t2 = window.setTimeout("hello()",3000);//使用字符串執行方法  
window.clearTimeout(t1);//去掉定時器

十3、正則表達式

　　正則：對象RegExp；正則表達式：檢索字符串，用來規定文本搜索的內容。

一、建立正則表達式

//1. 構造函數建立  new RegExp("檢測文本","修飾符")
//參數1  正則表達式（不能有空格）
//參數2  匹配模式：經常使用g（全局匹配；找到全部匹配，而不是第一個匹配後中止）和i（忽略大小寫吧）
var str = 'luffy 2018';
var reg1 = new RegExp('l','ig');
console.log(reg1);   // 輸出：/l/gi

//2. 字面量方式建立
var reg2 = /y/ig;    // 檢測字符y，不區分大小寫，全局匹配

二、正則對象提供的檢索方式

//正則對象提供的檢索方式
//1.test() 檢測字符串中是否包含定義字符模式，返回布爾
//要檢索的字符在字符串str中 返回true
// console.log(reg2.test(str));  // true

//2.exec()方法就是用來檢索字符串中正則表達式的匹配
// 若是匹配到了就返回一個存放有結果的數組，若是沒有匹配到就返回一個null
console.log(reg2.lastIndex);  // 0 保存一次匹配時開始的下標
console.log(reg2.exec(str));  // ["y", index: 4, input: "luffy 2018", groups: undefined]
console.log(reg2.lastIndex);  // 5

三、經常使用的方法

//match  字符串.match(正則)
var str = "hello world";
var reg3 = /o/g;
// 使用正則表達式模式對字符串執行查找，並將包含查找的結果做爲數組返回
console.log(str.match(reg3));    // (2) ["o", "o"]

//replace替換： str.replace(被替換的，替換的)
console.log(str.replace(reg3,'*'));   // hell* w*rld

//search()  查詢字符串在字符中出現的位置 下標
console.log(str.search(reg3));  // 4

//split()  以匹配的規則分割
console.log(str.split(reg3));  // (3) ["hell", " w", "rd"]

十4、正則表達式——元字符

　　元字符（Metacharacter）是擁有特殊含義的字符　　

一、單個字符和數字

//1   . 匹配除換行符(\n)之外的任意字符
var str = "luffyCity 2018";
var reg = /./g;
console.log(reg.exec(str));  // ["l", index: 0, input: "luffyCity 2018", groups: undefined]

// \.表示轉義匹配.
var str = "www.baidu.com";
var reg = /www\......\.com/g;   //若是想不讓字符有其餘意義  轉義\
console.log(reg.exec(str));  // ["www.baidu.com", index: 0, input: "www.baidu.com", groups: undefined]

//2.[]  匹配[]裏面的任意一個字符
var str1 = "4awebadsads";
var reg1 = /[a-zA-Z0-9]/g; // 匹配字母仍是數字
console.log(reg1.exec(str1));  // ["4", index: 0, input: "4awebadsads", groups: undefined]

var str2 = "1s334";
var reg2 = /[0-9][0-9][0-9]/g;  // 匹配多個字符
console.log(reg2.exec(str2));  // ["334", index: 2, input: "1s334", groups: undefined]

//3.[^] 全部不在這個範圍內的字符
var str3 = "abd123";
var reg3 = /[^a-z][^A-Z]/g;  //匹配除小寫字母之外的任意字符
console.log(reg3.exec(str3));  //["12", index: 3, input: "abd123", groups: undefined]

//4.\d：匹配數字   對立  \D：匹配非數字
var str4 = "web";
var reg4 = /\d/g;   //匹配數字
var reg5 = /\D/g;   //非數字
console.log(reg4.exec(str4));  //null
console.log(reg5.exec(str4));  //w

//5.\w：匹配數字、字母、下劃線   \W：匹配除數字、字母、下劃線之外的任意字符
var reg6 = /\w/g;  //匹配數字 字母  下劃線_
var reg7 = /\W/g;  //匹配除數字 字母  下劃線之外的任意字符
console.log(reg6.exec(str4));   //w
console.log(reg7.exec(str4));   //null

//6.\s:匹配空格    trim():去除字符串空白
var str5 = " luffy";
var reg8 = /\s/g; //空格
var reg9 = /\S/g; //非空白字符
console.log(reg8.exec(str5));   //" "
console.log(reg9.exec(str5));   //l

//7.錨字符  ^以什麼開頭     $以什麼結尾
var str6 = "www.luffy.com";
var reg10 = /^www/g;  // ^字符
console.log(reg10.exec(str6));  // www

var reg11 = /www\......\.com$/g;   //字符$
console.log(reg11.exec(str6));  // www.luffy.com

var reg12 = /www\...\.com$/g;
console.log(reg12.exec(str6));  // null

二、重複的字符

//1. ?  匹配前面的字符0個或一個 ，
var strs = "123webr44546ere";
var reg12 = /[0-9]?/g;
console.log(reg12.exec(strs));   // '1'

//2. *  匹配0個或任意多個字符    儘量多的匹配
var reg13 = /[a-z]*/g; //匹配小寫字母，0個或多個
console.log(reg13.exec(strs));  // ""   匹配了0個小寫字符

//3. + 至少匹配一次
var reg14 = /\d+/g; // 匹配數字
console.log(reg14.exec(strs));  // "123"

//4. {10}：匹配連續的10個字符
var stra = "11274567800";
// 以1開頭後面連續匹配9個數字結尾
var rega = /^1\d{10}$/g; //以1開頭，匹配連續的十個數字
console.log(rega.exec(stra));  // "11274567800"

//5. {min,max} 最少min個最多max個
var strb = "edg";
// 以大小寫英文字母結尾開頭而且最少2個最多3個字母結尾
var regb = /^[a-zA-z]{2,3}$/g;
console.log(regb.exec(strb));  // "edg"

//6. |：豎線  或者
var strc = "www.google"; //baidu  google   ujiuye
var regc = /www.baidu|google|ujiuye/g;
console.log(regc.exec(strc));  // "google"

//7. ()：分組
var strc1 = "www.google"; //baidu  google   ujiuye
var regc1 = /(baidu)|(google)|(ujiuye)/g;
console.log(regc1.exec(strc1));
/*
(4) ["google", undefined, "google", undefined, index: 4, input: "www.google", groups: undefined]
0:"google"  匹配對的字符串
1:undefined  匹配不到
2:"google"
3:undefined
groups:undefined
index:4
input:"www.google"
*/

//獲取匹配的字符串
console.log(RegExp.$1);
console.log(RegExp.$2);  // google
console.log(RegExp.$3);

var str = "helloworld";
var reg = /(hello)(world)/g;
console.log(reg.exec(str));  // (3) ["helloworld", "hello", "world", index: 0, input: "helloworld", groups: undefined]
console.log(RegExp.$1);  // hello
// 將分組好的匹配，調換順序
console.log(str.replace(reg,"$2 $1"));   // world hello

三、正則表達式的相關應用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正則練習</title>
</head>
<body>
    <script type="text/javascript">
        window.onload = function () {
            // 1.檢索字符串中是否不包含字母
            var str = '12';
            var reg1 = /[^a-zA-Z]/g;
            if (reg1.test(str)) {
                console.log('不包含');  // 輸出的是： 不包含
            } else {
                console.log('包含');
            }

            // 2.去除字符串收尾空格
            var str2 = "       hello world     ";
            // 開頭的空格
            var reg = /^\s+/ig;
            var str3 = str2.replace(reg, "");
            var reg2 = /\s+$/ig;
            var str4 = str3.replace(reg2, "");
            console.log("|" + str4 + "|");   // |hello world|

            var oBtn = document.getElementById('btn');

            // 3.檢查用戶帳號
            function checkUser(str) {
                var re = /^[a-zA-Z]\w{3,15}$/;
                if (re.test(str)) {
                    console.log("正確");
                } else {
                    console.log("錯誤");
                }
            }
            checkUser("alex_hah");  // 調用  輸出：正確

            // 4.手機號碼
            // 驗證規則：11位數字，以1開頭
            function checkMobile(str) {
                var re = /^1\d{10}$/;
                if (re.test(str)) {
                    console.log("正確");
                } else {
                    console.log("錯誤");
                }
            }
            checkMobile('13800138000');  // 調用  輸出：正確
            checkMobile('139888888889');   // 錯誤示範  輸出：錯誤

            // 5.電話號碼
            /*
            驗證規則：區號+號碼，區號以0開頭，3位或4位
                     號碼由7位或8位數字組成
                     區號和號碼之間能夠無鏈接符，也能夠"-"鏈接
             */
            function checkPhone(str) {
                var re = /^0\d{2,3}-?\d{7,8}$/;
                if (re.test(str)) {
                    console.log("正確");
                } else {
                    console.log("錯誤");
                }
            }
            checkPhone("095-5777777"); // 調用

            // 6.郵箱
            /*
            驗證規則：姑且把郵箱地址分紅"第一部分@第二部分"這樣
            第一部分：由字母、數字、下劃線、短線"-"、點號"."組成
            第二部分：爲一個域名，域名由字母、數字、短線"-"、域名後綴組成
            而域名後綴通常爲.xxx或.xxx.xx，一區的域名後綴通常爲2-4位，如cn，com
             */
            function checkEmail(str) {
                var re = /^(w-*\.*) + @(\w-?)+(\.\w{2,}) + $/
                if (re.test(str)) {
                    console.log("正確");
                } else {
                    console.log("錯誤");
                }
            }
            checkEmail("alex@cnblogs.cn"); // 調用
        }
    </script>
</body>
</html>