三個互動單元,零安裝、零風險 —— 每一課都要親手做到指定的事才算通關,不是看完就算。
在模擬終端機裡把一台電腦從「什麼都沒有」裝到能寫程式 —— 包含親手踩一次每個初學者都踩過的坑。
進入單元 →左邊長程式碼、右邊長視窗:一鍵加元件、綁事件,親眼看懂「一行程式=一個元件」和事件迴圈。
進入單元 →操作一間手搖飲店的點單機,看總部日誌一行行長出來;再讓總部打烊一分鐘,你就懂了前後端。
進入單元 →互動皆為確定性模擬,不需伺服器、不會動到你的電腦。
單元 1
在按任何指令之前,先花一分鐘搞懂:我們到底在裝什麼、為什麼要裝。從一間空廚房說起。
裝備清單上有六樣東西。先點左邊一張生活裡的角色,再點右邊它在電腦裡的分身 —— 配對全對,你就真的懂了這張購物清單。
這是一台什麼都還沒裝的電腦。下面的終端機是真的可以操作的 —— 按指令按鈕執行看看。
提示:程式設計師的第一課,往往是從一行紅色的錯誤訊息開始的。大膽按,壞不了。
每裝好一樣、驗證它真的能用,對應的卡就會點亮。
python --version,親眼確認版本號 —— 裝了不等於能用,驗過才算Q・第一次執行 python --version 時,那行紅字是什麼意思?
「不是內部或外部命令」的意思只是找不到這個工具。要嘛還沒安裝,要嘛裝了但沒有加入 PATH(系統的工具通訊錄)。看懂這行字,你就能自己解決一半以上的環境問題。
Q・都有 Python 了,為什麼還要裝 Node.js?
Python 和 JavaScript 是兩種語言,各需要自己的「師傅」(執行環境)。JavaScript 原本只住在瀏覽器裡,Node.js 讓它走出瀏覽器、能在你的電腦上跑伺服器 —— 這正是單元三「總部」背後的技術。兩位師傅各有擅長,不是取代關係。
單元 2
現在,用下面的按鈕「蓋」出一個視窗程式:左邊是會跟著長大的 Python 程式碼(tkinter),右邊是它蓋出來的視窗。
蓋完你會發現一件怪事:按鈕按了沒反應 —— 那正是這一課最重要的觀念。
視窗程式不是從上跑到下就結束,而是停在一個迴圈裡等你動作。每次你按視窗裡的按鈕,下面的迴圈就會走一圈:
Q・綁定事件之前,按鈕按了沒反應。為什麼?
元件負責「長在畫面上」,行為要靠事件綁定另外接上去(command=打招呼)。「畫面」和「行為」是兩件事 —— 這個分離的觀念,之後學網頁的 HTML 與 JavaScript 時會再遇到一次。
單元 3
「前端」「後端」這兩個詞,用一間手搖飲店的故事就能講明白。先認識老闆娘阿沏。
沏商號 CHÍ TEA
左邊這支手機裡的畫面,就是前端 —— 阿沏「影印一千份、寄進每個客人手機」的那份門市。它在你的裝置上做三件事,點下面的職責,看它各管哪一塊:
👆 點一個職責看看。
關鍵:這三件事全部發生在手機裡 —— 所以沒有網路也翻得動菜單。但它做不了的那件事,才是重點……
而後端,就是阿沏收回店裡的那個總部:一台 24 小時值班的電腦。它手上握著三樣不能影印出去的東西:
👆 點一張卡展開說明。
前端和後端各自只做一半的事,合在一起才辦得成一筆訂單。看一張單據怎麼旅行(可按重播):
看懂這張圖,你就看懂了整個網路世界的節奏:前端申請,後端決定;一去一回,沒有例外。接下來親手當一次總部。
左邊是「沏商號」的點單機 —— 它跑在客人的手機裡。真正決定一張訂單成不成立的,是右邊那間你平常看不見的總部。
試著點幾杯,看總部的工作日誌長出什麼。然後,讓總部打烊一分鐘,你就知道它整天在忙什麼。
沏商號 CHÍ TEA
🧋 點單機 —— 門市・跑在客人手機裡
你每讓總部做一件它日常的工作,對應的卡就會點亮。五張都亮,代表你親眼看完了後端的一整天。
Q1・一張訂單「成不成立」,最後說了算的是誰?
點單機只是把單據送出去。你已經親眼看過:規則不符會被驗單退件、缺料會被查帳擋下 —— 放行與否永遠是總部決定的。這也是為什麼「檢查」不能只放在客人手機裡。
Q2・總部打烊時,點單機的菜單照樣打得開、選項照樣能按。為什麼?
門市(前端)是一包寄到客人裝置上的程式,展示與操作都在本機發生;只有需要「決定與記錄」的事,才要送單據回總部。分清楚哪些事住在誰家,是讀懂一切網頁行為的起點。