Get started with the JavaScript language, Part 1: JavaScript language fundamentals

Want a foundational understanding of the JavaScript language? This article gets you started by covering basic JavaScript concepts for beginners, and provides code examples to show how it's all done.

Kris Hadlock, Web Developer/Designer, Studio Sedition

Photo of Kris HadlockKris Hadlock has been a contract web developer and designer since 1996. He has worked on projects for companies such as SPIN Magazine, IKEA, United Airlines, JP Morgan Chase, GoDaddy Software, and Fire Mountain Gems. He is the author of Ajax for Web Application Developers (Sams) and The ActionScript Migration Guide (New Riders) as well as a featured columnist and writer for numerous websites and design magazines, including Peachpit.com, InformIT.com, and Practical Web Design magazine. Kris is also the founder of www.studiosedition.com, a web design and software development studio specializing in fusion of form and function.



05 April 2011

Also available in Chinese Russian Japanese

The JavaScript language has become increasingly popular and is arguably one of the most prominent languages on the Internet. You can use it across various platforms and browsers, and it does not discriminate against back-end languages. There are many different libraries—some that are great—to help with development, speeding up development time and so on. The issue is that sometimes these libraries are so removed from the original language that beginning developers lack an understanding of the language fundamentals. This article explains the language fundamentals by covering basic JavaScript concepts to give beginners a foundational understanding of the language. Code examples are provided throughout to show how it's all done.

Develop skills on this topic

This content is part of a progressive knowledge path for advancing your skills. See A comprehensive guide to JavaScript.

Understanding the JavaScript language

The JavaScript language is a free, client-side scripting language that lets you add interactivity to Hypertext Markup Language (HTML) pages. Client-side means that the JavaScript language runs in the browser and is not used on the server side. Client-side scripting is what allows user interactivity with a web page after the web page is served by the server and loaded by the browser. Google Maps, for example, uses the JavaScript language to allow users to interact with a map by moving it around, zooming in and out, and so on. Without the JavaScript language, the web page needs to be refreshed for each and every user interaction, unless, of course, it uses a plug-in such as Adobe Flash or Microsoft® Silverlight. The JavaScript language does not require a plug-in.

Because the JavaScript language provides user interactivity with a web page after the page loads, developers commonly use it for some of the following functions:

  • Dynamically add, edit, and remove HTML elements and their values
  • Validate web forms before submission
  • Create cookies to store and retrieve data on a user's computer for future visits

Before getting started, there are just a few language basics to be aware of:

  • To include JavaScript code in an HTML file, you must place the code inside script tags and include the text/javascript type attribute (Listing 1).
  • All JavaScript statements end with a semicolon.
  • The language is case sensitive.
  • All variable names must begin with a letter or underscore.
  • You can use comments to identify certain lines of your script. You write comments using a double forward slash (//) followed by the comment.
  • You can also use comments to comment out script. A good way to comment out multiple lines of script is by using /* your script goes here */. Any script within the stars /**/ doesn't run during execution.
Listing 1. The script tags and type attribute are required to include JavaScript code in an HTML file
<script type="text/javascript"></script>

To hide JavaScript code from browsers that do not support it or if a user has it turned off, simply use the comment tag before and after the JavaScript statement (Listing 2).

Listing 2. Use comments to hide JavaScript code from browsers that do not support it
<script type="text/javascript">
<!--
Example statement here
//-->
</script>

The most commonly used way to include JavaScript code in a web page is to load it from an external JavaScript file using the src attribute in the script tag (Listing 3).

Listing 3. Including an external JavaScript file in an HTML file
<script type="text/javascript" src="path/to/javascript.js"></script>

External JavaScript files are the most common way to include JavaScript code for a number of practical reasons:

  • Search engines can crawl and index your web site faster if there is less code within your HTML page.
  • Keeping your JavaScript code separate from your HTML is cleaner and ultimately easier to manage.
  • Because you can include multiple JavaScript files in your HTML code, you can separate the JavaScript files into different folder structures on your web server, similar to images, which is an easier way to manage your code. Clean, organized code is always key to easily managing your website.

Variables

Variables store data that can later be retrieved or updated with new data. The data stored in a variable can be a value or expression. There are three types of expressions in the JavaScript language, which are described in Table 1.

Table 1. JavaScript expressions
ExpressionDescription
ArithmeticEvaluates to a number
StringEvaluates to a string
LogicalEvaluates to a Boolean (true or false)

There are two types of variables: local and global. You declare local variables using the var keyword and global variables without using the var keyword. With the var keyword the variable is considered local because it cannot be accessed anywhere outside the scope of the place you declare it. For example, if you declare a local variable inside a function (which I cover toward the end of this article), it cannot be accessed outside of that function, which makes it local to that function. If you declare the same variable without the var keyword, it is accessible throughout the entire script, not only within that function.

Listing 4 shows an example of a local variable, named num, which is assigned the value of 10.

Listing 4. Declaring a local variable
var num = 10;

To access the value of the num variable at another point in the script, you simply reference the variable by name, as shown in Listing 5.

Listing 5. Accessing the value of a variable
document.write("The value of num is: "+ num);

The result of this statement is "The value of num is 10." The document.write function writes data to the web page. You will use this function throughout the rest of this article to write examples to the web page.

To store arithmetic expressions in a variable, you simply assign the variable to the calculated value as shown in Listing 6. The result of the calculation is what is stored in the variable, not the calculation itself. Therefore, once again, the result is "The value of num is: 10."

Listing 6. Storing an arithmetic expression
var num = (5 + 5);
document.write("The value of num is: "+ num);

To change the value of a variable, refer to the variable by the name you assigned to it and assign it a new value using the equal sign (Listing 7). The difference this time is that you do not have to use the var keyword because the variable has already been declared.

Listing 7. Changing the value of an existing variable
var num = 10;
document.write("The value of num is: "+ num);

// Update the value of num to 15
num = 15;
document.write("The new value of num is: "+ num);

The result of this script is "The value of num is: 10" followed by "The new value of num is: 15."

In addition to teaching about variables, this section introduced the next topic, which is operators. The equal sign (=), which you used to assign values to the variables, is an assignment operator, and the plus sign (+), which you used to add 5 + 5, is an arithmetic operator. The next section talks about all of the available operators in the JavaScript language and how you can use them.


Operators

You need operators when performing any operation in the JavaScript language. Operations include addition, subtraction, comparison, and so on. There are four types of operators in the JavaScript language:

  • Arithmetic
  • Assignment
  • Comparison
  • Logical

Arithmetic operators

Arithmetic operators perform basic mathematic operations such as addition, subtraction, multiplication, division, and so on. Table 2 lists and describes all the arithmetic operators that are available in the JavaScript language.

Table 2. Arithmetic operators
OperatorDescription
+Addition
-Subtraction
*Multiplication
/Division
%Modulus (finds the remainder)
++Increment
--Decrement

Assignment operators

While arithmetic operators perform basic mathematic operations, assignment operators assign values to JavaScript variables. You saw the most common assignment operator when you assigned values to variables in the previous section. Table 3 lists and describes all the assignment operators that are available in the JavaScript language.

Table 3. Assignment operators
OperatorDescription
=Equal
+=Assigns addition value to a variable
-=Assigns subtraction value to a variable
*=Assigns multiplication value to a variable
/=Assigns division value to a variable
%=Assigns modulo value to a variable

You already saw how to use the equal sign to assign a value and expression to a variable, but now I'll show you how to use one that can be a little more confusing. Assigning an addition value to a variable can be a strange concept at first, but it's actually pretty simple (Listing 8).

Listing 8. Assigning an addition value to a variable
var num = 10;
document.write("The value of num is: "+ num);

// Update the value of num to 15
num += 5;
document.write("The new value of num is: "+ num);

The result of this script is "The value of num is: 10" followed by "The new value of num is: 15." You can see that the operator in this script assigns the addition value to the variable. This can also be a shorthand way of writing the script shown in Listing 9.

Listing 9. The longer way to assign an addition value to a variable
var num = 10;
document.write("The value of num is: "+ num);

// Update the value of num to 15
num = (num + 5);
document.write("The new value of num is: "+ num);

Comparison operators

Comparison operators determine the relationship between variables or their values. You use comparison operators inside conditional statements to create logic by comparing variables or their values to evaluate whether a statement is true or false. Table 4 lists and describes all the comparison operators available in the JavaScript language.

Table 4. Comparison operators
OperatorDescription
==Equal to
===Equal to, in value and object type
!=Not equal to
>Greater than
<Less than
>=Greater than or equal to
<=Less than or equal to

Comparing variables and values is fundamental to writing any sort logic. The example in Listing 10 shows how to use the equal to comparison operator (==) to determine whether 10 is equal to 1.

Listing 10. Using a comparison operator
document.write(10 == 1);

Logical operators

Logical operators are generally used in conditional statements to combine comparison operators. Table 5 lists and describes all the logical operators available in the JavaScript language.

Table 5. Logical operators
OperatorDescription
&&AND
||OR
!NOT

Now that you have variables and operators under your belt, it's time to learn how to create something with a little more storage than a simple variable.


Arrays

Arrays are similar to variables, but different in that they can hold multiple values and expressions under one name. Storing multiple values in one variable is what makes arrays so powerful. There is no limit to the amount or type of data that you can store in a JavaScript array and, as long as it is within scope, you can access any value of any item in an array at any time after it is declared in your script. While they can hold any data type in the JavaScript language, including other arrays, it is most common to store similar data in any one array and to assign it a name that is related to the items it contains. Listing 11 provides an example using two separate arrays to store similar data.

Listing 11. Storing similar values in an array
var colors = new Array("orange", "blue", "red", "brown");
var shapes = new Array("circle", "square", "triangle", "pentagon");

As you can see, while it may be possible to store all these items in one array, it isn't logical and may cause problems later in the script, such as identifying what data is in the array.

Accessing values in an array is easy, but there is a catch. Arrays always start with an ID of 0, rather than 1, which can be confusing when you're first getting started. The IDs then increment from 0 on up, for example 0, 1, 2, 3, and so on. To access an array item you must use its ID, which refers to the item's position in the array (Listing 12).

Listing 12. Storing similar values in an array
var colors = new Array("orange", "blue", "red", "brown"); 
document.write("Orange: "+ colors[0]);
document.write("Blue: "+ colors[1]);
document.write("Red: "+ colors[2]);
document.write("Brown: "+ colors[3]);

It is also possible to assign a value to a position in an array or update an item's value in an array, just as you accessed an item in an array earlier (Listing 13).

Listing 13. Assigning values to specific positions in an array
var colors = new Array();
colors[0] = "orange";
colors[1] = "blue";
colors[2] = "red";
colors[3] = "brown";
document.write("Blue: "+ colors[1]);

// Update blue to purple
colors[1] = "purple";
document.write("Purple: "+ colors[1]);

Now you have a good understanding of variables, operators, and arrays. Next, start creating some logic by putting what you've learned into action.


Conditional statements

Conditional statements are the backbone for creating any type of logic in a scripting or programming language, and the JavaScript language is no exception. Conditional statements determine what action to take based on the conditions you script. There are four ways to write conditional statements in the JavaScript language, which are described in Table 6.

Table 6. Conditional statements
StatementDescription
ifUsed to execute a script if a specific condition is true
if...elseUsed to execute one script if a specific condition is true or another script if the condition is false
if...else if...elseUsed to execute one script if one of unlimited conditions is true or another script if all conditions are false
switchUsed to execute one of many scripts

Use the if statement if you only want to execute a script if a condition is true. Listing 14 shows how to use an if statement with a comparison operator to execute a script if the condition is true.

Listing 14. Using an if statement
var num = 10;
if(num == 5)
{
   document.write("num is equal to 5");
}

Use the if...else statement if you want to execute one script if a condition is true or another script if the condition is false, as shown in Listing 15.

Listing 15. Using an if...else statement
var num = 10;
if(num == 5)
{
   document.write("num is equal to 5");
}
else
{
   document.write("num is NOT equal to 5, num is: "+ num);
}

Use the if...else if...else statement if there are different scripts that should execute based on different conditions, as shown in Listing 16.

Listing 16. Using an if...else if...else statement
var num = 10;
if(num == 5)
{
     document.write("num is equal to 5");
}
else if(num == 10)
{
   document.write("num is equal to 10");
}
else
{
  document.write("num is: "+ num);
}

Switch statements are different than if statements in that they cannot be used to determine whether the value of a variable is greater or less than another value. Listing 17 shows an example of when it is appropriate to use a switch statement to determine what script to execute.

Listing 17. Using a switch statement
var num = 10;
switch(num)
{
   case 5:
      document.write("num is equal to 5");
      break;
   case 10:
      document.write("num is equal to 10");
      break;
   default:
      document.write("num is: "+ num);
}

You probably noticed the use of the case clause, break statement and default clause in Listing 17. These clauses and statements are critical to the switch statement. The case clause determines whether the value of switch is equal to the value of the data used in the case clause. The break statement breaks—or stops—the switch statement from executing the rest of the statement. And the default clause identifies a script that runs by default if none of the case statements are executed or if the executed case statements do not have break statements. For example, Listing 18 shows how multiple case statements and the default statement can be executed if no break statements are used in the executed case statements.

Listing 18. Executing multiple lines of code by excluding a break
var num = 10;
switch(num)
{
   case 5:
      document.write("num is equal to 5");
      break;
   case 10:
      document.write("num is equal to 10");
   default:
      document.write("num is: "+ num);
}

The result of this script is "num is equal to 10" followed by "num is: 10." This is sometimes called switch fall-through.

As mentioned at the beginning of this section, conditional statements are the backbone of all logic in any scripting or programming language, but without functions you have a tangled mess of code.


Functions

Functions are useful for a number of reasons. Functions are containers for script that is only to be executed by an event or a call to the function. Therefore, functions do not execute when the browser initially loads and executes the script that is included in a web page. The purpose of a function is to contain script that has a task so that you then have the ability to execute that script and run that task at any time.

Structuring a function is easy; it begins with the word function followed by a space and then the name of the function. The name of the function can be anything you choose; however, it is important to make it something that relates to the task it performs. Listing 19 shows an example of a function that changes the value of an existing variable.

Listing 19. Structuring a simple function
var num = 10;
function changeVariableValue()
{
   num = 11;
}
changeVariableValue();
document.write("num is: "+ num);

The example in Listing 19 not only shows how to structure a function, it also shows how to call a function and change the value of a variable. You can change the variable value in this case because the variable is declared within the scope of the main script, as is the function, so the function is aware of the variable. However, if the variable is declared within the function you cannot access it outside of the function.

Functions also have the ability to accept data through function parameters. Functions can have one or more parameters, and a function call can have one or more arguments based on the number of function parameters. It is common to confuse parameters and arguments; parameters are part of the function definition, and arguments are expressions used when calling the function. Listing 20 shows an example of a function that has parameters and a function call with arguments.

Listing 20. Using function parameters
var num = 10;
function increase(_num)
{
   _num++;
}
increase(num);
document.write("num is: "+ num);

The function in this example increases the value of any argument passed to it. The argument in this case is a variable that you have already declared. By passing it as an argument to the function you are increasing its value to 11.

Return statements are also commonly used in functions. They return a value after executing the script in a function. For example, you can assign the value that is returned by a function to a variable. Listing 21 shows an example of how to return a value from a function after executing the script.

Listing 21. Using the return statement in a function
function add(_num1, _num2)
{
   return _num1+_num2;
}
var num = add(10, 10);
document.write("num is: "+ num);

The result of this script is "num is: 20." The benefit of this function is that it can add any two numbers you pass to it and return a value that can be assigned to any variable, rather than always changing the value of the same variable as in Listing 20.


Loops

As you've seen, arrays can be a great way to store a lot of reusable data, but that's just the starting point; for and while loops provide functionality to iterate these arrays, access their values, and execute script with them.

The most common loop type in the JavaScript language is the for loop. A for loop usually consists of a variable that is assigned a numeric value, then that variable is used with a comparison operator to compare it against another value, and, finally, the numeric value is increased or decreased. The comparison in the for loop is typically determining whether the numeric value of the initial variable is less than or greater than another numeric value. Then, for the period of time that the condition is true, the loop runs and the variable is increased or decreased until the condition evaluates to false. Listing 22 shows an example of how to write a for loop that runs while a numeric value is less than the length of the array.

Listing 22. Structuring a for loop and iterating an array
var colors = new Array("orange", "blue", "red", "brown");
for(var i=0; i<colors.length; i++)
{
   document.write("The color is: "+ colors[i] +"<br/>");
}

The length property of an array provides a numeric value that is equal to the number of items in the array. Again, the trick is that the array starts with an ID of 0. Therefore, if there are 4 items in an array, the length is 4, but the indices in the array are 0, 1, 2, and 3—there is no 4.

Another type of loop is the while loop. They execute faster than for loops, but are appropriate in cases other than iterating an array, such as executing a script while a certain condition is true. Listing 23 shows how to write a while loop that executes a script while a numeric variable is less than 10.

Listing 23. Structuring a while loop
var i = 0;
while(i<10)
{
   document.write(i +"<br/>");
   i++;
}

Notice that the script in the while loop includes a line that iterates the numeric variable until the condition in the while loop is false. Without this line you would have an endless loop.


Conclusion

The JavaScript language is arguably one of the most popular languages, and now you can see why. There are so many possibilities with this simple, but rich, scripting language. The fact that it provides the tools to allow website visitors to interact with a web page after it downloads is powerful. This article lays the foundation for understanding the fundamentals of the JavaScript language. It should now be easier for you to understand how JavaScript libraries function and how to use them to ease the process of writing client-side logic for your web pages. The next step is to put these concepts into practice and also to begin exploring JavaScript objects.

Resources

Learn

Get products and technologies

  • When you achieve a fundamental understanding of the JavaScript language, the jQuery library is a good way to speed up development.

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Web development on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Web development
ArticleID=644430
ArticleTitle=Get started with the JavaScript language, Part 1: JavaScript language fundamentals
publish-date=04052011