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
54
AI Teaching Talk
ryan403
0
110
Cognitive Service
ryan403
0
96
jQuery & API Practices
ryan403
0
130
CSS Practices
ryan403
1
150
JavaScript Practices
ryan403
0
98
Web Programming - Lesson 6
ryan403
1
610
Web Programming - Lesson 7
ryan403
1
620
Other Decks in Programming
See All in Programming
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
500
PipeCDのプラグイン化で目指すところ
warashi
1
290
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
GPUを計算資源として使おう!
primenumber
1
200
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
210
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
1
310
AIともっと楽するE2Eテスト
myohei
8
2.9k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
270
PicoRuby on Rails
makicamel
2
140
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
200
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
210
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
15
5.3k
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Optimizing for Happiness
mojombo
379
70k
BBQ
matthewcrist
89
9.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
For a Future-Friendly Web
brad_frost
179
9.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
7
330
Making Projects Easy
brettharned
116
6.3k
Practical Orchestrator
shlominoach
189
11k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Being A Developer After 40
akosma
90
590k
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