Download presentation
Presentation is loading. Please wait.
1
Programming the Web using XHTML and JavaScript
Chapter 9 Functions and Variables
2
Functions
3
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?
4
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
5
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?
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 Required
8
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()
9
Resume 7/19
10
Using Functions <html> <head>
<title> … </title> <script …> function someName() { … } </script> </head> <body> … someName() </html> 2 1 5 3 4 6
11
Using Functions Ch09-Ex-01
12
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
13
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
14
Parameters
15
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
16
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!
17
Parameters Need a printGreeting function that uses a parameter Call by
function printGreeting(personName) { alert(“Hello, ” + personName) } Call by personName=“Fred” printGreeting(personName)
18
Parameters “Passing” a parameter printGreeting Main program
var personName … personName=“Fred” printGreeting(personName) personName Fred Fred
19
Parameters Ch09-Ex-02.htm
20
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)
21
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)
22
Parameters Ch09-Ex-03.htm
23
Images
24
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
25
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]
26
Image Objects Images have attributes: Attribute references: height
width src Attribute references: document.images[0].width document.images[3].src
27
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
28
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
29
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
30
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
31
Image Objects Changing images Ch09-Ex-04.htm
32
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.
33
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>
34
Image Rollovers Rollover on text link: Ch09-Ex-05.htm
35
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>
36
Image Rollovers Rollover using functions:
Ch09-Ex-06.htm Making better use of functions: Ch09-Ex-06a.html
37
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
38
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”
39
Assignment PTW 9 See Assignment Web Page Grade based on: Appearance
Technical correctness of code
Similar presentations
