On this page, you will find (1) introductory tutorials on Javascript, (2) tutorials on the DOM, and (3) documentation, both official and quick-reference.

Javascript is most often used as a client-side language, meaning that the webuser's browser (the "client") translates the code into HTML, without the necessity of communicating with the website's server. The structure and/or content of the webpage may consequently by changed, either right after the page is loaded, or later on by some action of the web-user. The webuser is able to see the Javascript program, since it is right there in the browser.

A brief personal introduction

My first encounter with Javascript was probably similar to that of most neophite website designers:  I wanted a menu with buttons that changed color on mouseover.  Knowing nothing of the language, I used a script written by someone else, and just copy & pasted it onto my webpage.

When I decided to learn more, I used several of the tutorials below.  As always, I read several different sources to get their input before trying it myself.  Armed with my new expertise, I was then able to write a few scripts of my own, and use them on my website.

Several years ago, I discovered the Document Object Model, and suddenly realized that the methods I had been using were not "Best Practices".  Readers of my webpages who didn't have Javascript, or who were using an older browser, were not able to see what they needed to see in order to use the page properly.  Also, from a web designer's perspective, I was unnecessarily and inconveniently putting the same script on each page where it was used, rather than having it called in from an external file.

On updating this page, I decided that perhaps the best way to learn Javascript from scratch at the present time is to do it like I did.  First learn the basics of the language, as presented in one of the tutorials.  Then go to a more advanced tutorial that assumes a basic knowledge of Javascript, and see what the DOM is all about and how to use it in your scripts.

Introductory Javascript Tutorials

Javascript Primers ... 30 Steps that make Javascript fun to learn

An excellent starting point for learning Javascript, written by two university professors. "Each of these 30 primers will display one JavaScript and tear it apart so you can see how it works." Each primer has a review showing all the commands learned, with examples of each. And each has an assignment where you will alter the script so that it does something slightly different. This tutorial fits the style by which I learn things very well. Highly recommended!

Beginning JavaScript :

A thorough textbook-style tutorial, having an orderly progression from the basics to the more complex. Uses an object-oriented approach, with plenty of examples. 6 Sections, divided into 29 Lessons. There is also an Advanced JavaScript tutorial, with sections on Windows, Date & Time, Arrays, Forms, Cookies, and Advanced Array Methods.

Sections:

• Getting Started With JavaScript Boxes
• Browsers, Windows, & Frames
• The Document Object - Images
• The Document Object - Pop Up Menus
• Dynamic Styling With JavaScript
• Some Handy Techniques

JavaScript Tutorial :

A very interesting approach to learning JavaScript. You learn by looking at examples (100 of them), which can be edited online, and the results shown in real time.

Sections:

• JS Basic
• JS Objects
• JS Advanced
• JS References
• Examples/Quiz
• Selected Reading

JavaScript for Scared People :

This tutorial, although written with a sense of humor, is not for the faint of heart. It assumes a basic knowledge of HTML, and jumps right in with an analysis of some fairly complex scripts. Definitely worthwhile, if you have the time to sit down, work through the examples, and experiment with the scripts on your own website.

Contents:

1. What is JavaScript - How do I start?
2. Simple arithmetic
3. Objects
4. Events
5. A multitude of frames and windows
6. Frills, bells, whistles
7. Everything!

DOM Tutorials

Unobtrusive Javascript :

Excellent online tutorial on using DOM scripting to seperate dynamic behavior from presentation. This was my first eyeopener to the virutes of unobtrusive Javascript. Shows how to use Javascript as an option to enhance the page, and not as an essential feature. Includes accessibility features.

Chapters:

1. Operation Cleanout
2. Reach what you want to change
3. Creating and destroying elements
4. Call of the wild (scripts)
5. Example - A Javascript enhanced form

DOM Scripting - Web Design with Javascript and the Document Object Model ( 2nd edition ) ,
Jeremy Keith, 2010

An exceptionally clearly-written book, suitable for either the beginning or intermediate level of scripting. I bought the first edition of this book a few years ago, and couldn't put it down (except to go to the computer and experiment). Clearly demonstrates the need for "Best Practices", and uses them throughout. Well worth the money, if you like to have a written reference at hand, like I do.

Documentation

JavaScript Guide

This is the official source that sets the standards for the Javascript language, which was originally created for Netscape Navigator. It will not be easy reading, but it is where you must go in order to find out ALL of the things that are possible to do, along with restrictions on their use. Many examples are included to demonstrate usage.

Gecko DOM Reference

This is the authoritative source on the DOM, as used by Mozilla-based browsers. Again, it is not easy reading, but it is comprehensive, and has many illustrative examples.

Dynamic HTML: The Definitive Reference ( 3rd Edition ) ,
Danny Goodman, 2007

A reference for ALL of the three languages of dynamic HTML: (X)HTML, CSS, and Javascript. I keep it right next to my computer at all times. It has frequently proven its worth as a handy reference, particularly with regard to browser compatibility issues. It has a comprehensive index, which makes looking something up easy-as-pie.

JavaScript Quick Reference "...explains and gives comprehensive, working examples of code in a definitive manner for the JavaScript language. All elements of the language are covered, including the events, functions, methods, objects, operators, properties, statements, and values."

Comments

There are currently no comments to display.

Click here to add a comment

Rate this page:

Resources Menu

• HTML & CSS
• Javascript
• Perl
• Tools for Webmasters
• Other Resources

RSS Feeds

• Home
• Code Snippets
• Tutorials
• Resources
  • HTML & CSS
  • Javascript
  • Perl
  • Tools
  • Other
• Articles
• Contact