Creating Web Documents: JavaScript - PowerPoint PPT Presentation

Creating web documents javascript
1 / 14

  • Uploaded on
  • Presentation posted in: General

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

Creating Web Documents: JavaScript

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

Creating web documents javascript


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

Creating web documents javascript


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

Creating web documents javascript

<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

  • Login