Jessica's Javascript Notes

Javascript Libraries

Pros Cons
  • Reliability - higher level of reliability than home-spun code (well-tested)
  • Don't have to reinvent the wheel, libraries solve common problems, make certain classes of problems easier.
  • Download speed - larger file size than really necessary b/c of extra functionality beyond what you need
  • May be poorly documented - can be frustrating experience b/c many libraries are poorly documented and documentation you need is scattered throughout help-forums across the web (many libraries = unpaid side projects, nice documentation may be last thing on the todo list)

Why use libraries?

Common libraries:


Planning for Failures

Javascript Debugging Techniques

add line of code alert(varname); and will display as a popup
  • Very simple/quick to implement
  • no setup, or extra software needed
  • ineffective for tracing time-sensitive things (where alert throws off your timing)
  • too much hassle for debugging loops (have to click okay too many times)
  • can only show string data, may have to manipulate the data first to make it readable (eg: an array)
Page Logging add an empty div to the page with absolute positioning/scroll overflow, append values to div as needed. Or use a logging library such as log4javascript or fvlogger
  • can display larger/longer data than alert
  • does not interrupt control flow (looping, animation) with pesky popups
  • slightly more work to set up, partially mitigated by copying boilerplate code
  • learning curve to library if used
  • extra div may be in the way if its on the same document
Browser Plugins Install/use software such as DOM inspector built into Firefox, Firebug
  • show what's actually happening on the page
  • can easily navigate and inspect dom visually
  • may allow console logging
  • Browser-specific, not all browser tools are created equal
  • Requires installation of third party software/plugin
HTTP Debugging Install/use software such as Firebug, Live HTTP Headers, ieHTTPHeaders, Charles
  • Allows tracing of Ajax calls (seeing what is actually being sent or received)
  • Good for certain classes of problems (client/server interaction)
  • Browser-specific, not all browser tools are created equal
  • Requires installation of third party software/plugin

Javascript Basics


Document Object: Common functions to get elements:

There is NOT a getElementsByClassName() method in spec though. have to write your own function to do this (or use a library).


function getElementsByClassName(node, classname) {
  var a = [];
	var re = new RegExp('(^| )'+classname+'( |$)');
	var els = node.getElementsByTagName("*");
	for (var i=0,j=els.length; i<j; i++) {
	  if (re.test(els[i].classname))a.push(els[i]); } 
	return a;

Navigating the DOM:

Use these methods:

getAttribute(name) and setAttribute(name, value) = how to do things like change a link's HREF attribute.

change an element's style with = 'whatever value' where property is the css property you want to change for an element called myElement

Change/add a CSS class: element.className = whatever new class name (may be simpler than changing the style element)

Adding content to DOM:

Code formatting best practices:

Should use camel-case for variables, methods, object names