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
590
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
59
AI Teaching Talk
ryan403
0
120
Cognitive Service
ryan403
0
100
jQuery & API Practices
ryan403
0
130
CSS Practices
ryan403
1
160
JavaScript Practices
ryan403
0
100
Web Programming - Lesson 6
ryan403
1
620
Web Programming - Lesson 7
ryan403
1
630
Other Decks in Programming
See All in Programming
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
440
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
570
testingを眺める
matumoto
1
140
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
210
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2.3k
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
840
はじめてのMaterial3 Expressive
ym223
2
260
速いWebフレームワークを作る
yusukebe
5
1.7k
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
250
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
490
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
520
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Become a Pro
speakerdeck
PRO
29
5.5k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
We Have a Design System, Now What?
morganepeng
53
7.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Code Review Best Practice
trishagee
70
19k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Faster Mobile Websites
deanohume
309
31k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Thoughts on Productivity
jonyablonski
70
4.8k
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/