Title: Introduction to Programming the WWW I
1Introduction to Programming the WWW I
- CMSC 10100-1
- Winter 2004
- Lecture 16
2Todays Topics
- Expressions and statements (contd)
- Using events
- Working with Objects (window, location, history
and navigator) - Working with Forms
3Review 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
4Expressions 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)
6Logical Operators
- Examples
- BooleanVariables.html
- LogicalExamples.html
7Expressions 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,
8Expressions 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
9Expressions 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
10Expressions 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.
11Expressions and Operators
- String Object
- Parsing using the split() built-in function.
- Example
- var myVar John Barr
- var newVar myVar.split( )
- newVar contains John, Barr
12Expressions 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
13Expressions and Operators
- Example
- StringExamples.html
14Expressions 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
15Expressions 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 (,)
16Decision Making Statements
- if statements
- ifelse statements
- Nested if statements
- switch statements
17Decision 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
18Decision 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)
19Decision 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)
23Decision Making
- if Statements
- Conditional Expression
- Can consist of
- Comparison operators
- Logical operators
- Combination of the two
- Must resolve to Boolean value
24Decision 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)
26Decision 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)
29Decision 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)
-
30Decision 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)
32Repetition Statements
- while statements
- dowhile statements
- for statements
- break/continue statements
33Repetition
- 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
34Repetition
- 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)
35Repetition
- while Statements
- Example
- var count 1
- while (count lt 5)
- document.writeln(count)
- count
-
- document.writeln(You have printed 5 numbers.)
36(No Transcript)
37Repetition
- while Statements
- Example
- var count 10
- while (count gt 0)
- document.writeln(count)
- --count
-
- document.writeln(We have liftoff.)
38(No Transcript)
39Repetition
- while Statements
- Example
- var count 1
- while (count lt 100)
- document.writeln(count)
- count 2
-
40(No Transcript)
41Repetition
- 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
42Repetition
- 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)
45Repetition
- 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)
-
46Repetition
- 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)
50Repetition 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)
54Using 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
55Using 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
56Using 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)
58Using 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)
61Using 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
62Using Events
- Example ChangedValue.html
63Using 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
64Using 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)
67Using Events
- More examples
- warnuser.html
- confirmLinks.html
68Using 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!
69Using 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!
70Using 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
71Using Events
- Examples
- testStatusBar.html
- CorrectStatus.html
- BodyParts.html
72A 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
73More 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
74Using Events with Image Maps
- Examples
- ShowCountry.html
- Changing images with MouseOver and MouseOut
events.
75Image 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
76Image 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
77Using Events
- More examples
- ImageOver.html
- ShowAnimal.html
- ShowAnimal2.html (uses functions)
- FamilyImageMap.html
78Working 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
79Working 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)
81The Location Object
- Example
- location.href http//www.uchicago.edu
- Will cause the browser to open the uchicago home
page
82(No Transcript)
83The 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
84The 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.
85The Location Object
- Example
- Redirect.html
- Redirect2.html
86Working 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)
88Working with the History Object
- The History Object Example
- http//www.comptechdoc.org/independent/web/cgi/jav
amanual/javahistory.html
89Working with the Navigator Objects
- The Navigator Object
- Used to obtain information about the current web
browser - Typically used to identify browser
90(No Transcript)
91Working 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)
92Working 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
93Validating 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
94Validating 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)
96Validating 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
97Validating 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
98Validating 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
99Validating 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
100Validating 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)
103Validating 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.)