關於語法的兩個新體悟

學了一個月的 JavaScript，可能因為有 Python 的底子，整體而言還算能上手。彭彭老師在教課時提到兩件事，我漸漸可以體會。

第一件事，程式語言要能上手，就是要學著用簡單的方式想事情。人腦很聰明、直覺的運作很快，但電腦的做法是把事情拆解成小塊小塊，再用土法煉鋼但飛快的速度組裝起來。

以某次課堂的作業為例：「給定一個正整數，求出最接近其平方根的整數。」以 23 這個正整數為例，直接用大腦想的話，答案轉瞬就跑出來了。但電腦就是要求你一步一步地將腦中瞬間浮現答案的過程好好寫下來，個人覺得非常接近建構式數學的邏輯。所以程式語言的解法就是，先從 1 開始做平方，逐步檢視哪 2 個數字的平方數值剛好把 23 夾住，再計算出 23 跟這 2 個數字平方哪一邊的差距較小，答案就是那個數字（以這題為例，23 會落在 4 的平方 16和 5 的平方 25 之間，而 23 較接近 25，因此答案就是 5 ）

不知道為甚麼，我自己很欣賞這種樸實的推論過程，用簡單清楚的邏輯想事情，這樣很好。附上解題的程式語言如下：

第二件事情是，寫程式語言到後來，其實比較像寫作文。

這件事聽起來有點詭異，我最初在刷題庫時覺得程式語言就是不斷計算各種數學題目，但後來真的開始寫自己的個人網站，寫到第 500 行以後，才發現任何修改和增刪都宛如大海撈針，命名、順序、架構的重要從此浮現出來。在各種功能函式已經臻於成熟的今天，一般工程師最需具備的並非頂尖演算法邏輯，而是「讓別人甚至是明天的自己看懂現在寫的 code」。

養成良好的 coding 習慣，就從今天開始，尤其是命名。

(下方是幾個這次寫個人網站的 class 範例，我總共開了 26 個 class，無法想像專業商用網站的數量有多驚人)

JavaScript 菜鳥課程1&2: HTML&CSS

自學 Python 一陣子，也自己在外頭上了不少課，感到程式語言是一種重要且也用的工具，很希望自己的學生們也有機會接觸，於是我在自己可動用的經費項目下，籌辦了一堂程式語言課程入門班，從基本的語法開始教起。

一開始原本想教 Python，但跟授課老師深入討論後，決定以 JavaScript 做為教學語言。選擇 JavaScript 做為入門語言有幾個因素：

1. 門檻較低，語法和 Python 一樣相對平易（相較於難度極高的 C家族）
2. JavaScript 是專寫前端網頁，可以直接看到成果，對初學者來說成就感較高
3. 個人基於私心想了解前端語法 （因為之前已學過後端的 Python XD）

這門課重質不重量，總共只收了 8 位學生。

--

第一堂課，從基礎的 HTML 和 CSS 開始說起。這堂課補足了很多我先前上爬蟲專班時的基本知識，上起來是津津有味。補記幾個課堂筆記如下：

1. 網頁的 HTML 結構必然包含html、head、body 這3項大標籤，head 決定網頁的編碼和頁面名稱，body 則是主要內容+結構。
2.  html 就可做到基本的網頁編排，但現在大多會搭配CSS做美編和各種調整。
3. 所有的標籤都是 1 組 2 個，前後包夾，一層又一層，通常是外層標籤決定內容呈現的大方向，內層標籤再做各種微調。
4. 早期網頁都是用 table(表格) 來做排版。table 的寫法是用 tr(列) 包住 td (欄)，不是很直觀的概念，結構非常制式化、沒有彈性，稍有修改就會牽一髮動全身
   範例：
   
5. 現在排版多習慣用 div，類似區塊的概念，div 裡面再放 div，形成一層層的巢狀結構。
6. 在過去，並排且左右置中是一項非常挑戰工程師的任務，但現在用CSS 的 display flex 功能就可以很輕鬆解決這個難題。
7. 「換行」在程式語言中沒有意義，但用某些語法（例如div）後會有自動換行的功能。
8. class是一套屬性設定，可以預先設好特定的字體、顏色、排列方式、預留空間等等項目，並為之命名，套用到某些div上，這些div就會呈現出同樣的編排模式，是一種非常方便且聰明的做法。

關於網頁的基本排版html 和css 大概上了兩堂課，回家作業是要摹寫出 Facebook 的登入頁面，就是下方這個大家都很熟悉的畫面，頗有挑戰性，寫好之後再與大家分享。

[補記]：8月份臺大資工訓練班「Python網路爬蟲實戰」

繼 6 月時上過用 Python 撈資料的課程後，8 月份又報名了臺大資工訓練班的「Python網路爬蟲實戰」，想了解更多 Python 的實際運用方式。

實際上了第一堂課，發現課程其實很需要 HTML 和 CSS 的基礎，但這兩項我都沒有學過，只好硬著頭皮記下那些標籤。（事後補學了 HTML 和 CSS，才更清楚爬蟲的原理）

上了一陣子，課程內容大致可歸類成 4 個部分：

1. 網頁原始碼的判讀與搜尋關鍵標籤
   決定要爬的資料並找出其所在位置，這也是為何要理解 HTML 和 CSS 的原因。另外還有各種「選擇器」的運用，可以協助使用者做各種類別的選擇。（但選擇器的部分我其實學得不好，大部分還是直接複製網頁原始碼的選擇路徑）
2. Python 套件：PyQuery 的教學與運用
   聽老師的介紹，應該是目前滿熱門的爬蟲套件，主要做靜態網頁的資料抓取和解譯。
3. Python 爬蟲套件：Selenium 的教學與運用
   有很多小功能，能做動態網頁的資料擷取，缺點是沒辦法做解譯，還是得靠 PyQuery。
4. 爬蟲程式的延伸應用
   除了把資料爬下來之外，老師也另外講授爬蟲的一些應用，例如網路機器人的原理、破解網路驗證碼的方式。

整體而言，上完 10 個小時的課後，我對爬蟲的原理確實有所了解。由於老師在課堂上示範的頁面是他特製的，結構簡單嚴謹、也沒有複雜的呈現、動畫、廣告、嵌入等等，所以在課堂上大家都爬得相當順利。只是，現實世界的網頁技術日新月異，不但頁面結構更複雜多層、變化更多，甚至也有不少反爬蟲的機制，例如 Cookie（不過，道高一尺、魔高一丈，老師也有教大家怎麼破解Cookie XD）所以認真要爬下自己想要且有用的資料，並不輕鬆。

這次課程最後，我也自製了一個小專案「電影爬爬看」，主要是將當期播映的所有電影名稱、評分、簡介、場次等內容都抓下來，看到資料跑出來的那一刻著實滿有成就感的~

「電影爬爬看」作品介紹影片