/**
Created by: Michael Synovic
on: 01/12/2003
This is a Javascript implementation of the Java Hashtable object.
Contructor(s):
Hashtable()
Creates a new, empty hashtable
Method(s):
void clear()
Clears this hashtable so that it contains no keys.
boolean containsKey(String key)
Tests if the specified object is a key in this hashtable.
boolean containsValue(Object value)
Returns true if this Hashtable maps one or more keys to this value.
Object get(String key)
Returns the value to which the specified key is mapped in this hashtable.
boolean isEmpty()
Tests if this hashtable maps no keys to values.
Array keys()
Returns an array of the keys in this hashtable.
void put(String key, Object value)
Maps the specified key to the specified value in this hashtable. A NullPointerException is thrown is the key or value is null.
Object remove(String key)
Removes the key (and its corresponding value) from this hashtable. Returns the value of the key that was removed
int size()
Returns the number of keys in this hashtable.
String toString()
Returns a string representation of this Hashtable object in the form of a set of entries, enclosed in braces and separated by the ASCII characters ", " (comma and space).
Array values()
Returns a array view of the values contained in this Hashtable.
*/
function Hashtable()
{
this.clear = hashtable_clear;
this.containsKey = hashtable_containsKey;
this.containsValue = hashtable_containsValue;
this.get = hashtable_get;
this.isEmpty = hashtable_isEmpty;
this.keys = hashtable_keys;
this.put = hashtable_put;
this.remove = hashtable_remove;
this.size = hashtable_size;
this.toString = hashtable_toString;
this.values = hashtable_values;
this.hashtable = new Array( );
/*=======Private methods for internal use only - start========*/
function hashtable_clear() {
this.hashtable = new Array( );
}//end hashtable_clear
function hashtable_containsKey( key )
{
var exists = false;
for (var i in this.hashtable)
{
if (i == key && this.hashtable[ i ] != null)
{
exists = true;
break;
}
}
return exists;
}//end hashtable_containsKey
function hashtable_containsValue( value )
{
var contains = false;
if (value != null)
{
for (var i in this.hashtable)
{
if (this.hashtable[ i ] == value)
{
contains = true;
break;
}
}
}
return contains;
}//end hashtable_containsValue
function hashtable_get( key ) {
return this.hashtable[ key ];
}//end hashtable_get
function hashtable_isEmpty() {
return ( parseInt( this.size( ) ) == 0 ) ? true : false;
}//end hashtable_isEmpty
function hashtable_keys()
{
var keys = new Array( );
for (var i in this.hashtable)
{
if (this.hashtable[ i ] != null)
keys.push( i );
}
return keys;
}//end hashtable_keys
function hashtable_put( key, value )
{
if (key == null || value == null) {
throw "NullPointerException {" + key + "},{" + value + "}";
} else {
this.hashtable[ key ] = value;
}
}//end hashtable_put
function hashtable_remove( key )
{
var rtn = this.hashtable[ key ];
this.hashtable[ key ] = null;
return rtn;
}//end hashtable_remove
function hashtable_size()
{
var size = 0;
for (var i in this.hashtable)
{
if (this.hashtable[ i ] != null)
size++;
}
return size;
}// end hashtable_size
function hashtable_toString()
{
var result = "";
for (var i in this.hashtable)
{
if (this.hashtable[ i ] != null)
result += "{" + i + "},{" + this.hashtable[ i ] + "}\n";
}
return result;
}//end hashtable_toString
function hashtable_values()
{
var values = new Array( );
for (var i in this.hashtable)
{
if (this.hashtable[ i ] != null)
values.push( this.hashtable[ i ] );
}
return values;
}//end hashtable_values
/*=======Private methods for internal use only - end ========*/
}// end HashTable
http://sourceforge.net/projects/jseditor/
I use JSEditor too, but I also like these two JS plugins :
Harish Kataria's JavaScript Plug-in
http://www.ee.ryerson.ca/~hkataria/
NRG JavaScript Editor
http://www.energybyte.com/products/free%20products/
results from: Fxilla Firefox 1.06, Internet Explorer 6.0 (SP2), Opera 8.01 on Win XP SP2
(can't test Safari since I don't have a Mac)
---
note:
'~>' means "slightly faster"
'>' means "faster" not "slower"
'>>' means "much faster"
'>>>' means "faster by several orders of magnitude"
note: I didn't record how fast each browser is relative to each other,
since that is useless information for cross-browser optimization. But if you're interested:
- the performance of the JS engines in all three are all comparable,
though overall Opera is the fastest
- Opera calls functions and concats strings much faster than the others
- for DOM manipulation and access, Opera was by far the fastest, with Fx 2nd, and IE last
* innerHTML vs. W3C methods:
- innerHTML is faster than appendChild/createElement
- innerHTML is slower than appendChild/createTextNode
- innerHTML is thus slower than appendChild
- IE: appendChild and removeChild are relatively slow compared to createElement/cloneNode
- Fx and Opera: appendChild and removeChild are relatively fast compared to createElement/cloneNode
* HTML DOM vs. XHTML/XML DOM:
- case sensitivity:
- HTML: tag names are returned uppercased (e.g. 'title' => 'TITLE')
- HTML: attribute names are returned lowercased (e.g. 'ID' => 'id')
- HTML: case-insensitive attribute values are returned lowercased (e.g. input's type attribute)
- HTML: tag names and case-insensitive attribute values can be passed or set either upper- or lower-cased
- XHTML: everything is case-sensitive
- XHTML: doesn't support document.write or document.writeln
- IE: doesn't support XHTML
* "ignorable" whitespace and comments:
- "ignorable" whitespace or text nodes = whitespace-only text nodes that have no effect on the
default presentation of the HTML document
- IE:
- DOM does not include comment nodes and "ignorable" text nodes before the first
non-comment non-"ignorable"-text node
- DOM does not include "ignorable" text nodes between element nodes
- Fx and Opera: includes all "ignorable" whitespace
[note to self: need to run more tests]
* accessing event object:
(1) JS: some_element.onclick = foo;
- Fx and Opera: event object is passed as sole parameter to foo
- IE: event object is stored in window.event and NOT passed to foo
- this object is the target of the event object
(IE: event.srcElement; Fx and Opera (W3C): event.target)
- addEventListener (Fx and Opera): event object is passed as sole parameter to addEventListener listeners
- attachEvent (IE): event object is passed as sole parameter to attachEvent listeners
and also stored in window.event
(2) HTML:
- IE:
- following function is assigned as onclick listener:
function anonymous() {
foo();
}
- event object is stored in window.event and NOT passed to foo
- Fx and Opera:
- following function is assigned as onclick listener:
function anonymous(event) {
foo();
}
- event object is passed to this function but NOT passed to foo
- Fx: function name is actually "onclick", but that's irrelevant
- in foo, this object refers to window object (and thus useless)
(3) HTML:
- IE:
- following function is assigned as onclick listener:
function anonymous() {
foo(event);
}
- event object is stored in window.event
- identifier event resolves to window.event and is then passed to foo
- Fx and Opera
- following function is assigned as onclick listener:
function anonymouse(event) {
foo(event);
}
- event object is passed to this function as identifier event,
which is then passed to foo
- in foo, this object refers to window object (and thus useless)
- other parameters can be passed, e.g.
- (1) and (3) are cross-browser
- Fx: event object is truly passed down each listener during event propagation
- IE: new event object is created for each listener during event propagation (verify this)
* computed style:
- the computed style of an element is the combination of:
- the element's style attribute
- style rules from style elements that apply to the element
- style rules linked external style sheets that apply to the element
- IE: element.currentStyle
- Fx and Opera: window.getComputedStyle(element, null)
- cross-browser: element.currentStyle || window.getComputedStyle(element, null)
- the returned object has the same properties names as element.style (e.g. computedStyle.display)
* "visibility: hidden" vs. "display: none":
- "visibility: hidden"
- offsetTop, offsetLeft:
- Fx: (computed)
- IE: (computed)
- Opera: (computed)
- offsetHeight, offsetWidth:
- Fx: (computed)
- IE: (computed)
- Opera: (computed)
- computedStyle.top, computedStyle.left:
- Fx: (computed)
- IE: (computed)
- Opera: (computed)
- computedStyle.height, computedStyle.width:
- Fx: (computed)
- IE: "auto"
- Opera: (computed)
- cannot be tabbed to
- "display: none":
- offsetTop, offsetLeft:
- Fx: 0
- IE: (computed)
- Opera: 0
- offsetHeight, offsetWidth:
- Fx: 0
- IE: 0
- Opera: 0
- computedStyle.top, computedStyle.left:
- Fx: "0px"
- IE: (computed)
- Opera: (computed)
- computedStyle.height, computedStyle.width:
- Fx: "auto"
- IE: "auto"
- Opera: "0px"
- cannot be tabbed to
* IE: setAttribute and getAttribute can use both "class" and "className" as parameters
to refer to the class attribute
* setting event listener attributes:
- in IE, a function must be passed: setAttribute('onclick', function() { foo(); })
- in Fx and Opera (in accordance with W3C spec), a string must be passed: setAttribute('onclick', "foo();")
* IE bug: in a try/catch/finally statement, if an exception is thrown in the catch block, finally block does not execute
* creating new text nodes (createTextNode) is slightly faster than cloning empty text nodes and setting them
* creating elements:
(1) document.createElement('div')
(2) assume the following is defined:
var div = document.createElement('div');
div.cloneNode(false)
(3) assume the following is defined:
var div = document.createElement('div');
div.cloneNode(true)
- (2) and (3) are faster than (1)
- (2) is as fast as (or negligably faster than) (3)
- Fx, IE, and Opera summary: (2) == (3) > (1)
- each element takes a different amount of time to be created;
generally the more properties and methods an element has, the longer it takes;
for example, creating an
IE (Win) and Mozilla (1.7) will return the window object inside the iframe with oIFrame.contentWindow.
Safari (1.2.4) doesn't understand that property, but does have oIframe.contentDocument, which points to the document object inside the iframe.
To make it even more complicated, Opera 7 uses oIframe.contentDocument, but it points to the window object of the iframe.
Because Safari has no way to directly access the window object of an iframe element via standard DOM (or does it?), our fully modern-cross-browser-compatible code will only be able to access the document within the iframe. The resulting code follows.
