HTML Css Javascript

Pginas Web
HTML
CSS
JAVASCRIPT
Ing Roger E. Alarcn Garca
2006
Pginas Web
LENGUAJE HTML................................................................................................................4
INTRODUCCIN..............................................................................................................4
QUE ES HMTL?...............................................................................................................4
ESTRUCTURA DE UNA PAGINA HTML.......................................................................5
CMO SE UTILIZAN LOS COLORES EN HTML?.....................................................7
TRABAJANDO CON TEXTO...........................................................................................7
ENCABEZADOS...........................................................................................................7
FORMATO DEL TEXTO...............................................................................................8
ETIQUETA FONT Y SUS PARMETROS...................................................................9
CARACTERES ESPECIALES......................................................................................9
CARACTERES DE CONTROL..................................................................................10
FORMATEO DE PARRAFOS......................................................................................11
ETIQUETA BARRA HORIZONTAL...........................................................................11
ENLACES Y ANCLAS....................................................................................................12
ANCLAS DE REFERENCIA.......................................................................................12
ANCLAS NOMINALES..............................................................................................13
OBJETOS MULTIMEDIA...............................................................................................13
MANIPULACIN DE IMGENES............................................................................13
MANIPULACIN DE AUDIO....................................................................................15
MANIPULACIN DE VIDEO....................................................................................16
MANIPULACIN 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
INTRODUCCIN............................................................................................................33
HOJAS DE ESTILO.........................................................................................................33
ESTRUCTURA DE UNA HOJA DE ESTILOS...............................................................33
DEFINICIN DE HOJAS DE ESTILO EN FICHEROS EXTERNOS..........................36
REGLAS DE IMPORTANCIA EN LOS ESTILOS.........................................................36
ATRIBUTOS DE LAS HOJAS DE ESTILO...................................................................37
DEFINICIN DE ATRIBUTOS DE LAS HOJAS DE ESTILO.....................................38
DEFINICION DE CLASES DE ESTILOS......................................................................41
CARACTERISTICAS AVANZADAS DE LAS CSS.......................................................42
EFECTOS PARA FORMULARIOS.................................................................................43
CREANDO BORDES PUNTEADOS..........................................................................43
ESTILOS EN CAMPOS DE TEXTO...........................................................................44
JAVA SCRIPT.......................................................................................................................46
INTRODUCCIN AL LENGUAJE JAVASCRIPT.........................................................46
JAVASCRIPT....................................................................................................................46
SINTAXIS JAVASCRIPT.................................................................................................47
CASE SENSITIVE.......................................................................................................48
SEPARAR LNEAS DE CDIGO...............................................................................48
ESPACIOS EN BLANCO............................................................................................48
BACKSLASH...............................................................................................................48
ABRIENDO Y CERRANDO GRUPOS.......................................................................48
COMENTARIOS..........................................................................................................49
VARIABLES Y NOMBRES DE FUNCIONES...........................................................49
PALABRAS RESERVADAS........................................................................................49
PROGRAMACION BASICA...........................................................................................50
VARIABLES Y DATOS...............................................................................................50
TIPOS DE DATOS.......................................................................................................51
OPERADORES............................................................................................................52
OPERADORES ARITMTICOS.................................................................................52
OPERADORES BINARIOS.........................................................................................53
OPERADORES RELACIONALES.............................................................................54
OPERADORES LGICOS..........................................................................................55
CONVERSIN EXPLCITA DE TIPOS.....................................................................56
FUNCIONES GLOBALES..........................................................................................56
EXPRESIONES REGULARES...................................................................................57
SENTENCIAS DE CONTROL Y FLUJO........................................................................59
SENTENCIAS CONDICIONALES.............................................................................59
SELECCIN MLTIPLE............................................................................................60
BUCLES...........................................................................................................................61
SENTENCIA WHILE...................................................................................................61
SENTENCIA DO...WHILE..........................................................................................61
SENTENCIA FOR........................................................................................................62
SENTENCIA FOR ... IN...............................................................................................62
RUPTURA DE BUCLES..............................................................................................62
OBJETOS..........................................................................................................................63
ARRAYS.......................................................................................................................63
OBJETO OBJECT........................................................................................................64
OBJETO STRING........................................................................................................66
OBJETO DATE.............................................................................................................75
OBJETO MATH...........................................................................................................83
Lenguaje HTML
Tpicos Internet
LENGUAJE HTML
INTRODUCCIN
El World Wide Web (WWW) es un sistema que contiene una cantidad de informacin casi
infinita. Pero esta informacin debe estar ordenada de alguna forma de manera que sea
posible encontrar lo que se busca. La unidad bsica donde est almacenada esta
informacin son las pginas Web. Estas pginas se caracterizan por contener texto,
imgenes, animaciones... e incluso sonido y video.
Una de las caractersticas ms importantes de las pginas Web es que son hipertexto. Esto
quiere decir que las pginas no son elementos aislados, sino que estn unidas a otras
mediante los links o enlaces hipertexto. Gracias a estos enlaces el navegante de Internet
puede pulsar sobre un texto de una pgina para navegar hasta otra pgina. Ser cuestin del
programador de la pgina inicial decidir que palabras o frases sern 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 orgenes el
WWW constaba nicamente de texto en la actualidad es un sistema principalmente grfico
y se puede hacer que las enlaces sean, no slo texto, sino imgenes, videos, Botones,... en
definitiva cualquier elemento de una pgina.
QUE ES HMTL?
HTML es el acrnimo 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 pgina Web.
Para utilizar etiquetas en HTML se deben encierran entre < y >, su estructura en la pgina
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 instruccin, 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 an especifica ciertos atributos que se pueden manipular de la etiqueta como se
ver posteriormente, se tendra 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
Tpicos Internet
ESTRUCTURA DE UNA PAGINA HTML

Bsicamente consta de cuatro pares de etiquetas:
<HTML>
<HEAD>
<TITLE>Nuestra primera pgina</TITLE>
</HEAD>
<BODY>
..........................
..........................
Lo que visualizar nuestra pgina
..........................
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Lenguaje HTML
Tpicos Internet
Ejemplo 1:
<HTML>
<HEAD>
<TITLE>UNPRG Universidad Nacional Pedro Ruiz Gallo</TITLE>
</HEAD>
<BODY>
Agregar imgenes, fondo y el men de opciones.
</BODY>
</HTML>
Nota: Almacenar esta informacin 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 dems etiquetas necesarias para mostrar la informacin
que se requiera en la pgina.
Etiqueta HEAD
La etiqueta <HEAD> y </HEAD> especifican la cabecera de la pgina web, en la que se
incluye la etiqueta <TITLE> y </TITLE> para especificar el ttulo de la pgina, pero
tambin se puede especificar otras etiquetas como por ejemplo <META> que permite
especificar palabras claves, fechas, autor, descripcin, etc, que sirven para los buscadores.
Etiqueta BODY
La etiqueta <BODY> y </BODY> especifican el contenido de la pgina, el texto,
imgenes, 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 pgina.
TEXT =#rrggbb define el color del texto de la pgina.
LINK=#rrggbb especifica el color de los enlaces o vnculos.
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
pgina.
BGPROPERTIES define el movimiento vertical del fondo.
Ejemplo 2:
<HTML>
<HEAD>
<TITLE>Atributos de Body</TITLE>
</HEAD>
Lenguaje HTML
Tpicos 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 pgina utiliza los atributos para la etiqueta BODY como son por ejemplo: se define el
color de fondo de la pgina como cyan (00FFFF), el color del texto como magenta
(FF00FF) y los colores de los enlaces.
CMO SE UTILIZAN LOS COLORES EN HTML?
Se pueden llegar a tener 16 millones de colores en una pgina web.
Existen dos formas para aplicar colores a una pgina 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 nmeros hexadecimales mediante la
siguiente estructura:
#RRVVAA en ingls #rrggbb
El color tiene un signo de numeral # antecediendo a los 6 nmeros.
Existen dos nmeros para cada color principal: rojo, verde y azul.
Cada uno de los nmeros vara hexadecimalmente {0,1,2....,9,A,B,...F}.
Ejemplos de Colores:
#RRVVAA
#FFFFFF
#FF0000
#0000FF
#00FFFF
#70DB93
#FF7F00
#C0C0C0
Color
Blanco
Rojo
Azul
Cyan
Agua Marino
Coral
Plomo
#RRVVAA
#000000
#00FF00
#FF00FF
#FFFF00
#000080
#A62A2A
#4F2F4F
Color
Negro
Verde
Magente
Amarillo
Azul Marino
Caf
Violeta
Utilizando estos datos, haremos una pgina 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
Tpicos Internet
TRABAJANDO CON TEXTO

ENCABEZADOS
Existen 6 diferentes niveles de encabezados:
<H1> </H1>
<H2> </H2>
<H3> </H3>
<H4> </H4>
<H5> </H5>
<H6> </H6>
Texto de mayor importancia (mas grande)

....
....
....
....
Texto de menor importancia (mas pequeo)
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 pgina nos muestra los diferentes encabezados que se pueden definir en una pgina
HTML utilizando estas etiquetas.
FORMATO DEL TEXTO
<B> ..... </B>
<I> ..... </I>
<U> . </U>
<S> .. </S>
<SUP> </SUP>
<SUB> ... </SUB>
<BIG> . </BIG>
<SMALL> </SMALL>
<BLINK> .... </BLINK>
Ejemplo 5:
<HTML>
<HEAD>
Negrita
Cursiva
Subrayar
Tachar
Letra en superndice
Letra en subndice
Incrementa el tamao del tipo de letra
Disminuye el tamao del tipo de letra
El texto parpadea. Solo en Netscape Navigator
Lenguaje HTML
Tpicos Internet
<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>
Qumica : H<SUB>2</SUB>O<br>
<BIG>Texto grande</BIG><br>
<SMALL>Texto pequeo</SMALL><br>
</BODY>
</HTML>
ETIQUETA FONT Y SUS PARMETROS
<FONT COLOR=valor FACE=valor SIZE=valor> .... </FONT>
Manipula una o ms caractersticas de un carcter o prrafo (obligatoriamente se debe
colocar un parmetro).
COLOR .- Especifica el color del texto que se puede escribir o reflejar en cdigo
hexadecimal.
FACE .- Indica el tipo de fuente (tipo de letra)
SIZE .- Especifica el tamao 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 tamao 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 tamao 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">
CARACTERES ESPECIALES
Lenguaje HTML
Tpicos Internet
Estos caracteres especiales corresponden a los cdigos de la tabla ASCII. Para la utilizacin
de estos caracteres se utiliza la forma siguiente:
&#valor;
el valor corresponde a un nmero superior a 127.
½ corresponde al (1/2), pero existen sinnimos como por ejemplo ½
Cdigo
á é í ó ú
Á É Í Ó Ú
ñ Ñ
¿
¡
º
ª
©
®

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 cdigos.
Cdigo
<
&lg;
&
"
Resultado
<
>
&
Ejemplo 7:
<HTML>
<HEAD>
</HEAD>
<FONT COLOR="#FF0000" FACE="arial" SIZE ="2">
Este texto aparecer de color Rojo con letra Arial y de tamao 2. </FONT><br>
½<br>
½<br>
á é í ó ú<br>
Á É Í Ó Ú<br>
ñ Ñ<br>
¿<br>
Lenguaje HTML
Tpicos Internet
¡<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 prrafo, permitiendo alinear siendo sus valores: LEFT,
RIGHT, CENTER, JUSTIFY. Insertar una lnea en blanco antes del texto, no requiere
etiqueta de cierre ni parmetros.
<CENTER> .... </CENTER>
Permite centrar todo el texto del prrafo.
<PRE WIDTH=valor> .. </PRE>
Esta etiqueta es til para representar cdigo fuente. El parmetro WIDTH especifica el
nmero mximo de caracteres en una lnea.
<DIV ALIGN=valor> ... </DIV>
Permite alinear el texto del prrafo, toma los mismos valores que la etiqueta <P>, pero no
inserta ninguna lnea antes de l.
Ejemplo 8:
<HTML>
<HEAD>
</HEAD>
Esto es un prrafo <P align="LEFT">Permite cambiar las caractersticas de un conjunto de
lneas escrito en cdigo HTML. Para esto se debe conocer etiquetas y parmetros, los
cuales no siempre son obligatorios, pero que permiten cambiar apariencias.</P>
Este texto esta justificado <P align="JUSTIFY">Permite cambiar las caractersticas de un
conjunto de lneas escrito en cdigo HTML. Para esto se debe conocer etiquetas y
parmetros, los cuales no siempre son obligatorios, pero que permiten cambiar
apariencias.</P>
<PRE>El cdigo <B><CENTER>Lenguaje HTML</CENTER></B>muestra el texto en
negrita, al centro y tal como est escrito</PRE>
Lenguaje HTML
Tpicos Internet
<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 lnea slida.
ALIGN permite alinear la barra tomando los mismos valores que la etiqueta <P>
WIDTH modifica el ancho, puede ser en porcentaje o en pxel.
SIZE especifica el grosor, dado en pxel.
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>
ENLACES Y ANCLAS
Una de las propiedades mas interesantes del Lenguaje HTML es la capacidad de incorporar
enlaces hipertexto, permitiendo que los diferentes objetos de la pgina: texto, imgenes y
otros estn 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 especficos de un documento
que pueden ser referenciados usando anclas de referencia.
Lenguaje HTML
Tpicos 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 cdigo 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 funcin es asignar un nombre o etiqueta al punto donde se encuentran segn
la metodologa 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 notacin 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 estndar 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 electrnico para
enviar un mensaje a un usuario determinado.
<A HREF=mailto:computo@usat.edu.pe>Contctenos Cmputo</A>
Lenguaje HTML
Tpicos Internet
OBJETOS MULTIMEDIA
MANIPULACIN DE IMGENES
Los formatos estndar de imgenes soportados por la web son:
JPG (Joint Photograhic Experts Group)
GIF (Graphic Interchange Format)
PNG (Portable Network Graphic)
Los formatos JPG permiten almacenar imgenes 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 tamao es recomendable que el peso estndar de una imagen debe ser menor o
igual a 10 Kb. Existen varias maneras de minimizar el tamao de los archivos de imagen, la
primera sera reducir el tamao de la imagen mediante el uso de software grfico, la
segunda incluira la reduccin del nmero de colores utilizados. Como referencia se debe
lograr trabajar con imgenes que no sobrepasen los 100 Kb.
Etiqueta para insertar imgenes y sus respectivos atributos
<IMG SRC=archivogrfico>
Atributos
Dimensionamiento de imgenes utilizando los atributos WIDTH(ancho) y HEIGHT

(alto), sus valores pueden ser representados en pixeles o en porcentaje.
Ejemplo :
<HTML>
<HEAD>
<TITLE>Manipulacin de Imgenes</TITLE>
</HEAD>
<BODY>
<img src="pescados.jpg" width="150">
</BODY>
</HTML>
Alineacin del texto que lo acompaa. ALIGN tiene los siguientes valores
- Top.- Coloca el punto ms alto de la imagen coincidiendo con lo ms alto de
la lnea de texto actual.
- Middle.- Alinea el punto medio(en altura de la imagen con la base del texto.
- Bottom.- Alinea el punto ms bajo de la imagen con la base del texto, es el
valor por defecto.
Lenguaje HTML
Tpicos Internet
Left.- Coloca la imagen a la izquierda del texto.

Right.- Colocal la imagen a la derecha del texto.
Se puede ingresar una descripcin breve o frase indicativa de la imagen, esta se

mostrar en caso la imagen no se visualice en el navegador. El parmetro es ALT.
<img src="pescados.jpg" alt=Imagen de pescados>
Borde de la imagen utilizando para esto el parmetro BORDER, por defecto el valor
es 0, se puede modificar el valor para variar el grosor en pxeles.
<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>Manipulacin de Imgenes</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>
MANIPULACIN DE AUDIO
Se puede incorporar sonido a una pgina web, siendo posible que se ejecute
automticamente como fondo sonoro de la pgina, o como una opcin para que el usuario
lo active. Los archivos de sonidos pueden ser de tipo mid, wav o mp3.
Lenguaje HTML
Tpicos Internet
Fondo sonoro para Internet Explorer

<BGSOUND SRC=Archivo_de_Audio LOOP=n>
El atributo LOOP especifica el nmero 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>Manipulacin 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
LOOP=true
HIDDEN=true
ejecuta automticamente
ejecuta ininterrumpidamente
crea una consola invisible
Ejemplo:
<embed src=sonido.mid
hidden=true>
width=200
height=55
autostart=true
loop=true
MANIPULACIN DE VIDEO
Para poder insertar secuencias de video en una pgina se puede utilizar la etiqueta <IMG>,
con los siguientes parmetros:
<IMG dynsrc=archivo_de_video>
Lenguaje HTML
Tpicos Internet
Las extensiones generales para video son: avi, ram, mov, mpeg.
Parmetros adicionales:
CONTROLS.- que especifica si se desean agregar los controles al video.
<IMG dynsrc=video.avi CONTROLS>
LOOP.- para indicar el nmero de veces que se visualiza.
<IMG dynsrc=video.avi LOOP=2>
Otra forma es utilizar la opcin 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>Manipulacin de Videos</TITLE>
</HEAD>
<BODY>
<IMG dynsrc="video.avi">
</BODY>
</HTML>
MANIPULACIN 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 vlidas 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 alineacin 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.
Lenguaje HTML
Tpicos Internet
ALTERNATE.- Desplaza alternadamente hacia un lado y otro,

siempre dentro de los lmites de la marquesina.
BGCOLOR.- Se modifica el color de fondo de la marquesina.
DIRECTION.- Modifica la direccin hacia la que se dirige el texto. Puede ser LEFT
o RIGHT.
SCROLLAMOUNT.- Define la cantidad de desplazamiento del texto en cada
movimiento de avance, expresado en pxeles. Cuanto mayor es el nmero, ms
rpido avanza.
SCROLLDELAY.- Define el tiempo entre cada movimiento de avance. Est
expresado en milisegundos. Cuanto mayor es el nmero ms lento avanza.
LOOP.- Especifica el nmero de veces que aparecer el texto. Es indefinido por
defecto.
Ejemplo
<HTML>
<HEAD>
<TITLE>Manipulacin 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>
MANIPULACION DE TABLAS
Una tabla es una estructura en forma de matriz, es decir, costa de filas y de columnas, cuya
interseccin se le denomina celda; que permite representar cualquier elemento de la pgina
(texto, listas, imgenes, 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 ->
</TR>
Lenguaje HTML
Tpicos Internet
<TR>
<!- Define una nueva fila ->

<!- Define una columna ->
</TR>
</TABLE>
Ejemplo:
<HTML>
<HEAD>
<TITLE>Manipulacin 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 nmero de pixels que separarn las celdas.
CELLPADDING.- Define el nmero 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 cdigo 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:
Lenguaje HTML
Tpicos Internet
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE border="2" width="50%" align="center" cellspacing="5" cellpadding="10"
bgcolor="blue">
<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 cdigo 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>
Lenguaje HTML
Tpicos Internet
<TD>C </TD>
</TR>
</TABLE>
</BODY>
</HTML>
Atributos que se pueden asignar a una Celda (TD)
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.
Tambin se puede especificar tanto en pixels como en porcentaje.
COLSPAN.- Especifica el nmero 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 parmetro).
Es por defecto uno. Si se pone igual a 0, se unirn todas las celdas que quedan a la
derecha.
ROWSPAN.-Especifica el nmero de celdas de la columna situadas debajo de la
actual que se unen a sta.
BGCOLOR.- Especifica un cdigo de color o nombre constante que indica el color
de fondo de una celda especfica.
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>
Lenguaje HTML
Tpicos Internet
</TABLE>
</BODY>
</HTML>
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 parmetro 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>
Lenguaje HTML
Tpicos Internet
<TD>A </TD>
<TD>B </TD>
<TD>C </TD>
</TR>
</TABLE>
</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">Investigacin
<BR> & Desarrollo</FONT></TD>
</TR>
</TABLE>
</CENTER>
</TD>
<TD WIDTH="75%"><CENTER>
<FONT COLOR="#FF9900"><B>Francisco Jos Rodrguez Valero<BR>Re-Ingeniera a
su alcance<BR>
</FONT>
<HR>
<TABLE>
<TR>
<TD><img src="imagenes/email1.gif"></TD>
<TD><B><A
href="mailto:correo@yahoo.com">correo@yahoo.com</A></B></TD>
</TR>
</TABLE></CENTER>
</TD>
</TR>
</TABLE>
</BODY>
Lenguaje HTML
Tpicos Internet
</HTML>
MANIPULACION DE FRAMES(MARCOS)
Los frames es una tcnica 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.
Una de las caractersticas ms importantes es que pulsando un enlace situado en un frame,
se puede cargar en otro frame una pgina determinada.
Estructura de un Frame
Los frames cambian la estructura de la pgina HTML tradicional, eliminando la parte del
cuerpo (BODY) y sustituyndola por el cdigo <FRAMESET>. As todos los cdigos que
antes aparecan dentro del cuerpo aparecern dentro del cdigo <FRAMESET>. La
estructura tpica a utilizar ser.
<HTML>
<HEAD>
<TITLE>Ttulo 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 tamao 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.
Lenguaje HTML
Tpicos Internet
<FRAMESET cols=120,*,100>, esto crea tres sub ventanas verticales, la primera y la

tercera tendrn 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 pxeles, la cuarta debe tener
el doble de espacio que la segunda, teniendo en cuenta como referencia el espacio sobrante.
Etiqueta FRAME
Esta etiqueta indica las propiedades de cada sub ventana. Es necesario indicar una etiqueta
<FRAME> para cada sub ventana creada. Los parmetros de <FRAME> son:
NAME.- Asigna un nombre a un frame para que despus podamos referirnos a l.

SRC.- Indica la direccin 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 decisin. Las otras opciones son YES o NO.
NORESIZE.- Este atributo no permite que el usuario cambie el tamao del frame.
FRAMEBORDER.- Si se iguala a cero se eliminar el borde.
MARGINWIDTH.- Permite cambiar los mrgenes horizontales dentro de un marco.
Se representa en pxels.
MARGINHEIGHT.- Permite cambiar los mrgenes verticales dentro de un marco.
Se representa en pxels
Si su navegador no reconoce los frameset y frame no se mostrar informacin de su pgina,

por esto se incluyen las etiquetas <NOFRAMES> y </NOFRAMES>, creando un
contenido alternativo que se visualizar en la pgina.
Ejemplo: Crea el archivo con el nombre de index.html
<HTML>
<HEAD>
<TITLE>Manipulacin 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
pgina sin frames.
</BODY>
</NOFRAMES>
Lenguaje HTML
Tpicos Internet
</FRAMESET>
</HTML>
El resultado de este cdigo en el navegador es mostrar las tres zonas creadas pero en cada
uno de ellos aparecer que no se puede mostrar la pgina. Esto implica que se debe crear
las pginas mencionadas en el contenido de esta archivo las cuales son: titulo.html,
contenido.html y menu.html.
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 pgina
</BODY>
</HTML>
Archivo: menu.html
<HTML>
<HEAD>
<TITLE>Menu</TITLE>
</HEAD>
<BODY>
<table>
<tr>
<td>Opcin 1 </td>
<td>Opcin 2 </td>
<td>Opcin 3 </td>
<td>Opcin 4 </td>
<td>Opcin 5 </td>
</tr>
</table>
</BODY>
</HTML>
Lenguaje HTML
Tpicos Internet
Presentacin de informacin
Por defecto, cuando se pulsa un enlace situado dentro de un frame, la nueva pgina 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, sera deseable que los enlaces del frame ndice se abrieran en el
otro frame. Esto es posible mediante a utilizacin del parmetro TARGET.
Este parmetro se puede colocar en tres etiquetas: <A>, <AREA> y <BASE>.
Este parmetro tiene los siguientes valores:
TARGET=nombre_ventana.- Muestra la nueva pgina en la ventana (frame) cuyo
nombre se indica.
TARGET=_top.- Elimina todos los marcos existentes y muestra la nueva pgina
en la ventana original sin marcos.
TARGET=_blank.- Carga la pgina en una nueva ventana.
TARGET=_self.- Muestra la nueva pgina en el marco donde est declarado el
enlace.
TARGET=_parent.- El enlace se muestra en el <FRAMESET> definido
anteriormente al actual. Si no hay ningn <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="resea.html" target="CENTRO">Resea</a></td>
<td><a href="http:/www.usat.edu.pe" target="_top">Pagina Usat</a></td>
<td>Opcin 4</td>
<td>Opcin 5</td>
</tr>
</table>
</BODY>
</HTML>
Implementacin de Frame Anidados.
La etiqueta <FRAMESET> puede ser utilizada en forma anidada con el objeto de
subdividir una subdivisin. Esto se realiza colocando otro <FRAMESET> donde
normalmente colocamos las etiquetas <FRAME>, del siguiente modo:
Ejemplo:
<HTML>
Lenguaje HTML
Tpicos Internet
<HEAD>
<TITLE>Manipulacin de Marcos o Frames ANIDADOS</TITLE>
</HEAD>
<FRAMESET COLS="25%,*">
<!- Crea dos sub ventanas verticales ->
<FRAME NAME="INDICE" src="indice.html">
<FRAMESET ROWS="*,60">
<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
pgina sin frames.
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
MANIPULACION DE FORMULARIOS
La habilidad de interactuar con los usuarios es una de las principales caractersticas de los
ordenadores y las redes informticas. 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
opcin y otros controles que nos permitirn aprovechar esa posibilidad de interactividad en
nuestras pginas Web.
El lenguaje HTML consta de una serie de etiquetas que permitirn crear de forma rpida y
sencilla numerosos elementos de entrada de datos. Estos elementos, que reciben el nombre
de controles, sern grficos en la mayora de navegadores. Un formulario no es ms que un
conjunto de estos controles cuya informacin ser enviada conjuntamente cuando el usuario
pulse sobre el botn de envo.
ESTRUCTURA DE UN FORMULARIO
Las etiqueta que permiten la creacin de un formulario son <FORM> ... </FORM>,
acompaados de atributos especiales.
<FORM ACTION= METHOD= ENCTYPE=text/plain NAME=identificacin>
. Cuerpo del formulario
. Botones de envo y de borrado.
</FORM>
Parmetros
ACTION.- Indica la accin que se debe efectuar. Esta puede ser, que los datos sean
enviados por email a una direccin indicada como por ejemplo:
Lenguaje HTML
Tpicos Internet
ACTION=mailto:direccin de email
O tambin, 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
algn lenguaje de programacin.
METHOD.- Especifica el mtodo usado para el envo de los datos. Con POST enva
datos en la entrada estndar del programa que trata el formulario y con GET los
datos se pasan por parmetro, en la lnea de comandos, al programa. El mtodo de
uso ms normal ser POST.
ENCTYPE=text/plain indica que los valores de los campos sern enviados como
un archivo de texto, perfectamente legible y sin codificar.
NAME.- Permite colocar una identificacin al formulario, puesto que es posible
tener varios formularios en la misma pgina.
OBJETOS DENTRO DEL FORMULARIO.
A. Cuadro de Texto
Existen tres formas de conseguir que el usuario introduzca texto en el formulario:
- Texto Corto(Una Lnea)
<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 tamao de la caja.
MAXLENGTH.-Especifica el nmero mximo de caracteres que puede introducir el
usuario. Por defecto no tiene lmites.
-
Palabras Secretas
<INPUT TYPE=password NAME=nombre_objeto VALUE=valor_inicial>
Es similar al anterior, pero en este caso no se imprimen los caracteres segn se van
introduciendo, se muestra un * en lugar del carcter pulsado.
Texto en mltiples lneas

<TEXTAREA NAME=nombre_objeto ROWS=numero COLS=numero>
Texto por defecto </TEXTAREA>
ROWS.- Representa el nmero de filas
COLS.- Representa el nmero de columnas que ocupar la caja de texto.
Permite el ingreso de texto que puede abarcar varias lneas, introducindolo en
forma de prrafo.
Ejemplo:
<HTML>
<HEAD>
Lenguaje HTML
Tpicos Internet
<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"
COLS="40">Escriba su Sugerencia</TEXTAREA>
</FORM>
</BODY>
</HTML>
B. Casillas de Verificacin
Aparecer una casilla en la pgina 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 envan los datos con el
botn activado, se enviar el objeto con el valor indicado, en caso contrario no se
enviar ningn valor.
CHECKED.- Es un parmetro que permite activar un control por defecto, es decir,
aparezca marcado.
C. Botones de Opcin
Se usa cuando la opcin 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 opcin se debe asignar a todos ellos el mismo
NAME.
Ejemplo:
<HTML>
<HEAD>
</HEAD>
<BODY>

Utilizando controles radio y checkbox
<FORM>
Controles Radio<br>
Lenguaje HTML
Tpicos Internet
<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
</FORM>
</BODY>
</HTML>
D. Eleccin entre mltiples opciones

Se usa para mens simples o mltiples.
Formato:
<SELECT NAME=nombre_objeto>
<OPTION> Primera Opcin
<OPTION> Segunda Opcin
........
<OPTION>Ensima Opcin
</SELECT>
Atributos adicionales
SIZE=valor .- Especifica el nmero de opciones que se pueden visualizar. Si es mayor
que 1 se observa una lista de seleccin y, si no, se ve una lista desplegable.
MLTIPLE.- Si lo indicamos podremos seleccionar ms de una opcin a la vez.
Ejemplo:
<HTML>
<HEAD>
</HEAD>
<BODY>
Utilizando Cuadro de Seleccin (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>
Lenguaje HTML
Tpicos Internet
<OPTION>Azul
<OPTION>Rojo
<OPTION>Verde
<OPTION>Amarillo
<OPTION>Blanco
</SELECT>
</FORM>
</BODY>
</HTML>
E. Botones de Envo 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 botn de envo.
Botn de Envo
<INPUT TYPE=submit VALUE=mensaje a mostrar>
El atributo VALUE muestra una etiqueta no editable que aparecer sobre el botn.
Botn de Borrado
<INPUT TYPE=reset VALUE=mensaje a mostrar>
Ejemplo:
<HTML>
<HEAD>
</HEAD>
<BODY>
Utilizando Botones de Enviar y Borrado<br>
<FORM ACTION="mailto:roger@hotmail.com" 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
HOJAS DE ESTILO EN CASCADA

INTRODUCCIN
Bajo el nombre de HTML Dinmico se engloba un conjunto de tcnicas con dos objetivos
claros: proporcionar un control absoluto al diseador de pginas HTML y romper con el
carcter esttico de este tipo de documentos. Hasta ahora, una vez mostrado un documento
HTML, nada poda hacerse para modificarlo.
Los tres componentes del HTML Dinmico son:
Hojas de Estilo
Posicionamiento de Contenidos
Fuentes Descargables
Las hojas de estilo permiten especificar atributos para los elementos de su pgina web. Con
el posicionamiento de contenidos se puede asegurar que las diferentes partes sern
mostradas exactamente donde usted quiera que aparezcan y podr modificar su aspecto y
posicin tras ser mostrada. Con las fuentes descargables podemos asegurar que siempre se
utilizara la fuente correcta, pues podemos enviar la fuente junto con la pgina.
HOJAS DE ESTILO
Las hojas de estilo vienen a intentar volver a separar en un documento el estilo lgico del
estilo fsico, dejando este ltimo en bloques de definicin de estilos separados de la
estructura del documento.
CSS son las siglas de "Cascade StyleSheet". Se trata de una especificacin sobre los estilos
fsicos aplicables a un documento HTML, y trata de dar la separacin definitiva de la lgica
(estructura) y el fsico (presentacin) del documento.
Una hoja de estilo consiste en una o ms definiciones de estilo. En sintaxis CSS, los
nombres de las propiedades y los valores se encierran entre llaves {}.
El criterio de seleccin determina a que elementos se aplica, o es aplicable, el estilo. Si el
criterio de seleccin es un elemento HTML, el estilo es aplicado a todos las instancias de
dicho elemento. El criterio de seleccin tambin puede ser una clase, un ID o contextual.
Cada una de estos criterios de seleccin se ver a continuacin.
En una definicin 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
ESTRUCTURA DE UNA HOJA DE ESTILOS

<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 prrafos, <p>, se vern en negrita y en color rojo. El
segundo har que todas las cabeceras, <h1>, aparezcan centradas.
Archivo: ejemplo1.html
<HTML>
<HEAD>
<TITLE>Utilizacin de Hojas de Estilo</TITLE>
<!-p {font-weight: bold; color: red;}
h1 {align: center;}
-->
</style>
</HEAD>
<BODY>
<h1>TITULO DE LA PAGINA</h1>
<p> Este prrafo esta definido con un estilo </p>
</BODY>
</HTML>
La definicin de estilos se puede encerrar entre comentarios (), de esta forma los
navegadores que no reconozcan la etiqueta <style> la ignorarn.
Es importante no incluir dobles comillas en la especificacin de valores de atributos en
sintaxis CSS.
CSS exige un estricto cumplimiento de sus normas de sintaxis. No omitir ningn punto y
coma entre los pares nombre/valor. Si lo hace se ignorara por completo la definicin de
estilo. De igual forma, si accidentalmente se aade un smbolo extrao la definicin ser
ignorada.
Archivo: Ejemplo2.html
<HTML>
<HEAD>
<TITLE> Ejemplo con bloque de estilo </TITLE>

Topicos Internet
<STYLE TYPE="text/css">
<!-BODY {font-family:Verdana,sans-serif;font-size:x-small;
margin-left:0.25in; margin-right:0.25in}
H2 {font-family:Verdana,sans-serif;font-size:14pt;color:red}
B, TD {font-family:Verdana,sans-serif;font-size:x-small;color:olive}
TH {font-family:Verdana,sans-serif;font-size:x-small;
color:white;background-color:#0080C0}
PRE,
TT,
CODE
size:9pt;color:maroon}
{font-family:Courier
New,Courier;font-
//-->
</STYLE>
</HEAD>
<BODY BGCOLOR=white>
<H2>Prueba de definicin de estilos en un bloque aparte</H2>
Como puede verse, la apariencia de esta pgina queda
completamente definida por los estilos que hemos
especificado en el bloque STYLE en la cabecera del
documento. Los mrgenes son ms amplios de lo habitual,
la <B>negrita</B> tiene un tamao y un color fijos, los
trozos de texto en teletipo como <TT>este fragmento</TT>
tambin tienen definida su fuente, tamao y color,
y vamos a ver cmo 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>
DEFINICIN DE HOJAS DE ESTILO EN FICHEROS EXTERNOS

Se puede definir una hoja de estilo en un fichero distinto del que contiene la pgina y
despus enlazarlos. Las ventajas de este mtodo son que podremos utilizar la hoja de estilo
desde cualquier documento HTML. Se podra pensar en una hoja de estilo as definida
como en un patrn que pudiera aplicarse a cualquier documento. De esta forma, se puede
aplicar un estilo a todas las pginas servidas desde un sitio Web sin ms que incluir un
enlace al fichero con la hoja de estilo en cada pgina.
La sintaxis para definir estilos en ficheros es idntica 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 prrafo esta definido con un estilo </p>
</body>
</html>

Topicos Internet
REGLAS DE IMPORTANCIA EN LOS ESTILOS

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 tambin
afectarn a etiquetas que estn dentro de esta etiqueta, o lo que es lo mismo, dentro de todo
el cuerpo.
En muchas ocasiones ms de una declaracin de estilos afecta a la misma porcin de la
pgina. Siempre se tiene en cuenta la declaracin ms particular. Pero las declaraciones de
estilos se pueden realizar de mltiples modos y con varias etiquetas, tambin entre estos
modos hay una jerarqua de importancia para resolver conflictos entre varias declaraciones
de estilos distintos para una misma porcin de pgina. Se puede ver a continuacin esta
jerarqua, primero ponemos las formas de declaracin ms generales, y por tanto menos
respetadas en caso de conflicto:
Declaracin de estilos con fichero externo. (Para todo un sitio web)
Declaracin de estilos para toda la pgina. (Con la etiqueta <STYLE> en la
cabecera de la pgina)
Estilos definidos en una parte de la pgina. (Con la etiqueta <DIV>)
Definidos en una etiqueta en concreto. (Utilizando el atributo style en la etiqueta en
cuestin)
Declaracin de estilo para una porcin pequea del documento. (Con la etiqueta
<SPAN>)
Ya vimos cmo incluir estilos en la pgina, de todas las maneras posibles e hicimos un
repaso con la lista anterior. Ahora ests en condiciones de empezar a usar las hojas de estilo
en cascada para mejorar tus pginas y aumentar la productividad de tu trabajo. Pero estate
atento a los siguientes captulos donde aprenders las lecciones que te faltan para dominar
bien la materia: conocer la sintaxis, los distintos atributos de estilos y otras cosas que
mejorarn tus pginas.
ATRIBUTOS DE LAS HOJAS DE ESTILO
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
continuacin. Muchos de estos valores son unidades de medida, por ejemplo, el valor del
tamao de un margen o el tamao de la fuente. Las unidades de medida son las siguientes:
Puntos
pt
Pulgadas
in
Centmetros
cm
pixels
px
Hasta aqu, queda dicho todo lo relativo a la sintaxis. En el siguiente captulo podrs
encontrar una lista de los atributos de las hojas de estilo en cascada.
DEFINICIN DE ATRIBUTOS DE LAS HOJAS DE ESTILO
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 pginas 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: #009900;
color
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 |
font-size:12pt;
small | medium | large | font-size: x-large;
x-large | xx-large
Unidades de CSS
Sirve para indicar el tamao de las fuentes de manera ms rgida y con mayor
exactitud.
font-family
serif | sans-serif |
font-family:arial,helvetica;
cursive | fantasy |
font-size: fantasy;
monospace
Todas las fuentes
habituales
Con este atributo indicamos la familia de tipografa del texto. Los primeros valores son
genricos, es decir, los exploradores las comprenden y utilizan las fuentes que el
usuario tenga en su sistema.
Tambin se pueden definir con tipografas normales, como ocurra en html. Si el
nombre de una fuente tiene espacios se utilizan comillas para que se entienda bien.
font-weight
normal | bold | bolder |
font-weight:bold;
lighter | 100 | 200 | 300
font-weight: 200;
| 400 | 500 | 600 | 700 |
800 | 900
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;
font-style: italic;

Topicos Internet
Es el estilo de la fuente, que puede ser normal, itlica u oblcua. El estilo oblique es
similar al italic.
PRRAFOS - TEXT
normal y unidades CSS line-height: 12px;
line-height: normal;
El alto de una lnea, y por tanto, el espaciado entre lneas. Es una de esas
caractersticas que no se podan modificar utilizando HTML.
text-decoration
none | [ underline ||
text-decoration: none;
overline || line-through ] text-decoration: underline;
Para establecer la decoracin de un texto, es decir, si est subrayado, sobre rayado o
tachado.
text-align
left | right | center |
text-align: right;
justify
text-align: center;
Sirve para indicar la alineacin 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 mrgenes en las pginas. Muy til y
novedosa.
text-transform
capitalize | uppercase |
text-transform: none;
lowercase | none
text-transform: capitalize;
Nos permite transformar el texto, haciendo que tenga la primera letra en maysculas
de todas las palabras, todo en maysculas o minsculas.
line-height
FONDO - BACKGROUND
Un color, con su
background-color: green;
nombre o su valor RGB background-color: #000055;
Sirve para indicar el color de fondo de un elemento de la pgina.
Background-color
Background-image
El nombre de la imagen
con su camino relativo
o absoluto
background-image: url(mrmol.gif) ;
background-image:
url(http://www.x.com/fondo.gif)
Colocamos con este atributo una imagen de fondo en cualquier elemento de la pgina.
BOX - CAJA
Unidades CSS
margin-left: 1cm;
margin-left: 0,5in;
Indicamos con este atributo el tamao del margen a la izquierda
Margin-right
Unidades CSS
margin-right: 5%;
margin-right: 1in;
Se utiliza para definir el tamao del margen a la derecha
Margin-top
Unidades CSS
margin-top: 0px;
margin-top: 10px;
Indicamos con este atributo el tamao del margen arriba de la pgina
Margin-bottom
Unidades CSS
margin-bottom: 0pt;
margin-top: 1px;
Con el se indica el tamao del margen en la parte de abajo de la pgina
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.
Padding-right
Unidades CSS
padding-right: 0.5cm;
Margin-left

Topicos Internet
padding-right: 1pt;
Indica el espacio insertado, en este caso por la derecha, entre el borde del elementocontenido 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 elementocontenido y el contenido de este.
Border-color
color RGB y nombre de border-color: red;
color
border-color: #ffccff;
Para indicar el color del borde del elemento de la pgina al que se lo aplicamos. Se
puede poner colores por separado con los atributos border-top-color, border-rightcolor, border-bottom-color, border-left-color.
Border-style
none | dotted | solid |
border-style: solid;
double | groove | ridge | border-style: double;
inset | outset
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 tamao 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 imgenes en sus
valores right y left.
clear
none | right | left
clear: right;
Si este elemento tiene a su altura imgenes 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;
font-family : verdana,arial;

Topicos Internet
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 prrafos.</p><br>
Esto es un texto que no tiene formato de prrafo
<br>
<table border=1>
<tr>
<td>Esta celda tiene estilo</td>
</tr>
</table>
</body>
</html>
DEFINICION DE CLASES DE ESTILOS
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 pgina. 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, ponindole como valor el nombre de la clase, de esta forma:
<ETIQUETA class="nombredelaclase">
Ejemplo de la utilizacin de clases
<html>
<head>
<title>Ejemplo de la utilizacin de clases en Hojas de Estilo</title>
<STYLE type="text/css">
.fondonegroletrasblancas {background-color:black;color:white;fontsize: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 prrafo con estilo de letras verdes</p>
<p class=fondonegroletrasblancas>
Esto es un prrafo con estilo de fondo negro y las letras blancas.</p>
</body>
</html>
CARACTERISTICAS AVANZADAS DE LAS CSS

Vamos a ver un uso de las CSS que puede ser muy interesante para hacer tablas con ttulos
que tengan un cierto estilo. Lo bueno de las CSS es que podemos definir el estilo una vez y
se puede utilizar en mltiples elementos de la pgina. Definiremos un estilo y la aplicacin
para hacer distintos tipos de decoracin de tablas.
Definicin de los estilos para ttulos de Tablas decorados con css
En la cabecera de la pgina colocamos la etiqueta <style> que sirve para definir los estilos a
utilizar en la pgina. 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 slido, 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 tamao de la fuente.
Utilizacin de los estilos para obtener una tabla decorada
Veamos el cdigo de la primera tabla del ejemplo.
<table width=280 height=18 cellpadding=2 cellspacing=2
class="estilotabla">
<tr><td class="estilocelda">Ttulo de seccin</td></tr>
<tr><td>Este es un texto de lo que podra ser la parte de abajo de la
tabla con el contenido relacionado con este ttulo.</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 tendra este cdigo.
<table width=280 height=18 cellpadding=2 cellspacing=2
class="estilotabla">
<tr><td class="estilocelda">Ttulo de seccin</td></tr>
</table>
<table width="280" cellpadding="2" cellspacing="2"><tr><td>
Este es un texto de lo que podra ser la parte de abajo de la tabla con
el contenido relacionado con este ttulo.
</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 declaracin de estilos slo afecta a la tabla de
arriba.

Topicos Internet
EFECTOS PARA FORMULARIOS

CREANDO BORDES PUNTEADOS
Se pueden utilizar algunos efectos visibles en una pgina 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 pgina web.

<table class="punteado" width=80% align="center">
<tr>
<td>
<b>Esto es un texto</b>
<br>
Nueva lnea de texto
</td>
</tr>
</table>
En este ejemplo, toda la tabla tendr un efecto de borde punteado. Si colocramos esa
clase nicamente en una celda, slo esa celda tendra el borde punteado. Es el caso del
ejemplo siguiente:
<table width=300>
<tr>
<td class="punteado"><b>Ttulo de la tabla</b></td>
</tr>
<tr>
<td>
Aqu podramos escribir informacin. Sera como el cuerpo de la tabla
que correspondiese con el titular que s tendra algn 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 lneas <textarea>.
Con estilos, podemos definir el formato de presentacin de cualquier elemento de la pgina.
Los campos de texto, que siempre tienen una forma muy especfica, tambin aceptan
especificaciones de estilos para variar su apariencia tpica.
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 slido, tamao de la
letra de 8 puntos, color del borde y de las letras verde un poco oscuro. Tambin se define un
espaciado entre las letras de 3 pixel.
<input
type="text"
name="campotexto1"
size="12"
style="backgroundcolor:#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 grisceo, borde de 1 pixel, borde de estilo slido, color del
borde gris ms oscuro, tamao del texto de 8 puntos y color de las letras azul.
<textarea cols="20" rows="3" name="campotexto2"
border: 1px solid #ff6666;"></textarea>
style="overflow:auto;
Este campo de texto con varias lneas, tambin 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 relacin 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 slo aparezca en caso que se necesite, es
decir, si el texto del campo supera las lneas que tiene reservadas el textarea. Si quisiramos
que no se vean las lneas nunca, podemos asignarle el valor hidden al atributo overflow. Por
lo que respecta a los otros estilos de este campo de texto de mltiples lneas, se han
definido 3 valores para el estilo del borde, en un nico atributo. Los estilos son borde de un
pxel, borde de estilo slido y borde de color rojo pastel.
<textarea cols="20" rows="3" name="campotexto3" readonly
style="overflow:auto; border-style:dashed; border-color:555555; borderwidth: 1px;">
Hola a todos los que lean esto.

Topicos Internet
Ejemplo de estilos en controles de formularios
</textarea>
En este campo textarea, hemos incluido tambin un texto con el que se inicializar su
contenido. Primero llamamos la atencin 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.
Tambin con estilos CSS se han definido una serie de valores para la apariencia, estos son:
mostrar las barras de desplazamiento slo 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
JAVA SCRIPT
INTRODUCCIN AL LENGUAJE JAVASCRIPT
Para conocer a profundidad lo que quiere decir lenguaje JavaScript debemos conocer
algunos trminos bsicos como programa que no es ms 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 nmeros y nos diga el resultado hasta algo tan complejo como
decirle que controle todo un edificio: temperatura, puertas, iluminacin. En nuestro caso es
algo bastante sencillo, vamos a decirle al ordenador que cuando presente nuestra pgina
web al visitante realice acciones como poner en la pgina la fecha y hora actual, hacer que
una imagen se mueva de un lado a otro, responder de una determinada forma a la pulsacin
de un botn del ratn, y muchas cosas ms, que se podrn ir conociendo a lo largo de este
manual.
Para escribir un programa no nos vale ni el castellano, ni el ingls, ni ninguno de los
lenguajes que habitualmente usa el hombre para comunicarse. Para entendernos con un
ordenador se utilizan los lenguajes informticos. 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 cdigo
fuente y la computadora va leyendo instruccin por instruccin y desarrollando las acciones
necesarias.
JAVASCRIPT
JavaScript es un lenguaje de programacin 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 utilizacin de JavaScript es exclusivamente en pginas web, no pudindose construir
programas independientes, lo que se puede escribir con este lenguaje sern scripts que el
navegador interpretar y mostrar en la Pgina Web.
Pero como es que los ejecuta?. Lo normal es que la ejecucin se realice de forma
automtica cuando el navegador carga una pgina, o cuando el usuario pasa el ratn por una
imagen, o cuando pulsa el botn 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 pgina.
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 funcin para que haga algo
predeterminado por nosotros. Por ejemplo cuando el navegador carga una pgina 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 ratn por una enlace se produce otro evento que puede aprovecharse para llamar a una
funcin 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 mtodos y propiedades. As
cuando se produce un evento podemos saber quien lo produce, en que posicin 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 instruccin, sigue por
la segunda y as hasta llegar al final. Esto es lo que se conoce como ejecucin secuencial o
lineal. Pero a veces es necesario saltarse instrucciones, por ejemplo, se construye una
pgina a la que slo pueden entrar determinadas personas, se deber escribir una funcin
que pida el nombre de quien desee ver la pgina, si es una persona autorizada muestra la
pgina y si no lo es no la muestra. El programa no ha seguido un flujo lineal, unas veces
ejecutar la parte de mostrar la pgina y otras no. Otra situacin bastante comn es cuando
se desea que el programa recorra todas las imgenes de tu pgina y vaya cambiando su
contenido, no se escribe el mismo cdigo una y otra vez, lo ideal sera escribir las
instrucciones y poderlas repetir. Cualquier lenguaje de programacin 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).
SINTAXIS JAVASCRIPT
Se requiere conocer lo bsico del lenguaje como por ejemplo donde se puede ubicar el
script desarrollado con java, si es sensible a maysculas y minsculas, 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 pgina 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 producirn errores en la pgina, por lo
tanto se pueden utilizar unas etiquetas para ocultar el cdigo definido en java, estas
etiquetas son:

Dentro de las cuales se puede escribir el cdigo respectivo.
<HTML>
<HEAD>
<TITLE>Pgina Web conteniendo cdigo en JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>

Topicos Internet
<!- - Ocultando el cdigo en java para los navegadores antiguos

.... Todo el cdigo (instrucciones) requeridas escritas en esta zona.
//fin del cdigo oculto - ->
</SCRIPT>
</HEAD>
<BODY>
Agregar la informacin que se desee mostrar en la pgina
</BODY>
</HTML>
CASE SENSITIVE
Java Script es un lenguaje sensible a maysculas y minsculas, es decir, en el lenguaje
EJEMPLO, ejemplo o Ejemplo sern tres diferentes variables que se pueden definir. Esto en
algunos casos provoca errores no en la programacin, sino en los resultados obtenidos.
SEPARAR LNEAS DE CDIGO
Java script utiliza el carcter punto y coma (;) para la separacin entre lneas de cdigo,
siendo muy parecido a la programacin 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 propsito 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 tambin 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 tambin crear mltiples lneas de comentario, para lo cual se deber utilizar los
caracteres /* para inicio y */ para cierre.
/* Esto es un comentario que se expresa en varias lneas
Para lo cual debemos seguir las indicaciones
De cmo poder crearlos.*/
VARIABLES Y NOMBRES DE FUNCIONES
Para la declaracin de variables o nombres de funciones se debe seguir las siguientes
reglas:
1. El primer carcter debe ser una letra o el smbolo de subrayado (_).
2. No se puede utilizar un nmero como primer carcter 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 podra
diferenciar entre un comando de javascript o una simple variable o nombre de funcin, es
por eso recomendable que el programador las utilice como palabras reservadas.
abstract
alert
arguments
Array
blur
boolean
Boolean
break
byte
callee
caller
captureEvents
case
catch
delete
do
document
double
else
enum
escape
eval
export
extends
final
finally
find
float
innerWidth
instanceof
int
interface
isFinite
isNaN
java
length
location
locationbar
long
Math
menubar
moveBy
Packages
pageXOffset
pageYOffset
parent
parseFloat
parseInt
personalbar
print
private
prompt
protected
prototype
public
RegExp
status
statusbar
stop
string
super
switch
synchronized
this
throw
throws
toolbar
top
toString
transient

Topicos Internet
char
class
clearInterval
clearTimeout
close
closed
confirm
const
constructor
continue
Date
debugger
default
defaultStatus
focus
for
frames
Function
function
goto
history
home
if
implements
imports
in
Infinity
innerHeight
moveTo
name
NaN
native
netscape
new
null
Number
Object
open
opener
outerHeight
outerWidth
package
releaseEvents
resizeBy
resizeTo
return
routeEvent
scroll
scrollbars
scrollBy
scrollTo
self
setInterval
setTimeout
short
static
try
typeof
unescape
unwtch
valueOf
var
void
watch
while
window
with
FALSE
TRUE
PROGRAMACION BASICA
VARIABLES Y DATOS
Dentro de la programacin se debe diferenciar entre variable y dato, las cuales son las
unidades bsicas de todo lenguaje. Por ejemplo el nombre de una persona es "Pedro", esta
palabra es un dato. El precio de un departamento en dlares 35000, este nmero es otro
dato. Estos datos no suelen usarse tal cual sino que se almacenan en unos elementos con
nombre denominados Variables. En este caso usaramos una variable, denominada
nombre, para guardar en ella "Pedro" o precio para guardar el 35000.
Una variable no es mas que una porcin de memoria especificada con un nombre en la cual
se puede almacenar informacin del usuario ya sea para mostrarla posteriormente o para
permitir realizar ciertos clculos internos, cabe sealar que la utilizacin de una variable
queda a criterio del programador. En otros lenguajes de programacin existen diferentes
tipos de variables en funcin del tipo de datos que pueden almacenar: variables para
cadenas, para nmeros enteros, para nmeros reales, etc. JavaScript es muy permisivo en
este aspecto de manera que una variable puede almacenar cualquier tipo de dato y adems
pueden crearse en cualquier parte del programa. Esto ltimo es cmodo pero peligroso pues
puede llevar a programas difciles de depurar y de modificar, es conveniente llevar un cierto
control sobre las variables que vas usando en cada funcin y declararlas al principio de la
misma.
Los criterios para definir el nombre de una variable son: utilizar cualquier combinacin de
letras y dgitos, mas el guin bajo, siempre que el primer carcter no sea un dgito y por
supuesto que no coincida con una palabra reservada del lenguaje, es decir, palabras con un
significado especial para el intrprete 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 direccin de un icono puede llamarse direc_icono. No
olvidarse que JavaScript diferencia entre maysculas y minsculas, as Edad y edad seran
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
funcin slo ser conocida dentro de esa funcin, 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 crendola 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 funcin verNavegador(). Observa que las variables estn creadas con la palabra clave
var, el uso de esta palabra es opcional, slo 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 ningn tipo de dato en concreto, se
dice que es Undefined. Es al asignarle un valor cuando pasa a ser de uno u otro tipo, segn
el dato que almacene.
Existen 6 tipos de datos:
String : cadenas de texto
Object : objetos
Number : valores numricos
Null
: nulo
Boolean : true o false
Undefined: no definido.
Podemos averiguar el tipo de dato que contiene una variable si utilizamos la funcin
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 numrico (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 informacin dada por el usuario o clculos.
OPERADORES
OPERADORES ARITMTICOS
En los primeros ejemplos de este tutor tan slo se han usado sentencias muy simples como
asignar un valor a una variable, mediante el operador de asignacin, =, o realizar
operaciones aritmticas, pero evidentemente JavaScript puede realizar mas operaciones.
En esta seccin y las siguientes se presentan los operadores de que dispone este lenguaje
clasificados en varios grupos, segn el contexto en el que se usen. Comenzamos con los
ms conocidos, los operadores aritmticos.
Suma +
Se trata de un operador usado para sumar dos valores numricos o para concatenar cadenas
entre s o nmeros y cadenas.
var var1 = 10, var2= "Buenos", var3 = " das", var4 = 31;
document.write(var1+var4) /* resultado 41 */
document.write(var2+var3) /* resultado: Buenos das */
document.write(var1+var3) /* resultando: 10 das */
Resta Operador usado para restar valores numricos. Puede actuar sobre un nico operando
numrico cambindole 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 aritmticas 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 %
Tambin llamado operador mdulo calcula el resto de una divisin.
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 operacin 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 asignacin (=) para cambiar el
valor de una variable numrica por incrementndolo, decrementndolo, multiplicndolo o
dividindolo 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 nmeros se representan en sistema binario de numeracin mientras que los
caracteres se convierten a cdigo ASCII, que son nmeros que se almacenan por tanto
codificados en binario. JavaScript ofrece los operadores tpicos 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 codificacin binaria.
Complementacin ~
Complementa una cadena binaria convirtiendo los 1 en 0 y los 0 en 1.
Por ejemplo el nmero 38 escrito en sistema binario es 00100110 si le aplicamos este
operador se convierte en 11011001, o sea el -39 (JavaScript usa codificacin en
complemento a 2 para los nmeros 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 divisin 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 lgico binario &
Realiza un AND lgico bit a bit entre dos valores. El AND lgico da como resultado 1 slo
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)
var op1 = 109, op2 = 38, res;

Topicos Internet
res = op1 & op2; /*res contiene 36 */

OR lgico binario |
Realiza un OR lgico bit a bit entre dos valores. El OR lgico da como resultado 0 slo 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 lgico binario ^
Realiza un XOR lgico bit a bit entre dos valores. El XOR lgico da como resultado 1 si
uno slo 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
nmeros 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
nmeros 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 nmeros 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 nmeros como
cadenas.
comp = hoy == ayer /* comp adquiere el valor true*/
Idnticos ===
Similar a == pero tambin 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 idnticos === respectivamente.
OPERADORES LGICOS
Los operadores lgicos se utilizan para realizar comparaciones entre valores, numricos o
no, dando como resultado un valor booleanos (true, false). La operacin lgica negacin
invierte el operando, si es true lo hace false y viceversa. Si se comparan nmeros con
cadenas, JavaScript intenta convertir internamente los datos. En los operadores relacionales
(>, <, >=, <=) intenta convertir los datos en tipo nmero. Para los operadores de igualdad
(== !=) intenta convertir los tipos de datos a cadena, nmero y booleano. Los operadores de
identidad (===, !==) no realizan conversin de tipo.
AND lgico &&
Este operador se utiliza para concatenar comparaciones, es decir, para comprobar varias
condiciones. El resultado slo 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 lgico ||
Como el anterior, sirve apra realizar comparaciones compuestas y slo devolver false
cuando todas las comparaciones los sean. Es decir basta que una comparacin 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
CONVERSIN EXPLCITA DE TIPOS

parseFloat(cadena)
Toma la "cadena" y la transforma en un nmero en coma flotante, si es posible.
parseFloat ("123.456") = 123.456
parseFloat ("123ABC") = 123
parseFloat ("ABC") = NaN
parseInt(cadena, nmero)
Devuelve nmeros enteros, el segundo argumento nos permite escoger la base de
numeracin (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 = nmero
Devuelve una cadena que contiene el nmero
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, tambin 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 cdigo JavaScript sin referirse a un objeto concreto.
La sintxis 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 nmero 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 da 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
cdigo en el formato %xx. Por ejemplo:
....
var cadena = "Buenos das";
document.write(escape(cadena));
...
Produce la frase "Buenos d%EDas", pues la (i acentuada) es el cdigo hexadecimal ED de
ese carcter.
unescape(cadarg)
Es inversa a la anterior, de manera que si la cadena contiene cdigos del tipo %xx son
convertidos al correspondiente carcter ASCII extendido.
....
var cadena = "Buenos d%EDas";
document.write(escape(cadena));
.....
Ahora se escribir "Buenos das", 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
mtodos 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 nmeros 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 patrn y se construye encerrando entre dos barras inclinadas ( / )
una serie de caracteres normales y smbolos especiales llamados comodines o
metacaracteres, (algo parecido a la orden dir *.bat usada en el DOS cuando queramos listar
los ficheros con extensin bat). Este patrn es una descripcin del texto que se est
buscando y JavaScript encontrar las subcadenas que concuerdan con ese patrn o
definicin. Las expresiones regulares se usan con el objeto Regular Expresion y tambin
dentro de los mtodos String.match, String.replace, String.search y String.split.
En la tabla que sigue se muestran los caracteres comodn usados para crear los patrones y
su significado, junto a un pequeo ejemplo de su utilizacin.
\
^
$
.
Significado
Marca de carcter especial
Comienzo de una lnea
Final de una lnea
Cualquier carcter (menos salto de
lnea)
Ejemplo
/\$ftp/
/^-/
/s$/
/\b.\b/
Resultado
Busca la palabra $ftp
Lneas que comienzan por Lneas que terminan por s
Palabras de una sola letra

Topicos Internet
|
()
[]
Indica opciones
Agrupar caracteres
Conjunto de caracteres opcionales
/(L|l|f|)ocal/ Busca Local, local, focal

/(vocal)/
Busca vocal
/escrib[aoe]/ Vale escriba, escribo, escribe
La tabla que sigue describe los modificadores que se pueden usar con los caracteres que
forman el patrn. Cada modificador acta sobre el carcter o el parntesis inmediatamente
anterior.
Descripcin
*
Repetir 0 o mas veces
+
Repetir 1 o mas veces
?
1 o 0 veces
{n}
Exactamente n veces
{n,} Al menos n veces
{m,n} entre m y n veces
Ejemplo
/l*234/
/a*mar/
/a?mar/
/p{2}sado/
/(m){2}ala/
/tal{1,3}a/
Resultado
Valen 234, 1234, 11234...
Valen amar, aamar, aaamar...
Valen amar, mar.
Vale ppsado
Vale mmala, mmmala....
Vale tala, talla, tallla
Los siguientes son caracteres especiales o metacaracteres para indicar caracteres de texto no
imprimibles, como puedan ser el fn de lnea o un tabulador, o grupos predefinidos de
caracteres (alfabticos, numricos, etc...)
\b
Descripcin
Principio o final de palabra
Ejemplo
/\bver\b/
\B
Frontera entre no-palabras
/\Bver\B/
\d
\D
\O
\t
\f
\n
\w
/[A-Z]\d/
/[A-Z]\D/
\W
Un dgito
Alfabtico (no dgito)
Carcter nulo
Carcter ASCII 9 (tabulador)
Salto de pgina
Salto de lnea
Cualquier alfanumrico, [a-zA-Z09_ ]
Opuesto a \w
\s
Carcter tipo espacio (como tab)
\S
\cX
\oNN
\xhh
Opuesto a \s
Carcter de control X
Carcter octal NN
El hexadecimal hh
Resultado
Encuentra ver en "ver de",
pero no en "verde"
Empareja ver con "Valverde"
pero no con "verde"
No falla en "A4"
Fallara en "A4"
/\w+/
Encuentra frase en "frase.",

pero no el . (punto).
([^a-zA-Z0- Hallara slo el punto (.)
9_ ])
/\W/
/\sSi\s/
Encuentra Si en "Digo Si ",
pero no en "Digo Sientate"
\c9
El tabulador
/\x41/
Encuentra la A (ASCII Hex41)

en "letra A"

Topicos Internet
SENTENCIAS DE CONTROL Y FLUJO

El orden en que se ejecutan las instrucciones de un programa es, por defecto, secuencial
ejecuta instruccin tras instruccin. As un programa se escribir como una sucesin de
instrucciones o sentencias, utilizando un punto y coma para indicar el final de la
instruccin. Pueden agruparse una serie de sentencias en un bloque encerrndolas entre
llaves. A veces es necesario alterar este orden para ello se utilizan las instrucciones de
control: condicionales, seleccin y bucles.
SENTENCIAS CONDICIONALES
Una sentencia condicional es una instruccin en la que se hace una comparacin y segn 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 comprobacin da verdadero o falso. La
sintaxis de esta sentencia es.
if (condicin)
{bloque a ejecutar si la condicin es cierta}
else
{bloque a ejecutar si la condicin es falsa}
Si omitimos la parte del else tendremos una condicional simple. Esta sintaxis en algunos
casos puede simplificarse utilizando la siguiente forma:
(condicin) ?{bloque si cierta} : {bloque si falsa}
Ejemplo: Evitar realizar una divisin con cero
.......
if(div==0)
alert('Nosepuededividirpor0');
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 lgicos).
Ejemplo: comprobar si un nmero est comprendido entre 1 y 5:

Topicos Internet
if((num>=1)&&(num<5)
{
lista[indice]='Muybajo';
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 condicin el programa se salta este bloque. En cualquier caso la siguiente instruccin que
se ejecute tras el condicional ser la que incrementa el valor de indice.
SELECCIN MLTIPLE
La estructura condicional permita elegir entre dos posibles caminos en la ejecucin de un
programa: si la condicin 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 ttulo en un idioma de cuatro posibles. Esto
puede solucionarse mediante varios if anidados.
Ejemplo tenemos que elegir entre idiomas: castellano, ingles, francs y alemn.
if(leng=="castellano")
pagCast();
else
if(leng=="ingles")
pagIng();
else
if(leng=="frances")
pagFran();
else
if(leng=="alemn")
pagAlemt();
else
error('idiomanopresente');
Como vemos resulta un cdigo bastante complejo. Para estos casos disponemos de la
sentencia switch...case...default, de seleccin mltiple. El ejemplo anterior quedara:
.........
switch(idioma){
case'castellano':
pagCast();
break;
case'ingles':
pagIng();
break;
case'frances':
pagFran();
break;
case'alemn':
pagAlem();

Topicos Internet
break;
default:
error('Idiomanopresente');
}
Durante la ejecucin se compara la variable idioma con cada uno de los posibles valores y
cuando coincidan ejecuta el cdigo correspondiente. La instruccin break pone fin al
bloque y hace que el programa salte a la instruccin siguiente a la sentencia switch(), si se
omite el programa continuara con la siguiente comparacin. La seccin del default es
opcional, su finalidad es ejecutar algn cdigo cuando ninguna de las condiciones se
cumpla.
BUCLES
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 nmero de elementos que
tenga el array. Este es un tpico trabajo para las estructuras repetitivas o bucles. En esencia
la ejecucin de un bucle consiste en ejecutar repetidas veces una misma parte del programa
(cuerpo del bucle) hasta que se cumpla una determinada condicin, en cuyo caso se acaba
la repeticin y el programa contina con su flujo normal. Existen varias sentencias de
bucles:
while (condicin) {... }
do {...} until (condicion)
for(contador; condicin; modcont){...}.
SENTENCIA WHILE
En esta estructura el programa primero comprueba la condicin: si es cierta pasa a ejecutar
el cuerpo del bucle, y si es falsa pasa a la instruccin siguiente a la sentencia while.
Ejemplo:
varlista=newArray(10);
varind=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 acabara nunca, el programa quedara ejecutando
indefinidamente el cuerpo del bucle.
SENTENCIA DO...WHILE
Se trata de un bucle en el que la condicin se comprueba tras la primera iteracin, es decir
que el cuerpo del bucle se ejecuta al menos una vez.
Ejemplo

Topicos Internet
varind=0;
do
{
lista[ind]='0';
ind++;
}while(ind<10)
SENTENCIA FOR
Esta sentencia utiliza una variable de control a modo de contador para controlar la
repeticin del cuerpo del bucle. La sentencia da un valor inicial a este contador y en cada
iteracin lo modifica segn le indiquemos y comprueba la condicin, si se cumple ejecuta
el cuerpo del bucle, si no lo salta y contina por la siguiente sentencia. Vemos el ejemplo
anterior usando esta sentencia:
varind;
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 cdigo 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 iteracin
toma el valor del elemento del objeto recorrido.
Ejemplo:
varitem;
for(itemindocument)
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 programacin estructura alguna vez puede ser necesario
interrumpir la repeticin de un bucle o forzar una iteracin 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 iteracin actual y enva al programa a la instruccin que
sigue al bucle.

Topicos Internet
varlista=newArray('a','b','c','z','x','f');
varitem;
for(iteminlista)
{
if(lista[item]=="z")
break;
document.write(lista[item]+'<br>');
}
Este ejemplo escribira el contenido del array lista hasta encontrar una letra z.
continue
La sentencia continue interrumpe la iteracin actual y enva al programa a la comprobacin
de la condicin, si esta es cierta contina con la siguiente iteracin.
varlista=newArray('a','b','c','z','x','f');
varitem;
for(iteminlista)
{
if(lista[item]=="z")
continue;
document.write(lista[item]+'<br>');
}
Este ejemplo escribira el contenido del array saltndose la letra z.

OBJETOS
ARRAYS
Como objetos que son, los arrays poseen sus propiedades y mtodos
predefinidos, que son ampliables por el usuario. Es necesario hacer notar
que estos mtodos y propiedades son los definidos para el JavaScript 3.0
de Microsoft. Netscape aade mas mtodos en su versin, 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 nmero de elementos que puede almacenar. Su uso es
muy simple:
tamagno=lista.length;/*tamagnoalmacenaraelvalor50*/
prototype
Esta es una propiedad muy potente en el sentido que nos permite
agregar al objeto Array las propiedades y mtodos que queramos.

Topicos Internet
Array.protoype.descriptor=null;
dias=newArray('lunes','Martes','Miercoles','Jueves',
'Viernes');
dias.descriptor="Diaslaborablesdelasemana";
En este ejemplo hemos creado una nueva propiedad para el objeto

array, la propiedad descriptor que podra utilizarse para darle un ttulo a
la matriz.
Mtodos
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
carcter que se le indique. El separador por defecto es la coma.
a=newArray("Hola","Buenos","das");
document.write(a.join()+"<br>");
document.write(a.join(",")+"<br>");
document.write(a.join("+")+"<br>");
La salida de este programa sera

Hola,Buenos,Das
Hola, Buenos, Das
Hola+Buenos+Das
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 devolvindolo en un nuevo objeto Array.
lista=newArray('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 alfabticamente los elementos de un objeto Array.
Opcionalmente podemos pasar como argumento una funcin para

Topicos Internet
determinar el orden, esta funcin 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
mtodos de Object.
Mtodos
toString
Devuelve una cadena dependiendo del objeto en que se use.
Objeto Cadena devuelta por el mtodo
Array Los elementos del array separados por coma
Boolean Si el valor es false devuelve "false" si no devuelve "true"
Function
La
{ [cdigo]}"
cadena
"function
nombre_de_funcin(argumentos)
Number Representacin textual del nmero

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 mtodo
Array Una cadena formada por los elementos separados por coma
Boolean El valor booleano (true o false)
Date La fecha como el nmero de milisegundos desde el 1/1/1970,
00:00
Function La propia funcin
Number El valor numrico

Topicos Internet
String La cadena
Default El propio objeto
Propiedades
constructor
Esta propiedad contiene una referencia a la funcin que crea las
instancias del objeto en particular. Por ejemplo:
x=newString("Hola");
//Enestecasos.constructorcontendr
//functionString(){[nativecode]}
prototype
Es una propiedad utilizada para asignar nuevos mtodos o propiedades
a un objeto, elementos estos que sern heredados por las diferentes
instancias de ese objeto. Ejemplo:
Array.prototype.nombTipo="matriz";
lista=newArray(9);
document.write(lista.nombTipo);
//EscribirlapalabramatrizqueeselnombTipo
//quehemosdadoparaelobjetoArray
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 nmero 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 operacin de
crear una variable de este tipo se lleva a cabo como es habitual con el
operador new pudindole pasar un argumento para inicializar la
variable. Al usar un mtodo o referirnos a una propiedad podemos usar
el nombre de la variable o una constante de cadena as el ejemplo
varmitexto="Estaesunacadena";
varpos=mitexto.indexOf("una")
Puede tambin escribirse en la siguiente forma:

varpos="Estaesunacadena".indexOf("una");
Propiedades
length: devuelve la longitud de la cadena.
prototype: permite agregar mtodos y propiedades al objeto

Topicos Internet
Mtodos
anchor(atrcad)
Este mtodo 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.
varrefer="Referencianum.1";
varancla=refer.anchor("Refer1");
El valor de la variable ancla ser:

<A NAME="Refer1">Referencia num. 1</a>
La sintaxis de este mtodo permite usar una constante String en lugar

del nombre de un
objeto String. El ejemplo anterior podra haber escrito como:
varancla="Referencianum.1".anchor("Refer1");
big()
Este mtodo devuelve una cadena consistente en el objeto String
rodeado con las etiquetas <BIG> </BIG> del lenguaje HTML. Por
ejemplo:
varmitexto="Esteeseltexto";
mitexto=mitexto.big();
Tras la ltima sentencia la variable mitext contendr

<big>Esteeseltexto</big>
Se puede usar una constante de cadena en lugar de un nombre de

variable, as el ejemplo podra haberse escrito:
varmitexto="Esteeseltexto".big();
blink()
Este mtodo devuelve una cadena consistente en el String rodeado con
las etiquetas <blink></blink> del lenguaje HTML. Por ejemplo:
varmitexto="Textoparaintermitente";
mitexto=mitexto.blink();
Tras la ltima sentencia la variable mi texto contendr el valor:

<blink>Textoparaintermitente</blink>
bold()

Topicos Internet

las etiquetas <B> </B>, negrita, del lenguaje HTML. Por ejemplo:
varmitexto="Textoparanegrita";
mitexto=mitexto.bold();

<B>Textoparanegrita</B>
charAt(atrent)
Este mtodo aplicado a una cadena devuelve el carcter que se

encuentra en la posicin dada por el atributo atrent, teniendo en cuenta
que el ndice del primer carcter 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 vlido (igual o mayor que la longitud de la cadena o
negativo) el mtodo devuelve el valor undefined. Por ejemplo el
siguiente cdigo devuelve la posicin del tercer carcter de la cadena
nombre:
varnombre="abcdefghij";
varcar3=nombre.charAt(2);
Devolver "c", que es el tercer carcter por la izquierda (ndice igual a

2). _
charAt(atrent)
Este mtodo aplicado a una cadena devuelve el cdigo Unicode del

carcter que se encuentra en la posicin dada por el atributo atrent,
teniendo en cuenta que el ndice del primer carcter 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 vlido (igual o mayor que la longitud de la
cadena o negativo) el mtodo devuelve el valor NAN. Por ejemplo el
siguiente cdigo devuelve el Unicode del tercer carcter de la cadena
nombre:
varnombre="abcdefghij";
varcar3=nombre.charAt(2);
Devolver 99, que es el cdigo de la letra 'c', el tercer carcter por la

izquierda (ndice igual a 2).
concat(atrcad)
Este mtodo aplicado a una cadena le agrega la cadena pasada como

atributo, atrcad, que ser una variable o constante literal, cualquier

Topicos Internet
otro tipo es convertido a cadena. Por ejemplo el siguiente cdigo

concatena 'Buenos ' y 'das':
varsaludo="Buenos";
varhola=saludo.concat("das");
La variable hola contendr "Buenos das", es lo mismo que si se hubiera

escrito:
varhola=saludo+"das"
fixed()

rodeado con las etiquetas <TT> </TT>, espaciado fijo o teletype, del
lenguaje HTML. Por ejemplo:
mitexto=mitexto.fixed();

<TT>Esteeseltexto</TT>

varmitexto="Esteeseltexto".fixed();
fontcolor(atrcad)

un elemento FONT del lenguaje HTML con el atributo COLOR igual a la
cadena que se le pase en atrcad.
varmitexto="Textoencolor";
mitexto=mitexto.fontcolor("#FFAC3E");
El valor de la variable ancla ser:

<FONTCOLOR="#FFAC3E">Textoencolor</FONT>

del nombre de un objeto String. El ejemplo anterior podra haber escrito
como:
varmitexto="Textoencolor".fontcolor("#FFAC3E");
fontsize(atrnum)

Topicos Internet

un elemento FONT del lenguaje HTML con el atributo SIZE igual al valor
entero que se le pase en atrnum.
varmitexto="Textodeprueba";
mitexto=mitexto.fontsize(1);
El valor de la variable mitexto ser:

<FONTSIZE="1">Textodeprueba</FONT>

como:
varmitexto="Textodeprueba".fontsize(1);
fromCharCode( cod1, cod2, ... )
Este es un mtodo global del objeto String que crea una cadena a partir
de los cdigos Unicode que se le pasen como parmetros. Por ejemplo:
varcadena=String.fromCharCode(65,66,67);
La variable cadena contendr "ABC", que son los caracteres con los
cdigos 65, 66 y 67._
indexOf( atrcad, desde)
Este mtodo devuelve la primera posicin dentro del objeto String donde
comienza la subcadena pasada como argumento en atrcad. Admite un
segundo argumento opcional que indica desde que posicin debe
realizar la bsqueda, si se omite comienza a buscar por el primer
carcter 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:
varcadena="mi.correo@mail.com";
vararroba=cadena.indexOf('@');
varpunto=cadena.indexOf('.',arroba);
Este ejemplo devuelve en arroba la posicin 9 mientras que punto

contiene la 14 pues la bsqueda se hizo desde la posicin donde est el
carcter arroba y encuentra el segundo punto. Recuerda que las
posiciones en las cadenas se cuentan desde 0.
italics()

las etiquetas <I> </I>, cursivas, del lenguaje HTML. Por ejemplo:

Topicos Internet
varmitexto="Textoencursiva";
mitexto=mitexto.italics();

<I>Textoencursiva</I>
lastIndexOf(atrcad, desde)
Este mtodo devuelve la primera posicin dentro del objeto String donde
comienza la subcadena pasada como argumento en atrcad, pero
realizando la bsqueda de derecha a izquierda. Admite un segundo
argumento opcional que indica desde que posicin debe realizar la
bsqueda, si se omite comienza a buscar por el primer carcter 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:
varcadena="mi.correo@mail.com";
vararroba=cadena.lastIndexOf('@');
varpunto=cadena.lastIndexOf('.',arroba);
Este ejemplo devuelve en arroba la posicin 9 mientras que punto

contiene la 2 pues la bsqueda se hizo desde la posicin donde est el
carcter arroba hacia el principio de la cadena encontrando el primer
punto. Recuerda que las posiciones en las cadenas se cuentan desde 0.
link(atrcad)_

un elemento ANCHOR del lenguaje HTML, con el atributo HREF igual a la
cadena que se le pase en atrcad.
varenlace="Direccin";
enlace=enlace.link("http://www.ciudadfutura.com');
El valor de la variable enlace ser:

<AHREF="http://www.ciudadfutura.com">Direccin</a>

como:
varenlace="Direccin".anchor("Refer1");
match( expreg )
Este es uno de los ms potentes mtodos para buscar subcadenas y

realizar sustituciones dentro de cadenas de texto. Permite usar patrones

Topicos Internet
de bsqueda construidos con comodines y texto, lo que se denominan

expresiones regulares. Este mtodo usa como argumento una expresin
regular y va buscando en el objeto alguna subcadena que concuerde con
esa expresin. Esta subcadena la devuelve en un array. Si no encuentra
ninguna devuelve null. Adems actualiza el valor de una variable global
RegExp que almacena en sus propiedades diversa informacin acerca
de la bsqueda realizada. Por ejemplo:
varfrase=newString();
frase="Buscopalabrasconmenosdecincoletras";
varresult=newArray();
result=frase.match(/\b\w{1,4}\b/g);
document.write("Hallados:'+result+'<br>');
document.write("Enlafrase:"+RegExp.input);
Si pruebas el ejemplo obtendrs el siguiente listado

Hallados:con,de
Enlafrase:Buscopalabrasconmenosdecincoletras
El patrn de bsqueda est encerrado entre dos barras / , y busca

caracteres alfanumricos ( \ w ) comprendidos entre lmites de palabras
( \ b ) adems hace una bsqueda global (indicado por la g fuera de las
barras).
replace ( expreg, nueva )
A vueltas con las expresiones regulares, difciles pero potentes. Con este
mtodo 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 patrn mediante
los smbolos $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"
varlinea=newString();
linea="Cadapalabradichaesunapalabrafalsa";
linea=linea.replace(/palabra/g,"frase");
document.write(linea);
Si pruebas el ejemplo obtendrs lo siguiente

Cadafrasedichaesunafrasefalsa
En esta ocasin se ha usado un patrn con el modificador g de global

por lo que cambia todas las coincidencias, si se omite slo se cambia la
primera. En la cadena nueva pueden usarse elementos del patrn, por
ejemplo cambiemos las negritas a cursivas en la frase:

Topicos Internet
varpatron=/(<b>)([^<]+)(<\/b>)/g;
varfrase="Cada<b>negrita</b>pasaa<b>itlica</b>";
document.write(frase+"<br>");
newstr=str.replace(patron,"<i>$2</i>");
document.write(frase);
Veras la frase antes y despus del cambio:

Cadanegrita pasaaitlica
Cadanegrita pasaaitlica
El $2 es un ndice referido a los parntesis del patrn, as $1 indica lo

contenido en el primer parntesis (<b>) mientras que $3 es <\b>, el
tercer parntesis.
search ( expreg )
Es un mtodo similar al mtodo match pero ms rpido. Este mtodo

realiza una bsqueda en la cadena y devuelve el ndice donde se
produce la primera concordancia con el patrn o -1 si no existe ninguna.
Por ejemplo buscamos las cadenas 'lunes' o 'martes' en la frase cita, la
letra i del patrn indica que se debe ignorar el tipo maysculas o
minsculas en la bsqueda:
varpatron=/sbado|mircoles/i;
varcita="Lareuninserellunesyelmircoles";
document.write(cita.search(patron)+"<br>");
Si pruebas el ejemplo obtendrs un 30, la posicin de la palabra 'lunes'.
slice ( inicio, ultimo )
Este mtodo devuelve la porcin 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 nmero de posiciones contadas desde el final de la
cadena. Si los argumentos no son nmeros enteros, por ejemplo
cadenas, se convierten a nmeros enteros como hara el mtodo
Number.parseInt().
varfrase="Autor:LuisSeplveda";
varnombre=frase.slice(7);
La variable nombre contendr "Luis Seplveda". En este otro ejemplo

usamos un segundo argumento:
varfrase="Autor:LuisSeplveda";
varnombre=frase.slice(7,10);
nombre contendr "Gonzalo"', es decir desde la posicin 7 hasta 10

posiciones antes del final.

Topicos Internet
small()

rodeado con las etiquetas <SMALL> </SMALL>, reducir tamao, del
lenguaje HTML. Por ejemplo:
mitexto=mitexto.small();

<SMALL>Esteeseltexto</SMALL>

varmitexto="Esteeseltexto".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 expresin regular o una cadena literal. Si este separador es una
cadena vaca 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.
varlinea=newString("Ttulo:Elportero");
varlista=linea.split(/:\s*/);
La variable lista es un array con dos elementos "Ttulo" y "El portero".

Tambin podriamos haberlo escrito como
lista=linea.split(":");
document.write(lista);
en este caso el primer elemento de lista es "Ttulo" y el segundo " El

portero" con un espacio por delante. Por ltimo si el separador es una
cadena vaca:
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()

Topicos Internet

las etiquetas <STRIKE> </STRIKE>, tachado, del lenguaje HTML. Por
ejemplo:
varmitexto="Textoparavertachado";
mitexto=mitexto.strike();

<STRIKE>Textoparavertachado</STRIKE>
sub()

rodeado con las etiquetas <SUB> </SUB>, subndice, del lenguaje
HTML. Por ejemplo:
mitexto=mitexto.sub();

<SUB>Esteeseltexto</SUB>
varmitexto="Esteeseltexto".sub();
substr(inicio, largo)
Devuelve una subcadena extrada del objeto string comenzando por la

posicin dada por el primer argumento, inicio, y con un nmero de
caracteres dado por el segundo argumento, largo. Si se omite este
ltimo argumento la subcadena extrada va desde inicio hasta el final
de la cadena.
varlinea=newString("Mipginaesideal);
varlista=linea.substr(3);
La variable lista contendr "pgina es ideal".

varlista=linea.substr(3,6);
Ahora la variable lista contendr "pgina".
substring(ind1,ind2)
Devuelve una subcadena del objeto string que comienza en la posicin

dada por el menor de los argumentos y finaliza en la posicin dada por

Topicos Internet
el otro argumento. Si se omite este ltimo argumento la subcadena

extrada va desde la posicin indicada por el nico argumento hasta el
final de la cadena. Si los argumentos son literales se convierten a
enteros como un parseInt().
varlista=linea.substr(3);
La variable lista contendr "pgina es ideal".

Ahora la variable lista contendr "pgina", al igual que en

sup()

rodeado con las etiquetas <SUP> </SUP>, superndice, del lenguaje
HTML. Por ejemplo:
mitexto=mitexto.sup();
Tras la ltima sentencia la variable mitexto contendr

<big>Esteeseltexto</big>

varmitexto="Esteeseltexto".sup();
toLowerCase()
Devuelve una cadena igual a la original pero con todos los caracteres en
minsculas. No afecta como es lgico a caracteres no alfabticos, o sea,
a los nmeros, letras acentuadas y caracteres especiales como la
varlinea=newString("HoyesDomingo");
linea=linea.toLowerCasesubstr();
La variable lista contendr "hoy es domingo".
toUpperCase()
Devuelve una cadena igual a la original pero con todos los caracteres en
maysculas. No afecta como es lgico a caracteres no alfabticos, o sea,

Topicos Internet
a los nmeros, letras acentuadas y caracteres especiales como la . Es

muy til a la hora de comparar cadenas para asegurarse que dos
cadenas no difieran slo por que algn carcter est en mayscula o
minscula.
varlinea=newString("HoyesDomingo");
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()
varfecha=newdate(nmero)
varfecha=newdate(cadena)
varfecha=
newdate(ao,mes,da[,hora[,minutos[,seg[,ms]]]])
Los argumentos encerrados entre corchetes son opcionales. En la

primera forma la variable fecha contendr la fecha del da actual. La
segunda opcin almacena en fecha la fecha dada por el argumento
como el nmero de milisegundos transcurridos desde la media noche del
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 pasndole como
argumento los nmeros de ao, mes, da, hora y opcionalmente, hora,
minuto, segundo y milisegundo.
Los aos posteriores a 1970 puede escribirse con dos dgitos, pero es
aconsejable usar siempre cuatro dgitos por aquello de los efectos 2000.
varhoy=newdate()/*fechadeldaenhoy*/
varevento=newDate("November101990");
varotro=newDate("10Nov1990");
varotro=newDate("10/02/2000");//Oct,2,2000
varinstante=newDate(1990,11,10,20,00);
Estas son tres posibles formas de declarar objetos de tipo fecha. Las dos
ltimas almacenan el mismo da, pero en la ltima adems se guarda la
hora.
Donde se usen cadenas para indicar una fecha podemos aadir 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, segn la
zona horaria configurada en el ordenador donde se ejecute el script.
Mtodos

Topicos Internet
getDate()
Nos devuelve el da del mes del objeto fecha al que se aplica. Este
mtodo controla por supuesto el nmero de das de cada mes y
contempla el caso de aos bisiestos, incluida la excepcin del 2000. En
el siguiente ejemplo se presenta en pantalla Hoy es da 2, suponiendo
que la fecha del sistema es 2-10-200. Primero creamos la variable fecha
instanciada como un objeto Date() para a continuacin escribir
directamente el valor de getDate() aplicado a fecha
varfecha=newDate();
document.write("Hoyesda:"+fecha.getDate());
getDay()
Nos devuelve el da de la semana del objeto fecha al que se aplica en

forma numrica con una cifra entre 0 para el domingo y 6 para el
sbado. 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 continuacin escribir directamente el valor de getDay() aplicado
a fecha
varfecha=newDate();
document.write("Hoyes"+fecha.getDay());
Si echamos manos de un array podemos mejorar un poquito este

ejemplo presentando el nombre del DIA de la semana:
varfecha=newDate();
vardiaSemana=newArray('domingo','lunes','martes',
'mircoles','jueves','viernes','sbado');
vardia=fecha.getDay();
document.write("Hoyes"+diaSemana[dia]);
Ahora se obtendra la ms amigable frase Hoy es lunes.
getFullYear()
Nos devuelve el ao correspondiente del objeto fecha en formato

completo es decir incluyendo el siglo. As si la fecha contiene 2-Octubre2000, esta funcin nos dar 2000. Por ejemplo creemos la variable fecha
instanciada como un objeto Date() para a continuacin se presenta
directamente el valor de getFullYear() aplicado a fecha, o sea, 2000.
varfecha=newDate();
document.write("Elaoactuales"+fecha.getFullYear());
Este mtodo evita el efecto 2000 al presentar loa aos siempre con
cuatro dgitos.

Topicos Internet
getHours()
Nos devuelve la seccin 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 funcin nos dar 12, pero si contiene 5:40:00
nos dar 17. Igualmente el mtodo 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.
varfecha=newDate();
document.write("Sonlas"+fecha.getHours()+"horas.");
Puedes probar que ocurre con otros valores sin necesidad de cambiar la
fecha y hora del sistema de la siguiente manera:
varfecha=newDate("1002200008:20:00pm");
document.write("Sonlas"+fecha.getHours()+"horas.");
Este caso presentar en pantalla Son las 20 horas
getMilliseconds()
Nos devuelve los minutos de la seccin 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 funcin 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.
varfecha=newDate();
document.write("Sonlas"+fecha.getHours());
document.write(":"+fecha.getMinutes());
document.write(":"+fecha.getSeconds());
document.write(":"+fecha.getMilliseconds());
Esta funcin est presente en JScript de Microsoft y en ECMAScript pero

no es soportada por Netscape.
getMinutes()
Nos devuelve los minutos de la seccin dedicada a la hora almacenada

de hora 12:40:08, esta funcin 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.
varfecha=newDate();

Topicos Internet
document.write(":"+fecha.getSeconds());;
Si queremos que quede ms presentable podemos completar con ceros

por la izquierda cuando el nmero (de horas, minutos o segundos) sea
menor que 10. Esto es tan fcil como se ve en el ejemplo:
varfecha=newDate();
varhoras=fecha.getHours();
varmins=fecha.getMinutes();
varsegs=fecha.getSeconds();
horas=(horas<10)?"0"+horas:horas;
mins=(mins<10)?"0"+mins:mins;
segs=(segs<10)?"0"+segs:segs;
document.write("Sonlas"+horas);
document.write(":"+mins);
document.write(":"+segs);
getMonth()
Nos devuelve en forma numrica el mes correspondiente al objeto fecha

al que se aplica. As para la fecha correspondiente al 10/Oct/2000, esta
funcin nos dar 10, el nmero de orden de Octubre. Por ejemplo
creemos la variable fecha instanciada como un objeto Date(),
varfecha=newDate();
document.write("Estemesesel"+fecha.getMonth());
Si queremos que aparezca el nombre del mes en lugar del nmero

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
vararray=newmeses();
varfecha=newDate();
varnmes=fecha.getMonth();
mes[1]="Enero";
mes[2]="Febrero";
mes[3]="Marzo";
mes[4]="Abril";
......
document.write("Mesactual:"+meses[nmes]);
getSeconds()
Nos devuelve los segundos de la seccin dedicada a la hora almacenada

de hora 12:40:08, esta funcin 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();

Topicos Internet
document.write(":"+fecha.getSeconds());
Si queremos que quede mas presentable podemos completar con ceros

por la izquierda cuando el nmero (de horas, minutos o segundos) sea
menor que 10. Esto es tan fcil como se ve en el ejemplo:
varfecha=newDate();
varhoras=fecha.getHours();
varmins=fecha.getMinutes();
varsegs=fecha.getSeconds();
horas=(horas<10)?"0"+horas:horas;
mins=(mins<10)?"0"+mins:mins;
segs=(segs<10)?"0"+segs:segs;
document.write("Sonlas"+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 continuacin escribimos el nmero de milisegundos dado por
este funcin, vers que este nmero habitualmente es muy grande,
realmente esta funcin puede ser til para calcular el tiempo
transcurrido entre dos instantes, por ejemplo en un puzzle podra 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.
varahora=newDate();
document.write(ahora.getTime());
getTimezoneOffset()
Esta funcin 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 segn est en la zona oriental u occidental. El
ejemplo que muestra el uso de la funcin define la variable ahora con la
fecha actual y devuelve en minutos la diferencia horaria con la GMT, el
resultado depende de tu ordenador.
varahora=newDate();
document.write(ahora.getTimezoneOffset());
getYear()

Topicos Internet
Nos devuelve en forma numrica el mes correspondiente al objeto fecha

al que se aplica. As para la fecha correspondiente al 10/Oct/2000, esta
funcin nos dar 2000 en IExplorer y 100 en Netscape. Por ejemplo
creamos la variable fecha instanciada como un objeto Date(), y luego
extraemos el ao
varfecha=newDate();
document.write("Esteaoesel"+fecha.getYear());
Si pruebas este ejemplo en Netscape y en Internet Explorer vers que

ste ltimo da el ao con cuatro dgitos mientras que el primero elimina
el siglo.
parse(fecha)

Enero de 1970 00:00:00 hasta la hora pasada en el argumento fecha
como una cadena de caracteres. Este mtodo es un mtodo global del
objeto y por tanto no es necesario crear un objeto Date para usarlo,
como vemos en este ejemplo.
vartranscurridos=Date.parse("1/1/200000:00:00");
document.write(transcurridos);
setDate(diames)
Nos permite cambiar el da del mes del objeto fecha al que se aplica
para poner el valor que se pasado en el argumento diames. Este
mtodo controla por supuesto el nmero de das de cada mes y
contempla el caso de aos bisiestos, incluida la excepcin del 2000, de
forma que si pasamos como argumento 31 y el mes es de 30 das la
funcin corrige la fecha completa pasndola al da 1 del mes siguiente.
Esto lo vemos en el ejemplo que sigue: creamos una variable como un
objeto Date con el ltimo da de Septiembre (mes de 30 das) e
intentamos poner el da a 31, luego comprobamos la fecha almacenada:
varfecha=newDate("1Sep2000");
fecha.setDate(31);
document.write("Hoyesda:"+fecha.toString());
Como vers si pruebas el ejemplo la fecha es corregida y pasa a 1 de

Octubre.
setFullYear()
Nos permite cambiar el ao del objeto fecha por el valor pasado como
argumento, un nmero interpretado como ao completo, o sea, que para
poner el ao 1995 se debe pasar 1995, no el 95. El ejemplo pone
precisamente este valor en el campo ao de la variable fecha.

Topicos Internet
varfecha=newDate();
fecha.setFullYear(1995)
document.write(fecha.toString());
Como el ao es de cuatro dgitos no hay problema de efecto 2000.
setHours()
Nos permite modificar la hora almacenada en el objeto fecha al que se

aplica y poner la que se pasa como argumento. Lgicamente 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 adems el da. Igualmente si se usa un nmero
negativo en el argumento se toma como horas antes de la ltima media
noche del mismo da. Observa todo esto en el ejemplo, donde al final de
cada accin se presenta la fecha completa en forma de cadena:
varfecha=newDate("10Sep200000:00:00");
varnl="<br>";
fecha.setHours(20);
document.write("Alas20:"+fecha.toString()+nl);
fecha.setHours(30);
fecha.setHours(2);
setMilliseconds()
Nos permite modificar el nmero 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.
varnl="<br>";
fecha.setMilliSeconds(900);
document.write(fecha.toString()+nl);
setMinutes(minact)
Nos permite ajustar los minutos de la seccin 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
varnl="<br>";

Topicos Internet
fecha.setMinutes(20);
document.write("Minact20:"+fecha.toString()+nl);
Como ves si es necesario, se ajusta la hora cuando el nmero de

minutos supera el valor
setMonth(nummes)
Esta funcin se usa para modificar el mes del objeto fecha al que se
aplica. El nuevo valor se pasa como un nmero en el argumento. El valor
deber ser como es lgico numrico o convertible a numrico 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 nmero de meses antes de Enero (-1
sera Diciembre, -2 sera Noviembre, etc.). El ejemplo es muy sencillo, en
este caso se cambia el mes de Septiembre por Marzo
fecha.setMonth(2);
document.write("Minact20:"+fecha.toString());
setSeconds(miliseg)
Nos permite modificar el nmero 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.
varnl="<br>";
fecha.setSeconds(90);
document.write(fecha.toString()+nl);
setTime()

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 continuacin escribimos el nmero de milisegundos dado por
este funcin, vers que este nmero habitualmente es muy grande,
realmente esta funcin puede ser til para calcular el tiempo
transcurrido entre dos instantes, por ejemplo en un puzzle podra 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.

Topicos Internet
varahora=newDate();
document.write(ahora.setTime());
setYear()
Nos permite cambiar el ao del objeto fecha por el valor pasado como
argumento, un nmero interpretado como ao completo, o sea, que para
poner el ao 1995 se debe pasar 1995, no el 95. El ejemplo pone
precisamente este valor en el campo ao de la variable fecha.
varfecha=newDate();
fecha.setFullYear(1995)
document.write(fecha.toString());
Como el ao es de cuatro dgitos no hay problema de efecto 2000.
toLocaleString()
Esta funcin se usa para transformar el objeto fecha al que se aplica a

una cadena de caracteres segn el estndard UTC (Universal Time
Coordinates), denominacin actual del GMT (Greenwich Meridian Time).
La hora se ajusta segn la configuracin del ordenador. En el ejemplo
que sigue la cadena devuelta ser "Mon, 10 Apr 2000 02:00:00 UTC"
(Netscape cambia UTC por GMT)
varfecha=newDate("10Apr200002:00:00");
document.write(fecha.toUTCString());
Como ves existe una diferencia en la hora almacenada y la devuelta por

la funcin, esto es debido a que la cadena devuelta es la hora
correspondiente a Greenwich, no la local del ordenador. Existe una
funcin similar, la toGMTString(), que es considerada como obsoleta y
que se mantiene por cuestiones de compatibilidad.
toUTCString(fecha)

Enero de 1970 00:00:00 hasta la hora pasada en el argumento fecha.
Este argumento se pasa como una serie de nmeros separados por
comas en el orden: Ao, mes, da, y opcionalmente: hora, minuto,
segundos. Este mtodo es un mtodo 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.
vartransc=Date.UTC(2000,10,1);
document.write(transc);

Topicos Internet
OBJETO MATH
Es el objeto que usa JavaScript para dotar al lenguaje de funciones
matemticas avanzadas y de constantes predefinidas, como el nmero
PI.
Propiedades
Son las habituales constantes como el nmero e, PI y algunos otros
valores habituales en clculos matemticos.
E .- Constante de Euler la base para los logaritmos naturales
LN10.- Logaritmo natural de 10
LOG10E.- Logaritmo en base 10 de E
SQRT1_2.- Raz cuadrada de 0.5 o sea la inversa dela raz de 2
LN2.- Logaritmo natural de 2
LOG2E.- Logaritmo en base 2 de E
PI.- El conocido nmero pi
SQRT2.- Raz cuadrada de 2
Mtodos
abs(exprnum)
Devuelve el valor absoluto, o sea, sin signo, del argumento. Si el

argumento fuera no entero ser convertido a numrico siguiendo las
reglas de la funcin parseInt() o parseFloat(). Su sintaxis es tan
simple como el ejemplo:
varnumabs=Math.abs(45)
La variable numabs contendr el valor 45.
acos(exprnum)
Es una funcin trigonomtrica que sirve para calcular el ngulo cuyo

coseno es el valor dado por el argumento, el arccos(). Este argumento
deber ser una expresin numrica o transformable en numrica,
comprendida entre -1 y +1 y el ngulo devuelto viene dado en radianes.
vararco=Math.acos(1)
La variable arco contendr el valor 0.

Topicos Internet
Recuerda las matemticas del cole. El radin es una unidad de medida

de arcos tal que 2*pi radianes equivalen a 360.
asin(exprnum)
Es una funcin trigonomtrica 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 expresin numrica, o transformable en
numrica, comprendida entre -1 y +1 y el ngulo devuelto viene dado
en radianes.
vararco=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.
de arcos tal que
2*pi radianes equivalen a 360.
atan(exprnum)
Es una funcin trigonomtrica que sirve para calcular el ngulo cuya

tangente es el valor dado por el argumento, o sea el arctg(). Este
argumento deber ser una expresin numrica o transformable en
numrica, sin lmites, y el ngulo devuelto viene dado en radianes.
vararco=Math.atan(1)
La variable arco contendr el arco cuya tangente es 1, o sea,

0.7853981633974483 o lo que es lo mismo pi / 4 radianes (45).
de arcos tal que 2*pi radianes equivalen a 360.
atan2(coorX, coorY)
Es una funcin trigonomtrica 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 funcin. Los argumentos debern
ser numricos o transformables en numricos, y el ngulo devuelto
viene dado en radianes.
varargum=Math.atan2(10,4)
La variable argum contendr el arco cuya tangente es 10/4.

Topicos Internet

de arcos tal que 2*pi radianes equivalen a 360 . Es una funcin til para
trabajar con nmeros 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 nmero entero mayor o igual al argumento. Si el argumento fuera
no numrico ser convertido a numrico siguiendo las reglas de la
funcin parseInt() o parseFloat(). Su sintaxis es tan simple como el
ejemplo:
varredexceso=Math.ceil(4.25)
La variable redexceso contendr el valor 5.
cos(exprnum)
Es una funcin trigonomtrica que sirve para calcular el coseno del

ngulo pasado como argumento en radianes. Este argumento deber ser
una expresin numrica o transformable en numrica.
varcoseno=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 nmero e (constante de Euler, aproximadamente

2,178) elevada al exponente dado por el argumento. Si el argumento
fuera no entero ser convertido a numrico siguiendo las reglas de las
funciones parseInt() o parseFloat(). Su sintaxis es tan simple como el
ejemplo:
vare4=Math.exp(4)
La variable e4 contendr el valor e4. El nmero e es la base de los

logaritmos neperianos por lo que esta funcin sirve para calcular
antilogaritmos.
floor(exprnum)
Devuelve el valor del argumento redondeado por defecto, es decir, el

mayor nmero entero menor o igual al argumento. Si el argumento fuera
no numrico ser convertido a numrico siguiendo las reglas de la
ejemplo:

Topicos Internet
varredexceso=Math.floor(4.75)
La variable redexceso contendr el valor 4.
log(exprnum)
Devuelve el logaritmo natural o neperiano, o sea, en base al nmero e,

del argumento. Si el argumento fuera no numrico ser convertido a
numrico siguiendo las reglas de la funcin parseInt() o parseFloat().
Si el argumento fuera un valor negativo esta funcin devuelve NaN. Su
sintaxis es tan simple como el ejemplo:
varlogaritmo=Math.log(1000)
La variable logaritmo contendr el valor 6.907755278982137 .
max(num1, num2)
Devuelve el mayor de los dos nmeros o expresiones numricas pasadas

como argumentos. Si alguno de los argumentos fuera no numrico ser
convertido a numrico siguiendo las reglas de la funcin parseInt() o
parseFloat(). Su sintaxis es tan simple como el ejemplo:
varmayor=Math.wax(12,5)
La variable mayor contendr el valor 12.
min(num1, num2)
Devuelve el menor de los dos nmeros o expresiones numricas

pasadas como argumentos. Si alguno de los argumentos fuera no
numrico ser convertido a numricos siguiendo las reglas de la funcin
parseInt() o parseFloat(). Su sintaxis es tan simple como el ejemplo:
varmenor=Math.min(12,5)
La variable menor contendr el valor 5.
pow(base, exp)
Calcula la potencia de un nmero, dado por el argumento base, elevado

al exponente dado por el argumento exp. Si alguno de los argumentos
fuera no numrico ser convertido a numrico siguiendo las reglas de la
ejemplo:
varpotencia=Math.pow(2,4)
La variable potencia contendr el valor 16.

Topicos Internet
random()
Calcula un nmero aleatorio, realmente seudo-aleatorio, comprendido

entre 0 y 1 ambos inclusive. Cada vez que se carga el intrprete de
JavaScript se genera una semilla base para el clculo. No lleva
argumentos y su sintaxis es tan simple como el ejemplo:
varazar=Math.random()*10
La variable azar contendr un nmero al azar entre 0 y 10.
round(exprnum)
Devuelve el valor entero mas prximo al nmero 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 numrico siguiendo las reglas de la funcin parseInt() o
parseFloat(). Su sintaxis es tan simple como el ejemplo:
varentero1=Math.random(4.25)
varentero2=Math.random(4.65)
La variable entero1 contendr el valor 4 mientras entero1 que

contendr 5.
sin(exprnum)
Es una funcin trigonomtrica que sirve para calcular el seno del ngulo
pasado como argumento en radianes. Este argumento deber ser una
expresin numrica o transformable en numrica.
varseno=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 raz cuadrada del valor pasado como argumento. Si el

argumento fuera no entero ser convertido a numrico siguiendo las
reglas de la funcin parseInt() o parseFloat(). Si el argumento fuera
negativo o cualquier otro valor no numrico devolver NaN. Su sintaxis
es tan simple como el ejemplo:
varraiz=Math.sqrt(49)
La variable raiz contendr el valor 7.

Topicos Internet
tan(exprnum)
Es una funcin trigonomtrica que sirve para calcular la tangente del

ngulo pasado como argumento en radianes. Este argumento deber ser
una expresin numrica o transformable en numrica.
vartangente=Math.tan(Math.PI/4)
La variable tangente contendr el valor 1, que es la tangente de pi/4

radianes (45).

HTML Css Javascript

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML Css Javascript

Caricato da

Copyright:

Formati disponibili

Pginas Web

Ing Roger E. Alarcn Garca

ESTRUCTURA DE UNA PAGINA HTML

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

TRABAJANDO CON TEXTO

Texto de mayor importancia (mas grande)

<TITLE>Formato del Texto</TITLE>

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

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

Dimensionamiento de imgenes utilizando los atributos WIDTH(ancho) y HEIGHT

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

Se puede ingresar una descripcin breve o frase indicativa de la imagen, esta se

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

Fondo sonoro para Internet Explorer

ALTERNATE.- Desplaza alternadamente hacia un lado y otro,

<!- Define una nueva fila ->

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

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

FRAMEBORDER.- especifica el borde.

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

NAME.- Asigna un nombre a un frame para que despus podamos referirnos a l.

Si su navegador no reconoce los frameset y frame no se mostrar informacin de su pgina,

Texto en mltiples lneas

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

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

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

D. Eleccin entre mltiples opciones

E. Botones de Envo y Borrado

Hojas de Estilo en Cascada (CSS)

HOJAS DE ESTILO EN CASCADA

Hojas de Estilo en Cascada (CSS)

ESTRUCTURA DE UNA HOJA DE ESTILOS

Etiqueta1, Etiqueta2 : {propiedad1:valor}

Hojas de Estilo en Cascada (CSS)

Hojas de Estilo en Cascada (CSS)

DEFINICIN DE HOJAS DE ESTILO EN FICHEROS EXTERNOS

Hojas de Estilo en Cascada (CSS)

REGLAS DE IMPORTANCIA EN LOS ESTILOS

Hojas de Estilo en Cascada (CSS)

Hojas de Estilo en Cascada (CSS)

Hojas de Estilo en Cascada (CSS)

Hojas de Estilo en Cascada (CSS)

Hojas de Estilo en Cascada (CSS)

CARACTERISTICAS AVANZADAS DE LAS CSS

Hojas de Estilo en Cascada (CSS)

Hojas de Estilo en Cascada (CSS)

EFECTOS PARA FORMULARIOS

Utilizando el estilo anterior en una pgina web.

Hojas de Estilo en Cascada (CSS)

ESTILOS EN CAMPOS DE TEXTO

Hojas de Estilo en Cascada (CSS)

Lenguaje Java Script

Lenguaje Java Script

Lenguaje Java Script

<!- - Ocultando el cdigo en java para los navegadores antiguos

Lenguaje Java Script

Lenguaje Java Script

Lenguaje Java Script

Lenguaje Java Script

cadena (string). Acordarse de que al momento de crearla variable no podemos asignarle el

Lenguaje Java Script

Lenguaje Java Script

res = op1 & op2; /*res contiene 36 */

Lenguaje Java Script

res = op1 & op2; /res contiene 36 /