ICE LECTURE In Class Exercises - Functions

Note: Please keep the programs that you create today, in case you have a question about your grades for the ICEs at the end of the quarter. When you're working with a partner, each person should save their own, individual copy.

ICE Part 1: Refactoring jQuery code to use

Find a web page that you have already created that uses jQuery to handle a button click event.  Save a copy in your folder for today's lesson, and then modify it so that instead of using an anonymous function to handle the click event you instead pull that function out, give it a name, and define it above the document.ready() line.

ICE Part 2: Creating and Calling a Function That Has Parameters And Returns A Value

Start  by saving a copy of the Params_Return_Values.html file.  For this exercise you should do your work by modifying that file.

Define a function named max(). One could describe the behavior of the max function as: "max() should return the largest of two numbers that were passed to it as parameters."  Another way of describing the max function is using an "IPO table" (described briefly here )(note that you are not required to know anything about (nor produce your own) IPO tables or IPO diagrams - the link was purely for your erudition)

Create a click event handler for a button that will collect up the two numbers from two separate on-page text boxes (you'll need to create these, too), then call the max() function, then finally display the result on the page.

Function: max
Input: Parameters: Two integers, named whatever you like.  Naming them something like num1 and num2 might be good.

User Input: None

 
Processing: This function will take the two parameters, compare the two of them, and return whichever one is larger.
If the two values are the same then that value will be returned (this will happen if someone calls, say max( 5, 5)
Output: Return Value:
The larger of the two parameters, as described under 'processing'

Output To User: None

 

ICE Part 3: Functions & the Accumulator Pattern: makeBold

For this exercise you can continue to build on the page you used for the prior exercise; please add add buttons, textboxes, etc, as you need them.

Define a function named makeBold()., as described in the IPO table below.

Set up your page so that when the user clicks on a button, a function named testMakeBold will be called.  testMakeBold will call your makeBold routine, and then testMakeBold will take the result from makeBold and display it on the web page.  Here's an example of how testMakeBold might call your makeBold function:

function testMakeBold() {
    var myString = "Hello, World!";
    var myBoldString = makeBold(myString);
    // myBoldString is now "<B>Hello, World!</B>" - put this on the page somewhere
}

The way that you then call the testMakeBold function as your event handler is:

$(document).ready(function(){ // still an anonymous function
    $("#ID_FOR_YOUR_BUTTON_GOES_HERE"). click( testMakeBold );
    // etc
});

Function: makeBold
Input: Parameters: A single string parameter, named something like textToBold

User Input:
None

 
Processing: This function will take the textToMakeBold variable, and ‘wrap’ it in the HTML tags that are needed to make the parameter into an bold element. 

Namely, this means that the function will need to pre-pend “<b>” onto the start of the string, and will need to append “</b>” onto the end of the string

Output: Return Value:
The function will then return the string that consist of textToMakeBold, plus the stuff that was concatenated onto either side (as described above).

Output To User: None