Just the weekly tutorials.

Beginner's Guide to the Basics of JavaScript Programming

Article last updated on July 17, 2013.

JavaScript code is placed between <SCRIPT></SCRIPT> tags, inside an HTML attribute (onClick, onMouseOver, etc.) or in a separate file such with [.js] extension for example: myscript.js (to be later included in your HTML using <LINK> tag within <HEAD> tags.)

JavaScript Statements

In JavaScript, statements are the building blocks of your script program. A statement begins with some commands and ends with a semicolon (which indicates end of statement):

10; // Number (primitive & literal) 25; // Number "I am a string."; // String [1, 2, 3]; // Array (array literal) true; // Boolean false; // Boolean { message: "Hello." }; // Object literal

We have just made seven JavaScript statements. Even though none of these statements produce any results on the web page, they are valid and will not generate a JavaScript error.

We can also use operators like plus(+) and minus(-) to add values together. Let's add two numbers:

10 + 25; // Evaluates to 35

All eight statements above express a value of different types: Number, String, Array, Boolean and an Object. In JavaScript we can define a numeric value, a string (a series of alpha-numeric characters,) a true or false value (known as a boolean) and a few others. There are JavaScript primitives and literals in this example.

Primitives and Literals

Some values are expressed as JavaScript Primitives while others as Literals. Primitives are simple expressions such as a number 10, 25 or a string of characters "I am a string." They are the most basic expressions. The true and false Booleans are also primitives.

A literal is a written-out expression describing a set of multiple values. It usually pertains to an object. Don't worry about objects just yet, we will cover them later.

For example [1,2,3] is an array literal (a set of multiple values). However, literals can store a single value (with potential to expand to more). For example: [10] is an array literal containing one numeric (primitive) value of 10. Here is another example: { message: "Hello." } representing an object literal.

An object literal is a little different: it contains the name (the identifier) of the variable. Iinside an object, an identifier (variable name) is called a method when they refer to functions, or a property when it refers to a javascript variable). And it contains the value assigned to the variable. But it can also contain multiple values as in the following example:

{ name: "value", name2: "value2" }; // Object literal

Both array and object literals are made to express objects (we will get to objects later) as opposed to single-value primitives. Literals can contain primitive values or even other literals.

Interestingly, a text string value such as "Hello1275 I am a string.", although a primitive, it is also counted as a string literal and a numberic literal 175 is also considered a numeric literal.

How to Assign Values in JavaScript

In JavaScript value assignment is done using variables. JavaScript reserves a special keyword var for this purpose. Let's create a variable cars and assign a numeric literal value of 10, followed by a variable whose value we will define using a JavaScript statement "blue cars."

var cars = 10; // A literal of type Number var type = "orange cars."; // A literal of type String

Adding a String and a Number. We just created one variable of type Number and one of type String. One simple thing we can do with variables, even of two different kinds is to add them together as described in one of the previous examples.

But what happens when we add two variables of different types? Once is converted to the type of the other and both are merged. Moreover, we can add a literal into the mix:

cars + " " + type; // Produces a string: "10 blue cars."

Working with Existing JavaScript Object Properties

When we create a JavaScript variable, we determine the type of the value to be associated with it. Each different type of a value may turn into a JavaScript object of that type at our command. Until then, it is only a primitive and not an object.

But what is the command that turns water into wine. In other words, a primitive into an object, so that we can start accessing its existing properties? It is represented by the dot operator.

By creating variables, we give JavaScript a hint: What type of object to associate with the value? We could have created a numeric value as a String, too: var cars = "10"; But we didn't. We created it as a number: var cars = 10; We can now use the variable name (cars or hello) together with the dot operator to turn them into objects of respective type (String and Number in this case) to access their properties:

cars.toString(); // Evaluates to "10" type.length; // Evaluates to 12

The built in method toString() converts a numeric value to a string. From time point on we can work on the value in the form of a string. The new value becomes the object of type String.

We can continue using the dot operator on the result. The dot operator may be used to access JavaScript object's methods and properties, but the result (which can be of any type, based on what the method's return value.) This often results in a chain of methods:

cars.toString().length; // Evaluates to 2 cars.toString.substr(0,1); // Evaluates to 1 (first character of "10")

Reserved Keywords in JavaScript

Values, assignments and value operations are not the only types of statements we can make in JavaScript. JavaScript provides a series of keywords that help us manipulate values in a convenient manner: using these keywords together with values is what makes your computer program. JavaScript reserves these keywords for a particular purpose. Some reserved JavaScript keywords include var, for, in, while, this (see the this object tutorial), instanceof and many others (26 altogether, but the list may be growing in the future as newer versions of JavaScript spec evolve.) Here is a list of the most known reserved keywords in JavaScript:

break
case
catch
continue
debugger
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
with

Let's examine a simple for-statement, also known as a for loop used to literally loop through the number of statements that follow. The for loop itself accepts three internal statements using the following syntax:

for (initialization; condition; end of cycle) javascript statement(s);

Notice the semicolons which are all important parts of the for-loop. The statement can be blank, but the semicolons must always remain there. For example an empty for loop would be for(;;) statement; You wouldn't want to run this statement because it would run non stop. In order to prevent this from happening, we need to use the conditional statements in between each semicolon.

First we need to initialize a starting value, usually a counter such as i = 0; then we determine the condition until which the for loop will continue to run, this can be anything defined by the programmer. The third statement determines an operation to be performed at the end of each cycle (every time the javascript statement(s) specified thereafter is/are finished executed, just at the end of each) Finally... we determine the actual statement which will be executed until the condition is met:

var i; var number = 0; for (i = 0; i < 10; i++) number = number + 1; number; // At this point number will evaluate to 10

This code will execute the statement number + 1 exactly 10 times. The increment value in variable i and the variable number were initially set to 0. After adding 1 to it 10 times, by passing it through this for-loop, it now equals 10.

A for-loop can also be used to execute a set of statements (not just a single statement.) This is accomplished by using curly brackets to define scope. Whenever you see curly brackets in JavaScript, they define a local scope. For now just be aware that there is such thing as scope and it is defined by curly brackets, but don't worry about it for now.

To demonstrate another point, look at the example below and notice how the end of cycle statement: i++; was moved just to the end of the execution statements themselves (and it was removed from its original location as the third statement, leaving it blank, which is just fine as long as you keep the required semicolons intact). This does not change the end result of the for loop.

var i; var number = 0; for (i = 0; i < 10;) { number = number + 1; i++; } number; // evaluates to 10

Remember from earlier in this tutorial that JavaScript statements are the building blocks of a JavaScript program. Such statement can also be a call to a JavaScript function (refer to javascript functions tutorial.) In the same way we can call a JavaScript function 10 times in a row using a for-loop. When executing a single statement using a for-loop, curly brackets are optional:

for (var i = 0; i < 10; i++) some_function();

This for loop will call the function some_function() 10 times in a row.

This tutorial has outlined some of the basic features of JavaScript as a script programming language using numerous code examples. Although complex subjects were covered, an attempt was made to explain them in an easy to understand manner and language for absolute beginners.

The examples presented here are only a small bit of what is required to understand how to write JavaScript code. However, the goal of this tutorial was to explain details often overlooked even by programmers who write JavaScript code for a living.

Hopefully this tutorial has shed some new light on javascript statements, primitive types, literals, basic statement evaluation operations, variables and the for-loop.

Just the weekly tutorials.