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



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



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



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



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.



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.



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



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/.

http://www.maestrosdelweb.com/editorial/ajax/

http://www.maestrosdelweb.com/editorial/rubyonrails/

http://www.maestrosdelweb.com/editorial/redessociales/

http://www.maestrosdelweb.com/editorial/redessociales/

http://www.maestrosdelweb.com/editorial/rubyonrails/

http://www.maestrosdelweb.com/editorial/ajax/



¿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.



¿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



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.



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.



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.



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






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).



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">



</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.



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" >



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



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>



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.



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



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.



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 {


}

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 {


}

El signo > deja libre a todos los párrafos que descienden directamente de un div,

actuando únicamente sobre los que desciendan directamente del body.



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


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


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">



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">  </style>

</head>

<body> aqui el contenido de la pagina

</body>

</html>



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>



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>



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>



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>



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; }



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>



<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 .



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.



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.



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.



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">



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/



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.



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">


<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).



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.



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">


<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.



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.



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.



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.



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.



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



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



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



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



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;



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");



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”);



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");



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.


&& 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)



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 )



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.


== 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)



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… }



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

}



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}



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}



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:



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



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.



//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>



<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



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();



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



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;



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.



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.



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.



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.



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



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.



Adición de un elemento de submenú


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ú


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ú


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.



Cambio del texto de un elemento de menú


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ú



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.



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.



_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.


2. Haga clic en el botón Desactivar estilos en el inspector de propiedades (Ventana >

Propiedades).



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



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



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


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



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


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.



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



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




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.


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.

Documents

AJAX Manual