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

https://antongerdelan.net/3dmodelviewer/

The Trouble With JavaScript...

• typos can be valid (create a new variable by accident)
• errors don't appear unless you explicitly go looking for them

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

• built in to browser to act like a command-line. can input and output.
• add an alert ("the page has loaded!"); box to print some info. quickly gets annoying!
• try console.log ("some text");
• menu to the console (or ctrl+shift+i on chrome) and refresh
• try console.log ("the value of para is: " + p.innerHTML);
• some browsers have console.error ("an error occurred here");
• note that you can click on the link to go to the line in your script

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

• In Chrome go to "sources", in Firefox+Firebug go to "scripts"
• Add a breakpoint at the start of the script by clicking in the margin next to the first JS instruction
• Refresh the page. It should "halt" by the break-point.
• Resume. Step over. Step into.
• Find the count variable in the scope or watch-list
• Find the counts variable in the scope or watch-list
• Browse the contents of the p object

Dynamic Content and User Input

• form elements; textarea, radio buttons, check box. jQuery sliders
• Create a couple of radio buttons in the HTML body:
  <input onclick="top_click()" type="radio" name="mybutton" checked="checked">top button<br/> <input onclick="bottom_click()" type="radio" name="mybutton">bottom button
• note that I use the onlick attribute to launch a JS function for each

  function top_click () {
  	var p = document.getElementById ("para");
  	p.innerHTML = "the top button was clicked";
  }
  
  function bottom_click () {
  	var p = document.getElementById ("para");
  	p.innerHTML = "the bottom button was clicked";
  }
  

• try it!

Summary

• DOM
• Console output
• Debugging
• Watch out for typos!
• Dynamic content with browser interaction like onlick=...
• Questions?