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
580
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
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
XP, Testing and ninja testing
m_seki
3
190
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
150
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
190
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
100
Benchmark
sysong
0
270
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
関数型まつりレポート for JuliaTokai #22
antimon2
0
150
Team operations that are not burdened by SRE
kazatohiei
1
210
ニーリーにおけるプロダクトエンジニア
nealle
0
490
NPOでのDevinの活用
codeforeveryone
0
250
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
440
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
The Language of Interfaces
destraynor
158
25k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building Adaptive Systems
keathley
43
2.6k
Music & Morning Musume
bryan
46
6.6k
Bash Introduction
62gerente
614
210k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
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/