《寫給所有人的運算思維入門》- 寫程式到底是在幹嘛?


初學 JavaScript 時,若沒有程式語言的基礎,我相信許多人和我一樣,遇上了強烈的不適應感。這是因為電腦思考方式和人類完全不同。《寫給所有人的運算思維入門》這本書循序漸進的為我們解釋在開始寫程式碼前,需要注意些什麼。

同步發表於:a { } after { }
( 個人技術部落格 )

基於我自己讀書的習慣,我一直覺得如果要理解一門學問,抓住這門學問的發展脈絡是很重要的。每件事都是一個龐大系統的一小部分,若是能從這個系統的基本邏輯下手,在這個大系統的每個部分轉換就會輕易很多,也不容易迷失在局部的景象中。

對我來說,JavaScript 也是這麼一回事。再切入技術層面、實際操作前,我想知道:這項技術是什麼、要做出些什麼、是根據什麼邏輯在執行。我想,透過理解這樣的「世界觀」,才能建立自己在這項技能上的自主性,而不是只能模仿他人。

如果要認真深究的話,肯定需要花上好幾年。不過,要稍微入門、抓住基本邏輯的話,我想應該不會是太困難的事情。《寫給所有人的運算思維入門》是我在思考這個問題時,碰巧在書局看到的,作者就是針對這個問題而寫的,這系列的文章就是我在讀這本書時記錄下來的東西,再加點自己的想法寫成的,希望能給正在入門程式語言但是又抓不到訣竅的人一點協助!

電腦很厲害、但電腦真的不懂你

雖然,電腦被視為本世紀最重要的發明,已經成了人類生活的一部分;現在的電腦甚至可以模仿人類學習的模式,有了「自主學習」這樣的類似人類的思考能力。看似全能的電腦,其實根本上並無法用人類思考的方式思考。

對於還沒接觸程式語言、不習慣電腦內部執行方式的人來說,程式設計/電腦思維這樣的概念可能會看起來非常嚇人、可怕、像咒語一樣無法理解。即便是有一點程式語言基礎的人,或許也還是會覺得電腦運作的方式非常地令人不習慣,讓人無法投入。這是因爲電腦無法像人類一樣靈活思考,隨時因應情境改變行動方針(即便現在的手機讓你覺得他應該可以!)。

例如,對於人類而言,「往前走」是件非常簡單、直覺的動作,甚至會讓你覺得「這有什麼好解釋的嗎?就是往前走啊!」可是,對電腦而言,「往前走」這樣的指令卻是模糊至極、難以理解。如果是 JavaScript 的話,這時候就是瀏覽器用紅色的警示瘋狂跳錯的恐怖時刻。它不是在造反,它只是很想跟你說:「我聽不懂、我聽不懂、我聽不懂。」

電腦需要的是把「往前走」拆成更精細的步驟:移動右腳、往某個方向跨出 50 公分、轉移重心、移動左腳、往前方邁進 50 公分;諸如此類的步驟。

這是我們在初入電腦世界時,需要理解的事情。它真的聽不懂人類的思考方式啊啊啊!

演算法、程式設計,蛤?

演算法這個字,根本企圖讓人誤會自己是不是要開始算數學了。先不要慌,它的定義看起來(?)是和數學沒什麼關係。上一個部分提到,電腦無法理解人類的思維,我們必須根據要達到的目標,例如一個網站要有什麼樣的流程,把人類想的功能拆解成電腦可以理解的詳細步驟。這個詳細的步驟就是演算法。

例如,我們如果要建構一個常見的 Navbar 功能:漢堡選單。以人類的思維我們會直覺性地覺得,在視窗變小時,連結列變成漢堡按鈕。

但什麼叫做視窗變小呢?什麼是連結列呢?這對電腦來說都是無法理解的敘述。所以,我們需要更細緻地觀察,當我們在說漢堡選單時,頁面上究竟發生了些什麼事情。可能是:

  1. 視窗大小是 767 px 以下
  2. Navbar 上的連結列消失
  3. 漢堡按鈕顯現
  4. 當漢堡按鈕被點擊時,以獨立區塊的方式(而不是像大螢幕時,用橫向列在 Navbar 上)顯示出連結列

然後,我們再把這一系列的步驟轉譯成程式語言、寫程式碼。這個轉譯的動作就是程式設計。

總結

複習一下上述的內容,當我們在寫程式時,實際上會經過什麼樣的流程:

規劃整體功能
將個別功能拆解成電腦可以理解的步驟
用手上可用的程式語言翻譯這些流程


補充:程式為什麼會出錯

撇除技術層面,一個寫出來的程式會出錯,是因為電腦是張完全的白紙,它在理解事情時,並沒有我們腦中相對應的知識、也沒有我們認為的任何「理所當然」。

拿上面的漢堡選單來說,一開始我在建構這樣的功能時,感到很挫折。我沒有想到要跟電腦解釋到這麼詳細,它才能執行我想要的簡單功能。為什麼我會覺得這件事很挫折呢?那是因為我覺得漢堡選單這件事完全就是「理所當然」的。我覺得不需要做任何調整,連結列應該就會按照我想要的方式在小螢幕顯示出來呀。

當然這是有點誇飾,我的意思是說,在比較複雜的功能時,可能會因為覺得「這件事上理所當然的吧,為什麼要想到這麼細」而產生思考上的盲點。

#《寫給所有人的運算思維入門》 #前端初學者
還有一點點個人反思過去所學的紀錄。






Related Posts

Day01:從變數看 bytecode

Day01:從變數看 bytecode

huli
Day05 間接層 (indirection)

Day05 間接層 (indirection)

humorless
用 CSS 畫畫的小技巧

用 CSS 畫畫的小技巧

ArvinH


Comments