W2

 第二堂

課程內容

• 把上禮拜body上的字串換成照片呈現

1. 注意""&''要成對出現
2. <img src="照片網址" alt="Trulli" width="500" height="333">→絕對位置
3. 用myFunction1.第一張、myFunction2.第二張，對照各自照片網址→not good 一按鈕對依照片效率差

• 字串常數變數

1. 將照片網址用函數X替換對照

                        <button onclick="myFunction1('網址')">上一張</button>
                          myFunction1(x)
                        '<img src="' + x+ '" alt="Trulli" width="500" height="333">'→+表連接

                     💣字串常數必用一引號→變成一字元
                           變數不可用引號

• 陣列(Javascript Array)

1. 將var cars內各個網址對應到myFunction1的0、1

                        <button onclick="myFunction1('0')">上一張</button>
                        <button onclick="myFunction1('1')">下一張</button>

                        myFunction1(x)

                        var cars = ["網址0", "網址1" ];

                        '<img src="' + cars[x] + '" alt="Trulli" width="500" height="333">';

                   👎myFunction還是要寫太多行，so改成2.

                2. 以整體性變數(global valuable)及if、else if來簡化函數，且以1、-1來表示上一張、下                        一張

                        

                        <button onclick="myFunction1(-1)">上一張</button>

                <button onclick="myFunction1(1)">下一張</button>

                        var i=0;→💣不可放在myFunction1(x)後面，否則為區域性變數(local valuable)

                                              →每次執行函數，i會一直歸0

        function myFunction1(x) {

        var cars = ["網址0", "網址1", "網址2",...... ];→最好分行寫，較清楚

        i = i+x→"替換成"

        if (i<0) {i=0 ;} 

        else if ( i==cars.length ) {i=cars.length-1 ;}→"相等於"，陣列個數

       <img src="' + cars[i] + '" alt="Trulli" width="500" height="333">';

                    👍如此即可達到只使用一種函數、兩個按鈕，且不超過照片範圍的目的~~

課程心得

        今天的最終目的是做出能夠按上一張和下一張以瀏覽相簿的工具，一開始用數個Function、一個按鈕對照一張照片，醬不Ok，太麻煩，接著改成以陣列的方式呈現，以0、1、2、3...方式對照照片網址，但還是要寫太多行程式碼，最後以整體性變數X和I結合myFunction(-1)、(1)的方式來讓多張照片可以輪替看，同時免除超出範圍的問題。

        今天課後老師希望我們思考要如何不要浪費無謂的運算時間，把if拉到i=i+x之前，當i超出範圍時，i不執行，另外再多思考是否可用非條件判斷的方式，直接用一行完成，我當下沒啥領悟，只想到正整數，只能多去看網路上的範例多練習哈，加加油！

作業網址：https://jsbin.com/cobeqevojo/edit?html,output

課堂練習網址：https://jsbin.com/coroxeboqi/edit?html,output