JavaScript Functions


Slides

Slides Here!


Additional Info


In Class Exercises (ICEs)

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

For this exercise you should take the Collect_Call_Receive.html file and modify it, rather than starting from scratch.

Define a function named NumberMultiplier( num1, num2 ).  This function will be given two numbers (num1 and num2), it will then multiply them together and return the result.  The function itself will NOT interact with the web page directly.  To be clear: the function itself will NOT get the contents of the textboxes, nor will it display the result on the page itself.

Instead, have the click event handler for a button collect up the two numbers from two separate on-page text boxes, then call the function, then finally display the result on the page.

Part 2: Creating and Calling a Function That Finds The Largest Number

For this exercise you should take the Collect_Call_Receive.html file and modify it, rather than starting from scratch.

Add another textbox to the form, so that there's three boxes, total.

Next, create a flowchart or pseudocode for a function named FindMax(numA, numB, numC)
When the button is clicked the page should collect up all three numbers and give them to FindMax.  FindMax should return the largest of the three numbers back to the event handler.  The event handler should then display a message on the page informing the user what the largest number is. 

When sketching out the logic for this try and find a way to concisely compare the numbers.  Think about what steps you might do, and in what order, in order to accomplish this task.

Once you're done with your pseudocode talk with some of the other groups around you and see what they've come up with.  Talk about the pros & cons of each solution for a bit.

Lastly implement your flowchart (i.e., write code that does what your flowchart says it should)

Part 3: Functions: min from scratch

For this exercise start with the basic jQuery starter template (which was provided during a prior lecture) and focus on using the procedure explained in class to create a new function. 

Define a function named min(A, B) which takes two parameters (A and B) and returns the one that's smaller.
Since this function strongly resembles the one that you created during the prior lecture this shouldn't be too hard (and you've always got the solution from the prior class to compare to) - instead, focus on using the process that we talked about in class to create a new version of this function from scratch.

Like with the other examples, the event handler should collect up the data, call the function with that information, and then update the page to display the result.

Part 4: Functions from scratch, plus other, non-function work to do.

For this exercise start with the PickAFunction.html file (just to avoid having to re-type the radio buttons onto the page).  You must implement the functions defined on the page (Add, Subtract, and Divide) so that when the user types in, say, 10 and 20 and picks 'Divide' and then clicks the button the page will display

10 divided by 20 is 0.5

(Note that the answer, 0.5, doesn't need to appear exactly as it does above  - anything that's mathematically correct is fine.

For this exercise you'll notice that while we still want to follow the collect-call-receive pattern for calling the functions there's other work that needs to be done as well (namely, figuring out which radio button was selected).  Notice that we're not trying to jam all the work into one or more functions that we call - it's entirely OK for the click event handler to do some work, too.