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 –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. Form example 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; }

5. Address Information <form method=post enctype="text/plain" action="mailto:jeanine.meyer@purchase.edu" onSubmit="return verify(this);"> First Name: Last Name: Street Address: Town/City: State: New York New Jersey Connecticut Pennsylvania Status: Returning client New client Thank you

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 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.

7. Random test function dthrow() { var choice; choice=1 + Math.floor(Math.random()*6); document.dieimage.src="dice"+choice+".gif "; } Click to throw single die.

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: 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

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