Introduction
This chapter demonstrates about the Prototype.js Hash which can thought as an associative array binding unique keys to values and following are the concepts covered in this chapter.
- Creating Hash
- Hash Methods
Description
User can create the Hash in two ways those are shown below.
- JavaScript Object instantiation with new keyword.
- Using $H function
Description
In order to explain about the hash prototype has several methods following are the some methods are briefly explained.
clone()
Is used to returns a clone of hash. The syntax below demonstrates the clone() method.
[code]
hash.clone();
[/code]
The code below demonstrates the clone() as shown below.
[jscript]
<html>
<head>
<title>Prototype examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script>
function showResult() {
var hash = new Hash({ a: 'apple'});
var clone = hash.clone();
alert("Value in hash : " + hash.get('a') );
alert("Value in clone : " + clone.get('a') );
hash.unset('a');
clone.unset('a');
}
</script>
</head>
<body>
<p>Click the button to get the result.</p>
<br />
<br />
<input type = "button" value = "Result" onclick = "showResult();"/>
</body>
</html>
[/jscript]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
get()
Is used to returns the values of hash key's property, the syntax below demonstrates the get() as shown below.
[code]
hash.get(key);
[/code]
The code below demonstrates the get() as shown below.
[jscript]
<html>
<head>
<title>Prototype examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script>
function showResult() {
var h = new Hash({ a: 'apple', b: 'banana', c: 'coconut' });
alert("Value of a : " + h.get('a') );
// -> 'apple'
alert("Value of b : " + h.get('b') );
// -> 'banana'
alert("Value of d : " + h.get('d') );
// -> undefined
}
</script>
</head>
<body>
<p>Click the button to get the result.</p>
<br />
<br />
<input type = "button" value = "Result" onclick = "showResult();"/>
</body>
</html>
[/jscript]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
each()
Is used to iterate on hash name/value pairs the syntax below demonstrates the each() as shown below.
[code]
hash.each(iterator);
[/code]
The code below demonstrates the each() as shown.
[jscript]
<html>
<head>
<title>Prototype examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script>
function showResult() {
var h = $H({ version: 1.5, author: 'Sam Stephenson' });
h.each(function(pair) {
alert(pair.key + ' = "' + pair.value + '"');
});
}
</script>
</head>
<body>
<p>Click the button to get the result.</p>
<br />
<br />
<input type = "button" value = "Result" onclick = "showResult();"/>
</body>
</html>
[/jscript]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
merge()
Is used to merges object to hash and returns the result of merge the syntax below demonstrates the merge().
[code]
hash.merge(object);
[/code]
The code below demonstrates the merge() a shown.
[jscript]
<html>
<head>
<title>Prototype examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script>
function showResult() {
var h = $H({ name: 'Prototype', version: 1.6 });
h = h.merge({ version: 1.6, author: 'Sam' });
h.each(function(pair) {
alert(pair.key + ' = "' + pair.value + '"');
});
}
</script>
</head>
<body>
<p>Click the button to see the result.</p>
<br />
<br />
<input type = "button" value = "Result" onclick = "showResult();"/>
</body>
</html>
[/jscript]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
set()
Is used to sets the hash keys property to value and return the values the syntax below demonstrates the set().
[code]
hash.set(key, value);
[/code]
The code below demonstrates the set() as shown below.
[jscript]
<html>
<head>
<title>Prototype examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script>
function showResult() {
var h = new Hash({ a: 'apple', b: 'banana', c: 'coconut' });
alert( "h.inspect() : " + h.inspect() );
h.set('d', 'orange');
alert( "h.inspect() : " + h.inspect() );
h.set('a', 'kiwi');
alert( "h.inspect() : " + h.inspect() );
}
</script>
</head>
<body>
<p>Click the button to get the result.</p>
<br />
<br />
<input type = "button" value = "Result" onclick = "showResult();"/>
</body>
</html>
[/jscript]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- By using get() user will get hash key properties.
- Set() sets the hash key property to values.
- User create the hash by using JavaScript new keyword.