1. Technology

Learn to Program with JavaScript

You don't need prior programming experience to be able to follow this tutorial series. We'll take you step by step through how to write your own JavaScript programs, so that you no longer have to rely on pre-built scripts written by others. Instead, you'll be able to write your own scripts that do exactly what you want them to do.

Getting Started
An introduction to a series of tutorials on programming with JavaScript.

Hello World
Just about all programming courses start off with a simple program called "Hello World." This program outputs the text "Hello World," and it's designed to introduce you to the programming language and show you how to write, compile, and execute programs using that language.

In this tutorial, we'll build on what we learned with our first script by creating a variable and displaying its value on a web page instead of displaying static text.

In the previous tutorial, you learned how to create variables. Now, we are going to look at how those variables can be manipulated using operators.

JavaScript Quiz One
This short quiz will test you on what you should have learned so far.

The IF Statement
Now that you know a little about operators, we'll look at couple more types of operators. These operators are commonly used in IF statements.

The CASE Statement
The CASE statement provides another means of selecting which code to process. While the IF statement allows two different paths, with the CASE statement you can have as many paths as you like.

Javascript Quiz Two
This short quiz tests what you have learned about IF and CASE statements.

By using functions, you can reduce the length of your code and make modifying the code easier. Here, we explain how.

Variable Scope
Variables do not necessarily exist for the entire time that your program is running. This tutorial explains when a variable starts and ceases to exist, and when it may be inaccessible even though it does exist.

Passing Parameters
You don't have to process the same variables each time you call a function. You can pass different variables to the function on each call using parameters.

Value of a Function
You can not only pass values to a function, but a function can also pass one back.

Javascript Quiz Three
Test time again. This short quiz will help you assess what you have learned about functions.

Alert and Confirm
The Alert and Confirm built-in functions allow you to make messages pop up on the screen.

Add comments to your JavaScript to remind yourself what it does and to advise others that you own the copyright on it.

Finding and Fixing Errors
The longer your code gets, the harder it may be to find problems. Fortunately, tools are available to help you find and fix errors in your JavaScript.

Javascript Quiz Four
This short quiz will test your knowledge of the alert and confirm functions, comments, and finding and fixing errors.

External JavaScripts
You don't have to code the JavaScript in your web page. This tutorial shows you how to place it in a separate file and link it into your page. This makes it easy to use the same script on multiple pages with only one copy of the code.

While most current browsers understand JavaScript, a lot of the early browsers did not. Also, some people have JavaScript turned off. The NOSCRIPT tag can be used to display a message for these visitors.

JavaScript Quiz Five
This short quiz tests your knowledge of external scripts and the noscript tag.

Objects and Properties
JavaScript is an object-oriented language. This tutorial gives you a brief introduction into what that means.

If your JavaScript has a lot of variables, you may want to group them together in an array. here, we define arrays and teach you how to use them.

JavaScript Quiz Six
Test time again. This short quiz covers objects and arrays.

FOR Loops
In this tutorial, we look at how to get code to run more than once using the FOR statement.

The WHILE loop is even easier to use than the FOR loop, because it only determines when to terminate the loop. You just need to make sure that something in the loop at least has the potential to change what you are testing for.

Javascript Quiz Seven
This short quiz tests what you have learned about creating loops.

Date and Time
Here, we describe how to use dates and times with JavaScript by using the predefined date class.

Mathematical Functions
The Math class provides additional mathematical functions you can use. Unlike other classes, you don't need to define objects to be able to use the methods provided by the class. Instead, you can access them directly.

String Processing
Any variable that you define as having a text value is automatically a string object, and all of the string methods can be applied to it.

JavaScript Quiz Eight
This short quiz tests what you have learned about JavaScript's built-in classes.

Document Object Model
The Document Object Model (or DOM) is a mapping of the content of web pages into a collection of objects that can be referenced from your JavaScript program.

Internet Explorer DOM
Microsoft has included support for their own document object model in all versions of Internet Explorer since version 4.

When the standard DOM was introduced it was different to both the IE and Netscape ones. All current web browsers now support the standard W3C DOM.

Cross Browser DOM
By combining the code to access the three document object models together, we can often create scripts that will work on all browsers that support any of the document object models.

JavaScript Quiz Nine
This short quiz tests what you have learned about the document object model (DOM).

Event Handlers
Oftentimes, you won't want your JavaScript to run as your page is loading. Most JavaScripts need to be run after the page is already loaded, perhaps in response to an action by the person viewing the page. Event handlers are how you detect this and trigger the required JavaScript at the appropriate time.

Keyboard Events
Some people prefer to interact with web pages using their keyboard rather than a mouse. You may want to include event handlers to capture these events too.

Mouse Events
Probably the most common events you will want to trigger the JavaScript code are those resulting from your visitors moving their mouse or pressing their mouse button. In this tutorial, we look at how to detect these events in relation to particular objects on your page.

JavaScript Quiz Ten
This short quiz tests what you have learned about mouse and keyboard events.

Page Events
We can get Javascripts to run after the page has finished loading and even when the page is unloaded (by your visitor requesting another page) by attaching event handlers to the body tag itself.

Form Handling Events
If you have forms on your page, then you will want to perform processing when someone uses that form. Apart from the mouse and keyboard events already discussed, there are some additional events (and handlers) that only apply to forms.

Timed Events
There will often be times (particularly if you are creating animated effects) where you want a piece of JavaScript code to run after a set amount of time has passed. You may even want the code to run over and over at set intervals. To do this, use time event handlers.

Global Events
If we create a global event handler, then we can intercept all occurrences of one or more specified events throughout the entire web page -- all without having to attach that event handler to any of the objects on our page.

Object Oriented Javascript
What is the difference between what we have been looking at so far and true Object Oriented Programming?

JavaScript Quiz Eleven
This short quiz tests what you have learned about form, page, timed, and global events.

Defining Classes
You are not limited to the predefined classes in JavaScript. You can also define your own.

Putting It All Together
We have reached the end of this series, and you've taken your first steps with JavaScript programming. Congratulations! So what is the next step?

Final Quiz
You finally got to the end of the JavaScript tutorials. This 50-question quiz will test how well you can remember what you have learned.

©2014 About.com. All rights reserved.