這個系列帶著各位通過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的文章,若有任何建議也都歡迎留言,會斟酌採納唷!
謝謝您的閱讀,下篇文章再見囉~