前端語言

• HTML(骨架)(看官方文件)
• CSS(美編)(看官方文件)
  • Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
  • Flowbite - Build websites even faster with components on top of Tailwind CSS
• JavaScript

  • 作出互動的行為

  • 將有用的值存儲在變數中。例如上述例子，我們要求輸入一個新名字，然後將該名字存在名為name的變數裡。

  • 對文本片段的操作（在程式裡稱作"字串"）。在上述例子中，我們拿了字串 "Player 1: " 並將其與 name 變數連接來創造完整文本標籤，如：''Player 1: Chris"。

  • 執行程式碼，回應網頁上發生的某些事件。在上述例子中，我們使用 [click](https://developer.mozilla.org/zh-TW/docs/Web/API/Element/click_event) 事件，當按鈕被點擊時，便執行更新文本標籤的程式碼。

  • 串接API

    • [DOM （文件物件模型） API](https://developer.mozilla.org/zh-TW/docs/Web/API/Document_Object_Model) 讓你能操作 HTML 和 CSS，像是建立、移除或改變 HTML 元素，或動態地將新樣式套用到頁面…等等。每當你看到彈出視窗，或有新的內容出現在畫面上，那就是 DOM 在動作。

    範例code

    document.addEventListener("DOMContentLoaded", function() {
      function createParagraph() {
        let para = document.createElement('p');
        para.textContent = 'You clicked the button!';
        document.body.appendChild(para);
      }
    
      const buttons = document.querySelectorAll('button');
    
      for(let i = 0; i < buttons.length ; i++) {
        buttons[i].addEventListener('click', createParagraph);
      }
    });
    

    • [Geolocations（地理位置） API](https://developer.mozilla.org/zh-TW/docs/Web/API/Geolocation) 可以取得位置資訊。這就是 Google Maps 取得你的位置並標示在地圖上所透過的方式。
    • [Canvas](https://developer.mozilla.org/zh-TW/docs/Web/API/Canvas_API) 和 [WebGL](https://developer.mozilla.org/zh-TW/docs/Web/API/WebGL_API) API 可以讓你在網頁創造 2D 動畫及 3D 圖像。人們正使用這些技術來作一些令人驚奇的事，參見 Chrome Experiments 及 webglsamples.
    • Audio 和 Video API 像 [HTMLMediaElement](https://developer.mozilla.org/zh-TW/docs/Web/API/HTMLMediaElement) 和 [WebRTC](https://developer.mozilla.org/zh-TW/docs/Web/API/WebRTC_API) 一樣讓你可以使用多媒體做真正有趣的事情，例如在網頁中播放音樂或影片，或由網路攝影機頡取你的影像顯示在另一個人電腦裡（試試我們的簡單例子來了解）。

前端架構

1.框架

• 能夠使用最新的語言功能編寫代碼，並將其轉換為適用於日常設備的代碼。例如，您可能希望使用尖端的新語言功能編寫 JavaScript，但仍要讓最終的生產代碼在不支援這些功能的舊瀏覽器上運行。這裡很好的例子包括：
  • Babel：一個JavaScript編譯器，允許開發人員使用尖端的JavaScript編寫代碼，然後Babel將其轉換為更多瀏覽器可以理解的老式JavaScript。開發人員還可以編寫和發佈 Babel 的外掛程式。
  • PostCSS：做與 Babel 相同的事情，但用於尖端的 CSS 功能。如果沒有使用較舊的CSS功能做某事的等效方法，PostCSS將安裝JavaScript polyfill來類比您想要的CSS效果。
• 使用完全不同的語言編寫代碼並將其轉換為 Web 相容語言的選項。例如：
  • Sass/SCSS：此CSS擴展允許您使用變數，嵌套規則，mixins，函數和許多其他功能，其中一些在本機CSS中可用（例如變數），而另一些則不可用。
  • TypeScript：TypeScript 是 JavaScript 的一個超集，它提供了許多附加功能。TypeScript 編譯器在為生產而構建時將 TypeScript 代碼轉換為 JavaScript。
  • 像React，Ember和Vue這樣的框架：框架免費提供了許多功能，並允許您通過基於vanilla JavaScript構建的自定義語法使用它。在後台，框架的 JavaScript 代碼努力解釋此自定義語法並將其呈現為最終的 Web 應用程式。

2.測試

自動針對您的代碼運行測試，以確保它正確無誤，然後再繼續操作

• 編寫測試的框架包括Jest，Mocha和Jasmine。
• 自動測試運行和通知系統包括Travis CI，Jenkins，Circle CI等

3.部署

部署系統允許您發佈您的網站，可用於靜態和動態網站，並且通常傾向於與測試系統一起工作。

Netlify
是目前最流行的部署工具之一，但其他工具包括Vercel和GitHub Pages。

部署

讓我們總結一下工具鏈的所有部分：

• 代碼質量和維護由 ESLint 和 Prettier 執行。這些工具是通過（需要 ESLint 外掛程式，因為這個特定的專案使用 React）添加到專案中的。devDependenciesnpm install --dev eslint prettier eslint-plugin-react

• 程式碼品質工具讀取兩個設定檔：和 。.eslintrc.prettierrc

• 在開發過程中，我們使用 Parcel 來處理我們的依賴項。 在後台運行以監視更改並自動構建我們的原始程式碼。parcel src/index.html

• 通過將我們的更改推送到 GitHub（在“主”分支上）來處理部署，這會觸發 Netlify 上的構建和部署以發佈專案。對於我們的實例，此 URL 是 near-misses.netlify.com;您將擁有自己唯一的URL。

• 我們還有一個簡單的測試，如果NASA API源沒有為我們提供正確的數據格式，它會阻止網站的構建和部署。

• 用戶端工具概述 - 學習 Web 開發 |多核 (mozilla.org)

• 部署我們的應用 - 學習 Web 開發 |多核 (mozilla.org)

認識package.json

描述專案的檔案，裡面包含你專案的各項資訊(名稱、描述、版本、作者、協議...)

{
    "name": "crawler",// 專案名稱，全部小寫，不允許空格
    "version": "0.0.1",// 須符合x.x.x的格式
    "description": "FB & IG 爬蟲30天鐵人文章",//專案描述
    "author": "dean lin",//作者名字
    "dependencies": {},//在正式環境中會用到的pacakge
    "devDependencies": {},//在開發、測試環境中會用到的pacakge
    "scripts": {},//你可以撰寫支援的command作爲腳本
    "main": "index.js",//入口檔案
    "license": "MIT"//專案協議
}

CORS

前提:

瀏覽器的Same Origin Policy(同源政策)。瀏覽器基於安全性的考量，規定當你的網站要呼叫API時，需要是同一個來源。

如果是不同來源，瀏覽器依然會幫你發出request，但會把收到的response阻擋起來不給你的網站。

跨來源資源共用（Cross-Native Resource Sharing，簡稱 CORS）機制提供了網頁伺服器跨網域的存取控制，增加跨網域資料傳輸的安全性。現代瀏覽器支援在 API 容器（如 [XMLHttpRequest](https://developer.mozilla.org/zh-TW/docs/Web/API/XMLHttpRequest)或 [Fetch](https://developer.mozilla.org/zh-TW/docs/Web/API/Fetch_API)）中使用 CORS 以降低跨來源 HTTP 請求的風險。

簡單舉例:

跨來源資源共用 : 發出request的來源不同，但需要共用資源

可以把API request想像成大樓裡的一個個部門辦公室，有各自的門禁卡。資訊部的人不能進到行銷部，因為他們是不同來源。那如果最近資訊部跟行銷部密切合作，希望可以讓資訊部的人直接進到行銷部怎麼辦？這時候瀏覽器就是這個開啟門禁卡權限的管理員，要開啟門禁權限的方法就是CORS

同源(Same-Origin)？ 跨來源(Cross-Origin)？ 來源怎麼判定？

當兩個網址的 schema(protocol) + host + port 皆相同，就是同源(Same-Origin)，只要有一者不同，就是跨來源(Cross-origin)

透過在API的response中加入新的http header讓瀏覽器透過這些資訊，來決定要不要放行這個response。

所有request發到api server不給response這樣的機制不會有什麼問題嗎？

如果web這邊發出了一個request要刪除某個資料，API server收到request，雖然因為跨來源問題在web端收不到response，但request還是收到了，於是就把資料刪除了！！

web server端發起的request其實可以分為兩個種類， “簡單請求(Simple request)”和“預檢請求(Preflight request)"。判斷的方式也蠻簡單的，只要沒有符合以下的條件，就算Preflight Request。

simple request的條件:

1. metods符合 GET, POST, HEAD 之一
2. header設定不超出以下範圍：
   • Accept
   • Accept-Language
   • Content-Language
   • Content-type的值為三者之一
     • application/x-www-form-urlencoded
     • multipart/form-data
     • text/plain

Preflight Request:

Preflight request 是一個瀏覽器在送出真正的request前，會先送出的輕量request(使用OPTIONS方法)，只有header沒有body。

送出後Preflight request給API Server後，API Server會回應一個Preflight response，此時便會判斷上述的兩個資訊：methods和headers。若資訊顯示通過，則會告訴瀏覽器是否可以繼續往下執行真正的request，並確認真正的request是否有權限可以將response放行回web server，否則便會給予CORS相關的錯誤訊息。

解決方法:

[正規方法] 請後端設置放行通行證 - http header

[暫時方法] 使用CORS Proxy(跨域代理伺服器): 以第三方CORS Proxy - cors-anywhere為例

原理架構如下：

Browser ↔ CORS Proxy Server ↔ API

透過CORS Proxy Server的模式繞過 瀏覽器的跨域限制， 進而實踐存取API Server的response

• DAY04 - API串接常見問題 - CORS - 概念篇 (1) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)
• DAY06 - API串接常見問題 - CORS - 解決CORS問題篇 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)
• 跨域資源分享 （CORS） - HTTP |多核 (mozilla.org)

XMLHttpRequest

您可以從 URL 檢索數據，而無需執行整頁刷新。這使網頁能夠僅更新頁面的一部分，而不會中斷使用者正在執行的操作。

API架構

• DAY07 - API架構分享 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)
• 使用Axios你的API都怎麼管理？ - I am Mike - Medium
• [Day 8] Postman - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)

Ajax

非同步 JavaScript 及 XML（Asynchronous JavaScript and XML，AJAX）

Web 應用程式便能快速、即時更動介面及內容，不需要重新讀取整個網頁，讓程式更快回應使用者的操作。

Ajax是什麼?

AJAX 使用 [XMLHttpRequest](https://developer.mozilla.org/zh-TW/docs/Web/API/XMLHttpRequest)物件來與伺服器進行通訊

• 無須重新載入整個頁面，便能對伺服器發送請求
• 分析並運用 XML 文件

步驟:

1. 發出HTTP請求
2. 處理伺服器傳回的資料

• 何謂網路伺服器？ - 學習該如何開發 Web | MDN (mozilla.org)
• Ajax - Web 開發者指引 | MDN (mozilla.org)

網路相關

Client to Server

• 您的互聯網連接：允許您在網路上發送和接收數據。這基本上就像你家和商店之間的街道。
• TCP/IP：傳輸控制協定和互聯網協定是定義數據應如何在互聯網上傳輸的通信協定。這就像讓你下訂單、去商店和購買商品的運輸機制。在我們的示例中，這就像汽車或自行車（或者您可能繞過的其他方式）。
• **DNS：**功能變數名稱系統就像網站的通訊錄。當您在瀏覽器中鍵入網址時，瀏覽器會先查看 DNS 以查找網站的 IP 位址，然後才能檢索網站。瀏覽器需要找出網站所在的伺服器，以便它可以將HTTP消息發送到正確的位置（見下文）。這就像查找商店的位址，以便您可以訪問它。
• **HTTP：**超文本傳輸協定是一種應用程式協定，它定義了用戶端和伺服器相互通信的語言。這就像您用來訂購商品的語言。
• 元件文件：網站由許多不同的文件組成，這些檔就像您從商店購買的商品的不同部分。這些檔案有兩種主要類型：
  • 代碼文件：網站主要由HTML，CSS和JavaScript構建，儘管您稍後會遇到其他技術。
  • 資產：這是構成網站的所有其他內容的統稱，例如圖像、音樂、視頻、Word 文檔和 PDF。

What happent??

當您在瀏覽器中輸入網址時（對於我們的類比，就像步行去商店一樣）：

1. 瀏覽器轉到DNS伺服器，並找到網站所在的伺服器的真實位址（您找到商店的位址）。

2. 瀏覽器向伺服器發送HTTP請求消息，要求它向用戶端發送網站的副本（您去商店訂購商品）。此消息以及客戶端和伺服器之間發送的所有其他數據使用 TCP/IP 透過您的互聯網連接發送。

3. 如果伺服器批准用戶端的請求，伺服器會向客戶端發送「200 OK」消息，這意味著「當然，您可以查看該網站！這裡是“，然後開始將網站的文件作為一系列稱為數據包的小塊發送到瀏覽器（商店給你你的貨物，你把它們帶回你家）。

4. 瀏覽器將小塊組裝成一個完整的網頁並顯示給您（貨物到達您家門口 - 新的閃亮的東西，太棒了！

5. HTTP格式

   與伺服器通信:

   GET / HTTP/1.1
   Host: www.opera.com
   

   訊息意思:

   • GET：我們希望對信息進行表示。
   • /：我們想要獲取的信息存儲在網站的根目錄中。
   • HTTP/1.1HTTP：我們正在使用1.1版本說話。
   • Host:：我正在嘗試訪問特定網站。
   • www.opera.com：網站名稱為 www.opera.com。

   伺服器應答:

   HTTP/1.1 200 OK
   Date: Wed, 23 Nov 2011 19:41:37 GMT
   Server: Apache
   Content-Type: text/html; charset=utf-8
   Set-Cookie: language=none; path=/; domain=www.opera.com; expires=Thu, 25-Aug-2011 19:41:38 GMT
   Set-Cookie: language=en; path=/; domain=.opera.com; expires=Sat, 20-Nov-2021 19:41:38 GMT
   Vary: Accept-Encoding
   Transfer-Encoding: chunked
   

   訊息意思:

   • 您的請求已成功

• 互聯網如何運作？- 學習網路開發 |多核 (mozilla.org)
• 網路的工作原理 - 學習網路開發 |多核 (mozilla.org)