presentacion y ejercicios en powerpoint
TRANSCRIPT
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
1/40
XHTML DINAMICO XHTML DINAMICO
AVANZADO AVANZADO
(AJAX Y DOM)(AJAX Y DOM)
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
2/40
AJAX
•Librerías estándares
•Ejemplos prácticos.
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
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
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
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/
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
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/
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
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/
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
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/18/2019 Presentacion y Ejercicios en Powerpoint
8/40
Test de Veloidad entre !ra"e#or$s
http://www.yukei.net/2334/35/a6pruea6frameworks6javascript/
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
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.
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
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
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
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;.
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
12/40
J)*+
JS,7 está constituido por dos estructuras:
!
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
13/40
J)*+
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
14/40
J)*+
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
15/40
J)*+
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
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
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
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/
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
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>$
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
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>@>
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
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$>$
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
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 $$>$
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
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.
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
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
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
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.
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
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$$
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
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.
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
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$>
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
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
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
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$
>$
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
30/40
Mootools % ,je"plo 7
9rear un fichero html #ejDKmootools.html$ (ue contenga un listado de las
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
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$
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
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$
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
33/40
MooTools % !uniones
remove (Clase elemento)
)limina el elemento actual.
EjemploU#IidelementoT$.remove#$
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
34/40
MooTools % !uniones
set*+ (Clase elemento)
Ondicamos el innerX&- del elemento.
EjemploU#IidelementoT$.setX&-#I&e0toT$
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
35/40
MooTools % !uniones
ete,t (Clase elemento)
,tenemos el inner te0t del elemento.
Ejemploalert#U#IidelementoT$.get&e0t#$$
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
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>$
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
37/40
Mootools % ,je"plo 8
9rear un fichero html #ej[Kmootools.html$ (ue contenga un listado de las
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
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$
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
39/40
Mootools % ,je"plo 9
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.
-
8/18/2019 Presentacion y Ejercicios en Powerpoint
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.