This new series of JavaScript tutorials introduces JavaScript coding using modern unobtrusive techniques. This series is still a work in progress so you may need to return here every so often in order to get to the newest tutorials in the series.
This series of tutorials is for both those who are just starting out with JavaScript and want to learn the modern way to write code as well as those who have been writing JavaScript for some time and want to modernise their code. This overview covers what you will need to learn.
Introduction to not just one but two complete series of tutorials on programming with JavaScript. Learn the modern way of writing JavaScript and also look at how this differs from the classical approach.
We begin this new series of tutorials that teaches JavaScript programming the modern unobtrusive way the same way all programming tutorials begin - with a simple script that displays "Hello World" on the page.
With unobtrusive JavaScript, all of our code runs in response to events. Some event handlers are attached to the window itself. In this tutorial we look at how to attach additional event handlers to parts of our web page.
Your visitors can interact with your web page through actions that trigger event handlers in your JavaScript code. Some event handlers are more limited than others in where you can attach them into your page and what you can attach them to.
Not all events are triggered by your visitor's actions. You can trigger events yourself by setting up a timer to trigger processing after a specified time interval.
The exact code that you want to have run in different circumstances may depend on what value is contained in one or more fields. JavaScript provides two ways of testing conditions to selectively run code.
Not all browsers support all of the built-in JavaScript commands. The easiest way of catering for those that don't is to use feature sensing to test if the browser supports the command before you use it.
Not everyone coding unobtrusive JavaScript places their script tag in the head of the page. Some place it at the bottom of the body instead. Both methods are unobtrusive and both ways give the same overall result as to how long the page takes to load but which you choose does make a difference as to whether the images or the JavaScript gets loaded first.
The way that JavaScript provides for modularising your processing so that the same code can be run multiple times is by placing that code in functions.
When you run functions with JavaScript you don't have to process the same fields every time. You can pass different fields to the JavaScript via parameters each time you call it. JavaScript also returns a field from the function after it has run so that the function can affect subsequent processing.
You can't do much processing in JavaScript without somewhere to store the data you are working on.
Objects have been mentioned in several earlier tutorials. Now it is time to look a little more closely at exactly what a JavaScript object is and how to define them. We will also consider the properties and methods of the Object object from which almost all JavaScript objects are derived.
When you have multiple items where the order of the items is important as well as their content then you need an array.
The getElementsByName and getElementsByTagName document methods make nodelists available to javaScript allowing processing to be applied to multiple related elements in the web page all at once.
Processing all the elements in a nodelist, all the entries in an array, all the enumerable properties of an object, or just processing the same code multiple times until a particular condition is met. All of these are situations that require loops and in this tutorial we look at the different types of loops that can be used for different purposes.
The operators, methods, and properties associated with the Number and Math objects allow JavaScript to do just about any numerical calculations that you require.
Another really useful type of object in JavaScript are string objects which can contain text.
Dates and times are really easy to work with if you create your own objects derived from the built-in Date object.
While the confirm and prompt dialog boxes have no real place in modern JavaScript, the alert dialog can still be a useful debugging tool.
JavaScript has quite a few additional built-in objects.
You can add your own methods to the built-in objects so as to extend their usefulness.
You are not limited to just tose objects that are defined by JavaScript itself when you are writing your JavaScript code. JavaScript also allows you to easily define your own objects as well.
There are a number of steps that we can take to reduce the possibility of conflicts between multiple JavaScripts added to the same web page.
Accessing your forms from JavaScript in an unobtrusive way requires a slightly different approach to the way that it used to be done. The actual validation processing will not be affected all that much though.
One of the keys to making your JavaScript completely unobtrusive is the use of the DOM to apply changes to the page after the HTML has loaded.
A quick review of those JavaScript commands which are no longer needed and which should therefore no longer be used.
Here is a complete example of the HTML code, stylesheet, and JavaScript necessary to unobtrusively add a calculator to your web page that calculates the date on which Easter day occurs in any given year.
This example demonstrates the way that an unobtrusive script is also accessible as the menu is fully functional with just the HTML, takes on the appearance you want when you add the stylesheet, and finally behaves the way we want once the JavaScript is added.
