Introducción a HTML y Javascript
Anuncio
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 1 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 2 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 3 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 4 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 5 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 6 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 7 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 8 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 9 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 10 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 11 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 12 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 13 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 14 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 15 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 16 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. SeEl ancho de la pantalla. puede expresar en pixels o en porcentaje. ALIGN= Especifica la alineación de la línea, puedeSi no se especifica, las ser left, right o center. líneas están centradas. NOSHADE Muestra una línea sólida sin aparienciaLínea con apariencia tridimensional. tridimensional. Adquisición y Tratamiento de Datos 17 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 18 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 19 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 20 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 21 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 preformateado y por tanto saldrá exactamente así. </PRE> <BLOCKQUOTE> <PRE WIDTH=40> Y este esta también preformateado y por tanto también saldrá así............... </PRE> </BLOCKQUOTE> </BODY> </HTML> Adquisición y Tratamiento de Datos 22 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 23 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 24 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 trib u to D escrip ció n C O L O R E sp ecifica un co lo r p ara el texto . S IZ E E sp ecifica el tam añ o d e la fu en te d e tex to , p u ed e ir de 1 a 7 esp ecificarse co m o v alo r ab so luto “1 ”, “5 ”, etc. o co m o v alo r relati “-3 ”. Adquisición y Tratamiento de Datos 25 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 26 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 27 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 28 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 29 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. <CITE> </CITE> <CODE> </CODE> <EM> </EM> <KBD> </KBD> Descripción Cita literal de un texto. Presentación de código fuente. Aplica énfasis al texto. Secuencias de ordenes o comandos que debe introducir el usuario. Insertar una secuencia de caracteres literales. <SAMP> </SAMP> Inserta una secuencia de caracteres literales pero ignora <XMP> </XMP> todas las etiquetas HTML de su interior. <STRONG> </STRONG> Aplica énfasis al texto (mayor énfasis que <EM>).. Define el nombre de una variable. <VAR> </VAR> Adquisición y Tratamiento de Datos 30 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 31 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. <B> </B> <I> </I> <TT> </TT> <U> </U> <SUB> </SUB> <SUP> </SUP> <BIG> </BIG> <SMALL> </SMALL> <BLINK> </BLINK> <S> </S> Adquisición y Tratamiento de Datos Explicación. Muestra el texto en negrita. Muestra el texto en itálica. Muestra el texto como una máquina de escribir. Subraya el texto marcado. Muestra el texto como un subíndice. Muestra el texto como un superíndice. Muestra el texto con un tamaño superior al por defecto. Muestra el texto con un tamaño inferior al por defecto. Muestra el texto parpadeante. Muestra el texto con una tachadura. 32 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 33 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 34 Introducción a HTML y Javascript Caracteres especiales (II) • Los principales mnemotécnicos son: Carácter < “ ó Ñ Código &lt; &quot; &oacute; &Ntilde; Carácter > á ú ® Código &gt; &aacute; &uacute; &reg; Carácter & é Á @ Código &amp; &eacute; &Aacute; &copy; Carácter # í ñ Espacio no divisible. Código &#35; &iacute; &ntilde; &nbsp; El carácter &nbsp; sirve para insertar un espacio pero que no pueda dividirse por ese punto el texto escrito. Adquisición y Tratamiento de Datos 35 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 36 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 37 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 38 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 39 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 40 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 41 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 42 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 43 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 44 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 SRC=”...” ALT=”...” ALIGN= ALIGN= HEIGHT= WIDTH= ISMAP USEMAP BORDER= HSPACE= VSPACE= Descripción Contiene la URL de la imagen a incluir. Este atributo es obligatorio. Asigna un texto descriptivo relacionado con la imagen. 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. 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. Informa al cliente web de la altura de la imagen a insertar. Informa al cliente web de la anchura de la imagen a insertar. Informa al cliente web de que esta imagen es un mapa activo. Informa al cliente web del archivo con el mapa activo de la imagen. Fija la anchura del borde que rodeará a la imagen. Un valor de 0 desactiva el borde. Fija la anchura horizontal de los márgenes de la imagen (en pixels). Fija la anchura vertical de los márgenes de la imagen (en pixels). Adquisición y Tratamiento de Datos 45 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árrafo se 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 46 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 47 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 48 Introducción a HTML y Javascript Tablas (III) Etiqueta <TABLE> Atributos BORDER= CELLPADDING= CELLSPACING= WIDTH= ALIGN= <CAPTION> ALIGN= <TR> ALIGN= VALING= <TD> ALIGN= VALIGN= COL SPAN= ROWSPAN= NOWRAP= WIDTH= <TH> Igual que <TD> . Adquisición y Tratamiento de Datos Descripción Fija el ancho del borde exterior de la tabla (en pixels). Fija la distancia (en pixels) entre el borde de la celda y su contenido. Fija la anchura (en pixels) de la líneas de división de la tabla. Controla la anchura horizontal de la tabla. Se puede especificar en pixels o en porcentaje. 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 Fija la posición del título con respecto a la tabla. Puede ser top o bottom. Especifica la alineación horizontal del texto en la fila, puede ser left, right o center. Especifica la alineación vertical del texto en la fila, pued e ser top, bottom, middle o baseline. Especifica la alineación horizontal del texto en la celda, puede ser left, right o center. Especifica la alineación vertical del texto en la celda, puede ser top, bottom, middle o baseline. Indica el número de columnas que ocupara esta celda. Indica el número de filas que ocupara esta celda. Obliga al cliente web a no romper las líneas de texto que contenga la celda. Determina el ancho de la celda. Se puede especificar como un ancho en pixels o en porcentaje. Igual que los atributos de <TD> . 49 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 50 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 51 Introducción a HTML y Javascript Tablas (VI) Adquisición y Tratamiento de Datos 52 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 53 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 54 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 55 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 56 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 57 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 58 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 59 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 60 Introducción a HTML y Javascript Marcos (IX) Adquisición y Tratamiento de Datos 61 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 ACTION METHOD NAME Descripción 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. 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). Permite especificar un nombre al formulario, es optativo. Adquisición y Tratamiento de Datos 62 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 63 Introducción a HTML y Javascript Formularios (III) • Los atributos de la etiqueta <INPUT> son: Atributos TYPE NAME Descripción Selecciona el tipo de campo de entrada. Es obligatorio 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 64 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 65 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:&nbsp; <INPUT TYPE="text" NAME="nombre" SIZE="10" MAXLENGTH="25"><BR> Primer apellido:&nbsp; <INPUT TYPE="text" NAME="apellido1" SIZE="10" MAXLENGTH="25"><BR> Segundo apellido:&nbsp; <INPUT TYPE="text" NAME="apellido2" SIZE="10" MAXLENGTH="25"><BR><BR> Curso:&nbsp;<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 66 Introducción a HTML y Javascript Formularios (VI) • Los atributos de la etiqueta <SELECT> son: Atributo NAME Descripción 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 67 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">&nbsp;&nbsp;&nbsp; <INPUT TYPE="reset" VALUE="Borrar"> </CENTER> </FORM> </BODY> </HTML> Adquisición y Tratamiento de Datos 68 Introducción a HTML y Javascript Formularios (VIII) Adquisición y Tratamiento de Datos 69 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 70 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">&nbsp;&nbsp;&nbsp; <INPUT TYPE="reset" VALUE="Borrar"> </CENTER> </FORM> </BODY> </HTML> Adquisición y Tratamiento de Datos 71 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 72 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-88591\">"); 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 73 Introducción a HTML y Javascript Formularios (XIII) Adquisición y Tratamiento de Datos 74 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 75 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 76 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 77 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 78 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 79 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 80 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 81 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 82 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 83 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 84 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 85 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 86 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"; else return "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 87 Introducción a HTML y Javascript Jerarquía de objetos (I) window anchor button navigator history location document frame applet area form image fileUpload checkbox option hidden Adquisición y Tratamiento de Datos link radio password plugin select reset text submit textarea 88 Introducción a HTML y Javascript Jerarquía de objetos (II) Objeto de Javascript window frame document form button checkbox hidden fileUpload password radio reset select submit text textarea Link Anchor Applet Image Plugin Area History location navigator Adquisición y Tratamiento de Datos Etiqueta HTML <FRAME> <BODY> <FORM> <INPUT TYPE="button"> <INPUT TYPE="checkbox"> <INPUT TYPE="hidden"> <INPUT TYPE="file"> <INPUT TYPE="password"> <INPUT TYPE="radio"> <INPUT TYPE="reset"> <SELECT> <INPUT TYPE="submit"> <INPUT TYPE="text"> <TEXTAREA> <A HREF=""> <A NAME=""> <APPLET> <IMG> <EMBED> <MAP> 89 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 90 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 91 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 92 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 93 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 94 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 95 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 96 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 97 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 98 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 99 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 100 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 101 Introducción a HTML y Javascript Los objetos button (IV) Adquisición y Tratamiento de Datos 102 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 103 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 104 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 105 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 106 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 107 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 108 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 109 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 110 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 111 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 112 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>"); else document.write("<P>"+c1+" es mayor o igual que "+c2+"<\/P>"); if (c1<c3) document.write("<P>"+c1+" es menor que "+c3+"<\/P>"); else document.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 113 Introducción a HTML y Javascript Strings (III) • Los strings poseen algunas funciones especiales que son: Función parseInt(string) Descripción 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 114 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 115 Introducción a HTML y Javascript Strings (V) Adquisición y Tratamiento de Datos 116 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 117 Introducción a HTML y Javascript Eventos (II) • Los eventos más comunes son: Evento onmousedown onmousemove onmouseup onclick ondblclick onmouseover onmouseout ondragstart onselectstart onselect onkeydown onkeypress onkeyup onblur onfocus onreset onsubmit onload onunload Descripción Se ha presionado (bajado) un botón del ratón. Se ha movido el puntero del ratón. Se ha levantado (subido) un botón del ratón. Se ha realizado una pulsación completa (subida y bajada) del botón izquierdo del ratón. Se ha realizado una pulsación doble sobre el botón izquierdo del ratón. El puntero del ratón se ha colocado sobre un elemento. El puntero del ratón ha abandonado un elemento. Se ha iniciado una operación de arrastre. Se ha iniciado una nueva selección empleando el ratón. Ha terminado una selección. Se ha presionado (bajado) una tecla. Se mantiene pulsada una tecla. Se ha dejado de presionar una tecla. Se ha abandonado el ámbito de un elemento. Se ha entrado en el ámbito de un elemento. Se ha inicializado un formulario. Se ha enviado un formulario. Se ha cargado una página. Se ha descargado una página. Adquisición y Tratamiento de Datos 118 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 119 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"; else if (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> Adquisición y Tratamiento de Datos 120
