郭進電腦使用筆記: 1月 2022

https://tw.alphacamp.co/javascript-web-development-topics

認識演算法（Algorithm）與運算思維（Computational Thinking）

什麼是運算思維(Computational Thinking)？

微軟研究院全球副總裁周以真（Jeannette Wing）對運算思維的定義如下：

「運算思維是一個思考的程序。它的目的是闡明問題，並呈現其解決方案，因而讓「運算器」(包括機器與人) 能夠有效率地執行。」

為什麼要談運算思維呢？因為程式設計基本上就是和電腦溝通。更確切地說，學習寫程式就是學習如何下指令給電腦執行。因此，在學習程式語言之前，我們必須先了解、熟悉撰寫程式背後的「思考模式」

為什麼要學運算思維？

培養運算思維能訓練邏輯思考、提升問題解決能力。你會學習如何拆解問題，一步一步找到最有效的解決方法。學習運算思維也有助於了解電腦的運作模式，也就是電腦如何「思考」和執行指令。有了這些知識，你就更能有效運用科技解決問題。

無論你想解決什麼問題，運算思維能幫助你分析問題、找到核心議題，並採取適合的解決方法或工具（例如程式語言）。需要和工程師或技術團隊合作時，發揮運算思維能促進彼此之間的溝通、增加你的工作效率，也有助培養跨領域的技能。

運算思維的四大步驟定義如下：

1. 拆解 (decomposition)

將複雜的問題或系統分解成更⼩、更易於管理的問題。

2. 辨識規律 (pattern recognition)
將每個⼩問題分別檢視，思考之前是否有解過類似的問題。

3.抽象化 (abstraction)

抓出重要的細節，將它轉化爲解決⽅案中的步驟。

演算法 (algorithm)設計

歸納出簡單的步驟或原則來解決每個⼩問題。在這個階段，你會定義要給電腦的輸入，以及電腦傳回的輸出。你也會定義電腦將執行的演算法。

輸入 --> 演算法 --> 輸出

如果以這四個步驟套回去剛剛的案例：其實在日常生活中，我們常常會用到運算思維。重要的是讓自己習慣用這個思考過程 (thinking process) 去拆解問題，然後把解決方案 (也是演算法) 透過程式碼去跟電腦溝通，讓電腦執行。

運算思維並不能回答我們遇到的所有問題，但提供了一個模式，讓我們能遵循清楚的流程，有系統地描述問題並加以解決。不只如此，運算思維也幫助我們找到能輕鬆轉換成程式碼的解決方法。所以，我們應該從日常生活的問題開始，培養運算思維的能力。

什麼是演算法（Algorithm）？

「演算法是一系列有條理的步驟，能用於計算、解決問題、做出決定。」

演算法的重點在於，如果環境和輸入不變，每次執行同一組指令時，會得到相同的輸出。除了電腦程式之外，食譜和樂譜也是演算法的例子。

設計演算法

在設計演算法前，必須清楚定義輸入和輸出：

舉例來說，烤蛋糕時，你首先需要正確份量的原料（輸入），之後你會按照食譜（演算法）製作，最後烤出蛋糕（輸出）。

如何知道自己的演算法是否正確？

檢測演算法的方式之一是將輸出未知的輸入放進演算法中。從輸出結果可以觀察演算法的效用，看看演算法是否產生理想輸出。如果沒有的話，我們能觀察輸出的規律，進而修正演算法，直到獲得理想輸出為止。

演算法類型

演算法就和問題一樣有許多種類。以下是電腦科學領域常見的幾種演算法：

簡單遞迴演算法 (Simple recursive algorithms:)：這些演算法使用遞迴計算來找答案。這個方法用於解決古典問題，例如「計算到 n 次方」。

回溯法 (Backtracking)：為了找到解決方法，一個問題先劃分為多個計算用的路徑。如果路徑方向錯誤，便回到上一個位置，從另一個方向開始計算。常見的使用案例需要從大量數據中找到特定資訊。這個方法通常用來找出每一條路徑。如果一條路徑不包含目標資訊，則演算法會回到上一個連接點。

動態法 (Dynamic)：這個演算法的獨特之處在於演算法會記憶之前解決過的問題，並藉由之前解決問題的經驗更快找到類似問題的解決方法。如果之前你計算過 n 的 1,000,000 次方，這個演算法不需從頭重新計算，而是能根據之前計算 n 的 1,000,001 次方的答案，更快找到解答。

分而治之法 (Divide and conquer)：排序是分而治之演算法常見的類型。這種演算法將一系列數字切分為多個部分，然後在每個部分進行比較排序。所有部分之後合併起來，整個組合會再次進行比較排序。這種方法的操作速度比只排序不分割的演算法還要快上好幾倍。

暴力法 (Brute force)：這是駭客最常使用的演算法。如果駭客想要駭入你的帳戶，大概會一次就嘗試所有可能的密碼組合。之所以稱為暴力演算法，是因為這個方法靠電腦速度暴力破解密碼。

貪婪法 (Greedy)：貪婪演算法和暴力演算法類似。這個解決方法會根據當前狀況，找出最佳解決方法，常用來尋找與決定行駛路線。演算法不會計算抵達目的地的所有可能路線，只選擇距離下一個檢查點最短的路線，而且不會考慮檢查點之後的其他路線。

如何評估演算法？

演算法除了能否正確解決問題之外，還有「好、壞」之分嗎？答案是有的。不同的演算法，雖然都能正確達成目標，但還是有效能 (efficiency) 之分。主要的考量點有兩個：

時間複雜度 (Time complexity) - 它代表一個演算法的執行時間。針對同一個問題，有些演算法會比別的用更短的時間(也是更快速)去解決問題。

空間複雜度 (Space complexity) - 它指的是要執行該演算法 (或是程式碼) 所需的記憶體量。

可以理解，效能越好的演算法，它所需要的時間會越短、空間也越少。衡量時間、空間複雜度的方法我們叫 BigO notation. 你可能看過像這種符號：

總結

軟體開發其中一個核心技能，就是把我們想解決的問題 (或想完成的事情)，整理成有條理的指令，再用電腦的邏輯與語言去跟它溝通，讓它用最有效的方法去執行。當你認識並開始深入學習演算法和運算思維，你也更能夠順利地和電腦溝通、更有效地解決問題。

其他 VSCode | Web App | Leetcode

Bootstrap 是什麼？

Bootstrap 是一個由 HTML、CSS 和 JavaScript 寫成的前端框架，核心的設計目標是達成RWD響應式與行動優先，也就是讓你的網站排版可以自動適應螢幕大小。它預先做好一套網站的基礎建設，讓你能在框架的基礎上進行開發，不需要再去煩惱瑣碎的設定。

什麼是 Ajax？搞懂非同步請求 (Asynchronous request)概念

Ajax 是 Asynchronous JavaScript and XML 的縮寫

Asynchronous：非同步

JavaScript：使用的程式語言

XML：Client 與 Server 交換資料用的資料與方法，近年由於 JSON 等格式的流行，使用 Ajax 處理的資料並不限於 XML。

Ajax 並不是單一的技術，而是一套綜合性的瀏覽器端網頁開發技術，因 Google 在 2005 年推出 Gmail 服務時採用此技術大獲成功而知名。

非同步

當你在使用 DOM 事件時，其實你已經在運用非同步的概念，你不知道事件什麼時候會發生，但你可以先把要發生的函式準備好，等到事件發生時，就進行處理。

click event ----->> function

上述這種流程稱為「非同步」。由於 JavaScript 可以把函式當成值來傳遞，因此執行程序可以非同步的發生。

當我們在串接第三方 API 時，由於要等待遠端伺服器回應，等待的時候有可能會大幅影響到使用者的體驗，因此「非同步請求」變得更加重要。

同步請求 v.s. 非同步請求

同步請求 (Synchronous request)：

客戶端 (client) 對伺服器端 (server) 送出 request ，並且在收到伺服器端的 response 之後才會繼續下一步的動作，等待的期間無法處理其他事情。這個作法並不理想，因為通常伺服器端的運算速度比本地電腦慢上好幾倍。

非同步請求 (Asynchronous request)：

客戶端 (client) 對伺服器端 (server) 送出 request 之後，不需要等待結果，仍可以持續處理其他事情，甚至繼續送出其他 request。Responese 傳回之後，就被融合進當下頁面或應用中。

Ajax 實現非同步請求 (Asynchronous Request)

在非同步請求 (Asynchronous request) 還沒被開發之前，如果我們要瀏覽一則留言，就必須向 Server 重新 request 一個完整的頁面。等待頁面切換的這段時間畫面往往會卡住不動，直到接收 response，才會重新渲染 (render) 畫面。

而 Ajax 技術的出現，讓瀏覽器可以向 Server 請求資料而不需費時等待。當瀏覽器接收到 response 之後，新的內容就會即時地添入原本網頁。這也是為什麼當我們瀏覽 Facebook、Twitter 內容時，不會看見整個網頁一直重新整理。

最早期的 Ajax 會利用一個 XMLHttpRequest 物件 (簡稱為 XHR ) 來實作，首先建立了一個 XMLHttpRequest 物件，並使用 .open() 開啟一個 URL，最後使用 .send() 發出 request。

由於 XHR 使用起來很麻煩，所以實務上很少直接使用原生的 XMLHttpRequest。取而代之的方法有很多種，過去較流行的是 jQuery 的 $.ajax()，然而在 JavaScript 日趨成熟之後，許多新的替代方案應運而生，例如 HTML5 提供了 Fetch API，而我們使用的 axios 是一個非常受歡迎的 JavaScript 函式庫，他有許多重要功能如：

廣泛的瀏覽器支持
可支援 Node.js 從後端發送的 Http request，這意味著 axios 可以兼用於前端與後端專案。
直接將回應的 JSON 資料轉換成 JavaScript 的 Object，這十分方便！

使用 AJAX 提高使用者體驗

在一般的情境下，瀏覽器每次發出請求，都會接收到一個完整的 HTML 網頁，而伺服器回傳新網頁、瀏覽器重新演算網頁的過程，有一小段空白的等待時間。若使用者在網路不穩定的地方連線，或者傳遞的資料量龐大時，這一小段的空白時間就會嚴重影響到使用者體驗。

另外，從效率考量，有些請求/回應其實只更新了局部的畫面，不需要每次都重新載入一個全新的網頁。因此，為了提升使用者體驗、並提高網頁的效率，而有了 AJAX 技術。透過 AJAX 技術，client 可以向 server 發出非同步請求，索取局部內容的資料進行抽換，大幅度降低每次請求與回應的資料量，從而提高了瀏覽速度。

使用 AJAX 不僅可以讓使用者在不刷新畫面的情況下繼續操作，不會有在操作途中「中斷」與「等候」的時間，創造了更佳的使用者體驗。

認識JSON

資料格式是 Web API 的要素之一，API 的設計者可以自行決定資料回傳的格式，而這個格式稱之為 —— Response Format。

HTTP 是 Server 及 Cilent 資料傳遞時所使用的溝通媒介，而 HTTP 使用 HTML 作為最初網路伺服器與電腦瀏覽器間傳遞資料的格式，但如今使用者可以在電腦、手機，甚至是穿戴式裝置上使用網路，不同的裝置也讓處理資料的方式更多元，所以 HTML 不再是唯一用來傳遞資料的格式。

在使用 Web API 交換資料時，目前最常見的回應格式有二：

XML：Extensible Markup Language

是一種標記式 (markup) 語言，使用 < > 定義標記，標記的頭尾之間夾帶著內容，可以想像成是 HTML 標籤語法的延伸。

JSON： JavaScript Object Notation 的縮寫

它參考了 JavaScript 中物件結構的表示方式。

與 XML 相較之下，JSON較為輕量、易於閱讀，幾乎所有網頁開發相關的語言都有解析 JSON 資料的函式庫，故本課程將使用 JSON 作為 Web API 資料交換的主要格式。

JSON 看起來很像 JavaScript 的 object，但其實是不同的資料格式，使用的時候需要經過解析，下文介紹 JSON 的使用方法。

JSON 的語法建立在 JavaScript 對於 Array 和 Object 的表示方式，同樣地，JSON 的資料結構中通常也會運用 array 和 object 的嵌套關係，例如：

外層是 array，裡頭包含其他 object

外層是 object，裡頭還有其他 object

以上兩種模型可以被自由地混合使用。除了 Array 和 Object，JSON 還可以處理字串 (String)、數字、布林值 (Booleans) 以及空值 (null)。

你可以運用 JavaScript 來撰寫 JSON。例如：

{

"name": "John",

"age": 29,

"employed": false,

"car": null,

"friends":

[

{ "name":"Mary", "status":"close friends" },

{ "name":"Robert", "status":"close friends" },

{ "name":"Linda", "status":"acquaintance" }

]

}

現在的前端都在用 JavaScript「框架」？前端框架的功能與優點

目前的三大框架：React、Vue、Angular；或著也可以到 GitHub 上搜尋 Awesome Javascript，其中的 Framework 數量也是琳瑯滿目；但到底為什麼好像全世界都在用「框架」呢？

沒有框架的日子

先回想一下在沒有框架的時候，開發者的日常會長什麼樣子吧。

那時最流行的「套件」非 jQuery 莫屬了，語法簡潔、直覺好用的元素選取器，語法便捷的事件監聽註冊，豐富的開發者生態系產出大量的開源套件，以及最重要的，弭平瀏覽器 XHR 差異的 ajax 函式，將複雜的瀏覽器差異藏在套件中，讓開發者只需要專注在想實作的邏輯即可。

透過好用的元素選取器及事件監聽，開發者們可以依據使用者的行為，靈活操作 DOM 元素的結構及樣式，jQuery 的這些特色直到 2019 的現在，都仍是很實用的功能，甚至程式碼本身也有許多值得開發者學習的地方；但隨著專案規模逐漸增大，程式複雜度不斷上升，直接操作 DOM 的缺點也就逐漸浮出檯面：

難以維護

HTML、CSS、JavaScript 無法維持原先的各司其職，因為需要透過 JavaScript 處理互動內容，勢必要將結構、樣式寫到 JavaScript 的部份中，也就因此造成架構耦合度提高，程式碼管理困難。

效能低落

在 Reflow 及 Repaint 是什麼？中有提到 Render Tree 的概念，當 DOM 被改變，勢必要觸發整個 Reflow & Repaint 的流程，頻繁的改動觸發重複渲染，便會讓頁面效能被消耗殆盡。

框架的功能

既然有前述的問題，自然會有強者試圖解決它。現今的「框架」其實就是一種提升開發效率、降低維護難度的開發架構。主流的框架如 React、Vue 等，大都擁有這些特性：

資料與 UI 分離

在原先，我們想要顯示一筆資料，可能必須寫死在 HTML 的結構中，若是動態的資料，可能要透過 JavaScript 將資料動態塞入 DOM 元素上。但在 Vue 中，相對來說會比較容易閱讀及維護吧？透過 Vue 的寫法，讓頁面結構的部份仍然由 HTML 決定，並由資料來決定畫面該如何呈現。由資料決定畫面，這就是現代框架至關重要的核心概念；將資料從介面中抽取出來，每個畫面都是對資料處理過後的呈現。

模組化的 UI

一個網站總是會有一些重複出現的元素，例如按鈕、輸入表單、表格、對話框等等，像是 FaceBook 的按讚按鈕，可能一個頁面出現數十個都不為過；而在現代框架的概念中，我們會把這些重複出現的元素稱為組件（Components），每個組件內包含了組件自己需要用的結構、樣式、邏輯。

例如前述的例子，我們可以將 .card 這個元素抽成單獨的組件，再從外部組件引入它，這樣一來，各組件只需要處理組件內的事，外部引用的組件來決定怎麼使用、提供什麼資料給組件，藉由簡單的切分權責，加上前述的由資料決定畫面，就能讓各個組件的任務單一，並且能被重複使用。甚至現在有許多完成度很高的前端 UI 組件庫，讓開發者有如玩樂高一樣，能快速地用組件堆出想要的畫面，大幅度降低了組織畫面所需要的時間，讓工程師能更專注在處理商業邏輯上。

提升效能

如同前述，在複雜的頁面中，如果頻繁透過操作 DOM 的方式改變畫面，可能會造成全頁面的 Reflow 及 Repaint；不過在使用框架時，開發者不用太擔心這個問題。

原因是在各主流框架的實作中，幾乎都包含了 Virtual Dom 的概念，也就是用 JavaScript 物件來表達當前的頁面結構；藉由與 UI 分離的資料及 Virtual Dom 之間的關係，當資料變動時，事先計算好這次畫面需要變動的地方，如此一來便能抵銷掉無意義的更動，並重複利用已存在的 DOM 元素；當真的要進行 DOM 更新時，也會一次將所有需要更新的局部組件更新，讓效能的耗損盡可能降低。

結語

現代的瀏覽器已經逐漸符合標準規範，使得 jQuery 的重要性漸漸式微；框架的橫空出世，也無疑為前端工程帶來的巨大的轉變。從原先在乎檔案功能的關注點分離，變成組件權責單一的關注點分離；從單純的頁面呈現，到越來越複雜的頁面流轉、資料串接。

當前端開發者社群的能量越來越強大，也代表著網頁前端需要接手處理的事情越來繁雜；幸好得以透過框架強大的功能，大幅度的減輕開發者的負擔。當然，框架同時也代表著限制，唯有理解框架背後的核心思想，才能在限制中找到最適合的方向。

SQL/NoSQL是什麼？認識資料庫管理系統DBMS

SQL (Structured Query Language 結構化查詢語言) 是一種專門用來管理與查詢關聯式資料庫(Relational database)的程式語言。

NoSQL資料庫的意思是 "Not Only SQL"，也就是不限定為「關聯式資料庫」的資料庫管理系統的統稱。

今天，大部分的人提到「資料庫」的時候，通常指的其實是資料庫管理系統(database management system，簡稱 DBMS)：一套讓我們能方便使用資料庫的軟體，作為使用者（或是使用資料庫的應用程式）與資料庫之間溝通的平台。

關聯式資料庫（Relational Database Menagement System, RDBMS）有三個特質：

資料是以一個或是多個資料表 (table) 的方式存放。

在關聯式資料庫裡，每一筆資料都是在 table 中的一個 record，然後再把不同的 table 集合起來，就成為一個關聯式資料庫。

Record --> Table --> Database

資料之間有明確的關聯。

關聯式資料庫一般都用來儲存結構化的資料，而資料之間大多會有清楚的關聯。

關聯式資料庫以 SQL 語言操作

SQL (Structured Query Language 結構化查詢語言) 是一種專門用來管理與查詢關聯式資料庫的程式語言。透過 SQL，我們能在關聯式資料庫裡新增、查詢、更新和刪除資料，同時也能建立和修改資料庫模式。

NoSQL 非關聯式資料庫

隨著電腦、行動裝置、與互聯網的普及，網路應用程式的流量大幅地增長，同時互聯網也進入「使用者生產內容 (user generated content)」為主流的時代。對於 Youtube、Facebook 這些社交網站來說，每分每秒需要處理的資料量是過去一般網站的非常多倍。

而從使用者的角度來看，他們在這些平台上對於資料的需求也跟過去不太一樣。資料庫的主要功能，從過去的「能夠無錯誤地同步處理結構清楚的資料」，到現在慢慢有新需求誕生：「處理高速且大量產生的資料，但不需要即時同步，也不需絕對地零錯誤。」為了呼應這個需求，NoSQL 資料庫就隨之興起了。

Not Only SQL (NoSQL)

NoSQL 的意思是 "Not Only SQL"，也就是不限定為「關聯式資料庫」的資料庫管理系統的統稱，在操作上，NoSQL 並不支持 SQL 語法與 SQL 的邏輯。所以，NoSQL 資料庫通常不使用關聯模型，也並不需要固定的結構 (也就是 schema-free)。但有需要時， NoSQL 也可以使用關聯模型與 schema。

NoSQL 將聚集後的資料，作為儲存的最小單位，透過縝密豐富的資料結構，有利於將資料分散到多個節點；比起資料的關聯，NoSQL 更關注資料所代表的人（例如使用者）與物（例如一篇分享在社交平台上的文章）的「狀態」變動，例如文章被分享、按讚等。

文件資料庫 (document database)

文件資料庫是NoSQL資料庫的一種，顧名思義，是把資料存放成「文件 (documents)」，這些文件會組成為「集合 (collection)」並放在一起，在文件資料庫 (database)裡，文件會存成 JSON 格式，而資料物件會由「屬性-值」 (attribute-vaule pair) 或陣列組成。圖示如下：。

Documents --> Collections --> Database

內容選單標籤

2022年1月11日 星期二

網路指令

Winows10

PS C:\Users\kk> ping www.google.com

PS C:\Users\kk> ping -4 www.google.com

PS C:\Users\kk> ping 172.217.160.100

PS C:\Users\kk> ping -a 172.217.160.100

C:\Users\kk>arp -a

2022年1月2日 星期日

ALPHA Camp Blog 技術主題