Prototype Js
Download as PPT, PDF0 likes194 views
This document provides an overview of the Prototype JavaScript framework. It discusses what Prototype JS is, why it was created, and how it compares to other frameworks in terms of speed. It also outlines some common problems with JavaScript frameworks and describes some general methods in Prototype like Class.create for object-oriented programming and Object.extend for inheritance. The document explains how Prototype JS integrates with Ruby on Rails and provides references for further reading.
![General Methods Cont’d Prototype uses $ ( ) for id based selection. The $() function is a shortcut to the most frequent document.getElementById() function of the DOM. $() can pass more than one id and it will return an Array object with all the requested elements. var divs = $ ('myDiv','myOtherDiv'); for(i=0; i<divs.length; i++) { alert(divs[i].innerHTML); }](https://image.slidesharecdn.com/prototypejs-12947908807504-phpapp01/85/Prototype-Js-9-320.jpg)
Prototype Js
- 1. Prototype JS in Ruby On Rails Kıvanç Kantürk
- 2. Outline What is Prototype JS ? Why Prototype JS ? Speed Comparison Between Frameworks Some Problems of JS Frameworks and Prototype Some General Methods Ruby and Prototype JS
- 3. What is Prototype JS Prototype is a JavaScript framework. The reason is to ease dynamic web application development. Mainly extends DOM and JavaScript objects. Written by Sam Stephenson and friends
- 4. Why Prototype JS It is included in the Rails package. It is better and faster in Chrome, however not for the others. Easy to implement (It depends on familiarity). Provides Ajax dynamic pages. Prototype adds better OOP support better OOP support
- 5. Speed Comparison Between Frameworks
- 6. Problems Cross browser issues Chance of name collisions Performance overheads
- 7. General Methods Main methods – Class.create Creates a constructor that calls “initialize” You can define everything in prototype instead of half (fields) in constructor an half (methods) in prototype var MyClass= Class.create ({ initialize: function(args){functionA(){..}, functionB(){..} });
- 8. General Methods Cont’d – Object.extend Adds new capabilities to existing class Lets you define object hierarchies (almost real inheritance) Object.extend called automatically if first arg of Class.create is a class name Add properties to a single object • var obj1 = {a: 1, b: 2}; • var obj2 = {c: 3, d: 4}; • Object.extend (obj1, obj2); // obj1 has a, b, c, d
- 9. General Methods Cont’d Prototype uses $ ( ) for id based selection. The $() function is a shortcut to the most frequent document.getElementById() function of the DOM. $() can pass more than one id and it will return an Array object with all the requested elements. var divs = $ ('myDiv','myOtherDiv'); for(i=0; i<divs.length; i++) { alert(divs[i].innerHTML); }
- 10. General Methods Cont’d Try.these() provides different function calls until one of them works. It takes some functions as arguments and calls them in an order. function getType(Worker){ return Try.these ( function() {return Worker.Id;}, function() {return Worker.Salary;) ); }
- 11. General Methods Cont’d Ajax.Request class assists AJAX functionality. Assume that we have an suitable XML response. <script> function f(){ var url = ‘ http:// localhost/20000/factory’ var params = ‘workerId=’ + workerId + ‘&salary=’ + s; var MyAjax = new Ajax.Request (url, { method: ‘get’, parameters: params, onC omplete: displayResult} ); } function displayResult(responseData){ if (responseData){ $(‘result’).value = responseData.responseText;} else{ $('result').value = "Sunucuda bir hata oluştu";} } </script>
- 12. Ruby and Prototype JS
- 13. Ruby and Prototype JS Cont’d <%= javascript_include_tag 'prototype' %> That must be added by user in the needed .erb document
- 14. Referances http://courses.coreservlets.com/Course-Materials/pdf/ajax/Prototype-3.pdf http://sergiopereira.com/articles/DeveloperNotes-Prototype-JS.pdf http://www.slideshare.net/remy.sharp/prototype-jquery-going-from-one-to-the-other http://api.prototypejs.org/ http://www.prototypejs.org/learn/extensions http://stackoverflow.com/questions/1026080/no-route-matches-javascripts-prototype-js-explicitly-define-one http://articles.sitepoint.com/article/painless-javascript-prototype http://alternateidea.com/blog/articles/2005/12/07/prototype-meets-ruby-a-look-at-enumerable-array-and-hash http://en.wikipedia.org/wiki/Prototype_JavaScript_Framework http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks http://blog.creonfx.com/javascript/dojo-vs-jquery-vs-mootools-vs-prototype-performance-comparison