1 / 44

Efficient Web Development using Functions in JavaScript | Lecture Notes

Learn how to optimize web scripting by utilizing functions for modularization, reusability, and error correction. This guide covers function declaration, parameters, and working with image objects in JavaScript.

dermot
Download Presentation

Efficient Web Development using Functions in JavaScript | Lecture Notes

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. Required Using Functions • Syntax for function declaration: function someName() { … JavaScript statements … } Reserved word Required

  8. 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()

  9. Using Functions 2 <html> <head> <title> … </title> <script …> function someName() { … } </script> </head> <body> … <script …> someName() </script> … <body> </html> 1 5 3 4 6

  10. Using Functions • Ch09-Ex-01.htm

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

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

  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 printGreeting Main program var personName … personName=“Fred” … printGreeting(personName) … personName Fred 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 <img src=“eiffeltower.jpg”> <img src=“eiffeltower.jpg id=“tower”> • 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 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

  28. Image Objects • Ch09-Ex-04.htm

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

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

  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</a>

  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, <div> 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 • <img src=“website/images/boat.jpg” width=“200” height=“263” align=“left”>

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

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

More Related