Blake O'Hare .com

Beginner's JavaScript Tutorial, Part 2 - Math, Functions, and Variables

Getting Set Up

Create a new folder somewhere. Create a file called index.html and a file called code.js.
Put the following code in index.html:
<html>
    <head>
        <title>JavaScript tutorial</title>
        <script type="text/javascript" src="code.js"></script>
    </head>
    <body>
        What have I gotten myself into?
    </body>
</html>

In your code.js file, add the following solitary line of code:
window.alert("hi, there");


Open index.html in a browser.

If you are using Internet Explorer, then a little yellow popup thing will appear that will say something along the lines of "OH GOD RUSSIAN HACKER TERRORISTS ARE TRYING TO OWN YOUR COMPUTER, MAN THE BATTLE STATIONS!" Press the button that most closely resembles, "No, this is not the case. Everything is fine". Also, I'd recommend using Chrome instead for this part of the tutorial, anyway.

js_tutorial_1.png

This line of code seems innocent enough, but there are many small components that are worth individually explaining. This line is a function call. A function is a piece of code that has been given a name and is re-usable. This function's name is "alert" and it exists in the "window" object which has been pre-defined by the browser. A function call consists of 4 parts: the name of the function, an opening parenthesis, a list of comma-delimited things that the function needs to know in order to do its job, and a closing parenthesis. In this case, alert only needs 1 thing: the text to display. The semicolon indicates that this is the end of the command.

For the first several parts of this tutorial, we'll be using window.alert to display information since it's quick, dirty, and easy. The only important thing to take away from that last paragraph is: to display stuff in a box, type: window.alert("Thing to display");

Simple Math

Pretty much every programming language supports simple math. JavaScript supports the 4 basic operators and parenthesis. Proper order of operations is followed.
window.alert(1 + 1);

2

window.alert(1 + 3 * 4);

13, not 16

window.alert((1 + 3) * 4);

16

window.alert(5 / 2);

2.5

Like window, there is also another pre-defined object called "Math". It contains many useful functions that do more complex things like rounding, exponents, square root, etc.

window.alert(Math.sqrt(10));

3.1622776601683795

This illustrates several points.

Functions can "return" values. When a function finishes doing its thing, it creates a value of some sort. Then you can imagine that the code where the function is called is then replaced with the value that is returned.

So if you have code that looks like this:
window.alert(Math.sqrt(10));

The Math.sqrt(10) runs FIRST and returns the value of 3.1622776601683795. Then you can pretend the code looks like this:
window.alert(3.1622776601683795);

Then the window.alert runs with the new value.

Another point that was illustrated: functions can be nested inside one another and are executed in the order where the most deeply nested functions run first. This is sort of an extension of the notion of order of operations. Consider functions having the same priority as parenthesis. Start from the inside and work your way outside.

Both functions we've seen so far only take 1 input. Remember how I said that functions have a list of inputs delimited by commas? Let's look at a function that has more than 1 input. I'm hungry for some commas...

Math.pow(8, 2);

This is how you do exponents. The first input is the base and the second input is the power to raise the base by. This returns 64.

Variables

In math, variables are unknown values that you have to solve for. So forget everything you know about variables. Because that's not what variables are in programming.

A variable in programming is a place for temporary storage of values.

var x = 5;
var y = x * 2 + 1;
window.alert(y);
11

When you create a new variable, use the var command followed by the name of your variable. This can be anything with letters, numbers, and underscores (but must begin with a letter or underscore). After that there is an equal sign followed by some expression that you want to set the variable to.

An equals sign means you are storing the value on the right into the variable on the left.

Also, you do not need to use "var" if you re-use a variable name. If you assign a value to a variable "foo"...
var foo = 1;
...then you do not need to use "var" the next time you assign a value to "foo"...
var foo = 1;
foo = foo + 1;


Pop Quiz.

Figure out what the following code snippets yield:
var a = 2;
var b = a * a;
a = b * b;
window.alert(a);


var q = 2;
var t = Math.pow(Math.pow(q, q + 1) + 1, 2);
window.alert(t);


var trick_question = -1;
trick_question * trick_question;
window.alert(trick_question);


Answers

  • First snippet: 16. Note that var was not used the 2nd time "a" was assigned to.
  • Second snippet: 81. The inner pow evaluates to 2 to the 3rd power (8). Add 1 (9), and raise it to the 2nd power (81).
  • Third snippet: -1. Note that when trick_question is multiplied by itself, it is not being stored back in to itself. The 2nd line does absolutely nothing and the value of trick_question stays as -1.