HTML5 Coding Essentials and Best Practices

About JavaScript and HTML5

HTML5 is composed of new elements, but it also comes with many JavaScript APIs for controlling video and sound, drawing and animating things in the new <canvas> element, for offline applications, persistence, geolocation, orientation, etc.

So yes, during this course, in particular in Modules 3 and 4, you will have to do a bit of JavaScript. But, DON'T PANIC!

Here we provide a basic introduction to JavaScript. If you want to learn more, many resources are available on the Web; this document is simply here to give you a head start. Remember that one great thing about these MOOCs is that everybody can help each other. Some students are very good in JavaScript and are usually very happy to help others when they encounter difficulties.

External resources

The JavaScript Introduction course on W3Cx!
Mozilla Developer Network has a JS guide

What do you need? How to debug? How to catch errors?

We will not look at the JavaScript syntax here, but more at "JavaScript in the browser", how it works, how to start writing code, etc.

First of all, you need to find a way to debug your code and see errors. If your work does not produce any results, you must know why!

For that you will use the dev. tools of your browser. Press cmd-alt-i in Mac and F12 in Windows or Linux to open the dev. tools, then go to the console tab: this is where errors will be displayed, or messages of your own (use the console.log(string) JavaScript function in the JavaScript code embedded in your HTML page). In the console, you will be able to type any JavaScript command.

Let's look at this example on JS Bin:

<!DOCTYPE html>

<head>

<title>Web Audio API</title>

console.log("Some JavaScript code has been executed");

</script>

</head>

<body>

<h1>JavaScript debugging using the dev tool console</h1>

</body>

</html>

The simplest way to add JavaScript code in an HTML page, is by using the <script>...</script> element.

The code in this example is executed sequentially when the page is loaded: the JavaScript code is executed before the browser can see the rest of the page (as the <script></script> is located before the <body>).

The H1 element, for example, does not exist in the Document Object Model, and has not yet been displayed when the JavaScript code is executed. If we move the <script></script> to the end of the document, then the H1 would have been built before the JavaScript code is executed.

The only line of code we have is console.log("Some JavaScript code has been executed");

This means "display in the JavaScript console the message...". If we open the console tab provided by jsbin.com in a dedicated tab (which receives all console.log() messages), and re-execute the page (just type a space at the end of a line, this will re-render the page and display the message in the console), we see the message in the console tab, as illustrated below:

It is also possible to use the real "dev. tool console", and for this I recommend running the application in a single window, not in the JSBin editor. Press the black arrow on the top right of the output window - this will render the page as a standalone Web page, then press F12. You should see:

Ok, now, let's make an error: change console.log() into consollle.log(). Let's see what happens:

And if we run it standalone and use the dev. tool console:

And if we click on the line number in the right, the dev. tool shows the source code centered on the line that caused the error:

Without such tools, debugging JavaScript code is difficult. So you need to look at some basic tutorials on how to use the dev. tools of your browsers, since they differ from one another in the way they work - although the principles remain the same.

About the asynchronous nature of JavaScript

Some of you may not be used to "asynchronous programming", "callbacks" etc. We recommend you to read this article on WikiPedia and this thread on StackOverflow.

Page updated

Google Sites

Report abuse