Web-based Application Development

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

Required Using Functions • Syntax for function declaration: function someName() { … JavaScript statements … } Reserved word 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 2 <html> <head> <title> … </title> <script …> function someName() { … } </script> </head> <body> … <script …> someName() </script> … <body> </html> 1 5 3 4 6

Using Functions • Ch09-Ex-01.htm

Using Functions <body> some HTML function statement 1 function statement 2 … some more HTML </body> <body> some HTML a function call 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 printGreeting Main program 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] 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 Assume this is the 3rd image loaded <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

Image Objects • Ch09-Ex-04.htm

Image Rollovers • Create an img tag with the original image • Create an <a> element (link) that includes event handlers: • onmouseover replaces original image • onmouseout restores original image • When user hovers over link the image changes • 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 Rollovers function 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 lliu@uncc.edu. • 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

Web-based Application Development