The html times

Elegantly Powered by Google

Introducing GenevaJS by Rick Waldron March 31st 2009 Delicious



Relevant Links

Genevajs.com EMCA Script Javascript History of Javascript on OReillynet History of Javascript on About.com

Relevant Downloads

Prototype VS jQuery

Imagine removing the "vs" from that line and replacing it with "and" or "with"

In PHP:

  1. $str = "Prototype vs. jQuery";
  2. $str = str_replace('vs.', 'with', $str);
  3. echo $str;

In Ruby

  1. str = "Prototype vs. jQuery"
  2. str["vs."] = "with"
  3. puts str

In Python

  1. str = 'Prototype vs. jQuery'
  2. print str.replace('vs.', 'with')

In JavaScript

  1. var GenevaJS = {}

This article's purpose is to introduce my new pet project, which after several silly names (protoquery, pQuery, abbreviation, etc), has been officially named GenevaJS. GenevaJS was named for Geneva, Switzerland and inspired by it's role on the world stage as a neutral ground (Geneva Protocol & Geneva Conventions).

If you can imagine Prototype and jQuery as two major forces in conflict [ ex. $$(elements) and $(elements) ], GenevaJS aims to act as the liaison between them. In simple terms, with GenevaJS, Prototype developers will be able to take full advantage of jQuery's "write less, do more" concept, while jQuery developers will be able to take advantage of Prototype's powerful DOM functionality. Additionally, GenevaJS will make moving from one framework to another as painless as possible. The project will produce a Prototype extension and a jQuery plugin, as well as a customizable package builder to select your own extension methods.

This article will be the first of many as we attempt to document GenevaJS's growth and development. htmltimes.com will also be exclusively reporting updates, releases, fixes, patches etc in conjuction with genevajs.com.

Less talk, more Rock

The first sneak peak at GenevaJS comes from the jQuery=>Prototype (Prototype developers using jQuery-style methods) version of the library.

attr()

attr() is a powerhouse method for manipulating an element's attributes.

  1.  
  2. var GenevaAttr = {
  3.  
  4. attr: function ( element, name, value ) {
  5. element = $(element);
  6.  
  7. /*
  8.   REMOVE?
  9.  
  10.   example:
  11.  
  12.   $(element).attr('title', false);
  13.  
  14.   Removes the attribute "title" from the element
  15.  
  16.  */
  17. if ( value === false )
  18. return element.removeAttribute( name );
  19.  
  20. /*
  21.   GET VALUE?
  22.  
  23.   example:
  24.  
  25.   $(element).attr('title');
  26.  
  27.   Returns the value of attribute "title" from the element
  28.  
  29.  */
  30. if ( typeof name === "string" && value === undefined )
  31. return element.getAttribute( name );
  32.  
  33. /*
  34.   SET VALUE BY CALLBACK?
  35.  
  36.   example:
  37.  
  38.   $(element).attr( title , function () {
  39.  
  40.   var a = 'this title is';
  41.   var b = ' a string';
  42.   return a + b;
  43.  
  44.   });
  45.  
  46.   Sets the element's title attribute to: "this title is a string"
  47.  */
  48. if ( typeof value === "function" )
  49. return element.setAttribute( name, value() );
  50.  
  51.  
  52. /*
  53.   ADD AND SET MULTIPLE ATTRIBUTES?
  54.  
  55.   Attributes are set by passing an object of property-value pairs, where value can be a string or expression
  56.  
  57.   example:
  58.  
  59.   var attributes = { alt : 'this is an alt attribute', title : function () { return 'this is a title attribute' } };
  60.  
  61.   $(element).attr(attributes);
  62.  
  63.  
  64.   Adds and Sets multiple attributes to the element
  65.  */
  66. if ( typeof name === "object" ) {
  67. Object.keys(name).each( function ( key ) {
  68. if ( name[ key ] === false )
  69. element.removeAttribute( key );
  70. else {
  71. if ( typeof name[ key ] === "function" )
  72. element.attr( key, name[ key ] );
  73. else
  74. element.setAttribute( key, name[ key ] );
  75. }
  76. });
  77. return element;
  78. }
  79.  
  80. /*
  81.   DEFAULT
  82.  
  83.   Adds an attribute and value to the element
  84.  
  85.   example:
  86.  
  87.   As arguments: attribute, value
  88.   $(element).attr('title', 'this is a title');
  89.  
  90.   As a hash of property-value pairs (see above)
  91.   $(element).attr({ title , 'this is a title'});
  92.  
  93.  */
  94. return element.setAttribute( name, value );
  95. }
  96.  
  97. };
  98.  
  99. Element.addMethods(GenevaAttr);
  100.  


Comments

Comments are now closed

Related Articles:

Frameworks, Idioms, and Idiots

By Joshua Clayton

Joshua Clayton examines the upshot of using framework syntax in place of actually learning Javascript, and asks us to stop being lazy.
Read more …


Putting the Kaibosh on IE6

By Boaz Sender

Boaz sender walks us through serving a message to visitors based on their browser version. Read more …


Anatomy of a jQuery Plugin

By Thomas Steinmetz

Thomas Steinmetz walks us through building a jQuery plugin with the example of a tabbed navigation and gives us the final product to download. Read more …


Information Wants To Be Free

Elegantly Powered by Google