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

by Posted on

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. ctrl+shift+p (Mac: command + shift + P)
  3. 在VS code頂部的輸入匡打上git: merge branch
  4. 接著VS code會讓你選要merge進來的branch
  5. 選好後就會進行merge
  6. 若有衝突，則會在local端打開類似線上github那樣的編輯界面可以去解決conflicts

列出所有branch

git branch

切換到某個branch

git checkout <branch>

創立並切換到某個branch

git checkout -b <branch>

上傳本地的branch到remote

git push –set-upstream <remote(原端的源頭，通常是origin)> <branch(要上傳的branch)>

Angular

一般若單純用 ng serve 則可以在電腦的localhost看到網站，但若同時想用手機看到網站(前端在修畫面的時候可以快速從真正的裝置看到還是有差異)

  1. 先找到自己電腦現在的ip address (區網內的)
  2. ng serve –host 本地ip address，例如：ng serve –host 192.168.0.2
  3. 接著run成功後，就可以在電腦、手機上看到網站！(這些裝置都要連上同一個區網/wifi)

Published by impochun