Scribd
Upload
313 views

Prototype 2

Prototype is a JavaScript framework that provides support for Ajax interactions, hides browser inconsistencies, and enables object-oriented programming patterns in JavaScript. It includes utilities for DOM manipulation through functions like $, $$ and new Insertion.Bottom. Prototype also includes classes like Ajax.Request for making asynchronous HTTP requests and PeriodicalExecuter for periodically executing functions.

Uploaded by

anon-686846
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
313 views

Prototype 2

Prototype is a JavaScript framework that provides support for Ajax interactions, hides browser inconsistencies, and enables object-oriented programming patterns in JavaScript. It includes utilities for DOM manipulation through functions like $, $$ and new Insertion.Bottom. Prototype also includes classes like Ajax.Request for making asynchronous HTTP requests and PeriodicalExecuter for periodically executing functions.

Uploaded by

anon-686846
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 47

Prototype

Stuart Halloway
[email protected]
Prototype’s Role
What is Prototype?
provides core support for Ajax
hides browser oddities
powers other libraries (Scriptaculous, Rico)
keeps things simple
works with any server stack
integrates with Rails
Prototype’s Class:
OO for JavaScript
Ajax.Request = Class.create();
Ajax.Request.Events =
['Uninitialized', 'Loading', 'Loaded', 'Interactive',
'Complete'];

Ajax.Request.prototype = Object.extend(new Ajax.Base(), {


initialize: function(url, options) {
this.transport = Ajax.getTransport();
this.setOptions(options);
this.request(url);
},
// ...snip ...
}

create a class
Ajax.Request = Class.create();
Ajax.Request.Events =
['Uninitialized', 'Loading', 'Loaded', 'Interactive',
'Complete'];

Ajax.Request.prototype = Object.extend(new Ajax.Base(), {


initialize: function(url, options) {
this.transport = Ajax.getTransport();
this.setOptions(options);
this.request(url);
},
// ...snip ...
}

class-level properties
Ajax.Request = Class.create();
Ajax.Request.Events =
['Uninitialized', 'Loading', 'Loaded', 'Interactive',
'Complete'];

Ajax.Request.prototype = Object.extend(new Ajax.Base(), {


initialize: function(url, options) {
this.transport = Ajax.getTransport();
this.setOptions(options);
this.request(url);
},
// ...snip ...
}

extend another class


Ajax.Request = Class.create();
Ajax.Request.Events =
['Uninitialized', 'Loading', 'Loaded', 'Interactive',
'Complete'];

Ajax.Request.prototype = Object.extend(new Ajax.Base(), {


initialize: function(url, options) {
this.transport = Ajax.getTransport();
this.setOptions(options);
this.request(url);
},
// ...snip ...
}

constructor
Ajax.Request = Class.create();
Ajax.Request.Events =
['Uninitialized', 'Loading', 'Loaded', 'Interactive',
'Complete'];

Ajax.Request.prototype = Object.extend(new Ajax.Base(), {


initialize: function(url, options) {
this.transport = Ajax.getTransport();
this.setOptions(options);
this.request(url);
},
// ...snip ...
}

instance-level properties
Ajax.Request = Class.create();
Ajax.Request.Events =
['Uninitialized', 'Loading', 'Loaded', 'Interactive',
'Complete'];

Ajax.Request.prototype = Object.extend(new Ajax.Base(), {


initialize: function(url, options) {
this.transport = Ajax.getTransport();
this.setOptions(options);
this.request(url);
},
// ...snip ...
}

beware the comma


var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}

Class.create
Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}

Object.extend
OO in Prototype

• Classes are language library features


• Inheritance is a language library feature
• Classes and inheritance are flexible ideas
Augmenting
Built-in Classes
Object.extend(String.prototype, {
stripTags: function() {
return this.replace(/<\/?[^>]+>/gi, '');
},

stripScripts: function() {
return this.replace(new RegExp(Prototype.ScriptFragment,
'img'), '');
},
// ... snip ...
}

augmenting String
$A(element.childNodes).each(function(node){
element.removeChild(node)
});

enumeration: each
toQueryString: function() {
return this.map(function(pair) {
return pair.map(encodeURIComponent).join('=');
}).join('&');
},

enumeration: map
compact: function() {
return this.select(function(value) {
return value != undefined || value != null;
});
},

enumeration: select
Augmenting Classes

• functions have sensible homes


• collection traversal is trivial
xhr Support
new Ajax.Request(this.validateAction, {
method: 'get',
parameters: e.name + "=" + e.value,
onSuccess: (function(req) {
this.reportValidation(e, req.responseText);
}).bind(this),
onFailure: function(req) {alert(req.responseText)},
onException: function(t,e) {alert(e);}
});

URL to invoke
new Ajax.Request(this.validateAction, {
method: 'get',
parameters: e.name + "=" + e.value,
onSuccess: (function(req) {
this.reportValidation(e, req.responseText);
}).bind(this),
onFailure: function(req) {alert(req.responseText)},
onException: function(t,e) {alert(e);}
});

HTTP verb
new Ajax.Request(this.validateAction, {
method: 'get',
parameters: e.name + "=" + e.value,
onSuccess: (function(req) {
this.reportValidation(e, req.responseText);
}).bind(this),
onFailure: function(req) {alert(req.responseText)},
onException: function(t,e) {alert(e);}
});

query string
new Ajax.Request(this.validateAction, {
method: 'get',
parameters: e.name + "=" + e.value,
onSuccess: (function(req) {
this.reportValidation(e, req.responseText);
}).bind(this),
onFailure: function(req) {alert(req.responseText)},
onException: function(t,e) {alert(e);}
});

success callback
new Ajax.Request(this.validateAction, {
method: 'get',
parameters: e.name + "=" + e.value,
onSuccess: (function(req) {
this.reportValidation(e, req.responseText);
}).bind(this),
onFailure: function(req) {alert(req.responseText)},
onException: function(t,e) {alert(e);}
});

bind if you need this


new Ajax.Request(this.validateAction, {
method: 'get',
parameters: e.name + "=" + e.value,
onSuccess: (function(req) {
this.reportValidation(e, req.responseText);
}).bind(this),
onFailure: function(req) {alert(req.responseText)},
onException: function(t,e) {alert(e);}
});

failure callback
new Ajax.Request(this.validateAction, {
method: 'get',
parameters: e.name + "=" + e.value,
onSuccess: (function(req) {
this.reportValidation(e, req.responseText);
}).bind(this),
onFailure: function(req) {alert(req.responseText)},
onException: function(t,e) {alert(e);}
});

exception callback
Ajax.Request

• hides browser oddities


• takes a slew of options
• performs callbacks asynchronously
xhr Example:
Polling and Updating
new PeriodicalExecuter(function() {
new Ajax.Updater('items',
'http://localhost:3000/retrieve_chats',
{evalScripts:true});
}, 10);

call periodically
new PeriodicalExecuter(function() {
new Ajax.Updater('items',
'http://localhost:3000/retrieve_chats',
{evalScripts:true});
}, 10);

update a page element


new PeriodicalExecuter(function() {
new Ajax.Updater('items',
'http://localhost:3000/retrieve_chats',
{evalScripts:true});
}, 10);

URL to invoke
new PeriodicalExecuter(function() {
new Ajax.Updater('items',
'http://localhost:3000/retrieve_chats',
{evalScripts:true});
}, 10);

evaluate response scripts


new PeriodicalExecuter(function() {
new Ajax.Updater('items',
'http://localhost:3000/retrieve_chats',
{evalScripts:true});
}, 10);

interval (seconds)
xhr

• a method for every season


• Ajax.Request, Ajax.Updater
• methods share common options
DOM Support
clear: function() {
for (var i = 0; i < arguments.length; i++)
$(arguments[i]).value = '';
},

$
function $() {
var results = [], element;
for (var i = 0; i < arguments.length; i++) {
element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
results.push(Element.extend(element));
}
return results.length < 2 ? results[0] : results;
}

$ implementation
$$("h1").each(function(e) {
Element.addClassName(e, "blueborder");
});
$$("li .showme").each(function(e) {
Effect.Pulsate(e);
});

$$
insertions
log: function(type, message) {
new Insertion.Bottom(this.element,
'<tr class="' + type + '"><td>' +
message.escapeHTML() + '</td></tr>');
Element.scrollTo(this.form);
},

insertion example
//from pragforms sample app
new Form.Element.Observer(
'search',
0.5,
function(element, value) {
Element.show('spinner');
new Ajax.Updater(
'ajaxWrapper',
'http://localhost:3000/user/search',
{ asynchronous:true,
evalScripts:true,
onComplete:function(request) {
Element.hide('spinner')
},
parameters:'search=' + encodeURIComponent(value)
}
)
}
)

observe an element
//from pragforms sample app
new Form.Element.Observer(
'search',
0.5,
function(element, value) {
Element.show('spinner');
new Ajax.Updater(
'ajaxWrapper',
'http://localhost:3000/user/search',
{ asynchronous:true,
evalScripts:true,
onComplete:function(request) {
Element.hide('spinner')
},
parameters:'search=' + encodeURIComponent(value)
}
)
}
)

interval (seconds)
//from pragforms sample app
new Form.Element.Observer(
'search',
0.5,
function(element, value) {
Element.show('spinner');
new Ajax.Updater(
'ajaxWrapper',
'http://localhost:3000/user/search',
{ asynchronous:true,
evalScripts:true,
onComplete:function(request) {
Element.hide('spinner')
},
parameters:'search=' + encodeURIComponent(value)
}
)
}
)

handler
<%= observe_field :search,
:frequency => 0.5,
:update => 'ajaxWrapper',
:complete=>"Element.hide('spinner')",
:before=>"Element.show('spinner')",
:with=>"'search=' + encodeURIComponent(value)",
:url=>{:action=>'search'} %>

let Rails write the code


DOM Support

• find elements by id with $


• find by class with $$
• update elements with insertions
• grab user input with observers
Resources and Samples
Prototype:
prototype.conio.net

About Relevance, LLC:


www.relevancellc.com/about

Pragforms App:
www.relevancellc.com/code

Rails Samples:
www.pragmaticprogrammer.com/titles/fr_rails4java/

You might also like