Merge pull request #390 from ChungZH/patch-2

[zh-cn] 3/3/assignment.zh-cn.md
pull/398/head
Jen Looper 3 years ago committed by GitHub
commit 9c6ff0acd4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -75,7 +75,7 @@ HTML 文件中 'head' 的區域包含很多網頁的重要資訊,也被稱作[
</head>
```
✅ 你認為設定下列視窗元資訊 `<meta name="viewport" content="width=600">` 會發生什麼事? 請閱讀更多有關於[Viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag)的資訊。
✅ 你認為設定下列視窗元資訊 `<meta name="viewport" content="width=600">` 會發生什麼事? 請閱讀更多有關於 [Viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag) 的資訊。
---

@ -11,7 +11,7 @@
階層式樣式表CSS (Cascading Style Sheets)解決了網頁開發重要的問題:如何讓網頁變得漂亮。為你的應用造型化可以讓網頁更好用、更好看。你也可以使用 CSS 建立回應式網頁設計(Responsive Web Design - RWD),依據你的視窗大小改變網頁的呈現方式。 CSS 不只讓網頁變美麗它允許加入動畫以呈現更生動的互動體驗。CSS 工作組持續維護 CSS 的規格書,你可以在[全球資訊網協會官網](https://www.w3.org/Style/CSS/members)追蹤他們的作業。
> 筆記CSS 是一種程式語言,但就像任何在網路上的東西一樣,並不是所有瀏覽器都支援最新的規格。請時常利用[CanIUse.com](https://caniuse.com)檢查你的設計是否支援相關瀏覽器。
> 筆記CSS 是一種程式語言,但就像任何在網路上的東西一樣,並不是所有瀏覽器都支援最新的規格。請時常利用 [CanIUse.com](https://caniuse.com) 檢查你的設計是否支援相關瀏覽器。
這堂課中,我們會為我們的線上盆栽盒增加造型,學習更多 CSS 的概念:串接(Cascade)、繼承(Inheritance)、選擇器(Selectors)、定位(Positioning)與建立布局(Layout)。我們會規劃盆栽盒的布局,建立實際的盆栽盒。
@ -256,7 +256,7 @@ h1 {
## 複習與自學
CSS 看似很好上手但要在所有瀏覽器與螢幕大小上運作正常也會面臨到許多挑戰。CSS-Grid 與 Flexbox 這兩種工具讓上述作業變得比較好規劃與調整。藉由遊玩[Flexbox Froggy](https://flexboxfroggy.com/)與[Grid Garden](https://codepip.com/games/grid-garden/)來學習它們。
CSS 看似很好上手但要在所有瀏覽器與螢幕大小上運作正常也會面臨到許多挑戰。CSS-Grid 與 Flexbox 這兩種工具讓上述作業變得比較好規劃與調整。藉由遊玩 [Flexbox Froggy](https://flexboxfroggy.com/) [Grid Garden](https://codepip.com/games/grid-garden/) 來學習它們。
## 作業

@ -9,7 +9,7 @@
### 大綱
操作 DOM (Document Object Model) 是網頁開發的一項關鍵。根據[MDN 文件](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) 「Document Object Model (DOM) 元素能根據網頁文件的結構與內容來呈現物件」。藉由使用 JavaScript 框架而非原始的 JavaScript 程式碼來管理 DOM在網頁上操作 DOM 的挑戰已經不比以前困難了,但這裡我們要自己來管理它們!
操作 DOM (Document Object Model) 是網頁開發的一項關鍵。根據 [MDN 文件](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) 「Document Object Model (DOM) 元素能根據網頁文件的結構與內容來呈現物件」。藉由使用 JavaScript 框架而非原始的 JavaScript 程式碼來管理 DOM在網頁上操作 DOM 的挑戰已經不比以前困難了,但這裡我們要自己來管理它們!
此外,這堂課也會介紹有關[JavaScript 閉包(Closure)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)的概念,你可以想像成一個函式被包在另一個函式中,以訪問外面函式範圍中的變數。
@ -209,9 +209,9 @@ function stopElementDrag() {
在螢幕上拖曳物件看似簡單,但依照不同的目的與實現方法會遭遇到不同的問題。事實上,這邊有一份關於你可以嘗試的[拖曳 API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)。我們沒在專案中使用是為了建立不一樣的實現方法,試著使用這些 API 到專案中,看看你能完成什麼。
在[W3C 文件](https://www.w3.org/TR/pointerevents1/) 和 [MDN 網頁文件](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)上取得更多關於 pointer 的事件。
[W3C 文件](https://www.w3.org/TR/pointerevents1/) 和 [MDN 網頁文件](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)上取得更多關於 pointer 的事件。
記得習慣性用[CanIUse.com](https://caniuse.com/)檢查網頁的瀏覽器兼容性。
記得習慣性用 [CanIUse.com](https://caniuse.com/) 檢查網頁的瀏覽器兼容性。
## 作業

@ -0,0 +1,11 @@
# 用 DOM 干更多事
## 说明
选取一个 DOM 元素,并通过它对 DOM 进行更深入的研究。访问 MDN 的 [DOM 接口的清单](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) 并挑选一个。在网络上寻找一个使用了这个元素的网页,并解释如何使用它。
## 评价表
| 指标 | 优秀 | 良好 | 尚可进步 |
| --- | ---- | ---- | ------- |
| | 写了一段话,并且附带例子 | 写了一段话,没有附带例子 | 没有记录 |

@ -1,11 +1,11 @@
# 用 DOM 做更多事
## 簡介
調查其中一項 DOM 的元素。造訪 MDN 關於[DOM 介面的清單](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)挑選其中一項。在網路上找尋一個使用這項元素的網頁,並解釋如何使用它。
## 學習評量
| 作業內容 | 優良 | 普通 | 待改進 |
| -------- | ---------------------- | ---------------- | ---------------- |
| | 完整的評論文章附帶例子 | 評論文章不帶例子 | 評論文章並不完整 |
# 用 DOM 做更多事
## 簡介
調查其中一項 DOM 的元素。造訪 MDN 關於 [DOM 介面的清單](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)挑選其中一項。在網路上找尋一個使用這項元素的網頁,並解釋如何使用它。
## 學習評量
| 作業內容 | 優良 | 普通 | 待改進 |
| -------- | ---------------------- | ---------------- | ---------------- |
| | 完整的評論文章附帶例子 | 評論文章不帶例子 | 評論文章並不完整 |

@ -1,6 +1,6 @@
# 构建一款太空游戏
一个空游戏来教授更高级的 JavaScript 基础知识
一个空游戏来教授更高级的 JavaScript 基础知识
在本课中,你将学习如何建立你自己的太空游戏。如果你曾经玩过 "太空侵略者 "这个游戏,这个游戏的想法是一样的:驾驶飞船,向从上面下来的怪物开火。下面是完成后的游戏的样子。
@ -28,4 +28,4 @@
## 贡献者
游戏资源来自于 https://www.kenney.nl/。
如果你喜欢建造游戏,这里有一些好东西,很多是免费的,也有些是付费的。
如果你喜欢制作游戏,这里有一些好东西,很多是免费的,也有些是付费的。

Loading…
Cancel
Save