普格碼島的法師：歡樂自學寫程式

名人推薦：臺師大資訊教育所教授　吳正己

貝殼放大執行長　林大涵

前建中校長、建中Taiwan Coder League社團推動人　陳偉泓

OpenLab.Taipei共同創辦人　鄭鴻旗

臺大電機系教授　　葉丙成

橘子蘋果兒童程式學苑創辦人　賴岳林

資深黑客、PTT共同創辦人　戴志洋

本書跳脫傳統教學方式，透過想像力的開展，一步步引領學習者進入程式設計殿堂。

──臺師大資訊教育所教授　吳正己

用故事情境開頭，縱觀運算思維、演算法、應用程式、使用者界面、及硬體，是一本台灣現在亟需的「STEM科普書」！

──橘子蘋果兒童程式學苑創辦人　賴岳林

〈歡迎來到程式新手村！〉

當你正閱讀這行文字時，數以百萬計的程式也在世界上悄悄運作著。

天色漸暗，路燈亮了，曙光出現，路燈又關閉了；電梯上上下下，可以任意停靠在不同的樓層；還有具備各種功能的手機和電腦，它們都是經過程式的設計來控制的。

比較複雜精密的程式，例如工廠生產線上不斷舞動機器手臂來組合零件的機器人；人們互通書信的電子郵件和各種即時交流的社交通訊軟體；在心律不整的人體內植入自動去顫器（就是一般聽到的自動電擊器）──這些機器和設備可以很規律地在適當時間運轉，也都是依靠程式的設計來運作。

「程式」（program）是什麼，簡單來說，程式就是一種控制電腦運作的方法。這種控制方法並不是按幾個鈕，或是說幾句話就算，而是透過一組有程序、有結構的代碼（code），像工作列表或食譜那樣的指令，讓電腦來為你做事，達成你想要完成的目標。

代碼又是什麼呢？代碼就是組成程式的各種零件，又被稱為「程式碼」。有些程式只需要少數幾個代碼組合就可以完成，就像螺絲釘、螺絲帽；有些則需要比較複雜的代碼組合，就像模型小火車需要多種零件才能讓它運轉。

會寫程式的人，一般被稱為代碼寫手（coder）。但程式不單只是代碼，就像一本書並不只是把一堆句子組合起來而已，要如何將它們有秩序地編排和組合，關係到程式的讀寫與運作是否順暢，這是很重要的。

世界上存在各種語言，像拉丁語、俄羅斯語、德語、英語、日語等，程式領域也有各種不同的程式語言，多種多樣。有在網路上執行的，也有在單機上執行的；有困難的，也有比較簡單的。事實上，從十九世紀發明可以寫程式的打卡計算機，到今天個人電腦的普遍使用，為了因應不同範圍、不同用途、不同喜好的需求，人類發明了好幾百種的程式語言。這麼多不同的程式語言和分支，要怎麼分類、應該選擇從哪個語言入手，還真不容易。

這本書透過實際的操作情況結合奇幻世界的場景，希望能為你建立一個有趣的入門方向，引導你進入程式的大千世界。



〈普格碼的法師〉

程式王國普格碼是一個島國，這裡住著許多法師，他們擅長施展各種不同的法術，而且會隨著環境或不同的族群，幻化出千奇百怪的招數，這往往讓「普格碼」以外的人覺得一頭霧水，分不清楚這些法術是如何建構起來的，只覺得既驚訝又神奇。

其實，普格碼法師施行法術的過程，看起來一點也不有趣。因為大部分的時間，他們都只是在電腦前不斷敲打著鍵盤，然後螢幕上就接著出現一行一行只有他們自己才看得懂的密碼，或者說是咒文也不為過——至少從我們這些旁人的角度來看是如此。

普格碼的咒文大都只是由不同的單字和各種符號組成，但看起來卻是這麼難懂，而且許多普格碼的法師自己也只懂得施展法術，卻不懂得如何教別人。你若想要搞清楚這些法術究竟是怎麼使的，最好還是親自跑一趟普格碼。

幸好普格碼說近不近，說遠不遠，只要在家裡打開這本書和一台能連上網的電腦，就可以在普格碼島上悠遊，循著法師們的腳步學習各種法術了！如果你還對哪些法術特別感興趣，也有專門的指標引領你走入它的世界；只要你願意主動接近，不用害怕，它是敞開大門歡迎你的。

第一次踏上普格碼這個陌生島嶼的旅人，會發現島上各處都是開放的，四通八達，有很多的出入口。雖然有明顯的標示方向，但往往不知道要先從哪個地方進去，才能找到既簡單又想學習的法術。如果不小心跑進太過困難的區域，馬上就會發現周圍的法術都太深奧了，那麼即使想學也很難上手。

一直以來，為了讓普格碼的法術能夠被外人看得懂，島上的法師們想盡各式解決方法，努力地將各種咒文按照不同派別加以區分，並透過說明文件或互動式教程（tutorial）等方式，深入淺出地引領初次到島上一探究竟的旅人。但即使如此，仍然有不少旅人覺得要入門已屬不易，恐怕難以尋找更深的路徑，因為這些咒文乍看之下似乎了解，但又好像不是真的很懂。

怎麼辦呢？幸好，不久之前，有一群法師創造了一種全新的咒文，像大量製造的零件一樣隨手可得，來到這裡的初學者不再需要學習什麼難懂的咒文，只要像拼拼圖一樣，把這些現成的咒文拼起來，就可以施行法術了。

至此，進入普格碼王國學法術的道路就變得容易多了。這些火系法術的所在地，也就是旅人通常被帶往的第一站，它叫作「火之森林」，位在島的西方。

不過，也有人因為拼拼圖寫程式很簡單，就在火之森林裡迷失了，沒有去探索其他地方，因此本書還會加入水系、風系與土系這三大類型法術的入門介紹。

＊火之森林

旅人拿著望遠鏡，從普格碼島外遠遠看著火之森林。在落日的餘暉中，滿天的晚霞映照著大地，這時可以看到島上有許多火把堆，只見火焰忽高忽低，冒出各種顏色的煙，把星空渲染成一片金黃色。

有四位法師正用各種法術讓火焰產生不同的變化。火焰之間相互交錯，一下子分開，一下子又重疊，還不斷發出各種炫目的效果，像活生生的一樣。

旅人觀察許久，漸漸地，終於可以清楚看出法師們手中的法寶了。

第一位法師的法杖上畫著一隻黃色小貓，第二位法師色彩斑斕的法杖上刻著「CSS」，第三位法師的法杖持續發出一閃一閃的亮光，第四位法師的法杖上則是一座藏有各式圖案的圖書館。

緊接著又是一陣陣的火光交會，炫目的光彩看久了，只覺眼睛有點刺痛。旅人放下望遠鏡，看得到他眼中還殘留著許多光影，仍不斷的變幻著。

嗯，火系法師滿擅長創造「效果」的，旅人對自己下了結論。

＊水之海灘

旅人又拿起望遠鏡，他把目光轉向普格碼東方的「水之海灘」。

只見水不斷從海洋上升到大氣層中，大量的小水珠變成了雲，最後又降落到地面來；也看到了許多的小溪、河流和運輸水道。這些場景都是水系法師創建出來的，如果不仔細看，就很難看到法師們是如何揮動法杖的。

旅人或左或右地來回移動望遠鏡，想要找出些端倪，最後終於看到有五位法師坐在一艘船上，乘著風浪急急地向前行進著。但看不到他們有什麼快速的動作，一切顯得十分平靜，幾乎看不出他們施咒的手勢，也無法察覺他們的法杖上顯現了些什麼，彷彿他們只是靠著專注的冥想就建構完成了這個咒文。旅人再仔細一瞧，似乎看出了這些法師不一樣的地方。

第一位法師的法杖鑲著許多「λ」字，第二位法師的法杖上鑲著一串串珍珠，第三位法師的法杖鑲著一條纏繞的水蛇，第四位法師的法杖鑲著耀眼的紅寶石，第五位法師的法杖則鑲著許多「R」字樣。

從望遠鏡看當然聽不到他們在說什麼，但是從建構咒文時，像泉水一樣不斷冒出水面的迴圈、分叉和循環中，可以觀察到水勢的流動，看得出來他們和火之森林的法師相當不同。

你會看到水勢一下子流向這邊，一下子又流向那邊；一下子分叉，一下子又聚合。旅人越看越覺得複雜，但在這樣的複雜中好像又隱藏了某種秩序的美，只要再多花一些時間，或許你就能找出它們之間的關聯性。

「嗯，看來水系法師們擅長創造『結構』，真有意思。」旅人很有自信地說，也不禁抬起頭，望向無邊無際的天空。

＊風之雲端

天上的雲好美啊！好像遠離一切地面的煩憂，在空中自由飄蕩。「可不是嗎？」旅人心裡想，在這麼高的地方，也會有法師嗎？他拿起望遠鏡，四下張望，在遠方一片白如棉絮的「風之雲端」上，終於找到了一群在空中飛舞的法師。

「哇，原來他們都是用飛的！」他來不及仔細看，只注意到其中三位法師：第一位法師的法杖上刻著「html」，第二位法師的法杖上刻著「CSS」，第三位法師的法杖上則刻著「js」兩個大字。

哦哦！CSS法杖又出現了，看來這種法術既屬於火系，同時也是風系呢！

風系法師們在空中不斷地揮舞著法杖，並發出幽靜的藍光，彼此之間的距離還算相隔滿遠的，他們就藉著這一道道的藍色光束互相通信，不論在哪個點上，都可以很迅速地接收到對方的訊息。

「距離這麼遠還能通信，看來這就是風系法術的特色啊！」旅人一下就明白過來，原來風系法術著重的是「溝通」啊！

＊土之山洞

旅人再將視線轉向南方的「土之山洞」。

地道入口有一座美麗的花園，花園裡站著兩位矮小的符文法師，他們都戴著軟帽，穿著韌皮甲，腳邊還放著一把硬斧頭。

他們兩人長得還真像，其中一位法師的斧頭上刻著火炬圖案，有點像奧運傳遞的聖火；另一位法師的斧頭上則畫著一隻黃色小貓，竟和火系法師法杖上的小貓長得一模一樣。

「呵呵！難道土之法術也和小貓相互連通嗎？」

似乎還有其他矮小的符文法師，在地道口進進出出，不過旅人無法看清楚他們的裝扮。只見地道口這幾位矮小法師來來回回，不斷忙著建造實際可見的裝置，也有許多只需要下一道指令就能自己走動的機器人穿梭其中。

旅人了解到：土系法術著重的是「實際」，它會做出可以在真實世界移動的具體成果。

＊深入底層的中央大石

在這裡擁有古老的法力基石，但少有法師會深入這個底層來探究其中的奧祕。

法力高深的法師大都以底層的結構為基礎，中央大石可以直接通往普格碼島的中心，由它來決定什麼能做，什麼不能做，這也是法師的法力來源。雖然它很重要，但在目前底層結構都已經建造好的情況下，很少有法師需要學習中央大石下的底層法術。

但好奇的旅人當然不會錯過這個難得的機會，他瞧得更仔細了。

他看到長年駐守在這裡的五位老法師，手上都拿著法杖來回不停地摩擦著中央大石，為的是使它越來越接近平滑、完美，以便能將法力更迅速地往上傳輸，送往全島。

第一位老法師的法杖上寫了一個大大的「C」，第二位老法師的法杖上畫了許多眼睛和一支旗子，第三位老法師的法杖上嵌著一張有多處塗黑的數字卡片，第四位老法師的法杖上更是由許多簡短古怪的咒文組合而成，第五位最老的法師，他的法杖上則只畫著一連串的0與1。

這些老法師平常是不輕易出動的，不過一旦出動，他們的每個動作和手勢，都是經過仔細又深入的考慮才施展的。

旅人觀察到，中央大石的老法師著重的是「效能」，他們總是在增加法力傳輸過程的效率、減少耗損與浪費。



〈當個「普格碼」旅人〉

風水輪流轉，現在，換你來當旅人了。

我們從奇幻世界，回到虛擬世界吧。噢不，回到現實世界吧！

＊為什麼要學程式？從哪裡開始學？

每個人都有自己學習的理由和動機，通常是因為有興趣、覺得好玩。真的！設計一個程式，讓電腦自動去跑是一件很有趣的事。

當然，如果沒有接觸過程式，也就談不上有沒有興趣。要是想學，你可以試著先接觸「兩」種程式語言，等學到一個程度了，先評估看看自己有沒有興趣，再決定要不要更進一步深入。為什麼是兩種不是一種呢？因為程式的領域很廣，只學一種，可能會局限你的視野。至少學兩種，才會比較開闊。

以本書為例，火系法術介紹的就是很好上手的Scratch。學了Scratch之後，建議你可以在水系、風系、土系裡再選一、兩個比較有興趣的來學。

程式語言和日常語言一樣，越常使用就越熟悉，也就學得越快。剛開始，不管學習哪一種語言，認識的字彙往往不足以應付所學，常常需要一邊學習、一邊查字典。學習程式語言也是一樣，有經驗的程式設計師也常常一面寫程式一面查網路，因為使用到的字彙和功能太多了，實在很難、也沒必要全部背起來，常用的自然會記住，其他的等要用時再查就行了（有關於程式入門的細節和範例，請參考後面的章節）。

本書很鼓勵大家利用電腦與網路自主學習。電腦自學的一個好處是：電腦沒有所謂的情感，也就是說，電腦有無限大的耐性，不論你的操作速度多慢，或是犯了多少次錯誤，它都可以讓你一直試到成功為止。

＊選定一種語言後，如何上手呢？

先上網搜尋這種語言的入門指南（tutorial），點進去了解它的操作環境，並試著做做看。剛開始可能需要一些時間，之後只要按部就班的練習，一回生，二回熟，自然而然就具備了使用這種語言的基本詞彙。熟悉它的功能和特性，讓它成為你手中實用的工具，建構程式的過程就會變得既流暢又好玩。

現在就給自己出個題目來做吧！如果一時想不起來要做什麼，那麼先用「仿、創、改」三字訣來幫助自己。「仿」就是模仿──模仿製作一個你曾經看過的機械或是程式，例如模仿一個「時鐘」；「創」就是從無到有，善用自己的創意來發想，創造一個全新的作品；「改」就是拿別人做好的，或是自己以前的作品來修改，給它加上新的功能，或是把程式代碼改得比原本更精簡。

多多與人分享自己的作品，聽聽別人的意見，作為日後的參考方向。

參與討論該程式語言的社群網站，可以交換彼此的想法，同時看看人家在做什麼，也可以順便交個朋友。

＊語言的關卡

很多人認為，學習程式，英文是一個關卡。因為大部分程式語法的來源和說明文件，都是用英文書寫的，網路上查到的入門指南和學習資源也幾乎使用英文。為什麼呢？

這是因為程式語言是全球各地的人都在使用和開發的。以全球人口來說，目前能使用英文溝通的人比較多。較新的工具，常常只有英文說明，沒有中文說明。中文使用者，目前以使用簡體字的人比較多。如果以中文關鍵字去查，有時會找到簡體字的說明文件。如果想找轉成正體（繁體）的工具，可以用關鍵字搜尋「正（繁）簡互轉」。不過，只有英文沒有簡體的說明文件也為數不少，你不妨一邊查字典閱讀，學程式的過程中，也練習英文的閱讀力，可謂一舉兩得。

＊如果卡住怎麼辦？

「卡住」是什麼意思呢？簡單來說，就是你想做一個東西，但想破頭就是做不出來。可能在一開始就不知道如何下手；也可能寫到一半出了狀況，查不到問題究竟出在哪裡，就此停擺。

危機就是轉機，卡住的時候先別慌，有很多辦法可以解決。一是去偵測程式內容是否出錯了；二是上網找答案，這時你會發現，其實很多人都會問問題，而且題目五花八門；還有，也可以直接問懂程式的人，請他提供自己的經驗或教你怎麼做。

1.偵測程式內容：

先閱讀顯示錯誤的訊息，看它要表達什麼。許多語言出現錯誤（bug）時，只要一執行，螢幕上就會顯示問題出在哪裡、是什麼樣的錯誤造成的。例如：「syntax error in line 16」表示第16行有語法錯誤，有可能只是打錯一個字造成的。

2.上網查找：

如果遇到看不懂的英文單字，如「algorithm」，可以開啟搜尋引擎，直接輸入「algorithm 中文」這組關鍵字，就可以查到它的中文翻譯。如果你想要一個功能，但不知道它的語法，例如想要用Haskell語言將資料排順序，可以開啟搜尋引擎，打上「Haskell 排順序」就可以查到範例。如果你知道這個功能的英文是「sort」，當然也可以用英文「Haskell sort」去查。

3.直接問人：

如果你認識懂程式的人，面對面詢問當然最直接。不然也可以上網路社群論壇，向有經驗的人提問，他們大都很樂意回答，只要你提的問題夠明確、夠仔細，不是那種三言兩語說不清的大哉問就好。

＊一些祕訣

1.不用急著一下就成為程式專家。如果你踏出第一步，又知道每一步之後如何再踏出下一步，那麼你就可以越走越遠，無可限量。

2.很多的程式學習資源，在網路上都找得到。請一面閱讀本書，一面使用電腦，上網查資料和實際操作。

3.如果遇到不懂的名詞，請直接拿它當關鍵字上網查詢。一查就有的詞語，書中多半不會另附說明。要是你在閱讀過程中遇到了這些詞，就把它當成訓練「蒐集資訊」能力的練習吧。

4.程式設計的領域日新月異，不斷有新的平台、新的語言、新的工具被發明，本書的內容只是入門，幫助你尋找方向，並不是一切，上手之後，還有很寬廣的天地等著你去發掘，有興趣的話請你繼續往前走，不要停下來喔。

〈歡迎來到程式新手村！〉

當你正閱讀這行文字時，數以百萬計的程式也在世界上悄悄運作著。

天色漸暗，路燈亮了，曙光出現，路燈又關閉了；電梯上上下下，可以任意停靠在不同的樓層；還有具備各種功能的手機和電腦，它們都是經過程式的設計來控制的。

比較複雜精密的程式，例如工廠生產線上不斷舞動機器手臂來組合零件的機器人；人們互通書信的電子郵件和各種即時交流的社交通訊軟體；在心律不整的人體內植入自動去顫器（就是一般聽到的自動電擊器）──這些機器和設備可以很規律地在適當時間運轉，也都是依靠程式的設計來運作。

「程式」...

【緣起】

去年四月初，兒童節剛過不久，接到郝明義先生來信，提到考慮出版少年讀者的程式書，並且提及他和唐鳳談的過程中，唐鳳建議他來問我的意見。

我本身有自學程式、創作專案的經驗，但是參與黑客圈的經歷並不長，大部分的經驗都在自學圈與教育圈。

數學教學的經驗比較豐富，中小學的數學教育，常見的問題我大都知道如何處理。程式教育則是比較新的東西，大家都還在摸索，沒有定論。我自己的經驗是，將程式視為數學的應用，把數學教育的知能用於程式教育上、搭配上藝能科實作教學的方針，兩者合起來，是行得通的。

不過，當時因為兒子還很小，我主要是在家與妻子協同帶小孩，努力從手忙腳亂中找到節奏。過程中，家庭新節奏優先，手上幾個專案都暫停開發了，一時也沒有程式方面的授課。

當時我想，只是聊聊，分享經驗和想法也是好的，因為十二年國教資訊課綱中，程式教育進入中小學，對這一點，大家當然都有期待，也希望整體是往務實有益的方向發展。如果大塊想出程式入門書，至少把點子提供一下，讓他們有個好的方向也不錯。沒想到，聊著聊著，郝先生「你來寫這本書如何？」這句話就出現了。

程式的範圍很廣，很少有人全部都懂，我對許多範圍所知也相當有限。以網路App而言，我也只是比較熟悉用戶端、不熟悉伺服器端的開發。不過，對於入門書而言，重點不在面面俱到 ，而在引起興趣、建立初步成功經驗，以及對陌生的領域掌握其大概的範圍和知識地圖，還有延伸學習的資源引介。

這些是我可以做的，也有意願嘗試，於是我就答應了，並且以角色扮演遊戲中常見的地水火風為程式領域分類，凸顯效果、結構、溝通、實際與效能這些程式設計師在乎的價值。希望讀者一面閱讀、一面上機操作的同時，能夠有更寬廣的視野。

兩個月的撰稿過程中，很感謝唐鳳提供的專業諮詢，以及後續大塊文化、網路與書編輯團隊在表達與圖文上的討論與細修，當然也要感謝整個網路上眾多學習資源的開發者。

總而言之，書中的知識並不是我的。我只是把不同地方學到的知識，組織重整、選擇並整理成比較適合入門的樣態、並設計例子來說明，如此而已。

期望讀者將本書視為一個入門的踏腳石，經過它之後，還可以走很遠的路。

唐宗浩，2017夏

【緣起】

去年四月初，兒童節剛過不久，接到郝明義先生來信，提到考慮出版少年讀者的程式書，並且提及他和唐鳳談的過程中，唐鳳建議他來問我的意見。

我本身有自學程式、創作專案的經驗，但是參與黑客圈的經歷並不長，大部分的經驗都在自學圈與教育圈。

數學教學的經驗比較豐富，中小學的數學教育，常見的問題我大都知道如何處理。程式教育則是比較新的東西，大家都還在摸索，沒有定論。我自己的經驗是，將程式視為數學的應用，把數學教育的知能用於程式教育上、搭配上藝能科實作教學的方針，兩者合起來，是行得通的。

不過，當時因為兒子...

緣起
啟程　程式王國：普格碼島
歡迎來到程式新手村！
普格碼島的法師
當個「普格碼」旅人
第一章　火系法術：Scratch 拼圖寫程式
火系法術簡介
哈囉，世界！
潛水夫
妙用畫筆
小貓走迷宮
數位音樂
如何控制一群噴火龍？
值得做做看的點子
第二章　水系法術：讓 Python 和 Haskell 幫我們算數學
水系法術簡介
讓電腦替我們做算術
真的？假的？
公式與函式
找倍數
迴圈結構
折疊結構
省力的內建函式
差距的玄機
統計問題
因數與倍數
質數的篩法
遞迴結構
如何處理字串？
建置單機的 Python 和 Haskell 開發環境
讀寫檔案
值得做做看的點子
第三章　風系法術：HTML+CSS+JavaScript 開心寫網頁
風系法術簡介
Hello World!
超連結
特殊符號
文件物件模型（DOM）
改變字體的大小、顏色和位置
CSS 的選擇器
身分和類別
用數字編織顏色
利用假文排版
立體效果
從別人的網頁學習
自適應設計
友善列印
事件與 JavaScript
JavaScript 函式
呈現資料
取得遠端資料
瀏覽器物件
建置你的單機開發環境
自訂計畫
第四章　土系法術：利用 Arduino+Java 進入實體機械世界
土系法術簡介
點亮 LED 燈
認識電路
感知
按鈕與傾斜感測器
程式結構
類比感測器
電位器與感溫器
光敏電阻
敲擊感測器
時間感
行動
LED 燈與變色 LED 燈
發聲器
伺服馬達
馬達
液晶顯示器
思考
出題目給自己練習
附錄一：一些你可能會好奇的事
附錄二：孩子學程式，家長可以怎麼支持呢？
圖片來源

緣起
啟程　程式王國：普格碼島
歡迎來到程式新手村！
普格碼島的法師
當個「普格碼」旅人
第一章　火系法術：Scratch 拼圖寫程式
火系法術簡介
哈囉，世界！
潛水夫
妙用畫筆
小貓走迷宮
數位音樂
如何控制一群噴火龍？
值得做做看的點子
第二章　水系法術：讓 Python 和 Haskell 幫我們算數學
水系法術簡介
讓電腦替我們做算術
真的？假的？
公式與函式
找倍數
迴圈結構
折疊結構
省力的內建函式
差距的玄機
統計問題
因數與倍數
質數的篩法
遞迴結構
如何處理字串？
建置單機的 Python 和 Haskell 開發環境
讀寫檔案
值得...