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

esse quam videri
Jump to: navigation, search
(Created page with '== 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…')
 
m
Line 26: Line 26:
  
 
   var '''n''' = "Matthew Ephraim";
 
   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  
 
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:
 
might be confusing later on. A much better name would look like this:
  
 
   var '''name''' = "Matthew Ephraim";
 
   var '''name''' = "Matthew Ephraim";
 
+
 
 
This name is better because '''name''' tells you what the variable is being used for.
 
This name is better because '''name''' tells you what the variable is being used for.
  
Line 40: Line 40:
  
 
   var '''professorname''' = "Matthew Ephraim";
 
   var '''professorname''' = "Matthew Ephraim";
 
+
 
 
It's 2 words, but it's also difficult to read. It can be made clearer by using camel case:
 
It's 2 words, but it's also difficult to read. It can be made clearer by using camel case:
  
 
   var '''professorName''' = "Matthew Ephraim";
 
   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  
 
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
 
spaces in them, so this is a simple way to still use 2 words in the variable name. Longer variables names with multiple words
Line 51: Line 51:
 
   var '''professorFullName''' = "Matthew Ephraim"; // professor full name, 3 words
 
   var '''professorFullName''' = "Matthew Ephraim"; // professor full name, 3 words
 
   var '''firstClassStartTime''' = "6:30pm"; // first class start time
 
   var '''firstClassStartTime''' = "6:30pm"; // first class start time
 
+
 
 
=== Indentation ===
 
=== Indentation ===
  
 
Another important coding style is using proper indentation in your code.
 
Another important coding style is using proper indentation in your code.

Revision as of 03:59, 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

Indentation

Another important coding style is using proper indentation in your code.