Learn to Program with Javascript
You do not need prior programming experience to be able to follow this tutorial series that takes you step by step through how to write your own Javascript programs. No longer will you have to rely on pre-built scripts written by others. You will be able to write your own scripts that do exactly what you want them to do.
Getting Started
Introduction to a series of tutorials on programming with Javascript
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.
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.
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.
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.
Javascript Quiz One
This short quiz will test you on what you should have learned so far.
This short quiz will test you on what you should have learned so far.
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.
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.
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.
Javascript Quiz Two
This short quiz tests what you have learned about if and case statements.
This short quiz tests what you have learned about if and case statements.
Functions
Moving common code into functions reduces the length of your code and makes modifying that common code easier.
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.
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.
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.
You can not only pass values to a function but a function can also pass one back.
Javascript Quiz Three
This short quiz tests what you have learned about functions.
This short quiz tests 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.
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.
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.
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.
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.
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.
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.
Javascript Quiz Five
This short quiz tests your knowledge of external scripts and the noscript tag.
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 intoduction into what that means.
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.
How to define and use arrays in Javascript.
Javascript Quiz Six
This short quiz tests what you have learned about objects and arrays.
This short quiz tests what you have learned about objects and arrays.
FOR Loops
In this tutorial we look at how to get code to run more than once using the FOR statement.
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.
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.
Javascript Quiz Seven
This short quiz tests what you have learned about creating loops.
This short quiz tests what you have learned about creating loops.
Date and Time
How to use dates and times with Javascript by using the predefined date class.
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.
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.
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.
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.
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.
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.
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.
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.
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.
This short quiz tests what you have learned about the Document Object Model.
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.
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 events in relation to particular objects on your page and run the required Javascript.
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 events 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.
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.
Javascript Quiz Ten
This short quiz tests what you have learned about mouse and keyboard events.
This short quiz tests what you have learned about mouse and keyboard events.
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.
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.
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.
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.
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.
Javascript Quiz Eleven
This short quiz tests what you have learned about form, page, timed, and global events.
This short quiz tests what you have learned about form, page, timed, and global events.
Object Oriented Javascript
What is the difference between what we have been looking at so far and true Object Oriented Programming?
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.
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?
We have reached the end of this series and you've taken your first steps with Javascript programming. So what is the next step?
Final Quiz
So you have finally got to the end of the Javascript tutorials. This 50 question quiz will test if you can still remember what you have learned.
So you have finally got to the end of the Javascript tutorials. This 50 question quiz will test if you can still remember what you have learned.