Ric's Web Programming Class 2019 Spring
Lecture Notes
-
Class Introduction [slides]
-
Introduction to Web Programming[slides]
-
Introduction to HTML and CSS[slides]
HTML + CSS practice
-
Please download
this
.txt file and make it a HTML file
-
A sample HTML output looks like
this
-
Make the HTML file with CSS style files (styles.css)
- A sample HTML with CSS output looks like...
Practice Homework -- Practice01
-
Create a directory Practice01 under
WebProg2019
-
Create own and review directories under
Practice01
-
In own, finish the in-class example and name the
files as index.html and styles.css
-
Remember to push to your github repo before deadline
-
Practice submission deadline:
9pm, Sunday, 02/24
- Review deadline: 9pm, Tuesday, 02/26
-
HTML/CSS 作業沒有明確的規格，簡單的說：HTML
寫得盡量跟上面的圖長得一樣，CSS
則自由發揮，盡量美化網頁就好！
- 不要使用現成的套件，或是像 JavaScript 等其他語言
Lecture Notes
-
Administrative Information [slides]
-
Recap from last week (HTML/CSS) [slides]
-
Introduction to JavaScript [slides]
JavaScript practice
Practice Homework -- Practice02
-
作業內容：完成並且改進 Image Viewer
- (Baseline) 至少完成可左右觀看不同圖片
- (Optional) Preview Window
- (Optional) 觀看影片
- (Optional) 其他 fancy 功能
-
作業注意事項：
-
Create a directory Practice02 under
WebProg2019
-
Create own and review directories
under
Practice02
-
In own, finish the in-class example and
name the files as index.html,
main.js and styles.css
-
Remember to push to your github repo before
deadline
-
Practice submission deadline:
9pm, Sunday, 03/03
-
Review deadline: 9pm, Tuesday, 03/05
-
這次作業的重點是 JavaScript，所以如果為了美觀，
可以使用別人的 CSS 檔案或者是套件，
不過，請自己刻 JavaScript 的 code， 不要使用任何
JavaScript 的框架、library 等， 但歡迎使用 ES6
或者是以後的 features。
After-Class Readings
-
找一本書、一個 online tutorial、甚至是影片，好好的把
JavaScript 學過一遍 --> Anything will do!!
-
More JavaScript Practice: Bouncing Ball
[mdn link]
Lecture Notes
-
Administrative Information [slides]
-
More on JavaScript [slides]
JavaScript practice
-
Reference/Starter code for TODO list, download from
here
Homework01 -- TODO List in pure JS
-
Preview:
demo
-
說明 [slides]
-
作業注意事項：
-
Create a directory "Homework01" under
"WebProg2019"
-
In "Homework01", finish the in-class
example and name the files as
"index.html", "main.js" and
"styles.css"
-
Also in "Homework01", create an
"README.md"
to describe the functionalities of your TODO
list
-
Add more files or directories as you wish, if
necessary
-
基本要求：
- 可建立數個 TodoItems
- 可新增刪除任意 TodoItem
- 可勾選已完成的 TodoItem
-
在畫面上顯示已完成的 TodoItems 的不同
- 統計並顯示未完成的 TodoItem 數量
-
其他進階功能，如：filter
已完成/未完成項目，一鍵刪除所有已完成項目，更多
TodoItems 的 properties (如：完成日期，負責人...
等)，建立 TodoItems 的群組... 等，歡迎自行發揮
-
Remember to push to your github repo before
deadline
-
Homework submission deadline:
9pm, Tuesday, 03/12
遲交一天內：扣 1/3 的成績
遲交兩天內：扣 2/3 的成績
遲交兩天以上：零分計算
-
這次作業的 CSS 檔案已包含所有基本要求所需的
styles,
請看懂它並且盡量使用，以求整體使用體驗的一致性，以利助教的批改。當然，如果你想要增加一些特別的效果，也歡迎自行增加一些
rules, 但請不要把 CSS 整個砍掉重練。
此外，這次作業的重點是 JavaScript
的實作，請自己刻 JavaScript 的 code，
不要使用任何 JavaScript 的框架 (e.g.
React.js)、library 等， 但歡迎使用 ES6
或者是以後的 features。
After-Class Readings
-
p5.js --
home ,
examples
,
reference
-
找一本書、一個 online tutorial、甚至是影片，好好的把
JavaScript 學過一遍 --> Anything will do!!
Lecture Notes
-
Administrative Information [slides]
-
More on JavaScript [slides]
JavaScript practice
Homework02 -- Flappy Bird in
p5.js
-
Preview:
demo
-
說明 [slides]
-
Flappy Bird boilerplate reference [download]
-
作業注意事項：
-
Create a directory "Homework02" under
"WebProg2019"
-
In "Homework02", finish the homework and
name the files as "index.html",
"sketch.js" and
"styles.css"
-
Also in "Homework02", create an
"README.md"
to describe the any special gamew features you
implement. If you don't have it, just write down
"No special features"
-
Add more files or directories as you wish, if
necessary
-
基本要求：
- 鳥可以受「空白鍵」控制來飛
- 可以隨著動作發出聲音
- 鳥的顏色、背景隨機出現
-
其他建議完成功能：
-
有柱子作為障礙物，請可以判斷鳥是否有撞到柱子、天空、地板
- 可計分、顯示「Game Over」、重玩
- 歡迎自行增加其他更有趣的功能
-
Remember to push to your github repo before
deadline
-
Homework submission deadline:
9pm, Tuesday, 03/19
遲交一天內：扣 1/3 的成績
遲交兩天內：扣 2/3 的成績
遲交兩天以上：零分計算
-
這次作業的 CSS
檔案、圖檔、聲音檔已包含所有基本要求所需的
styles,
請看懂它並且盡量使用，以求整體使用體驗的一致性，以利助教的批改。當然，如果你想要增加一些特別的效果，也歡迎自行增加一些
rules or 影音檔, 但請不要把 CSS 整個砍掉重練。
此外，這次作業的重點是 p5.js
的實作，請自己刻 p5.js 的 code， 不要使用其他
JavaScript 的框架 (e.g. React.js)、library 等，
但歡迎使用 ES6 或者是以後的 features。
After-Class Readings
Lecture Notes
-
Administrative Information [slides]
-
JavaScript Classes + Introduction to React.js [slides]
In-class practices
-
JavaScript class practice [ref source]
- React "Hello, World!" (No ref provided. DIY)
- React "Score Card" (No ref provided. DIY)
Practice03 -- A Static Blog Page in React.js
-
沒有規定的外觀樣式，可以從網路上選以一個你喜歡樣本，以它為模型，用
React.js 刻一個靜態(i.e. 沒有互動功能)的網頁
-
You don't need to implement "edit", "post",
"add/delete", "search", or any kind of interactions.
-
Just a static page that is composed of title, menu,
sections, articles or photos, etc.
-
MUST use **React** to make it component-based so that
you can add more interactions later!
-
作業注意事項：
-
Create a directory "Practice03" under
"WebProg2019"
-
Create own and review directories
under
Practice03
-
The file names under "Practice03" can be
arbitrary. However, you must use
"create-react-app" to create this project. Make
sure TA can run your app with "npm start"
script.
-
Add more files or directories as you wish, if
necessary
-
Remember to push to your github repo before
deadline
-
Practice submission deadline:
9pm, Sunday, 03/24
-
Review deadline: 9pm, Tuesday, 03/26
-
這次作業的重點是練習且學會寫基本的 (stateless)
React.js. 關於外觀，歡迎使用你選用的樣版的 CSS
file, 當然，你想要自己刻也是可以啦！
After-Class Readings --- React Tutorials
-
From official reactjs.org website:
-
React Fundamentals: 不錯且都很短的教學影片
Lecture Notes
-
Administrative Information [slides]
-
More on React.js [slides]
Pracrice04 -- TODO List in React.js
-
Directory structures (also for Practice05)
-
先在 WebProg2019 底下開個
Practice04 and
Practice05 目錄，然後再各自底下用
create-react-app 產生 “own” project
目錄
- 手動產生一個空目錄 review
-
HTML 的 entry 在 public/index.html,
然後 JaveScript 的在
src/index.js。把主要邏輯操作的
components 放在
src/containers
目錄，然後把一些沒有什麼邏輯，主要只是 render
畫面的 components 放在
src/components 目錄下面。
-
Make sure 在 own 底下執行
npm start 可以開啟你的
project，並且記得把 node_modules 加到
.gitignore, 不要上傳到 github.
- 就是把你 Homework01 的 TODO list 用 React 重寫一遍!
-
練習重點：
-
跟著 ""Thinking in React" 思考一遍，create 適當的 classes。
- What are the states?
- How do you add inverse data flow?
-
Practice submission deadline:
9pm, Sunday, 03/31
- Review deadline: 9pm, Tuesday, 04/02
Pracrice05 -- Calculator in React.js
-
請下載 starter's src from [here]
-
Copy to your Practice05/own, decompress it to
replace the original src
-
Implement under src/{containers,components}.
-
npm start to run, and npm test for
auto testing
-
利用提供的 CSS 做出來的 Calculator 長這樣：[here]
-
請注意 '0' 那格是兩倍大，請選用適當的 class 以利 npm
test
-
功能要求說明
-
進階功能(可以不用做) —
正負號(+/-)、百分比(%)、小數點(.)
這三個按鍵只需要有 UI，不需要功能
-
重置計算機 — AC (all clear)
按鍵，需要可以把計算狀態 (state) 全清空
-
數字按鍵 —
會跟一般計算機一樣按了會累積之後要當運算元的數字。例如依序按下
6, 1, 9, 8，會產生 6198 來當作運算元
-
因為不實作小數當作運算元，所以第一個數字按零可以忽略
-
運算子按鍵 (+, -, x, ÷, =) --- 如果前面已經有
pending 的運算則先把前面的運算求值：按下 3, +,
6：這時候畫面還是 6，但再按(+, -, x, ÷,
=)任何一個就會更新運算結果；如果前面也是運算子，新的運算子會把舊的換掉；按下
3, +, -, 1, =：這時候結果為 2，+ 會被 -
換掉；如果前面是運算元，則先 pending 存至 state
-
Practice submission deadline:
9pm, Sunday, 04/07
- Review deadline: 9pm, Tuesday, 04/09
After-Class Readings --- React Tutorials
Lecture Notes
-
Administrative Information [slides]
-
Advanced Topics on React.js + React Router [slides]
Pracrice06 -- Serverless Blog Page with React Router
-
Directory structures -- Please refer to Pracrice04
-
就是把你 Practce03 的 Static Blog Page 加上 React
Router!
-
練習重點：從 View -> modules -> pages -> routing -> data
-
Practice submission deadline:
9pm, Sunday, 04/14
- Review deadline: 9pm, Tuesday, 04/16
After-Class Readings
Lecture Notes
-
Administrative Information [slides]
-
Introduction to Node.js/Express/HTTP/Middleware [slides]
After-Class Readings: Read these before the next meeting!
Lecture Notes
Midterm Individual Project
- 題目自訂，一個人一組，佔學期總分 20%
-
Requirements
- Client-side programs in React.js
- Server-side programs in Node.js
-
Recommended
- Database to store persistent data
-
Use "Promise" or "Async/Await" to ensure
asynchronous non-blocking communications
- Deadline: 9pm, Tuesday, 05/21
Lecture Notes
-
Promise/fetch/Async-Await [slides]
Midterm Individual Project
Lecture Notes
-
More on Backend Utilities --- npm, bcrypt, Babel,
RESTful, and Node.js/Express.js Again! [slides]
Lecture Notes
Homework03 -- GraphQL Practice
-
Basic Requirements
-
On the left side of “Post!”, add a “pull-down”
menu on top of “Title”, from which you can
select author’s name to make a new post. The
list of authors, of course, should be loaded
from “db.js”
-
Change the view of the right side to list of
authors with number of posted comments. Whenever
a new comment is posted, the number followed by
the corresponding author should be incremented
automatically.
-
The posts of each author should be by default
folded. When you click on an author, its
comments will be expanded. Click again and the
it will be closed.
-
Advanced Requirements
-
Linked to a real DB (Mongo, MySQL, or anything)
-
Implement a “like” system. You can make it
anonymous (like Medium) or named (like FB)
- Add “authentication”
- Improve UI/outlook
-
作業注意事項：
- Deadline: 9pm, Sunday, 06/09
-
Create a directory "Homework03" under
"WebProg2019"
-
In "Homework03", follow the directory structure
as in "Modern GraphQL Tutorial.
-
Add more files or directories as you wish, if
necessary
Lecture Notes
-
Semester Finale / Testing [slides]