No.6 Functions and Variables


JavaScript is written in the event handler on a HTML file.  With Exercise 05-10, a program (alert("Hello, world!");) was written inside the HTML file, so we didn’t make a JavaScript file.

However, as the program gets longer and longer it will be difficult to do so.   Therefore, the program itself is gererally written in a JavaScript file and is called out by the event hanler.

There are cases when one webpage uses multiple programs, so there is a need to name each program.  A function is a bundle of statements that can be called out when needed.

Exercise 06-1(☆)
  1. Make ex06-1.js and fill in the following.
  2. Make ex06-1.html in the same directory, fill in the following and open the file via browser.

“Hello, world!” did not come up from the webpage.  When a funtion { ... } is defined, the  { ... } part is not executed, but is registered as a function so it can be called out.  In this Exercise, sayhello is the name of the funtion.  We will learn why there are parenthesis written after the function name.

Registering a funtion like the exercise is called defining a funtion.

Calling out Functions

Once a function is defined, the program can be executed when we want.

Exercise 06-2(☆)
  1. Open the HTML file from the exercise, display the console and run the following command.
  2. Edit ex06-1.html and add the following inside the body element and reload the page.
  3. What happens when the line is changed to the following?

When we call out the funtion name+() , the funtion defined with that name will be executed.

During the last lesson, we learned that we call out the funtion Math.sqrt when calculating the square root of a number.  Math.sqrt and sayhello are both functions, but Math.sqrt is a funtion defined by the system, and sayhello is a funtion you defined by yourself.


Exercise 06-3(☆☆☆)

Make a funtion saygoodbye,  and set a button which when clicked calls out this funtion and shows the message “Goodbye.”.


Variable Declaration

A variable is like a box that can contain data.  For instance, when we type innerHeight into a console, a number is displayed.  This is a variable used by the browser, which contains the value of the size of the window.


We can make variables of our own.  To do so, we execute the statement var variable_name;.  This is called declaring a variable.

Exercise 06-4(☆)

Enter the following formulas in the web console and confirm the results.

  • x
  • var x;
  • x
  • When a name that hasn’t been defined as a variable or funtion is called out, the Reference Error is returned.
  • When a variable that has no value is called out, undefined is returned.(undefined is not an error)

Assigning the Value of a Variable

Saving data inside a variable is called assigning a value.  We write variable = value; when assigning a value, and var variable = value; to  define a variable and its value at once.

Exercise 06-5(☆☆)
  1. Make ex06-5.js and fill in the following.
  2. Make ex06-5.html and fill in the following.
  3. First click on Greetings.  Then click on Taro→Greetings→Hanako→Greetings.  What value is inside who and why?
  4. Edit ex06-5.js as the following and click on Taro→Greetings→Hanako→Greetings.  Is there any difference?

The following rules exist on where to define the variable.

  • A variable used with more than one funtion needs to be defined outside the funtions.(Generally written on the top of the JavaScript file)
  • A variable used with only one function should be defined inside the function.
Exercise 06-6(☆☆☆☆)

When we click the button Taro and Hanako, there aren’t any movements and you might get anxious.  Edit the file so that when the button is clicked, the message “Taro/Hanako has come” pops up.  Make a new funtion that displays “has come”, and call it out from taro() and hanako().

Argument of a function

On the Exercise, we made two different funtions for taro and hanako.  This wasn’t so difficult because there were only two people, bu what if there were tens or hundreds?

An arugument is used to process multiple data with one function.

  • When calling out a function, the data or variable that we want to pass on is written inside the parentheses.
  • When defining a function, we write a variable inside the parentheses.  The value of the data input on the call out of a funtion, is automatically inserted to this variable.
Example 06-7(☆☆)
  1. Make ex06-7.js and fill in the following.
  2. Make ex06-7.html and fill in the following.
  1. What happens to variables x and who when Taro is clicked?
  2. Use function someone and make a button that greets “Rei”, “Shinji”, and “Asuka”.

When there are multiple arguments, each arguments is separated by commas.

Editing the Page with JavaScript

JavaScript can read and change what is displayed on the webpage.  To do so, we need to use the following two methods.

  • In the HTML file, we mark the place where we want to edit.  There are a few methods to do so, but in this class we will be using the id attribute.
  • In the JavaScript program, we use the value document.getElementById().innerHTML.

For now, let’s look at the example.

Exercise 06-8(☆)
  1. Make ex06-8.js and fill in the following.
  2. Make ex06-8.html and fill in the following.
  • The id attribute and class attribute are alike, but in a HTML file,an id attribute with the same value cannot be used more than once.  In the case of the Exercise above, id=”who” is used in the p element, so in this HTML file, other elements cannot have the value id=”who”.
  • Elements with the id attribute can be edited with JavaScript by using document.getElemetById().innerHTML.  This can be used like variable, and when a new value is assigned, the display on the browser will change as well.

document, getElementById(), innerHTML have the following meaning.

  • document : The source of the page displayed
  • getElementById() : A function which finds the specified ID
  • innerHTML : The content with tags excluded.

By connecting these with a period, the browser will “fetch the content of the specified ID from the source of the current page, and exclude tags”.  To understand the meaning of the period we must study “Objects”, but will not go so far in this class.

Exercise 06-9(☆☆☆)
  1. Take a picture of yourself with a different expression from the self introduction page using PhotoBooth, and save it in the same directory as the previous photo.
  2. Edit the img element no your self introduction page as the following: <div id="..."><img ...></div>
    • A div element doesn’t have any functions by itself, but is used to add id and class attributes.
  3. Make a new JavaScript file, and make a funtion that edits the content of the div element, to change the img element from the first photo to the second photo.
  4. Make a script element inside the head element, to read the JavaScript file we just made.
  5. Make a button(above or below the photo) that corresponds with the funtion you made.
  6. Open the file via browser and confirm that the photo changes when you click the button.
  7. Make a button that returns the photo back to the original.

Executing a Function with a Timer Event

By using the Timer event, we can execute functions by time.

Exercise 06-10(☆)
  • Execute the following command via console.

The setTimeout function has the following two arguments

  • A string that contains a program you want to execute.
  • How many milliseceonds you want to wait.

Double quotes are used in the Exercise above to distinguish them from the single quotes outside alert().

Exercise 06-11(☆☆☆☆☆)

Edit Exercise 06-9 to automatically switch back the photo after you click the button.

Points to check
  • What is a function?
  • How do you define a function?
  • What is a variable?
  • How do you declare variables?
  • How do you assign a value to a variable?
  • What happens when you use arguments?
  • What is the id attribute used for?