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
560
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
220
Design Voice-First Games for Alexa
ryan403
0
32
AI Teaching Talk
ryan403
0
78
Cognitive Service
ryan403
0
66
jQuery & API Practices
ryan403
0
97
CSS Practices
ryan403
1
120
JavaScript Practices
ryan403
0
82
Web Programming - Lesson 6
ryan403
1
550
Web Programming - Lesson 7
ryan403
1
580
Other Decks in Programming
See All in Programming
ゆるい個人開発のススメ
kuroppe1819
10
980
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
220
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
110
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
360
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
130
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
0
180
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
Snowflakeで眠ったデータを起こそう!
estie
0
110
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
240
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
0
470
Ruby Pattern Matching
bkuhlmann
0
920
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
4k
Featured
See All Featured
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
17
6.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
42k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
Practical Orchestrator
shlominoach
182
9.7k
Git: the NoSQL Database
bkeepers
PRO
422
63k
The Brand Is Dead. Long Live the Brand.
mthomps
49
28k
For a Future-Friendly Web
brad_frost
172
9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
Clear Off the Table
cherdarchuk
84
310k
A Modern Web Designer's Workflow
chriscoyier
689
190k
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/