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
270
Design Voice-First Games for Alexa
ryan403
0
39
AI Teaching Talk
ryan403
0
95
Cognitive Service
ryan403
0
79
jQuery & API Practices
ryan403
0
98
CSS Practices
ryan403
1
130
JavaScript Practices
ryan403
0
84
Web Programming - Lesson 6
ryan403
1
560
Web Programming - Lesson 7
ryan403
1
590
Other Decks in Programming
See All in Programming
게임 개발하던 학생이이 세계에선 안드로이드 개발자?
pangmoo
0
110
Beyond Laravel Octane - Hyperf for Laravel Artisans
albertcht
1
140
学生の時に開催したPerl入学式をきっかけにエンジニアが組織に馴染むために勉強会を主催や仲間と参加して職能間の境界を越えていく
ohmori_yusuke
2
140
Compose Multiplatform과 Ktor로 플랫폼의 경계를 넘어보자
kwakeuijin
0
280
.NET Aspireのクラウド対応検証: Azureと他環境での実践
ymd65536
1
550
Повторное использование кода в ML: почему ML-пайплайны могут помочь?
lamodatech
0
240
複数プロダクトの技術改善・クラウド移行に向き合うチームのフレキシブルなペア・モブプログラミングの実践 / Flexible Pair Programming And Mob Programming
honyanya
0
240
Memory API: Patterns, Use Cases, and Performance
josepaumard
1
180
Serverless renderování Webových komponent
rarous
PRO
0
110
Cancel Next.js Page Navigation: Full Throttle
ypresto
1
220
[KR] Server Driven Compose With Firebase
skydoves
2
210
ML-прайсинг_на_Lamoda__вошли_и_вышли__приключение_на_20_минут__Слава_Цыганков.pdf
lamodatech
0
250
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
73
9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Web Components: a chance to create the future
zenorocha
310
42k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.3k
Ruby is Unlike a Banana
tanoku
96
11k
The Language of Interfaces
destraynor
154
24k
[RailsConf 2023] Rails as a piece of cake
palkan
49
4.8k
Six Lessons from altMBA
skipperchong
26
3.4k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Design by the Numbers
sachag
278
19k
Statistics for Hackers
jakevdp
796
220k
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