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
Free JavaScript Download
You don't have to pay for JavaScript and you don't have to write it yourself either unless you want to.
You don't have to pay for JavaScript and you don't have to write it yourself either unless you want to.
Why JavaScript
How should you use JavaScript so that it enhances your site.
How should you use JavaScript so that it enhances your site.
Tools for Making JavaScript
What tools do you need to write JavaScript?
What tools do you need to write JavaScript?
JavaScript Library or Code Yourself
Should you use a JavaScript library or write all the code yourself. Both ways have advantages and disadvantages.
Should you use a JavaScript library or write all the code yourself. Both ways have advantages and disadvantages.
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 does JavaScript run its code in?
What order does JavaScript run its code in?
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.
JavaScript Link
Some ways of attaching JavaScript into your web page are better than others. Here we consider the alternative ways that you can attach JavaScript events to your page content.
Some ways of attaching JavaScript into your web page are better than others. Here we consider the alternative ways that you can attach JavaScript events to your page content.
Running JavaScript as JScript
JavaScript can be thought of as a subset of jScript
JavaScript can be thought of as a subset of jScript
JavaScript Data Typing
JavaScript does not necessarily ignore data types during processing.
JavaScript does not necessarily ignore data types during processing.
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.
HTML and the DOM
You need to understand how the Document Object Model relates to your HTML source if you expect JavaScript to update the web page correctly.
You need to understand how the Document Object Model relates to your HTML source if you expect JavaScript to update the web page correctly.
Two DOMs
The XHTML Document Object Model is not the same as the HTML one.
The XHTML Document Object Model is not the same as the HTML one.
JavaScript and XHTML
There are two completely different document object models that JavaScript can work with - one for HTML and one for XHTML. In this tutorial we consider some of the biggest differences in how they work
There are two completely different document object models that JavaScript can work with - one for HTML and one for XHTML. In this tutorial we consider some of the biggest differences in how they work
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.
JavaScript Redirect
JavaScript can redirect your visiitors to a different page.
JavaScript can redirect your visiitors to a different page.
JavaScript Windows
JavaScript is now the only way supported by current standards for opening a new window and even there you really need to think about whether you really should.
JavaScript is now the only way supported by current standards for opening a new window and even there you really need to think about whether you really should.
JavaScript Split
In JavaScript strings can be split using the split method belonging to string objects.
In JavaScript strings can be split using the split method belonging to string objects.
JavaScript Alert
The alert built in function provides JavaScript with a very basic debuggung tool.
The alert built in function provides JavaScript with a very basic debuggung tool.
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.
JavaScript Dates
javascript date, date method, format, add period, date difference, javascript
javascript date, date method, format, add period, date difference, javascript
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.
Making Events Unobtrusive
Update old JavaScripts by converting them to make them unobtrusive. Here's step by step instructions on how to do it.
Update old JavaScripts by converting them to make them unobtrusive. Here's step by step instructions on how to do it.
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.
Using Anonymous Functions to Bypass IE Name Bug
JScript insists on sticking a whole lot of variables into the global namespace that JavaScript doesn't. This is a possible cause for why JScript might not run as JavaScript or vice versa. You can avoid this field name clash completely using anonymous functions and get your code so it works the same in both JScript and JavaScript.
JScript insists on sticking a whole lot of variables into the global namespace that JavaScript doesn't. This is a possible cause for why JScript might not run as JavaScript or vice versa. You can avoid this field name clash completely using anonymous functions and get your code so it works the same in both JScript and JavaScript.
JavaScript Object Notation
JavaScript provides a really compact way of defining objects.
JavaScript provides a really compact way of defining objects.
When to Use Libraries
You need at least a decent knowledge of JavaScript before you can use a JavaScript library effectively.
You need at least a decent knowledge of JavaScript before you can use a JavaScript library effectively.
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.
ActiveX
ActiveX is not accessible from JavaScript
ActiveX is not accessible from JavaScript
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.
Getting Rid of Noscript
Here are a couple of simple examples to demonstrate how you can make your page more accessible, more semantically correct, as well as making the JavaScript completely unobtrusive simply by getting rid of the noscript tag.
Here are a couple of simple examples to demonstrate how you can make your page more accessible, more semantically correct, as well as making the JavaScript completely unobtrusive simply by getting rid of the noscript tag.
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.