JavaScript Functions


Slides

Slides Here!


Additional Info



In Class Exercises (ICEs)

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.

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

 

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

 

Part 4: Functions: extending the Branching Adventure game - OPTIONAL

Download the .ZIP file containing the Branching Adventure, and add at least two new scenes to the game. You could always use the numbered imaged that are provided in the .ZIP (under the "DebuggingImages" folder).

In order to do this you'll need to choose a name for the scene (e.g., "ChooseNextAdventure", which you might do after the prince(ss) is rescued), then define the setup_ChooseNextAdventure() function which you will call in the appropriate prior scene(s) (in this case, you'll want to replace the gameWon scene (in which currentState is 9) with your own scene).  Once you confirm that you're able to get to the new scene (i.e., by playing the game) you should then add a handle_ChooseNextAdventure() so that the player can then go to another scene (either a prior scene in the existing game, or else a new scene that you will create with it's own setup_ and handle_ functions).

Since this exercise are more open-ended (i.e., you can choose what you want to do, exactly) there is no IPO table for the functions that you will implement.

Part 5: Functions: extending the Branching Adventure game with a three-button choice - OPTIONAL

Modify an existing scene so that instead of having just two choices, the player will have three choices. 

Personally, I'd recommend modifying one (or both) scenes where the player confronts the dragon.  "Hide under a rock" might be a fun choice, but you can come up with whatever you'd like.

Since this exercise are more open-ended (i.e., you can choose what you want to do, exactly) there is no IPO table for the functions that you will implement.