Presentacion y Ejercicios en Powerpoint

8/18/2019 Presentacion y Ejercicios en Powerpoint

1/40

XHTML DINAMICO XHTML DINAMICO

AVANZADO AVANZADO

(AJAX Y DOM)(AJAX Y DOM)


2/40

AJAX

•Librerías estándares

•Ejemplos prácticos.


3/40

Bibliografía

• Ajax in Practice

• Visual Quickstart Guide C! "#$%L! and Ajax! &ourt' Edition

• "#$%L (topia. %odern )eb "esi*n (sin* +a,acript - "%

Ajax/ (n 0ue,o acercamiento a las Aplicaciones )eb'ttp/11222.ajax'ispano.com1ajax3nue,o3acercamiento3aplicaciones32eb.'tml

El objeto 4%L#ttp5e6uest

'ttp/11222.pro*ramacion2eb.net1articulos1articulo17num89:;

)ikipedia

'ttp/11es.2ikipedia.or*12iki1Portada

http://www.ajaxhispano.com/ajax-nuevo-acercamiento-aplicaciones-web.htmlhttp://www.ajaxhispano.com/ajax-nuevo-acercamiento-aplicaciones-web.htmlhttp://www.programacionweb.net/articulos/articulo/?num=386http://es.wikipedia.org/wiki/Portadahttp://es.wikipedia.org/wiki/Portadahttp://www.programacionweb.net/articulos/articulo/?num=386http://www.ajaxhispano.com/ajax-nuevo-acercamiento-aplicaciones-web.htmlhttp://www.ajaxhispano.com/ajax-nuevo-acercamiento-aplicaciones-web.html


4/40

Librerías estándares - Prototype

http://www.prototypejs.org/

Prototype es un framework desarrollado en JavaScript por SamStephenson para el desarrollo sencillo y dinámico de páginas We.

Prototype nos simplifica gran parte del traajo cuando se pretendedesarrollar páginas altamente interactivas.

Proyectos asados en Prototype

!"uy on "ails

#http://www.ruyonrails.com/$!script.aculo.us % &homas 'uchs#http://script.aculo.us/$!"ico!#http://openrico.org/$

http://www.prototypejs.org/http://es.wikipedia.org/wiki/Frameworkhttp://www.rubyonrails.com/http://script.aculo.us/http://openrico.org/http://openrico.org/http://openrico.org/http://openrico.org/http://script.aculo.us/http://script.aculo.us/http://script.aculo.us/http://www.rubyonrails.com/http://www.rubyonrails.com/http://www.rubyonrails.com/http://es.wikipedia.org/wiki/Frameworkhttp://www.prototypejs.org/


5/40

Librerías estándares - jQuery

http://j(uery.com/

)s una liviana lirer*a de JavaScript% pensada para interactuar con loselementos de una We por medio del +,-.

a sencille de su sinta0is y la poca e0tensi1n del c1digo (ue necesitasescriir son las caracter*sticas más notales.

http://jquery.com/http://jquery.com/


6/40

Librerías estándares - Mootools

http://mootools.net/

-ootools% es una lirer*a desarrollada en Javascript con la (ue la tareade programar la parte funcional de una aplicaci1n We se convierte enuna tarea más fácil% potente y c1moda.

http://mootools.net/http://mootools.net/


7/40

Test de Veloidad entre !ra"e#or$s

http://mootools.net/slickspeed/

http://mootools.net/slickspeed/http://mootools.net/slickspeed/http://mootools.net/slickspeed/http://mootools.net/slickspeed/http://mootools.net/slickspeed/http://mootools.net/slickspeed/


8/40

Test de Veloidad entre !ra"e#or$s

http://www.yukei.net/2334/35/a6pruea6frameworks6javascript/


9/40

Mootools % &a'ones para elegirlo

7os ofrece una serie de ojetos con los (ue podremos traajar másc1modamente. 8demás de esta serie de ojetos% disponemos defacilidades para crear nuestro propios ojetos y sorecargarlos con lasfuncionalidades (ue -oo&ools nos ofrece.

! )s completamente modular y puedes personaliar no (uenecesitas descargar para ahorrarte peso de javascript

! eer el c1digo de -oo&ools es como leer un liro% la versi1n conc1digo incluido es realmente e0plicita y simple de entender.

! -oo&ools te permite desarrollar con un c1digo orientado a ojetos%esto deido a la capacidad (ue tiene de e0tender los ojetosnativos del lenguaje.


10/40

Mootools % (esarga

http://mootools.net/download

)lementos necesarios para los ejercicios

! 9ore

! )lement

! )lement.)vent y )lement.+imensions

! Window.+om"eady

! '0.Style

! Json."emote


11/40

J)*+

JSON% acr1nimo de JavaScript Object Notation% es un formatoligero para el intercamio de datos. JSON es un suconjunto de lanotaci1n literal de ojetos de Javascript pero no re(uiere el uso de;-.

a simplicidad de JS,7 ha dado lugar a la generaliaci1n de su uso%especialmente como alternativa a ;- en 8J8;.


12/40

J)*+

JS,7 está constituido por dos estructuras:

!


13/40

J)*+


14/40

J)*+


15/40

J)*+


16/40

J)*+ % ,ui.alenia on XML

=menu: = id: file% value: 'ile% popup: = menuitem: ?

=value: 7ew% onclick: 9reate7ew+oc#$>% =value: ,pen% onclick: ,pen+oc#$>% =value: 9lose% onclick: 9lose+oc#$> @ >>>

Amenu idBfile valueB'ileC ApopupC Amenuitem valueB7ew onclickB9reate7ew+oc#$ /C Amenuitem valueB,pen onclickB,pen+oc#$ /C Amenuitem valueB9lose onclickB9lose+oc#$ /C A/popupCA/menuC


17/40

J)*+ % ,nlaes de /nter0s

! http://es.wikipedia.org/wiki/JS,7

! http://json.org/

! http://json.org/json6es.html

&raajar con JS,7 desde 8SP

! http://www.wedevros.net/2334/3D/2E/generate6json6from6asp6datatypes/

! http://www.wedevros.net/2334/3F/2G/json6utility6class6GH6released/


18/40

J)*+ % )oliitud AJAX

Formatovar jSon"e(uest B new Json."emote#Iscript (ue hace el servicio%

=on9omplete: function#ojeto json$= >>$.send#=variales a enviar>$

Ejemplovar jSon"e(uest B new Json."emote#servicios/personasKte0to.asp%

=on9omplete: function#jsonpersonas$= acaa8ccion#LJS,7L% jsonpersonas.personas$ >>$.send#=LfiltroL: LL>$


19/40

J)*+ % !or"ato datos

Formato=Iojeto: ?=IcampoG: valorG%Icampo2: Ivalor2%..>@>

Ejemplo

=personas: ?=idpersona: H%nomre: 8',7S,%apellidos:M)78N)7& NO9&,"O8%email: 8Menaventua.es>@>


20/40

MooTools % !uniones

each (Clase Array)

"ecorre todos los elementos del array y como parámetro indicamos lafunci1n (ue podemos ejecutar para cada uno de los elementos delarray.

'ormatoarray.each#function#item$ =

alert#item.propiedad$>$

Ejemplo?LappleL%LananaL%[email protected]#function#item% inde0$ =

alert#inde0 Q B Q item$>$


21/40

J)*+ % Leer datos 1*bjetos2

Formato 8rray,jetos.each#function#ojeto$ = // eemos las propiedades de cada ojeto>$

Recorremos los datosppersonas.each#function#persona$ = alert#persona.nomre Q Q persona.apellidos Q # Q

persona.email Q $$>$


22/40

J)*+ % ,je"plo 3

9rear un fichero html #ejGKjson.html$ (ue haga una llamada 8J8; a un

servicio JS,7 #servicios/personasKte0to.asp$ y mostremos con un alert el

nomre% apellidos y correo del usuario.


23/40

J)*+ % 4enerar datos desde A)P

Descarar librer!ahttp://www.wedevros.net/wp6content/uploads/2334/3F/jsonGH.ip

"so sencillo desde #na cons#lta (RecordSet)Formato

#new JS,7$.toJS,7#Iidentificaci1n% "ecordSet% false$

EjemploSet o"S B ,con.)0ecute#ssR$

L "ecorrer el cursor para mostrar los datos

Of #not o"S.),'$ then response.write##new JS,7$.toJS,7#personas% o"S% false$$ )nd Of


24/40

J)*+ % ,je"plo 5

9rear un fichero html #ej2Kjson.html$ (ue haga una llamada 8J8; a un

servicio JS,7 #servicios/personas.asp$. )ste 8SP consulta los datos de la

tala Personas y devuelve todos los datos.

9uando acae la llamada% mostraremos un alert con el nomre% apellidos y

correo% de cada uno de los alumnos.


25/40

J)*+ % 4enerar datos desde A)P

Enviar n#estros propios datos con #n diccionario

Formato9rear un diccionario y aadir datos con diccionario.add InomreT% IvalorT

##new JS,7$.toJS,7# identificaci1n % array+iccionario% false$$

Ejemplo+im dPer#G$set dPer#3$ B server.create,ject#scripting.dictionary$

dPer#3$.add idpersona% GI

set dPer#G$ B server.create,ject#scripting.dictionary$dPer#G$.add idpersona% 2I

response.write##new JS,7$.toJS,7#personas% dPer% false$$


26/40

J)*+ % ,je"plo 6

9rear un fichero html #ejHKjson.html$ (ue haga una llamada 8J8; a un

servicio JS,7 #servicios/personasKH.asp$.

)ste 8SP genera los datos de las personas con un array de diccionarios.

9uando acae la llamada% mostraremos un alert con el nomre% apellidos y

correo% de cada uno de los alumnos.


27/40

MooTools % !uniones

F#nci$n %

7os devuelve la referencia al ojeto (ue estamos uscando% siempre ycuando este e0ista en la página. )n caso de no e0istir devuelve false.

FormatoU#Vmielemento$

Ejemplo

if #U#Vid&e0tarea$$ = U#Vid&e0tarea$.value B IXolaT>else = alert#I7o e0iste el te0tarea id&e0tareaI$>


28/40

MooTools % !uniones

F#nci$n %%

7os devuelve una array de ojetos (ue se ajustan a una eti(ueta%Yidentificador% clase% etc (ue indi(uemos

FormatoUU#Veti(ueta$

EjemploUU#LaL$ // 8rray con todas las eti(uetas anchor de la páginaUU#La.claseL$ // 8rray con todas las eti(uetas anchor de la página // (ue tengan como class% clase


29/40

MooTools % !uniones

Evento DomReady

8adimos un evento especial a la ventana cuando el +,- está listopara poder traajar con Zl.

Ejemplowindow.add)vent#LdomreadyL%

function#$=alert#Lthe dom is readyL$

>$


30/40

Mootools % ,je"plo 7

9rear un fichero html #ejDKmootools.html$ (ue contenga un listado de las


31/40

MooTools % !uniones

inject&e'ore (Clase elemento)

Onserta un elemento antes del elemento actual.

EjemploU#IidelementoT$.injectMefore#I)lemento (ue va a ser ahora posteriorT$


32/40

MooTools % !uniones

injectA'ter (Clase elemento)

Onserta un elemento despuZs del elemento actual.

EjemploU#IidelementoT$.inject8fter#I)lemento (ue va a ser ahora anteriorT$


33/40

MooTools % !uniones

remove (Clase elemento)

)limina el elemento actual.

EjemploU#IidelementoT$.remove#$


34/40

MooTools % !uniones

set*+ (Clase elemento)

Ondicamos el innerX&- del elemento.

EjemploU#IidelementoT$.setX&-#I&e0toT$


35/40

MooTools % !uniones

ete,t (Clase elemento)

,tenemos el inner te0t del elemento.

Ejemploalert#U#IidelementoT$.get&e0t#$$


36/40

MooTools % !uniones

ne- Element (Clase elemento)

9reamos un nuevo elemento. +eemos definir la eti(ueta y losatriutos (ue la forman.

Ejemplovar el B new )lement#VdivL% =LstyleL: Lcolor: redL>$


37/40


9rear un fichero html #ej[Kmootools.html$ (ue contenga un listado de las


38/40

MooTools % !uniones

inject.nside (Clase elemento)

Onserta un elemento dentro del elemento actual.

EjemploU#IidelementoT$.injectOnside#I)lemento en el (ue vamos a insertarT$


39/40


9rear un fichero html #ejEKmootools.html$ (ue cuando estZ listo el +,- se

active un evento (ue cree una eti(ueta div de [33p0 y fondo gris y (ue

dentro de esta inserte [ eti(uetas div con cada una de las universidades.

Opcional: Añadir evento a las etiquetas para ir a la Web de la Universidad.


40/40

J)*+ - Mootools % ,je"plo :

9rear un fichero html #ej4KjsonKmootools.html$ (ue disponga de una caja

de te0to (ue hará de filtro. 9uando el n\mero de letras sea mayor de H%

hará una llamada 8J8; a un servicio JS,7 #servicios/personasK4.asp$

)ste 8SP consulta los datos de la tala Personas dependiendo del filtro

por nomre% apellidos o correo y devuelve todos los datos.

9uando acae la llamada% mostraremos una caja div #al estilo del ejericicio

anterior$ con los resultados (ue ha devuelto al servicio.

Documents

Presentacion y Ejercicios en Powerpoint