Unobtrusive JavaScript

1
Unobtrusive JavaScript

• by Paul Davis

2
Unobtrusive Scripting Basics

• DOM (Document Object Model)
• Objects (like HTML tags, CSS, the browser, the
  document)
• Properties (like ID, name, src, etc)
• Parent/Child
• innerHTML (not DOM, but used a lot)

3
JavaScript code

• Encapsulation wrapping code up into sections
  that arent impacted by code outside of the
  section and dont impact code outside the section
  beyond the functional purpose of the code itself.
• Libraries this is what I call what Im doing
  with the code and encapsulation for lack of a
  defined term for this the code is similar to
  what you would expect from a library re-use and
  defined purpose.

4
Example Library

• var hO init function() if
  (!document.getElementById) return
  hO.listgetElementsByClass('getHelp') for (var
  i0ilthO.list.lengthi)
  gO.addEvent(hO.listi, 'mouseover', hO.mOver,
  false) , mOver function(e) var
  xTgO.fTarget(e) if (!xT) return
  ('helpCopy').innerHTMLxT.getAttribute('title')
  , list

5
Example Library

• var hO init function() if
  (!document.getElementById) return
  hO.listgetElementsByClass('getHelp') for (var
  i0ilthO.list.lengthi)
  gO.addEvent(hO.listi, 'mouseover', hO.mOver,
  false) , mOver function(e) var
  xTgO.fTarget(e) if (!xT) return
  ('helpCopy').innerHTMLxT.getAttribute('title')
  , list

6
Example Library

• var hO init function() if
  (!document.getElementById) return
  hO.listgetElementsByClass('getHelp') for (var
  i0ilthO.list.lengthi)
  gO.addEvent(hO.listi, 'mouseover', hO.mOver,
  false) , mOver function(e) var
  xTgO.fTarget(e) if (!xT) return
  ('helpCopy').innerHTMLxT.getAttribute('title')
  , list

7
Example Library

• var hO init function() if
  (!document.getElementById) return
  hO.listgetElementsByClass('getHelp') for (var
  i0ilthO.list.lengthi)
  gO.addEvent(hO.listi, 'mouseover', hO.mOver,
  false) , mOver function(e) var
  xTgO.fTarget(e) if (!xT) return
  ('helpCopy').innerHTMLxT.getAttribute('title')
  , list

8
Example Library

• var hO init function() if
  (!document.getElementById) return
  hO.listgetElementsByClass('getHelp') for (var
  i0ilthO.list.lengthi)
  gO.addEvent(hO.listi, 'mouseover', hO.mOver,
  false) , mOver function(e) var
  xTgO.fTarget(e) if (!xT) return
  ('helpCopy').innerHTMLxT.getAttribute('title')
  , list

9
Writing an Unobtrusive JS Library

• Write (copy) the function to do the task
• Remove all hard coded identifiers (like form
  field names, image names, IDs, etc)
• Figure out what event will trigger the
  functionality (the window onload event, clicking
  on something, a mouse event, etc)
• Determine if the functionality needs to be
  repeated on the page in multiple spots and/or
  multiple times

10
Continued

• Copy your default libraries needed for the
  functionality (mine is the gO library)
• Copy any additional functions needed (like the
  or getElementsByClassName functions)
• Modify the code into library format
• Create an initialization function to start it
  up.
• Create objects in the library to handle multiple
  instances of the functionality on the page
• Use a parameters function to handle
  argumentsthat you would normally pass to get the
  code to do what you want.

11
Unobrtusive Scripting Examples

• Swap images
• Form validation
• Random images
• Help text
• Random background image
• Live clock
• Tooltip popup message
• Date insert
• Count textarea comment