AJAX Manual
-
Upload
yk-lopes-aguilar -
Category
Documents
-
view
126 -
download
0
Transcript of AJAX Manual
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 1/84
Manual del participante | Módulo II
INTERFAZ MÓDULO II AJAX
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 2/84
CONTENIDO
I. INTRODUCCIÓN Y CONCEPTOS BÁSICOS DE AJAX. .................................................. 5
¿QUÉ ES WEB
2.0?...................................................................................................................... 5
INTRODUCCIÓN ....................................................................................................................................... 5
EJEMPLOS DE WEB 2.0 ......................................................................................................................... 7
TECNOLOGÍAS QUE DAN VIDA A UN PROYECTO WEB 2.0 ..................................................................... 8
¿QUÉ ES RIA? ............................................................................................................................ 9
¿QUÉ ES AJAX Y CÓMO SE COMPONE?..................................................................................... 10
INTRODUCCIÓN ..................................................................................................................................... 10
¿QUÉ ES AJAX? .................................................................................................................................. 10
COMUNICACIÓN SÍNCRONA VS. ASÍNCRONA ....................................................................................... 12
II. MAQUETADO DE PÁGINAS UTILIZANDO HOJAS DE ESTILO .................................. 13
¿QUÉ SON LAS HOJAS DE ESTILO? ............................................................................................ 13
INTRODUCCIÓN. .................................................................................................................................... 13
MÉTODOS DE IMPLEMENTACIÓN DE LAS HOJAS DE ESTILO. ........................................................ 15
APLICACIÓN DIRECTA DE ESTILOS EN LAS ETIQUETAS ....................................................................... 15
APLICAR ETIQUETAS EN EL DOCUMENTO HTML................................................................................. 16
SEPARAR EL HTML DEL CSS.............................................................................................................. 17
REGLAS DE LAS HOJAS DE ESTILO ............................................................................................. 18
SELECTORES DE TIPO .......................................................................................................................... 18SELECTOR UNIVERSAL ......................................................................................................................... 19
SELECTORES DESCENDENTES............................................................................................................. 19
SELECTORES DE CLASE ....................................................................................................................... 21
SELECTORES ID .................................................................................................................................... 22
SELECTORES SECUNDARIOS................................................................................................................ 23
SELECTORES DE ATRIBUTOS ............................................................................................................... 24
ETIQUETAS ................................................................................................................................ 25
CLASES ..................................................................................................................................... 26
IDENTIFICADORES ...................................................................................................................... 29
COMBINACIONES........................................................................................................................ 30
CAPAS ....................................................................................................................................... 31
BLOQUES Y LÍNEAS ............................................................................................................................... 32
ATRIBUTOS PARA CAPAS ...................................................................................................................... 33
III. JAVASCRIPT ................................................................................................................... 37
DEFINICIÓN DE JAVASCRIPT ....................................................................................................... 37
INTRODUCCIÓN ..................................................................................................................................... 37
JAVASCRIPT EN UN DOCUMENTO XHTML. ......................................................................................... 37JAVASCRIPT EN UN ARCHIVO EXTERNO. ............................................................................................. 39
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 3/84
JAVASCRIPT EN LOS ELEMENTOS XHTML. ........................................................................................ 41
ETIQUETA <NOSCRIPT> .................................................................................................................... 41
DEFINICIÓN DE DOM.................................................................................................................. 42
ESCRIBIR CÓDIGO JAVASCRIPT .................................................................................................. 44
SINTAXIS DE JAVASCRIPT .................................................................................................................... 44
OBJETOS DE NAVEGADOR DE JAVASCRIPT ................................................................................ 44
LOS EVENTOS ............................................................................................................................ 46
MANEJADORES DE EVENTOS...................................................................................................... 47
MÉTODOS DE EVENTOS .............................................................................................................. 49
VARIABLES ................................................................................................................................ 50
DECLARACIÓN DE VARIABLES .............................................................................................................. 50
DECLARACIÓN DE ARREGLOS (ARRAY) ............................................................................................... 51
CUADROS DE DIALOGO Y SALIDAS DE TEXTO ..................................................................................... 52
OPERADORES ARITMÉTICOS. ..................................................................................................... 54
OPERADORES LÓGICOS ............................................................................................................. 54 OPERADORES DE ASIGNACIÓN ................................................................................................... 55
OPERADORES DE COMPARACIÓN. .............................................................................................. 56
ESTRUCTURAS DE CONTROL ...................................................................................................... 57
CONDICIONAL........................................................................................................................................ 57
IF – ELSE (SI – DE LO CONTRARIO)........................................................................................................ 57
SWITCH ................................................................................................................................................. 58
CICLOS DE REPETICIÓN ........................................................................................................................ 59
FOR ....................................................................................................................................................... 59
WHILE .................................................................................................................................................... 59
FUNCIONES ........................................................................................................................................... 60
IV. JAVASCRIPT AVANZADO............................................................................................. 61
TRY-CATCH................................................................................................................................ 61
ACCESO A LOS ELEMENTOS DEL DOCUMENTO, (MANIPULAR DOM CON JAVASCRIPT) ................ 61
GETELEMENTBYID()................................................................................................................... 62
GETELEMENTBYNAME()............................................................................................................. 62
GETELEMENTBYTAGNAME()...................................................................................................... 62
INSERTAR CONTENIDO HTML MEDIANTE INNERHTML ................................................................. 63 MODIFICAR ASPECTOS DE LOS ELEMENTOS (STYLE, CLASSNAME) ............................................. 63
XML .......................................................................................................................................... 64
CONECTANDO XML Y JAVASCRIPT (OBJETO XMLHTTPREQUEST) ............................................. 65
MÉTODOS DE XMLHTTPREQUEST ............................................................................................ 65
INSTANCIA . ABORT();................................................................................................................ 66
PROPIEDADES DE XMLHTTPREQUEST .............................................................................................. 67
V. FRAMEWORK SPRY ....................................................................................................... 69
¿QUÉ ES EL FRAMEWORK DE SPRY? ......................................................................................... 69
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 4/84
SELECCIÓN/CAMBIO DE LA CARPETA PREDETERMINADA DE ACTIVOS DE SPRY........................... 70
INSERCIÓN DE UN WIDGET DE SPRY............................................................................................ 71
SPRY MENU ............................................................................................................................ 73
SPRY ACCORDION ................................................................................................................ 78
COMPOSICIÓN DEL SPRY ACCORDION ................................................................................................ 78
INSERCIÓN DEL WIDGET DE ACORDEÓN .............................................................................................. 79
SPRY TAB................................................................................................................................ 82
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 5/84
I. INTRODUCCIÓN Y CONCEPTOS BÁSICOS
DE AJAX.
¿Qué es web 2.0?
Introducción
La evolución de la web a lo largo de su
desarrollo ha llevado a definir una nueva serie de
conceptos, con la aparición de nuevas
tecnologías para la web, y un uso indiscriminadopor parte de los usuarios, surge el concepto de
Web 2.0.
La web 2.0 pretende ser el punto de partida hacia un nuevo método de concepción
acerca de lo que significa los servicios en la web. Años han pasado desde las primeraspáginas estáticas que solo servían como un tablón de anuncios en la red.
Estamos observando una evolución constante en las diversas aplicaciones web que
se enfocan al usuario final. Lejos de tratarse como una tecnología más con su propio
lenguaje de programación, se trata de una actitud.
La web 2.0 se refiere a la transición que se está llevando a cabo de aplicaciones de
escritorio tradicionales hacia aplicaciones que funcionan a través de la web, y se centran en
el usuario final. Justo esta es la actitud que difunde la Web 2.0, crear servicios que
impliquen una mayor interacción del usuario al grado de pasar de ser un simple emisor a
convertirse en un productor de la información.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 6/84
De entre los múltiples conceptos de este tema que podemos encontrarnos en la web,
nos basaremos en el sentido del desarrollador, el concepto involucra que los programadores
deben de centrar su misión de desarrollo en procurar el “confort” del usuario, mediante el
uso de tecnologías y técnicas de desarrollo web que provoquen que las páginas sean
dinámicas y en conjunto atractivas para los usuarios finales.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 7/84
Ejemplos de Web 2.0
Para mostrar de una manera más clara la evolución de la Web 2.0, a continuación se
muestra una tabla de comparación entre diferentes servicios web.
Web 1.0 Web 2.0 Tipo de servicio
DoubleCLick Google AdSense Publicidad
Ofoto Flickr Comunidad fotográfica
Akamai BitTorrent Distribución decontenidos
Mp3.com Itunes Descarga y compra de
música
Britannica OnLine Wikipedia Enciclopedias
Sitios Personales Blogs Páginas personales
Listas de correos Twitter/Facebook Microbloging
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 8/84
Tecnologías que dan vida a un proyecto Web 2.01
Transformar software de escritorio hacia la plataforma del web.
Respeto a los estándares como el XHTML.
Separación de contenido del diseño con uso de hojas de estilo.Sindicación de
contenidos.
Ajax (javascript ascincrónico y xml).
Uso de Flash, Flex o Lazlo.
Uso de Ruby on Rails para programar páginas dinámicas.
Utilización de redes sociales al manejar usuarios y comunidades.
Dar control total a los usuarios en el manejo de su información.
Proveer APis o XML para que las aplicaciones puedan ser manipuladas por otros.
Facilitar el posicionamiento con URL sencillos.
Nota.
Puedes leer el artículo completo de Tim O’Reilly sobre ¿Qué es Web 2.0?
en http://oreilly.com/web2/archive/what-is-web-20.html
1Tomado de http://www.maestrosdelweb.com/editorial/web2/.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 9/84
¿Qué es RIA?
Rich Internet Applications (Aplicaciones Ricas de Internet)
Las aplicaciones ricas de internet pueden ser el término más fuerte de la Web 2.0 para los
diseñadores y desarrolladores. Sin embargo, es sólo uno de los conceptos de la Web 2.0 y no deben
confundirse como sinónimos.
En sí podemos decir que se trata de un nuevo paradigma para desarrollo de aplicaciones en
la web que está surgiendo con mucha fuerza.
Una aplicación rica de internet es un cruce
entre las aplicaciones web y las de escritorio, que
deriva en cierto comportamiento hacia el cliente,
que se comunica con el servidor sólo en casos
necesarios. Además implica superar las limitaciones
de HTML por lo que se puede ofrecer todo tipo de
controles ricos y una nueva experiencia al usuario.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 10/84
¿Qué es AJAX y cómo se compone?
Introducción
Desde hace un tiempo la palabra AJAX es la palabra de moda en el mundo del
desarrollo de aplicaciones web. El término “Ajax” fue adoptado por Jesse James Garret2 en
su articulo “Ajax: A New Approach to Web Applications”. A modo de introducción paso a citar
unas líneas brevemente.
“Dejando de lado esto, los diseñad ores de interacción Web no pueden
evitar sentirse envidiosos de nuestros colegas que crean software de escritorio.
Las aplicaciones de escritorio tienen una riqueza y respuesta que parecía fuera
del alcance en Internet. La misma simplicidad que ha permitido la rápida
proliferación de la Web también crea una brecha entre las experiencias que
podemos proveer y las experiencias que los usuarios pueden lograr de las
aplicaciones de escritorio.” 3
¿Qué es AJAX?
Existen diferentes opiniones acerca de lo qué es y lo que no es AJAX. En esencia
AJAX se refiere a un conjunto de tecnologías que usadas de manera adecuada y eficientes
pueden dar como resultado aplicaciones que permiten dar al usuario final la sensación del
intercambio continuo de datos tal como una aplicación de escritorio.
Esto es que a pesar de que parezca así, realmente lo que se está haciendo es solo
recargar fragmentos de un documento HTML.
2 Jesse James Garrett(wikipedia.org) is an information architect and founder of Adaptive Path, an information architecture and userexperience firm. His work is widely known among information architects, who commonly refer to him simply as jjg.3 El artículo original lo puedes encontrar en http://www.adaptivepath.com/ideas/essays/archives/000385.php
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 11/84
AJAX (Asynchronous Javascript and XML) es una técnica de desarrollo web que
genera aplicaciones web interáctivas combinando:
XHTML y CSS para la presentación de información.
Document Object Model (DOM) para visualizar dinámicamente e interactuar con la
información presentada.
XML, XSLT y JSON para intercambiar y manipular datos.
XMLHttpRequest para recuperar datos asíncronamente.
Javascript como nexo de unión de todas estas tecnologías.
No requiere Plugins o capacidades específicas de ciertos navegadores.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 12/84
Comunicación síncrona vs. Asíncrona
En el desarrollo clásico tanto de aplicaciones como sitios web la comunicación con el
usuario es síncrona respecto de las interacciones del usuario, es decir:
1. El usuario realiza una petición al servidor.
2. El servidor envía la página solicitada.
3. El usuario comienza a “leer” la página.
4. Llega un momento dado en el cual el usuario desea cambiar de página y mediante
formularios o links realiza una petición al servidor volviendo al paso número 1.
En cambio la comunicación asíncrona no implica sincronismo ante los eventos del
usuario, sino que ante cualquier evento del usuario nosotros podemos proceder en
consecuencia, es decir:
1. El usuario realiza una petición al servidor
2. El servidor envía la página solicitada
3. El usuario comienza a “leer” la página.
4. Llega un momento dado en el cual el usuario quiere cambiar de página o alterar la
información que contiene la misma.
En ese momento dado la aplicación teniendo definidos los eventos posibles actúa en
consecuencia a la interacción que haya podido suceder. Entonces podremos cambiar al
usuario de página, o por el contrario modificar la misma para satisfacer al usuario, aunque
estos cambios no implican cambiar de página o recargar todo el documento HTML de
nuevo.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 13/84
II. Maquetado de páginas utilizando hojas de
estilo
¿Qué son las hojas de estilo?
Introducción.
CCS (Cascading Style Shets) es un lenguaje de hojas de estilos hecho para controlar
el aspecto o presentación de los documentos HTML y XHTML. Esta tecnología está
desarrollada para separar el contenido de la presentación, y es muy útil a la hora de llevar a
cabo el desarrollo de páginas web complejas. De manera simple podemos decir que las
hojas de estilo definen como se verán las etiquetas HTML/XHTML.
Funciona mediante la definición de reglas de estilos que se aplican a los elementos
HTML, entre las que se encuentran, tamaño, tipo de fuente, color de fuente, color de fondo,
posición de los elementos, márgenes. De esta manera podemos ver que queda separada
completamente la parte gráfica de la web, de la estructura HTML.
Los estilos pueden ser incluidos dentro de un documento HTML o en línea en algún
elemento HTML como veremos más adelante, pero además puede ser usado como archivos
externos (archivos guardados con la extensión .css), que se vinculan al documento
HTML/HTML.
Y es de esta forma en que podemos apreciar la gran capacidad y utilidad del uso de
las hojas de estilos (CSS). Al estar la definición de los estilos en un archivo externo a los
documentos HTML/XHTML, el mismo estilo puede ser común a todas las páginas del sitio,
logrando con esto un diseño uniforme además de que facilita el cambio de diseño para todo
un sitio mediante la edición del archivo .CSS.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 14/84
El inconveniente que tiene trabajar con hojas de estilos es que algunos
navegadores no las soportan y las ignoran, aunque estos navegadores suelen ser versiones
antiguas, por lo que ocurrirá en pocos casos.
El lenguaje se encuentra desarrollado por la W3C, y es muy importante ya que
mediante la implementación de las hojas de estilos se puede optimizar las páginas web.
Durante esta unidad veremos los aspectos básicos para llevar a cabo la realización
de sitios web basados en hojas de estilos (CSS).
Nota.
Puedes encontrar más referencia acerca de CSS en
http://www.spanishtranslation.us/traducciones/css-styles.htm
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 15/84
Métodos de implementación de las hojas de estilo.
Existen diferentes métodos de implementación de estilos: especificarlo de manera
directa en la etiqueta en la que deseas usarlo, puedes llevar a cabo la definición de estilosaparte y aplicarlos a las etiquetas que desees o definir estilos globales para las etiquetas
(que pueden ser cambiados en las que desees no aplicarlos).
Aplicación directa de estilos en las etiquetas
Cuando desees aplicar un estilo a una etiqueta concreta, necesitas usar la siguiente sintaxis:
Sintaxis de estilos directo a una etiqueta HTML
<etiqueta STYLE="propiedad1:valor;...;propiedadN:valor"> ... </etiqueta>
Donde
etiqueta: equivale a cualquier etiqueta HTML. Style: Es el parámetro que indica que se va a aplicar el estilo definido a
continuación a la etiqueta en la que se encuentra.
La definición de los estilos se debe de llevar a cabo en pares propiedad:valor.
propiedad: equivale a una propiedad de estilo (el color, tipo de fuente,
tamaño de la fuente).
valor: equivale al valor que deseas aplicar al estilo (color negro, fuente
Verdana, tamaño 12pt).
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 16/84
Aplicar etiquetas en el documento HTML.
En algunos casos tendrás que definir estilos que se van a aplicar a todas las
etiquetas del documento, es decir, querrás que todo el documento presente un cierto tipo de
letra, que las cabeceras tengan un color determinado, las tablas las muestre de cierta
manera, para realizar esto puedes definir los estilos globales mediante el suo e la etiqueta
<STYLE>…</STYLE>, a continuación se muestra la sintaxis para llevar a cabo la definición
de estilos de esta forma:
Sintaxis de apliación de estilos mediante la
etiqueta <STYLE>…</STYLE> <STYLE TYPE="text/css">
<!--
Etiqueta1, Etiqueta2 : {propiedad1:valor}
Etiqueta3 : {propiedad1:valor;...;propiedadS:valor}
Etiqueta4 : {propiedad1:valor;...;propiedadT:valor}
.Clase1 : {propiedad1:valor;...;propiedadT:valor}
//-->
</STYLE>
Además puedes aplicar el mismo estilo para varias etiquetas, esto lo haces
escribiéndolas separadas por comas y, seguido, la especificación del estilo según los pares
propiedad:valor separados por punto y coma y encerrados entre llaves {} .
Puedes definir cuantos estilos desees en un bloque de estilo global. Aparece un
.Clase1; se refiere a las llamadas clases, que nos permitirán que una etiqueta concreta
tenga una apariencia distinta a la definida como global.
Es recomendable que el bloque de estilos sea definido dentro de las etiquetas
<HEAD>…</HEAD> para asegurarnos que los estilos definidos serán aplicados a todos los
elementos del cuerpo del documento.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 17/84
Separar el HTML del CSS.
Una vez que tienes definidos estilos globales, puede resultar interesante tener estos
estilos separados en un archivo específico de hojas de estilos, donde además de poder
aplicar los estilos a un documento específico puedes aplicar el mismo estilo a todos los
documentos que formen un sitio web conservando la coherencia en el diseño del sitio.
Para poder incluir las propiedades de una hoja de estilo en un documento, hay que
vincularla a él. Un documento puede tener varias hojas de estilo vinculadas.
Para vincular una hoja de estilo a un documento es necesario insertar la etiqueta
<link> en el documento, entre las etiquetas <head> y </head>. Esta etiqueta no necesita
etiqueta de cierre.
A través del atributo href se especifica la hoja de estilo que se va a vincular al
documento.
A través del atributo rel se tiene que especificar que se está vinculando una hoja de
estilo, por lo que su valor ha de ser stylesheet .
A través del atributo type se tiene que especificar que el archivo es de texto, con
sintaxis CSS, por lo que su valor ha de ser text/css .
Por ejemplo, podríamos vincular una hoja de estilo escribiendo el siguiente código.
Sintáxis de vínculo de una hoja de estilos desde un archivo HTML
<link href="misestilos.css" rel="stylesheet" type="text/css" >
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 18/84
Reglas de las hojas de estilo
Las hojas de estilos están compuestas por reglas. Una regla está compuesta por dos partes, el
selector y la declaración.
Un selector te indica a qué elementos se refiere la regla, por ejemplo “ P ”para decir que la
regla se aplica a todos los párrafos.
Una serie de declaraciones. Donde cada declaración es un par propiedad : valor , donde
indicas como deben desplegarse los elementos a los que se refiere el selector.
Selectores de tipo
h1 {color: #36c;}
En el cuadro se muestra un ejemplo claro de un selector de tipo, el cual le indica al
navegador que debe actuar sobre todos los elementos de un determinado tipo. En el
ejemplo se muestra el caso donde todos los encabezados de nivel 1 serán mostrados de
color azul.
Puedes ver que el código del estilo muestra “#36c” . Es un color hexadecimal
abreviado. La representación hexadecimal, es la descomposición de los colores RGB , por
parejas. La primera pareja corresponde al rojo, la segunda al verde y la tercera al azul.Cuando los valores de estas parejas coinciden, podemos abreviar nuestro número
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 19/84
hexadecimal para ahorrar marcado. El azul, #3366cc, es perfecto para esto, ya que
coinciden sus tres parejas, y podemos abreviarlo quedando así #36c, el primer número
corresponde al valor del rojo, el segundo al valor del verde y finalmente, el tercero es el valor
del azul.
Selector universal
En CSS disponemos de un caracter que puede ser utilizado como un comodín , es el
selector universal. Te recomiendo utilizarlo al principio de nuestra hoja de estilo, para
declarar algún atributo común a todos los elementos de tu página web, por ejemplo los
márgenes o el padding(relleno):
* {margin: 0px;
padding: 0px;
}
Con el carácter asterisco (*) puedes controlar los márgenes de todo tu documento
web.
Selectores descendentes
Ejemplo
<p>Una pequeña lista</p>
<ul>
<li>y dentro metemos <em>algo en cursiva</em></li>
<ol>
<li>Pero metemos otra lista <em>ordenada</em></li></ol>
<li>seguimos en <em>la desordenada</em></li>
</ul>
<p>Y cerramos el <em>ejemplo</em></p>
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 20/84
Si deseas poner todos los elementos <em> en mayúsculas, puedes hacer esto:
em {
text-transform:
uppercase;
}
Esto anterior provocaría que todos los elementos <em> se transformen en
mayúsculas, pero, tú solo deseas aplicar el estilo a los elementos<em>
que se encuentrendentro de las listas desordenadas (<ul> ). Para llevar a cabo esto realiza lo siguiente:
ul em {
text-transform:
uppercase;
}
Este código hacer que sólo los elementos <em> que estén dentro de una lista
ordenada se afecten con el estilo de transformación a mayúscula.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 21/84
Selectores de clase
Los selectores de este tipo, nos van a proporcionar la posibilidad de actuar sobre un
grupo específico de tipos. En el ejemplo colocaremos ciertos elementos de una lista
desordenada, con un margen de 5 px a la izquierda. Realiza lo siguiente:
<ul>
<li>Un elemento de una lista que no será resaltado</li>
<li class="box">Este elemento será resaltado</li>
</ul>
Ahora podemos hacer varias cosas según las necesidades que tengamos:
.box {
margin-left: 5px;
}
El estilo hará que todos los elementos de tu documento, marcados con la clase box ,
tengan los atributos indicados anteriormente, pero ¿qué haríamos si sólo quieres actuar
sobre los elementos box , que estén dentro de una lista desordenada?
ul .box {
margin-left: 5px;
}
Con el estilo escrito anteriormente acabas de indicar al navegador que cuando se
encuentre con un elemento nombrado con clase box , que esté dentro de una lista
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 22/84
desordenada, le dé sangrado a la izquierda. Esto te permitirá definir estilos mediante clases
para afectar a los elementos indicados con dicha clases y además definir estilos para la
clase pero que solo desees que se aplique cuando presentan ciertas características.
Selectores id
Los selectores ID, nos permiten identificar un único elemento dentro de todo nuestro
documento HTML. Si por ejemplo quieres utilizar la etiqueta <h1>, dos veces en tu
documento. Una en la cabecera, y otra para encabezar tu contenido. Para lo cual deseas
que el <h1> de la cabecera sea más grande que el del contenido.
<div id="cabecera">
<h1 id="h1header">Primer título</h1>
</div>
<div id="contenido">
<h1>Segundo título</h1>
</div>
Ahora el CSS:
h1 {
font-size: 125%;
}
h1#h1header {
font-size: 150%;
}
Con este método de acción del CSS sobre tu marcado, controlas por separado dos
encabezados del mismo nivel, y tratarlos como dos elementos diferentes.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 23/84
Selectores secundarios
En algunas situaciones tendrás que definir estilos para elementos descendientes,
pero si solo deseas actuar sobre algunos de ellos, a continuación explicaré esto:
Estilo 1
p {
padding-bottom: 15px;
}
Estilo 2
body p {
padding-bottom: 15px;
}
Puedes pensar que estos dos estilos hacen exactamente lo mismo, todos los
párrafos del documento tendrán un padding-bottom de 15 px; pero si lo deseas actuar sobre
los elementos que desciendan del body es necesario hacer lo siguiente:
body>p {
padding-bottom: 15px;
}
El signo > deja libre a todos los párrafos que descienden directamente de un div,
actuando únicamente sobre los que desciendan directamente del body.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 24/84
Selectores de atributos
Los selectores de atributos, nos permiten evitar que nuestro marcado se llene en
exceso con atributos class, comparando entre sí, no sólo nombres de clases, sino cualquier
atributo, como su propio nombre nos indica. Se escriben entre corchetes, y aquí os muestro
su uso en la siguiente tabla.
Sintaxis del selector de atributo Resultado
[x] Coincide cuando el elemento tiene el atributo x ,
independientemente de su valor.
[x=y] Coincide cuando el atributo x del elemento tiene un valor
que equivale exactamente a y . [x~=y] Coincide cuando el valor del atributo x del elemento de la
lista de palabras delimita por espacios, una de las cuales es
y .
[x|=y] Coincide cuando el valor del atributo x del elemento, es una
lista de palabras separadas por guiones que empieza por y .
En principio puede parecer confuso, por lo cual a continuación se muestra un cuadro
para ver algún ejemplo de uso de estos selectores.
Selector Significado Qué selecciona Qué no selecciona p[lang] Selecciona todos los
elementos de párrafo
con el atributo lang
<p lang="eng">
<p lang="five"> <p class="lang">
<p>
p[lang="fr"] Selecciona todos los
elementos de párrafo
cuyo atributo lang
tiene el valor "fr"
<p lang="fr">
<p class="gazette"
lang="fr">
<p lang="fr-
Canada">
<p lang="french">
p[lang~="fr"] Selecciona todos loselementos de párrafo
cuyo atributo lang
contiene la palabra "fr"
<p lang="fr"><p lang="en fr">
<p lang="la sp fr">
<p lang="fr-Canada">
<p lang="french">
p[lang|="en"] Selecciona todos los
elementos de párrafo
cuyo atributo lang
contiene los valores
que son exactamente
"en" o empiezan por
"en-"
<p lang="en">
<p lang="en-US">
<p lang="en-cockney">
<p lang="US-en">
<p lang="eng">
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 25/84
Etiquetas
El uso de estilos permite redefinir el estilo predefinido para las etiquetas
existentes del HTML. A continuación se muestra un ejemplo donde se puede apreciar ladefinición de estilos para las etiquetas Body, h1, h2, p:
Ejemplo de definición de etiquetas con CSS <html> <head> <style type="text/css"> <!-- body {font-size: 10pt; font-family:Arial;}
h1 {font-size: 15pt; font-family: Arial;font-weight: bold; color: maroon;}h2 {font-size: 13pt; font-family: Arial; font-weight: bold;color:
blue;} p {font-size: 10pt; font-family:Arial;color: black;}--> </style>
</head>
<body> aqui el contenido de la pagina
</body>
</html>
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 26/84
Clases
Es normal querer definir unos estilos globales en hojas externas que homogenicen el
aspecto de nuestras páginas, y luego, en una página concreta quiere variar el estilo enalguna etiqueta concreta.
Como ya sabemos, esto podemos hacerlo definiendo el estilo localmente en esa
etiqueta. Pero también puede suceder que esta definición de un estilo concreto queramos
aplicarla a otra etiqueta.
Una clase es una definición de un estilo que en principio no está asociado a alguna
etiqueta HTML, pero que podemos asociar a etiquetas concretas.
Para ello, en primer lugar definimos la clase:
.nombre_de_nuestra_clase {valor1: valor; valor2:valor; etc.}
Es decir, escribiendo un punto seguido del nombre que le queramos dar a la clase, y
definiendo el estilo como lo definimos para cualquier otra etiqueta: propiedad:valor
separados por punto y coma y encerrados entre llaves. Además, podremos definir cuantas
clases necesitemos.
Para aplicar el estilo de una clase a una etiqueta utilizamos el parámetro CLASS:
<etiqueta CLASS="nombre _de_nuestra_clase"> ... </etiqueta>
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 27/84
Donde nombre _de_nuestra_clase es el nombre que le hemos dado a la clase, sin
el punto.
Mediante la definición de 'clases' se establecen estilos que pueden aplicarse a
cualquier etiqueta de HTML. El estilo no se vincula a una etiqueta concreta sino a una
'clase'.
Esta clase, actúa como atributo de cualquier etiqueta, cada vez que se quiera llamar
a ese estilo, basta con incluir el nombre de esa clase dentro de la etiqueta correspondiente.
<HTML> <HEAD> <TITLE>Titulo</TITLE>
<STYLE TYPE="texto css">
H1.nuevaclase { color:red; }
.nuevaclase2 {color:blue;}
</STYLE>
</HEAD>
<BODY>
<H1 CLASS="nueva clase">Este texto aparece en rojo</H1>
<H1>Este texto aparece como un H1 normal</H1>
<H1 class="nuevaclase2">Este texto aparece en blue</H1>
<P class="nueva clase">Este texto aparece en rojo</P>
</BODY>
</HTML>
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 28/84
Se pueden establecer clases separadas. Una misma etiqueta HTML puede tener
diferentes "clases", permitiendo que un mismo elemento ofrezca diferentes estilos, por
ejemplo:
H1.clase1 {font: 15px; color: red;}
H1.clase2 {font: 15px; color: blue;}
H1.clase3 {font: 15px;color: green;}
Esto se transformaría a nivel de código:
<H1 CLASS="clase1 ">Este texto se vería en color rojo</H1>
<H1 CLASS="clase2">Este texto se vería en color blue</H1>
<H1 CLASS="clase3">Este texto se vería en color green</H1>
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 29/84
Identificadores
Ahora verás el atributo ID que tienen las etiquetas HTML con respecto a la definición
de estilos. Todas las etiquetas HTML pueden tener como parámetro la etiqueta ID seguida
de un nombre, por ejemplo:
Sintaxis de uso de atributo ID de las etiquetas HTML
<etiqueta ID="NombreReferencia"> ... </etiqueta>
Donde "NombreReferencia" debe ser único en el documento HTML (es decir, no
debe haber dos etiquetas con el mismo ID), puesto que la utilizarás para tratarla (si lo
necesitamos) desde JavaScript, por lo cual no debe haber confusión con el nombre como
referencia.
Para definir un estilo mediante un ID, usa la siguiente notación (en un
bloque de estilo o en la hoja externa):
#Nombre_del_ID {propiedad1:valor;...;propiedadN:valor}
Es decir, escribiendo # seguido del nombre que le queramos dar al ID, y definiendo el
estilo como ya sabemos: pares propiedad:valor separados por punto y coma y encerradosentre llaves.
Podremos definir todos los ID que queramos, pero cada ID sólo debe ser
asociado a una única etiqueta concreta de la siguiente forma:
<etiqueta ID="Nombre_del_ID"> ... </etiqueta>
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 30/84
Así identificas de forma única a esa etiqueta concreta, asignándole la definición del
estilo hecha en el bloque o en la hoja para ese ID, y además puedes tratarlo (por ejemplo,
cambiando algunas características del estilo definido) desde JavaScript, que usará ese
identificador para saber sobre quién ha de actuar, suponiendo que quisiéramos hacerlo.
Combinaciones
Los estilos se pueden combinar de múltiples maneras como puedes ver a
continuación:
Se puede asociar una misma declaración a varios selectores, usando comas entre ellos:
H1, H2, H3, H4, H5, H6 { color : red }
O varias declaraciones a un mismo selector, utilizando punto y coma:
H1 { color: red; text-align: center; }
O se pueden realizar ambas agrupaciones a la vez:
H1, H2, H3, H4, H5, H6 { color : red; text-align: center; }
Los comentarios dentro de las hojas de estilo comienzan con "/*" y terminan con "*/"; no
pueden ser anidados (uno dentro de otro) y todo su contenido es ignorado. Ejemplo:
H2 { color: yellow } /* Los subtítulos van en amarillo */
En CSS existe herencia. Las propiedades son heredadas por los elementos más internos,
por ejemplo:
BODY { color: blue; }
H1 { color: red; }
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 31/84
Capas
Capa fue el nombre que se empezó a utilizar para denominar a los elementos
creados con la etiqueta <div> usados para colocar en la página Web cualquier otroelemento (imagen, tabla, párrafo, lista...), existía también la etiqueta <layer> para el
navegador Netscape de donde viene la denominación de capas (layers en Inglés) ya que div
es la abreviatura de "división".
Si quieres agrupar varios elementos, utilizas el tag <div> o <span> . Esto marca un
bloque de contenido en tu pagina.
Poniendo un ejemplo, una página clásica con encabezado, una barra lateral,
contenido, y un pie. Puedes estructurarla con divs como aparece a continuación:
Nuestro codigo se vería algo así:
<div id="header">
aquí va el contenido del header
</div>
<div id="barra">
aquí va el contenido de la barra lateral</div>
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 32/84
<div id="contenido">
aquí va el contenido principal
</div>
<div id="pie">
aquí va el contenido del pie de página
</div>
Cada div puede contener otros divs, párrafos, imágenes o cualquier otro elemento, y
con CSS podemos definir sus propiedades, como color de fondo, bordes, tamaño,
posicionamiento, fuentes, etc.
Bloques y líneas
Para poder llevar a cabo la maquetación mediante CSS es necesario entender el
modelo de cajas. Existen dos tipos de cajas: block e inline . Un párrafo, por ejemplo, se
considera como un bloque, y por lo tanto por default se despliega como tal. Esto quiere decir
que un párrafo que siga a otro se desplegará así:
[parrafo1]
[parrafo2]
Un elemento como un <span> se considera como un elemento en linea, o inline, y
por lo tanto un span seguirá a otro linealmente, asi:
[span1] [span2]
Se puede cambiar el tipo de caja utilizando la propiedad display:block o
display:inline .
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 33/84
Atributos para capas
Antes que nada cabe decir que una capa puede tener cualquier atributo de estilos de
los que hemos visto en el manual de CSS. Así, el atributo color indica el color del texto de la
capa, el atributo font-size indica el tamaño del texto y así con todos los atributos ya vistos.
Ahora bien, existen una serie de atributos que sirven para indicar la forma, el tamaño
de las capas, la visibilidad, etc, que no hemos visto en capítulos anteriores y que veremos a
continuación.
Atributo position
Indica el tipo de posicionamiento de la capa. Puede tener dos valores, relative o
absolute.
- relative indica que la posición de la capa es relativa a el lugar donde se
estaba escribiendo en la página en el momento de escribir la capa con su
etiqueta
- absolute indica que la posición de la capa se calcula con respecto al punto
superior izquierdo de la página.
Atributo top
Indica la distancia en vertical donde se colocará la capa. Si el atributo position es
absolute, top indica la distancia del borde superior de la capa con respecto al borde superior
de la página. Si el atributo position era relative, top indica la distancia desde donde se
estaba escribiendo en ese momento en la página hasta el borde superior de la capa.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 34/84
Atributo left
Básicamente funciona igual que el atributo top, con la diferencia que el atributo left
indica la distancia en horizontal a la que estará situada la capa.
Atributo height
Sirve para indicar el tamaño de la capa en vertical, es decir, su altura.
Atributo width
Indica la anchura de la capa
Atributo visibility
Sirve para indicar si la capa se puede ver en la página o permanece oculta al
usuario. Este atributo puede tener tres valores.
- visible sirve para indicar que la capa se podrá ver.
- hidden indicará que la capa está oculta.
- inherit es el valor por defecto, que quiere decir que hereda la visibilidad de
la capa donde está metida la capa en cuestión. Si la capa no está metida
dentro de ninguna otra se supone que está metida en la capa documento,
que es toda la página y que siempre está visible.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 35/84
Atributo z-index
Sirve para indicar la posición sobre el eje z que tendrán las distintas capas de la
página. Dicho de otra forma, con z-index podemos decir qué capas se verán encima o
debajo de otras, en caso de que estén superpuestas. El atributo z-index toma valores
numéricos y a mayor z-index, más arriba se verá la página.
Atributo clip
Es un atributo un poco difícil de explicar. En concreto sirve para recortar
determinadas áreas de la capa y que no se puedan ver. Una capa que está visible se puederecortar para que se vea, pero que no se vea algún trozo de esta. El cliping se indica por
medio de 4 valores, con esta sintaxis.
rect (<top>, <right>, <bottom>, <left>)
Los valores <top>, <right>, <bottom> y <left> indican distancias que se pueden
apreciar en este esquema.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 36/84
Este es un ejemplo de capa que utiliza todos los atributos que hemos visto en este
artículo y alguno más para aplicar estilo a la capa.
<div style="clip: rect(0,158,148,15); height: 250px;
width: 170px; left: 10px; top: 220px; position: absolute; visibility:
visible;
z-index:10; font-size: 14pt; font-family: verdana; text-align: center;
background-color: #bbbbbb">
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 37/84
III. Javascript
Definición de Javascript
Introducción
JavaScript es un lenguaje de programación usado para crear páginas web
dinámicas. Un documento HTML en general está estructurado por las etiquetas de marcado
de dicho lenguaje, pero con la evolución de la Web, hoy en día es necesario añadir ciertos
comportamientos a nuestros documentos, para lo cual los documentos se apoyan delenguajes de programación.
El lenguaje JavaScript es un lenguaje interpretado, por lo que no necesita ser
compilado el código de este lenguaje para ejecutar los programas. Los programas escritos
bajo este lenguaje se pueden probar directamente en cualquier navegador sin necesidad de
aplicaciones intermediarias.
A pesar de llevar el nombre Java, no guarda relación directa con este
lenguaje, aunque legalmente JavaScript es una marca registrada de la empresa Sun4.
Inclusión de JavaScript en documentos XHTML.
Javascript puede ser integrado dentro de los documentos XHTML de una
manera muy flexible, a continuación verás tres métodos de hacer la inclusión de JavaScript.
JavaScript en un documento XHTML.
4 http://www.sun.com/suntrademarks/
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 38/84
Para incluir código JavaScript dentro del mismo documento XHTML debes
utilizar las etiquetas <script>…</script> en cualquier parte del documento. A pesar de que
puedes llevar a cabo la inclusión del código se recomienda por convención y buenas
prácticas de programación incluirla dentro de la sección de cabecera del documento
(<head>…</head>):
Para validar la página XHTML, debes añadir el atributo type a la etiqueta <script>.
Los valores que pueden ser incluidos dentro de la etiqueta type, son valores que ya se
encuentran estandarizados y en el caso de JavaScript, el valor correcto es text/Javascript.
Ejemplo de JavaScript en el mismo documento XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio documento</title><script type="text/javascript">
alert("Un mensaje de prueba");</script>
</head>
<body><p>Un párrafo de texto.</p>
</body>
</html>
Este método es empleado cuando defines algún bloque de código pequeño o en
caso de que desees agregar comportamientos específicos en un determinado documento
HTML. Uno de los problemas o inconvenientes que tendrás al usar los bloques de códigosescritos en el mismo documento, es sí deseas que dichos comportamientos definidos para
ese documento se apliquen a todos los documentos de un sitio, en ese caso debes de incluir
el bloque de código en cada uno de los archivos HTML en los que deseas que incluya dicho
comportamiento, en algunos casos puedes hacer cambios al código de algún bloque y
debes de actualizar dicho cambio para todos los documentos HTML que incluían el código
anterior a la modificación.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 39/84
JavaScript en un archivo externo.
Anteriormente viste que el código JavaScript se puede incluir directamente dentro de
los documentos HTML, ahora separarás el código de la estructura del documento HTML,esto es almacenando el código en un archivo separado con la extensión .js (Archivo
JavaScript) enlazandoló con el documento a través de la etiqueta <script>. Puedes crear
todos los archivos que requieras de JavaScript y cada documento XHTML puede enlazar
tantos archivos JavaScript como necesite.
Ejemplo:
Archivo JavaScript (código.js)
alert("Un mensaje de prueba");
Documento XHTML (index.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
<script type="text/javascript" src="/js/codigo.js"></script>
</head>
<body><p>Un párrafo de texto.</p>
</body>
</html>
En el tema anterior viste el atributo type, ahora es necesario definir otro
atributo llamado src , donde vas a indicar la URL correspondiente al archivo JavaScript quequieres enlazar, con cada etiqueta <script> solo puedes enlazar un solo único archivo, pero
puedes incluir tantas etiquetas como sean necesarias.
Estos archivos de tipo JavaScript son documentos normales de texto que
puedes escribir y editar en cualquier editor de texto (Notepad, Wordpad, etc).
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 40/84
La ventaja de usar este método de incluir JavaScript en un documento, está, en que
puedes reutilizar el mismo código en todas los documentos HTML que desees, y al
momento de llevar a cabo los cambios o actualizaciones al código no tendrás que actualizar
cada bloque por documento que lo referencie sino que los cambios se verán
automáticamente reflejados en cada una de las páginas.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 41/84
JavaScript en los elementos XHTML.
Este método puede ser el menos utilizado, y se basa en escribir código Javascript
dentro del código XHTML del documento:
JavaScript directo en las etiquetas XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Ejecutar JavaScript directamente en el código XHTML</title>
</head>
<body>
<p onclick="alert('Un mensaje de prueba')">Un párrafo de texto.</p></body></html>
El uso de este método presenta el problema de que ensucias de manera innecesaria
el código XHTML, y esto provoca que mantener el código JavaScript sea más difícil y
tedioso para el desarrollador.
Etiqueta <NOSCRIPT>
Existen navegadores que no cuentan con soporte completo de JavaScript, incluso
algunos navegadores ofrecen al usuario la opción de bloquear el navegador para que no
ejecute el código JavaScript, ya que puede representar una manera segura de navegar.
Cuando se presentan estos casos, si la página requiere tener activado el JavaScript para
que funcione de manera correcta, es necesario incluir un mensaje donde se indique al
usuario que es necesario habilitar o activar el JavaScript.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 42/84
Definición de DOM.
El Modelo de objetos del documento (Dom Document Object Model) es una forma de
representar los documentos estructurados de una manera jerárquica como un modelo
orientado a objetos.
DOM es el estándar del World Wide Consortium (W3C) para representar los
documentos estructurados de un modo neutral a la plataforma y al lenguaje
de programación.
DOM fue soportado inicialmente por los navegadores web para manipular loselementos en un documento HTML. Para evitar las incompatibilidades de
DOM en los diferentes navegadores, el W3C desarrolló la especificación
DOM.
A través del DOM es posible acceder y actualizar de manera dinámica el
contenido, estructura y el estilo de los documentos.
Figura . Estructura jerárquica del modelo DOM de un
documento HTML.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 43/84
DOM es un árbol que representa al documento visualizado en un navegador.
La funcionalidad del W3C DOM hace posible la creación de documentos web
extremadamente dinámicos.
Un documento está conformado por varios nodos, cada uno representa un
elemento del documento.
Un árbol establece una relación jerárquica entre los elementos.
Un ejemplo, es concebir el documento como un nodo que puede contener
nodos imágenes, los cuales pueden contener atributos (relación parent-child).
Figura . Especificación DOM de un documento
HTML.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 44/84
Escribir código Javascript
Sintaxis de JavaScript
La sintaxis de JavaScript es muy parecida a la del lenguaje de programación
JAVA, que a su vez es muy parecida a la del lenguaje C:
Las instrucciones terminan con un punto y coma (;).
Las instrucciones se pueden agrupar usando llaves ( {… } );
Se pueden insertar comentarios escribiendo dos barras inclinadas (//) al inicio de la
línea. Todo lo que sea escrito después de las dos barras inclinadas es interpretada como un
comentario y por tanto ignorado por el intérprete.
Se pueden utilizar los operadores matemáticos suma (+), resta (-), multiplicación (*),
división (/) y módulo (%), y también disponemos del autoincremento (++) y auto decremento
(--).
Se pueden concatenar varias cadenas utilizando el operador de suma (+).
Objetos de navegador de Javascript
Los objetos son los componente básicos de JavaScript, ya que son los
elementos que interactúan entre sí y con los usuarios, utilizando una serie de reglas
predefinidas. Entre los objetos JavaScript se incluyen elementos del navegador y el
documento HTML.
Los navegadores le ofrecen al programador multitud de características en
forma de un modelo jerárquico. A esta jerarquía se le denomina modelo de objetos del
navegador y a través de esta jerarquía es como se puede controlar características propias
del navegador desde que mensaje visualizar en la barra de estado hasta crear nuevaspáginas con el aspecto que desees.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 45/84
Cada objeto posee una serie de características (propiedades), y una lista de
funciones que puede realizar (métodos). Por ejemplo, una de las propiedades del
documento es la propiedad bgcolor (color de fondo), y podemos crear un script JavaScriptpara establecer el color de fondo de un documento HTML. Uno de los métodos del objeto
documento es write (escribir), y podemos crear un script JavaScript para escribir texto en
HTML.
Se pueden crear varias copias de un objeto, asignar a cada una propiedades
diferentes, y trabajar en los scripts utilizando las copias de los objetos. Cuando en un script
se utiliza un objeto seguido por uno de sus métodos o propiedades, y a continuación seescriben los atributos o propiedades de ese método.
Por ejemplo:
document.bgColor=”blue”
document.write(Bienvenido a mi página web)
Esto hace que el color de fondo del documento sea el azul y utiliza el método
document.write para escribir la frase “Bienvenidos a mi página web” en el documento de
HTML.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 46/84
Los eventos
El lenguaje JavaScript ha sido diseñado para funcionar con los programas
navegadores, y por lo tanto debe ser capaz de detectar todas las acciones que los usuarios
puedan realizar dentro de la ventana del navegador. Estas interacciones entre los usuarios y
el navegador se denominan “eventos”.
A continuación se muestran algunos ejemplos de eventos:
Evento Cuando
mouseover El usuario sitúa el puntero del ratón sobre
un enlace
mouseout El usuario desplaza el puntero del ratón
hacia fuera de un enlace.
click El usuario pulsa sobre una opción
submit El usuario envía un formulario para que
sea procesado
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 47/84
Manejadores de eventos.
JavaScript se puede utilizar para realizar distintas operaciones cuando se
produzca un evento determinado. Esto se consigue utilizando los manejadores de eventos,
que permiten enlazar distintas acciones a cada evento y hacer que una página web
responda a las acciones de los usuarios.
JavaScript incorpora algunos manejadores de eventos, aunque también podemos
crear manejadores a medida que se adapten a las necesidades de nuestras aplicaciones.
Entre los manejadores de eventos se incluyen:
Manejador Versión Se produce cuando...
onAbort 1.1 El usuario interrumpe la carga de una
imagen
onBlur 1.0 Un elemento de formulario, una
ventana o un marco pierden el foco
onChange 1.0 (1.1 para
FileUpload )
El valor de un campo de formulario
cambia
onClick 1.0 Se hace click en un objeto o
formulario
onDblClick 1.2 (no en Mac) Se hace click doble en un objeto o
formulario
onDragDrop 1.2 El usuario arrastra y suelta un objeto
en la ventana
onError 1.1 La carga de un documento o imagen
produce un error
onFocus 1.1 (1.2 para Layer ) Una ventana, marco o elemento de
formulario recibe el foco
onKeyDown 1.2 El usuario pulsa una tecla
onKeyPress 1.2 El usuario mantiene pulsada una tecla
onKeyUp 1.2 El usuario libera una tecla
onLoad 1.0 (1.1 para image) El navegador termina la carga de una
ventana
onMouseDown 1.2 El usuario pulsa un botón del ratón
onMouseMove 1.2 El usuario mueve el puntero
onMouseOut 1.1 El puntero abando una área o enlaceonMouseOver 1.0 (1.1 para area) El puntero entra en una área o
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 48/84
imagen
onMouseUp 1.2 El usuario libera un botón del ratón
onMove 1.2 Se mueve una ventana o un marco
onReset 1.1 El usuario limpia un formulario
onResize 1.2 Se cambia el tamaño de una ventanao marco
onSelect 1.0 Se selecciona el texto del campo
texto o área de texto de un
formulario
onSubmit 1.0 El usuario envía un formulario
onUnload 1.0 El usuario abandona una página
En la tabla anterior se muestra los manejadores de eventos que pueden utilizarse en
JavaScript, la versión a partir de la cual están soportados y su significado.
Ejemplo de evento
<INPUT TYPE="text" onChange="VerificaCampo(this)">
En el ejemplo VerificaCampo() corresponde a una función en JavaScript definida en
el documento HTML. Donde el identificador this es una palabra reservada del lenguaje, y se
refiere al objeto desde el cual se efectúa la llamada a la función (en este caso, el campo delformulario).
Manejador de evento Objetos para los que está definido
onAbort Image
onBlur Button, Checkbox, FileUpload, Layer, Password,
Radio, Reset, Select, Submit, Text, Textarea, window
onChange FileUpload, Select, Text, Textarea
onClick Button, document, Checkbox, Link, Radio, Reset,
Submit
onDblClick document, Link
onDragDrop window
onError Image, window
onFocus Button, Checkbox, FileUpload, Layer, Password,
Radio, Reset, Select, Submit, Text, Textarea, window
onKeyDown document, Image, Link, Textarea
onKeyPress document, Image, Link, Textarea
onKeyUp document, Image, Link, Textarea
onLoad Image, Layer, window onMouseDown Button, document, Link
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 49/84
onMouseMove Ninguno (debe asociarse a uno)
onMouseOut Layer, Link
onMouseOver Layer, Link
onMouseUp Button, document, Link
onMove window
onReset Form
onResize window
onSelect Text, Textarea
onSubmit Form
onUnload window
Métodos de eventos
Los siguientes métodos de eventos pueden utilizarse en JavaScript:
Métodos de evento Función que realizan
blur() Elimina el foco del objeto desde el que se llame
click() Simula la realización de un click sobre el objeto desde
el que se llame
focus() Lleva el foco al objeto desde el que se llame
select() Selecciona el área de texto del campo desde el que se
llame submit() Realiza el envío del formulario desde el que se llame
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 50/84
Variables
Las variables son estructuras de datos que, como su nombre indica, pueden
cambiar de contenido a lo largo de la ejecución de un programa.
Declaración de variables
Los nombres de las variables son sensibles a mayúsculas y minúsculas. Después de
eso el resto de los caracteres también puede incluir números.
Se puede o no utilizar el comando var para declarar variables.
Es posible asignar un valor a una variable cuando es declarada.
Declaración de tipo libre, es decir, no requiere de definir el tipo de variable.
var cadena01;Escuela = “Benito Juárez”;
_06contador = 48;
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 51/84
Declaración de arreglos (Array)
Los arreglos son espacios de memoria de almacenamiento contiguo que contienen
una serie de elementos del mismo tipo.
var miArreglo=new Array(3);
var miArreglo =new Array();miArreglo [0]="Saab";miArreglo [1]="Volvo";miArreglo [2]="BMW";
var miArreglo =new Array("Saab","Volvo","BMW");
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 52/84
Cuadros de dialogo y salidas de texto
Salidas de texto
Para dar salidas de texto en el documento es posible utilizar las opciones write y
writeln.
Sintaxis:
window.document.Write(“curso de Dreamweaver CS4”);
document.Write(“curso de Dreamweaver CS4”);
window.document.writeln(“desarrollo de sitios web”);
document.writeln(“desarrollo de sitios web”);
Los cuadros de dialogo permiten dar salidas de texto e interactuar con el usuario,
independientemente de la página HTML
Alert: despliega un mensaje junto con un botón aceptar.
Sintaxis:
alert(“mensaje del cuadro de dialogo”);
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 53/84
Confirm: muestra un mensaje y los botones aceptar y cancelar. Produce una
respuesta booleana (verdadero o falso) consecuencia de la respuesta del usuario.
Sintaxis:
confirm(“mensaje del cuadro de dialogo”);
respuesta = confirm ("¿Desea continuar?");
prompt: incluye un mensaje y un campo de entrada junto con los botones aceptar y
cancelar. El texto ingresado en el cuadro de texto se produce como respuesta de prompt al
pulsar en el botón aceptar
Sintaxis:
prompt(“mensaje del cuadro de dialogo”);
color = prompt("Cuál es tu color favorito?", "Verde");
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 54/84
Operadores Aritméticos.
Los operadores aritméticos realizan las operaciones aritméticas básicas que
podemos encontrar en cualquier calculadora básica.
Operador Descripción Ejemplo
+ Suma o concatenación 3 + 5;
(resultado 8)
Integ = 5;
“no. De integrantes ” + integ;
(resultado “no. De integrantes 5”)- Resta 9 – 4;
( resultado 5)
* Multiplicación 4 * 12;
( resultado 48)
/ División 15 / 4;
(resultado 3.35)
% Modulo (residuo). 4 % 3;
(resultado 1)
Operadores lógicos
Los operadores lógicos incluyen operadores binarios, es decir toman valores
boléanos como operandos y regresan valores boléanos.
Operador Descripción Ejemplo
&& AND lógico: regresa true cuando
ambos operandos son verdaderos; si
no regresa false.
45>1 && 12>1
( resultado true)
45>1 && 12<1
(resultado false)
|| OR lógico: representa true si alguno
de los operandos es true. Sólo
regresa false cuando ambos
operandos son falsos.
45<1 && 12>1
(resultado true)
45<1 && 12<1
(resultado true)
! NOT lógico: regresa true si el
operando es falso y false si el
operando es verdadero. Este es un
operador unitario y precede al
operando
X = true;
!X;
( X vale false)
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 55/84
Operadores de asignación
Los operadores de asignación permiten establecer el valor de las variables.
Operador Descripción Ejemplo= Asigna el valor del operando derecho
al operando izquierdo
X = 5;
( X vale 5 )
+= Suma los operandos izquierdo y
derecho y asigna el resultado al
operando izquierdo.
X = 7;
X += 45;
( X vale 52 )
-= Resta el operando derecho del
operando izquierdo y asigna el
resultado al operando izquierdo.
X = 30;
X -= 45;
( X vale 15 )
*= Multiplica los datos operandos y
asigna el resultado al operando
izquierdo
X = 10;
X *= 6;
( X vale 60 )
/= Divide el operando izquierdo entre el
operando derecho y asigna el valor
al operando izquierdo
X = 66;
X /= 3;
( X vale 22 )
%= Divide el operando izquierdo entre el
derecho y asigna el residuo al
operando izquierdo
X = 7;
X %= 4;
( X vale 3 )
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 56/84
Operadores de comparación.
Los operadores de comparación son similares a los operadores lógicos en que
regresan valores boléanos; pero a diferencia de los operadores lógicos, no requierenque sus operandos sean valores boléanos.
Operador Descripción Ejemplo
== Regresa true si los operandos
son iguales
1 == 1
( resultado true)
!= Regresa true si los operandos
son diferentes
“comida” != “comer”
( resultado true)
> Regresa true si el operando
izquierdo es mayor que el
operando derecho
3 > 5
(resultado false)
< Regresa true si el operando
izquierdo es menor que el
operando derecho
3 < 1
(resultado false)
>= Regresa true si el operando
izquierdo es mayor o igual
que el operando derecho
3 >= 2
(resultado true)
<= Regresa true si el operando
izquierdo es menor o igual
que el operando derecho
5 <= 5
(resultado true)
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 57/84
Estructuras de control
Condicional
(Condición): valor 1; valor 2;
Permite realizar toma de decisiones de forma simplificada. Al ser true la
condición realiza las operaciones del valor 1, de lo contrario realizara las operaciones
del valor 2.
if – else (si – de lo contrario)
Realiza la misma función que el condicional anterior, presentándose como
mayor diferencia la posibilidad de colocar o no el else.
Sintaxis
if (condición){
//Código… }else{
//Codigo… }
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 58/84
Switch
Toma distintas decisiones en función de distintos estados de la variable. Su
sintaxis es la siguiente:
switch(variable) {
case 1: //código
break;
case 2:
//código break;
default: //código por omisión
}
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 59/84
Ciclos de repetición
Los ciclos o bucles nos permiten hacer acciones repetidamente hasta que se
indique lo contrario.
For
El ciclo for cuenta con tres parámetros de operación los cuales son utilizados
para mantener el control del flujo.
El primer parámetro se utiliza para iniciar el contador, el segundo parámetro es
la condición para repetir y el último parámetro es el valor de actualización.
for(var num=1; num < 10; num++){
//operación;}
WhileAdemás del ciclo for, el ciclo while proporciona una función similar, pero diferente. La
estructura básica de un ciclo while es:
while(condición){
//código}
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 60/84
Funciones
Las funciones es código es agrupado para desempeñar una tarea específica (o
función) en una unidad individual que puede usarse en forma repetida a lo lardo del
programa.
Los nombres de las funciones:
Para enviar parámetros (valores) a la función en específico, se colocan entre
paréntesis separados por comas.
Los nombres de las variables son sensibles a mayúsculas y minúsculas.
Después de eso el resto de los caracteres también puede incluir números.
Declaración de tipo libre, es decir, no requiere de definir el tipo de variable.
function nombre_funcion(parametro1, parametro2…, parametroN){
//Código}
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 61/84
IV. Javascript Avanzado
Try-catch
Existe una estructura en JavaScript que nos permite lanzar un código y en caso de
que ocurra un error poder manejar este error y controlar el flujo del programa, con el fin de
evitar el máximo de errores posibles.
try {code} catch (error){
code} finally {
code}
Acceso a los elementos del documento, (manipular DOM
con Javascript)
Mediante Javascript es posible manipular el documento HTML y tener acceso a sus
elementos, para poder hacer esto existen algunas funciones que nos permiten desempeñar
estas tareas.
Cada elemento en el documento (especificado por medio de las etiquetas) cuentan
con propiedades y eventos personales, estas dos características realizan las mismas tareas
que en otros lenguajes de programación.
Para interactuar con los elementos de documento, el objeto window nos ofrece el
acceso a estas por medio de las siguientes funciones:
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 62/84
getElementById()
Permite el acceso a un elemento especifico mediante el id asignado.
Documento:<input type="text" id="txtNombre" />
Javascript:Var Nombre = document.getElementById(‘txtNombre’);
getElementByName()
Retorna el elemento especificado por medio de la propiedad nombre.
Documento:<input type="text" name="txtDireccion" />
Javascript:Var dirección = document.getElementByName(‘txtDireccion’);
getElementByTagName()
Regresa un array de los elementos con el nombre de esa etiqueta.
Ejemplo
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 63/84
var div1 = document.getElementById("div1");
var div1Paras = div1.getElementsByTagName("p");
Insertar contenido html mediante innerHTML
innerHTML permite insertar contenido html en formato de cadena en elementos
específicos.
document.getElementById(“div1”).innerHTML = “<h1>inicio de cursos</h1><p>semana 32…</p>”;
<div id=”div1”> <h1> inicio de cursos </h1>
<p> semana 32…</p> </div>
Modificar aspectos de los elementos (style, className)
Javascript también permite la modificación del aspecto de los elementos, esto es por
medio de las propiedades style y className.
style nos permite modificar es estilo afectando específicamente la propiedad CSS del
elemento.
document.getElementById(‘divContenido').style.display = "none";
className contiene el valor de la clase css que está afectando a ese elemento.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 64/84
//CSS
. estiloTexto{
color:#004080;font-size:12px;font-family:Arial, Helvetica, sans-serif
}
//Javascript
document.getElementById(‘divContenido’).className = “estiloTexto”;
XML
La tecnología XML busca dar solución al problema de expresar informaciónestructurada de la manera más abstracta y reutilizable posible.
Estructura simple, similar al html (utiliza etiquetas y propiedades).
La estructura es estrictamente jerarquica, en donde debe existir un elemento
principal que contiene a todos los demás elementos.
Los elementos pueden contener atributos y estos deben de contenerse entre
comillas simples o dobles.
Xml es sensible a mayúsculas y minúsculas.
<Mensaje><Remitente>
<Nombre>Nombre del remitente</Nombre><Mail> Correo del remitente </Mail>
</Remitente><Destinatario>
<Nombre>Nombre del destinatario</Nombre>
<Mail>Correo del destinatario</Mail></Destinatario>
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 65/84
<Texto><Asunto>
Este es mi documento con una estructura muy sencillano contiene atributos ni entidades....
</Asunto><Parrafo>
Este es mi documento con una estructura muy sencillano contiene atributos ni entidades....
</Parrafo></Texto> </Mensaje>
Conectando XML y Javascript (objeto XMLHttpRequest)
Un objeto XMLHttpRequest es una instancia de una API que nos permite la
transferencia de datos en formato XML desde los script del navegador ( JavaScript, JScrip,
VBScript ... ) a los del servidor ( PHP, Perl, ASp, Java ... ) e inversamente.
Para poder establecer una comunicación asíncrona Javascript implemento el objeto
XMLHttpRequest que permite obtener información externa sin necesidad de mostrarlainmediatamente en pantalla.
1. Instanciar el objeto
2. Configurar y abrir la petición
3. Definir una función de Javascript que se encargue de administrar la evolución
de la petición
4. Enviar la petición
5. Manipular el estado de la petición y en el caso correcto, recibir los datos.
Sintaxis:
instancia = new XMLHttpRequest();
Métodos de XMLHTTPrequest
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 66/84
OPEN
El método open configura la petición y la deja lista para enviarla.
instancia.open(método, url, asincronismo [, usuario, contraseña]);
SEND
El método send se encarga de enviar la petición una vez que se configuró el método
open.
instancia.send(null);
ABORT
El método abort aborta la petición en curso.
instancia.abort();
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 67/84
Propiedades de XMLHTTPrequest
readyState
Esta propiedad de solo lectura retorna un código numérico indicado su estado.
Código Estado Descripción
0 Sin inicializar El requerimiento sólo fue
instanciado. Muchos
navegadores no manejan
este código y utilizan
directamente el siguiente.
1 Cargando El requerimiento se configurópero todavía no se envió.
2 Cargado E requerimiento se envió o se
está enviando, aunque
todavía no tenemos
respuesta alguna del servidor
3 Interactivo El servidor ya respondió la
petición ya tenemos
disponibles las cabeceras
pero el contenido todavía se
está descargando.
4 Completo La petición ya finalizó y elcontenido está completo.
Status
La propiedad status devuelve el código HTTP que nos devolvió el servidor.
Código Descripción200 La petición se pudo procesar en forma correcta
404 La url que solicitamos no existe
500 Error interno del servidor
400 La petición enviada al servidor es errónea. Hay algún inconveniente con
las cabeceras o con la información POST enviada
403 No tenemos permiso de acceder al recurso en el servidor
414 La url pedida es muy larga.
503 El servidor está temporalmente no disponible
ResponseText
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 68/84
Esta propiedad de sólo lectura devuelve una cadena con el contenido del cuerpo
devuelto por el servidor.
ResponseXML
Si la respuesta de servidor es un XML válido se puede utilizar esta propiedad para
recibir el objeto xml en javascript.
Onreadystatechange
Evento del XMLHttpRequest que se activa al momento de finalizar la petición, es laforma de saber que la comunicación ha finalizado.
Les he asignada el nombre de una función para su procesamiento.
Ejemplo:
instancia.onreadystatechange = funcionRespuesta;
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 69/84
V. Framework Spry
¿Qué es el framework de Spry?El framework de Spry es una biblioteca Javascript y CSS que permite crear páginas
Web más completas. Puede utilizar este framework para visualizar datos XML y crear
elementos de página interactivos que muestren datos dinámicos si necesidad de actualizar
la página entera.
Acerca de los widgets de Spry
Un widget de Spry es un elemento de página que permite la interacción del usuario y,
por tanto, ofrece una experiencia más completa. Un widget de Spry consta de las siguientes
partes:
Estructura de widget
Bloque de código HTML que define la composición estructural del widget.
Comportamiento del widget
Javascript que controla la respuesta del widget a los eventos iniciados por el usuario.
Estilo del widget
CSS que especifica el aspecto del widget.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 70/84
Selección/cambio de la carpeta predeterminada de activosde Spry.
Cuando se inserta un widget, conjunto de datos o efecto de Spry en una página
guardada, Dreamweaver crea un directorio SpryAssets en el sitio y guarda los
correspondientes archivos Javascript y CSS en esa ubicación. Puede cambiar la ubicación
predeterminada en la que Dreamweaver guarda los activos de Spry si prefiere guardarlos en
otro lugar.
1. Seleccione Sitio > Administrar sitios.2. Seleccione el sitio en el cuadro de diálogo Administrar sitios y haga clic en
Editar.
3. Seleccione la categoría Spry en el cuadro de diálogo Definición del sitio.
4. Introduzca la ruta de la carpeta que desea utilizar para los activos de Spry y
haga clic en Aceptar. También puede hacer clic en el icono de carpeta para
localizar una ubicación.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 71/84
Inserción de un widget de Spry
Seleccione Insertar > Spry y, a continuación, seleccione el widget que desea insertar.
Cuando inserta un widget, Dreamweaver incluye automáticamente los archivos
Javascript y CSS de Spry necesarios en el sitio al guardar la página.
Selección de un widget de Spry
Mantenga el puntero del ratón sobre el widget hasta que vea el contorno azul en la
ficha del mismo.
Haga clic en la ficha del widget en la esquina superior izquierda del widget.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 72/84
Aplicación de estilo a un widget de Spry
Localice el archivo CSS correspondiente al widget en la carpeta SpryAssets del sitio
y edítelo en función de sus preferencias. Para más detalles sobre cómo aplicar estilo a
widgets específicos, consulte las secciones de personalización correspondientes para cada
widget.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 73/84
SPRY MENU
Composición del Spry menu
Un Spry menu es un conjunto de botones de menú de navegación que muestransubmenús cuando el visitante de un sitio sitúa el puntero del ratón sobre uno de ellos. Las
barras de menús permiten visualizar una gran cantidad de información de navegación en un
espacio reducido, y ofrecen a los visitantes una idea de lo que está disponible en el sitio sin
necesidad de realizar una navegación exhaustiva.
Dreamweaver permite insertar dos tipos de widgets de barra de menús: verticales y
horizontales.
Menú Horizontal
Menú Vertical
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 74/84
Inserción del widget de barra de menús
1. Seleccione Insertar > Spry > Barra de menús de Spry.
2. Seleccione Horizontal o Vertical y haga clic en Aceptar.
Nota:
También puede insertar un widget de barra de menús a través de
la categoría Spry del panel Insertar.
Adición de un elemento de menú principal
1. Seleccione un widget de barra de menús en la ventana de documento.
2. En el inspector de propiedades, haga clic en el botón más situado sobre la primera
columna.
3. (Opcional) Para cambiar el nombre del nuevo elemento de menú, modifique el texto
predeterminado en la ventana de documento o en el cuadro Texto del inspector de
propiedades.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 75/84
Adición de un elemento de submenú
1. Seleccione un widget de barra de menús en la ventana de documento.
2. En el inspector de propiedades, seleccione el nombre del elemento de menú
principal que desea añadir al submenú.
3. Haga clic en el botón más sobre la segunda columna.
4. (Opcional) Para cambiar el nombre del nuevo elemento de submenú, modifique el
texto predeterminado en la ventana de documento o en el cuadro Texto del
inspector de propiedades
Eliminación de un elemento de menú principal o submenú
1. Seleccione un widget de barra de menús en la ventana de documento.
2. En el inspector de propiedades, seleccione el nombre del elemento de menú
principal o submenú que desea eliminar y haga clic en el botón menos.
Cambio del orden de los elementos de menú
1. Seleccione un widget de barra de menús en la ventana de documento.
2. En el inspector de propiedades (Ventana > Propiedades), seleccione el nombre del
elemento de menú que desea cambiar de orden.
3. Haga clic en las flechas arriba o abajo para mover el elemento de menú en la
dirección deseada.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 76/84
Cambio del texto de un elemento de menú
1. Seleccione un widget de barra de menús en la ventana de documento.
2. En el inspector de propiedades (Ventana > Propiedades), seleccione el nombre delelemento de menú cuyo texto desea cambiar.
3. Realice los cambios en el cuadro Texto.
Vinculación de un elemento de menú
1. Seleccione un widget de barra de menús en la ventana de documento.
2. En el inspector de propiedades (Ventana > Propiedades), seleccione el nombre del
elemento de menú al que desea aplicar un vínculo.
3. Escriba el vínculo en el cuadro de texto Vínculo o haga clic en el icono de carpeta
para buscar un archivo.
Asignación de un atributo de destino para un elemento de menú
El atributo de destino especifica dónde se debe abrir una página vinculada. Por
ejemplo, puede asignar un atributo de destino a un elemento de menú para que la páginavinculada se abra en una nueva ventana del navegador cuando el visitante haga clic en el
vínculo. Si utiliza conjuntos de marcos, puede especificar también el nombre de un marco en
el que desea que se abra la página vinculada.
1. Seleccione un widget de barra de menús en la ventana de documento.
2. En el inspector de propiedades (Ventana > Propiedades), seleccione el nombre del
elemento de menú al que desea asignar un atributo de destino.
3. Introduzca uno de los cuatro atributos en el cuadro Destino:
_blankAbre la página vinculada en una nueva ventana del navegador.
_self Carga la página vinculada en la misma ventana del navegador. Ésta es la opción
predeterminada. Si la página se encuentra en un marco o conjunto de marcos, la página se
carga dentro de ese marco.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 77/84
_parentCarga el documento vinculado en el conjunto de marcos padre inmediato del
documento.
_topCarga la página vinculada en la ventana superior de un conjunto de marcos.
Desactivación de estilos
Puede desactivar los estilos de un widget de barra de menús para ver mejor la
estructura HTML del widget en la vista Diseño. Por ejemplo, al desactivar los estilos, los
elementos de la barra de menús se muestran en la página en una lista con viñetas, en lugar
de como elementos con estilo de la barra de menús.
1. Seleccione un widget de barra de menús en la ventana de documento.
2. Haga clic en el botón Desactivar estilos en el inspector de propiedades (Ventana >
Propiedades).
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 78/84
SPRY ACCORDION
Composición del Spry Accordion
Un Spry Accordion es un conjunto de paneles que pueden contraerse y que tienen
capacidad para almacenar una gran cantidad de contenido en un espacio reducido. Los
visitantes pueden hacer clic en la ficha del panel para mostrar u ocultar el contenido
almacenado en el acordeón. Los paneles del acordeón se amplían o contraen en función de
las fichas que elijan los visitantes. Solamente puede haber un panel de contenido abierto y
visible en un acordeón en cada momento.
Ficha de panel acordeón
Contenido del panel
acordeón
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 79/84
Inserción del widget de acordeón
Seleccione Insertar > Spry > Acordeón de Spry.
Nota:
También puede insertar un widget de acordeón a través de la
categoría Spry del panel Insertar.
Spry de acordeón
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 80/84
Adición de un panel a un widget de acordeón
1. Seleccione un widget de acordeón en la ventana de documento.
2. En el inspector de propiedades (Ventana > Propiedades), haga clic en el botón
Más (+) de Paneles.
3. (Opcional) Seleccione el texto del panel en la vista Diseño y modifíquelo para
cambiar su nombre.
Eliminación de un panel de un widget de acordeón
1. Seleccione un widget de acordeón en la ventana de documento.
2. En el menú Paneles del inspector de propiedades (Ventana > Propiedades),
seleccione el nombre del panel que desea eliminar y, a continuación, haga clic en
el botón Menos (-).
Agregar panel
Eliminar panel
Flechas de orden
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 81/84
Apertura de un panel para su edición
Siga uno de estos procedimientos:
• Pase el puntero del ratón por la ficha del panel que desea abrir en la vista Diseño y,a continuación, haga clic en el icono de ojo que aparece a la derecha de la ficha.
• Seleccione un widget de acordeón en la ventana de documento y, a continuación,
haga clic en el nombre del panel para editarlo en el menú Paneles del inspector de
propiedades (Ventana > Propiedades).
Cambio del orden de los paneles
1. Seleccione un widget de acordeón en la ventana de documento.
2. En el inspector de propiedades (Ventana > Propiedades), seleccione el
nombre del panel Acordeón que desea mover.
3. Haga clic en las flechas arriba o abajo para mover el panel en la direccióndeseada.
Personalización del widget de acordeón
Aunque el inspector de propiedades permite realizar cambios simples a un widget de
acordeón, no admite tareas de estilo personalizadas. Puede modificar las reglas CSS de un
widget de acordeón y crear un acordeón con el estilo que desee.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 82/84
SPRY TAB
Composición del Spry Tab
Un Spry Tab o de paneles en fichas es un conjunto de paneles que pueden
almacenar contenido en un espacio reducido. Los visitantes pueden hacer clic en la ficha del
panel para mostrar u ocultar el contenido almacenado en los paneles en fichas a los que
desean acceder. Los paneles del widget se amplían o contraen en función de las fichas que
elijan los visitantes. Solamente puede haber un panel de contenido abierto en un widget de
paneles de fichas en cada momento.
Inserción del widget de paneles en fichas
Seleccione Insertar > Spry > Paneles en fichas de Spry.
Ficha
Contenido
Spry de paneles de fichas
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 83/84
Adición de un panel a un widget de paneles en fichas
1. Seleccione un widget de paneles en fichas en la ventana de documento.
2. En el inspector de propiedades (Ventana > Propiedades), haga clic en el botónmás (+) de Paneles.
3. (Opcional) Seleccione el texto de la ficha en la vista Diseño y modifíquelo para
cambiar su nombre.
Eliminación de un panel de un widget de paneles en fichas
Seleccione un widget de paneles en fichas en la ventana de documento.
En el menú Paneles del inspector de propiedades (Ventana > Propiedades),
seleccione el nombre del panel que desea eliminar y, a continuación, haga clic en el
botón menos (-).
Apertura de un panel para su edición
Siga uno de estos procedimientos:
Pase el puntero del ratón por la ficha del panel que desea abrir en la vista
Diseño y, a continuación, haga clic en el icono de ojo que aparece a la
derecha de la ficha.
Seleccione un widget de paneles en fichas en la ventana de documento y, a
continuación, haga clic en el nombre del panel que desea editar en el menú
Paneles del inspector de propiedades (Ventana > Propiedades).
Cambio del orden de los paneles
Seleccione un widget de paneles en fichas en la ventana de documento.
5/11/2018 AJAX Manual - slidepdf.com
http://slidepdf.com/reader/full/ajax-manual 84/84
En el inspector de propiedades (Ventana > Propiedades), seleccione el
nombre del panel que desea mover.
Haga clic en las flechas arriba o abajo para mover el panel en la direccióndeseada.
Definición del panel abierto predeterminado
Puede definir el panel del widget de paneles en fichas que se abre de forma
predeterminada al abrir la página en un navegador.
Seleccione un widget de paneles en fichas en la ventana de documento.
En el inspector de propiedades (Ventana > Propiedades), seleccione el panel
que desea configurar para que se abra de forma predeterminada en el menú
emergente Estado predeterminado.