HtmlDinamico Javascript
Cargado por
7che9HtmlDinamico Javascript
Cargado por
7che9INSTITUTO NACIONAL DE ADMINISTRACIÓN PÚBLICA.
Plan Interadministrativo de Formación Continua en el Área de las
Tecnologías de la Información y las Comunicaciones
HTML DINÁMICO
JAVASCRIPT
Estilos, JavaScript, Eventos,
Modelo de Objetos Dom.
Curso TIC 0290 – 1
1
UNIDAD Introducción al HTML Dinámico. Hojas
DIDÁCTICA 1 de Estilo
Índice
− Introducción
− Objetivos
− Esquema de Contenidos
− Contenidos
o Lección 1. Definición HTML Dinámico
o Lección 2. Hojas de Estilo. Sintaxis
o Lección 3. Propiedades definibles mediante estilos
o Lección 4. Capas y Posicionamiento
− Conclusiones
− Glosario de términos
− Bibliografía
2
Esquema de Contenidos
Hojas de Estilo
Html
Dinámico Propiedades Posicionamient
UD. 2
U.D. 3
Introducción
En esta unidad didáctica vamos a estudiar qué se entiende por HTML Dinámico,
que utilidad tiene está tecnología y en que se basa.
Aprenderemos a diferenciar las aplicaciones de cliente de las aplicaciones de
servidor, y a distinguir aquellas tecnologías que con propósito favorito a las del
HTML Dinámico, sin embargo no están includas en este concepto.
También veremos la primera de las técnicas que forma parte del HTML
Dinámico, las Hojas de Estilos.
Objetivos
− Conocer en que consiste el HTML Dinámico
− Diferenciar las tecnologías de cliente de las de servidor
− Diferenciar dentro de las tecnologías de cliente, cuales son HTML Dinámico
y cuales no
− Saber definir estilos
− Conocer las caraterísticas de apariencia mas importantes definibles
mediante estilos
− Conocer las características de posicionamiento y visibilidad definibles
mediante estilos.
3
Lección 1 Definición de HTML Dinámico
Índice
− Introducción
− Objetivos
o Apartado 1. HTML estático
o Apartado 2. Definición de HTML Dinámico
o Apartado 3. Usos del HTML dinámico
o Apartado 4. Tecnologías de cliente vs. tecnologías de servidor
o Apartado 5. Que no es HTML dinámico
− Ejercicios de autocomprobación
− Práctica
− Conclusión
Introducción
En esta lección vamos a definir lo que es HTML Dinámico y a describir
brevemente las técnicas que lo forman. Vamos a diferenciar claramente el
HTML Dinámico del HTML estático, de las tecnologías de servidor y de otras
tecnologías de cliente que no se consideran como tal. Vamos a mostrar que
aplicaciones tiene HTML Dinámico y para que se puede usar.
Objetivos
− Saber distinguir el HTML dinámico del HTML estático
− Saber distinguir el HTML dinámico de otras tecnologías de cliente
− Saber distinguir el HTML dinámico de las tecnologías de servidor
4
Apartados
Apartado 1. Html estático
HTML, que es el acrónimo de Hypertext Markup Language, debe quedar claro
que no es un lenguaje de programación, sino un formato de
representación.
El formato HTML permite indicar a los navegadores como queremos que se
visualice la información que hemos introducido en la página. Para ello utiliza
etiquetas, que a su vez están afectadas por propiedades
Aunque el formato HTML permite integrar en la visualización de una página
texto, vínculos y elementos multimedia, el fichero fuente o sin procesar es
un archivo de texto.
Salvo contadas excepciones, las etiquetas tienen dos partes, una marca de
comienzo, y una marca de fin. El texto contenido entre la marca de comienzo y
la de finalización, se vé afectado por la etiqueta y sus propiedades.
La sintaxis de la marca de comienzo es:
<nombre_de_etiqueta [propiedades]>
donde nombre_de_etiqueta tiene que ser alguna de las etiquetas del formato
HTML. En este sentido conviene indicar que hay diferencias entre las etiquetas
que reconocen los navegadores del mercado. Por compatibilidad, conviene no
utilizar etiquetas que sólo se muestren correctamente en un navegador o que
tengan comportamientos diferentes dependiendo del navegador.
la sintaxis de la marca de fin es:
</nombre_de_etiqueta>
donde nombre_de_etiqueta debe coincidir con el indicado en la marca de
comienzo que se está cerrando.
Ejemplos de etiquetas html son
<head></head> que marca la cabecera de la página con metainformación
acerca del contenido que vendrá a continaución, y que normalmente no se
muestra
5
<a></a> que define un vínculo o enlace a otra página
<b></b> que permite delimitar un texto como mostrado en negrita.
Las propiedades permiten establecer características de las etiquetas, o
particularizar aún mas el formato de la parte de la página afectada por la
etiqueta.
La sintaxis de las propiedades es la siguiente:
propiedad="valor"
donde propiedad debe ser un nombre de propiedad válida para la etiqueta
donde esté incluida, y valor uno de sus valores admitidos. Si una etiqueta tiene
varias propiedades, éstas irán separadas por espacios.
Ejemplos de etiquetas con propiedades son:
<a href="[Link] aquí para cambiar de
página</a>. En este ejemplo la propiedad href, que aplica a las etiquetas<a> de
enlaces, permite definir cual va a ser la página que se mostrará cuando se
pinche en el texto afectado por la etiqueta.
<body text="white" bgcolor="blue"> En este ejemplo, las etiquetas definen el
color con el que se mostrará el texto de la página, y el color de fondo de la
misma.
Cuando un navegador recibe un fichero en formato HTML, va leyendo de arriba
a abajo el texto que contiene, y va mostrando en pantalla el contenido de
acuerdo al formato establecido por las etiquetas y sus propiedades. Una vez
mostrado todo el contenido, "cargada" la página, la apariencia de esta
permanece invariante mientras no se cambie a otra página.
Apartado 2. Definición de HTML Dinámico
El HTML dinámico consiste en la combinación de una serie de técnicas y
capacidades, incluidas en los navegadores, para construir páginas web
dinámicas.
Una página web dinámica es aquella cuyo comportamiento cambia con el
tiempo.
Es una tecnología basada en el cliente, (navegador), que permite modificar el
6
aspecto de la página web sin necesidad de recargarla.
Antes de que los navegadores soportaran el html dinámico, las páginas
permanecían estáticas, y para modificar su apariencia era necesario pedir otra
página con las modificaciones requeridas. Además de aumentar el tráfico de la
red, esto implica tiempo de espera para los usuario.
Las técnicas que conforman el HTML dinámico, y que veremos a lo largo de
este curso son:
• Hojas de estilo (css)
Adición a HTML, que permite separar el modo de presentación de la página
del contenido.
Utilizando HTML estático, es necesario definir en cada etiqueta las
propiedades de formato que se aplicarán al contenido. Mediante las hojas de
estilo podemos definir los valores de las propiedades que se aplicarán a
varias etiquetas, o a todas las etiquetas iguales.
CSS-P. Es el acrónimo de Posicionamiento con Hojas de Estilo en Cascada.
Es una extensión de las hojas de estilo, que permite tener control a nivel de
pixel, acerca del posicionamiento de cada uno de los elementos de la
página.
• Javascript
Es un lenguaje de programación, interpretado por el navegador, que
permite ejecutar instrucciones y manipular los elementos de la página
• Captura y manejo de eventos
Capacidad para asociar funciones JavaScript en respuesta a las
acciones que realiza el usuario sobre la página Web
• Modelo de Objetos de Documento (DOM)
Jerarquía de objetos incluida en los navegadores, que estructura los
elementos de una página Web de acuerdo a una serie de clases y
propiedades, modificables vía código.
Como aprenderemos a lo largo del curso, la aplicación del HTML Dinámico
7
consiste básicamente en ejecutar código Javascript, en respuesta a eventos
producidos por el usuario, para modificar las propiedades de los objetos DOM
definidos mediante etiquetas HTML con estilos.
Apartado 3. Usos del HTML Dinámico
Como hemos visto, el HTML dinámico permite cambiar la apariencia de la
página sin necesidad de recargarla. Este cambio de aspecto normalmente se
produce como respuesta a alguna acción del usuario, como por ejemplo pulsar
un botón, o seleccionar una opción de menú.
Por poner algunos ejemplos, algunos usos comunes del HTML dinámico son:
• Creación de menús y submenús
• Efectos visuales, como carruseles de imágenes, resaltados al pasar el ratón
por encima, etc.
• Validación de formularios. Esta funcionalidad es muy útil para evitar recargas
y tiempos de espera del usuario.
Como es sabido, los formularios son los puntos de entrada donde se piden
datos a los visitantes de la página. Estos datos son enviados luego al
servidor para su proceso, y en función de los mismos se tomarán unas
acciones, como almacenarlos en la base de datos, enviar un correo, darle de
alta en una aplicación, etc.
Una buena práctica de programación, consiste en acercar lo máximo posible
la validación a la entrada de datos. Si el usuario introduce datos erróneos,
por ejemplo una fecha imposible, el HTML Dinámico permite rechazar esa
entrada sin necesidad de enviarla al servidor. No obstante, hay que tener en
cuenta que hay datos que se pueden validar en el cliente, y otros no. Por
ejemplo, se puede validar mediante HTML Dinámico que un DNI está bien
formado, pero no si dicho DNI está dado de alta en nuestra base de datos.
Lo recomendable en cualquier caso, es realizar las validaciones en los dos
extremos; validar que está bien formado cuando el cliente lo teclea en el
formulario por primera vez, y hacer la misma validación antes de introducirlo
en la base de datos, independizando así el control de entrada a la BD de los
8
distintos interfaces de cliente que pueda tener.
• Gestión de páginas y marcos. Mediante HTML Dinámico podemos abrir
otras instancias del navegador para mostrar otras páginas cuando el usuario
pincha algún enlace, (y a veces también cuando no quiere!!!).
Apartado 4. Tecnologías de cliente vs. tecnologías de servidor.
Debe quedar claro que todas las técnicas utilizadas en HTML Dinámico se
ejecutan o están incluidas en el navegador, y por tanto tienen efecto cuando el
código HTMLD ya ha salido del servidor, y ha llegado al PC del usuario.
Por tanto, mediante HTML Dinámico no se puede realizar ninguna acción que
interactúe con datos ubicados en el sitio Web desde el que se envía la
información, como listas de usuarios, contraseñas, productos, precios, etc.
Mediante tecnologías de servidor se pueden generar también páginas que se
generan dinámicamente, esto es, con apariencia o información distinta
dependiendo de la información de entrada. Pero estas páginas, una vez
enviadas ya no sufren modificaciones.
Algunas tecnologías de servidor son:
- CGI. Interfaz de comunicación con programas que se ejecutan en el servidor,
(por ejemplo en C o Perl). Estos programas pueden leer ficheros o bases de
datos que están en el servidor normalmente.
- ASP. Tecnología de Microsoft, ofrece la misma funcionalidad que CGI
- JSP. Idem que las anteriores pero en Java.
Por motivos de seguridad, HTMLD no incluye instrucciones para interactuar con
los ficheros o el sistema del PC del cliente. Sólo se pueden tratar los datos y
estructuras que están definidos en la propia página web.
Apartado 5. Qué no es HTML Dinámico
Como hemos visto, HTMLD consiste en una serie de tecnologías que se
ejecutan en el navegador, y que permiten modificar el aspecto o
comportamiento de la página web que estamos viendo en respuesta a acciones
del usuario.
No obstante, hay otras técnicas que pueden entrar en esta definición, y no
9
obstante no se consideran HTML Dinámico. Algunas de ellas son,
• Aplicaciones o presentaciones en Flash o Shockwave. Los ficheros con
presentaciones en Flash contienen animaciones que se muestran en el
navegador, pero no se ejecutan directamente por éste, sino que son
ejecutadas por un añadido (plug-in), que corre "dentro" del navegador.
Las presentaciones en Flash se generan con un programa propietario y su
resultado no es interpretado, porque está en un código sólo entendible por el
visor de Flash.
• Applets en Java. De forma parecida a las presentaciones en Flash, los
applets de Java se ejecutan "dentro" del navegador pero no "por" el
navegador. El navegador tiene que llamar a la máquina virtual de java, para
que lea el código semicompilado de java y obtenga el resultado.
• Documentos Word, Pdf y otros que se muestran en el navegador. Al igual
que los anteriores, en este caso lo que hace el navegador es abrir dentro de
la ventana de visualización otra aplicación, que es la que efectivamente
muestra el contenido.
Como puede verse, HTML Dinámico está restringido a los efectos y código que
son efectivamente interpretados por el navegador, y que están integrados
dentro del formato HTML (como veremos en próximos capítulos).
No obstante, mucha de la funcionalidad conseguida por HTML Dinámico se
puede conseguir mediante otras tecnologías, bien de servidor, bien de cliente.
En las aplicaciones web se da una combinación de varias de ellas, y el analista
tiene que decidir que procesos se ejecutan en el navegador y cuales en el
servidor.
Prácticas
1. Enumere al menos 3 tecnologías de servidor indicando ejemplos de
Internet donde se utilicen
2. Enumere al menos 3 tecnologías de cliente, indicando ejemplos de
internet donde se utilicen
10
3. Navegue por Internet e localice 5 páginas que utilicen HTML dinámico
Conclusión
El HTML Dinámico consiste en una serie de técnicas incluidas en los
navegadores que permiten construir páginas web cuya apariencia y
funcionalidad varía con el tiempo.
Con HTML Dinámico se pueden realizar funciones en el navegador, pero otra
funcionalidad sólo se puede realizar en el servidor. Es tarea del analista decidir
que funcionalidad corresponde al cliente y cual al servidor.
Hay otras tecnologías de cliente con las cuales se pueden conseguir los mismos
objetivos que con HTML dinámico.
Lección 2 Hojas de Estilo. Sintaxis
Índice
− Introducción
− Objetivos
o Apartado 1. Definición interna
o Apartado 2. Definición externa
o Apartado 3. Selectores
o Apartado 4. Selectores contextuales
o Apartado 5. Ficheros de estilos
o Apartado 6. Resolución de conflictos
− Ejercicios de autocomprobación
− Práctica
11
Introducción
En esta lección aprendermos a utilizar las hojas de estilo. A diferencia del
HTML estático, donde es necesario definir en cada etiqueta las propiedades de
formato que se aplicarán al contenido, mediante las hojas de estilo podemos
definir los valores de las propiedades que se aplicarán a varias etiquetas, o a
todas las etiquetas iguales.
Las hojas de estilo permiten separar los conceptos de presentación del
contenido de la página. En esta lección veremos como podemos definir los
estilos.
Objetivos
− Aprender a definir estilos
− Aprender a importar estilos de ficheros
− Conocer el comportamiento de los estilos en caso de conflicto
Apartados
Apartado 1. Definición interna.
Aunque hemos comentado que los estilos sirven para separar el formato de
presentación de las etiquetas, la definición de estilos interna introduce la
definición de estilos en la propia etiqueta.
Es por tanto, una forma de definición que no sirve para el propósito anterior,
pero como veremos mas adelante, muy utilizada cuando se utilizan los estilos
para posicionar elementos individuales en la página.
La sintaxis de la definición interna de estilos es:
<etiqueta style="propiedad1:valor1;....propiedadn:valorn;>
Contenido de la etiqueta
</etiqueta>
Como puede verse, se utiliza la sintaxis de HTML para definir el estilo como si
fuera una propiedad de la etiqueta, que a su vez tuviera subpropiedades.
Esta técnica de introducir los elementos del HTML Dinámico utilizando las
12
características del formato HTML es una constante, como iremos viendo a lo
largo del curso.
Un ejemplo de definición de estilos interna puede ser
<p align="right" style="Font-family:courier;Font-weight:bold">
Este es un párrafo en letra courier y negrita
</p>
En el ejemplo se combina la utilización de una propiedad clásica de los
párrafos, para alinear el párrafo a la derecha, y estilos para que salga en
negrita y courier. Se podía no obstante haber definido todas las propiedades
mediante estilos.
Apartado 2. Definición externa.
En este caso, los estilos se definen en un lugar aparte del resto de etiquetas, y
se aplican a todo el documento.
La sintaxis es la siguiente:
<style type="text/css">
selector_1 {estilo_1}
...
selector_n {estilo_n}
</style>
Como puede verse, se crea un etiqueta de HTML nueva, llamada <style>, que
a su vez tiene una propiedad fija type="text/css", dentro de la cual se definen
los estilos.
Para definir los estilos, se utilizan selectores, que como veremos a
continuación, son una serie de valores que indican a que elementos del
documento HTML se tienen que aplicar los estilos especificados dentro de la
etiqueta <style>. Despues de cada selector, entre llaves, va la definición de
estilos en sí, siguiendo la misma sintaxis que en la definición interna,
(subpropieades separadas de sus valores por ":", y separadas de otras
subpropiedades por ";").
Para que los estilos definidos se puedan aplicar a las etiquetas HTML del resto
de la página, la etiqueta <style> debe aparecen antes de todas. Normalmente
se coloca dentro del header.
13
Un ejemplo de definición de estilos externa es:
<STYLE type="text/css">
P
{
FONT-WEIGHT: bold;
COLOR: blue;
FONT-FAMILY: Courier;
TEXT-ALIGN: right;
}
</STYLE>
Este ejemplo indica que todos los párrafos HTML que aparezcan a
continuación deben salir en azul, negrita, courier y alineados a la derecha.
Com puede verse, se cumple el objetivo de separar la presentación del
contenido, y se facilita el mantenimiento de una imagen consistente de las
páginas, porque cambiando el estilo en único sitio se cambia el formato de
todos los párrafos.
Apartado 3. Selectores
Ya hemos indicado que los selectores permiten indicar al navegador a que
elementos de la página tiene que aplicar los estilos definidos externamente.
Hay tres tipos distintos de selectores
• Selector de etiqueta
Este selector sirve para aplicar el estilo definido a todas las etiquetas de ese
tipo que aparezcan a continuación.
Un ejemplo de este selector es el visto en el apartado 2.
• Selector de Pseudoetiqueta
Son estados o situaciones especiales de algunas etiquetas HTML. La
definición de su estilo se hace igual que para las etiquetas.
Las pseudoetiquetas mas importantes son:
o A:link. Permite definir el estilo con el que deben aparecer los enlaces
antes de ser visitados
o A:visited. Permite definir el estilo con el que aparece un enlace
14
visitado
o A:active. Permite definir el estilo con el que aparece un enlace en el
momento de activarlo, esto es, al pulsar sobre él.
o A:hover. Permite definir el estilo con que se ve el enlace al pasar el
ratón por encima.
Una definición de un estilo de pseudoetiqueta sería,
<STYLE type="text/css">
A:hover
{
COLOR: yellow;
}
</STYLE>
Indica que los enlaces deben aparecen en amarillo cuando se pasa el ratón
por encima.
• Selector de id (#)
Mediante este selector, se puede aplicar el estilo a una etiqueta que
aparezca en la página. La sintaxis para este selector es:
<Style type="text/css">
#selector {estilo}
</style>
La etiqueta a la que se quiere aplicar el estilo, debe tener a su vez, una
propiedad de nombre id, y su valor coincidir con el nombre dado al selector.
Un ejemplo de selector de Id sería,
<STYLE type="text/css">
#parrafo1
{
COLOR: blue;
}
</STYLE>
...
<p id="parrafo1">Este párrafo se verá azul </p>
Sólo debe haber una etiqueta HTML que tenga definido el id con ese valor.
15
El resultado de este selector es muy parecido al obtenido mediante la
definición de estilos interna. El estilo sólo se aplica a un elemento.
• Selector de class (.)
Define un estilo aplicable a un conjunto de etiquetas HTML, las cuales todas
pertenecen a la misma clase.
La sintaxis de estos selectores es:
<Style type="text/css">
.selector {estilo}
</style>
Para definir una etiqueta como perteneciente a una clase, hay que
especificarlo a la hora de crear el elemento, con una propiedad de nombre
class, y con valor el nombre dado al selector.
Un ejemplo de selector de class sería,
<STYLE type="text/css">
.parrafosazules
{
COLOR: blue;
}
</STYLE>
...
<p class="parrafosazules">Este párrafo se verá azul </p>
<p class="parrafosazules">Este también </p>
<p class="parrafosverdes">Este no</p>
Apartado 4. Selectores contextuales.
Las páginas HTML están estructuradas siguiendo una organización jerárquica.
Así, la etiqueta <body> contiene otras etiquetas, como tablas y listas, que
pueden a su vez incluir otras, y así sucesivamente.
Se pueden definir selectores, de modo que solo se apliquen a las etiquetas
HTML que estén colocadas en una determinada posición dentro de dicha
jerarquía.
Así, si queremos que solo los párrafos que estén dentro de una tabla salgan en
azul, pondremos:
16
<STYLE type="text/css">
table p
{
COLOR: blue;
}
</STYLE>
Esta técnica es aplicable también a los selectores de id y de class. Por ejemplo,
se puede definir una clase de color azul, pero decir que cuando aparece esa
clase dentro de una tabla salga en verde
<STYLE type="text/css">
.claseazul
{
COLOR: blue;
}
table .claseazul
{
color: green;
}
</STYLE>
...
<P class="claseazul">Parrafo azul</P>
<TABLE border="1">
<TR>
<TD>
<P class="prueba">parrafo dentro de tabla</P>
</TD>
</TR>
</TABLE>
Resultado
Parrafo en azul
Parrafo en verde
Apartado 5. Ficheros de estilos
Con la definición de estilos externa, podemos separar claramente el contenido
de las etiquetas de su formato de representación.
17
Mediante los selectores de clase y de etiqueta, aplicamos un estilo determinado
a todas los elementos HTML que cumplan una condición, y modificando el
estilo en un único punto, modificamos la apariencia de todas las etiquetas.
La definición externa de los estilos debe aparecer antes de las etiquetas sobre
las que se aplican, y normalmente se pone en la cabecera de la página, dentro
de la etiqueta <head>
No obstante, esto implica que si tenemos varias páginas que queremos que
tengan el mismo estilo, por ejemplo un portal, hemos de definir el estilo en
todas las cabeceras de las páginas, y una modificación habría que hacerla en
todas ellas.
Para poder mantener en un único punto los estilos que afectan a varias
páginas, existen los ficheros de estilos. Estos ficheros pueden ser importados
por varios ficheros HTML, y se aplican por tanto a todas sus etiquetas.
La sintaxis de la importación de un fichero de estilos es:
<link rel="stylesheet" type="text/css" href="[Link]">
donde fichero contiene una url que apunta a un fichero con estilos. Por
convención, este fichero debe tener extensión .css
El fichero .css contendrá los estilos que se definen, de acuerdo a la definición
externa, pero sin utilizar la etiqueta <style>, por ejemplo,
.parrafosazules
{
COLOR: blue;
}
P
{
FONT-WEIGHT: bold;
}
#parrafoverde
{
COLOR: green;
}
Apartado 6. Resolución de conflictos
De acuerdo a la organización jerárquica de los elementos HTML, los estilos
18
aplicados a la etiqueta superior se aplican a todas las etiquetas que contiene, a
no ser que se redefina el estilo para los elementos de nivel inferior.
Por ejemplo, se puede indicar que con caracter general el texto de la página se
vea de color azul, en la etiqueta <body>, pero que el texto de las tablas se vea
en verde, redefiniendo el estilo para <table>.
También puede darse el caso, que a un elemento HTML de la página sean de
aplicación varias definiciones de estilos, por ejemplo
<p id="parrafo1" class="textoverde" style="color:blue">
Este es el párrafo1, pertenece a la clase de los textos en verde, y además
define internamente el tamaño de la fuente.
Si se diera la circunstancia de que externamente tuviéramos definido el estilo
que tienen que seguir los párrafos, la clase "textoverde" y el "parrafo1", y en
todas esas definiciones se diera valor a la misma propiedad, por ejemplo el
color, el navegador tendría que decidir cual es la definición que tiene mas peso,
y aplica efectivamente al párrafo.
En general, el resultado final es el indicado en el estilo mas específico. Esto es,
primero se aplica el estilo definido para la etiqueta, luego el definido para la
clase, luego el del id, y por último la definición interna si la hay. En el ejemplo
anterior, el párrafo saldría de color azul, independientemente del color que
pudiera estar determinado externamente.
También puede darse el caso de que un mismo fichero HTML importe varias
definiciones en ficheros .css, y tenga además su propia etiqueta <style>.
En ese caso, los estilos definidos en el propio documento tienen preferencia, y
de entre los distintos .css, el último cargado.
No obstante, no es una buena práctica de diseño hacer colisionar varios estilos
sobre una misma etiqueta, de forma que sea difícil predecir el resultado final.
Suele ser suficiente con especificar los estilos a nivel de etiquetas o clases,
individualizando los casos particulares mediante id's o definiciones internas.
Ejercicios resueltos
<HTML>
19
<HEAD>
<TITLE> Ejemplo de uso de clases </TITLE>
<STYLE TYPE="text/css">
<!--
BODY {font-family:Verdana,sans-serif;font-size:x-small}
P,A,B {color:red}
.BAzul {color:blue}
//-->
</STYLE>
</HEAD>
<BODY BGCOLOR=white>
En este ejemplo vamos a ver cómo se aplican las clases.
Por ejemplo, <B>esta negrita</B> utiliza el estilo definido
en el bloque, pero <B CLASS="BAzul">esta otra negrita</B>
tiene un color distinto. Y no sólo podemos usar la clase
para la negrita. Por ejemplo, <SPAN CLASS="BAzul">este trozo
de línea también utiliza la clase para su estilo particular</SPAN>.
</BODY>
</HTML>
Prácticas
1. Construya una página HTML con al menos seis párrafos. Defina cuatro
estilos diferentes para cada uno de ellos. En uno asígnele el estilo
mediante una definición interna, en otro mediante el selector de
identificador, otros dos de ellos que compartan el estilo de una clase, y
otros dos que compartan el estilo de la etiqueta párrafo.
2. Coloque los estilos definidos exteriormente en la práctica anterior en un
fichero y aplíqueselo a dos páginas distintas, cada una de ellas con seis
párrafos.
Conclusión
Hemos aprendido como definir estilos en la propia página, bien dentro de cada
etiqueta, bien en la cabecera de la página de forma que el estilo se aplique a
varias etiquetas.
20
Hemos aprendido a seleccionar aquellas etiquetas a las que queremos aplicar
cada estilo y ha definir los estilos en ficheros aparte, de forma que puedan ser
usados por varias páginas para aplicar una apariencia homogénea a todo
nuestro web.
Lección 3 Propiedades definibles mediante estilos
Índice
− Introducción
− Contenido
o Apartado 1. Propiedades del texto
o Apartado 2. Propiedades de las fuentes
o Apartado 3. Propiedades de colores y fondos
o Apartado 4. Propiedades de bloque
o Apartado 5. Unidades de medida.
− Ejercicios de autocomprobación
− Práctica
Introducción
En este lección vamos a ver las principales propiedades de apariencia que son
definibles mediante estilos.
Objetivos
− Conocer cuales son las propiedades de apariencia denibles mediante
estilos.
Apartados
Apartado 1. Propiedades del texto
21
• Espacio entre lineas
Sintaxis CSS: line-height
Sintaxis JavaScript: lineHeight
Posibles valores numero, longitud, porcentage, normal
Valor inicial tamaño por defecto para la fuente
Se aplica a elementos de bloque
Heredable si
Valores porcentuales relativos al tamaño de la fuente
• Decoración del Texto
Sintaxis CSS: text-decoration
Sintaxis JavaScript: textDecoration
Posibles valores none, underline, line-through, blink
Valor inicial none
Se aplica a todos los elementos
Heredable si
Valores porcentuales no aplicable
• Transformaciones del Texto
Sintaxis CSS: text-transform
Sintaxis JavaScript: textTransform
Posibles valores capitalize, uppercase, lowercase, none
Valor inicial none
Se aplica a todos los elementos
Heredable si
Valores porcentuales no aplicable
• Alineamiento del Texto
Sintaxis CSS: text-align
22
Sintaxis JavaScript: textAlign
Posibles valores left, right, center, justify
Valor inicial left
Se aplica a elementos de bloque
Heredable si
Valores porcentuales no aplicable
• Indentación de Texto
Sintaxis CSS: text-indent
Sintaxis JavaScript: textIndent
Posibles valores longitud, porcentaje
Valor inicial 0
Se aplica a elementos de bloque
Heredable si
Valores porcentuales relativos a la anchura del padre
Longitud: numero + unidad
Porcentaje: longitud de indentación relativo a la anchura del padre.
Apartado 2. Propiedades de las fuentes
• Tamaño de Fuente
Sintaxis CSS: font-size
Sintaxis JavaScript: fontSize
Posibles valores tamaño absoluto, tamaño relativo, longitud, porcentage
Valor inicial medium
Se aplica a todos los elementos
Heredable si
Valores porcentuales relativos al tamaño del padre
23
Tamaño absoluto: xx-small, s-small, small, medium, large, x-large, xx-large
Tamaño relativo: larger, smaller
Longitud: numero + unidad
Porcentaje: tamaño de fuente relativo al tamaño de fuente del padre.
• Tipo de Fuente
Sintaxis CSS: font-family
Sintaxis JavaScript: fontFamily
Posibles valores un nombre de fuente
Valor inicial la fuente por defecto
Se aplica a todos los elementos
Heredable si
Valores porcentuales no aplicable
Tipo de fuente: serif, sans-serif, cursive, monospace, fantasy, ...
• Peso de Fuente
Sintaxis CSS: font-weight
Sintaxis JavaScript: fontWeight
Posibles valores normal, bold, bolder, lighter, 100 - 900
Valor inicial normal
Se aplica a todos los elementos
Heredable si
Valores porcentuales no aplicable
• Estilo de Fuente
Sintaxis CSS: font-style
Sintaxis JavaScript: fontStyle
Posibles valores normal, italic
Valor inicial normal
24
Se aplica a todos los elementos
Heredable si
Valores porcentuales no aplicable
Apartado 3. Propiedades de colores y fondos
• Color
Sintaxis CSS: color
Sintaxis JavaScript: color
Posibles valores color
Valor inicial black
Se aplica a todos los elementos
Heredable si
Valores porcentuales no aplicable
Esta propiedad especifica el color del texto.
Color: especificacion de un color (nombre, valor rgb).
• Imagen de Fondo
Sintaxis CSS: background-image
Sintaxis JavaScript: backgroundImage
Posibles valores url
Valor inicial vacio
Se aplica a todos los elementos
Heredable no
Valores porcentuales no aplicable
• Color de Fondo
Sintaxis CSS: background-color
Sintaxis JavaScript: backgroundColor
Posibles valores color
25
Valor inicial vacio
Se aplica a todos los elementos
Heredable no
Valores porcentuales no aplicable
Apartado 4. Propiedades de bloque
• Márgenes
Sintaxis CSS: margin-left, margin-right, margin-top, margin-bottom, margin
Sintaxis JavaScript: marginLeft, marginRight, marginTop, marginBottom,
margins()
Posibles valores longitud, porcentaje,auto
Valor inicial 0
Se aplica a todos los elementos
Heredable no
Valores porcentuales relativos a la anchura del padre
• Separadores
Sintaxis CSS: padding-left, padding-right, padding-top, padding-bottom,
padding
Sintaxis JavaScript: paddingLeft, paddingRight, paddingTop, paddingBottom,
paddings()
Posibles valores longitud, porcentaje
Valor inicial 0
Se aplica a todos los elementos
Heredable no
Valores porcentuales relativos a la anchura del padre
• Anchura del los Bordes
Sintaxis CSS: border-left-width, border-right-width, border-top-width, border-
bottom-width, border-width
26
Sintaxis JavaScript: borderLeftWidth, borderRightWidth, borderTopWidth,
borderBottomWidth, borderWidths()
Posibles valores longitud
Valor inicial none
Se aplica a todos los elementos
Heredable no
Valores porcentuales no aplicable
• Estilo del Borde
Sintaxis CSS: border-style
Sintaxis JavaScript: borderStyle
Posibles valores none, solid, double, inset, outset, groove, ridge
Valor inicial none
Se aplica a todos los elementos
Heredable no
Valores porcentuales no aplicable
• Color del Borde
Sintaxis CSS: border-color
Sintaxis JavaScript: borderColor
Posibles valores color, none
Valor inicial none
Se aplica a todos los elementos
Heredable no
Valores porcentuales no aplicable
Color: nombre de un color o 6 digitos hexadecimales indicando su valor rgb.
• Anchura
Sintaxis CSS: width
27
Sintaxis JavaScript: width
Posibles valores longitud, porcentaje, auto
Valor inicial auto
Se aplica a elementos de bloque
Heredable no
Valores porcentuales relativos a la anchura del padre
• Alineamiento
Sintaxis CSS: float
Sintaxis JavaScript: align
Posibles valores left, right, none
Valor inicial none
Se aplica a todos los elementos
Heredable no
Valores porcentuales relativos a la anchura del padre
• Clear
Sintaxis CSS: clear
Sintaxis JavaScript: clear
Posibles valores none, left, right, both
Valor inicial none
Se aplica a todos los elementos
Heredable no
Valores porcentuales no aplicable
Esta propiedad especifica cuando un elemento permite la existencia de
elementos flotando a sus lados. Exactamente, el valor de esta propiedad son
los lados en que no se aceptan elementos flotantes.
Apartado 5. Unidades de medida
28
• Unidades de Longitud
El formato de un valor de longitud es un signo opcional ('+' o '-', '+' por defecto),
un numero y una unidad de medida. Ejemplos: 12pt, 2em, 3mm.
Hay tres tipos de unidades: absolutas, relativas y pixel.
Tipos de unidades absolutas:
− pt: puntos
− pc: picas
− px: pixels
− in: pulgadas
− mm: milimetros
− cm: centimetros
Tipos de unidades relativas:
− em: la altura de la fuente, normalmente la anchura o altura de la M
mayuscula
− ex: la mitad de la altura la fuente, normalmente la altura de la letra 'x'
− px: pixels, relativos a la superficie de dibujo
• Unidades de Color
Un valor de color es o un nombre de color o una descripcion RGB.
La lista de colores sugerida es: aqua, black, blue, fuchsia, gray, green, maroon,
navy, olive, purple, red, silver, teal, white, yellow. Estos 16 colores se han
tomado de la paleta VGA de Windows.
Un color RGB puede especificarse mediante 6 dígitos hexadecimales
precedidos del carácter #. Los dos primeros indican rojo, los dos segundos
verde y los dos ultimos azul. Ejemplos:
body {color: #ff0000;} /* rojo */
También podemos utilizar la funcion rgb(). Usa tres argumentos: rojo, verde y
azul. Cada color puede ser un entero entre 0 y 255, o un porcentaje. Ejemplo:
p {color: rgb(200, 20, 240);} /* purpura brillante */
29
Ejercicios resueltos
Este campo de texto se presentará con un borde de 2 pixels, un borde sólido,
tamaño de la letra de 8 puntos, color del borde y de las letras verde un poco
oscuro. También se define un espaciado entre las letras de 3 pixel.
<input type="text" name="campotexto1" size="12"
style="background-color:e3e3e3; border: 1px solid #666666;
font-size:8pt; color: #000099">
Prácticas
1. Cree una página HTML con al menos cuatro etiquetas distintas y defina
sobre cada una de estas etiquetas al menos cuatro propiedades de
estilo distintas.
Conclusión
En esta lección hemos aprendido cuales son las propiedades del texto, de las
fuentes, del fondo, de los bloques definibles mediante estilos y que unidades de
medida se tienen que usar.
Lección 4 Capas y Posicionamiento
Índice
− Introducción
− Objetivos
o Apartado 1. Definición de capa
o Apartado 2. Posicionamiento absoluto y relativo
o Apartado 3. Visibilidad y orden de las capas
30
o Apartado 4. Capas anidadas
− Ejercicios de autocomprobación
− Prácticas
Introducción
En esta lección vamos a estudiar que son las capas HTML y como podemos
posicionarlas sobre la ventana del navegador, controlando a nivel de pixel
donde queremos que aparezcan.
También aprederemos a mostrar y ocultar las capas y por tanto los elementos
de la página.
Objetivos
− Aprender a definir capas
− Aprender a posicionar capas en la página
− Aprender a mostrar y ocultar capas
Apartados
Apartado 1. Definición de capa
Las etiquetas HTML <div> y <span> permiten definir capas en la página Web.
La etiqueta <span> por si misma no introduce ninguna modificación al texto al
que se aplica y tampoco tiene propiedades propias. Sólo tiene sentido para
aplicar estilos a los elementos que envuelve.
La etiqueta <div>, sirve igualmente para aplicar estilos a zonas del código
HTML, pero adicionalmente la mera aparición de la etiqueta define un bloque,
esto es, el navegador introduce un salto de línea antes y después de los
párrafos incluidos dentro de la etiqueta. Para esta etiqueta tienen sentido por
tanto las propiedades de estilo de bloque vistas en la unidad anterior.
Desde el punto de vista del posicionamiento, una capa es una región
rectangular de la página. Las capas son la base del posicionamiento,
visibilidad y efectos del HTML dinámico.
31
Aunque se puede utilizar cualquier de las dos etiquetas para definir capas, lo
habitual cuando se utilizan para posicionar elementos en la página es usar la
etiqueta <div>. La etiqueta <span> la usaremos para aplicar estilos a porciones
de texto sin posicionarlos en ningún lugar concreto.
Apartado 2. Posicionamiento absoluto o relativo.
Existen propiedades de los estilos aplicables a las etiqueta <div>, que permiten
indicar al navegador la posición concreta de la pantalla donde queremos que
aparezca el texto o imágenes encapsulado por la etiqueta.
Cuando declaramos una etiqueta <div> o <span> y no establecemos los
valores de posición, los elementos se muestran en el navegador en el orden en
que aparecen, igual que el resto de etiquetas, donde les toca.
Las propiedades de estilo que afectan a la posición de la capa son: Position,
Left, Top, Width, Height y Visibility.
Estas propiedades se establecen siguiendo cualquiera de las sintaxis vistas
hasta ahora para los estilos. No obstante, cuando aplicamos posicionamiento a
una capa, normalmente cada una de ellas se colocará e una posición distinta, y
opr tanto necesitará propiedades individualizadas, por lo que a lo largo de este
curso usaremos con mas preferencia la definición interna.
• Position: Define como se colocará la capa con respecto al resto de la
página. “relative”, (defecto), implica que la capa se coloca donde le
toque, según aparezca en el fichero HTML, mientras que “absolute”
indica que la capa se colocará en una posición fija de la pantalla
• Left: Colocación del borde izquierdo de la capa con respecto al borde
izquierdo de la ventana de trabajo del navegador (no del monitor).
nota: la ventana de trabajo es el área donde se muestra la página web. Está en
blanco si no hay página cargada. Empieza debajo de la barra de título, barra de
menús, barra de botones y barra de direcciones y termina antes de la barra de
estado, (si están presentes).
• Top: Colocación del borde superior de la capa con respecto al borde
superior de la ventana de trabajo del navegador.
32
• Width: Anchura de la capa. Cualquier texto que sobrepase la anchura
pasará a la línea siguiente. Si no se especifica la anchura todo el texto
estará en una línea.
• Height: Altura de la capa.
• Clip: Si el contenido de la capa no cabe, la anchura y altura crecen
automáticamente hasta acomodarlo. Para mantener fijo el tamaño de la
capa, independientemente del contenido, es necesario establecer un
recuadro de corte, “clipping”. El recuadro de corte indica el área de la
capa que queremos que se vea. En la mayoría de los casos, se hace
coincidir el recuadro de corte con el tamaño de la capa, de esta manera
si la capa crece, su apariencia no lo hace.
La sintaxis de Clip es clip:rect(arriba, derecha, abajo, izquierda), donde
o Arriba es la distancia que ocultamos empezando a contar desde
arriba
o Derecha es la distancia que mostramos empezando a contar
desde la izquierda
o Abajo es la distancia que mostramos empezando a contar desde
arriba
o Izquierda es la distancia que ocultamos empezando a contar
desde la izquierda
Las unidades de medida para estos valores para Left, Top, Width, Height y Clip
son las indicadas para longitud. Si no se especifica la unidad de medida, por
defecto es píxeles. (px).
Por ejemplo:
<div id="capa1" style="position:absolute; top:100px; left:100px;
width:300px; height: 300px;">
<img src="mi_foto.jpg">
<div>
Define una capa de 300 x 300 píxeles, situada a una distancia de 100 píxeles
de la esquina superior izquierda de la ventana de trabajo del navegador.
33
En este ejemplo, si mi_foto.jpg mide mas de 300 x 300, la capa crecerá y la
mostrará entera. Si queremos que en pantalla sólo se muestren 300 x 300
píxeles, hay que establecer un rectángulo de corte, que coincida con el tamaño
de la capa.
<div id="capa1" style="position:absolute; top:100px; left:100px;
width:300px; height: 300px; clip:rect(0px 300px 300px 0px)">
<img src="mi_foto.jpg">
<div>
arriba e izquierda valen 0, porque no queremos ocultar nada
derecha y abajo valen lo mismo que width y height.
Como veremos mas adelante, si queremos realizar efectos de movimiento en
nuestra página, habrá que modificar los valores de las propiedades top y left,
para que la capa cambie de posición de forma dinámica.
Apartado 3. Visibilidad y orden de las capas
Las capas definidas en la página pueden estar visibles o no. También es
posible que varias capas estén en intersección, esto es, que el área definida
para cada una de ellas coincida en todo o en parte. En ese caso, el navegador
tiene que conocer cual es la capa que se ve, y cuales las que están ocultas.
Para ello existen las siguientes propiedades de los estilos, aplicables a la
etiqueta <div>
• Visibility: Determina si una capa es visible o no. Puede tomar los
valores "visible", "hidden" o "inherit" (por defecto). Cuando el valor es
"inherit" la capa tiene el mismo comportamiento que la capa que la
contiene (en capas anidadas).
• z-index: Orden de superposición de una capa. En caso de intersección
de capas, la que tiene este valor mas alto aparece por encima de las
que lo tienen mas bajo.
Estas dos propiedades son básicas para los efectos visuales como menús
desplegables, (el menú está ahí pero invisible).
Cuando no se establece el valor de z-index, la capa que aparece por encima es
la última que se ha definido.
34
<div id="capa1" style="position:absolute; top:100px; left:100px;
width:300px; height: 300px; clip:rect(0px 300px 300px 0px); z-
index=8">
<img src="foto_coche.jpg">
<div>
<div id="capa2" style="position:absolute; top:100px; left:100px;
width:300px; height: 300px; clip:rect(0px 300px 300px 0px); z-
index=3">
<img src="foto_moto.jpg">
<div>
En este ejemplo, la capa visible sería la primera, porque la superposición es
total, y la de arriba tiene un valor de z-index de 8, frente a los 3 de la de abajo.
Apartado 4. Capas anidadas
Dentro de la etiqueta <div> que define una capa, puede aparecer a su vez otra
capa <div>.
En este caso, los valores indicados en las propiedades top y left hacen
referencia a la esquina superior izquierda de la capa que la contiene, en vez de
la ventana del navegador.
Se pueden anidar capas hasta cualquier nivel.
Por ejemplo,
<div id="capaexterna" style="position:absolute; top:100px; left:100px;
width:300px; height: 300px; clip:rect(0px 300px 300px 0px);background-
color:red">
<div id="capainterna" style=" position:absolute;
top:50px; left:50px; width:200px; height: 200px;
clip:rect(0px 300px 300px 0px); background-color:blue ">
</div>
</div>
Crea dos capas. La externa mide 300 x 300 píxeles y la interna 200 x 200. La
interna está centrada dentro de la externa, porque está a 50 píxeles del borde
izquierdo y del borde superior.
Ejercicios resueltos
Página que muestra una capa roja con unos enlaces de color verde.
35
<html>
<head>
<style>
a
{
color:green;
}
</style>
</head>
<body>
<div id="capa1"
style="position:absolute;left:290px;top:120px;width:200px;height:200px
;
background-color:#ff0000;">
<table border="0" cellpadding="10">
<tr>
<td><a href="[Link]">enlace 1</a></td>
<td>Priimer enlace</td>
</tr>
<tr>
<td><a href="[Link]">enlace 2</a></td>
<td>Segundo enlace</td>
</tr>
<tr>
<td><a href="[Link]">enlace 3</a></td>
<td >Tercer enlace</td>
</tr>
</table>
</div>
</body>
</html>
Prácticas
1. Cree una página HTML con dos capas una roja y otra azul, de 200 x 200
píxeles y 100 x 100 píxeles respectivamente. Estas dos capas aparecer
centradas en un monitor de 800 x 600 píxeles, una dentro de otra. Haga
el ejercicio sin capas anidadas
2. Solucione el mismo ejercicio anterior utilizando capas anidadas.
36
3. Modifique el ejercicio anterior de forma que la capa mas grande no se
vea.
Conclusión
En esta lección hemos aprendido a colocar capas en las posiciones de la
ventana que queremos, a mostrarlas y ocultarlas.
Conclusión de la Unidad Didáctica
En esta unidad didáctica hemos aprendido lo que es el HTML dinámico y la
primera de las técnicas que lo conforman, las hojas de estilos.
Sabemos que usos tiene el HTML y distinguir que tecnología es HTML
dinámico y cual no.
Sabemos definir estilos en nuestras páginas, incluirlos en ficheros y conocemos
que propiedades podemos establecer en los estilos
Somos capaces de definir capas, visibles e invisibles, capas superpuestas y
capas con contenido, el cual puede ser a su vez otra capa.
Glosario de Términos
• HTML Dinámico. Combinación de técnicas y capacidades incluidas en los
navegadores que permiten la construcción de páginas web dinámicas.
• Hojas de estilo. Adición al HTML que permite separar la presentación de la
página de su contenido
• CSS-P. Extensión de las hojas de estilo que permite tener control a nivel de
píxel acerca de la posición de los elementos de la página
• HTML. Formato de representación de información en un navegador.
Bibliografía
• [Link]
Documentación sobre Estilos de Microsoft
37
• [Link] Manual de hojas de estilos.
• [Link] Especificación de CSS nivel 2 del
W3C
38
UNIDAD JavaScript
DIDÁCTICA 2
Índice
− Introducción
− Objetivos
− Esquema de Contenidos
− Contenidos
o Lección 1. Descripción de JavaScript
o Lección 2. Tipos de datos y variables
o Lección 3. Expresiones y operadores
o Lección 4. Sentencias
o Lección 5. Funciones
o Lección 6. Objetos
− Conclusiones
− Glosario de términos
− Bibliografía
39
Esquema de Contenidos
Tipos de Datos
Expresiones
Sentencias
Javascript
Funciones
Objetos
Introducción
En esta unidad didáctica vamos a contar el lenguaje JavaScript.
JavaScript es un lenguaje de programación como otro cualquiera, el cual se
puede aplicar al desarrollo de páginas Web Dinámicas pero también a otro tipo
de desarrollos.
A su vez, las páginas web dinámicas se pueden construir utilizando otros
lenguajes de programación
En el estudio del lenguaje que vamos a hacer en esta lección nos vamos a
abstraer dentro de lo posible de la aplicación al HTML Dinámico que vamos a
hacer del lenguaje, y lo vamos a estudiar como un lenguaje mas.
Hay dos conceptos del lenguaje JavaScript que no vamos a ver en este curso.
La creación y utilización de expresiones regulares, y la creación de tipos de
objetos nuevos.
Las expresiones regulares son una particularidad de JavaScript y no
pertenencen al núcleo de casi ningún otro lenguaje. El tiempo necesario para
aprender a manejarlas es muy extenso y sin embargo no es habitual tener que
utilizarlas. Se recomienda que si el alumno tiene mas interes o necesidad de
emplearlas se remita a la bibliografía para profundizar en el tema.
La creación de tipos de objetos nuevos tampoco es algo corriente en las
40
aplicaciones normales de JavaScript. Si lo es la modificación y la creación de
instancias de los tipos existentes. Estos últimos conceptos sí los vamos a
estudiar.
Objetivos
− Aprender las características de JavaScript
− Aprender a declarar variables y los tipos de datos existentes
− Aprender los operadores y expresiones de JavaScript
− Aprender a escribir sentencias de control de flujo y manejo de objetos
− Aprender a definir funciones
− Aprender a trabajar con objetos
Lección 1 Descripción de JavaScript
Índice
− Introducción
− Contenidos
o Apartado 1. ¿Qué es JavaScript?
o Apartado 2. Usos de JavaScript
o Apartado 3. Características Generales
o Apartado 4. Versiones y navegadores
o Apartado 5. JavaScript vs Java
o Apartado 6. Entorno de programación JavaScript
− Ejercicios de autocomprobación
− Prácticas
41
Introducción
En esta lección se describe el lenguaje JavaScript y sus características
generales. Para que sirve y para que se utiliza normalmente.
También se compara con otros lenguajes como Java, enumerando sus
similitudes y diferencias.
Veremos así mismo cuales son las versiones de JavaScript disponibles y cual es
la que vamos a estudiar en este curso.
Objetivos
− Conocer las características generales de JavaScript
− Conocer los usos que tiene JavaScript
− Conocer las diferencias con el lenguaje Java
− Conocer las versiones existentes de JavaScript.
Apartados
Apartado 1. ¿Qué es JavaScript?
JavaScript es un lenguaje de programación, incluido en todos los navegadores,
que permite manipular y modificar los elementos de la página sin necesidad de
recargarlos.
Es un lenguaje interpretado, esto es, el código pasa directamente de código
fuente a ejecución, sin existir la fase intermedia de compilación a código objeto.
El navegador va ejecutando las sentencias del programa según las va leyendo.
Esto también implica que los errores sintácticos aparecen directamente en el
momento de la prueba.
JavaScript es un lenguaje orientado a objetos, en el cual se pueden distinguir
varias partes.
• Núcleo. Donde se definen las instrucciones del lenguaje, los tipos de
datos, la sintaxis, los operadores, así como un conjunto de objetos y
funciones predefinidas de utilidad, como Array, Math, parseInt...
42
• JavaScript de cliente. Es una extensión del lenguaje JavaScript que
contiene una serie de objetos para interactuar con el navegador y con el
modelo de objetos de documento (DOM).
• JavaScript de servidor. Es una extensión del lenguaje JavaScript que
contiene una serie de objetos para interactuar con los servidores web,
como por ejemplo; abrir ficheros, leer una base de datos o comunicar
aplicaciones.
En HTML Dinámico sólo se utiliza el núcleo de JavaScript y las extensiones de
cliente, que son las que vamos a ver en este curso.
Apartado 2. Usos de JavaScript
JavaScript de cliente, como su propio nombre indica, es una tecnología utilizada
limitada al navegador, donde se está mostrando una página web enviada por un
servidor Web. Con JavaScript de cliente no podemos acceder a ningún recurso
del pc del usuario, (ficheros, registro, otras aplicaciones ejecución). Tan sólo a
las propiedades propias de la página o del navegador en sí.
Cuando se diseña una aplicación web, una decisión del analista debe ser que
funcionalidad se va a ejecutar en el cliente, y cual en el servidor.
Hay casos en que la elección es obvia, (por ejemplo validar el nombre y la
contraseña del usuario contra una base de datos sólo se puede hacer en el
servidor). Sin embargo, validar si un DNI está bien formado se puede hacer
indistintamente en el servidor o en el cliente.
Si elegimos la primera opción, el usuario introduciría su DNI en un formulario,
que lo enviaría al servidor, el cual aplicaría el algoritmo adecuado para calcular
su letra, y si es incorrecto le devolvería una nueva página de error.
Si la validación la hacemos en el cliente, el algoritmo de cálculo de la letra en
JavaScript viajaría con la página inicial al cliente. Al introducir su DNI, el propio
cliente lo comprobaría, y si es erróneo lanzaría un aviso. Esto supone un
importante ahorro de ancho de banda y tiempo para el usuario.
Lo mismo se puede decir de una aplicación que va mostrando fotos al usuario
según éste va pinchando botones. Si la hacemos con tecnología de servidor,
cada foto estará en una página distinta que tendrá que ser enviada por el
43
servidor en respuesta a cada pulsación de botón. Si lo hacemos mediante
JavaScript de cliente, todas las fotos van incluidas en la primera y única página,
por lo que la carga de la página inicial tarda un poco mas, pero la transición
entre fotos es mucho más rápida.
En general, HTML Dinámico se utiliza para implementar aquella funcionalidad
que afecta a la apariencia de la página (efectos de movimiento, cambios de
diseño, menús desplegables, rotación de fotos...), y la validación de formularios,
aunque admite muchos otros usos, dependiendo de la aplicación.
La tecnología de servidor se utiliza para realizar todas aquellas funciones que
necesitan interactuar con información almacenada (ficheros, bases de datos).
La tecnología de cliente que se utilice, (JavaScript en este caso), es
completamente independiente de la tecnología de servidor. Las tecnologías de
servidor mas extendidas en la actualidad (asp, [Link], cgi, perl, jsp...), pueden
generar páginas javascript, y éstas a su vez enviar sus resultados a servidores
de éste tipo.
Para realizar los ejemplos y actividades de este curso no hace falta tener
acceso a ningún servidor Web. Al ser tecnología de cliente, basta con
programar la página HTML Dinámica y abrir el fichero resultante con un
navegador para ejecutar el código.
Apartado 3. Características Generales
JavaScript es un lenguaje de la familia del C y de Java. Esto es, tiene las
siguientes características,
• Distingue mayúsculas de minúsculas
• Los bloques se delimitan por {}. Un bloque es un conjunto de una ó mas
sentencias, a las que queremos que afecte una instrucción condicional,
de control de flujo, manipulación de objetos o una función.
Si escribimos un if seguido de dos sentencias, el navegador interpretará
que el if sólo afecta a la primera, pero no a la segunda. En muchas
ocasiones se colocan llaves alrededor de una sola sentencia, para
clarificar el código.
44
• Las instrucciones se separan por ";". No obstante los interpretes de
JavaScript que vienen en los navegadores suelen ser bastante laxos con
esta regla, y muchas veces aunque no lo pongamos no pasa nada. Sin
embargo, a veces el error si que salta ¡y no sabemos porque en ese caso
si!
• Lenguaje poco tipado. No es necesario definir el tipo de las variables, ni
siquiera declararlas. (Al estilo de Visual Basic)
• Los comentarios
// se pueden escribir en una línea
/*
o se pueden escribir en varias
líneas
*/
• Orientado a eventos. La ejecución de código JavaScript en páginas
HTML Dinámicas está en la mayoría de los casos dirigida por las
acciones que el usuario realiza sobre la página. Para ello, el navegador
captura los eventos generados por el ratón o el teclado, y los envía a las
funciones definidas en el código para su proceso.
• Orientado a objetos. Es posible definir y crear nuevos tipos de objetos, y
agregar dinámicamente propiedades nuevas a los tipos que ya existen.
No obstante, durante la programación de paginas dinámicas lo habitual
es trabajar con los objetos predefinidos del lenguaje, o con los que el
navegador crea automáticamente en función de las características de la
página (DOM).
En este curso no vamos a estudiar las capacidades de javascript para
crear nuevos tipos de objetos. Si veremos como trabajar y extender los
objetos predefinidos.
Apartado 4. Versiones, navegadores y compatibilidad
Un problema fundamental a la hora de realizar páginas HTML Dinámicas, es
asegurar que el código es ejecutable en todos los navegadores disponibles en
el mercado.
45
Si realizamos aplicaciones Web orientadas a Internet, cuyos usuarios serán el
público en general, no podemos presuponer la utilización de un navegador
concreto, ni imponer una preferencia.
Si la aplicación web es para uso interno de la organización, (una intranet),
podemos forzar el uso de uno u otro, según las normas internas del
departamento de informática.
Hasta hace relativamente poco tiempo, cuando el mercado de navegadores
estaba dominado por Netscape y Explorer, la compatibilidad era un quebradero
de cabeza para los programadores. Aún existen muchas referencias en la red
sobre "cross-browser JavaScript" y numerosas páginas DHTML contienen en su
cabecera código para reconocer el navegador cliente y ejecutar un código u otro
en consecuencia.
No obstante, según las estadísticas mas recientes, hoy en día "todos los
navegadores" supone programar para Internet Explorer 6 o superior y para
FireFox. Afortunadamente la versión de JavaScript soportada por estos dos
navegadores es bastante mas compatible de lo que era antaño entre Netscape
4 y Explorer 4.
La versión mas estable y extendida de JavaScript es la 1.3. Esta estaba incluida
en todos los navegadores.
La última versión disponible de JavaScript es la 1.6, es la que está incluida en
FireFox 1.5, aunque todavía no está publicada su referencia completa, sólo las
diferencias con la 1.5. Internet Explorer utiliza su propio lenguaje de
programación JScript, cuya última versión es la 8.0. JScript tiene una sintaxis,
operadores y sentencias equivalentes a JavaScript.
En este curso estudiaremos JavaScript 1.5.
Apartado 5. JavaScript vs Java
Aunque comparten la mitad del nombre, JavaScript y Java son lenguajes
bastantes distintos.
La primera y fundamental diferencia se encuentra en el modo de ejecución.
Como ya se ha dicho, JavaScript es interpretado, (Script viene a indicar eso),
mientras que el código fuente Java necesita una fase de compilación, la cual
46
genera el código objeto (bytecode), que a su vez es ejecutado por la máquina
virtual.
Las sintaxis, operadores y sentencias son parecidas, pero JavaScript no tiene el
control de tipos de datos ni la asignación estática de tipos de Java.
Mientras que en Java se pueden declarar y compilar clases nuevas, javascript
se basa en un conjunto muy limitado de tipos básicos, un conjunto extenso de
tipos predefinidos y en la creación dinámica de nuevos objetos a partir de
prototipos.
En cierto sentido, JavaScript es un lenguaje mucho mas libre que Java. No hay
que preocuparse de la declaración de las variables ni de los tipos devueltos por
las funciones; tampoco por las propiedades públicas, privadas o protegidas. No
hay que declarar interfaces. Dinámicamente puedes crear propiedades nuevas
para los objetos existentes, o asignar funciones como si fueran nuevos
métodos.
Por último, decir que Java es un lenguaje mas "potente" que JavaScript, pues el
uso de éste último está prácticamente limitado a la tecnología Web de cliente,
mientras que Java se utiliza en los servidores Web, en los clientes Web, o
incluso como ejecutables autónomos, (para hacer un editor de texto por
ejemplo).
Apartado 6. Entorno de programación JavaScript
Para poder entender los ejercicios y realizar las prácticas, vamos a adelantar un
esqueleto de página HTML Dinámica. La teoría en que se apoya este esqueleto
se explicará en la unidad didáctica 3.
Aunque existen herramientas y editores específicos para JavaScript, montar un
entorno de ejecución y pruebas es algo muy sencillo y barato. Tan sólo
necesita:
− Un editor de texto ascii. Puede ser el NotePad aunque se recomienda
uno que al menos muestre los números de página, para facilitar la
localización de errores, y si es posible que reconozca las palabras
reservadas del lenguaje. Una opción válida es EditPlus (shareware). Si
piensa utilizar esta herramienta mas allá de la duracción del curso, le
47
recomiendo que pague la tasa de registro.
− Un navegador, por ejemplo Internet Explorer o FireFox. Es recomendable
que tenga los dos navegadores disponibles y pruebe sus programas en
ambos. Aunque lo que vamos a ver en el curso es código, eventos y
objetos compatibles, no obstante hay pequeñas diferencias de
comportamiento.
Un esqueleto de página para realizar sus prácticas y pruebas es:
<HTML>
<HEAD> <!--HTML-->
<TITLE> New Document </TITLE>
<script>
// definición de funciones
</script>
</HEAD>
<BODY>
<script>
//codigo que se ejecuta al principio
</script>
<!-- html -->
<script>
//codigo que se ejecuta al final
</script>
</BODY>
</HTML>
Tenga en cuenta que el código JavaScript debe ir encapsulado dentro de la
etiqueta <script>, y que puede haber tantas etiquetas <script> como quiera.
• Localización y depuración de errores
48
Como el lenguaje es interpretado, los errores se mostrarán siempre en tiempo
de ejecución, esto es cuando cargue la página en el navegador.
¿cómo puede cargar una página en el navegador? No necesita para nada un
servidor web. Salve la página en un directorio con extensión .html y pinche dos
veces sobre ella. También puede escribir la ruta de su fichero en la barra de
direcciones o seleccionar la opción "Abrir Fichero" del menú "Archivo" del
navegador.
Si la página no tiene errores, el navegador mostrará el resultado de la
ejecución. Si la página tiene errores, la forma de localizarlos es distinta según el
navegador:
− Internet Explorer. Vaya a "Herramientas" -> "Opciones de Internet" ->
"Opciones Avanzadas" -> "Examinar" y aseguresé de que la opción
"Mostrar una notificación sobre cada error de secuencia de comandos"
está marcada.
A partir de ahora siempre que una página tenga errores de JavaScript,
saldrá una ventanita indicando la línea y el tipo de error.
− FireFox. Vaya a la opción "Herramientas" y abra la "Consola JavaScript".
Todos los errores de su página saldrán ahí. Límpiela previamente para
que sus errores no se mezclen con los de páginas anteriores.
Prácticas
1. Ponga al menos 3 ejemplos de lenguajes compilados que conozca
2. Ponga al menos 3 ejemplos de lenguajes interpretados que conozca
Conclusión
JavaScript es un lenguaje de propósito general que puede tener varios usos. El
mas extendido en la actualidad es la creación de páginas web dinámicas.
JavaScript es un lenguaje parecido en la sintaxis a Java y C, aunque mucho
menos estricto en lo que a definición y modificación dinámica de tipos se refiere.
Existen varias versiones de JavaScript. Hasta la aparición del Explorer 4.5,
Netscape 6 y FireFox había graves problemas de compatibilidad entre versiones
49
y por tanto entre navegadores. En la actualidad ese problema está en gran
parte superado, aunque conviene seguir probando nuestras páginas en todos
los navegadores para asegurarnos que tienen el comportamiento esperado.
Lección 2 Tipos de Datos y Variables
Índice
− Introducción
− Contenidos
o Apartado 1. Tipos de datos
o Apartado 2. Conversión de tipos
o Apartado 3. Variables
o Apartado 4. Literales
− Ejercicios de autocomprobación
− Práctica
Introducción
JavaScript es un lenguaje débilmente tipado y tipado dinámicamente. En esta
lección aprenderemos cómo declarar variables y que tipos de datos pueden
contener las variables.
Objetivos
− Conocer los tipos de datos existenes
− Saber como declarar variables
− Saber como cambian de tipo las variables
50
Apartados
Apartado 1. Tipos de Datos
En JavaScript existe un conjunto muy reducido de tipos de datos básicos. Estos
son:
• Numeros. Como 7 ó 2,789
• Booleanos. true o false
• Cadenas (Strings). Como "hola" u 'hola'
• null. Un valor y tipo especial que indica valor nulo.
• undefined. Un valor y tipo especial que toman las variables cuando no están
definidas. Tanto null como undefined son palabras reservadas del lenguaje
(en minúsculas).
El resto de datos usuales en la programación, como fechas y vectores se
utilizan mediante objetos predefinidos del lenguaje, (a diferencia de otros
lenguajes donde son tipos básicos).
Apartado 2. Conversión de tipos
JavaScript es un lenguaje débilmente tipado y tipado dinámicamente. Esto
significa que no hace falta declarar los tipos de las variables, y que la
conversión de tipo se hace dinámicamente, o mas bien que las variables son
cada vez del tipo del valor que contienen.
Así por ejemplo:
x=20; //primero asigno a la variable x el valor 20.
x="hola" //es perfectamente válido.
Cuando se usan operadores o funciones, convierte automáticamente.
En caso de conflicto, por ejemplo, si hay números y cadenas con el operador +,
tienen preferencia las cadenas.
Por ejemplo, (alert es un método que muestra cadenas en pantalla):
alert(45) //alert espera una cadena. El intérprete convierte
//a la cadena "45" y la saca en pantalla.
alert("tengo " + 20 + "años") // saca en pantalla "Tengo 20
51
// años"
alert(3 + "77") //saca en pantalla "377"
alert("37" - 7) /* saca en pantalla 30. No hay operador - para cadenas,
luego aplica el de los números. Convierte "37" a número, resta y luego
convierte el resultado a cadena y lo saca en pantalla.
Aunque el intérprete convierte automáticamente los tipos, hay ocasiones en que
para evitar posibles ambigüedades, o por claridad del código, conviene hacer
una conversión explícita. Para ello, existen las siguientes funciones
predefinidas;
• parseInt(string[, radix]), parseFloat(string[, radix]). Devuelve un
entero o la constante NaN.
• [Link](). Devuelve una cadena que representa el objeto. Existe
para Array, Boolean, Date, Function, Number, String
• String(objeto). Convierte el objeto a String. Es una función predefinida
que recibe un objeto como parámetro, en vez de un método que se aplica
a un objeto determinado.
• Number(objeto). Convierte el objeto a Número.
A veces es necesario conocer cual es el tipo de una variable, pues sucesivas
operaciones pueden haber provocado su modificación. Para ello existe el
operador typeof (operando) ó typeof operando que dada una variable,
palabra clave u objeto, devuelve su tipo.
Apartado 3. Variables
No hace falta declarar explícitamente las variables, se pueden crear
simplemente asignándoles un valor
x=7;
Pero se puede hacer, para lo cual existe la palabra reservada var. Cuando se
declara una variable toma el valor undefined. No hay forma de decir que tipo
será la variable.
var y;
Las variables se evalúan cuando aparecen en el lado derecho de una
asignación (el intérprete intenta extraer su valor). Si durante la evaluación, la
52
variable no tiene valor, pueden pasar dos cosas,
Si no ha sido declarada da un error en tiempo de ejecución
x = y + 2; // la y no ha sido declarada, error de ejecución
Si ha sido declarada, el valor la evaluación devuelve undefined o NaN si operan
números
var x; var y;
x= 3 + y; // x vale NaN
Se puede saber si una variable tiene valor, preguntando si es undefined
if (x === undefined)
{
//no operar con la variable
}
También se puede asignar a una variable el valor undefined
x=undefined //no se porque querría hacer esto!!
Si una variable se declara, o se crea, fuera de ninguna función, se dice que su
alcance es global, y es accesible desde cualquier punto o función de la página.
Si la variable se crea dentro de una función, tiene alcance local, y sólo se
puede usar dentro de la función. En caso de conflicto de nombres, tiene
preferencia la local.
Se puede acceder a variables declaradas en otras ventanas o marcos, haciendo
referencia a la ventana a la que pertenece. Por ejemplo, si una página HTML
que declara dos marcos con FRAMESET también define una variable llamada
nombre, desde cualquiera de los marcos hijo podemos acceder al nombre
mediante [Link].
Apartado 4. Literales
Los literales son las representaciones de los valores que pueden tomar las
variables.
• Enteros. Se pueden expresar en decimal, octal o hexadecimal. Una
secuencia de dígitos que no empieza por 0 es un entero decimal. Una
secuencia de dígitos del 0 al 7 que comienza por un 0 es un entero octal.
Una secuencia de dígitos o letras de la A a la F que empieza por 0x es un
53
entero hexadecimal. Por ejemplo: 17 (entero decimal); 017 (entero octal, 15
en decimal); 0x17 (entero hexadecimal, 23 en decimal); -010 (entero octal, -
8 en decimal).
• Reales. Constan de parte entera, parte decimal y exponente. La parte
decimal va precedida de "." y el exponente de "e" o "E". Para que un literal
se considere que representa un número real debe tener al menos un dígito y
el punto o la "e". Por ejemplo: -27.34E-6, 18e2, .6.
• Booleanos. Son los valores true o false
• Cadenas. 0 ó más caracteres entre comillas simples o dobles. Si una
cadena empieza por comillas de un tipo, hay que terminarla con comillas del
mismo tipo.
a="hola"; b='adios'; c=""; d=''; texto="primera línea\n segunda línea"
"esto no vale' //empezar con dobles y terminar con sencillas
Los caracteres especiales se ponen con \. \n nueva línea. \t tabulador. \' ó \"
para poner comillas dentro de cadenas. \\ para poner la propia barra "\"
También se pueden poner comillas en una cadena alternándolas.
frase='Ella dijo "te quiero"'
• Vectores (Arrays). Una lista de elementos, separados por comas, entre
corchetes. Como las variables no tienen tipo, los vectores tampoco, y por
tanto un vector puede alternar elementos de tipos distintos. Cuando se
accede a un vector el primer elemento es el 0. Por ejemplo:
numeros=[1, 2, 3, "I", "II", 'III'] //crea un objeto Array y se lo
asigna a la variable numeros
a=empleados[0] // a vale 1
b=empleados[5] // b vale 'III'
l=[Link] //la longitud del vector es 6 (de 0 a 5)
Se puede aumentar dinámicamente el tamaño de un vector con sólo asignar
valores por encima de su límite superior
empleados[10] = "decimo" // Incremento el tamaño a 11 y creo un
elemento en la posición 10. Los huecos del 6 al 9 valen undefined.
54
Ejercicios resueltos
El siguiente ejemplo muestra como aunque volvamos a declarar una variable, si
ya está definida su valor permanece.
<html>
<body>
<script>
a=5;
var a;
alert(a); // saca un 5
</script>
</body>
</html>
Prácticas
1. Monte un entorno de programación como el descrito en la lección 1
2. Escriba unas instrucciones JavaScript que creen unas variables de cada
tipo de dato para el que exista un literal
3. Convierta estas variables de unos tipos a otros, bien mediante
conversión implícita del intérprete por la aplicación de operadores, bien
mediante conversión explícita.
4. Cree un una página HTML Dinámica que le produzca un error en tiempo
de ejecución debido a la evaluación de una variable no declarada.
Conclusión
JavaScript tiene un conjunto muy reducido de tipos básicos. El resto de tipos
que normalmente se utilizan en programación están implementados mediante
objetos.
Las variables cuando se declaran no son de un tipo o de otro. Pueden contener
en cualquier momento cualquiera de los tipos básicos u objetos. El intérprete se
encarga de las conversiones necesarias.
55
Lección 3 Expresiones y Operadores
Índice
− Introducción
− Contenidos
o Apartado 1. Expresiones
o Apartado 2. Operadores aritméticos
o Apartado 3. Operadores de comparación
o Apartado 4. Operadores lógicos
o Apartado 5. Asignación
o Apartado 6. Operadores especiales
− Ejercicios de autocomprobación
− Práctica
Introducción
En esta lección vamos a conocer los operadores existentes en el lenguaje
JavaScript
Objetivos
− Conocer que es una expresión
− Conocer los operadores de JavaScript
Apartados
Apartado 1. Expresiones.
Una expresión es un conjunto válido de literales, variables, operadores y
expresiones que evaluado da como resultado un único valor. Las expresiones
pueden ser de cuatro tipos: Aritméticas, dan como resultado un número.
Cadenas, dan como resultado una cadena. Lógicas, dan como resultado un
56
valor booleano, true o false. De objeto, dan como resultado un objeto.
x=25+(22-contador)* parseInt("10") //expresion aritmética
Apartado 2. Operadores aritméticos
Descripción Símbolo Ejemplo Resultado
Multiplicación * 2*4 8
División / 5/2 2.5
Suma + 2+2 4
Resta - 7-2 5
Módulo(resto) % 5%2 1
Autoincremento ++ ++2 ó 2++ 3
Autodecremento -- --2 ó 2-- 1
Menos unario - -(2+4) -6
El autoincremento y autodecremento se comportan de manara distinta según
aparezcan a la derecha o la izquierda del número. Pueden hacer el código
farragoso.
v=3; w=++v //Incrementa primero v y luego lo asigna a w. v y w terminan
valiendo 4 los dos.
v=3; w=v++ //primero asigna v a w, y luego incrementa v. w termina
valiendo 3 y v 4.
Apartado 3. Operadores de comparación
Descripción Símbolo Ejemplo Resultado
Igualdad == 2==2, 2=='2' true, true (convierte tipos)
Desigualdad != 2!=3 true
Igualdad Estricta === 2==='2' false
Desigualdad estricta !== 2!=='2' true
Menor que < 2<2 false
Mayor que > 3>2 true
57
Menor o igual que <= 2<=2 true
Mayor o igual que >= 1>=2 false
Apartado 4. Operadores lógicos
Descripción Símbolo Ejemplo Resultado
Negación ! !(2==2) false
Y && (2==2)&&(2>=5) false
Ó || (2==3)||(2>=5) true
Apartado 5. Asignación
x=y asigna a x el valor de y
El operador de asignación se puede combinar con los operadores aritméticos,
aunque el código puede quedar un poco farragoso.
x+=y // x= x + y
Apartado 6. Operadores especiales.
• Concatenación de cadenas. +
x="hola " + "caracola" // devuelve la cadena "hola caracola"
• Condicional. condición ? a : b
Si la condición es true, devuelve a, si no devuelve b.
x=(3 > 2)? "hola": "adios"; //equivalente a
if(3>2){
x="hola"
}else{
x="adios"
}
• coma. ,
Evalúa ambos operandos y devuelve el valor del segundo. Se usa sobre todo
dentro de los bucles for, para poder modificar a la vez varias variables.
for(i=0,j=0; i<10; i++,j++)//incrementa cada vez la i y la j
• new. nombredeObjeto = new TipodeObjeto(parametros)
Crea un objeto nuevo. Los objetos de tipos predefinidos que se pueden crear
58
son; Array, Boolean, Date, Function, Image, Number, Object, Option, RegExp, y
String. Todos pertenecen al núcleo de JavaScript, excepto Image y Option que
son objetos de cliente.
• delete. Permite borrar un objeto, una propiedad de un objeto o un elemento
de un array.
v=new Array(5) //crea un array de 5 elementos
delete v // se lo carga.
w=['verde','azul', 'rojo'] //crea un array de 3 elementos
[Link] = "colores basicos" //crea una propiedad llamada nombre
dinámicamente
delete [Link] //elimino la nueva propiedad
delete w[1] //me cargo el elemento del centro. w[1] vale ahora
undefined.
• this. Hace referencia al objeto actual. Normalmente se utiliza para acceder
al objeto que contiene el método que estoy ejecutando.
• typeof operando ó typeof (operando) Devuelve una cadena con el tipo del
operando.
var mifuncion = new Function("5+2")
var color="rojo"
var contador=1
var hoy=new Date()
alert(typeof mifuncion) // saca "function"
alert(typeof color) // saca "string"
alert(typeof contador) // saca "number"
alert(typeof hoy) // saca object
alert(typeof otracosa) // saca "undefined"
• void(expresion) ó void expresion. Evalúa la expresión pero no devuelve
ningún valor. Es muy útil para crear enlaces que no hagan nada.
<a href="javascript:void(0)">nada</a>
o para efectuar operaciones
<a href="javascript:void([Link]()">Enviar</a>
• instanceof. Objeto instanceof tipoObjeto. Devuelve true si Objeto es de
tipo TipoObjeto. Por ejemplo:
fecha=new Date(1995, 12, 17)
59
if (fecha instanceof Date) {
// hacer algo con la fecha
}
• in. propiedad in Objeto. Devuelve true si Objeto tiene esa propiedad y
false en caso contrario. También sirve para saber si un objeto tipo array
tiene un índice determinado.
Por ejemplo, para arrays,
v=["azul", "rojo", "verde"]
x= 1 in v //x vale true
y= 3 in v // y vale false (v va de 0 a 2)
Para objetos en general
z=length in v //z vale true, length es una propiedad de todos los
vectores
[Link] = "hola" //creo dinamicamente una propiedad
w= mipropiedad in v // w vale true
Nótese que cuando se añade una propiedad a un objeto, el intérprete
internamente la mete en un vector, con clave de acceso el nombre de la
propiedad, donde almacenar dichas propiedades nuevas, así,
var v = new Array()
[Link] = "Hola" //creo una propiedad nueva dinámicamente
/* Es equivalente a decir */
v["mipropiedad"] = "Hola"
Ejercicios resueltos
La siguiente sentencia muestra una ventana. Si la variable familiaNumerosa
vale true, la frase es "La matrícula cuesta: 10 Euros". Pero si familiaNumerosa
vale false, es "La matrícula cuesta 20 Euros"
alert ("La matricula cuesta: " + (familiaNumerosa ? "10 Euros" : "20
Euros"))
Prácticas
1. Haga una página en JavaScript con unas variables de los siguientes
tipos: vector, fecha, cadena, booleano y número. A continuación pregunte
por el tipo de cada variable y saque por pantalla el tipo de cada variable
60
en castellano.
Conclusión
JavaScript es un lenguaje con un gran número de operadores. Además muchos
de estos operadores se pueden combinar con el operador de asignación.
El uso y combinación de algunos de los operadores puede llevar a que el código
sea mas farragoso de leer y dificil de mantener.
Lección 4 Sentencias
Índice
− Introducción
− Contenidos
o Apartado 1. Sentencias condicionales
o Apartado 2. Bucles
o Apartado 3. Manipulación de objetos
o Apartado 4. Manejo de excepciones
− Ejercicios de autocomprobación
− Práctica
Introducción
En esta lección vamos a aprender las sentencias del lenguaje JavaScript.
JavaScript comparte con Java y C la sintaxis de la mayoría de las sentencias,
por lo que a los programadores familiarizados con estos lenguajes no debería
resultarles excesivamente dificil su utilización.
Objetivos
− Conocer las sentencias de control de flujo
61
− Conocer las sentencias de manipulación de objetos
− Conocer las sentencias de manejo de excepciones
Apartados
Apartado 1. Sentencias condicionales
• if..else
if (condicion) {
sentencias1
}
[else {
sentencias2
}]
La sentencia if ejecuta las instrucciones que van a continuación si la condición
se evalúa a true.
La condición debería contener una expresión lógica. En caso contrario hay que
tener en cuenta que las expresiones que son undefined, cero, la cadena vacía,
null o NaN se evalúan a false cuando se encuentran en una condición. El resto
de expresiones aritméticas, de cadena o de objeto se evalúan a true.
El else es opcional y las sentencias que contiene se ejecutan en caso de que la
condición sea false.
Si sólo hay una sentencia a ejecutar pueden no ponerse llaves, pero el código
queda mas claro si las lleva.
• switch
switch (expresión)
{
case literal1:
sentencias;
break;
case literal2:
sentencias;
62
break;
default: sentencias;
}
Se evalúa la expresión y se compara con los literales descritos a continuación
de los case. Si los valores son iguales, se ejecutan las sentencias que vienen a
continuación.
Si no se pone el break, el intérprete continua ejecutando el siguiente case, y el
siguiente, hasta que encuentre un break. (Esto puede ser un poco confuso).
El default también es opcional. Se ejecuta en caso de que la expresión no se
evalúe a ninguno de los literales definidos en los case.
Apartado 2. Bucles
• Bucle for
for (expresión de inicio ; condición; expresión de incremento){
sentencias;
}
El bucle for se ejecuta mientras la condición sea cierta. La sintaxis es la misma
que en C o en Java. Los pasos de ejecución son:
1. Se ejecuta la expresión de inicio. Aquí puede haber varias expresiones
separadas por el operador coma. También se pueden declarar variables.
Lo normal es inicializar el valor del contador que va a controlar el número
de iteraciones.
2. Se evalúa la condición. Si es true¸ se ejecutan las sentencias, y si es
false no.
3. Se ejecutan las sentencias
4. Se ejecuta la expresión de incremento y se vuelve al paso 2.
• do..while
do
{
sentencias
}
63
while (condición)
Permite ejecutar un bucle 1 a n veces. Las sentencias se ejecutan al menos una
vez antes de evaluar la condición. Si está es true el bucle se repite. Cuando se
evalúe a false el bucle se termina.
• while
while (condición)
{
sentencias;
}
Permite ejecutar un bucle 0 a n veces. La condición se evalúa lo primero, y si es
true se ejecutan las sentencias y vuelve a evaluarse. Cuando sea false el bucle
termina.
• break y continue (no estructuradas).
break interrumpe la ejecución del bucle en que está contenida.
continue se salta la ejecución de las instrucciones que pudieran restar dentro
del bucle que la continue, y pasa directamente a la siguiente iteración.
i = 0
while (i < 5)
{
i = i +1;
if (i == 3)
{
continue; // cuando i vale 3 me salto el alert
}
alert (i);
} // saca 1, 2, 4
Apartado 3. Manipulación de objetos.
• for..in
for (variable in objeto)
{
sentencias
}
64
Sirve para recorrer todas las propiedades definidas por el usuario de un objeto.
Por cada propiedad distinta, el intérprete ejecuta las sentencias.
Como se ha comentado al explicar el operador in, JavaScript considera las
propiedades definidas por el usuario como elementos de un vector asociado al
objeto y viceversa; los elementos de un objeto tipo vector son propiedades de
dicho objeto.
Por ejemplo:
v = ['a','b','c'] // crea un objeto array con tres elementos
v.mipropiedad1 = "pepito" //crea una propiedad nueva llamada
mipropiedad con valor "pepito"
v['mipropiedad2']='juanito' // equivalente a la instrucción anterior
con otros valores.
for (e in v)
{
alert(v[e])
}
//saca por pantalla a, b, c, pepito y juanito
for (e in v)
{
alert(e)
}
//saca por pantalla 0, 1, 2, mipropiedad1 y mipropiedad2
En caso de que algún elemento o propiedad tenga como valor undefined¸ no se
ejecutan las sentencias.
v[4] = 'e' //aumento el tamaño del vector pero v[3] queda undefined. No
saldría en la iteración.
• width
with (objeto)
sentencias;
Permite acceder a las propiedades y métodos de los objetos sin necesidad de
nombrarlo todo el rato.
65
with (document)
write(‘hola’);
write(‘adios’);
Apartado 4. Manejo de excepciones.
A partir de la versión 1.4 de JavaScript, es posible generar y capturar
excepciones en el código.
• throw. Generación de excepciones.
throw expresión
Permite generar una excepción. El valor de la excepción será el indicado en la
expresión (un número, una cadena, un booleano e incluso un objeto).
• try..catch. Captura de excepciones.
try {
sentencias
}
catch (variable_excepcion)
{sentencias}
[finally
{sentencias}]
Puedo envolver un bloque de sentencias dentro de una sentencia try. Si durante
la ejecución de este bloque se genera alguna excepción (mediante throw), el
flujo de ejecución de interrumpe y salta el bloque catch. En el bloque catch,
variable_excepcion contiene el valor de la excepción generada por la instrucción
throw.
La sentencia finally se ejecuta al final del todo en cualquier caso, haya saltado o
no una excepción, haya bloque catch o no.
66
Ejercicios resueltos
En el siguiente ejercicio mostramos como se pueden anidar las sentencias
try..catch, y reenviar las excepciones hacia el mas externo
<html>
<script>
try {
alert("try mas externo");
try {
alert("try anidado...");
throw "error interno";
}
catch(e) {
alert("catch interno atrapa el error " + e);
throw e + " reenviado";
}
finally {
alert("Sentencia finally del try anidado");
}
}
catch(e) {
alert("catch externo atrapa el error: " + e);
}
finally {
alert("Sentencia finally del try externo");
}
</script>
</html>
Prácticas
1. Realice un programa en Javascript que muestre en pantalla los elementos
de una progresión aritmética y su suma total, utilizando para ello un bucle
while
A continuación muestre los elementos de una progresión geométrica y su
producto total utilizando un bucle for.
Los parámetros incremento, razón, valor inicial y número de elementos de
las progresiones están en variables locales conocidas, creelos y asigneles el
67
valor que quiera.
Conclusión
JavaScript comparte con C y Java la sintaxis de la mayoría de sus sentencias.
Tiene sentencias de control de flujo, manipulación de objetos y a partir de la
versión 1.4 también de captura de excepciones.
JavaScript tiene algunas sentencias no estructuradas que no conviene utilizar si
se quiere mantener la legibilidad del código.
Lección 5 Funciones
Índice
− Introducción
− Contenidos
o Apartado 1. Definición de funciones
o Apartado 2. Llamada a funciones
o Apartado 3. Número variable de argumentos
o Apartado 4. Funciones predefinidas
− Ejercicios de autocomprobación
− Práctica
Introducción
JavaScript permite definir funciones. Como es un lenguaje interpretado en vez
de compilado, no existe la distinción entre la declaración y la definición de las
funciones, como existe en otros lenguajes.
La definición de funciones no permite tampoco indicar los tipos de los
parámetros de entrada o del resultado.
68
Veremos las funciones predefinidas del lenguaje, que son muy pocas.
JavaScript no tiene bibliotecas de funciones de utilidad que se puedan importar,
como existen en C y Java. Tampoco tiene funciones de entrada / salida, o
interacción con el equipo del cliente, ya que en los usos de JavaScript no está
contemplado que acceda a ningún recurso de la máquina del usuario, salvo el
propio navegador.
Objetivos
− Aprender a definir funciones.
− Aprender a ejecutar funciones y pasarlas parámetros
− Conocer las funciones predefinidas del lenguaje.
Apartados
Apartado 1. Definición de funciones
function NombredelaFuncion (argumentos)
{
sentencias;
}
Una función permite agrupar un conjunto de sentencias y ejecutarlas mas tarde
(al llamarla). La utilidad de las funciones es la reutilización de código y la
claridad.
Si queremos que la función devuelva un valor, hay que poner la palabra clave
return. return termina la ejecución de la función, (no se ejecutan las sentencias
que vienen a continuación del return).
Se pueden definir funciones sin argumentos. Los argumentos se pasan por
valor (copia), esto es, si la función modifica los argumentos, su valor no cambia
fuera de la función, salvo en el caso de los objetos que se pasan por
referencia. Si una función recibe como parámetro un objeto y modifico alguna
de sus propiedades, esa modificación es visible en el código externo a dicha
función.
Apartado 2. Llamada a funciones.
La definición de una función no ejecuta su código. Para que se ejecute es
69
necesaria "llamarla" con unos argumentos determinados.
Si la función devuelve algún valor, se puede asignar la función a una variable
donde se recoge el valor devuelto.
Es una buena práctica de programación definir todas las funciones que se van a
utilizar en una página antes de llamarlas. Un buen sitio poner estas definiciones
es la cabecera de la página html. <head>...</head>
Apartado 3. Número variable de argumentos.
Los argumentos que recibe una función se guardan en un vector llamado
arguments, accesible desde el propio código de la función. De esta manera
arguments[0], contiene el primer argumento, arguments[1] el segundo, etc.
Esto permite llamar a una función con mas argumentos de los que tiene
formalmente definidos. Por ejemplo, se define sin argumentos, pero en las
llamadas se introducen. Dentro de la función se comprueba el vector arguments
y se extraen todos los que se encuentren. Por ejemplo:
//función que suma un número variable de números
function sumar()
{
resultado =0;
//recorro los argumentos hasta llegar al final (length)
for (i=0; i<[Link]; i++)
{
resultado = resultado + arguments[i]
}
return resultado
}
s= sumar(2,5,5) //suma 2,5 y 5 y devuelve 12.
Apartado 4. Funciones predefinidas
JavaScript tiene una serie de funciones de utilidad predefinidas. Estas son:
• eval(cadena). Evalúa la cadena que recibe como parámetro y devuelve el
resultado. cadena tiene que ser un String que contenga una expresión o un
conjunto de instrucciones.
x=eval("2+3") //x vale 5
• isFinite(number). Si el argumento vale NaN, positive infinity o negative
70
infinity, devuelve false, en caso contrario devuelve true
• isNaN(valor). Si el valor es NaN o no puede ser convertido a un número,
devuelve true, y false en caso contrario.
parseInt(cadena, [base]), parseFloat(cadena), Number(objeto),
String(objeto). Convierten cadenas y objetos a números o cadenas. Son
funciones de conversión de tipos.
Ejercicios resueltos
La siguiente función recibe como parámetro un vector y un elemento, y busca el
elemento dentro del vector. Si lo encuentra devuelve true y false si el elemento
no está en el vector.
<html>
<script>
function Encontrar (vectorDondeBusco, elementoBuscado)
{
for (i in vectorDondeBusco)
{
if (vectorDondeBusco[i] === elementoBuscado)
{
return true;
}
}
return false;
}
v=['a', '1','2', 2]
resultado = Encontrar(v, 1)
alert (resultado) // false
resultado = Encontrar(v, 2)
alert (resultado) // true
</script>
</html>
Prácticas
1. Realice dos funciones que implementen las progresiones de la lección
anterior.
La progresión aritmética recibirá como parámetros el número de elementos,
71
el valor inicial y la diferencia. Debe ir sacando por pantalla los elementos de
la progresión y debe retornar la suma total de todos los elementos de la
progresión.
La progresión geométrica recibirá como parámetros el número de
elementos, el valor inicial y la razón. Debe ir sacando por pantalla los
elementos de la progresión y deber retornar el producto total de todos los
elementos.
Conclusión
JavaScript, como todos los lenguajes de alto nivel, permite definir y ejecutar
funciones. JavaScript tiene un número muy limitado de funciones predefinidas.
No existen además bibliotecas de utilidad estándar que podamos utilizar para
acceder a los recursos de la máquina o hacer otras funciones.
Ya veremos que no obstante, sí es posible importar en nuestras páginas
funciones definidas en ficheros por otros usuarios.
Lección 6 Objetos
Índice
− Introducción
− Contenidos
o Apartado 1. Creación y acceso a de objetos
o Apartado 2. Creación dinámica de propiedades y métodos
o Apartado 3. Objetos predefinidos
o Apartado 4. Prototipos
− Ejercicios de autocomprobación
− Práctica
72
Introducción
JavaScript es un lenguaje orientado objetos, en el cual existen una serie de
objetos predefinidos. Además, cuando utilizamos JavaScript para construir
páginas web dinámicas, el navegador también pone a disposición una serie de
objetos que reflejan las caracterísitcas del propio navegador y de la página, es
el Modelo de Objetos de Documento.
Aunque JavaScript también permite crear nuevos tipos de objetos, no vamos a
ver como crear objetos definidos por el usuario, pero sí como acceder y
modificar los tipos de objetos predefinidos.
Objetivos
− Aprender a crear objetos de los tipos existentes
− Aprender a acceder y modificar las propiedades y métodos de los objetos
− Aprender a crear propiedades y métodos nuevos en los objetos
− Conocer los objetos predefinidos del lenguaje
− Aprender a modificar las características de los tipos de objetos
existentes.
Apartados
Apartado 1. Creación y acceso a objetos.
Hay varias maneras de crear objetos en HTML Dinámico.
1. Mediante literales
Cuando asignamos a una variable un literal de Array, o de String, esa variable
pasa a contener inmediatamente un objeto de ese tipo.
x = ['a','b','c'] //crea un objeto Array de 3 elementos
2. Mediante new
Es posible crear un objeto de los tipos predefinidos del lenguaje, imágenes y
opciones de HTML mediante el operador new.
Cuando se utiliza new hay que invocar a continuación un constructor del
73
objeto, que puede llevar o no parámetros.
x= new Array(5) // crea un array de 5 elementos
3. Mediante etiquetas HTML
Como veremos en el Modelo de Objetos de Documento (DOM), determinadas
etiquetas HTML dan lugar a la creación por parte del navegador de objetos del
tipo correspondiente, cuyas propiedades y métodos son directamente
accesibles desde el código JavaScript de la página
titulo = [Link] // leo el título de la página
4. Mediante llamadas a funciones o métodos que devuelven un objeto
Existen funciones y métodos de determinados objetos que devuelven a su vez
un objeto. Por ejemplo, el método split del objeto String, devuelve un objeto
vector con tantos elementos como subcadenas tuviera la cadena original.
c= "a,b"
x = [Link](",") //devuelve el vector ['a'.'b']
• Asignación
También es posible asignar variables a otras que apuntan a objetos ya creados
por cualquiera de los métodos anteriores. En ese caso no se crea un objeto
nuevo, sino que las dos variables apuntan al mismo. Si se modifican las
propiedades del objeto accediendo desde cualquiera de las dos variables, los
cambios serán visibles en la otra.
• Acceso a las propiedades y métodos
Para acceder a las propiedades y métodos de los objetos se utiliza la notación
"." (punto).
[Link] u [Link]()
Apartado 2. Creación dinámica de propiedades y métodos.
Los objetos predefinidos del lenguaje o de las páginas HTML Dinámicas tienen
una serie de propiedades y métodos, cuya descripción se puede encontrar en
lareferencia.
No obstante, mediante JavaScript se pueden añadir en tiempo de ejecución
propiedades y métodos nuevos a las ocurrencias de los tipos de objetos
74
predefinidos.
• Añadir una propiedad nueva.
Añadir una propiedad nueva a un objeto ya existente se puede hacer de dos
maneras,
Mediante la notación ".", asignando un valor a dicha propiedad
v = new Array(); //crea un vector
[Link] = "rojo" // crea una propiedad color con valor "rojo"
Mediante la notación de vectores, creando un elemento con clave de acceso el
nombre de la propiedad, y el valor deseado.
v["color"] = "rojo"
Ambas notaciones son equivalentes e intercambiables. Si se ha creado una
propiedad de una manera a continuación se puede leer de la otra.
• Añadir un método nuevo
El sistema y notaciones para añadir un nuevo método es el mismo que para las
propiedades, con la salvedad que el valor a asignar debe ser el nombre de una
función, (no incluir los paréntesis ni argumentos).
function Alerta(cadena) //creo una función que saca en pantalla la
cadena que recibe como parámetro
{
alert(cadena);
}
v = new Array('a','b','c') // creo un vector
[Link] = Alerta; //creo un nuevo método llamado alertar
[Link]("hola"); //llamo al método con el parámetro "hola"
v["alertar"]("adios"); //idem con "adios.
Apartado 3. Objetos predefinidos
Al igual que existen funciones predefinidas, el núcleo de JavaScript también
tiene una serie de objetos predefinidos, dentro de los cuales se pueden
distinguir dos tipos; aquellos cuyas instancias las tiene que crear el usuario
expresamente (Array, Boolean, Date, Function, RegExp y String), los objetos
que el usuario no puede crear sino que ya existe una única instancia con la que
trabajar (Math y Number).
75
En este curso no vamos a ver los objetos Boolean, (porque no tiene mucha
utilidad), ni RegExp (porque queda fuera del objetivo del curso, como se explicó
en la introducción).
• Objeto Array
En JavaScript no existe tipo predefinido para los Vectores, se usa el objeto
Array. Se crean mediante new y el constructor o mediante literales de Array. El
constructor de Array está sobrecargado, esto es tiene un comportamiento
distinto dependiendo del número y tipo de los argumentos que recibe.
variable = new Array (argumentos)
Si argumentos contiene un único valor numérico, crea un vector con ese
número de elementos, todos ellos undefined.
Si argumentos contiene una lista de elementos o un único valor no numérico,
crea un vector de tamaño el número de elementos, inicializados todos ellos a
los correspondientes valores. Argumentos puede ser vacío en cuyo caso crea
un vector sin elementos. (Puede crecer mas tarde).
Para leer o asignar valores a los elementos de un vector, se utiliza la notación
corchete, [], poniendo dentro el índice del elemento al que se quiere acceder. El
índice inferior del array es siempre 0 y el superior el tamaño –1
a = new Array(7); //crea un vector de tamaño 7
b = new Array(“hola”, “que”, “tal”); //vector tamaño 3, relleno
c = [“hola”, “que”, “tal”]; //idem que arriba
No hay una sintaxis especial para crear matrices (arrays de mas de una
dimensión). Para ello es necesario realizar un bucle que cree arrays de arrays, y
sucesivamente.
a = new Array(4);
for(i=0;i<4;i++)
{
a[i] = new Array(5) // Array de 4 x 5 elementos
}
// Luego accedo mediante a[i][j]=7 por ejemplo.
A continuación enumero las propiedades y métodos mas importantes del objeto
array. La lista completa con ejemplos puede encontrarse en la referencia.
76
− [Link]. Propiedad. Contiene el tamaño del vector. Es el valor del último
índice mas uno.
− [Link](argumentos). Concatena el vector v con los que recibe como
argumentos.
− [Link](separador) Convierte el vector en una cadena con sus elementos
separados por “separador” o “,” si se omite
− [Link]() Invierte el orden de los elementos del vector•[Link](inicio,
longitud). Devuelve un vector de “longitud” elementos, extraidos a partir
del indice “inicio” de v
− [Link]([funcion]). Ordena el vector. Si “funcion” de omite sigue el orden
lexicográfico
• Objeto Date
Permite trabajar con fechas. Internamente es un número "gordo" con el número
de milisegundos desde 1/1/1970 00:00:00, positivos o negativos. Esto simplifica
mucho la forma de trabajo, porque siempre se puede operar con variables de
fecha pensando en ellas como si fueran números.
No existe literal de fecha, por lo que la creación siempre se realiza mediante el
constructor. Igual que con los arrays, dependiendo del número de parámetros
tiene un comportamiento u otro.
// sin parámetros devuelve la fecha y hora actuales.
fecha = new Date ();
// si recibe un solo parámetro numérico lo considera el número de
milisegundos transcurridos desde el 1/1/1970 00:00:00
fecha = new Date (milisegundos);
//si recibe un conjunto de 3 o 6 enteros, crea la fecha, o la fecha y
la hora especificada.
fecha = new Date (año, mes, dia, [hora, minuto, segundo]).
El último constructor es el más sencillo. Ojo porque los meses se indican del 0
al 11!!. El comportamiento de este constructor también es especial, porque si la
fecha no es correcta, salta al siguiente año o mes para crear una fecha correcta.
fecha = new Date(1900, 14, 40); // crea el 9 de Abril de 1901
77
Los métodos mas importantes del objeto fecha son:
SetDate(dia), setHours(hora), setMinutes(min), setMonth(mes),
setFullYear(año)... Para cambiar la el día, hora, minuto, mes, año, etc. de una
fecha ya creada.
getDate(), getHours(), getMinutes(), getMonth(), getFullYear()... para leer el
día, la hora, el minuto, el mes, el año, etc. de una fecha ya creada.
toString() Devuelve una cadena con la fecha, (en inglés)
Como las fechas son números, se pueden realizar con ellas operaciones
aritméticas.
• Objeto String
Aunque las cadenas son un tipo básico del lenguaje, cada variable de tipo
cadena creada es a su vez un objeto String.
Se crean indistintamente con el literal de cadena o con el constructor.
a = "hola"
a = new String("hola") //son equivalentes.
Es posible acceder a las propiedades y métodos de las cadenas directamente a
través del literal, sin necesidad de asignárselo a ninguna variable.
longitud = "caracola".length // longitud vale 8
Cuando se invoca algún método que devuelve o necesita la posición de un
carácter en la cadena, éstas empiezan en 0 hasta la longitud - 1 (como los
vectores).
Las propiedades y métodos mas importantes de las cadenas son:
charAt(pos), charCodeAt(pos). Devuelven el carácter o el código numérico del
carácter que está en la posición indicada de la cadena.
indexOf(subcadena). Devuelve la posición de la subcadena dentro de la
cadena, o -1 en caso de no estar.
split(separador). Devuelve un vector con las subcadenas obtenidas separando
la cadena por el carácter separador. Por ejemplo:
cadena = "Navidad,Semana Santa,Verano";
vector = [Link](","); //vector valdrá ["Navidad", "Semana Santa",
78
"Verano"]
concat(cadena2) . Devuelve el resultado de concatenar cadena2 al final de la
cadena.
r= [Link](cadena2) //equivale a
r= cadena + cadena2
substr(indice, longitud), substring(indice1, indice2) . Devuelven una
subcadena de la cadena, ya sea cogiendo un número de caracteres a partir de
un índice o extrayendo todos los caracteres entre dos índices.
toLowerCase(), toUpperCase(). Transforman la cadena a minúsculas y
mayúsculas, respectivamente
• Objeto Function
Siempre que se definen funciones, se crea así mismo un objeto de tipo Function
con el mismo nombre. De esta manera es posible asignar las funciones a
variables o a métodos de objetos. (Ver el ejemplo del apartado "Crear métodos
nuevos").
• Objeto Math
No se pueden crear objetos tipo Math. Permanentemente hay disponible una
instancia de ese tipo de objeto, que también se llama Math. Esto es, no se
puede ejecutar n = new Math(), sino que directamente decimos seno =
[Link](5)
Las propiedades y métodos mas importantes de Math son:
• PI Número PI [Link] 3,14159...
• E Número E Math.E 2.7182...
• abs Valor absoluto [Link](-2) 2
• sin, cos, tan Funciones trigronométricas, reciben el argumento en radianes
[Link]([Link]) -1
• asin, acos, atan Funciones trigonométricas inversas [Link](1) 1.57
• exp, log Exponenciación y logaritmo en base E [Link](Math.E) 1
• ceil Devuelve el entero mas pequeño mayor o igual que el argumento
79
[Link](-2.7) -2
• floor Devuelve el entero mas grande mayor o igual que el argumento
[Link](-2.7) -3
• round Devuelve el entero mas cercano o igual al argumento [Link](-
2.7) -3
• random Devuelve un número aleatorio entre 0 y 1 [Link]() ???
• min, max Devuelve el menor (o mayor) de sus dos argumentos
[Link](2,4) 2
• pow Exponenciación. El primer argumento es la base y el segundo el
exponente [Link](3,2) 9
• sqrt Raiz cuadrada [Link](4) 2
• Objeto Number
Al igual que con Math, no se crean objetos Number explícitamente. Sirve para
contener las propiedades .MAX_VALUE, .MIN_VALUE, .POSITIVE_INFINITY,
.NEGATIVE_INFINITIVE. (Valores máximos y mínimos permitidos, y valores
devueltos en caso de desbordamiento).
Apartado 4. Prototipos.
Además de crear propiedades o métodos nuevos en instancias de objetos que
ya existen, se pueden modificar los tipos de objetos, de forma que toda nueva
instancia de ese objeto tenga ya dichas propiedades o métodos, (además de las
predefinidas).
A diferencia de los lenguajes basados en clases, las cuales se definen en
tiempo de programación, y permanecen estáticas una vez compilado el código,
la naturaleza dinámica de JavaScript permite redefinir en tiempo de ejecución
las características de los tipos de objetos.
Aunque en este curso no vamos a entrar en como crear y definir nuevos tipos
de objetos y jerarquías, es posible modificar también los objetos predefinidos
del lenguaje o del Modelo de Objetos de Documento.
Los objetos en JavaScript están basados en prototipos. El prototipo es el
80
objeto padre o modelo a partir del cual se extraen las propiedades y métodos
iniciales, (la herencia). En JavaScript todos los objetos, predefinidos o no,
cuelgan de un objeto raiz llamado Object. El objeto Object tiene una propiedad
llamada prototype que está disponible por tanto también en todos los objetos
del lenguaje, sean del tipo que sean.
Si se quiere modificar el comportamiento de todo un tipo de objetos, por
ejemplo, que todos los arrays creados a partir de ahora tengan una propiedad
color, hay que añadir dicha propiedad al prototipo del objeto Array.
x = new Array();
[Link] = "rojo" // a partir de ahora todos mis arrays
tienen una propiedad que se llama color
v = new Array() // v tiene esa propiedad, y también x
alert([Link]); // rojo
alert([Link]); // rojo
[Link] = "Francisco" // esta propiedad sólo es de v
alert([Link]); // rojo
alert([Link]); // undefined
Ejercicios resueltos
El siguiente código calcula el tiempo transcurrido entre dos líneas de código.
timeA = new Date();
// hacer algo que lleva tiempo. Probar con FireFox, Netscape e Internet
Explorer a ver cual tarda menos
while (i < 100000)
{
i = i +1
}
timeB = new Date();
diferencia = timeB - timeA; // tiempo transcurrido en milisegundos
alert(diferencia)
La siguiente función devuelve un número aleatorio dentro del rango pasado
como parámetro.
<html>
<script>
function aleatorio (min, max)
{
81
min = parseInt(min)
max = parseInt(max)
return [Link]((max - min + 1) * [Link]() + min)
}
</script>
minimo: <input type="text" id="min"><br>
maximo: <input type="text" id="max"><br>
<input type="button" value="aleatorio"
onclick="alert(aleatorio([Link]('min').value,document.
getElementById('max').value))">
</html>
Prácticas
1. Hoja que contiene un formulario que pide la dirección de correo del usuario.
Si el usuario pertenece a la organización [Link], sale un mensaje
"Bienvenido: " nombre de usuario, si no dice "Usted no tiene permiso: "
nombre de usuario.
Poner la funcionalidad en una función llamada ValidarCorreo(direccion)
El código para llamar a la función es:
<form onSubmit="return
ValidarCorreo([Link]('correo').value);">
Correo electrónico: <input type="text" size="50" id="correo"><br>
<input type="submit" value="Enviar">
</form>
Conclusión
JavaScript es un lenguaje muy dinámico, que permite añadir propiedades y
métodos nuevos a las instancias de los objetos predefinidos, e incluso modificar
los prototipos de los objetos predefinidos, para que todas las nuevas instancias
tengan dichas propiedades y métodos.
Para JavaScript muchos tipos que en otros lenguajes son básicos aquí son
objetos. También crea objetos que "envuelven" a algunos tipos básicos, de
82
forma que puedes tratar las cadenas y los booleanos como objetos.
Conclusión de la Unidad Didáctica
JavaScript es un lenguaje de programación de propósito general. Sin embargo
no tiene librerías o componentes como tienen otros lenguajes para interactuar
con los recursos de la máquina del usuario.
JavaScript es un lenguaje muy dinámico en lo que a la definición y modificación
de tipos de datos se refiere. En tiempo de ejecución permite cambiar el número
de propiedades y métodos de los objetos e incluso de los constructores de
estos objetos.
Bibliografía
• [Link] Guías y
referencias de javascript
• [Link] Curso de
JavaScript en castellano
• [Link] Tutorial de HTML Dinámico
83
UNIDAD JavaScript en HTML
DIDÁCTICA 3
Índice
− Introducción
− Objetivos
− Esquema de Contenidos
− Contenidos
o Lección 1. Etiqueta Script
o Lección 2. Manejo de eventos
o Lección 3. Modelo de objetos de documento
o Lección 4. Objetos comunes a todas las páginas
o Lección 5. Objetos particulares de cada página
− Conclusiones
− Glosario de términos
− Bibliografía
84
Esquema de Contenidos
Etiqueta <script>
Manejo de eventos
Objetos comunes
Modelo de Objetos
de Documento
Objetos propios
Introducción
En esta unidad didáctica vamos a ver como se introducen sentencias JavaScript
en las páginas HTML.
También vamos a estudiar como se pueden manejar los eventos que ocurren en
la página, de forma que podamos ejecutar código JavaScript en respuesta a
estos eventos.
Por último vamos a conocer los objetos mas importantes del Modelo de Objetos
de Documentos y las principales características que podemos modificar para
producir efectos dinámicos en nuestras páginas.
Objetivos
− Aprender a insertar código JavaScript en las páginas HTML
− Aprender a crear ficheros con código JavaScript que puedan ser usados por
varias páginas HTML simultáneamente
− Aprender a manejar eventos
− Conocer los eventos mas importantes y que objetos los pueden manejar
− Conocer los objetos del modelo de objetos mas importantes
− Aprender a modificar los estilos mediante código
85
Lección 1 Etiqueta <script>
Índice
− Introducción
− Contenidos
o Apartado 1. Ejecución de instrucciones en páginas HTML
o Apartado 2. Propiedades de <script>. Lenguaje y ficheros
o Apartado 3. Uso de comillas
o Apartado 4. Enlaces
− Ejercicios de autocomprobación
− Práctica
Introducción
Hasta ahora hemos visto el núcleo del lenguaje de programación JavaScript. En
esta lección vamos a estudiar como se generan páginas HTML dinámicas
mediante la intercalación de sentencias JavaScript dentro de código HTML
estático.
Objetivos
− Aprender a insertar código JavaScript en las páginas HTML
− Aprender a crear ficheros de utilidad con funciones javaScript reutilizables en
varias páginas
− Aprender a intercalar código html en sentencias javascript y viceversa
− Aprender a ejecutar sentencias JavaScript en los enlaces.
Apartados
Apartado 1. Etiqueta <script>
86
Para meter instrucciones JavaScript dentro de una página HTML, existe la
etiqueta HTML <script>. Es importante diferenciar que <script> es HTML y por
tanto es indiferente que la escribamos en mayúsculas o minúsculas (HTML no
distingue), y puede tener propiedades.
Cuando el navegador encuentra una etiqueta <script> sabe que todo el texto
comprendido entre el comienzo y fin de etiqueta (</script>) son instrucciones
HTML, así pues en vez de mostrar los elementos definidos en pantalla, como
hace con el HTML estático, lo que tiene que hacer es llamar al intérprete de
JavaScript para que ejecute las sentencias. (El resultado puede ser mostrar
algo en pantalla).
En una página HTML puede haber tantas etiquetas <script> como se quiera,
alternando el navegador entre el formateo de etiquetas html a la ejecución del
sentencias y viceversa.
<head> <!-- html -->
<script>
// javascript
function sumar(a,b)
{
return a + b;
}
</script>
</head> <!--html-->
<body>
<p> vamos a ver una suma</p>
<script>
//javascript
[Link](sumar(3,5))
</script>
</body>
Apartado 2. Propiedades de <script>. Lenguaje y ficheros
Como ya hemos visto, JavaScript no es el único lenguaje disponible para
generar páginas web dinámicas. Aunque es el único admitido por todos los
navegadores, es posible que por algún motivo necesitemos o prefiramos
programar usando otro lenguaje.
Por ello la etiqueta html <script> admite una propiedad language donde
87
podemos indicar al navegador cual es el lenguaje de programación en que se
encuentran las sentencias que vienen a continuación, de forma que el
navegador pueda llamar al intérprete adecuado (si lo tiene). Si no ponemos
nada, FireFox presupone que el lenguaje es JavaScript y Explorer presupone
que es JScript (la sintaxis de ambos coincide).
Otros lenguaje admisible aunque sólo para Explorer es VBScript
Es posible que el código JavaScript definido por la etiqueta <script> no esté en
el mismo fichero que la etiqueta, sino que esta contenga una referencia a un
fichero externo, (parecido a los ficheros con estilos). La importación de estos
ficheros se hace mediante la propiedad src cuyo valor es el fichero que contiene
las instrucciones.
<script src="[Link]"></script>
<script>AbrirMenu();</script>
El fichero al que hace referencia la etiqueta debe tener extensión .js, y en él no
hay que poner la etiqueta <script> otra vez, y no puede contener código HTML.
Esta referencia puede ser absoluta o relativa.
De esta manera se pueden definir funciones en librerías aparte para ser
incluidas por muchos ficheros pero mantenerlas en un sólo.
Apartado 3. Uso de comillas
Igual que se alterna código JavaScript dentro de las etiquetas HTML, a veces se
genera código HTML dentro de las sentencias JavaScript.
Si se necesitan utilizar comillas dentro de JavaScript para especificar valores
HTML o viceceversa, se intercambias las dobles comillas con las comillas
simples. Esto se entiende mejor con un ejemplo:
<script>
[Link]("<p align='left'>hola</p>") //html en Javascript
</script>
<a href="[Link]" onclick="alert('hola');"> <!--javascript en html-->
Apartado 4. Enlaces
Se puede ejecutar código javascript al pinchar sobre los enlaces html
sustituyendo la dirección del enlace directamente por instrucciones.
88
Para ello, es necesario indicar en el valor de la propiedad href de la etiqueta
<a>, que lo que viene a continuación no es una dirección sino código. Esto se
hace con el prefijo javascript.
<a href="javascript:alert('hola');">Pínchame</a>
Prácticas
1. Busque en Internet una página HTML Dinámica cuyo lenguaje de
programación no sea Javascript.
2. Haga una hoja que escribe la fecha actual en un cuadrado rojo en la
esquina superior derecha de la página en formato "dia de la semana dia
del mes 'de' Mes 'del año' año. Todo el comportamiento deseado está en
la funcion MostrarFecha que esta en el fichero [Link]
3. Cree una página HTML con un enlace que al pincharlo, salga una
ventana de aviso.
Conclusión
En esta lección hemos aprendido a introducir instrucciones JavaScript en
páginas HTML. También hemos aprendido a crear ficheros de utilidad que
pueden contener funciones de JavaScript utilizables en varias páginas.
Lección 2 Manejo de Eventos
Índice
− Introducción
− Contenidos
o Apartado 1. Ejecutar código en respuesta a eventos
o Apartado 2. Eventos del ratón
o Apartado 3. Eventos del teclado
89
o Apartado 4. Eventos de las cargas de imágenes y ventanas
o Apartado 5. Eventos de los formularios, modificaciones y foco
o Apartado 6. Eventos del movimiento de las ventanas
o Apartado 7. Capturar eventos
− Ejercicios de autocomprobación
− Práctica
Introducción
El manejo de eventos es la capacidad que existe en HTML Dinámico de
ejecutar instrucciones Javascript como respuesta a las acciones del usuario
sobre una página Web; al pasar por encima de una imagen, al pulsar un botón,
al introducir un dato, etc.
Cada tipo de objeto HTML (etiqueta), tiene sus propios eventos manejables. No
obstante, hay eventos que son compartidos por varios tipos de objetos distintos.
Por ejemplo, el evento onSubmit ocurre cuando se pincha el botón submit de un
formulario, justo antes de enviar su contenido a la página encargada de tratarlo.
Es un evento que sólo tiene sentido para el objeto Formulario. Sin embargo, el
evento onClick ocurre cuando el usuario aprieta el ratón y puede ocurrir, y por
tanto se puede manejar, sobre varios elementos distintos (imágenes, botones,
enlaces, capas...).
Los eventos le dan a la página HTML su carácter dinámico, pues ocurren en
momentos sucesivos una vez la página ya se ha recibido en el navegador.
Además de ejecutar código en respuesta a las acciones del usuario, es posible
programar eventos que salten a intervalos definidos, mediante los métodos del
objeto window¸setTimeout y setInterval. Veremos esta posibilidad cuando
estudiemos el objeto window en la lección 4.
Objetivos
− Aprender a ejecutar código en respuesta a eventos
− Conocer los eventos mas importantes y en que objetos se pueden manejar
90
− Aprender a capturar eventos
Apartados
Apartado 1. Ejecutar código en respuesta a eventos
Los eventos que el usuario provoca al navegar ocurren sobre elementos de la
página Web. En HTML, los elementos de la página se definen mediante
etiquetas. Como veremos en la lección siguiente, estas etiquetas dan lugar a
objetos del modelo de objetos de documento (DOM)
Hay dos maneras posibles de ejecutar instrucciones javascript en respuesta a
eventos producidos por el usuario. Definiendo el manejador de eventos en la
propia etiqueta del elemento sobre el cual ocurre el evento, o definiendo el
manejador de eventos como un método mas del objeto DOM creado a partir de
esa etiqueta.
Definir manejadores en la etiqueta HTML que define el elemento
Como hemos indicado antes, los eventos ocurren sobre elementos concretos de
la página HTML. Estos elementos se han creado a partir de etiquetas HTML.
Para definir un evento sobre una etiqueta HTML, añadir una propiedad a la
etiqueta que crea el objeto, con el nombre del evento y con valor el código o
función a ejecutar.
<input type="button" value="Calcular" id="btcalcular"
onclick="sumar(2,3)">
En este ejemplo, la etiqueta se llama input, la cual define un botón sobre la
página HTML. La propiedad que define el evento se llama onclick. onclick es
también el nombre de un evento que ocurre cuando el usuario pulsa el ratón.
El código que queremos ejecutar es sumar (2,3), y como se ve, es el valor de la
propiedad de la etiqueta. Esta técnica de manejar eventos se basa en las
características del formato HTML, pero está íntimamente ligada con el resto de
código javascript de mi página. En este caso, sumar(2, 3)¸tiene que ser una
función definida en alguna porción de código javascript.
Si en vez de llamar a una función se quieren ejecutar varias instrucciones
cortas, se pueden poner varias sentencias como valor de la propiedad,
91
separándolas por ;
<input type="button" value="abrir" onclick="abierta=[Link]();
[Link]('hola');">
En este caso, el código a ejecutar son las sentencias: abierta=[Link]();
[Link]('hola');
Definir manejadores en el objeto creado a partir de la etiqueta
Aunque la anterior es la técnica mas sencilla y mas extendida, también es
posible definir el manejador a posteriori directamente sobre el objeto creado.
En el ejemplo anterior:
<input type="button" value="Calcular" id="btcalcular"
onclick="sumar(2,3)">
el navegador creará a partir de esta etiqueta un objeto identificado como
btcalcular. (Lo veremos en la lección siguiente).
Es posible definir un manejador directamente sobre el objeto, creando un
método nuevo de nombre el nombre del evento que queremos capturar. Ya
hemos visto en este curso como se crean métodos nuevos; hay que crear una
función y asignársela al método.
El ejemplo completo sería:
<input type="button" value="Calcular" id="btcalcular">
<script>
function Alertar()
{
alert('hola')
}
b = [Link]('btcalcular');
[Link] = Alertar;
</script>
El principal inconveniente de este sistema es que no se pueden pasar
parámetros a las funciones que se llaman. Al asignar valores a la propiedad de
la etiqueta asginamos código (instrucciones, o llamadas a funciones).
Sin embargo al definir un método de un objeto solo puedo asignarle el nombre
de una función, pero luego no puedo pasarle parámetros cuando se ejecuta. En
el ejemplo anterior, cada vez que se pinche el botón saldrá el mensaje "hola".
92
Apartado 2. Eventos del ratón
En este grupo se pueden incluir los siguientes eventos:
− onClick: activado cuando se hace clic en un objeto;
− onDblClick: activado con un doble clic;
− onMouseDown: activado al pulsar el botón izquierdo del ratón;
− onMouseUp: activado cuando deja de pulsarse el botón izquierdo del
ratón;
− onContextMenu: activado cuando se pulsa el botón derecho del ratón al
abrir el ContextMenu.
− onMouseOver: activado cuando el ratón se mueve por encima de un
objeto;
− onMouseOut: activado cuando el ratón sale de un objeto;
Los eventos onMouseOver y onMouseOut son complementarios ya que el
primero se activa en el momento en que el cursor se coloca en el área del
objeto cuya marca contiene el evento, mientras que el segundo lo hace cuando
sale.
Los eventos onMouseDown y onMouseUp se activan con dos movimientos del
botón derecho del ratón: el primero cuando se pulsa el botón y el segundo
cuando se deja de pulsar tras el clic.
Estos eventos se pueden capturar sobre casi todas las etiquetas HTML que dan
lugar a objetos DOM. En una imagen, un botón, una capa, un enlace, un
textarea..., puedo capturar el evento y ejecutar código si el usuario pulsó el
ratón sobre ese elemento en particular.
Apartado 3. Eventos del teclado.
En este grupo se pueden incluir los siguientes eventos:
− onKeyPress: evento que se activa cuando un usuario pulsa y deja de
pulsar una tecla o también cuando la mantiene pulsada;
− onKeyDown: activado cuando se pulsa la tecla;
− onKeyUp: activado cuando una tecla, que se había pulsado, deja de
93
pulsarse;
Estos eventos se pueden capturar en los objetos de edición como text y
textarea y también en el propio objeto document, cuando el usuario pulsa una
tecla pero no está editando ningún campo.
Apartado 4. Eventos de las cargas de imágenes y ventanas
− onLoad: este evento se puede manejar en las imágenes y en la propia
ventana (etiqueta <body>), y ocurre cuando la ventana o la imagen
termina de cargarse.
En el caso de manejarlo en la etiqueta body, es útil para realizar tareas
de inicialización cuando termina de cargarse la página.
− onUnload: es el opuesto del anterior y funciona cuando se deja una
ventana para cargar otra o también para volver a cargar la misma (con el
botón refresh);
− onAbort: funciona cuando el usuario detiene la carga de la ventana o de
las imágenes, bien haciendo clic en otro enlace, bien pulsando la tecla
stop del navegador;
− onError: se activa cuando la subida de una imágen causa un error, pero
sólo si éste se debe a un error de sintaxis del código y no del navegador,
de manera que funciona en un enlace equivocado de una imagen de la
página, pero no en un enlace equivocado de subida de una página
entera;
Apartado 5. Eventos de los formularios, modificaciones y foco
− onSubmit: este evento se activa al pulsar el botón de envío de un
formulario
− onReset: este evento se activa al pulsar la tecla Reset de un formulario.
− onChange: activado cuando el contenido de un campo de un formulario
sufre una modificación y deja de tener el foco;
− onFocus: este manejador es el contrario de onBlur por lo que se activa
cuando el usuario entra en un campo (recibe el foco).
− onBlur: activado cuando el ratón o el cursor sale del campo actual
94
utilizando el ratón o el carácter TAB.
− onSelect: se activa cuando se selecciona texto dentro de una casilla de
texto, tanto con el ratón, como manteniendo pulsado SHIFT y
seleccionando con las teclas flecha;
Apartado 6. Eventos del movimiento de las ventanas
− onResize: este manejador se activa cuando el usuario reduce o agranda
una ventana o un marco.
− onScroll: activado cuando se efectúa el scrolling de la página tanto con
el ratón, como con las teclas PGUP y PGDOWN.
Estos eventos se pueden manejar en el objeto window, para lo cual se puede
definir el manejador en la etiqueta <body> o directamente en el objeto
[Link] = HacerAlgo
Apartado 7. Capturar eventos
Cuando se maneja un evento, el navegador llama a la función especificada y
luego puede o no realizar la función predeterminada.
Para evitar que ocurra la función predeterminada es necesario que el manejador
del evento devuelva false
Por ejemplo, para evitar que salga el menú contextual al pulsar el botón derecho
sobre la página, (y evitar que el usuario pueda ver nuestro código fuente):
<HTML>
<head>
<script>
function nada()
{
alert("eres un curioso")
return false; // si en vez de false devuelvo true, si
//saldría el menú contextual
}
[Link]=nada;
</script>
</body>
</HTML>
Sin embargo, si queremos realizar este mismo comportamiento en un evento
95
definido en la propia etiqueta, es necesario poner un return adicional en el valor
de la etiqueta.
Mejor con un ejemplo
<!-- Capturamos el evento OnSubmit cuando se envía un formulario.
Ejecutamos nuestro código y no queremos que se realice la opción
predeterminada (enviar el formulario) -->
<HTML>
<head>
<form action="[Link]" onclick="return nada()">
<input type="submit">
</form>
<script>
function nada()
{
alert("nada");
return false; //obsérvese el doble return
//uno en la función y otro en la etiqueta
}
</script>
</body>
</HTML>
Ejercicios resueltos
El siguiente ejemplo, pide al usuario confirmación para enviar un formulario. Si
el usuario no está seguro, puede pichar cancel, y entonces el formulario no se
envía.
<html>
<head>
<title>Confirmación de envío de formulario</title>
<script language="JavaScript">
function pregunta(){
if (confirm('¿Estas seguro de enviar este formulario?')){
[Link]()
}
}
</script>
96
</head>
<body>
<form id="tuformulario" action="[Link]
<input type="text" id="cualquiercampo">
<input type=button onclick="pregunta()" value="Enviar">
</form>
</body>
</html>
Prácticas
1. Realice una página HTML dinámica con un enlace al pinchar sobre é,
saque una ventana de alerta y no vaya a ningún sitio. (Solucion
capturando el evento).
2. Haga otra hoja que saque una ventana de aviso al pasar el ratón por
encima de una imagen, y al sacar el ratón de otra imagen.
Conclusión
JavaScript es un lenguaje basado en eventos. Aunque podemos ejecutar código
según se carga la página, lo normal es que el código esté asociado a eventos,
de forma que ejecutemos determinadas funciones cuando el usuario realice una
acción determinada.
Los eventos pueden ocurrir en muchos objetos distintos, aunque hay algunos
eventos que son propios de un sólo tipo de objeto.
Lección 3 Modelo de Objetos de Documento
(DOM)
Índice
− Introducción
97
− Contenidos
o Apartado 1. Jerarquía
o Apartado 2. Reflejo en objetos de las etiquetas HTML
o Apartado 3. Acceso a objetos
− Ejercicios de autocomprobación
− Práctica
Introducción
El Modelo de Objetos de Documento es el conjunto de objetos que el navegador
construye y se guarda en su memoria, a partir de las características del navegador
y del contenido de la página
Desde nuestras páginas web dinámicas podemos acceder a estos objetos y
modificar sus propiedades y sus métodos. De esta manera se cambia de forma
dinámica la apariencia de la página.
Objetivos
− Conocer la jerarquía de objetos del Modelo de Objetos de Documento
− Conocer la relación existente entre etiquetas y propiedades HTML y objetos y
propiedades del Modelo de Objetos de Documento
− Aprender a acceder a los objetos del Modelo de Objetos de Documento
Apartados
Apartado 1. Jerarquía
Las etiquetas HTML definen dentro del navegador objetos que se organizan
según una jerarquía.
En esta jerarquía, los descendientes son objetos y a su vez propiedades del objeto
padre, (no es relación de herencia).
Asi, se puede acceder a [Link]
Para acceder a las propiedades de un objeto, es necesario especificar su nombre y
el de todos sus ascendientes, salvo el objeto window que se da por supuesto.
98
Desde la aparición de IE4.5, Netscape 6 y Firefox, se accede mejor en vez de a
través del nombre a través del identificador mediante
[Link]("id").
El nombre de un objeto viene dado por su propiedad name y su identificador por
su propiedad id
<form name="formulario1" id="formulario1">..</form>
Si creamos una etiqueta que tenga ambas propiedades conviene que coincidan,
porque tienen el mismo sentido.
El Modelo de Objetos de Documento también ha ido pasando por una serie de
versiones sucesivas. La última versión disponible es la 2. Las versiones del DOM
han ido
La figura muestra la jerarquía clásica del Modelo de Objetos de Documento. Las
sucesivas versiones del DOM han ido modificando la jerarquía, añadiendo tipos y
clases.
99
Apartado 2. Reflejo en objetos de las etiquetas HTML
No todos los objetos del Modelo de Objetos de Documento provienen de etiquetas
HTML, ni todas las etiquetas HTML dan lugar a objetos.
Existen objetos del modelo que son intrínsecas al navegador. Todas las páginas
las tienen independientemente del contenido. Estas son window, location, history y
document.
Del objeto document cuelgan los objetos que sí son dependientes del contenido.
Las etiquetas HTML mas significativas, (enlaces, capas, imágenes, formularios),
dan lugar a un objeto del mismo tipo en el modelo de objetos de documento.
Por ejemplo, para cada etiqueta <form> que contenga la página web, se crea un
objeto Form
Estos objetos los crea el navegador, los mantiene guardados en su memoria y son
100
accesibles desde el código javascript de nuestra página, a través de su
identificador o su nombre.
Los objetos y sus propiedades se van creando conforme el navegador va leyendo
la página HTML. NO se puede acceder a un objeto antes de haber sido leida su
etiqueta.
Por ejemplo
<html>
<body>
<script>
i = [Link]("img1") //accedo al objeto.
// error. no está creado
alert([Link])
</script>
<img src="[Link]" id="img1"> <!-- creo laimagen -->
<script>
i = [Link]("img1") //accedo al objeto. Bien
alert([Link])
</script>
</body>
</html>
Apartado 3. Acceso a objetos
Hay dos maneras de acceder a los objetos de la página en HTML Dinámico; a
través de la jerarquía o directamente mediante getElementByID
Una vez hemos accedido a un objeto, podemos leer o modificar sus propiedades e
invocar a sus métodos. También podemos crear propiedades o métodos
dinámicamente.
Cuando accedemos a un objeto, a veces nos interesará asignar el objeto a una
variable. De esta manera es mas sencillo acceder a sus propiedades y métodos.
Puede haber mas de una variable apuntando al mismo objeto. En ese caso, si
cualquiera de ellas modifica una propiedad, el cambio será visible desde todas las
demas.
101
Por ejemplo:
<html>
<form id="form1" name="form1">
<input type="button" id="boton1" name="boton1" value="Pulse">
</form>
<script>
//accedo al botón por la jerarquía
boton1J = document.form1.boton1
//accedo al botón mediante su id
boton1G = [Link]("boton1")
// cambio el valor en el primer apuntador
[Link] = "Adios"
alert([Link]); // sale el último valor
</script>
</html>
Prácticas
1. Cree una página con dos formularios y dos botones en cada formulario.
Al pinchar el botón izquierdo del segundo formulario debe aparecer en
pantalla el valor de la propiedad "value" del botón izquierdo del primer
formulario. Acceda a este botón por su nombre a través de la jerarquía
2. Al pinchar el botón derecho del segundo formulario debe aparecer en
pantalla el valor de la propiedad "value" del botón derecho del primer
formulario. Acceda a este botón por su identificador directamente desde el
documento
Conclusión
El modelo de objetos de documento contiene un objeto por cada etiqueta
"importante" de la página, además de contener objetos que hacen referencia a las
características del navegador.
Para acceder a los objetos propios de la página, que cuelgan de document la
manera mas sencilla es mediante su identificador (id), y llamando al método
[Link](Id).
102
Lección 4 Objetos comunes a todas las páginas
Índice
− Introducción
− Contenidos
o Apartado 1. Objeto window
o Apartado 2. Objeto frame
o Apartado 3. Objeto location
o Apartado 4. Objeto history
o Apartado 5. Objeto navigator
o Apartado 6. Objeto screen
o Apartado 7. Objeto document
− Ejercicios de autocomprobación
− Práctica
Introducción
Por el mero hecho de abrir el navegador, ya existen una serie de objetos
accesibles desde la página web. Estos son:
• window. Hay un objeto window para cada ventana del navegador abierta. Si
una página tiene marcos, cada marco también tiene un objeto window
asociado. Sus propiedades son independientes del contenido, como
location, scrollbar, statusbar, open...
• document. Sus propiedades dependen del contenido de la página, como
título, background, links y forms
• location. Representa la URL actual del navegador.
• history. Contiene las URL que el navegador ha visitado recientemente.
103
• navigator Objeto que representa el navegador. Tiene propiedades para la
version, nombre, idioma.
Todos estos objetos cuelgan en la jerarquía directamente de window, y no se
crean en función del contenido de la página, por lo tanto siempre hay uno y sólo
uno de cada tipo, y lo enumerado mas arriba es el nombre de esa ocurrencia.
Por tanto, ara acceder a estos objetos basta con poner su nombre y la
propiedad a la que queremos acceder. [Link] ó [Link](). Esto es así
porque el acceso a window se puede emitir. [Link] (es
equivalente).
Objetivos
− Conocer los objetos que se crean por defecto en todas las ventanas del
navegador y sus características
Apartados
Apartado 1. Objeto window.
El objeto window existe para cada ventana del navegador abierta. El objeto
window tiene ese nombre, "window" en minúsculas.
El objeto window es la base de toda la jerarquía del Modelo de Objetos de
Documento, lo que pasa es que su mención sse puede omitir. Por ello, es
equivalente escribir [Link]("id") que
[Link]("id").
A continuación vamos a enumerar las propiedades y métodos mas importantes
de window. Una información completa con ejemplos se puede ver en la
referencia de DOM.
Propiedades que son a su vez objetos
• document De este objeto cuelgan todos los elementos de la página
• history Contiene el histórico de urls visitadas
• location Contiene la url actual
• navigator Contiene información relativa al navegador
104
• screen Contiene información relatia a la pantalla del cliente
Propiedades
• closed :Booleano que indica si la ventana ha sido cerrada o no. (Aplicable a
ventanas hijas)
• name :El nombre de la ventana
• opener :Apunta a la ventana desde donde se abrió una ventana hija
• parent :Apunta al marco que contiene la ventana actual
• screenLeft :La distancia desde la ventana del navegador hasta el borde
izquierdo de la pantalla.
• screenTop :La distancia desde la ventana del navegador hasta el borde
superior de la pantalla.
• status :Permite leer o cambiar el texto que queremos que se muestre en la
barra de estado
• top :Apunta al marco contenedor de todos los marcos, independientemente
del grado de anidamiento.
Métodos
• alert() :Muestra un mensaje en pantalla. Este método lo hemos veido
usando a lo largo del curso. alert("texto" es equivalente a
[Link]("texto"). El acceso a window se puede omitir.
• blur() :Quita el foco de la ventana
• clearInterval(ID) :Elimina un intervalo que se haya establecido mediante
setInterval()
• clearTimeout(ID) :Elimina un temporizador que se haya establecido
mediante setTimeout()
• close() :Cierra la ventana actual.
• confirm() :Muestra un mensaje y dos botones, aceptar y cancelar.
Cuando el usuario pincha aceptar devuelve true, si pincha cancelar
devuelve false.
105
• focus() :Pone el foco en la ventana
• moveBy(x,y) :Mueve la ventana una serie de píxeles.
• moveTo(x,y) :Coloca la esquina superior izquierda de la ventana en las
coordenadas indicadas.
• navigate("URL") :Carga la URL especificada en la ventana
• open() :Abre una nueva ventana del navegador
• print() :Imprime el contenido de la ventana
• prompt() :Permite leer datos del usuario a través de una ventana de
dialogo.
• resizeBy() :Aumenta o disminuye la ventana el número de píxeles
especificado
• resizeTo() :Redimensiona la ventana al número de píxeles especificado
• scrollBy() :Hace scroll de la ventana el número de píxeles especificado
• scrollTo() :Hace scroll de la ventana hasta la posición especificada
• setInterval(código, milisegundos) :Llama a una función o ejecuta el
código indicado cada vez que vence el número de milisegundos indicado.
• setTimeout(código, milisegundos) :Lla ma una función o ejecuta el
código indicado una sóla vez cuando vence el número de milisegundos
indicado
• Método open
Uno de los métodos mas usuales de window es open, que sirve para abrir
nuevas ventanas del navegador, (por ejemplo si el usuario pincha un enlace y
se lo queremos mostrar en otra ventana, o las molestas ventanas de publicidad
que abren muchas aplicaciones). Como hemos indicado se puede llamar
mediante [Link]() o simplemente open(). Sus parámetros son:
ReferenciaAVentana = [Link](Url, Nombre [, strWindowFeatures]);
El primer parámetro es una cadena que contiene la URL de la página que
queremos que se muestre en la nueva ventana.
106
El segundo parámetro es el nombre que queremos que tenga la nueva ventana.
El tercer parámetro son las características que queremos que tenga la nueva
ventana. (Aquí podemos indicar si queremos que tenga barras de scroll, barra
de botones, de vínculos de menú, el tamaño y posición donde queremos que
aparezca, si se puede redimensionar, etc.). Todos hemos visto aplicaciones que
abren un montón de ventanas grandes y pequeñas, muchas de las cuales no
parecen ni navegadores. Todas se abren llamando este método. Si no
especificamos las características, el método abre una ventana del navegador
normal.
Para acceder desde la ventana que la ha creado (madre), a la ventana nueva
(hija), se utiliza la ReferenciaAVentana devuelta por el método. Por ejemplo, si
queremos crear una ventana y a continuación imprimir su contenido haríamos,
<script>
a = [Link]("[Link]", "hija")
[Link]();
</script>
OJO, no se accede a la ventana por su nombre. El segundo parámetro
"nombre" sirve para determinar si se va a abrir una ventana nueva o no. Si yo
llamo al método open varias veces seguidas con el mismo nombre de la
ventana hija, la segunda y sucesivas llamadas abren la ventana objetivo en la
misma ventana que ya está abierta. De esta manera se pueden programar
aplicaciones que muestren las nuevas páginas en ventanas nuevas cada vez o
siempre en la misma.
También se puede acceder desde la ventana hija a la madre, a través de la
propiedad opener. De esta manera es posible tener código en la hija que lea
variables definidas en la madre, que la imprima e incluso que modifique su
apariencia.
• Eventos programados. setInterval y setTimeout
Mediante llamadas a [Link] y [Link] se puede ejecutar
código al cabo de un cierto tiempo y repetidamente.
Estos métodos son utilizados por ejemplo para los efectos de movimiento.
Hacer que una imagen se mueva por pantalla, modificando su posición 10
107
píxeles cada 10 milisegundos.
Apartado 2. Objeto Frame.
Los objetos Frame se crean al introducir marcos en el documento HTML
<frameset rows=“10%, 90%”>
<frame src=“[Link]” name=“menu”>
<frame src=“[Link]” name=“contenido”>
</frameset>
Los objetos Frame se organizan jerarquicamente. La propiedad parent hace
referencia a la ventana que contiene al marco actual. top hace referencia a la
ventana que contiene todos los marcos.
Por lo demas, un marco es una ventana y tiene los mismos métodos y
propiedades.
Apartado 3. Objeto location
El objeto location es a su vez una propiedad de la ventana. Encapsula toda la
información relativa a la URL de la página que se está visualizando en esa
ventana. Es muy útil para cambiar la dirección URL de la ventana mediante
código.
Las principales propiedades y métodos de este objeto son:
Propiedad
• hash :Permite cambiar o leer la parte de la URL que sigue al signo #
• host :Permite cambiar o leer el nombre de la máquina y el puerto de la
URL. Por ejemplo [Link]
• hostname :Permite cambiar o leer el nombre de la máquina
• href :Cambia o lee toda la URL
• pathname :Cambia o lee la parte correspondiente a la ruta.
• port :Cambia o lee el puerto
• protocol :Cambia o lee el protocolo. (http, ftp, ldap...)
• search :Para cambiar o leer la parte de la url que sigue al signo ?
Métodos
108
• assign("URL"): Carga un nuevo documento
• reload([delServidor]): Recarga el documento actual. Si el parámetro es
true obliga a traerlo del servidor. Si es false o se omite, lo puede leer de
la caché
• replace("URL"): Carga un nuevo documento. A diferencia de assign(),
después de hacer replace, la página sustituida no pasa al histórico del
navegador, por lo que el usuario no podrá hacer "back" para volver a ella.
Cuando se modifica el objeto location directamente asignándole una nueva
URL, la propiedad modificada por defecto es href, por lo que al cambiar la
dirección de la ventana, se carga la nueva URL. Es lo mismo que si
hubiéramos llamado a assign(URL).
[Link] = "[Link]/[Link]"
// equivale a
[Link]("[Link]/[Link]")
// el window. se puede omitir.
Apartado 3. Objeto History
También forma parte de la ventana. Almacena la lista de páginas visitadas
recientemente. Sus propiedades y métodos mas importantes son:
Propiedad
• length: Devuelve el número de elementos de la lista
Método
• back(): Carga la página anterior. Igual que si pincha en back o hacemos
[Link](-1)
• forward(): Carga la página siguiente de la lista
• go(número): Va a una posición concreta de la lista. Puede ser positiva o
negativa
Apartado 4. Objeto Navigator
Contiene información relativa a la marca y versión del navegador en que se está
mostrando la ventana.
Las principales propiedades y métodos admitidos por todos los navegadores del
109
mercado son:
Propiedades
• appCodeName: Devuelve el nombre "clave" del navador. Tanto FireFox,
Netscape como Explorer devuelven "Mozilla"
• appName: Devuelve el nombre del navegador
• appVersion: Devuelve la versión del navegador
• cookieEnabled: Devuelve un booleano que indica si el navegador
admite cookies
• platform: Devuelve la plataforma de la máquina donde se está
ejecutando el navegador. Por ejemplo Win32
• userAgent: Devulve información general acerca del navegador. Puede
incluir algunas de las propiedades ya descritas. No es recomendable
utilizar esta propiedad para detectar el tipo de navegador del usuario,
pues en la mayoría de los navegadores es configurable, y por tanto es
posible "ocultar" el tipo de navegador real que se está usando.
Método
• javaEnabled(): Booleano que indica si el navegador soporta o está
configurado para soportar Java. No confundir con si soporta JavaScript.
Si no ejecuta JavaScript no podemos meter código para preguntar por
esta propiedad, y habrá que averiguarlo por otros métodos.
Es importante recalcar que el objeto navigator tiene otras propiedades que no
son compatibles entre navegadores. Algunas sólo tienen sentido para Explorer y
otras sólo para FireFox. De todas formas, como el objetivo es conocer cual es el
navegador del usuario, si tiene sentido en este caso preguntar por el valor de
las propiedades propietarias, pues dan precisamente la información que
queremos.
Apartado 6. Objeto screen.
El objeto screen contiene información acerca de la pantalla del usuario donde
se está ejecutando el navegador que contiene la ventana. Es muy útil si
queremos ajustar las características de diseño de nuestra página a las
110
dimensiones de la pantalla. Por ejemplo, si está en 800 x 600 mostrar una
página y si está en 640 x 480 mostrar otra.
Las propiedades y métodos mas importantes de screen son:
Propiedad
• availHeight: Devuelve la altura de la pantalla, quitando lo que ocupa la
barra de tareas (de windows por ejemplo)
• availWidth: Devuelve la anchura de la pantalla, quitando lo que ocupa la
barra de tareas (de windows por ejemplo)
• colorDepth: Devuelve el número de bits que definen el color de la
pantalla.
• height: La resolución de la altura de la pantalla
• width: La resolución de la anchura de la pantalla.
Apartado 7. Objeto document
Del objeto document, (que a su vez cuelga de window), cuelgan todos los
objetos del Modelo de Objetos de Documento creados por el navegador a partir
de las etiquetas HTML de la página.
Todas las páginas html dinámicas tienen un objeto document, que se llama
exactamente así, con minúsculas, igual que tienen un objeto window de ese
mismo nombre.
No obstante, ademas de contener los objetos creados a partir de etiquetas
HTML, contiene otra serie de propiedades y métodos, los mas importantes los
describimos a continuación.
Propiedades que son Vectores
• forms[]: Devuelve un vector que contiene una referencia a cada uno de
los objetos tipo Form que hay en el documento
• images[]: Devuelve un vector que contiene una referencia a cada uno de
las imágenes que hay en el documento
• links[]: Devuelve un vector que contiene una referencia a cada uno de
los enlaces que hay en el documento
111
El acceso a los objetos que están en estos vectores se puede hacer bien por su
nombre, bien por su ordinal.
[Link]["form1"].action = "[Link]"
[Link][0].action = "[Link]"
Es mejor acceder por su nombre, porque el ordinal que reciben depende del
orden de creación.
Propiedades
• alinkColor: Lee o establece el color de los documentos activos
• bgColor: Lee o establece el color de fondo
• cookie: Lee o establece las cookies asociadas al documento. Es una
cadena donde están todas las cookies separadas por ;
• domain: Devuelve el dominio del documento (Ej. [Link])
• fgColor: Lee o establece el color del texto
• lastModified: Devuelve la fecha y la hora de la última modificación del
documento
• linkColor: Lee o establece el color de los enlaces del documento
• referrer: Devuelve la URL del documento que llamó a éste. Solo en caso
de que este documento se haya cargado como resultado de haber
pinchado en un enlace. Si el usuario escribió la URL directamente o
pinchó un favorito esta propiedad no tiene valor.
• title: Devuelve el título del documento <title>...</title>
• URL: La URL del documento
• vlinkColor: Lee o establece el color de los enlaces visitados
Métodos
• close(): Cierra el documento para edición y muestra el nuevo contenido
• getElementById(ID): Devuelve una referencia al objeto cuya propiedad
id vale ID. El parámetro ID es una cadena.
• getElementsByName(NAME): Devuelve un vector de objetos cuya
112
propiedad name es NAME. El parámetro NAME es una cadena
• getElementsByTagName(TAG): Devuelve un vector de objetos cuya
etiqueta vale TAG. El parámetro TAG es una cadena
• open(): Abre el documento para edición
• write(cadena): Escribe la cadena que recibe como parámetro en el
documento.
• Escritura en documentos
Para escribir en documentos existe el método write(). Este método recibe como
parámetro una cadena que manda al documento. Si el documento todavía se
está enviando al navegador, se pueden alternar sentencias write con formato
HTML.
Por ejemplo
<html>
<body>
<p>hola</p>
<script>
[Link]("<p>caracola</p>");
</script>
</body>
<html>
Sin embargo, si el documento ya se ha mostrado en el navegador, y quiero
cambiar su contenido de forma dinámica, deberé ejecutar primero el método
open y al terminar llamar a close.
<html>
<body>
hola<br>
<script>
function aclarar()
{
//[Link]()
[Link]()
[Link] ("adios")
[Link]()
}
113
</script>
<input type="button" value="cambiar" onclick="aclarar();">
</body>
</html>
En este ejemplo, primero se manda al navegador un texto y un botón. Al pinchar
el botón el documento cambia, desaparece el texto inicial y el propio botón y
aparece la palabra "adios".
• getElementById
A partir de Netscape 6 y MS 5, todos los objetos que se pueden colocar en un
documento, pueden tener propiedad Id, y son accesibles con el método
getElementById(id), que devolverá un objeto del tipo adecuado.
<form name='formulario1' action="[Link]" id="formulario1">
<input type="button" id="bt1" value="hola" name="bt1">
</form>
<script>
//acceso mediante getElementById
alert([Link]('formulario1').action)
//acceso por la jerarquía
alert([Link])
//acceso por el vector forms, notación vector
alert([Link]["formulario1"].action)
//aceso mediante el vector forms, notación propiedad
alert([Link])
//acceso al botón directamente mediante getElementById
alert([Link]("bt1").value)
//acceso al botón a traves del formulario
alert([Link]);
//aceso al botón a través del vector forms
alert([Link]["formulario1"].[Link])
</script>
Ejercicios resueltos
El siguiente ejercicio cambia la página al cabo de 5 segundos. Por ejemplo,
mostramos un anuncio al comienzo, y luego enviamos al usuario a la página de
contenido.
<html>
114
<script>
[Link]('[Link]="[Link]"', 5000);
</script>
</html>
Prácticas
1. Realice una página llamada "[Link]" que tenga dos botones. Al
pinchar el primer botón se abrirá una ventana nueva que muestrará la
página “[Link]” Al pulsar el otro botón la página que muestra la
ventana hija cambiará y mostrará "[Link]"
Al cerrar la página "[Link]" ésta abrirá otra ventana con el mismo
contenido.
Conclusión
Los objetos que se crean por defecto con cada navegador tienen siempre el
mismo nombre. Lo visto en este curso son las propiedades y métodos de las
ocurrencias reales del objeto, no de tipos de objetos que luego haya que crear,
(ya están creados).
En estos objetos están todas las propiedades que no son dependientes del
contenido de la página.
Lección 5 Objetos particulares de cada página
Índice
− Introducción
− Contenidos
o Apartado 1. Objeto Form
o Apartado 2. Validación de formularios
o Apartado 3. Objeto Image
115
o Apartado 4. Objeto Link
o Apartado 5. Modificación de estilos. Capas
− Ejercicios de autocomprobación
− Práctica
Introducción
Hasta ahora hemos visto los objetos que existen en todas las páginas HTML
dinámicas por el mero hecho de mostrarse en un navegador de última
generación. En esta lección vamos a ver aquellos objetos que apareceran o no,
dependiendo del contenido de la página.
Las etiquetas mas significativas del formato HTML dan lugar a objetos. Estos
objetos se crea según el navegador va leyendo la página al cargarla, y se
almacenan en su memoria interna.
Mediante código JavaScript ejecutado en respuesta a eventos, podemos
cambiar dinámicamente las propiedades de estos objetos, y por lo tanto las
propieadades de las etiquetas.
Objetivos
− Conocer los objetos mas importantes del Modelo de Objetos de Documento
creados a partir de las etiquetas de la página y sus características
− Aprender a modificar los estilos de los objetos y su posición
Apartados
Apartado 1. Objeto Form
Los formularios son los elementos de las páginas HTML que sirven para que el
usuario introduzca datos que luego serán enviados al servidor para su
procesamiento.
Existe un objeto Form por cada formulario que creemos en la página. La
etiqueta de creación puede tener las propiedades name e id, que también son
propiedades del objeto. Si indicamos las dos, conviene que su valor coincida,
116
pues su propósito es el mismo.
<form name=“form1” action=“[Link]” id=“form1”>
Dentro del objeto form existe un objeto por cada uno de los elementos que lo
componen.
<form name="form1" action="[Link]">
<input type="text" value="direccion" id="direccion">
<input type="text" value="apellido" id="apellido">
</form>
Se accede a los elementos mediante el objeto Form y el nombre del objeto ó
directamente por el Id a través de [Link](ID).
Todos los elementos del formulario tienen a su vez una propiedad "form" que
hace referencia al objeto Form que los contiene.
<input type="button" value="traspasar"
onclick="[Link]=[Link]">
<!-- traspasa el valor del campo dirección al campo apellido -->
Una de las propiedades mas importantes de los formuarios es action. Esta es
una propiedad que se puede establecer tanto en la etiqueta como en el objeto, e
indica la página o fichero responsable de recibir los datos introducidos en el
formulario. Su modificación permite cambiar dinámicamente el destino de los
datos.
El objeto Form tiene dos métodos
− submit(), que envía el formulario a la página encargada de su tratamiento,
(indicada en el action). Su ejecución es equivalente a pulsar el botón de tipo
submit.
− reset(), que reinicializa los valores del formulario.
Apartado 2. Validación de formularios
La validación de formularios es uno de los usos más corrientes del HTML
dinámico. Permite comprobar la información introducida por el usuario sin
necesidad de enviarla al servidor, con lo que se ahorra ancho de banda y se
gana velocidad
En general, todos los elementos de entrada de datos tienen una propiedad
value que permite leer y establecer cual es el valor de ese campo que se
117
enviará al servidor.
Como todo el resto de etiquetas que dan lugar a objetos DOM, se puede
acceder a los campos de formulario mediante su propiedad id o su propiedad
name.
Hay dos alternativas para validar los datos de los formularios
− Al ocurrir el evento onChange sobre los campos del formulario. Este
evento ocurre cuando se cambia el contenido del campo y el elemento
pierde el foco. Si se elige está opción, hay que capturar este evento en
todos los campos y comprobar para cada uno de ellos si su valor es
válido, (está en el rango permitido, tiene el tamaño adecuado...).
− Al ocurrir el evento onSubmit del formulario. En ese momento se
comprueban todos los campos simultáneamente, enviando el formulario
al servidor sólo si todos ellos son válidos.
Apartado 3. Objeto Image
Existe un objeto Image por cada etiqueta <img> que aparece en el documento
HTML.
La propiedad más importante de este objeto es src, que contiene el nombre del
fichero que se está mostrando en la imagen. Si cambiamos esta propiedad
dinámicamente, la ventana del navegador sustituirá una imagen por otra.
Otras propiedades importantes de este objeto son
Propiedades
• alt: Texto alternativo de la imagen
• border: Anchura de la imagen en píxeles
• height: Altura de la imagen en píxeles
• id: El identificador para acceder
• name: El nombre para acceder
• src: La URL del fichero con la imagen en sí
• width: La anchura de la imagen.
118
Apartado 4. Objeto Link
Se crea un objeto Link por cada etiqueta <a>, (enlaces), que aparece en el
documento HTML.
La propiedad mas importante del objeto Link es href que contiene la URL de la
página de destino del enlace. Cambiando dinámicamente esta propiedad
podemos hacer que un enlace apunte en un momento a una página y a otra
distinta en el momento siguiente.
Apartado 5. Modificación de estilos. Capas
Como vimos en la unidad didáctica 1, las etiquetas HTML pueden tener estilos.
Las capas además pueden usar estos estilos para posicionarse de forma
absoluta sobre la página.
Una vez se ha accedido al objeto DOM que representa la etiqueta, es posible
modificar dinámicamente su estilo, y por tanto su apariencia y posición,
modificando su propiedad style
La propiedad style es a su vez un objeto que contiene una propiedad por cada
una de las propiedades definibles mediante estilos.
Por ejemplo:
<html>
<body>
<div id="capa1" style="position:absolute; top:100px; left:100px;
width:300px; height: 300px; clip:rect(0px 300px 300px 0px); z-index=8">
hola
</div>
<script>
capa = [Link]("capa1")
//para hacerla invisible
[Link] = "hidden"
// para cambiar el color del texto
[Link] = "red"
// para cambiar el color de fondo
[Link] // OJO. (en HTML es: background-color)
Se puede cambiar el contenido de una capa modificando la propiedad
innerHTML de la capa.
[Link] = "<form name='form1'><input type='text' name='apellido'
119
value='díez' id='apellido2'></form>"
alert([Link]("apellido2").value);
Ejercicios resueltos
La siguiente funcion que mueve la capa que recibe como parámetro a un punto
especificado
function Mover(idCapa, x, y)
{
objcapa = [Link](idCapa);
[Link] = x;
[Link] = y;
}
La siguiente función cambia una imagen por otra
<html>
<script>
function CambiarImagen(idImagen, nuevofichero)
{
objimagen = [Link](idImagen); [Link] =
nuevofichero;
}
</script>
<img src="[Link]" id="img1">
<input type="button" value="cambiar" onclick="CambiarImagen('img1',
'[Link]')">
</html>
A continuación vamos a incluir una librería de utilidad ([Link]) genérica que
contiene una serie de funciones para manejo de menús y movimiento de capas.
Debajo mostramos un fichero [Link] que hace uso de esta librería para
simular un pequeño periódico. Intente seguir el flujo de ejecución de los eventos
manejados.
Para visualizar bien el ejemplo, debe tener cuatro imágenes llamadas
"nacional_on.gif", "nacional_off.gif", "internacional_on.gif" e
120
"internacional_off.gif" de 190 x 36 píxeles.
// fichero [Link]
// funcion que prueba si el navegador es correcto
function NavegadorValido()
{
return ([Link] ? true : false);
}
// funcion que precarga imagenes en un array ([Link]) de
objetos image. Orientado a menús con efecto de botón, (imagen pulsada e
imagen no pulsada).
// recibe como parámetros el id de la imagen, la imagen en on, y la
imagen en off.
// para mejorar el funcionamiento de la página, viene bien crear un
vector con un objeto imagen por cada imagen de la página, (visible o
nó). De esta manera cuando el navegador deba cambiar una imagen por
otra, no habrá un lapso de tiempo hasta que se cargue.
// llame a esta función por cada imagen con efecto botón tenga en su
página.
function NuevaImagen(idimagen, gif_on, gif_off)
{
// si no existe el vector precargadas en el documento lo creo
como propiedad dinámica nueva del documento.
// es un buen truco para crear variables globales
if (![Link])
{
[Link] = new Array();
}
i = [Link];
// cada elemento de precargadas en una imagen, con tres
propiedades nuevas; identificador, on y off donde van los nombres de
los ficheros pulsado y soltado.
[Link][i] = new Image();
[Link][i].identificador = idimagen;
[Link][i].on = gif_on;
[Link][i].off = gif_off
[Link][i].src = gif_on;
[Link][i].src = gif_off;
// al asignarle la imagen a src me la he traido del servidor
121
}
// función que sustituye una imagen por otra en un objeto imagen,
// recibe como parametro el id del objeto cuya imagen cambia y
// el estado deseado para la imagen.
// Presupone que la imagen se ha precargado previamente con la
// función NuevaImagen.
// Recorre el vector de precargadas y asigna a src el valor de la
imagen adecuado al estado deseado
function CambiarImagen(idImagen, estado)
{
objimagen = [Link](idImagen);
if (estado == 'on')
{
i = 0;
encontrado = false;
do
{
if ([Link][i].identificador ==
idImagen)
{
encontrado = true;
[Link] = [Link][i].on
}
i++;
}
while (i < [Link] && !encontrado)
}
else if (estado == 'off')
{
i = 0;
encontrado = false;
do
{
if ([Link][i].identificador ==
idImagen)
{
encontrado = true;
[Link] = [Link][i].off
}
i++;
122
}
while (i < [Link] && !encontrado)
}
}
// función que pone todas las imagenes precargadas a off
function ApagarImagenes()
{
for(i = 0; i < [Link]; i++)
{
identificador = [Link][i].identificador
img_off = [Link][i].off
[Link](identificador).src = img_off
}
}
// función que intercambia el color de fondo y texto de una caoa
function InvertirCapa(idcapa)
{
objcapa = [Link](idcapa);
colortemp = [Link]
[Link] = [Link];
[Link] = colortemp;
}
// función que cambia el color de fondo y texto de una capa
function CambiarTextoCapa(idcapa, colortexto, colorfondo)
{
objcapa = [Link](idcapa);
// guardo los valores actuales, en variables globales del
documento
[Link] = [Link]
[Link] = [Link]
// cambio los colores
[Link] = colortexto;
[Link] = colorfondo
}
// función que restaura el color de fondo y texto de una capa
123
// que se ha cambiado anteriormente con CambiarTextoCapa
function RestaurarTextoCapa(idcapa)
{
objcapa = [Link](idcapa);
//restauro de las variables globales
if ([Link] != undefined &&
[Link] != undefined)
{
[Link] = [Link]
[Link] = [Link]
}
// función que hace visible la capa cuyo Id recibe como parámetro
function MostrarCapa(idCapa)
{
[Link](idCapa).[Link] = "visible";
}
// función que oculta la capa cuyo id recibe como parámetro
function OcultarCapa(idCapa)
{
[Link](idCapa).[Link] = "hidden"
}
// funcion para dar de alta un menu
// también existe un vector de menús global al documento.
// Es muy util porque cuando muestro uno, tengo que ocultar todos los
demas
function NuevoMenu(idMenu)
{
if(![Link])
{
[Link] = new Array();
}
[Link][[Link]] = idMenu;
}
124
// funcion para dar de alta una noticia
// las noticias son los textos que salen en la parte de abajo de la
página
// también se dan de alta.
function NuevaNoticia(idNoticia)
{
if (![Link])
{
[Link] = new Array();
}
[Link][[Link]] = idNoticia;
}
// función que muestra el menu cuyo id recibe como parámetro
// sólo puede haber uno visible cada vez
// quito todos los demás que pudierá haber visibles
// y quito el timeout que pudiera estar activo, por si se refiere a si
mismo (ver funcion QuitarMenu mas abajo)
function MostrarMenu(idMenu)
{
// quito todos los demas menus
for (i in [Link])
{
OcultarCapa([Link][i]);
}
// quito el timeout
if ([Link])
{
clearTimeout([Link]);
}
// muestro el actual
MostrarCapa(idMenu);
}
// función que oculta el menú. Se llama cuando el rátón sale del mismo
// TRUCO. Cuando salgo de la cabecera, tengo que ocultar el menú, salvo
si salgo hacia abajo, donde está mi propio menú. Para que me de tiempo
125
sin problemas, espero 200 milisegundos para quitarlo
function QuitarMenu(idMenu)
{
[Link] = setTimeout('OcultarCapa("' + idMenu +
'")',200);
}
// función que muestra una noticia.
// oculta las demas.
function MostrarNoticia(idNoticia)
{
// quito las demas noticias
for (i in [Link])
{
OcultarCapa([Link][i])
}
// muestro la actual
MostrarCapa(idNoticia)
}
// funcion que mueve una capa al punto especificado
function Mover(idCapa, x, y)
{
objcapa = [Link](idCapa);
[Link] = x;
[Link] = y;
}
// funcion que desplaza una capa en horizontal.
// Desplazamiento puede ser positivo o negativo
function DesplazarHorizontal(idCapa, desplazamiento)
{
objcapa = [Link](idCapa);
izquierda = parseInt([Link]);
arriba = parseInt([Link]);
Mover(idCapa, izquierda + desplazamiento, arriba);
}
// funcion que desplaza una capa en vertical
// Desplazamiento puede ser positivo o negativo
126
function DesplazarVertical(idCapa, desplazamiento)
{
objcapa = [Link](idCapa);
izquierda = parseInt([Link]);
arriba = parseInt([Link]);
Mover(idCapa, izquierda, arriba + desplazamiento);
}
// funcion que hace vibrar una capa
function Vibrar(idCapa, maxpantalla)
{
if ([Link] == true)
{
if (![Link])
{
[Link] = "derecha"
}
objcapa = [Link](idCapa);
if ([Link] == "derecha")
{
if (parseInt([Link]) +
parseInt([Link]) + 10 < maxpantalla)
{
DesplazarHorizontal(idCapa, 10);
}
else
{
[Link] = "izquierda"
}
}
else
{
if (parseInt([Link]) - 10 > 0)
{
DesplazarHorizontal(idCapa, -10);
}
else
{
[Link] = "derecha"
}
}
127
idTimer = setTimeout('Vibrar("' + idCapa +'",' +
maxpantalla + ')', 10)
}
}
// funcion que detiene una capa que vibra
function Detener(idcapa)
{
[Link] = false;
}
Fichero [Link] que hace uso de la librería anterior.
<html>
<head>
<title>Ejemplo de movimiento</title>
<script src="[Link]"></script>
<style>
a
{
COLOR: black;
TEXT-DECORATION: none;
}
.submenu
{
BORDER-RIGHT: black 1pt solid;
BORDER-TOP: black 1pt solid;
BORDER-LEFT: black 1pt solid;
BORDER-BOTTOM: black 1pt solid
}
</style>
</HEAD>
<BODY BGCOLOR="#FFFFFF" >
<script>
if(!NavegadorValido)
{
alert("no vale")
}
NuevoMenu("menu1");
128
NuevoMenu("menu2");
NuevaNoticia("noticia1");
NuevaNoticia("noticia2");
NuevaNoticia("noticia3");
NuevaNoticia("noticia4");
NuevaImagen('img1', 'nacional_on.gif', 'nacional_off.gif');
NuevaImagen('img2', 'internacional_on.gif', 'internacional_off.gif');
</script>
<DIV ID="encabezado" STYLE="position:absolute; left:10px; top:10px;
width:500px; background-color:red;" onclick="location='[Link]';">
<center>
<h2>GOL DE ESPAÑA</H2>
</center>
</DIV>
<div id="cabecera1" style="position:absolute; left:50px; top:100px;"
onMouseOver="MostrarMenu('menu1');CambiarImagen('img1', 'on');"
onMouseOut="QuitarMenu('menu1');CambiarImagen('img1', 'off');">
<img src="nacional_off.gif" id="img1">
</div>
<div id="cabecera2" style="position:absolute; left:239px; top:100px;"
onMouseOver="MostrarMenu('menu2');CambiarImagen('img2', 'on');"
onMouseOut="QuitarMenu('menu2');CambiarImagen('img2', 'off');">
<img src="internacional_off.gif" id="img2">
</div>
<div id="menu1" style="position:absolute; left:50px; top:136px;
width:150px; height:40px; background-color:green; visibility:hidden;"
onMouseOver="MostrarMenu('menu1');" onMouseOut="QuitarMenu('menu1');">
<div class="submenu" id="mn1op1" style="position:absolute; left:0px;
top:0px; width:150px; height:20px; background-color:white;"
onMouseOver="CambiarTextoCapa('mn1op1', 'white', '#87ceeb');"
OnMouseOut="CambiarTextoCapa('mn1op1', 'white', 'white');">
<a href="javascript:void(0);"
onclick="MostrarNoticia('noticia1');QuitarMenu('menu1');
ApagarImagenes();CambiarImagen('img1', 'on');">
Política</a>
129
</div>
<div class="submenu" id="mn1op2" style="position:absolute; left:0px;
top:21px; width:150px; height:20px; background-color:white;"
onMouseOver="CambiarTextoCapa('mn1op2', 'white', '#87ceeb');"
OnMouseOut="CambiarTextoCapa('mn1op2', 'white', 'white');">
<a href="javascript:void(0);"
onclick="MostrarNoticia('noticia2');QuitarMenu('menu1');
ApagarImagenes();CambiarImagen('img1', 'on');">
Sucesos</a>
</div>
</div> <!-- fin del menu 1-->
<div id="menu2" style="position:absolute; left:239px; top:136px;
width:150px; height:40px; background-color:yellow;visibility:hidden;"
onMouseOver="MostrarMenu('menu2');"onMouseOut="QuitarMenu('menu2');">
<div class="submenu" id="mn2op1" style="position:absolute; left:0px;
top:0px; width:150px; height:20px; background-color:white;"
onMouseOver="CambiarTextoCapa('mn2op1', 'white', '#87ceeb');"
OnMouseOut="CambiarTextoCapa('mn2op1', 'white', 'white');">
<a href="javascript:void(0);"
onclick="MostrarNoticia('noticia3');QuitarMenu('menu2');
ApagarImagenes();CambiarImagen('img2', 'on');">
Agenda</a>
</div>
<div class="submenu" id="mn2op2" style="position:absolute; left:0px;
top:21px; width:150px; height:20px; background-color:white;"
onMouseOver="CambiarTextoCapa('mn2op2', 'white', '#87ceeb');"
OnMouseOut="CambiarTextoCapa('mn2op2', 'white', 'white');">
<a href="javascript:void(0);"
onclick="MostrarNoticia('noticia4');QuitarMenu('menu2');
ApagarImagenes();CambiarImagen('img2', 'on');">
Educación</a>
</div>
</div> <!-- fin del menu 2-->
<div id="noticia1" style="position:absolute; left:150px; top:286px;
width:300px; height:150px; background-color:white; visibility:hidden;
color:black">
130
<center>
Convocada huelga general.
</center>
</div>
<div id="noticia2" style="position:absolute; left:150px; top:286px;
width:300px; height:150px; background-color:white; visibility:hidden;
color:black">
<center>
Asesinato en el Orient Express
</center>
</div>
<div id="noticia3" style="position:absolute; left:150px; top:286px;
width:300px; height:150px; background-color:white; visibility:hidden;
color:black">
<center>
Boda de la Infanta Elena
</center>
</div>
<div id="noticia4" style="position:absolute; left:150px; top:286px;
width:300px; height:150px;background-color:white; visibility:hidden;
color:black">
<center>
Aprobada la Ley de Universidades
</center>
</div>
<div id="salida" style="position:absolute; left:350px; top:286px;
width:300px; height:150px;background-color:white; visibility:hidden;
color:black">
SALIDA
</div>
<script>
[Link] = true;
Vibrar("encabezado", 780);
</script>
</BODY>
131
</HTML>
Prácticas
1. Realice una página que contenga un formulario que pide fechas y DNI's.
Al enviar el formulario se comprueba si la fecha es válida y si el DNI está
bien construido. Obtenga de internet el algoritmo para calcular la letra del
DNI
Conclusión
Hemos visto los objetos mas importantes del modelo de objetos de documento,
que a su vez se corresponden con las etiquetas mas importantes del formato
HTML.
También hemos visto como modificar los estilos de las etiquetas y por extensión
los de las capas. No hay que olvidar que cuando queremos posicionar
elementos de forma absoluta sobre nuestra página colocamos estos elementos
sobre capas.
Conclusión de la Unidad Didáctica
En esta unidad didáctica hemos aprendido a introducir código JavaScript en
nuestras páginas HTML y a ejecutar ese código en respuesta a los eventos
generados por el usuario.
También hemos visto cuales son los objetos del Modelo de Objetos de
Documento que el navegador crea cada vez que muestra una página, y cómo
podemos modificar sus propiedades mediante JavaScript, para cambiar de
forma dinámica la apariencia o comportamiento de la página.
Bibliografía
• [Link]
Referencia de DOM por Mozilla
• [Link] Referencia
de Dom
132
• [Link]
20001113/[Link]#ID-1451460987 Referencia DOM W3C
• [Link] Curso de JavaScript en
Castellano con eventos
133
También podría gustarte
- Guía Completa de Desarrollo Front-End HTMLAún no hay calificacionesGuía Completa de Desarrollo Front-End HTML29 páginas
- Fundamentos de HTML: Estructura y EtiquetasAún no hay calificacionesFundamentos de HTML: Estructura y Etiquetas19 páginas
- Introducción a HTML5 y Diseño WebAún no hay calificacionesIntroducción a HTML5 y Diseño Web211 páginas
- HTML Dinámico: Interactividad WebAún no hay calificacionesHTML Dinámico: Interactividad Web2 páginas
- Prácticas de Programación Web: HTML, CSS y JavaScriptAún no hay calificacionesPrácticas de Programación Web: HTML, CSS y JavaScript56 páginas
- Fundamentos de HTML5 y CSS BásicoAún no hay calificacionesFundamentos de HTML5 y CSS Básico112 páginas
- Introducción a HTML y sus etiquetasAún no hay calificacionesIntroducción a HTML y sus etiquetas3 páginas
- Introducción a HTML y CSS: Fundamentos EsencialesAún no hay calificacionesIntroducción a HTML y CSS: Fundamentos Esenciales27 páginas
- Aprende HTML Rápidamente: Guía BásicaAún no hay calificacionesAprende HTML Rápidamente: Guía Básica7 páginas
- Introducción al Desarrollo Web BásicoAún no hay calificacionesIntroducción al Desarrollo Web Básico63 páginas
- Guía de HTML y CSS para PrincipiantesAún no hay calificacionesGuía de HTML y CSS para Principiantes79 páginas
- HTML (Lenguaje de Marcado de Hipertexto)Aún no hay calificacionesHTML (Lenguaje de Marcado de Hipertexto)9 páginas
- Estructura y Etiquetas de HTML y CSSAún no hay calificacionesEstructura y Etiquetas de HTML y CSS11 páginas
- Estructura Básica de Páginas HTMLAún no hay calificacionesEstructura Básica de Páginas HTML9 páginas
- Introducción al Desarrollo Frontend en HTMLAún no hay calificacionesIntroducción al Desarrollo Frontend en HTML15 páginas
- Curso de HTML y CSS para PrincipiantesAún no hay calificacionesCurso de HTML y CSS para Principiantes68 páginas
- Introducción al Lenguaje HTML en Web DesignAún no hay calificacionesIntroducción al Lenguaje HTML en Web Design25 páginas
- Introducción al Lenguaje HTML y Estructura WebAún no hay calificacionesIntroducción al Lenguaje HTML y Estructura Web24 páginas
- Introducción a HTML para principiantesAún no hay calificacionesIntroducción a HTML para principiantes25 páginas
- Creación de Páginas Estáticas en HTML5Aún no hay calificacionesCreación de Páginas Estáticas en HTML536 páginas
- Introducción al Lenguaje HTML en PHPAún no hay calificacionesIntroducción al Lenguaje HTML en PHP16 páginas
- Introducción a HTML: Estructura y SintaxisAún no hay calificacionesIntroducción a HTML: Estructura y Sintaxis90 páginas
- Introducción a HTML y CSS para WebAún no hay calificacionesIntroducción a HTML y CSS para Web7 páginas
- Introducción a HTML: Estructura y ElementosAún no hay calificacionesIntroducción a HTML: Estructura y Elementos6 páginas
- Introducción al HTML y su EstructuraAún no hay calificacionesIntroducción al HTML y su Estructura31 páginas
- Manual Básico de HTML para Páginas WebAún no hay calificacionesManual Básico de HTML para Páginas Web20 páginas
- Glosario de HTML y Desarrollo WebAún no hay calificacionesGlosario de HTML y Desarrollo Web5 páginas
- Estructura Básica de HTML para WebAún no hay calificacionesEstructura Básica de HTML para Web4 páginas
- Introducción a HTML y CSS para WebAún no hay calificacionesIntroducción a HTML y CSS para Web10 páginas
- Introducción a HTML y sus EtiquetasAún no hay calificacionesIntroducción a HTML y sus Etiquetas5 páginas
- Introducción a HTML, CSS y JavaScriptAún no hay calificacionesIntroducción a HTML, CSS y JavaScript31 páginas
- Introducción a HTML para principiantesAún no hay calificacionesIntroducción a HTML para principiantes4 páginas
- Curso de Desarrollo Web: HTML y CSSAún no hay calificacionesCurso de Desarrollo Web: HTML y CSS55 páginas
- Curso de HTML5, CSS3 y JavaScriptAún no hay calificacionesCurso de HTML5, CSS3 y JavaScript299 páginas
- Presentación Diapositivas Lluvia de Ideas Doodle Multicolor Rosa y VioletaAún no hay calificacionesPresentación Diapositivas Lluvia de Ideas Doodle Multicolor Rosa y Violeta7 páginas
- Comprensión Lectora en UniversitariosAún no hay calificacionesComprensión Lectora en Universitarios2 páginas
- Inspiración de la Biblia: Antiguo y Nuevo TestamentoAún no hay calificacionesInspiración de la Biblia: Antiguo y Nuevo Testamento3 páginas
- Evolución de los Medios: De Gutemberg a InternetAún no hay calificacionesEvolución de los Medios: De Gutemberg a Internet18 páginas
- Epistemologías Queer y TransfeministasAún no hay calificacionesEpistemologías Queer y Transfeministas14 páginas
- Análisis de Anuncios PublicitariosAún no hay calificacionesAnálisis de Anuncios Publicitarios7 páginas
- Comprensión Lectora: "Se Vende Mejor Amiga"Aún no hay calificacionesComprensión Lectora: "Se Vende Mejor Amiga"3 páginas
- Uso del Presente Perfecto en InglésAún no hay calificacionesUso del Presente Perfecto en Inglés19 páginas
- Extranjerización y domesticación en traducciónAún no hay calificacionesExtranjerización y domesticación en traducción13 páginas
- La Importancia de Transferir la Fe a los NiñosAún no hay calificacionesLa Importancia de Transferir la Fe a los Niños63 páginas
- Formación del Hábito de Leer en NiñosAún no hay calificacionesFormación del Hábito de Leer en Niños3 páginas
- Georreferenciación Estática Rápida en CTCM SENAAún no hay calificacionesGeorreferenciación Estática Rápida en CTCM SENA27 páginas
- Análisis de "Las lanzas coloradas"Aún no hay calificacionesAnálisis de "Las lanzas coloradas"5 páginas
- Adivinanzas: Actividad de RefuerzoAún no hay calificacionesAdivinanzas: Actividad de Refuerzo4 páginas
- Recursos Gramaticales en ComunicaciónAún no hay calificacionesRecursos Gramaticales en Comunicación2 páginas
- Formulario de Probabilidad y EstadísticaAún no hay calificacionesFormulario de Probabilidad y Estadística10 páginas
- Introducción a Probabilidad y EstadísticasAún no hay calificacionesIntroducción a Probabilidad y Estadísticas12 páginas
- Cuadernillo de Caligrafía InteractivaAún no hay calificacionesCuadernillo de Caligrafía Interactiva23 páginas
- Edición Westcott y Hort del Nuevo Testamento0% (1)Edición Westcott y Hort del Nuevo Testamento3 páginas