Jun 3, 2013
kalpesh

Prototype Utility Methods – Commonly used prototypejs functions

Prototype JS Javascript frameworkPrototype JS comes with many utility methods which are very powerful and useful while development. Below methods are shorthands or aliases of other Prototype methods, created to save time in typing.

These are created as they are very commonly used, to make developer’s life easier.

$() Function

– Retuns the element that has the ID passed as an argument
Shorthand to: document.getElementById()
Example:

1
2
3
$("car"); //returns element having id "car"
$("car").hide(); //hides div where id is "car"
$("car").addClassName("hidden"); //adds class name "hidden" to element with id "car"

$$() Function

– Returns the elements that has CSS selectors as an argument
Shorthand to: document.getElementById() + document.getElementsByTagName() + prototype’s getElementsByClassName()
Example:

1
2
3
$$('.active');//returns all the elements having class "active"
$$('div.active p, #car a').invoke('hide'); //hides all the "p" tags under div having class "active", hides all links under element having id "car"
$$('div:empty'); //all divs without any content, version 1.5.1 and above

$F() Function

– Returns the value of a form control, like text boxes or dropdown options
Shorthand to: Form.Element.getValue, Form.Element#getValue

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
    function showName() {
        var name = $F('firstname') + ' ' + $F('lastname');
        alert('Name: ' + name);
    }
</script>
<form>
    <input type="text" id="firstname" value="Kalpesh" />
    <input type="text" id="lastname" value="Mehta" />
    <input type="button" value="Get my Name!" onclick="showName();" />
</form>

$R() Function

– Builds a range object, shorthand to “new ObjectRange()”
Shorthand to: ObjectRange()
Example:

1
2
3
4
var range = $R(10, 20, false);
range.each(function(value, index){
    alert(value);
});

$H() Function

– Converts objects into enumerable Hash objects which resembles associate arrays.
Shorthand to: Hash

1
2
3
4
5
6
7
var a = {
       firstname: 'John',
       lastname: 'Doe'
};

var h = $H(a);
alert( h.get('firstname') ); //alert's John

$A() Function

– Converts the single argument passed into an Array object.
Shorthand to: Array.from

1
2
3
var paras = $A(document.getElementsByTagName('p')); //gets all the paragraph's in array format
paras.each(Element.hide); //looping paragraphs and hiding them each
$(paras.last()).show(); //showing the last paragraph

$w() Function

– Splits a string into an array with whitespace as a delimiter.
Shorthand to: Ruby’s %w{foo bar} or Perl’s qw(foo bar).

1
2
3
4
var str = 'apples bananas kiwis';
$w(str).each(function(fruit){
  alert(fruit); //alerts 3 times with values apples, bananas and kiwis
})

3 Comments

  • Nice tutorial….

  • A few fixes for your tutorial

    >$$(‘active’);//returns all the elements having class “active”
    This should be $$(‘.active’) with a dot

    >$$(‘div.active p, #car a’).hide();
    This returns a list and will not have the method hide() available
    Try this $$(‘div.active p, #car a’).invoke(‘hide’)

    • Thanks for noticing the issues! I have updated it.

Leave a comment

 

Welcome to my Blog

Kalpesh MehtaHelping Magento developers in their day-to-day development problems since 2011. Most of the problems and solutions here are my own experiences while working on different projects. Enjoy the blog and don't forget to throw comments and likes/+1's/tweets on posts you like. Thanks for visiting!

Certifications