Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web Programming - Lesson 2
Search
Ryan Chung
March 07, 2020
Programming
0
990
Web Programming - Lesson 2
Ryan Chung
March 07, 2020
Tweet
Share
More Decks by Ryan Chung
See All by Ryan Chung
MovieBot Development
ryan403
0
280
Design Voice-First Games for Alexa
ryan403
0
40
AI Teaching Talk
ryan403
0
100
Cognitive Service
ryan403
0
84
jQuery & API Practices
ryan403
0
110
CSS Practices
ryan403
1
130
JavaScript Practices
ryan403
0
85
Web Programming - Lesson 6
ryan403
1
570
Web Programming - Lesson 7
ryan403
1
590
Other Decks in Programming
See All in Programming
return文におけるstd::moveについて
onihusube
1
690
range over funcの使い道と非同期N+1リゾルバーの夢 / about a range over func
mackee
0
110
Fibonacci Function Gallery - Part 1
philipschwarz
PRO
0
200
テストケースの名前はどうつけるべきか?
orgachem
PRO
0
130
CSC305 Lecture 26
javiergs
PRO
0
140
競技プログラミングへのお誘い@阪大BOOSTセミナー
kotamanegi
0
350
Stackless и stackful? Корутины и асинхронность в Go
lamodatech
0
620
これが俺の”自分戦略” プロセスを楽しんでいこう! - Developers CAREER Boost 2024
niftycorp
PRO
0
190
선언형 UI에서의 상태관리
l2hyunwoo
0
140
N.E.X.T LEVEL
pluu
2
300
Monixと常駐プログラムの勘どころ / Scalaわいわい勉強会 #4
stoneream
0
270
テストコード文化を0から作り、変化し続けた組織
kazatohiei
2
1.5k
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
YesSQL, Process and Tooling at Scale
rocio
169
14k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Designing for humans not robots
tammielis
250
25k
Optimizing for Happiness
mojombo
376
70k
A better future with KSS
kneath
238
17k
Making the Leap to Tech Lead
cromwellryan
133
9k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Statistics for Hackers
jakevdp
796
220k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Transcript
Web Programming –
[email protected]
行動開發學院 行動開發學院 JavaScript Lab 自動排課系統 Ryan
Chung 32
Web Programming –
[email protected]
行動開發學院 行動開發學院 社團活動公告網頁 • 小明是資訊社的社長,在每週三的晚上會舉辦 社課,想要做一個網頁來公告社團活動
• 自動產生活動場次號碼、舉辦日期 • 方便維護每次的活動主題 33
Web Programming –
[email protected]
行動開發學院 行動開發學院 預期畫面 34
Web Programming –
[email protected]
行動開發學院 行動開發學院 功能 • 社長方便維護 •
只要輸入開始日期,就可以自動推算每次活動日期 • 只要將每個場次活動內容輸入,就可以自動編號 35
Web Programming –
[email protected]
行動開發學院 行動開發學院 檔案 • index.html:主要顯示頁面 •
main.js:主要程式運作 • style.css:網頁樣式檔 • topic.js:存放資料 36
Web Programming –
[email protected]
行動開發學院 行動開發學院 index.html 畫面 • 匯入
topic.js、main.js • 建立標題、表格(表格設定id) 37
Web Programming –
[email protected]
行動開發學院 行動開發學院 topic.js 資料 • 建立一個陣列來存放資料
38
Web Programming –
[email protected]
行動開發學院 行動開發學院 topic.js 資料 • 建立方便輸入日期的機制
39
Web Programming –
[email protected]
行動開發學院 行動開發學院 topic.js 資料 • 日期時間物件
–如何建立 –如何設定 –setMonth的輸入值 –setDate是什麼 • 函數的建立與呼叫 –函數的關鍵字 –如何建立、輸入輸出 –如何呼叫 40
Web Programming –
[email protected]
行動開發學院 行動開發學院 main.js • 新增表格的標題內容 41
Web Programming –
[email protected]
行動開發學院 行動開發學院 main.js • 表格的語法 –最外層
–標題 –列、資料欄位 42
Web Programming –
[email protected]
行動開發學院 行動開發學院 main.js • 將資料呈現於表格中,並顯示場次編號 43
Web Programming –
[email protected]
行動開發學院 行動開發學院 main.js • for 迴圈的使用
• 如何對應資料? • 編號從幾開始? 44
Web Programming –
[email protected]
行動開發學院 行動開發學院 main.js 開始處理活動日期 • 先確認startDate是否可正確取得
45
Web Programming –
[email protected]
行動開發學院 行動開發學院 活動日期概念 • 確定了第一週的日期後 •
每週就是前一個活動日期的七天後 46
Web Programming –
[email protected]
行動開發學院 行動開發學院 出現的卻是... 47
Web Programming –
[email protected]
行動開發學院 行動開發學院 資料型態 • 字串 •
日期 • 數字 • ... 不同的資料型態可不可以相加? 如何知道每個變數的資料型態? 48
Web Programming –
[email protected]
行動開發學院 行動開發學院 時間運算 • 先將時間轉換成累積毫秒,用累積毫秒設定日期時間 •
顯示時轉換成字串 49
Web Programming –
[email protected]
行動開發學院 行動開發學院 日期時間物件 • getTime() •
為什麼要計算一天的毫秒量 • toLocaleDateString() 50
Web Programming –
[email protected]
行動開發學院 行動開發學院 main.js 不想看到年份 51
Web Programming –
[email protected]
行動開發學院 行動開發學院 style.css 畫面呈現優化 52
Web Programming –
[email protected]
行動開發學院 行動開發學院 總算完成! 53
Web Programming –
[email protected]
行動開發學院 行動開發學院 嘗試在topic.js增加資料 • 畫面是否也能自動更新 54
Web Programming –
[email protected]
行動開發學院 行動開發學院 若在topic.js更改第一次活動日期 • 畫面是否也能自動更新 55
Web Programming –
[email protected]
行動開發學院 行動開發學院 Recap • HTML –表格、id
• JavaScript –多個檔案執行 –陣列、日期時間、函數、迴圈、字串處理 • CSS –置中對齊、邊界 –字體大小、邊框 56
Web Programming –
[email protected]
行動開發學院 行動開發學院 Lab • 如果要讓停課的那幾天字變灰色,該怎麼做? –條件判斷
• 能不能在網頁上讓使用者設定第一天的日期? –日期輸入元件 –事件發生 57