首頁 站在 Python 的肩膀上開啟 JavaScript 的大門,用 Py 角度學 JS | Ep. 2 輸出與變數
文章
取消

站在 Python 的肩膀上開啟 JavaScript 的大門,用 Py 角度學 JS | Ep. 2 輸出與變數

這個系列帶著各位通過Python的角度,開始認識JavaScript這個實用的程式語言。專為曾經學習Python或認識Python,並且想學習JavaScript的人們設計,將會頻繁的提到每一種函式或語法與Python相關之處,便於將理解的知識再次利用,從中學習!

前言

各位讀者大家好!這一篇文章將帶著大家認識JavaScript中輸出內容的方法,以及如何定義變數,並且介紹與Python之間的關聯與類似性,帶著各位從Python的角度認識JavaScript!

這篇文章會介紹JavaScript的 console.log 函式,以及定義變數的三種方法 let var const。若用Python角度來看的話將會是 print 以及定義變數(變數名稱 = 變數內容)。

開啟資料夾並新增檔案

首先,由於是第一篇實際操作的教學,先帶著大家在VSCode開啟一個資料夾,並且建立檔案。

第一步:創建一個資料夾並開啟

請先創建一個資料夾在自己想要的路徑中,並且資料夾內暫時不存放任何檔案。

接著開啟VSCode,到左上角工具欄中的「檔案」,並選擇開啟資料夾,亦可以通過先點按 Ctrl + k ,放開後再點按 Ctrl + o 進行操作。

並且將跳出選擇資料夾的視窗,請找到您剛剛創建的資料夾路徑,並且進行開啟。

這時您將來到類似於此的畫面,左上角檔案總管下的文字會是資料夾的名稱。

第二步:創建一個新檔案

將鼠標移動到資料夾名稱附近,您會看到出現了數個按鈕。

請點擊左側的新增檔案按鈕,並且將檔案命名為您想要的檔案名稱,並且副檔名須為 .js ,這邊由於是第二集的第一個程式,取名為 ep2-001.js

當您在檔案總管區域點擊您的檔案時,您便會來到該檔案的編輯畫面。

以上是開啟資料夾與創建並開啟檔案的教學,接下來就要實際進行程式的學習囉!

輸出

首先要介紹的是在 JavaScript 中輸出的方法。想必非常多讀者都知道,在 Python 中最常見的輸出方法是 print() ,並且括號中的參數是輸出的內容,以及可以加入其他相關的設定。

例如:

1
2
3
print('輸出內容')
print(123)
print(True)

而在 JavaScript 中的輸出會使用到 console 這個語法,而其中最常用於除錯或基本輸出的便是 console.log() 這個函式。而這個函式與 print() 相同,括號內填入的是輸出的內容。接下來讓我們來實際操作吧!

在剛剛創建的檔案中,輸入以下程式碼

1
console.log(123);

可以發現在函式後面加上了一個分號,分號象徵著一行程式的結束,雖然若不加上也大多數情況內不會影響程式結果,但為了發生意料之外的錯誤,建議各位可以維持加上的習慣!

輸入後會發現檔案頁籤旁出現了一個白色圓圈,原先顯示的是一個叉叉,這代表了您所編輯的程式檔案尚未存檔。程式設計中,檔案未存檔會導致運行程式時,運行了前一次編輯且存檔的版本,而非最新的版本。因此每一次完成編輯後都應存檔後再運行,避免發生錯誤。

亦可以在檔案工具列中開啟自動儲存,避免忘記儲存的情形。

接著讓我們執行我們所編輯的程式碼。到工具列中的終端機頁籤,點按新增終端,來新增一個新的終端機供我們使用。

開啟終端機後,頁面下方會跳出一個小窗格以及一串文字,文字會是您開啟的資料夾路徑。並且該行文字後可以輸入指令,在終端機執行。

當我們要執行一個JavaScript程式碼,我們可以通過這串指令來通過Node環境進行執行。

1
node 檔案名稱

那我們就通過這個方式,來執行現在這個檔案吧!

1
node ep2-001.js

在終端機輸入後,點擊 Enter 便會執行。

我們可以發現,剛剛輸入在 console.log() 括號內的 123 成功被輸出!

若要輸出中文或英文文字等綜合的文字,您需要用單引號( ' )或雙引號( " )包住文字,這便是JavaScript中的字串資料型態,在後續資料型態的文章會再次細講。這樣的資料型態與包裹方式('" )在Python同樣存在。

而這樣的輸出,若是在網頁中,將會在「檢查」工具中的「主控台(Console)」出現,若在Chrome中,您可以通過點按 F12 開啟檢查頁面。這邊筆者以寫文用的網頁Console做示範。

可以看到下方有著一串串的文字,我們使用 console.log() 輸出的資料將會顯示在此。圖片中可以注意到,有著以叉叉的錯誤符號為前綴,以及以警示符號為前綴的訊息。

而這種訊息,可以通過 console.error()console.warn() 輸出。但若是在 Node.js 環境並在終端機執行,並不會看到不一樣的結果,因此暫時不進行演示。

除此之外,也可以用 console.clear() 清空控制台的所有內容。

console 語法中,也有著許多其他的函式,但由於較不常用,因此將留到後續若有機會再行介紹。

變數

Python中,定義變數僅需要使用 變數名稱 = 變數資料 的方式定義。

例如:

1
2
3
4
x = 123
y = 'I am a string.'
z = "I am a string too."
n = False

而在JavaScript中,我們有三種方式能夠定義變數。

var 逐漸被棄用的定義方式

var 這個定義方式,在 ES6 發布並推出 let 之後,漸漸較少被使用。var 定義方式會讓變數在整個函式區域都可以被調用,並且被使用於變數較不會被重新賦值的情況。

雖然這幾種方法的用途與限制不同,但是定義的方式皆類似,例如 var 通過這樣的方式進行定義。

1
2
3
4
// 定義一個變數,名稱為otp,值為human字串
var otp = "human";
// 輸出otp這個變數,也就是human這個字串在主控台
console.log(otp);

可以發現這段程式碼中,第一和三行是對於程式的描述與補充,並且通過 // 起始。這樣的形式稱為註解,註解不會被執行,用於開發者開發時用於方便閱覽編輯程式碼。

建議各位在同一個資料夾再次創建一個新的檔案,命名為 ep2-002.js (第二集第二個程式)。並且將上述的程式碼貼於檔案內存檔,進行執行。

1
node ep2-002.js

將會出現這樣的結果。

let 主流的變數定義方式

let 這個定義方式在ES6被推出,並且逐漸被廣泛使用。let 的使用方法與 var 相同,適用範圍通常是變數會被重新定義時,並且使用 let 定義的變數不會存在於整個函式內。let 可以這樣使用。

1
2
3
4
// 定義一個變數,名稱為num,值為數字123
let num = 123;
// 輸出otp這個變數,也就是123這個數字在主控台
console.log(otp);

請將這段程式碼貼到剛剛 var 實作的下方,將兩份程式碼合併為一份檔案,即如此。

1
2
3
4
5
6
7
8
9
// 定義一個變數,名稱為otp,值為human字串
var otp = "human";
// 輸出otp這個變數,也就是human這個字串在主控台
console.log(otp);

// 定義一個變數,名稱為num,值為數字123
let num = 123;
// 輸出num這個變數,也就是123這個數字在主控台
console.log(num);

存檔並使用同樣的方法執行後,會產生此結果,可以發現兩個變數都順利的輸出!

const 無法被改變的變數

使用 const 定義的變數是無法被改變的,若改變會發生 TypeError: Assignment to constant variable. 的錯誤。變數可以通過此方式被定義。

1
2
3
4
// 定義一個變數,名稱為cow,值為布林值true
const cow = true;
// 輸出num這個變數,也就是123這個數字在主控台
console.log(cow);

同樣把這串程式貼於同個檔案下方,讓檔案長得像這樣。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 定義一個變數,名稱為otp,值為human字串
var otp = "human";
// 輸出otp這個變數,也就是human這個字串在主控台
console.log(otp);

// 定義一個變數,名稱為num,值為數字123
let num = 123;
// 輸出num這個變數,也就是123這個數字在主控台
console.log(num);

// 定義一個變數,名稱為cow,值為布林值true
const cow = true;
// 輸出num這個變數,也就是123這個數字在主控台
console.log(cow);

存檔執行後會出現這樣的結果。

以上便是對於JavaScript中定義變數的方式介紹囉!

結語

這篇文章介紹了JavaScript中輸出內容的方式:console.log()console.error() 以及 console.warn(),以及清空控制台的 console.clear()

並且介紹了定義變數的方法 var let const ,期望對於各位的學習有幫助哦!這篇文章是第一篇開始正式指導各位學習並實作JavaScript的文章,若有任何建議也都歡迎留言,會斟酌採納唷!

謝謝您的閱讀,下篇文章再見囉~

本文由作者按照 CC BY 4.0 進行授權

簡單三步驟,教您將 HTML 檔案轉換為 apk 應用程式安裝檔

站在 Python 的肩膀上開啟 JavaScript 的大門,用 Py 角度學 JS | Ep. 3 資料型態