Creating Web Documents: JavaScript

Creating Web Documents: JavaScript Continue with JavaScript Form check Dice (die) throw Questions for midterm Homework: Prepare for midterm. Complete project II.

Common problems • Mis-spellings/typos • For example: scirpt or <ahref….> • 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

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

<html> <head><title>Form example </title> <script language="JavaScript"> 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; } </script> </head>

<body> <h1> Address Information </h1> <br> <form method=post enctype="text/plain" action="mailto:jeanine.meyer@purchase.edu" onSubmit="return verify(this);"> First Name: <input type="text" name="fname"> Last Name: <input type="text" name="lname"> <br> Street Address: <input type="text" name="address" size=30> Town/City: <input type="text" name="city"> State: <select name="state" size=1> <option value="NY" selected> New York <option value="NJ"> New Jersey <option value="CT"> Connecticut <option value="PA"> Pennsylvania </select> <br> Status: <input type="radio" name="status" value="R"> Returning client <input type="radio" name="status" value="N"> New client <hr> Thank you <p> <input type="submit" value="Send information"> </form> </body> </html>

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 1+Math.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.

<html> <head><title>Random test </title> <script language=Javascript> function dthrow() { var choice; choice=1 + Math.floor(Math.random()*6); document.dieimage.src="dice"+choice+".gif"; } </script> </head> <body> <img src="dice1.gif" name="dieimage"> <br> <a href="" onClick="dthrow(); return false;">Click to throw single die.</a> </body> </html>

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.

Explanation of script, continued • In dthrow: choice=1 + 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

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

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.

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.

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

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

Creating Web Documents: JavaScript