Instructor s Notes Web Programming JavaScript Functions. Web Programming JavaScript Functions

Size: px

Start display at page:

Download "Instructor s Notes Web Programming JavaScript Functions. Web Programming JavaScript Functions"

Roland Higgins
5 years ago
Views:

1 Web Programming JavaScript Functions Quick Links & Text References Why Use Functions? Pages 210, 212 Two Kinds of Functions Pages Function Parameter List Pages 212 Optional Parameters Pages Function Return Values Pages Calling a Function Pages 212 Importing Functions Pages Adding a Method to a Class Pages Global Variables Pages Why Use Functions? Break large chunks of code into manageable pieces Create reusable code modules Two Kinds of JavaScript Functions Anonymous functions Must be declared before they are used Often used in programmer-defined classes Can be sent as parameters to other functions (bizarre) Declaration: var funcname = function(parameterlist) { //function code here Our $ function is an anonymous function Regular functions Place functions anywhere in.js file More like functions/procedures in other languages May be declared before or after the code that calls it. Declaration: function funcname(parameterlist) { //function code here Create functions1.html Write a regular function GetRandom, two parameters (min, max) Return Math.floor( Math.random() * (max min + 1) + min) Display the number on the form. Use a for loop to generate 20 numbers Page 1 of 5

2 Function Parameter List Both types of functions can accept a list of parameters If there are no parameters, the ( ) are still required If there are two or more parameters, separate them with commas Parameters are considered local variables to the function DO NOT add var to any parameter Optional parameters Actually, all parameters are optional Some programmers never put parameters in their function declarations If you know parameters are required, I d include them in the parameter list. JavaScript stores the arguments sent to a function in the predefined arguments object Technically, the parameters are what are included in the function declaration and arguments are what are provided in the function call. arguments is an array of all the objects sent to the function arguments.length returns how many arguments there were arguments[i] provides access to the individual arguments (replace i with a 0- based counter/index) Determining if an optional parameter is missing Check if arguments.length is less than the number of arguments you expect (alternative) if(parmname===undefined) See noshortcircuitand( ) Modify GetRandom to make first parameter optional. If only one parameter provided, min=0 and max=parameter. Discuss why 0 parameters doesn t make much sense for this function (what would max be?) Write function avg with no parameters that accepts any number of arguments. Have function display all arguments, total and average Format Page 2 of 5

3 Function Return Values Functions can optionally return a value return returnvalue; The function call must use or store the return value or the value is lost (see below) If a function call expects a return value and none is provided an error will most likely occur If the function does not return a value, you may still include the return; statement, but it is optional. Structured programming dictates that a function should only have one return statement. In very short functions, you might see this rule broken Write function average with no parameters that accepts any number of arguments. Return average. Calling a Function Both types of functions are called the same way Calling a function that doesn t return a value funcname(argumentlist); The argument list is optional if the function doesn t have parameters or if all parameters are optional. Calling a function that does return a value myvariable = funcname(argumentlist); or document.writeln("square root is " + sqrt(myvariable)); //sqrt returns the square root of a value //Note: the function return value is used //immediately, but not stored Adding a Method to a Class Remember, a method is simply a function embedded in a class The built-in JavaScript classes have many predefined methods However, you may want to define a new method and assign it to a class See TitleCase definition Defining a method for a built-in class is done using anonymous functions Show Volker Tools Import TitleCase.js View source. Note prototype Create a string variable. Display it totitlecase; Page 3 of 5

4 ClassName.prototype.methodName = function(paramlist) { //function (method) code here return avalue; Replace ClassName with the name of the class you re adding to (Date, String, Math, etc.) prototype is a required keyword Replace methodname with the name of your choice As with functions, the parameter list is optional As with functions, the return value is optional, but many methods include one Note the similarities between method declarations and function declarations Calling/invoking the method Unlike functions, methods must be invoked by first referencing the object you wish to apply the method to. result = objname.methodname(arglist); Example: betterstring = mystring.totitlecase(); The result variable assignment is not used when the method doesn t return a value. The arglist is optional based on the requirements of the method In the example, mystring is a String variable (an instance of the String class TitleCase is the name of a method defined using the prototype technique described above (it requires no arguments) TitleCase does return a value which is stored in another String variable named betterstring Page 4 of 5

5 Importing Functions Functions are often stored in JavaScript libraries Files containing nothing but JavaScript function(s), with js extension To import a library, making its functions available: <script type="text/javascript" src="scripts/filename.js"></script> Import DateFormat.js Add JavaScript to display today s date. Use format to change the date format. mydate.format( mmm d ) scripts is a folder within your website containing JavaScript libraries Note the end script </script> tag is required even though no JavaScript is included between the tags Global Variables Global variables are variables defined outside of a function. These variables can be referenced by any function and any code not in a function Code can read or change the variable Use global variables sparingly Local variables are variables defined inside a function Include parameters Only accessible inside that function Generally considered better programming practice to pass data needed by a function as a parameter instead of declaring globally Create a function to display the string variable using a global string variable Discuss why global variable not needed here. Write calcaverage function that calculates the average of a global array. Declare array in html page JavaScript Display contents of array and average in html page Page 5 of 5

More on JavaScript Functions

More on JavaScript Functions Nesting Function Definitions Function definitions can be nested. function hypotenuse(a, b) function square(x) return x * x; return Math.sqrt(square(a) + square(b));