Introduction to JavaScript Fall 2009 Class 4

Introduction

This week I will talk about using some of the concepts I've shown you the last few weeks to actually start putting together a web page that uses JavaScript. I want to make sure that everyone understands the concepts I've presented so far are making sense to everyone, so the majority of the class will be dedicated to some activities that test your JavaScript knowledge.

However, there are a few things that I'd to cover as well.

Coding Style

One thing that I haven't talked about is coding style. Like the English language, JavaScript has it's own styles that you should follow if you want to make your code readable for others (and, of course, for yourself).

The Mozilla JavaScript Style Guide is a comprehensive list of rules that you should try to follow when writing JavaScript. Some of the rules are more important than others, and many of them might not make sense yet for a beginner class. I've listed a few of the rules that apply for this class so far.

Variables and Functions

Clear Naming

Your variables and functions should have names that clearly indicate what the variable is being used for or what the function does. For example, the following variable is being used to store a person's name:

  var n = "Matthew Ephraim";

This is a bad variable name, because n doesn't tell you anything about what the variable is used for, so it might be confusing later on. A much better name would look like this:

  var name = "Matthew Ephraim";

This name is better because name tells you what the variable is being used for.

Multiple Word Names

When your variable or function names have multiple words in them, it's JavaScript style to use camel case (aka camelCase) to indicate that the variable names are multiple words. For example, this variable name is made up of 2 words:

  var professorname = "Matthew Ephraim";

It's 2 words, but it's also difficult to read. It can be made clearer by using camel case:

  var professorName = "Matthew Ephraim";

Notice that the N is capitalized now. This makes it easier to see where the 2 words are separated. Variables names can't have spaces in them, so this is a simple way to still use 2 words in the variable name. Longer variables names with multiple words can be used as well:

  var professorFullName = "Matthew Ephraim"; // professor full name, 3 words
  var firstClassStartTime = "6:30pm"; // first class start time, 4 words

Indentation

Another important coding style is using proper indentation in your code. Just like indenting the first sentence of a paragraph can make text easier to read, indenting your code properly can make it easier to read as well. Typically, when you switch to a new block of code, you should indent 2 spaces.

Remember that, in JavaScript, bocks are sections of code that are surrounded by { curly brackets }. So, every time you're using an opening curly bracket, you should indent 2 spaces. The code example below doesn't use any indentation:

  function alertMatt()
  {
  if (name === "Matt")
  {
  alert('hello Matt');
  }
  else
  {
  alert('You're not Matt!');   
  }
  }

Is this code easy to read? How about if it was indented:

  function alertMatt()
  {
      if (name === "Matt")
      {
          alert('hello Matt');
      }
      else
      {
          alert('You're not Matt!');   
      }
  }

Is this code easier to read? The code that goes with the function is indented several spaces, and the code that's associated with the if statement and with the else statement is also indented several spaces more. Most good text editors should have a feature that help you properly indent your code.

Activity

Today, we will be creating a simple number guessing game. The computer will pick a random number and the user will try to guess what the number is. If the user guesses too low, the computer will tell them that the number is higher. If the user guesses too high, the computer will tell them that the number is lower. And if the user guesses the number correctly, the computer will tell them that they have won.

Step 1

First, download the template for the game. I have already created a game board for you. The board has a few elements on it and is styled using CSS. Open up game.html and look at the html. There is a form with an input box for the number that the user will guess. There is also a button that the user can click to send their guess to the computer. Finally, there is a div at the bottom where messages from the computer will be displayed.

Notice that 3 of the elements have the id attribute filled out. We are going to use those ids in our JavaScript.

Step 2

Open the file called behavior.js that's in the JavaScript folder. This is the file that contain the program for our game. Notice that I have already created several functions in the file for you. For now, you can ignore the 2 functions at the bottom of the page. We will be using these functions later on to make the game work.

The 2 things that I want you to notice are the empty function called setupGame and the link that says:

  window.onload = setupGame;

This line is important. window represents the browser window and onload lets you set a function that will run when the browser window loads. So, what this line of code is saying is "call the function setupGame when the browser window loads". In other words, setupGame is name of the function that should run as soon as the page loads.

Right now setupGame isn't actually doing anything, because it's empty. Modify the function so that it looks like this

  function setupGame()
  {
      alert('this is a test');
  }

The line we added will simply pop up a test message when the page loads. Reload game.html page to make sure it works.

Step 3

Also notice that the behavior.js has a variable called randomNumber declared at the top. Unfortunately, it doesn't help us at all, because it's not set to anything yet. Woudn't it would helpful if our setupGame function set that variable to a random number? I have created a function called getRandomNumber that returns a random number. Call the function and set the return value equal to the randomNumber variable.