從哪裡著手學習 JavaScript?

如果要學習 JavaScript 的話,應該要從哪裡開始呢?

我覺得在學習 JavaScript 之前呢,要先做的一件事情就是先理解 HTML 跟 CSS。 HTML 是網頁的骨幹。即使你一開始就去學習比如 Vue 或是 React 這樣的框架,你也不可能完全避免使用 HTML。因為 JavaScript 是一個用來操作網頁上面已經有的元素的一個工具,所以你必須要先理解 HTML 的一些基本的語法。而 HTML,與其說它是一種程式語言,不如說它比較像是一套規則,他比較像是元素週期表,或者說像是桌遊的規則,你只要把這個規則給記起來,然後懂得如何使用就行。大部分的時候, HTML 本身並沒有這麼複雜。

什麼是 HTML ?

HTML 是一種用來跟瀏覽器溝通的文件,這個文件上會註明給瀏覽器的資訊,所以 HTML 本身並不是給人類閱讀的,你可以從 HTML 裡面去看懂這個網站大概在說什麼,可是你可能很難從 HTML 的這些程式碼裡面直接理解網站的樣式。所以 HTML 其實就有點像是一個地圖,那這個地圖上有一些固定的圖例,比如說紅綠燈會有紅綠燈的圖示,公園會有公園的圖示,學校會有學校的圖示,其實你這麼去理解 HTML 就可以了。HTML 就是一個告訴瀏覽器網頁應該要長什麼樣的一個地圖。

那麼一個 HTML 檔案,裡面通常會有哪一些東西呢?最常見的就會一些圖片、文字、超連結這樣的標籤。這些就會被渲染成這些就會用不同的元素去定義它,比如說圖片,它用的是 <img> 標籤。 哪?如果是文字的話,它用的可能是 <p> 標籤。 那他如果用的是鏈接的話呢,它就是 <a> 標籤。

CSS

那除了標籤之外呢,我們要怎麼樣在頁面上讓讀者可以更方便的閱讀呢?為了要讓網站讓人類也方便閱讀,我們會加上另外一個叫做 CSS 的檔案,也就是樣式表。

樣式表顧名思義,會去定義網頁上的標籤的樣式,譬如說,我的連結都要是紅色的,或者是我的這個圖片都要有一個藍色的外框,或者是我的這個字要多大、行跟行之間的間距要多少,這些就是從 CSS 去定義的。

現在的 CSS 可以達到的功能非常多,甚至是一些動畫或者是一些複雜的圖形,都可以直接用 CSS 畫出來。

學習 CSS 食最重要的幾個概念,我覺得是第一個是「布局」。比如說一個網站,他是三欄式的,或者是兩欄式的,以及網站在這個手機上面縮放的時候,這個佈局應該要怎麼去改變。我覺得這個是最重要的,第二就是從 CSS 去理解元素之間的間距。呃,因為如果想要多了解這兩個方面的訊息的話,可以去看看我其他跟設計相關的文章,裡面有談到比較深入的 CSS。

JavaScript

有了 HTML 跟 CSS 之後,其實就可以做出大部份的網站了。

如果你的頁面上不需要任何的互動功能,那其實不一定要加上 JavaScript。只是現在的網站提供的功能都非常多,好比說你有一張地圖,這個地圖如果你只用 HTML 跟 CSS 去渲染的話,他還是一張靜態的地圖,看起來會跟印刷版的沒有什麼差異。

雖然他有明確的標示出每一個地點,但是對於現在的使用者來說呢,這麼樣做明顯是不夠的。作為一個地圖的使用者,我會期待地圖有更多的功能。比如說我要怎麼到目的地,離我最近的公車什麼時候會來?或者是我要開車的話,路況怎麼樣呢?預計什麼時候會到?

然而,這些已經是靜態的地圖無法達成的了。那為了要做出這樣的效果,我們就必須在原本靜態的檔案上面加上互動性,這個互動性就是透過 JavaScript 去完成的。

透過 JavaScript,我們就可以和網路上其他的網站互動,或者是我們可以和使用者的行為互動。當使用者觸發了某一個特定的行為的時候呢,我們可以去幫他更新地圖上面的內容,比如說當使用者登入的時候,可以讓使用者儲存他們常去的地點,這就是一個 JavaScript 能夠辦到的功能。哪又或者是今天當路況更新的時候哪我們的這個地圖他就可以透過 API 去跟某一個地方的這個資料庫,去拿到最新的交通資料,然後把它給顯示在我們的地圖上,這個就是 JavaScript 常見的功能。