Some Helpful JavaScript Tricks
Dr Anton Gerdelan gerdela@scss.tcd.ie

About Me

  • Working on Knoholem smart buildings with Dave and Kris
  • Doing lots of 3d graphics with WebGL visualisation (JavaScript).

http://antongerdelan.net/3dmodelviewer/

The Trouble With JavaScript...

The DOM, Browser Consoles, and Debugging

  1. Modify a webpage with JavaScript
  2. Deliberately make some mistakes
  3. Print some info to the console
  4. Track down the mistakes

For This Part You Will Need

  1. Chrome or Firefox with the Firebug plug-in
  2. Some experience with a debugger tool?
  3. Patience

The Document Object Model

  1. Make a simple HTML page; html, head, body
  2. Add an HTML paragraph tag
  3. Give the paragraph an "id" attribute (HTML 4)
  4. Add a script tag that accesses the paragraph (DOM)

The Browser Console

Let's Break Things

  1. close the console
  2. change the
    p.innerHTML =... line
    to q.innerHTML =...
  3. refresh the page. what happened?
  4. open the console and refresh. handy?

Typos Can Be a Problem

  1. Add a new JS variable var count = 10;
  2. Change your paragraph to print this number; p.innerHTML = "count = " + count;
  3. Before that line, add another line; count = 111;. Check that it prints:
    var count = 10;
    count = 111;
    p.innerHTML = "count = " + count;
    
  4. Now, deliberately make a typo - change the name "count" on the second line. what happened? did the console show the error?

The Debugger

Dynamic Content and User Input

Summary