CSCE 102 – Chapter 9 (Functions and Parameters) CSCE General Applications Programming Benito Mendoza Benito Mendoza 1 By Benito Mendoza Department of Computer Science & Engineering Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 2 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? Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 3 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 Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 4 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? Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 5 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 Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 6 Syntax for function declaration: function someName() { … JavaScript statements … } Reserved word Required Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 7 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() Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 8 Using Functions … function someName() { … } … someName() … Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 9 Using Functions Ch09-Ex-02.html Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 10 Using Functions some HTML a function call some more HTML some HTML function statement 1 function statement 2 … some more HTML Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 11 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. Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 12 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 Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 13 Parameters function printGreeting() { alert(“Hello, Fred”) } function printGreeting() {alert(“Hello, Mary”)} function greetFred() { alert(“Hello, Fred”) } function greetMary() { alert(“Hello, Mary”) } Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 14 Parameters Need a printGreeting function that uses a parameter function printGreeting(personName) { alert(“Hello,” + personName) } Call by personName=“Fred” printGreeting(personName) Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 15 Parameters “Passing” a parameter Main program printGreeting var personName … personName=“Fred” … printGreeting(personName) … personName Fred Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 16 Parameters Ch09-Ex-05.html Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 17 Parameters Multiple parameters Declaring: function sample(a, b, c, d) Calling sample(“Bob”,”Mary”,user1, user2) Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 18 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) Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 19 Parameters Ch09-Ex-07.html Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 20 Image Objects ArrayArray conceptconcept 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 Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 21 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] Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 22 Image Objects Images have attributes: height width src Attribute references: document.images[0].width document.images[3].src Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 23 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 Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 24 Image Objects Solution: id attribute of the img tag Object reference: document.tower.width document.tower.src Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 25 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 Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 26 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 Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 27 Image Objects Ch09-Ex-04.htm Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 28 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 Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 29 Image Rollovers … … Click here for evening events Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 30 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 Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 31 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 Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 32 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” Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 33 Image Rollovers Example.html Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 34 Debugging Exercise Parameter Example function displayMessages(firstMsg, secondMsg, thirdMsg) alert(thirdMsg); alert("The first message is: firstMsg"); alert(The second message is: "secondMsg"); } This is a sample page that uses JavaScript functions and parameters. displaymessages("Ready?", "Let's go", "Not yet"); <input type="button" value="Click here to see some more messages" onclick="displaymessages("Here we go again", "What did you say?", "Time to go")"> Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 35 Debugging Exercise Parameter Example function displayMessages(firstMsg, secondMsg, thirdMsg) alert(thirdMsg) alert("The first message is: " + firstMsg) alert("The second message is: " + secondMsg) } This is a sample page that uses JavaScript functions and parameters. displayMessages("Ready?", "Let's go", "Not yet") onclick="displayMessages('Here we go again', 'What did you say?', 'Time to go')"> Divide and Conquer: Using Functions Adding a Delivery System: Parameters Creating Image Rollovers

CSCE 102 – Chapter 9 (Functions and Parameters) Benito Mendoza 36 Extra ndex.htm