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
1k
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
300
Design Voice-First Games for Alexa
ryan403
0
60
AI Teaching Talk
ryan403
0
120
Cognitive Service
ryan403
0
100
jQuery & API Practices
ryan403
0
140
CSS Practices
ryan403
1
160
JavaScript Practices
ryan403
0
100
Web Programming - Lesson 6
ryan403
1
620
Web Programming - Lesson 7
ryan403
1
630
Other Decks in Programming
See All in Programming
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
340
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
print("Hello, World")
eddie
2
530
Testing Trophyは叫ばない
toms74209200
0
890
Kiroで始めるAI-DLC
kaonash
2
620
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
640
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
1.9k
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
250
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
2.4k
AI Agents: How Do They Work and How to Build Them @ Shift 2025
slobodan
0
100
Featured
See All Featured
Visualization
eitanlees
148
16k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Fireside Chat
paigeccino
39
3.6k
For a Future-Friendly Web
brad_frost
180
9.9k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Done Done
chrislema
185
16k
GraphQLとの向き合い方2022年版
quramy
49
14k
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