Difference between revisions of "Introduction to JavaScript Fall 2009 Class 4"

Revision as of 04:19, 29 September 2009

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.