Creating Web Documents: JavaScript

1
Creating Web Documents JavaScript

• Continue with JavaScript
• Form check
• Dice (die) throw
• Questions for midterm
• Homework Prepare for midterm.
• Complete project II.

2
Common problems

• Mis-spellings/typos
• For example scirpt or ltahref.gt
• Your names do not need to be standard spelling IF
  you are consistent!
• Missing ", ', ( or ), or , or , tags
• Funny symbols, probably from copy-and-pasting
• Failure to save corrected file OR system failure
  to refresh/reload

3
Form verification example

• Show in two parts
• a verify function written in the head section
• the form itself, with the call to verify part of
  the onSubmit event handler

4
lthtmlgt ltheadgtlttitlegtForm example lt/titlegt ltscript
language"JavaScript"gt function verify(f) if
(f.lname.value null f.address.value
null) alert("Form needs a last name and an
address") return false if (f.lname.value
"" f.address.value "") alert("Form
needs a last name and an address") return
false return true lt/scriptgt lt/headgt
5
ltbodygt lth1gt Address Information lt/h1gt ltbrgt ltform
methodpost enctype"text/plain"
action"mailtojeanine.meyer_at_purchase.edu" onSubmi
t"return verify(this)"gt First Name ltinput
type"text" name"fname"gt Last Name ltinput
type"text" name"lname"gt ltbrgt Street Address
ltinput type"text" name"address"
size30gt Town/City ltinput type"text"
name"city"gt State ltselect name"state"
size1gt ltoption value"NY" selectedgt New
York ltoption value"NJ"gt New Jersey ltoption
value"CT"gt Connecticut ltoption value"PA"gt
Pennsylvania lt/selectgt ltbrgt Status ltinput
type"radio" name"status" value"R"gt Returning
client ltinput type"radio" name"status"
value"N"gt New client lthrgt Thank you ltpgt ltinput
type"submit" value"Send information"gt lt/formgt
lt/bodygt lt/htmlgt
6
Simulate rolling of dice (1 die)

• Need
• way to simulate a random choice
• Math.random() returns a fraction from 0 to 1.
• Math.floor(x) returns the greatest integer not
  bigger than x
• 1Math.floor(Math.random()6) will
• produce random values from 1, 2, 3, 4, 5, 6
• way to insert a specific image
• name the image tag and refer to it in code.

7

• lthtmlgt ltheadgtlttitlegtRandom test lt/titlegt
• ltscript languageJavascriptgt
• function dthrow()
• var choice
• choice1 Math.floor(Math.random()6)
• document.dieimage.src"dice"choice".gif"
• lt/scriptgt lt/headgt
• ltbodygt
• ltimg src"dice1.gif" name"dieimage"gt
• ltbrgt
• lta href"" onClick"dthrow() return
  false"gtClick to throw single die.lt/agt
• lt/bodygt lt/htmlgt

8
Explanation of script

• The JavaScript in the head section defines a
  function called dthrow.
• In the a tag, onClick sets up the event
  handler what will happen when the link is
  clicked. In this case, a call to dthrow() and
  then a return false (this lasts means no link and
  no reloading of the page.
• The img tag in the body has a name dieimage.
  This is necessary for the image swap.

9
Explanation of script, continued

• In dthrow
• choice1 Math.floor(Math.random()6)
• This puts a pseudo-random value in choice a
  whole number, 1 to 6.
• document.dieimage.src"dice"choice".gif"
• This constructs a name of a file by concatenating
  "dice" with whatever choice is with ".gif" and
  then makes that string the value of the src
  attribute of the dieimage tag. This has the
  effect of making the image dice1.gif, dice2.gif,
  etc. depending on the throw

10
The sign

• was used in the prior two examples in two ways
• For addition of numbers
• For concatenated (putting together) strings.

11
Class work

• Create a small number of images. Save them in the
  same folder as the javascript html file.
• Make their names a pattern such as dice1.gif,
  dice2.gif, etc.
• Use the dicethrow as a model.

12
Class work

• Enhance the script to show two randomly chosen
  images (perhaps two dice).
• Do this by setting up choice1 and choice2 and
  using the same expression with random. Also, set
  up two image tags in the body.

13
Last chance

• Questions for midterm?
• You will need to produce and 'reverse engineer'
  (come up with the HTML) for simple examples.

14
Homework

• Study for midterm
• JavaScript and forms NOT on midterm.
• Work on project 2
• Read Course Documents on CourseInfo/Blackboard.
  Also charts on members.bellatlantic.net/vze2s839