[前端學習筆記] 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;

Position

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)