JavaScript基礎_2__第十三天

weixin_34320159發表於2016-03-18

JavaScript

請各位讀者新增一下作者的微信公眾號，以後有新的文章，將在微信公眾號直接推送給各位，非常感謝。

如果您覺得這篇文章還不錯，可以去H5專題中檢視更多相關文章。

2016.3.18__ JavaScript基礎2_第十三天

這裡寫圖片描述

今日課程預覽

這裡寫圖片描述

1.for迴圈

如果您希望一遍又一遍地執行相同的程式碼，並且每次的值都不同，那麼使用迴圈是很方便的。

當然，我們可以一遍遍的重複程式碼。

document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");

但是我們程式猿是最討厭重複性操作的人，讓我們寫這麼多不是逼瘋我們麼。

所以我們要使用迴圈。（下面是對迴圈結構的詳細說明，有一定基礎的同學可以跳過）

for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}

1.1 迴圈詳解

下面是對迴圈結構的詳細說明，有一定基礎的同學可以跳過。

迴圈體的結構

for(定義一個迴圈增量；迴圈條件；迴圈增量自加/自減){
    迴圈體
}

分析一下這個迴圈結構：

迴圈增量：在這裡定義一個迴圈增量，並賦初值（一般是 0 或者 1）
迴圈條件：這是一個條件表示式，用來判斷迴圈除錯是不是滿足
迴圈增量自加：在這裡，每次迴圈，之前定義的迴圈增量都會增加1次
迴圈體：在迴圈條件成立的前提下，會不斷重複迴圈體中的內容，直至迴圈條件不成立

注意：寫迴圈的時候一定要注意給出正確的迴圈條件，否則會造成死迴圈。

    <!DOCTYPE html>
    <html>
    <body>
    
    <script>
    cars=["BMW","Volvo","Saab","Ford"];
    for (var i=0;i<cars.length;i++)
    {
    document.write(cars[i] + "<br>");
    }
    </script>
    
    </body>
    </html>

1.2 跳出迴圈、中止迴圈

1.2.1 break

那如果我們想要我們的程式當迴圈到一個特定的人的時候，不繼續進行了，該怎麼辦？

我們需要使用我們的 break，去跳出當前的迴圈。

    <script>
        for (var i=0;i<10;i++)
        {
            alert(i);
            
            if(i > 5){
                break;
            }
        }
    </script>

當 i <= 5 之前，每次迴圈都去列印 i 的值，當 i > 5的時候，就直接跳出當前迴圈。繼續向後執行。

1.2.2 continue

當我們想迴圈到某一個次數之後，我們就不對當前迴圈內的某些內容執行的時候，我們就可以使用 continue 去跳出當前的迴圈，繼續下一次的迴圈。

    <script>
        for (var i=0;i<10;i++)
        {
            alert(i);
            
            if(i > 5){
            
                alert("執行了continue")；
                
                continue;
            }
            alert("沒有執行continue")；
        }
    </script>

前5次迴圈，都列印計數並顯示沒有執行continue，五次之後就顯示執行了continue。

注意：

break是停止整個迴圈，不管你執行到第幾次，直接結束。

continue是跳出當前迴圈計數時的迴圈，就好像當我們迴圈到第5次的時候，執行了 continue，程式會直接結束當前的這次迴圈，去執行第6次迴圈。

這一點一定一定要注意！

1.3 其他型別迴圈

除了for迴圈（迴圈程式碼塊一定的次數）之外，還有三種常見迴圈。

for/in - 迴圈遍歷物件的屬性
while - 當指定的條件為 true 時迴圈指定的程式碼塊
do/while - 同樣當指定的條件為 true 時迴圈指定的程式碼塊

因為其他迴圈方法，使用場景不多，在這裡不做更多介紹。

1.4 for..in.. 迴圈（擴充）

for..in..迴圈是 for 迴圈的一個變種，

它的作用主要是將一個物件的所有屬性依次迴圈出來。

    var o = {
        name: "larra",
        age:20,
        sex:"girl"
    };
    
    for(var key in o){
    
        alert(key); //'name','age','sex'
        
    }

2. input 的 checked 屬性

我們在之前的學習過程中已經介紹過了，input 標籤設定了型別 checkbox 屬性之後，

就變成了一個核取方塊，選中狀態時，checked 屬性為 true ，未選中為 false。

那如果我們想要通過點選一個按鈕就能去更改是否選中，我們該怎麼做呢？

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        
        <body>
            <input type="button" name="" id="button_1" value="切換" style="width: 50px; height: 10px;"/>
            <input type="checkbox" name="" id="change_1" value="" style="width: 30px; height: 30px; border: 1px solid blue;"/>
        </body>
        
        <script type="text/javascript">
            var button_1 = document.getElementById("button_1");
            var change_1 = document.getElementById("change_1");
            
            button_1.onclick = function(){
                if(change_1.checked){
                    change_1.checked = false;
                }
                else{
                    change_1.checked = true;
                }
            }
        </script>
    </html>

可以看見我們點選按鈕，我們核取方塊的屬性就發生了改變，很神奇對吧。

那我們接下來配合上面的迴圈去做個練習，我們來模仿下購物車的原理。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            input{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <input type="button" name="" id="button_1" value="全選" />
        <input type="button" name="" id="button_2" value="反選" />
        <input type="checkbox" name="" id="change_1" value=""   />
        <ul id="ul_1">
            <!--li*8>input[type=checkbox]-->
            <li><input type="checkbox" /></li>
            <li><input type="checkbox" /></li>
            <li><input type="checkbox" /></li>
            <li><input type="checkbox" /></li>
            <li><input type="checkbox" /></li>
            <li><input type="checkbox" /></li>
            <li><input type="checkbox" /></li>
            <li><input type="checkbox" /></li>
        </ul>
    </body>
    <script type="text/javascript">
        var button_1 = document.getElementById("button_1");
        var button_2 = document.getElementById("button_2");
        var change_1 = document.getElementById("change_1");
        var ul_1 = document.getElementById("ul_1");
        var inputs = ul_1.getElementsByTagName("input");
        
        button_1.onclick = function(){
            for(var i = 0;i < inputs.length; i++){
                inputs[i].checked = true;
            }
            change_1.checked = true;
        }
        button_2.onclick = function(){
            var number = 0;
            for (var i = 0; i< inputs.length;i++) {
                if(inputs[i].checked == false){
                    number ++;
                }
                inputs[i].checked = !inputs[i].checked;
            }
        }
    </script>
</html>

當然，我寫的並不嚴謹，只是為了讓大家有一個基礎的概念。更完善的就等大家回去自己嘗試了。

3. className 屬性

我們也可以通過 className 屬性給元素繫結一個class 型別的CSS樣式.

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <style type="text/css">
            #button_1{
                width: 200px;
                height: 100px;
                background-color: #ccc;
            }
            .active{
                width: 200px;
                height: 200px;
                background-color: #ddd;
                margin-top: 50px;
            }
        </style>
    </head>
    <body>
        <input type="button" id="button_1" value="顯示隱藏" />
        <div id="div_1"></div>
    </body>
    <script type="text/javascript">
        var button_1 = document.getElementById("button_1");
        var div_1 = document.getElementById("div_1");
        
        button_1.onclick = function(){
            if(div_1.className ==""){
                div_1.className = "active";
            }
            else{
                div_1.className = "";
            }
        }
    </script>
    </html>

4. this 指標

JS 中的 this 指標使用到函式中，首先需要分析 this 所在的函式是被當做哪個物件的方法去呼叫的。

也就是說，this 存在哪個函式中，誰呼叫函式就指代誰（即指標指向原物件的地址）。

相當於 Object-C 中的 self。

示例一:

    var obj = {}; 

    obj.x = 100; 

    obj.y = function(){
    
        alert( this.x ); 
        
    }; 

    obj.y(); //彈出 100

這段程式碼非常容易理解，當執行 obj.y() 時，函式是作為物件obj的方法呼叫的，因此函式體內的this指向的是obj物件，所以會彈出100。

示例二:

    //ul1是id對應的一個ul列表物件
    
    ul1.onmouseleave = function(){
    
   //此處這裡面的this就指代ul1物件（this誰呼叫，就指代誰）
   this.style.display = "none";
   
    }

同時我們也可以將之前的程式碼進行一下替換，

    <script type="text/javascript">
        var button_1 = document.getElementById("button_1");
        var change_1 = document.getElementById("change_1");
        
        button_1.onclick = function(){
            if(this.checked){
                this.checked = false;
            }
            else{
                this.checked = true;
            }
        }
    </script>

我們發現我們的程式碼並沒有出錯，這也證明了我們之前所說的 哪個元素繫結了某個函式，這個函式中的 this 關鍵字就指代哪個元素。

5. 綜合練習

預計實現效果：

這裡寫圖片描述

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <style type="text/css">
            .active{
                background-color: #ddd;
            }
            div{
                width: 100px;
                height: 100px;
                background-color: red;
                font-size: 50px;
                color: white;
                display: none;  
            }
            .show{
                display: block;
            }
        </style>
    </head>
    <body>
        <input class="active" type="button" value="按鈕1" />
        <input type="button" value="按鈕2" />
        <input type="button" value="按鈕3" />
        <div class="show">A</div>
        <div>B</div>
        <div>C</div>
    </body>
    <script type="text/javascript">
        //獲取所有的切換按鈕
        var inputs = document.getElementsByTagName("input");
        //獲取所有的 div
        var divs = document.getElementsByTagName("div");
        //遍歷所有的按鈕，給點選事件繫結函式
        for (var i=0; i<inputs.length;i++) {
            inputs[i].onclick = function(){
                //遍歷按鈕，找到使用者點選的是哪一個按鈕
                for (var i=0; i<inputs.length; i++) {
                    //如果第 i 個元素被點選了，則通過 className 屬性來繫結對應的 CSS 樣式表
                    //這裡的 this 代指使用者當前點選的按鈕
                    if(this == inputs[i]){
                        inputs[i].className = "active";
                        divs[i].className = "show";
                    }
                    //如果不是，就取消所有的樣式
                    else{
                        inputs[i].className = "";
                        divs[i].className = "";
                    }
                }
            }
        }
    </script>
    </html>

JavaScript 基礎 - 第1天
2024-03-25
JavaScript
《HTML5+JavaScript動畫基礎》——第2章　動畫的JavaScript基礎2.1動畫基礎
2017-05-02
HTMLJavaScript動畫
JavaScript基礎第02天筆記
2020-12-04
JavaScript筆記
好書推薦——JavaScript基礎教程（第8版）
2012-01-09
JavaScript
javascript基礎
2019-06-27
JavaScript
Javascript基礎之-this
2019-01-16
JavaScript
JavaScript基礎原理
2018-11-09
JavaScript
JavaScript基礎10
2020-11-25
JavaScript
JavaScript基礎8
2020-11-21
JavaScript
JavaScript Promise(基礎)
2018-06-25
JavaScriptPromise
JavaScript基礎（一）
2017-02-22
JavaScript
JavaScript基礎（二）
2017-02-22
JavaScript
JavaScript 基礎卷（一）：基礎語法
2019-12-26
JavaScript
前端基礎入門四（JavaScript基礎）
2019-05-20
前端JavaScript
javascript基礎知識
2021-09-09
JavaScript
Javascript基礎之-Promise
2019-01-09
JavaScriptPromise
JavaScript基礎總結
2019-01-04
JavaScript
JavaScript入門基礎
2020-11-06
JavaScript
JavaScript基礎筆記
2020-09-26
JavaScript筆記
JavaScript WebGL 基礎概念
2021-12-01
JavaScriptWeb
JavaScript 基礎語法
2020-09-29
JavaScript
【Javascript 基礎】原型鏈
2018-06-14
JavaScript原型
JavaScript基礎簡介
2018-02-09
JavaScript
【總結】Javascript基礎
2016-09-08
JavaScript
JavaScript基礎（一）概述
2018-05-03
JavaScript
JavaScript基礎練習
2017-06-01
JavaScript
Javascript 基礎知識
2014-03-09
JavaScript
JavaScript 基礎教程 (轉)
2007-12-15
JavaScript
程式設計師找工作必備 PHP 基礎面試題 - 第十三天
2020-03-25
程式設計師PHP面試題
第0章基礎知識
2015-04-07
最全JavaScript基礎總結
2020-07-20
JavaScript
回到基礎：理解 JavaScript DOM
2019-04-03
JavaScript
javascript事件基礎知識
2019-03-12
JavaScript事件
重學javascript基礎-typeof
2019-04-24
JavaScript
JavaScript基礎總結（二）
2019-02-16
JavaScript
javascript基礎使用筆記
2021-09-09
JavaScript筆記
JavaScript基礎——使用陣列
2021-08-17
JavaScript陣列
JavaScript 基礎之物件Object
2018-11-09
JavaScript物件Object