Introduction to Prototype JS Framework

4,260 views
4,081 views

Published on

A quick introduction to Prototype JavaScript Framework

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,260
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
34
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to Prototype JS Framework

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

×