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
53
AI Teaching Talk
ryan403
0
110
Cognitive Service
ryan403
0
95
jQuery & API Practices
ryan403
0
130
CSS Practices
ryan403
1
150
JavaScript Practices
ryan403
0
97
Web Programming - Lesson 6
ryan403
1
610
Web Programming - Lesson 7
ryan403
1
620
Other Decks in Programming
See All in Programming
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
230
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
100
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
230
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.4k
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
570
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
110
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
130
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
510
ニーリーにおけるプロダクトエンジニア
nealle
0
490
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
190
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
340
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
160
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
940
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Facilitating Awesome Meetings
lara
54
6.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
What's in a price? How to price your products and services
michaelherold
246
12k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
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