Javascript, aplicaciones y framewors Tutor: Ing. Juan E. Talavera Horn 2010.

Presentación del tema: "Javascript, aplicaciones y framewors Tutor: Ing. Juan E. Talavera Horn 2010."— Transcripción de la presentación:

1 Javascript, aplicaciones y framewors Tutor: Ing. Juan E. Talavera Horn 2010

2 Contenido  JavaScript Object Notation – JSON  Orientación a objetos - Sintaxis  Name spaces - Concepto  AJAX – Concepto y ejemplos  Revisión de algunos frameworks

3 JavaScript Object Notation - JSON var persona = { nombre: “Juan”, apellido: “Pérez”, nacionalidad: “Paraguaya” };

4 JavaScript Object Notation - JSON JSON (JavaScript Object Notation) is a lightweight data-interchange format. (http://www.json.org)http://www.json.org Basado en un subconjunto del lenguaje JavaScript Es un formato de texto independiente del lenguaje pero con construcciones similares a lenguajes de la familia C. Construido sobre 2 estructuras básicas: 1.Una colección de pares nombre/valor (record, struct, hash, etc.) 2.Una lista ordenada de valores (array, list, sequence, etc.)

5 JavaScript Object Notation - JSON

6 var numeros = [1,2,3,4,5,6]; var nombres = [“Maria”,”Helena”,”Julio”];

7 JavaScript Object Notation - JSON var menu = { id: "file", value: "File", popup: { menuitem: [ {value: "New", onclick: "CreateNewDoc()"}, {value: "Open", onclick: "OpenDoc()"}, {value: "Close", onclick: "CloseDoc()"} ] }

8 Orientación a Objetos - OO - Creación de objeto con new Object() person = new Object() ; person.name = "Tim Scarfe" ; person.height = "6Ft" ; person.run = function() { this.state = "running“; this.speed = "4ms^-1" }; -Creación de objeto con notación literal (literal notation) timObject = { property1 : "Hello", property2 : “Una descripcion cualquiera", property3 : ["mmm", 2, 3, 6, “xyz"], method1 : function(){ alert(“Llamando method 1”) } }; timObject.method1(); alert(timObject.property3[2]) // muestra “3”

9 Orientación a Objetos - OO -Constructor Method function person(name) { this.name = name; this.talk = function() { alert( this.name + " dice holaa!" ) } person1 = new person(“Maria") person1.talk() //Maria dice holaa! person2 = new person(“Julia") person2.talk()//Julia dice holaa!

10 Orientación a Objetos - OO -Prototyping Mecanismo que permite agregar un método a un objeto después que este haya sido definido, e inmediatamente todas las instancias de la misma clase comparten dicho método. person.prototype.changeName = function(name) { this.name = name; } person1 = new person(“Mario") person1.changeName("Bill") person1.talk() //alerts "Bill dice holaa!" Obs: Se pueden agregar métodos a cualquier objeto (incluso los built-in como Array, Date, etc) que se inicialicen con new(). To prototype an object.

11 Orientación a Objetos - OO - Herencia usando Constructor Method function superClass() { this.supertest = superTest; //attach method superTest } function subClass() { this.inheritFrom = superClass; this.inheritFrom(); this.subtest = subTest; //attach method subTest } function superTest() { return "superTest"; } function subTest() { return "subTest"; } var newClass = new subClass(); alert(newClass.subtest()); // muestra "subTest" alert(newClass.supertest()); // muestra "superTest"

12 AJAX (Asynchronous JavaScript + XML) Metodología que permite, una vez cargada y procesada una página, comunicarse mediante eventos y rutinas con el servidor buscando en background los datos. Con los datos traídos en background se pueden actualizar porciones específicas de la página, sin recargar todo el contenido del documento en el navegador.

13 AJAX - Ejemplo de uso (API de ejemplo) function traerNombres() { var callback = {onSuccess: function (resp) { $(‘nombres’).innerHTML = resp.responseText; }, onFailure: function(error) { window.alert(“Ocurrió el error”: error.message); } }; var request = new Ajax.Request(“/traerDatosPersona.php”, { cedula: $(‘cedula’).value }, callback); } Cedula: Nombre: [Ingrese una cédula …]

14 Frameworks JavaScript  Prototype (www.prototypejs.org)www.prototypejs.org  Mootools (www.mootools.net)  JQuery (www.jquery.com)www.jquery.com  YUI: "The Yahoo! User Interface Library" (http://developer.yahoo.com/yui/)http://developer.yahoo.com/yui/  Dojo (http://www.dojotoolkit.org/ )http://www.dojotoolkit.org/  GWT Google Web Toolkit (http://code.google.com/webtoolkit/)http://code.google.com/webtoolkit/  ExtJS (http://www.extjs.com)

15 Ajax con Prototype new Ajax.Request('/some_url', {method:'get', parameters: {company: 'example', limit: 12}, onSuccess: function(transport){ var response = transport.responseText; alert("Success! \n\n" + response); }, onFailure: function(){ alert(‘Hubo algun error...') } });

16 Actualización Parcial con AJAX  Asignar Id a bloque a actualizar  Programar evento con invocación AJAX para actualización  En callback asignar al innerHTML nuevo contenido del bloque a actualizar  En el servidor, programar lógica para proveer contenido en función a los parámetros del AJAX Request.

17 Actualización parcial con Prototype … Lista de productos (Obteniendo lista de productos...) … … new Ajax.Updater('products', '/some_url', { method: 'get' }); …

18 Actualización parcial periodica con Prototype new Ajax.PeriodicalUpdater('products', '/some_url', { method: 'get', frequency: 30 } );

19 AJAX Request con YUI var callback = { success: function(o) {/*success handler code*/}, failure: function(o) {/*failure handler code*/}, argument: [argument1, argument2, argument3] } var cObj = YAHOO.util.Connect.asyncRequest( 'POST', 'http://www.yahoo.com', callback );

20 Namespaces – Espacio de nombres var NtroEspacio = function() { var private_var; function private_method() { // do stuff here } return { method_1 : function() { // do stuff here }, method_2 : function() { // do stuff here } }; }();

21 Namespaces – Espacio de nombres var NtroEspacio = function() { // private functions and properties var _private = { metodoPrivado1 : function(method, url, data) { return “Mensaje 2”; } }; var _public = { metodoPublico1 : function(url) { return “Mensaje 1”; }, metodoPublico2 : function(form) { return _private.metodoPrivado1(); } }; return _public; }();

22 Gracias …