2024-11-04|閱讀時間 ‧ 約 0 分鐘

Day01 走入JavaScript的世界


歡迎來到「10日 JavaScript」,有鑑於自己先前學習JavaScript的流程過於破碎且凌亂,特別整理了這份文章,包含了基本語法、資料型態、常用函數及JavaScript實作等。希望能幫助到一些需要用到、想要了解JavaScript的人,讓大家不必再走太崎嶇的路。內容會分成10篇,一步步帶大家了解基礎的JavaScript運作邏輯,即使精通其他的程式語言,JavaScript的設計可能還是讓你感到陌生,其中包含一些在其他語言中顯得「奇怪」的特性。10日後,你應該可以看懂常見的JavaScript語法甚至撰寫簡單的邏輯。

「10日 JavaScript」的內容大多改寫自Brad Schiff的「Learn JavaScript: Full-Stack from Scratch」線上課程,這門課除了JavaScript本身外,還包含了資料庫、前後端區分等重要且進階的內容,非常推薦大家去看看。

別擔心,這是一份初學者友善的文件,會一步一步帶大家瞭解JavaScript的基礎。內容會包含部分CSS及HTML,但我會盡量說明清楚,不必太過煩惱。內容中的專業字詞我會以原文(英文)來撰寫,當越來越進階,各位勢必也得接觸英文的內容,我想從一開始就讓大家了解原意、原詞,但同時也會附上中文翻譯。

JavaScript簡介

JavaScript(或簡稱JS)是一套常用於網站前端(使用者能看見、互動的部分)的程式語言。但同時,它也會被用在網站伺服器端(後端)。換句話說,任何我們所看見的網站,都與JavaScript脫離不了關係。另外,JS作為一套成熟的程式語言,它用途當然也不僅限於網站,也有桌面app、手機app、機器學習相關的等等。

順帶一提,JavaScript和Java幾乎沒有任何關係,純粹是當時Java很潮所以這樣命名。大概跟鉛筆跟鉛的關係類似,有興趣可以問問ChatGPT這段故事。

大神們做到了什麼

在開始學習一項新工具前,我們最好了解它可以做什麼、做到什麼程度。以下整理了一些優秀的網站作品,這些都是透過JavaScript完成的。大家可以留意網站的互動性,以及在載入這麼複雜圖像資訊的情況下,網站所需要的載入時間 — 快得不可思議。

這些開發者用JavaScript做到了大量資料串接、畫面互動、藝術創作,甚至是3D渲染等。同時,還維持了網站的高效能,這些都是JavaScript能做到的事。

動手試試

要接觸JavaScript,最簡單的方法就是使用瀏覽器。由於網站大多由JS組成,而瀏覽器負責渲染網站內容,執行JavaScript程式碼正式瀏覽器的任務之一。

現在就一起試試,首先必須打開瀏覽器的Console(控制台面版)。

打開Console(控制台面版)

首先,在瀏覽器裡任何頁面按下右鍵,選擇Inspect(檢查)。

例如在Google.com,右鍵按下Inspect。

這時會看見右方出現密密麻麻的內容。這是HTML,建構網頁的元素(像建築物的結構)。

在選單中選擇Console。

點選 > 附近,可以看見閃爍的游標,這樣就成功打開了Console。

若沒有看見Console選項,可以在 >> 或是 + 符號內尋找。


Mac使用者可以用command + option + i 快捷鍵開啟,Windows使用者可以按F12

如果使用的瀏覽器是Safari,需要先到設定裡將開發者人員選項開啟。請注意,每個瀏覽器的Console介面多少都有點差異,但不影響功能。

💡若還是找不到,可以嘗試Google搜尋「<瀏覽器名稱> + 打開Console」。

Console可以幹嘛

Console是使用者可以透過JavaScript與瀏覽器互動的區域。換句話說,我們能透過Console直接告訴瀏覽器要執行什麼操作。

舉例來說,我們可以要瀏覽器做簡單的運算:

輸入1 + 1按下enter,console就回傳了2。

這看起來實在很無聊。

但大家首先可以注意到,不像其他程式語言,寫JavaScript結尾是不需要加分號(;)的,未來我們會更仔細討論這個機制。加了也不會報錯,有加沒加都沒有關係,有些人主張要加,有些則否,大家自己取捨。


程式語言之所以強大,是因為可以將值存在variable(變數)裡,JavaScript也可以做到。

上圖中,用關鍵字 let 宣告 myNumber 並把3存進這個變數裡,這個變數會被暫時存在記憶體裡,能接著使用這個變數運算。


關於宣告的關鍵字,之後還會有詳細的解說,現在只要知道let是其中之一就可以了。

除了數字之外,變數也可以是string(字串)、boolean(true/false)等等。

很特別的是,我們不需要像其他程式語言一樣,在宣告的時候根據值的類別選不同的關鍵字。都用let,JS會自己判斷這是什麼類別。

以變數儲存string。

以' '或" "括起來的值是string類型,用+符號可以把string按照順序相連。

JavaScript的string可以用””或是‘’括起來,都可以。但記得前後必須一致,且必須使用英文輸入法的引號。

stringstring之間使用+符號,可以把兩個string按照順序串接在一起。

boolean作為變數。

除了使用者自行定義、輸入變數外,我們也可以透過Console取得現有頁面的資料。

用document.title取得網頁的title (你目前不需要了解這些變數)。

甚至是修改!

將title改成了:Gemeni。

當然,我們現在還沒瞭解這些指令到底代表什麼意思,也暫時不需要知道。documenttitle這些變數其實沒那麼重要,更重要的是.=這些像是指令中骨架的符號,正如我們學英語、日語著重在看主詞、動詞、受詞的結構一樣。未來我們會看見許多不同的變數,但他們都會有相同的.=符號連接,這些符號才真的代表了JavaScript的運作。

以上面指令為例。我們用.存取document裡的title屬性,用=更改現有的值,改成資料型態string: ‘Gemeni'

用Console修改內容

我們可以用類似的指令嘗試修改網頁內容,跟著試試看吧。

我到台大校長室的頁面打開Console。

在Console裡輸入上述指令,你會發現有一個區域發亮了。

表示頁面中的#page-administration article這個HTML元素被選中了,接著繼續輸入:

這一段存取了那個HTML元素的style屬性內的background屬性,並修改成salmon這個顏色。

背景顏色被改成salmon這個顏色了。


還可以更改圖片:

存取#page-administration article內的imgHTML元素,修改src屬性。

我貼了維基百科上Elon Musk的圖片網址。

接著你會發現,重新整理頁面之後,一切都回歸原樣。

重新整理之後的頁面。

這是因為這些變數的改變都只發生在網站前端,網站後端的資訊並沒有因為我們輸入的程式碼有對應的改變。否則的話,網頁的世界將會天崩地裂呢。

這也正是網站區分成前端與後端的重要原因之一,將需要保護的內容交由後端負責,使用者可直接互動的部分由前端處理,才能確保網站的健康、安全運作。

Console.log

console.log()可以說是JS最重要的內建函數之一,我們可以透過它把資料印在Console。

舉例來說:

可以看見Console成功出現Hello World!這行字了。

你可能會想說,阿我直接打’Hello World!’在Console就好啦,幹嘛另外寫console.log()

這是由於大部分時候,程式碼都不會直接打在Console。所以必須透過另外的指令讓Console印出東西。

反正先知道這件事,之後大家最常用到的就是這個了!

小結

我們今天知道了瀏覽器作為JavaScript的主要運作環境,我們能透過Console寫下JS程式碼控制頁面上內容。大家不需要記得那些陌生且繁複的指令和變數,只要注意let.=’’””等特殊的關鍵字以及符號,這些關鍵字、符號代表使用JavaScript時的骨架,未來也會重複出現。


明天我們將討論每個程式語言中最重要的部分 — Function(函數)。


Resource

Credits

關於我

我是Erkin, 一個網站開發者。
有任何疑問或是想勘誤的話歡迎聯繫。

分享至
成為作者繼續創作的動力吧!
© 2024 vocus All rights reserved.