---
# System prepended metadata

title: Codecademy -> Learn JavaScript （序） 筆記
tags: [JavaScript, js]

---

Codecademy -> Learn JavaScript （序） 筆記
===
###### tags: `JavaScript` `js`

由於學習習慣，學習後還是想多練習一下，稍微 Google 了一下，發現蠻多大大推薦這個教學平台 [Codecademy: Learn to Code - for Free](https://www.codecademy.com/) 可以讓我多做一些練習，這邊習慣性的記錄學習的歷程，還能幫助學習記憶與整理學習內容。

---

## 註冊
首先，先輸入信箱與密碼，晚點就會收到驗證信件。
![](https://i.imgur.com/bdAKvDY.png =500x)
輸入一下帳號密碼，註冊就成功了。

---

## 熱身
![](https://i.imgur.com/MpuF7LQ.png =500x)
進入 Codecademy 會有一個熱身的練習，只要照著左邊的說明，就能順利的把
課程完成，順便熟悉一下操作。

---

## 開始練習 JavaScript
![](https://i.imgur.com/Fn1JoJ0.png =500x)
點擊「Learn JavaScript」進入教學首頁。
![](https://i.imgur.com/jzl2EcY.png =500x)
按下「Start」開始練習。
![](https://i.imgur.com/HyTX0qX.png =500x)
總共有10關。

---

### 第 1 關 介紹 JavaScript
介紹一下 JavaScript，有興趣可以看一下左邊的說明，沒興趣直接按下黃色「Next」進行下一關。

---

### 第 2 關 Console
![](https://i.imgur.com/KAbWduZ.png =500x)
練習一下 console.log() 的使用方法。
這關總共有兩項要求，寫好程式碼，按下中間下方「Run」按鈕，達成左邊會有 checkbox 由灰色變成青色並打勾。
中間輸入 console.log() 指令。
```javascript=
console.log(43);
console.log(3);
```
右邊則是輸出視窗，會列出 console.log() 內的內容。
![](https://i.imgur.com/rl9EMsQ.png =200x)
特別要注意的是第二項要輸入一週學習天數，如果忘記了，你可以在右上角 Account Settings 看到先前的設定資訊。

---

### 第 3 關 Comments （註解）
![](https://i.imgur.com/ndrhc3N.png =500x)
註解有單行註解與多行註解
```javascript=
// opening line
console.log('It was love at first sight.');
/*
console.log('The first time Yossarian saw the chaplain he fell madly in love with him.');
console.log('Yossarian was in the hospital with a pain in his liver that fell just short of being jaundice.');
console.log('The doctors were puzzled by the fact that it wasn\'t quite jaundice.');
console.log('If it became jaundice they could treat it.');
console.log('If it didn\'t become jaundice and went away they could discharge him.');
console.log('But this just being short of jaundice all the time confused them.');
*/
```

---

### 第 4 關 Data Types (資料型態)
![](https://i.imgur.com/2xECS0M.png =500x)
這關左邊說明看一下，都是一些觀念說明。
主要有下面這幾種：
* Number (數字)
* String （字串）
* Boolean （布林）
* Null
* Undefined
* Symbol
* Object
```javascript=
console.log('JavaScript');
console.log(2011);
console.log('Woohoo! I love to code! #codecademy');
console.log(20.49);
```

---

### 第 5 關 Arithmetic Operators (算數運算子)
1. Add: +
2. Subtract: -
3. Multiply: *
4. Divide: /
5. Remainder: %
利用 console.log() 做加減乘除的問題。
![](https://i.imgur.com/tCIy5XD.png =500x)
```javascript=
console.log(43+3.5);
console.log(2020-1969);
console.log(65/240);
console.log(0.2708*100);
```

---

### 第 6 關 String Concatenation (字串組合)
利用 console.log() 做字串組合。
![](https://i.imgur.com/F61IXZ0.png =500x)
```javascript=
console.log('Hello'+'World');
console.log('Hello'+' '+'World');
```

---

### 第 7 關 Properties (屬性)
利用「屬性」，來查詢字串的長度。
![](https://i.imgur.com/JdGVFAl.png =500x)
```javascript=
console.log('Teaching the world how to code'.length);
```

---

### 第 8 關 Methods （方法）
利用「方法」，來做英文字轉大寫與刪除空白字串。
![](https://i.imgur.com/cSSagMW.png =500x)
```javascript=
// Use .toUpperCase() to log 'Codecademy' in all uppercase letters
console.log('Codecademy'.toUpperCase());

// Use a string method to log the following string without whitespace at the beginning and end of it.
console.log('    Remove whitespace   '.trim());

```

---

### 第 9 關 Built-in Objects （內建物件）
這邊會運用到內建物件的一些功能，所以還要練習一下，如何從說明文件上，找到我們須要的功能。
![](https://i.imgur.com/6azf0S9.png =500x)
 產生 0 - 100 的隨機變數。
```javascript=
console.log(Math.random() * 100);
```
利用現有變數，捨去小數點。
```javascript=
console.log(Math.floor(Math.random() * 100));
```
利用左邊提示的超連結，找 Math 中取最小且大於的正整數（Math.ceil(x)）。
```javascript=
console.log(Math.floor(Math.random() * 100));
console.log(Math.ceil(43.8));
```
利用左邊提示的超連結，找 Number 中判斷是否為整數。
```javascript=
console.log(Math.floor(Math.random() * 100));
console.log(Math.ceil(43.8));
console.log(Number.isInteger(2017));
```

---

### 第 10 關 Review
![](https://i.imgur.com/40kTHe0.png =500x)

這關是觀念說明，按下黃色「UpNext」按鈕繼續下一關。

---

## [Learn JavaScript variables （變數）](https://hackmd.io/@chiisen/HJOkcJ9TL)


## 參考資料
[Codecademy 線上任務關卡學習平台，學會各種網頁語言(JavaScript、jQuery、PHP、Python、HTML/CSS、Ruby)](https://www.minwt.com/webdesign-dev/html/17859.html)


