Date post: | 02-Mar-2016 |
Category: |
Documents |
Upload: | oscar-gomez |
View: | 108 times |
Download: | 0 times |
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 1/62
DOM y AJAX con jQuery + Rails
Ingeniería de Sistemas deInformación
Grado en Ingeniería en Tecnologías deTelecomunicación
GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 2/62
• ©2012 Departamento GSyC, URJC
– Algunos derechos reservados. Este trabajo se
distribuye bajo la licencia Creative CommonsAttribution-NonCommercial-ShareAlike 3.0
Unported License
– ©2012 Armando Armando Fox & DavidPatterson
• Licensed under Creative Commons Attribution-
NonCommercial-ShareAlike 3.0 Unported License
2 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 3/62
Contenidos
• Introducción
• El Document Object Model (DOM)
• Registro de manejadores de eventos sobre
elementos del DOM • AJAX
• Otros usos de JavaScript
• Precauciones
3 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 4/62
Consejos para aprender
• Asegúrate de tener la barra de herramientas de Firefox instalada (WebDeveloper Extension)
• Durante tu aprendizaje de JavaScript ten siempre a mano una consola
en tu browser para poder probar código
– En Firefox instala firebug: http://getfirebug.com
– En Safari o en Chrome, busca el menú de desarrollador y allí arranca laconsola de JavaScript
• Para depurar:
– console.log("hola mundo")
– alert("hola")
– Depurador de firebug
• Extensión de Firefox tilt para ver DOM en 3D: disponible en las últimasversiones de Firefox en el menú Tools->Web Developer
• Y para trastear con JavaScript + HTML + CSS:
– http://jsfiddle.net
4 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 5/62
Introducción
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 6/62
Usos de JavaScript1. Client-side JavaScript :
– Código JavaScript que corre en el browser, asociado a la página Web
– Se usa JavaScript para mejorar la experiencia de usuario de aplicaciones SaaSque siguen el patrón arquitectónico MVC
– Se combina JavaScript con HTML y CSS
– Es importante que no se mezcle JavaScript con el código HTML
– Es importante que el servicio esté disponible para cliente no-JavaScript
2. Aplicaciones tipo desktop en el lado del cliente, como Google Docs – Pueden operar offline – El código JavaScript en el browser usa un servidor delgado, sólo para almacenar
en la BD, recibiendo objetos JSON que convierte en HTML (en el browser)
– Se programan normalmente con frameworks, como Ember.js, Backbone.js oAngular de Google que soporta el patrón MVC
3. Aplicaciones SaaS pero con JavaScript en el servidor
– Frameworks como node.js y extensiones: meteor, express
6 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 7/62
Client-side JavaScript
• En este tema no se abordan las aplicaciones tipo desktopprogramadas en JavaScript ni JavaScript en el servidor ni JavaScript
en los móviles
• Aprenderemos cómo usar JavaScript en el browser para mejorar la
interactividad con la interfaz
• Aprenderemos cómo usar jQuery como framework para consultar y
modificar los elementos del documento HTML cargado en el browser
• Aprenderemos a usar AJAX para que el código JavaScript cargado enuna página realice RPCs a las acciones de controladores Rails
– Las acciones Rails devolverán vistas parciales que el código JavaScript que correen el browser usará para modificar el documento HTML desde el que se hizo la
RPC
• Como ejemplos prácticos aprenderemos: – a ocultar películas no aptas para menores modificando sin intervención del servidor
– a mostrar una ventana flotante con la información de una película que ha sidoobtenido con AJAX
7 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 8/62
La posición privilegiada de
JavaScript
• JavaScript es un lenguaje más
• Pero al correr en el browser el códigoJavaScript puede:
1.
Ser ejecutado como consecuencia de la interacción delusuario con la interfaz gráfica de la página: click de
ratón, ratón pasando por encima, pulsar tecla,…
2. Realizar peticiones HTTP al servidor sin necesidad de
tener que recargar toda una página
3. Ser ejecutado cuando el servidor envíe una respuestaHTTP a una petición
4. Consultar y modificar el documento cargado,redibujándolo si hay cambios
8 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 9/62
¿Dónde poner el código
JavaScript? –
Las páginas que quieren usar funciones o variablesJavaScript tienen que incluir el código JavaScript
– Formas NO recomendadas: mezclado en el bodyhttp://pastebin.com/sTM4Z8wS
9 ©GSyC
<html><head><title>Update Address</title></head><body>
<!-- BAD: embedding scripts directly in page, esp. in body --><script><!-- // BAD: "hide" script body in HTML comment
// (modern browsers may not see script at all)function checkValid() { // BAD: checkValid is global
if !(fieldsValid(getElementById('addr'))) {// BAD: > and < may confuse browser's HTML parseralert('>>> Please fix errors & resubmit. <<<');
}// BAD: "hide" end of HTML comment (l.3) in JS comment: -->
</script>
<!-- BAD: using HTML attributes for JS event handlers --><form onsubmit="return checkValid()" id="addr" action="/update"><input onchange="RP.filter_adult" type="checkbox"/><!-- BAD: URL using 'javascript:' -->
<a href="javascript:back()">Go Back</a></form>
</body></html>
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 10/62
¿Dónde poner el código
JavaScript? – La forma recomendada es guardar el código en fichero aparte y utilizar la
etiqueta HTML <script src="url"> para incluirlo en la sección HEAD deldocumento, no poniendo código mezclado en el body
• Misma justificación que para sacar el estilo a ficheros .css
• Helper Rails que genera la etiqueta: javascript_include_tag 'fichero_javascript'
– Los elementos HTML que vayan a iteraccionar con JavaScript:
• O bien se añaden al DOM en una función JavaScript setup()• O bien están siempre, pero invisibles, usando CSS para que tengan el atributohidden, y luego en una función JavaScript setup() al cargar la página se cambiasu estilo para que aparezcan
• De cualquiera de las dos formas, si el browser no tiene JavaScript activado nomostrará los elementos HTML que requieren JavaScript, lo que es bueno
– En Rails:
1. El código JavaScript que escribamos para nuestra aplicación se pone en ficheros conextensión .js en el directorio app/assets/javascripts
2. El helper de Rails javascript_include_tag 'application' puede incluirse en cualquier template, p.ej.en app/views/layouts/application.html.haml
– Este fichero JavaScript produce el efecto de que al desplegar en producción la aplicación, Rails concatenará ycomprimirá (minifying) todos los .js del directorio app/assets/javascripts junto a la biblioteca jQuery, y pondráun fichero único para toda la aplicación en el dir public
10 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 11/62
El Document Object Model
(DOM)
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 12/62
DOM – DOM: Document Object Model
– World Wide Web Consortium Document Object Model:• "a platform and language-neutral interface that will allow
programs and scripts to dynamically access and update thecontent, structure and style of documents"
– O sea: una representación estandarizada, en forma de
árbol, de los elementos de un documento HTML, XML oXHTML
– Coloquialmente hablamos del DOM de una página
– Cada elemento DOM se define recursivamente puesuna de sus propiedades es un array de elementos hijo
• Por tanto, el nodo DOM que representa el elemento <html> incluyetodo el documento, con nodos hijos para <head> y <body>, y <body>tiene nodos hijos <h1>, <div>, …
• Cada elemento puede tener atributos: <img src=…>, <a href=…>,<div class=…>, <span id=…>,…
12 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 13/62
DOM
13 ©GSyC
• Inspección del DOM en
Firefox:
– Arrancando firebug, o
– Menú Herramientas->Desarrollador Web ->Inspeccionar ,
• y abajo a la derecha,Vista 3D
• Si no lo ves, instala un
Firefox más reciente, oinstala la extensión tilt
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 14/62
Acceso al DOM desde
JavaScript –
Llamando a funciones JavaScript del objeto global(window) se puede recorrer y consultar el árbol DOM
de la página actual
– Llamando a funciones JavaScript se pueden añadir/ eliminar elementos al árbol DOM, modificar su
contenido y modificar/eliminar/añadir atributos (p.ej. ido class) de elementos, lo que provoca que se redibujela parte afectada de la página
– Cuando el browser carga una página, el HTML de la
página se parsea para generar su árbol DOM
– En un browser, el objeto global JavaScript está accesible enla variable global window
– En window.document está la raíz del árbol DOM de lapágina que está mostrando el browser, cambiando cada vez
que carga una nueva. 14 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 15/62
JSAPI
– El objeto window ofrece algo más que el DOM
– Ofrece propiedades y funciones para manipular el DOM y otras
específicas del browser, con el nombre de API JSAPI
• location, document, document.head, document.body,document.write(string ), alert(string ), confirm(string ),…
• Ejemplo: prueba a asignar una url a window.location en la consola
– Las implementaciones de JavaScript son bastante similares en los
diferentes browsers
– Sin embargo, la API JSAPI no es tan uniforme entre browsers – Existen varias bibliotecas que recubren JSAPI para homogeneizar:
YUI, Prototype, DoJo. La más usada: jQuery
15 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 16/62
jQuery
– jQuery es una API que recubre JSAPI,proporcionando uniformidad entre browsers
• Usaremos jQuery y no JSAPI
– jQuery extiende JSAPI con animaciones,
soporte para CSS, eventos y AJAX
– jQuery define una función global: jQuery()
• $() es un alias de jQuery()
16 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 17/62
Función global jQuery(),$()– jQuery / $() es una función sobregarcada
(overloaded ). Dependiendo de los argumentos que se lepasan hace una cosa u otra
1. Pasándole un selector de CSS (un string) :
– Devuelve los elementos del DOM correspondientes al selector CSS que sepasa como argumento, o null si no hay ninguno
– Si se le pasa en un 2º argumento un elemento, sólo devuelve losdescendientes de éste
– Si devuelve varios elementos, se itera luego sobre ellos con .each paraacceder a cada elemento de la colección devuelta
2. Pasándole HTML (un string): – Crea el elemento correspondiente al argumento (que ha de tener
etiquetas HTML para no confundirse con un selector CSS del casoanterior) y lo devuelve recubierto/envuelto en un objeto jQuery, pero no lo
inserta en el DOM (hay funciones para hacerlo) 3. Pasándole un/unos elemento JSAPI del DOM (ej. document o window):
– Devuelve un objeto jQuery que recubre el elemento del argumento
4. Pasándole una función como argumento – Ejecuta la función una vez se ha cargado todo documento y el DOM está
preparado para ser manipulado. Equivalente a $(document).ready(f) 17 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 18/62
Selección de elementos con
$('selector-CSS ')
Ejemplos de selectores CSS: selector qué seleccionah1 cualquier elemento h1
div#message *el* elemento div cuyo ID es message
.red cualquier elemento de clase red
div.red, h1 los elementos div de clase red o cualquier h1
div#message h1 los elementos h1 dentro de los div de clase messagea.lnk elementos de clase lnk
a.lnk:hover elementos a con clase lnk, cuando se pasa por
encima de ellos (hover )
http://www.w3.org/TR/selectors/#selectors
Ejemplos de llamadas a $('selector-CSS'):
jQuery('#movies')
$('#movies')
$('h1.title')
18 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 19/62
Propiedades y funciones de
elementos DOM recubiertos
por jQuery()/$() – Hay 3 tipos de acciones que se pueden realizar sobre
un elemento o un conjunto de elementos devueltos por
jQuery('selector-CSS ')/$('selector-CSS'):
1. Cambiar su aspecto visual modificando la clase CSS del/de
los elementos
2. Cambiar su contenido modificando el html del/de los
elementos o el texto plano del elemento
3. Animar el/los elementos (mostrar/ocultar, desvanecerse/
reaparecer, …)
– Consulta http://api.jquery.com/
– A continuación presentamos algunas funciones
19 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 20/62
Funciones para elementos
seleccionados por jQuery()Notación e.func(args) es una función que se aplica a un elemento e devuelto por jQuery().
Ej: $('h1.title').func(args). Si no se indica otra cosa, devuelve el elemento tras
aplicársele la función, por lo que se pueden llamar en cascada
– .is(’:cond') Comprueba si el elemento está ':checked', ':selected', ':enabled',
':disabled'
– .addClass('cssClass'), .removeClass('cssClass'), .hasClass()
– .insertBefore(elem ), .insertAfter(elem ), .remove(),
.replaceWith(elem ), .appendTo(elem )
– .clone() Devuelve copia recursiva de los descencientes
– .html(['htmlString']) Devuelve (o pone si hay argumento) el html
– .text([’texto']) Devuelve (o pone si hay argumento) el texto sin etiquetas html
(p.ej. a un <h1> texto </h1>
– .val([val]) Devuelve o pone el valor del elemento: para textboxes el contenido, para
botones la etiqueta, para menús el texto de la opción seleccionada
– .attr('attr' [,nuevoValor]). Ej: $('img').attr('src'), 'http://google.com') – .find('selector-CSS') Devuelve elementos hijos seleccionados por selector-CSS. Ej:
$('#movies tr') == $('#movies').find('tr')
20 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 21/62
Funciones para elementos
seleccionados por jQuery()
– .css('propiedad') Devuelve propiedad CSS del elemento
– .css({'propiedad':'valor',…}) Pone propiedades CSS al elemento
Animaciones:
– .hide([duracion][,callback]), .show([duracion][,callback])Muestra/oculta el elemento, tardando duracion ('fast', 'slow' o
milisegundos), y cuando termina llama a callback
– .slideUp([duracion][,callback]), Desaparece como persiana
.slideDown([duracion][,callback]),
.slideToggle([duracion][,callback])
–
.fadeOut([duracion][,callback]),Desaparece haciendo transparente
.fadeIn([duracion][,callback])
– .fadeTo(duracion, target, callback )Target es un valor de transparencia entre 0.0 y 1.0
21 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 22/62
Ejemplos – Carga la página de rottenpotatoes en Firefox
– Activa firebug. Si no lo tienes aún instlado, hazlo: https:// www.getfirebug.com/
– Selecciona el menú Scripts de Firebug
– Selecciona el enlace Reload to see all sources
– Prueba ahora en la consola de Firebug las siguientes llamadas:
22
this==window;this.document;this.document.getElementById('movies'); // Ejemplo de uso de API JSAPI$('#movies'); // Selecciona toda la tabla con id CSS #movies usando jQueryjQuery('tr'); // Selecciona todas las filas (<tr>) del documento$('tr').hide() // En cada tr pone: <tr style="display: none;">. Puedes verlo en el menú
// Herramientas->Web Developer Extension->View Source->View Generated Source $('tr').show() // Cambia de nuevo el style para que aparezcan pintadash=$('h1.title') // Selecciona el elemento <h1> de clase CSS .title
h.slideUp('slow') // Y ahora lo anima ocultándolo lentamenteh.slideDown('slow') // Y ahora lo anima haciéndolo aparecer lentamenteh.slideToggle(2500) // Si estaba oculto lo hace aparecer, y viceversatheaders=$('#movies th') // los <th> dentro del elemento con id #moviestheaders.fadeTo(2000, 0.25) // los vuelve transparentes$('tr').fadeTo(2000,0.25) // y lo mismo con todos los <tr>
©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 23/62
Registro de manejadores de
eventos sobre elementos del
DOM
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 24/62
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 25/62
Registro de manejadores para
eventos con jQueryCómo registrar eventos – elemento.tipo-evento (func([event]){…})
Asocia a elemento func como un manejador/callback para tipo-evento. Cuandoocurra tipo-evento sobre elemento, el browser llamará a func(event) pasandoen event el evento
Tipos de Eventos
– Tipos de eventos aplicables a cualquier elemento:
o click, dblclick, mousedown/mouseup, mouseenter/mouseleave
o keypress (event.which devuelve el código ASCII dentro del manejador)
o focus/blur (el elemento obtiene/pierde el foco)
o focusin/focusout (el padre del elemento obtiene/pierde el foco)
– Eventos aplicables a elementos accionables por el usuario (forms,
checkboxes, radio buttons, text box, text field, menús):
o change
o select (event.which devuelve el texto seleccionado dentro del manejador)
o submit (disparado cuando se envía un formulario)
25
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 26/62
Ejecución de callbacks
– El browser llama a un manejador de eventos/ callback cuando se produce el evento sobre el
elemento con el que se asoció el manejador
– Si hay registrado un manejador para el
elemento, o para alguno de sus elementosancestros, se ejecutan en cadena antes del
comportamiento predefinido (si existe): • La cadena comienza en el elemento en el que se produce el
evento y termina en el objeto global (window)
• Si un manejador devuelve true, se ejecuta el siguiente en lacadena
• Si el manejador devuelve false, se interrumpe la ejecución en
cadena, y la del comportamiento predefinido, que es el último
26 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 27/62
Ejemplo – A continuación añadimos a la página principal de
rottenpotatoes un botón para seleccionar películas aptas
para menores, sin interacción con el servidor
27 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 28/62
Ejemplo – A continuación añadimos a la página principal de
rottenpotatoes un botón para seleccionar películas aptas
para menores, sin interacción con el servidorapp/assets/javascripts/rp.js
28 ©GSyC
RP = {setup: function() {
// construct new DOM elements$('<label for="filter" class="explanation">' +
'Restrict to movies suitable for children' +'</label>' +'<input type="checkbox" id="filter"/>'
).insertBefore('#movies').change(RP.filter_adult);},
filter_adult: function () {// 'this' is JSAPI element that received event (checkbox)if ($(this).is(':checked')) {
$('#movies tbody tr').each(RP.hide_if_adult_row);} else {
$('#movies tbody tr').show();};
},
hide_if_adult_row: function() {if (! /^G|PG$/i.test($(this).find('td:nth-child(2)').text())) {
$(this).hide();}
}
}$(RP.setup); // when document ready, run setup code
http://pastebin.com/85fZTe4J
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 29/62
Ejemplo – A continuación añadimos a la página principal de
rottenpotatoes un botón para seleccionar películas aptas
para menores, sin interacción con el servidorapp/assets/javascripts/rp.js
29 ©GSyC
RP = {setup: function() {
// construct new DOM elements$('<label for="filter" class="explanation">' +
'Restrict to movies suitable for children' +'</label>' +'<input type="checkbox" id="filter"/>'
).insertBefore('#movies').change(RP.filter_adult);},
filter_adult: function () {// 'this' is JSAPI element that received event (checkbox)if ($(this).is(':checked')) {
$('#movies tbody tr').each(RP.hide_if_adult_row);} else {
$('#movies tbody tr').show();};
},
hide_if_adult_row: function() {if (! /^G|PG$/i.test($(this).find('td:nth-child(2)').text())) {
$(this).hide();}
}
}$(RP.setup); // when document ready, run setup code
Al cargar la página, y
por tanto este fichero,pedimos que seejecute RP.setupuna vez esté todo elDOM generado
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 30/62
Ejemplo – A continuación añadimos a la página principal de
rottenpotatoes un botón para seleccionar películas aptas
para menores, sin interacción con el servidorapp/assets/javascripts/rp.js
30 ©GSyC
RP = {setup: function() {
// construct new DOM elements$('<label for="filter" class="explanation">' +
'Restrict to movies suitable for children' +'</label>' +'<input type="checkbox" id="filter"/>'
).insertBefore('#movies').change(RP.filter_adult);},
filter_adult: function () {// 'this' is JSAPI element that received event (checkbox)if ($(this).is(':checked')) {
$('#movies tbody tr').each(RP.hide_if_adult_row);} else {
$('#movies tbody tr').show();};
},
hide_if_adult_row: function() {if (! /^G|PG$/i.test($(this).find('td:nth-child(2)').text())) {
$(this).hide();}
}
}$(RP.setup); // when document ready, run setup code
Inserta el código HTMLque interaccionará conJavaScript
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 31/62
Ejemplo – A continuación añadimos a la página principal de
rottenpotatoes un botón para seleccionar películas aptas
para menores, sin interacción con el servidorapp/assets/javascripts/rp.js
31 ©GSyC
RP = {setup: function() {
// construct new DOM elements$('<label for="filter" class="explanation">' +
'Restrict to movies suitable for children' +'</label>' +'<input type="checkbox" id="filter"/>'
).insertBefore('#movies').change(RP.filter_adult);},
filter_adult: function () {// 'this' is JSAPI element that received event (checkbox)if ($(this).is(':checked')) {
$('#movies tbody tr').each(RP.hide_if_adult_row);} else {
$('#movies tbody tr').show();};
},
hide_if_adult_row: function() {if (! /^G|PG$/i.test($(this).find('td:nth-child(2)').text())) {
$(this).hide();}
}
}$(RP.setup); // when document ready, run setup code
Registra callback para elevento change dela checkbox. Mejor change
que click: change se activatambién cuando se seleccionapor teclado la checkbox.
En la callback
this es la checkbox JSAPI,que envolvemos con $(this)
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 32/62
Ejemplo – A continuación añadimos a la página principal de
rottenpotatoes un botón para seleccionar películas aptas
para menores, sin interacción con el servidorapp/assets/javascripts/rp.js
32 ©GSyC
RP = {setup: function() {
// construct new DOM elements$('<label for="filter" class="explanation">' +
'Restrict to movies suitable for children' +'</label>' +'<input type="checkbox" id="filter"/>'
).insertBefore('#movies').change(RP.filter_adult);},
filter_adult: function () {// 'this' is JSAPI element that received event (checkbox)if ($(this).is(':checked')) {
$('#movies tbody tr').each(RP.hide_if_adult_row);} else {
$('#movies tbody tr').show();};
},
hide_if_adult_row: function() {if (! /^G|PG$/i.test($(this).find('td:nth-child(2)').text())) {
$(this).hide();}
}
}$(RP.setup); // when document ready, run setup code
Itera sobre cada tr, y lopasa como this a la funcióndel argumento
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 33/62
Ejemplo – A continuación añadimos a la página principal de
rottenpotatoes un botón para seleccionar películas aptas
para menores, sin interacción con el servidorapp/assets/javascripts/rp.js
33 ©GSyC
RP = {setup: function() {
// construct new DOM elements$('<label for="filter" class="explanation">' +
'Restrict to movies suitable for children' +'</label>' +'<input type="checkbox" id="filter"/>'
).insertBefore('#movies').change(RP.filter_adult);},
filter_adult: function () {// 'this' is JSAPI element that received event (checkbox)if ($(this).is(':checked')) {
$('#movies tbody tr').each(RP.hide_if_adult_row);} else {
$('#movies tbody tr').show();};
},
hide_if_adult_row: function() {if (! /^G|PG$/i.test($(this).find('td:nth-child(2)').text())) {
$(this).hide();}
}
}$(RP.setup); // when document ready, run setup code
Muestra todos los tr
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 34/62
Ejemplo – A continuación añadimos a la página principal de
rottenpotatoes un botón para seleccionar películas aptas
para menores, sin interacción con el servidorapp/assets/javascripts/rp.js
34 ©GSyC
RP = {setup: function() {
// construct new DOM elements$('<label for="filter" class="explanation">' +
'Restrict to movies suitable for children' +'</label>' +'<input type="checkbox" id="filter"/>'
).insertBefore('#movies').change(RP.filter_adult);},
filter_adult: function () {// 'this' is JSAPI element that received event (checkbox)if ($(this).is(':checked')) {
$('#movies tbody tr').each(RP.hide_if_adult_row);} else {
$('#movies tbody tr').show();};
},
hide_if_adult_row: function() {if (! /^G|PG$/i.test($(this).find('td:nth-child(2)').text())) {
$(this).hide();}
}
}$(RP.setup); // when document ready, run setup code
2º td del tr pasado en this
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 35/62
Comentarios sobre el Ejemplo – La checkbox se añade desde la función setup(), y ésta
sólo se ejecuta si el browser tiene JavaScript
• Si la hubiéramos puesto en el HTML, los browsers sin JavaScript lamostrarían pero no podrían interactuar con ella
– Sólo se ha añadido un objeto al ámbito global, RP, que
define su propio ámbito. Por eso todas las funciones setienen que llamar por su nombre: RP.fname
– Implementación alternativa menos intrusiva de laocultación de pelis para mayores: • Si en el servidor marcamos las filas de películas para adultos:
%tr{:class => ('adult' unless movie.rating =~ /^G|PG$/)}
• Entonces podríamos eliminar RP.hide_if_adult_row()
• Y substituir $('#movies tbody tr').each(RP.hide_if_adult_row);
por $('#movies tr.adult').hide();• De esta forma el código JavaScript no se apoya en detalles de la
presentación (Dependemos de que la calificación esté en la 2ª columna
de la tabla)
35 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 36/62
Eventos definidos y disparados
por el usuario – Se pueden definir nuevos eventos utilizando esta otra
forma de registrar callbacks para un evento:
elemento.bind('nuevo-evento', func(event){…})
– Y luego se puede llamar a estos eventos explícitamente
con trigger
– Ejemplo que puedes probar en firebug, en la página derottenpotatoes p.ej.:
$('#movies').bind('miEvento',
function(event, param1, param2){
alert(param1 + "\n" + param2);});
$('#movies').trigger('miEvento',['Custom', 'Event']);
36 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 37/62
AJAX
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 38/62
Introducción
• En 1998 Microsoft añade el objetoXmlHttpRequest o xhr a su navegador
Internet Explorer 5 (IE5)
• En 2005 Google Maps es una de lasprimeras aplicaciones que demuestra la
potencia de AJAX
38 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 39/62
Objeto XmlHttpRequest(xhr)
– El objeto JavaScript XmlHttpRequest, o xhr, que proporcionanmuchos browsers permite realizar RPCs asíncronas: la llamada
retorna antes de obtenerse la respuesta del servidor
– Envía un mensaje de petición HTTP desde JavaScript sin que sea
necesario redibujar toda una página al obtener el mensaje derespuesta
• Genera un mensaje de petición HTTP normal, al que le añade la cabeceraX-Requested-With: XMLHttpRequest
– Cuando llega la respuesta se llama a una callback que utiliza la
respuesta obtenida (p.ej. una vista parcial HTML, o XML, o JSON,
texto, o nada) para modificar el DOM de la misma página desde laque se hace la petición
– Al no recargar toda la página se tarda menos en mostrar larespuesta y la interfaz ofrece una interacción más dinámica
– En jQuery se utiliza $.ajax para usar el objeto xhr
39
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 40/62
Programación basada en
eventos, también para xhr –
La programación en JavaScript para interactuar con la interfaz gráfica esbasada en eventos (event driven): registras callback asociada a un objeto ya un evento, que es llamada por el runtime
– JavaScript tiene un único thread que va ejecutando los manejadoresregistrados según van ocurriendo los eventos que los disparan
• Pseudocódigo del runtime de JavaScript:
while (true) {
var event = waitForEvent();event.callback();
redrawDOM();
} – Por tanto, la llamada para realizar la petición xhr no puede ser bloqueante y
quedarse esperando a recibir la respuesta: de hacerlo, bloquearía el bucle deejecución de callbacks, congelando la interacción con la interfaz
– Por ello la RPC que generamos con xhr retorna inmediatamente, antes deobtener la respuesta
• Se le pasa una función como callback que es llamada por el browser cuando llega la respuesta
• La callback puede reemplazar, cambiar, animar,… ya que re se redibuja el DOM en función de
los cambios de las callbacks que se van llamando 40 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 41/62
xhr en jQuery: $.ajax
• Con $.ajax realiza en jQuery una llamada XHR
• Es no bloqueante: retorna inmediatamente, y después, cuando
llegue la respuesta HTTP al browser, el runtime de JavaScriptllama a la callback registrada
• Ejemplo:
41 ©GSyC
$.ajax({type : 'GET', // método HTTPurl : 'http://…',timeout: milisegundos, // si tarda más se llama a errorsuccess: fn_success, // función a la que llamar cuando
// llegue la respuestaerror : fn_error // función a la que
// llamar si hay errores, p.ej.// timeout, servidor no arrancado…
});
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 42/62
Ejemplo de uso de $.ajax()
– Vamos a modificar rottenpotatoes para que los detalles de una
película se pidan a nuestro servidor Rails desde JavaScript,usando AJAX, y se muestren en una ventana flotante, sin
abandonar la página index
42 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 43/62
Ejemplo de uso de $.ajax()
– Vamos a modificar rottenpotatoes para que los detalles de una
película se pidan a nuestro servidor Rails desde JavaScript,usando AJAX, y se muestren en una ventana flotante, sin
abandonar la página index
– Desde una función JavaScript se usará xhr para realizar una
petición HTTP a la URL de la acción MoviesController#show
• Podríamos crear otra acción pero reaprovecharemos ésta acción del
controlador – Esta acción devolverá una vista parcial cuando detecte que la
petición se hace usando xhr, o la vista normal en caso contrario
– Añadiremos un manejador de eventos a los enlaces que hay
ahora en la página index para ver más detalles de cada
película, y desde el manejador realizaremos la llamada xhr
– Añadiremos un nuevo div a la página index para rellenarlocon los datos devueltos por la llamada xhr y le pondremos
propiedades CSS que hagan que aparezca en el centro de la
pantalla, "flotando"
43 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 44/62
Ejemplo de uso de $.ajax()
– Vista parcial app/movies/_movie.html.haml que
devolverá la acción MoviesController#show cuandosea llamada usando xhr
– Acción del controlador
44 ©GSyC
%p= movie.description
= link_to 'Edit Movie', edit_movie_path(movie)= link_to 'Close', '', {:id => 'closeLink'}
class MoviesController < ApplicationController…
def showid = params[:id] # retrieve movie ID from URI route
@movie = Movie.find(id) # look up movie by unique ID
render :partial => 'movie', :object => @movie and return if request.xhr?# will render app/views/movies/show.<extension> by default
end…
end
http://pastebin.com/dW04wY9F
http://pastebin.com/CxxPBQpy
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 45/62
Ejemplo de uso de $.ajax()
– Vista parcial app/movies/_movie.html.haml que
devolverá la acción MoviesController#show cuandosea llamada usando xhr
– Acción del controlador
45 ©GSyC
%p= movie.description
= link_to 'Edit Movie', edit_movie_path(movie)= link_to 'Close', '', {:id => 'closeLink'}
class MoviesController < ApplicationController…
def showid = params[:id] # retrieve movie ID from URI route
@movie = Movie.find(id) # look up movie by unique ID
render :partial => 'movie', :object => @movie and return if request.xhr?# will render app/views/movies/show.<extension> by default
end…
end
El método xhr? del objeto request delcontrolador devuelve true si en elmensaje de petición HTTP se haincluído la cabeceraX-Requested-With: XMLHttpRequest
$ j ()
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 46/62
Ejemplo de uso de $.ajax()
– Vista parcial app/movies/_movie.html.haml que
devolverá la acción MoviesController#show cuandosea llamada usando xhr
– Acción del controlador
46 ©GSyC
%p= movie.description
= link_to 'Edit Movie', edit_movie_path(movie)= link_to 'Close', '', {:id => 'closeLink'}
class MoviesController < ApplicationController…
def showid = params[:id] # retrieve movie ID from URI route
@movie = Movie.find(id) # look up movie by unique ID
render :partial => 'movie', :object => @movie and return if request.xhr?# will render app/views/movies/show.<extension> by default
end…
end
Alternativas que podría esperar el cliente JavaScript: render :json => @movies and return if request.xhr // Llama a @movies.to_json
render :xml => @movies and return if request.xhr // Llama a @movies.to_xml
render :text => @movie.title and return if request.xhr
render :nothing => true and return if request.xhr
$ j ()
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 47/62
Ejemplo de uso de $.ajax()
– Vista parcial app/movies/_movie.html.haml que
devolverá la acción MoviesController#show cuandosea llamada usando xhr
– Acción del controlador
47 ©GSyC
%p= movie.description
= link_to 'Edit Movie', edit_movie_path(movie)= link_to 'Close', '', {:id => 'closeLink'}
class MoviesController < ApplicationController…
def showid = params[:id] # retrieve movie ID from URI route
@movie = Movie.find(id) # look up movie by unique ID
render :partial => 'movie', :object => @movie and return if request.xhr?# will render app/views/movies/show.<extension> by default
end…
endSi no es una petición xhr se sirve la vista normal
$ j ()
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 48/62
Ejemplo de uso de $.ajax() – Nuevo fichero JavaScript app/assets/javascripts/rpajax.js
48
RPAjax = {setup: function() {
// add invisible 'div' to end of page:
$('<div id="movieInfo"></div>').hide().appendTo($('body'));
$('#movies a').click(RPAjax.getMovieInfo);},
getMovieInfo: function() {$.ajax({type: 'GET',
url: $(this).attr('href'),timeout: 5000,success: RPAjax.showMovieInfo,
error: function() { alert('Error!'); }
});return(false);
},showMovieInfo: function(data) {
// center a floater 1/2 as wide and 1/4 as tall as screenvar oneFourth = Math.ceil($(window).width() / 4);$('#movieInfo').
html(data).css({'left': oneFourth, 'width': 2*oneFourth, 'top': 150}).
show();// make the Close link in the hidden element work
$('#closeLink').click(RPAjax.hideMovieInfo);return(false);},
hideMovieInfo: function() {$('#movieInfo').hide();return(false);
},}
$(RPAjax.setup);http://pastebin.com/yhmPC4Ki
Ej l d d $ j ()
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 49/62
Ejemplo de uso de $.ajax() – Nuevo fichero JavaScript app/assets/javascripts/rpajax.js
49
RPAjax = {setup: function() {
// add invisible 'div' to end of page:
$('<div id="movieInfo"></div>').hide().appendTo($('body'));
$('#movies a').click(RPAjax.getMovieInfo);},
getMovieInfo: function() {$.ajax({type: 'GET',
url: $(this).attr('href'),timeout: 5000,success: RPAjax.showMovieInfo,
error: function() { alert('Error!'); }
});return(false);
},showMovieInfo: function(data) {
// center a floater 1/2 as wide and 1/4 as tall as screenvar oneFourth = Math.ceil($(window).width() / 4);$('#movieInfo').
html(data).css({'left': oneFourth, 'width': 2*oneFourth, 'top': 150}).
show();// make the Close link in the hidden element work
$('#closeLink').click(RPAjax.hideMovieInfo);return(false);},
hideMovieInfo: function() {$('#movieInfo').hide();return(false);
},}
$(RPAjax.setup);
Asociamos callback paracuando se haga click en cada uno de los elementos<a> de la tabla #movies
Añadimos nuevo <div>al final de la página, con idpara poderle poner CSS
Ej l d d $ j ()
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 50/62
Ejemplo de uso de $.ajax() – Nuevo fichero JavaScript app/assets/javascripts/rpajax.js
50
RPAjax = {setup: function() {
// add invisible 'div' to end of page:
$('<div id="movieInfo"></div>').hide().appendTo($('body'));
$('#movies a').click(RPAjax.getMovieInfo);},
getMovieInfo: function() {$.ajax({type: 'GET',
url: $(this).attr('href'),timeout: 5000,success: RPAjax.showMovieInfo,
error: function() { alert('Error!'); }
});return(false);
},showMovieInfo: function(data) {
// center a floater 1/2 as wide and 1/4 as tall as screenvar oneFourth = Math.ceil($(window).width() / 4);$('#movieInfo').
html(data).css({'left': oneFourth, 'width': 2*oneFourth, 'top': 150}).
show();// make the Close link in the hidden element work
$('#closeLink').click(RPAjax.hideMovieInfo);return(false);},
hideMovieInfo: function() {$('#movieInfo').hide();return(false);
},}
$(RPAjax.setup);
La url la sacamos del actual enlaceen el HTML: <a href="url">
this es el elemento sobre elque se ha disparado el evento: un'#movies a' == <a href="url">
Paramos la cadena de ejecución de callbacks: no queremos quese ejecute la acción por defectodel link: pedir la url (¡otra vez!)
Ej l d d $ j ()
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 51/62
Ejemplo de uso de $.ajax() – Nuevo fichero JavaScript app/assets/javascripts/rpajax.js
51
RPAjax = {setup: function() {
// add invisible 'div' to end of page:
$('<div id="movieInfo"></div>').hide().appendTo($('body'));
$('#movies a').click(RPAjax.getMovieInfo);},
getMovieInfo: function() {$.ajax({type: 'GET',
url: $(this).attr('href'),timeout: 5000,success: RPAjax.showMovieInfo,
error: function() { alert('Error!'); }
});return(false);
},showMovieInfo: function(data) {
// center a floater 1/2 as wide and 1/4 as tall as screenvar oneFourth = Math.ceil($(window).width() / 4);$('#movieInfo').
html(data).css({'left': oneFourth, 'width': 2*oneFourth, 'top': 150}).
show();// make the Close link in the hidden element work
$('#closeLink').click(RPAjax.hideMovieInfo);return(false);},
hideMovieInfo: function() {$('#movieInfo').hide();return(false);
},}
$(RPAjax.setup);
Ponemos el HTML en el<div id="movieInfo">
HTML devuelto en la vistaparcial _movie.html.haml
Modificamos sus propiedades CSSdándole dimensiones relativas
al tamaño de la ventana, y mostramosel <div id="movieInfo">
Asociamos callback al enlace close de la ventana
Ej l d d $ j ()
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 52/62
Ejemplo de uso de $.ajax()
– El resultado
– Añadimos coordenadas absolutas, color, borde,…:
– Y el resultadomejora visualmente
(ahora parece flotante):
52 ©GSyC
#movieInfo {padding: 2ex;position: absolute;border: 2px double grey;background: wheat;
}
app/assets/stylesheets/app
http://pastebin.com/0WdxM2vp
D ió d li i
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 53/62
Depuración de aplicaciones #
AJAX/Rails
–
Puedes arrancar firebug y poner puntosde parada (breakpoints ) en el código
JavaScript • click en el número de línea en la que quieras poner/
quitar un breakpoint – Y en el depurador de rails puedes poner
puntos de parada en el código Rails.• Recuerda: 1. Arrancar rails server –debug
2. Insertar llamada a debugger en la línea en la que quierasinterrumpir la ejecución
53 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 54/62
Otros usos de JavaScript
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 55/62
Usos de JavaScript
1.
Client-side JavaScript : – Código JavaScript que corre en el browser, asociado a la página Web
– Se usa JavaScript para mejorar la experiencia de usuario de aplicaciones SaaSque siguen el patrón arquitectónico MVC
– Se combina JavaScrpt con HTML y CSS
– Es importante que no se mezcle JavaScript con el código HTML
– Es importante que el servicio esté disponible para cliente no-JavaScript
2. Aplicaciones tipo desktop en el lado del cliente, como Google Docs
– Pueden operar offline – El código JavaScript en el browser usa un servidor delgado, sólo para almacenar
en la BD, recibiendo objetos JSON que convierte en HTML (en el browser)
– Se programan normalmente con frameworks, como Ember.js, Backbone.js oAngular de Google que soporta el patrón MVC
3. Aplicaciones SaaS pero con JavaScript en el servidor
– Frameworks como node.js y extensiones: meteor, express
55 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 56/62
Ejemplo: Ember.js
56 ©GSyC
Ember.js
Rails
vs Rails
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 57/62
Usos de JavaScript
1.
Client-side JavaScript : – Código JavaScript que corre en el browser, asociado a la página Web
– Se usa JavaScript para mejorar la experiencia de usuario de aplicaciones SaaSque siguen el patrón arquitectónico MVC
– Se combina JavaScrpt con HTML y CSS
– Es importante que no se mezcle JavaScript con el código HTML
– Es importante que el servicio esté disponible para cliente no-JavaScript
2. Aplicaciones tipo desktop en el lado del cliente, como Google Docs
– Pueden operar offline – El código JavaScript en el browser usa un servidor delgado, sólo para almacenar
en la BD, recibiendo objetos JSON que convierte en HTML (en el browser)
– Se programan normalmente con frameworks, como Ember.js, Backbone.js oAngular de Google que soporta el patrón MVC
3.
Aplicaciones SaaS pero con JavaScript en el servidor
– Frameworks como node.js y extensiones: meteor, express
57 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 58/62
Ejemplo:
– Biblioteca JavaScript para programar servidores – En lugar de lanzar un nuevo proceso en el servidor para cada petición como
hacen por omisión Rails/Django, las peticiones se encolan y son atendidas por unsolo thread
– Ventaja: mayor rendimiento (peticiones/s) al no haber coste en tiempo deejecución para crear procesos ni para cambiar de contexto entre ellos
– Inconveniente: más difícil de programar, pues las llamadas han de ser nobloqueantes, teniendo que registrar callbacks …
– Ejemplo de servidor HTTP programado con node.js:
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');
– Hay frameworks sobre node.js: meteor, express,…
– Yahoo Mojito es un framework híbrido: permite elegir entre generar HTML en elservidor (node.js) o en el browser (recibe JSON y convierte a HTML en elbrowser)
58 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 59/62
Usos de JavaScript1. Client-side JavaScript :
– Código JavaScript que corre en el browser, asociado a la página Web
– Se usa JavaScript para mejorar la experiencia de usuario de aplicaciones SaaSque siguen el patrón arquitectónico MVC
– Se combina JavaScrpt con HTML y CSS
– Es importante que no se mezcle JavaScript con el código HTML
– Es importante que el servicio esté disponible para cliente no-JavaScript
2. Aplicaciones tipo desktop en el lado del cliente, como Google Docs
– Pueden operar offline – El código JavaScript en el browser usa un servidor delgado, sólo para almacenar
en la BD, recibiendo objetos JSON que convierte en HTML (en el browser)
– Se programan normalmente con frameworks, como Ember.js, Backbone.js oAngular de Google que soporta el patrón MVC
3. Aplicaciones SaaS pero con JavaScript en el servidor
– Frameworks como node.js y extensiones: meteor, express
59 ©GSyC
Y aún hay más usos de JavaScript:
• En los móviles y tabletas, para desarrollar una sóla vez (en JavaScript)y desplegar/ejecutar sobre diversas plataformas móviles como Android, iPhone, BlackBerry,…
Frameworks:
! Phonegap + jQuery Mobile! Titanium
! …
• En los móviles y tabletas, como plataforma alternativa aGoogle/Android, Apple/iOS:
! Firefox OS (Firefox)! Open WebOS (HP)
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 60/62
Precauciones
Rendimiento de
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 61/62
Rendimiento de
JavaScript/AJAX
– Aparentemente JavaScript+AJAX hace interfaces másinteractivas, más dinámicas…
– Pero cuidado:
• Hay que descargar jQuery y los ficheros .js, lo que puede hacer que elusuario perciba que la página tarda más en cargar inicialmente
• Sobre todo en móviles
•
El rendimiento de JavaScript puede no ser alto – ¿Por qué no programar casi todo en el cliente y dejar para el
servidor el acceso a la BD y poco más, como hacen Ember,Backbone,…?
• No es evidente cuál es la mejor solución
• Hay mucha actividad en la actualidad
•
El código JavaScript en el cliente podría hacer queries demasiado complejas,lo que puede evitarse con APIs bien pensadas
• Por otro lado, el rendimiento de la aplicación pasa a depender de laplataforma en la que corre el browser, lo que ocurre menos si la funcionalidadestá sobre todo implementada en el servidor
61 ©GSyC
7/18/2019 16 DOM AJAX Con jQuery Rails
http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 62/62
Referencias
• Capítulo 11 de Engineering Long-Lasting Software .
Armando Fox, David Patterson, beta edition, agosto 2012.
• API de jQuery: http://api.jquery.com/
• Selectores CSS3: http://www.w3.org/TR/selectors/#selectors
• How JavaScript works: introduction to JavaScript and
Browser DOM. Mi$ko Hevery.http://misko.hevery.com/2010/07/14/how-javascript-works/
• jQuery: Novice to Ninja. Earle Castledine, Craig Sharkie.
2nd ed. Site Point 2012 (Disponible en Safari)
• JavaScript. The Definitive Guide: Activate Your Web Pages
6 th
ed .. David Flanagan. O'Reilly 2011. (Disponible enSafari).