Introduction to Programming the WWW I

1
Introduction to Programming the WWW I

• CMSC 10100-1
• Winter 2004
• Lecture 16

2
Todays Topics

• Expressions and statements (contd)
• Using events
• Working with Objects (window, location, history
  and navigator)
• Working with Forms

3
Review Automatic Arrays in Document Objects

• How to access the object in these arrays, for
  example, a link in the document?
• By array syntax. If this link is the first link
  definition in the document (in source code
  order), the reference would be
• document.links0
• Or you can also use the name (as a string) in
  array syntax, as follows
• document.links"home"
• Does not work in IE!
• Examples
• http//people.cs.uchicago.edu/hai/hw6/accessobjec
  t.html

4
Expressions and Operators

• Logical Operators
• Used for comparing two Boolean operands for
  equality
• Comparison returns a Boolean value
• Comprised of both binary and unary operators

5
(No Transcript)
6
Logical Operators

• Examples
• BooleanVariables.html
• LogicalExamples.html

7
Expressions and Operators

• Working with Strings
• JavaScript has two operators that can be used
  with Strings to combine two strings
• Concatenation operator ()
• var oneString one
• var anotherString oneString , two, three,
  
• Assignment operator ()
• var oneString one
• oneString , two, three,

8
Expressions and Operators

• String Object
• Literal strings and string variables in
  JavaScript are represented by a String object
• The String object contains methods for
  manipulating text strings

9
Expressions and Operators

• String Object
• length property
• Returns the number of characters in a string
• Parsing
• Act of extracting characters or substrings from a
  larger string

10
Expressions and Operators

• String Object
• Parsing using the split() built-in function
• Reference Javascript the Definitive Guide, p
  529.
• stringVariable.split(delimiter). Returns an
  array of strings, created by splitting string
  into substrings at the boundaries specified by
  delimiter.

11
Expressions and Operators

• String Object
• Parsing using the split() built-in function.
• Example
• var myVar John Barr
• var newVar myVar.split( )
• newVar contains John, Barr

12
Expressions and Operators

• String Object
• Parsing using the split() built-in function.
• Example
• var myVar redbluegreenyellow
• var newVar myVar.split()
• newVar contains red, blue.green,yellow

13
Expressions and Operators

• Example
• StringExamples.html

14
Expressions and Operators

• Operator Precedence
• Order of priority in which operations in an
  expression are evaluated
• Expressions are evaluated
• On a left-to-right basis
• With the highest priority precedence evaluated
  first

15
Expressions and Operators

• Operator Precedence
• Parentheses/brackets/dot (( ) .)
• Negation/increment (! - -- typeof void)
• Multiplication/division/modulus ( / )
• Addition/subtraction ( -)
• Comparison (lt lt gt gt)
• Equality ( !)
• Logical AND ()
• Logical OR ()
• Assignment operators ( - / )
• Comma (,)

16
Decision Making Statements

• if statements
• ifelse statements
• Nested if statements
• switch statements

17
Decision Making

• Decision Making
• Process of determining the order in which
  statements execute in a program
• AKA flow control
• Decision-Making Structures
• Special type of JavaScript statements used for
  making decisions

18
Decision Making

• if Statements
• Used to execute specific programming code if the
  evaluation of a conditional expression returns a
  value of true
• Do this or dont do this
• Syntax (3 primary parts)
• if (conditional_expression)
• statement(s)

19
Decision Making

• if Statements
• Operation
• If the conditional expression is true, the
  statement(s) is/are executed
• Control then continues to subsequent code
• Command block
• Multiple statements contained within a set of
  braces (require curly braces)

20
(No Transcript)
21
(No Transcript)
22
(No Transcript)
23
Decision Making

• if Statements
• Conditional Expression
• Can consist of
• Comparison operators
• Logical operators
• Combination of the two
• Must resolve to Boolean value

24
Decision Making

• ifelse Statements
• Used to execute one set of code if the evaluation
  of a conditional expression returns a value of
  true, otherwise executes another set of code
• Do this or do something else
• Syntax
• if (conditional_expression)
• statement(s)
• else
• statement(s)

25
(No Transcript)
26
Decision Making

• Nested if and ifelse Statements
• Nested statements
• Statements contained within other statements
• Syntax (variable)
• if (conditional_expression)
• statement(s)
• if (conditional_expression)
• statement(s)
• else
• statement(s)

27
(No Transcript)
28
(No Transcript)
29
Decision Making

• switch Statements
• Controls program flow by executing a specific set
  of statements, depending on the value of an
  expression
• Syntax switch (expression)
• case label1
• statement(s)
• break
• case label2
• statement(s)
• break
• default
• statement(s)

30
Decision Making

• switch Statements
• Case labels
• Identify specific code segments
• Can use a variety of data types as case labels
• Break statement
• Used to exit switch statements
• Default label
• Contains statements that execute when the
  condition expression doesnt match any of the
  case labels

31
(No Transcript)
32
Repetition Statements

• while statements
• dowhile statements
• for statements
• break/continue statements

33
Repetition

• Repetition
• The if, ifelse and switch statements select only
  a single branch of code to execute, then continue
  to the statement that follows
• Loop statements
• Repeatedly execute a statement or a series of
  statements while a specific is true or until a
  specific condition becomes true

34
Repetition

• while Statements
• Used for repeating a statement or a series of
  statements as long as a given conditional
  expression evaluates to true
• Typically uses a counter to keep track of
  iteration
• Syntax
• while (conditional_expression)
• statement(s)

35
Repetition

• while Statements
• Example
• var count 1
• while (count lt 5)
• document.writeln(count)
• count
• document.writeln(You have printed 5 numbers.)

36
(No Transcript)
37
Repetition

• while Statements
• Example
• var count 10
• while (count gt 0)
• document.writeln(count)
• --count
• document.writeln(We have liftoff.)

38
(No Transcript)
39
Repetition

• while Statements
• Example
• var count 1
• while (count lt 100)
• document.writeln(count)
• count 2

40
(No Transcript)
41
Repetition

• while Statements
• Infinite loop
• A situation in which a loop statement never ends
  because the conditional expression is never
  updated or is never false
• Need to include code within the body of the while
  statement that changes some part of the
  conditional expression
• Should also include code that monitors the
  conditional expression

42
Repetition

• dowhile Statements
• Executes a statement or statements once, then
  repeats the execution as long as a given
  conditional expression evaluates to true
• Do once, then test to see if it is done again
• Syntax
• do
• statement(s)
• while (conditional_expression)

43
(No Transcript)
44
(No Transcript)
45
Repetition

• for Statements
• Used for repeating a statement or series of
  statements as long as a given conditional
  expression evaluates to true
• Do for a prescribed number of iterations
• Syntax
• for (initialization_expression condition
  update_statement)
• statement(s)

46
Repetition

• for Statements
• Steps in processing a for loop
• Initialization expression is started
• Only occurs once, when loop is first encountered
• Evaluate condition
• If condition true ? execute loop body, go to
  next step
• If condition false ? for statement ends
• Execute update statement
• Then return to condition evaluation

47
(No Transcript)
48
(No Transcript)
49
(No Transcript)
50
Repetition Control

• break Statements
• Stop executing the looping statement
• continue Statements
• Halts a looping statement and restarts the loop
  with a new iteration

51
(No Transcript)
52
(No Transcript)
53
(No Transcript)
54
Using Events

• About events
• About HTML tags and events
• How to use event handlers
• About links
• How to use link events
• How to create an image map

55
Using Events

• Understanding Events
• Event
• A specific circumstance that is monitored by
  JavaScript or,
• A trigger that fires specific JavaScript code in
  response to a given situation
• e.g., an action that a user takes

56
Using Events

• Understanding Events
• Events
• Two basic types
• User-generated events
• e.g., mouse-click
• System-generated events
• e.g., load event ? triggered by web browser when
  HTML document finishes loading

57
(No Transcript)
58
Using Events

• HTML Tags and Events
• HTML elements allow user to trigger events
• ltinputgt tag
• Creates input fields that interact with users
• ltinput typeinput-typegt
• Type attribute determines type of input field
• ltinput typetextgt creates a text field
• Name attribute assigns a unique name to the
  element that JavaScript can use to reference it

59
(No Transcript)
60
(No Transcript)
61
Using Events

• Event Handlers
• Event handler
• Code that executes in response to a specific
  event
• ltHTMLtag eventHandlerJavaScript-codegt
• Event handler naming convention
• Event name with a prefix of on
• E.g., onClick
• ltinput typebutton onClickalert(You clicked
  the button!)gt

62
Using Events

• Example ChangedValue.html

63
Using Events

• Event Handlers
• Built-in JavaScript utility methods
• alert() method
• Displays a pop-up dialog box with an OK button
• prompt() method
• Displays a pop-up dialog box with a message, a
  text box, an OK button, and a Cancel button
• Example
• prompt.html
• prompt2.html

64
Using Events

• Links Events
• Primary event is the click event
• For default operation, no event handler is
  required
• Overriding the default click event
• Add onClick event handler that executes custom
  code
• Event handler must return true or false
• Can use built-in confirm() method to generate
  Boolean value

65
(No Transcript)
66
(No Transcript)
67
Using Events

• More examples
• warnuser.html
• confirmLinks.html

68
Using Events

• Other Links Events
• MouseOver event
• Occurs when the mouse moves over a link
• MouseOut event
• Occurs when the mouse moves off a link
• Can be used to change the text that appears in
  the browsers status bar
• Use JavaScript status property for the window
  object
• Example
• onMouseOver window.status testing, testing,
  testing.
• Note that some browsers dont handle onMouseOver
  changes to the status bar from inside image maps!

69
Using Events

• onMouseOver
• default behavior display link in status bar
• if onMouseOver returns true tells the web browser
  not to perform default behavior
• if onMouseOver returns false, tells the web
  browser that it should perform default behavior.
• backwards from the onClick values!

70
Using Events

• default status bar message
• the defaultStatus property records the message
  that will always be displayed in the status bar
  unless another message is explicitly placed
  there.
• ltbody onLoaddefaultStatusThe Dafoe Familygt

71
Using Events

• Examples
• testStatusBar.html
• CorrectStatus.html
• BodyParts.html

72
A Simple Image Rollover

• http//people.cs.uchicago.edu/hai/hw6/imagerollov
  er.html

• lthtmlgt ltheadgt
• ltscript language"javascript"gt
• function rollover (newpic)
• document.picture.src newpic
• lt/scriptgt
• lt/headgt
• ltbodygt
• lta href
• onMouseOver"rollover('sunflowerlady.jpg')"
• onMouseOut"rollover('sunflowers.jpg')"gt
• ltimg src"sunflowers.jpg" name"picture"
  border"0" gt
• lt/agt
• lt/bodygt
• lt/htmlgt

Usually we DO NOT use the following codes since
the image objects in some browsers do not respond
to mouse events ltimg src"sunflowers.jpg"
name"picture" border"0" onMouseOver
"rollover('sunflowerlady.jpg')" onMouseOut
"rollover('sunflowers.jpg')"gt
73
More Effective Image Rollover

• http//people.cs.uchicago.edu/hai/hw6/betterimage
  rollover.html
• lthtmlgt ltheadgt
• ltscript language"javascript"gt
• 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
  
• lt/scriptgt
• lt/headgtltbodygt
• lta hrefonMouseOver"rollover('on')"
• onMouseOut"rollover('off')"gt
• ltimg src"sunflowers.jpg" name"picture"
  border"0gt
• lt/agt
• lt/bodygtlt/htmlgt

• 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

74
Using Events with Image Maps

• Examples
• ShowCountry.html
• Changing images with MouseOver and MouseOut
  events.

75
Image Maps

• Example changing images with events.
• ltimg srcnorth_america.gif
• usemapnorthAmerica_map namenorthAmericagt
• ltmap namenorthAmerica_mapgt
• ltarea shapecircle coords44,46,20 nohref
• onMouseOverchange_image(alaska.gif)return
  false
• onMouseOutreset_image() return falsegt
• ltarea shapepoly
• rest of html code here .
• lt/mapgt

76
Image Maps

• Example changing images with events.
• lthtmlgt
• ltheadgt
• lttitlegtNorth Americalt/titlegt
• ltscript languageJavaScriptgt
• function change_image(image_name)
• document.northAmerica.src image_name
• function reset_image()
• document.northAmerica.src north_america.gif
• lt/scriptgt
• lt/headgt

77
Using Events

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

78
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
79
Working with the Location Object

• 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

80
(No Transcript)
81
The Location Object

• Example
• location.href http//www.uchicago.edu
• Will cause the browser to open the uchicago home
  page

82
(No Transcript)
83
The Location Object

• 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

84
The Location Object

• 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
  browsers history list.
• The href property opens a different document and
  adds it to the history list.

85
The Location Object

• Example
• Redirect.html
• Redirect2.html

86
Working with the History Object

• 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

87
(No Transcript)
88
Working with the History Object

• The History Object Example
• http//www.comptechdoc.org/independent/web/cgi/jav
  amanual/javahistory.html

89
Working with the Navigator Objects

• The Navigator Object
• Used to obtain information about the current web
  browser
• Typically used to identify browser

90
(No Transcript)
91
Working with Navigator Object

• The Navigator Object
• Example
• NavigatorObjects.html
• BrowserProperties.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)

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

93
Validating a Users Input to a Form

• Hidden Form Fields
• Special type of form element that allows the
  hiding of information from users
• Created with ltinputgt tag, setting the TYPE
  attribute to hidden
• Can be used to store information the program
  needs later

94
Validating a Users Input to a Form

• 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

95
(No Transcript)
96
Validating a Users Input to a Form

• The Form Object
• Referencing Forms and Form Elements
• Each document object includes a forms array
  that contains all of an HTML documents forms
• Each form object includes an elements array
  that contains all of a forms elements
• Placed into array in order they are placed in
  form
• To reference third element in second form
• document.forms1.elements2

97
Validating a Users Input to a Form

• 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.ageGroup1.value

98
Validating a Users Input to a Form

• 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

99
Validating a Users Input to a Form

• The Form Object
• Form Methods
• Form object contains two methods
• submit()
• Used to submit a form without the use of a submit
  ltinputgt tag
• reset()
• Used to clear a form without the use of a reset
  ltinputgt tag

100
Validating a Users Input to a Form

• The Form Object
• Form Properties
• Form object includes
• Several properties that correspond to the
  attributes of the ltformgt tag
• Properties containing information about form
  elements

101
(No Transcript)
102
(No Transcript)
103
Validating a Users Input to a Form

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