一次性事件

jQuery 的 once

btns.forEach((elem) => {
  elem.addEventListener('click', function listener(e){
    console.log(e.target.id)
    // 事件種類 ,  Function名
    this.removeEventListener('click', listener)
  }) 
})

Content-Type: application/x-www-form-urlencoded

• 最常見的提交方法
• 以 key1=val1&key2=val2 的方式編碼
• jQuery 默認提交方式
• PHP中以 $_POST['title'] 取得對應值

  Content-Type: application/x-www-form-urlencoded;charset=utf-8
  url/?title=test&name=Tom

GMT 時區差異

const timeZoneOffset = -(new Date().getTimezoneOffset() / 60)
console.log(timeZoneOffset) // 8

Hover & SetInterval

• Hover = mousein + mouseleave
• 滑鼠移入，移除計時器，關閉自動輪播效果
• 滑鼠移出，重新掛載計時器，啟動自動輪播

  function toggleSetInterval(e) {
    const eventType = e.type
    // console.log(eventType)
    if (eventType === 'mouseenter') {
      // 滑鼠移入，移除計時器，關閉自動輪播效果
      window.clearInterval(carousel.autoLoopTimer)
    } else if (eventType === 'mouseleave') {
      // 滑鼠移出，重新掛載計時器，啟動自動輪播
      carousel.autoLoopTimer = setInterval(carousel.autoLoop, 3000)
    }
  }

亂數取值

  function getRandom(min, max) {
    return Math.round(Math.random() * (max - min) + min);
  }

事件監聽 this

const parent = document.querySelector('.parent')
parent.addEventListener('click', test)
function test(e) {
  // e.target 指向觸發事件的元件  .child
  console.log('e.target',e.target);
  // e.currentTarget 指向掛載事件的元件 .parent
  console.log('e.currentTarget',e.currentTarget);
  // this 指向掛載事件的元件  .parent
  console.log('this',this);
}

ES6 spread & rest operator

1. 其餘運算子 rest operator (用於不確定函式會傳入的變數數量)
2. 展開運算子 spread operator (用於將陣列展開)

// const sum = function(num1, num2, .....一堆){
const sum = function(...num) {
  // 將傳入的變數 組合成陣列
  console.log(num) // [1, 2, 3]
  return num.reduce(function (sum, el) { return sum + el },0)
}
console.log(sum(1, 2, 3)) // 6

  // 展開陣列
  let number = [1, 2, 3];
  console.log(Math.max(...number));  //  3
  console.log(...number);  // 1, 2, 3

HTML Attribute & DOM Property

• HTML Attribute (由 HTML 定義、回傳值必為字串)
  Attribute 初始化 DOM properties，初始化結束後即完成工作

• DOM Property (由 DOM 定義、回傳值可為非字串)

• 最佳實踐: 推薦使用 property 速度較快

• 且例如 checked,disabled,selected 會直接回傳 Boolean
  Youtube解釋
  參考文章

範例程式碼

  <!-- 在value上給予值 等同於 初始化 DOM 中的 Property -->
  <input id="inputId" type="text" value="TOM">

  const input = document.querySelector('#inputId')
  input.addEventListener('keydown', test)
  function test(e) {
  
    // HTML Attribute 'TOM' (即初始化的值)
    console.log(input.getAttribute('value')); 
    // HTML Attribute JQ版 'TOM'
    console.log($('#inputId').attr('value'))
    
    // DOM Property '你輸入的文字' (則會依照輸入數據作更改)
    console.log(input.value);
    // DOM Property JQ版 '你輸入的文字'
    console.log($('#inputId').prop('value'))
  }

JS 浮點數相加

• 變數與資料型別

0.1 + 0.2 === 0.3　false

Switch

• 第一次撞到才知道，撞好久，痛阿...
• case 之內不可用來做判斷式，僅能作 數值匹配
• 下列情況 採 if/else為佳

const num = 10
switch (num) {
  case (num > 5):
    console.log('num > 5')
    break
  case (num < 10):
    console.log('num > 10')
    break
  default:
    console.log('Default') // 執行此
    break
}

if (num > 5) {
  console.log('num > 5')
} else if (num < 10) {
  console.log('num < 10')
} else {
  console.log('Default')
}

Console.time()

• 用來測試Function time 到 timeEnd 所花的時間

console.time()
function test() {
  setTimeout(() => {
    console.timeEnd()
  }, 1000)
}
test()

Git

• 設定 local commit 模版
• Git 記憶帳號
• Git remove 增/刪

    // 設定 local commit 模版
    git config --local commit.template 絕對路徑
    
    // Git 記憶帳號
    git config credential.helper store
    // 可設成 Cache
    git config --global credential.helper 'cache --timeout 7200'
    
    // Git remote 增刪
    git remote remove origin
    git remote add origin ~.git

Git Config 優先級

較低者，只有較高者未設置才會生效

1. .git中的 config (--local)
2. 登入帳號的Home Directory裡頭的 .gitconfig (--global)
3. git 安裝檔中的 git config (--system)

• local config 位於 .git資料夾內的 config

    // -l 列出清單 
    git config -l 
    
    // 設置參數
    // 重新設置某參數 --unset
    git config --global user.name 'RocMark'
    git config --global user.email 

Chrome 插件推薦 Web Developer

• Web Developer
• 提供各種 Validation 聯結
• 快速 Resize、禁用JS
• Cookie 控制
• CSS 編輯器、切換成Print Style
• 檢測圖片是否正常 & 顯示 alt 屬性
• 搜尋不可用連結
• 顯示所有元素的 Outline
• 清除 Cache、History

innerText, textContent

• innerText (IE8- IE專用屬性並非國際規範!!)
• textContent (國際規範、IE9才支援)
• 以下為小程式處理 IE8- 做屬性置換

    function changeTextById(elementId, changeVal) {
      let hasInnerText = (document.getElementsByTagName('body')[0].innerText !== undefined)
      let elem = document.getElementById(elementId)
      if (!hasInnerText) {
        elem.textContent = changeVal
      } else {
        elem.innerText = changeVal 
      }
    }

innerHTML, outerHTML

• ( W3C 只支持 innerHTML )
• innerHTML 只包含該標籤 "下" 的元素 (僅span,p)
• outerHTML 包含該標籤 "本身" (含div)

subString, subStr 子字串擷取

• subString (用此!!)
• subStr (MDN 已不推薦使用!!!!)

    const str = 'Hey Yo!'
    
    // substring 開始、"長度"、預設結束為字串長度 可省略
    const substring = str.substring(0, 3)
    const substringFull = str.substring(0)
    console.log(substring, substringFull)
    
    // subStr 開始、結束、預設結束為字串長度 可省略
    const substr = str.substr(0, 3) // Hey
    cosnt substrFull = str.substr(0) // Hey Yo!
    console.log(substr, substrFull)

禁用Cache META TAG

• 注意 禁用快取 會對 SEO 有所扣分!

    <!-- 一般設定，到該時間即過期 -->
    <meta http-equiv="expires" content="時間"> 
    
    <!-- 一般禁用方法 -->
    <meta http-equiv="cache-control" content="no-cache">
    
    <!-- 舊式寫法，加是為了相容性 -->
    <meta http-equiv="pragma" content="no-cache"> 
    
    <!-- 設定為立即過期 -->
    <meta http-equiv="expires" content="0"> 

Chrome 小技巧

• 右鍵 Tab 固定分頁可以讓頁籤縮小
• ChromeDevTools / Appliction 可以查看更改 WebStorage
• ChromeDevTools / Sources 可以設定 Overrides
• Overrides 可在瀏覽器更改本地文件 (Chrome當編輯器的概念)
• ChromeDevTools CSS 可用 上下箭頭控制顏色 & 數字

cmd

• cd 去哪裡 (cd .. 回上一層)
• dir 列表
• mkdir 產生資料夾
• code . 開始VSCode
• code-insiders . 開始VSCide-insiders

win7 開始選單整理

C:\ProgramData\Microsoft\Windows\Start Menu\Programs