44
Web-based Application Development Lecture 13 February 21, 2006 Anita Raja
| Date post: | 21-Dec-2015 |
| Category: |
Documents |
| View: | 213 times |
| Download: | 0 times |
Web-based Application Development
Lecture 13
February 21, 2006
Anita Raja
Programming the Web using XHTML and JavaScript
Chapter 9
Functions and Variables
Using Functions Repetitive code
Same code needed in more than one place in a script
Type the code over and over Copy and paste - still not very efficient Script gets longer and longer What if you make a mistake?
Using Functions We need a way to:
Package that code in one place Refer to the package whenever/wherever
Modularization Re-useable Self-contained Reduce script size Make it easier to find and correct errors or
make changes later
Using Functions Objects are modules
Self-contained Data (properties) Code (methods)
Re-useable Can invoke a method:
At any point in a script Repeatedly
Can we create our own methods?
Using Functions Generally, a function is simply a group of
one or more statements In JavaScript specifically, a function is
A method … of the window object
Functions are created by “declaring” them
Using Functions Syntax for function declaration:
function someName(){ … JavaScript statements …}
Reserved word
Required
Required
Using Functions Good practice to declare functions in the
<head> section Ensures browser “knows” of the function
Use functions in the <body> section “Calling” a function similar to calling a
method except object name not required:someName()
window.someName()
Using Functions<html> <head> <title> … </title> <script …> function someName() { … } </script> </head> <body> … <script …> someName() </script> … <body></html>
1
2
3
4
5
6
Using Functions Ch09-Ex-01.htm
Using Functions
<body>
some HTML
a function call
some more HTML
</body>
<body> some HTML function statement 1 function statement 2 … some more HTML</body>
Using Functions Any number of functions can be
declared in one <script> element (within the <head> section)
Functions are executed in the order in which they’re called, not the order in which they’re declared.
Parameters Parameter/argument: the means by
which data is supplied to a method
confirm(“Are you sure?”)
ultraJava.changeGrind(“coarse”) Why parameters? General code is re-useable
Parameters
function printGreeting() { alert(“Hello, Fred”)}
function printGreeting() { alert(“Hello, Mary”)}
function greetFred() { alert(“Hello, Fred”) }function greetMary() { alert(“Hello, Mary”) }
Parameters Need a printGreeting function that uses a
parameter
function printGreeting(personName) {
alert(“Hello ,” + personName) } Call by
personName=“Fred”
printGreeting(personName)
Parameters “Passing” a parameter
Main program printGreeting
var personName…personName=“Fred”…printGreeting(personName)…
personName
Fred Fred
Parameters Ch09-Ex-02.htm
Parameters Multiple parameters Declaring:
function sample(a, b, c, d)
Calling
sample(“Bob”,”Mary”,user1, user2)
Parameters One-for-one correspondence between
parameter order in declaration and in call
Declaration: function sample(a, b, c, d)
Call: sample(“Bob”,”Mary”,user1, user2)
Parameters Ch09-Ex-03.htm
Image Objects Window object hierarchy Images are children of the
document object Numbered:
document.images[0]
document.images[1]
…
document.images[n]
WindowObject
LocationObject
DocumentObject
HistoryObject
Square brackets required
Numbering begins with
zero
Image Objects Images loaded in the order they appear in
the HTML document Image numbers are assigned in the same
order First image = document.images[0] Second image = document.images[1]
Image Objects Images have attributes:
height width src
Attribute references: document.images[0].width document.images[3].src
Image Objects Problem: referring to images by their
object name is clumsy Have to figure out the order in which
they’re loaded to determine the image’s number
Using document.images[5] isn’t descriptive and makes the script harder to read and understand
Image Objects Solution: id attribute of the img tag
<img src=“eiffeltower.jpg”>
<img src=“eiffeltower.jpg id=“tower”> Object reference:
document.tower.width
document.tower.src
Image Objects height and width properties are read-only Therefore, you can’t change them from
JavaScript src property is read-write So: can’t change original image dimensions
but you can replace it with another one
Image Objects
<img src=“eiffeltower.jpg” id=“tower”>
…
document.images[2].src=“eiffelnight.jpg”
(or)
document.tower.src=“eiffelnight.jpg”
However, height and width of new image will be the same as the original image
Assume this is the 3rd image loaded
Image Objects Ch09-Ex-04.htm
Image Rollovers1. Create an img tag with the original image2. Create an <a> element (link) that
includes event handlers: onmouseover replaces original image onmouseout restores original image
3. When user hovers over link the image changes
4. When user leaves link the image changes back
Image Rollovers
…
<img src=“eiffeltower.jpg” id=“day_tower”>
…
<a href=“nightschedule.html” ¬ onmouseover=“document.day_tower.src=‘eiffelnight.jpg’ ”¬ onmouseout=“document.day_tower.src=‘eiffeltower.jpg’ ”>
Click here for evening events</a>
Image Rolloversfunction nightImage() {
document.day_tower.src=“eiffelnight.jpg” }function dayImage() {
document.day_tower.src=“eiffeltower.jpg”}…<a href=“nightschedule.html” ¬ onmouseover=“nightImage()”¬ onmouseout=“dayImage()”> Click here for evening events</a>
Image Rollovers Problem: All these images have to be
downloaded to the users machine as they needed
Solution: pre-loaded (pre-cached) images
Pre-cached images are loaded at the same time as the other page content
Image Rollovers Process:
Create an image object Load an image into that object
Image object
var nightimage = new image(69,120) Load image:
nightimage.src = “night_tower.jpg”
Assignment Debugging Exercise, p. 266 Correct errors Post corrected document to your Web
space as “Lagerstrom-Ch-9.html” Grade based on:
Appearance Technical correctness of code
The Web Wizard’s Guide to Web Design
Chapter 7
Assembling the Pages
Backgrounds Order of operations:
Background Structure (tables, <div> elements, etc.) Content
Background types: Solid color Textured color Image
Backgrounds Colors
Compatible with other elements (like logos) Contrasts with text for readability Consider printing problems for user
Tables Images
Different layer Tiling
Readable Text
12-point (or larger) Serif font Contrasting headings White space 10-12 words per line Lists bulletted/numbered Don’t trust the tool!
Images
Insert as if text Change size, alignment as appropriate
<img src=“website/images/boat.jpg” width=“200” height=“263” align=“left”>
Sound and Video
Embed <embed src=“website/sounds/boat.aif” width=“200”
height=“263” controller=“yes”>
Link <a href=“website/sounds/yellow.aif”
target=“_new”> Play a boating song! </a>
Forms Select input options
Text boxes Radio buttons Check boxes Select items
Submit Reset Action
Assignment Hands-On Exercise #4, p. 161 Your form should send e-mail to me at
[email protected]. Post the new page to your personal
Web space as “Lengel-Ch-7.html”
Image Rollovers Ch09-Ex-05.htm
Image Rollovers Ch09-Ex-06.htm
