html css javascript

PPáággiinnaass WWeebb

HTML

CSS

JAVASCRIPT

Ingº Roger E. Alarcón García

2006

PPáággiinnaass WWeebb

LENGUAJE HTML ........................................................................................................... 4

INTRODUCCIÓN ......................................................................................................... 4

¿QUE ES HMTL? .......................................................................................................... 4

ESTRUCTURA DE UNA PAGINA HTML................................................................... 5

¿CÓMO SE UTILIZAN LOS COLORES EN HTML?................................................... 7

TRABAJANDO CON TEXTO ...................................................................................... 8

ENCABEZADOS ...................................................................................................... 8

FORMATO DEL TEXTO .......................................................................................... 8

ETIQUETA FONT Y SUS PARÁMETROS .............................................................. 9

CARACTERES ESPECIALES ................................................................................ 10

CARACTERES DE CONTROL .............................................................................. 10

FORMATEO DE PARRAFOS................................................................................. 11

ETIQUETA BARRA HORIZONTAL ...................................................................... 12

ENLACES Y ANCLAS ............................................................................................... 12

ANCLAS DE REFERENCIA................................................................................... 13

ANCLAS NOMINALES .......................................................................................... 13

OBJETOS MULTIMEDIA .......................................................................................... 14

MANIPULACIÓN DE IMÁGENES ........................................................................ 14

MANIPULACIÓN DE AUDIO ............................................................................... 15

MANIPULACIÓN DE VIDEO ................................................................................ 16

MANIPULACIÓN DE TEXTO EN MOVIMIENTO ............................................... 17

MANIPULACION DE TABLAS ................................................................................. 18

MANIPULACION DE FRAMES(MARCOS).............................................................. 23

MANIPULACION DE FORMULARIOS .................................................................... 28

ESTRUCTURA DE UN FORMULARIO ................................................................ 28

OBJETOS DENTRO DEL FORMULARIO. ............................................................ 29

HOJAS DE ESTILO EN CASCADA ............................................................................... 33

INTRODUCCIÓN ....................................................................................................... 33

HOJAS DE ESTILO .................................................................................................... 33

ESTRUCTURA DE UNA HOJA DE ESTILOS ........................................................... 34

DEFINICIÓN DE HOJAS DE ESTILO EN FICHEROS EXTERNOS ........................ 36

REGLAS DE IMPORTANCIA EN LOS ESTILOS ..................................................... 37

ATRIBUTOS DE LAS HOJAS DE ESTILO ............................................................... 37

DEFINICIÓN DE ATRIBUTOS DE LAS HOJAS DE ESTILO .................................. 38

DEFINICION DE CLASES DE ESTILOS ................................................................... 41

CARACTERISTICAS AVANZADAS DE LAS CSS .................................................. 42

EFECTOS PARA FORMULARIOS ............................................................................ 44

CREANDO BORDES PUNTEADOS ...................................................................... 44

ESTILOS EN CAMPOS DE TEXTO ....................................................................... 45

JAVA SCRIPT ................................................................................................................ 47

INTRODUCCIÓN AL LENGUAJE JAVASCRIPT ..................................................... 47

JAVASCRIPT .............................................................................................................. 47

SINTAXIS JAVASCRIPT ........................................................................................... 48

CASE SENSITIVE .................................................................................................. 49

SEPARAR LÍNEAS DE CÓDIGO ........................................................................... 49

ESPACIOS EN BLANCO ........................................................................................ 49

BACKSLASH .......................................................................................................... 49

ABRIENDO Y CERRANDO GRUPOS ................................................................... 49

COMENTARIOS ..................................................................................................... 50

VARIABLES Y NOMBRES DE FUNCIONES ....................................................... 50

PALABRAS RESERVADAS .................................................................................. 50

PROGRAMACION BASICA ...................................................................................... 51

VARIABLES Y DATOS.......................................................................................... 51

TIPOS DE DATOS .................................................................................................. 52

OPERADORES ....................................................................................................... 53

OPERADORES ARITMÉTICOS ............................................................................. 53

OPERADORES BINARIOS .................................................................................... 54

OPERADORES RELACIONALES ......................................................................... 55

OPERADORES LÓGICOS ...................................................................................... 56

CONVERSIÓN EXPLÍCITA DE TIPOS ................................................................. 57

FUNCIONES GLOBALES ...................................................................................... 57

EXPRESIONES REGULARES ............................................................................... 58

SENTENCIAS DE CONTROL Y FLUJO.................................................................... 60

SENTENCIAS CONDICIONALES ......................................................................... 60

SELECCIÓN MÚLTIPLE ....................................................................................... 61

BUCLES ...................................................................................................................... 62

SENTENCIA WHILE .............................................................................................. 62

SENTENCIA DO...WHILE ..................................................................................... 62

SENTENCIA FOR ................................................................................................... 63

SENTENCIA FOR ... IN .......................................................................................... 63

RUPTURA DE BUCLES ......................................................................................... 63

OBJETOS .................................................................................................................... 64

ARRAYS ................................................................................................................. 64

OBJETO OBJECT ................................................................................................... 65

OBJETO STRING ................................................................................................... 67

OBJETO DATE ....................................................................................................... 76

OBJETO MATH ...................................................................................................... 84

Lenguaje HTML

Tópicos Internet

LLEENNGGUUAAJJEE HHTTMMLL

IINNTTRROODDUUCCCCIIÓÓNN

El World Wide Web (WWW) es un sistema que contiene una cantidad de información casi

infinita. Pero esta información debe estar ordenada de alguna forma de manera que sea

posible encontrar lo que se busca. La unidad básica donde está almacenada esta

información son las páginas Web. Estas páginas se caracterizan por contener texto,

imágenes, animaciones... e incluso sonido y video.

Una de las características más importantes de las páginas Web es que son hipertexto. Esto

quiere decir que las páginas no son elementos aislados, sino que están unidas a otras

mediante los links o enlaces hipertexto. Gracias a estos enlaces el navegante de Internet

puede pulsar sobre un texto de una página para navegar hasta otra página. Será cuestión del

programador de la página inicial decidir que palabras o frases serán las utilizadas para

enlazarse y a donde nos conducirá pulsar sobre ellas.

En algunos ambientes se discute que el World Wide Web ya no es un sistema hipertexto

sino hipermedia. Los que defienden el cambio se apoyan en que aunque en sus orígenes el

WWW constaba únicamente de texto en la actualidad es un sistema principalmente gráfico

y se puede hacer que las enlaces sean, no sólo texto, sino imágenes, videos, Botones,... en

definitiva cualquier elemento de una página.

¿¿QQUUEE EESS HHMMTTLL??

HTML es el acrónimo de HyperText Markup Language, esto quiere decir un Lenguaje de

Marcado de HiperTexto basado en etiquetas, el cual contiene enlaces que nos permiten

navegar entre los diferentes documentos y recursos web de nuestro u hacia otros servidores.

Los navegadores WWW leen estos archivos de texto e interpretan estas etiquetas para

determinar como desplegar la página Web.

Para utilizar etiquetas en HTML se deben encierran entre < y >, su estructura en la página

web es:

<NOMBRE_ETIQUETA>

o bien estas otras:

<NOMBRE_ETIQUETA> TEXTO </NOMBRE_ETIQUETA>

<NOMBRE_ETIQUETA atributo1=”valor1” atributo2=”valor2” .........> TEXTO

</NOMBRE_ETIQUETA>

La primera está formada por una sola instrucción, es decir, una sola etiqueta de apertura, en

cambio la segunda y tercera presentan una etiqueta de apertura y otra de cierre, todo el

texto escrito entre ambas es afectado por la etiqueta definida.

La tercera aún especifica ciertos atributos que se pueden manipular de la etiqueta como se

verá posteriormente, se tendría que agregar el nombre del atributo, el signo igual y su valor

correspondiente, y pueden ser varios atributos los que se especifiquen en una etiqueta.

Lenguaje HTML

Tópicos Internet

EESSTTRRUUCCTTUURRAA DDEE UUNNAA PPAAGGIINNAA HHTTMMLL

Básicamente consta de cuatro pares de etiquetas:

<HTML>

<HEAD>

<TITLE>Nuestra primera página</TITLE>

</HEAD>

<BODY>

..........................

..........................

..........................

</BODY>

</HTML>

Lo que visualizará nuestra página

<HTML> <HEAD>

<TITLE>

<BODY>

</TITLE> </HEAD>

</BODY>

</HTML>

Lenguaje HTML

Tópicos Internet

Ejemplo 1:

<HTML>

<HEAD>

<TITLE> USAT – Universidad Católica Santo Toribio de Mogrovejo</TITLE>

</HEAD>

<BODY>

Agregar imágenes, fondo y el menú de opciones.

</BODY>

</HTML>

Nota: Almacenar esta información con el nombre de ejemplo1.html o ejemplo1.htm

Etiqueta HTML

Esta etiqueta <HTML> y </HTML> especifican el inicio y el fin del documento web,

dentro de estas se incluyen todas las demás etiquetas necesarias para mostrar la información

que se requiera en la página.

Etiqueta HEAD

La etiqueta <HEAD> y </HEAD> especifican la cabecera de la página web, en la que se

incluye la etiqueta <TITLE> y </TITLE> para especificar el título de la página, pero

también se puede especificar otras etiquetas como por ejemplo <META> que permite

especificar palabras claves, fechas, autor, descripción, etc, que sirven para los buscadores.

Etiqueta BODY

La etiqueta <BODY> y </BODY> especifican el contenido de la página, el texto,

imágenes, y el formato visible al usuario se debe encontrar entre estas etiquetas.

Atributos de la etiqueta BODY

BGCOLOR=”#rrggbb” define el color del fondo de la página.

TEXT =”#rrggbb” define el color del texto de la página.

LINK=”#rrggbb” especifica el color de los enlaces o vínculos.

VLINK=”#rrggbb” especifica el color de los enlaces visitados.

ALINK=”#rrggbb” especifica el color de los enlaces al activarse.

BACKGROUND=”ruta\archivografico” especifica la imagen que será desplegado como

fondo.

BGSOUND=”ruta\archivosonido” especifica el archivo de audio que se escuchará en la

página.

BGPROPERTIES define el movimiento vertical del fondo.

Ejemplo 2:

<HTML>

<HEAD>

<TITLE>Atributos de Body</TITLE>

</HEAD>

Lenguaje HTML

Tópicos Internet

<BODY BGCOLOR=#00FFFF TEXT=#FF00FF LINK=#ff0000 VLINK=#00FF00

ALINK=#0000FF>

Este es un enlace <a href=”www.universia.edu.pe”>Pulsa aquí</a><br>

OTRO enlace <a href="http://www.usat.edu.pe">Pulsa aquí</a>

<BODY>

<HTML>

Esta página utiliza los atributos para la etiqueta BODY como son por ejemplo: se define el

color de fondo de la página como cyan (00FFFF), el color del texto como magenta

(FF00FF) y los colores de los enlaces.

¿¿CCÓÓMMOO SSEE UUTTIILLIIZZAANN LLOOSS CCOOLLOORREESS EENN HHTTMMLL??

Se pueden llegar a tener 16 millones de colores en una página web.

Existen dos formas para aplicar colores a una página web:

1. Se especifica el color deseado directamente con el nombre del color en ingles:

Ejemplo: blue, green, yellow.

2. Se especifica el color deseado mediante números hexadecimales mediante la

siguiente estructura:

#RRVVAA en inglés #rrggbb

El color tiene un signo de numeral # antecediendo a los 6 números.

Existen dos números para cada color principal: rojo, verde y azul.

Cada uno de los números varía hexadecimalmente {0,1,2....,9,A,B,...F}.

Ejemplos de Colores:

#RRVVAA Color #RRVVAA Color

#FFFFFF Blanco #000000 Negro

#FF0000 Rojo #00FF00 Verde

#0000FF Azul #FF00FF Magente

#00FFFF Cyan #FFFF00 Amarillo

#70DB93 Agua Marino #000080 Azul Marino

#FF7F00 Coral #A62A2A Café

#C0C0C0 Plomo #4F2F4F Violeta

Utilizando estos datos, haremos una página con fondo celeste y letras negras. Usaremos

para este efecto los atributos bgcolor y text. :

Ejemplo 3:

<HTML>

<HEAD> <TITLE>Curso de Lenguaje HTML</TITLE> </HEAD>

<BODY bgcolor=”#C0D9D9” text=”#000000” >

Bienvenidos al curso de Lenguaje HTML.

</BODY>

</HTML>

Lenguaje HTML

Tópicos Internet

TTRRAABBAAJJAANNDDOO CCOONN TTEEXXTTOO

ENCABEZADOS

Existen 6 diferentes niveles de encabezados:

<H1> </H1> Texto de mayor importancia (mas grande)

<H2> </H2> ....

<H3> </H3> ....

<H4> </H4> ....

<H5> </H5> ....

<H6> </H6> Texto de menor importancia (mas pequeño)

Ejemplo 4:

<HTML>

<HEAD>

<TITLE>Tratamiento de Texto</TITLE>

</HEAD>

<BODY>

<H1>TITULO DE LA PAGINA</H1><br>

<H2>SUBTITULO </H2><br>

<H3>NIVEL 3</H3><br>



<H6>Derechos Reservados</H6>

</BODY>

</HTML>

Esta página nos muestra los diferentes encabezados que se pueden definir en una página

HTML utilizando estas etiquetas.

FORMATO DEL TEXTO

<B> ..... </B> Negrita

<I> ..... </I> Cursiva

<U> …. </U> Subrayar

<S> .…. </S> Tachar

<SUP> … </SUP> Letra en superíndice

<SUB> ... </SUB> Letra en subíndice

<BIG> …. </BIG> Incrementa el tamaño del tipo de letra

<SMALL> … </SMALL> Disminuye el tamaño del tipo de letra

<BLINK> .... </BLINK> El texto parpadea. Solo en Netscape Navigator

Lenguaje HTML

Tópicos Internet

Ejemplo 5:

<HTML>

<HEAD>

<TITLE>Formato del Texto</TITLE>

</HEAD>

<BODY>

<B>TITULO DE LA PAGINA en negrita</B><br>

<I>SUBTITULO en cursiva </I><br>

<U>Texto subrayado</U><br>

<S>texto tachado</S><br>

Ecuaciones : <br>E=mc<SUP>2</SUP><br>

Química : H<SUB>2</SUB>O<br>

<BIG>Texto grande</BIG><br>

<SMALL>Texto pequeño</SMALL><br>

</BODY>

</HTML>

ETIQUETA FONT Y SUS PARÁMETROS

<FONT COLOR=”valor” FACE=”valor” SIZE=”valor”> ….... </FONT>

Manipula una o más características de un carácter o párrafo (obligatoriamente se debe

colocar un parámetro).

COLOR .- Especifica el color del texto que se puede escribir o reflejar en código

hexadecimal.

FACE .- Indica el tipo de fuente (tipo de letra)

SIZE .- Especifica el tamaño de la fuente dado en puntos.

Ejemplo:

<FONT COLOR=”#FF0000” FACE=”arial” SIZE =”2”>

Este texto aparecerá de color Rojo con letra Arial y de tamaño 2. </FONT>

Ejemplo 6:

<HTML>

<HEAD>


</HEAD>

<BODY TEXT="#0000ff">


<FONT COLOR="#FF0000" FACE="arial" SIZE ="2">

Este texto aparecerá de color Rojo con letra Arial y de tamaño 2. </FONT>

</BODY>

</HTML>

NOTA.- Si se desea se pueden especificar varios tipos de letras separadas por comas.

<FONT COLOR="#FF0000" FACE="arial,verdana" SIZE ="2">

Lenguaje HTML

Tópicos Internet

CARACTERES ESPECIALES

Estos caracteres especiales corresponden a los códigos de la tabla ASCII. Para la utilización

de estos caracteres se utiliza la forma siguiente:

&#valor;

el valor corresponde a un número superior a 127.

½ corresponde al (1/2), pero existen sinónimos como por ejemplo ½

Código Resultado

á é í ó ú

Á É Í Ó Ú

á é í ó ú

Á É Í Ó Ú

ñ Ñ ñ Ñ

¿ ¿

¡ ¡

º º

ª ª © ©

® ®

Espacio en blanco

CARACTERES DE CONTROL

Son caracteres especiales que se utilizan en el lenguaje HTML para formar las etiquetas, si

se necesitan se debe usar los siguientes códigos.

Código Resultado

< <

&lg; >

& &

" “

Ejemplo 7:

<HTML>

<HEAD>


</HEAD>



<FONT COLOR="#FF0000" FACE="arial" SIZE ="2">

Este texto aparecerá de color Rojo con letra Arial y de tamaño 2. </FONT><br>

½<br>

½<br>

á é í ó ú<br>

Lenguaje HTML

Tópicos Internet

Á É Í Ó Ú<br>

ñ Ñ<br>

¿<br>

¡<br>

º<br>

ª<br>

©<br>

®<br>

CARACTERES ESPECIALES<br>

El signo menor ---- <<br>

El signo mayor ---- ><br>

El asperson ---- &<br>

La comilla ---- "<br>

</BODY>

</HTML>

FORMATEO DE PARRAFOS

<P ALIGN=”valor” > .... </P>

Esta etiqueta permite delimitar un párrafo, permitiendo alinear siendo sus valores: LEFT,

RIGHT, CENTER, JUSTIFY. Insertar una línea en blanco antes del texto, no requiere

etiqueta de cierre ni parámetros.

<CENTER> .... </CENTER>

Permite centrar todo el texto del párrafo.

<PRE WIDTH=”valor”> ….. </PRE>

Esta etiqueta es útil para representar código fuente. El parámetro WIDTH especifica el

número máximo de caracteres en una línea.

<DIV ALIGN=”valor”> ... </DIV>

Permite alinear el texto del párrafo, toma los mismos valores que la etiqueta <P>, pero no

inserta ninguna línea antes de él.

Ejemplo 8:

<HTML>

<HEAD>


</HEAD>


Esto es un párrafo <P align="LEFT">Permite cambiar las características de un conjunto de

líneas escrito en código HTML. Para esto se debe conocer etiquetas y parámetros, los

cuales no siempre son obligatorios, pero que permiten cambiar apariencias.</P>

Este texto esta justificado <P align="JUSTIFY">Permite cambiar las características de un

conjunto de líneas escrito en código HTML. Para esto se debe conocer etiquetas y

parámetros, los cuales no siempre son obligatorios, pero que permiten cambiar

apariencias.</P>

Lenguaje HTML

Tópicos Internet

<PRE>El código <B><CENTER>Lenguaje HTML</CENTER></B>muestra el texto en

negrita, al centro y tal como está escrito</PRE>

<DIV align="Justify">Este texto aparecerá justificado a ambos lados, izquierda y

derecha.</DIV>

<DIV align="RIGHT">Este texto aparecerá justificado a ambos lados, izquierda y derecha.

Este nuevo texto no está separado del anterior por un espacio.</DIV>

</BODY>

</HTML>

ETIQUETA BARRA HORIZONTAL

<HR NOSHADE ALIGN=”valor” WIDTH=”valor” SIZE=”valor”>

Permite insertar una barra horizontal.

NOSHADE especifica una línea sólida.

ALIGN permite alinear la barra tomando los mismos valores que la etiqueta <P>

WIDTH modifica el ancho, puede ser en porcentaje o en píxel.

SIZE especifica el grosor, dado en píxel.

Ejemplo:

- <hr noshade>

- <hr align="right" width=70%>

Ejemplo 9:

<HTML>

<HEAD>

<TITLE>Barras Horizontales </TITLE>

</HEAD>

<BODY bgcolor="#C0D9D9" text="#000000">

<hr align=”center” width=50%><br>

<hr align=”left” width=25% size=5><br>

<hr align=”right” width=90%><br>

<hr align=”center” width=280 size=7><br>

</BODY>

</HTML>

EENNLLAACCEESS YY AANNCCLLAASS

Una de las propiedades mas interesantes del Lenguaje HTML es la capacidad de incorporar

enlaces hipertexto, permitiendo que los diferentes objetos de la página: texto, imágenes y

otros estén enlazados con otros documentos u objetos multimedia relacionados. El objeto

que constituye el enlace es resaltado por el navegador utilizando otro color al original y

subrayado.

Los enlaces hipertexto se incorporan en el documento HTML por medio de unas

construcciones llamadas “anclas”, de los cuales existen dos tipos:

- Anclas de referencia.- Contienen la referencia del destino del enlace hipertexto.

- Anclas nominales.- Son utilizados para definir puntos específicos de un documento

que pueden ser referenciados usando anclas de referencia.

Lenguaje HTML

Tópicos Internet

ANCLAS DE REFERENCIA.

Mediante las etiquetas <A> y </A> podemos indicar que una frase o texto o una imagen es

un enlace a otro punto. Debemos indicar el destino del enlace formando parte del código de

inicio de la etiqueta, es decir:

<A HREF=”nombrearchivo”>Texto que permite ir al enlace</A>

Por ejemplo:

<A HREF=”capitulo1/pagina.html”>Ir al capitulo 1</A>

ANCLAS NOMINALES

Especifican puntos de un documento a los que podemos hacer referencia usando enlaces

hipertexto. Su función es asignar un nombre o etiqueta al punto donde se encuentran según

la metodología que sigue:

<A NAME=”ETIQUETA”> Texto destino de otros enlaces </A>

Para hacer referencia ahora a este punto al que se le ha asignado una etiqueta mediante un

ancla nominal, utilizamos un ancla de referencia con la siguiente sintaxis:

<A HREF=”#ETIQUETA”>Texto del enlace</A>

Incluso podemos hacer referencia a un ancla nominal de otro documento.

<A HREF=”documento1.html#etiqueta1”>Texto de enlace</A>

URLS

Podemos incluir enlaces a otros documentos de otros servidores de la red, para ello

utilizamos una notación especial: URL la cual tiene la siguiente sintaxis:

servicio://nombre_servidor[:puerto]/ruta_acceso/nombrearchivo

Servicio: Especifica el tipo de servicio utilizado, los cuales son http, frp, news, gopher,

wais y telnet.

Puerto.- el puerto estándar es el 80, si un servidor tiene otro distinto, hay que indicarlo.

Ejemplo:

<A HREF=”http://www.usat.edu.pe”>USAT</A>

Es posible tener un enlace hipertexto que activará el programa de correo electrónico para

enviar un mensaje a un usuario determinado.

<A HREF=”mailto:[email protected]”>Contáctenos Cómputo</A>

Lenguaje HTML

Tópicos Internet

OOBBJJEETTOOSS MMUULLTTIIMMEEDDIIAA

MANIPULACIÓN DE IMÁGENES

Los formatos estándar de imágenes soportados por la web son:

JPG (Joint Photograhic Experts Group)

GIF (Graphic Interchange Format)

PNG (Portable Network Graphic)

Los formatos JPG permiten almacenar imágenes con una calidad de hasta 16.7 millones de

colores, mientras que los formatos GIF pueden manipular hasta 256 colores, siendo este

muy bueno para comprimir áreas monocolor.

En cuanto al tamaño es recomendable que el peso estándar de una imagen debe ser menor o

igual a 10 Kb. Existen varias maneras de minimizar el tamaño de los archivos de imagen, la

primera sería reducir el tamaño de la imagen mediante el uso de software gráfico, la

segunda incluiría la reducción del número de colores utilizados. Como referencia se debe

lograr trabajar con imágenes que no sobrepasen los 100 Kb.

Etiqueta para insertar imágenes y sus respectivos atributos

<IMG SRC=”archivográfico”>

Atributos

Dimensionamiento de imágenes utilizando los atributos WIDTH(ancho) y HEIGHT

(alto), sus valores pueden ser representados en pixeles o en porcentaje.

Ejemplo :

<HTML>

<HEAD>

<TITLE>Manipulación de Imágenes</TITLE>

</HEAD>

<BODY>

<img src="pescados.jpg" width="150">

</BODY>

</HTML>

Alineación del texto que lo acompaña. ALIGN tiene los siguientes valores

- Top.- Coloca el punto más alto de la imagen coincidiendo con lo más alto de

la línea de texto actual.

- Middle.- Alinea el punto medio(en altura de la imagen con la base del texto.

- Bottom.- Alinea el punto más bajo de la imagen con la base del texto, es el

valor por defecto.

- Left.- Coloca la imagen a la izquierda del texto.

- Right.- Colocal la imagen a la derecha del texto.

Lenguaje HTML

Tópicos Internet

Se puede ingresar una descripción breve o frase indicativa de la imagen, esta se

mostrará en caso la imagen no se visualice en el navegador. El parámetro es ALT.

<img src="pescados.jpg" alt=”Imagen de pescados”>

Borde de la imagen utilizando para esto el parámetro BORDER, por defecto el valor

es 0, se puede modificar el valor para variar el grosor en píxeles.

<img src="pescados.jpg" border=”1”>

Existe la posibilidad de definir un marco transparente tanto horizontal como vertical

que rodea la imagen con el fin de separarla del texto circundante.

Ejemplo

<HTML>

<HEAD>

<TITLE>Manipulación de Imágenes</TITLE>

</HEAD>

<BODY>

<img src="pescados.jpg" align="Top">Este texto aparece en la parte superior<br><br>

<img src="pescados.jpg" align="Middle">Este texto aparece en la parte

central<br><br>

<img src="pescados.jpg" align="Bottom">Este texto aparece en la parte inferior de la

imagen<br><br>

<img src="pescados.jpg" align="left">Este texto aparece a la izquierda de la

imagen<br><br><br><br><br><br><br>

<img src="pescados.jpg" align="right">Este texto aparece a la derecha de la

imagen<br><br><br><br><br><br><br>

<img src="pescados.jpg" align="Texto alternativo Pescados">Aqui no aparece el texto

alternativo debido a que la imagen si se está mostrando en el

navegador.<br><br><br><br><br><br>

Esta es una imagen <img src="pescados.jpg" hspace="20" vspace="10" align="left">

referente a la vida marina.<br><br>

</BODY>

</HTML>

MANIPULACIÓN DE AUDIO

Se puede incorporar sonido a una página web, siendo posible que se ejecute

automáticamente como fondo sonoro de la página, o como una opción para que el usuario

lo active. Los archivos de sonidos pueden ser de tipo mid, wav o mp3.

Lenguaje HTML

Tópicos Internet

Fondo sonoro para Internet Explorer

<BGSOUND SRC=”Archivo_de_Audio” LOOP=n>

El atributo LOOP especifica el número de veces que se debe ejecutar el archivo de sonido.

Si desea que el sonido se ejecute indefinidamente debe colocar el valor de LOOP a –1 o

infinite. Si se omite este atributo el archivo solo se escuchará una sola vez.

Ejemplo:

<HTML>

<HEAD>

<TITLE>Manipulación de Sonidos</TITLE>

</HEAD>

<BODY>

<bgsound src="sonido.mid" loop=1>

</BODY>

</HTML>

Fondo sonoro para Netscape

<EMBED SRC=”Archivo_de_Audio” WIDTH=x HEIGHT=y>

Donde WIDTH y HEIGHT corresponden al ancho y alto de la consola que aparece, y que

tiene diferentes teclas como por ejemplo play, stop, pausa, etc.

Se pueden utilizar los siguientes atributos adicionales:

AUTOSTART =”true” ejecuta automáticamente

LOOP=”true” ejecuta ininterrumpidamente

HIDDEN=”true” crea una consola invisible

Ejemplo:

<embed src=”sonido.mid” width=”200” height=”55” autostart=”true” loop=”true”

hidden=”true”>

MANIPULACIÓN DE VIDEO

Para poder insertar secuencias de video en una página se puede utilizar la etiqueta <IMG>,

con los siguientes parámetros:

<IMG dynsrc=”archivo_de_video”>

Las extensiones generales para video son: avi, ram, mov, mpeg.

Parámetros adicionales:

CONTROLS.- que especifica si se desean agregar los controles al video.

<IMG dynsrc=”video.avi” CONTROLS>

Lenguaje HTML

Tópicos Internet

LOOP.- para indicar el número de veces que se visualiza.

<IMG dynsrc=”video.avi” LOOP=2>

Otra forma es utilizar la opción de colocar un enlace a un archivo de video, de esta manera,

el usuario al pulsarlo lo ejecutará.

<a ref.=”video.avi”> Clic aquí para Ver</A>

Ejemplo:

<HTML>

<HEAD>

<TITLE>Manipulación de Videos</TITLE>

</HEAD>

<BODY>

<IMG dynsrc="video.avi">

</BODY>

</HTML>

MANIPULACIÓN DE TEXTO EN MOVIMIENTO

Existen distintas soluciones para conseguir texto en movimiento haciendo uso del lenguaje

HTML (las marquesinas) con GIF animados, con JavaScript, etc.

Marquesinas

Es una ventana en la que se desplaza un texto. Solo son válidas para Internet Explorer.

<MARQUEE>Texto que se desplaza</MARQUEE>

Atributos adicionales:

- WIDHT y HEIGHT.- Ajustan el ancho y el alto, puede ser igual a un numero de

pixels o utilizar porcentajes.

- ALIGN.- Modifica la alineación del texto que lo rodea, puede ser TOP, MIDDLE o

BOTTOM.

- BEHAVIOR.- Sirve para definir de que manera se va a efectuar el desplazamiento

del texto, los valores son:

SCROLL.- Por defecto. Aparece en un lado y se desplaza hacia el

otro lado.

SLIDE.- Aparece por un lado y se desplaza hasta llegar al otro

extremo, y se detiene.

ALTERNATE.- Desplaza alternadamente hacia un lado y otro,

siempre dentro de los límites de la marquesina.

- BGCOLOR.- Se modifica el color de fondo de la marquesina.

- DIRECTION.- Modifica la dirección hacia la que se dirige el texto. Puede ser LEFT

o RIGHT.

Lenguaje HTML

Tópicos Internet

- SCROLLAMOUNT.- Define la cantidad de desplazamiento del texto en cada

movimiento de avance, expresado en píxeles. Cuanto mayor es el número, más

rápido avanza.

- SCROLLDELAY.- Define el tiempo entre cada movimiento de avance. Está

expresado en milisegundos. Cuanto mayor es el número más lento avanza.

- LOOP.- Especifica el número de veces que aparecerá el texto. Es indefinido por

defecto.

Ejemplo

<HTML>

<HEAD>

<TITLE>Manipulación de Marquesinas</TITLE>

</HEAD>

<BODY>

<marquee>Marquesina normal</marquee><br><br><br><br>

<marquee widht="20%" height="20%" bgcolor=blue>Marquesina con alto y ancho

definidos</marquee><br><br><br><br>

<marquee behavior="alternate">Marquesina</marquee><br><br><br><br>

<marquee DIRECTION="right">Marquesina que empieza en la

izquierda</marquee><br><br><br><br>

<marquee scrolldelay=200>Marquesina</marquee><br><br><br><br>

<marquee loop="2">Marquesina que se desplaza solo dos

veces</marquee><br><br><br><br>

</BODY>

</HTML>

MMAANNIIPPUULLAACCIIOONN DDEE TTAABBLLAASS

Una tabla es una estructura en forma de matriz, es decir, costa de filas y de columnas, cuya

intersección se le denomina celda; que permite representar cualquier elemento de la página

(texto, listas, imágenes, etc). Es una herramienta muy útil para organizar contenidos.

Estructura de una Tabla

<TABLE> <!- Define a la Tabla ->

<TR> <!- Define una fila ->

<TD>fila1 – celda1 </TD> <!- Define una columna ->

<TD>fila1 – celda2 </TD>


</TR>

<TR> <!- Define una nueva fila ->

<TD>fila2 – celda1 </TD> <!- Define una columna ->



</TR>

</TABLE>

Lenguaje HTML

Tópicos Internet

Ejemplo:

<HTML>

<HEAD>

<TITLE>Manipulación de Tablas</TITLE>

</HEAD>

<BODY>

<TABLE>

<TR>

<TD>Cena </TD>

<TD>Bebidas </TD>

<TD>Dulces </TD>

</TR>

<TR>

<TD>A </TD>

<TD>B </TD>

<TD>C </TD>

</TR>

</TABLE>

</BODY>

</HTML>

Atributos

BORDER.- Especifica el grosor del borde que se dibujará alrededor de las celdas.

Por defecto es 0, lo que significa que no dibujará borde alguno.

CELLSPACING.- Define el número de pixels que separarán las celdas.

CELLPADDING.- Define el número de pixels que habrá entre el borde de una celda

y su contenido.

WIDTH.- Especifica la anchura de la tabla. Puede estar tanto en pixels como en

porcentaje (100% equivale a toda la anchura de la ventana).

HEIGHT.- Especifica el alto de la tabla.

ALIGN.- Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o centro (CENTER)

BGCOLOR.- Es código de color o nombre constante que indica el color de fondo de

todas las celdas de la tabla. Si no se indica la tabal se torna transparente.

BACKGROUND.- Especifica un URL(referencia relativo) de un archivo de

imagen, que se colocará como fondo de la tabla.

Ejemplo:

<HTML>

<HEAD>


</HEAD>

<BODY>

<TABLE border="2" width="50%" align="center" cellspacing="5" cellpadding="10"

bgcolor="blue">

Lenguaje HTML

Tópicos Internet

<TR>

<TD>Cena </TD>

<TD>Bebidas </TD>

<TD>Dulces </TD>

</TR>

<TR>

<TD>A </TD>

<TD>B </TD>

<TD>C </TD>

</TR>

</TABLE>

</BODY>

</HTML>

Atributos que se pueden asignar a una Fila (TR)

ALIGN.- Alinea el contenido de las celdas de la columna horizontalmente a la

izquierda(LEFT), derecha (RIGHT) o al centro (CENTER)

VALIGN.- Alinea el contenido de las celdas de la columna verticalmente

arriba(TOP), abajo (BOTTOM) o al centro (MIDDLE)

BGCOLOR.- Especifica un código de color o nombre constante que indica el color

de fondo de todas las celdas de una fila especifica.

Ejemplo:

<HTML>

<HEAD>


</HEAD>

<BODY>

<TABLE border="2" width="50%" align="center">

<TR align="center" bgcolor="#00ff00">

<TD>Cena </TD>

<TD>Bebidas </TD>

<TD>Dulces </TD>

</TR>

<TR>

<TD>A </TD>

<TD>B </TD>

<TD>C </TD>

</TR>

</TABLE>

</BODY>

</HTML>

Atributos que se pueden asignar a una Celda (TD)

Lenguaje HTML

Tópicos Internet

ALIGN.- Alinea el contenido de las celdas de la columna horizontalmente a la

izquierda(LEFT), derecha (RIGHT) o al centro (CENTER)

VALIGN.- Alinea el contenido de las celdas de la columna verticalmente

arriba(TOP), abajo (BOTTOM) o al centro (MIDDLE)

WIDTH.- Especifica la anchura de la celda con respecto a la anchura de la tabla.

También se puede especificar tanto en pixels como en porcentaje.

COLSPAN.- Especifica el número de celdas de la fila situadas a la derecha de la

actual que se unen a esta (incluyendo la celda en la que se declara este parámetro).

Es por defecto uno. Si se pone igual a 0, se unirán todas las celdas que quedan a la

derecha.

ROWSPAN.-Especifica el número de celdas de la columna situadas debajo de la

actual que se unen a ésta.

BGCOLOR.- Especifica un código de color o nombre constante que indica el color

de fondo de una celda específica.

Ejemplo:

<HTML>

<HEAD>


</HEAD>

<BODY>


<TR>

<TD COLSPAN="3" ALIGN="center" BGCOLOR="#0099cc">

<FONT COLOR="#FFFFFF">COMIDAS</FONT>

</TD>

</TR>

<TR align="center">

<TD>Cena </TD>

<TD>Bebidas </TD>

<TD>Dulces </TD>

</TR>

<TR>

<TD>A </TD>

<TD>B </TD>

<TD>C </TD>

</TR>

</TABLE>

</BODY>

</HTML>

Lenguaje HTML

Tópicos Internet

Ejemplo:

<HTML>

<HEAD>


</HEAD>

<BODY>


<TR>

<TD> </TD>

<TD COLSPAN="3" ALIGN="center" BGCOLOR="#0099cc">

<FONT COLOR="#FFFFFF">COMIDAS</FONT>

</TD>

</TR>

<TR align="center">

<TD ROWSPAN="2" VALIGN="bottom">Tipos</TD>

<TD>Cena </TD>

<TD>Bebidas </TD>

<TD>Dulces </TD>

</TR>

<TR>

<TD>A </TD>

<TD>B </TD>

<TD>C </TD>

</TR>

</TABLE>

</BODY>

</HTML>

Existe un parámetro que permite definir el titulo de la tabla y es: <CAPTION>

<HTML>

<HEAD>


</HEAD>

<BODY>

<TABLE>

<CAPTION>Ejemplo de Tabla</CAPTION>

<TR>

<TD>Cena </TD>

<TD>Bebidas </TD>

<TD>Dulces </TD>

</TR>

<TR>

<TD>A </TD>

<TD>B </TD>

<TD>C </TD>

</TR>

</TABLE>

Lenguaje HTML

Tópicos Internet

</BODY>

</HTML>

Ejemplo completo:

<HTML>

<HEAD>


</HEAD>

<BODY>

<TABLE border="2" width="80%" bgcolor="#0000cc">

<CAPTION>Ejemplo de Tabla</CAPTION>

<TR>

<TD width="25%"><CENTER>

<TABLE BORDER="1" HEIGHT="90%" WIDTH="90%">

<TR>

<TD ALIGN="CENTER"><FONT COLOR="#FFFF00"

SIZE="5">I+D</FONT><BR></TD>

</TR>

<TR>

<TD ALIGN="CENTER"><FONT COLOR="#FFFF00" SIZE="2">Investigación

<BR> & Desarrollo</FONT></TD>

</TR>

</TABLE>

</CENTER>

</TD>

<TD WIDTH="75%"><CENTER>

<FONT COLOR="#FF9900"><B>Francisco José Rodríguez Valero<BR>Re-Ingeniería a

su alcance<BR>

</FONT>

<HR>

<TABLE>

<TR>

<TD><img src="imagenes/email1.gif"></TD>

<TD><B><A href="mailto:[email protected]">[email protected]</A></B></TD>

</TR>

</TABLE></CENTER>

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

MMAANNIIPPUULLAACCIIOONN DDEE FFRRAAMMEESS ((MMAARRCCOOSS))

Los frames es una técnica del lenguaje HTML que consiste en dividir la pantalla del

navegador en diferentes zonas o ventanas, las cuales pueden actuar y ser manipuladas

independientemente unas de otras.

Lenguaje HTML

Tópicos Internet

Una de las características más importantes es que pulsando un enlace situado en un frame,

se puede cargar en otro frame una página determinada.

Estructura de un Frame

Los frames cambian la estructura de la página HTML tradicional, eliminando la parte del

cuerpo (BODY) y sustituyéndola por el código <FRAMESET>. Así todos los códigos que

antes aparecían dentro del cuerpo aparecerán dentro del código <FRAMESET>. La

estructura típica a utilizar será.

<HTML>

<HEAD>

<TITLE>Título de la Ventana</TITLE>

</HEAD>

<FRAMESET> <!- Aquí se define el marco principal ->

</FRAMESET>

</HTML>

Atributos de la etiqueta FRAMESET

FRAMEBORDER.- especifica el borde.

FRAMESPACING.- Especifica el espaciado entre marcos.

ROWS.- Especifica las divisiones de la ventana principal en filas.

COLS.- Especifica las divisiones de la ventana principal en columnas.

Los valores utilizados para especificar el tamaño de cada una de ellas es:

Porcentaje.- Expresado en porcentaje como por ejemplo las tablas, 20%, 50%, etc.

Absolutos.- Expresado en pixels.

Sobre el espacio sobrante.- Se utiliza para esto el * , indicando que lo que sobra en

ese espacio se lo asigne al frame.

Los valores se pueden ingresar separadas por comas.

Ejemplos:

<FRAMESET rows=”25%,50%,25%”>, esto crea tres sub ventanas horizontales, la primera

ocupará un 25% de la ventana principal, la segunda un 50% y la tercera 25% siempre de la

ventana principal.

<FRAMESET cols=”120,*,100”>, esto crea tres sub ventanas verticales, la primera y la

tercera tendrán un ancho fijo de 120 y 100 respectivamente, la segunda (*) ocupará el resto

de la ventana principal.

<FRAMESET cols=”10%,*,200,2*”>, esto crea cuatro sub ventanas verticales, la primera

ocupará un 10% de la ventana principal, la tercera necesita 200 píxeles, la cuarta debe tener

el doble de espacio que la segunda, teniendo en cuenta como referencia el espacio sobrante.

Lenguaje HTML

Tópicos Internet

Etiqueta FRAME

Esta etiqueta indica las propiedades de cada sub ventana. Es necesario indicar una etiqueta

<FRAME> para cada sub ventana creada. Los parámetros de <FRAME> son:

NAME.- Asigna un nombre a un frame para que después podamos referirnos a él.

SRC.- Indica la dirección del documento HTML que ocupará el frame.

SCROLLING.- Decide si se colocan o no barras de desplazamiento al frame para

que podamos movernos por su contenido. Su valor por defecto es AUTO, que deja

al navegador la decisión. Las otras opciones son YES o NO.

NORESIZE.- Este atributo no permite que el usuario cambie el tamaño del frame.

FRAMEBORDER.- Si se iguala a cero se eliminará el borde.

MARGINWIDTH.- Permite cambiar los márgenes horizontales dentro de un marco.

Se representa en píxels.

MARGINHEIGHT.- Permite cambiar los márgenes verticales dentro de un marco.

Se representa en píxels

Si su navegador no reconoce los frameset y frame no se mostrará información de su página,

por esto se incluyen las etiquetas <NOFRAMES> y </NOFRAMES>, creando un

contenido alternativo que se visualizará en la página.

Ejemplo: Crea el archivo con el nombre de index.html

<HTML>

<HEAD>

<TITLE>Manipulación de Marcos o Frames</TITLE>

</HEAD>

<FRAMESET ROWS="15%,*,15%">

<!- Crea tres sub ventanas horizontales ->

<FRAME NAME="SUPERIOR" src="titulo.html" scrolling="no" noresize>

<FRAME NAME="CENTRO" src="contenido.html" noresize

marginwidth="20" marginheight="20">

<FRAME NAME="INFERIOR" src="menu.html" crolling="no">

<NOFRAMES>

<BODY>

Su navegador no muestra frames. Pulse <a href="menu.html">AQUI</A> par ir a la

página sin frames.

</BODY>

</NOFRAMES>

</FRAMESET>

</HTML>

El resultado de este código en el navegador es mostrar las tres zonas creadas pero en cada

uno de ellos aparecerá que no se puede mostrar la página. Esto implica que se debe crear

las páginas mencionadas en el contenido de esta archivo las cuales son: titulo.html,

contenido.html y menu.html.

Lenguaje HTML

Tópicos Internet

Archivo: titulo.html

<HTML>

<HEAD>

<TITLE>Titulo</TITLE>

</HEAD>

<BODY>

<CENTER><H1><B>TITULO DE LA PAGINA PRINCIPAL</H1></B></CENTER>

</BODY>

</HTML>

Archivo: contenido.html

<HTML>

<HEAD>

<TITLE>Contenido</TITLE>

</HEAD>

<BODY>

Este es el contenido de la página

</BODY>

</HTML>

Archivo: menu.html

<HTML>

<HEAD>

<TITLE>Menu</TITLE>

</HEAD>

<BODY>

<table>

<tr>

<td>Opción 1 </td>

<td>Opción 2 </td>

<td>Opción 3 </td>

<td>Opción 4 </td>

<td>Opción 5 </td>

</tr>

</table>

</BODY>

</HTML>

Presentación de información

Por defecto, cuando se pulsa un enlace situado dentro de un frame, la nueva página a la que

se desea acceder se presenta en ese mismo frame, sin embargo, es posible que se desee que

esto no ocurra. Pro ejemplo, si se tiene un frame que sirve de índice y otro donde se

muestra los contenidos, sería deseable que los enlaces del frame índice se abrieran en el

otro frame. Esto es posible mediante a utilización del parámetro TARGET.

Lenguaje HTML

Tópicos Internet

Este parámetro se puede colocar en tres etiquetas: <A>, <AREA> y <BASE>.

Este parámetro tiene los siguientes valores:

TARGET=”nombre_ventana”.- Muestra la nueva página en la ventana (frame) cuyo

nombre se indica.

TARGET=”_top”.- Elimina todos los marcos existentes y muestra la nueva página

en la ventana original sin marcos.

TARGET=”_blank”.- Carga la página en una nueva ventana.

TARGET=”_self”.- Muestra la nueva página en el marco donde está declarado el

enlace.

TARGET=”_parent”.- El enlace se muestra en el <FRAMESET> definido

anteriormente al actual. Si no hay ningún <FRAMESET> anterior se muestra a

pantalla completa suprimiendo todas las sub ventanas de la pantalla.

Ejemplo: Modificando el archivo menu.html

<HTML>

<HEAD>

<TITLE>Menu</TITLE>

</HEAD>

<BODY>

<table>

<tr>

<td><a href="http:/www.microsoft.com" target="_blank">Microsoft</a></td>

<td><a href="reseña.html" target="CENTRO">Reseña</a></td>

<td><a href="http:/www.usat.edu.pe" target="_top">Pagina Usat</a></td>

<td>Opción 4</td>

<td>Opción 5</td>

</tr>

</table>

</BODY>

</HTML>

Implementación de Frame Anidados.

La etiqueta <FRAMESET> puede ser utilizada en forma anidada con el objeto de

subdividir una subdivisión. Esto se realiza colocando otro <FRAMESET> donde

normalmente colocamos las etiquetas <FRAME>, del siguiente modo:

Ejemplo:

<HTML>

<HEAD>

<TITLE>Manipulación de Marcos o Frames ANIDADOS</TITLE>

</HEAD>

<FRAMESET COLS="25%,*">

<!- Crea dos sub ventanas verticales ->

<FRAME NAME="INDICE" src="indice.html">

<FRAMESET ROWS="*,60">

Lenguaje HTML

Tópicos Internet

<FRAME NAME="PRINCIPAL" src="contenido.html">

<FRAME NAME="EJEMPLOS" src="enlaces.html">

</FRAMESET>

<NOFRAMES>

<BODY>

Su navegador no muestra frames. Pulse <a href="menu.html">AQUI</A> par ir a la

página sin frames.

</BODY>

</NOFRAMES>

</FRAMESET>

</HTML>

MMAANNIIPPUULLAACCIIOONN DDEE FFOORRMMUULLAARRIIOOSS

La habilidad de interactuar con los usuarios es una de las principales características de los

ordenadores y las redes informáticas. La posibilidad de realizar preguntas y recibir

respuestas es una de las formas fundamentales de conseguir esta interactividad y el lenguaje

HTML proporciona la habilidad de crear formularios e insertar cajas de texto, botones de

opción y otros controles que nos permitirán aprovechar esa posibilidad de interactividad en

nuestras páginas Web.

El lenguaje HTML consta de una serie de etiquetas que permitirán crear de forma rápida y

sencilla numerosos elementos de entrada de datos. Estos elementos, que reciben el nombre

de controles, serán gráficos en la mayoría de navegadores. Un formulario no es más que un

conjunto de estos controles cuya información será enviada conjuntamente cuando el usuario

pulse sobre el botón de envío.

ESTRUCTURA DE UN FORMULARIO

Las etiqueta que permiten la creación de un formulario son <FORM> ... </FORM>,

acompañados de atributos especiales.

<FORM ACTION=”” METHOD=”” ENCTYPE=”text/plain” NAME=”identificación”>

…. Cuerpo del formulario

…. Botones de envío y de borrado.

</FORM>

Parámetros

ACTION.- Indica la acción que se debe efectuar. Esta puede ser, que los datos sean

enviados por email a una dirección indicada como por ejemplo:

ACTION=”mailto:dirección de email”

O también, se puede indicar el URL de un programa(CGI) que se encargará de tratar

los datos del formulario, que debe encontrarse en el servidor y estar escrito en algún

lenguaje de programación.

METHOD.- Especifica el método usado para el envío de los datos. Con POST envía

datos en la entrada estándar del programa que trata el formulario y con GET los

mailto:direcci�n%20de%20email

Lenguaje HTML

Tópicos Internet

datos se pasan por parámetro, en la línea de comandos, al programa. El método de

uso más normal será POST.

ENCTYPE=”text/plain” indica que los valores de los campos serán enviados como

un archivo de texto, perfectamente legible y sin codificar.

NAME.- Permite colocar una identificación al formulario, puesto que es posible

tener varios formularios en la misma página.

OBJETOS DENTRO DEL FORMULARIO.

A. Cuadro de Texto

Existen tres formas de conseguir que el usuario introduzca texto en el formulario:

- Texto Corto(Una Línea)

<INPUT TYPE=”text” NAME=”nombre_objeto” VALUE=”valor_inicial”>

Atributos

VALUE.- Texto que contendrá la caja por defecto.

SIZE.-La longitud de este campo es por defecto de 20 caracteres, con este atributo

se puede variar el tamaño de la caja.

MAXLENGTH.-Especifica el número máximo de caracteres que puede introducir el

usuario. Por defecto no tiene límites.

- Palabras Secretas

<INPUT TYPE=”password” NAME=”nombre_objeto” VALUE=”valor_inicial”>

Es similar al anterior, pero en este caso no se imprimen los caracteres según se van

introduciendo, se muestra un * en lugar del carácter pulsado.

- Texto en múltiples líneas

<TEXTAREA NAME=”nombre_objeto” ROWS=”numero” COLS=”numero”>

Texto por defecto </TEXTAREA>

ROWS.- Representa el número de filas

COLS.- Representa el número de columnas que ocupará la caja de texto.

Permite el ingreso de texto que puede abarcar varias líneas, introduciéndolo en

forma de párrafo.

Ejemplo:

<HTML>

<HEAD>

<TITLE>Formulario</TITLE>

</HEAD> <BODY> <B>Pagina HTML con un formulario</B><br>

<FORM>

Cuadro de Texto: <INPUT TYPE="text" NAME="TEXTO"><br>

Clave de acceso: <INPUT TYPE="password" NAME="CLAVE"><br>

Sugerencia: <TEXTAREA NAME="SUGERENCIA" ROWS="6"

Lenguaje HTML

Tópicos Internet

COLS="40">Escriba su Sugerencia</TEXTAREA>

</FORM> </BODY> </HTML>

B. Casillas de Verificación

Aparecerá una casilla en la página que permite marcarla o desmarcarla, teniendo dos

estados los cuales son ON y OFF. En este caso de debe especificar como tipo

CHECKBOX.

<INPUT TYPE=”checkbox” NAME=”nombre_objeto”>

Atributos adicionales

VALUE=”valor”.- Si se indica el atributo value, cuando se envían los datos con el

botón activado, se enviará el objeto con el valor indicado, en caso contrario no se

enviará ningún valor.

CHECKED.- Es un parámetro que permite activar un control por defecto, es decir,

aparezca marcado.

C. Botones de Opción

Se usa cuando la opción debe tomar un único valor simple de una serie de

alternativas. En este caso se presentan unos valores opcionales de los que solo se

puede seleccionar uno. En este caso se utiliza como tipo la palabra RADIO. Tiene los

mismos atributos adicionales que el Checkbox.

<INPUT TYPE=”radio” NAME=”nombre_objeto”>

Para indicar un grupo de botones de opción se debe asignar a todos ellos el mismo

NAME.

Ejemplo: <HTML> <HEAD>


</HEAD> <BODY> <B>Pagina HTML con un formulario</B><br>

Utilizando controles radio y checkbox

<FORM>

Controles Radio<br>

<INPUT TYPE="radio" NAME="estadocivil" VALUE="Soltero" checked>Soltero

<INPUT TYPE="radio" NAME="estadocivil" VALUE="Casado">Casado

<INPUT TYPE="radio" NAME="estadocivil" VALUE="Viudo">Viudo

<INPUT TYPE="radio" NAME="estadocivil" VALUE="Divorciado">Divorciado

<br><br>Controles Checkbox<br>HOBBIES<br><br>

<INPUT TYPE="checkbox" NAME="Futbol" VALUE="Futbol" checked>Futbol

<INPUT TYPE="checkbox" NAME="Voley" VALUE="Voley">Voley

<INPUT TYPE="checkbox" NAME="Basket" VALUE="Basket">Basket

Lenguaje HTML

Tópicos Internet

</FORM> </BODY> </HTML>

D. Elección entre múltiples opciones

Se usa para menús simples o múltiples.

Formato:

<SELECT NAME=”nombre_objeto”>

<OPTION> Primera Opción

<OPTION> Segunda Opción

........

<OPTION>Enésima Opción

</SELECT>

Atributos adicionales

SIZE=valor .- Especifica el número de opciones que se pueden visualizar. Si es mayor

que 1 se observa una lista de selección y, si no, se ve una lista desplegable.

MÚLTIPLE.- Si lo indicamos podremos seleccionar más de una opción a la vez.

Ejemplo:

<HTML>

<HEAD>


</HEAD>

<BODY>

<B>Pagina HTML con un formulario</B><br>

Utilizando Cuadro de Selección (ComboBox)

<FORM>

Colores (solo permite elegir uno)<br>

<SELECT NAME="COLOR">

<OPTION>Azul

<OPTION>Rojo

<OPTION>Verde

<OPTION>Amarillo

<OPTION>Blanco

</SELECT>

<BR><BR>Otro de Colores (este permite seleccionar mas de uno)<br>

<SELECT NAME="COLORES" MULTIPLE SIZE=3>

<OPTION>Azul

<OPTION>Rojo

<OPTION>Verde

<OPTION>Amarillo

<OPTION>Blanco

</SELECT>

</FORM>

</BODY>

</HTML>

Lenguaje HTML

Tópicos Internet

E. Botones de Envío y Borrado

Existen dos botones esenciales en un formulario, el que permita enviar los datos que

se encuentran en los controles y otro que permita limpiar su contenido.

En todo formulario debe existir al menos un botón de envío.

Botón de Envío

<INPUT TYPE=”submit” VALUE=”mensaje a mostrar”>

El atributo VALUE muestra una etiqueta no editable que aparecerá sobre el botón.

Botón de Borrado

<INPUT TYPE=”reset” VALUE=”mensaje a mostrar”>

Ejemplo:

<HTML>

<HEAD>


</HEAD>

<BODY>

<B>Pagina HTML con un formulario</B><br>

Utilizando Botones de Enviar y Borrado<br>

<FORM ACTION="mailto:[email protected]" METHOD="POST">

Texto : <INPUT TYPE="TEXT" NAME="txtTexto"><br><br>

<INPUT TYPE="submit" VALUE="Enviar">

<INPUT TYPE="reset" VALUE="Borrar">

</FORM>

</BODY>

</HTML>

Hojas de Estilo en Cascada (CSS)

Topicos Internet

HHOOJJAASS DDEE EESSTTIILLOO EENN CCAASSCCAADDAA

IINNTTRROODDUUCCCCIIÓÓNN

Bajo el nombre de HTML Dinámico se engloba un conjunto de técnicas con dos objetivos

claros: proporcionar un control absoluto al diseñador de páginas HTML y romper con el

carácter estático de este tipo de documentos. Hasta ahora, una vez mostrado un documento

HTML, nada podía hacerse para modificarlo.

Los tres componentes del HTML Dinámico son:

Hojas de Estilo

Posicionamiento de Contenidos

Fuentes Descargables

Las hojas de estilo permiten especificar atributos para los elementos de su página web. Con

el posicionamiento de contenidos se puede asegurar que las diferentes partes serán

mostradas exactamente donde usted quiera que aparezcan y podrá modificar su aspecto y

posición tras ser mostrada. Con las fuentes descargables podemos asegurar que siempre se

utilizara la fuente correcta, pues podemos enviar la fuente junto con la página.

HHOOJJAASS DDEE EESSTTIILLOO

Las hojas de estilo vienen a intentar volver a separar en un documento el estilo lógico del

estilo físico, dejando este último en bloques de definición de estilos separados de la

estructura del documento.

CSS son las siglas de "Cascade StyleSheet". Se trata de una especificación sobre los estilos

físicos aplicables a un documento HTML, y trata de dar la separación definitiva de la lógica

(estructura) y el físico (presentación) del documento.

Una hoja de estilo consiste en una o más definiciones de estilo. En sintaxis CSS, los

nombres de las propiedades y los valores se encierran entre llaves {}.

El criterio de selección determina a que elementos se aplica, o es aplicable, el estilo. Si el

criterio de selección es un elemento HTML, el estilo es aplicado a todos las instancias de

dicho elemento. El criterio de selección también puede ser una clase, un ID o contextual.

Cada una de estos criterios de selección se verá a continuación.

En una definición de estilo cada propiedad es seguida por dos puntos y el valor de dicha

propiedad. Cada par propiedad/valor está separado del siguiente por un punto y coma (;).

Topicos Internet

EESSTTRRUUCCTTUURRAA DDEE UUNNAA HHOOJJAA DDEE EESSTTIILLOOSS <style type="text/css">



</style>

Por ejemplo, la siguiente hoja de estilo en cascada contiene dos definiciones de estilos. El

primero especifica que todos los párrafos, <p>, se verán en negrita y en color rojo. El

segundo hará que todas las cabeceras, <h1>, aparezcan centradas.

Archivo: ejemplo1.html

<HTML>

<HEAD>

<TITLE>Utilización de Hojas de Estilo</TITLE>

<style type="text/css">



</style>

</HEAD>

<BODY>

<h1>TITULO DE LA PAGINA</h1>

<p> Este párrafo esta definido con un estilo </p>

</BODY>

</HTML>

La definición de estilos se puede encerrar entre comentarios (), de esta forma los

navegadores que no reconozcan la etiqueta <style> la ignorarán.

Es importante no incluir dobles comillas en la especificación de valores de atributos en

sintaxis CSS.

CSS exige un estricto cumplimiento de sus normas de sintaxis. No omitir ningún punto y

coma entre los pares nombre/valor. Si lo hace se ignorara por completo la definición de

estilo. De igual forma, si accidentalmente se añade un símbolo extraño la definición será

ignorada.

Archivo: Ejemplo2.html

<HTML>

<HEAD>

<TITLE> Ejemplo con bloque de estilo </TITLE>

Topicos Internet

<STYLE TYPE="text/css">



</STYLE>

</HEAD>

<BODY BGCOLOR=white>

<H2>Prueba de definición de estilos en un bloque aparte</H2>

Como puede verse, la apariencia de esta página queda

completamente definida por los estilos que hemos

especificado en el bloque STYLE en la cabecera del

documento. Los márgenes son más amplios de lo habitual,

la <B>negrita</B> tiene un tamaño y un color fijos, los

trozos de texto en teletipo como <TT>este fragmento</TT>

también tienen definida su fuente, tamaño y color,

y vamos a ver cómo quedan las tablas, para finalizar

el ejemplo: <P>

<CENTER>

<TABLE BORDER=1 CELLSPACING=2 CELLPADDING=2>


Topicos Internet

<TR> <TH>Cabecera 1</TH> <TH>Cabecera 2</TH> </TR>

<TR> <TD>Celda (1,1)</TD> <TD>Celda (1,2)</TD> </TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

DDEEFFIINNIICCIIÓÓNN DDEE HHOOJJAASS DDEE EESSTTIILLOO EENN FFIICCHHEERROOSS EEXXTTEERRNNOOSS

Se puede definir una hoja de estilo en un fichero distinto del que contiene la página y

después enlazarlos. Las ventajas de este método son que podremos utilizar la hoja de estilo

desde cualquier documento HTML. Se podría pensar en una hoja de estilo así definida

como en un patrón que pudiera aplicarse a cualquier documento. De esta forma, se puede

aplicar un estilo a todas las páginas servidas desde un sitio Web sin más que incluir un

enlace al fichero con la hoja de estilo en cada página.

La sintaxis para definir estilos en ficheros es idéntica a la que se usa para definirlos en el

propio documento, excepto que no es necesario incluir la etiqueta <style>. He aquí un

ejemplo:

Sintaxis CSS ( Archivo: estilo1.css)

/* hoja de estilo externa archivo con nombre: estilo1.css */

.BOLDBLUE {color: blue; font-weight: bold;}

h1 {line-height: 18pt;}

p {color: red;}

/* fin de fichero */

Para utilizar esta hoja de estilo, se usa la etiqueta <link> como se muestra en el siguiente

ejemplo:

Archivo: Ejemplo3.html

<html>

<head>

<title>El titulo</title>

<link rel = stylesheet type = "text/css" href = "estilo1.css">

</head>

<body>

<h1>TITULO DE LA PAGINA</h1>

<p> Este párrafo esta definido con un estilo </p>

</body>

</html>


Topicos Internet

RREEGGLLAASS DDEE IIMMPPOORRTTAANNCCIIAA EENN LLOOSS EESSTTIILLOOSS

Los estilos se heredan de una etiqueta a otra, como se indicó anteriormente. Por ejemplo, si

tenemos declarado en el <BODY> unos estilos, por lo general, estas declaraciones también

afectarán a etiquetas que estén dentro de esta etiqueta, o lo que es lo mismo, dentro de todo

el cuerpo.

En muchas ocasiones más de una declaración de estilos afecta a la misma porción de la

página. Siempre se tiene en cuenta la declaración más particular. Pero las declaraciones de

estilos se pueden realizar de múltiples modos y con varias etiquetas, también entre estos

modos hay una jerarquía de importancia para resolver conflictos entre varias declaraciones

de estilos distintos para una misma porción de página. Se puede ver a continuación esta

jerarquía, primero ponemos las formas de declaración más generales, y por tanto menos

respetadas en caso de conflicto:

Declaración de estilos con fichero externo. (Para todo un sitio web)

Declaración de estilos para toda la página. (Con la etiqueta <STYLE> en la

cabecera de la página)

Estilos definidos en una parte de la página. (Con la etiqueta <DIV>)

Definidos en una etiqueta en concreto. (Utilizando el atributo style en la etiqueta en

cuestión)

Declaración de estilo para una porción pequeña del documento. (Con la etiqueta

<SPAN>)

Ya vimos cómo incluir estilos en la página, de todas las maneras posibles e hicimos un

repaso con la lista anterior. Ahora estás en condiciones de empezar a usar las hojas de estilo

en cascada para mejorar tus páginas y aumentar la productividad de tu trabajo. Pero estate

atento a los siguientes capítulos donde aprenderás las lecciones que te faltan para dominar

bien la materia: conocer la sintaxis, los distintos atributos de estilos y otras cosas que

mejorarán tus páginas.

AATTRRIIBBUUTTOOSS DDEE LLAASS HHOOJJAASS DDEE EESSTTIILLOO

Tal como se vio en los ejemplos la sintaxis es bastante sencilla y repetitiva. Vamos a verla:

Para definir un estilo se utilizan atributos como font-size, text-decoration... seguidos de dos

puntos y el valor que le deseemos asignar. Podemos definir un estilo a base de definir

muchos atributos separados por punto y coma.

Ejemplo:

font-size: 10pt; text-decoration: underline; color: black; (el último punto y coma de la lista

de atributos es opcional)

Para definir el estilo de una etiqueta se escribe la etiqueta seguida de la lista de atributos

encerrados entre llaves.

Ejemplo:

H1{text-align: center; color:black}


Topicos Internet

Los valores que se pueden asignar a los atributos de estilo se pueden ver en una tabla a

continuación. Muchos de estos valores son unidades de medida, por ejemplo, el valor del

tamaño de un margen o el tamaño de la fuente. Las unidades de medida son las siguientes:

Puntos pt

Pulgadas in

Centímetros cm

pixels px

Hasta aquí, queda dicho todo lo relativo a la sintaxis. En el siguiente capítulo podrás

encontrar una lista de los atributos de las hojas de estilo en cascada.

DDEEFFIINNIICCIIÓÓNN DDEE AATTRRIIBBUUTTOOSS DDEE LLAASS HHOOJJAASS DDEE EESSTTIILLOO

Tanto para practicar en tu aprendizaje como para trabajar con las CSS lo mejor es disponer

de una tabla donde se vean los distintos atributos y valores de estilos que podemos aplicarle

a las páginas web.

Aquí puedes ver la tabla de los atributos CSS, tenla a mano cuando utilices las CSS. Nombre del atributo Posibles valores Ejemplos

FUENTES - FONT color valor RGB o nombre de

color color: #009900; color: red;

Sirve para indicar el color del texto. Lo admiten casi todas las etiqetas de HTML. No todos los nombres de colores son admitidos en el estandar, es aconsejable entonces utilizar el valor RGB. font-size xx-small | x-small |

small | medium | large | x-large | xx-large Unidades de CSS

font-size:12pt; font-size: x-large;

Sirve para indicar el tamaño de las fuentes de manera más rígida y con mayor exactitud. font-family serif | sans-serif |

cursive | fantasy | monospace Todas las fuentes habituales

font-family:arial,helvetica; font-size: fantasy;

Con este atributo indicamos la familia de tipografía del texto. Los primeros valores son genéricos, es decir, los exploradores las comprenden y utilizan las fuentes que el usuario tenga en su sistema. También se pueden definir con tipografías normales, como ocurría en html. Si el nombre de una fuente tiene espacios se utilizan comillas para que se entienda bien. font-weight normal | bold | bolder |

lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

font-weight:bold; font-weight: 200;

Sirve para definir la anchura de los caracteres, o dicho de otra manera, para poner negrillas con total libertad. Normal y 400 es el mismo valor, así como bold y 700. font-style normal | italic | oblique font-style:normal;


Topicos Internet

font-style: italic; Es el estilo de la fuente, que puede ser normal, itálica u oblícua. El estilo oblique es similar al italic.

PÁRRAFOS - TEXT

line-height normal y unidades CSS line-height: 12px; line-height: normal;

El alto de una línea, y por tanto, el espaciado entre líneas. Es una de esas características que no se podían modificar utilizando HTML. text-decoration none | [ underline ||

overline || line-through ] text-decoration: none; text-decoration: underline;

Para establecer la decoración de un texto, es decir, si está subrayado, sobre rayado o tachado. text-align left | right | center |

justify text-align: right; text-align: center;

Sirve para indicar la alineación del texto. Es interesante destacar que las hojas de estilo permiten el justificado de texto, aunque recuerda que no tiene por que funcionar en todos los sistemas. text-indent Unidades CSS text-indent: 10px;

text-indent: 2in; Un atributo que sirve para hacer sangrado o márgenes en las páginas. Muy útil y novedosa. text-transform capitalize | uppercase |

lowercase | none text-transform: none; text-transform: capitalize;

Nos permite transformar el texto, haciendo que tenga la primera letra en mayúsculas de todas las palabras, todo en mayúsculas o minúsculas.

FONDO - BACKGROUND

Background-color Un color, con su nombre o su valor RGB

background-color: green; background-color: #000055;

Sirve para indicar el color de fondo de un elemento de la página. Background-image El nombre de la imagen

con su camino relativo o absoluto

background-image: url(mármol.gif) ; background-image: url(http://www.x.com/fondo.gif)

Colocamos con este atributo una imagen de fondo en cualquier elemento de la página.

BOX - CAJA

Margin-left Unidades CSS margin-left: 1cm; margin-left: 0,5in;

Indicamos con este atributo el tamaño del margen a la izquierda Margin-right Unidades CSS margin-right: 5%;

margin-right: 1in; Se utiliza para definir el tamaño del margen a la derecha Margin-top Unidades CSS margin-top: 0px;

margin-top: 10px; Indicamos con este atributo el tamaño del margen arriba de la página Margin-bottom Unidades CSS margin-bottom: 0pt;

margin-top: 1px; Con el se indica el tamaño del margen en la parte de abajo de la página Padding-left Unidades CSS padding-left: 0.5in;

padding-left: 1px; Indica el espacio insertado, por la izquierda, entre el borde del elemento-contenido y el contenido de este. Es parecido al atributo cellpadding de las tablas. El espacio insertado tiene el mismo fondo que el fondo del elemento-continente.


Topicos Internet

Padding-right Unidades CSS padding-right: 0.5cm; padding-right: 1pt;

Indica el espacio insertado, en este caso por la derecha, entre el borde del elemento-contenido y el contenido de este. Es parecido a el atributo cellpadding de las tablas. El espacio insertado tiene el mismo fondo que el fondo del elemento-continente. Padding-top Unidades CSS padding-top: 10pt;

padding-top: 5px; Indica el espacio insertado, por arriba, entre el borde del elemento-contenido y el contenido de este. Padding-bottom Unidades CSS padding-right: 0.5cm;

padding-right: 1pt; Indica el espacio insertado, en este caso por abajo, entre el borde del elemento-contenido y el contenido de este. Border-color color RGB y nombre de

color border-color: red; border-color: #ffccff;

Para indicar el color del borde del elemento de la página al que se lo aplicamos. Se puede poner colores por separado con los atributos border-top-color, border-right-color, border-bottom-color, border-left-color. Border-style none | dotted | solid |

double | groove | ridge | inset | outset

border-style: solid; border-style: double;

El estilo del borde, los valores significan: none=ningun borde, dotted=punteado (no parece funcionar), solid=solido, double=doble borde, y desde groove hasta outset son bordes con varios efectos 3D. border-width Unidades CSS border-width: 10px;

border-width: 0.5in; El tamaño del borde del elemento al que lo aplicamos. float none | left | right float: right; Sirve para alinear un elemento a la izquierda o la derecha haciendo que el texto se agrupe alrededor de dicho elemento. Igual que el atributo align en imágenes en sus valores right y left. clear none | right | left clear: right; Si este elemento tiene a su altura imágenes u otros elementos alineados a la derecha o la izquierda, con el atributo clear hacemos que se coloque en un lugar donde ya no tenga esos elementos al lado que indiquemos.

Ejemplo.

<html>

<head>

<title>Estilos - Ejemplo

</title>

<STYLE TYPE="text/css">

P {

font-size : 12pt;

font-family : arial,helvetica;

font-weight : normal;

color: yellow;

}

H1 {

font-size : 36pt;


Topicos Internet

font-family : verdana,arial;

text-decoration : underline;

text-align : center;

background-color : Teal;

color: blue;

}

TD {

font-size : 10pt;

font-family : verdana,arial;

text-align : center;

background-color : 666666;

}

BODY {

background-color : #006600;

font-family : arial;

color : White;

}

</style>

</head>

<body>

<h1>TITULO</h1><br>

<p>Utilizando la etiqueta para definir párrafos.</p><br>

Esto es un texto que no tiene formato de párrafo

<br>

<table border=1>

<tr>

<td>Esta celda tiene estilo</td>

</tr>

</table>

</body>

</html>

DDEEFFIINNIICCIIOONN DDEE CCLLAASSEESS DDEE EESSTTIILLOOSS

Las clases nos sirven para crear definiciones de estilos que se pueden utilizar repetidas

veces.

Una clase se puede definir entre las etiquetas <STYLE> (en la cabecera del documento), o

en un archivo externo a la página. Para definirlas utilizamos la siguiente sintaxis, un punto

seguido del nombre de la clase y entre llaves los atributos de estilos deseados. De esta

manera:

.nombredelaclase {atributo: valor; atributo2:valor2; ...}


Topicos Internet

Una vez tenemos una clase, podemos utilizarla en cualquier etiqueta HTML. Para ello

utilizaremos el atributo class, poniéndole como valor el nombre de la clase, de esta forma:

<ETIQUETA class="nombredelaclase">

Ejemplo de la utilización de clases

<html>

<head>

<title>Ejemplo de la utilización de clases en Hojas de Estilo</title>

<STYLE type="text/css">

.fondonegroletrasblancas {background-color:black;color:white;font-

size:12;font-family:arial}

.letrasverdes {color:#009900}

</STYLE>

</head>

<body>

<h1 class=letrasverdes>Titulo 1</h1>

<h1 class=fondonegroletrasblancas>Titulo 2</h1>

<p class=letrasverdes>

Esto es un párrafo con estilo de letras verdes</p>

<p class=fondonegroletrasblancas>

Esto es un párrafo con estilo de fondo negro y las letras blancas.</p>

</body>

</html>

CCAARRAACCTTEERRIISSTTIICCAASS AAVVAANNZZAADDAASS DDEE LLAASS CCSSSS

Vamos a ver un uso de las CSS que puede ser muy interesante para hacer tablas con títulos

que tengan un cierto estilo. Lo bueno de las CSS es que podemos definir el estilo una vez y

se puede utilizar en múltiples elementos de la página. Definiremos un estilo y la aplicación

para hacer distintos tipos de decoración de tablas.

Definición de los estilos para títulos de Tablas decorados con css

En la cabecera de la página colocamos la etiqueta <style> que sirve para definir los estilos a

utilizar en la página. Vamos a definir un estilo por defecto para las celdas (etiqueta <td>) y

un par de clases, la primera para las tablas y la segunda para las celdas titular (las que

tienen color de fondo).


td {

font-family:verdana,arial;

font-size:8pt;

}

.estilotabla{

background-color:ffffff;

border-style:solid;


Topicos Internet

border-color:666666;

border-width:1px;

}

.estilocelda{

background-color:ddeeff;

color:333333;

font-weight:bold;

font-size:10pt;

}

</style>

Para la clase estilotabla estamos definiendo un color de fondo, un borde sólido, un color del

borde y un ancho del borde, por ese orden. Para la clase estilocelda estamos definiendo un

color de fondo, un color del texto, un grosor de la fuente y un tamaño de la fuente.

Utilización de los estilos para obtener una tabla decorada Veamos el código de la primera tabla del ejemplo.

<table width=280 height=18 cellpadding=2 cellspacing=2

class="estilotabla">

<tr><td class="estilocelda">Título de sección</td></tr>

<tr><td>Este es un texto de lo que podría ser la parte de abajo de la

tabla con el contenido relacionado con este título.</td></tr>

</table>

Lo único que tiene de especial es que utiliza las clases que se han definido previamente. En

la etiqueta <table> se utiliza la clase estilotabla y en la etiqueta <td> que queremos que sea

el titular se utiliza la clase estilocelda. La otra celda tendrá el estilo definido para todas las

celdas en general.

La otra tabla tendría este código. <table width=280 height=18 cellpadding=2 cellspacing=2

class="estilotabla">

<tr><td class="estilocelda">Título de sección</td></tr>

</table>

<table width="280" cellpadding="2" cellspacing="2"><tr><td>

Este es un texto de lo que podría ser la parte de abajo de la tabla con

el contenido relacionado con este título.

</td></tr></table>

En este caso utilizamos dos tablas para hacer el efecto. La tabla de arriba tiene un borde y

la de abajo no. Para ello aplicamos la clase definida para la tabla y la celda solamente en la

tabla de arriba, así el borde definido en la declaración de estilos sólo afecta a la tabla de

arriba.


Topicos Internet

EEFFEECCTTOOSS PPAARRAA FFOORRMMUULLAARRIIOOSS

CREANDO BORDES PUNTEADOS

Se pueden utilizar algunos efectos visibles en una página como por ejemplo crear bordes

punteados, solamente se debe de utilizar el atributo correcto, en este caso es border-style.


.punteado{

border-style: dotted;

border-width: 1px;

border-color: 660033;

background-color: cc3366;

font-family: verdana, arial;

font-size: 10pt;

}

</style>

Utilizando el estilo anterior en una página web.

<table class="punteado" width=80% align="center">

<tr>

<td>

<b>Esto es un texto</b>

<br>

Nueva línea de texto

</td>

</tr>

</table>

En este ejemplo, toda la tabla tendrá un efecto de borde punteado. Si colocáramos esa clase únicamente en una celda, sólo esa celda tendría el borde punteado. Es el caso del ejemplo siguiente: <table width=300>

<tr>

<td class="punteado"><b>Título de la tabla</b></td>

</tr>

<tr>

<td>

Aquí podríamos escribir información. Sería como el cuerpo de la tabla

que correspondiese con el titular que sí tendría algún estilo.

</td>

</tr>

</table>


Topicos Internet

ESTILOS EN CAMPOS DE TEXTO

Recordemos los campos de texto de los normales <input type=text> y campos de texto que

soportan varias líneas <textarea>.

Con estilos, podemos definir el formato de presentación de cualquier elemento de la página.

Los campos de texto, que siempre tienen una forma muy específica, también aceptan

especificaciones de estilos para variar su apariencia típica.

Vamos a ver varios ejemplos para comprobar las posibilidades de las hojas de estilos,

aplicadas sobre campos de texto y textareas.

<input type="text" name="campotexto0" size="12" style="border-width: 2px;

border-style: solid; font-size:8pt; color: #009900; letter-spacing :

3px;">

Este campo de texto se presentará con un borde de 2 pixels, un borde sólido, tamaño de la

letra de 8 puntos, color del borde y de las letras verde un poco oscuro. También se define

un espaciado entre las letras de 3 pixel.

<input type="text" name="campotexto1" size="12" style="background-

color:#e3e3e3; border: 1px solid #666666; font-size:8pt; color: #000099">

Este campo de texto tiene los estilos declarados con una sintaxis un poco distinta, ya que se

han agrupado varios estilos relativos al borde en un solo atributo. Los estilos con los que se

presentará son: color de fondo grisáceo, borde de 1 pixel, borde de estilo sólido, color del

borde gris más oscuro, tamaño del texto de 8 puntos y color de las letras azul.

<textarea cols="20" rows="3" name="campotexto2" style="overflow:auto;

border: 1px solid #ff6666;"></textarea>

Este campo de texto con varias líneas, también llamado textarea, tiene viarios estilos, que

son parecidos a los que hemos visto para el anterior campo de texto, con la salvedad del

atributo overflow, que está definido como auto. El atributo overflow tiene relación con las

barras de desplazamiento que aparecen en los textarea. El valor auto sirve para que la barra

de desplazamiento vertical del campo de texto sólo aparezca en caso que se necesite, es

decir, si el texto del campo supera las líneas que tiene reservadas el textarea. Si quisiéramos

que no se vean las líneas nunca, podemos asignarle el valor hidden al atributo overflow. Por

lo que respecta a los otros estilos de este campo de texto de múltiples líneas, se han

definido 3 valores para el estilo del borde, en un único atributo. Los estilos son borde de un

píxel, borde de estilo sólido y borde de color rojo pastel.

<textarea cols="20" rows="3" name="campotexto3" readonly

style="overflow:auto; border-style:dashed; border-color:555555; border-

width: 1px;">

Hola a todos los que lean esto.

Ejemplo de estilos en controles de formularios

</textarea>


Topicos Internet

En este campo textarea, hemos incluido también un texto con el que se inicializará su

contenido. Primero llamamos la atención sobre el atributo de HTML readonly, que sirve

para que el campo textarea no sea editable, es decir, que no se pueda cambiar su contenido.

También con estilos CSS se han definido una serie de valores para la apariencia, estos son:

mostrar las barras de desplazamiento sólo cuando toca, un borde del campo punteado, un

color del borde gris oscuro y un ancho del borde de 1 pixel.

Lenguaje Java Script

Topicos Internet

JJAAVVAA SSCCRRIIPPTT

IINNTTRROODDUUCCCCIIÓÓNN AALL LLEENNGGUUAAJJEE JJAAVVAASSCCRRIIPPTT

Para conocer a profundidad lo que quiere decir lenguaje JavaScript debemos conocer

algunos términos básicos como programa que no es más que una serie de instrucciones

que le damos a un sistema para que realice acciones determinadas. En otras palabras, es

decirle al ordenador como hacer una determinada tarea. Puede por tanto ser algo tan simple

como decirle que sume dos números y nos diga el resultado hasta algo tan complejo como

decirle que controle todo un edificio: temperatura, puertas, iluminación. En nuestro caso es

algo bastante sencillo, vamos a decirle al ordenador que cuando presente nuestra página

web al visitante realice acciones como poner en la página la fecha y hora actual, hacer que

una imagen se mueva de un lado a otro, responder de una determinada forma a la pulsación

de un botón del ratón, y muchas cosas más, que se podrán ir conociendo a lo largo de este

manual.

Para escribir un programa no nos vale ni el castellano, ni el inglés, ni ninguno de los

lenguajes que habitualmente usa el hombre para comunicarse. Para entendernos con un

ordenador se utilizan los lenguajes informáticos. Existen dos grandes grupos de lenguajes a

la hora de escribir un programa: Los compilados y Los interpretados. Un compilado es

aquel que se traduce a un lenguaje interno del computador, el resultado de esto es un

archivo ejecutable (exe, com), el cual, el usuario lo puede ejecutar las veces que lo desee. A

diferencia de los lenguajes interpretados que son aquellos en los cuales se escribe código

fuente y la computadora va leyendo instrucción por instrucción y desarrollando las acciones

necesarias.

JJAAVVAASSCCRRIIPPTT

JavaScript es un lenguaje de programación interpretado, con el cual se deben escribir las

instrucciones que forman nuestro programa, para lo cual se necesita conocer sus reglas y su

vocabulario o palabras reservadas.

La utilización de JavaScript es exclusivamente en páginas web, no pudiéndose construir

programas independientes, lo que se puede escribir con este lenguaje serán scripts que el

navegador interpretará y mostrará en la Página Web.

¿Pero como es que los ejecuta?. Lo normal es que la ejecución se realice de forma

automática cuando el navegador carga una página, o cuando el usuario pasa el ratón por una

imagen, o cuando pulsa el botón de un formulario, etc. Estos cambios provocan los

llamados eventos que son recibidos por el navegador que reaccionará en la forma adecuada:

si haces click en un hiperenlace se genera un evento y el navegador abre una nueva página.

Esos eventos son los que se aprovechan para que se ejecuten las instrucciones que nosotros

escribimos en JavaScript. A cada evento se le puede asociar una función para que haga algo

predeterminado por nosotros. Por ejemplo cuando el navegador carga una página se

produce un evento que puede aprovecharse para hacer que se abra otra ventana (las

conocidas como ventanas popup tan usadas para mensajes publicitarios), o cuando pasamos

Topicos Internet

el ratón por una enlace se produce otro evento que puede aprovecharse para llamar a una

función que modifique el color en que se muestra el enlace, o cuando el usuario pulsa una

tecla. Los eventos tienen la naturaleza de objetos, o sea, poseen métodos y propiedades. Así

cuando se produce un evento podemos saber quien lo produce, en que posición de la

pantalla se ha realizado y otras propiedades dependientes de cada evento en concreto.

Veamos que es un flujo de programa. Cuando el navegador empieza a leer el script para

ejecutarlo lo hace en orden secuencial, o sea, empieza con la primera instrucción, sigue por

la segunda y así hasta llegar al final. Esto es lo que se conoce como ejecución secuencial o

lineal. Pero a veces es necesario saltarse instrucciones, por ejemplo, se construye una

página a la que sólo pueden entrar determinadas personas, se deberá escribir una función

que pida el nombre de quien desee ver la página, si es una persona autorizada muestra la

página y si no lo es no la muestra. El programa no ha seguido un flujo lineal, unas veces

ejecutará la parte de mostrar la página y otras no. Otra situación bastante común es cuando

se desea que el programa recorra todas las imágenes de tu página y vaya cambiando su

contenido, no se escribe el mismo código una y otra vez, lo ideal sería escribir las

instrucciones y poderlas repetir. Cualquier lenguaje de programación tiene solucionado este

problema mediante las llamadas sentencias de control del flujo de programa. Son

sentencias que permiten que se ejecuten condicionalmente algunos pasos (condicionales) o

repetir una serie de instrucciones una y otra vez (bucles).

SSIINNTTAAXXIISS JJAAVVAASSCCRRIIPPTT

Se requiere conocer lo básico del lenguaje como por ejemplo donde se puede ubicar el

script desarrollado con java, si es sensible a mayúsculas y minúsculas, como considera los

espacios en blanco, como definir comentarios, qué palabras son consideradas reservadas

para el lenguaje entre otros.

<SCRIPT LANGUAGE=”JavaScript”>

//sentencias requeridas

</SCRIPT>

Donde se pueden ubicar el script de java.

JavaScript es adicionado en una página HTML usando la etiqueta SCRIPT, esta etiqueta

puede ser ubicada dentro de la etiqueta HEAD del documento. En algunos navegadores

antiguos los script de java no son reconocidos y producirán errores en la página, por lo

tanto se pueden utilizar unas etiquetas para ocultar el código definido en java, estas

etiquetas son:



Dentro de las cuales se puede escribir el código respectivo.

<HTML>

<HEAD>

<TITLE>Página Web conteniendo código en JavaScript</TITLE>

<SCRIPT LANGUAGE=”JavaScript”>


Topicos Internet

<!- - Ocultando el código en java para los navegadores antiguos

.... Todo el código (instrucciones) requeridas escritas en esta zona.

//fin del código oculto - ->

</SCRIPT> </HEAD>

<BODY>

Agregar la información que se desee mostrar en la página

</BODY>

</HTML>

CASE SENSITIVE

Java Script es un lenguaje sensible a mayúsculas y minúsculas, es decir, en el lenguaje

EJEMPLO, ejemplo o Ejemplo serán tres diferentes variables que se pueden definir. Esto en

algunos casos provoca errores no en la programación, sino en los resultados obtenidos.

SEPARAR LÍNEAS DE CÓDIGO

Java script utiliza el carácter punto y coma (;) para la separación entre líneas de código,

siendo muy parecido a la programación en C.

var a=5; var b=28;

ESPACIOS EN BLANCO

Java Script como HTML ignora los espacios en blanco, los tabs, y los enter en los textos.

var x=0; es similar a var x = 0;

BACKSLASH

La barra inversa o backslash tienen un propósito especial en las cadenas de Java Script. Se

utilizan estos caracteres que representan algo en una cadena que no puede escribirse desde

el teclado.

Normalmente son llamados también secuencias de escape.

Ejemplos:

\b backspace

\n nueva linea

\r retorno de carro

\t tab

\’ comilla simple

\” comilla doble

ABRIENDO Y CERRANDO GRUPOS

Los delimitadores como los (), [], {} siempre deben abrirse y cerrarse.

if ( x[i] >10 )

y = y+ 5


Topicos Internet

COMENTARIOS

Se pueden insertar comentarios utilizando para esto la doble barra slash, como por ejemplo:

// Esto es un comentario

O también crear múltiples líneas de comentario, para lo cual se deberá utilizar los

caracteres “/*” para inicio y “*/” para cierre.

/* Esto es un comentario que se expresa en varias líneas

Para lo cual debemos seguir las indicaciones

De cómo poder crearlos.*/

VARIABLES Y NOMBRES DE FUNCIONES

Para la declaración de variables o nombres de funciones se debe seguir las siguientes

reglas:

1. El primer carácter debe ser una letra o el símbolo de subrayado (_).

2. No se puede utilizar un número como primer carácter del nombre.

3. No puede contener espacios en blanco.

4. No puede ser una palabra reservada.

Ejemplos:

x

Total

Costo10

_Valor

PALABRAS RESERVADAS

Existe un grupo de palabras que se usan en el lenguaje, estas palabras no pueden ser usadas

como variables o nombres de funciones debido a que el interprete del programa no podría

diferenciar entre un comando de javascript o una simple variable o nombre de función, es

por eso recomendable que el programador las utilice como palabras reservadas.

abstract delete innerWidth Packages status

alert do instanceof pageXOffset statusbar

arguments document int pageYOffset stop

Array double interface parent string

blur else isFinite parseFloat super

boolean enum isNaN parseInt switch

Boolean escape java personalbar synchronized

break eval length print this

byte export location private throw

callee extends locationbar prompt throws

caller final long protected toolbar

captureEvents finally Math prototype top

case find menubar public toString

catch float moveBy RegExp transient


Topicos Internet

char focus moveTo releaseEvents try

class for name resizeBy typeof

clearInterval frames NaN resizeTo unescape

clearTimeout Function native return unwtch

close function netscape routeEvent valueOf

closed goto new scroll var

confirm history null scrollbars void

const home Number scrollBy watch

constructor if Object scrollTo while

continue implements open self window

Date imports opener setInterval with

debugger in outerHeight setTimeout FALSE

default Infinity outerWidth short TRUE

defaultStatus innerHeight package static

PPRROOGGRRAAMMAACCIIOONN BBAASSIICCAA

VARIABLES Y DATOS

Dentro de la programación se debe diferenciar entre variable y dato, las cuales son las

unidades básicas de todo lenguaje. Por ejemplo el nombre de una persona es "Pedro", esta

palabra es un dato. El precio de un departamento en dólares 35000, este número es otro

dato. Estos datos no suelen usarse tal cual sino que se almacenan en unos elementos con

nombre denominados Variables. En este caso usaríamos una variable, denominada

nombre, para guardar en ella "Pedro" o precio para guardar el 35000.

Una variable no es mas que una porción de memoria especificada con un nombre en la cual

se puede almacenar información del usuario ya sea para mostrarla posteriormente o para

permitir realizar ciertos cálculos internos, cabe señalar que la utilización de una variable

queda a criterio del programador. En otros lenguajes de programación existen diferentes

tipos de variables en función del tipo de datos que pueden almacenar: variables para

cadenas, para números enteros, para números reales, etc. JavaScript es muy permisivo en

este aspecto de manera que una variable puede almacenar cualquier tipo de dato y además

pueden crearse en cualquier parte del programa. Esto último es cómodo pero peligroso pues

puede llevar a programas difíciles de depurar y de modificar, es conveniente llevar un

cierto control sobre las variables que vas usando en cada función y declararlas al principio

de la misma.

Los criterios para definir el nombre de una variable son: utilizar cualquier combinación de

letras y dígitos, mas el guión bajo, siempre que el primer carácter no sea un dígito y por

supuesto que no coincida con una palabra reservada del lenguaje, es decir, palabras con un

significado especial para el intérprete como close, open, write, entre otras. Es aconsejable

usar nombres autodescriptivos, es una forma de documentar tus programas. Por ejemplo

una variable para almacenar una dirección de un icono puede llamarse direc_icono. No

olvidarse que JavaScript diferencia entre mayúsculas y minúsculas, así Edad y edad serían

dos variables distintas. Otro aspecto a tener en cuenta a la hora de usar las variables es su


Topicos Internet

ámbito, es decir, qué funciones tienen acceso a ellas. Si se crea una variable dentro de una

función sólo será conocida dentro de esa función, se trata de variables locales. Si se

necesita que varias funciones tengan acceso a una determinada variable ésta debe crearse

como variable global, esto se hace creándola fuera de todas las funciones. Por ejemplo :

<script language="Javascript">

var version_navegador = 0;

function verNavegador()

{

var version;

version = document.appVersion;

return version;

}

</script>

En este ejemplo version_navegador es una variable global mientras que version es local a

la función verNavegador(). Observa que las variables están creadas con la palabra clave

var, el uso de esta palabra es opcional, sólo es obligatorio si una variable local tienen el

mismo nombre que una global. Otro detalle a tener en cuenta es que al mismo tiempo que

creamos la variable podemos darle un valor, si no lo hacemos la variable contendrá el valor

null.

TIPOS DE DATOS

Cuando declaramos una variable, ésta no pertenece a ningún tipo de dato en concreto, se

dice que es Undefined. Es al asignarle un valor cuando pasa a ser de uno u otro tipo, según

el dato que almacene.

Existen 6 tipos de datos:

String : cadenas de texto Object : objetos

Number : valores numéricos Null : nulo

Boolean : true o false Undefined: no definido.

Podemos averiguar el tipo de dato que contiene una variable si utilizamos la función

incorporada typeof.

<script language="Javascript">

var valor;

function verNavegador()

{

var nombre;

nombrre = “Pedro Pablo”;

valor = 500 * 56;

}

</script>

En este ejemplo existen dos variables, la variable valor que corresponderá a un tipo de

datos numérico (Number) y la variable nombre que corresponderá a un tipo de datos


Topicos Internet

cadena (string). Acordarse de que al momento de crearla variable no podemos asignarle el

tipo, esto se sabe cuando la variable recibe información dada por el usuario o cálculos.

OPERADORES

OPERADORES ARITMÉTICOS

En los primeros ejemplos de este tutor tan sólo se han usado sentencias muy simples como

asignar un valor a una variable, mediante el operador de asignación, =, o realizar

operaciones aritméticas, pero evidentemente JavaScript puede realizar mas operaciones.

En esta sección y las siguientes se presentan los operadores de que dispone este lenguaje

clasificados en varios grupos, según el contexto en el que se usen. Comenzamos con los

más conocidos, los operadores aritméticos.

Suma +

Se trata de un operador usado para sumar dos valores numéricos o para concatenar cadenas

entre sí o números y cadenas.

var var1 = 10, var2= "Buenos", var3 = " días", var4 = 31;

document.write(var1+var4) /* resultado 41 */

document.write(var2+var3) /* resultado: Buenos días */

document.write(var1+var3) /* resultando: 10 días */

Resta -

Operador usado para restar valores numéricos. Puede actuar sobre un único operando

numérico cambiándole de signo.

var num1 = 10, num2 = 8, res = 0;

res = num1 - num2; /*res contiene 2 */

res = -res /* ahora res contiene -2*/

Producto ( * ) y cociente ( / )

Realizan las operaciones aritméticas de multiplicar y dividir dos valores.

var op1 = 50, op2= 4, div, mul;

div = op1/op2 /*div contiene 12.5 */

mul = op1 * op2 /*mul contendrá 200 */

Resto %

También llamado operador módulo calcula el resto de una división.

var op1 = 50, op2= 4, resto;

resto = op1 % op2; /*resto contiene 2 */

Incremento (++) y decremento (--)

Estos operadores se usan para incrementar o decrementar en 1 el valor de una variable. Si el

operador se antepone a la variable la operación de incremento o decremento es prioritario

sobre cualquier otra.

var op1=5, op2 = 5, res;

res = ++op1; /*res adquiere el valor 6 y luego op1 el 6*/

res = op1++; /*res adquiere el valor 5 y luego op2 el 6*/


Topicos Internet

Operadores compuestos

Los operadores +, -, *, / pueden asociarse con el operador de asignación (=) para cambiar el

valor de una variable numérica por incrementándolo, decrementándolo, multiplicándolo o

dividiéndolo por un valor. El operador += puede usarse igualmente con variables de

cadena.

var num = 20, cad = "buena";

num += 5; /*num adquiere el valor 25 (20 + 5) */

cad += 's' ; /*cad adquiere el valor 'buenas' */

num *= 10; /*num adquiere el valor 250 (25*10) */

OPERADORES BINARIOS

E l ordenador, internamente, trata cualquier tipo de datos como una cadena binaria (ceros y

unos). Así los números se representan en sistema binario de numeración mientras que los

caracteres se convierten a código ASCII, que son números que se almacenan por tanto

codificados en binario. JavaScript ofrece los operadores típicos para trabajar con estas

cadenas a nivel de bit (cada uno de los ceros o unos de las cadenas binarias. Para trabajar

con estos operadores es conveniente tener una idea previa sobre la codificación binaria.

Complementación ~

Complementa una cadena binaria convirtiendo los 1 en 0 y los 0 en 1.

Por ejemplo el número 38 escrito en sistema binario es 00100110 si le aplicamos este

operador se convierte en 11011001, o sea el -39 (JavaScript usa codificación en

complemento a 2 para los números negativos).

Desplazamiento izquierda <<

Desplaza los bits a la izquierda los lugares que se le indique rellenando con ceros por la

derecha y desechando los bits de mayor peso, esto equivale a multiplicar por potencias de

2. Por ejemplo si al 00011010 (26) lo desplazamos 2 a la izquierda tendremos el 01101000

(104).

var num = 26, res;

res = num << 2; /* num contendrá 104 */

Desplazamiento derecha >>

Desplaza los bits a la derecha los lugares que se le indique rellenando con ceros por la

izquierda y desechando los bits de menor peso, esto equivale a una división entera por

potencias de 2. Por ejemplo si al 00011010 (26) lo desplazamos 2 a la derecha tendremos el

00000110 (6).

var num = 26, res;

res = num << 2; /* num contendrá 104 */

AND lógico binario &

Realiza un AND lógico bit a bit entre dos valores. El AND lógico da como resultado 1 sólo

si ambos bits son 1. Por ejemplo

0 1 1 0 1 1 0 1 (109)

AND 0 0 1 0 0 1 1 0 (38)

resultado: 0 0 1 0 0 1 0 0 (36)


Topicos Internet

var op1 = 109, op2 = 38, res;

res = op1 & op2; /*res contiene 36 */

OR lógico binario |

Realiza un OR lógico bit a bit entre dos valores. El OR lógico da como resultado 0 sólo si

ambos bits son 0. Por ejemplo

0 0 1 1 1 0 1 0 (58)

OR 0 1 0 1 0 0 1 0 (82)

resultado: 0 1 1 1 1 0 1 0 (122)

En el ejemplo podemos ver la sintaxis del operador

var op1 = 58, op2 = 82, res;

res = op1 | op2; /*res contiene 122 */

17

XOR lógico binario ^

Realiza un XOR lógico bit a bit entre dos valores. El XOR lógico da como resultado 1 si

uno sólo de los bits es 1. Por ejemplo

0 0 1 1 1 0 1 0 (58)

OR 0 1 0 1 0 0 1 0 (82)

resultado: 0 0 1 0 1 0 0 0 (40)

En el ejemplo podemos ver la sintaxis del operador

var op1 = 109, op2 = 38, res;

res = op1 ^ op2; /*res contiene 40*/

OPERADORES RELACIONALES

Mayor que >

Compara dos valores y devuelve true si el primero es mayor que el segundo. Compara tanto

números como cadenas.

var hoy = 4; ayer = 10, comp;

comp = hoy > ayer /* comp adquiere el valor false*/

Menor que <

Compara dos valores y devuelve true si el primero es mayor que el segundo. Compara tanto

números como cadenas.


comp = hoy < ayer /* comp adquiere el valor false*/

Mayor o igual >=

Compara dos valores y devuelve true si el primero es mayor o es igual que el segundo.

Compara tanto números como cadenas.


comp = hoy >= ayer /* comp adquiere el valor true*/

Menor o igual <=

Compara dos valores y devuelve true si el primero es menor o es igual que el segundo.



Topicos Internet


comp = hoy <= ayer /* comp adquiere el valor true*/

Iguales ==

Compara dos valores y devuelve true si ambos son iguales. Compara tanto números como

cadenas.


comp = hoy == ayer /* comp adquiere el valor true*/

Idénticos ===

Similar a == pero también compara el tipo de datos de los operandos.

Compara dos valores y devuelve true si el primero es mayor o es igual que el segundo.


var hoy = 4; ayer = '4', comp;

comp = hoy == ayer; /* comp adquiere el valor true*/

comp = hoy === ayer /* comp adquiere el valor false*/

No iguales !=

No identicos !==

Invierten el sentido de las comparaciones iguales == e idénticos === respectivamente.

OPERADORES LÓGICOS

Los operadores lógicos se utilizan para realizar comparaciones entre valores, numéricos o

no, dando como resultado un valor booleanos (true, false). La operación lógica negación

invierte el operando, si es true lo hace false y viceversa. Si se comparan números con

cadenas, JavaScript intenta convertir internamente los datos. En los operadores relacionales

(>, <, >=, <=) intenta convertir los datos en tipo número. Para los operadores de igualdad

(== !=) intenta convertir los tipos de datos a cadena, número y booleano. Los operadores de

identidad (===, !==) no realizan conversión de tipo.

AND lógico &&

Este operador se utiliza para concatenar comparaciones, es decir, para comprobar varias

condiciones. El resultado sólo será true si todas las comparaciones lo son.

var op1 = 2, op2 = 50, op3 = 25, comp;

comp = (op1 > op2) && (op1 < op3); /*comp adquiere el valor

false */

comp es false por que op1 no es mayor que op2 aunque sea mayor que op3

OR lógico ||

Como el anterior, sirve apra realizar comparaciones compuestas y sólo devolverá false

cuando todas las comparaciones los sean. Es decir basta que una comparación sea true para

que devuelva el valor true.

var op1 = 2, op2 = 50, op3 = 25, comp;

comp = (op1 > op2) && (op1 < op3); /*comp adquiere el valor

true */

comp es true por que op1 es menor que op3, (op1 < op3 es por tanto true)


Topicos Internet

CONVERSIÓN EXPLÍCITA DE TIPOS

parseFloat(cadena) Toma la "cadena" y la transforma en un número en coma flotante, si es posible.

parseFloat ("123.456") = 123.456

parseFloat ("123ABC") = 123

parseFloat ("ABC") = NaN

parseInt(cadena, número) Devuelve números enteros, el segundo argumento nos permite escoger la base de

numeración (entre 2 y 36)

parseInt ("ABC",16) = 2748 ABC16 = 274810

Si no especificamos el segundo argumento, por defecto es 10.

Si la cadena empieza por 0x y no existe el segundo argumento, se entiende que es 16.

Si la cadena empieza por 0 y no existe el segundo argumento, se entiende que es 8

toString(argumento) Si argumento = número

Devuelve una cadena que contiene el número

Puede haber un argumento opcional:

(13).toString(16) =”d” siendo 1310 = d16

(13).toString(2) = “1101” siendo 1310 = 11012

FUNCIONES GLOBALES

Así como JavaScript proporciona objetos predefinidos, también posee una serie de

funciones predefinidas. Se trata de las funciones: eval, isNan, Number, String, escape,

unescape.

eval

Se usa para evaluar una cadena con código JavaScript sin referirse a un objeto concreto.

La sintáxis de eval es:

eval(expr)

donde expr es la cadena a evaluar.

isNaN(arg)

Determina si el argumento es un valor NaN (not a number)

Number(objArg) and String(objArg)

Permiten convertir el objeto pasado como argumento a un número o a una cadena. Por

ejemplo:

...

var hoy = new Date();

hoy.getDate();

document.write(string(hoy));

....

Escribirá en pantalla la cadena "Sun Sep 3 10:20:50 UTC+0200 2000" si la fecha del día es

domingo 3 de Septiembre y la hora es las 10:20:50.


Topicos Internet

escape(cadarg)

Codifica la cadena del argumento substituyendo todos los caracteres no ASCII por su

código en el formato %xx. Por ejemplo:

....

var cadena = "Buenos días";

document.write(escape(cadena));

...

Produce la frase "Buenos d%EDas", pues la í (i acentuada) es el código hexadecimal ED de

ese carácter.

unescape(cadarg)

Es inversa a la anterior, de manera que si la cadena contiene códigos del tipo %xx son

convertidos al correspondiente carácter ASCII extendido.

....

var cadena = "Buenos d%EDas";

document.write(escape(cadena));

.....

Ahora se escribirá "Buenos días", se ha substituido %ED por su equivalente í (i acentuada).

EXPRESIONES REGULARES

Las expresiones regulares constituyen un mecanismo bastante potente para realizar

manipulaciones de cadenas de texto. El proceso para el que se usan estas expresiones,

presente en el mundo el UNIX y el lenguaje Perl, es el de buscar y/o sustituir una

subcadena de texto dentro de otra cadena. En principio esto puede hacerse usando los

métodos del objeto string, pero el problema surge cuando no tenemos una subcadena fija y

concreta sino que queremos buscar un texto que responda a un cierto esquema, como por

ejemplo: buscar aquellas palabras que comienzan con http: y finalizan con una \, o buscar

palabras que contengan una serie de números consecutivos, etc.; es en estos casos cuando

las expresiones regulares muestran toda su potencia. La subcadena que buscamos en el

texto es lo que se llama un patrón y se construye encerrando entre dos barras inclinadas ( / )

una serie de caracteres normales y símbolos especiales llamados comodines o

metacaracteres, (algo parecido a la orden dir *.bat usada en el DOS cuando queríamos listar

los ficheros con extensión bat). Este patrón es una descripción del texto que se está

buscando y JavaScript encontrará las subcadenas que concuerdan con ese patrón o

definición. Las expresiones regulares se usan con el objeto Regular Expresion y también

dentro de los métodos String.match, String.replace, String.search y String.split.

En la tabla que sigue se muestran los caracteres comodín usados para crear los patrones y

su significado, junto a un pequeño ejemplo de su utilización.

Significado Ejemplo Resultado

\ Marca de carácter especial /\$ftp/ Busca la palabra $ftp

^ Comienzo de una línea /^-/ Líneas que comienzan por -

$ Final de una línea /s$/ Líneas que terminan por s

. Cualquier carácter (menos salto de

línea)

/\b.\b/ Palabras de una sola letra


Topicos Internet

| Indica opciones /(L|l|f|)ocal/ Busca Local, local, focal

( ) Agrupar caracteres /(vocal)/ Busca vocal

[ ] Conjunto de caracteres opcionales /escrib[aoe]/ Vale escriba, escribo, escribe

La tabla que sigue describe los modificadores que se pueden usar con los caracteres que

forman el patrón. Cada modificador actúa sobre el carácter o el paréntesis inmediatamente

anterior.

Descripción Ejemplo Resultado

* Repetir 0 o mas veces /l*234/ Valen 234, 1234, 11234...

+ Repetir 1 o mas veces /a*mar/ Valen amar, aamar, aaamar...

? 1 o 0 veces /a?mar/ Valen amar, mar.

{n} Exactamente n veces /p{2}sado/ Vale ppsado

{n,} Al menos n veces /(m){2}ala/ Vale mmala, mmmala....

{m,n} entre m y n veces /tal{1,3}a/ Vale tala, talla, tallla

Los siguientes son caracteres especiales o metacaracteres para indicar caracteres de texto no

imprimibles, como puedan ser el fín de línea o un tabulador, o grupos predefinidos de

caracteres (alfabéticos, numéricos, etc...)

Descripción Ejemplo Resultado

\b Principio o final de palabra /\bver\b/ Encuentra ver en "ver de",

pero no en "verde"

\B Frontera entre no-palabras /\Bver\B/ Empareja ver con "Valverde"

pero no con "verde"

\d Un dígito /[A-Z]\d/ No falla en "A4"

\D Alfabético (no dígito) /[A-Z]\D/ Fallaría en "A4"

\O Carácter nulo

\t Carácter ASCII 9 (tabulador)

\f Salto de página

\n Salto de línea

\w Cualquier alfanumérico, [a-zA-Z0-9_

]

/\w+/ Encuentra frase en "frase.",

pero no el . (punto).

\W Opuesto a \w ([^a-zA-Z0-

9_ ])

/\W/

Hallaría sólo el punto (.)

\s Carácter tipo espacio (como tab) /\sSi\s/ Encuentra Si en "Digo Si ",

pero no en "Digo Sientate"

\S Opuesto a \s

\cX Carácter de control X \c9 El tabulador

\oNN Carácter octal NN

\xhh El hexadecimal hh /\x41/ Encuentra la A (ASCII Hex41)

en "letra A"


Topicos Internet

SSEENNTTEENNCCIIAASS DDEE CCOONNTTRROOLL YY FFLLUUJJOO

El orden en que se ejecutan las instrucciones de un programa es, por defecto, secuencial

ejecuta instrucción tras instrucción. Así un programa se escribirá como una sucesión de

instrucciones o sentencias, utilizando un punto y coma para indicar el final de la

instrucción. Pueden agruparse una serie de sentencias en un bloque encerrándolas entre

llaves. A veces es necesario alterar este orden para ello se utilizan las instrucciones de

control: condicionales, selección y bucles.

SENTENCIAS CONDICIONALES

Una sentencia condicional es una instrucción en la que se hace una comparación y según el

resultado verdadero o falso (true o false) de la misma el programa seguirá ejecutando una u

otra instrucciones. La condicional mas simple que podemos escribir es aquella que ejecuta

u omite una serie de sentencias dependiendo de si la comprobación da verdadero o falso. La

sintaxis de esta sentencia es.

if (condición)

{bloque a ejecutar si la condición es cierta}

else

{bloque a ejecutar si la condición es falsa}

Si omitimos la parte del else tendremos una condicional simple. Esta sintaxis en algunos

casos puede simplificarse utilizando la siguiente forma:

(condición) ?{bloque si cierta} : {bloque si falsa}

Ejemplo: Evitar realizar una división con cero

.......

if (div == 0)

alert('No se puede dividir por 0');

else

coc = num / div;

.........

Ejemplo: usando la segunda forma:

............

cad = (num >= 0) ? ' + ' : ' - ';

........

En este ejemplo cad tomará el valor + si num es positivo o cero y el - si es negativo. Las

sentencias if pueden anidarse, es decir, dentro de una sentencia if pueden incluirse mas

sentencias if.

Las condiciones pueden ser sencillas como en estos ejemplos o pueden enlazarse usando

los operadores && y || (AND y OR lógicos).

Ejemplo: comprobar si un número está comprendido entre 1 y 5:

if ((num>=1) && (num < 5)


Topicos Internet

{

lista[indice] = 'Muy bajo';

bajos++;

}

indice++;

En este ejemplo si num está entre 1 y 5 (excluido) se anota en una lista la palabra 'Muy

bajo' y se incrementa la variable bajos. Como vemos no se ha usado la parte de else y como

se deben ejecutar mas de una sentencia las hemos encerrado entre llaves. Si num no cumple

la condición el programa se salta este bloque. En cualquier caso la siguiente instrucción que

se ejecute tras el condicional será la que incrementa el valor de indice.

SELECCIÓN MÚLTIPLE

La estructura condicional permitía elegir entre dos posibles caminos en la ejecución de un

programa: si la condición era cierta se ejecuta un bloque y si no se ejecuta otro. Pero

pueden existir casos en los que el programa deba tener mas de dos alternativas, por ejemplo

si queremos un programa que presente un título en un idioma de cuatro posibles. Esto

puede solucionarse mediante varios if anidados.

Ejemplo tenemos que elegir entre idiomas: castellano, ingles, francés y alemán. if (leng == "castellano")

pagCast();

else

if (leng == "ingles")

pagIng();

else

if (leng == "frances")

pagFran();

else

if (leng == "alemán")

pagAlemt();

else

error('idioma no presente');

Como vemos resulta un código bastante complejo. Para estos casos disponemos de la

sentencia switch...case...default, de selección múltiple. El ejemplo anterior quedaría:

... ... ...

switch (idioma) {

case 'castellano' :

pagCast();

break;

case 'ingles' :

pagIng();

break;

case 'frances' :

pagFran();

break;

case 'alemán' :

pagAlem();

break;

default :

error ('Idioma no presente');


Topicos Internet

}

Durante la ejecución se compara la variable idioma con cada uno de los posibles valores y

cuando coincidan ejecuta el código correspondiente. La instrucción break pone fin al

bloque y hace que el programa salte a la instrucción siguiente a la sentencia switch(), si se

omite el programa continuaría con la siguiente comparación. La sección del default es

opcional, su finalidad es ejecutar algún código cuando ninguna de las condiciones se

cumpla.

BBUUCCLLEESS

A veces es necesario repetir un mismo conjunto de sentencias varias veces. Por ejemplo

para borrar todos los elementos de un array simplemente debemos hacer delete en cada uno

de ellos, es una sentencia que se repetirá tantas veces como el número de elementos que

tenga el array. Este es un típico trabajo para las estructuras repetitivas o bucles. En esencia

la ejecución de un bucle consiste en ejecutar repetidas veces una misma parte del programa

(cuerpo del bucle) hasta que se cumpla una determinada condición, en cuyo caso se acaba

la repetición y el programa continúa con su flujo normal. Existen varias sentencias de

bucles:

while (condición) {... }

do {...} until (condicion)

for(contador; condición; modcont){...}.

SENTENCIA WHILE

En esta estructura el programa primero comprueba la condición: si es cierta pasa a ejecutar

el cuerpo del bucle, y si es falsa pasa a la instrucción siguiente a la sentencia while.

Ejemplo:

var lista = new Array(10);

var ind = 0;

while (ind < 10)

{

lista[ind] = '0';

ind++;

}

En este ejemplo mientras que el valor almacenado en ind sea menor que 10 (la longitud del

array) irá almacenando en cada elemento del array lista un 0 e incrementando el valor de

ind. Cuando este valor sea 10 el programa no entrará en el cuerpo del bucle. Si no se

incrementara el valor de ind el bucle no acabaría nunca, el programa quedaría ejecutando

indefinidamente el cuerpo del bucle.

SENTENCIA DO...WHILE

Se trata de un bucle en el que la condición se comprueba tras la primera iteración, es decir

que el cuerpo del bucle se ejecuta al menos una vez.

Ejemplo


var ind = 0;


Topicos Internet

do

{

lista[ind] = '0';

ind++;

}while (ind < 10)

SENTENCIA FOR

Esta sentencia utiliza una variable de control a modo de contador para controlar la

repetición del cuerpo del bucle. La sentencia da un valor inicial a este contador y en cada

iteración lo modifica según le indiquemos y comprueba la condición, si se cumple ejecuta

el cuerpo del bucle, si no lo salta y continúa por la siguiente sentencia. Vemos el ejemplo

anterior usando esta sentencia:


var ind;

for (ind=0; ind < 10; ind++) {

lista[ind] = '0';

}

Como vemos el cuerpo del bucle no incrementa la variable ind, esto se indica en la

cabecera de la sentencia. Este código hace exactamente lo mismo que el anterior.

SENTENCIA FOR ... IN

Se trata de una variante de la sentencia for utilizada para iterar o recorrer todos los

elementos de un objeto o de un array. Usa una variable de control que en cada iteración

toma el valor del elemento del objeto recorrido.

Ejemplo:

var item;

for (item in document)

document.write(item+'<br>');

Con una matriz la variable de control toma el valor de los índices de la matriz, no su

contenido.

RUPTURA DE BUCLES

Aunque procuremos usara una programación estructura alguna vez puede ser necesario

interrumpir la repetición de un bucle o forzar una iteración del mismo, esto puede lograrse

mediante las sentencias break y continue. Son sentencias aplicables a cualquiera de las

estructuras de bucle en JavaScript.

break

La sentencia break interrumpe la iteración actual y envía al programa a la instrucción que

sigue al bucle.

var lista = new Array ('a','b','c','z','x','f');

var item ;


Topicos Internet

for (item in lista)

{

if (lista[item] == "z")

break;

document.write(lista[item]+'<br>');

}

Este ejemplo escribiría el contenido del array lista hasta encontrar una letra z.

continue

La sentencia continue interrumpe la iteración actual y envía al programa a la comprobación

de la condición, si esta es cierta continúa con la siguiente iteración.

var lista = new Array ('a','b','c','z','x','f');

var item ;

for (item in lista)

{

if (lista[item] == "z")

continue;

document.write(lista[item]+'<br>');

}

Este ejemplo escribiría el contenido del array saltándose la letra z.

OOBBJJEETTOOSS

ARRAYS

Como objetos que son, los arrays poseen sus propiedades y métodos predefinidos, que

son ampliables por el usuario. Es necesario hacer notar que estos métodos y propiedades

son los definidos para el JavaScript 3.0 de Microsoft. Netscape añade mas métodos en su

versión, pero los aquí definidos son comunes a ambos navegadores.

Propiedades

length

Como su nombre indica esta propiedad nos devuelve la longitud del array, es decir, el

número de elementos que puede almacenar. Su uso es muy simple:


tamagno = lista.length; /*tamagno almacenaría el valor 50 */

prototype

Esta es una propiedad muy potente en el sentido que nos permite agregar al objeto Array las

propiedades y métodos que queramos.

Array.protoype.descriptor = null;

dias = new Array ('lunes', 'Martes', 'Miercoles', 'Jueves',

'Viernes');

dias.descriptor = "Dias laborables de la semana";


Topicos Internet

En este ejemplo hemos creado una nueva propiedad para el objeto array, la propiedad

descriptor que podría utilizarse para darle un título a la matriz.

Métodos

concat(objArray)

Une el objeto Array con el array que se le pasa como argumento y devuelve el resultado en

un nuevo array, sin modificar los arrays que se concatenan.

join()

Convierte los elementos de un array en una cadena separados por el carácter que se le

indique. El separador por defecto es la coma.

a= new Array("Hola","Buenos","días");

document.write(a.join() +" <br>");

document.write(a.join(", ") +" <br>");

document.write(a.join(" + ") +" <br>") ;

La salida de este programa sería

Hola,Buenos,Días

Hola, Buenos, Días

Hola+Buenos+Días

reverse()

Invierte el orden de los elementos de un Array en el propio array, sin crear uno nuevo.

slice(ini, fin)

Extrae parte de un Array devolviéndolo en un nuevo objeto Array.

lista = new Array('a', 'b', 'c', 'd', 'e', 'f', 'g', 'h');

sublista = lista.slice(2,6);

alert(sublista.join());

En el ejemplo sublista contendrá los elementos desde el índice 2 al 5 ambos inclusive, o

sea, 'c', 'd', 'e', 'f'. Si se omite el segundo argumento se extrae hasta el último elemento del

array y si es negativo se entiende como contando desde el final.

sort(rutord)

Ordena alfabéticamente los elementos de un objeto Array. Opcionalmente podemos pasar

como argumento una función para determinar el orden, esta función posee dos argumentos

y devolverá un valor negativo si el primer argumento es menor que el segundo, cero si son

iguales y un valor positivo si el primer argumento es mayor que el segundo. En castellano

esto es necesario si queremos que la ñ y vocales acentuadas figuren en su lugar.

OBJETO OBJECT

Pues sí: existe un objeto llamado Object del que derivan todos los objetos de JavaScript,

los predefinidos y los definidos por el usuario. Esto significa que los objetos usados en

JavaScript heredan las propiedades y métodos de Object.


Topicos Internet

Métodos

toString

Devuelve una cadena dependiendo del objeto en que se use.

Objeto Cadena devuelta por el método

Array Los elementos del array separados por coma

Boolean Si el valor es false devuelve "false" si no devuelve "true"

Function La cadena "function nombre_de_función(argumentos){ [código]}"

Number Representación textual del número

String El valor de la cadena

Default "[object nombre_del_objeto]"

ValueOf Devuelve el valor del objeto dependiendo del objeto en que se use

Objeto Valor que devuelve el método

Array Una cadena formada por los elementos separados por coma

Boolean El valor booleano (true o false)

Date La fecha como el número de milisegundos desde el 1/1/1970, 00:00

Function La propia función

Number El valor numérico

String La cadena

Default El propio objeto

Propiedades

constructor

Esta propiedad contiene una referencia a la función que crea las instancias del objeto en

particular. Por ejemplo:

x = new String("Hola");

//En este caso s.constructor contendrá

// function String() { [native code] }

prototype


Topicos Internet

Es una propiedad utilizada para asignar nuevos métodos o propiedades a un objeto,

elementos estos que serán heredados por las diferentes instancias de ese objeto. Ejemplo:

Array.prototype.nombTipo = "matriz";

lista = new Array(9);

document.write(lista.nombTipo);

//Escribirá la palabra matriz que es el nombTipo

//que hemos dado para el objeto Array

OBJETO STRING

El objeto String se usa para manipular cadenas de caracteres. En JavaScript todo texto

encerrado entre comillas, dobles o simples, se interpreta como una cadena, así '45' no es el

número cuarenta y cinco sino la cadena formada por los caracteres 4 y 5. El objeto String

permite realizar operaciones con cadenas como concatenar o dividir cadenas, buscar texto,

extraer parte de un texto, etc.. La operación de crear una variable de este tipo se lleva a

cabo como es habitual con el operador new pudiéndole pasar un argumento para inicializar

la variable. Al usar un método o referirnos a una propiedad podemos usar el nombre de la

variable o una constante de cadena así el ejemplo

var mitexto = "Esta es una cadena";

var pos = mitexto.indexOf("una")

Puede también escribirse en la siguiente forma:

var pos = "Esta es una cadena". indexOf("una");

Propiedades

length: devuelve la longitud de la cadena.

prototype: permite agregar métodos y propiedades al objeto

Métodos

anchor(atrcad) Este método crea, a partir de un objeto String, una cadena conteniendo un elemento HTML

ANCHOR, con el atributo NAME igual a la cadena que se le pase en atrcad.

var refer = "Referencia num. 1" ;

var ancla = refer.anchor("Refer1");

El valor de la variable ancla será: <A NAME="Refer1">Referencia num. 1</a>

La sintaxis de este método permite usar una constante String en lugar del nombre de un

objeto String. El ejemplo anterior podría haber escrito como:

var ancla = "Referencia num. 1".anchor("Refer1");

big() Este método devuelve una cadena consistente en el objeto String rodeado con las etiquetas

<BIG> </BIG> del lenguaje HTML. Por ejemplo:


Topicos Internet

var mitexto = "Este es el texto";

mitexto = mitexto.big();

Tras la última sentencia la variable mitext contendrá

<big>Este es el texto</big>

Se puede usar una constante de cadena en lugar de un nombre de variable, así el ejemplo

podría haberse escrito:

var mitexto = "Este es el texto".big();

blink() Este método devuelve una cadena consistente en el String rodeado con las etiquetas

<blink></blink> del lenguaje HTML. Por ejemplo:

var mitexto = "Texto para intermitente";

mitexto = mitexto.blink();

Tras la última sentencia la variable mi texto contendrá el valor:

<blink>Texto para intermitente</blink>

bold() Este método devuelve una cadena consistente en el String rodeado con las etiquetas <B>

</B>, negrita, del lenguaje HTML. Por ejemplo:

var mitexto = "Texto para negrita";

mitexto = mitexto.bold();


<B>Texto para negrita</B>

charAt(atrent) Este método aplicado a una cadena devuelve el carácter que se encuentra en la posición

dada por el atributo atrent, teniendo en cuenta que el índice del primer carácter a la

izquierda de la cadena es 0 y el último es una unidad menor que longitud de la cadena. Si el

valor del atributo no es válido (igual o mayor que la longitud de la cadena o negativo) el

método devuelve el valor undefined. Por ejemplo el siguiente código devuelve la posición

del tercer carácter de la cadena nombre:

var nombre = "abcdefghij";

var car3 = nombre.charAt(2);

Devolverá "c", que es el tercer carácter por la izquierda (índice igual a 2). _


Topicos Internet

charAt(atrent) Este método aplicado a una cadena devuelve el código Unicode del carácter que se

encuentra en la posición dada por el atributo atrent, teniendo en cuenta que el índice del

primer carácter a la izquierda de la cadena es 0 y el último es una unidad menor que

longitud de la cadena. Si el valor del atributo no es válido (igual o mayor que la longitud de

la cadena o negativo) el método devuelve el valor NAN. Por ejemplo el siguiente código

devuelve el Unicode del tercer carácter de la cadena nombre:

var nombre = "abcdefghij";

var car3 = nombre.charAt(2);

Devolverá 99, que es el código de la letra 'c', el tercer carácter por la izquierda (índice igual

a 2).

concat(atrcad) Este método aplicado a una cadena le agrega la cadena pasada como atributo, atrcad, que

será una variable o constante literal, cualquier otro tipo es convertido a cadena. Por ejemplo

el siguiente código concatena 'Buenos ' y 'días':

var saludo = "Buenos ";

var hola = saludo.concat("días");

La variable hola contendrá "Buenos días", es lo mismo que si se hubiera escrito:

var hola = saludo + "días"

fixed()

Este método devuelve una cadena consistente en el objeto String rodeado con las etiquetas

<TT> </TT>, espaciado fijo o teletype, del lenguaje HTML. Por ejemplo:


mitexto = mitexto.fixed();


<TT>Este es el texto</TT>



var mitexto = "Este es el texto".fixed();

fontcolor(atrcad) Este método crea, a partir de un objeto String, una cadena conteniendo un elemento FONT

del lenguaje HTML con el atributo COLOR igual a la cadena que se le pase en atrcad.

var mitexto = "Texto en color" ;

mitexto = mitexto.fontcolor("#FFAC3E");


Topicos Internet

El valor de la variable ancla será:

<FONT COLOR="#FFAC3E">Texto en color</FONT>



var mitexto = "Texto en color".fontcolor("#FFAC3E");

fontsize(atrnum) Este método crea, a partir de un objeto String, una cadena conteniendo un elemento FONT

del lenguaje HTML con el atributo SIZE igual al valor entero que se le pase en atrnum.

var mitexto = "Texto de prueba" ;

mitexto = mitexto.fontsize(-1);

El valor de la variable mitexto será:

<FONT SIZE="-1">Texto de prueba</FONT>



var mitexto = "Texto de prueba".fontsize(-1);

fromCharCode( cod1, cod2, ... ) Este es un método global del objeto String que crea una cadena a partir de los códigos

Unicode que se le pasen como parámetros. Por ejemplo:

var cadena = String.fromCharCode(65,66,67);

La variable cadena contendrá "ABC", que son los caracteres con los códigos 65, 66 y 67._

indexOf( atrcad, desde)

Este método devuelve la primera posición dentro del objeto String donde comienza la

subcadena pasada como argumento en atrcad. Admite un segundo argumento opcional que

indica desde que posición debe realizar la búsqueda, si se omite comienza a buscar por el

primer carácter de la izquierda. Valores del segundo argumento negativos o mayores que la

longitud de la cadena se consideran 0. Si la subcadena no se encuentra el valor devuelto es -

1. Por ejemplo:

var cadena = "[email protected]";

var arroba = cadena.indexOf('@');

var punto = cadena.indexOf('.',arroba);


Topicos Internet

Este ejemplo devuelve en arroba la posición 9 mientras que punto contiene la 14 pues la

búsqueda se hizo desde la posición donde está el carácter arroba y encuentra el segundo

punto. Recuerda que las posiciones en las cadenas se cuentan desde 0.

italics() Este método devuelve una cadena consistente en el String rodeado con las etiquetas <I>

</I>, cursivas, del lenguaje HTML. Por ejemplo:

var mitexto = "Texto en cursiva";

mitexto = mitexto.italics();


<I>Texto en cursiva</I>

lastIndexOf(atrcad, desde) Este método devuelve la primera posición dentro del objeto String donde comienza la

subcadena pasada como argumento en atrcad, pero realizando la búsqueda de derecha a

izquierda. Admite un segundo argumento opcional que indica desde que posición debe

realizar la búsqueda, si se omite comienza a buscar por el primer carácter de la derecha,

valores negativos o mayores que la longitud de la cadena se consideran 0. Si la subcadena

no se encuentra el valor devuelto es -1. Por ejemplo:

var cadena = "[email protected]";

var arroba = cadena.lastIndexOf('@');

var punto = cadena.lastIndexOf('.',arroba);

Este ejemplo devuelve en arroba la posición 9 mientras que punto contiene la 2 pues la

búsqueda se hizo desde la posición donde está el carácter arroba hacia el principio de la

cadena encontrando el primer punto. Recuerda que las posiciones en las cadenas se cuentan

desde 0.

link(atrcad)_ Este método crea, a partir de un objeto String, una cadena conteniendo un elemento

ANCHOR del lenguaje HTML, con el atributo HREF igual a la cadena que se le pase en

atrcad.

var enlace = "Dirección" ;

enlace = enlace.link("http://www.ciudadfutura.com');

El valor de la variable enlace será:

<A HREF="http://www.ciudadfutura.com">Dirección</a>



var enlace = "Dirección".anchor("Refer1");


Topicos Internet

match( expreg ) Este es uno de los más potentes métodos para buscar subcadenas y realizar sustituciones

dentro de cadenas de texto. Permite usar patrones de búsqueda construidos con comodines

y texto, lo que se denominan expresiones regulares. Este método usa como argumento una

expresión regular y va buscando en el objeto alguna subcadena que concuerde con esa

expresión. Esta subcadena la devuelve en un array. Si no encuentra ninguna devuelve null.

Además actualiza el valor de una variable global RegExp que almacena en sus propiedades

diversa información acerca de la búsqueda realizada. Por ejemplo:

var frase = new String();

frase="Busco palabras con menos de cinco letras";

var result=new Array();

result=frase.match(/\b\w{1,4}\b/g);

document.write("Hallados: '+result+'<br>');

document.write("En la frase: " + RegExp.input);

Si pruebas el ejemplo obtendrás el siguiente listado

Hallados: con,de

En la frase: Busco palabras con menos de cinco letras

El patrón de búsqueda está encerrado entre dos barras / , y busca caracteres alfanuméricos (

\ w ) comprendidos entre límites de palabras ( \ b ) además hace una búsqueda global

(indicado por la g fuera de las barras).

replace ( expreg, nueva ) A vueltas con las expresiones regulares, difíciles pero potentes. Con este método todas las

cadenas que concuerden con la expreg del primer argumento son reemplazadas por la

cadena especificada en el segundo argumento, nueva, que puede contener elementos del

patrón mediante los símbolos $1 a $9. El resultado devuelto es la cadena con las

sustituciones realizadas. Por ejemplo vamos a cambiar palabra por frase en la frase "Cada

palabra dicha es una palabra falsa"

var linea = new String();

linea="Cada palabra dicha es una palabra falsa";

linea = linea.replace(/palabra/g, "frase");

document.write(linea);

Si pruebas el ejemplo obtendrás lo siguiente

Cada frase dicha es una frase falsa

En esta ocasión se ha usado un patrón con el modificador g de global por lo que cambia

todas las coincidencias, si se omite sólo se cambia la primera. En la cadena nueva pueden

usarse elementos del patrón, por ejemplo cambiemos las negritas a cursivas en la frase:

var patron = /(<b>)([^<]+)(<\/b>)/g;

var frase = "Cada <b>negrita</b> pasa a <b>itálica</b>";

document.write(frase+"<br>");

newstr = str.replace(patron, "<i>$2</i>");


Topicos Internet

document.write(frase);

Veras la frase antes y después del cambio: Cada negrita pasa a itálica

Cada negrita pasa a itálica

El $2 es un índice referido a los paréntesis del patrón, así $1 indica lo contenido en el

primer paréntesis (<b>) mientras que $3 es <\b>, el tercer paréntesis.

search ( expreg ) Es un método similar al método match pero más rápido. Este método realiza una búsqueda

en la cadena y devuelve el índice donde se produce la primera concordancia con el patrón o

-1 si no existe ninguna. Por ejemplo buscamos las cadenas 'lunes' o 'martes' en la frase cita,

la letra i del patrón indica que se debe ignorar el tipo mayúsculas o minúsculas en la

búsqueda:

var patron = /sábado|miércoles/i;

var cita = "La reunión será el lunes y el miércoles";

document.write(cita.search(patron)+"<br>");

Si pruebas el ejemplo obtendrás un 30, la posición de la palabra 'lunes'.

slice ( inicio, ultimo ) Este método devuelve la porción de cadena comprendida entre las posiciones dadas por los

argumentos inicio y ultimo, o el final de la cadena si se omite este segundo argumento. Si

ultimo es negativo, se interpreta como número de posiciones contadas desde el final de la

cadena. Si los argumentos no son números enteros, por ejemplo cadenas, se convierten a

números enteros como haría el método Number.parseInt().

var frase = "Autor: Luis Sepúlveda";

var nombre = frase.slice(7);

La variable nombre contendrá "Luis Sepúlveda". En este otro ejemplo usamos un segundo

argumento:

var frase = "Autor: Luis Sepúlveda";

var nombre = frase.slice(7, -10);

nombre contendrá "Gonzalo"', es decir desde la posición 7 hasta 10 posiciones antes del

final.

small() Este método devuelve una cadena consistente en el objeto String rodeado con las etiquetas

<SMALL> </SMALL>, reducir tamaño, del lenguaje HTML. Por ejemplo:


mitexto = mitexto.small();


Topicos Internet


<SMALL>Este es el texto</SMALL>



var mitexto = "Este es el texto".small();

split (separ) Devuelve un array conteniendo las porciones en que queda separada la cadena por el

separador indicado mediante el argumento separ, que será una expresión regular o una

cadena literal. Si este separador es una cadena vacía el texto queda desglosado en todos sus

caracteres. Si se omite el separador el resultado es un array de un elemento con la cadena

completa.

var linea=new String("Título: El portero");

var lista = linea.split(/:\s*/);

La variable lista es un array con dos elementos "Título" y "El portero". También

podriamos haberlo escrito como


lista = linea.split(":");

document.write(lista);

en este caso el primer elemento de lista es "Título" y el segundo " El portero" con un

espacio por delante. Por último si el separador es una cadena vacía:


lista = linea.split("");

document.write(lista);

la variable lista contendrá T,í,t,u,l,o,:, ,E,l, ,p,o,r,t,e,r,o.

strike() Este método devuelve una cadena consistente en el String rodeado con las etiquetas

<STRIKE> </STRIKE>, tachado, del lenguaje HTML. Por ejemplo:

var mitexto = "Texto para ver tachado";

mitexto = mitexto.strike();

Tras la última sentencia la variable mi texto contendrá el valor: <STRIKE>Texto para ver tachado</STRIKE>

sub() Este método devuelve una cadena consistente en el objeto String rodeado con las etiquetas

<SUB> </SUB>, subíndice, del lenguaje HTML. Por ejemplo:


Topicos Internet


mitexto = mitexto.sub();


<SUB>Este es el texto</SUB>



var mitexto = "Este es el texto".sub();

substr(inicio, largo) Devuelve una subcadena extraída del objeto string comenzando por la posición dada por el

primer argumento, inicio, y con un número de caracteres dado por el segundo argumento,

largo. Si se omite este último argumento la subcadena extraída va desde inicio hasta el

final de la cadena.

var linea=new String("Mi página es ideal);

var lista = linea.substr(3);

La variable lista contendrá "página es ideal".


var lista = linea.substr(3, 6);

Ahora la variable lista contendrá "página".

substring(ind1,ind2) Devuelve una subcadena del objeto string que comienza en la posición dada por el menor

de los argumentos y finaliza en la posición dada por el otro argumento. Si se omite este

último argumento la subcadena extraída va desde la posición indicada por el único

argumento hasta el final de la cadena. Si los argumentos son literales se convierten a

enteros como un parseInt().


var lista = linea.substr(3);

La variable lista contendrá "página es ideal".



Ahora la variable lista contendrá "página", al igual que en



sup()


Topicos Internet

Este método devuelve una cadena consistente en el objeto String rodeado con las etiquetas

<SUP> </SUP>, superíndice, del lenguaje HTML. Por ejemplo:


mitexto = mitexto.sup();

Tras la última sentencia la variable mitexto contendrá

<big>Este es el texto</big>



var mitexto = "Este es el texto".sup();

toLowerCase() Devuelve una cadena igual a la original pero con todos los caracteres en minúsculas. No

afecta como es lógico a caracteres no alfabéticos, o sea, a los números, letras acentuadas y

caracteres especiales como la Ñ

var linea=new String("´Hoy es Domingo");

linea = linea.toLowerCasesubstr();

La variable lista contendrá "hoy es domingo".

toUpperCase() Devuelve una cadena igual a la original pero con todos los caracteres en mayúsculas. No

afecta como es lógico a caracteres no alfabéticos, o sea, a los números, letras acentuadas y

caracteres especiales como la Ñ. Es muy útil a la hora de comparar cadenas para asegurarse

que dos cadenas no difieran sólo por que algún carácter esté en mayúscula o minúscula.

var linea=new String("´Hoy es Domingo");

linea = linea.toUpperCase();

La variable lista contendrá "HOY ES DOMINGO".

OBJETO DATE

El objeto Date contiene un valor que representa fecha y hora de un instante dado. Para crear

una instancia de este objeto usamos alguna de las siguientes sintaxis:

var fecha= new Date() var fecha= new date(número)

var fecha= new date(cadena)

var fecha=

new date(año, mes, día[, hora[, minutos[, seg[,ms]]]])

Los argumentos encerrados entre corchetes son opcionales. En la primera forma la variable

fecha contendrá la fecha del día actual. La segunda opción almacena en fecha la fecha dada

por el argumento como el número de milisegundos transcurridos desde la media noche del


Topicos Internet

1 de Enero de 1970. El tercer tipo se usa cuando la fecha se pasa en forma de cadena. Por

último la fecha puede crearse pasándole como argumento los números de año, mes, día,

hora y opcionalmente, hora, minuto, segundo y milisegundo.

Los años posteriores a 1970 puede escribirse con dos dígitos, pero es aconsejable usar

siempre cuatro dígitos por aquello de los efectos 2000.

var hoy = new date() /*fecha del día en hoy */

var evento = new Date("November 10 1990");

var otro = new Date("10 Nov 1990");

var otro = new Date("10/02/2000"); //Oct, 2, 2000

var instante = new Date(1990, 11, 10, 20,00);

Estas son tres posibles formas de declarar objetos de tipo fecha. Las dos últimas almacenan

el mismo día, pero en la última además se guarda la hora.

Donde se usen cadenas para indicar una fecha podemos añadir al final las siglas GMT (o

UTC) para indicar que la hora se refiere a hora del meridiano Greenwich, si no se toma

como hora local, o sea, según la zona horaria configurada en el ordenador donde se ejecute

el script.

Métodos

getDate() Nos devuelve el día del mes del objeto fecha al que se aplica. Este método controla por

supuesto el número de días de cada mes y contempla el caso de años bisiestos, incluida la

excepción del 2000. En el siguiente ejemplo se presenta en pantalla Hoy es día 2,

suponiendo que la fecha del sistema es 2-10-200. Primero creamos la variable fecha

instanciada como un objeto Date() para a continuación escribir directamente el valor de

getDate() aplicado a fecha

var fecha = new Date();

document.write("Hoy es día: "+fecha.getDate());

getDay() Nos devuelve el día de la semana del objeto fecha al que se aplica en forma numérica con

una cifra entre 0 para el domingo y 6 para el sábado. En el siguiente ejemplo se presenta en

pantalla Hoy es 1, suponiendo que la fecha del sistema es 2-Octubre-2000, o sea, lunes.

Primero creamos la variable fecha instanciada como un objeto Date() para a continuación

escribir directamente el valor de getDay() aplicado a fecha


document.write("Hoy es "+fecha.getDay());

Si echamos manos de un array podemos mejorar un poquito este ejemplo presentando el

nombre del DIA de la semana:


var diaSemana = new Array('domingo', 'lunes', 'martes',

'miércoles', 'jueves', 'viernes','sábado');

var dia = fecha.getDay();


Topicos Internet

document.write("Hoy es "+diaSemana[dia]);

Ahora se obtendría la más amigable frase Hoy es lunes.

getFullYear() Nos devuelve el año correspondiente del objeto fecha en formato completo es decir

incluyendo el siglo. Así si la fecha contiene 2-Octubre-2000, esta función nos dará 2000.

Por ejemplo creemos la variable fecha instanciada como un objeto Date() para a

continuación se presenta directamente el valor de getFullYear() aplicado a fecha, o sea,

2000.


document.write("El año actual es "+fecha.getFullYear());

Este método evita el efecto 2000 al presentar loa años siempre con cuatro dígitos.

getHours() Nos devuelve la sección horas en formato 0-24 almacenada en la parte dedicada a la hora

del objeto fecha al que se aplica. Así si la fecha contiene 12:40:00, esta función nos dará

12, pero si contiene 5:40:00 nos dará 17. Igualmente el método interpreta los modificadores

am / pm pero siempre devuelve la hora en formato de 24 horas. Por ejemplo creemos la

variable fecha instanciada como un objeto Date(), si son las 17:30:10 el valor de

getHoursr() presentará 17.


document.write("Son las "+fecha.getHours()+" horas.");

Puedes probar que ocurre con otros valores sin necesidad de cambiar la fecha y hora del

sistema de la siguiente manera:

var fecha = new Date("10-02-2000 08:20:00 pm");

document.write("Son las "+fecha.getHours()+" horas.");

Este caso presentará en pantalla Son las 20 horas

getMilliseconds() Nos devuelve los minutos de la sección dedicada a la hora almacenada en el objeto fecha al

que se aplica. Así si la fecha contiene en su parte de hora 12:40:08:640, esta función nos

dará 640. Por ejemplo creemos la variable fecha instanciada como un objeto Date(), si son

las 17:30:08:550 el valor de getMilliseconds() presentará 550.


document.write("Son las "+fecha.getHours() );

document.write(":" + fecha.getMinutes() );

document.write(":" + fecha.getSeconds() );

document.write(":" + fecha.getMilliseconds());


Topicos Internet

Esta función está presente en JScript de Microsoft y en ECMAScript pero no es soportada

por Netscape.

getMinutes() Nos devuelve los minutos de la sección dedicada a la hora almacenada en el objeto fecha al

que se aplica. Así si la fecha contiene en su parte de hora 12:40:08, esta función nos dará

24. Por ejemplo creemos la variable fecha instanciada como un objeto Date(), si son las

17:30:08 el valor de getMinutes() presentará 8.


document.write("Son las "+fecha.getHours() );


document.write(":" + fecha.getSeconds() ); ;

Si queremos que quede más presentable podemos completar con ceros por la izquierda

cuando el número (de horas, minutos o segundos) sea menor que 10. Esto es tan fácil como

se ve en el ejemplo:


var horas = fecha.getHours();

var mins = fecha.getMinutes();

var segs = fecha.getSeconds();

horas = (horas < 10)?"0"+horas:horas;

mins = (mins < 10)?"0"+mins:mins;

segs = (segs<10)?"0"+segs:segs;

document.write("Son las "+horas);

document.write(":" + mins);

document.write(":" + segs);

getMonth() Nos devuelve en forma numérica el mes correspondiente al objeto fecha al que se aplica.

Así para la fecha correspondiente al 10/Oct/2000, esta función nos dará 10, el número de

orden de Octubre. Por ejemplo creemos la variable fecha instanciada como un objeto

Date(),


document.write("Este mes es el "+fecha.getMonth() );

Si queremos que aparezca el nombre del mes en lugar del número debemos crear primero

un array de doce elementos y rellenarlos con los nombres de los meses, luego usamos el

resultado de getMonth() como índice a ese array

var array = new meses();


var nmes = fecha.getMonth();

mes[1] = "Enero";

mes[2] = "Febrero";

mes[3] = "Marzo";

mes[4] = "Abril";

... ...

document.write("Mes actual:" + meses[nmes]);


Topicos Internet

getSeconds() Nos devuelve los segundos de la sección dedicada a la hora almacenada en el objeto fecha

al que se aplica. Así si la fecha contiene en su parte de hora 12:40:08, esta función nos dará

8. Por ejemplo creemos la variable fecha instanciada como un objeto Date(), si son las

17:30:08 el valor de getSeconds() presentará 8.

var fecha = new Date(); document.write("Son las "+fecha.getHours() );


document.write(":" + fecha.getSeconds() );

Si queremos que quede mas presentable podemos completar con ceros por la izquierda

cuando el número (de horas, minutos o segundos) sea menor que 10. Esto es tan fácil como

se ve en el ejemplo:


var horas = fecha.getHours();

var mins = fecha.getMinutes();

var segs = fecha.getSeconds();

horas = (horas < 10)?"0"+horas:horas;

mins = (mins < 10)?"0"+mins:mins;

segs = (segs<10)?"0"+segs:segs;

document.write("Son las "+horas);

document.write(":" + mins);

document.write(":" + segs);

getTime() Nos devuelve la cantidad de milisegundos transcurridos desde el 1 de Enero de 1970 hasta

la hora almacenada en el objeto fecha al que se aplica. En el ejemplo que sigue creamos un

objeto Date con la fecha actual, a continuación escribimos el número de milisegundos dado

por este función, verás que este número habitualmente es muy grande, realmente esta

función puede ser útil para calcular el tiempo transcurrido entre dos instantes, por ejemplo

en un puzzle podría ser útil para calcular el tiempo que el jugador emplea en resolver el

puzzle, restando el getTime() obtenido al final del juego del getTime() obtenido al inicio.

var ahora = new Date();

document.write(ahora.getTime());

getTimezoneOffset() Esta función nos da la diferencia horaria en minutos del ordenador con respecto al

meridiano de Greenwich. El valor depende por tanto de la zona o huso horario para el que

esté configurado el ordenador, pudiendo ser negativo o positivo según esté en la zona

oriental u occidental. El ejemplo que muestra el uso de la función define la variable ahora

con la fecha actual y devuelve en minutos la diferencia horaria con la GMT, el resultado

depende de tu ordenador.


document.write(ahora.getTimezoneOffset());


Topicos Internet

getYear() Nos devuelve en forma numérica el mes correspondiente al objeto fecha al que se aplica.

Así para la fecha correspondiente al 10/Oct/2000, esta función nos dará 2000 en IExplorer

y 100 en Netscape. Por ejemplo creamos la variable fecha instanciada como un objeto

Date(), y luego extraemos el año


document.write("Este año es el "+fecha.getYear());

Si pruebas este ejemplo en Netscape y en Internet Explorer verás que éste último da el año

con cuatro dígitos mientras que el primero elimina el siglo.

parse(fecha) Nos devuelve la cantidad de milisegundos transcurridos desde el 1 de Enero de 1970

00:00:00 hasta la hora pasada en el argumento fecha como una cadena de caracteres. Este

método es un método global del objeto y por tanto no es necesario crear un objeto Date

para usarlo, como vemos en este ejemplo.

var transcurridos = Date.parse("1/1/2000 00:00:00");

document.write(transcurridos);

setDate(diames) Nos permite cambiar el día del mes del objeto fecha al que se aplica para poner el valor que

se pasado en el argumento diames. Este método controla por supuesto el número de días de

cada mes y contempla el caso de años bisiestos, incluida la excepción del 2000, de forma

que si pasamos como argumento 31 y el mes es de 30 días la función corrige la fecha

completa pasándola al día 1 del mes siguiente. Esto lo vemos en el ejemplo que sigue:

creamos una variable como un objeto Date con el último día de Septiembre (mes de 30

días) e intentamos poner el día a 31, luego comprobamos la fecha almacenada:

var fecha = new Date("1 Sep 2000");

fecha.setDate(31);

document.write("Hoy es día: "+fecha.toString());

Como verás si pruebas el ejemplo la fecha es corregida y pasa a 1 de Octubre.

setFullYear() Nos permite cambiar el año del objeto fecha por el valor pasado como argumento, un

número interpretado como año completo, o sea, que para poner el año 1995 se debe pasar

1995, no el 95. El ejemplo pone precisamente este valor en el campo año de la variable

fecha.


fecha.setFullYear(1995)

document.write(fecha.toString());

Como el año es de cuatro dígitos no hay problema de efecto 2000.


Topicos Internet

setHours() Nos permite modificar la hora almacenada en el objeto fecha al que se aplica y poner la que

se pasa como argumento. Lógicamente este argumento estará entre 0 y 24, aunque si se usa

un valor fuera de este rango la fecha es corregida en consecuencia. Por ejemplo si

intentamos poner la hora en 30 la fecha se adelanta 24 horas y se pone en las 6 horas,

cambiando además el día. Igualmente si se usa un número negativo en el argumento se

toma como horas antes de la última media noche del mismo día. Observa todo esto en el

ejemplo, donde al final de cada acción se presenta la fecha completa en forma de cadena:

var fecha = new Date("10 Sep 2000 00:00:00");

var nl="<br>";

fecha.setHours(20);

document.write("A las 20: "+fecha.toString()+nl);

fecha.setHours(30);

document.write("A las 30: "+fecha.toString()+nl);

fecha.setHours(-2);

document.write("A las -2: "+fecha.toString()+nl);

setMilliseconds() Nos permite modificar el número de milisegundos de la hora almacenada en el objeto fecha

al que se aplica, poniendo los milisegundos al valor pasado como argumento.

Habitualmente el argumento estará comprendido entre 0 y 1000.


var nl="<br>";

fecha.setMilliSeconds(900);

document.write(fecha.toString()+nl);

setMinutes(minact) Nos permite ajustar los minutos de la sección dedicada a la hora almacenada en el objeto

fecha al que se aplica. El nuevo valor para los minutos se pasa como argumento, que

habitualmente estará entre 0 y 59, aunque un valor fuera de este rango no da error sino que

ajusta el resto de la hora. Así 68 en el argumento adelanta el reloj una hora pone los

minutos a 8, mientras que un -4 pone los minutos a 56 (60 menos 4). Puedes ver lo que

ocurre en este ejemplo


var nl="<br>";

fecha.setMinutes(20);

document.write("Minact 20: "+fecha.toString()+nl);

fecha.setMinutes(68);

document.write("Minact 68: "+fecha.toString()+nl);

fecha.setMinutes(-4);

document.write("Minact -4: "+fecha.toString()+nl);

Como ves si es necesario, se ajusta la hora cuando el número de minutos supera el valor

setMonth(nummes)


Topicos Internet

Esta función se usa para modificar el mes del objeto fecha al que se aplica. El nuevo valor

se pasa como un número en el argumento. El valor deberá ser como es lógico numérico o

convertible a numérico y comprendido entre 0 (Enero) y 11 (Diciembre). Si el valor está

fuera del rango se toma el exceso sobre 11 y se corrige adecuadamente la fecha, y si es

negativo se toma como número de meses antes de Enero (-1 sería Diciembre, -2 sería

Noviembre, etc.). El ejemplo es muy sencillo, en este caso se cambia el mes de Septiembre

por Marzo


fecha.setMonth(2);

document.write("Minact 20: "+fecha.toString());

setSeconds(miliseg) Nos permite modificar el número de segundos de la hora almacenada en el objeto fecha al

que se aplica, poniendo los segundos al valor pasado como argumento. Habitualmente el

argumento estará comprendido entre 0 y 60.


var nl="<br>";

fecha.setSeconds(90);

document.write(fecha.toString()+nl);

setTime() Nos devuelve la cantidad de milisegundos transcurridos desde el 1 de Enero de 1970 hasta

la hora almacenada en el objeto fecha al que se aplica. En el ejemplo que sigue creamos un

objeto Date con la fecha actual, a continuación escribimos el número de milisegundos dado

por este función, verás que este número habitualmente es muy grande, realmente esta

función puede ser útil para calcular el tiempo transcurrido entre dos instantes, por ejemplo

en un puzzle podría ser útil para calcular el tiempo que el jugador emplea en resolver el

puzzle, restando el setTime() obtenido al final del juego del setTime() obtenido al inicio.


document.write(ahora.setTime());

setYear() Nos permite cambiar el año del objeto fecha por el valor pasado como argumento, un

número interpretado como año completo, o sea, que para poner el año 1995 se debe pasar

1995, no el 95. El ejemplo pone precisamente este valor en el campo año de la variable

fecha.


fecha.setFullYear(1995)

document.write(fecha.toString());

Como el año es de cuatro dígitos no hay problema de efecto 2000.

toLocaleString()


Topicos Internet

Esta función se usa para transformar el objeto fecha al que se aplica a una cadena de

caracteres según el estándard UTC (Universal Time Coordinates), denominación actual del

GMT (Greenwich Meridian Time). La hora se ajusta según la configuración del ordenador.

En el ejemplo que sigue la cadena devuelta será "Mon, 10 Apr 2000 02:00:00 UTC"

(Netscape cambia UTC por GMT)

var fecha = new Date("10 Apr 2000 02:00:00");

document.write(fecha.toUTCString());

Como ves existe una diferencia en la hora almacenada y la devuelta por la función, esto es

debido a que la cadena devuelta es la hora correspondiente a Greenwich, no la local del

ordenador. Existe una función similar, la toGMTString(), que es considerada como

obsoleta y que se mantiene por cuestiones de compatibilidad.

toUTCString(fecha) Nos devuelve la cantidad de milisegundos transcurridos desde el 1 de Enero de 1970

00:00:00 hasta la hora pasada en el argumento fecha. Este argumento se pasa como una

serie de números separados por comas en el orden: Año, mes, día, y opcionalmente: hora,

minuto, segundos. Este método es un método global del objeto y por tanto no es necesario

crear un objeto Date para usarlo, como vemos en este ejemplo que toma como fecha actual

el 1 de Noviembre de 2000 a las 00:00:00.

var transc= Date.UTC(2000,10,1);

document.write(transc);

OBJETO MATH

Es el objeto que usa JavaScript para dotar al lenguaje de funciones matemáticas avanzadas

y de constantes predefinidas, como el número PI.

Propiedades

Son las habituales constantes como el número e, PI y algunos otros valores habituales en

cálculos matemáticos.

E .- Constante de Euler la base para los logaritmos naturales

LN10.- Logaritmo natural de 10

LOG10E.- Logaritmo en base 10 de E

SQRT1_2.- Raíz cuadrada de 0.5 o sea la inversa dela raíz de 2

LN2.- Logaritmo natural de 2

LOG2E.- Logaritmo en base 2 de E

PI.- El conocido número pi


Topicos Internet

SQRT2.- Raíz cuadrada de 2

Métodos

abs(exprnum) Devuelve el valor absoluto, o sea, sin signo, del argumento. Si el argumento fuera no entero

será convertido a numérico siguiendo las reglas de la función parseInt() o parseFloat(). Su

sintaxis es tan simple como el ejemplo:

var numabs = Math.abs( - 45)

La variable numabs contendrá el valor 45.

acos(exprnum) Es una función trigonométrica que sirve para calcular el ángulo cuyo coseno es el valor

dado por el argumento, el arccos(). Este argumento deberá ser una expresión numérica o

transformable en numérica, comprendida entre -1 y +1 y el ángulo devuelto viene dado en

radianes.

var arco = Math. acos( 1)

La variable arco contendrá el valor 0.

Recuerda las matemáticas del cole. El radián es una unidad de medida de arcos tal que

2*pi radianes equivalen a 360º.

asin(exprnum) Es una función trigonométrica que sirve para calcular el ángulo cuyo seno es el valor dado

por el argumento, es decir, el llamado arcosen. Este argumento deberá ser una expresión

numérica, o transformable en numérica, comprendida entre -1 y +1 y el ángulo devuelto

viene dado en radianes.

var arco = Math.asin( 1 )

La variable arco contendrá el arco cuyo seno es 1, o sea, 1.57 o lo que es lo mismo pi / 2

radianes.



atan(exprnum) Es una función trigonométrica que sirve para calcular el ángulo cuya tangente es el valor

dado por el argumento, o sea el arctg(). Este argumento deberá ser una expresión numérica

o transformable en numérica, sin límites, y el ángulo devuelto viene dado en radianes.

var arco = Math.atan( 1 )


Topicos Internet

La variable arco contendrá el arco cuya tangente es 1, o sea, 0.7853981633974483 o lo que

es lo mismo pi / 4 radianes (45º).



atan2(coorX, coorY) Es una función trigonométrica que sirve para calcular el ángulo cuya tangente es el cociente

de sus argumentos, en otras palabras devuelve el ángulo desde el origen de coordenadas

hasta un punto cuyas coordenadas son los argumentos de la función. Los argumentos

deberán ser numéricos o transformables en numéricos, y el ángulo devuelto viene dado en

radianes.

var argum= Math.atan2( 10, 4)

La variable argum contendrá el arco cuya tangente es 10/4.


2*pi radianes equivalen a 360º . Es una función útil para trabajar con números complejos

pues realmente calcula el argumento de un complejo donde coorY es la parte real y coorX

es la imaginaria.

ceil(exprnum) Devuelve el valor del argumento redondeado por exceso, es decir el menor número entero

mayor o igual al argumento. Si el argumento fuera no numérico será convertido a numérico

siguiendo las reglas de la función parseInt() o parseFloat(). Su sintaxis es tan simple

como el ejemplo:

var redexceso = Math.ceil( 4.25)

La variable redexceso contendrá el valor 5.

cos(exprnum) Es una función trigonométrica que sirve para calcular el coseno del ángulo pasado como

argumento en radianes. Este argumento deberá ser una expresión numérica o transformable

en numérica.

var coseno = Math.cos( Math.PI/2)

La variable coseno contendrá el valor 0, que es el coseno de pi/2 radianes (90º).

exp(exprnum) Devuelve el valor del número e (constante de Euler, aproximadamente 2,178) elevada al

exponente dado por el argumento. Si el argumento fuera no entero será convertido a

numérico siguiendo las reglas de las funciones parseInt() o parseFloat(). Su sintaxis es tan

simple como el ejemplo:


Topicos Internet

var e4 = Math.exp(4)

La variable e4 contendrá el valor e4. El número e es la base de los logaritmos neperianos

por lo que esta función sirve para calcular antilogaritmos.

floor(exprnum) Devuelve el valor del argumento redondeado por defecto, es decir, el mayor número entero

menor o igual al argumento. Si el argumento fuera no numérico será convertido a numérico

siguiendo las reglas de la función parseInt() o parseFloat(). Su sintaxis es tan simple

como el ejemplo:

var redexceso = Math.floor( 4.75)

La variable redexceso contendrá el valor 4.

log(exprnum) Devuelve el logaritmo natural o neperiano, o sea, en base al número e, del argumento. Si el

argumento fuera no numérico será convertido a numérico siguiendo las reglas de la función

parseInt() o parseFloat(). Si el argumento fuera un valor negativo esta función devuelve

NaN. Su sintaxis es tan simple como el ejemplo:

var logaritmo = Math.log( 1000)

La variable logaritmo contendrá el valor 6.907755278982137 .

max(num1, num2) Devuelve el mayor de los dos números o expresiones numéricas pasadas como argumentos.

Si alguno de los argumentos fuera no numérico será convertido a numérico siguiendo las

reglas de la función parseInt() o parseFloat(). Su sintaxis es tan simple como el ejemplo:

var mayor = Math.wax( 12, 5)

La variable mayor contendrá el valor 12.

min(num1, num2) Devuelve el menor de los dos números o expresiones numéricas pasadas como argumentos.

Si alguno de los argumentos fuera no numérico será convertido a numéricos siguiendo las

reglas de la función parseInt() o parseFloat(). Su sintaxis es tan simple como el ejemplo:

var menor = Math.min( 12, 5)

La variable menor contendrá el valor 5.

pow(base, exp)


Topicos Internet

Calcula la potencia de un número, dado por el argumento base, elevado al exponente dado

por el argumento exp. Si alguno de los argumentos fuera no numérico será convertido a

numérico siguiendo las reglas de la función parseInt() o parseFloat(). Su sintaxis es tan


var potencia = Math.pow( 2, 4)

La variable potencia contendrá el valor 16.

random() Calcula un número aleatorio, realmente seudo-aleatorio, comprendido entre 0 y 1 ambos

inclusive. Cada vez que se carga el intérprete de JavaScript se genera una semilla base para

el cálculo. No lleva argumentos y su sintaxis es tan simple como el ejemplo:

var azar = Math.random()*10

La variable azar contendrá un número al azar entre 0 y 10.

round(exprnum) Devuelve el valor entero mas próximo al número pasado como argumento, es decir,

redondea. Si la parte decimal del argumento es 0.5 o mayor devuelve el primer entero por

encima del argumento (redondeo por exceso) en caso contrario devuelve el entero anterior

al argumento (redondeo por defecto). Si el argumento fuera no entero será convertido a

numérico siguiendo las reglas de la función parseInt() o parseFloat(). Su sintaxis es tan


var entero1 = Math.random(4.25)

var entero2 = Math.random(4.65)

La variable entero1 contendrá el valor 4 mientras entero1 que contendrá 5.

sin(exprnum) Es una función trigonométrica que sirve para calcular el seno del ángulo pasado como


en numérica.

var seno = Math.sin( Math.PI/2)

La variable seno contendrá el valor 1, que es el seno de pi/2 radianes (90º).

sqrt(exprnum) Devuelve la raíz cuadrada del valor pasado como argumento. Si el argumento fuera no

entero será convertido a numérico siguiendo las reglas de la función parseInt() o

parseFloat(). Si el argumento fuera negativo o cualquier otro valor no numérico devolverá

NaN. Su sintaxis es tan simple como el ejemplo:

var raiz = Math.sqrt( 49)


Topicos Internet

La variable raiz contendrá el valor 7.

tan(exprnum) Es una función trigonométrica que sirve para calcular la tangente del ángulo pasado como


en numérica.

var tangente = Math.tan( Math.PI/4)

La variable tangente contendrá el valor 1, que es la tangente de pi/4 radianes (45º).

html css javascript

Documents