一 JavaScript介紹

JavaScript 是運行在瀏覽器端的腳步語言，JavaScript 主要解決的是前端與用戶交互的問題，包括使用交互與數據交互。 JavaScript是瀏覽器解釋執行的，前端腳本語言還有JScript（微軟，IE獨有），ActionScript( Adobe公司，需要插件)等。

前端三大塊
1、HTML：頁面結構
2、CSS：頁面表現：元素大小、顏色、位置、隱藏或顯示、部分動畫效果
3、JavaScript：頁面行為：部分動畫效果、頁面與用戶的交互、頁面功能

1. HTML 引入 JavaScript 的方式

1、行間事件（主要用于事件）

<input type="button" name="" onclick="alert('ok！');">

2、頁面script標簽嵌入

<script type="text/javascript">        
    alert('ok！');
</script>

3、外部引入

<script type="text/javascript" src="js/index.js"></script>

2. 變量、數據類型及基本語法規范

JavaScript 是一種弱類型語言，javascript的變量類型由它的值來決定。 定義變量需要用關鍵字 'var'

 var iNum = 123
 var sTr = 'asd'

 //同時定義多個變量可以用","隔開，公用一個‘var’關鍵字
 var iNum = 45, sTr='qwe', sCount='68';

基本數據類型

5種基本數據類型：
1、number 數字類型
2、string 字符串類型
3、boolean 布爾類型 true 或 false
4、undefined undefined類型，變量聲明未初始化，它的值就是undefined
5、null null類型，表示空對象，如果定義的變量將來準備保存對象，可以將變量初始化為null,在頁面上獲取不到對象，返回的值就是null

1種復合類型：

object

javascript語句與注釋

1、javascript語句開始可縮進也可不縮進，縮進是為了方便代碼閱讀，一條javascript語句應該以“;”結尾;

<script type="text/javascript">    
    var iNum = 123;
    var sTr = 'abc123';
    function fnAlert(){
        alert(sTr);
    };
    fnAlert();
</script>

2、javascript注釋

<script type="text/javascript">    
    // 單行注釋
    var iNum = 123;
    
    /*  
        多行注釋
        1、...
        2、...
    */
    var sTr = 'abc123';
</script>

變量、函數、屬性、函數參數命名規范

1、區分大小寫
2、第一個字符必須是字母、下劃線（_）或者美元符號（$）
3、其他字符可以是字母、下劃線、美元符或數字

匈牙利命名風格：

對象o Object 比如：oDiv
數組a Array 比如：aItems
字符串s String 比如：sUserName
整數i Integer 比如：iItemCount
布爾值b Boolean 比如：bIsComplete
浮點數f Float 比如：fPrice
函數fn Function 比如：fnHandler
正則表達式re RegExp 比如：reEmailCheck

3.函數

函數就是重復執行的代碼片段。

1. 函數定義與執行

<script type="text/javascript">
    // 函數定義
    function fnAlert(){
        alert('hello!');
    }
    // 函數執行
    fnAlert();
</script>

變量 與 函數 預解析

JavaScript 解析過程分為兩個階段，先是編譯階段，然后執行階段，在編譯階段會將function定義的函數提前，并且將var定義

的變量聲明提前，將它賦值為 undefined。

<script type="text/javascript">    
    
    fnAlert();       // 彈出 hello！
  
    function fnAlert(){
        alert('hello!');
    }
    
    
    alert(iNum);  // 彈出 undefined
    var iNum = 123;
    
</script>

2. 函數傳參

Javascript 的函數中可以傳遞參數。

<script type="text/javascript">
    function fnAlert(a){
        alert(a);
    }
    fnAlert(12345);
</script>

3. 函數的返回值

JavaScript 中函數使用 return 返回內容

函數中 'return' 關鍵字的作用：

• 返回函數中的值或者對象
• 結束函數的運行

<script type="text/javascript">
    // 函數的定義
    function addFunc(num1, num2){
        var result = num1 + num2;
        return result;
        alert('here!');
    }
    
    // 函數的調用
    var result = addFunc(3,4);
    // 彈出7
    alert(result);  
 
</script>

4. 條件語句

想要控制程序的走向，一般使用條件語句。

1) 條件運算符和邏輯運算符:

2) 條件語句表達式

• if 語句單獨使用:

  使用時機: 滿足一個條件時,進行處理, 其他情況不考慮的.

  使用格式: 
  
  if (判斷條件) {
      // 如果條件為 true, 進入這里執行
      執行的語句01
      ...
  }
  

• if...... else.... 語句:

  使用時機: 針對一個條件, 滿足處理, 不滿足也處理. 只針對一個條件, 互為互斥事件.

  使用格式: 
  
  if (判斷條件) {
      // 如果條件為 true, 進入這里執行
      執行的語句01
      ...
  } else {
      // 如果條件為 false, 進入這里執行
      執行的語句01
      ...
  }
  

• if..... else if ..... 語句

  使用時機: 針對不同的條件, 進行不同的處理. 需要注意是針對多個條件, 條件間沒有必然聯系

  注意: else if 可以有無限個

  使用格式: 
  
  if (判斷條件01) {
      // 如果第一個條件為 true, 進入這里執行
      執行的語句01
      ...
  } else if (判斷條件02) {
      // 如果第二個條件為 true, 進入這里執行
      執行的語句01
      ...
  }
  

• if..... else if ...... else...... 語句

  使用格式: 
  
  if (判斷條件01) {
      // 如果第一個條件為 true, 進入這里執行
      執行的語句01
      ...
  } else if (判斷條件02) {
      // 如果第二個條件為 true, 進入這里執行
      執行的語句01
      ...
  } else {
    // 如果上面兩個條件都不滿足, 進入這里執行
    執行的語句01
    ...
  }
  

  ?

舉例:

var iNum01 = 3;
var iNum02 = 5;
var sTr;
if ( iNum01 > iNum02 ){
    sTr = '大于';
} else {
    sTr = '小于';
}
alert(sTr);

語句嵌套:

var a = 100
if (a > 10) {
    if (a > 20) {
        alert('大于20啦')
    }
} else {
    alert('沒有10大')
}

3) 總結:

• && (同真為真, 一假為假)

  ? True && True ==> True

  ? False && True ==> False

  ? True && False ==> False

  ? False && False ==> False

• || (全假為假, 一真則真)

  ? True || True ===> True

  ? False || True ===> True

  ? True || False ===> True

  ? False || False ===> False

• ! (非, 取反)

  ? ! True ===> False

  ? ! False ===> True

5. 獲取元素方法

我們可以通過一些方法, 來獲取 HTML 中的元素

通過內置對象 document 的 getElementById 方法來獲取頁面上設置了id屬性的元素

獲取到的是一個 html 對象，然后將它賦值給一個變量，比如：

JS部分:
<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>

HTML部分:
<div id="div1">這是一個div元素</div>

**注意: **上面的語句，如果把 javascript 寫在元素的上面，會獲取不到當前的 HTML 元素:

因為頁面是從上往下加載執行的，javascript 從頁面上獲取元素 div1 的時候，元素 div1 還沒有加載.

解決方法:

• 第一種方法：將 javascript 放到頁面最下邊

  <body>
      <div id="div1">這是一個div元素</div>
      
      <script type="text/javascript">
          var oDiv = document.getElementById('div1')
          alert(oDiv)
       </script>
  </body>
  

• 第二種方法：將 javascript 語句放到 window.onload 觸發的函數里面

  window.onload 方法會在當前頁面加載完成之后觸發

  獲取元素的語句放在這個方法中執行，就可以正常獲取了。

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>



<div id="div1">這是一個div元素</div>

6. 操作元素屬性

獲取的頁面元素，就可以對頁面元素的屬性進行操作，屬性的操作包括屬性的讀和寫。

操作元素屬性

讀取屬性:

var 變量 = 元素.屬性名

JS部分:
var oInput = document.getElementById('input1');
var oA = document.getElementById('link1');
// 讀取屬性值
var sValue = oInput.value;
var sType = oInput.type;
var sName = oInput.name;
var sLinks = oA.href;

HTML部分:
<input type="text" name="setsize" id="input1" value="20px">
<a  id="link1">傳智播客</a>

改寫屬性:

元素.屬性名 = 新屬性值

JS部分:
var oA = document.getElementById('link1');
// 寫(設置)屬性
oA.style.color = 'red';
oA.style.fontSize = sValue;

HTML部分:
<a   id="link1">傳智播客</a>

如果在 JS 中獲取 HTML 的相關屬性, 有如下注意點:

• 如果能夠在 HTML 頁面正常看到的屬性, 我們在 JS 中可以同名獲取
• 如果在 JS 中想要獲取 HTML 元素的 class 屬性, 我們需要使用 className 來獲取
• 對于 style 里面的屬性, 如果使用 '-' 鏈接的, 我們要改成駝峰式, 例如: font-size 改成: style.fontSize

上面修改的是標簽的屬性, 如果我們想要通過 JS 修改標簽中的文本內容, 應該怎樣修改呢?

我們可以通過: innerHTML 來進行修改:

innerHTML 可以讀取或者寫入標簽的文本部分

JS部分: 
<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //讀取
        var sTxt = oDiv.innerHTML;
        alert(sTxt);
        //寫入
        oDiv.innerHTML = '<a ;
    }
</script>


<div id="div1">這是一個div元素</div>

7. 事件屬性及匿名函數

1) 事件屬性

標簽上除了可以添加 樣式, id, class等屬性之外, 還可以添加事件屬性.

最常用的事件屬性有:

• 鼠標單擊事件 onclick
• 鼠標雙擊事件 ondbclick
• 鼠標移入事件 onmouseover
• 鼠標移除事件 onmouseout

說明: 我們可以通過將函數名賦值給事件屬性的形式, 將 事件 和 函數 關聯起來

<script type="text/javascript">
    window.onload = function(){
    
        var oBtn = document.getElementById('btn1');
        oBtn.onclick = myalert;

        function myalert(){
            alert('ok!');
        }
    }
</script>

2) 匿名函數

沒有名字的函數, 稱為匿名函數

可以將匿名函數的定義直接賦值給元素的事件屬性來完成事件和函數的關聯，這樣可以減少函數命名，并且簡化代碼。函數如果做公共函數，就可以寫成匿名函數的形式。

<script type="text/javascript">
    window.onload = function(){
    
        // 正常的函數賦值調用
        var oBtn = document.getElementById('btn1');
        oBtn.onclick = myalert;
        function myalert(){
            alert('ok!');
        }
        
       
       // 匿名函數的使用
        oBtn.onclick = function (){
            alert('ok!');
        }
    }
</script>

二. 綜合實例

我們將要做兩個小的練習:

• 網頁換膚
• 打印名片

1. 網頁換膚:

QQ截圖20180508151500.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/skin01.css" id="link01">
    <script>
        window.onload = function(){
            var oBtn01 = document.getElementById('btn01');
            var oBtn02 = document.getElementById('btn02');
            var oLink = document.getElementById('link01');

            oBtn01.onclick = function(){
                oLink.href = 'css/skin01.css';
            }

            oBtn02.onclick = function(){
                oLink.href = 'css/skin02.css';
            }

        }
    
    </script>
</head>
<body>
    <h1>網頁內容</h1>
    <input type="button" id="btn01" value="皮膚一">
    <input type="button" id="btn02" value="皮膚二">
</body>
</html>

skin01.css:

/* 設置網頁的背景色 */
body{
   background:gold;
}

input{
    width:200px;
    height:50px;
    background:green;
    border:0px;
    color:#fff;
}

skin02.css:

/* 設置網頁的背景色 */
body{
   background:#ddd;
}

input{
    width:200px;
    height:50px;
    background:pink;
    border:0px;
    color:black;
    /* 設置圓角 */
    border-radius:25px;
}

2. 打印名片:

QQ截圖20180508151440.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/main02.css">
    <script type="text/javascript">      
        window.onload = function(){
            var oInput01 = document.getElementById('input01');
            var oInput02 = document.getElementById('input02');
            var oInput03 = document.getElementById('input03');
            var oInput04 = document.getElementById('input04');
            var oInput05 = document.getElementById('input05');
            var oInput06 = document.getElementById('input06');
            var oInput07 = document.getElementById('input07');
            var oBtn = document.getElementById('setcard');
            var oCard = document.getElementById('card_wrap');


            oBtn.onclick = function(){
                var sVal01 = oInput01.value;
                var sVal02 = oInput02.value;
                var sVal03 = oInput03.value;
                var sVal04 = oInput04.value;
                var sVal05 = oInput05.value;
                var sVal06 = oInput06.value;
                var sVal07 = oInput07.value;
                
                // 判斷輸入框不為空
                if(sVal01=='' || sVal02=='' || sVal03=='' || sVal04=='' || sVal05=='' || sVal06==''){
                    alert('輸入框不能為空！');
                    //結束程序往下執行
                    return;
                }

                var sTr = '<div class="p01">'+ sVal01 +'<em>'+ sVal02 +'</em></div>'
                          +'<div class="p02">'                    
                          +'<p class="company">'+ sVal03 +'</p>'
                          +'<p>手機：'+ sVal04 +'</p>'
                          +'<p>email：'+ sVal05 +'</p>'
                          +'<p>地址：'+ sVal06 +'</p>'
                          +'</div>';
                
                // 改變名片內容
                oCard.innerHTML = sTr;

                // 改變名片風格
                if(sVal07==0){
                    oCard.className = 'idcard01';
                }else if(sVal07==1){
                    oCard.className = 'idcard02';
                }else{
                    oCard.className = 'idcard03';
                }            
            }
        }
    </script>
</head>
<body>
    <div class="set_con">
        <div class="left_set">
            <label>姓名：</label>
            <input type="text" id="input01">
            <label>職位：</label>
            <input type="text" id="input02">
            <label>公司名稱：</label>
            <input type="text" id="input03">
            <label>手機：</label>
            <input type="text" id="input04">
            <label>email：</label>
            <input type="text" id="input05">
            <label>地址：</label>
            <input type="text" id="input06">
            <label>風格：</label>
            <select  id="input07">
                <option value="0">風格一</option>
                <option value="1">風格二</option>
                <option value="2">風格三</option>
            </select>
            <input type="button" value="設 置" class="setbtn" id="setcard">
        </div>
        <div class="right_show">
            <div class="idcard01" id="card_wrap">
                <div class="p01">張大山<em>產品經理</em></div>
                <div class="p02">                    
                    <p class="company">銀河科技信息技術有限公司</p>
                    <p>手機：1808888888</p>
                    <p>email：dasan@126.com</p>
                    <p>地址：中關村銀河大廈B座2603</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

main02.css:

.set_con{
    width:900px;
    height:400px;
    border:1px solid #666;
    margin:50px auto 0;
}

.left_set{
    width:299px;
    float:left;
    height:380px;
    border-right:1px solid #666;
    padding-top:20px;
}

.left_set label{
    float:left;
    width:80px;
    height:30px;
    line-height:30px;
    text-align:left;
    text-indent:20px;
    margin-top:10px;
    font-size:12px;
}

.left_set input,.left_set select{
    padding:0px;
    width:198px;
    height:30px;
    border: 1px solid #999;
    float:left;
    margin-top:10px;
    text-indent:10px;
    outline:none;
    border-radius:5px;
    background:#fff;
}

.left_set select{
    height:32px;
}

.left_set .setbtn{
    width:99px;
    height:40px;
    border:0px;
    background:#0181cc;
    color:#fff;
    text-indent:0px;
    margin-left:80px;
    font-size:16px;
    margin-top:20px
}

.right_show{
    width:600px;
    height:400px;
    float:left;
    overflow:auto;
}

.idcard01,.idcard02,.idcard03{
    width:450px;
    height:270px;
    border: 1px solid #ddd;
    background:url(../images/bg01.jpg) no-repeat;
    margin:60px auto 0;
    position:relative;
}

.idcard02{
    background:url(../images/bg02.jpg) no-repeat;
}

.idcard03{
    background:url(../images/bg03.jpg) no-repeat;
}

.idcard01 .p01,.idcard02 .p01,.idcard03 .p01{
    position:absolute;
    right:40px;
    top:123px;
    font-size:22px;
    font-weight:bold;
    color:#666;
}

.idcard02 .p01{
    right:300px;
    top:200px;
}

.idcard03 .p01{
    right:auto;
    left:217px;
    top:149px;
}

.idcard01 .p01 em,.idcard02 .p01 em,.idcard03 .p01 em{
    font-size:14px;
    font-style:normal;
    font-weight:normal;
    margin-left:10px;
    color:#666;
}

.idcard01 .p02,.idcard02 .p02,.idcard03 .p02{
    position:absolute;
    right:40px;
    top:160px;   
}

.idcard03 .p02{
    right:auto;
    left:217px;
    top: 180px;
}

.idcard01 .p02 p,.idcard02 .p02 p,.idcard03 .p02 p{
    text-align:right;
    font-size:12px;
    line-height:24px;
    margin:0px;
    color:#666;
}

.idcard02 .p02 p,.idcard03 .p02 p{
    text-align:left;
}

.idcard03 .p02 p{
    line-height:18px;
}

.idcard01 .p02 .company,.idcard02 .p02 .company,.idcard03 .p02 .company{
    font-size:14px;
    font-weight:bold;
}

三 . JS 高級

介紹 javascript 數組和字符串的操作方法、循環語句、定時器的使用及實例、變量作用域、封閉函數的使用場景。

1. 數組及操作方法

數組就是一組數據的集合，javascript 中，數組里面的數據可以是不同類型的, 這里的數組就相當于我們 python 中的列表

定義數組的方法

數組定義形式: 
第一種: 
var 數組名 = new Array(元素一, 元素二, 元素三...)


第二種: 
var 數組名 = [元素一, 元素二, 元素三...]

例如:

// 對象的實例創建
var aList = new Array(1,2,3);

// 直接量創建
var aList2 = [1,2,3,'asd'];

2. 數組常見的操作方法:

1、獲取數組的長度：

一般我們獲取數組長度使用: length

var aList = [1,2,3,4];

// 打印輸出數組 aList 的長度
console.log(aList.length)

結果:

4

var aList = ['光頭強', '熊大', '熊二', '翠花', '吉吉', '蘿卜頭]

2、下標索引的使用：

和python一樣, 我們也可以利用下標索引的思想來操作數組中某一個元素: aList[0]

var aList = [1,2,3,4];

console.log(aList[0]); 

結果:

1

var aList = ['美羊羊', '慢羊羊', '紅太狼', '喜羊羊', '懶羊羊']

3、join(分隔符)

將數組成員通過一個分隔符合并成字符串

var aList = [1, 2, 3, 4]

var newList = aList.join('-')

console.log(newList)
console.log(typeof(newList)) 

結果:

1-2-3-4
string

var aList = ['七龍珠', '史努比', '鐵壁阿童木', '忍者神龜', '兔八哥']

4、push( ) 和 pop( )

從數組最后增加成員或刪除成員

var aList = [1,2,3,4];

aList.push(5);
console.log(aList)

aList.pop()
console.log(aList)

結果:

[1, 2, 3, 4, 5]

[1, 2, 3, 4]

var aList = ['灌籃高手', '邋遢大王奇遇記', '變形金剛']push

5、reverse( )

將數組反轉

var aList = [3,2,1,4];

aList.reverse();
console.log(aList)

結果:

[4, 1, 2, 3]

var aList = ['蠟筆小新', '舒塔和貝塔', '魔神英雄壇', '棒球英豪']

6、indexOf( )

返回數組中元素第一次出現的索引值:

• 如果有, 則正常返回索引值
• 如果檢索的內容不存在于數組中, 則返回 -1

var aList = [1,2,3,4,1,3,4];

console.log( aList.indexOf(4) )
console.log( aList.indexOf(5) )

結果:

3
-1

var aList = ['美少女戰士', '犬夜叉', '黃金圣斗士', '貓和老鼠', '美少女戰士', '貓和老鼠']

7、splice( )

在數組中增加或刪除成員

使用格式: 

數組名.splice(index,howmany,item1,.....,itemX)

index: 必需。整數，規定添加/刪除項目的位置，使用負數可從數組結尾處規定位置。

howmany: 必需。要刪除的項目數量。如果設置為 0，則不會刪除項目。

item1, ..., itemX: 可選。向數組添加的新項目。

例如:

var aList = [1,2,3,4];

// 從第2個元素開始，刪除1個元素，然后在此位置增加'7,8,9'三個元素
aList.splice(2,1,7,8,9); 
alert(aList); //彈出 1,2,7,8,9,4

8. 多維數組

多維數組指的是數組的成員也是數組的數組。

var aList = [[1,2,3],['a','b','c']];

alert(aList[0][1]); //彈出2;

批量操作數組中的數據，需要用到循環語句

2. 循環

程序中進行有規律的重復性操作，需要用到循環語句。

for循環

使用格式:

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

打印結果:

0
1
2
3
4

課堂練習

1、數組去重

var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];

var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];

var aList2 = [];
// 第一種方法: 
for (var i=0;i< aList.length;i++){
    var value = aList[i]
    if (aList2.indexOf(value) + 1){
        console.log('重復了',value)
    } else {
        aList2.push(value)
    }
}
console.log(aList2)

// 第二種方法:
for(var i=0;i<aList.length;i++)
{
    if(aList.indexOf(aList[i])==i)
    {
        aList2.push(aList[i]);
    }
}

alert(aList2);

2、將數組數據放入頁面

var list = ['弱點', '看不見的客人', '摔跤吧, 爸爸', '龍貓', '全民目擊', '觸不可及', '薩利機長']

JS部分: 
<script>
    window.onload = function () {
        var ul = document.getElementById('ulbox')
        var  list = ['弱點','看不見的客人','摔跤吧, 爸爸','龍貓','全民目擊','觸不可及','薩利機長']
        var str = ''
        for (var i=0;i<list.length;i++){
            value = list[i]
            str += '<li>' + value + '</li>'
        }
        console.log(str)
        ul.innerHTML = str
    }
</script>


HTML部分: 
<ul id="ulbox">

</ul>

3. 字符串處理方法

1、+ 運算符

如果是兩個數字進行相加運算, 得到的是 兩個數的和

如果是兩個字符串進行相加運算, 得到的是 兩個字符串的拼接

如果是一個字符串, 一個數字的相加運算, 得到的是 拼接的結果

var iNum01 = 12;
var iNum02 = 24;
var sNum03 = '12';
var sTr = 'abc';

alert( iNum01 + iNum02 );  // 彈出36
alert( iNum01 + sNum03 );  // 彈出1212 數字和字符串相加等同于字符串相加
alert( sNum03 + sTr );     // 彈出12abc

2、parseInt( )

將 數字字符串 轉化為 整數

var sNum01 = '12';
var sNum02 = '24';
var sNum03 = '12.32';


alert( sNum01+sNum02 );                       // 彈出1224
alert( parseInt(sNum01) + parseInt(sNum02) )  // 彈出36
alert( parseInt(sNum03) )                     // 彈出數字12 將字符串小數轉化為數字整數

3、parseFloat()

將數字字符串轉化為小數

var sNum03 = '12.32'
alert( parseFloat(sNum03) );  // 彈出 12.32 將字符串小數轉化為數字小數

4、split( )

把 一個字符串 分隔成 字符 組成的 數組

var sTr = '2017-4-22';
var aStr1 = sTr.split("-");
var aStr2 = sTr.split("");
var aStr3 = sTr.split();

console.log(aStr1);   
console.log(aStr2);   
console.log(aStr3)    

結果:

['2017','4','2']
['2','0','1','7','-','4','-','2','2']
['2017-4-22']

5、indexOf()

方法可返回某個指定的字符串值在字符串中首次出現的位置。

如果要檢索的字符串值沒有出現，則該方法返回 -1。

var sTr = "abcdefgh";

var iNum = sTr.indexOf("c");
alert(iNum); // 彈出2

6、substring( )

截取字符串

左閉右開 [start, stop) start <= x < stop

使用方法: 

字符串.substring(start,stop)

start: 必需。一個非負的整數，規定要提取的子串的第一個字符在 字符串 中的位置。

stop: 可選。一個非負的整數，比要提取的子串的最后一個字符在 字符串 中的位置多 1。如果省略該參數，那么返回的子串會一直到字符串的結尾。

例如:

var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1);

alert(sTr2); // 彈出 de
alert(sTr3); // 彈出 bcdefghijkl

7. 字符串反轉:

將字符串的內容顛倒過來, 不是排序

var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');

console.log(str2);

結果:

890fkdslj21jfdsa

思考:

如果我們把上面的式子寫成下面的樣子, 能否達到同樣的效果:

var str = 'asdfj12jlsdkf098';
var str2 = str.split().reverse().join('');

console.log(str2);

結果:

asdfj12jlsdkf098

四. 調試程序的方法

• alert

  使用方式: 
  alert(要展示的內容)
  
  alert展示內容的形式是彈出一個對話框, 然后把內容添加上去. 
  通常用于程序需要暫時停止的情況
  

• console.log

  使用方式: 
  console.log(要展示的內容)
  
  console.log()方法能夠幫助我們將調試的代碼展示在瀏覽器的控制臺
  一般我們使用這樣的調試方式較多, 而且瀏覽器控制臺能夠直接修改代碼, 方便我們多次調試
  

• document.title

  使用方法: 
  document.title = 要顯示的內容
  
  這樣的方式可以把要調試的內容,展示在網頁的標題區域
  這樣的方式適合于偶爾展示
  

• document.write( )

  使用方法: 
  document.write(exp1,exp2,exp3,....)
  
  write() 方法可向文檔寫入 HTML 表達式或 JavaScript 代碼
  可列出多個參數(exp1,exp2,exp3,...) ，它們將按順序被追加到文檔中。
  一般不怎么使用, 偶爾可用
  
  

  ?

五. 定時器

定時器在 javascript 中的作用

• 定時調用函數
• 制作動畫
• 模擬網絡延時的情況

1. 定時器的種類:

• 執行一次的定時器: setTimeout
• 執行多次的定時器: setInterval
• 關閉只執行一次的定時器: clearTimeout
• 關閉反復執行的定時器: clearInterval

定時器的使用方式: 

setInterval(code,millisec)

code 必需。要調用的函數或要執行的代碼串。

millisec 必須。周期性執行或調用 code 之間的時間間隔，以毫秒計。

例如:

// 設置定時器
var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);

// 去除定時器
clearTimeout(time1);
clearInterval(time2);

// 定時器調用的方法
function myalert(){
    alert('ok!');
}

1. 使用定時器 ----- 使方框移動

CSS部分: 
<style>
    .box{
        width:300px;
        height:300px;
        background:gold;
        position:fixed;
        left:0px;
        top:100px;
    }
</style>

JS部分: 
<script>
    window.onload = function(){
        var oBox = document.getElementById('box');
        var iLeft = 0;

        var oTimer = setInterval(fnMove,30);
        function fnMove(){
            iLeft += 3;                
            if(iLeft>600)
            {
                clearInterval(oTimer);
            }
            oBox.style.left = iLeft + 'px';
         }        
    }    
</script>

HTML部分: 
 <div class="box" id="box"></div>

2. 使方框左右移動:

CSS部分: 
<style>
    .box{
        width:300px;
        height:300px;
        background:gold;
        position:fixed;
        left:0px;
        top:100px;
    }
</style>

JS部分: 
<script>
    window.onload = function(){
        var oBox = document.getElementById('box');
        var iLeft = 0;
        var iSpeed = 3;

        var oTimer = setInterval(fnMove,30);
        function fnMove(){
            iLeft += iSpeed;                
            if(iLeft>600)
            {
                iSpeed = -3;
            }
            
            if(iLeft<0)
            {
                iSpeed = 3;
            }

            oBox.style.left = iLeft + 'px';
        }        
    }    
</script>


HTML部分:
<div class="box" id="box"></div>

3. 無限輪播動畫

CSS部分: 
<style type="text/css">
    body,ul{
        margin:0;
        padding:0;
    }

    .list_con{
        
        width:1000px;
        height:200px;
        border:1px solid #000;
        margin:10px auto 0;
        background-color:#f0f0f0;
        position:relative;
        overflow:hidden;
    }

    .list_con ul{
        list-style:none;
        width:2000px;
        height:200px;
        position:absolute;
        left:0;
        top:0;
    }


    .list_con li{
        width:180px;
        height:180px;
        float:left;
        margin:10px;
    }

    .btns_con{
        width:1000px;
        height:30px;
        margin:50px auto 0;
        position:relative;
    }

    .left,.right{
        width:30px;
        height:30px;
        background-color:gold;
        position:absolute;
        left:-40px;
        top:124px;
        font-size:30px;
        line-height:30px;
        color:#000;
        font-family: 'Arial';
        text-align:center;
        cursor:pointer;
        border-radius:15px;
        opacity:0.5;
    }
    .right{
        left:1010px;            
        top:124px;          
    }
</style>

JS部分:
<script type="text/javascript">
    window.onload = function(){
        // 獲取圖片的容器
        var oUl = document.getElementById('list');

        // 獲取左右兩個按鈕
        var oLeft = document.getElementById('btn01');
        var oRight = document.getElementById('btn02');

        // ul的容器
        var oSlide = document.getElementById('slide');

        // 將ul中的5個li復制一份
        oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;

        var iLeft = 0;
        var iSpeed = -3;

        // 定義變量存儲iSpeed的值
        var iLastSpeed = 0;

        var oTimer = setInterval(fnMove,30);

        function fnMove(){
            iLeft += iSpeed;
            
            // 當移動到最左邊的時候
            if(iLeft<-1000)
            {
                iLeft = 0;
            }

            // 當移動到最右邊的時候
            if(iLeft>0){
                iLeft = -1000;
            }

            oUl.style.left = iLeft + 'px';
        }

        oLeft.onclick = function(){
            iSpeed = -3;
        }

        oRight.onclick = function(){
            iSpeed = 3;
        }

        // 定義鼠標移入事件
        oSlide.onmouseover = function(){
            iLastSpeed = iSpeed;
            iSpeed = 0;
            //clearInterval(oTimer);
        }
        
        // 定義鼠標移出事件
        oSlide.onmouseout = function(){
            iSpeed = iLastSpeed;
            //oTimer = setInterval(fnMove,30);
        }
    }       
</script>

HTML部分: 
<body>
    <div class="btns_con">
        <div class="left" id="btn01">&lt;</div>
        <div class="right" id="btn02">&gt;</div>
    </div>
    <div class="list_con" id="slide">
        <ul id="list">
            <li><a href=""><img src="images/goods001.jpg" alt="商品圖片"></a></li>
            <li><a href=""><img src="images/goods002.jpg" alt="商品圖片"></a></li>
            <li><a href=""><img src="images/goods003.jpg" alt="商品圖片"></a></li>
            <li><a href=""><img src="images/goods004.jpg" alt="商品圖片"></a></li>
            <li><a href=""><img src="images/goods005.jpg" alt="商品圖片"></a></li>
        </ul>
    </div>
</body>

六. 變量作用域

變量作用域指的是變量的作用范圍，javascript 中的變量分為全局變量和局部變量。

全局變量：在函數之外定義的變量，為整個頁面公用，函數內部外部都可以訪問。

局部變量：在函數內部定義的變量，只能在定義該變量的函數內部訪問，外部無法訪問。

<script type="text/javascript">
    // 定義全局變量
    var a = 12;
    function myalert()
    {
        // 定義局部變量
        var b = 23;
        alert(a);
        // 修改全局變量
        a++;
        alert(b);
    }
    myalert(); // 彈出12和23
    alert(a);  // 彈出13    
    alert(b);  // 出錯
</script>

七. 封閉函數

封閉函數是 javascript 中匿名函數的另外一種寫法，創建一個一開始就執行而不用命名的函數。

一般定義的函數和執行函數：

function myalert(){
    alert('hello!');
};

myalert();

封閉函數：

(function(){
    alert('hello!');
})();

還可以在函數定義前加上“~”和“!”等符號來定義匿名函數

!function(){
    alert('hello!');
}()

封閉函數的作用

封閉函數可以創造一個獨立的空間

在封閉函數內定義的變量和函數不會影響外部同名的函數和變量，可以避免命名沖突

在頁面上引入多個 js 文件時，用這種方式添加 js 文件比較安全，比如：

var iNum01 = 12;
function myalert(){
    alert('hello!');
}

(function(){
    var iNum01 = 24;
    function myalert(){
        alert('hello!world');
    }
    alert(iNum01);
    myalert()
})()

alert(iNum01);
myalert();