Learn Javascript
We now have Package Deals to create and maintain your website for you.
(includes special prices for community groups and hobby clubs)
The following articles form a tutorial series introducing you to how to program with Javascript. The tutorials were written for the http://javascript.about.com/ web site (for which Ask Felgall author Stephen Chapman is now the Guide) and the links below will open the articles directly from that site.
- Getting Started
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 is designed to output the text "Hello World" from the program and is designed to introduce you to the programming language and show you how to write, compile, and execute programs using that language.
- Variables
In this tutorial we will build on what we learned with our first script by creating a variable and displaying the value of that on our web page instead of displaying static text.
- Operators
In the last tutorial you learned how to create variables. In this tutorial we are going to look at how those variables can be manipulated using operators.
- The IF Statement
In the last tutorial you learned about operators that you can use to manipulate text and number variables. In this tutorial we are going to look at a 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. Where the if statement allows two different paths to choose between, with the case statement you can have as many as you like.
- Functions
Moving common code into functions reduces the length of your code and makes modifying that common code easier.
- 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 exists.
- 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.
- Alert and Confirm
The Alert and Confirm built-in functions allow you to make messages pop up on the screen.
- Comments
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
Tools are available to help you find and fix errors in your Javascript.
- 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.
- Using NOSCRIPT
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 something in place of the Javascript generated code for these visitors.
- Objects and Properties
Javascript is an Object Oriented language. This tutorial gives you a brief intoduction into what that means.
- Arrays
How to define and use arrays in Javascript.
- FOR Loops
In this tutorial we look at how to get code to run more than once using the FOR statement.
- While Loops
The while loop is even easier to use than the for loop since it only tests for 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.
- Date and Time
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, 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.
- 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 have included support for their own document object model in all versions of Internet Explorer since version 4.
- Netscape DOM
Microsoft weren't the only ones to create their own Document Object Model for their browser, the people at Netscape did too.
- W3C DOM
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.
- Event Handlers
Often you will not 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.
- Mouse Events
Probably the most common events you will want to have trigger the running of 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 eb=vents in relation to particular objects on your page and run the required Javascript.
- 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.
- Form Handling Events
If you have forms on your page then you will certainly 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.
- 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.
- 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 we need to 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 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?
- 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. So what is the next step?
