---
robots: noindex, nofollow
tags: JavaScript
---

# JavaScript 基礎課程 (1)

## 前言
* 什麼是 JavaScript？
* 一種程式語言
* 程式語言是幹嘛用的？
* 程式：人要電腦做的一堆指令
* 程式語言：為了讓電腦聽得懂人話，而設計出的語言
* 為什麼要學 JavaScript？它跟網頁有什麼關係？

## 預計會學到的東西

### JavaScript 基礎
* 變數
* 流程控制
* 函式
* 物件
* 陣列
* 迴圈

### 透過 JavaScript 操作網頁
* 操作網頁上的元素
* 與使用者互動

## 我們的第一段程式碼
1. 用 Chrome 打開一個[空白分頁](about:blank)。打不開的話請在網址輸入 `about:blank` 後按 `Enter`
2. 打開「開發人員工具」，快捷鍵是 `option-command-i`。打不開的話請改用以下步驟：
a. 點選視窗右上角的圖示
b. 滑鼠游標移到「更多工具」
c. 點選「開發人員工具」
3. 確認自己是在「Console」頁籤
4. 輸入以下內容後按 `Enter`

  alert('Hello World');

## 變數
寫程式時，通常做的事不外乎：
* 顯示資料
* 檢查、更動、轉換資料的形狀
* 把資料存起來

> 例子：上週註冊 Netlify 帳號的過程

### 分組討論
日常生活中其實有很多機會碰到上面這些情況。請回想一下，平常瀏覽網頁或使用手機 app 的時候，有哪些情境可能包含上面提到的任一種情形？

### 字串與變數

let name = 'Arthur Lu';

alert(name);

> 提醒：程式的 `=` 跟數學的 `=` 意義不同


#### 註解

// 這是單行註解

/* 這是
超級無敵
多行
的
註解
*/

#### 宣告變數時的注意事項

// 變數只能是連在一起的字
let my name = 'Arthur Lu'; // ❌
let myName = 'Arthur Lu' // ✅

// 用 let 宣告變數後，不能再宣告同名的變數
let myName = 'Someone Else'; // ❌
myName = 'John Doe'; // ✅

// 變數不能以數字開頭
let 2hundred = 200; // ❌
let twoHundred = 200; // ✅

// 變數不能包含特殊符號（例外：$、_）
let myVariable@ = 'hello@'; // ❌
let myVariable~ = 'hello~'; // ❌
let myVariable! = 'hello!'; // ❌
let myVariable_ = 'hello_'; // ✅
let myVariable$ = 'hello$'; // ✅

// 有些字是 JavaScript 的保留字，不能拿來當變數名稱
let class = '網頁設計課'; // ❌
let course = '網頁設計課'; // ✅
let currentClass = '網頁設計課'; // ✅

#### 組合變數

// 名字
let firstName = 'Arthur';
alert(firstName);

// 姓氏
let lastName = 'Lu';
alert(lastName);

// 把名字和姓氏組合成一個新的變數
let fullName = firstName + lastName;
alert(fullName);

#### 練習：組合變數
> 用剛剛學到的方法，宣告一個以上變數，組成「我叫ＯＯＯ，每週要修ＸＸ堂課」這種句子，並用跳窗顯示組合出來的句子到螢幕上。

#### 除錯神器：`console.log`

// 跳出訊息並中斷程式執行
alert('Hello World');

// 在主控台（console）顯示訊息，不會中斷程式執行
console.log('Hello World');

### 數字

// 加法
let myAge = 27;
let cousinAge = 27 + 3;
console.log(cousinAge);

// 減法
let money = 100;
let breakfastPrice = 70;
let moneyAfterBreakfast = money - breakfastPrice;
console.log(moneyAfterBreakfast)

// 乘法
let humanAge = 22;
let dogAge = 22 * 7;
console.log(dogAge);

// 除法
let totalScore = 56 + 77 + 83;
let averageScore = totalScore / 3;
console.log(averageScore);

#### 練習：華氏溫度 (°F) 轉攝氏溫度 (°C)
> 請將華氏溫度 140 °F 換算成攝氏溫度，並用 `console.log()` 顯示出來。
> 公式：攝氏溫度 = (華氏溫度 - 32) * 5 / 9

## 課程回顧
* JavaScript 是一種程式語言，搭配 HTML 跟 CSS，JavaScript 能增添網頁的互動性
* Chrome「開發人員工具」的「Console」頁籤可以讓開發者輸入程式碼
* 用 JavaScript 宣告變數、賦值、組合變數、寫註解
* 用 JavaScript 不同的資料型態：字串（String）、數字（Number）

## 用開發人員工具修改網頁上的文字
1. 打開開發人員工具後，按頁籤最左邊的  圖示
2. 點選畫面任一個文字

$0.textContent = '想換什麼字就換什麼';

## 延伸閱讀
有興趣可以看：
* [HTML, CSS, JavaScript Explained](https://www.youtube.com/watch?v=gT0Lh1eYk78) @ YouTube
* [How websites work](https://www.youtube.com/watch?v=2rsI05vBsD4) @ YouTube

## 課外知識
真的很閒沒事做再看：
* [JavaScript 的保留字](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Lexical_grammar) @ MDN
* [Hello World 的由來](https://zh.wikipedia.org/wiki/Hello_World) @ Wikipedia
* [駝峰式大小寫](https://zh.wikipedia.org/wiki/駝峰式大小寫) @ Wikipedia

---

<div style="display: flex; justify-content: flex-end;">
<a href="https://hackmd.io/@gsscsid/javascript-basics-2">JavaScript 基礎入門課程 (2)&nbsp;➡️</a>
</div>