web-based application development
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/1.jpg)
Web-based Application Development
Lecture 13
February 21, 2006
Anita Raja
![Page 2: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/2.jpg)
Programming the Web using XHTML and JavaScript
Chapter 9
Functions and Variables
![Page 3: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/3.jpg)
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?
![Page 4: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/4.jpg)
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
![Page 5: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/5.jpg)
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?
![Page 6: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/6.jpg)
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
![Page 7: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/7.jpg)
Using Functions Syntax for function declaration:
function someName(){ … JavaScript statements …}
Reserved word
Required
Required
![Page 8: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/8.jpg)
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()
![Page 9: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/9.jpg)
Using Functions<html> <head> <title> … </title> <script …> function someName() { … } </script> </head> <body> … <script …> someName() </script> … <body></html>
1
2
3
4
5
6
![Page 10: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/10.jpg)
Using Functions Ch09-Ex-01.htm
![Page 11: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/11.jpg)
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>
![Page 12: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/12.jpg)
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.
![Page 13: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/13.jpg)
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
![Page 14: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/14.jpg)
Parameters
function printGreeting() { alert(“Hello, Fred”)}
function printGreeting() { alert(“Hello, Mary”)}
function greetFred() { alert(“Hello, Fred”) }function greetMary() { alert(“Hello, Mary”) }
![Page 15: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/15.jpg)
Parameters Need a printGreeting function that uses a
parameter
function printGreeting(personName) {
alert(“Hello ,” + personName) } Call by
personName=“Fred”
printGreeting(personName)
![Page 16: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/16.jpg)
Parameters “Passing” a parameter
Main program printGreeting
var personName…personName=“Fred”…printGreeting(personName)…
personName
Fred Fred
![Page 17: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/17.jpg)
Parameters Ch09-Ex-02.htm
![Page 18: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/18.jpg)
Parameters Multiple parameters Declaring:
function sample(a, b, c, d)
Calling
sample(“Bob”,”Mary”,user1, user2)
![Page 19: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/19.jpg)
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)
![Page 20: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/20.jpg)
Parameters Ch09-Ex-03.htm
![Page 21: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/21.jpg)
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
![Page 22: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/22.jpg)
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]
![Page 23: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/23.jpg)
Image Objects Images have attributes:
height width src
Attribute references: document.images[0].width document.images[3].src
![Page 24: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/24.jpg)
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
![Page 25: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/25.jpg)
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
![Page 26: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/26.jpg)
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
![Page 27: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/27.jpg)
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
![Page 28: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/28.jpg)
Image Objects Ch09-Ex-04.htm
![Page 29: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/29.jpg)
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
![Page 30: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/30.jpg)
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>
![Page 31: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/31.jpg)
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>
![Page 32: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/32.jpg)
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
![Page 33: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/33.jpg)
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”
![Page 34: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/34.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
![Page 35: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/35.jpg)
The Web Wizard’s Guide to Web Design
Chapter 7
Assembling the Pages
![Page 36: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/36.jpg)
Backgrounds Order of operations:
Background Structure (tables, <div> elements, etc.) Content
Background types: Solid color Textured color Image
![Page 37: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/37.jpg)
Backgrounds Colors
Compatible with other elements (like logos) Contrasts with text for readability Consider printing problems for user
Tables Images
Different layer Tiling
![Page 38: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/38.jpg)
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!
![Page 39: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/39.jpg)
Images
Insert as if text Change size, alignment as appropriate
<img src=“website/images/boat.jpg” width=“200” height=“263” align=“left”>
![Page 40: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/40.jpg)
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>
![Page 41: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/41.jpg)
Forms Select input options
Text boxes Radio buttons Check boxes Select items
Submit Reset Action
![Page 42: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/42.jpg)
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”
![Page 43: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/43.jpg)
Image Rollovers Ch09-Ex-05.htm
![Page 44: Web-based Application Development](https://reader036.vdocuments.us/reader036/viewer/2022062518/56814c16550346895db915c4/html5/thumbnails/44.jpg)
Image Rollovers Ch09-Ex-06.htm