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 3
Search
Ryan Chung
March 22, 2020
Programming
0
600
Web Programming - Lesson 3
Ryan Chung
March 22, 2020
Tweet
Share
More Decks by Ryan Chung
See All by Ryan Chung
MovieBot Development
ryan403
0
310
Design Voice-First Games for Alexa
ryan403
0
63
AI Teaching Talk
ryan403
0
120
Cognitive Service
ryan403
0
110
jQuery & API Practices
ryan403
0
140
CSS Practices
ryan403
1
160
JavaScript Practices
ryan403
0
100
Web Programming - Lesson 6
ryan403
1
630
Web Programming - Lesson 7
ryan403
1
630
Other Decks in Programming
See All in Programming
社会人になっても趣味開発を続けたい! / traPavilion
mazrean
1
100
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
1
130
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
3
720
Software Architecture
hschwentner
6
2.3k
理論と実務のギャップを超える
eycjur
0
180
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
110
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
960
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
200
Devoxx BE - Local Development in the AI Era
kdubois
0
140
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
260
CSC509 Lecture 07
javiergs
PRO
0
240
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
329
39k
YesSQL, Process and Tooling at Scale
rocio
173
15k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Optimizing for Happiness
mojombo
379
70k
Building an army of robots
kneath
305
46k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
How to Ace a Technical Interview
jacobian
280
24k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Rails Girls Zürich Keynote
gr2m
95
14k
Transcript
Web Programming –
[email protected]
行動開發學院 行動開發學院 JavaScript Lab 心理測驗-你的愛情是什麼滋味? Ryan
Chung 58
Web Programming –
[email protected]
行動開發學院 行動開發學院 需求 • 想要將網路上的心理測驗文字轉換成互動模式 •
使用者只要逐題作答就可以得到結果 59
Web Programming –
[email protected]
行動開發學院 行動開發學院 預期成果 • 每頁顯示一題目,使用者選擇後按下按鈕 •
最後會出現結果,並可重新開始作答 • 按鈕會依情境改變:開始、下一題、重新開始 60
Web Programming –
[email protected]
行動開發學院 行動開發學院 檔案 • index.html:主要顯示頁面 •
main.js:主要程式運作 • style.css:網頁樣式檔 • data.js:存放資料 61
Web Programming –
[email protected]
行動開發學院 行動開發學院 index.html 畫面 • 匯入
data.js、main.js • 建立標題、問題與選項區塊、選項區塊、按鈕 62
Web Programming –
[email protected]
行動開發學院 行動開發學院 data.js • 直接下載使用 63
https://github.com/ryan403/love-taste-quiz/
Web Programming –
[email protected]
行動開發學院 行動開發學院 觀察data.js • 了解 {
}、[ ] 的用法 • Dictionary { } –Key-value Pair • Array [ ] –有順序性 64
Web Programming –
[email protected]
行動開發學院 行動開發學院 style.css 畫面呈現優化 65
Web Programming –
[email protected]
行動開發學院 行動開發學院 main.js • 建立變數、建立按鈕事件處理 66
Web Programming –
[email protected]
行動開發學院 行動開發學院 main.js • 兵分兩路,開始作答或繼續作答 •
想想一開始作答跟其他題的作答有什麼不一樣? • 畫面上只有一顆按鈕 67
Web Programming –
[email protected]
行動開發學院 行動開發學院 main.js 第一題的顯示 68
Web Programming –
[email protected]
行動開發學院 行動開發學院 main.js - else •
檢查哪一個選項被使用者選取 69
Web Programming –
[email protected]
行動開發學院 行動開發學院 main.js - else •
是要往下一題顯示還是通往結果 70
Web Programming –
[email protected]
行動開發學院 行動開發學院 main.js – 通往最終結果 •
顯示結果標題、結果詳細內容 71
Web Programming –
[email protected]
行動開發學院 行動開發學院 main.js – 顯示下一題 •
注意題號 72
Web Programming –
[email protected]
行動開發學院 行動開發學院 總算完成! 73
Web Programming –
[email protected]
行動開發學院 行動開發學院 Recap • HTML –div、h2、radio、label、button、checked
• JavaScript –if...else –==、null • jQuery –:radio、empty()、attr()、each() –return false • 資料檔案 –陣列、字典、第x個、多層存取 74
Web Programming –
[email protected]
行動開發學院 行動開發學院 Lab – 累積分數型的測驗 •
PDP性格測驗 75 https://bookmarks.tw/pdp/