Functions

CS133JS Beginning Programming: JavaScript

Topics by Week
1. Intro to JavaScript programming	6. Arrays
2. Functions, Variable scope, Operators and Expressions	7. Objects
3. Conditional Statements	8. Methods
4. Loops	9. DOM
5. Midterm	10. Final

Introduction

Q and A

How is last week's lab assignment going?
- You should have posted a beta version of part 2 for your lab partner to review.
- Code reveiws are due tomrrow.
- Production version is due Thursday.
Remember to take this week's reading quiz before class time on Wednesday!
Does anyone have any general questions about anything?

Review

This review is selective. These are the concepts we need for todays new topics.

What is a variable?

How is it used?

Example:


var count = 1;
count++;
console.log(count);

What is a Data Type?

What are the primitive data types¹?
How does JavaScript determine the type of a variable²?
Why does type matter?

Example:


var score = 0;
var name = "Allison";
var submitted = true;
console.log(typeof score);
console.log(typeof name);
console.log(typeof submitted);

JavaScript Functions

Linking to an External JS File

We often put all our functions in a separate file. The file that holds the functions should have .js as the file extension.

To use the .js file in your HTML file, add this the <head> element:


<script src="functionPractice.js"></script>

We will use this for the JavaScript code in the examples below. (We won't use it to write output in an HTML element... yet).

What a Function is

Definition of a function in math

In math, a function has: input, operation(s), output f(x) = 2x Example: Coffee grinder

Functions we’ve already seen

document.write
prompt
alert

Why Use Functions?

They let us reuse code without copying and pasting it.
They make our code DRY (Don't Repeat Yourself).
We can break code into smaller, more manageable parts.
Functions have names that help us remember what they do.
Functions can be tested independently.
Variables can be isolated into local scopes inside functions.

Writing and Calling our Own Functions

We can use pre-written functions, or write our own. We call this defining a function.

A simple function

This function has no inputs and put's its output in an alert.

This is the function definition.


function helloWorld()
{
  alert("Hello world");
}

This is the function call.
```
helloWorld();
```
Try this in the console.
Now put the code into our files:
- Put the function definition in FunctionPractice.js.
- Put the function call inside a script element in an HTML file.

A function with one parameter

Define a function with a single parameter and put it in FunctionPractice.js.


function hello(name)
{
  alert("Hello " + name);
}

Call the function in FunctionPractice.js from within a script element.
Note that when we call a function, we call the thing we put between the parenthesis an argument (not a parameter).
```
  hello("Brian");
```

A function with a parameter and a return value

Example:

Put the function definition into practice.js


 function toPercent(decimal)
 {
  return decimal * 100 + "%";
 }

Call it from the console: We see the value returned from this function in the console. If we try the same thing with the previous function, do we see a value that was returned to the console? Explain.
```
xxxxxxxxxx
toPercent(0.25);
```

Call it from a script element, use document.write to show the result


xxxxxxxxxx
document.write("<p>Percentage: " + toPercent(0.25) + "!</p>");

Call it from a script element using inner.HTML function to show the result:


xxxxxxxxxx
document.getElementById("answer").innerHTML = toPercent(0.25);

A function can have more than one parameter

A function definition:


xxxxxxxxxx
function fullName(firstName, lastName)
{
    return firstName + " " + lastName;
}

The function call:


xxxxxxxxxx
document.getElementById("name").innerHTML = fullName("Tony", "Stark");

Practice: a function with all the combinations

Let's write a function is for a math quiz. It will do the following:

Takes two numbers as parameters and then shows them to the user in a prompt asking for the sum.
The user answers, the function checks the answer³.
The function returns true or false.

Think about how you would write this function, and then let's write it together.

We can test this function in the console, and then in a web page.

Summary: Parts of a function

header
- name
- parameters (optional)
Body
- code that does operations
- return statement (optional)

Writing Output into HTML Elements

Last week we learned to write html into a web page using document.write. Now we will learn to put our JavaScript output into existing HTML elements.

Using getElementById and innerHTML


x
<p id="answer"></p>

<script>
  var p = document.getElementById("answer");
    p.innerHTML = 2 * 3;
</script>

The getElementById function finds the HTML elemet with the id that is passed to the function (in the paraethesis) and returns a reference to that element. In this example, the referenced to the paragraph element is stored in the variable p. Think of the reference as an address for the element--a way to access the element later.

The innerHTML property represents the text that goes between the tags. In this case, when we assign a value to p.InnerHTML it will go between the <p> and </p> tags.

Combining statements

We can get the element and assign a value to it's innerHTML all in one statement:


xxxxxxxxxx
document.getElementById("answer").innerHTML = 2 * 3;

Notes

Vocabulary

Expression: A combination of variables, operators, and functions that produce a value. In other words, a chunk of code that can put a value into a variable.
DOM: Document Object Model. The DOM is the HTML API for JavaScript.
API: Application Programming Interface. This is a set of functions (aka methods) that can be called by code in an application.
Interface: A point of interaction between a piece of software and something or someone else. Interfaces are at boundaries.

References

W3Schools

What is the HTML DOM?

HTML DOM innerHTML Property

Functions

Beginning JavaScript Lecture Notes by Brian Bird, written in 2018, revised in 2024, are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

1 Primitive data types: number, string, boolean, undefined ↩

2 It is more accurate to say "the data type of the value contained by the variable" since varaibles themselves don't have data types. ↩

3 We haven't learned about boolean operators yet, but we'll use one anyway: == is a boolean comparison operator. We can use it to compare two values, if they are equal the result will be true, otherwise the result will be false. For example: var isCorrect = sum == answer assuming sum is the actual sum of two numbers and answer is the answer given by the user. ↩

Functions

Table of Contents

Introduction

Q and A

Review

JavaScript Functions

Linking to an External JS File

What a Function is

Definition of a function in math

Functions we’ve already seen

Why Use Functions?

Writing and Calling our Own Functions

A simple function

A function with one parameter

A function with a parameter and a return value

A function can have more than one parameter

Practice: a function with all the combinations

Summary: Parts of a function

Writing Output into HTML Elements

Using getElementById and innerHTML

Combining statements

Notes

Vocabulary

References

W3Schools