JavaScript Programming/Functions

This lesson introduces JavaScript functions.

Objectives and Skills

Objectives and skills for this lesson include:

• Complete and debug code that uses built-in Math functions
  • Random; round; abs; floor; ceiling; min; max; pow; sqrt
• Complete and debug a function that accepts parameters and returns a value
  • Reusable code; local versus global scope, redefine variables, pass parameters, value versus reference, return

Readings

1. Wikibooks: JavaScript/Functions
2. Wikibooks: JavaScript/Anonymous functions
3. Mozilla: JavaScript/Functions
4. JavaScript Functions

Multimedia

1. YouTube: JavaScript Functions
2. YouTube: JavaScript Tutorial for Beginners - 06 - Functions
3. YouTube: JavaScript Tutorial for Beginners - 07 - Functions Part 2
4. YouTube: JavaScript Tutorial for Beginners - 14 - Return statement
5. YouTube: JavaScript Tutorial for Beginners - 15 - Global and local variables
6. YouTube: JavaScript Tutorial for Beginners - 16 - Pass by value
7. YouTube: Passing by reference vs. by value - JavaScript Tutorial
8. YouTube: JavaScript Functions & Parameters
9. YouTube: Number Methods and Math Objects in JavaScript
10. YouTube: How to Create JavaScript Functions
11. YouTube: Functions and Return
12. How To Create/Use Functions - JavaScript Essentials

Examples

• W3Schools: JavaScript Functions
• Javascript.info Function Basics
• W3Schools: JavaScript Function Definitions
• W3Schools: JavaScript Function Parameters
• W3Schools: JavaScript Math Object
• W3Schools: Javascript toFixed() - converts a number into a string, rounding to a specified number of decimals
• Example Code
• Mindsers Blog: How does the return statement work?
• MozillaDeveloper: Functions - Javascript
• JavaScript Inputs

Activities

Complete the following activities using external JavaScript code. Apply JavaScript best practices, including comments, indentations, naming conventions, and constants. Prompt the user for input and use HTML elements for output. Use separate functions for each type of processing. Avoid global variables by passing parameters and returning results. Create test data to validate the accuracy of each program. Add comments at the top of the program and include references to any resources used.

1. Create a program to prompt the user for hours worked per week and rate per hour and then calculate and display their weekly, monthly, and annual gross pay (hours * rate). Base monthly and annual calculations on 12 months per year and 52 weeks per year.
2. Create a program that asks the user how old they are in years, and then calculate and display their approximate age in months, days, hours, and seconds. For example, a person 1 year old is 12 months old, 365 days old, etc.
3. Review MathsIsFun: US Standard Lengths and Metric - US/Imperial Conversion Charts. Create a program that asks the user for a distance in miles, and then calculate and display the distance in yards, feet, and inches, or ask the user for a distance in miles, and then calculate and display the distance in kilometers, meters, and centimeters.
4. Review MathsIsFun: Area of Plane Shapes. Create a program that asks the user for the dimensions of different shapes and then calculate and display the area of the shapes. Do not include shape choices. That will come later. For now, just include multiple shape calculations in sequence.
5. Create a program that calculates the area of a room to determine the amount of floor covering required. The room is rectangular with the dimensions measured in feet with decimal fractions. The output needs to be in square yards. There are 3 linear feet to a yard.
6. Create a program that helps the user determine how much paint is required to paint a room and how much it will cost. Ask the user for the length, width, and height of a room, the price of a gallon of paint, and the number of square feet that a gallon of paint will cover. Calculate the total area of the four walls as 2 * length * height + 2 * width * height . Calculate the number of gallons as: total area / square feet per gallon . Note: You must round up to the next full gallon. To round up, use the Math.ceil function. Calculate the total cost of the paint as: gallons * price per gallon.

Lesson Summary

• A JavaScript function is a block of code designed to perform a particular task.
• Indent JavaScript code blocks (functions, conditions, loops, comment blocks, etc.) 2 spaces for each indent level.
• Functions break down code into reusable blocks of code each of which performs a specific task.
• Code inside a function is not executed at the time of declaration. A function has to be called upon (invoked) first.
• JavaScript function expressions can invoke themselves.
• JavaScript functions do not check the number of arguments received. Missing arguments are set to undefined.
• JavaScript functions do not check the data type of passed arguments.
• JavaScript functions can only return one value.
• A key benefit to using functions is that breaking. program down into smaller, simpler tasks makes it more manageable and maintainable.
• Functions can be used as values.

Key Terms

anonymous function

A function that was declared without any named identifier to refer to it. As such, an anonymous function is usually not accessible after its initial creation.

argument

The real value passed to (and received by) the function.

arguments object

An array of the arguments passed in when the function is invoked. The arguments object can be used to access arguments when more arguments are passed to the function than parameters declared by the function definition.

function

A block of code designed to perform a particular task when the code is invoked. A JavaScript function can be defined using the function keyword.

function call

The declaration of the function by its self doesn't do anything. In order to execute that code, the function must be called using the name given when the function was declared, and parenthesis "()" with parameters if needed.

function expression

A function that can be stored in a variable. After a function expression has been stored in a variable, the variable can be used as a function. Functions stored in variables do not need function names. They are always invoked (called) using the variable name.

global variable

A variable declared outside a function.

invocation

The code inside the function will execute when "something" invokes (calls) the function.

local variable

A local variable is a variable which is either a variable declared within the function or is an argument passed to a function.

parameter

A name listed in a function definition.

return

Ends function execution and returns a value in the place the function was invoked.

scope

Refers to the visibility of variables and methods in one part of a program to another part of that program (local and global variables).

undefined

The undefined property indicates that a variable has not been assigned a value, or not declared at all. It is a variable in global scope.

See Also

• Wikipedia: Modular programming
• Wikipedia: Subroutine
• Wikipedia: Parameter (computer programming)
• Wikipedia: Scope (computer science)
• Wikipedia: Naming convention (programming)
• Function Declaration vs. Function Expression
• JavaScript Functions — Understanding The Basics
• MDN web docs - Functions
• Codecademy: Functions
• Mr. Bool: Understanding Random Function
• TutorialsTeacher: JavaScript Function
• JavaScript Info: Introduction to Browser Events
• sebhastian.com: Return multiple values from JavaScript function call
• W3Schools.com: Input types
• W3Schools.com: HTML DOM Attribute value

References

← Variables and Expressions

JavaScript Programming

Events →