Javascript Tutorials
These Javascript tutorials can help you to start learning javascript and also to learn more about more advanced Javascript features.
Getting Started
Introduction to a series of tutorials on programming with Javascript
Introduction to a series of tutorials on programming with Javascript
Tools for Making JavaScript
What tools do you need to write JavaScript?
What tools do you need to write JavaScript?
Built-in Functions: alert, confirm, prompt
JavaScript has three built in functions that allow you to instruct the browser to open one of three dialog boxes.
JavaScript has three built in functions that allow you to instruct the browser to open one of three dialog boxes.
How to Attach JavaScript into Your Page
JavaScript used to be added all over the place in web pages making a jumbled mess. By adding the JavaScript to your web page the right way you make both the HTML and JavaScript easier to maintain and make the JavaScript easier to reuse.
JavaScript used to be added all over the place in web pages making a jumbled mess. By adding the JavaScript to your web page the right way you make both the HTML and JavaScript easier to maintain and make the JavaScript easier to reuse.
JavaScript Execution Order
What order des JavaScript run its code in?
What order des JavaScript run its code in?
JavaScript and HTML
There are four ways to attach JavaScript into your HTML. Some ways are better than others.
There are four ways to attach JavaScript into your HTML. Some ways are better than others.
What Version of Javascript
Javascript like all programming languages has evolved over time. What this means is that new commands have been added to the language to support additional functionality and make it easier to use Javascript to provide various tasks. Here's how to determine which version your visitor's browser supports.
Javascript like all programming languages has evolved over time. What this means is that new commands have been added to the language to support additional functionality and make it easier to use Javascript to provide various tasks. Here's how to determine which version your visitor's browser supports.
Functions and Object Constructors
Both functions and object constructors are defined the same way in JavaScript. The difference is in how you call them.
Both functions and object constructors are defined the same way in JavaScript. The difference is in how you call them.
Accessibility and JavaScript
JavaScript should be coded in an unobtrusive fashion in order to make our web pages more accessible to those visitors who don't have it enabled.
JavaScript should be coded in an unobtrusive fashion in order to make our web pages more accessible to those visitors who don't have it enabled.
Design for Usability
Considerations for making a web page as accessible and user friendly as possible.
Considerations for making a web page as accessible and user friendly as possible.
Moving Javascript out of the Web Page
While to an experienced Javascript programmer extracting an embedded Javascript into an external file is a trivial task, just exactly what to extract and how to attach it may not be so obvious to newcomers. Here are some step by step instructions on how to move an embedded javascript from between the script tags into an external file.
While to an experienced Javascript programmer extracting an embedded Javascript into an external file is a trivial task, just exactly what to extract and how to attach it may not be so obvious to newcomers. Here are some step by step instructions on how to move an embedded javascript from between the script tags into an external file.
Five Most Common Coding Errors
The five worst pieces of code that people use with Javascript and which you ought to avoid.
The five worst pieces of code that people use with Javascript and which you ought to avoid.
Recursive JavaScript
You can set up functions to recursively call themselves in JavaScript.
You can set up functions to recursively call themselves in JavaScript.
Bitwise Operators
Bitwise operators are not covered in the introductory tutorial series because they are a rather advanced concept and are seldom used. This short tutorial covers the bitwise operators for those of you who do need them.
Bitwise operators are not covered in the introductory tutorial series because they are a rather advanced concept and are seldom used. This short tutorial covers the bitwise operators for those of you who do need them.
Extracting Colour Codes
The most efficient way of extracting the red, green, and blue components of a colour code into separate fields is using bitwise operators.
The most efficient way of extracting the red, green, and blue components of a colour code into separate fields is using bitwise operators.
Equals, Equals Equals, or Equals Equals Equals
Depending on the Javascript that you are writing there may be instances where you want to place one two or even three equals signs next to one another. Here we look at what =, ==, and === mean and how to write your code to reduce the likelyhood of problems if you accidentally put fewer equals signs than you intended.
Depending on the Javascript that you are writing there may be instances where you want to place one two or even three equals signs next to one another. Here we look at what =, ==, and === mean and how to write your code to reduce the likelyhood of problems if you accidentally put fewer equals signs than you intended.
onclick
Having something happen when your visitor clicks on something is probably one of the most common ways you will want to us JavaScript with your page. In this tutorial we look at the different ways of attaching the processing that we want to happen when they click starting from the worst but most common way people code it through to the berst way of coding it.
Having something happen when your visitor clicks on something is probably one of the most common ways you will want to us JavaScript with your page. In this tutorial we look at the different ways of attaching the processing that we want to happen when they click starting from the worst but most common way people code it through to the berst way of coding it.
Text String to Number Conversion
You often need to convert text into numbers with JavaScript. Fortunately JavaScript provides lots of way of doing so.
You often need to convert text into numbers with JavaScript. Fortunately JavaScript provides lots of way of doing so.
Referencing Form Fields
While you can reference form fields using the name attributes, it is more consistent for you to reference them from JavaScript using the id attribute as you do to reference all other parts of the HTML.
While you can reference form fields using the name attributes, it is more consistent for you to reference them from JavaScript using the id attribute as you do to reference all other parts of the HTML.
JScript is not Javascript
Internet Explorer doesn't understand Javascript. Instead it has its own scripting language called JScript. Most of the time Javascript code is also valid as JScript - but not always.
Internet Explorer doesn't understand Javascript. Instead it has its own scripting language called JScript. Most of the time Javascript code is also valid as JScript - but not always.
Naming DOM Created Fields and Internet Explorer
Internet Explorer fails to follow the standards when it comes to being able to name form fields that you create via Javascript and the Document Object Model. To be able to add named form fields you need to determine whether the browser is running JScript or Javascript and for JScript use a special non-standard way of adding the field with the name already specified.
Internet Explorer fails to follow the standards when it comes to being able to name form fields that you create via Javascript and the Document Object Model. To be able to add named form fields you need to determine whether the browser is running JScript or Javascript and for JScript use a special non-standard way of adding the field with the name already specified.
JScript
In many ways JScript is a lot more powerful than Javascript since it can do many things that Javascript can't and can also be used in Stylesheets.
In many ways JScript is a lot more powerful than Javascript since it can do many things that Javascript can't and can also be used in Stylesheets.
Feature Sensing
Right from day one Javascript has provided a simple way to check whether the version of Javascript currently being run supports a given object, method or function. The same (or similar code) can also be used to check if a property or variable exists.
Right from day one Javascript has provided a simple way to check whether the version of Javascript currently being run supports a given object, method or function. The same (or similar code) can also be used to check if a property or variable exists.
Javascript and XHTML
XHTML treats embedded Javascript code slightly differently from the way HTML does. Here's how to get them working together properly.
XHTML treats embedded Javascript code slightly differently from the way HTML does. Here's how to get them working together properly.
Disable Javascript
To properly test your web pages you need to consider those people who have Javascript disabled. Here's how to turn off Javascript in your web browsers so that you can see your page as they will ses it.
To properly test your web pages you need to consider those people who have Javascript disabled. Here's how to turn off Javascript in your web browsers so that you can see your page as they will ses it.
Identifying Internet Explorer
Since Internet Explorer works somewhat differently from modern web browsers it may be useful to clearly identify when that browser is being used. Here are two ways that you can use that will identify genuine Internet Explorer browsers regardless of what other browsers do to mask what they really are because it uses feature sensing.
Since Internet Explorer works somewhat differently from modern web browsers it may be useful to clearly identify when that browser is being used. Here are two ways that you can use that will identify genuine Internet Explorer browsers regardless of what other browsers do to mask what they really are because it uses feature sensing.
Number Bases and Leading Zeros
Sometimes functions such as parseInt don't do quite what you expect in converting text into numbers. This is because computers work with number bases other than the base ten (or decimal) counting system that we are used to.
Sometimes functions such as parseInt don't do quite what you expect in converting text into numbers. This is because computers work with number bases other than the base ten (or decimal) counting system that we are used to.
Faster DOM Access
Enable your Javascript code to interact with the DOM before the entire page finishes loading with this simple code change.
Enable your Javascript code to interact with the DOM before the entire page finishes loading with this simple code change.
Unobtrusive JavaScript
Your web page will work a lot better with the JavaScript completely removed from the HTML. Here's how to take all the JavaScript out of the body of your web page and still have it work just the same.
Your web page will work a lot better with the JavaScript completely removed from the HTML. Here's how to take all the JavaScript out of the body of your web page and still have it work just the same.
Alternative Ways to Define Functions
There is more than one way to define a function in Javascript - in fact there are three. Each works slightly differently and can result in more effective code in the right circumstances.
There is more than one way to define a function in Javascript - in fact there are three. Each works slightly differently and can result in more effective code in the right circumstances.
Browser Detection
Many people using browsers other than Internet Explorer set their browser to report itself as IE because of all of the scripts that people use that don't recognise the other browsers as existing let alone being able to run everything IE can and more. This script works out what browser your visitor is really using regardless of what they have set it to report as.
Many people using browsers other than Internet Explorer set their browser to report itself as IE because of all of the scripts that people use that don't recognise the other browsers as existing let alone being able to run everything IE can and more. This script works out what browser your visitor is really using regardless of what they have set it to report as.
Internet Explorer 6 DOCTYPE Bug
The DOCTYPE of a web page should have no effect on how the Javascript attached to that web pahge functions. Microsoft however have decreed that it should resulting in making your Javascript code more complicated.
The DOCTYPE of a web page should have no effect on how the Javascript attached to that web pahge functions. Microsoft however have decreed that it should resulting in making your Javascript code more complicated.
Alternatives to eval
The javascript command "eval" can be used to evaluate text as javascript. Doing so though opens up major security holes in your code as well as making the code way less efficient than it needs to be. There is (almost) never any need to use this function as for most uses there is an alternate coding that is cleaner and more efficient.
The javascript command "eval" can be used to evaluate text as javascript. Doing so though opens up major security holes in your code as well as making the code way less efficient than it needs to be. There is (almost) never any need to use this function as for most uses there is an alternate coding that is cleaner and more efficient.
document.write
It may be the easiest way to write something into your web page but document.write has a lot of limitations on how it can be used.
It may be the easiest way to write something into your web page but document.write has a lot of limitations on how it can be used.