Created by, Author Name, School Name—State FLUENCY WITH INFORMATION TECNOLOGY Skills, Concepts, and Capabilities

Created by, Author Name, School Name—State Problem Solving PART 4

Created by, Author Name, School Name—State THINKING BIG Abstraction and Functions chapter 20

Copyright © 2003 Pearson Education, Inc. Slide structures in programming > sequence > decision > iteration > abstraction > Today we will work with abstraction

Copyright © 2003 Pearson Education, Inc. Slide 1-5 What is a function? > A function is like a black box. You put data in and magically out pops an answer. > Or in other words, by giving the proper input to a function, the function does the work of calculating the answer. > It also is hiding the detail of the process from the user of the process.

Copyright © 2003 Pearson Education, Inc. Slide 1-6 We can use functions > The “prompt” function in JavaScript. — input was the message we wanted to print — the result was the value that the user typed in. — We did not know how it was working to use it. > Alert is a function that takes in input, but does not return a value. Another term for this kind of function is a procedure.

Copyright © 2003 Pearson Education, Inc. Slide 1-7 Math Object > JavaScript has a built in “object” called the Math object that contains a number of useful built-in functions. > For the currency, we might have decided to round the result to the nearest integer in the new currency. > newCurr = Math.round(newCurr); — Replaces the value in newCurr with a rounded amt. — Note the need to specify Math’s round function.

Copyright © 2003 Pearson Education, Inc. Slide 1-8 Other objects and their functions > This reference will show you the different types of built-in objects and the assumed functions you can use.

Copyright © 2003 Pearson Education, Inc. Slide 1-9 We can use the built in functions OR > We can build our own functions. > Functions have names like other elements. > Functions are removed from the place in which they are used. Typically will be found in the Script tag at the top of the body in the page. > Functions have a parameter list…this is a local variable which is used in the function. > Functions are called or invoked. When we invoke the function, the value that we “pass” the function is loaded into the parameter name.

Copyright © 2003 Pearson Education, Inc. Slide 1-10 CREATING A JS FUNCTION: convertC2F() > Function syntax > Defining convertC2F() function convertC2F( tempInC) { var tempInF; tempInF = (9/5.0) * tempInC + 32; return tempInF; } > Returning the Answer

Copyright © 2003 Pearson Education, Inc. Slide 1-11 Some useful JavaScript functions > document.write – a function that will write the text to the existing html page. > Math.round – rounds a number to the nearest whole number. > Math.abs – returns the absolute value of the number (distance away from 0). > Date() – returns the current date (note January = 0)

Copyright © 2003 Pearson Education, Inc. Slide 1-12 APPLYING FUNCTIONS > The HTML Page to Host JavaScript > How the convertC2F() Function Runs > The document.write() Function > Applying convertC2F() > Applying convertC2F() Again > Reusing Functions

Copyright © 2003 Pearson Education, Inc. Slide 1-13 At this point, build the html page > Turn to page 549 in your book. Build the HTML page that you will use to test your function. > The function convertC2F is shown. Complete it and the document.write function. Test your work with different values of C temps. > Create a second function convertF2C — Formula is TC = (5/9)*(TF-32) — TF would be passed into the function — TC is calculated and returned > Create a second document.write function. > Test your work with different values of F temps.

Copyright © 2003 Pearson Education, Inc. Slide 1-14 Lab exercise > Re-using the convert function for the temperature. > Start with the convert.html script. Change colors as preferred. > Add in the table rows and detail to display other temperature conversions. Include 212 Fahrenheit and 32 Fahrenheit. (Should be 100 C and 0 C respectively.)

Copyright © 2003 Pearson Education, Inc. Slide 1-15 Use functions to > Keep your code clean. Functions in the Script portion of the page can then be referenced in the body making it clearer what is happening. > Reuse code. Anything that must be done multiple times should be done as a function. > Clarify steps. A complex procedure can be broken down into a series of function steps.

Copyright © 2003 Pearson Education, Inc. Slide 1-16 JAVASCRIPT RULES FOR FUNCTIONS > Function Declarations > Selecting Function Names – verbs/action > Parameters > Return Values > Scope of Reference > Local Variables > Global Variables > Multiple Parameters > Calling Functions > Arguments > Parameter Reference

Copyright © 2003 Pearson Education, Inc. Slide 1-17 Figure An HTML page showing the use of the convertC2F() JavaScript function to find the Fahrenheit equivalent of 38°C.

Copyright © 2003 Pearson Education, Inc. Slide 1-18 Figure An HTML source file containing a JavaScript document.write(), and the HTML text used by the browser to create the page.

Copyright © 2003 Pearson Education, Inc. Slide 1-19 Figure The HTML and JavaScript to display a list of equivalent temperatures.

Copyright © 2003 Pearson Education, Inc. Slide 1-20 Figure 20.3 (continued). The HTML and JavaScript to display a list of equivalent temperatures.

Copyright © 2003 Pearson Education, Inc. Slide 1-21 Figure HTML and JavaScript to produce a table of equivalents.

Copyright © 2003 Pearson Education, Inc. Slide 1-22 Figure 20.4 (continued). HTML and JavaScript to produce a table of equivalents.

Copyright © 2003 Pearson Education, Inc. Slide 1-23 Figure The initial Memory Bank interface and its image. This program can be downloaded from er/.

Copyright © 2003 Pearson Education, Inc. Slide 1-24 Figure 20.5 (continued). The initial Memory Bank interface and its image. This program can be downloaded from snyder/.

Copyright © 2003 Pearson Education, Inc. Slide 1-25 Figure 20.5 (continued). The initial Memory Bank interface and its image. This program can be downloaded from snyder/.

Copyright © 2003 Pearson Education, Inc. Slide 1-26 Figure Schematic diagram of the output Math.random() multiplied by 4 to expand to a larger interval, followed by the application of Math.floor() to convert to integer values.

Copyright © 2003 Pearson Education, Inc. Slide 1-27 Figure HTML for the link area of the Memory Bank Web page.

Copyright © 2003 Pearson Education, Inc. Slide 1-28 Figure 20.7 (continued). HTML for the link area of the Memory Bank Web page.

Copyright © 2003 Pearson Education, Inc. Slide 1-29 Figure Final version of the Memory Bank page.