Javascript 01

This is the canvas. The canvas is cool because you can use it to create games, graphics, animations, whatever.

Can you get something that supports this canvas

In order to learn how to use the canvas, you must learn Javascript.

JS is fairly simple and casual, and can be picked up easily. Once you learn the basics, you can quickly dive into the canvas to start making graphics.

To start off, let's look at JS keywords.

Part 1: Basic JS Keywords

The function keyword

(Nearly) all actions in Javascript are done through functions.

Functions are created through the function keyword, followed by a given name.

For instance, if you wanted a function that printed out the numbers 1 to 10 in a line, you could type the following:

function from1to10()
{
  [code goes between curly braces]
}

Note that the name of the function doesn't matter, so long as it isn't a key word. But this function isn't done yet: it doesn't actually do anything. So let's add some code.

The var keyword

var, short for variable, is the fundamental unit of JS.

It can represent a number (5), a string ("James"), an array ([1, 2, 3, 4]), objects, and even functions, although that can get confusing.

Now, observe the following piece of code.

var x = 2;
x = 6;
var test = 5.129319;
var string = "test";
var y = 5;

The "=" operator assigns a variable a certain value.

After declaring a variable with var, you don't have to use var again for the same variable. Hence, var was not used for x = 6.

You can do lots of math things with variables, as you might assume. Here's a quick list. Assume that x and y are assigned to the values given in the previous example.

var q = x + y;      //q is set to the value of 2 + 5.
var r = x * y;      //r is set to the value of 2 * 5.
var s = x - y;      //s is set to the value of 2 - 5.
var t = x / y;      //t is set to the value of 2 / 5.
var u = x % y;      //u is set to the remainder of 2 / 5.
var v = Math.pow(x, y);     //v is set to 2^5, or 32.

And so on. There's a great variety of Math functions, such as Math.sin(radians), that are available.

Random Fact! Math.random() creates a random number between 0 and 1.

Strings can also be added together, called concatenation.

Easy stuff. Now, for loops!

The for keyword

Creates a loop that repeats for a set amount of time. Look at the code below.

var x = 0;
for (var i = 0; i < 5; i++)
{
    x += i;
}   
alert(x);

In case you don't know, alert() is a function used to broadcast a JS message to the webpage. Like this. (Click on the red)

In a for loop, there are three parameters (the things between the parentheses), separated by the ';'

for (variable; the condition under which the for loop will run once; what to change the variable by)
{
  //code... 
}

So, in the first for loop shown, we have a variable i that starts at 0 (var i = 0). This loop will continue while i is less than 5 (i < 5), and after each time the loop goes through once i will be incremented by 1 (i++, which is the same as i = i + 1 or i += 1).

Knowing all this, what will the for loop do?

Everytime the for loop goes through, x has i added to it. The first time through the for loop, i == 0, so 0 is added to x. The second time, i == 1, so 1 is added to x. The for loop will run 5 times in total.

When alert(x) is finally called, x == 10 (0 + 1 + 2 + 3 + 4). Yay.

Now, how would we finish from1to10()?

Part 1 Exercises

Note that the given answer is not necessarily the only way to do the problem.

1) Finish function from1to10() so that it prints out "1 2 3 4 5 6 7 8 9 10" using alert(). Hint: use a string. answer

function from1to10()
{
  var x = 0;
  for (var i = 0; i < 5; i++)
  {
      x += i;
  }
  alert(x);
}

2) Change from1to10() so that it prints out numbers 1 through 10 one at a time using alert(). Hint: you only need to change one line of code from the previous question. answer

function from1to10()
{
  for (var i = 1; i < 10; i++)
  {
    alert(i);
  }
}

3) Consider the following code:

var x = 7;
var sum = 0;
for (var i = 0; i < x; i++)
{
    sum += 5;
}
var z = sum % 10;
alert(z);

What would alert(z) print? answer

5

4) Write a function averageToN(n) that takes sums up numbers from 1 to n and prints the average.

5) Consider the following for loops:

for (var i = 0; i < 10; i++)
{
  console.log("A")    //console.log() prints a message out to a browser console
}
for (var i = 1; i <= 10; i++)
{
  console.log("B")
}

How many times is "A" printed to the console? How about "B"? answer

Both A and B are printed exactly 10 times.