&&：遇到非布林就【繼續走】，到底就丟回該值

s1 = 'cat' && 'dog' //dog
s2 = false && 'dog' //false
s3 = true && 'dog' //dog
s4 = 'cat' && false //false
s5 = 'cat' && true //true

s1先遇到’cat’，繼續往右走，到底遇到’dog’，丟回’dog’
s2先遇到false就直接判斷為false <= 基本的&&判斷邏輯
s3先遇到true，繼續往右走，到底遇到’dog’，丟回’dog’
s4先遇到’cat’，繼續往右走，遇到false判斷為false <= 基本的&&判斷邏輯
s5先遇到’cat’，繼續往右走，到底遇到true，丟回true <= 反直覺

||：遇到非布林就【跳出】，並丟回該值

s6 = 'cat' || 'dog' //cat
s7 = false || 'dog' //dog
s8 = true || 'dog' //true
s9 = 'cat' || false //cat
s10 = 'cat' || true //cat

s6先遇到’cat’，跳出並丟回’cat’
s7先遇到false，繼續往右走，遇到’dog’為非布林，跳出並丟回’dog’
s8先遇到true就直接判斷為true <= 基本的||判斷邏輯
s9先遇到’cat’，跳出並丟回’cat’
s10先遇到’cat’，跳出並丟回’cat’ <= 反直覺

網路上看到很多人好像都是用口訣背的，但我個人腦筋比較差，沒有理解就完全背不起來，只好自己整理成好理解的方式記憶。以上的方式如果有錯還請留言告知，感謝感謝！

基本語法

for的語法先複習一下：

for (var i = 0; i < 5; i++) { 
    console.log(i)
}
//第一個參數為遍歷起點；第二個參數為終點；第三個參數為每次遍歷的間隔
//i = i+1 a.k.a. i++表示遍歷每一個內容；i = i+2則會遍歷偶數個內容

console印出來為01234，若i = i+2則印出來為024。

陣列

接著複習for一個陣列：

var arrayString = ''
var array = []
array = ['apple', 'banana', 'citrus', 'dog', 'elephant']
for (i = 0; i < array.length; i++) { //.length取得array的數量
    console.log(array[i]) //單獨印出陣列的每一項內容
    arrayString += array[i] + ' / ' 
    //+=為重複為該變數加入內容
}
console.log(arrayString) //把內容整理成比較容易閱讀的字串

執行結果會是：
apple
banana
citrus
dog
elephant
apple / banana / citrus / dog / elephant /

JSON

最後來練習for一個JSON，首先準備一個JSON物件：

var superHeroes = new Object()
superHeroes = {
    team: 'Avengers',
    members: [{
        name: 'Ironman',
        age: 45,
        skill: ['fly', 'gun', 'genius brain', 'shield']
    }, {
        name: 'Spiderman',
        age: 17,
        skill: ['wallwalk', 'web', 'flexibility']
    }, {
        name: 'Hulk',
        age: 'unknown',
        skill: ['power', 'jump']
    }],
    location: 'Earth'
}

members裡面放了三個超級英雄，各自對應有不同的name、age、skill，其中skill因是複數所以存成array。練習的目的是除了把英雄的資本資料都列出來，還需要再把各自的skill列在該英雄的基本資料裡；如此一來就可以練習兩層的for：第一層把所有的英雄列出來、第二層再於該英雄下把skill印出來：

function printHeroes(jsonObj){ //建立printHeroes的函式
    console.log('We are ' + jsonObj['team']) //先印出團隊名字
    var user = jsonObj['members']  
    //取出JSON裡面的members存到變數user
    //此時user是一個array，裡面有三組值
    
    for (i = 0; i < user.length; i++) {  //把user的三組值遍歷出來
        console.log('--We have ' + user[i]['name'] + ', age: ' + user[i]['age'] + ', and with skills like: ')
        //先印出每一個英雄的name、age

        var userSkill = user[i]['skill']
        //再把每個英雄的skill存到變數userSkill
        //此時userSkill是一個array，裡面有2~4個值不等

        //下層for變數不能再重複使用i
        for (j = 0; j < userSkill.length; j++) {  //把userSkill的幾組值遍歷出來
            console.log(userSkill[j])  //印出這些skill內容
        }
    }
    console.log('We protect ' + jsonObj['location'])  //沒有意義只是好玩
}
printHeroes(superHeroes) //呼叫函式

印出來的結果是：

We are Avengers
–We have Ironman, age: 45, and with skills like:
fly
gun
genius brain
shield
–We have Spiderman, age: 17, and with skills like:
wallwalk
web
flexibility
–We have Hulk, age: unknown, and with skills like:
power
jump
We protect Earth

如此一來就完成JSON所有資料的遍歷了。超基礎，但還是紀錄一下自己的理解過程。

變成：

不過，如果能再增加一個縮圖的話，相信就更能減少傳錯圖檔的風險了。

要達到預覽縮圖的功能其實非常簡單，只需幾行的javascript就能快速達成（本例搭配jQuery）：

1. 建立一個img作為縮圖的容器，設定好id並以display:none隱藏起來：

<img id="output" height="200" style="display:none">

2. 建立一個input，設定上傳圖片時執行自訂函數openFile()：

<input type="file" onchange="openFile(event)">

3. 準備自訂函數openFile()：以javascript讀取檔案、將檔案轉換為base64的字串，再將字串塞在上面img的src裡：

function openFile(event){
  var input = event.target; //取得上傳檔案
  var reader = new FileReader(); //建立FileReader物件

  reader.readAsDataURL(input.files[0]); //以.readAsDataURL將上傳檔案轉換為base64字串

  reader.onload = function(){ //FileReader取得上傳檔案後執行以下內容
    var dataURL = reader.result; //設定變數dataURL為上傳圖檔的base64字串
    $('#output').attr('src', dataURL).show(); //將img的src設定為dataURL並顯示
  };
}

4. 結果如下：

Voilà！顯示縮圖就是這麼簡單！

動態下拉式選單的邏輯說穿了很簡單：選定第一層選項後（選項可以用html列或是從資料庫拉），第二層選單會根據第一層選項跳出對應的內容（如果有第三層也是同樣的邏輯，只是資料庫的設計會多一層欄位）。

邏輯了解之後，又要如何用程式表達呢？
1. 假設第一層選單是從資料庫拉，那麼首先就要透過PHP先把第一層選單的項目從資料庫裡撈出來
2. 由jquery取得選取的項目，並用ajax傳到後端負責「打撈」的PHP頁面（假設為deal.php）
3. deal.php取得第一層選項，並把對應的第二層項目撈出來、回傳給ajax
4. 最後，ajax的success:function(res){}再把回傳的第二層項目插入第二層select的option
大功告成！

接下來，在開始準備程式前，首先需要把資料庫準備好。舉例來說，我希望第一層是產品的分類項目，第二層是分類項目下的產品型號，那麼在資料庫就需要先建「分類」與「型號」的欄位，簡單規劃如下：

資料庫建好之後，就可以開始著手頁面了：

1. 建置html選單：

<div>
   <select id='categories'>
      <option>選擇系列</option>
   </select>
</div>
<div>
   <select id='items'>
      <option>選擇產品</option>
   </select>
</div>

2. 插入PHP語法把categories的項目從資料庫裡撈出來：

<div>
   <select id='categories'>
      <option>選擇系列</option>
<?
$sql = "SELECT DISTINCT categories FROM 表格名稱";//DISTINCT可選出欄位中具有不同名稱的資料，本例中會挑出TV與Player
$result = mysqli_query($link, $sql) or die("資料選取錯誤！".mysqli_error($link));
while($data=mysqli_fetch_assoc($result)){
?>
      <option value="<?echo $data['categories'];?>"><?echo $data['categories'];?></option>
<?
}
?>
   </select>
</div>
<div>
   <select id='items'>
      <option>選擇產品</option>
   </select>
</div>

3. 抓取被選取的選項，透過ajax丟到後端deal.php：

$(document).on('change', '#categories', function(){
   var categories = $('#categories :selected').val();//注意:selected前面有個空格！
   $.ajax({
      url:"deal.php",				
      method:"POST",
      data:{
         categories:categories
      },					
      success:function(res){					
         //處理回吐的資料
      }
   })//end ajax
});

4. deal.php取得分類選項，從資料庫裡撈對應的型號出來：

$categories = $_POST['categories'];
$sql = "SELECT items FROM 資料表名稱 WHERE categories = '$categories'";
$result = mysqli_query($link, $sql) or die("取出資料失敗！".mysqli_error($link));
$res = "";//把準備回傳的變數res準備好
while($data=mysqli_fetch_assoc($result)){
   $res .= "
      <option value='{$data["items"]}'>{$data['items']}</option>
   ";//將對應的型號項目遞迴列出
};
echo $res;//將型號項目丟回給ajax

5. 最後一個步驟，將deal.php吐回的項目列表塞回DOM的select裡面：

$(document).on('change', '#categories', function(){
   var categories = $('#categories :selected').val();
   $.ajax({
      url:"deal.php",				
      method:"POST",
      data:{
         categories:categories
      },					
      success:function(res){					
         $('#items').html(res);
      }
   })//end ajax
});

結束收工！

實際跑過整個流程之後，是不是發現動態下拉式選單真的不複雜，只是若要到三層、四層……，資料庫的設計就要更多欄位而已，說不定反倒是把所有資料輸入資料庫欄位還比較花時間咧！

<form action='res.php' method='post'>
   <input name='name' type='text'>
   <input name='submit' type='submit'>
</form>

這樣後端的res.php頁面就可以透過POST取得name的值作處理（通常是INSERT INTO資料庫）：

<?
require_once('connect.php');//引入資料庫連結設定檔
$name = $_POST['name'];//取得name值
$sql = "INSERT INTO 表格名稱 (欄位名稱) VALUES ('$name') ";//插入表格語法
mysqli_query($link, $sql) or die("錯誤訊息：".mysqli_error($link));//執行插入
echo "資料插入成功！";//顯示訊息
?>
//這段程式沒有做任何處理，建議實際使用時對變數作if判斷來決定成功與失敗的回傳訊息

但因為這樣會將整頁html都傳出去，而這些資料大部分都是重複沒有必要的，所以後來才開始發展出ajax這種方式，僅把需要的資料丟到後端，不必整頁html都傳。如此一來不僅降低傳輸量，透過jquery的DOM操作，我們還能跳過html的form與input限制，直接把任何我們想傳的值透過抓取DOM元素丟到後端，並且把後端丟回來的東西再透過DOM作更多元的處理。

舉例來說，html碼我們可以用最習慣的div去包裹表單內容：

<div id='input'>
   <input type='text' id='name'>
   <button id='submit'>送出</button>
</div>
<div id='response' style='display:none;'>
</div>

然後javascript就變成：

$(document).on('click', '#submit', function(){ 
/*使用$(document).on()的原因是如果id為submit的按鈕是一開始沒有載入、透過ajax互動後才產生的DOM，那用$().click會抓不到，需以$(document).on()才行 */
   var name = $('#name').val();
   $.ajax({
      url:'res.php',
      method:'POST',
      data:{
         name:name
      },
      success:function(res){
         $('#input').hide();
         $('#response').show().html(res);
      }
   })
}

後端php保持原來的樣子：

<?
require_once('connect.php');//引入資料庫連結設定檔
$name = $_POST['name'];//取得name值
$sql = "INSERT INTO 表格名稱 (欄位名稱) VALUES ('$name') ";//插入表格語法
mysqli_query($link, $sql) or die("錯誤訊息：".mysqli_error($link));//執行插入
echo "資料插入成功！";//顯示訊息
?>

若ajax傳輸成功，res.php就會吐回

echo "資料插入成功！";

echo的內容會成為success:function(res){}的res，於是我們就能利用這個res變數在現有的DOM上面任意處理啦！以例子來說，就是把id為response的div從隱藏改為顯示，並將res的內容印上去：

$('#response').show().html(res);

如何？用ajax傳值是不是非常簡單？

透過res.php裡面的echo，我們可以決定任何想回傳給前端的callback（例如從資料庫裡撈東西出來作判斷後回吐，許多即時驗證用戶名是否重複的ajax功能即是這種應用），然後前端再於success:function(res){}裡面對回傳的res作處理。只要理解ajax與後端的溝通流程，光是簡單的前後端互動就能創造很多漂亮又即時的網頁效果囉！至於圖片與多個重複欄位的表單要如何以ajax處理，就留給下一篇介紹吧！