Are you new to JavaScript, or trying to learn advanced techniques? These tutorials will show you step by step how to create and add JavaScript code to any Web page. There are also many advanced tutorials to enhance your understanding of the language. For Ajax instructions, see our Ajax tutorial section.
General questions and help requests should be posted to The JavaScript Forum.
More on internet.com
Title: Using JavaScript To Call PHP Database Routines Between Windows
Contributor:PHPBuilder
Contributor URL: http://www.phpbuilder.com/
Date Uploaded: March 31, 2009
Description: This tutorial shows how to create a select or dropdown list for use with database routines. Learn how to gather input in one window for processing in another window.
Title: A Personalized "Thank You" Page With Any Form
Contributor: Will Bontrager
Contributor URL: http://www.willmaster.com/
Date Uploaded: March 2, 2009
Description: This tutorial will show how to personalize the "thank you" page in your forms. The personalization uses information the visitor provides on the form.
Title: The JavaScript Chronicles - Data Types
Contributor: Thomas Valentine
Contributor URL: http://www.wdvl.com/
Date Uploaded: February 4, 2009
Description: There are a number of different types of data that can be used with JavaScript. Understanding each one is of paramount importance when you begin to write more complex scripts that require the use of more than one type of data.
Title: The JavaScript Chronicles
Contributor: Thomas Valentine
Contributor URL: http://www.wdvl.com/
Date Uploaded: January 28, 2009
Description: Want to make your page pop? JavaScript may be the answer. Check out this in-depth series, which covers JavaScript from A-Z.
Title: Coupling Async Scripts
Contributor: Steve Souders
Contributor URL: http://www.stevesouders.com/
Date Uploaded: January 23, 2009
Description: This article discusses two parallel issues: how async scripts make the page load faster, and how async scripts and inline scripts can be coupled using a variation of John Resig’s Degrading Script Tags pattern.
Title: Modifying an Element on the Fly
Contributor: Yehuda Shiran
Contributor URL: http://www.webreference.com/js/
Date Uploaded: January 9, 2009
Description: You can change an HTML element by setting one of the four inner/outer properties.
Title: qooxdoo and SproutCore Frameworks
Contributor: Rob Gravelle
Contributor URL: http://www.webreference.com/
Date Uploaded: December 17, 2008
Description: This overview of JavaScript Framework libraries is designed to help you make a more informed decision when choosing the right Framework. This fourth installment of the series presents an overview of qooxdoo and SproutCore.
Title: Dojo, Rialto and Spry Frameworks
Contributor: Rob Gravelle
Contributor URL: http://www.webreference.com/
Date Uploaded: December 8, 2008
Description: This overview of JavaScript Framework libraries is designed to help you make a more informed decision when choosing the right Framework. This third installment of the series presents an overview of Dojo, Rialto and Spry.
Title: How to Grey Out the Screen
Contributor: Patrick Hunlock
Contributor URL: http://www.hunlock.com/
Date Uploaded: November 26, 2008
Description: This tutorial will show you how to "gray" out the screen and create a "modal" environment. A "gray-out" is useful for creating a DHTML dialog box, or showing off a picture or video. While it's active, most of the interactive elements on the page are inactive.
Title: Animated Hovering Windows Using JavaScript
Contributor: Jonathan Campbell
Date Uploaded: November 14, 2008
Description: You've probably seen many Web sites with windows that seem to appear out of nowhere on the screen. This tutorial will explain how to use that technique to accomplish your own effects.
Title: JQuery, Yahoo! UI Library and MochiKit JavaScript Frameworks
Contributor: Rob Gravelle
Contributor URL: http://www.webreference.com/
Date Uploaded: November 7, 2008
Description: This overview of JavaScript Framework libraries is designed to help you make a more informed decision when choosing the right Framework. This second installment of the series presents an overview of JQuery, the Yahoo! UI Library (YUI) and MochiKit.
Title: Totally Own CSS with JavaScript
Contributor: Patrick Hunlock
Contributor URL: http://www.hunlock.com/
Date Uploaded: November 3, 2008
Description: The last great frontier for a JavaScript programmer is usually the direct manipulation of a stylesheet. While incredibly powerful tools, the documentation is sparse and the browsers rife with incompatibilities. This tutorial examines three functions which will make working with stylesheets very trivial. There is also a short tutorial and reference for those who want to go beyond the basic tools.
Title: Creating a Virtual jQuery Keyboard
Contributor: Kishore Nallan
Contributor URL: http://www.kishorelive.com/
Date Uploaded: October 27, 2008
Description: This tutorial explains how to implement a simple virtual keyboard with some help from jQuery. An excellent technique for use when security is important.
Title: Google Calendar API: Developer's Guide
Contributor: Google Code
Contributor URL: http://code.google.com/
Date Uploaded: October 17, 2008
Description: This document describes how to use the JavaScript client library to send Google Data API queries and interpret returned responses. You might use the API to: create a Web front end to let people view their Google Calendar information from within your site; publicize upcoming events by programmatically adding them to Google Calendar; build an application to sync between Google Calendar and mobile devices; or create mashups with other APIs like Google Maps.
Title: Popular JavaScript Framework Libraries: An Overview
Contributor: Rob Gravelle
Contributor URL: http://www.webreference.com/
Date Uploaded: October 10, 2008
Description: JavaScript Framework libraries have become an integral part of Web development. This series presents an overview of a dozen of the most popular JavaScript Frameworks. This particular installment focuses on Prototype, script.aculo.us, and MooTools.
Title: Yahoo! UI Library: Paginator
Contributor: Yahoo! Developer Network
Contributor URL: http://developer.yahoo.com/
Date Uploaded: October 6, 2008
Description:The Paginator Control allows you to reduce the page size and render time of your site or Web application by breaking up large data sets into smaller pages. Paginator addresses the navigation aspect of chunked content, offering a set of controls that it can render into your UI to allow users to navigate through logical sections of local or remote data.
Title: MooTools Basic Tips for Web Designer: Part 3 - Interaction with HTML Forms
Contributor: Antonio Lupetti
Contributor URL: http://woork.blogspot.com/
Date Uploaded: September 29, 2008
Description:This tutorial series illustrates some simple tips to begin working with MooTools. This installment illustrates how to implement simple interactions with form input elements using this powerful framework and unobtrusive JavaScript code.
Title: Jeene: An Automatic Partial Evaluator for JavaScript
Contributor: Karl Krukow
Contributor URL: Higher-Order
Date Uploaded: September 24, 2008
Description: This tutorial shows that is is possible to create an online partial evaluator for JavaScript, written also in JavaScript. This is the first in a series describing the inner workings of Jeene.
Title: Seven Ways to Toggle an Element
Contributor: Dustin Diaz
Contributor URL: http://www.dustindiaz.com/
Date Uploaded: September 15, 2008
Description:There are an unlimited number of ways to toggle an element's display using JavaScript. Although it has been around for awhile, toggling still proves itself to be useful in improving user interaction. Here are seven methods of implementing the technique.
Title: MooTools Basic Tips for Web Designer: Part 2 - Writing Unobtusive JavaScript Code
Contributor: Antonio Lupetti
Contributor URL: http://woork.blogspot.com/
Date Uploaded: September 10, 2008
Description:This tutorial series illustrates some simple tips to begin working with MooTools. This installment illustrates how to obtain the ID of DOM elements using MooTools and unobtrusive elegant code.
Title: Getting Started With jQuery QUnit for Client-Side Javascript Testing
Contributor: Chad Myers
Contributor URL: http://www.lostechies.com/
Date Uploaded: September 3, 2008
Description: This tutorial examines QUnit, the jQuery-based unit test framework, and shows how to implement it in your testing procedures.
Title: MooTools Basic Tips for Web Designer: Part 1
Contributor: Antonio Lupetti
Contributor URL: http://woork.blogspot.com/
Date Uploaded: August 27, 2008
Description:This tutorial series illustrates some simple tips to begin working with MooTools. This first installment shows how to manipulate element properties, in particular how to get DOM element by ID, how to use getStyle(), setStyle(), and toInt() and some examples to introduce writing unobtrusive JavaScript code.
Title: Non-blocking JavaScript Downloads
Contributor: Stoyan Stefanov
Date Uploaded: August 4, 2008
Description: External JavaScript files block downloads and hurt your page performance, but there is an easy way to work around this problem: use dynamic scripts tags and load scripts in parallel, improving the page loading speed and the user experience.
Title: JavaScript Shell Command from JDK
Contributor: Dr. Herong Yang
Date Uploaded: July 28, 2008
Description: This tutorial provides introductions and examples on the JavaScript shell command included in the JDK package. Topics include downloading and installing JDK 1.6, ECMAScript engine, running JavaScript code in command line, interactive or batch mode.
Title: How to Populate Fields from New Windows
Contributor: Jonathan Fenocchi
Date Uploaded: July 21, 2008
Description: Occasionally, filling out forms can be daunting. Fortunately, some forms display a question mark next to the form field, which opens a popup window containing additional information. In this tutorial you'll learn how to enhance the functionality of those windows.
Title: Bring Your Forms to Life With JavaScript
Contributor: Kris Hadlock
Date Uploaded: July 9, 2008
Description: This tutorial will show how to prevent errors in your forms and ultimately bring them to life using JavaScript.
Title: Calling an ActionScript Function from JavaScript
Contributor: Aral Balkan
Contributor URL: http://osflash.org/
Date Uploaded: June 16, 2008
Description: This tutorial will show you how to use the FlashProxy JavaScript class to proxy function calls between Flash and JavaScript.
Title: Cookie Monsters Inc
Contributor: Patrick Hunlock
Contributor URL: http://www.hunlock.com/
Date Uploaded: June 4, 2008
Description: One of the most powerful tools available to the Web developer are HTTP cookies. Here's the 411 on how cookies work, complete with public domain JavaScript functions.
Title: Developing a Simple Validation Library in JavaScript
Contributor: Jagadish Chaterjee
Contributor URL: http://jagchat.spaces.live.com/
Date Uploaded: June 2, 2008
Description: This tutorial teaches some of the most commonly used JavaScript functions for client side validation of HTML forms. You can reuse these scripts to inject into server side controls.
Title: Using Prototype to Load Javascript Files
Contributor: David Kees
Contributor URL: http://www.magichatdevelopment.com/
Date Uploaded: May 19, 2008
Description: This tutorial shows the implementation of the general technique of loading functionality via scripts based on the availability of DOM elements.
Title: Introduction to the Document Object Model
Contributor: Mike Hall
Date Posted: May 14, 2008
Description:
The Document Object Model, or DOM, is the interface that allows you to programmatically access and manipulate the contents of a Web page. This tutorial is a discussion on the DOM representation of a document and the methods it
provides to access those objects.
Title: JSONVid: Pure JavaScript Video Player
Contributor: Jacob Seidelin
Date Posted: May 5, 2008
Description:
Jacob Seidelin went on a mission to create a pure JavaScript video player that didn't use Flash. The result: JSONVid.
Title: An Introduction to JavaScript Object Notation (JSON)
Contributor: Rob Gravelle
Date Posted: April 23, 2008
Description:
JavaScript Object Notation, or JSON for short, is a lightweight data-interchange format which may prove to be a viable alternative to XML for IT developers. It's easy to read and write by people as well as for machines to parse and generate.
Title: Advanced JavaScript Debugging Techniques
Contributor: Mike Wilcox
Date Posted: April 14, 2008
Description:
The purpose of this tutorial is to provide a list of advanced debugging techniques that are not easily found elsewhere on the web. We all worship at the altar of Firebug, but there are things that can go beyond a console.log().
Title: Learn How to Use and Get the Most out of Regular Expressions
Contributor: Jan Goyvaerts
Date Posted: April 7, 2008
Description:
This tutorial is quite unique because it not only explains the regular expression (regex) syntax, but also describes in detail how the regex engine actually goes about its work.
Title: Using CSS and Mootools to Simulate Flash Horizontal Navigation Effect
Contributor: Antonio Lupetti
Date Posted: April 2, 2008
Description:
This tutorial explains how to use Mootools and pure CSS/HTML code to simulate a Flash horizontal navigation effect. Easy to implement, with complete source code.
Title: JavaScript Metaclass Programming
Contributor: Neil Roberts
Date Posted: March 19, 2008
Description:
In this tutorial series, Neil Roberts looks at metaclass programming and how to implement it in JavaScript. Metaclass programming is the programming that builds a class. Since most of the time a metaclass simply takes an already declared class and manipulates it, you can think of a metaclass as a template: a class goes in, and a specifically structured class comes out.
Title: How to Create Remote AJax Requests
Contributor: Kris Hadlock
Date Posted: February 21, 2008
Description:
One of the most common questions about Ajax is whether it's possible to create remote or cross-domain Ajax requests. The answer is yes and in this tutorial you'll learn how to create an Ajax-enabled podcast aggregator with PHP and Ajax.
Title: API Developer's Guide: JavaScript
Contributor: Google
Date Posted: February 11, 2008
Description:
This document describes how to use the JavaScript client library to send Google data API ("GData") queries and interpret returned responses.
Title: Eloquent JavaScript
Contributor: Marijn Haverbeke
Date Posted: February 1, 2008
Description:
This is a comprehensive introduction to the JavaScript programming language. In addition, it also contains plenty of example programs, and a console to try them out and test them.
Title: Using Multiple JavaScript Onload Functions
Contributor: Lee Underwood
Date Posted: January 25, 2008
Description:
When using multiple scripts, often they are executed using onload event handlers. This can sometimes be a bit tricky if more than more is used. Check out this easy, fool-proof method for use with your scripts.
Title: A Practical Guide to Numbers in JavaScript
Contributor: Greg Burghardt
Date Posted: December 5, 2007
Description: Dealing with numbers, strings and JavaScript can be frustrating for a beginner. This is a down-and-dirty explanation of converting strings to numbers, detecting if a string is a number, and handy functions for manipulating numbers.
Title: Are You Ready for This?
Contributor: Patrick Hunlock
Date Posted: October 26, 2007
Description: This tutorial takes you through a page's ready states and shows how to write JavaScript code to determine when a page's DOM elements are loaded and available.
Title: JavaScript, DOM, and the Humble Form
Contributor: Greg Burghardt
Date Posted: October 19, 2007
Description: So you've got a form on your Web page, and now you want JavaScript to interact with it. This tutorial outlines the various methods used when scripting forms, and explains the Form Document Object Model in detail. Includes code examples of the two main methods with an emphasis on Web standards and best practices.
Title: Loading Two or More Frames Simultaneously
Contributor: Will Bontrager
Date Posted: September 12, 2007
Description: When you have a framed site and want to load content into two or more frames when only one link is clicked, JavaScript can be used to accomplish it.
Title: Browser Detecting (and What to Do Instead)
Contributor: Richard Cornford
Date Posted: September 4, 2007
Description: Browser detection has proven unreliable. An alternative strategy is known as object or feature detection. This tutorial examines why browser detection does not work, and looks at how to implement feature detection.
Title: Understanding the JavaScript RegExp Object
Contributor: Harish Kamath
Date Posted: August 22, 2007
Description:
Need to match and replace patterns on a Web page? JavaScript can do the job quite well. This tutorial will teach you how, with an introduction to the JavaScript RegExp object and its methods.
Title: A Personalized "Thank You" Page
Contributor: Will Bontrager
Date Posted: August 15, 2007
Description:
This tutorial will show how to create a personalized "thank you" page for all of your forms. The method described here is accomplished with JavaScript and cookies.
Title: Effectively Requiring Cookies With All Browsers
Contributor: Will Bontrager
Date Posted: May 9, 2007
Description:
If you have any Web pages that must not be viewed unless a certain cookie is set, this article contains the means to make it so. The article sidesteps the argument that restricted content can be viewed simply by turning off JavaScript. It will show you how to redirect browsers to a different page if they don't have JavaScript turned on.
Title: The Perfect Pop-Up
Contributor: Ian Lloyd
Date Posted: March 26, 2007
Description:
If you believe the likes of Jakob Neilsen and his supporters, nothing is more evil than pop-up windows. And in many ways, this is correct. Why? Well, we'll list the reasons soon enough, but in a nutshell it's because they are nearly always poorly implemented or simply not needed. This tutorial will show that, with the right thought, pop-up windows can be used without upsetting anyone - particularly the person browsing your site.
Title: String Concatenation and String Operators
Contributor: Jennifer Madden
Date Posted: March 14, 2007
Description:
Concatenation is the process of combining two or more separate strings together to form one string. You can also use string operators to break up a long string into multiple strings to make your source code more readable. This tutorial explains how to use both procedures.
Title: The JavaScript Array: Definition and Syntax
Contributor: Jennifer Madden
Date Posted: February 15, 2007
Description: A JavaScript array is a beautiful thing. It is a little database holding any given type of information, and is easily accessible to you and your scripts. To understand each part of an array, this tutorial examines custom arrays and DOM arrays.
Title: Attributes > Classes: Custom DOM Attributes for Fun and Profit
Contributor: Pete Forde
Date Posted: January 12, 2007
Description: XHTML gives the ability to extend markup with customized, semantically meaningful attributes. The battle between classes and attributes might be a holy war to some and unknown to most others. To clear things up, this article gives several examples and provides functions for working with your own custom attributes.
Title: JavaScript Cheat Sheet
Contributor: Dave Child
Details: Posted June 15, 2006
Description: The JavaScript cheat sheet is designed to act as a reminder and reference sheet, listing methods and functions of JavaScript. It includes reference material for regular expressions in JavaScript, as well as a short guide to the XMLHttpRequest object.
Title: Scaling an Image
Contributor: Santhi Maadhaven
Details: Posted June 6, 2005
Description: Sometimes you need to resize an image according to the window's size. You can accomplish this using the JavaScript clientWidth and clientHeight object properties.
Title: Core JavaScript Reference: Version 1.5
Details: 236 Kb * Posted May 9, 2005
Description: This downloadable book (in HTML format) is a reference manual for the core JavaScript language, version 1.5. Can be used in conjunction with the Core JavaScript Guide, listed below. Download the file, unzip it, and open the "contents.html" file. Written by the developers at Netscape Communications. An excellent resource.
An online version can be found here.
Title: Core JavaScript Guide: Version 1.5
Details: 1 MB * Posted April 27, 2005
Description: Starting at the beginning, this downloadable book (in HTML format) explains everything you need to know about using core JavaScript. This book assumes you have the following basic background: a general understanding of the Internet and the World Wide Web and a good working knowledge of HTML. Download the file, unzip it, and open the "contents.html" file. Written by the developers at Netscape Communications. An excellent resource.
An online version can be found here.
Title: The JavaScript Diaries
Contributor: Lee Underwood
Details: Posted April 18, 2005
Description: JavaScript is a versatile language which can enhance your Web site. This is an ongoing series on the process of learning JavaScript, starting from the very beginning.
- Introduction: JavaScript is a versatile language which can be used to create menus, validate forms, provide interactive calendars, post the current day's headlines, track a visitor's history on your site and much more. This installment is part one of an ongoing series on the process of learning JavaScript.
- Data Types & Variables: In this installment we delve into parts of the language and also write our first script.
- Operators: This installment takes a look at JavaScript operators, which are used to accomplish many different tasks. Some of the topics covered are mathematical operators, comparison operators, assignment operators, logical (boolean) operators and much more.
- Functions: In this section, we take a look at JavaScript functions. These help us to write more intricate programs. A sampling of topics includes writing functions, naming rules, calling a function, global and local variables and more.
- Conditional Statements and Loops: This week, as we continue our quest to learn the JavaScript language, we'll look at conditional statements and loops. These can help us to add more depth and complexity to our scripts.
- Objects: In this installment we go a little deeper into our study of JavaScript. Some of the topics covered here include JavaScript objects, object properties and methods, and the constructor function.
- Browser-Based Objects: In our last installment we looked at how to create custom-made objects using the
Object() constructor. This installment continues that study by taking a look at browser-based objects.
- Window Methods: Moving ahead in our study, in this installment we look at the methods that are associated with the window object and how they work. Until now, we've been learning how to build the framework of our scripts but now we'll start to see things happen! Using these methods you'll learn how to begin to implement JavaScript in your Web sites.
- Window Event Handlers: In the last two sections of this series we looked at properties and methods of the window object. In this installment, we wrap up our study of the window object by learning how to use the most common window event handlers. There are also some excellent links for additional help.
- Navigator, Screen, History and Location Objects: There are four objects that provide information about the environment of the user's system. They belong to the window object: navigator, screen, history and location. These objects are used to obtain information such as screen size and resolution, color depth of the monitor, limited information on the browser history, the URL and more.
- Arrays: Part 1 - Introduction: In our continuing JavaScript saga, this installment takes a look at JavaScript arrays, which can be very useful in creating different types of scripts. This study will span several installments due to its complexity.
- Arrays: Part 2 - Multiple Array Types: This installment takes a look at multidimensional and associative arrays. As you learn to use these you'll begin to understand how they can be incorporated into your Web sites.
- Arrays: Part 3 - Array Properties and Methods: Now that we know about the different types, we'll learn how to manipulate them in order to make them more functional. This installment takes a look at the properties and methods that are commonly used for most coding situations.
- The Math Object: This installment looks at the Math object, a JavaScript object used to perform mathematical operations such as obtaining the values of predefined mathematical constants. It can also be used to generate random numbers.
Title: Basic Date Display Script
Contributor: Lee Underwood
Details: Posted April 4, 2005
Description: Would you like to display the current date on your Web pages? One option is to use JavaScript. This tutorial shows you how to implement an existing script. The script itself also comes with comments so you can understand how the whole process works.
Title: Creating an Autosuggest Textbox with JavaScript: Part 1
Contributor: Nicholas C. Zakas
Details: Posted March 21, 2005
Description: One of Google's new applications is Google Suggest. As you type, Google suggests search terms that come up with results. While not a new implementation, it's quickly becoming popular among developers. This installment will teach you how to build an autosuggest control one step at a time.
Title: Creating an Autosuggest Textbox with JavaScript: Part 2
Contributor: Nicholas C. Zakas
Details: Posted June 6, 2005
Description: In the first part of this series, you learned how to create type ahead functionality in a textbox, which presents the user with a single suggestion for what they've already typed. This article builds upon that functionality by adding a dropdown list of multiple suggestions.
Title: Creating an Autosuggest Textbox with JavaScript: Part 3
Contributor: Nicholas C. Zakas
Details: Posted June 6, 2005
Description: In the second part of this series, you learned how to add a dropdown suggestion list to the autosuggest control. This week you'll learn how to complete the modifications, make your suggestions case insensitive and get the suggestions back from the server instead of using client-side information.
Title: WebReference JavaScript Articles
Details: Posted March 1, 2005
Description: This is a listing of JavaScript articles appearing on the WebReference.com Web site. They range from beginner to expert.
Title: DevX JavaScript Articles
Details: Posted March 1, 2005
Description: This is a listing of JavaScript articles appearing on the DevX.com Web site. They range from beginner to expert.
Title: FrontPage 2000
Details: Posted July 26 2000
Description: Shows you step-by-step how to add JavaScript code from The JavaScript Source to your page within FrontPage 2000.
Title: JavaScript Tutorial
Contributor: Aaron Weiss
Details: Posted October 16 2000
Description: This JavaScript tutorial is aimed primarily at those who have had at least some exposure to another programming language. It is not our purpose here to cover the basic concepts of computer programming, but rather illustrate the syntax and methodology of JavaScript. For its part, JavaScript is a rather basic language which conforms tightly to the core concepts of computer programming. Any background in programming, from Visual Basic to Pascal to C (which is far more advanced) is sufficient to readily understanding JavaScript.
Jupitermedia's Database Journal offers SQL courses and other database related resources for beginner to expert developers.
