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+, Opera7+ and all versions of Firefox, Safari 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 are currently being added (there are lots of them 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 or IE7 that information is included in the text since those two browsers might still have to many users for you to ignore. So few people using other browsers fail to keep their browser up to date that lack of support in older versions of other browsers will 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.

Get Nodes For A Tag Name

getElementById retrieves a single node/element from the web page. There are other ways to access the web page that retrieve a list of nodes rather than a single one. If we want all the paragraphs or all the table cells or all of any particular tag then we can access them as a nodelist using […]

Get An id Node

The biggest part of JavaScript is the part that deals with interacting with the web page. This Document Object Model section barely existed at all in early versions of JavaScript but now provides commands that allow you to interact completely with the web page in whatever way you like. The simplest of these commands is […]

Change Scroll Position

As well as being able to tell the current scroll position of the web page, we can also use JavaScript to change the scroll position. We could even create an animation that scrolls the page slowly by itself.

Current Scroll Position

Another piece of information we may need in order to interact appropriately with the page is the scroll position of the page within the viewport. Again not all browsers store this in the same place so we need to create our own cross browser object.

Viewport Size

Of far more use in JavaScript than the screen size is the viewport size. This is the area inside the browser itself where the web page gets displayed. Different browsers store this information in different places but we can easily create our own cross browser viewport object.

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.