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.
continue reading below our video
Top Ways to Make Your Home "Smarter"
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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="helloworld.js"></script>
</head>
<body>
<p id="hello"></p>
</body>
</html>
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.
