Main /

Js Libraries

Wiki_System*

technolowiki.org

[-edit SideBar-]

Js Libraries

Javascript Base Libraries

jQuery, Prototype, Sizzle

Of these all, only jQuery seems to do a browser feature detect.


The Yahoo user interface (YUI) library provides a local storage mechanism to get rid of cookies.

  • Firefox 3.5+, Google Chrome 4+, Safari 4+, IE8, Opera 10.5+: HTML5 localStorage; these modern browsers all support the core localStorage functionality defined in the HTML5 draft.
  • Firefox 2.x and 3.0.x: Gecko globalStorage, an early API similar to HTML5's localStorage.
  • Safari 3.1 and 3.2: HTML5 Database Storage, because Safari 3.1 and 3.2 don't support HTML5 localStorage.
  • IE6, IE7: userData persistence, a rarely used IE feature for associating string data with an element on a web page and persisting it between pageviews.

A sample of code:
<script src="http://yui.yahooapis.com/3.1.0/build/yui/yui-min.js"></script> YUI({ //Last Gallery Build of this module gallery: 'gallery-2010.02.22-22' }).use('gallery-storage-lite', function (Y) { // For full compatibility with IE 6-7 and Safari 3.x, you should listen for // the storage-lite:ready event before making storage calls. If you're not // targeting those browsers, you can safely ignore this step. Y.StorageLite.on('storage-lite:ready', function () { // To store an item, pass a key and a value (both strings) to setItem(). Y.StorageLite.setItem('kittens', 'fluffy and cute'); // If you set the optional third parameter to true, you can use any // serializable object as the value and it will automatically be stored // as a JSON string. Y.StorageLite.setItem('pies', ['apple', 'pumpkin', 'pecan'], true); // To retrieve an item, pass the key to getItem(). Y.StorageLite.getItem('kittens'); // => 'fluffy and cute' // To retrieve and automatically parse a JSON value, set the optional // second parameter to true. Y.StorageLite.getItem('pies', true); // => ['apple', 'pumpkin', 'pecan'] // The length() method returns a count of how many items are currently // stored. Y.StorageLite.length(); // => 2 // To remove a single item, pass its key to removeItem(). Y.StorageLite.removeItem('kittens'); // To remove all items in storage, call clear(). Y.StorageLite.clear(); }); });

Javascript Frameworks

Dojo, Qooxdo, ExtJs, MooTools, YUI
Echo3, Google Web Toolkit, Pyjamas, Rialto Toolkit, Rico, ZK

Of these all, only Rico supports IE55, only Yui and Dojo require at least FF3.


Javascript Class Internals

Prototype Extension

Well-known Javascript Libraries often extend base classes, such as Array, Element or String, by custom handy functions or by wrapper functions making older browsers more compatible to new standards.

But Element.prototype cannot be modified on IE6 as the Element class does not even exists, everything other than testing typeof(Element)=='object' throws an exception. The window object in some browsers provides two properties, "Element_prototypable":number=1 and "String_prototypable":number=1.

Event Firing

List of events as defined by the W3C level 3 specification in order of occurance:

DOM interfacetypeMust be SynccanBubblecancelabletrusted for targetsDefault Action
EventabortYesNoNoE*none
 errorNoNoNoE*none
 loadNoNoNodV* D* E*none
 selectYesYesNoE*none
 unloadYesNoNodV* D* E*none
========
KeyboardEventkeydownYesYesYesE*Varies
(KeyboardEvent::)CompositionEventcompositionstartYesYesYesE*Continue with composition
 compositionupdateYesYesNoE*none
KeyboardEventkeypressYesYesYesE*Varies
(KeyboardEvent::)CompositionEventcompositionendYesYesNoE*none
(KeyboardEvent::)TextEventtextInputYesYesYesE*none
KeyboardEventkeyupYesYesYesE*none
========
MouseEventmousemoveYesYesYesE*none
 mouseoverYesYesYesE*none
 mouseenterYesNoNoE*none
 mousedownYesYesYesE*none
 mouseupYesYesYesE*none
 clickYesYesYesE*Fire DOMActivate event
 dblclickYesYesNoE*none
 mouseoutYesYesYesE*none
 mouseleaveYesNoNoE*none
MouseEvent::WheelEventwheelNoYesYesdV* D* E*Scroll or zoom document
(MouseEvent::)UIEventDOMActivateYesYesYesE*none
 resizeYesNoNodV* D*none
 scrollNoNo / YesNodV* D* E*none
========
FocusEventblurYesNoNoE*none
 DOMFocusInYesYesNoE*none
 DOMFocusOutYesYesNoE*none
 focusYesNoNoE*none
 focusinYesYesNoE*none
 focusoutYesYesNoE*none
========
MutationEventDOMAttrModifiedYesYesNoE*none
 DOMCharacterDataModifiedYesYesNoT* C* CDATASection PI*none
 DOMNodeInsertedYesYesNoE* Attr Text C* CDATASection DT* ER* PI*none
 DOMNodeInsertedIntoDocumentYesNoNoE* Attr Text C* CDATASection DT* ER* PI*none
 DOMNodeRemovedYesYesNoE* Attr Text C* CDATASection DT* ER* PI*none
 DOMNodeRemovedFromDocumentYesNoNoE* Attr Text C* CDATASection DT* ER* PI*none
 DOMSubtreeModifiedYesYesNodV* D* DF* E* Attrnone
MouseEvent::MutationNameEventDOMAttributeNameChangedYesYesNoE*none
 DOMElementNameChangedYesYesNoE*none

short hands used for target types:
C* Comment, D* Document, DF* DocumentFragment, DT* DocumentType, dV* defaultView, E* Element, ER* EntityReference, PI* ProcessingInstruction, T* Text

For writing routines that call event handlers on event occurrences, here are some browser differences for the event object instance which is being generated for each event:

State members
of the Event Object:
Annotation, Browser --->CRFFIEOP
cancelBubble:booleandefault:falseOK OKOK
stopPropagarion()  OK OK
stopImmediatePropagation()new in DOM level 3 spec
returnValue:boolean default:true default:undefined
preventDefault()  OK OK
defaultPrevented:booleandefault:falseOK  
getPreventDefault()  OK 
Informal members:
bubbles:boolean OKOK OK
cancelable:boolean OKOK OK
detail:number  OK OK
eventPhase:numberCAPTURING_PHASE=1
AT_TARGET=2
BUBBLING_PHASE=3
OKOK OK
reason:number   OK
timeStamp :date:number zero
trusted:booleanfalse, if the event was fired (simulated) by a script
type:stringname of event,
example: mouse wheel
"mousewheel""DOMMouseScroll" or
"MozMousePixelScroll"
"mousewheel""mousewheel"
Reference members:
currentTarget:object OKOK
fromElement:object   OK or null
originalTarget:object  OK
relatedTarget:objectfor mouse events OK OK
srcElement:object OK OKOK
target:object OKOK OK
toElement:object   OK or null
view:object OKOK OK
========
Keyboard and Text members:
char:string
charCode:number OK  
data:stringtext being input
getModifierState():stringcombination of: 'Alt', 'AltGraph', 'CapsLock', 'Control', 'Fn', 'Meta', 'NumLock', 'Scroll', 'Shift', and 'Win'
inputMethod:numberDOM_INPUT_METHOD_UNKNOWN=0
DOM_INPUT_METHOD_KEYBOARD=1
DOM_INPUT_METHOD_PASTE=2
DOM_INPUT_METHOD_DROP=3
DOM_INPUT_METHOD_IME=4
DOM_INPUT_METHOD_OPTION=5
DOM_INPUT_METHOD_HANDWRITING=6
DOM_INPUT_METHOD_VOICE=7
DOM_INPUT_METHOD_MULTIMODAL=8
DOM_INPUT_METHOD_SCRIPT=9
isChar:boolean  OK 
key:string
keyCode:numberfor keyboard eventsOK OKOK
location:numberDOM_KEY_LOCATION_STANDARD=0
DOM_KEY_LOCATION_LEFT=1
DOM_KEY_LOCATION_RIGHT=2
DOM_KEY_LOCATION_NUMPAD=3
DOM_KEY_LOCATION_MOBILE=4
DOM_KEY_LOCATION_JOYSTICK=5
repeat:boolean   OK
shift/ctrl/alt/metaKey:boolean OKOKOKOK
shift/ctrl/altLeft:boolean   OK
which:numberthe key-code (for keydown events)
or ascii-code (for keypress events)
OKOK OK
Mouse and Wheel members:
axis:numberfor wheel events,
HORIZONTAL_AXIS=1
VERTICAL_AXIS=2
tabular=3
 OK 
button:numbermouse_left=0
mouse_right=2
mouse_middle=1
OKOKL=1, R=2, M=4OK
buttons:numbermouse_none=0
mouse_pri=1
mouse_sec=2
mouse_aux=4
x/y OK OKOK
clientX/Y OKOKOKOK
deltaModeDOM_DELTA_PIXEL=0
DOM_DELTA_LINE=1
DOM_DELTA_PAGE=2
   
deltaX/Y/Zpos. value to scroll   
detailunstructured datazeropos. lines to scroll pos. lines to scroll
layerX/Y OK  
offsetX/Y OK  OK
pageX/Y OKOK OK
screenX/Y OKOKOKOK
wheelDeltaneg. 1/40 lines to scrollOK OK (6+)OK
wheelDeltaX/Yneg. 1/40 lines to scrollOK  
which:numbermouse_left=1
mouse_right=3
mouse_middle=2
OKOK--OK
Focus and Form members:
Text members:
contentOverflow:boolean   OK
clipboardData:unknown OK or undefined
dataTransfer:unknown   OK or null
rangeParent:object  OK 
rangeOffset:number  OK 
Mutation members:
attrChange:numberMODIFICATION=1
ADDITION=2
REMOVAL=3
attrName:string
newValue:string
prevValue:string
Proprietary members:
behaviorCookie:number   OK
behaviorPart:number   OK
bookmarks:unknown   OR or null
boundElements:object[]   OK
dataFld:string   OK or empty
nextPage:string   OK or empty
propertyName:string   OK or empty
qualifier:string   OK or empty
srcFilter:unknown   OR or null
srcUrn:string   OK or empty

Members in bold are contained in the W3C spec.

Members
of the EventException Object:
Annotation, Browser --->CRFFIEOP
code:numberUNSPECIFIED_EVENT_TYPE_ERR=0
DISPATCH_REQUEST_ERR=1
Recent Changes (All) | Edit SideBar Page last modified on September 27, 2010, at 07:13 PM Edit Page | Page History
Powered by TechnoloWiki