About JavaScript and HTML5

EXTERNAL RESOURCES

  • The book I used to learn JavaScript myself: Object Oriented JavaScript by Stoyan Stefanov
  • Mozilla Developper Network has a JS guide too.

WHAT DO YOU NEED? HOW TO DEBUG? HOW TO CATCH ERRORS?

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 F12 in Windows or cmd-alt-i in Mac 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>
<html>
  <head>
  <meta charset=utf-8 />
  <title>Web Audio API</title>
  <script>
   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 ... element.

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

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

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

view of the javascript console

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

View of the JavaScript 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:

View of the JavaScript console

Without such tools, debugging JavaScript code is impossible. 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 to read this article on WikiPedia and this thread on StackOverflow.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s