search

zuppachu / Joanne-s-Learning-Blog

程式導師實驗計畫第二期 之 Coding 學習紀錄。
2 stars 0 forks source link

[ MTR02 ] - Homeworks 全部簡答題 #12

Open zuppachu opened 5 years ago

zuppachu commented 5 years ago

Week1

請解釋後端與前端的差異。

前端： 為客戶端 (client)，任何我們可以在網路上看見的東西，如：網頁、app。但因為大家都可以看見可以更動，所以任何前端來的東西都是不安全的～

後端： 為伺服器 (server)。在遠端的一個神秘小黑盒子，無法進去無法看見。 兩者之間的功用為：前端會透過網路呼叫 (request) 後端給東西，後端找一找後會透過網路傳送回應 (response)給前端。

假設我今天去 Google 首頁搜尋框打上：JavaScript 並且按下 Enter，請說出從這一刻開始到我看到搜尋結果為止發生在背後的事情。

當你打出 JS + Enter 後，你的電腦會透過網路呼叫後端找尋你所需要的資料，當後端找到後，再透過網路傳送回應給你他找到的答案。

請列舉出 5 個 command line 指令並且說明功用

  1. pwd 你目前在哪裡
  2. ls 顯示裡面有什麼檔案＋資料
  3. cd 跳到你要的檔案去
  4. mkdir 建立資料夾
  5. touch 建立檔案/更改最後的時間
zuppachu commented 5 years ago

Week3

請找出三個課程裡面沒提到的 HTML 標籤並一一說明作用。

  1. <br> break 換行
  2. <hr> 水平線
  3. <img src="XXX.jpg"> 插入圖片

請問什麼是盒模型（box modal）

box model 為網頁排版前的基礎，了解其結構，可幫助我們設計網頁擺放位置。

在網頁上的每個元素，皆可視為一個小盒子(box)，每個小盒子從內往外由：內容 content、內距 padding、邊界 border、外距 margin 組合而成。

請問 display: inline, block 跟 inline-block 的差別是什麼？

  1. inline：可以與其他元素並排，成同一行。無法設定寬高與上下。
  2. block： 佔滿一整行的寬度，很自私無法與其他元素並排，可以設寬高度。
  3. inline-block：可以與其他元素並排（同 inline），可以設定寬高與上下。

請問 position: static, relative, absolute 跟 fixed 的差別是什麼？

  1. static： 為預設值。 按照瀏覽器的預設自動排列，無法調整偏移（不受上下左右值的影響）。

//以下為可定位元素

  1. relative： 相對定位。 相對於原本參考點做定位，可以調整上下左右讓其偏移，但不會影響到其他元素所在的位置。

  2. absolute： 絕對定位。 與fixed很像，但是它主要依靠的點是：上一層且『非設定為stastic』的點。如果上一層沒有特別設定任何定位的話，position basolute會以網頁上的為主要依靠點。

  3. fixed： 固定定位。 固定在視窗中的某個位置，不隨滾動而消失。像現在很多網頁都有一個messenger聯繫圖案在視窗右下角。

zuppachu commented 5 years ago

week4

  1. 什麼是 DOM？

DOM = 文物物件模組(Document Object Model) 它是專門用來與網頁溝通互動的橋樑，例如 javascript 可以透過 DOM 操控 HTML。 再細分的話：

  1. 什麼是 Ajax？

Ajax 全名是 Asynchronous JavaScript and XML。

Ajax 可透過瀏覽器提供的 API(Application Programming Interface 應用程式介面：為程式與程式之間的橋樑。)，讓網頁無需等待 response 的回傳，也能執行後續的程式碼。因此透過 Ajax 技術，網頁不用等待網頁全部重新整下載（a.k.a 換頁）。待 response 回傳後，則繼續執行 response 給的回應。

那為什麼可以不用等待 response 的回傳就可以繼續執行後續的程式碼呢？

因為透過 callback function，讓資料傳遞的過程更省時。Ajax 就像是我們在美食街的呼叫器，當點好餐點後，會拿到一個呼叫器（callback function），之後就可以做其他事無須苦苦站在窗口等待食物（執行後續的程式碼，不用等待重新整理），等呼叫器響起，就可以拿餐（執行回傳後的資訊）。

  1. HTTP request method 有哪幾個？有什麼不一樣？

    最常見的有 get 和 post。

    • get：拿資料（買包包時，取得新型錄，了解包包的款式和 規格)
    • post：傳送資料到伺服器/新增（呼叫店員幫忙找尋款式，買一新包）

    再來是：

    • patch： 更改部分資料 (結帳後想要加購配件或是更換包款顏色)
    • delete ： 如名字刪除用 (跟店員說不要買了！嗯...是個奧客～)
    • put ： 把整個資料都換新 （換買一個不同款式的新包）
    • options： 看伺服器支援哪些 method （查看店家有哪幾種包款可賣）
    • head： 跟 get相似，差別在於 head 的 response 沒有 body。

    而get 和 post的差別寫於題四。

  1. GET 跟 POST 有哪些區別，可以試著舉幾個例子嗎？

寫法格式：

<form method='GET or POST' action=''>
  // 內容物
</form>

get :

post :

查資料時看到一種比喻方式，覺得滿好理解的，就借花獻佛一下唄！

我們可以把 get 想成是明信片。所有的內容都可以被郵局人員看見，所以私密心事（如：密碼）最好不要寫在上面，以免被看光光。再者，明信片因為書寫空間不夠大，所以可寫的內容長度被限制。

而 post 就是被信封套和信件，內容無限幅度，看你想寫幾張就幾張（message body），要寫多張、要貼照片都可（資訊種類無限制）！重點是因為有資訊內容可以放在信封套裡面，所以相較明信片，更具隱密性，雖然硬打開還是看得到內容啦。

  1. 什麼是 RESTful API？

＝ RESTful service ＝ Representational State Transfer

為一種網頁架構風格，並非是一種標準。

主要是在資源的操作上，用他人易懂的方式寫，且充分地運用 HTTP protocol verbs (如： POST/GET/DELET/PUT...等)。只要是利用這種風格寫法的 API 即稱為： RESTful API。

  1. JSON 是什麼？

為一種以純文字為底來儲存和傳送簡單結構的資料。可以透過特定形式存任何資料，如：字串、數字、陣列、物件，但同時也可透過物件和陣列傳送較複雜的資料。

最常應用在網頁從 server 端傳送資料給瀏覽器的時候，透過 Ajax 技術交換 JSON 資料。

舉例來說： 我在網頁上點選了一個產品， javascript 會利用 Ajax 技術將此產品的 id 傳到伺服器，伺服器將收到的 id，將此 id 的產品資料編譯成 JSON 資料格式，並回傳給瀏覽器，收到後 js 先解碼 JSON 格式，再將資料顯示於網頁上。

  1. JSONP 是什麼？

= JSON with padding

JSONP 利用 <script> 跨領域的特性，拿取不同源的資料。他只能用 GET 的方式拿取，不能用 POST，因為要帶的參數必須附加在網址後面。

  1. 要如何存取跨網域的 API？

方法有兩種，一種如題目七，用 JSONP 拿取。

另一種則是 CORS: Cross-oringin HTTP request（跨來源資源共享），當請求來自於不同來源時，會建立一個跨來源 HTTP 請求。所以若想跨領域存取， server 必須在 response 的 header 裡面加上 Access-Control-Allow-Origin。當瀏覽器收到 response 的時候，會先檢查 request 方的來源是否有包含這串字，有的話，就可順利讓程式接收到 response。