Introduction to JavaScript 41 Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture...

Introduction to JavaScript 4 1

Introduction to Programming the WWW I

Introduction to Programming the WWW I

CMSC 10100-1

Winter 2004

Lecture 17


Today’s TopicsToday’s Topics

• Using events (cont’d)

• Working with Objects (window, location, history and navigator)

• Working with Forms





Review: More Effective Image Rollover

Review: More Effective Image Rollover

• http://people.cs.uchicago.edu/~hai/hw6/betterimagerollover.html<html> <head> <script language="javascript"> var theOffImage = new Image;var theOnImage = new Image;theOffImage.src ="sunflowers.jpg";theOnImage.src = "sunflowerlady.jpg";function rollover (tag){ if (tag == 'on') document.picture.src = theOnImage.src; else document.picture.src = theOffImage.src; } </script> </head><body> <a href=“#”

onMouseOver="rollover('on');" onMouseOut="rollover('off')">

<img src="sunflowers.jpg" name="picture" border="0“></a></body></html>

• The simple image rollover may produce an unacceptable delay in retrieving and displaying the 2nd image

• The new example will improve the efficiency by preloading the images


Using Events with Image Maps

Using Events with Image Maps

• Examples: ShowCountry.html

Changing images with MouseOver and MouseOut events.


Image MapsImage Maps

• Example: changing images with events. <img src=“north_america.gif”

usemap=“#northAmerica_map” name=“northAmerica”>

<map name=“northAmerica_map”>

<area shape=“circle” coords=“44,46,20” nohref

onMouseOver=“change_image(‘alaska.gif’);return false”

onMouseOut=“reset_image(); return false”>

<area shape=“poly”

…… rest of html code here …….

</map>


Image MapsImage Maps

• Example: changing images with events.<html>

<head><title>North America</title><script language=“JavaScript”>function change_image(image_name){

document.northAmerica.src = image_name;}function reset_image(){

document.northAmerica.src = “north_america.gif”}</script></head>


Using EventsUsing Events

• More examples: ImageOver.html ShowAnimal.html ShowAnimal2.html (uses functions) FamilyImageMap.html


Working with WindowsWorking with Windows

• The JavaScript Object Model Browser object model• A hierarchy of objects, each of which provides

programmatic access to a different aspect of the HTML page or the Web browser window• Created automatically when a Web browser

opens an HTML document




• The JavaScript Object Model Window object• Represents a Web browser window or an

individual frame within a window• Top-level object in the browser object model• Its properties and methods can be used to control

the Web browser window



• The JavaScript Object Model Document object• Represents an HTML document displayed in a

window• Descended from a Window object• Ancestor (parent) for all elements contained on

an HTML page e.g., all HTML elements descend from the Document

object



• The JavaScript Object Model Referencing objects• To refer to a JavaScript object in code, you must

list all of its ancestors as a series of properties separated by periods (the dot operator)• It is not necessary to explicitly refer to the

Window object, it is assumed by the browser• In some browser versions, it is not necessary to

explicitly refer to the Document object



• The Window Object Includes several properties that contain

information about the Web browser window e.g., status property• Contains information displayed in a Web

browser’s status bar





• Opening and Closing Windows Netscape and Internet Explorer both allow

the opening of new Web Browser windows• Creates a new window object• Use open() method of the Window object• Syntax

window.open(“URL”, “name”, options);



• Opening and Closing Windows window.open(“URL”, “name”, options);• URL: the address of the content of the window• Name: use this as the value of a target in HTML

tags. If a window with this name already exists, open does

not create a new window, rather returns a reference to the already opened window.

This name cannot be used in javascript code to reference the window (must use a variable)

This name does not appear in the title.



• Opening and Closing Windows window.open(“URL”, “name”, options);• URL: the address of the content of the window

if the URL is empty, the new window will have no content (i.e., it is blank).

Otherwise, the content at the given URL is loaded into the new browser window.


Opening new windowsOpening new windows

<HTML><BODY><FORM><INPUT TYPE="button" VALUE="About this

JavaScript Program"onClick="window.open('About.html', 'About', 'height=100,width=300')">

</FORM></BODY></HTML>

Note that all options are in a single string.

AboutExercise.html


More ExamplesMore Examples

• Recipes.html Two links, each of which will open in a new

window.

• Links.html Links open in a new window, but the window

is created when the first link is pressed.



• Opening and Closing Windows When opening a new window, it can be

customized using the options argument of the open() method• Multiple items in the options string must be

separated by commas• Defaults are provided if no options are specified• If any option is specified, then all desired options

must be specified. See example later.




• Example. Options specified by listing. Below example will have no toolbars, menubars, directory buttons, or location bar.var myWin = Window.open(”Chili.html”, ”Chili”, ”height=350,

width=400,scrollbars, resizable, status”);

Or

var myWin = Window.open(”Chili.html”, ”Chili”, ”height=350, width=400,scrollbars=yes, resizable=yes, status=yes”);

Chili.html



• Opening and Closing Windows Referencing a window• A Window object’s name property can only be

used to specify a target window, and cannot be used in JavaScript code• To reference a window in code, the new Window

object reference must be assigned to a variable var newWindow = window.open(“http://course.com”);


Working with the object hierarchy

Working with the object hierarchy

• Different ways to access elements in an html page. Here we just talk about forms

• The form and every element in it must be named

• Refer to elements using the dot notation

• To access the number/string stored or displayed in an element such as a text box use the value property.


Working with the Location Object


• The Location Object Allows you to change to a new web page

from within JavaScript code Contains several properties and methods for

working with the URL of the document currently open in a Web browser window

Go to First Slide


• The Location Object When you modify any property of the

Location object, you generate a new URL The web browser will then automatically

attempt to open that new URL





The Location ObjectThe Location Object

• Example:location.href = “http://www.uchicago.edu

Will cause the browser to open the uchicago home page




• The assign() method is same as the href property:

location.assign(“http://www.uchicago.edu”)will cause the uchicago home page to be loaded in the browser.

• The reload() method is same as the reload button If no argument or argument is false then the page is

reloaded only if it has changed If argument is true then the page will always reload



• The replace() method is similar to the href property:

location.assign(“http://www.uchicago.edu) Difference: replace actually overwrites one document with

another Also replaces the old URL entry in the web browser’s history list. The href property opens a different document and adds it to the

history list.



• Example: Redirect.html Redirect2.html


• The History Object Maintains a history list of all the documents

that have been opened during the current Web browser session

Security features• History object will not display the URLs on the list• In IE: only allows navigation if page is in same

domain

Working with the History Object




• The History Object Example: http://www.comptechdoc.org/independent/web/cgi/

javamanual/javahistory.html




Working with the Navigator ObjectsWorking with the Navigator Objects

• The Navigator Object Used to obtain information about the current

web browser Typically used to identify browser



Working with Navigator Object

Working with Navigator Object

• The Navigator Object Example:• NavigatorObjects.html

document.writeln(“Browser code name: “ + navigator.appCodeName);

document.writeln(“Web browser name: “ + navigator.appName);document.writeln(“Web browser version: “ + navigator.appVersion);document.writeln(“Operating platform: “ + navigator.platform);document.writeln(“User agent: “ + navigator.userAgent);

• BrowserProperties.html • Check DHTML/CSS book page 73 for codes to

decide specific browser and platform


Working with FormsWorking with Forms

• Validating a User's Input to a Form with JavaScript About hidden form fields About the Form object How to reference forms and form elements About form event handlers, methods, and

properties How to e-mail form data


Validating a User’s Input to a Form


• Hidden Form Fields Special type of form element that allows the

hiding of information from users Created with <input> tag, setting the TYPE

attribute to hidden Can be used to store information the

program needs later




• The Form Object Enables the use of JavaScript for verifying

form information• Allows validation before submission to CGI script

on server (client-side validation) Minimizes Web traffic Simplifies CGI script


The elements[ ] arraycontains all the elements

used in the form.

The form array contains all forms in the document




• The Form Object Referencing Forms and Form Elements• Each document object includes a forms[ ] array

that contains all of an HTML document’s forms• Each form object includes an elements[ ] array

that contains all of a form’s elements• Placed into array in order they are placed in form • To reference third element in second form:

document.forms[1].elements[2]




• The Form Object Referencing Forms and Form Elements• NAME attribute

Allows JavaScript to reference the item (e.g., form, element, etc.)

If multiple form elements share the same name, JavaScript creates an array out of those elements• Radio buttons• document.demographics.ageGroup[1].value




• The Form Object Form Event Handlers• onSubmit

Executes when a form is submitted to a CGI script using a submit or an image input tag

• onReset Executes when a reset button is selected on a form




• The Form Object Form Methods• Form object contains two methods

submit()• Used to submit a form without the use of a submit

<input> tag reset()

• Used to clear a form without the use of a reset <input> tag




• The Form Object Form Properties• Form object includes:

Several properties that correspond to the attributes of the <form> tag

Properties containing information about form elements






• Examples: ConfirmForm.html and ConfirmForm2.html (simple

confirmation examples) PurchaseOrder.html (confirmation of values before submitting) MathQuiz.html (using hidden fields) ProductRegistration.html (using hidden fields for creating a

multiple page form). Second form page is ProductInfo.html Calculator.html (hidden fields etc.) http://people.cs.uchicago.edu/~hai/hw6/form.html


Hw6 DiscussionsHw6 Discussions

• Problem1: Client-side Form Validation

• Problem2: Browser and OS detection

• http://www.classes.cs.uchicago.edu/classes/archive/2004/winter/10100-1/02/hw6/requirements.txt

Date post:	01-Jan-2016
Category:	Documents
Upload:	randall-hampton
View:	221 times
Download:	0 times

Introduction to JavaScript 41 Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture...

Documents