creating web documents javascript n.
Skip this Video
Download Presentation
Creating Web Documents: JavaScript

Loading in 2 Seconds...

play fullscreen
1 / 14

Creating Web Documents: JavaScript - PowerPoint PPT Presentation

  • Uploaded on

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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Creating Web Documents: JavaScript' - noel-noble

Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
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
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
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


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



<h1> Address Information </h1> <br>

<form method=post enctype="text/plain" action=""

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
Simulate rolling of dice (1 die)


  • 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);



</script> </head>


<img src="dice1.gif" name="dieimage">


<a href="" onClick="dthrow(); return false;">Click to throw single die.</a>

</body> </html>

explanation of script
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
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.


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
The + sign

was used in the prior two examples in two ways:

  • For addition of numbers
  • For concatenated (putting together) strings.
class work
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 work1
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
Last chance
  • Questions for midterm?
  • You will need to produce and 'reverse engineer' (come up with the HTML) for simple examples.
  • Study for midterm
    • JavaScript and forms NOT on midterm.
  • Work on project 2
  • Read Course Documents on CourseInfo/Blackboard. Also charts on