Variables and Functions

JavaScript Variables

In the previous example, we saw a function being defined like this:

say_hello = …

This is actually much more general than just defining a function. What's actually happening in code this this is that some value is being stored in a variable.

A variable is a way to store a value in our program. In this example, the variable is named say_hello. The = is used to assign to the variable: it takes the value on the right and stores it in the variable named on the left.

This line of code is a variable assignment statement. When a variable assignment statement runs, the value is stored in the computer's memory and the variable name can be used to refer back to that value later.

Just like with class and id values in HTML, variable names should be descriptive and indicate what they are holding.

In JavaScript, any type of value can be stored in any variable, and there are many types the language supports…

Types

Like other programming languages, JavaScript can store and manipulate different types of values.

Numbers

Numbers can be stored and calculated on in probably the obvious ways:

count = 7
pi = 3.1416
more = count + 1
twice_as_much = count * 2

After this code, we have created a variable more currently holding 8 (one more than count had when more was assigned), and twice_as_much holding 14.

As you can see, numbers can be both integers and real numbers with decimal parts.

Strings

In JavaScript, strings are sequences of characters. That is, they represent text. We have seen a string used (but not stored in a variable) in our very first piece of JavaScript code:

alert('Hello world!')

The words in the single-quotes are a string containing twelve characters.

We can also store strings in variables:

greeting = 'Hello'
name = "Becky B Barrington"
personal_greeting = greeting + ' ' + name

As you can see, strings can be wrapped in either single or double quotes. When the + is applied to strings, the strings are joined together.

The last line above joins three strings: the contents of greeting, a string containing a space, and the contents of name, The result is that the variable personal_greeting contains the string 'Hello Becky B Barrington'.

Functions

As we have seen (and will explore more later), functions can be stored in variables.

Objects

An object is a value in JavaScript that can contain other things: numbers, strings, functions, other objects, etc. We haven't seen any objects in JavaScript yet: we will be using objects we get from other code, and will use them in a few simple ways.

We will explore objects further as we encounter them.

The type of information you're dealing with obviously affects what you can do with it. For example, this code makes sense if a and b are both numbers: it will subtract the two values.

result = a - b

If a and b contain strings, then this code will cause an error. Similarly, this code made sense because the built-in thing called alert is a function, so we can call it.

alert('Hello world!')

JavaScript Functions

Let's look again at the first-event.js file:

say_hello = function() {
  alert('Hello world!')
}

This code creates a variable named say_hello. This variable holds a function. Functions are used to is used to contain some logic: it could be a particular calculation, code you want to execute as the result of an event, or any other sensible collection of logic.

Our function definitions will look like this (with a few more parts to be added later):

function_name = function() {
  …
}

This creates a function called function_name. When we call that function (ask that it be executed), the logic in the {…} will run line-by-line. [There is other syntax to define functions in JavaScript as well. We're going to ignore that.]

A function is called by using its name (or if you'd rather think of it this way: the name of the variable that is holding it), and parenthesis after it, like “say_hello()”.

In the HTML file above, we used a function call like this as the value for the onclick property of the paragraph. When you click the paragraph, your web browser runs this JavaScript code, thus calling the function and running the logic in it.

Inside the function say_hello, we call another function alert. This function requires an argument which gives it more information about what it is supposed to do. The argument is put in the parenthesis and is the string 'Hello world!' in our example.

Have a look at the the example page with JavaScript above. Click the paragraph: make sure you see what happens.

Summary

In the last few sections, we have seen many new concepts. This is sort of unavoidable: there are many pieces needed to make any program work. Here is a quick summary of what we have seen:

function: A function is a way to wrap up (and name) some behaviour in a program. We have used alert and created a function say_hello. Functions can be called by putting () after their name, with arguments in the parenthesis if the function needs them.
event: An event is a way to refer to some specific things that happen in the web browser: the user clicks a particular element, the page finishes loading, the user types something in a form. We have seen (and will see more) ways to attach a function call to an event so we can make something happen as the result of the event.
variable: A variable is a way to store some information in our program. and to give it a name so we can refer to it later.
types: Every value in JavaScript has a type (whether it's stored in a variable or just used as part of some calculation). The type determines what information it represents (number, string, function, …), and how we can use it (doing arithmetic on numbers, joining strings, calling functions, …).