Prototype Js

Prototype Js

• 1.
  Prototype JS inRuby On Rails Kıvanç Kantürk
• 2.
  Outline What isPrototype 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 PrototypeJS 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 JSIt 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 BetweenFrameworks
• 6.
  Problems Cross browserissues Chance of name collisions Performance overheads
• 7.
  General Methods Mainmethods – 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’dPrototype 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’dTry.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’dAjax.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 = &quot;Sunucuda bir hata oluştu&quot;;} } </script>
• 12.
  Ruby and PrototypeJS
• 13.
  Ruby and PrototypeJS 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.pdfhttp://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