Misc

Case sensitivity

• JavaScript is case sensitive

Paradigm

• Functional programming language
• Functions are first-class objects

• Object-based language
• Based on prototypes, rather than classes
• Uses prototypal inheritance

Race conditions

Problem

• Trying to use code from a .js file that hasn’t been loaded yet
• In Internet Explorer, there's no way to control the order in which .js files are loaded
• Need to defer the calling of code from .js files until after they're loaded

Solution

• Use the "defer" keyword in a script tag
• Wait until an onload event fires before using code from the .js files
  
• An onload event won’t fire until after all .js files have been loaded

void operator

void(expression)

void expression

• Evaluates the expression without returning a value
• The parentheses are optional, but recommended
  

Timer events

// setTimeout
var timerVar = setTimeout("javascript statement", milliseconds);

// clearTimeout
clearTimeout(timerVar)

Embedding JavaScript in HTML attributes

javascript:

<a href="javascript:...">...</a>

• URI protocol specifier
• Only valid in a src or href attribute

JavaScript expressions in CSS

selector { property: expression(javascript-expression); }

• Only applies to IE >= 5
  

.MyClass { width: expression(document.all ? 2px : 3px); }

Regular expressions

• RegExp object
  

String methods

• match()
• replace()
• search()

Browser support

• 1.0 : NS2, IE3
• 1.1 : NS3, Op < 5
• 1.2 : NS4, IE4
  
• 1.3 : NS > 4.05, Op5, IE5
  
• 1.4 : Op6, HotJava3
  
• 1.5 : NS6, Gecko, IE5.5
  
• 1.6 : Firefox 1.5, NS7
• 1.7 : Firefox 2

Parameterizing links

• Dynamically adding URL parameters to a link
• Use the encodeURIComponent function to safely encode strings that will be added to the URL

// Add the URL of the referring page to the link
function addXurlParam(id) {
  var field = document.getElementById(id);
  if (field) {
    field.href += ((field.href.indexOf("?") == -1) ? "?" : "&") + "xurl=" + encodeURIComponent(document.location.href);
  }
}

Right-click

• When the user right-clicks to open a link, by default, any related JavaScript code in the href attribute or the onclick event does not run
• Right-click events can be captured to address this problem
• This behavior is browser-specific: href="javascript:..." works fine in IE and Opera, but not Firefox; onclick="..." has the same right-click issue in all browsers
  

Options

href="javascript:..."

• Dynamically create the full URL using a URI protocol specifier
  
• Very-poor readability for the URL
• Badly hinders "copy link location" (makes the link unusable as-is; includes a parameter that's only appropriate for a specific page)

• If JavaScript is disabled, the link doesn't work
• If the user right-clicks to open the link, there are no link related options on the pop-up menu
  

onclick="..."

• Dynamically append the parameter to the URL using an onclick event
  
• Moderate readability for the URL--the parameter is only visible on the destination page
• Does not hinder "copy link location"

• If JavaScript is disabled or the user right-clicks to open the link, the parameter does not get added, but the base link still works
  

document.write('<a href="...">...</a>')

• Write the entire <a> tag using document.write
• Poor readability for the DHTML source code
  
• Poor readability for the URL--the parameter is always visible
• Hinders "copy link location" (includes a parameter that's only appropriate for a specific page)

• Works fine if the user right-clicks to open the link
• If JavaScript is disabled, the link does not appear at all

• If the link is plain text, this is one of the best options
  

document.getElementById(id)

• Dynamically append the parameter to the URL using the HTML DOM
• Requires adding an id to the <a> tag
  
• Poor readability for the URL--the parameter is always visible
• Hinders "copy link location" (includes a parameter that's only appropriate for a specific page)
  

• If JavaScript is disabled or the user right-clicks to open the link, the parameter does not get added, but the base link still works

• If the link is plain text, this is the safest option

POSTed form

• Use a hidden field for the parameter
  
• Very good readability for the URL--the parameter is never visible
• Does not hinder "copy link location"

• If the link is an image or a button, this is easily the best option

• Works fine even when JavaScript is disabled
• Related right-click options are not available for form images and buttons, so issues with right-clicking do not apply

• If the link is plain-text, this is very problematic

• By default, the form and fields do not get submitted if JavaScript is disabled or the user right-clicks to open the link; the static href is used instead

Closures

• When a function is declared within another function, the local variables of the outer function are kept alive and are available to the inner function after the outer function returns
• For the inner function to be accessible afterwards, an external reference to it must be kept in some way (declaring it as a global function,  returning a reference to it, ...)
• Each time the outer function is called, a new closure is created
• When multiple functions are declared within a function, all of the inner functions have the same closure (the same local variables)

• Closures make the code less maintainable and should be used sparingly
• Can be useful for callback functions, so that (for instance) the request object for an Ajax call is still available when the response from the server is received
• Closures are sometimes used in relation to event handlers

• Defining and then immediately invoking a closure function: function (){...}();   (not sure when this is helpful)

Misc

• JavaScript is a prototype-based programming language (has objects but not classes)
• The two options for creating an object are using object literals or object templates
  

• Paths are relative to the current page
• Current url: document.location.href
• Setting an HTML form field: document.form-name.field-name.value

• alert("Text");   // Displays a string in a pop-up window
• eval();   // Execute code stored as a string
• In the browser address bar:   javascript:...

• Firefox: about:config, about:plugins
  

• Can dynamically change the class of an element: elem.attributes['class'].value = '...';

• getElementById works for IE 5+ (the alternative, document.all, is only needed for IE 4.x)
• It's possible to capture a right-click event (context menu)

• To help support when JavaScript is disabled, for a dynamic or interactive UI element, display something initially that's at least minimally functional, and then if JavaScript is enabled display the full version of it

• JavaScript frameworks: Prototype, script.aculo.us, jQuery, extJS, Dojo, YUI