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 ...................................................................................... 8 ENCABEZADOS ...................................................................................................... 8 FORMATO DEL TEXTO .......................................................................................... 8 ETIQUETA FONT Y SUS PARMETROS .............................................................. 9 CARACTERES ESPECIALES ................................................................................ 10 CARACTERES DE CONTROL .............................................................................. 10 FORMATEO DE PARRAFOS................................................................................. 11 ETIQUETA BARRA HORIZONTAL ...................................................................... 12 ENLACES Y ANCLAS ............................................................................................... 12 ANCLAS DE REFERENCIA................................................................................... 13 ANCLAS NOMINALES .......................................................................................... 13 OBJETOS MULTIMEDIA .......................................................................................... 14 MANIPULACIN DE IMGENES ........................................................................ 14 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 ........................................................... 34 DEFINICIN DE HOJAS DE ESTILO EN FICHEROS EXTERNOS ........................ 36 REGLAS DE IMPORTANCIA EN LOS ESTILOS ..................................................... 37 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 ............................................................................ 44 CREANDO BORDES PUNTEADOS ...................................................................... 44 ESTILOS EN CAMPOS DE TEXTO ....................................................................... 45 JAVA SCRIPT ................................................................................................................ 47 INTRODUCCIN AL LENGUAJE JAVASCRIPT ..................................................... 47 JAVASCRIPT .............................................................................................................. 47
SINTAXIS JAVASCRIPT ........................................................................................... 48 CASE SENSITIVE .................................................................................................. 49 SEPARAR LNEAS DE CDIGO ........................................................................... 49 ESPACIOS EN BLANCO ........................................................................................ 49 BACKSLASH .......................................................................................................... 49 ABRIENDO Y CERRANDO GRUPOS ................................................................... 49 COMENTARIOS ..................................................................................................... 50 VARIABLES Y NOMBRES DE FUNCIONES ....................................................... 50 PALABRAS RESERVADAS .................................................................................. 50 PROGRAMACION BASICA ...................................................................................... 51 VARIABLES Y DATOS.......................................................................................... 51 TIPOS DE DATOS .................................................................................................. 52 OPERADORES ....................................................................................................... 53 OPERADORES ARITMTICOS............................................................................. 53 OPERADORES BINARIOS .................................................................................... 54 OPERADORES RELACIONALES ......................................................................... 55 OPERADORES LGICOS ...................................................................................... 56 CONVERSIN EXPLCITA DE TIPOS ................................................................. 57 FUNCIONES GLOBALES ...................................................................................... 57 EXPRESIONES REGULARES ............................................................................... 58 SENTENCIAS DE CONTROL Y FLUJO.................................................................... 60 SENTENCIAS CONDICIONALES ......................................................................... 60 SELECCIN MLTIPLE ....................................................................................... 61 BUCLES ...................................................................................................................... 62 SENTENCIA WHILE .............................................................................................. 62 SENTENCIA DO...WHILE ..................................................................................... 62 SENTENCIA FOR ................................................................................................... 63 SENTENCIA FOR ... IN .......................................................................................... 63 RUPTURA DE BUCLES ......................................................................................... 63 OBJETOS .................................................................................................................... 64 ARRAYS ................................................................................................................. 64 OBJETO OBJECT ................................................................................................... 65 OBJETO STRING ................................................................................................... 67 OBJETO DATE ....................................................................................................... 76 OBJETO MATH ...................................................................................................... 84
Lenguaje HTML 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.
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>
Ejemplo 1: <HTML> <HEAD> <TITLE> USAT Universidad Catlica Santo Toribio de Mogrovejo</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>
<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>
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> <H4>NIVEL 4</H4><br> <H5>NIVEL 5</H5><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> 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
Ejemplo 5: <HTML> <HEAD> <TITLE>Formato del Texto </TITLE> </HEAD> <BODY> <B>TITULO DE LA PAGINA en negrita</B><br> <I>SUBTITULO en cursiva </I><br> <U>Texto subrayado</U><br> <S>texto tachado</S><br> Ecuaciones : <br>E=mc<SUP>2</SUP><br> 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> <TITLE>Formato del Texto </TITLE> </HEAD> <BODY TEXT="#0000ff"> <B>TITULO DE LA PAGINA en negrita</B><br> <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 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 á é í ó ú Á É Í Ó Ú ñ Ñ ¿ ¡ º ª
©
® CARACTERES DE CONTROL
Resultado Espacio en blanco
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> <TITLE>Formato del Texto </TITLE> </HEAD> <BODY TEXT="#0000ff"> <B>TITULO DE LA PAGINA en negrita</B><br> <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> ¡<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> <TITLE>Formato del Texto </TITLE> </HEAD> <BODY TEXT="#0000ff"> 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> <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.
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:[email protected]>Contctenos Cmputo</A>
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. - 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.
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 Ejemplo: <embed src=sonido.mid hidden=true> width=200 height=55 autostart=true loop=true ejecuta automticamente ejecuta ininterrumpidamente crea una consola invisible
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> 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. 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 -> <TD>fila1 celda2 </TD> <TD>fila1 celda3 </TD> </TR> <TR> <!- Define una nueva fila -> <TD>fila2 celda1 </TD> <!- Define una columna -> <TD>fila2 celda2 </TD> <TD>fila2 celda3 </TD> </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: <HTML> <HEAD> <TITLE>Manipulacin de Tablas</TITLE> </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> <TITLE>Manipulacin de Tablas</TITLE> </HEAD> <BODY> <TABLE border="2" width="50%" align="center"> <TR align="center" bgcolor="#00ff00"> <TD>Cena </TD> <TD>Bebidas </TD> <TD>Dulces </TD> </TR> <TR> <TD>A </TD> <TD>B </TD> <TD>C </TD> </TR> </TABLE> </BODY> </HTML> Atributos que se pueden asignar a una Celda (TD)
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> <TITLE>Manipulacin de Tablas</TITLE> </HEAD> <BODY> <TABLE border="2" width="50%" align="center"> <TR> <TD COLSPAN="3" ALIGN="center" BGCOLOR="#0099cc"> <FONT COLOR="#FFFFFF">COMIDAS</FONT> </TD> </TR> <TR align="center"> <TD>Cena </TD> <TD>Bebidas </TD> <TD>Dulces </TD> </TR> <TR> <TD>A </TD> <TD>B </TD> <TD>C </TD> </TR> </TABLE> </BODY> </HTML>
Ejemplo: <HTML> <HEAD> <TITLE>Manipulacin de Tablas</TITLE> </HEAD> <BODY> <TABLE border="2" width="50%" align="center"> <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> <TITLE>Manipulacin de Tablas</TITLE> </HEAD> <BODY> <TABLE> <CAPTION>Ejemplo de Tabla</CAPTION> <TR> <TD>Cena </TD> <TD>Bebidas </TD> <TD>Dulces </TD> </TR> <TR> <TD>A </TD> <TD>B </TD> <TD>C </TD> </TR> </TABLE>
</BODY> </HTML> Ejemplo completo: <HTML> <HEAD> <TITLE>Manipulacin de Tablas</TITLE> </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:[email protected]">[email protected]</A></B></TD> </TR> </TABLE></CENTER> </TD> </TR> </TABLE> </BODY> </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. <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> </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> 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> <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: 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> <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> <TITLE>Formulario</TITLE> </HEAD>

<BODY>
<B>Pagina HTML con un formulario</B><br> Utilizando controles radio y checkbox <FORM> Controles Radio<br> <INPUT TYPE="radio" NAME="estadocivil" VALUE="Soltero" checked>Soltero <INPUT TYPE="radio" NAME="estadocivil" VALUE="Casado">Casado <INPUT TYPE="radio" NAME="estadocivil" VALUE="Viudo">Viudo <INPUT TYPE="radio" NAME="estadocivil" VALUE="Divorciado">Divorciado <br><br>Controles Checkbox<br>HOBBIES<br><br> <INPUT TYPE="checkbox" NAME="Futbol" VALUE="Futbol" checked>Futbol <INPUT TYPE="checkbox" NAME="Voley" VALUE="Voley">Voley <INPUT TYPE="checkbox" NAME="Basket" VALUE="Basket">Basket
</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> <TITLE>Formulario</TITLE> </HEAD> <BODY> <B>Pagina HTML con un formulario</B><br> 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> <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> <TITLE>Formulario</TITLE> </HEAD> <BODY> <B>Pagina HTML con un formulario</B><br> Utilizando Botones de Enviar y Borrado<br> <FORM ACTION="mailto:[email protected]" METHOD="POST"> Texto : <INPUT TYPE="TEXT" NAME="txtTexto"><br><br> <INPUT TYPE="submit" VALUE="Enviar"> <INPUT TYPE="reset" VALUE="Borrar"> </FORM> </BODY> </HTML>
Hojas de Estilo en Cascada (CSS) Topicos Internet
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 (;).
ESTRUCTURA DE UNA HOJA DE ESTILOS

<style type="text/css"> <!-Etiqueta1, Etiqueta2 : {propiedad1:valor} Etiqueta3 : {propiedad1:valor;...;propiedadS:valor} Etiqueta4 : {propiedad1:valor;...;propiedadT:valor} .Clase1 : {propiedad1:valor;...;propiedadT:valor}
--> </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> <style type="text/css"> <!-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>

<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} //--> </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> {font-family:Courier New,Courier;font-

<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>
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}
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.
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. Nombre del atributo
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; 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 background-image: url(mrmol.gif) ; con su camino relativo background-image: o absoluto 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. Margin-left

Padding-right padding-right: 0.5cm; 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. Unidades CSS
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; 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; ...}
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).
<style type="text/css"> td { font-family:verdana,arial; font-size:8pt; } .estilotabla{ background-color:ffffff; border-style:solid;

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.
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.
<style type="text/css"> .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>
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. 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
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>
<!- - 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
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
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
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
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*/
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; 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. var hoy = 4; ayer = 10, comp; 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. var hoy = 4; ayer = 4, comp; 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. Compara tanto nmeros como cadenas.
var hoy = 4; ayer = 4, comp; comp = hoy <= ayer /* comp adquiere el valor true*/ Iguales == Compara dos valores y devuelve true si ambos son iguales. Compara tanto nmeros como cadenas. var hoy = 4; ayer = 4, comp; 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. Compara tanto nmeros como cadenas. 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)
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 sie ndo 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.
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
\ ^ $ .
| () []
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 ? Exactamente n veces {n} {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...) Descripcin Principio o final de palabra Frontera entre no-palabras Un dgito Alfabtico (no dgito) Carcter nulo Carcter ASCII 9 (tabulador) Salto de pgina Salto de lnea Cualquier alfanumrico, [a-zA-Z0-9_ ] Opuesto a \w Ejemplo /\bver\b/ /\Bver\B/ /[A-Z]\d/ /[A-Z]\D/ 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"
\b \B \d \D \O \t \f \n \w \W
/\w+/
\s \S \cX \oNN \xhh
Carcter tipo espacio (como tab) Opuesto a \s Carcter de control X Carcter octal NN El hexadecimal hh
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 /\x41/ El tabulador Encuentra la A (ASCII Hex41) en "letra A"
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('No se puede dividir por 0'); else coc = num / div; .........
Ejemplo: usando la segunda forma:

............ cad = (num >= 0) ? ' + ' : ' - '; ........
En este ejemplo cad tomar el valor + si num es positivo o cero y el - si es negativo. Las sentencias if pueden anidarse, es decir, dentro de una sentencia if pueden incluirse mas sentencias if. Las condiciones pueden ser sencillas como en estos ejemplos o pueden enlazarse usando los operadores && y || (AND y OR lgicos). Ejemplo: comprobar si un nmero est comprendido entre 1 y 5:
if ((num>=1) && (num < 5)

{ lista[indice] = 'Muy bajo'; bajos++; } indice++;
En este ejemplo si num est entre 1 y 5 (excluido) se anota en una lista la palabra 'Muy bajo' y se incrementa la variable bajos. Como vemos no se ha usado la parte de else y como se deben ejecutar mas de una sentencia las hemos encerrado entre llaves. Si num no cumple la 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('idioma no presente');
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(); break; default : error ('Idioma no presente');

}
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:
var lista = new Array(10); var ind = 0; while (ind < 10) { lista[ind] = '0'; ind++; }
En este ejemplo mientras que el valor almacenado en ind sea menor que 10 (la longitud del array) ir almacenando en cada elemento del array lista un 0 e incrementando el valor de ind. Cuando este valor sea 10 el programa no entrar en el cuerpo del bucle. Si no se incrementara el valor de ind el bucle no 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
var lista = new Array(10); var ind = 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:
var lista = new Array(10); var ind; for (ind=0; ind < 10; ind++) { lista[ind] = '0'; }
Como vemos el cuerpo del bucle no incrementa la variable ind, esto se indica en la cabecera de la sentencia. Este 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:
var item; for (item in document) document.write(item+'<br>');
Con una matriz la variable de control toma el valor de los ndices de la matriz, no su contenido. RUPTURA DE BUCLES Aunque procuremos usara una 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.
var lista = new Array ('a','b','c','z','x','f'); var item ;

for (item in lista) { 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.
var lista = new Array ('a','b','c','z','x','f'); var item ; for (item in lista) { if (lista[item] == "z") continue; document.write(lista[item]+'<br>'); }
Este ejemplo 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:
var lista = new Array(50); tamagno = lista.length; /*tamagno almacenara el valor 50 */
prototype Esta es una propiedad muy potente en el sentido que nos permite agregar al objeto Array las propiedades y mtodos que queramos.
Array.protoype.descriptor = null; dias = new Array ('lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes'); dias.descriptor = "Dias laborables de la semana";
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= new Array("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 = new Array('a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'); sublista = lista.slice(2,6); alert(sublista.join());
En el ejemplo sublista contendr los elementos desde el ndice 2 al 5 ambos inclusive, o sea, 'c', 'd', 'e', 'f'. Si se omite el segundo argumento se extrae hasta el ltimo elemento del array y si es negativo se entiende como contando desde el final. sort(rutord) Ordena alfabticamente los elementos de un objeto Array. Opcionalmente podemos pasar como argumento una funcin para 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 cadena "function nombre_de_funcin(argumentos){ [cdigo]}" 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 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 = new String("Hola"); //En este caso s.constructor contendr // function String() { [native code] }
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 = new Array(9); document.write(lista.nombTipo); //Escribir la palabra matriz que es el nombTipo //que hemos dado para el objeto Array
OBJETO STRING El objeto String se usa para manipular cadenas de caracteres. En JavaScript todo texto encerrado entre comillas, dobles o simples, se interpreta como una cadena, as '45' no es el 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
var mitexto = "Esta es una cadena"; var pos = mitexto.indexOf("una")
Puede tambin escribirse en la siguiente forma:

var pos = "Esta es una cadena". indexOf("una");
Propiedades length: devuelve la longitud de la cadena. prototype: permite agregar mtodos y propiedades al objeto 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.
var refer = "Referencia num. 1" ; var ancla = refer.anchor("Refer1");
El valor de la variable ancla ser:

<A NAME="Refer1">Referencia num. 1</a>
La sintaxis de este mtodo permite usar una constante String en lugar del nombre de un objeto String. El ejemplo anterior podra haber escrito como:
var ancla = "Referencia num. 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:

var mitexto = "Este es el texto"; mitexto = mitexto.big();
Tras la ltima sentencia la variable mitext contendr

<big>Este es el texto</big>
Se puede usar una constante de cadena en lugar de un nombre de variable, as el ejemplo podra haberse escrito:
var mitexto = "Este es el texto".big();
blink()
Este mtodo devuelve una cadena consistente en el String rodeado con las etiquetas <blink></blink> del lenguaje HTML. Por ejemplo:
var mitexto = "Texto para intermitente"; mitexto = mitexto.blink();
Tras la ltima sentencia la variable mi texto contendr el valor:

<blink>Texto para intermitente</blink>
bold()
Este mtodo devuelve una cadena consistente en el String rodeado con las etiquetas <B> </B>, negrita, del lenguaje HTML. Por ejemplo:
var mitexto = "Texto para negrita"; mitexto = mitexto.bold();

<B>Texto para negrita</B>
charAt(atrent)
Este 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:
var nombre = "abcdefghij"; var car3 = 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:
var nombre = "abcdefghij"; var car3 = 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 otro tipo es convertido a cadena. Por ejemplo el siguiente cdigo concatena 'Buenos ' y 'das':
var saludo = "Buenos "; var hola = saludo.concat("das");
La variable hola contendr "Buenos das", es lo mismo que si se hubiera escrito:

var hola = saludo + "das"
fixed()
Este mtodo devuelve una cadena consistente en el objeto String rodeado con las etiquetas <TT> </TT>, espaciado fijo o teletype, del lenguaje HTML. Por ejemplo:
var mitexto = "Este es el texto"; mitexto = mitexto.fixed();

<TT>Este es el texto</TT>
var mitexto = "Este es el texto".fixed();
fontcolor(atrcad)
Este mtodo crea, a partir de un objeto String, una cadena conteniendo un elemento FONT del lenguaje HTML con el atributo COLOR igual a la cadena que se le pase en atrcad.
var mitexto = "Texto en color" ; mitexto = mitexto.fontcolor("#FFAC3E");
El valor de la variable ancla ser:

<FONT COLOR="#FFAC3E">Texto en color</FONT>
var mitexto = "Texto en color".fontcolor("#FFAC3E");
fontsize(atrnum)
Este mtodo crea, a partir de un objeto String, una cadena conteniendo un elemento FONT del lenguaje HTML con el atributo SIZE igual al valor entero que se le pase en atrnum.
var mitexto = "Texto de prueba" ; mitexto = mitexto.fontsize(-1);
El valor de la variable mitexto ser:

<FONT SIZE="-1">Texto de prueba</FONT>
var mitexto = "Texto de prueba".fontsize(-1);
fromCharCode( cod1, cod2, ... )

Este es un mtodo global del objeto String que crea una cadena a partir de los cdigos Unicode que se le pasen como parmetros. Por ejemplo:
var cadena = 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:
var cadena = "[email protected]"; var arroba = cadena.indexOf('@'); var punto = 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()
Este mtodo devuelve una cadena consistente en el String rodeado con las etiquetas <I> </I>, cursivas, del lenguaje HTML. Por ejemplo:
var mitexto = "Texto en cursiva"; mitexto = mitexto.italics();

<I>Texto en cursiva</I>
lastIndexOf(atrcad, desde)
Este 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:
var cadena = "[email protected]"; var arroba = cadena.lastIndexOf('@'); var punto = 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)_
Este mtodo crea, a partir de un objeto String, una cadena conteniendo un elemento ANCHOR del lenguaje HTML, con el atributo HREF igual a la cadena que se le pase en atrcad.
var enlace = "Direccin" ; enlace = enlace.link("http://www.ciudadfutura.com');
El valor de la variable enlace ser:

<A HREF="http://www.ciudadfutura.com">Direccin</a>
var enlace = "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 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:
var frase = new String(); frase="Busco palabras con menos de cinco letras"; var result=new Array(); result=frase.match(/\b\w{1,4}\b/g); document.write("Hallados: '+result+'<br>'); document.write("En la frase: " + RegExp.input);
Si pruebas el ejemplo obtendrs el siguiente listado

Hallados: con,de En la frase: Busco palabras con menos de cinco letras
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"
var linea = new String(); linea="Cada palabra dicha es una palabra falsa"; linea = linea.replace(/palabra/g, "frase"); document.write(linea);
Si pruebas el ejemplo obtendrs lo siguiente

Cada frase dicha es una frase falsa
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:
var patron = /(<b>)([^<]+)(<\/b>)/g; var frase = "Cada <b>negrita</b> pasa a <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:

Cada negrita pasa a itlica Cada negrita pasa a itlica
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:
var patron = /sbado|mircoles/i; var cita = "La reunin ser el lunes y el mircoles"; 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().
var frase = "Autor: Luis Seplveda"; var nombre = frase.slice(7);
La variable nombre contendr "Luis Seplveda". En este otro ejemplo usamos un segundo argumento:
var frase = "Autor: Luis Seplveda"; var nombre = frase.slice(7, -10);
nombre contendr "Gonzalo"', es decir desde la posicin 7 hasta 10 posiciones antes del final.
small()
Este mtodo devuelve una cadena consistente en el objeto String rodeado con las etiquetas <SMALL> </SMALL>, reducir tamao, del lenguaje HTML. Por ejemplo:
var mitexto = "Este es el texto"; mitexto = mitexto.small();

<SMALL>Este es el texto</SMALL>
var mitexto = "Este es el texto".small();
split (separ)
Devuelve un array conteniendo las porciones en que queda separada la cadena por el separador indicado mediante el argumento separ, que ser una 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.
var linea=new String("Ttulo: El portero"); var lista = linea.split(/:\s*/);
La variable lista es un array con dos elementos "Ttulo" y "El portero". Tambin podriamos haberlo escrito como
var linea=new String("Ttulo: El portero"); 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:
var linea=new String("Ttulo: El portero"); lista = linea.split(""); document.write(lista);
la variable lista contendr T,,t,u,l,o,:, ,E,l, ,p,o,r,t,e,r,o.
strike()
Este mtodo devuelve una cadena consistente en el String rodeado con las etiquetas <STRIKE> </STRIKE>, tachado, del lenguaje HTML. Por ejemplo:
var mitexto = "Texto para ver tachado"; mitexto = mitexto.strike();

<STRIKE>Texto para ver tachado</STRIKE>
sub()
Este mtodo devuelve una cadena consistente en el objeto String rodeado con las etiquetas <SUB> </SUB>, subndice, del lenguaje HTML. Por ejemplo:

var mitexto = "Este es el texto"; mitexto = mitexto.sub();
Tras la ltima sentencia la variable mitext contendr <SUB>Este es el texto</SUB> Se puede usar una constante de cadena en lugar de un nombre de variable, as el ejemplo podra haberse escrito:
var mitexto = "Este es el texto".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.
var linea=new String("Mi pgina es ideal); var lista = linea.substr(3);
La variable lista contendr "pgina es ideal".

var linea=new String("Mi pgina es ideal); var lista = 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 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().
var linea=new String("Mi pgina es ideal); var lista = linea.substr(3);
La variable lista contendr "pgina es ideal".

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

sup()
Este mtodo devuelve una cadena consistente en el objeto String rodeado con las etiquetas <SUP> </SUP>, superndice, del lenguaje HTML. Por ejemplo:
var mitexto = "Este es el texto"; mitexto = mitexto.sup();
Tras la ltima sentencia la variable mitexto contendr

<big>Este es el texto</big>
var mitexto = "Este es el texto".sup();
toLowerCase()
Devuelve una cadena igual a la original pero con todos los caracteres en minsculas. No afecta como es lgico a caracteres no alfabticos, o sea, a los nmeros, letras acentuadas y caracteres especiales como la
var linea=new String("Hoy es Domingo"); linea = linea.toLowerCasesubstr();
La variable lista contendr "hoy es domingo".
toUpperCase()
Devuelve una cadena igual a la original pero con todos los caracteres en maysculas. No afecta como es lgico a caracteres no alfabticos, o sea, 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.
var linea=new String("Hoy es Domingo"); linea = linea.toUpperCase();
La variable lista contendr "HOY ES DOMINGO". OBJETO DATE El objeto Date contiene un valor que representa fecha y hora de un instante dado. Para crear una instancia de este objeto usamos alguna de las siguientes sintaxis: var fecha= new Date()
var var var new fecha= new date(nmero) fecha= new date(cadena) fecha= date(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.
var var var var var hoy = new date() /*fecha del da en hoy */ evento = new Date("November 10 1990"); otro = new Date("10 Nov 1990"); otro = new Date("10/02/2000"); //Oct, 2, 2000 instante = new Date(1990, 11, 10, 20,00);
Estas son tres posibles formas de declarar objetos de tipo fecha. Las dos ltimas almacenan el mismo 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
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
var fecha = new Date(); document.write("Hoy es da: "+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
var fecha = new Date(); document.write("Hoy es "+fecha.getDay());
Si echamos manos de un array podemos mejorar un poquito este ejemplo presentando el nombre del DIA de la semana:
var fecha = new Date(); var diaSemana = new Array('domingo', 'lunes', 'martes', 'mircoles', 'jueves', 'viernes','sbado'); var dia = fecha.getDay();

document.write("Hoy es "+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-Octubre-2000, 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.
var fecha = new Date(); document.write("El ao actual es "+fecha.getFullYear());
Este mtodo evita el efecto 2000 al presentar loa aos siempre con cuatro dgitos.
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.
var fecha = new Date(); document.write("Son las "+fecha.getHours()+" horas.");
Puedes probar que ocurre con otros valores sin necesidad de cambiar la fecha y hora del sistema de la siguiente manera:
var fecha = new Date("10-02-2000 08:20:00 pm"); document.write("Son las "+fecha.getHours()+" horas.");
Este caso presentar en pantalla Son las 20 horas
getMilliseconds()
Nos devuelve los minutos de la 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.
var fecha = new Date(); document.write("Son las "+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 en el objeto fecha al que se aplica. As si la fecha contiene en su parte 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.
var fecha = new Date(); document.write("Son las "+fecha.getHours() ); document.write(":" + fecha.getMinutes() ); 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:
var fecha = new Date(); var horas = fecha.getHours(); var mins = fecha.getMinutes(); var segs = fecha.getSeconds(); horas = (horas < 10)?"0"+horas:horas; mins = (mins < 10)?"0"+mins:mins; segs = (segs<10)?"0"+segs:segs; document.write("Son las "+horas); document.write(":" + mins); document.write(":" + segs);
getMonth()
Nos devuelve en forma 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(),
var fecha = new Date(); document.write("Este mes es el "+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
var array = new meses(); var fecha = new Date(); var nmes = fecha.getMonth(); mes[1] = "Enero"; mes[2] = "Febrero"; mes[3] = "Marzo"; mes[4] = "Abril"; ... ... document.write("Mes actual:" + meses[nmes]);
getSeconds()
Nos devuelve los segundos 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, 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();
document.write("Son las "+fecha.getHours() ); document.write(":" + fecha.getMinutes() ); 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:
var fecha = new Date(); var horas = fecha.getHours(); var mins = fecha.getMinutes(); var segs = fecha.getSeconds(); horas = (horas < 10)?"0"+horas:horas; mins = (mins < 10)?"0"+mins:mins; segs = (segs<10)?"0"+segs:segs; document.write("Son las "+horas); document.write(":" + mins); document.write(":" + segs);
getTime()
Nos devuelve la cantidad de milisegundos transcurridos desde el 1 de Enero de 1970 hasta la hora almacenada en el objeto fecha al que se aplica. En el ejemplo que sigue creamos un objeto Date con la fecha actual, a 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.
var ahora = new Date(); 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.
var ahora = new Date(); document.write(ahora.getTimezoneOffset());
getYear()
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
var fecha = new Date(); document.write("Este ao es el "+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)
Nos devuelve la cantidad de milisegundos transcurridos desde el 1 de Enero de 1970 00:00:00 hasta la hora pasada en el argumento fecha como una cadena de caracteres. Este mtodo es un mtodo global del objeto y por tanto no es necesario crear un objeto Date para usarlo, como vemos en este ejemplo.
var transcurridos = Date.parse("1/1/2000 00:00:00"); document.write(transcurridos);
setDate(diames)
Nos permite cambiar el 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:
var fecha = new Date("1 Sep 2000"); fecha.setDate(31); document.write("Hoy es da: "+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.
var fecha = new Date(); 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:
var fecha = new Date("10 Sep 2000 00:00:00"); var nl="<br>"; fecha.setHours(20); document.write("A las 20: "+fecha.toString()+nl); fecha.setHours(30); document.write("A las 30: "+fecha.toString()+nl); fecha.setHours(-2); document.write("A las -2: "+fecha.toString()+nl);
setMilliseconds()
Nos permite modificar el 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.
var fecha = new Date("10 Sep 2000 00:00:00"); var nl="<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
var fecha = new Date("10 Sep 2000 00:00:00"); var nl="<br>"; fecha.setMinutes(20); document.write("Minact 20: "+fecha.toString()+nl); fecha.setMinutes(68); document.write("Minact 68: "+fecha.toString()+nl); fecha.setMinutes(-4); document.write("Minact -4: "+fecha.toString()+nl);
Como ves si es necesario, se ajusta la hora cuando el 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
var fecha = new Date("10 Sep 2000 00:00:00"); fecha.setMonth(2); document.write("Minact 20: "+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.
var fecha = new Date("10 Sep 2000 00:00:00"); var nl="<br>"; fecha.setSeconds(90); document.write(fecha.toString()+nl);
setTime()
Nos devuelve la cantidad de milisegundos transcurridos desde el 1 de Enero de 1970 hasta la hora almacenada en el objeto fecha al que se aplica. En el ejemplo que sigue creamos un objeto Date con la fecha actual, a 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.
var ahora = new Date(); 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.
var fecha = new Date(); 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)
var fecha = new Date("10 Apr 2000 02:00:00"); document.write(fecha.toUTCString());
Como ves existe una diferencia en la hora almacenada y la devuelta por la 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)
Nos devuelve la cantidad de milisegundos transcurridos desde el 1 de Enero de 1970 00:00:00 hasta la hora pasada en el argumento fecha. Este argumento se pasa como una serie de 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.
var transc= Date.UTC(2000,10,1); document.write(transc);
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:
var numabs = 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.
var arco = Math. acos( 1)
La variable arco contendr el valor 0. 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.
var arco = Math.asin( 1 )
La variable arco contendr el arco cuyo seno es 1, o sea, 1.57 o lo que es lo mismo pi / 2 radianes. Recuerda las matemticas del cole. El radin es una unidad de medida 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.
var arco = 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). Recuerda las matemticas del cole. El radin es una unidad de medida 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.
var argum= Math.atan2( 10, 4)
La variable argum contendr el arco cuya tangente es 10/4. Recuerda las matemticas del cole. El radin es una unidad de medida 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:
var redexceso = 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.
var coseno = Math.cos( Math.PI/2)
La variable coseno contendr el valor 0, que es el coseno de pi/2 radianes (90).
exp(exprnum)
Devuelve el valor del 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:

var e4 = 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 funcin parseInt() o parseFloat(). Su sintaxis es tan simple como el ejemplo:
var redexceso = Math.floor( 4.75)
La variable redexceso contendr el valor 4.
log(exprnum)
Devuelve el logaritmo natural o neperiano, o sea, en base al 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:
var logaritmo = 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:
var mayor = 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:
var menor = 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 funcin parseInt() o parseFloat(). Su sintaxis es tan simple como el ejemplo:
var potencia = Math.pow( 2, 4)
La variable potencia contendr el valor 16.
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:
var azar = 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:
var entero1 = Math.random(4.25) var entero2 = Math.random(4.65)
La variable entero1 contendr el valor 4 mientras entero1 que contendr 5.
sin(exprnum)
Es una 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.
var seno = Math.sin( Math.PI/2)
La variable seno contendr el valor 1, que es el seno de pi/2 radianes (90).
sqrt(exprnum)
Devuelve la 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:
var raiz = Math.sqrt( 49)
La variable raiz contendr el valor 7.
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.
var tangente = Math.tan( Math.PI/4)
La variable tangente contendr el valor 1, que es la tangente de pi/4 radianes (45).

HTML Css Javascript

Cargado por

Copyright:

Formatos disponibles

HTML Css Javascript

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML Css Javascript

Cargado por

Copyright:

Formatos disponibles

Pginas Web

HTML CSS JAVASCRIPT

Ing Roger E. Alarcn Garca 2006

Lenguaje HTML Tpicos Internet

Lenguaje HTML Tpicos Internet

Lenguaje HTML Tpicos Internet

Lenguaje HTML Tpicos Internet

Lenguaje HTML Tpicos Internet

Lenguaje HTML Tpicos Internet

Lenguaje HTML Tpicos Internet

&reg; &nbsp; CARACTERES DE CONTROL

Resultado Espacio en blanco

Lenguaje HTML Tpicos Internet

Lenguaje HTML Tpicos Internet

Lenguaje HTML Tpicos Internet

Lenguaje HTML Tpicos Internet

Lenguaje HTML Tpicos Internet

Lenguaje HTML Tpicos Internet

Lenguaje HTML Tpicos Internet

Lenguaje HTML Tpicos Internet

Lenguaje HTML Tpicos Internet

Lenguaje HTML Tpicos Internet

Lenguaje HTML Tpicos Internet

Lenguaje HTML Tpicos Internet

Lenguaje HTML Tpicos Internet

Lenguaje HTML Tpicos Internet

Lenguaje HTML Tpicos Internet

Lenguaje HTML Tpicos Internet

Lenguaje HTML Tpicos Internet

Lenguaje HTML Tpicos Internet

Lenguaje HTML Tpicos Internet

Lenguaje HTML Tpicos Internet

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

<HEAD> <TITLE>Formulario</TITLE> </HEAD>

Lenguaje HTML Tpicos Internet

Lenguaje HTML Tpicos Internet

Hojas de Estilo en Cascada (CSS) Topicos Internet

HOJAS DE ESTILO EN CASCADA

Hojas de Estilo Posicionamiento de Contenidos Fuentes Descargables

Hojas de Estilo en Cascada (CSS) Topicos Internet

ESTRUCTURA DE UNA HOJA DE ESTILOS

Hojas de Estilo en Cascada (CSS) Topicos Internet

Hojas de Estilo en Cascada (CSS) Topicos Internet

Hojas de Estilo en Cascada (CSS) Topicos Internet

Hojas de Estilo en Cascada (CSS) Topicos Internet

Hojas de Estilo en Cascada (CSS) Topicos Internet

Hojas de Estilo en Cascada (CSS) Topicos Internet

Hojas de Estilo en Cascada (CSS) Topicos Internet

Hojas de Estilo en Cascada (CSS) Topicos Internet

Hojas de Estilo en Cascada (CSS) Topicos Internet

Hojas de Estilo en Cascada (CSS) Topicos Internet

Utilizando el estilo anterior en una pgina web.

Hojas de Estilo en Cascada (CSS) Topicos Internet

Hojas de Estilo en Cascada (CSS) Topicos Internet

Lenguaje Java Script Topicos Internet

Lenguaje Java Script Topicos Internet

Lenguaje Java Script Topicos Internet

Lenguaje Java Script Topicos Internet

Lenguaje Java Script Topicos Internet

Lenguaje Java Script Topicos Internet

® CARACTERES DE CONTROL