[前端學習筆記] Javascript, HTML, CSS and more

ES6是最新版規範。

var

  • 全域/function的block內用的變數,可變更變數的值
  • 但在其他非function的blcok內,例如if,會造成污染狀況,明明在block宣告的卻在global可以使用
  • var在宣告前可以用,不會出現error
  • var重複宣告相同的變數會直接覆蓋掉重複的舊變數,容易造成debug上的困難

let

  • 宣告後僅會在自己宣告的那個block內有效,不會污染其他變數或global變數
  • 宣告後可變更變數的值
  • 在宣告前使用會出現錯誤(合理)
  • 重複宣告相同的變數會出現SyntaxError

const

  • 宣告後僅會在自己宣告的那個block內有效,不會污染其他變數或global變數
  • 不可變的變數
  • 在宣告前使用會出現錯誤(合理)
  • 重複宣告相同的變數會出現SyntaxError

其他

cookie

  • HTML4, HTML5
  • 4kb
  • 會傳送到server,因此檔案不可以太大,會影響效能
  • 會存在本機瀏覽器
  • 可跨tab頁籤使用(同一個瀏覽器內)
  • 不能跨瀏覽器使用、不能跨電腦/裝置使用

localStorage

  • HTML5
  • 檔案較大,可達10mb
  • 只在本機端使用,不會傳到server
  • 可跨tab頁籤使用(同一個瀏覽器內)
  • 不能跨瀏覽器使用、不能跨電腦/裝置使用

sessionStorage

  • HTML5
  • 5mb
  • 可跨tab頁籤使用(同一個瀏覽器內)
  • tab關掉就清除
  • 不能跨瀏覽器使用、不能跨電腦/裝置使用

CSS

box-shadow

來源: MDN

/* Keyword values */
box-shadow: none;

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: revert;
box-shadow: unset;

pointer-events: none; 代表該物件不與滑鼠互動

pointer-events: auto; 正常

z-index 數字越高越大

flex-basis: 100% (you all want to be same size, for example if you have 3 columns, the 3 columns will be even)

git

移除某一隻branch:

git branch -d xxxxx(你要delete的branch)

在VS code中合併分支 local branch

  1. 先切換到你要的branch
  2. 在VS code頂部的輸入匡打上git: merge branch
  3. 接著VS code會讓你選要merge進來的branch
  4. 選好後就會進行merge
  5. 若有衝突,則會在local端打開類似線上github那樣的編輯界面可以去解決conflicts