Introducing JavaScript

JavaScript has changed a great deal since it was first introduced but many sites still use outdated techniques. There are even lots of JavaScript tutorials on the web that show you how JavaScript should be written so that it can work in Netscape 2 rather than so that it will work in modern browsers. As a result there are many people who are writing what they think is JavaScript but where what they are producing is more suited to the 20th Century than to the 21st.

Beginners should work through all the basic examples prior to moving on to the other examples which cover separate aspects of JavaScript in more detail.

Most of the JavaScript examples here will work in IE5+ (provided you use a deprecated MIME type - otherwise IE9 through 11 only), Opera7+ and all versions of Firefox, Safari, Vivaldi and Chrome. Those commands introduced in ECMAScript5.1 in 2011 have been added (if I have missed any please let me know). Those commands introduced in ECMAScript2015 and ECMAScript2016 are currently being added (there are lots of them for 2015 so it may take some time but then most current browsers do not yet support them all anyway). Where these new commands are not supported by IE8 that information is included in the text - just in case you still have lots of people using that long unsupported browser. So few people using other browsers fail to keep their browser up to date that lack of support in older versions of other browsers should not have any significant affect.

There is a link to jsBin at the bottom right of all the pages. This site provides an easy way to test your JavaScript code online without needing to create an entire web page to run a simple test.

insertAfter

Sometimes the spot in the Document Object Model that we want to update is more easily referenced in a way that doesn’t allow either a simple appendChild or insertBefore call. We can create our own functions combining these calls to make it easy to specify where the update is to take place in whatever way […]

Add JavaScript From JavaScript

We don’t need to add all our JavaScript into the web page by coding script tags in the HTML. The Document Object Model commands can add a script node to the DOM just as easily as any other HTML element node. Any scripts added this way will be run asynchronously after the code to add […]

JavaScript Only Links

One thing that we need to keep in mind regarding the content of our web page is that not everyone has JavaScript enabled. Where people don’t have JavaScript enabled we do not want the web page to appear broken. For any essential processing we need to present them with an alternative way to get there […]

Simplifying Creates

One thing that you will have noticed about the Document Object Model calls for creating new content to insert into the page is that it involves several commands in order to construct the new content to be added. In many cases you will have a number of similar pieces of content that need to be […]

Move Node

Removing an element from one spot in the web page and inserting it in another is extremely simple in JavaScript. All it takes is one command to move the element to its new location.

This site is © copyright Stephen Chapman - Felgall Pty Ltd 2011-2016.

Privacy Policy | Terms and Conditions

You are welcome to use any the example JavaScript from this site in the scripts for your site or any that you develop for others but may not use the longer example scripts that contain a copyright notice in any other way without permission.