# 學習資源1

# 網頁架構

說到網頁不得不提 DOM BOM BOM

Browser Object Modelopen in new window

DOM

Document Object Modelopen in new window

DOM 是網頁開發的基礎 Web架構

來源

透過 DOM API 查找節點open in new window

# Web 三本柱

# Git

# 語言 Language

強型別vs弱型別
- 型別檢查嚴格?相加安全?
動態語言vs靜態語言
- 需宣告int,string?

靜態型別-必須宣告資料

資料型態的夢魘open in new window

# 多國語系 Localization

zh 或 zh-tw, zh-cn 是什麼的縮寫？open in new window

# html

html tag

HTML TAG	Eng.	X
var	variable	Text
q	quotation	Text
em	emphasized	Text
b	bold	Text
i	italic	Text
br	break	Text
u	underlined	Text
s	strikethrough	Text
span	span	範圍
ol	ordered list	Text
ul	unordered list	Text
li	list item	***
h1	header 1	***
p	paragraph	段落
hr	horizontal rule	段落
rel	relations	关联到一个 stylesheet（样式表单)

# JS

重新認識 JavaScript: Day 01 前言 2018 鐵人賽 javascript

# API (Application Programming Interface)

RESTful APIopen in new window

# CSS

權重 !important > inline style > ID > Class > Element > *
新手也可以輕鬆玩轉 SASS - @mixin @includeopen in new window

白話

@mixin 抽取
@include 召喚使用

[範例]

/* 範例 1*/
  @mixin rounded-border {
    border: 2px #333 solid;
    border-radius: 5px;
  }

  @mixin shadow {
    box-shadow: 1px 2px 2px #666;
  }

  .article {
    @include rounded-border;
  }

  .button {
    @include rounded-border;
    @include shadow;
  }
/* 範例 2*/
  @mixin cover($opacity_value) {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: $opacity_value; // opacity 的值由傳進來的參數決定
  }

  .avatar {
    @include cover(0.9); // 呼叫的時候帶入數值
  }

  .product-image {
    @include cover(0.8); // 呼叫的時候帶入數值
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

常見問題

常見CSS框架的grid system螢幕大小怎麼分?

A: |xs|sm|md|lg|xl|, 600~960~1264~1904~px

CSS有哪些單位?

A: px(pixel 1像素),
em(=html字體大小 16px),
rem(root em根元素16px),
vw(viewport width畫面比例'寬度'百分比),
vh(viewport height畫面比例'高度'百分比),
%(根元素),
calc(計算未知動態大小)

1
2
3
4
5
6
7

CSS基本樣式-單位與數值open in new window

CSS 口決上右下左?

A:設定padding或margin時 常用的方式:
上右下左 {padding: 5 5 5 5} 
上下 左右{padding: 5 5}

1
2
3

margin & padding 差異?

A: 有一個正方形:{邊線:border,面積:content}
 調整內:border和content是padding
 調整外:border外

1
2
3
4

RWD AWD?

A: RWD(esponsive Web Design) 響應式,AWD(Adaptive Web Design)自適應

來源open in new window

線上測試工具推薦? 六角-洧杰-flexopen in new window

# ALL 文章

# DOM vs JS => jQuery

const element = document.getElementById('test')
test.addEventListener('click', () => alert('Hello World'), false)

1
2

$('#test').click(() => alert('Hello World

頁面讀取: 白話來說就是 DOM 建立好就執行 function 和等圖片等 DOM 載入完成才執行 function

$(document).ready(callback)
當頁面內的 DOM 都準備好開始讀取就會執行 callback 內的 function ，亦可簡寫成 $(() => {})

window.onload = callback
當頁面內的 DOM 已經開始讀取才會執行 callback 內的 function 。

CSS 選擇器

# AJAX: axios | jQuery | fetch

前端與後端溝通的橋樑非同步

早期: XMLHttpRequest

var xhttp = new XMLHttpRequest();
// 當readyState改變就會呼叫此function
xhttp.onreadystatechange = function () {
  // readyState === 4 代表 DONE、status === 200 代表成功收到資料
  if (this.readyState === 4 && this.status === 200) {
    // do something
  }
};
xhttp.open("GET", "url", true);
xhttp.send();

1
2
3
4
5
6
7
8
9
10

jQuery 的 AJAX API

# http method

POST 的請求用於提交資料至後端
DELETE 的請求用於刪除後端指定資料
GET 的請求應用於從後端取得資料
PATCH 的請求用於套用資料至後端修改
PUT 如果已經存在就替換，沒有就新增(被取代)

PUT PATCH 差異open in new window

2XX 系列
2XX 系列代表 server 端有成功接受到請求。

200 OK
請求已成功，且馬上回傳資料。

3XX 系列
3XX 系列代表重新導向，這類的 status code 需要 client 端進行更進一步的操作才能完成請求，譬如登入後會重新導向至首頁之類的操作。

4XX 系列
4XX 系列代表 client 端有錯誤。 404 Not Found

5XX 系列
5XX 系列代表 server 端在處理請求的過程中有錯誤，看到這類代表不用檢查自己程式碼是否有寫錯

常用 https://ithelp.ithome.com.tw/articles/10240440

有的套件，會要求npm的最低版本，可以用npm -v 查看目前的版本是多少
npm -v

安裝package.json紀錄的所有套件
npm install 

在整台電腦上，安裝或移除特定的第三方套件，並記錄至Package.json (通常用在，所有專案都會用到的CLI工具)
npm install -g　套件名稱  #npm install --global
npm uninstall -g　套件名稱 

在某個專案資料夾底下，安裝特定的第三方套件，並記錄至Package.json (通常用在，某個專案的函式庫或框架)
npm install -s　套件名稱 #npm install --save
npm uninstall s　套件名稱

在某個專案資料夾底下，安裝特定的第三方套件，用於開發環境
npm install -D 套件名稱 #npm install --save-dev
npm uninstall -D 套件名稱

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17