Prototype Js
Download as PPT, PDF0 likes191 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)
Ad
More Related Content
What's hot (20)
Viewers also liked (11)
Ad
Similar to Prototype Js (20)
![[@IndeedEng] Building Indeed Resume Search](https://cdn.slidesharecdn.com/ss_thumbnails/slideshareversion-indeedeng-resumeinstantsearchtalk-130708090246-phpapp02-thumbnail.jpg?width=560&fit=bounds)
Ad
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