該如何執行 JavaScript

透過 Node.js 運行 JavaScript

安裝 Node.js 讓 JavaScript 跑跑跑起來

node.js 並不是一種程式語言，而是一個運行環境，它可以讓 JavaScript 在終端機上直接就給它跑起來

所以如果要運行一隻 test.js 檔

test.js

1 2	const test = "跑起來跑起來"; console.log(test);

使用 node 關鍵字運行 test.js

使用 VSCode 編輯 JavaScript

官方安裝：https://code.visualstudio.com/

VSCode 是由微軟開發的一個編輯器，擁有非常強大的功能，而且內建終端機，再找時間做一個整理。

用 VSCode 打開 test.js 檔案，並用它內建的終端機透過 node 運行 test.js 檔

JavaScript 基礎篇

變數

宣告變數

一開始在學程式的時候搞不太清楚變數(variable)到底是啥，其實概念就像一個可以裝東西箱子，建立一個箱子來裝東西的時候就相當於宣告一個變數來存放資料。
在ES6標準之後的 JavaScript 可以定義變數的種類，就像是宣告你想用哪個種類的的箱子來裝這個東西。

變數的種類:常數與變數

常數(const):數值裝進去之後直接鎖起來，不能再更動裡面的數值

1 2	//這個a是不可變的(常數) const a = 10;

變數(let):暫時存放數值的箱子，隨時可以更動裡面的數值

1 2	//這個b是可變的(變數) let b = 5;

而宣告數值的=並不是說a真的等於 10 的意思，比較類似於賦值的概念，把這個10裝進名叫a的箱子，把這個10賦予到名叫a的箱子上。

命名規則

所以當我們要宣告這個變數，就需要先想一個好名字給它，有其命名規則存在。

開頭必需是 ASCII 字元(英文大小寫字元)、錢號($)。不可以用數字當開頭。
之後的字元就可以用數字，也能用底線( _ )。
大小寫是什麼，使用的時候就是什麼，大小寫是有差的。
名稱不可以使用 JavaScript 的保留字，例如 const 就是 JavaScript 的保留字。

`undefined` 與 `not defined`

undefined：有宣告這個變數，沒有賦予數值

1
2
3

let box;
console.log(box);
// output : undefined

not defined：連宣告都沒有宣告，根本沒有這個變數，就會是not defined，而且會就會出錯。

1	console.log(somebox);

變數、函式、類別命名

小駝峰式(camelCase)
- 開頭小寫，後面的詞彙大寫，ex: this is a box => thisIsABox
大駝峰式命名法(CamelCase)
- 每個詞彙都大寫，ex: this is a box => ThisIsABox

變數與函式，用小駝峰式(camelCase)，類別用大駝峰式命名法(CamelCase)

const numberOfLegs // 常數
let numberOfStudents // 變數
function setBackgroundColor() // 函式
class Student{} //類別

變數的各種型態

變數的原始型態就分為三種：boolean、number、string

另外三種型態分別為：object、undefined、function

可以透過typeof這個關鍵字來查詢變數的型態

console.log("typeof true,", typeof true);
console.log("typeof 30,", typeof 30);
console.log("typeof 0.5,", typeof 0.5);
console.log("typeof hello,", typeof "hello");
console.log("typeof 30,", typeof "30");
console.log("typeof [1],", typeof [1]);
console.log("typeof {a:1},", typeof { a: 1 });
console.log("typeof null,", typeof null);
console.log("typeof undefined,", typeof undefined);
console.log("typeof function,", typeof function () {});

結果如下

typeof true, boolean
typeof 30, number
typeof 0.5, number
typeof hello, string
typeof 30, string
typeof [1], object # 註1
typeof {a:1}, object
typeof null, object # 註2
typeof undefined, undefined
typeof function, function

註 1 : 在 JavaScript 中其實沒有 array 的型態，如果查詢[1]會回傳 object
註 2 : 需要注意的是null也被分在了object

陣列

一維陣列

一維陣列陣列的概念類似於一個箱子，裡面存放著多個東西

1	let fruits = ["banana", "apple", "watermelon"];

陣列的索引值由 0 開始，可以透過 array[number]的方式才取得資料

1 2	console.log(fruits[0]); //output: banana

二維陣列

二維陣列就是箱子裡面又存放箱子，透過 array[number][number]第幾排第幾格來存取

const magicMatrix = [
  [2, 9, 4],
  [7, 5, 3],
  [6, 1, 8],
];
console.log(magicMatrix[1][1]); //第一個陣列的索引值 1

儲存多種型態

JavaScript 的陣列並沒有規定只能存放哪種型態，陣列是可以存放不同型態的

但是在陣列中儲存多種不同的資料型態，會影響到處理效能，如果有多種類型，倒不如都用字串類型，取值時再做轉換。

1	let arr = [1, "1", true];

拷貝陣列

如果將一個陣列的變數在賦予給另一個變數，這並不是複製一份的意思，而是參照的概念
如果更動了aArray的數值，bArray也會跟著改變。

const aArray = [1, 2, 3];
const bArray = aArray;

aArray[0] = 100;

console.log(bArray); //[100, 2, 3]

迴圈

當條件達成時，重複執行程式。

for 迴圈

範例

1
2
3

for (let count = 0; count < 10; count++) {
  //do something
}

迴圈一開始，count 賦予數值 0
當 count < 10 時 (判斷條件)，執行區塊中的程式碼。
每當執行完區塊中的程式碼後，count++ 即 count +1

while 迴圈

範例

let count = 0;

while (count < 10) {
  //do something
}

判斷式

如果…我就…不然…我就…

const x = 10;

if (x > 100) {
  console.log("x > 100");
} else {
  console.log("x < 100");
}

解釋: x 變數為 10，如果 x 大於 100 執行 console.log('x > 100')，不然就執行 console.log('x < 100')

JavasScript 學習資源

最直覺的變數型態：物件(Object)

物件取值的方法

Object.key
Object[key]

var skillKey = "skill";
var person = {
  name: "luke lin",
  skill: "javascript",
  pet: {
    name: "neinei",
    sex: "male",
  },
};

console.log(person.skill); // javascript
console.log(person["skill"]); // javascript
console.log(person[skillKey]); // javascript
console.log(person.pet.sex); // male

沒那麼簡單 : 變數的運算

各種注意！！注意還動啊！！！

注意型別

javascript 屬於弱型別的程式語言，宣告變數的時候不用一起宣告型態，如果今天要執行某個運算

1
2
3

const a = "1";
const b = 1;
console.log(a + b);

前者a是 string後者b是number，結果會是啥？

結果會印出11，所以要記得

弱型別碰到型態不一樣的情況時，會嘗試自己轉換型態

所以當碰到型態不同的情況時，可以先轉換成相同型態

1	consle.log(Nunber(a) + b); //2

可參考這篇

弱型別的代價

注意浮點數 float

針對更精確的浮點數算法的幾種做法

引入 Library
定點小數表示法Number.prototype.toFixed()
四捨五入Math.round

可參考這篇

JavaScript 浮點數計算的精確作法

== vs ===

一般相等(==)會將型別一致化後才進行比較，嚴格相等(===)則不會，所以建議都只用嚴格相等(===)

進行比較時當型別不一致則會先轉換型別

嚴格相等

進行比較的時候不會轉換型別，所以當型別不同時就會回傳false

參考資料

相等比較

從 Object 的等號真正理解變數

記憶體位置

兩個物件看起來是一樣的，但比較的結果卻是false，因為物件的比較是比較記憶體位置，當物件在宣告時，會新增一個新的記憶體位置存放。

const objA = {
  name: "luke",
};
const objB = {
  name: "luke",
};

console.log(objA === objB);
//output : flase

更新物件

const objA = {
  name: "luke",
};
const objB = objA;

console.log(objB);
//output : { name: 'luke' }

當 objB 被賦予 objA 這個物件的資料時，是以 objA 作為參照，因此記憶體位置是相同的，所以當 objA 的資料改變時， objB 也會跟著改變。

const objA = {
  name: "Luke",
};
const objB = objA;

objB.name = "Evan";

console.log(objA); //{ name: 'Evan' }
console.log(objA === objB); // true

當物件本身被改變，記憶體位置也會改變。

let objA = {
  name: "Luke",
};
let objB = objA;

objB = {
  name: "Joe",
};

console.log(objA); //{ name: 'Luke' }
console.log(objB); //{ name: 'Joe' }
console.log(objA === objB); //false

網路上的學習資源很多

如果覺得光看文件有點苦澀的話也可以找找線上的教學平台

codemy
Udemy

以上就是這篇的筆記內容

程式導師實驗計畫 [第二週] JavaScript 程式基礎篇

該如何執行 JavaScript

透過 Node.js 運行 JavaScript

安裝 Node.js 讓 JavaScript 跑跑跑起來

使用 VSCode 編輯 JavaScript

JavaScript 基礎篇

變數

宣告變數

命名規則

`undefined` 與 `not defined`

變數、函式、類別命名

變數的各種型態

陣列

一維陣列

二維陣列

儲存多種型態

拷貝陣列

迴圈

for 迴圈

while 迴圈

判斷式

JavasScript 學習資源

最直覺的變數型態：物件(Object)

沒那麼簡單 : 變數的運算

注意型別

注意浮點數 float

== vs ===

從 Object 的等號真正理解變數

記憶體位置

更新物件

一份彙整了在 JavasScript 中被普遍使用的風格指南

從 ES6 開始的 JavaScript 學習生活

codemy

Udemy

程式導師實驗計畫第三期

程式導師實驗計畫 [第二週] JavaScript 程式基礎篇

該如何執行 JavaScript

透過 Node.js 運行 JavaScript

安裝 Node.js 讓 JavaScript 跑跑跑起來

使用 VSCode 編輯 JavaScript

JavaScript 基礎篇

變數

宣告變數

命名規則

undefined 與 not defined

變數、函式、類別命名

變數的各種型態

陣列

一維陣列

二維陣列

儲存多種型態

拷貝陣列

迴圈

for 迴圈

while 迴圈

判斷式

JavasScript 學習資源

最直覺的變數型態：物件(Object)

沒那麼簡單 : 變數的運算

注意型別

注意浮點數 float

== vs ===

從 Object 的等號真正理解變數

記憶體位置

更新物件

一份彙整了在 JavasScript 中被普遍使用的風格指南

從 ES6 開始的 JavaScript 學習生活

codemy

Udemy

程式導師實驗計畫第三期

`undefined` 與 `not defined`