Learn Modern JavaScript

1. Hello World

This series of tutorials to introduce you to JavaScript would have been written much earlier except that I have been having difficulty trying to decide just how to present the information in a way that makes sense. My earlier series of JavaScript tutorials took a conventional approach to teaching the various programming concepts but is possibly not the best way to learn modern JavaScript. You can still learn modern JavaScript by following those tutorials but you have to work your way through the entire introductory series and then the Document Object Model series of tutorials before you actually finish learning the right way to do things and can forget about some of the old ways of doing things that we used along the way while waiting until we got to the tutorial on the better way of doing it.

The difference between modern JavaScript and JavaScript the way that it used to be coded is that the modern ideal is to keep our JavaScript completely separate from the HTML of our web page and to just use a script tag in the head section of our page to link the two together. To identify the part of the body of our web page that we wish to update we give the appropriate HTML tag an id that the JavaScript can then use to access and update the content of our web page without having to be hard coded into the web page itself.

In order to be able to write your JavaScript the modern way you need to understand about event handling and the Document Object Model (usually abbreviated DOM) as they are crucial to being able to get JavaScript to interact with a web page without jumbling all the HTML and JavaScript together. My earlier approach to teaching JavaScript does cover those concepts but it treats them as relatively advanced concepts and so leaves them until late in the tutorial series. This was more because of the way that I learnt programming rather than because those concepts are any more difficult than the parts I presented earlier.

Rather than leaving these aspects of JavaScript until later in the series I am going to start introducing them straight away in this series of tutorials. Don't worry though as it doesn't matter if you don't understand exactly what is going on right from the start. I'll try to keep the more advanced code to a minimum in the early tutorials in the series and those commands that are not fully explained at the start will be explained in more detail in later tutorials. Using this approach it will take you a little longer before you understand all of the code that you are using in your scripts properly but in return you will not be learning anything that you have to unlearn later in order to produce better code.

It is traditional to start a series of tutorials on programming with one that shows how to display the text "Hello World" since that reduces the language to the bare essentials of how to set it up to run in the first place. As we are going to learn to code JavaScript using modern unobtrusive techniques we'll start with a web page where we use JavaScript in its own separate file to add the words into the body of our page.

Let's start by looking at the HTML to see what we need to have there in order to attach JavaScript to our page and have it interact with the content of our page.

When you write the HTML for a real web page there will be lots of other code to be place within the head and body sections of the page but in this code for our first example JavaScript I have only included those things that need to be there in order for our "Hello World" JavaScript to work. Whether you add the rest of the items in the head of the page above or below the script tag doesn't really matter. The script tag itself identifies that we want to load and run some JavaScript in our page and that the JavaScript can be found in a file called helloworld.js. The paragraph tag in the body of our page is where we intend to insert the text "Hello World". If you have other content for the page then where this paragraph goes depends on where you want the text to be inserted. The important thing with this is that we have given the paragraph an id which the javaScript code can use to identify and access this paragraph. We have made it a paragraph in this instance because we are inserting a very short paragraph of text. If our JavaScript were going to be inserting something else then we would put the id on an appropriate tag for what we intend to insert.

So now that you know how to attach JavaScript into a web page unobtrusively and how to provide hooks in the web page for the JavaScript to interact with it is time to look at the actual JavaScript that we need to have in that helloworld.js file in order to display the words "Hello World" in our paragraph.

We are already introducing four different aspects of JavaScript in this first example that a more traditional approach would have left until much later on. The first of these concepts is that of the function. A function is a block of JavaScript code that will run whenever that function is called. The code within the function runs sequentially whenever the function is called. In our code here we have a function called sayHello. This particular way of defining a function (the simplest of the three ways provided in javaScript starts with the word function, is followed by the name of the function with open and close parentheses after it (we'll look at what can be put in there later0 and finally the code to be run contained within open and close braces.

The next piece of our JavaScript is document.getElementById() which is our introduction to the DOM. This is the most commonly used DOM command and as its name suggests is a way for JavaScript to reference something within the HTML that has a specific id attached. In this instance it is providing a link to our paragraph. JavaScript uses dots to separate parts of the code for accessing the DOM and the browser in order to identify which property or method associated with that object that we want to access. In this instance we wish to access the getElementById method on the document object (which is the way javaScript references the web page) in order to access a specific id within the page.

innerHTML is the property of our paragraph that we wish to update. This particular property is not officially a part of the DOM but is supported by all major browsers and provides us with the simplest way of actually assigning something into the HTML tag that we are referencing. JavaScript uses the = symbol to indicate that the value on the right should be assigned to the variable or property on the left and so we will be assigning the text "Hello World" into the content of the paragraph tag with the id of "hello" when the sayHello function is run.

So that code will do exactly what we want when we run the sayHello function. There is one slight complication though to explain why we have placed our command inside a function instead of running it directly. In order for the code to work and actually write the words into the paragraph the paragraph with that id must exist at the time when the code to reference the paragraph is run. If the id can't be found then the code will give an error. We have our JavaScript attached to the head of our page (where unobtrusive JavaScript belongs) which means that the code will be loaded and run before the content of the body of the page finishes loading. At least the code would attemot unsuccessfully to run if it were not contained within a function. because the code is inside a function it doesn't run straight away but instead waits for the function to be called before it runs. So now all we need to do is to tell he code to run after the paragraph has loaded in the page.

The easiest way to do this is to set up an event handler. The window.onload event handler is triggered when the page finishes loading. The last statement in our code assigns the sayHello function to be run when that event occurs and hence the text "Hello World" gets added into the paragraph just as soon as the rest of the page finishes loading.

You will probably come across many other hello world tutorials for JavaScript that involve way less code than this. The difference is that by coding things this way we keep the JavaScript and the HTML completely separate which both makes maintaining your page much easier and also should give your page a higher ranking in the search engines since the content isn't diluted by having JavaScript scattered through it.

More of This Tutorial

• 2 Events
• 3 Visitor Triggered Events
• 4 Timed Events
• 5 Testing Conditions
• 6 Feature Sensing
• 7 Alternate Tag Location
• 8 Functions and Methods
• 9 Passing Parameters
• 10 Variables/Properties
• 11 Objects
• 12 Arrays
• 13 Nodelists
• 14 Loops
• 15 Numbers
• 16 Strings
• 17 Dates
• 18 Alert
• 19 Other Objects
• 20 Extending Objects
• 21 Creating Objects
• 22 Collision Proofing
• 23 JavaScript and Forms
• 24 Updating the Web Page
• 25 Obsolete JavaScript