1.window.alert vs. window.confirm

(1)window.alert:只能確認

      window.alert("第一次alert"); 
      alert("第二次alert"); //window可省略

(2)window.confirm:有同意或取消 會回傳值

      var temp = window.confirm("今天下大雨");
      console.log(temp);

2.setInterval 與 setTimeout 差異

setTimeout做了就不回頭(似煙火)

setInterval 計時秒數器

      setInterval(function () {
          cat = cat + 1;
          console.log(`累計秒數： ${cat} `);
        }, 1000);

setTimeout 更新網址

      setTimeout(function () {
        document.location.href = "https://one-piece.com/";
      }, 3000);

3.取得CSS內的屬性(查詢CSS元素內，屬性的預設)

      var elm = document.getElementById("cat");
      console.log(elm); // 是一個 img 元素

(1)元素.style.top 取得 樣式 top 值
必須自己有寫CSS才抓的到

      var x = elm.style.top;
      console.log(`X 的值在這裡 => ${x} <=`);

(2)透過 window.getComputedStyle(CSS元素).getPropertyValue('屬性'))--------->大絕招抓抓
「預設」的也看的到，所以使用這個!!

      var y = window.getComputedStyle(elm).getPropertyValue("top");
      console.log(`y 的值在這裡 => ${y} <=`); //auto

4.不要使用重複id的原因

只會抓第一個，所以id才說不要重複使用!!

      <!-- 錯誤示範 不要使用重複id -->
      <h2 id="myApple">Apple</h2>
      <h2 id="myApple">Apple-1</h2>

      result = document.getElementById("myApple");
      console.log(result);

5.掏空倉庫

預想未來要裝甚麼
result = 0 數字
result = [] 陣列
result = 字串

5.-1 禁止空字串，因為未來很難抓bug

錯誤

var x = ""; //使值初始化

正確:先給值

var x = 0;
var x = "這裡是文字";

undefined 未來會很難抓 以防程式碼變多 debug 困難
""是初始化，javascript 沒有初始化也可以，但最好是有
因為沒初始化的話，其值會是undefined

6.抓陣列[]

 var deng = document.images;

        if (mybool) {
          deng[0].src = "like.png";  //抓陣列第一個[0][1]
          mybool = false;
        } else {
          deng[0].src = "find.png";
          mybool = true;
        }

7.抓圖片位置後，切換圖片

indexOf

        if (myImg.src.indexOf("like") > -1) {

          num1 = myImg.src.indexOf("like");  // indexOf 回傳位置並轉成數值 29
          console.log(num1);       
                                  
          myImg.src = "../../_image/find.png";
        } else {
          myImg.src = "../../_image/like.png";
        }
      }

8.insertBefore vs. appendChild

(1)insertBefore:指定在元素前增加 (插隊)
(2)appendChild:直接在Html文件中增加元素 (從後面加上)

     document.body.insertBefore(newElm, op06);
     document.body.appendChild(newImg);