快樂學程式

JS 基本概念大補帖（上）

你是否和我一樣快速入手 JS 時沒想太多，但到頭來才發現少了些什麼呢？

那麼～這篇文章就是為你而寫

以下分為 JS 五問，送給同是新手的你們😆

🎯 1. 什麼是 console ？ 什麼又是 console.log?
Console 譯成中文即為「控制台」，普遍來說是 Javascript 中最直接的編譯器，讓開發者（讓任何寫 JS 的人都能快速除錯、初步篩檢）。

Log 相對來說較為複雜，一般我們平常所知道的意思為「對數」或是「木材」 ，剛跨入前端的新手鮮少知道 log 還有「記載」之意。

上述兩者結合起來為 console.log，白話文是在控制台中記載瀏覽器的使用狀況，也就是我們寫的程式碼在瀏覽器運行的情況。所以通常我們呼叫 console.log 都是為了檢查和除錯，身為小白的我也深深覺得沒有 console.log 單純用 alert 會是一件很疲憊的事。

註：console.log() 中可以放 數字、字串、變數、一段話、函數… 或是如果心情好（有需要）也可以多者混用～

🎯 2. 變數是怎麼樣的概念？

• 在 JS 中，變數 (variable) 用於存放數值 (value)
• 我們用 var （此一關鍵字）來宣告變數
• 等號 ＝ 可以看作成向左的箭號 <=

譬如：var iris = “good person”; 就可以拆分成：

var iris;  

iris = “good person”;

進而被解讀成：「我們定義了一個變數叫做 iris，並把字串 “good person” 指派給 iris 變數」

注意：在 JS 當中，大小寫是有差的，而且差很多～ 所以在寫時務必特別留意小心，例：Iris 不等於 iris

🎯 3. 型別的重要性？

型別之所以重要是因為 JS 本身是弱型別語言，意即「對於型別概念不嚴謹的程式語言」，因此，假使身為開發（撰寫）者的我們不謹慎處理＆區分型別，程式碼行數一多就非常容易出包！

基本資料型態：（可用 typeof 檢查類別）

數字 (number)

字串 (string)    — 字串中的值須由一組引號 “” 包覆

布林 (boolean)   — True/ False

未定義 (undefined)    — 與 is not defined 不同，是變數「還未」被定義，不是「未曾」被定義；另外，空值 (null) 表示該變數為空 (nothing)

———————–

資料型態 2.0：

物件 (object)

函式 (function)

🎯 4. 什麼是陣列？ 常見的陣列要怎麼方式？

陣列出現的主因為「效率」，當不想一行行賦值時，使用陣列是個好方法（特別是很多數值需要處理時）；但需要特別注意的是陣列是「有序的」物件，也就是說陣列中的值的排列是有意義的，可以透過索引 (index) 來找出對應值。

例如：

var irisfan1 = "Willy";

var irisfan2 = "Zan";

var irisfan3 = "Billie";

可以簡化成：

var irisfans = ["Willy", "Zan", "Billie"]

＊陣列只能用 [ ] 包裹，且值需用逗號分開。陣列中可以擺放 數值、字串、物件都是可以的唷！

如果說要找出 irisfans 陣列中的第一個值，就要輸入「０」，因為 JS 語法中索引從0開始

console.log(irisfans[0]);  // “Willy”

🎯 5. 物件是什麼？為什麼要說 JS 是物件導向的語言？

物件中什麼都可以放。相對於陣列有序，物件無序且純粹為屬性 (property, key) 和值 (value)的配對。

模板：

var obj = {

    key1: value1,

    key2: value2

};

舉例：

let iris = {

weight: 100,

height: 200,

eye-sight-right: 2.0,

eye-sight-left: 1.5,

}

表示方式：花括號 { } 中包夾一組組的名字 & 值

在 JS 的世界中，幾乎所有東西皆為物件；大至 window 小至函式、陣列、一組 key-value 的組合或是單純一個數值。

正因為 JS 中所見所聞都是物件，為了方便和效率起見，當一個物件和另一個物件之間需要有重複性的功能時，我們就會利用他們「同為物件」的這個共通點，「封裝」(encapsulation) 其中一個物件屬性後藉由「繼承」(inheritance)將同樣的屬性傳遞下去（不需再寫一次、免去重複造輪）。而各個物件之間的儘管擁有相同屬性，但方法終究不同；再者，物件之間在繼承上有的那些差異造成「多型」(polymorphism)。這就是為什麼 JS 會被稱作「物件導向的語言」(Object-oriented Programming, OOP)

🧠 補充：

1. 如何用 JS 來加入註記？

大家有爬過文或是看過別人寫的程式碼應該都看過以下類似的表示法

var iris = “good person”;

console.log(iris);  // good person

其中的雙斜線（//）用於加入註記。除此之外，如果想加入更長的註記，也可以使用一組斜線加星號 /* */ 來包裹要註記的內容，譬如：

/*

var iris = “good person”;

console.log(iris); 

*/

如此就表示 /* …  */ 內的內容都可以直接被 JS 忽略不讀

2. JS 麻煩之處…  如下圖

只能說，寫 JS 使用運算子前一定要查過型別再動手下去做！

不過不擔心，我們的業力不需要在這裡就先爆發，前人已經幫我們整理好資料

這邊有參考網站，寫得蠻詳細～供大家需要時回頭看👀

感謝大家看我的日記，在此呼籲有興趣踏入前端的人務必加入我創的 JS & Python 學習群！我會在那裡附上所有值得關注的所有學習資訊～ 認真的你們上去看看吧😝

Reference 參考資料：

1. https://developer.mozilla.org/zh-TW/docs/Web/API/Console
2. https://medium.com/@miahsuwork/%E7%AC%AC%E5%9B%9B%E9%80%B1-javascript-%E9%99%A3%E5%88%97-array-%E8%88%87-%E7%89%A9%E4%BB%B6-object-25f13e3d3c92
3. https://www.w3schools.com/js/js_datatypes.asp
4. https://www.fooish.com/javascript/object.html
5. https://dev.to/damxipo/javascript-versus-memes-explaining-various-funny-memes-2o8c
6. https://medium.com/enjoy-life-enjoy-coding/javascript-%E9%97%9C%E6%96%BC-object-%E4%B8%80%E5%8F%A3%E6%B0%A3%E5%85%A8%E8%AA%AA%E5%AE%8C-4bb924bcc79f
7. https://pjchender.blogspot.com/2016/06/javascriptprototypeobject.html
8. https://www.zeusdesign.com.tw/article/22-JavaScript%20%E8%88%87%20Chrome%20Console%20%E5%9F%BA%E6%9C%AC%E6%95%99%E5%AD%B8.html
9. https://medium.com/@miahsuwork/%E7%AC%AC%E5%9B%9B%E9%80%B1-javascript-%E9%99%A3%E5%88%97-array-%E8%88%87-%E7%89%A9%E4%BB%B6-object-25f13e3d3c92
10. https://cythilya.github.io/2018/10/11/types/