JavaScript Syntax JS Home  <<  JS Basics  <<  JavaScript Syntax

This lesson is all about syntax and how we use it to create our JavaScript programs. JavaScript is an interpreted language and so there is no reason to compile our code before we run it. This leads to faster development of software but the downside is slower runtimes than compiled languages.

When writing our programs we use camel case to make our variables more readable, so for instance thisIsSomeVariable.

A JavaScript program is made up of a series of constructors, functions and statements that are executed to achieve the behaviour required. A semi-colon signifies the end of each command line to be interpreted. We pass any arguments to constructors and functions within the brackets after the constructor or function name.

Constructors

Constructors allow us to use predefined objects, or create our own objects, for use in our programs. Objects can also have methods we can utilize when using the object using dot notation.



// Creates a Date() object that we put into the variable aDate
var aDate = new Date();  
// Uses dot notation to access the Date() method getYear()
var year = aDate.getYear();

The following code constructs and populates an Array object which is discussed in much greater detail in the Arrays lesson. For now just remember that array indexes start at 0 not 1, so in the array below myArray[1] holds the value "Two" not "One".


<script type="text/javascript">
  var anArray = new Array('One', 'Two', 'Three');  // this is a comment
  alert('Array: ' + anArray[0] + ', ' + anArray[1] + ', ' + anArray[2]);
</script>

Press the button below to action the above code:

Functions

We can create our own Functions to perform repetetive tasks and Functions are callable with or without parameters and might return a value. The code for a function is inserted between the start and end braces { }. The end of each command line within the braces is the same as any statement and is terminated with a semi-colon ;.



/*
 Creates a Function called aFunction with no parameters 
 that displays an alert() box when called
 */
function aFunction() {
  alert('I was called');
} 
/*
 Creates a Function called bFunction with 1 parameter called bParam 
 that displays the bParam in an alert() box when called
 */
function bFunction(bParam) {
  alert(bParam);
} 

/*
 Creates a Function called cFunction with 1 parameter called cParam 
 that returns a string of the entered param and some text
 */
function cFunction(cParam) {
  return 'You passed the value: ' + cParam + ' to this function';
}

The following code calls the Date constructor and places that date into a variable. This is now a Date object so we can use methods from the Date class on our newly created variable. We then use dot notation to get the four digit year. Date.getfullyear(). After this we call a simple function, passing the full year which we double and display.


<script type="text/javascript">
  /* this is a single line comment block */
  var aDate = new Date();
  var year = aDate.getFullYear();
  var doubled = double_year(year);
  alert('The year doubled is: ' + doubled);

  function double_year(year) { 
    return year * 2;
  }
</script>

Press the button below to action the above code:

Statements

A statement consists of a keyword and some imperative we apply to it.


// Create a string variable from a number and string
var aString = 1 + ' string to rule them all';

The following code simply puts a string into a new variable which is displayed when the button is pushed.


<script type="text/javascript">
  /* 
     this is a multiple 
     line comment block 
   */
  var aVar = "Learning JavaScript";
  alert('aVar Value: ' + aVar);
</script>

Press the button below to action the above code:

Reviewing Our Code

When you click on the buttons above the sample Javascript code shown above the button runs and an alert box is shown with the results.

Lesson 2 Complete

In this lesson we created some Constructors, Functions and Statements to get a feel for JavaScript Syntax.

Related Tutorials

JavaScript Basic Tutorials - Lesson 3 - The Anatomy Of JavaScript