03: JavaScript基礎

時間 2019-11-10

原文原文鏈接

1.1 變量返回頂部

　　一、JavaScript變量特色html

　　　　　　1. JavaScript中變量的聲明是一個很是容易出錯的點，局部變量必須一個 var 開頭
　　　　　　2. 若是未使用var，則默認表示聲明的是全局變量。
　　　　　　3. 爲了不出錯咱們在定義變量時所有加var變成局部變量，若是發現他是一個全局變量再將var刪除
　　　　　　4. 定義局部變量和全局變量java

　　二、定義全局變量和局部變量python

    <script type="text/javascript">
        // 全局變量
        name = 'seven';
        
        function func(){
            // 局部變量
            var age = 18;
            // 全局變量
            gender = "男"
        }
        console.log(name);          // seven
        console.log(gender);        // 報錯：seven
    </script>

定義全局變量和局部變量

1.2 JavaScript中數據類型返回頂部

　　字符串、數字、布爾、數組、對象、Null、Undefinedjquery

　　一、JavaScript 中的數據類型分爲原始類型和對象類型：web

　　　　1、原始類型正則表達式

　　　　　　　　1）數字數組

　　　　　　　　2）字符串瀏覽器

　　　　　　　　3）布爾值app

　　　　2.、對象類型

　　　　　　　　1）數組

　　　　　　　　2）「字典」

　　　　　　　　3）……..

　　　　3、特別的，數字、布爾值、null、undefined、字符串是不可變。

　　　　　　　　1）null是JavaScript語言的關鍵字，它表示一個特殊值，經常使用來描述「空值」。

　　　　　　　　2）undefined是一個特殊值，表示變量未定義。

　　二、數字（Number）

　　　　說明：JavaScript 只有一種數字類型。數字能夠帶小數點，也能夠不帶

　　　　1. JavaScript數字定義

　　　　　　　　var x1=34.00; //使用小數點來寫
　　　　　　　　var x2=34; //不使用小數點來寫

　　　　2. 轉換

　　　　　　　　1）parseInt(..) 將某值轉換成數字，不成功則NaN

　　　　　　　　2）parseFloat(..) 將某值轉換成浮點數，不成功則NaN

　　　　3、特殊值

　　　　　　　　1）NaN，非數字。可以使用 isNaN(num) 來判斷。

　　　　　　　　2）Infinity，無窮大。可以使用 isFinite(num) 來判斷。

　　三、字符串（String）

　　　　1. 字符串說明

　　　　　　　　#1. 字符串是由字符組成的數組，但在JavaScript中字符串是不可變的：能夠訪問字符串任意位置的文本

　　　　　　　　#2. 可是JavaScript並未提供修改已知字符串內容的方法

　　　　2. 實現「歡迎齊天大聖蒞臨指導」滾動效果（跑馬燈）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="i1">歡迎齊天大聖蒞臨指導</div>

    <script>
                          
        function func(){
            var tag = document.getElementById('i1');
            var content = tag.innerText;
            var f = content.charAt(0);      //f = 歡
                                             // l = 迎齊天大聖蒞臨指導
            var l = content.substring(1,content.length);
            var new_content = l + f;        //new_content = 迎齊天大聖蒞臨指導歡
                                            //而後將tag.innerText從新賦值成：迎齊天大聖蒞臨指導歡
            tag.innerText = new_content;
        }
        setInterval('func()', 2000);        //定時器：func()是上面定義的函數名，2000毫秒執行一次func()函數
    </script>
</body>
</html>

跑馬燈

　　　　3. 字符串（String）經常使用方法

# obj.length                           長度
# obj.trim()                           移除空白
# eg：   v = $.trim(v);                去除獲取值v的空白
# obj.trimLeft()                       移除左側空白
# obj.trimRight)                       移除右側空白
# obj.charAt(n)                        回字符串中的第n個字符
# obj.concat(value, ...)               拼接
# obj.indexOf(substring,start)         序列位置
# obj.lastIndexOf(substring,start)     子序列位置
# obj.substring(from, to)              根據索引獲取子序列
# obj.slice(start, end)                切片
# obj.toLowerCase()                    大寫
# obj.toUpperCase()                    小寫
# obj.split(delimiter, limit)          分割    （limit指定取出分割後的幾個元素）
# obj.search(regexp)                   頭開始匹配，返回匹配成功的第一個位置(g無效)
# obj.match(regexp)                    全局搜索，若是正則中有g表示找到所有，不然只找到第一個。
# obj.replace(regexp, replacement)     替換，正則中有g則替換全部，不然只替換第一個匹配項，
                                       $數字：匹配的第n個組內容；
                                       $&：當前匹配的內容；
                                       $`：位於匹配子串左側的文本；
                                       $'：位於匹配子串右側的文本
                                       $$：直接量$符號

字符串經常使用方法

　　　　4. 比較slice，substr， substring

#一、slice(起始位置， 結束位置)
    起始位置大於結束位置，截取不到
    出現負數，加上長度
    
#二、substring(起始位置， 結束位置)
    起始位置大於結束位置，調換位置
    出現負數，變成0
    
#三、substr(起始位置， 截取長度)
    起始位置大於截取長度沒有影響
    起始位置出現負數，加上長度
    截取長度出現負數，截取不到

比較slice，substr， substring

　　三、布爾類型（Boolean）

　　　　　　布爾類型僅包含真假，與Python不一樣的是其首字母小寫。

　　四、數組（就是python中的列表）

# obj.length                            數組的大小
# obj.push(ele)                         尾部追加元素
# obj.pop()                             尾部獲取一個元素
# obj.unshift(ele)                      頭部插入元素
# obj.shift()                           頭部移除元素
# obj.splice(start, deleteCount, value, ...)     插入、刪除或替換數組的元素
        l = [1,2,3,4]
        l.splice(1,1,99)          #替換：替換位置爲1的，1表示將原來這個位置的值刪除，替換成99
        l.splice(1,0,999)         #插入：插入位置爲1,  0表示不刪除原位置值，插入的元素是999
        l.splice(1,1)             #刪除：刪除位置爲1，1表示刪除原位置元素，後面沒有值因此就刪了
# l.slice(0,2)                    #切片：獲取數組l中前兩個元素
# obj.reverse( )                       反轉
# obj.join(sep)                        將數組元素鏈接起來以構建一個字符串
# obj.concat(val,..)                   鏈接數組
# obj.sort( )                          對數組元素進行排序

# 注：可使用數組的indexOf()方法若是返回值爲-1則說明不存在，若是返回值爲大於-1的整數，則說明存在
# var arr = [1,2,3];
# arr.indexOf(1);    // 返回0
# arr.indexOf(5);    // 返回-1

數組經常使用方法

　　五、字典

　　　　　　1. JavaScript中的字典和python中字典定義和取值方法相同

　　　　　　2. a = {'k1':'v1','k2':'v2'} #定義一個字典

　　　　　　3. a['k1'] #獲取字典a中v1的值

　　六、日期

　　　　1. 獲取當前時間並格式化

<script>
    var myDate=new Date();

    console.log(myDate.getTime());               // 1512113068061    從 1970 年 1 月 1 日至今的毫秒數。
    console.log(myDate.getDay());                // 5       表示星期五

    console.log(myDate.toLocaleDateString());   // 2017/12/1
    console.log(myDate.toLocaleTimeString());   // 下午3:28:56
    console.log(myDate.toLocaleString());       // 2017/12/1 下午3:28:56
    console.log(myDate.toTimeString());         // 15:28:56 GMT+0800 (中國標準時間)
</script>

獲取當前時間並格式化舉例

　　　　2. 操做日期

<script>
//一、設置了一個特定的日期 (2008 年 8 月 9 日)
    var myDate=new Date();
    var t1 = myDate.setFullYear(2008,7,9);
    console.log(t1);                                   // 1218269219538

//二、咱們將日期對象設置爲 5 天后的日期
    var myDate=new Date();
    var t2 = myDate.setDate(myDate.getDate()+5);
    console.log(t2);                                   // 1512547619538

//三、將上面獲得的毫秒的時間轉換成格式化時間
    var t = new Date( t1 ) ;
    commonTime = t.toLocaleString();
    console.log(commonTime);                          // 2017/12/6 下午4:04:14
</script>

操做日期

　　　　3. 比較日期

<script>
// 下面的代碼將當前日期與 2008 年 8 月 9 日作了比較
    var myDate=new Date();
    myDate.setFullYear(2008,8,9);

    var today = new Date();
        if (myDate>today){
            alert("Today is before 9th August 2008");
        }else {
             alert("Today is after 9th August 2008");
        }
</script>

比較日期

　　　　4. 自定義格式化函數

<script>
    // 對Date的擴展，將 Date 轉化爲指定格式的String
    // 月(M)、日(d)、小時(h)、分(m)、秒(s)、季度(q) 能夠用 1-2 個佔位符，
    // 年(y)能夠用 1-4 個佔位符，毫秒(S)只能用 1 個佔位符(是 1-3 位的數字)
    // 例子：
    // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
    // (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
    Date.prototype.Format = function (fmt) { //author: meizz
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小時
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    };

    var time1 = new Date().Format("yyyy-MM-dd");
    var time2 = new Date().Format("yyyy-MM-dd hh:mm:ss");

    console.log(time1);           // 2017-12-01
    console.log(time2);           // 2017-12-01 15:53:42
</script>

自定義時間格式化函數

　　　　5. 日期對象操做更多方法

#   方法                           描述

# Date()                  返回當日的日期和時間。
# getDate()               從 Date 對象返回一個月中的某一天 (1 ~ 31)。
# getDay()                從 Date 對象返回一週中的某一天 (0 ~ 6)。
# getMonth()              從 Date 對象返回月份 (0 ~ 11)。
# getFullYear()             從 Date 對象以四位數字返回年份。
# getYear()                  請使用 getFullYear() 方法代替。
# getHours()              返回 Date 對象的小時 (0 ~ 23)。
# getMinutes()            返回 Date 對象的分鐘 (0 ~ 59)。
# getSeconds()            返回 Date 對象的秒數 (0 ~ 59)。
# getMilliseconds()           返回 Date 對象的毫秒(0 ~ 999)。
# getTime()                   返回 1970 年 1 月 1 日至今的毫秒數。
# getTimezoneOffset()       返回本地時間與格林威治標準時間 (GMT) 的分鐘差。
# getUTCDate()               根據世界時從 Date 對象返回月中的一天 (1 ~ 31)。
# getUTCDay()               根據世界時從 Date 對象返回週中的一天 (0 ~ 6)。
# getUTCMonth()           根據世界時從 Date 對象返回月份 (0 ~ 11)。
# getUTCFullYear()        根據世界時從 Date 對象返回四位數的年份。
# getUTCHours()              根據世界時返回 Date 對象的小時 (0 ~ 23)。
# getUTCMinutes()          根據世界時返回 Date 對象的分鐘 (0 ~ 59)。
# getUTCSeconds()          根據世界時返回 Date 對象的秒鐘 (0 ~ 59)。
# getUTCMilliseconds()      根據世界時返回 Date 對象的毫秒(0 ~ 999)。
# parse()                  返回1970年1月1日午夜到指定日期（字符串）的毫秒數。
# setDate()                  設置 Date 對象中月的某一天 (1 ~ 31)。
# setMonth()              設置 Date 對象中月份 (0 ~ 11)。
# setFullYear()              設置 Date 對象中的年份（四位數字）。
# setYear()                  請使用 setFullYear() 方法代替。
# setHours()              設置 Date 對象中的小時 (0 ~ 23)。
# setMinutes()            設置 Date 對象中的分鐘 (0 ~ 59)。
# setSeconds()            設置 Date 對象中的秒鐘 (0 ~ 59)。
# setMilliseconds()       設置 Date 對象中的毫秒 (0 ~ 999)。
# setTime()               以毫秒設置 Date 對象。
# setUTCDate()            根據世界時設置 Date 對象中月份的一天 (1 ~ 31)。
# setUTCMonth()           根據世界時設置 Date 對象中的月份 (0 ~ 11)。
# setUTCFullYear()        根據世界時設置 Date 對象中的年份（四位數字）。
# setUTCHours()           根據世界時設置 Date 對象中的小時 (0 ~ 23)。
# setUTCMinutes()         根據世界時設置 Date 對象中的分鐘 (0 ~ 59)。
# setUTCSeconds()         根據世界時設置 Date 對象中的秒鐘 (0 ~ 59)。
# setUTCMilliseconds()    根據世界時設置 Date 對象中的毫秒 (0 ~ 999)。
# toSource()              返回該對象的源代碼。
# toString()              把 Date 對象轉換爲字符串。
# toTimeString()          把 Date 對象的時間部分轉換爲字符串。
# toDateString()          把 Date 對象的日期部分轉換爲字符串。
# toGMTString()           請使用 toUTCString() 方法代替。
# toUTCString()           根據世界時，把 Date 對象轉換爲字符串。
# toLocaleString()        根據本地時間格式，把 Date 對象轉換爲字符串。
# toLocaleTimeString()    根據本地時間格式，把 Date 對象的時間部分轉換爲字符串。
# toLocaleDateString()    根據本地時間格式，把 Date 對象的日期部分轉換爲字符串。
# UTC()                   根據世界時返回 1970 年 1 月 1 日 到指定日期的毫秒數。
# valueOf()                  返回 Date 對象的原始值。

日期更多函數

1.3 JavaScript中的兩種for循環返回頂部

　　1、循環時循環的是索引（分別循環一個列表和字典的值）

　　　　1. 循環數組

<script>
    a = [11,22,33,44];

    for(var i in a){
    console.log(a[i]);
    }
</script>

法1：循環數組

　　　　2. 循環字典

<script>
    k = {'k1':'v1','k2':'v2'};

    for(var i in k){
        console.log(k[i]);
    }
</script>

循環字典

　　二、第二種循環數組的方法（此方法不可循環字典）

<script>
    a = [11,22,33,44];
    
    for(var i=0;i<a.length;i=i+1){
        console.log(a[i]);
    }
</script>

法2：循環數組

<script>
    cars=["BMW","Volvo","Saab","Ford"];
    var i=0;
    while (cars[i])
    {
        document.write(cars[i] + "<br>");
        i++;
    }
</script>

法3：while循環數組

1.4 條件語句：if、switch、while 返回頂部

　　　　　　1. == 比較值相等

　　　　　　2. != 不等於

　　　　　　3. === 比較值和類型相等

　　　　　　4. !=== 不等於

　　　　　　5. || 或

　　　　　　6. && 且

　　一、If...Else 語句

<script>
    time = 1;

// 一、 if語句
    if (time<20){
        x="Good day";
    }

// 二、 if....else語句
    if (time<20){
        x="Good day";
    }else {
        x="Good evening";
    }

// 三、If...else if...else 語句
    if(time<10){
        x="Good morning";
    }else if (time<20){
        x="Good day";
    }else {
        x="Good evening";
    }

    console.log(x)
</script>

三種if語句寫法

　　二、Switch 語句

<script>
    var day=new Date().getDay();
    switch (day)
    {
    case 0:
      x="Today it's Sunday";
      break;
    case 1:
      x="Today it's Monday";
      break;
    case 2:
      x="Today it's Tuesday";
      break;
    case 3:
      x="Today it's Wednesday";
      break;
    case 4:
      x="Today it's Thursday";
      break;
    case 5:
      x="Today it's Friday";
      break;
    case 6:
      x="Today it's Saturday";
      break;
    }

    console.log(x);         // Today it's Friday
</script>

顯示今日的周名稱。請注意 Sunday=0, Monday=1, Tuesday=2, 等等

<script>
    var day=new Date().getDay();
    switch (day)
    {
    case 6:
      x="Today it's Saturday";
      break;
    case 0:
      x="Today it's Sunday";
      break;
    default:
      x="Looking forward to the Weekend";
    }
    console.log(x);            // Looking forward to the Weekend
</script>

使用 default 關鍵詞來規定匹配不存在時作的事情

　　三、while 循環

<script>
    var i = 2;
    while (i<5){
        i += 1;
        console.log(i);
    }
</script>

while循環

<script>
//    do{
//        // 執行的代碼
//    }while ('條件');

    var i = 1;
    do{
        i ++;
        console.log(i);
    }while (i<5);
</script>

do/while 循環

1.5 break / continue 返回頂部

　　　　一、continue 語句（帶有或不帶標籤引用）只能用在循環中

　　　　二、break 語句（不帶標籤引用），只能用在循環或 switch 中。

<script>
// 一、break語句使用
    for (i=0;i<10;i++){
        if (i==3){
            break
        }
        console.log(i);         // 輸出：0  1  2
    }

// 二、continue語句使用
    for (i=0;i<10;i++){
        if (i==3){
            continue
        }
        console.log(i);         // 輸出：0  1  2     4  5  6  7  8  9
    }
</script>

Break 和 Continue 語句

1.6 JavaScript函數返回頂部

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

　　一、 JavaScript中的三類函數

　　　　1. 普通函數

　　　　　　　　特色： 普通函數必須定義一個名字，當調用時纔會執行函數體內容

<script>
    function funcname(arg){               // 定義這個函數名字是funcname
        console.log(123);             // 函數體執行語句是向屏幕打印 「123」
    }
    
    setInterval('funcname()', 2000);  // 使用setInterval方法每2000毫秒執行一次funcname函數
</script>

普通函數

　　　　2. 匿名函數

　　　　　　　　特色： 匿名函數沒必要定義函數名稱

<script>
    var noname = function(arg){       // 這裏定義函數時沒有定義名字，而是將函數賦值給局部變量noname
        return "tony";            // 這個匿名函數執行語句是返回 「tony」
 }; noname(); // 局部變量加上括號就能夠調用上面的匿名函數
</script>

匿名函數

　　　　3. 自執行函數

　　　　　　　　特色： 沒必要定義函數名，建立函數時自動執行函數體內容

　　　　　　　　1. 場景：當開發網站時，咱們可能會常常引用別人的js插件，若是咱們使用了好多家js插件

　　　　　　　　2. 當咱們在網頁中引入這些js時須要用解釋器去編譯，這些js中的函數名極可能重複了

　　　　　　　　3. 這就致使同名函數可能失效，固然咱們能夠爲每家js插件定義一個函數，將各自的js插件都放到各自函數中

　　　　　　　　這樣即便有重複函數名，可是最外層的函數名也不一樣

　　　　　　　　4. 可是若是巧合的·是這兩個js插件名字也同樣，使用上面方法就沒法解決了

　　　　　　　　5. 使用匿名函數就能夠很容易解決這個問題，咱們在定義最外層函數時能夠不定義函數名字，而是讓裏面的

　　　　　　　　函數自動執行如下，那麼裏面的全部函數就會被解釋了。

    (function(arg){
        console.log(arg);
    })(111);               // 這裏形參是arg，定義函數時就傳入實參111，執行函數體

自執行函數

　　二、JavaScript中函數做用域

　　　　1.三句話搞定JavaScript做用域

　　　　　　　　1. JavaScript中無塊級做用域」而採用函數做用域

　　　　　　　　2. JavaScript的做用域鏈執行前已建立

　　　　　　　　3. 聲明提早

　　　　2. 第一句：JavaScript中無塊級做用域」而採用函數做用域

　　　　　　　　在JavaScript中每一個函數做爲一個做用域，在外部沒法訪問內部做用域中的變量。

    <script>
        xo = '第四';
        function func(){
            var xo = '第三';
            function inner(){
                var xo = '第一';
                console.log(xo);
            }
            var xo = '第二';
            return inner;
        }
        var ret = func();
        ret();

        // 運行結果： 第一
    </script>

JavaScript以函數作做用域

　　　　3. 第二句：JavaScript的做用域鏈執行前已建立

　　　　　　　　1. 因爲JavaScript中的每一個函數做爲一個做用域，若是出現函數嵌套函數，則就會出現做用域鏈。

　　　　　　　　2. 以下面代碼則出現三個做用域組成的做用域鏈，若是出現做用域鏈後，那麼尋找變量時候就會出現順序

　　　　　　　　3. 當執行console.log(xo)時，其尋找順序爲根據做用域鏈從內到外的優先級尋找，若是內層沒有就逐步向上找，直到沒找到拋出異常

　　　　　　　　4. 全局做用域 -> Func函數做用域 -> inner函數做用域，因此，在執行【ret();】時，會根據已經存在的做用域鏈去尋找變量。

　　　　4. 第三句：聲明提早

　　　　　　　　1. 在JavaScript中若是不建立變量，直接去使用，則報錯

　　　　　　　　2. 不報錯而是輸出 undefined，其緣由是：JavaScript的函數在被執行以前，會將其中的變量所有聲明，而不賦值。

　　　　　　　　因此，至關於上述實例中，函數在「預編譯」時，已經執行了var xo；因此上述代碼中輸出的是undefined。

<script>
    function func(){
        console.log(xo);
        var xo = 'eric';
    }
    func();
//    運行結果： undifined
    
    function func(){
        console.log(xxoo);
    }
    func();
//    運行結果： 報未定義錯誤
</script>

JavaScript變量聲明提早

　　三、JavaScript觸發函數三種使用

　　　　1. 不傳入參數的函數

    <button onclick="myFunction()">點擊這裏</button>

<script>
    function myFunction(){
        alert("Hello World!");
    }
</script>

不傳入參數的函數

　　　　2. 傳入參數的函數

    <button onclick="myFunction('Bill Gates','CEO')">點擊這裏</button>

<script>
    function myFunction(name,job){
        alert("Welcome " + name + ", the " + job);
    }
</script>

傳入參數的函數

　　　　3. 帶有返回值的函數

    <button onclick="myFunction(100,200)">點擊這裏</button>

<script>
    function myFunction(num1,num2){
        var sum = plus(num1,num2);
        alert(sum)
    }

    function plus(a,b) {
        return a + b;
    }
</script>

帶沒有返回值的函數

1.7 JavaScript 對象返回頂部

　　一、對象定義

　　　　　　1. JavaScript 中的全部事物都是對象：字符串、數字、數組、日期，等等

　　　　　　2. 在 JavaScript 中，對象是擁有屬性和方法的數據。

　　　　　　3. 屬性是與對象相關的值，方法是可以在對象上執行的動做

　　　　　　4. JavaScript 中的幾乎全部事務都是對象：字符串、數字、數組、日期、函數，等等。

　　二、使用JavaScript語法定義一個類

　　　　　　1） Foo充當的構造函數（類名稱）

　　　　　　2）函數中的this就至關於python中的self

　　　　　　3）建立對象時：new 函數() 必需要使用new關鍵字

　　　　　　注：上述代碼中每一個對象中均保存了一個相同的Func函數，從而浪費內存。使用原型和能夠解決該問題

<script>
    function Foo (name,age) {             //定義一個類名字是FOO，有兩個參數name和age
        this.Name = name;
        this.Age = age;
        this.Func = function(arg){
            return this.Name + arg;
        }
    }

    var obj = new Foo('jack', 18);       //實例化類對象時必需要加上關鍵字new
    var ret = obj.Func(" sb");           //經過這個實例obj來調用類中定義的方法Func()
    console.log(ret);                    //運行結果：  jack sb
</script>

使用普通方法建立類

　　三、JavaScript原型解決上面浪費內存問題

　　　　　　1）原型是利用prototype關鍵字，將上面在類內部定義的的函數分離到類外部定義
　　　　　　2）這個類的實例會經過類找到他想調用的函數（實現python類的效果）
　　　　　　3）這樣就不用每實例化一個類就保存一個Fucn函數了

<script>
    function Foo (name,age) {
        this.Name = name;
        this.Age = age;
    }

    Foo.prototype = {                     //經過prototype關鍵字指定Foo類的函數
        Func : function(arg){             //Func是這個函數的名字
            return this.Name + arg;
        }
    };
    var obj = new Foo('fly', 18);       //實例化類對象時必需要加上關鍵字new
    var ret = obj.Func(" sb");          //    運行結果：  fly sb
    console.log(ret);
</script>

原型方法建立類

1.8 JavaScript正則表達式返回頂部

　　RegExp 對象有 3 個方法：test()、exec() 以及 compile()。

　　一、test(string) 檢查字符串中是否和正則匹配

<script>
    var n = 'uui99sdf';
// 一、只要存在數字就是true
    reg = /\d+/    ;                     // 只要存在數字就是true
    console.log( reg.test(n) ) ;     //  運行結果： ture

// 二、 只有所有是數字才返回true
    reg = /^\d+$/;                   // 所有都是數字纔會返回true（匹配開頭到結尾全是數字）
                                      //  ^  :  尖尖a指定匹配正則的開頭
                                      // $  :   美圓符號匹配正則的結尾
    console.log( reg.test(n) ) ;     //  運行結果： false
</script>

test(string)檢查字符串中是否和正則匹配

　　2、 exec(string)

　　　　　　做用：獲取正則表達式匹配的內容，若是未匹配，值爲null，不然，獲取匹配成功的數組

　　　　1. exec默認只會獲得第一個匹配值

// 1. exec默認只會獲得第一個匹配值
    var rep = /\d+/;
    var str = "wangshen_67_houyafa_20";
    console.log( rep.exec(str)[1] );              // 運行結果： ["67"]

exec默認只會獲得第一個匹配值

　　　　2. 非全局模式：匹配以Java開頭的單詞，默認只能匹配一個

<script>
//一、匹配以Java開頭的單詞：\b 匹配一個單詞邊界   \w* 匹配全部字母 數字 字符等
// 默認只能匹配第一個
    var pattern = /\bJava\w*\b/;            // 匹配一個單詞邊界，也就是指單詞和空格間的位置
    var text = "JavaScript is more fun than Java or JavaBeans!";
    var result = pattern.exec(text);
    console.log(result[0]);              // JavaScript
</script>

匹配以Java開頭的單詞

1.9 JavaScript 錯誤 - Throw、Try 和 Catch 返回頂部

　　一、異常說明

　　　　　　1. try 語句測試代碼塊的錯誤。

　　　　　　2. catch 語句處理錯誤。

　　　　　　3. throw 語句建立自定義錯誤。

　　　　　　說明： JavaScript 語句 try 和 catch 是成對出現的。

　　二、try 和 catch捕獲異常

    try{
        //在這裏運行代碼
    }catch (err){
        //在這裏處理錯誤
    }

<script>
    try{
        console.log(aaa)
    }catch (err){
        console.log(err.message);     // aaa is not defined
    }
</script>

try...catch捕獲異常基本使用

　　三、Throw 語句

　　　　　　1. throw 語句容許咱們建立自定義錯誤。

　　　　　　2. 若是把 throw 與 try 和 catch 一塊兒使用，那麼您可以控制程序流，並生成自定義的錯誤消息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>個人第一個 JavaScript 程序</h1>
    <p>請輸入 5 到 10 之間的數字：</p>
    <input id="demo" type="text">
    <button type="button" onclick="myFunction()">測試輸入值</button>
    <p id="mess"></p>


    <script>
        function myFunction() {
            try{
                var x=document.getElementById("demo").value;
                if(x=="")    throw "值爲空";
                if(isNaN(x)) throw "不是數字";
                if(x>10)     throw "太大";
                if(x<5)      throw "過小";
            }catch (err){
                var y=document.getElementById("mess");
                y.innerHTML=err;
            }
        }
    </script>
</body>
</html>

throw 與 try 和 catch 一塊兒使用

1.10 JavaScript表單驗證返回頂部

　　一、驗證表單中的必填選項

　　　　　　1. 下面的函數用來檢查用戶是否已填寫表單中的必填（或必選）項目。

　　　　　　2. 假如必填或必選項爲空，那麼警告框會彈出，而且函數的返回值爲 false，不然函數的返回值則爲 true（意味着數據沒有問題）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="submitpage.html" onsubmit="return validate_form(this)" method="post">
    Phone: <input type="text" name="phone" size="30">
    Email: <input type="text" name="email" size="30">
    <input type="submit" value="Submit">
    </form>


    <script type="text/javascript">
        function validate_required(field,alerttxt){
            with (field){
                if (value==null || value==""){
                    alert(alerttxt);
                    return false;
                }else {
                    return true;
                }
            }
        }

        function validate_form(thisform){
            with (thisform){
                if (validate_required(email,"Email must be feilled out!")==false){
                    email.focus();
                    return false;
                }
                if (validate_required(phone,"Phone must be feilled out!")==false){
                    email.focus();
                    return false;
                }
            }
        }
    </script>
</body>
</html>

驗證email和phone兩個input標籤不能爲空

　　二、驗證E-mail 格式是否合法

　　　　　　1. 意思就是說，輸入的數據必須包含 @ 符號和點號(.)。

　　　　　　2. 同時，@ 不能夠是郵件地址的首字符，而且 @ 以後需有至少一個點號

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
    Email: <input type="text" name="email" size="30">
    <input type="submit" value="Submit">
    </form>


    <script type="text/javascript">
        function validate_email(field,alerttxt){
            with (field){
                apos=value.indexOf("@");
                dotpos=value.lastIndexOf(".");
                if (apos<1 || dotpos-apos<2){
                    alert(alerttxt);
                    return false;
                }else {
                    return true;
                }
            }
        }

        function validate_form(thisform){
            with (thisform){
                if (validate_email(email,"Not a valid e-mail address!")==false){
                    email.focus();
                    return false;
                }
            }

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

驗證email地址是否合法

1.11 JavaScript其餘幾個用法返回頂部

　　一、序列化

　　　　　　1. JSON.stringify(obj) 序列化（如： JSON.stringify([1,2.3]) 將數組轉換成字符串）
　　　　　　2. JSON.parse(str) 反序列化（如： JSON.parse('[1,2,3]')）將字符串轉換成數組
　　　　　　3. typeof 1 判斷數字1的類型："number"

　　二、eval （是python中eval和exec兩個方法的集合）

　　　　　　1. 在Python中： eval(表達式) exec(執行代碼) //exec執行完代碼後是麼有返回值的

　　　　　　2. JavaScript中的eval能夠執行代碼，也能夠執行表達式

　　三、轉義

　　　　1. 將URL中的中文部分轉義

　　　　　　　　1） encodeURI #將URL中的中文部分轉義成特殊字符串

　　　　　　　　2） decodeURI #將剛剛轉義的URL字符串再變成中文

# url = "https://www.sogou.com/web?query=李傑"

# newUrl = encodeURI(url)
# "https://www.sogou.com/web?query=%E6%9D%8E%E6%9D%B0"

# decodeURI(newUrl)
# "https://www.sogou.com/web?query=李傑"

url中中文轉義

　　　　2. 將url中文部分轉義

　　　　　　　　1） encodeURIComponent #將url中文部分，和連接都轉義成特殊字符

　　　　　　　　2） decodeURIComponent #將特殊字符再轉義成能夠正常連接

# url = "https://www.sogou.com/web?query=李傑"

# newUrl2=encodeURIComponent(url)
# "https%3A%2F%2Fwww.sogou.com%2Fweb%3Fquery%3D%E6%9D%8E%E6%9D%B0"

# decodeURIComponent(newUrl2) 
# "https://www.sogou.com/web?query=李傑"

url中文部分轉義

　　四、JavaScript綁定事件的兩種方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <p id="i1" onclick="func();">點擊</p>

    <script>
        // 綁定點擊方法1：
        function func() {
            console.log('func')
        }
        
        // 綁定點擊事件方法2：
        var f2 = document.getElementById('i1');
        f2.onclick = function () {
            console.log('f2')
        };
    </script>
</body>
</html>

JavaScript綁定點擊事件兩種方法

　　五、URL和刷新
　　　　　　1） location.href 獲取URL
　　　　　　2） location.href = "url" 重定向
　　　　　　 window.location.href='/app01/'
　　　　　　3） location.reload() 刷新頁面

1.12 JavaScript中replace詳解返回頂部

　　一、replace做用 參考博客

　　　　1.在JavaScript中replace函數做爲字符串替換函數，這是一個威力強大的字符串操做函數
　　　　2.replace函數接受兩個參數,第一個參數爲字符串或正則表達式，第二個參數一樣能夠接受一個字符串，還多是一個函數。
　　　　3.對於正則表達式來講首先會根據是否全局的（全局//g）決定替換行爲，若是是所有的則替換所有替換，非全局的只有替換首個匹配的字符串

　　二、第一種：第一個參數爲正則，第二個參數爲字符串

　　　　　　1. "Ha Ha".replace(/\b\w+\b/g, "He") // He He
　　　　　　2. "Ha Ha".replace(/\b\w+\b/, "He") //He Ha

　　三、第二種：第一個參數爲正則，第二個參數爲函數

　　　　1.函數中默認會傳遞四個參數

　　　　　　　　1. 第一個參數爲每次匹配的全文本。
　　　　　　　　2. 中間參數爲子表達式匹配字符串，個數不限
　　　　　　　　3. 倒數第二個參數爲匹配文本字符串的匹配下標位置。
　　　　　　　　4. 最後一個參數表示字符串自己。

　　　　2. 使用這些規則爲JavaScript字符串建立format方法

　　　　　　　　說明：當replace方法每次匹配到一個值的時候都會調用該函數，返回值做爲替換的新值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>爲JavaScript字符串建立format方法</h1>
    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        // '{n}-{m}'.format({'n': 'hostname','m':'@hostname'})   轉換成=> "hostname-@hostname"
        // this = '{n}-{m}'
        // args ={'n': 'hostname','m':'@hostname'}
        String.prototype.format = function (args) {
            return this.replace(/\{(\w+)\}/g, function (arg1, arg2,arg3,arg4,arg5) {  // s = {m}   i = m
                console.log('arg1:',arg1,'arg2:',arg2,'arg3:',arg3,'arg4:',arg4);
                return args[arg2];      // args[m] = hostname
            });
        };

        // 瀏覽器控制檯執行： '{n}-{m}'.format({'n': 'hostname','m':'@hostname'})   轉換成=> "hostname-@hostname"
        /*  函數中默認會接收下面四個參數：
                因爲正則有兩個匹配，因此會兩次調用function方法
　　　　　　　　1. 第一個參數爲每次匹配的全文本。（{n}  和  {m}）
　　　　　　　　2. 中間參數爲子表達式匹配字符串。 （m   和   n ）
　　　　　　　　3. 倒數第二個參數爲匹配文本字符串的匹配下標位置。 (0    和     4)
　　　　　　　　4. 最後一個參數表示字符串自己。 （{n}-{m} 和 {n}-{m}）
         */

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