###### tags: `學期 2-1`

# 學期 2-1：Week 3 學習目標
[toc]

## 尚未完成 A5

<div style="width:100%;text-align: center;">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/15090/F-1_Weekly_schedule.001.jpeg" target="_blank">
<img style="width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/15090/F-1_Weekly_schedule.001.jpeg">
</a>
<span style="font-size:0.85rem; font-weight: 300; color:#9B9B9B;">
點擊圖片可檢視大圖</span>
</div>

#### 務必先完成 S1 JavaScript，再往下學習！

<!-- 給尚未完成 JS -->
學期二整體課程以 JavaScript 為重心，擁有 JavaScript 基礎也是進入本週 S3 DOM 元素章節的必要門檻。

注意到 {{user_nickname}} 尚未完成 <a href="https://lighthouse.alphacamp.co/courses/40/assignments/940" target="_blank">A5:週年慶摸彩活動：完整執行</a>，請務必先完成此份作業，再進入 DOM 章節。

課程單元下方的 Q&A 是沒有進度限制的，因此如果在學習的過程中遇到挑戰，千萬不用害羞，就大方的向助教求助吧！

另外，如果在完成 S1 作業後，希望請助教批改遲交作業，幫助自己確認技術能力的建立，可以透過 [提交遲交作業批改申請](https://lighthouse.alphacamp.co/courses/38/units/7520) 來獲得助教回饋哦！

#### 完成 S1 後，啟動 S3 DOM 操作與事件跟上本週學習進度

本週的進度範圍是 S3 DOM 操作與事件。能夠學會 DOM 操作，即是立下完整前端能力的第一個里程碑，也是整個網頁開發課程承上啟下的重點概念。

你將學習如何用 JavaScript 操作 DOM 元素，用程式語言把邏輯加到靜態網頁裡，讓網頁能根據不同的事件來發生變化，讓你的網頁 動 起 來 ！<img style="height:16px;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10510/blob-sunglasses.gif"><img style="height:16px;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10510/blob-sunglasses.gif"><img style="height:16px;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10510/blob-sunglasses.gif">

你的本週目標是：

- 完成 [A19: 彩子的計分版：動態資料](https://lighthouse.alphacamp.co/courses/40/assignments/953) 建立 <u>能夠處理資料並動態渲染在網頁中</u> 的能力
- 完成「事件驅動程式設計」段落，了解 event listener 的概念及寫法，初次結合 DOM 修改網頁文字、物件

<div id="coach-container">
<div id="coach-icon-box">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10438/______512.001.png" style="width:100%;">
</div>

<div id="coach-content-box">
<h5 style="color: #002380 ;margin-block-start:0em; margin-block-end: 0em; margin-top: 0; font-size:18px;">
學習教練提醒
</h5>
<p>
由於 DOM 的技術在近幾年有不同的改版，習慣運用查找大量資源來學習的同學，可能會遇到許多細節讓你分心(例如：新舊語法的不同之處)。<b>因此請同學在學習 DOM 這個章節時，務必將<u>焦點放在課程中的實作</u></b>，避免你掉進細節海裡。
</p>
<p>另外，在實作 DOM 操作時，時常需要查找語法、console.log 除錯⋯⋯等，同學們可參考【<a href="https://lighthouse.alphacamp.co/courses/40/units/7854" target="_blank">學長姊跟你說：常常在作業卡關怎麼辦？</a>】中，Yating 學姊的心法分享，幫助自己破關！</p>
</div>
</div>

#### 本週活動 -- Week 3 DOM 基本元素上手工作坊資訊

這個禮拜，我們將跟著助教實際體驗用 DOM 操作改變網頁呈現的感覺！
想跟著助教一起動手挑戰井字遊戲的同學，務必準時上線參與哦！

<div style="background: #ececec; padding: 15px; border-radius: 10px ; font-weight: bold;">
工作坊時間：1/27 (三) 19:30 - 21:00<br>
行前準備請看：<a href="https://lighthouse.alphacamp.co/courses/40/units/8438" target="_blank">Week 3 DOM 基本元素元素工作坊 -- 活動頁</a><br>
</div>

<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div>

---

## 已完成 A5，尚未完成 A8

<div style="width:100%;text-align: center;">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/15090/F-1_Weekly_schedule.001.jpeg" target="_blank">
<img style="width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/15090/F-1_Weekly_schedule.001.jpeg">
</a>
<span style="font-size:0.85rem; font-weight: 300; color:#9B9B9B;">
點擊圖片可檢視大圖</span>
</div>

#### 請 {{user_nickname}} 先完成 Bootstrap 基礎理解，再往下學習！

在開啟本週 S3 DOM 事件與操作之前，請 {{user_nickname}} 先跟著 [U33:超直覺的前端框架 Bootstrap](https://lighthouse.alphacamp.co/courses/40/units/5663) & [U34:應用 Bootstrap Components & Utilities](https://lighthouse.alphacamp.co/courses/40/units/7540) 快速上手 Bootstrap 這個好用的前端工具，幫助我們在後續寫作業時，能夠不用花太多時間在微調版面上。

在完成章節與 <a href="https://lighthouse.alphacamp.co/courses/40/assignments/1132" target="_blank">A8: 組裝我的社群主頁</a> 作業後，就可以直接進入 DOM 章節。

S2 後半段的 RWD 概念並非未來章節學習的必要條件，跳過並不影響後續學習，請 {{user_nickname}} 以跟上課程 Week 3 進度為主進行學習。

#### 啟動 S3 DOM 操作與事件跟上本週學習進度

本週的進度範圍是 S3 DOM 操作與事件。能夠學會 DOM 操作，即是立下完整前端能力的第一個里程碑，也是整個網頁開發課程承上啟下的重點概念。

你將學習如何用 JavaScript 操作 DOM 元素，用程式語言把邏輯加到靜態網頁裡，讓網頁能根據不同的事件來發生變化，讓你的網頁 動 起 來 ！<img style="height:16px;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10510/blob-sunglasses.gif"><img style="height:16px;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10510/blob-sunglasses.gif"><img style="height:16px;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10510/blob-sunglasses.gif">

你的本週目標是：

- 完成 [A19: 彩子的計分版：動態資料](https://lighthouse.alphacamp.co/courses/40/assignments/953) 建立 <u>能夠處理資料並動態渲染在網頁中</u> 的能力
- 完成「事件驅動程式設計」段落，了解 event listener 的概念及寫法，初次結合 DOM 修改網頁文字、物件

<div id="coach-container">
<div id="coach-icon-box">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10438/______512.001.png" style="width:100%;">
</div>

<div id="coach-content-box">
<h5 style="color: #002380 ;margin-block-start:0em; margin-block-end: 0em; margin-top: 0; font-size:18px;">
學習教練提醒
</h5>
<p>
由於 DOM 的技術在近幾年有不同的改版，習慣運用查找大量資源來學習的同學，可能會遇到許多細節讓你分心(例如：新舊語法的不同之處)。<b>因此請同學在學習 DOM 這個章節時，務必將<u>焦點放在課程中的實作</u></b>，避免你掉進細節海裡。
</p>
<p>另外，在實作 DOM 操作時，時常需要查找語法、console.log 除錯⋯⋯等，同學們可參考【<a href="https://lighthouse.alphacamp.co/courses/40/units/7854" target="_blank">學長姊跟你說：常常在作業卡關怎麼辦？</a>】中，Yating 學姊的心法分享，幫助自己破關！</p>
</div>
</div>

#### 本週活動 -- Week 3 DOM 基本元素上手工作坊資訊

這個禮拜，我們將跟著助教實際體驗用 DOM 操作改變網頁呈現的感覺！
想跟著助教一起動手挑戰井字遊戲的同學，務必準時上線參與哦！

<div style="background: #ececec; padding: 15px; border-radius: 10px ; font-weight: bold;">
工作坊時間：1/27 (三) 19:30 - 21:00<br>
行前準備請看：<a href="https://lighthouse.alphacamp.co/courses/40/units/8438" target="_blank">Week 3 DOM 基本元素元素工作坊 -- 活動頁</a><br>
</div>

<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div>

---

## 已完成 A8 但 S2 完成不到 5 份

<div style="width:100%;text-align: center;">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/15090/F-1_Weekly_schedule.001.jpeg" target="_blank">
<img style="width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/15090/F-1_Weekly_schedule.001.jpeg">
</a>
<span style="font-size:0.85rem; font-weight: 300; color:#9B9B9B;">
點擊圖片可檢視大圖</span>
</div>

#### 還在學習前面的章節，怎麼辦？

<!-- 給 still in Boostrap -->
注意到 {{user_nickname}} 尚在學習 S2 Bootstrap & RWD，因此建議你，只要完成 <a href="https://lighthouse.alphacamp.co/courses/40/assignments/1132" target="_blank">A8: 組裝我的社群主頁</a> 後，就可以直接進入 DOM 章節。

後半段的 RWD 概念並非未來章節學習的必要條件，跳過並不影響後續學習。同學可以視個人時間安排學習時間，建議 {{user_nickname}} 先以跟上課程主進度為主。

#### 本週學習重點

本週的範圍是 S3 DOM 操作與事件。能夠學會 DOM 操作，即是立下完整前端能力的第一個里程碑，也是整個網頁開發課程承上啟下的重點概念。

你將學習如何用 JavaScript 操作 DOM 元素，用程式語言把邏輯加到靜態網頁裡，讓網頁能根據不同的事件來發生變化，讓你的網頁 動 起 來 ！<img style="height:16px;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10510/blob-sunglasses.gif"><img style="height:16px;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10510/blob-sunglasses.gif"><img style="height:16px;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10510/blob-sunglasses.gif">

你的本週目標是：

- 完成 [A19: 彩子的計分版：動態資料](https://lighthouse.alphacamp.co/courses/40/assignments/953) 建立 <u>能夠處理資料並動態渲染在網頁中</u> 的能力
- 完成「事件驅動程式設計」段落，了解 event listener 的概念及寫法，初次結合 DOM 修改網頁文字、物件

本週的表定安排的作業份量較前幾週少 (僅 5 份作業)，目的是希望同學能運用動態調整學習進度與目標，更有效地跟著課程學習。

因此如果你在週間已經 S3 DOM 操作與事件，請 <u>務必[申請提前進度](https://lighthouse.alphacamp.co/courses/38/units/7521)</u>，提前開始練習下週的實作，加強手感，提升學習效率。

<div id="coach-container">
<div id="coach-icon-box">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10438/______512.001.png" style="width:100%;">
</div>

<div id="coach-content-box">
<h5 style="color: #002380 ;margin-block-start:0em; margin-block-end: 0em; margin-top: 0; font-size:18px;">
學習教練提醒
</h5>
<p>
由於 DOM 的技術在近幾年有不同的改版，習慣運用查找大量資源來學習的同學，可能會遇到許多細節讓你分心(例如：新舊語法的不同之處)。<b>因此請同學在學習 DOM 這個章節時，務必將<u>焦點放在課程中的實作</u></b>，避免你掉進細節海裡。
</p>
<p>另外，在實作 DOM 操作時，時常需要查找語法、console.log 除錯⋯⋯等，同學們可參考【<a href="https://lighthouse.alphacamp.co/courses/40/units/7854" target="_blank">學長姊跟你說：常常在作業卡關怎麼辦？</a>】中，Yating 學姊的心法分享，幫助自己破關！</p>
</div>
</div>

#### 本週活動 -- Week 3 DOM 基本元素上手工作坊資訊

這個禮拜，我們將跟著助教實際體驗用 DOM 操作改變網頁呈現的感覺！
想跟著助教一起動手挑戰井字遊戲的同學，務必準時上線參與哦！

<div style="background: #ececec; padding: 15px; border-radius: 10px ; font-weight: bold;">
工作坊時間：1/27 (三) 19:30 - 21:00<br>
行前準備請看：<a href="https://lighthouse.alphacamp.co/courses/40/units/8438" target="_blank">Week 3 DOM 基本元素元素工作坊 -- 活動頁</a><br>
</div>

<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div>

## 已完成 S2 5 份以上作業

## 學期 2-1：Week 3 學習目標

<div style="width:100%;text-align: center;">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/15090/F-1_Weekly_schedule.001.jpeg" target="_blank">
<img style="width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/15090/F-1_Weekly_schedule.001.jpeg">
</a>
<span style="font-size:0.85rem; font-weight: 300; color:#9B9B9B;">
點擊圖片可檢視大圖</span>
</div>

#### 本週學習重點

本週的範圍是 S3 DOM 操作與事件。能夠學會 DOM 操作，即是立下完整前端能力的第一個里程碑，也是整個網頁開發課程承上啟下的重點概念。

你將學習如何用 JavaScript 操作 DOM 元素，用程式語言把邏輯加到靜態網頁裡，讓網頁能根據不同的事件來發生變化，讓你的網頁 動 起 來 ！<img style="height:16px;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10510/blob-sunglasses.gif"><img style="height:16px;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10510/blob-sunglasses.gif"><img style="height:16px;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10510/blob-sunglasses.gif">

你的本週目標是：

- 完成 [A20: 彩子的計分版：動態資料](https://lighthouse.alphacamp.co/courses/40/assignments/953) 建立 <u>能夠處理資料並動態渲染在網頁中</u> 的能力
- 完成「事件驅動程式設計」段落，了解 event listener 的概念及寫法，初次結合 DOM 修改網頁文字、物件

本週的表定安排的作業份量較前幾週少 (僅 5 份作業)，目的是希望同學能運用動態調整學習進度與目標，更有效地跟著課程學習。

因此如果你在週間已經 S3 DOM 操作與事件，請 <u>務必[申請提前進度](https://lighthouse.alphacamp.co/courses/38/units/7521)</u>，提前開始練習下週的實作，加強手感，提升學習效率。

<div id="coach-container">
<div id="coach-icon-box">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10438/______512.001.png" style="width:100%;">
</div>

<div id="coach-content-box">
<h5 style="color: #002380 ;margin-block-start:0em; margin-block-end: 0em; margin-top: 0; font-size:18px;">
學習教練提醒
</h5>
<p>
由於 DOM 的技術在近幾年有不同的改版，習慣運用查找大量資源來學習的同學，可能會遇到許多細節讓你分心(例如：新舊語法的不同之處)。<b>因此請同學在學習 DOM 這個章節時，務必將<u>焦點放在課程中的實作</u></b>，避免你掉進細節海裡。
</p>
<p>另外，在實作 DOM 操作時，時常需要查找語法、console.log 除錯⋯⋯等，同學們可參考【<a href="https://lighthouse.alphacamp.co/courses/40/units/7854" target="_blank">學長姊跟你說：常常在作業卡關怎麼辦？</a>】中，Yating 學姊的心法分享，幫助自己破關！</p>
</div>
</div>

#### 本週活動 -- Week 3 DOM 基本元素上手工作坊資訊

這個禮拜，我們將跟著助教實際體驗用 DOM 操作改變網頁呈現的感覺！
想跟著助教一起動手挑戰井字遊戲的同學，務必準時上線參與哦！

<div style="background: #ececec; padding: 15px; border-radius: 10px ; font-weight: bold;">
工作坊時間：1/27 (三) 19:30 - 21:00<br>
行前準備請看：<a href="https://lighthouse.alphacamp.co/courses/40/units/8438" target="_blank">Week 3 DOM 基本元素元素工作坊 -- 活動頁</a><br>
</div>

<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div>

<style>
div#coach-container {
color: #002380;
padding: 15px;
margin-bottom: 20px;
border: 1px solid #002380;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
}

div#coach-icon-box {
max-width: 15%;
margin-right:2%;
}

div#coach-content-box {
max-width: 82%;
}

@media screen and (max-width: 400px){
div#coach-container {
flex-direction: column;
}

div#coach-icon-box {
max-width: 25%;
}

div#coach-content-box {
max-width: 100%;
}
}
</style>