CHAPTER 2

JavaScript Basics

var num3 = 400;

Add Variables

Variables can be used in place of numbers for arithmetic. A variable’s current value will be used for the calculation if arithmetic is performed using a variable. To add num0 and num1 and assign the result to sum, do the following:

1. Below the Listing 2-2 code you entered, type in the code shown in Listing 2-3.

   Listing 2-3.  Adding Variables

   sum = num0 + num1;

var result0 = 1 + 2 * 3;        //result0 will be 7
var result1 = (1 + 2) * 3;      //result1 will be 9

Check the Value of a Variable

To see the value of sum, do the following:

1. Below your current code, type in the code shown in Listing 2-5. The document.write() command tells the program to display whatever is within the parentheses on-screen, and uses the plus sign to combine, or concatenate, values together to display a final result. Commands like this are called methods, and can be identified by the parentheses at the end of the method name. The period before write indicates that it is a method of the document object, a predefined set of code allowing JavaScript to have access to the browser window. We’ll cover objects in more detail later.

   Listing 2-5.  Displaying the Value of Sum on the Screen

   document.write("Total amount = " + sum);

2. Click the Run button. (We will refer to this simply as Run hereafter.) The preview area should show “Total amount = 300”.

If you would like to check your code against a finished example, you can find one at http://code.9leap.net/codes/show/19823.

Manipulate a Variable Using Itself

Many games contain a score that is constantly updated when a player gets points. To update this score, the variable containing it must be increased. Do the following to see how:

1. Clear the code you wrote up to Listing 2-5.
2. Type in the code shown in Listing 2-6.

   Listing 2-6.  Manipulating a Variable by Referencing Itself

   var score = 10;
   score = score + 20;
   document.write(score);

3. Click Run. The preview screen should show “30.”
4. Replace score = score + 20; with score += 20;
5. Click Run again. The result is the same. Step 4 uses an abbreviated form of the self-referencing operation called a compound assignment operator.

Manipulate a Variable Using Incrementation

When a variable needs to be increased by a value of 1, an even more abbreviated operator can be used. Do the following to see it in action:

1. Clear your current code.
2. Type in the code in Listing 2-7.

   Listing 2-7.  Declaring and Incrementing a Variable

   var num = 1;
   num++;
   document.write(num);

3. Click Run. The preview screen should show “2,” showing that ++ increases the value of num by 1.
4. Clear your current code.
5. Type in Listing 2-8.

   Listing 2-8.  Incrementing a Variable within a Statement

   var num = 1;
   document.write(num++);
   num = 1;
   document.write(++num);

6. Click Run. The screen first shows “1” and then “2.” When inside a statement like document.write(), if the increment operator (++) is after the variable, the document.write() statement will be executed first, and if the operator appears before the variable, the operator will be executed before document.write().

Compare a Variable

JavaScript contains commands called relational operators that compare two values and return a Boolean value of true or false, depending on the result. Do the following to see them in action:

1. Clear your current code.
2. Type in the code in Listing 2-9.

   Listing 2-9.  Comparing Values

   var num0 = 4;
   var num1 = 7;
   document.write(num0 >= num1);
   document.write(num0 < num1);
   document.write(num0 === num1);

3. Click Run. The screen first shows false, as 4 is not greater than or equal to 7; shows true, as 4 is less than 7; and shows false again, as 4 is not equal to 7.

Table 2-6 shows the useable relational operators.

See How Similar Two Values Can Be

See how the equivalent (==) and strictly equivalent (===) relational operators differ by doing the following:

• 1.  Clear your current code.
• 2.  Type in the code in Listing 2-10.

  Listing 2-10.  Differing Equivalent Operators

  var num0 = 4;
  var num1 = "4";
  document.write(num0 == num1);
  document.write(num0 === num1);

• 3.  Click Run. The screen first shows true, as the == sign temporarily converts all values to strings if one of the values being compared is a string. This is called type conversion. The screen then shows false, as the === sign does not perform type conversion. To evaluate as the same, compared values must be of the same data type.

Manipulate a Comparison

Sometimes you’ll want to manipulate how a comparison resolves (true/false). To see how these comparisons can be manipulated, do the following:

• 4.  Clear your code.
• 5.  Type in the code in Listing 2-11.

  Listing 2-11.  Manipulating Comparisons

  document.write(!(4 > 3));
  document.write((4 < 7) && (5 < 13));
  document.write((4 > 5) || (4 < 5));

• 6.  Click Run.

The screen will first say false because the statement (4 > 3) resolves to true, and the ! logical operator reverses the Boolean statement (true/false) after it, making it false. The screen then lists true because both (4 < 7) and (5 < 13) evaluate to true. The && (and) logical operator returns true only if both statements around it are true. Finally, the screen shows true again, because out of (4 > 5) and (4 < 5), one of them is true. The || (or) operator resolves as true if at least one of the statements is true. Table 2-7 shows the logical operators.

Implement Logic with the If Statement

Sometimes we want to perform specific actions in our code if and only if a certain condition is met. Do the following to see how:

1. Clear your current code.
2. Type in the code in Listing 2-12.

   Listing 2-12.  Implementing Logic with the If Statement

   var num0 = 4;
   var num1 = 8;
   if (num0 >= num1) {
       document.write(num0 + " is greater than or equal to " + num1 + ".");
   }
   else if (num0 < num1) {
       document.write(num0 + " is less than " + num1 + ".");
   }

3. Click Run. The screen will display “4 is less than 8.” Change the values of num0 and num1 to see how you can change the results. The else if() statement will be evaluated only if the first if statement evaluates as false (num0 >= num1 returns false).

Create an Object

An object is a structure that can contain its own variables (called properties), and methods. These are called instance properties and instance methods when they belong to an object. To create an object that will enable you to get the current date, do the following:

• 1.  Clear your code.
• 2.  Type in the code in Listing 2-13. This code creates a variable as an instance of an object called the Date object, which contains methods that can give us information about the current date. The new Date() part of the code is called the constructor of the Date object, and by assigning it to a variable, you create the object.

  Listing 2-13.  Creating the Date Object

  var date = new Date();

• 3.  Type in the code in Listing 2-14. The methods of the date object return information about the year, month, or day of the current date. When getMonth() is called, 1 is added to the result because getMonth() counts January as 0, February as 1, and so on. Table 2-8 shows the methods that can be used with the Date object.

  Listing 2-14.  Assigning Date Information to Variables

  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  var d = date.getDate();

• 4.  Type in the code in Listing 2-15. You are concatenating multiple strings and values of the month, day, and year variables together into a single variable, text.

  Listing 2-15.  Creating a String and Displaying It

  var text = "The date is " + m + "/" + d + "/" + y;
  document.write(text);

• 5.  Click Run. A string is displayed onscreen showing the current date. If you run into problems, you can view the full code sample at http://code.9leap.net/codes/show/19827.

The Date object is just one of the many objects that come predefined with JavaScript. Table 2-9 contains some of the main objects bundled with JavaScript.

This large list of objects might seem daunting at first, but it’s only meant as a quick reference. If you’d like to learn more, see the section on “Predefined Core Objects” in the Mozilla Developer Network’s JavaScript guide at https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Predefined_Core_Objects. It’s a great resource on the basic core objects of JavaScript and their uses.

Work Smarter with the While and For Loop Statements

Repetition makes your coding life easier because there are many cases where a program can be easily engineered to perform repetitive tasks for you. Let’s imagine we need to devise a way to add together all the numbers between 1 and 1000 and assign that value to a variable (int). If we were to manually add every single number between 1 and 100, we’d end up with code that would look something like the code in Listing 2-16.

Listing 2-16.  An Impractical Way to Add Sequential Numbers

int num = 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + 11 + 12 + 13 + 14 + 15 + 16 + 17 + 18 + 19 + 20 + 21 + 22 + 23 + 24 + 25 + 26 + 27 + 28 + 29 + 30 + 31 + 32 + 33 + 34 + 35 + 36 + 37 + 38 + 39 + 40 + 41 + 42 + 43 + 44 + 45 + 46 + 47 + 48 + 49 + 50 + 51 + 52 + 53 + 54 + 55 + 56 + 57 + 58 + 59 + 60 + 61 + 62 + 63 + 64 + 65 + 66 + 67 + 68 + 69 + 70 + 71 + 72 + 73 + 74 + 75 + 76 + 77 + 78 + 79 + 80 + 81 + 82 + 83 + 84 + 85 + 86 + 87 + 88 + 89 + 90 + 91 + 92 + 93 + 94 + 95 + 96 + 97 + 98 + 99 + 100;

Ouch. That doesn’t look like a very practical way to spend your time, does it? To speed things up, we can use loop statements to perform this repetitive calculation for us. To see this in action, do the following steps:

1. Clear your code.
2. Type in the code in Listing 2-17 to first create a variable, i, which will be used to control the loop (in other words, the control variable), and then create two other variables to store the results from the upcoming loops.

   Listing 2-17.  Creating Variables

   var i;
   var sumFor;
   var sumWhile;

3. Create a while loop to add together all numbers from 1 to 100 by typing in the code in Listing 2-18 after your current code. First, you must give sumWhile a value of 0 because you will be using a self-referencing operator (+=) in your code, so it must have a value before you begin. Next, you give i a value of 1. This number represents both the first time through the while loop, and the first number to be added to sumWhile. Finally, you enter the while loop. At the beginning of the while loop, the program will check to see if i has a current value equal to or less than 100. If it does, it will move into the loop, add the current value of i to sumWhile, and then add one to i. The loop will then check again to see if i is less than or equal to 100 and start again. This will continue repeatedly until the last value, 100, is added to sumWhile.

   Listing 2-18.  The While Loop

   sumWhile = 0;
   i = 1;
   while (i <= 100) {
           sumWhile += i;
           i++;
   }
   document.write("The result using a while loop: " + sumWhile + "<BR />");

    Note   The “<BR />” in the document.write() method is an HTML tag (the name of an HTML element surrounded by brackets, specifying an element of a web page to be inserted) that tells the system to move down a line before displaying more text.

4. Click Run. The screen will display the result of 5050.
5. Now do the same thing with a different kind of loop, the for loop, by typing in the code in Listing 2-19 below your current code. The for loop has three statements at the beginning of it. The first (i = 1;) declares and creates a variable to control the loop. The second one (i <= 100;) is checked before the for loop is run or rerun, exactly the same as the statement at the beginning of the while loop. Finally, the last statement (i++) is run when a for loop completes, before the second statement is checked against for a rerun.

   Listing 2-19.  The For Loop

   sumFor = 0;
   for (i = 1; i <= 100; i++) {
           sumFor += i;
   }
   document.write("The result using a for loop: " + sumFor + "<BR />");

6. Click Run. The screen will display 5050 twice, as both loops calculate the same thing. If you run into problems, you can check your code against the full code sample at  http://code.9leap.net/codes/show/19828.

for (i = 1; i <= 1000; i++) sumFor = sumFor + i;

Interrupt a Loop with Break

Occasionally, in the middle of a loop’s execution, we want to stop the processing of the code in that loop and continue processing code past the end of the loop. This is easily accomplished with the break statement, which breaks the current processing out of the loop, even if the loop’s condition is still fulfilled. To see it in action, do the following:

1. Clear your code.
2. Type in the code in Listing 2-20.

   Listing 2-20.  Breaking Out of a Loop

   var sumWhile = 0;
   var i = 1;
   while (true) {
       sumWhile += i;
       i++;
       if (i > 100) break;
   }
   document.write(sumWhile);

3. Click Run. The result is the same as before. When i is equal to 100, it gets added to sumWhile, becomes 101, and then because it is greater than 100, the while loop stops.

Skip a Loop Iteration with Continue

On other occasions, you might want to skip the remaining code in a loop and start it again. As long as the conditional expression of a for or while loop is fulfilled, this can be done with the continue statement. When this statement is issued, the next iteration of the loop’s code is immediately started. As usual in a for loop, when returning to the beginning of the loop code, the increment/decrement expression of the for loop get executed. Do the following steps to try this out by making a program that calculates only the even numbers from 0 to 100:

1. Clear your code.
2. Type in the code from Listing 2-21. The line if (i % 2 != 0) continue; says if the remainder after dividing i by 2 is not 0 (if i is odd), skip the remaining code in the current for loop iteration and begin the next for loop iteration immediately.

   Listing 2-21.  Using Continue to Skip Odd Numbers

   var sumFor = 0;
   for (i = 1; i <= 100; i++) {
       if (i % 2 != 0) continue;
       sumFor = sumFor + i;
   }
   document.write("The sum of all even numbers up to 100 is " + sumFor);

3. Click Run. A result of 2550 is displayed.

Generate Random Numbers

If you want enemy characters to appear randomly in your game or if you want to create a game that tells you your fortune for the day and randomly assigns you a “luckiness” value, you need to be able to create random numbers. Do the following to see how it works for a fortune-telling game:

1. Clear your code.
2. Type in the code in Listing 2-22 to create variables and assign a random number to num.

   Listing 2-22.  Creating Variables for the Fortune-Telling Game

   var num;
   var text = "";
   num = Math.floor(Math.random() * 4);

   Math.random() returns a value from 0 (inclusive) up to 1 (exclusive – not including 1). By multiplying this by 4, you get a value from 0 up to, but not including, 4. The floor() method of the Math object rounds down whatever is in its parentheses. Thus, the code you just wrote will return 0, 1, 2, or 3, randomly.

3. Create the fortune-telling game using your random variable by typing in the code in Listing 2-23 below your current code.

   Listing 2-23.  Fortune Telling with the If Statement

   if (num===0) {
       text = "Super Lucky";
   } else if (num===1) {
       text = "So-so Luck";
   } else if (num===2) {
       text = "Minor Luck";
   } else {
       text = "Bad Luck";
   }
   document.write("Your fortune: " + text);

   Here, you are assigning a value to text depending on the value of num and then outputting the result.

4. Click Run. You randomly get a response for your current level of “luckiness.”

Define Scenarios with Switch

In the last code example, several if statements were used to determine what value should have been assigned to text. However, there is an easier way to make this work, without all the if statements. Do the following to see how:

1. Delete the document.write() statement and all if statements. Your code should look as it does in Listing 2-24.

   Listing 2-24.  Setting Up for the Switch Example

   var num;
   var text = "";
   num = Math.floor(Math.random() * 4);

2. Add the switch statement by typing in the code in Listing 2-25 below your current code.

   Listing 2-25.  The Fortune-Telling Switch Statement

   switch (num) {
           case 0:
                   textSwitch = "Excellent Luck";
                   break;
           case 1:
                   textSwitch = "Moderate Luck";
                   break;
           case 2:
                   textSwitch = "Small Luck";
                   break;
           default:
                   textSwitch = "Bad Luck";
                   break;
   }

   The switch statement takes whatever value is in its parenthesis, finds the case that matches that number, and then executes the code beneath it. If there is no break statement in the current case, the switch statement will continue executing code from the next case and so on, until either a break statement is encountered or the end of the switch statement is reached. The default case is executed if no matches are found.

3. Click Run. You will get a randomly generated fortune.

Store Numbered Data in an Array

Arrays are used to keep track of sets of data, which are necessary when dealing with maps, strings (arrays of text characters), and more. Do the following to see how a set of numerically indexed (numbered) data can be created in an array:

1. Clear your code.
2. Create an array to represent a collection of three devices by typing in the code in Listing 2-26.

   Listing 2-26.  Creating an Array of Devices

   var array = new Array(3);
   array[0] = "iPhone";
   array[1] = "Android";
   array[2] = "Computer";

   Just like when we created an instance of the Date object, you use a constructor to create an array (new Array(3)). The Array(3) tells the program to create an array with 3 spaces.

3. Create a string to save parts of the array into it, and then iterate through the array, adding all of the array elements to the string before displaying it. Listing 2-27 shows how to do this.

   Listing 2-27.  Iterating Through an Array

   var text = "";
   for (var i = 0; i < array.length; i++) {
       text += array[i] + "<BR />";
   }
   document.write(text);

   Notice how the compound assignment operator += can be used to add characters to the end of a string. Using a for loop allows you to go through all of the elements in an array automatically.

4. Click Run. The screen will display the three elements in the array.

Store Non-Numbered Data in an Associative Array

What if you want to store a color for each of the devices in the array you just made? To do this, you need to use an associative array instead of a regular array. Do the following to make an associative array:

1. Clear your code.
2. Create your associative array by typing in the code in Listing 2-28.

   Listing 2-28.  Creating an Associative Array

   var obj = new Object();
   obj["iPhone"]     = "White";
   obj["Android"]    = "Black";
   obj["Computer"]   = "Silver";

   Associative arrays are not stored as array objects in JavaScript because all array objects are indexed, containing one key value (starting from 0) and one paired value for each entity in the array. Here, we use the ability of objects in JavaScript to be an array of values to link together the strings of device names and colors.

3. Create a string, add the associative array objects, and then display the string by typing in the code in Listing 2-29.

   Listing 2-29.  Manually Iterating Through the Associative Array

   var textObj = "";
   textObj += "The iPhone is " + obj["iPhone"] + ".<BR />";
   textObj += "The Android is " + obj["Android"] + ".<BR />";
   textObj += "The Computer is " + obj["Computer"] + ".<BR />";
   document.write(textObj);

4. Click Run. The list of colors of the devices are displayed on the screen.

Because object arrays are not indexed in the same way as standard arrays, they cannot be iterated through with a simple for loop.

Save Time with Functions

You’ve seen objects that come with their own functions such as arrays, but if you’re planning on doing almost anything that requires you to type the same code multiple times, you can define your own functions to save you time. Do the following to see how:

1. Clear your code.
2. Define a function that accepts an argument (whatever is passed in parentheses), and then writes it on the screen after “I will buy the,” by typing in the code in Listing 2-30.

   Listing 2-30.  Defining the buy() Function

   function buy(device) {
       document.write("I will buy the " + device + ".<BR />");
   }

3. Call the function using “iPhone” and “Android” as arguments by typing in the code in Listing 2-31.

   Listing 2-31.  Calling the Function

   buy("iPhone");
   buy("Android");

4. Click Run. The screen will display the “I will buy” line twice because you called the function twice.

See Where Variables Live

I want you to imagine for a moment that a program you’re going to write takes place in a medieval kingdom, with several villages and one castle. For explanatory purposes, imagine the king of this kingdom is named Bob. Throughout the kingdom, if someone talks about Bob, everyone knows that they are talking about the king. However, what if, in a given village, there is also someone else named Bob? Inside that village, people might refer to the local resident Bob as “our Bob,” but in the castle if someone refers to “Bob” it’s likely everyone will assume the person in question is the king.

This is, in essence, the concept of scope. It refers to the visibility of a variable within a program. In other words, scope is the context for a variable. To see how this works, do the following:

1. Clear your code.
2. Create a variable representing King Bob and assign him a value of 39 to represent his age by typing in the code in Listing 2-32. Because he is the ruler of the kingdom, we will create him as a variable at the beginning of the program, giving him a global scope. This means that if you type “bob” anywhere in the program, the program will know you mean King Bob.

   Listing 2-32.  Making King Bob

   var bob = 39;

3. Create a function that creates a variable representing a random Bob in one of the kingdom’s villages, assign him a random age between 10 and 50, and then increase that age by one to simulate the villager Bob celebrating his birthday, before displaying that Bob’s age on the screen, by typing in the code in Listing 2-33.

   Listing 2-33.  Creating a Function to Create a Random Bob

   function villager() {
           var bob = Math.floor(Math.random() * 50 + 10);
           this.bob += 1;
           document.write("King Bob's age is " + bob + ".<BR />");
           document.write("Villager Bob, this Bob, is " + this.bob + ".");
   }

   Notice that when you refer to the Bob inside a function, you use this.bob to specify you mean the one inside the function. To explain the visibility of villager Bob, we say he has function scope, instead of global scope like King Bob.

4. Call the villager function by typing in the code in Listing 2-34 below your current code.

   Listing 2-34.  Calling the Villager Function

   Villager();

5. Click Run to see the result. You will see King Bob’s age of 39, and then a random age for villager Bob.

Make Object Blueprints with Prototypes

Prototypes essentially are a set of blueprints that can be used to create objects. By creating a prototype with properties and methods, we can easily create new objects equipped with the same properties and methods specified in the prototype. To create and use a software prototype that contains a name and a programming language, do the following:

1. Clear your code.
2. Create the prototype first as a function, and then add properties by typing in the code in Listing 2-35.

   Listing 2-35.  Creating the Prototype and Properties

   function Software() {
   }
     
   Software.prototype.name     = "";
   Software.prototype.language = "";

3. Create a function for the prototype that displays information about it by typing in the code in Listing 2-36.

   Listing 2-36.  Creating The Prototype Function

   Software.prototype.output = function() {
       document.write(this.name + " is written in " + this.language + "<BR />");
   };

4. Type in the code in Listing 2-37 to create a new object, accounting, as an instance of the Software prototype; specify values for its properties; and then call its function to display information on the screen.

   Listing 2-37.  Creating the Accounting Object

   var accounting = new Software();
     
   accounting.name     = "Spreadsheet Master";
   accounting.language = "Java";
     
   accounting.output();

5. Click Run. You’ll see a message saying that Spreadsheet Master is written in Java.
6. Try creating another object below the accounting object and call the output() function. If you run into trouble, check http://code.9leap.net/codes/show/19835 for a working example.

Conclusion

Congratulations! If you’ve read through this section and worked with the example code on code.9leap.net, you should now have an understanding of variables, operators, strings, arrays, functions, and prototypes. These are the building blocks of JavaScript as well as many object-oriented languages in current use today. Understanding these basics gives you the foundation you need to learn how to code your own HTML5 games in enchant.js.

In Chapter 3, we delve into the enchant.js library and learn about sprites, scenes, labels, surfaces, and more. These are the basic features that enchant.js provides. As we progress through Chapter 3 and on into Chapter 4, you’ll begin to see how these features come together into creating a game.