Transcript JavaScript

Javascript Example
- Purpose
Javascript Tools
Document Object Model
Problem Modeling & Solution
Interaction Diagram
quizzer06.html under Javascript-Examples > JavaScript-DOM
Javascript
innerHTML
div tags
data conversion
random numbers
time delayed functions
- timed, random calculation game
System Behavior
1. User requests an arithmetic problem.
2. JS-App generates a random problem for the user.
3. User has limited time to answer.
4. JS-App evaluates user's answer and posts result.
1
3
JS-App
User
2
Question
1 - User
What is
Sorry
- correct
17 + 19
answer
?
is 17 + 19 = 36
2 - App
4 - App
Enter answer here
35
3- User
How to make random numbers ?
RANDOM
Making random no.s -
6 - 26
0<r<1
Math.round ( 20 * Math.random ( ) + .5 )
+5
1 ... 21
.5 < r < 20.5
0 < r < 20
6...26
eliminates easy problems like
2+13
How to replace existing Html ?
INNERHTML
Manufacture random arithmetic question
w = "<br>What is " +x+ " plus "
+y+ " ?<br><br>"
document.getElementById(1).innerHTML = w
Replace HTML for element where id=1
Question
Access
input via id
Enter answer here
use getElementById
to get & change
What is 17 + 19 ?
div area with id
use innerHTML
to change
How to make browser delay or wait ?
DELAYS
Gives user time to answer
Executed after
3500 millisecond
delay
setTimeout ( "F2( )"
Built-in Javascript
function
, 3500
)
delayed
execution of F2
Temporal Logic
question()
Generates question
delay
Waits for answer
answer()
Evaluates answer
Posts response
setTimeout ("answer()", 3000 )
How to make convert numbers to the correct type ?
Data conversion
Get user input
z = document.getElementById(2).value
z = parseInt (z)
Make z into a number
INNERHTML
Manufacture random arithmetic question
w = "<br>What is " +x+ " plus "
+y+ " ?<br><br>"
document.getElementById(1).innerHTML = w
Replace HTML for element where id=1
INNERHTML
Construct response to
user's answer
w = "<br>Sorry, the correct answer is " +x+ " + " +y+ " =" +z
document.getElementById(1).innerHTML = w
Question
Answer here
replaces div's HTML
Desired behavior
1 - User requests an arithmetic problem.
2 - JS App posts a random problem to the user.
Asks for
question
app
user
Makes the question
Waits for response
Some useful diagrams for Interactions
Interaction Diagram
User
User requests question
JS app
App builds the question
Posts the question
User thinks
Enters
answer
early
App waits before getting
user's answer ( )
App gets user's answer
late
Constructs response to
user's answer & posts
Function calls
User
User requests
question
JS app
function
- triggered by click
question ( )
makes delayed call
to answer( )
answer ( )
function
- called by question