CIS 119 - prototype.js

Objectives

• use some of the major features of the prototype JavaScript library

prototype.js

• available from prototypejs.org
• extends the DOM, making new features available
• makes cross-browser scripting more compatible
• extends built-in types with additional functionality
• provides easier event management
• simplifies Ajax processing

Some basic prototype.js features

• $('id') returns a reference to the element with the specified ID
• $(elementRef) returns a reference to the element passed in
• $$('selector') returns a collection of elements matching the CSS selector criteria
• .invoke('methodName') can be used to call a method of an extended element
• .each(functionDefinition) can be used to call a function on each matching element
• the prototype selectors cover more than what you are used to:
  • :empty
  • [attribute]
  • [attribute=value]
  • [attribute^=value] attribute value starts with
  • [attribute$=value] attribute value ends with
  • [attribute*=value] attribute value contains
  • :nth-child(odd)
  • :nth-child(even)
  • :nth-child(3n+1)
  • :not(selector)
  • :first-of-type
  • :first-child
  • :last-of-type
  • :last-child
  • #id > img : img tags which are children of element with specified id
  • #id + img : img tags which are siblings of element with specified id
  • #id ~ img : img tags which are adjacent to element with specified id
  • :enabled
  • :disabled
  • :checked

Number functions

• (5).times(function(n) {...} );
• $R(3,7).each(function(n) {...} );
• .toFixed(n)
• .round()
• .abs()
• .floor()
• .ceil()
• .succ()
• .toPaddedString(length,radix)

Sting functions

• .strip()
• .stripScripts()
• .stripTags()
• .truncate(length, truncationSymbol)
• .capitalize()
• .camelize()
• .underscore()
• .dasherize()

Event handling

• format: element.observe(event, handler)
• format: element.stopObserving(event, handler)
• format: event.stopPropagation()
• format: event.preventDefault()
• format: event.element()
• format: event.pointerX()
• format: event.pointerY()
• format: event.isLeftClick()
• format: event.pointerX()
• format: event.pointerX()
• format: event.preventDefault()
• dom:loaded is a commonly used prototype built-in pseudo-event
• common events:
  • load (window)
  • submit (form)
  • click
  • mousedown
  • mouseup
  • mouseover
  • mouseout
  • mousemove
  • keydown
  • keyup
  • change (input, select, textarea)
• Key codes
  • KEY_BACKSPACE
  • KEY_TAB
  • KEY_RETURN
  • KEY_ESC
  • KEY_LEFT
  • KEY_UP
  • KEY_RIGHT
  • KEY_DOWN
  • KEY_DELETE
  • KEY_HOME
  • KEY_END
  • KEY_PAGEUP
  • KEY_PAGEDOWN

Special form function to get values

• $F('id') returns the value of element with specified ID
• still need special processing to get radio button values

Inserting content

• .insert(content)
• .insert({before: 'beforeContent'})
• .insert({after: 'afterContent'})
• .insert({top: 'topContent'})
• .insert({bottom: 'bottomContent'})
• .wrap(tagname, properties)

Ajax examples - prototype.js

• using $(id) to hide an element
• using $(elementReference) to hide an element
• using $$(selector) to hide multiple elements
• changing element style based on a tag and attribute existing
• using the ":empty" pseudo-selector
• highlighting odd and even rows of a table with different colors
• highlighting every third row in a table
• changing element style based on a tag and attribute value
• using a list of selectors to change a style
• fixing the number of decimal positions of a number
• using an iterator on a number (in place of a loop structure)
• using the $R() range function