introducción a html y javascript introducción a...
TRANSCRIPT
Adquisición y Tratamiento de Datos 1
Introducción a HTML y Javascript
Introducción a HTML• El HTML actual es el 4.01, que posee dos
especificaciones:– Transitorias: Más sencillas de usar pero difíciles de
mantener las webs.– Estrictas: Basadas en hojas de estilo, mayor
dificultad en diseñar una web pero mantenimiento muy sencillo.
• Usaremos las transitorias por sencillez.• http://validator.w3.org es una web que permite
validar la corrección de las páginas web.
Adquisición y Tratamiento de Datos 2
Introducción a HTML y Javascript
Etiquetas en HTML (I)• Las etiquetas en HTML son palabras reservadas
encerradas entre los símbolos < y >.• Existen tres tipos de etiquetas en HTML:
– Pareadas: Existe una etiqueta de inicio y final. <H1>Título</H1>
– Sin parear: La etiqueta representa la inserción de un elemento. <BR>, <IMG>
– Opcionales: Son pareadas en las cuales el final de la etiqueta puede indicarse por el comienzo de otra igual. <P>Aquí hay un párrafo<P>Y aquí otro...</P>
Adquisición y Tratamiento de Datos 3
Introducción a HTML y Javascript
Etiquetas en HTML (II)• Las etiquetas pueden contener en su interior atributos
que modifican su comportamiento por defecto.• El formato es atributo=“valor”. Ejemplos:
<P ALIGN=left>
<IMG SRC="foto.gif">
<HR NOSHADE>• Las etiquetas pueden agruparse para “sumar” sus
efectos de presentación.
<B><I>Este texto saldrá en negrita e itálica</I></B>
Adquisición y Tratamiento de Datos 4
Introducción a HTML y Javascript
Corrección sintáctica de los documentos• HTML tiene sus reglas sintácticas y todo
documento debería adaptarse a ellas. En caso de no hacerlo las reglas son:– Si se encuentra una etiqueta desconocida se ignora.– Si se encuentra un atributo con un valor erróneo o
fuera de rango, el atributo toma el valor por defecto.– Si se encuentra una combinación de etiquetas
anidadas no permitida, se presenta el efecto conjunto si es posible. En caso contrario, sólo se presentará la primera etiqueta procesada.
Adquisición y Tratamiento de Datos 5
Introducción a HTML y Javascript
Estructura de un documento HTML (I)• Un documento HTML es un fichero plano que contiene
etiquetas y cuya extensión debe ser .html o .htm.• Aunque no es obligatoria, debe ponerse una primera
línea que indique que el documento es HTML, existiendo tres líneas distintas:– Si se cumple la sintaxis estricta del HTML 4.01. <!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
– Si se cumple la sintaxis transitoria. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
– Si se definen marcos (frames) en la página. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Adquisición y Tratamiento de Datos 6
Introducción a HTML y Javascript
Estructura de un documento HTML (II)
Con la sintaxis transitoria, la estructura de un documento HTML es:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML><HEAD>............</HEAD><BODY>............</BODY></HTML>
Adquisición y Tratamiento de Datos 7
Introducción a HTML y Javascript
Estructura de un documento HTML (III)• Toda la información se encuentra entre las
etiquetas <HTML> y </HTML>.• Existen dos partes, el encabezado <HEAD> y el
cuerpo <BODY>.• El encabezado es opcional, y contiene
información sobre las características del documento.
• El cuerpo es obligatorio, excepto en los documentos que define marcos (frames), y es lo que se muestra en el navegador.
Adquisición y Tratamiento de Datos 8
Introducción a HTML y Javascript
Estructura de un documento HTML (IV)• El encabezado, si existe, debe tener una etiqueta <TITLE>, que contiene el texto que se mostrará en la ventana del navegador.
• Además, puede contener etiquetas <META> que indican propiedades del documento como son el conjunto de caracteres que se usa:
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Adquisición y Tratamiento de Datos 9
Introducción a HTML y Javascript
Estructura de un documento HTML (V)
• El cuerpo se define con la etiqueta pareada <BODY>.
• Sus atributos principales son:
Atributo. Descripción. BACKGROUND Especifica la localización de una imagen que será el fondo del
cliente. BGCOLOR Especifica el color del fondo del cliente. TEXT Especifica el color del texto. LINK Especifica el color de un enlace. VLINK Especifica el color de un enlace visitado. ALINK Especifica el color de un enlace marcado.
Adquisición y Tratamiento de Datos 10
Introducción a HTML y Javascript
Ejemplo de documento HTML<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Mi primera prueba en HTML</TITLE></HEAD><BODY>Aquí se pone el texto que se desea que tenga el documento...</BODY></HTML>
Adquisición y Tratamiento de Datos 11
Introducción a HTML y Javascript
Párrafos y saltos de línea (I)
• El párrafo es el bloque básico de texto.
• Se indica mediante la etiqueta opcional <P>.– Su opción es ALIGN=(left, right, center) que indica si se alinea a la izquierda, derecha o centrado.
• El salto de línea se indica mediante la etiqueta no pareada <BR>.– Su opción es CLEAR=(left, right, center), que se utiliza para imágenes flotantes.
Adquisición y Tratamiento de Datos 12
Introducción a HTML y Javascript
Párrafos y saltos de línea (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Formato de los párrafos en HTML</TITLE></HEAD><BODY><P>Aquí comienza un párrafo...que termina en la misma línea.<P>Sin embargo este párrafo...<BR>termina en otra línea.<P ALIGN=left>Este párrafo va a la izquierda...<P ALIGN=right>Este a la derecha...<P ALIGN=center><BR><BR>Y este centrado y separado...</BODY></HTML>
Adquisición y Tratamiento de Datos 13
Introducción a HTML y Javascript
Títulos (I)
• Permiten dividir el documento en una jerarquía de secciones en que el tamaño se corresponde con su importancia.
• Se representan con las etiquetas pareadas <Hn>, donde n es un número de 1 a 6, de forma que el tamaño es más grande cuanto menor es n.– Poseen como opción ALIGN=(left, right, center) , que indica si se alinea a la izquierda, derecha o centrado
Adquisición y Tratamiento de Datos 14
Introducción a HTML y Javascript
Títulos (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Títulos en HTML</TITLE></HEAD><BODY><H1>Este es el título 1</H1><H2>Y este el título 2</H2><H3 ALIGN=center>Y este el título 3 centrado</H3><H4>Y este es un título<BR>formado por varias líneas</H4><H4>Y por varios párrafos</H4></BODY></HTML>
Adquisición y Tratamiento de Datos 15
Introducción a HTML y Javascript
Alineación de elementos (I)
• Se utilizan las etiquetas pareadas <CENTER> y <DIV>.– La etiqueta <CENTER> centra todos los elementos
que se encuentren entre su comienzo y fin.– La etiqueta <DIV> especifica la alineación de igual
forma que <CENTER>, solo que permite indicar que alineación se desea mediante ALIGN=(left, right, center).
Adquisición y Tratamiento de Datos 16
Introducción a HTML y Javascript
Alineación de elementos (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Alineación en HTML</TITLE></HEAD><BODY><CENTER><P>Este párrafo aparece centrado.<P>Y este también.</CENTER><DIV ALIGN=right><P>Y este otro párrafo aparece a la derecha...<P>Junto con este.</DIV></BODY></HTML>
Adquisición y Tratamiento de Datos 17
Introducción a HTML y Javascript
Líneas horizontales (I)• Permiten separar diferentes secciones en un
documento.• Se especifican mediante la etiqueta no pareada <HR>.
• Sus principales atributos son:Atributo. Descripción Valor por defecto.
SIZE= Marca el grosor de la línea. 2 WIDTH= Marca la anchura horizontal de la línea. Se
puede expresar en pixels o en porcentaje. El ancho de la pantalla.
ALIGN= Especifica la alineación de la línea, puede ser left, right o center.
Si no se especifica, las líneas están centradas.
NOSHADE Muestra una línea sólida sin apariencia tridimensional.
Línea con apariencia tridimensional.
Adquisición y Tratamiento de Datos 18
Introducción a HTML y Javascript
Líneas horizontales (II)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Líneas horizontales en HTML</TITLE></HEAD><BODY><P>Entre este párrafo</P><HR SIZE=5 WIDTH="80%"><HR WIDTH="50%" ALIGN=left NOSHADE><P>Y este hemos introducido varias líneas horizontales</P></BODY></HTML>
Adquisición y Tratamiento de Datos 19
Introducción a HTML y Javascript
Sangrado de bloques (I)
• Permite definir una sección del documento a la que se le aplica un “sangrado” mayor.
• Se realiza con la etiqueta pareada <BLOCKQUOTE>.
• Inserta automáticamente un salto de párrafo antes y después del sangrado.
Adquisición y Tratamiento de Datos 20
Introducción a HTML y Javascript
Sangrado de bloques (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Sangrado de bloques en HTML</TITLE></HEAD><BODY><P>Este párrafo no esta sangrado</P><BLOCKQUOTE><P>Pero este párrafo si</P><BLOCKQUOTE><HR><P>Y este y la línea anterior más aún</P></BLOCKQUOTE></BLOCKQUOTE></BODY></HTML>
Adquisición y Tratamiento de Datos 21
Introducción a HTML y Javascript
Texto preformateado (I)
• En general un documento se presenta como decide el cliente web.
• El texto preformateado permite especificar como debe mostrarse un texto, siempre que sea posible.
• Se realiza con la etiqueta pareada <PRE>.– Su único atributo es WIDTH=(40,80,132) que
indica el ancho de la línea a utilizar para mostrar el texto.
Adquisición y Tratamiento de Datos 22
Introducción a HTML y Javascript
Texto preformateado (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Texto preformateado en HTML</TITLE></HEAD><BODY><PRE>Este párrafo es preformateadoy por tanto saldrá exactamenteasí.</PRE><BLOCKQUOTE><PRE WIDTH=40>Y este esta también preformateado y portanto también saldrá así...............</PRE></BLOCKQUOTE></BODY></HTML>
Adquisición y Tratamiento de Datos 23
Introducción a HTML y Javascript
Direcciones (I)
• Permiten especificar datos sobre el autor de un documento, etc., resaltando los datos.
• Se indican con la etiqueta pareada <ADDRESS>.
Adquisición y Tratamiento de Datos 24
Introducción a HTML y Javascript
Direcciones (II)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Direcciones en HTML</TITLE></HEAD><BODY><P>Este texto ha sido escrito por:</P><ADDRESS>Enrique Bonet (<A HREF="mailto:[email protected]">[email protected]</A>)</ADDRESS></BODY></HTML>
Adquisición y Tratamiento de Datos 25
Introducción a HTML y Javascript
Color y tamaño del texto (I)• El color y el tamaño de un texto puede
especificarse mediante la etiqueta pareada <FONT>.
• Puede especificarse el color y/o el tamaño.
• Se realiza mediante los atributos:
A tr ib u to D escr ip c ió n C O L O R E sp ec ifica un co lo r p a ra e l tex to . S IZ E E sp ec ifica e l tam añ o d e la fu en te d e tex to , p u ed e ir de 1 a 7 y p u ed e
esp ec ifica rse co m o v a lo r ab so lu to “1 ” , “5 ” , e tc . o co m o v a lo r re la tiv o “+ 1 ” , “-3 ” .
Adquisición y Tratamiento de Datos 26
Introducción a HTML y Javascript
Color y tamaño del texto (II)
• El color se puede especificar mediante:– El nombre del color: “red”, “green”, “blue”, etc.
– Mediante sus componentes RGB en el formato “#RRGGBB”. Así, un tono de morado sería, por ejemplo “#3C003C” (rojo=azul, verde=0).
• Para especificar el texto se parte de un tamaño base que se indica mediante la etiqueta no pareada <BASEFONT> con atributo SIZE=n, donde n es el tamaño por defecto del texto.
Adquisición y Tratamiento de Datos 27
Introducción a HTML y Javascript
Color y tamaño del texto (III)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Color y tamaño del texto en HTML</TITLE></HEAD><BODY><BASEFONT SIZE=4><P><FONT COLOR="#FF0000">Este texto es rojo.<BR></FONT><FONT COLOR="#00FF00"> Y este es verde.<BR></FONT><FONT COLOR="#0000FF">Y este es azul.</FONT></P><P><FONT SIZE="+2">Sin embargo este texto es del color por defecto pero de mayor tamaño.</FONT></P></BODY></HTML>
Adquisición y Tratamiento de Datos 28
Introducción a HTML y Javascript
Comentarios
• Permiten introducir notas, etc., dentro del HTML, las cuales serán ignoradas por el navegador.
• El bloque de notas se marca mediante los símbolos <!-- y -->.
Adquisición y Tratamiento de Datos 29
Introducción a HTML y Javascript
Etiquetas de formato
• Permiten especificar como se presentará el texto.
• Existen dos tipos de etiquetas:– De formato lógico: Clasifican el texto dentro de un
conjunto de tipos predefinidos.– De formato físico: Fijan el estilo a utilizar mediante
etiquetas.
Adquisición y Tratamiento de Datos 30
Introducción a HTML y Javascript
Etiquetas de formato lógico (I)• Cada estilo lógico se muestra con una serie de atributos
predefinidos.• Su anidamiento es posible, aunque carece de sentido por
su propia definición.• Los estilos lógicos existentes son:
Estilo lógico. Descripción <CITE> </CITE> Cita literal de un texto. <CODE> </CODE> Presentación de código fuente. <EM> </EM> Aplica énfasis al texto. <KBD> </KBD> Secuencias de ordenes o comandos que debe introducir el
usuario. <SAMP> </SAMP> Insertar una secuencia de caracteres literales. <XMP> </XMP> Inserta una secuencia de caracteres literales pero ignora
todas las etiquetas HTML de su interior. <STRONG> </STRONG> Aplica énfasis al texto (mayor énfasis que <EM>).. <VAR> </VAR> Define el nombre de una variable.
Adquisición y Tratamiento de Datos 31
Introducción a HTML y Javascript
Etiquetas de formato lógico (II)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Ejemplos de estilos lógicos HTML</TITLE></HEAD><BODY><P><CITE>Este párrafo es CITE</CITE><P><VAR>Este párrafo es VAR</VAR><P><STRONG>Y este párrafo está con mucho énfasis</STRONG></BODY></HTML>
Adquisición y Tratamiento de Datos 32
Introducción a HTML y Javascript
Etiquetas de formato físico (I)• Fijan los atributos del texto de forma explicita.• Su anidamiento tiene sentido, pues podemos desear
combinar varios de esos atributos.• Los principales estilos físicos son:
Estilo físico. Explicación. <B> </B> Muestra el texto en negrita. <I> </I> Muestra el texto en itálica. <TT> </TT> Muestra el texto como una máquina de escribir. <U> </U> Subraya el texto marcado. <SUB> </SUB> Muestra el texto como un subíndice. <SUP> </SUP> Muestra el texto como un superíndice. <BIG> </BIG> Muestra el texto con un tamaño superior al por defecto. <SMALL> </SMALL> Muestra el texto con un tamaño inferior al por defecto. <BLINK> </BLINK> Muestra el texto parpadeante. <S> </S> Muestra el texto con una tachadura.
Adquisición y Tratamiento de Datos 33
Introducción a HTML y Javascript
Etiquetas de formato físico (II)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Ejemplos de estilos físicos HTML</TITLE></HEAD><BODY><P><B><I>Este texto es negrita e itálica</I></B></P><P>Este es el elemento A<SUB>ij</SUB></P><P>Y esto es una potencia: 2<SUP>n</SUP></P></BODY></HTML>
Adquisición y Tratamiento de Datos 34
Introducción a HTML y Javascript
Caracteres especiales (I)• Los documentos HTML usan por defecto el juego de
caracteres ISO-Latin-1.• Los carácteres no incluidos en ese juego por defecto, o
en cualquier otro juego que se especifique en la cabecera, no pueden representarse.
• Para poder representarlos se define la etiqueta “referencia a carácter” que se puede incluir de dos formas:– Por su número: &#nnn, donde nnn es el código decimal del
carácter.
– Por su mnemotécnico.
Adquisición y Tratamiento de Datos 35
Introducción a HTML y Javascript
Caracteres especiales (II)• Los principales mnemotécnicos son:
Carácter Código Carácter Código Carácter Código Carácter Código < < > > & & # # “ " á á é é í í ó ó ú ú Á Á ñ ñ Ñ Ñ ® ® @ © Espacio
no divisible.
El carácter sirve para insertar un espacio pero que no pueda dividirse por ese punto el texto escrito.
Adquisición y Tratamiento de Datos 36
Introducción a HTML y Javascript
Listas (I)• Las listas son conjuntos de párrafos a los que se les
aplica un formato de presentación común.• Existen cuatro tipos de listas:
– Listas desordenadas.– Listas ordenadas.– Menús.– Listas de elementos cortos.
• Los elementos que forman la lista se representan con la etiqueta opcional <LI>, que tiene como atributos:– VALUE= que altera el número de índice en una lista ordenada.– TYPE=(A, a, I, i, 1, circle, disc, square) que altera la marca del párrafo según la lista sea desordenada, etc.
Adquisición y Tratamiento de Datos 37
Introducción a HTML y Javascript
Listas (II)• Las listas desordenadas se representan mediante
la etiqueta pareada <UL>.– Su único atributo es TYPE=(circle, disc, square) que indica el tipo de marca que indica cada elemento.
• Las listas ordenadas se representan mediante la etiqueta pareada <OL>. Sus atributos son:– START= que indica el número de orden del primer
elemento de la lista.– TYPE=(A, a, I, i, 1) que indica el tipo de
numeración a emplear.
Adquisición y Tratamiento de Datos 38
Introducción a HTML y Javascript
Listas (III)• Los menús se representan mediante la etiqueta
pareada <MENU>.• Son equivalentes a las listas desordenadas solo
que se muestran de forma más compacta.• Las listas de elementos cortos se representan con
la etiqueta pareada <DIR>.• Permiten al cliente mostrar en paralelo los
elementos de la lista si es posible.• Estas dos opciones de listas deben ser sustituidas
siempre por listas desordenadas.
Adquisición y Tratamiento de Datos 39
Introducción a HTML y Javascript
Listas (IV)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Listas en HTML</TITLE></HEAD><BODY><P><EM>Elige una opción:</EM></P><OL START=1 TYPE="A"><LI>Comprar un producto</LI><LI>Ver el estado de una compra</LI><LI><UL TYPE=circle><LI>De este mes</LI><LI>De otros meses</LI></UL></LI><LI VALUE=10>Salir</LI></OL></BODY></HTML>
Adquisición y Tratamiento de Datos 40
Introducción a HTML y Javascript
Glosario de términos (I)
• Son listas especiales que permiten incluir un elemento junto con su definición.
• Se definen con la etiqueta pareada <DL>.
• Los elementos se definen con la etiqueta opcional <DT>.
• Las definiciones del elemento, que puede ocupar varias líneas, se define con la etiqueta opcional <DD>.
Adquisición y Tratamiento de Datos 41
Introducción a HTML y Javascript
Glosario de términos (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Glosarios en HTML</TITLE></HEAD><BODY><DL><DT>Termino 1</DT><DD>Definición termino 1</DD><DT>Termino 2</DT><DD>Definición termino 2</DD></DL></BODY></HTML>
Adquisición y Tratamiento de Datos 42
Introducción a HTML y Javascript
Enlaces entre páginas (I)• La posibilidad de enlazar diferentes páginas es la
principal aportación de la web.
• Esto se realiza mediante las URLs (Universal Resource Locator), que asigna una dirección a cualquier recurso disponible en Internet.
• Los enlaces pueden ser de dos tipos:– De destino: Indican puntos de un documento a los
que se puede hacer referencia.
– De origen. Elementos que al ser seleccionados activarán una URL o un enlace de destino.
Adquisición y Tratamiento de Datos 43
Introducción a HTML y Javascript
Enlaces entre páginas (II)
• Los enlaces se indican con la etiqueta pareada <A>, que puede tener dos atributos incompatibles entre si:– NAME=, que especifica un enlace de destino. El enlace de
destino debe ser un nombre único que identificará este punto del documento.
– HREF=, que especifica un enlace de origen. El enlace de origen es una URL a la que se referencia desde este punto.
• Si el enlace es de origen puede tener un atributo más, TARGET=, que indica el nombre del marco (frame) en el que cargara el enlace.
Adquisición y Tratamiento de Datos 44
Introducción a HTML y Javascript
Enlaces entre páginas (III)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Enlaces en HTML</TITLE></HEAD><BODY><P><A NAME="Capítulo1"><B>Capítulo 1</B></A></P><P>...<BR>...<BR>...<BR>...<BR>...<BR>...</P><A HREF="http://www.uv.es">Web de la UV</A><BR><BR><A HREF="#Capítulo1">Capítulo 1</A></BODY></HTML>
Adquisición y Tratamiento de Datos 45
Introducción a HTML y Javascript
Inserción de imágenes (I)• HTML permite insertar imágenes mediante la
etiqueta no pareada <IMG>. Sus atributos son:Atributo Descripción
SRC=”...” Contiene la URL de la imagen a incluir. Este atributo es obligatorio. ALT=”...” Asigna un texto descriptivo relacionado con la imagen. ALIGN= Controla la alineación de la imagen con respecto al párrafo en que esta
insertada. Los valores que puede tomar son: top, middle, bottom, texttop, baseline, absmiddle y absbottom.
ALIGN= Control de la alineación de la imagen, puede tomar los valores left y right y permite que un párrafo fluya sobre el borde de una imagen, bloqueando ésta a la izquierda o derecha del margen. No puede utilizarse junto con la anterior.
HEIGHT= Informa al cliente web de la altura de la imagen a insertar. WIDTH= Informa al cliente web de la anchura de la imagen a insertar. ISMAP Informa al cliente web de que esta imagen es un mapa activo. USEMAP Informa al cliente web del archivo con el mapa activo de la imagen. BORDER= Fija la anchura del borde que rodeará a la imagen. Un valor de 0
desactiva el borde. HSPACE= Fija la anchura horizontal de los márgenes de la imagen (en pixels). VSPACE= Fija la anchura vertical de los márgenes de la imagen (en pixels).
Adquisición y Tratamiento de Datos 46
Introducción a HTML y Javascript
Inserción de imágenes (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Imágenes en HTML</TITLE></HEAD><BODY><P>Vamos a insertar una imagen a continuación</P><P><IMG SRC="imagen.gif" ALT="logo" ALIGN=left>Todo el texto de este párrafose colocara a la derecha de la imagen al estar esta alineada a la izquierda<BR><BR><BR><BR><BR>Pero al sobrepasar la imagen continuara de forma normal</P></BODY></HTML>
Adquisición y Tratamiento de Datos 47
Introducción a HTML y Javascript
Tablas (I)• Las tablas se definen con la etiqueta pareada <TABLE>.• La etiqueta pareada <CAPTION> permite especificar
un título de la tabla.
• Las filas se representan mediante la etiqueta pareada <TR>.
• Las celdas (columnas) dentro de cada fila se representan mediante la etiqueta pareada <TD>.
• Existe un tipo especial de celda, que se representa mediante la etiqueta pareada <TH> y que corresponde al encabezado.
Adquisición y Tratamiento de Datos 48
Introducción a HTML y Javascript
Tablas (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Tablas en HTML</TITLE></HEAD><BODY><TABLE><CAPTION>Gastos del mes</CAPTION><TR><TH>Concepto</TH><TH>Importe</TH></TR><TR><TD>Alimentación</TD><TD>20.000</TD></TR><TR><TD>Vestido</TD><TD>50.000</TD></TR></TABLE></BODY></HTML>
Adquisición y Tratamiento de Datos 49
Introducción a HTML y Javascript
Tablas (III)Etiqueta Atributos Descripción
BORDER= Fija el ancho del borde exterior de la tabla (en pixels).
CELLPADDING= Fija la distancia (en pixels) entre el borde de la celda y su contenido.
CELLSPACING= Fija la anchura (en pixels) de la líneas de división de la tabla.
WIDTH= Controla la anchura horizontal de la tabla. Se puede especificar en pixels o en porcentaje.
<TABLE>
ALIGN= Control de la alineación de la tabla, puede tomar los valores left y right y permite que un párrafo fluya sobre el borde de una tabla, bloqueando ésta a la izquierda o derecha del margen
<CAPTION> ALIGN= Fija la posición del título con respecto a la tabla. Puede ser top o bottom.
ALIGN= Especifica la alineación horizontal del texto en la fila, puede ser left, right o center.
<TR>
VALING= Especifica la alineación vertical del texto en la fila, pued e ser top, bottom, middle o baseline.
ALIGN= Especifica la alineación horizontal del texto en la celda, puede ser left, right o center.
VALIGN= Especifica la alineación vertical del texto en la celda, puede ser top, bottom, middle o baseline.
COL SPAN= Indica el número de columnas que ocupara esta celda.
ROWSPAN= Indica el número de filas que ocupara esta celda. NOWRAP= Obliga al cliente web a no romper las líneas de
texto que contenga la celda.
<TD>
WIDTH= Determina el ancho de la celda. Se puede especificar como un ancho en pixels o en porcentaje.
<TH> Igual que <TD> . Igual que los atributos de <TD> .
Adquisición y Tratamiento de Datos 50
Introducción a HTML y Javascript
Tablas (IV)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Tablas en HTML</TITLE></HEAD><BODY><TABLE BORDER=2 BGCOLOR="green"><CAPTION ALIGN=bottom>Gastos del mes</CAPTION><TR ALIGN=center BGCOLOR="yellow"><TH>Concepto</TH><TH>Importe</TH><TH>Fecha</TH></TR><TR ALIGN=right><TD ALIGN=left>Alimentación</TD><TD>20.000</TD><TD>1/1/1990</TD></TR><TR ALIGN=right><TD ALIGN=left>Vestido</TD><TD>50.000</TD><TD>10/1/1990</TD></TR></TABLE></BODY></HTML>
Adquisición y Tratamiento de Datos 51
Introducción a HTML y Javascript
Tablas (V)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Tablas en HTML</TITLE></HEAD><BODY><TABLE BORDER=2 BGCOLOR="blue"><CAPTION ALIGN=top>Calendario</CAPTION><TR ALIGN=center BGCOLOR="yellow"><TH>Octubre</TH></TR><TR ALIGN=right><TD></TD><TD><TABLE BORDER=1><TR ALIGN=center BGCOLOR="green"><TH>L</TH><TH>M</TH><TH>X</TH><TH>J</TH><TH>V</TH><TH>S</TH><TH>D</TH></TR><TR ALIGN=center BGCOLOR="pink"><TD></TD><TD></TD><TD></TD><TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD></TR><TR ALIGN=center BGCOLOR="pink"><TD>5</TD><TD>6</TD><TD>7</TD><TD>8</TD><TD>9</TD><TD>10</TD><TD>11</TD></TR><TR ALIGN=center BGCOLOR="pink"><TD>12</TD><TD>13</TD><TD>14</TD><TD>15</TD><TD>16</TD><TD>17</TD><TD>18</TD></TR><TR ALIGN=center BGCOLOR="pink"><TD>19</TD><TD>20</TD><TD>21</TD><TD>22</TD><TD>23</TD><TD>24</TD><TD>25</TD></TR><TR ALIGN=center BGCOLOR="pink"><TD>26</TD><TD>27</TD><TD>28</TD><TD>29</TD><TD>30</TD></TR></TABLE></TD></TR><TR ALIGN=center BGCOLOR="yellow"><TH>Noviembre</TH></TR></TABLE></BODY></HTML>
Adquisición y Tratamiento de Datos 52
Introducción a HTML y Javascript
Tablas (VI)
Adquisición y Tratamiento de Datos 53
Introducción a HTML y Javascript
Marcos (I)• Permiten dividir una ventana de un cliente web en
varias ventanas.• Cada ventana puede mostrar una URL distinta.• La estructura general de una página web que define
marcos es:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"><HTML><HEAD>....................</HEAD><FRAMESET>....................</FRAMESET></HTML>
Adquisición y Tratamiento de Datos 54
Introducción a HTML y Javascript
Marcos (II)• Los marcos se definen mediante la etiqueta
pareada <FRAMESET>.
• Los atributos de <FRAMESET> son:– ROWS="lista" especifica las filas en que se
divide la ventana y el tamaño de cada fila.– COLS="lista" especifica las columnas en que se
divide la ventana y el tamaño de cada columna.– BORDER= especifica el tamaño del borde que indica
los distintos marcos. Puede tomar el valor cero (sin borde).
Adquisición y Tratamiento de Datos 55
Introducción a HTML y Javascript
Marcos (III)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Marcos en HTML</TITLE></HEAD><FRAMESET COLS="30%,70%"><FRAME SRC="imagen.gif"><FRAME SRC="imagen.gif"></FRAMESET></HTML>
Adquisición y Tratamiento de Datos 56
Introducción a HTML y Javascript
Marcos (IV)• La etiqueta sin parear <FRAME> permite especificar el
contenido de cada marco. Sus atributos son:Atributo Explicación
SRC= Nombre del documento que se quiere colocar dentro del marco.
NAME= Asigna un nombre a un marco de forma que pueda ser el destino de enlaces situados en otros marcos.
MARGINWIDTH= Especifica el margen lateral (en pixels). MARGINHEIGHT Especifica el margen superior e inferior (en pixels). SCROLLING=(yes, no, auto) Si un documento es más largo que el marco aparecen
unas barras de desplazamiento. Este atributo permite activar, desactivar o automatizar su aparición.
NORESIZE Evita que el tamaño de los marcos sea alterado.
• Existe una etiqueta pareada <NOFRAMES> que permite definir el contenido a mostrar si un navegador no permite usar marcos (frames).
Adquisición y Tratamiento de Datos 57
Introducción a HTML y Javascript
Marcos (V)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Marcos en HTML</TITLE></HEAD><FRAMESET COLS="50%,50%"><FRAMESET ROWS="50%,50%"><FRAME SRC="imagen.gif"><FRAME SRC="imagen.gif"></FRAMESET><FRAMESET ROWS="33%,33%,34%"><FRAME SRC="imagen.gif"><FRAME SRC="imagen.gif"><FRAME SRC="imagen.gif"></FRAMESET><NOFRAMES>Su cliente no permite marcos</NOFRAMES></FRAMESET></HTML>
Adquisición y Tratamiento de Datos 58
Introducción a HTML y Javascript
Marcos (VI)• Es posible hacer que el destino de un enlace sea
un marco distinto del actual.
• Para ello se utilizan las propiedades NAME de la etiqueta <FRAME> y TARGET de la etiqueta <A>.
• La propiedad TARGET="nombre" de la etiqueta <A> debe tener el mismo "nombre" que el asignado a la propiedad NAME="nombre" de la etiqueta <FRAME>.
Adquisición y Tratamiento de Datos 59
Introducción a HTML y Javascript
Marcos (VII)
<!-- Fichero que define los marcos --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Marcos en HTML</TITLE></HEAD><FRAMESET COLS="30%,70%"><FRAME SRC="menu.html"><FRAME SRC="portada.html" NAME="principal"></FRAMESET></HTML> <!-- Fichero menu.html --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Marcos en HTML</TITLE></HEAD><BODY><A HREF="imagen.html" TARGET="principal">Cuando pulses aquí cambiara la otra ventana</A></BODY></HTML>
Adquisición y Tratamiento de Datos 60
Introducción a HTML y Javascript
Marcos (VIII)
<!-- Fichero portada.html --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Marcos en HTML</TITLE></HEAD><BODY><P>Este es el fichero de la portada</P><P>Formado por algunos párrafos</P></BODY></HTML> <!-- Fichero imagen.html --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Marcos en HTML</TITLE></HEAD><BODY><P>Y este es el fichero de la imagen <IMG SRC="imagen.gif"></P></BODY></HTML>
Adquisición y Tratamiento de Datos 61
Introducción a HTML y Javascript
Marcos (IX)
Adquisición y Tratamiento de Datos 62
Introducción a HTML y Javascript
Formularios (I)• Los formularios permiten enviar datos del cliente
al servidor.
• Se especifican mediante la etiqueta pareada <FORM>. Sus atributos son:
Atributo Descripción ACTION Especifica la URL del programa CGI que debe procesar los datos que
envía el formulario. Si se desea enviar correo electrónico se puede indicar con mailto:dirección de correo.
METHOD Especifica el método que se usa para enviar la información de los distintos elementos del formulario al programa CGI. Los métodos pueden ser GET (el programa CGI recibe los datos en la variable de entorno QUERY_STRING) y POST (el programa CGI recibe los datos por la entrada estándar).
NAME Permite especificar un nombre al formulario, es optativo.
Adquisición y Tratamiento de Datos 63
Introducción a HTML y Javascript
Formularios (II)
• Existen tres tipos distintos de campos de entrada en el formulario:– Mediante la etiqueta no pareada <INPUT>.– Mediante la etiqueta pareada <SELECT>.– Mediante la etiqueta pareada <TEXTAREA>.
Adquisición y Tratamiento de Datos 64
Introducción a HTML y Javascript
Formularios (III)• Los atributos de la etiqueta <INPUT> son:
Atributos Descripción TYPE Selecciona el tipo de campo de entrada. Es obligatorio NAME Define el nombre del identificador cuyo contenido será enviado. Es
obligatorio. VALUE Inicializa el valor del campo. SIZE Especifica el tamaño visible del texto. MAXLENGTH Especifica el número máximo de caracteres en un campo de entrada
de tipo texto. CHECKED Inicializa campos de entrada de tipo checkbox o radio buttons a su
estado. SRC Especifica el URL para la imagen a usar en el caso de un botón
gráfico de envío de la información. ALIGN Especifica el alineamiento, puede ser top, middle, bottom (por
defecto), left o right.
Adquisición y Tratamiento de Datos 65
Introducción a HTML y Javascript
Formularios (IV)• El atributo TYPE de la etiqueta <INPUT> define el tipo
de campo de entrada. Sus valores son:Valor del atributo Descripción
TEXT Valor por defecto. Muestra una línea de texto. PASSWORD Igual que TEXT excepto que los caracteres introducidos son
mostrados como *. CHECKBOX Casilla de verificación con dos estados (marcada o no). Es
obligatorio el uso de VALUE para especificar el nombre de la variable y el valor que toma ésta.
RADIO Elementos que operan conjuntamente, solo puede estar activado uno de ellos. Es obligatorio el uso de VALUE. Se puede indicar que un valor es por defecto utilizando el atributo CHECKED de la etiqueta INPUT.
SUBMIT Define un botón que envía los datos al programa del CGI. Debe existir siempre uno en cualquier formulario.
RESET Define un botón que inicializa los valores del formulario al valor por defecto.
FILE Define un método para poder escoger un fichero cuyo contenido será enviado como los datos proporcionados por el formulario.
HIDDEN No son visibles y proporcionan un método de enviar información sobre el estado, etc. al programa del CGI.
IMAGE Permite definir un botón gráfico.
Adquisición y Tratamiento de Datos 66
Introducción a HTML y Javascript
Formularios (V)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Formularios en HTML</TITLE></HEAD><BODY><FORM METHOD="POST" ACTION="http://pc.uv.es/cgi-bin/prueba.exe">Nombre: <INPUT TYPE="text" NAME="nombre" SIZE="10" MAXLENGTH="25"><BR>Primer apellido: <INPUT TYPE="text" NAME="apellido1" SIZE="10" MAXLENGTH="25"><BR>Segundo apellido: <INPUT TYPE="text" NAME="apellido2" SIZE="10" MAXLENGTH="25"><BR><BR>Curso: <BR>Primero<INPUT TYPE="radio" NAME="curso" VALUE="Primero" CHECKED>Segundo<INPUT TYPE="radio" NAME="curso" VALUE="Segundo">Tercero<INPUT TYPE="radio" NAME="curso" VALUE="Tercero">Cuarto<INPUT TYPE="radio" NAME="curso" VALUE="Cuarto">Quinto<INPUT TYPE="radio" NAME="curso" VALUE="Quinto"><BR><BR><INPUT TYPE="submit" VALUE="Enviar"><INPUT TYPE="reset" VALUE="Borrar"></FORM></BODY></HTML>
Adquisición y Tratamiento de Datos 67
Introducción a HTML y Javascript
Formularios (VI)• Los atributos de la etiqueta <SELECT> son:
Atributo Descripción NAME Define el nombre del identificador cuyo contenido será enviado. Es
obligatorio. SIZE Define el número de elementos del menú desplegable que serán
visualizados a la vez. MULTIPLE Permite que se seleccionen más de un elemento del menú.
• Los elementos del menú se definen con la etiqueta pareada <OPTION> cuyos atributos son:
Atributo Descripción VALUE Valor de la opción que se enviará si es seleccionado. SELECTED Indica que este es el valor seleccionado por defecto. Pueden existir varios
si la opción MÚLTIPLE ha sido seleccionada en el menú.
Adquisición y Tratamiento de Datos 68
Introducción a HTML y Javascript
Formularios (VII)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Formularios en HTML</TITLE></HEAD><BODY><FORM METHOD="POST" ACTION="http://pc.uv.es/cgi-bin/prueba.exe"><P>Procesador:<SELECT NAME="procesador" SIZE="1"><OPTION VALUE="486" SELECTED>486 o inferior</OPTION><OPTION VALUE="Pentium">Pentium</OPTION><OPTION VALUE="Pentium II">Pentium II</OPTION><OPTION VALUE="Pentium III">Pentium III</OPTION></SELECT></P><P>Sistema operativo:<SELECT NAME="sistema" SIZE="5" MULTIPLE><OPTION VALUE="dos">MS-DOS</OPTION><OPTION VALUE="Windows9x">Windows 95/98</OPTION><OPTION VALUE="WindowsNT">Windows NT</OPTION><OPTION VALUE="Windows2000">Windows 2000</OPTION><OPTION VALUE="WindowsXP" SELECTED >Windows XP</OPTION><OPTION VALUE="Linux" SELECTED>Linux</OPTION></SELECT></P><CENTER><INPUT TYPE="submit" VALUE="Enviar"> <INPUT TYPE="reset" VALUE="Borrar"></CENTER></FORM></BODY></HTML>
Adquisición y Tratamiento de Datos 69
Introducción a HTML y Javascript
Formularios (VIII)
Adquisición y Tratamiento de Datos 70
Introducción a HTML y Javascript
Formularios (IX)
• Los atributos de la etiqueta <TEXTAREA> son:
Atributo Descripción NAME Define el nombre del identificador cuyo contenido será enviado. Es
obligatorio. ROWS Define el número de filas del área de texto. COLS Define el número de columnas del área de texto.
Adquisición y Tratamiento de Datos 71
Introducción a HTML y Javascript
Formularios (X)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Formularios en HTML</TITLE></HEAD><BODY><H1 ALIGN="center">Comentarios</H1><FORM METHOD="POST" ACTION="http://pc.uv.es/cgi-bin/prueba.exe"><P>A la asignatura:<TEXTAREA NAME="Asignatura" ROWS="5" COLS="40"></TEXTAREA></P><P>Al profesor:<TEXTAREA NAME="Profesor" ROWS="3" COLS="50">Enrique Bonet</TEXTAREA></P><CENTER><INPUT TYPE="submit" VALUE="Enviar"> <INPUT TYPE="reset" VALUE="Borrar"></CENTER></FORM></BODY></HTML>
Adquisición y Tratamiento de Datos 72
Introducción a HTML y Javascript
Formularios (XI)• Los formularios son procesados por un programa
en el servidor, generalmente un CGI, cuya URL se ha especificado en el campo ACTION de la definición del formulario.– Si un CGI devuelve un documento generado por él,
el documento deberá ir precedido de:
Content-type: tipo/subtipo\n\n– Si un CGI devuelve una referencia a un documento
existente, deberá ir precedido de:
Location: URL\n\n
Adquisición y Tratamiento de Datos 73
Introducción a HTML y Javascript
Formularios (XII)#include <stdio.h> #include <stdlib.h> #include <string.h> #define TAM 1000 void Error(char *msg) {
printf("Content-type: text/plain\n\n"); printf("Error: %s\n",msg); exit(EXIT_SUCCESS);
} int main(void) {
char buffer[TAM],*p; int longitud;
if ((p=getenv("REQUEST_METHOD"))==NULL)
Error("REQUEST METHOD no encontrado"); if (strncmp(p,"POST",strlen("POST"))==0) {
if ((p=getenv("CONTENT_LENGTH"))==NULL) Error("CONTENT_LENGTH no encontrado");
if ((longitud=atoi(p))>=(TAM-1)) Error("Longitud excesiva");
if (fgets(buffer,longitud+1,stdin)==NULL) Error("Leyendo los datos");
buffer[longitud]='\0'; } else {
if ((p=getenv("QUERY_STRING"))==NULL) Error("QUERY_STRING no encontrado");
if ((longitud=strlen(p))>=(TAM-1)) Error("Longitud excesiva");
strncpy(buffer,p,TAM); } /* Creamos ahora el mensaje de salida */ printf("Content-type: text/html\n\n"); printf("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"
\"http://www.w3.org/TR/html4/loose.dtd\">\n"); printf("<HTML>\n"); printf("<HEAD>\n"); printf("<META http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-
1\">"); printf("<TITLE>Salida del CGI</TITLE>\n”); printf(“</HEAD>\n"); printf("<BODY>Leidos %d carácteres<BR>\n",longitud); printf("%s</BODY>\n",buffer); printf("</HTML>\n"); return 0;
}
Adquisición y Tratamiento de Datos 74
Introducción a HTML y Javascript
Formularios (XIII)
Adquisición y Tratamiento de Datos 75
Introducción a HTML y Javascript
Imágenes sensibles (I)• Permiten definir zonas activas en imágenes que
actúan como enlaces a URLs.• Existen dos tipos:
– Procesadas en el servidor. La localización del mapa de la imagen se especifica mediante el atributo ISMAP de la etiqueta <IMG>.
– Procesadas en el cliente. La localización del mapa de la imagen se especifica mediante el atributo USEMAP de la etiqueta <IMG>.
• Es preferible utilizar las procesadas en el cliente pues liberan de “trabajo” al servidor.
Adquisición y Tratamiento de Datos 76
Introducción a HTML y Javascript
Imágenes sensibles (II)
• El mapa de la imagen se especifica mediante la etiqueta pareada <MAP>, cuyo único atributo NAME especifica el nombre del mapa.
• Cada uno de los elementos del mapa se indica mediante la etiqueta sin parear <AREA>, cuyos atributos son:
Atributo Descripción HREF Especifica la URL del documento a cargar si se pulsa sobre esta zona. ALT Asigna un texto descriptivo relacionado con la zona. SHAPE Especifica el tipo de objeto que define la zona, puede ser “circle”, “rect” o
“poly” COORDS Especifica las coordenadas de la zona, su formato depende del valor de
SHAPE.
Adquisición y Tratamiento de Datos 77
Introducción a HTML y Javascript
Imágenes sensibles (III)• Los valores de las coordenadas según los valores
que tome el atributo "SHAPE" se especifican como:
SHAPE Especificación de COORDS Circle x,y,radio (x,y) son el centro del circulo. Rects x1,y1,x2,y2 (x1,y1) son la coordenada superior izquierda y (x2,y2) la
coordenada inferior derecha del rectángulo. Poly x1,y1,x2,y2,...,xn,yn, (xi,yi) son las coordenadas de los vértices del polígono,
(xn,yn) deben ser igual a (x1,y1).
• Si dos zonas se solapan, solo se evalúa la primera que se encuentra en el mapa.
Adquisición y Tratamiento de Datos 78
Introducción a HTML y Javascript
Imágenes sensibles (IV)
<!-- Fichero del cuadrado --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Imagenes sensibles en HTML</TITLE></HEAD><BODY><H1 ALIGN=center>!!!Has pulsado sobre el cuadrado!!!</H1></BODY></HTML> <!-- Fichero del circulo --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Imagenes sensibles en HTML</TITLE></HEAD><BODY><H1 ALIGN=center>!!!Has pulsado sobre el circulo!!!</H1></BODY></HTML>
Adquisición y Tratamiento de Datos 79
Introducción a HTML y Javascript
Imágenes sensibles (V)<!-- Fichero de la imagen --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Imagenes sensibles en HTML</TITLE></HEAD><BODY><MAP NAME="mapa_sensible"><AREA HREF="cuadrado.html" ALT="cuadrado" SHAPE="rect" COORDS="10,10,70,70"><AREA HREF="circulo.html" ALT="circulo" SHAPE="circle" COORDS="100,100,30"></MAP><CENTER><IMG SRC="imagen.gif" ALT="mapa sensible" USEMAP="#mapa_sensible"></CENTER></BODY></HTML>
Adquisición y Tratamiento de Datos 80
Introducción a HTML y Javascript
Javascript (I)
• Se inserta dentro de los documentos HTML mediante:– La etiqueta pareada <SCRIPT>, indicando el tipo de
script mediante TYPE="text/javascript".– Insertando, dentro de una etiqueta HTML, la acción a
realizar si sucede un evento.
Adquisición y Tratamiento de Datos 81
Introducción a HTML y Javascript
Javascript (II)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Mi página de Javascript</TITLE></HEAD><BODY><CENTER><SCRIPT TYPE="text/javascript">document.write("Esta es mi primera prueba en Javascript");</SCRIPT></CENTER></BODY></HTML>
Adquisición y Tratamiento de Datos 82
Introducción a HTML y Javascript
Javascript (III)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Mi página de Javascript</TITLE></HEAD><BODY><P onmouseover="this.style.color='#FF0000'" onmouseout="this.style.color='#000000'">Cuando el ratón este sobre este párrafo cambiara de color.</P><P>Pero no cuando este sobre este otro párrafo.</P></BODY></HTML>
Adquisición y Tratamiento de Datos 83
Introducción a HTML y Javascript
Tipos de datos (I)
• Son similares a los existentes en C/C++, Java, etc.
• Las variables se declaran precedidas de la palabra var.
• No es necesario declarar el tipo de dato de las variables, pues estas “toman” el tipo de dato cuando se les asigna por primera vez un valor.
Adquisición y Tratamiento de Datos 84
Introducción a HTML y Javascript
Tipos de datos (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Tipos de datos, operadores y estructuras de control</TITLE></HEAD><BODY><P><SCRIPT TYPE="text/javascript">var a,b; a=3;b="quique"; if (b!="quique")document.write("<FONT COLOR='#FF0000'>Hemos escrito la palabra "+b+"<\/FONT>");else{document.write("<FONT COLOR='#0000FF'>");var i; for(i=0;i<a;i++)document.write(b+"<BR>"); document.write("<\/FONT>");}</SCRIPT></P></BODY></HTML>
Adquisición y Tratamiento de Datos 85
Introducción a HTML y Javascript
Tipos de datos (III)
Si la variable b tuviera, por ejemplo, el valor “ana”, la salida sería:
Las etiquetas HTML que tienen el símbolo /, debe precederse dicho símbolo de \.
Adquisición y Tratamiento de Datos 86
Introducción a HTML y Javascript
Funciones en Javascript (I)• Se declaran como:
function nombre([argumentos]){código de la función
}
• No es necesario indicar el tipo de dato que devuelve la función.
Adquisición y Tratamiento de Datos 87
Introducción a HTML y Javascript
Funciones en Javascript (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Funciones en Javascript</TITLE><SCRIPT TYPE="text/javascript">function Prueba(a){if (a%2==0)return "par";elsereturn "impar";}</SCRIPT></HEAD><BODY><P><SCRIPT TYPE="text/javascript">var a=Prueba(3); document.write("El número pasado es: "+a);</SCRIPT></P></BODY></HTML>
Adquisición y Tratamiento de Datos 88
Introducción a HTML y Javascript
Jerarquía de objetos (I)
applet anchor area form
window
history location document
option
hidden password
radio button
checkbox
fileUpload
reset
select
submit
plugin link
frame
navigator
text
textarea
image
Adquisición y Tratamiento de Datos 89
Introducción a HTML y Javascript
Jerarquía de objetos (II)Objeto de Javascript Etiqueta HTML
window frame <FRAME> document <BODY> form <FORM> button <INPUT TYPE="button"> checkbox <INPUT TYPE="checkbox"> hidden <INPUT TYPE="hidden"> fileUpload <INPUT TYPE="file"> password <INPUT TYPE="password"> radio <INPUT TYPE="radio"> reset <INPUT TYPE="reset"> select <SELECT> submit <INPUT TYPE="submit"> text <INPUT TYPE="text"> textarea <TEXTAREA> Link <A HREF=""> Anchor <A NAME=""> Applet <APPLET> Image <IMG> Plugin <EMBED> Area <MAP> History location navigator
Adquisición y Tratamiento de Datos 90
Introducción a HTML y Javascript
Jerarquía de objetos (III)
• El acceso a los elementos se realiza mediante:– Su nombre: document.mi_formulario.mi_texto.
– Un índice que indica su posición dentro de un vector en el objeto que lo incluye: document.forms[0].elements[1].
• En ambos casos hemos supuesto que solo existe un objeto window, por lo que no es necesario especificarlo.
Adquisición y Tratamiento de Datos 91
Introducción a HTML y Javascript
El objeto window (I)
• Es el más alto de la jerarquía, debiendo existir como mínimo un objeto window.
• Sus principales propiedades y métodos son:– frames: Vector con los marcos definidos.– length: Número de marcos existentes.– parent: Objeto window que define los marcos.– top: window de nivel más superior.– alert(): Muestra una ventana con el texto que se
indique.
Adquisición y Tratamiento de Datos 92
Introducción a HTML y Javascript
El objeto window (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>El objeto window</TITLE></HEAD><BODY><P>El número de frames definidos en esta ventana es de: <SCRIPT TYPE="text/javascript">document.write(window.length);</SCRIPT></P></BODY></HTML>
Adquisición y Tratamiento de Datos 93
Introducción a HTML y Javascript
El objeto frame (I)
• El objeto frame corresponde a cada marco en que puede dividirse una ventana (objeto window).
• Sus principales propiedades son:– frames: Vector con los marcos definidos.– name: Nombre del marco.– parent: Objeto window que define los marcos.– top: window de nivel más superior.
Adquisición y Tratamiento de Datos 94
Introducción a HTML y Javascript
El objeto frame (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>El objeto frame</TITLE><SCRIPT TYPE="text/javascript"> function Escribir(){var i; top.MarcoSuperior.document.write("<CENTER>");top.MarcoSuperior.document.write("<H1>Algunos frames...<\/H1>");top.MarcoSuperior.document.write("<\/CENTER>"); for(i=0;i<top.length;i++){top.frames[i].document.write("<CENTER>");top.frames[i].document.write(top.frames[i].name);top.frames[i].document.write("<\/CENTER>");} return true;}</SCRIPT></HEAD><FRAMESET ROWS="50%,*" onload="javascript:Escribir();"><FRAME SRC="" NAME="MarcoSuperior"><FRAMESET COLS="50%,*"><FRAME SRC="" NAME="MarcoInferiorIzquierdo"><FRAME SRC="" NAME="MarcoInferiorDerecho"></FRAMESET></FRAMESET></HTML>
Adquisición y Tratamiento de Datos 95
Introducción a HTML y Javascript
El objeto document
• Contiene el documento que se muestra en el navegador.
• Todas las acciones de un window suceden en su objeto document asociado.
• Sus principales propiedades y métodos son:– forms: Vector con los formularios (objetos form)
del documento.– write(): Escribe texto y HTML en el documento
actual.
Adquisición y Tratamiento de Datos 96
Introducción a HTML y Javascript
El objeto form• El objeto form contiene todos los objetos
existentes en un formulario.
• Sus principales propiedades y métodos son:– action: Cadena con la URL donde se enviara la
información del formulario.– elements: Vector con los objetos del formulario.– target: Cadena con la ventana donde se enviaran
las respuestas al formulario.– reset(): Inicializa el formulario.– submit(): Envía el formulario.
Adquisición y Tratamiento de Datos 97
Introducción a HTML y Javascript
Los objetos text, textarea y password (I)
• Permiten manejar campos de tipo texto en los formularios.
• Sus principales propiedades son:– defaultValue: Valor por defecto del objeto.– name: Nombre del objeto.– value: Valor actual del objeto.
Adquisición y Tratamiento de Datos 98
Introducción a HTML y Javascript
Los objetos text, textarea y password (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Los objetos text, textarea y password</TITLE><SCRIPT TYPE="text/javascript"> function CambiarTexto(){document.formulario.texto.value = document.formulario.clave.value; return true;}</SCRIPT></HEAD><BODY><CENTER><P>Escribe la clave en la primera caja y pulsa el botón...</P><FORM NAME="formulario" ACTION=""><INPUT TYPE="password" NAME="clave" VALUE="" SIZE=20><INPUT TYPE="text" NAME="texto" VALUE="" SIZE=20><BR><INPUT TYPE="button" VALUE="Púlsame" onclick="Javascript:CambiarTexto();"></FORM></CENTER></BODY></HTML>
Adquisición y Tratamiento de Datos 99
Introducción a HTML y Javascript
Los objetos button (I)
• Existen tres tipos de objetos button:– reset, que es un botón que inicializa el formulario.– submit, que es un botón que envía el formulario.– button, que es un botón sin acción especificada.
• Sus principales propiedades y métodos son:– name: Nombre del objeto.– value: Valor actual del objeto.– click(): Simula la acción de pulsar el botón.
Adquisición y Tratamiento de Datos 100
Introducción a HTML y Javascript
Los objetos button (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Los objetos button</TITLE><SCRIPT TYPE="text/javascript"> function CambiarTexto(){document.formulario.texto2.value = document.formulario.texto1.value; return true;}*** AQUÍ VA LA FUNCIÓN QUE VEREMOS EN LA SIGUIENTE PÁGINA ***</SCRIPT></HEAD><BODY><CENTER><FORM NAME="formulario" ACTION="Javascript:Mensaje();"><INPUT TYPE="text" NAME="texto1" VALUE="" SIZE=20><INPUT TYPE="button" NAME="cambiar" VALUE="<-->" onclick="Javascript:CambiarTexto();"><INPUT TYPE="text" NAME="texto2" VALUE="" SIZE=20><BR><INPUT TYPE="submit" VALUE="Enviar"><INPUT TYPE="reset" VALUE="Borrar"></FORM></CENTER></BODY></HTML>
Adquisición y Tratamiento de Datos 101
Introducción a HTML y Javascript
Los objetos button (III)function Mensaje(){var vocal,texto,i; vocal=0;texto="";texto=document.formulario.texto2.value; for(i=0;i<texto.length;i++)switch(texto.charAt(i)){case 'a':case 'A':case 'e':case 'E':case 'i':case 'I':case 'o':case 'O':case 'u':case 'U':vocal++;break;} texto='<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/html4\/loose.dtd">\n';texto+="<HTML>\n<HEAD>\n";texto+='<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">\n';texto+="<TITLE>Respuesta al formulario<\/TITLE>\n<\/HEAD>\n";texto+="<BODY><P>El texto tenía " +vocal+ " vocales<\/P><\/BODY><\/HTML>"; return texto;}
Adquisición y Tratamiento de Datos 102
Introducción a HTML y Javascript
Los objetos button (IV)
Adquisición y Tratamiento de Datos 103
Introducción a HTML y Javascript
El objeto checkbox (I)• El objeto permite seleccionar una opción dentro
de un formulario.
• Sus principales propiedades y métodos son:– checked: Valor booleano que indica si el objeto
está o no seleccionado.– defaultChecked: Valor booleano que indica si el
objeto debe estar seleccionado por defecto.– name: Nombre del objeto.– value: Valor del objeto.– click(): Simula la acción de pulsar el checkbox.
Adquisición y Tratamiento de Datos 104
Introducción a HTML y Javascript
El objeto checkbox (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Los objetos checkbox</TITLE><SCRIPT TYPE="text/javascript"> function Mensaje(){var texto,i; texto="Las opciones seleccionadas son: \n";for(i=0;i<4;i++)if (document.formulario.elements[i].checked)texto+="\t * "+document.formulario.elements[i].value+"\n"; alert(texto);} </SCRIPT></HEAD><BODY><CENTER><FORM NAME="formulario" ACTION="Javascript:Mensaje();"><INPUT TYPE="checkbox" NAME="opcion1" VALUE="Uno" CHECKED>Opción 1<BR><INPUT TYPE="checkbox" NAME="opcion2" VALUE="Dos">Opción 2<BR><INPUT TYPE="checkbox" NAME="opcion3" VALUE="Tres" CHECKED>Opción 3<BR><INPUT TYPE="checkbox" NAME="opcion4" VALUE="Cuatro">Opción 4<BR><INPUT TYPE="submit" VALUE="Enviar"><INPUT TYPE="reset" VALUE="Borrar"></FORM></CENTER></BODY></HTML>
Adquisición y Tratamiento de Datos 105
Introducción a HTML y Javascript
El objeto radio (I)• Permite seleccionar una opción de un conjunto
de opciones posibles.• Sus principales propiedades y métodos son:
– checked: Valor booleano que indica si el objeto está o no seleccionado.
– defaultChecked: Valor booleano que indica si el objeto debe estar seleccionado por defecto.
– length: Número de opciones del objeto.– name: Nombre del objeto.– value: Valor del objeto.– click(): Simula la acción de pulsar el radiobutton.
Adquisición y Tratamiento de Datos 106
Introducción a HTML y Javascript
El objeto radio (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Los objetos radio</TITLE><SCRIPT TYPE="text/javascript">*** AQUÍ VA LA FUNCIÓN QUE VEREMOS EN LA SIGUIENTE PÁGINA ***</SCRIPT></HEAD><BODY><CENTER><FORM NAME="formulario" ACTION="Javascript:Mensaje();"><TABLE BORDER="1"><CAPTION ALIGN=top>Elección del ordenador</CAPTION><TR><TH>Procesador></TH><TH>Sistema operativo</TH></TR><TR ALIGN=left><TD><INPUT TYPE="radio" NAME="procesador" VALUE="P-I">Pentium I<BR><INPUT TYPE="radio" NAME="procesador" VALUE="P-II">Pentium II<BR><INPUT TYPE="radio" NAME="procesador" VALUE="P-III">Pentium III<BR><INPUT TYPE="radio" NAME="procesador" VALUE="P-IV" CHECKED>Pentium IV</TD><TD><INPUT TYPE="radio" NAME="sistema" VALUE="W-9x">Windows 9x<BR><INPUT TYPE="radio" NAME="sistema" VALUE="W-2000">Windows 2000<BR><INPUT TYPE="radio" NAME="sistema" VALUE="W-XP" CHECKED>Windows XP<BR><INPUT TYPE="radio" NAME="sistema" VALUE="Linux">Linux<BR></TD></TR></TABLE><INPUT TYPE="submit" VALUE="Enviar"><INPUT TYPE="reset" VALUE="Borrar"></FORM></CENTER></BODY></HTML>
Adquisición y Tratamiento de Datos 107
Introducción a HTML y Javascript
El objeto radio (III)function Mensaje(){var texto,i; texto="Seleccionado procesador ";for(i=0;i<document.formulario.procesador.length;i++)if (document.formulario.procesador[i].checked)texto+=document.formulario.procesador[i].value; texto+="\nY sistema operativo ";for(i=0;i<document.formulario.sistema.length;i++)if (document.formulario.sistema[i].checked)texto+=document.formulario.sistema[i].value; alert(texto);}
Adquisición y Tratamiento de Datos 108
Introducción a HTML y Javascript
El objeto select (I)• Permiten seleccionar una opción o un conjunto de
opciones.• Sus principales propiedades y métodos son:
– length: Número de opciones del objeto.– name: Nombre del objeto.– options: Vector con las opciones que aparecen en la lista
de selección. Esta propiedad tiene las sub-propiedades:• defaultSelected: Valor booleano que indica si la opción esta
seleccionada por defecto.• index: Posición de la opción dentro de la lista.• selected: Valor booleano que indica si la opción esta seleccionada.• text: Texto mostrado en la opción.• value: Valor de la opción.
– selectedIndex: Índice de la opción seleccionada.
Adquisición y Tratamiento de Datos 109
Introducción a HTML y Javascript
El objeto select (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Los objetos checkbox</TITLE><SCRIPT TYPE="text/javascript">*** AQUÍ VA LA FUNCIÓN QUE VEREMOS EN LA SIGUIENTE PÁGINA ***</SCRIPT></HEAD><BODY><CENTER><FORM NAME="formulario" ACTION="Javascript:Mensaje();"><TABLE BORDER="1"><CAPTION ALIGN=top>Elección del ordenador</CAPTION><TR><TH>Procesador</TH><TH>Sistema operativo</TH></TR><TR ALIGN=left><TD><SELECT NAME="procesador" SIZE=1><OPTION VALUE="P-I">Pentium I</OPTION><OPTION VALUE="P-II">Pentium II</OPTION><OPTION VALUE="P-III">Pentium III</OPTION><OPTION VALUE="P-IV" SELECTED>Pentium IV</OPTION></SELECT></TD><TD><SELECT NAME="sistema" SIZE=4 MULTIPLE><OPTION VALUE="W-9x">Windows 9x</OPTION><OPTION VALUE="W-2000">Windows 2000</OPTION><OPTION VALUE="W-XP" SELECTED>Windows XP</OPTION><OPTION VALUE="Linux" SELECTED>Linux</OPTION></SELECT></TD></TR></TABLE><INPUT TYPE="submit" VALUE="Enviar"><INPUT TYPE="reset" VALUE="Borrar"></FORM></CENTER></BODY></HTML>
Adquisición y Tratamiento de Datos 110
Introducción a HTML y Javascript
El objeto select (III)function Mensaje(){var texto,i; texto="Seleccionado procesador ";texto+=document.formulario.procesador.options[document.formulario.procesador.selectedIndex].value; texto+="\nY sistemas operativos\n";for(i=0;i<document.formulario.sistema.length;i++)if (document.formulario.sistema.options[i].selected)texto+="\t* "+ document.formulario.sistema.options[i].value+ "\n"; alert(texto);}
Adquisición y Tratamiento de Datos 111
Introducción a HTML y Javascript
El objeto hidden
• Permite guardar información sin que esta sea visible.
• Es equivalente a un objeto de tipo text que no aparece.
• Sus principales propiedades son:– name: Nombre del objeto.– value: Valor del objeto.
Adquisición y Tratamiento de Datos 112
Introducción a HTML y Javascript
Strings (I)
• Los strings son un objeto ya declarado en Javascript.• Su uso es tan sencillo como declarar una variable y
asignarle un string.
• Sobre los string podemos usar los operadores de comparación (==, !=, >, >=, <, <=), así como el operador +, que permite concatenar dos strings.
• Sus principales propiedades y métodos son:– length: Devuelve la longitud del string.– charAt(índice): Devuelve el carácter situado en la
posición indicada por índice.
Adquisición y Tratamiento de Datos 113
Introducción a HTML y Javascript
Strings (II)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Strings en Javascript</TITLE></HEAD><BODY><SCRIPT TYPE="text/javascript">var c1,c2,c3; c1="0123456789";c2="01234";c3=c1+c2;if (c1<c2)document.write("<P>"+c1+" es menor que "+c2+"<\/P>");elsedocument.write("<P>"+c1+" es mayor o igual que "+c2+"<\/P>"); if (c1<c3)document.write("<P>"+c1+" es menor que "+c3+"<\/P>");elsedocument.write("<P>"+c1+" es mayor o igual que "+c3+"<\/P>");document.write("<P>La longitud de "+c3+" es de "+c3.length);</SCRIPT></BODY></HTML>
Adquisición y Tratamiento de Datos 114
Introducción a HTML y Javascript
Strings (III)• Los strings poseen algunas funciones especiales
que son:Función Descripción
parseInt(string) Convierte la cadena pasada en número entero y devuelve el resultado. La conversión termina al concluir la cadena o al encontrar un carácter no numérico. Si la cadena no contiene un valor numérico se devuelve el valor NaN.
parseFloat(string) Convierte la cadena pasada en un número real en coma flotante de forma similar a parseInt().
isNaN(valor) Evalúa el valor pasado como parámetro, devolviendo true si el valor no es numérico y false en caso contrario.
eval(expresión) Evaluá la expresión pasada como parámetro y devuelve el resultado. Si la expresión no puede ser evaluada se produce un error de Javascript. Por ello debe usarse estando seguro de que la expresión puede ser evaluada correctamente.
Adquisición y Tratamiento de Datos 115
Introducción a HTML y Javascript
Strings (IV)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Strings en Javascript</TITLE></HEAD><BODY><SCRIPT TYPE="text/javascript">var n1,n2,n3; n1="123";n2="1.67e-18JLK";n3="k23l"; document.write("<TABLE BORDER='1'>");document.write("<TR><TD>Valor<\/TD><TD>parseInt()<\/TD><TD>parseFloat()<\/TD><\/TR>");document.write("<TR><TD>"+n1+"<\/TD><TD>"+parseInt(n1)+"<\/TD><TD>"+parseFloat(n1)+"<\/TD><\/TR>");document.write("<TR><TD>"+n2+"<\/TD><TD>"+parseInt(n2)+"<\/TD><TD>"+parseFloat(n2)+"<\/TD><\/TR>");document.write("<TR><TD>"+n3+"<\/TD><TD>"+parseInt(n3)+"<\/TD><TD>"+parseFloat(n3)+"<\/TD><\/TR>");document.write("<\/TABLE><BR>"); n1="-0.7e3";n2="2+4*3"; document.write("<TABLE BORDER='1'>");document.write("<TR><TD>Valor<\/TD><TD>isNaN()<\/TD><TD>eval()<\/TD><\/TR>");document.write("<TR><TD>"+n1+"<\/TD><TD>"+isNaN(n1)+"<\/TD><TD>"+eval(n1)+"<\/TD><\/TR>");document.write("<TR><TD>"+n2+"<\/TD><TD>"+isNaN(n2)+"<\/TD><TD>"+eval(n2)+"<\/TD><\/TR>");document.write("<TR><TD>"+n3+"<\/TD><TD>"+isNaN(n3)+"<\/TD><TD>"+"Expresión no valida"+"<\/TD><\/TR>");document.write("<\/TABLE>");</SCRIPT></BODY></HTML>
Adquisición y Tratamiento de Datos 116
Introducción a HTML y Javascript
Strings (V)
Adquisición y Tratamiento de Datos 117
Introducción a HTML y Javascript
Eventos (I)• Evento es toda acción que se realiza sobre la página
Web.• Los eventos pueden ser:
– Externos: Generados por el usuario.– Internos: Generados por la propia página Web.
• La respuesta a un evento suele ser una serie de acciones, como son modificar la página Web o enviar un formulario.
• Todo evento tiene asociado un comportamiento por defecto, por lo que solo hemos de modificar el comportamiento de los eventos que nos interesen.
Adquisición y Tratamiento de Datos 118
Introducción a HTML y Javascript
Eventos (II)• Los eventos más comunes son:
Evento Descripción onmousedown Se ha presionado (bajado) un botón del ratón. onmousemove Se ha movido el puntero del ratón. onmouseup Se ha levantado (subido) un botón del ratón. onclick Se ha realizado una pulsación completa (subida y bajada) del botón
izquierdo del ratón. ondblclick Se ha realizado una pulsación doble sobre el botón izquierdo del ratón. onmouseover El puntero del ratón se ha colocado sobre un elemento. onmouseout El puntero del ratón ha abandonado un elemento. ondragstart Se ha iniciado una operación de arrastre. onselectstart Se ha iniciado una nueva selección empleando el ratón. onselect Ha terminado una selección. onkeydown Se ha presionado (bajado) una tecla. onkeypress Se mantiene pulsada una tecla. onkeyup Se ha dejado de presionar una tecla. onblur Se ha abandonado el ámbito de un elemento. onfocus Se ha entrado en el ámbito de un elemento. onreset Se ha inicializado un formulario. onsubmit Se ha enviado un formulario. onload Se ha cargado una página. onunload Se ha descargado una página.
Adquisición y Tratamiento de Datos 119
Introducción a HTML y Javascript
Eventos (III)• La modificación del comportamiento de los
eventos se suele realizar mediante funciones.• En la llamada a estas funciones se suelen
emplear referencias a elementos de HTML. Estas referencias se realizan mediante:– La palabra this, si se refieren al propio elemento
HTML que hace la llamada a la función.– El nombre que tiene el elemento HTML.– Un nombre asignado mediante el atributo ID="nombre", que especifica como será conocido ese elemento HTML.
Adquisición y Tratamiento de Datos 120
Introducción a HTML y Javascript
Eventos (IV)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><TITLE>Eventos en Javascript</TITLE><SCRIPT TYPE="text/javascript">
function CambiarColor(elemento){
if (elemento.style.color=="red")elemento.style.color="blue";
elseif (elemento.style.color=="blue")
elemento.style.color="green";else
elemento.style.color="red";
return true;}
function Dentro(objeto){
objecto.style.color="white";
return true;}
function Fuera(objeto){
objecto.style.color="black";
return true;}
</SCRIPT></HEAD><BODY BGCOLOR="white"><P onclick="Javascript:CambiarColor(this);">Este texto cambiara de color</P><P onclick="Javascript:CambiarColor(this);">Y este otro tambien...</P><P onmouseover="Javascript:Dentro(document.getElementById('oculto'));" onmouseout="Javascript:Fuera(document.getElementById('oculto'));">Y si te pones sobre este otro...</P><P ID="oculto">!!! Desaparezco yo !!!</P></BODY></HTML>