introduction to prototype js framework
DESCRIPTION
A quick introduction to Prototype JavaScript FrameworkTRANSCRIPT
A Quick Introduction of Prototype JS
Prerequisite:
Basics of CSS, HTML and JavaScript
Who Uses it: NASA Apple CNN Basecamp ReelClever etc
What is Prototype?
A JavaScript Framework
A set of commonly used functions that makes it quicker and easier to build JavaScript web pages and web applications
Why Prototype Framework?
To simplify your Javascript (Write less do more) Cross-browser support CSS-like syntax – easy for developers/non-
developers to understand and use
Work with animation libraries like script.aculo.us Drag drop Slider, Animation effects etc
What to expect ...
Features and functionalities: DOM, Manipulation and Traversal Event handling Form handling AJAX JSON Chaining Built in functions for Array, String and document
objects
Document Object Model (DOM)
It is a convention/model to represents and describes the elements of a HTML page.
Every elements like forms, heading, paragraphs, images are the part of document.
Example:
<div class=”wrapper”>This is a
<span id="dom-id">paragraph</span>
</div>
To get a element:
var x = document.getElementById('dom-id');
Dom Traversal
<ul>
<li><div>text <span id=”click-me”>Click Me</span></div></li>
</ul> In core JavaScript(old way)
var ul = document.getElementById('clickme').parentNode
.parentNode.parentNode;
In Prototype JS way:
var ul = $('clickme').up('ul');
Dom Traversal(Contd..)
$('id').down('a'): select the first descendant(or the n-th descendant if index is specified) of an element
$('id').next('p'): select the next elements following by sibling.
Example:
<h3 id="title">Content Title</h3>
<div>test</div> <img src=”a.jpg” />
<p id="p-text">paragraph text</p>
$('title').next('p');
// -> p#p-text
Dom Traversal(Contd..)
More functions childElements() addClassName() observe() previous() select(): get array of descendants elements by match toggle() insert() setStyle Replace()
CSS Syntax
$$('#container ul a').each(function(aObj) {
//do something
})
var elements = $('id').select('.item');
// highlight the alternate rows in a table:
$$('table tr:nth-child(even)').each(function (obj) {
$(obj).addClassName('highlight');
})
Events
Events are actions that can be detected by JavaScript.
Examples:
onClick onMouseover onLoad onFocus onBlur
Event Handling
Event management is one of the biggest challenges to achieve cross-browser functionalitiies.
Every browser has different approaches to handle it.
Prototype Framework handles all cross browser compatibility issues and keeps you free from all trouble related to event management.;
Event Handling(Contd..)
Event Handler Types: DOM level 0
<a href="javascript:void(0);" onclick="alert('Hello, world!');" id="clickMeLink">Click Me</a>
DOM level 2
$('clickMeLink').observe('click', function(event) {
event.stop();
alert('Hello World');
});
Coupling and Event Overriding
<script>
function helloWorld() {
alert('Hello, world!');
}
window.onload = helloWorld;
</script>
<body onload="alert('Event Handling');">
</body>
The alert "Event Handling" would be displayed, but the "Hello, world!" would not.
If you used unobtrusive JavaScript, both could be triggered.
Unobtrusive Event Handling
<script>
function helloWorld() {
alert('Hello, world!');
}
function eventHandler() {
alert ('Event Handler');
}
Event.observe(window, 'load', helloWorld);
Event.observe(window, 'load', eventHandler);
</script>
In this way both alert boxes will fire once the page loads.
Forms in Prototype JS
form.disable(): disable the complete form
form.focusFirstElement(): focus first element (use case: Login page)
form.getElements(): get all elements of a form
form.getInputs(): To get the form's input elements (by type)
e.g:
var form = $('myform')
form.getInputs() // -> all INPUT elements
form.getInputs('text') // -> only text inputs
form.serialize(): Serialize form data to a string
form.request(): A method for serializing and submitting the form via an Ajax request
AJAX (ASYNCHRONOUS JAVASCRIPT and XML)
AJAX is a way/approach to communicate with web server without reloading the page.
It don't force user to wait for response every time the user perform any action. This is what "asynchronous" means.
For instance, GMail fetches new email messages in the background ("asynchronously") without forcing the user to wait.
Examples applications: Gmail, Facebook, Twitter etc.
AJAX in Protoype JS
// Basic Example:
new Ajax.Request(url, { method: 'get', parameters: 'data send to server',
onLoading: function() { // show loading bar until request get completed },
onComplete: function(transport) {
var response = transport.responseText;
// do something with response
}
});
// Performs an AJAX request and updates a container’s contents based on the response text.
new Ajax.Updater(container, url);
JSON(JavaScript Object Notation)
JSON is a lightweight data interchange format.
Its a collection of key/value pairs
Examples JSON data:
{
"firstName": "John",
"lastName": "Smith",
”email”: '[email protected]'
}
JSON in Protoype JS
toJSON():
var data = {name: 'Mark', email: '[email protected]', age: 25 };
Object.toJSON(data);
//-> '{"name": "Mark", "occupation": "[email protected]", "age": 25}'
evalJSON()
var person = '{ "name": "Mark", "age": "25" }'.evalJSON();
person.age;
//-> 25
Element's Chaining in Prototype
Chaining is a way to use the element's property and behaviour as continues effect.
Example:
<h3 id="title">Content Title</h3>
<div>test</div>
$('title').addClassName('active').next('div').hide();
Most Commonly used Functions
truncate(): Truncate a text to given length
camelize(): Converts a string separated by dashes into a camelCase equivalent.
'background-color'.camelize();
// -> 'backgroundColor'
stripTags(): Strips a string of any HTML tag.
' a <a href="#">link</a>'.stripTags();
// -> a link
include(): Check if the string contains a substring.
'Prototype framework'.include('frameset');
//-> false
Array in Prototpye JS
clear(): Make the array empty
clone(): duplicate of the array
compact(): new version of the array, without any null/undefined values.
first(): returns the first item in the array.
uniq(): get the duplicate-free version of an array
without(): a new version of the array that does not contain any of the specified values.
[3, 5, 6, 1, 20].without(20, 6)
// -> [3, 5, 1]
Links and Tutorials
http://www.prototypejs.org/
http://script.aculo.us/
http://www.tutorialspoint.com/prototype/
http://www.phpasks.com/ajax/prototype-example.html http://cool-javascripts.com/prototype/most-useful-prototype-plugins.html
Coverflow
Image Lightboxes
AutoComplete
Tooltip
Rich User intefaces
Inplace Editor
Questions?
If you have doubts, feel free to contact me on below details:
Email: [email protected]
Twitter: http://twitter.com/imranweb
Facebook: http://facebook.com/imranweb
LinkedIn: http://in.linkedin.com/in/imranweb
Thank You
You can view this presentation at:
http://www.slideshare.net/imranweb/introduction-to-prototpye-js-framework