Class5 homework assignment

The class5 eCommerce assignment brings together class1-5 topics, including xhtml, css, and javascript. My solution was an exotic fruit site shown here. Mousing over the image grid displays an associated [text] image which purports to describe details of the image. This dynamic behavior was implemented by assigning mouseover & mouseout event handlers using features of the prototypejs framework. This framework assists in traversing thru the DOM[Document Object Module]. With a small amount of code, we can identify the moused-over image, retrieve the src attribute, clone the element, reassign the src attribute w/ use of a regex expression: /(\.{2}\/?\w+\/)*(\w+\d+)(\.\w+)/ . When mousing out, we reverse the element's attr assignment back to the original image.

➔
prototypejs introduces quite a bit of functionality, difficult to find a reason not to use it ...

most fundamentally:

for (var index=0; index<myArray.length; index++) {
var item = myArray[index];
// working code ...
}

is replaced by:

myArray.each( function(item) {
// working code ...
} );

'each' is a reserved keyword, 'item' is not.

$w( string ) ➝Array

➔
a few string method offerings ...

truncate( length=n, suffix='...' )
appends suffix to truncated string

blank() ➝ Boolean
empty() ➝ Boolean

camelize() ➝string
converts string seperated by dashes to camel case

escapeHTML() ➝ string
useful for protecting against possible malicious user entry

gsub( pattern, replacement ) ➝ string

strip()
strips all leading/trailing whitespace

➔
misc ...

$('~~~').childElements() ➝ returns an array of ... child elements ... of element '~~~'

$('nyc').adjacent('li.us') ➝ returns an array of sibling elements that match the 'li.us' selector. '.us' represents a class="us"; 'nyc' represents an element with #nyc

uniq()
method returning a duplicate free version of an array

clonePosition( element, source [,options] ) ➝returns an object cloning the dimensions and position of a source element.


$(element).wrap('div').setStyle(
{backgroundImage: 'url(images/rounded-corner-top-left.png) top left'} );
➝ set the style for selector div of element with the background image

binding ...

'this' refers to the object holding a reference to the function