【心得2】09/21

今天開始進入類似相簿的設計，將多張圖片利用兩個按鈕控制上一張、下一張，總共經歷了好幾個階段，慢慢優化程式碼。

1.使用兩種function，設定兩個按鈕，讓圖片切換

2.改為使用一種function，button將網址貼在function1的()內，此時網址當作參數傳遞，設定變數x為「字串變數」，讓x儲存圖片1的網址，getElementById中的圖片語法用' '切割成'<img' src" ' + x + ' alt=" "'三段。

<button

    onclick="myFunction1('圖片1網址')">P U S H !</button>

<!-- 注意單引號 -->

<button onclick="myFunction1('圖片1網址')">

P U S H !</button>

<script>

    // 用x變數存起來"圖片1"

    function myFunction1(x) {

        document.getElementById("demo").innerHTML = 

        '<img src="' + x + ' " height=300px" alt="Seal">';

        // innerHTML:那段裡面替代

    }

</script>

3.使用array技巧，將兩張圖片網址設為陣列cars中的元素[0]跟[1]，getElementById中的x改為cars[x]

<button onclick="myFunction1(0)">P U S H !</button>

<!-- 注意單引號 -->

<button onclick="myFunction1(1)">P U S H !</button>

<script>

    // 用x變數存起來"圖片1"

    function myFunction1(x) {

        var cars = ["圖片1網址", 

                    "圖片2網址"];

        document.getElementById("demo").innerHTML = '<img src="' + cars[x] + 

        ' " height=300px" alt="Seal">';

    }

</script>

4.設置初始照片，將文字改圖片

<p id="demo">

    <img src="圖片1網址"

    height="300" alt="Seal">

</p>

當按下next按鍵時x為1；按下prev按鍵時x為-1

    <button onclick="myFunction1(-1)">Prev</button>

    <!-- 注意單引號 -->

    <button onclick="myFunction1(1)">Next</button>

由i=i+x控制動作為上一張或下一張，但若按超過範圍就會錯誤

*注意*若將var i = 0放在function中，生命週期即在變數執行時出現，結束後消失。（會無法進行前一張／下一張）

<script>

    var i = 0;

// 初始圖片停在0號圖片    

    function myFunction1(x) {

    var cars = ["圖1網址","圖2網址","圖3網址","圖4網址"];

    i = i + x;

    document.getElementById("demo").innerHTML = '<img src="' + cars[i] +

     ' " height=300px" alt="Seal">';

}

</script>

5.此版本修正了超過範圍的錯誤，使用了條件語法（if...else...）

if控制圖片為初始時再按「上一張」不會False，而是維持在第一張

else if 控制當圖片為最後一張時再按「下一張」不會False，而是維持在最後一張

i = i + x;

if (i < 0) {

    i = 0;

    }

else if (i == cars.length) {

    i = cars.length - 1;

    }

覺得今天利用平常想不到的邏輯思考，還開始使用了array這種型態的資料儲存方式，也開始培養更為細膩的心，才能發現一些設計上的錯誤，像是一開始設計完上一張、下一張不會想到第一張再往前或是最後一張往後就會False，希望之後能慢慢繼續進步，想出更有效率的程式寫法。

作業:https://jsfiddle.net/racoons5/71od2nhr/#&togetherjs=jVlV8DkB1a