Introduction to Prototype JS Framework
-
Upload
mohd-imran -
Category
Technology
-
view
3.524 -
download
6
description
Transcript of Introduction to Prototype JS Framework
![Page 1: Introduction to Prototype JS Framework](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bdfd364a7959a5788b4645/html5/thumbnails/1.jpg)
A Quick Introduction of Prototype JS
Prerequisite:
Basics of CSS, HTML and JavaScript
Who Uses it: NASA Apple CNN Basecamp ReelClever etc
![Page 2: Introduction to Prototype JS Framework](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bdfd364a7959a5788b4645/html5/thumbnails/2.jpg)
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
![Page 3: Introduction to Prototype JS Framework](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bdfd364a7959a5788b4645/html5/thumbnails/3.jpg)
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
![Page 4: Introduction to Prototype JS Framework](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bdfd364a7959a5788b4645/html5/thumbnails/4.jpg)
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
![Page 5: Introduction to Prototype JS Framework](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bdfd364a7959a5788b4645/html5/thumbnails/5.jpg)
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');
![Page 6: Introduction to Prototype JS Framework](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bdfd364a7959a5788b4645/html5/thumbnails/6.jpg)
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');
![Page 7: Introduction to Prototype JS Framework](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bdfd364a7959a5788b4645/html5/thumbnails/7.jpg)
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
![Page 8: Introduction to Prototype JS Framework](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bdfd364a7959a5788b4645/html5/thumbnails/8.jpg)
Dom Traversal(Contd..)
More functions childElements() addClassName() observe() previous() select(): get array of descendants elements by match toggle() insert() setStyle Replace()
![Page 9: Introduction to Prototype JS Framework](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bdfd364a7959a5788b4645/html5/thumbnails/9.jpg)
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');
})
![Page 10: Introduction to Prototype JS Framework](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bdfd364a7959a5788b4645/html5/thumbnails/10.jpg)
Events
Events are actions that can be detected by JavaScript.
Examples:
onClick onMouseover onLoad onFocus onBlur
![Page 11: Introduction to Prototype JS Framework](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bdfd364a7959a5788b4645/html5/thumbnails/11.jpg)
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.;
![Page 12: Introduction to Prototype JS Framework](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bdfd364a7959a5788b4645/html5/thumbnails/12.jpg)
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');
});
![Page 13: Introduction to Prototype JS Framework](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bdfd364a7959a5788b4645/html5/thumbnails/13.jpg)
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.
![Page 14: Introduction to Prototype JS Framework](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bdfd364a7959a5788b4645/html5/thumbnails/14.jpg)
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.
![Page 15: Introduction to Prototype JS Framework](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bdfd364a7959a5788b4645/html5/thumbnails/15.jpg)
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
![Page 16: Introduction to Prototype JS Framework](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bdfd364a7959a5788b4645/html5/thumbnails/16.jpg)
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.
![Page 17: Introduction to Prototype JS Framework](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bdfd364a7959a5788b4645/html5/thumbnails/17.jpg)
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);
![Page 18: Introduction to Prototype JS Framework](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bdfd364a7959a5788b4645/html5/thumbnails/18.jpg)
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]'
}
![Page 19: Introduction to Prototype JS Framework](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bdfd364a7959a5788b4645/html5/thumbnails/19.jpg)
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
![Page 20: Introduction to Prototype JS Framework](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bdfd364a7959a5788b4645/html5/thumbnails/20.jpg)
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();
![Page 21: Introduction to Prototype JS Framework](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bdfd364a7959a5788b4645/html5/thumbnails/21.jpg)
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
![Page 22: Introduction to Prototype JS Framework](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bdfd364a7959a5788b4645/html5/thumbnails/22.jpg)
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]
![Page 23: Introduction to Prototype JS Framework](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bdfd364a7959a5788b4645/html5/thumbnails/23.jpg)
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
![Page 24: Introduction to Prototype JS Framework](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bdfd364a7959a5788b4645/html5/thumbnails/24.jpg)
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
![Page 25: Introduction to Prototype JS Framework](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bdfd364a7959a5788b4645/html5/thumbnails/25.jpg)
Thank You
You can view this presentation at:
http://www.slideshare.net/imranweb/introduction-to-prototpye-js-framework