1. Web-based Application Development Lecture 13 February 21, 2006 Anita Raja

2. Programming the Web using XHTML and JavaScript Chapter 9 Functions and Variables

3. 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?

4. 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

5. 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?

6. 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

7. Using Functions Syntax for function declaration: function someName() { … JavaScript statements … } Reserved word Required

8. Using Functions Good practice to declare functions in the section Ensures browser “knows” of the function Use functions in the section “Calling” a function similar to calling a method except object name not required: someName() window.someName()

9. Using Functions … function someName() { … } … someName() … 1 2 3 4 5 6

10. Using Functions Ch09-Ex-01.htm

11. Using Functions some HTML a function call some more HTML some HTML function statement 1 function statement 2 … some more HTML

12. Using Functions Any number of functions can be declared in one element (within the section) Functions are executed in the order in which they’re called, not the order in which they’re declared.

13. 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

14. Parameters function printGreeting() {alert(“Hello, Fred”)} function printGreeting() {alert(“Hello, Mary”)} function greetFred() { alert(“Hello, Fred”) } function greetMary() { alert(“Hello, Mary”) }

15. Parameters Need a printGreeting function that uses a parameter function printGreeting(personName) { alert(“Hello,” + personName) } Call by personName=“Fred” printGreeting(personName)

16. Parameters “Passing” a parameter Main program printGreeting var personName … personName=“Fred” … printGreeting(personName) … personName Fred

17. Parameters Ch09-Ex-02.htm

18. Parameters Multiple parameters Declaring: function sample(a, b, c, d) Calling sample(“Bob”,”Mary”,user1, user2)

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

20. Parameters Ch09-Ex-03.htm

21. 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

22. 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]

23. Image Objects Images have attributes: height width src Attribute references: document.images[0].width document.images[3].src

24. 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

25. Image Objects Solution: id attribute of the img tag Object reference: document.tower.width document.tower.src

26. 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

27. Image Objects … 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 3 rd image loaded

28. Image Objects Ch09-Ex-04.htm

29. Image Rollovers 1. Create an img tag with the original image 2. Create an 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

30. Image Rollovers … … Click here for evening events

31. 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

32. 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

33. 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”

34. 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

35. The Web Wizard’s Guide to Web Design Chapter 7 Assembling the Pages

36. Backgrounds Order of operations: Background Structure (tables, elements, etc.) Content Background types: Solid color Textured color Image

37. Backgrounds Colors Compatible with other elements (like logos) Contrasts with text for readability Consider printing problems for user Tables Images Different layer Tiling

38. 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!

39. Images Insert as if text Change size, alignment as appropriate

40. Sound and Video Embed Link Play a boating song!

41. Forms Select input options Text boxes Radio buttons Check boxes Select items Submit Reset Action

42. Assignment Hands-On Exercise #4, p. 161 Your form should send e-mail to me at lliu@uncc.edu. lliu@uncc.edu Post the new page to your personal Web space as “Lengel-Ch-7.html”

43. Image Rollovers Ch09-Ex-05.htm

44. Image Rollovers Ch09-Ex-06.htm