Programming the Web using XHTML and JavaScript Chapter 9 Functions and Variables
Functions
Using Functions Repetitive code Solutions? Same or similar code Used in more than one place in a script Solutions? Type the code over and over Time consuming Prone to typos Copy and paste Better, but still not very efficient Script gets longer and longer What if you make a mistake? What if a change needs to be made?
Using Functions We need a way to: Modularization Package that code in one place Refer to the package whenever/wherever Modularization Re-useable units Self-contained Reduce overall script size Makes it easier to: Find and correct errors Make changes later
Using Functions Objects are modules Can we create our own methods? 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 General Rule of Thumb: Declare functions in the <head> section Ensures browser “knows” of the function before used Use functions in the <body> section “Calling” a function similar to calling a method except object name not required: someName() window.someName()
Resume 7/19
Using Functions <html> <head> <title> … </title> <script …> function someName() { … } </script> </head> <body> … someName() </html> 2 1 5 3 4 6
Using Functions Ch09-Ex-01
Using Functions <head> <script…> function xyz() { function statement 1 function statement 2 function statement 3 } </script> </head> <body> some HTML a function call to xyz some more HTML </body> <body> some HTML function statement 1 function statement 2 function statement 3 some more HTML </body> Acts like
Using Functions Any number of functions can be declared in one <script> element Properly within the <head> section Functions are executed In the order in which they’re called Not the order in which they’re declared
Parameters
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 Allows customizing of function
Parameters function printGreeting() { alert(“Hello, Fred”)} function printGreeting() { alert(“Hello, Mary”)} Big Problem! Duplication function name! Solution: write two functions to greet different persons? function greetFred() { alert(“Hello, Fred”) } function greetMary() { alert(“Hello, Mary”) } Small Problem! More complicated code that doesn’t really have any advantage!
Parameters Need a printGreeting function that uses a parameter Call by 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
function sample(a, b, c, d) {…} sample("Bob","Mary",user1, user2) Parameters Multiple parameters Number of parameter must match function declaration call 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
Images
Image Objects In the 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: Attribute references: 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 Problem if insert a new image in middle
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, can’t change them from JavaScript src property is read-write So: Can’t change original image dimensions Can replace a picture with another one
Assume this is the 3rd image loaded 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 Changing images Ch09-Ex-04.htm
Image Rollovers Create an img tag with the original image Create an <a> element1 (link) that includes event handlers: onmouseover replaces original image with new onmouseout restores original image When user hovers over link the image changes When user leaves link the image changes back Note: 1Creating an anchor is not critical, what is important is creating some object that can have event handlers associated with it.
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 Rollover on text link: Ch09-Ex-05.htm
Image Rollovers Making the rollover code cleaner: 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 Rollover using functions: Ch09-Ex-06.htm Making better use of functions: Ch09-Ex-06a.html
Image Rollovers Problem: Solution: All these images have to be downloaded to the users machine as they are needed E.g. when clicked, mouse-overed, etc Solution: Pre-loaded (pre-cached) images Pre-cached images are loaded at the same time as the other page content
Image Rollovers Process: Image object 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 PTW 9 See Assignment Web Page Grade based on: Appearance Technical correctness of code