You are on page 1of 89

Páginas Web

HTML CSS JAVASCRIPT

Ingº Roger E. Alarcón García  2006

Páginas Web
LENGUAJE HTML ........................................................................................................... 4 INTRODUCCIÓN ......................................................................................................... 4 ¿QUE ES HMTL? .......................................................................................................... 4 ESTRUCTURA DE UNA PAGINA HTML................................................................... 5 ¿CÓMO SE UTILIZAN LOS COLORES EN HTML?................................................... 7 TRABAJANDO CON TEXTO ...................................................................................... 8 ENCABEZADOS ...................................................................................................... 8 FORMATO DEL TEXTO .......................................................................................... 8 ETIQUETA FONT Y SUS PARÁMETROS .............................................................. 9 CARACTERES ESPECIALES ................................................................................ 10 CARACTERES DE CONTROL .............................................................................. 10 FORMATEO DE PARRAFOS................................................................................. 11 ETIQUETA BARRA HORIZONTAL ...................................................................... 12 ENLACES Y ANCLAS ............................................................................................... 12 ANCLAS DE REFERENCIA................................................................................... 13 ANCLAS NOMINALES .......................................................................................... 13 OBJETOS MULTIMEDIA .......................................................................................... 14 MANIPULACIÓN DE IMÁGENES ........................................................................ 14 MANIPULACIÓN DE AUDIO ............................................................................... 15 MANIPULACIÓN DE VIDEO ................................................................................ 16 MANIPULACIÓN DE TEXTO EN MOVIMIENTO ............................................... 17 MANIPULACION DE TABLAS ................................................................................. 18 MANIPULACION DE FRAMES(MARCOS).............................................................. 23 MANIPULACION DE FORMULARIOS .................................................................... 28 ESTRUCTURA DE UN FORMULARIO ................................................................ 28 OBJETOS DENTRO DEL FORMULARIO. ............................................................ 29 HOJAS DE ESTILO EN CASCADA ............................................................................... 33 INTRODUCCIÓN ....................................................................................................... 33 HOJAS DE ESTILO .................................................................................................... 33 ESTRUCTURA DE UNA HOJA DE ESTILOS ........................................................... 34 DEFINICIÓN DE HOJAS DE ESTILO EN FICHEROS EXTERNOS ........................ 36 REGLAS DE IMPORTANCIA EN LOS ESTILOS ..................................................... 37 ATRIBUTOS DE LAS HOJAS DE ESTILO ............................................................... 37 DEFINICIÓN DE ATRIBUTOS DE LAS HOJAS DE ESTILO .................................. 38 DEFINICION DE CLASES DE ESTILOS ................................................................... 41 CARACTERISTICAS AVANZADAS DE LAS CSS .................................................. 42 EFECTOS PARA FORMULARIOS ............................................................................ 44 CREANDO BORDES PUNTEADOS ...................................................................... 44 ESTILOS EN CAMPOS DE TEXTO ....................................................................... 45 JAVA SCRIPT ................................................................................................................ 47 INTRODUCCIÓN AL LENGUAJE JAVASCRIPT ..................................................... 47 JAVASCRIPT .............................................................................................................. 47

SINTAXIS JAVASCRIPT ........................................................................................... 48 CASE SENSITIVE .................................................................................................. 49 SEPARAR LÍNEAS DE CÓDIGO ........................................................................... 49 ESPACIOS EN BLANCO ........................................................................................ 49 BACKSLASH .......................................................................................................... 49 ABRIENDO Y CERRANDO GRUPOS ................................................................... 49 COMENTARIOS ..................................................................................................... 50 VARIABLES Y NOMBRES DE FUNCIONES ....................................................... 50 PALABRAS RESERVADAS .................................................................................. 50 PROGRAMACION BASICA ...................................................................................... 51 VARIABLES Y DATOS.......................................................................................... 51 TIPOS DE DATOS .................................................................................................. 52 OPERADORES ....................................................................................................... 53 OPERADORES ARITMÉTICOS............................................................................. 53 OPERADORES BINARIOS .................................................................................... 54 OPERADORES RELACIONALES ......................................................................... 55 OPERADORES LÓGICOS ...................................................................................... 56 CONVERSIÓN EXPLÍCITA DE TIPOS ................................................................. 57 FUNCIONES GLOBALES ...................................................................................... 57 EXPRESIONES REGULARES ............................................................................... 58 SENTENCIAS DE CONTROL Y FLUJO.................................................................... 60 SENTENCIAS CONDICIONALES ......................................................................... 60 SELECCIÓN MÚLTIPLE ....................................................................................... 61 BUCLES ...................................................................................................................... 62 SENTENCIA WHILE .............................................................................................. 62 SENTENCIA DO...WHILE ..................................................................................... 62 SENTENCIA FOR ................................................................................................... 63 SENTENCIA FOR ... IN .......................................................................................... 63 RUPTURA DE BUCLES ......................................................................................... 63 OBJETOS .................................................................................................................... 64 ARRAYS ................................................................................................................. 64 OBJETO OBJECT ................................................................................................... 65 OBJETO STRING ................................................................................................... 67 OBJETO DATE ....................................................................................................... 76 OBJETO MATH ...................................................................................................... 84

Lenguaje HTML Tópicos Internet

LENGUAJE HTML
INTRODUCCIÓN El World Wide Web (WWW) es un sistema que contiene una cantidad de información casi infinita. Pero esta información debe estar ordenada de alguna forma de manera que sea posible encontrar lo que se busca. La unidad básica donde está almacenada esta información son las páginas Web. Estas páginas se caracterizan por contener texto, imágenes, animaciones... e incluso sonido y video. Una de las características más importantes de las páginas Web es que son hipertexto. Esto quiere decir que las páginas no son elementos aislados, sino que están unidas a otras mediante los links o enlaces hipertexto. Gracias a estos enlaces el navegante de Internet puede pulsar sobre un texto de una página para navegar hasta otra página. Será cuestión del programador de la página inicial decidir que palabras o frases serán las utilizadas para enlazarse y a donde nos conducirá pulsar sobre ellas. En algunos ambientes se discute que el World Wide Web ya no es un sistema hipertexto sino hipermedia. Los que defienden el cambio se apoyan en que aunque en sus orígenes el WWW constaba únicamente de texto en la actualidad es un sistema principalmente gráfico y se puede hacer que las enlaces sean, no sólo texto, sino imágenes, videos, Botones,... en definitiva cualquier elemento de una página. ¿QUE ES HMTL? HTML es el acrónimo de HyperText Markup Language, esto quiere decir un Lenguaje de Marcado de HiperTexto basado en etiquetas, el cual contiene enlaces que nos permiten navegar entre los diferentes documentos y recursos web de nuestro u hacia otros servidores. Los navegadores WWW leen estos archivos de texto e interpretan estas etiquetas para determinar como desplegar la página Web. Para utilizar etiquetas en HTML se deben encierran entre < y >, su estructura en la página web es: <NOMBRE_ETIQUETA> o bien estas otras: <NOMBRE_ETIQUETA> TEXTO </NOMBRE_ETIQUETA> <NOMBRE_ETIQUETA atributo1=”valor1” atributo2=”valor2” ......... > TEXTO </NOMBRE_ETIQUETA> La primera está formada por una sola instrucción, es decir, una sola etiqueta de apertura, en cambio la segunda y tercera presentan una etiqueta de apertura y otra de cierre, todo el texto escrito entre ambas es afectado por la etiqueta definida. La tercera aún especifica ciertos atributos que se pueden manipular de la etiqueta como se verá posteriormente, se tendría que agregar el nombre del atributo, el signo igual y su valor correspondiente, y pueden ser varios atributos los que se especifiquen en una etiqueta.

......................... ........... Lo que visualizará nuestra página .......................Lenguaje HTML Tópicos Internet ESTRUCTURA DE UNA PAGINA HTML Básicamente consta de cuatro pares de etiquetas: <HTML> <HEAD> <TITLE>Nuestra primera página</TITLE> </HEAD> <BODY> ................. </BODY> </HTML> <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> ...

</BODY> </HTML> Nota: Almacenar esta información con el nombre de ejemplo1. descripción. pero también se puede especificar otras etiquetas como por ejemplo < META> que permite especificar palabras claves. imágenes. Ejemplo 2: <HTML> <HEAD> <TITLE>Atributos de Body</TITLE> </HEAD> . VLINK=”#rrggbb” especifica el color de los enlaces visitados. etc. BGPROPERTIES define el movimiento vertical del fondo.Lenguaje HTML Tópicos Internet Ejemplo 1: <HTML> <HEAD> <TITLE> USAT – Universidad Católica Santo Toribio de Mogrovejo</TITLE> </HEAD> <BODY> Agregar imágenes. y el formato visible al usuario se debe encontrar entre estas etiquetas. el texto. que sirven para los buscadores. BGSOUND=”ruta\archivosonido” especifica el archivo de audio que se escuchará en la página. Atributos de la etiqueta BODY BGCOLOR=”#rrggbb” define el color del fondo de la página. ALINK=”#rrggbb” especifica el color de los enlaces al activarse. autor. en la que se incluye la etiqueta <TITLE> y </TITLE> para especificar el título de la página. Etiqueta BODY La etiqueta <BODY> y </BODY> especifican el contenido de la página. LINK=”#rrggbb” especifica el color de los enlaces o vínculos. dentro de estas se incluyen todas las demás etiquetas necesarias para mostrar la información que se requiera en la página. TEXT =”#rrggbb” define el color del texto de la página. fechas. fondo y el menú de opciones. BACKGROUND=”ruta\archivografico” especifica la imagen que será desplegado como fondo.html o ejemplo1. Etiqueta HEAD La etiqueta <HEAD> y </HEAD> especifican la cabecera de la página web.htm Etiqueta HTML Esta etiqueta <HTML> y </HTML> especifican el inicio y el fin del documento web.

: Ejemplo 3: <HTML> <HEAD> <TITLE>Curso de Lenguaje HTML</TITLE> </HEAD> <BODY bgcolor=”#C0D9D9” text=”#000000” > Bienvenidos al curso de Lenguaje HTML.A. ¿CÓMO SE UTILIZAN LOS COLORES EN HTML? Se pueden llegar a tener 16 millones de colores en una página web. green. Cada uno de los números varía hexadecimalmente {0. 2.. </BODY> </HTML> .F}.. haremos una página con fondo celeste y letras negras.universia.usat. verde y azul.9. Usaremos para este efecto los atributos bgcolor y text..2.1.. Se especifica el color deseado mediante números hexadecimales mediante la siguiente estructura: #RRVVAA en inglés #rrggbb El color tiene un signo de numeral # antecediendo a los 6 números..pe">Pulsa aquí</a> <BODY> <HTML> Esta página utiliza los atributos para la etiqueta BODY como son por ejemplo: se define el color de fondo de la página como cyan (00FFFF).edu. yellow.pe”>Pulsa aquí</a><br> OTRO enlace <a href="http://www. Existen dos formas para aplicar colores a una página web: 1. el color del texto como magenta (FF00FF) y los colores de los enlaces.. Se especifica el color deseado directamente con el nombre del color en ingles: Ejemplo: blue. 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..edu.Lenguaje HTML Tópicos Internet <BODY BGCOLOR=#00FFFF TEXT=#FF00FF LINK=#ff0000 VLINK=#00FF00 ALINK=#0000FF> Este es un enlace <a href=”www.B. Existen dos números para cada color principal: rojo.

</BIG> <SMALL> … </SMALL> <BLINK> . </B> <I> ... </S> <SUP> … </SUP> <SUB> .... </SUB> <BIG> ….... </U> <S> ...... FORMATO DEL TEXTO <B> ..Lenguaje HTML Tópicos Internet TRABAJANDO CON TEXTO ENCABEZADOS Existen 6 diferentes niveles de encabezados: <H1> </H1> <H2> </H2> <H3> </H3> <H4> </H4> <H5> </H5> <H6> </H6> Texto de mayor importancia (mas grande) ...…. ...... . .. Solo en Netscape Navigator .. </I> <U> ….. </BLINK> Negrita Cursiva Subrayar Tachar Letra en superíndice Letra en subíndice Incrementa el tamaño del tipo de letra Disminuye el tamaño del tipo de letra El texto parpadea. Texto de menor importancia (mas pequeño) Ejemplo 4: <HTML> <HEAD> <TITLE>Tratamiento de Texto </TITLE> </HEAD> <BODY> <H1>TITULO DE LA PAGINA</H1><br> <H2>SUBTITULO </H2><br> <H3>NIVEL 3</H3><br> <H4>NIVEL 4</H4><br> <H5>NIVEL 5</H5><br> <H6>Derechos Reservados</H6> </BODY> </HTML> Esta página nos muestra los diferentes encabezados que se pueden definir en una página HTML utilizando estas etiquetas..

</FONT> Manipula una o más características de un carácter o párrafo (obligatoriamente se debe colocar un parámetro).Especifica el tamaño de la fuente dado en puntos.. </FONT> </BODY> </HTML> NOTA. FACE ...Especifica el color del texto que se puede escribir o reflejar en código hexadecimal....Indica el tipo de fuente (tipo de letra) SIZE . COLOR .Si se desea se pueden especificar varios tipos de letras separadas por comas. Ejemplo: <FONT COLOR=”#FF0000” FACE=”arial” SIZE =”2”> Este texto aparecerá de color Rojo con letra Arial y de tamaño 2. </FONT> Ejemplo 6: <HTML> <HEAD> <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 tamaño 2.. <FONT COLOR="#FF0000" FACE="arial.Lenguaje HTML Tópicos Internet Ejemplo 5: <HTML> <HEAD> <TITLE>Formato del Texto </TITLE> </HEAD> <BODY> <B>TITULO DE LA PAGINA en negrita</B><br> <I>SUBTITULO en cursiva </I><br> <U>Texto subrayado</U><br> <S>texto tachado</S><br> Ecuaciones : <br>E=mc<SUP>2</SUP><br> Química : H<SUB>2</SUB>O<br> <BIG>Texto grande</BIG><br> <SMALL>Texto pequeño</SMALL><br> </BODY> </HTML> ETIQUETA FONT Y SUS PARÁMETROS <FONT COLOR=”valor” FACE=”valor” SIZE=”valor”> ….verdana" SIZE ="2"> .

&nbsp. &copy. si se necesitan se debe usar los siguientes códigos. &oacute. &amp. &eacute. Para la utilización de estos caracteres se utiliza la forma siguiente: &#valor. el valor corresponde a un número superior a 127. &Oacute. &Uacute. &uacute. &iexcl. &uacute. Código &aacute. &#189. CARACTERES DE CONTROL Resultado á é í ó ú Á É Í Ó Ú ñ Ñ ¿ ¡ º ª © ® Espacio en blanco Son caracteres especiales que se utilizan en el lenguaje HTML para formar las etiquetas. &lg. &Eacute. &Iacute. corresponde al (1/2).<br> &aacute. &iquest. &quot. 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 tamaño 2.Lenguaje HTML Tópicos Internet CARACTERES ESPECIALES Estos caracteres especiales corresponden a los códigos de la tabla ASCII. &Ntilde. &ntilde.<br> &frac12. pero existen sinónimos como por ejemplo &frac12. &ordf. &reg. &oacute. &iacute. Código &lt. &iacute. &ordm. &Aacute. &eacute.<br> . </FONT><br> &#189.

Ejemplo 8: <HTML> <HEAD> <TITLE>Formato del Texto </TITLE> </HEAD> <BODY TEXT="#0000ff"> Esto es un párrafo <P align="LEFT">Permite cambiar las características de un conjunto de líneas escrito en código HTML. <DIV ALIGN=”valor”> . los cuales no siempre son obligatorios. Insertar una línea en blanco antes del texto.<br> &copy. Para esto se debe conocer etiquetas y parámetros.<br> &iexcl.<br> El signo mayor ---..&amp. &Eacute.<br> El asperson ---.Lenguaje HTML Tópicos Internet &Aacute. </P> Esta etiqueta permite delimitar un párrafo. &Ntilde.. El parámetro WIDTH especifica el número máximo de caracteres en una línea.. </DIV> Permite alinear el texto del párrafo.<br> &iquest.&gt.&lt. RIGHT.. JUSTIFY. <CENTER> .<br> &ordm.. CENTER. los cuales no siempre son obligatorios.. </CENTER> Permite centrar todo el texto del párrafo..&quot. &Uacute..<br> CARACTERES ESPECIALES<br> El signo menor ---.<br> La comilla ---.<br> &ntilde. &Iacute. pero que permiten cambiar apariencias. pero no inserta ninguna línea antes de él.</P> . no requiere etiqueta de cierre ni parámetros. </PRE> Esta etiqueta es útil para representar código fuente.<br> </BODY> </HTML> FORMATEO DE PARRAFOS <P ALIGN=”valor” > ..<br> &reg.</P> Este texto esta justificado <P align="JUSTIFY">Permite cambiar las características de un conjunto de líneas escrito en código HTML. Para esto se debe conocer etiquetas y parámetros. &Oacute. pero que permiten cambiar apariencias. toma los mismos valores que la etiqueta <P>. permitiendo alinear siendo sus valores: LEFT. <PRE WIDTH=”valor”> ….<br> &ordf.

. Este nuevo texto no está separado del anterior por un espacio. Ejemplo: .. Anclas nominales. 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. dado en píxel.</DIV> </BODY> </HTML> ETIQUETA BARRA HORIZONTAL <HR NOSHADE ALIGN=”valor” WIDTH=”valor” SIZE=”valor”> Permite insertar una barra horizontal. NOSHADE especifica una línea sólida. puede ser en porcentaje o en píxel. al centro y tal como está escrito</PRE> <DIV align="Justify">Este texto aparecerá justificado a ambos lados.</DIV> <DIV align="RIGHT">Este texto aparecerá justificado a ambos lados. El objeto que constituye el enlace es resaltado por el navegador utilizando otro color al original y subrayado.<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 página: texto. ALIGN permite alinear la barra tomando los mismos valores que la etiqueta <P> WIDTH modifica el ancho.Son utilizados para definir puntos específicos de un documento que pueden ser referenciados usando anclas de referencia.Contienen la referencia del destino del enlace hipertexto. izquierda y derecha. imágenes y otros estén enlazados con otros documentos u objetos multimedia relacionados.<hr noshade> . SIZE especifica el grosor.Lenguaje HTML Tópicos Internet <PRE>El código <B><CENTER>Lenguaje HTML</CENTER></B>muestra el texto en negrita. izquierda y derecha. .

pe”>USAT</A> Es posible tener un enlace hipertexto que activará el programa de correo electrónico para enviar un mensaje a un usuario determinado.Lenguaje HTML Tópicos Internet ANCLAS DE REFERENCIA.edu. gopher. <A HREF=”mailto:computo@usat. hay que indicarlo. para ello utilizamos una notación especial: URL la cual tiene la siguiente sintaxis: servicio://nombre_servidor[:puerto]/ruta_acceso/nombrearchivo Servicio: Especifica el tipo de servicio utilizado.el puerto estándar es el 80. los cuales son http. Mediante las etiquetas <A> y </A> podemos indicar que una frase o texto o una imagen es un enlace a otro punto. Debemos indicar el destino del enlace formando parte del código de inicio de la etiqueta.edu. Puerto. si un servidor tiene otro distinto. <A HREF=”documento1.usat.html”>Ir al capitulo 1</A> ANCLAS NOMINALES Especifican puntos de un documento a los que podemos hacer referencia usando enlaces hipertexto. news. es decir: <A HREF=”nombrearchivo”>Texto que permite ir al enlace</A> Por ejemplo: <A HREF=”capitulo1/pagina. Su función es asignar un nombre o etiqueta al punto donde se encuentran según la metodología que sigue: <A NAME=”ETIQUETA”> Texto destino de otros enlaces </A> Para hacer referencia ahora a este punto al que se le ha asignado una etiqueta mediante un ancla nominal. frp. wais y telnet. Ejemplo: <A HREF=”http://www. 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..pe”>Contáctenos Cómputo</A> .html#etiqueta1”>Texto de enlace</A> URLS Podemos incluir enlaces a otros documentos de otros servidores de la red.

.Bottom.Coloca el punto más alto de la imagen coincidiendo con lo más alto de la línea de texto actual. mientras que los formatos GIF pueden manipular hasta 256 colores. .. .Alinea el punto medio(en altura de la imagen con la base del texto.7 millones de colores. es el valor por defecto. ALIGN tiene los siguientes valores . la segunda incluiría la reducción del número de colores utilizados. . Existen varias maneras de minimizar el tamaño de los archivos de imagen.Middle.Right. .Coloca la imagen a la izquierda del texto. En cuanto al tamaño es recomendable que el peso estándar de una imagen debe ser menor o igual a 10 Kb.jpg" width="150"> </BODY> </HTML>  Alineación del texto que lo acompaña. Como referencia se debe lograr trabajar con imágenes que no sobrepasen los 100 Kb. . Etiqueta para insertar imágenes y sus respectivos atributos <IMG SRC=”archivográfico”> Atributos  Dimensionamiento de imágenes utilizando los atributos WIDTH(ancho) y HEIGHT (alto).. la primera sería reducir el tamaño de la imagen mediante el uso de software gráfico..Lenguaje HTML Tópicos Internet OBJETOS MULTIMEDIA MANIPULACIÓN DE IMÁGENES Los formatos estándar de imágenes soportados por la web son: JPG (Joint Photograhic Experts Group) GIF (Graphic Interchange Format) PNG (Portable Network Graphic) Los formatos JPG permiten almacenar imágenes con una calidad de hasta 16.Left..Colocal la imagen a la derecha del texto. sus valores pueden ser representados en pixeles o en porcentaje.Top. siendo este muy bueno para comprimir áreas monocolor. Ejemplo : <HTML> <HEAD> <TITLE>Manipulación de Imágenes</TITLE> </HEAD> <BODY> <img src="pescados.Alinea el punto más bajo de la imagen con la base del texto.

<br><br><br><br><br><br> Esta es una imagen <img src="pescados. siendo posible que se ejecute automáticamente como fondo sonoro de la página. o como una opción para que el usuario lo active.jpg" align="right">Este texto aparece a la derecha de la imagen<br><br><br><br><br><br><br> <img src="pescados.<br><br> </BODY> </HTML> MANIPULACIÓN DE AUDIO Se puede incorporar sonido a una página web.jpg" hspace="20" vspace="10" align="left"> referente a la vida marina. Los archivos de sonidos pueden ser de tipo mid.jpg" align="Middle">Este texto aparece en la parte central<br><br> <img src="pescados. <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="Top">Este texto aparece en la parte superior<br><br> <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.jpg" align="Texto alternativo Pescados"> Aqui no aparece el texto alternativo debido a que la imagen si se está mostrando en el navegador. Ejemplo <HTML> <HEAD> <TITLE>Manipulación de Imágenes</TITLE> </HEAD> <BODY> <img src="pescados. <img src="pescados. por defecto el valor es 0. se puede modificar el valor para variar el grosor en píxeles. wav o mp3.jpg" alt=”Imagen de pescados”>  Borde de la imagen utilizando para esto el parámetro BORDER. esta se mostrará en caso la imagen no se visualice en el navegador.Lenguaje HTML Tópicos Internet  Se puede ingresar una descripción breve o frase indicativa de la imagen.jpg" align="Bottom">Este texto aparece en la parte inferior de la imagen<br><br> <img src="pescados. El parámetro es ALT.

Lenguaje HTML Tópicos Internet Fondo sonoro para Internet Explorer <BGSOUND SRC=”Archivo_de_Audio” LOOP=n> El atributo LOOP especifica el número de veces que se debe ejecutar el archivo de sonido.avi” CONTROLS> . pausa. etc. Si desea que el sonido se ejecute indefinidamente debe colocar el valor de LOOP a –1 o infinite. mov. <IMG dynsrc=”video. Si se omite este atributo el archivo solo se escuchará una sola vez. stop.que especifica si se desean agregar los controles al video. con los siguientes parámetros: <IMG dynsrc=”archivo_de_video”> Las extensiones generales para video son: avi. Ejemplo: <HTML> <HEAD> <TITLE>Manipulación de Sonidos</TITLE> </HEAD> <BODY> <bgsound src="sonido. ram. Se pueden utilizar los siguientes atributos adicionales: AUTOSTART =”true” LOOP=”true” HIDDEN=”true” Ejemplo: <embed src=”sonido. mpeg.. Parámetros adicionales: CONTROLS. y que tiene diferentes teclas como por ejemplo play.mid” hidden=”true”> width=”200” height=”55” autostart=”true” loop=”true” ejecuta automáticamente ejecuta ininterrumpidamente crea una consola invisible MANIPULACIÓN DE VIDEO Para poder insertar secuencias de video en una página se puede utilizar la etiqueta <IMG>.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.

<a ref..para indicar el número de veces que se visualiza. Puede ser LEFT o RIGHT. de esta manera. . <IMG dynsrc=”video. Aparece en un lado y se desplaza hacia el otro lado.DIRECTION. .Sirve para definir de que manera se va a efectuar el desplazamiento del texto. Solo son válidas para Internet Explorer..Aparece por un lado y se desplaza hasta llegar al otro extremo.Ajustan el ancho y el alto. MIDDLE o BOTTOM.Modifica la alineación del texto que lo rodea.Modifica la dirección hacia la que se dirige el texto.  SLIDE.Desplaza alternadamente hacia un lado y otro. Marquesinas Es una ventana en la que se desplaza un texto.avi” LOOP=2> Otra forma es utilizar la opción de colocar un enlace a un archivo de video.BEHAVIOR.  ALTERNATE..WIDHT y HEIGHT.=”video.. puede ser TOP. <MARQUEE>Texto que se desplaza</MARQUEE> Atributos adicionales: .avi”> Clic aquí para Ver</A> Ejemplo: <HTML> <HEAD> <TITLE>Manipulación de Videos</TITLE> </HEAD> <BODY> <IMG dynsrc="video. y se detiene.ALIGN. los valores son:  SCROLL. con JavaScript. .Por defecto. siempre dentro de los límites de la marquesina.Lenguaje HTML Tópicos Internet LOOP. etc.Se modifica el color de fondo de la marquesina.. puede ser igual a un numero de pixels o utilizar porcentajes. .avi"> </BODY> </HTML> MANIPULACIÓN DE TEXTO EN MOVIMIENTO Existen distintas soluciones para conseguir texto en movimiento haciendo uso del lenguaje HTML (las marquesinas) con GIF animados..BGCOLOR. ... el usuario al pulsarlo lo ejecutará..

Estructura de una Tabla <TABLE> <!.. Cuanto mayor es el número.Define la cantidad de desplazamiento del texto en cada movimiento de avance. es decir.Define el tiempo entre cada movimiento de avance. Está expresado en milisegundos. cuya intersección se le denomina celda.Define una fila -> <TD>fila1 – celda1 </TD> <!. SCROLLDELAY.Define una columna -> <TD>fila1 – celda2 </TD> <TD>fila1 – celda3 </TD> </TR> <TR> <!. listas. Cuanto mayor es el número más lento avanza. LOOP. expresado en píxeles.Define a la Tabla -> <TR> <!.Lenguaje HTML Tópicos Internet - - SCROLLAMOUNT. etc).Define una nueva fila -> <TD>fila2 – celda1 </TD> <!.. Es indefinido por defecto. costa de filas y de columnas.Define una columna -> <TD>fila2 – celda2 </TD> <TD>fila2 – celda3 </TD> </TR> </TABLE> . más rápido avanza. Es una herramienta muy útil para organizar contenidos. que permite representar cualquier elemento de la página (texto. imágenes.. Ejemplo <HTML> <HEAD> <TITLE>Manipulación de Marquesinas</TITLE> </HEAD> <BODY> <marquee>Marquesina normal</marquee><br><br><br><br> <marquee widht="20%" height="20%" bgcolor=blue>Marquesina con alto y ancho definidos</marquee><br><br><br><br> <marquee behavior="alternate">Marquesina</marquee><br><br><br><br> <marquee DIRECTION="right">Marquesina que empieza en la izquierda</marquee><br><br><br><br> <marquee scrolldelay=200>Marquesina</marquee><br><br><br><br> <marquee loop="2">Marquesina que se desplaza solo dos veces</marquee><br><br><br><br> </BODY> </HTML> MANIPULACION DE TABLAS Una tabla es una estructura en forma de matriz.Especifica el número de veces que aparecerá el texto.

Define el número de pixels que separarán las celdas.Especifica un URL(referencia relativo) de un archivo de imagen.. derecha (RIGHT) o centro (CENTER)  BGCOLOR. Por defecto es 0.Es código de color o nombre constante que indica el color de fondo de todas las celdas de la tabla.  CELLSPACING..... que se colocará como fondo de la tabla.  BACKGROUND.  WIDTH. Puede estar tanto en pixels como en porcentaje (100% equivale a toda la anchura de la ventana). Ejemplo: <HTML> <HEAD> <TITLE>Manipulación de Tablas</TITLE> </HEAD> <BODY> <TABLE border="2" width="50%" align="center" cellspacing="5" cellpadding="10" bgcolor="blue"> .Lenguaje HTML Tópicos Internet Ejemplo: <HTML> <HEAD> <TITLE>Manipulación de Tablas</TITLE> </HEAD> <BODY> <TABLE> <TR> <TD>Cena </TD> <TD>Bebidas </TD> <TD>Dulces </TD> </TR> <TR> <TD>A </TD> <TD>B </TD> <TD>C </TD> </TR> </TABLE> </BODY> </HTML> Atributos  BORDER.Alinea la tabla a izquierda (LEFT).Especifica el alto de la tabla. lo que significa que no dibujará borde alguno. Si no se indica la tabal se torna transparente.  HEIGHT..Define el número de pixels que habrá entre el borde de una celda y su contenido.  CELLPADDING..  ALIGN..Especifica la anchura de la tabla.Especifica el grosor del borde que se dibujará alrededor de las celdas.

Lenguaje HTML Tópicos Internet <TR> <TD>Cena </TD> <TD>Bebidas </TD> <TD>Dulces </TD> </TR> <TR> <TD>A </TD> <TD>B </TD> <TD>C </TD> </TR> </TABLE> </BODY> </HTML> Atributos que se pueden asignar a una Fila (TR)    ALIGN.. abajo (BOTTOM) o al centro (MIDDLE) BGCOLOR.Alinea el contenido de las celdas de la columna horizontalmente a la izquierda(LEFT).Alinea el contenido de las celdas de la columna verticalmente arriba(TOP)... Ejemplo: <HTML> <HEAD> <TITLE>Manipulación 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) . derecha (RIGHT) o al centro (CENTER) VALIGN.Especifica un código de color o nombre constante que indica el color de fondo de todas las celdas de una fila especifica.

. También se puede especificar tanto en pixels como en porcentaje. derecha (RIGHT) o al centro (CENTER) VALIGN.. abajo (BOTTOM) o al centro (MIDDLE) WIDTH. ROWSPAN. Si se pone igual a 0...Especifica la anchura de la celda con respecto a la anchura de la tabla.Alinea el contenido de las celdas de la columna horizontalmente a la izquierda(LEFT).-Especifica el número de celdas de la columna situadas debajo de la actual que se unen a ésta. BGCOLOR. Es por defecto uno. se unirán todas las celdas que quedan a la derecha.Alinea el contenido de las celdas de la columna verticalmente arriba(TOP)..Especifica el número de celdas de la fila situadas a la derecha de la actual que se unen a esta (incluyendo la celda en la que se declara este parámetro). COLSPAN.Lenguaje HTML Tópicos Internet       ALIGN. Ejemplo: <HTML> <HEAD> <TITLE>Manipulación 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> .Especifica un código de color o nombre constante que indica el color de fondo de una celda específica.

Lenguaje HTML Tópicos Internet Ejemplo: <HTML> <HEAD> <TITLE>Manipulación de Tablas</TITLE> </HEAD> <BODY> <TABLE border="2" width="50%" align="center"> <TR> <TD>&nbsp.</TD> <TD COLSPAN="3" ALIGN="center" BGCOLOR="#0099cc"> <FONT COLOR="#FFFFFF">COMIDAS</FONT> </TD> </TR> <TR align="center"> <TD ROWSPAN="2" VALIGN="bottom">Tipos</TD> <TD>Cena </TD> <TD>Bebidas </TD> <TD>Dulces </TD> </TR> <TR> <TD>A </TD> <TD>B </TD> <TD>C </TD> </TR> </TABLE> </BODY> </HTML> Existe un parámetro que permite definir el titulo de la tabla y es: <CAPTION> <HTML> <HEAD> <TITLE>Manipulación 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> .

com">correo@yahoo. .Lenguaje HTML Tópicos Internet </BODY> </HTML> Ejemplo completo: <HTML> <HEAD> <TITLE>Manipulación 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">Investigación <BR> &amp.gif"></TD> <TD><B><A href="mailto:correo@yahoo. Desarrollo</FONT></TD> </TR> </TABLE> </CENTER> </TD> <TD WIDTH="75%"><CENTER> <FONT COLOR="#FF9900"><B>Francisco José Rodríguez Valero<BR>Re-Ingeniería a su alcance<BR> </FONT> <HR> <TABLE> <TR> <TD><img src="imagenes/email1.com</A></B></TD> </TR> </TABLE></CENTER> </TD> </TR> </TABLE> </BODY> </HTML> MANIPULACION DE FRAMES (MARCOS) Los frames es una técnica del lenguaje HTML que consiste en dividir la pantalla del navegador en diferentes zonas o ventanas. las cuales pueden actuar y ser manipuladas independientemente unas de otras.

Lenguaje HTML Tópicos Internet

Una de las características más importantes es que pulsando un enlace situado en un frame, se puede cargar en otro frame una página determinada. Estructura de un Frame Los frames cambian la estructura de la página HTML tradicional, eliminando la parte del cuerpo (BODY) y sustituyéndola por el código <FRAMESET>. Así todos los códigos que antes aparecían dentro del cuerpo aparecerán dentro del código <FRAMESET>. La estructura típica a utilizar será. <HTML> <HEAD> <TITLE>Título de la Ventana</TITLE> </HEAD> <FRAMESET> <!- Aquí se define el marco principal -> </FRAMESET> </HTML> Atributos de la etiqueta FRAMESET     FRAMEBORDER.- especifica el borde. FRAMESPACING.- Especifica el espaciado entre marcos. ROWS.- Especifica las divisiones de la ventana principal en filas. COLS.- Especifica las divisiones de la ventana principal en columnas.

Los valores utilizados para especificar el tamaño de cada una de ellas es:  Porcentaje.- Expresado en porcentaje como por ejemplo las tablas, 20%, 50%, etc.  Absolutos.- Expresado en pixels.  Sobre el espacio sobrante.- Se utiliza para esto el * , indicando que lo que sobra en ese espacio se lo asigne al frame. Los valores se pueden ingresar separadas por comas. Ejemplos: <FRAMESET rows=”25%,50%,25%”>, esto crea tres sub ventanas horizontales, la primera ocupará un 25% de la ventana principal, la segunda un 50% y la tercera 25% siempre de la ventana principal. <FRAMESET cols=”120,*,100”>, esto crea tres sub ventanas verticales, la primera y la tercera tendrán un ancho fijo de 120 y 100 respectivamente, la segunda (*) ocupará el resto de la ventana principal. <FRAMESET cols=”10%,*,200,2*”>, esto crea cuatro sub ventanas verticales, la primera ocupará un 10% de la ventana principal, la tercera necesita 200 píxeles, la cuarta debe tener el doble de espacio que la segunda, teniendo en cuenta como referencia el espacio sobrante.

Lenguaje HTML Tópicos Internet

Etiqueta FRAME Esta etiqueta indica las propiedades de cada sub ventana. Es necesario indicar una etiqueta <FRAME> para cada sub ventana creada. Los parámetros de <FRAME> son:        NAME.- Asigna un nombre a un frame para que después podamos referirnos a él. SRC.- Indica la dirección del documento HTML que ocupará el frame. SCROLLING.- Decide si se colocan o no barras de desplazamiento al frame para que podamos movernos por su contenido. Su valor por defecto es AUTO, que deja al navegador la decisión. Las otras opciones son YES o NO. NORESIZE.- Este atributo no permite que el usuario cambie el tamaño del frame. FRAMEBORDER.- Si se iguala a cero se eliminará el borde. MARGINWIDTH.- Permite cambiar los márgenes horizontales dentro de un marco. Se representa en píxels. MARGINHEIGHT.- Permite cambiar los márgenes verticales dentro de un marco. Se representa en píxels

Si su navegador no reconoce los frameset y frame no se mostrará información de su página, por esto se incluyen las etiquetas <NOFRAMES> y </NOFRAMES>, creando un contenido alternativo que se visualizará en la página. Ejemplo: Crea el archivo con el nombre de index.html <HTML> <HEAD> <TITLE>Manipulación de Marcos o Frames</TITLE> </HEAD> <FRAMESET ROWS="15%,*,15%"> <!- Crea tres sub ventanas horizontales -> <FRAME NAME="SUPERIOR" src="titulo.html" scrolling="no" noresize> <FRAME NAME="CENTRO" src="contenido.html" noresize marginwidth="20" marginheight="20"> <FRAME NAME="INFERIOR" src="menu.html" crolling="no"> <NOFRAMES> <BODY> Su navegador no muestra frames. Pulse <a href="menu.html">AQUI</A> par ir a la página sin frames. </BODY> </NOFRAMES> </FRAMESET> </HTML> El resultado de este código en el navegador es mostrar las tres zonas creadas pero en cada uno de ellos aparecerá que no se puede mostrar la página. Esto implica que se debe crear las páginas mencionadas en el contenido de esta archivo las cuales son: titulo.html, contenido.html y menu.html.

Lenguaje HTML Tópicos Internet

Archivo: titulo.html <HTML> <HEAD> <TITLE>Titulo</TITLE> </HEAD> <BODY> <CENTER><H1><B>TITULO DE LA PAGINA PRINCIPAL</H1></B></CENTER> </BODY> </HTML> Archivo: contenido.html <HTML> <HEAD> <TITLE>Contenido</TITLE> </HEAD> <BODY> Este es el contenido de la página </BODY> </HTML> Archivo: menu.html <HTML> <HEAD> <TITLE>Menu</TITLE> </HEAD> <BODY> <table> <tr> <td>Opción 1 </td> <td>Opción 2 </td> <td>Opción 3 </td> <td>Opción 4 </td> <td>Opción 5 </td> </tr> </table> </BODY> </HTML> Presentación de información Por defecto, cuando se pulsa un enlace situado dentro de un frame, la nueva página a la que se desea acceder se presenta en ese mismo frame, sin embargo, es posible que se desee que esto no ocurra. Pro ejemplo, si se tiene un frame que sirve de índice y otro donde se muestra los contenidos, sería deseable que los enlaces del frame índice se abrieran en el otro frame. Esto es posible mediante a utilización del parámetro TARGET.

Lenguaje HTML Tópicos Internet

Este parámetro se puede colocar en tres etiquetas: <A>, <AREA> y <BASE>. Este parámetro tiene los siguientes valores:  TARGET=”nombre_ventana”.- Muestra la nueva página en la ventana (frame) cuyo nombre se indica.  TARGET=”_top”.- Elimina todos los marcos existentes y muestra la nueva página en la ventana original sin marcos.  TARGET=”_blank”.- Carga la página en una nueva ventana.  TARGET=”_self”.- Muestra la nueva página en el marco donde está declarado el enlace.  TARGET=”_parent”.- El enlace se muestra en el <FRAMESET> definido anteriormente al actual. Si no hay ningún <FRAMESET> anterior se muestra a pantalla completa suprimiendo todas las sub ventanas de la pantalla. Ejemplo: Modificando el archivo menu.html <HTML> <HEAD> <TITLE>Menu</TITLE> </HEAD> <BODY> <table> <tr> <td><a href="http:/www.microsoft.com" target="_blank">Microsoft</a></td> <td><a href="reseña.html" target="CENTRO">Reseña</a></td> <td><a href="http:/www.usat.edu.pe" target="_top">Pagina Usat</a></td> <td>Opción 4</td> <td>Opción 5</td> </tr> </table> </BODY> </HTML> Implementación de Frame Anidados. La etiqueta <FRAMESET> puede ser utilizada en forma anidada con el objeto de subdividir una subdivisión. Esto se realiza colocando otro <FRAMESET> donde normalmente colocamos las etiquetas <FRAME>, del siguiente modo: Ejemplo: <HTML> <HEAD> <TITLE>Manipulación de Marcos o Frames ANIDADOS </TITLE> </HEAD> <FRAMESET COLS="25%,*"> <!- Crea dos sub ventanas verticales -> <FRAME NAME="INDICE" src="indice.html"> <FRAMESET ROWS="*,60">

<FORM ACTION=”” METHOD=”” ENCTYPE=”text/plain” NAME=”identificación”> …. Un formulario no es más que un conjunto de estos controles cuya información será enviada conjuntamente cuando el usuario pulse sobre el botón de envío. </FORM>.html"> </FRAMESET> <NOFRAMES> <BODY> Su navegador no muestra frames.Lenguaje HTML Tópicos Internet <FRAME NAME="PRINCIPAL" src="contenido. Estos elementos. </FORM> Parámetros  ACTION. se puede indicar el URL de un programa(CGI) que se encargará de tratar los datos del formulario.Indica la acción que se debe efectuar. </BODY> </NOFRAMES> </FRAMESET> </HTML> MANIPULACION DE FORMULARIOS La habilidad de interactuar con los usuarios es una de las principales características de los ordenadores y las redes informáticas. serán gráficos en la mayoría de navegadores... El lenguaje HTML consta de una serie de etiquetas que permitirán crear de forma rápida y sencilla numerosos elementos de entrada de datos. que los datos sean enviados por email a una dirección indicada como por ejemplo: ACTION=”mailto:dirección de email” O también. METHOD. acompañados de atributos especiales.html">AQUI</A> par ir a la página sin frames. Botones de envío y de borrado.Especifica el método usado para el envío de los datos. botones de opción y otros controles que nos permitirán aprovechar esa posibilidad de interactividad en nuestras páginas Web. que reciben el nombre de controles.. Esta puede ser. Cuerpo del formulario …. 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. que debe encontrarse en el servidor y estar escrito en algún lenguaje de programación. ESTRUCTURA DE UN FORMULARIO Las etiqueta que permiten la creación de un formulario son <FORM> .html"> <FRAME NAME="EJEMPLOS" src="enlaces. Con POST envía datos en la entrada estándar del programa que trata el formulario y con GET los  . Pulse <a href="menu..

en la línea de comandos.. MAXLENGTH. puesto que es posible tener varios formularios en la misma página.Representa el número de filas COLS..Representa el número de columnas que ocupará la caja de texto.Lenguaje HTML Tópicos Internet   datos se pasan por parámetro.-La longitud de este campo es por defecto de 20 caracteres. con este atributo se puede variar el tamaño de la caja.Texto Corto(Una Línea) <INPUT TYPE=”text” NAME=”nombre_objeto” VALUE=”valor_inicial”> Atributos VALUE. A. Texto en múltiples líneas <TEXTAREA NAME=”nombre_objeto” ROWS=”numero” COLS=”numero”> Texto por defecto </TEXTAREA> ROWS. introduciéndolo en forma de párrafo. El método de uso más normal será POST.. pero en este caso no se imprimen los caracteres según se van introduciendo. ENCTYPE=”text/plain” indica que los valores de los campos serán enviados como un archivo de texto. al programa. Por defecto no tiene límites. Permite el ingreso de texto que puede abarcar varias líneas. Cuadro de Texto Existen tres formas de conseguir que el usuario introduzca texto en el formulario: .Texto que contendrá la caja por defecto.Permite colocar una identificación al formulario.. SIZE.-Especifica el número máximo de caracteres que puede introducir el usuario. 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" . NAME. perfectamente legible y sin codificar. OBJETOS DENTRO DEL FORMULARIO. Palabras Secretas <INPUT TYPE=”password” NAME=”nombre_objeto” VALUE=”valor_inicial”> Es similar al anterior. se muestra un * en lugar del carácter pulsado.

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 . Botones de Opción Se usa cuando la opción debe tomar un único valor simple de una serie de alternativas.Lenguaje HTML Tópicos Internet COLS="40">Escriba su Sugerencia</TEXTAREA> </FORM> </BODY> </HTML> B.Es un parámetro que permite activar un control por defecto. <INPUT TYPE=”radio” NAME=”nombre_objeto”> Para indicar un grupo de botones de opción se debe asignar a todos ellos el mismo NAME. en caso contrario no se enviará ningún valor. cuando se envían los datos con el botón activado.Si se indica el atributo value. es decir. teniendo dos estados los cuales son ON y OFF. En este caso se presentan unos valores opcionales de los que solo se puede seleccionar uno.. Tiene los mismos atributos adicionales que el Checkbox. se enviará el objeto con el valor indicado. aparezca marcado. C. <INPUT TYPE=”checkbox” NAME=”nombre_objeto”> Atributos adicionales VALUE=”valor”.. En este caso se utiliza como tipo la palabra RADIO. En este caso de debe especificar como tipo CHECKBOX. Casillas de Verificación Aparecerá una casilla en la página que permite marcarla o desmarcarla. CHECKED.

.. Elección entre múltiples opciones Se usa para menús simples o múltiples..Si lo indicamos podremos seleccionar más de una opción a la vez. si no. se ve una lista desplegable.. <OPTION>Enésima Opción </SELECT> Atributos adicionales SIZE=valor .. Formato: <SELECT NAME=”nombre_objeto”> <OPTION> Primera Opción <OPTION> Segunda Opción . Si es mayor que 1 se observa una lista de selección y.Lenguaje HTML Tópicos Internet </FORM> </BODY> </HTML> D....Especifica el número de opciones que se pueden visualizar. MÚLTIPLE.. Ejemplo: <HTML> <HEAD> <TITLE>Formulario</TITLE> </HEAD> <BODY> <B>Pagina HTML con un formulario</B><br> Utilizando Cuadro de Selección (ComboBox) <FORM> Colores (solo permite elegir uno)<br> <SELECT NAME="COLOR"> <OPTION>Azul <OPTION>Rojo <OPTION>Verde <OPTION>Amarillo <OPTION>Blanco </SELECT> <BR><BR>Otro de Colores (este permite seleccionar mas de uno)<br> <SELECT NAME="COLORES" MULTIPLE SIZE=3> <OPTION>Azul <OPTION>Rojo <OPTION>Verde <OPTION>Amarillo <OPTION>Blanco </SELECT> </FORM> </BODY> </HTML> .

com" METHOD="POST"> Texto : <INPUT TYPE="TEXT" NAME="txtTexto"><br><br> <INPUT TYPE="submit" VALUE="Enviar"> <INPUT TYPE="reset" VALUE="Borrar"> </FORM> </BODY> </HTML> . Botón 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:roger@hotmail. En todo formulario debe existir al menos un botón de envío.Lenguaje HTML Tópicos Internet E. el que permita enviar los datos que se encuentran en los controles y otro que permita limpiar su contenido. Botón de Envío <INPUT TYPE=”submit” VALUE=”mensaje a mostrar”> El atributo VALUE muestra una etiqueta no editable que aparecerá sobre el botón. Botones de Envío y Borrado Existen dos botones esenciales en un formulario.

o es aplicable. CSS son las siglas de "Cascade StyleSheet". El criterio de selección también puede ser una clase. Se trata de una especificación sobre los estilos físicos aplicables a un documento HTML. En sintaxis CSS. nada podía hacerse para modificarlo. el estilo. los nombres de las propiedades y los valores se encierran entre llaves {}. pues podemos enviar la fuente junto con la página. Cada una de estos criterios de selección se verá a continuación.). Los tres componentes del HTML Dinámico son:    Hojas de Estilo Posicionamiento de Contenidos Fuentes Descargables Las hojas de estilo permiten especificar atributos para los elementos de su página web. . Hasta ahora.Hojas de Estilo en Cascada (CSS) Topicos Internet HOJAS DE ESTILO EN CASCADA INTRODUCCIÓN Bajo el nombre de HTML Dinámico se engloba un conjunto de técnicas con dos objetivos claros: proporcionar un control absoluto al diseñador de páginas HTML y romper con el carácter estático de este tipo de documentos. Con las fuentes descargables podemos asegurar que siempre se utilizara la fuente correcta. El criterio de selección determina a que elementos se aplica. un ID o contextual. dejando este último en bloques de definición de estilos separados de la estructura del documento. Cada par propiedad/valor está separado del siguiente por un punto y coma (. Una hoja de estilo consiste en una o más definiciones de estilo. Con el posicionamiento de contenidos se puede asegurar que las diferentes partes serán mostradas exactamente donde usted quiera que aparezcan y podrá modificar su aspecto y posición tras ser mostrada. y trata de dar la separación definitiva de la lógica (estructura) y el físico (presentación) del documento. En una definición de estilo cada propiedad es seguida por dos puntos y el valor de dicha propiedad. Si el criterio de selección es un elemento HTML. una vez mostrado un documento HTML. HOJAS DE ESTILO Las hojas de estilo vienen a intentar volver a separar en un documento el estilo lógico del estilo físico. el estilo es aplicado a todos las instancias de dicho elemento.

} h1 {align: center... de esta forma los navegadores que no reconozcan la etiqueta <style> la ignorarán..Hojas de Estilo en Cascada (CSS) Topicos Internet ESTRUCTURA DE UNA HOJA DE ESTILOS <style type="text/css"> <!-Etiqueta1. la siguiente hoja de estilo en cascada contiene dos definiciones de estilos.Clase1 : {propiedad1:valor.html <HTML> <HEAD> <TITLE> Ejemplo con bloque de estilo </TITLE> . De igual forma. aparezcan centradas. -->)... El segundo hará que todas las cabeceras.. se verán en negrita y en color rojo. <p>..propiedadS:valor} Etiqueta4 : {propiedad1:valor. No omitir ningún punto y coma entre los pares nombre/valor. Archivo: Ejemplo2. El primero especifica que todos los párrafos.propiedadT:valor} --> </style> Por ejemplo.propiedadT:valor} . <h1>.. Archivo: ejemplo1. Si lo hace se ignorara por completo la definición de estilo...html <HTML> <HEAD> <TITLE>Utilización de Hojas de Estilo</TITLE> <style type="text/css"> <!-p {font-weight: bold... color: red.. Etiqueta2 : {propiedad1:valor} Etiqueta3 : {propiedad1:valor.. CSS exige un estricto cumplimiento de sus normas de sintaxis.. si accidentalmente se añade un símbolo extraño la definición será ignorada. Es importante no incluir dobles comillas en la especificación de valores de atributos en sintaxis CSS.} --> </style> </HEAD> <BODY> <h1>TITULO DE LA PAGINA</h1> <p> Este párrafo esta definido con un estilo </p> </BODY> </HTML> La definición de estilos se puede encerrar entre comentarios (<!-.

la apariencia de esta página queda completamente definida por los estilos que hemos especificado en el bloque STYLE en la cabecera del documento. Los márgenes son más amplios de lo habitual. CODE size:9pt. TD {font-family:Verdana.25in} H2 {font-family:Verdana.sans-serif.font-size:x-small. los trozos de texto en teletipo como <TT>este fragmento</TT> también tienen definida su fuente.25in.background-color:#0080C0} PRE. y vamos a ver cómo quedan las tablas. margin-right:0.color:red} B. para finalizar el ejemplo: <P> <CENTER> <TABLE BORDER=1 CELLSPACING=2 CELLPADDING=2> {font-family:Courier New.color:olive} TH {font-family:Verdana.font-size:x-small. margin-left:0.sans-serif. tamaño y color.Hojas de Estilo en Cascada (CSS) Topicos Internet <STYLE TYPE="text/css"> <!-BODY {font-family:Verdana. TT.font-size:14pt.Courier.sans-serif.font-size:x-small. la <B>negrita</B> tiene un tamaño y un color fijos.sans-serif. color:white.font- .color:maroon} //--> </STYLE> </HEAD> <BODY BGCOLOR=white> <H2>Prueba de definición de estilos en un bloque aparte</H2> Como puede verse.

Se podría pensar en una hoja de estilo así definida como en un patrón que pudiera aplicarse a cualquier documento. De esta forma. se puede aplicar un estilo a todas las páginas servidas desde un sitio Web sin más que incluir un enlace al fichero con la hoja de estilo en cada página.} h1 {line-height: 18pt.html <html> <head> <title>El titulo</title> <link rel = stylesheet type = "text/css" href = "estilo1. excepto que no es necesario incluir la etiqueta <style>.1)</TD> <TD>Celda (1.css"> </head> <body> <h1>TITULO DE LA PAGINA</h1> <p> Este párrafo esta definido con un estilo </p> </body> </html> .} p {color: red.Hojas de Estilo en Cascada (CSS) Topicos Internet <TR> <TH>Cabecera 1</TH> <TH>Cabecera 2</TH> </TR> <TR> <TD>Celda (1. La sintaxis para definir estilos en ficheros es idéntica a la que se usa para definirlos en el propio documento. font-weight: bold.css */ .css) /* hoja de estilo externa archivo con nombre: estilo1. Las ventajas de este método son que podremos utilizar la hoja de estilo desde cualquier documento HTML.2)</TD> </TR> </TABLE> </CENTER> </BODY> </HTML> DEFINICIÓN DE HOJAS DE ESTILO EN FICHEROS EXTERNOS Se puede definir una hoja de estilo en un fichero distinto del que contiene la página y después enlazarlos.} /* fin de fichero */ Para utilizar esta hoja de estilo. He aquí un ejemplo: Sintaxis CSS ( Archivo: estilo1. se usa la etiqueta <link> como se muestra en el siguiente ejemplo: Archivo: Ejemplo3.BOLDBLUE {color: blue.

Pero estate atento a los siguientes capítulos donde aprenderás las lecciones que te faltan para dominar bien la materia: conocer la sintaxis. y por tanto menos respetadas en caso de conflicto:      Declaración de estilos con fichero externo. (Con la etiqueta <STYLE> en la cabecera de la página) Estilos definidos en una parte de la página. color:black} . como se indicó anteriormente. por lo general. o lo que es lo mismo. primero ponemos las formas de declaración más generales. también entre estos modos hay una jerarquía de importancia para resolver conflictos entre varias declaraciones de estilos distintos para una misma porción de página. Vamos a verla: Para definir un estilo se utilizan atributos como font-size. si tenemos declarado en el <BODY> unos estilos. seguidos de dos puntos y el valor que le deseemos asignar. dentro de todo el cuerpo. En muchas ocasiones más de una declaración de estilos afecta a la misma porción de la página.. (Con la etiqueta <DIV>) Definidos en una etiqueta en concreto. Pero las declaraciones de estilos se pueden realizar de múltiples modos y con varias etiquetas. Ahora estás en condiciones de empezar a usar las hojas de estilo en cascada para mejorar tus páginas y aumentar la productividad de tu trabajo. text-decoration: underline.Hojas de Estilo en Cascada (CSS) Topicos Internet REGLAS DE IMPORTANCIA EN LOS ESTILOS Los estilos se heredan de una etiqueta a otra. ATRIBUTOS DE LAS HOJAS DE ESTILO Tal como se vio en los ejemplos la sintaxis es bastante sencilla y repetitiva. Por ejemplo. de todas las maneras posibles e hicimos un repaso con la lista anterior. (Utilizando el atributo style en la etiqueta en cuestión) Declaración de estilo para una porción pequeña del documento. Se puede ver a continuación esta jerarquía. estas declaraciones también afectarán a etiquetas que estén dentro de esta etiqueta. Ejemplo: H1{text-align: center. Siempre se tiene en cuenta la declaración más particular. text-decoration. Ejemplo: font-size: 10pt.. los distintos atributos de estilos y otras cosas que mejorarán tus páginas. color: black. Podemos definir un estilo a base de definir muchos atributos separados por punto y coma. (Para todo un sitio web) Declaración de estilos para toda la página. (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. (Con la etiqueta <SPAN>) Ya vimos cómo incluir estilos en la página.

| 400 | 500 | 600 | 700 | 800 | 900 Sirve para definir la anchura de los caracteres. x-large | xx-large Unidades de CSS Sirve para indicar el tamaño de las fuentes de manera más rígida y con mayor exactitud. Las unidades de medida son las siguientes: Puntos pt Pulgadas in Centímetros cm pixels px Hasta aquí. color color: red. es decir. por ejemplo. así como bold y 700. DEFINICIÓN 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 páginas web. tenla a mano cuando utilices las CSS. Sirve para indicar el color del texto. para poner negrillas con total libertad. el valor del tamaño de un margen o el tamaño de la fuente. font-style normal | italic | oblique font-style:normal. Posibles valores Ejemplos FUENTES . los exploradores las comprenden y utilizan las fuentes que el usuario tenga en su sistema. lighter | 100 | 200 | 300 font-weight: 200. queda dicho todo lo relativo a la sintaxis. Los primeros valores son genéricos.helvetica. .Hojas de Estilo en Cascada (CSS) Topicos Internet Los valores que se pueden asignar a los atributos de estilo se pueden ver en una tabla a continuación. En el siguiente capítulo podrás encontrar una lista de los atributos de las hojas de estilo en cascada. monospace Todas las fuentes habituales Con este atributo indicamos la familia de tipografía del texto. También se pueden definir con tipografías normales. font-weight normal | bold | bolder | font-weight:bold. Aquí puedes ver la tabla de los atributos CSS. No todos los nombres de colores son admitidos en el estandar.FONT color valor RGB o nombre de color: #009900. como ocurría en html. o dicho de otra manera. small | medium | large | font-size: x-large. Nombre del atributo font-size xx-small | x-small | font-size:12pt. Muchos de estos valores son unidades de medida. Normal y 400 es el mismo valor. Lo admiten casi todas las etiqetas de HTML. cursive | fantasy | font-size: fantasy. es aconsejable entonces utilizar el valor RGB. font-family serif | sans-serif | font-family:arial. Si el nombre de una fuente tiene espacios se utilizan comillas para que se entienda bien.

margin-top: 10px. haciendo que tenga la primera letra en mayúsculas de todas las palabras. Background-color Background-image El nombre de la imagen background-image: url(mármol. Se utiliza para definir el tamaño del margen a la derecha Margin-top Unidades CSS margin-top: 0px. aunque recuerda que no tiene por que funcionar en todos los sistemas.Hojas de Estilo en Cascada (CSS) Topicos Internet font-style: italic. margin-left: 0. con su camino relativo background-image: o absoluto url(http://www.TEXT normal y unidades CSS line-height: 12px. Es el estilo de la fuente. margin-top: 1px. text-indent Unidades CSS text-indent: 10px.gif) . BOX . text-transform capitalize | uppercase | text-transform: none. PÁRRAFOS . padding-left: 1px. Es interesante destacar que las hojas de estilo permiten el justificado de texto. Para establecer la decoración de un texto. Margin-left . sobre rayado o tachado. margin-right: 1in. Es una de esas características que no se podían modificar utilizando HTML. que puede ser normal. es decir.x.CAJA Unidades CSS margin-left: 1cm. Indicamos con este atributo el tamaño del margen a la izquierda Margin-right Unidades CSS margin-right: 5%. Sirve para indicar la alineación del texto.gif) Colocamos con este atributo una imagen de fondo en cualquier elemento de la página. Indica el espacio insertado. text-align left | right | center | text-align: right. justify text-align: center. Indicamos con este atributo el tamaño del margen arriba de la página Margin-bottom Unidades CSS margin-bottom: 0pt.5in. lowercase | none text-transform: capitalize. Con el se indica el tamaño del margen en la parte de abajo de la página Padding-left Unidades CSS padding-left: 0. todo en mayúsculas o minúsculas. y por tanto. El alto de una línea. por la izquierda. el espaciado entre líneas. text-indent: 2in. line-height: normal. El espacio insertado tiene el mismo fondo que el fondo del elemento-continente.com/fondo. itálica u oblícua. El estilo oblique es similar al italic. con su background-color: green. si está subrayado. nombre o su valor RGB background-color: #000055. Un atributo que sirve para hacer sangrado o márgenes en las páginas.5in. Sirve para indicar el color de fondo de un elemento de la página. entre el borde del elemento-contenido y el contenido de este. Es parecido al atributo cellpadding de las tablas. overline || line-through ] text-decoration: underline. Muy útil y novedosa. text-decoration none | [ underline || text-decoration: none. line-height FONDO . Nos permite transformar el texto.BACKGROUND Un color.

Border-style none | dotted | solid | border-style: solid. Se puede poner colores por separado con los atributos border-top-color. El espacio insertado tiene el mismo fondo que el fondo del elemento-continente. Es parecido a el atributo cellpadding de las tablas. double=doble borde. border-left-color. Si este elemento tiene a su altura imágenes u otros elementos alineados a la derecha o la izquierda. solid=solido. padding-right: 1pt. border-bottom-color. border-width: 0. } H1 { font-size : 36pt. double | groove | ridge | border-style: double. El tamaño del borde del elemento al que lo aplicamos. Indica el espacio insertado. dotted=punteado (no parece funcionar). y desde groove hasta outset son bordes con varios efectos 3D. Padding-bottom Unidades CSS padding-right: 0. con el atributo clear hacemos que se coloque en un lugar donde ya no tenga esos elementos al lado que indiquemos.helvetica. padding-top: 5px.5in. Unidades CSS Ejemplo. Igual que el atributo align en imágenes en sus valores right y left. border-rightcolor. Sirve para alinear un elemento a la izquierda o la derecha haciendo que el texto se agrupe alrededor de dicho elemento. font-family : arial. en este caso por la derecha.Ejemplo </title> <STYLE TYPE="text/css"> P { font-size : 12pt. <html> <head> <title>Estilos . entre el borde del elemento-contenido y el contenido de este. Border-color color RGB y nombre de border-color: red. en este caso por abajo.Hojas de Estilo en Cascada (CSS) Topicos Internet Padding-right padding-right: 0. Indica el espacio insertado. . entre el borde del elementocontenido y el contenido de este. Padding-top Unidades CSS padding-top: 10pt. por arriba. border-width Unidades CSS border-width: 10px. font-weight : normal. padding-right: 1pt. float none | left | right float: right. entre el borde del elementocontenido y el contenido de este. Indica el espacio insertado.5cm.5cm. color border-color: #ffccff. los valores significan: none=ningun borde. Para indicar el color del borde del elemento de la página al que se lo aplicamos. inset | outset El estilo del borde. color: yellow. clear none | right | left clear: right.

background-color : Teal. color: blue. text-align : center. Para definirlas utilizamos la siguiente sintaxis.} . font-family : arial. text-decoration : underline. text-align : center. o en un archivo externo a la página.Hojas de Estilo en Cascada (CSS) Topicos Internet font-family : verdana.arial. background-color : 666666. } BODY { background-color : #006600. De esta manera: . } TD { font-size : 10pt. atributo2:valor2.nombredelaclase {atributo: valor.</p><br> Esto es un texto que no tiene formato de párrafo <br> <table border=1> <tr> <td>Esta celda tiene estilo</td> </tr> </table> </body> </html> DEFINICION DE CLASES DE ESTILOS Las clases nos sirven para crear definiciones de estilos que se pueden utilizar repetidas veces.. font-family : verdana. } </style> </head> <body> <h1>TITULO</h1><br> <p>Utilizando la etiqueta para definir párrafos.arial. Una clase se puede definir entre las etiquetas <STYLE> (en la cabecera del documento). un punto seguido del nombre de la clase y entre llaves los atributos de estilos deseados. color : White.. .

podemos utilizarla en cualquier etiqueta HTML. border-style:solid.Hojas de Estilo en Cascada (CSS) Topicos Internet Una vez tenemos una clase.arial. font-size:8pt. de esta forma: <ETIQUETA class="nombredelaclase"> Ejemplo de la utilización de clases <html> <head> <title>Ejemplo de la utilización de clases en Hojas de Estilo</title> <STYLE type="text/css"> .fondonegroletrasblancas {background-color:black. 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). } .font-family:arial} . Lo bueno de las CSS es que podemos definir el estilo una vez y se puede utilizar en múltiples elementos de la página.letrasverdes {color:#009900} </STYLE> </head> <body> <h1 class=letrasverdes>Titulo 1</h1> <h1 class=fondonegroletrasblancas>Titulo 2</h1> <p class=letrasverdes> Esto es un párrafo con estilo de letras verdes</p> <p class=fondonegroletrasblancas> Esto es un párrafo con estilo de fondo negro y las letras blancas. Definiremos un estilo y la aplicación para hacer distintos tipos de decoración de tablas.fontsize:12.estilotabla{ background-color:ffffff. Para ello utilizaremos el atributo class. Definición de los estilos para títulos de Tablas decorados con css En la cabecera de la página colocamos la etiqueta <style> que sirve para definir los estilos a utilizar en la página. .</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 títulos que tengan un cierto estilo. poniéndole como valor el nombre de la clase. <style type="text/css"> td { font-family:verdana.color:white.

así el borde definido en la declaración de estilos sólo afecta a la tabla de arriba. } </style> Para la clase estilotabla estamos definiendo un color de fondo. Para ello aplicamos la clase definida para la tabla y la celda solamente en la tabla de arriba. <table width=280 height=18 cellpadding=2 cellspacing=2 class="estilotabla"> <tr><td class="estilocelda">Título de sección</td></tr> </table> <table width="280" cellpadding="2" cellspacing="2"><tr><td> Este es un texto de lo que podría ser la parte de abajo de la tabla con el contenido relacionado con este título. Para la clase estilocelda estamos definiendo un color de fondo. border-width:1px. 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. </td></tr></table> En este caso utilizamos dos tablas para hacer el efecto. font-weight:bold. un grosor de la fuente y un tamaño de la fuente. <table width=280 height=18 cellpadding=2 cellspacing=2 class="estilotabla"> <tr><td class="estilocelda">Título de sección</td></tr> <tr><td>Este es un texto de lo que podría ser la parte de abajo de la tabla con el contenido relacionado con este título. color:333333. La otra celda tendrá el estilo definido para todas las celdas en general. . un color del texto. font-size:10pt. un borde sólido. por ese orden. } .</td></tr> </table> Lo único que tiene de especial es que utiliza las clases que se han definido previamente.estilocelda{ background-color:ddeeff. un color del borde y un ancho del borde. La tabla de arriba tiene un borde y la de abajo no. Utilización de los estilos para obtener una tabla decorada Veamos el código de la primera tabla del ejemplo.Hojas de Estilo en Cascada (CSS) Topicos Internet border-color:666666. La otra tabla tendría este código.

Sería como el cuerpo de la tabla que correspondiese con el titular que sí tendría algún estilo. sólo esa celda tendría el borde punteado. border-width: 1px. font-family: verdana. Es el caso del ejemplo siguiente: <table width=300> <tr> <td class="punteado"><b>Título de la tabla</b></td> </tr> <tr> <td> Aquí podríamos escribir información. toda la tabla tendrá un efecto de borde punteado. font-size: 10pt. solamente se debe de utilizar el atributo correcto. border-color: 660033. } </style> Utilizando el estilo anterior en una página web. en este caso es border-style. Si colocáramos esa clase únicamente en una celda. <table class="punteado" width=80% align="center"> <tr> <td> <b>Esto es un texto</b> <br> Nueva línea de texto </td> </tr> </table> En este ejemplo. <style type="text/css"> .Hojas de Estilo en Cascada (CSS) Topicos Internet EFECTOS PARA FORMULARIOS CREANDO BORDES PUNTEADOS Se pueden utilizar algunos efectos visibles en una página como por ejemplo crear bordes punteados. arial. background-color: cc3366.punteado{ border-style: dotted. </td> </tr> </table> .

Si quisiéramos que no se vean las líneas nunca. color del borde y de las letras verde un poco oscuro. borde de estilo sólido y borde de color rojo pastel. tamaño de la letra de 8 puntos. El atributo overflow tiene relación con las barras de desplazamiento que aparecen en los textarea. color del borde gris más oscuro. podemos definir el formato de presentación de cualquier elemento de la página. Los estilos con los que se presentará son: color de fondo grisáceo. tiene viarios estilos.Hojas de Estilo en Cascada (CSS) Topicos Internet ESTILOS EN CAMPOS DE TEXTO Recordemos los campos de texto de los normales <input type=text> y campos de texto que soportan varias líneas <textarea>. si el texto del campo supera las líneas que tiene reservadas el textarea. un borde sólido. letter-spacing : 3px. es decir. tamaño del texto de 8 puntos y color de las letras azul. borde de 1 pixel. <input type="text" name="campotexto0" size="12" style="border-width: 2px. Con estilos. en un único atributo. Este campo de texto con varias líneas. Por lo que respecta a los otros estilos de este campo de texto de múltiples líneas. borderwidth: 1px."> Hola a todos los que lean esto. border-color:555555. Los campos de texto. Ejemplo de estilos en controles de formularios </textarea> . border-style:dashed. borde de estilo sólido. border-style: solid. que siempre tienen una forma muy específica. color: #009900. border: 1px solid #666666. aplicadas sobre campos de texto y textareas. color: #000099"> Este campo de texto tiene los estilos declarados con una sintaxis un poco distinta. que son parecidos a los que hemos visto para el anterior campo de texto. <textarea cols="20" rows="3" name="campotexto3" readonly style="overflow:auto. Vamos a ver varios ejemplos para comprobar las posibilidades de las hojas de estilos. También se define un espaciado entre las letras de 3 pixel. también llamado textarea. Los estilos son borde de un píxel. font-size:8pt."> Este campo de texto se presentará con un borde de 2 pixels. se han definido 3 valores para el estilo del borde. podemos asignarle el valor hidden al atributo overflow. <input type="text" name="campotexto1" size="12" style="backgroundcolor:#e3e3e3. <textarea cols="20" rows="3" name="campotexto2" border: 1px solid #ff6666. font-size:8pt. también aceptan especificaciones de estilos para variar su apariencia típica. ya que se han agrupado varios estilos relativos al borde en un solo atributo."></textarea> style="overflow:auto. El valor auto sirve para que la barra de desplazamiento vertical del campo de texto sólo aparezca en caso que se necesite. que está definido como auto. con la salvedad del atributo overflow.

que sirve para que el campo textarea no sea editable. Primero llamamos la atención sobre el atributo de HTML readonly. También con estilos CSS se han definido una serie de valores para la apariencia. hemos incluido también un texto con el que se inicializará su contenido. . que no se pueda cambiar su contenido. es decir.Hojas de Estilo en Cascada (CSS) Topicos Internet En este campo textarea. un borde del campo punteado. estos son: mostrar las barras de desplazamiento sólo cuando toca. un color del borde gris oscuro y un ancho del borde de 1 pixel.

o cuando pulsa el botón de un formulario. que se podrán ir conociendo a lo largo de este manual. etc. o cuando el usuario pasa el ratón por una imagen. Estos cambios provocan los llamados eventos que son recibidos por el navegador que reaccionará en la forma adecuada: si haces click en un hiperenlace se genera un evento y el navegador abre una nueva página. iluminación. JAVASCRIPT JavaScript es un lenguaje de programación interpretado. no pudiéndose construir programas independientes. vamos a decirle al ordenador que cuando presente nuestra página web al visitante realice acciones como poner en la página la fecha y hora actual. La utilización de JavaScript es exclusivamente en páginas web. Para escribir un programa no nos vale ni el castellano.Lenguaje Java Script Topicos Internet JAVA SCRIPT INTRODUCCIÓN AL LENGUAJE JAVASCRIPT Para conocer a profundidad lo que quiere decir lenguaje JavaScript debemos conocer algunos términos básicos como programa que no es más que una serie de instrucciones que le damos a un sistema para que realice acciones determinadas. responder de una determinada forma a la pulsación de un botón del ratón. y muchas cosas más. es decirle al ordenador como hacer una determinada tarea. Por ejemplo cuando el navegador carga una página se produce un evento que puede aprovecharse para hacer que se abra otra ventana (las conocidas como ventanas popup tan usadas para mensajes publicitarios). Esos eventos son los que se aprovechan para que se ejecuten las instrucciones que nosotros escribimos en JavaScript. el resultado de esto es un archivo ejecutable (exe. En otras palabras. para lo cual se necesita conocer sus reglas y su vocabulario o palabras reservadas. o cuando pasamos . Lo normal es que la ejecución se realice de forma automática cuando el navegador carga una página. Existen dos grandes grupos de lenguajes a la hora de escribir un programa: Los compilados y Los interpretados. ¿Pero como es que los ejecuta?. A cada evento se le puede asociar una función para que haga algo predeterminado por nosotros. el usuario lo puede ejecutar las veces que lo desee. ni el inglés. En nuestro caso es algo bastante sencillo. con el cual se deben escribir las instrucciones que forman nuestro programa. A diferencia de los lenguajes interpretados que son aquellos en los cuales se escribe código fuente y la computadora va leyendo instrucción por instrucción y desarrollando las acciones necesarias. hacer que una imagen se mueva de un lado a otro. el cual. Puede por tanto ser algo tan simple como decirle que sume dos números y nos diga el resultado hasta algo tan complejo como decirle que controle todo un edificio: temperatura. puertas. Un compilado es aquel que se traduce a un lenguaje interno del computador. com). lo que se puede escribir con este lenguaje serán scripts que el navegador interpretará y mostrará en la Página Web. ni ninguno de los lenguajes que habitualmente usa el hombre para comunicarse. Para entendernos con un ordenador se utilizan los lenguajes informáticos.

JavaScript es adicionado en una página HTML usando la etiqueta SCRIPT. como definir comentarios. o sea. estas etiquetas son: <!-. empieza con la primera instrucción. En algunos navegadores antiguos los script de java no son reconocidos y producirán errores en la página. qué palabras son consideradas reservadas para el lenguaje entre otros.código --> Dentro de las cuales se puede escribir el código respectivo. en que posición de la pantalla se ha realizado y otras propiedades dependientes de cada evento en concreto. Son sentencias que permiten que se ejecuten condicionalmente algunos pasos (condicionales) o repetir una serie de instrucciones una y otra vez (bucles). Cuando el navegador empieza a leer el script para ejecutarlo lo hace en orden secuencial. lo ideal sería escribir las instrucciones y poderlas repetir. si es sensible a mayúsculas y minúsculas. por lo tanto se pueden utilizar unas etiquetas para ocultar el código definido en java. se construye una página a la que sólo pueden entrar determinadas personas. si es una persona autorizada muestra la página y si no lo es no la muestra. esta etiqueta puede ser ubicada dentro de la etiqueta HEAD del documento. <HTML> <HEAD> <TITLE>Página Web conteniendo código en JavaScript</TITLE> <SCRIPT LANGUAGE=”JavaScript”> . Pero a veces es necesario saltarse instrucciones. como considera los espacios en blanco. o sea. <SCRIPT LANGUAGE=”JavaScript”> //sentencias requeridas </SCRIPT> Donde se pueden ubicar el script de java. sigue por la segunda y así hasta llegar al final. Los eventos tienen la naturaleza de objetos. o cuando el usuario pulsa una tecla. Veamos que es un flujo de programa. Otra situación bastante común es cuando se desea que el programa recorra todas las imágenes de tu página y vaya cambiando su contenido.Lenguaje Java Script Topicos Internet el ratón por una enlace se produce otro evento que puede aprovecharse para llamar a una función que modifique el color en que se muestra el enlace. poseen métodos y propiedades. por ejemplo. no se escribe el mismo código una y otra vez. Así cuando se produce un evento podemos saber quien lo produce. Cualquier lenguaje de programación tiene solucionado este problema mediante las llamadas sentencias de control del flujo de programa. unas veces ejecutará la parte de mostrar la página y otras no. El programa no ha seguido un flujo lineal. Esto es lo que se conoce como ejecución secuencial o lineal. se deberá escribir una función que pida el nombre de quien desee ver la página. SINTAXIS JAVASCRIPT Se requiere conocer lo básico del lenguaje como por ejemplo donde se puede ubicar el script desarrollado con java.

ESPACIOS EN BLANCO Java Script como HTML ignora los espacios en blanco. es decir. siendo muy parecido a la programación en C. Esto en algunos casos provoca errores no en la programación. //fin del código oculto . var a=5. var b=28. y los enter en los textos. if ( x[i] >10 ) y = y+ 5 .Lenguaje Java Script Topicos Internet <!. []. sino en los resultados obtenidos... los tabs. es similar a var x = 0. Normalmente son llamados también secuencias de escape. en el lenguaje EJEMPLO.Ocultando el código en java para los navegadores antiguos . ejemplo o Ejemplo serán tres diferentes variables que se pueden definir. SEPARAR LÍNEAS DE CÓDIGO Java script utiliza el carácter punto y coma (. Ejemplos: \b backspace \n nueva linea \r retorno de carro \t tab \’ comilla simple \” comilla doble ABRIENDO Y CERRANDO GRUPOS Los delimitadores como los ().. var x=0. Se utilizan estos caracteres que representan algo en una cadena que no puede escribirse desde el teclado. Todo el código (instrucciones) requeridas escritas en esta zona..) para la separación entre líneas de código. {} siempre deben abrirse y cerrarse.-> </SCRIPT> </HEAD> <BODY> Agregar la información que se desee mostrar en la página </BODY> </HTML> CASE SENSITIVE Java Script es un lenguaje sensible a mayúsculas y minúsculas. BACKSLASH La barra inversa o backslash tienen un propósito especial en las cadenas de Java Script.

No se puede utilizar un número como primer carácter del nombre. para lo cual se deberá utilizar los caracteres “/*” para inicio y “*/” para cierre.Lenguaje Java Script Topicos Internet COMENTARIOS Se pueden insertar comentarios utilizando para esto la doble barra slash. 4. es por eso recomendable que el programador las utilice como palabras reservadas. como por ejemplo: // Esto es un comentario O también crear múltiples líneas de comentario. No puede ser una palabra reservada. /* Esto es un comentario que se expresa en varias líneas Para lo cual debemos seguir las indicaciones De cómo poder crearlos. 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 . Ejemplos: x Total Costo10 _Valor PALABRAS RESERVADAS Existe un grupo de palabras que se usan en el lenguaje. 3. estas palabras no pueden ser usadas como variables o nombres de funciones debido a que el interprete del programa no podría diferenciar entre un comando de javascript o una simple variable o nombre de función. 2. El primer carácter debe ser una letra o el símbolo de subrayado (_).*/ VARIABLES Y NOMBRES DE FUNCIONES Para la declaración de variables o nombres de funciones se debe seguir las siguientes reglas: 1. No puede contener espacios en blanco.

Otro aspecto a tener en cuenta a la hora de usar las variables es su . Los criterios para definir el nombre de una variable son: utilizar cualquier combinación de letras y dígitos. En otros lenguajes de programación existen diferentes tipos de variables en función del tipo de datos que pueden almacenar: variables para cadenas. write. siempre que el primer carácter no sea un dígito y por supuesto que no coincida con una palabra reservada del lenguaje. open. es decir. denominada nombre. Por ejemplo una variable para almacenar una dirección de un icono puede llamarse direc_icono. El precio de un departamento en dólares 35000. palabras con un significado especial para el intérprete como close. esta palabra es un dato. para números enteros. para números reales. entre otras. mas el guión bajo. No olvidarse que JavaScript diferencia entre mayúsculas y minúsculas. así Edad y edad serían dos variables distintas. Es aconsejable usar nombres autodescriptivos. etc. Esto último es cómodo pero peligroso pues puede llevar a programas difíciles de depurar y de modificar. para guardar en ella "Pedro" o precio para guardar el 35000. es conveniente llevar un cierto control sobre las variables que vas usando en cada función y declararlas al principio de la misma. En este caso usaríamos una variable. las cuales son las unidades básicas de todo lenguaje. JavaScript es muy permisivo en este aspecto de manera que una variable puede almacenar cualquier tipo de dato y además pueden crearse en cualquier parte del programa. Estos datos no suelen usarse tal cual sino que se almacenan en unos elementos con nombre denominados Variables. cabe señalar que la utilización de una variable queda a criterio del programador. Una variable no es mas que una porción de memoria especificada con un nombre en la cual se puede almacenar información del usuario ya sea para mostrarla posteriormente o para permitir realizar ciertos cálculos internos.Lenguaje Java Script Topicos Internet char class clearInterval clearTimeout close closed confirm const constructor continue Date debugger default defaultStatus focus for frames Function function goto history home if implements imports in Infinity innerHeight moveTo name NaN native netscape new null Number Object open opener outerHeight outerWidth package releaseEvents resizeBy resizeTo return routeEvent scroll scrollbars scrollBy scrollTo self setInterval setTimeout short static try typeof unescape unwtch valueOf var void watch while window with FALSE TRUE PROGRAMACION BASICA VARIABLES Y DATOS Dentro de la programación se debe diferenciar entre variable y dato. Por ejemplo el nombre de una persona es "Pedro". este número es otro dato. es una forma de documentar tus programas.

ésta no pertenece a ningún tipo de dato en concreto. se trata de variables locales. } </script> En este ejemplo version_navegador es una variable global mientras que version es local a la función verNavegador(). valor = 500 * 56. function verNavegador() { var version. es decir. Podemos averiguar el tipo de dato que contiene una variable si utilizamos la función incorporada typeof. Otro detalle a tener en cuenta es que al mismo tiempo que creamos la variable podemos darle un valor. se dice que es Undefined. <script language="Javascript"> var valor. function verNavegador() { var nombre. Si se necesita que varias funciones tengan acceso a una determinada variable ésta debe crearse como variable global.appVersion. Si se crea una variable dentro de una función sólo será conocida dentro de esa función. Observa que las variables están creadas con la palabra clave var. Por ejemplo : <script language="Javascript"> var version_navegador = 0. si no lo hacemos la variable contendrá el valor null. version = document. Existen 6 tipos de datos: String : cadenas de texto Object : objetos Number : valores numéricos Null : nulo Boolean : true o false Undefined: no definido. } </script> En este ejemplo existen dos variables. Es al asignarle un valor cuando pasa a ser de uno u otro tipo. el uso de esta palabra es opcional.Lenguaje Java Script Topicos Internet ámbito. return version. qué funciones tienen acceso a ellas. según el dato que almacene. esto se hace creándola fuera de todas las funciones. TIPOS DE DATOS Cuando declaramos una variable. nombrre = “Pedro Pablo”. sólo es obligatorio si una variable local tienen el mismo nombre que una global. la variable valor que corresponderá a un tipo de datos numérico (Number) y la variable nombre que corresponderá a un tipo de datos .

res = ++op1.Lenguaje Java Script Topicos Internet cadena (string). resto = op1 % op2. los operadores aritméticos. =. div. OPERADORES OPERADORES ARITMÉTICOS En los primeros ejemplos de este tutor tan sólo se han usado sentencias muy simples como asignar un valor a una variable. var op1 = 50. var op1=5. var4 = 31. var3 = " días". Suma + Se trata de un operador usado para sumar dos valores numéricos o para concatenar cadenas entre sí o números y cadenas. esto se sabe cuando la variable recibe información dada por el usuario o cálculos. res. Puede actuar sobre un único operando numérico cambiándole de signo. Acordarse de que al momento de crearla variable no podemos asignarle el tipo. op2= 4. document. op2 = 5. resto.write(var2+var3) /* resultado: Buenos días */ document.num2. /*res adquiere el valor 5 y luego op2 el 6*/ . En esta sección y las siguientes se presentan los operadores de que dispone este lenguaje clasificados en varios grupos. var op1 = 50. /*res contiene 2 */ res = -res /* ahora res contiene -2*/ Producto ( * ) y cociente ( / ) Realizan las operaciones aritméticas de multiplicar y dividir dos valores. var2= "Buenos".write(var1+var4) /* resultado 41 */ document. div = op1/op2 /*div contiene 12. res = 0. var var1 = 10. num2 = 8. mul. Comenzamos con los más conocidos. según el contexto en el que se usen.write(var1+var3) /* resultando: 10 días */ Resta Operador usado para restar valores numéricos. res = num1 .5 */ mul = op1 * op2 /*mul contendrá 200 */ Resto % También llamado operador módulo calcula el resto de una división. op2= 4. pero evidentemente JavaScript puede realizar mas operaciones. /*res adquiere el valor 6 y luego op1 el 6*/ res = op1++. mediante el operador de asignación. var num1 = 10. o realizar operaciones aritméticas. Si el operador se antepone a la variable la operación de incremento o decremento es prioritario sobre cualquier otra. /*resto contiene 2 */ Incremento (++) y decremento (--) Estos operadores se usan para incrementar o decrementar en 1 el valor de una variable.

Lenguaje Java Script Topicos Internet Operadores compuestos Los operadores +. Por ejemplo si al 00011010 (26) lo desplazamos 2 a la derecha tendremos el 00000110 (6). /* 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. 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. res. esto equivale a una división entera por potencias de 2. res = num << 2. -. El operador += puede usarse igualmente con variables de cadena. cad = "buena". trata cualquier tipo de datos como una cadena binaria (ceros y unos). Así los números se representan en sistema binario de numeración mientras que los caracteres se convierten a código ASCII. res. /* num contendrá 104 */ AND lógico binario & Realiza un AND lógico bit a bit entre dos valores. /*num adquiere el valor 25 (20 + 5) */ cad += 's' . multiplicándolo o dividiéndolo por un valor. Por ejemplo el número 38 escrito en sistema binario es 00100110 si le aplicamos este operador se convierte en 11011001. var num = 26. Complementación ~ Complementa una cadena binaria convirtiendo los 1 en 0 y los 0 en 1. res = num << 2. 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) . Para trabajar con estos operadores es conveniente tener una idea previa sobre la codificación binaria. esto equivale a multiplicar por potencias de 2. que son números que se almacenan por tanto codificados en binario. num += 5. / pueden asociarse con el operador de asignación (=) para cambiar el valor de una variable numérica por incrementándolo. var num = 26. var num = 20. Por ejemplo si al 00011010 (26) lo desplazamos 2 a la izquierda tendremos el 01101000 (104). JavaScript ofrece los operadores típicos para trabajar con estas cadenas a nivel de bit (cada uno de los ceros o unos de las cadenas binarias. internamente. decrementándolo. *. o sea el -39 (JavaScript usa codificación en complemento a 2 para los números negativos). /*cad adquiere el valor 'buenas' */ num *= 10. El AND lógico da como resultado 1 sólo si ambos bits son 1. /*num adquiere el valor 250 (25*10) */ OPERADORES BINARIOS E l ordenador.

/*res contiene 122 */ 17 XOR lógico binario ^ Realiza un XOR lógico bit a bit entre dos valores. El XOR lógico da como resultado 1 si uno sólo de los bits es 1. ayer = 10. res.Lenguaje Java Script Topicos Internet var op1 = 109. comp. ayer = 10. 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. op2 = 82. /*res contiene 40*/ OPERADORES RELACIONALES Mayor que > Compara dos valores y devuelve true si el primero es mayor que el segundo. Compara tanto números como cadenas. res = op1 ^ op2. Compara tanto números como cadenas. ayer = 4. op2 = 38. 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. res = op1 | op2. res. var hoy = 4. var hoy = 4. Compara tanto números como cadenas. comp. . op2 = 38. Compara tanto números como cadenas. comp = hoy < ayer /* comp adquiere el valor false*/ Mayor o igual >= Compara dos valores y devuelve true si el primero es mayor o es igual que el segundo. El OR lógico da como resultado 0 sólo si ambos bits son 0. var hoy = 4. res = op1 & op2. 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. res. 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. /*res contiene 36 */ OR lógico binario | Realiza un OR lógico bit a bit entre dos valores.

ayer = '4'. op2 = 50. comp = hoy == ayer /* comp adquiere el valor true*/ Idénticos === Similar a == pero también compara el tipo de datos de los operandos. !==) no realizan conversión de tipo. comp. Compara tanto números como cadenas. Los operadores de identidad (===. ayer = 4. Compara dos valores y devuelve true si el primero es mayor o es igual que el segundo. Si se comparan números con cadenas. /*comp adquiere el valor true */ comp es true por que op1 es menor que op3. es decir. false). >=. /*comp adquiere el valor false */ comp es false por que op1 no es mayor que op2 aunque sea mayor que op3 OR lógico || Como el anterior. En los operadores relacionales (>. comp. comp. La operación lógica negación invierte el operando. op3 = 25. dando como resultado un valor booleanos (true. var op1 = 2. comp = hoy == ayer. var op1 = 2. var hoy = 4. <. (op1 < op3 es por tanto true) . /* comp adquiere el valor true*/ comp = hoy === ayer /* comp adquiere el valor false*/ No iguales != No identicos !== Invierten el sentido de las comparaciones iguales == e idénticos === respectivamente. AND lógico && Este operador se utiliza para concatenar comparaciones. var hoy = 4. op3 = 25. <=) intenta convertir los datos en tipo número. número y booleano. comp = hoy <= ayer /* comp adquiere el valor true*/ Iguales == Compara dos valores y devuelve true si ambos son iguales. Compara tanto números como cadenas. op2 = 50. comp = (op1 > op2) && (op1 < op3). Es decir basta que una comparación sea true para que devuelva el valor true. El resultado sólo será true si todas las comparaciones lo son. comp. JavaScript intenta convertir internamente los datos. para comprobar varias condiciones. sirve apra realizar comparaciones compuestas y sólo devolverá false cuando todas las comparaciones los sean. Para los operadores de igualdad (== !=) intenta convertir los tipos de datos a cadena. comp = (op1 > op2) && (op1 < op3). OPERADORES LÓGICOS Los operadores lógicos se utilizan para realizar comparaciones entre valores. numéricos o no. ayer = 4. si es true lo hace false y viceversa. comp.Lenguaje Java Script Topicos Internet var hoy = 4.

getDate(). eval Se usa para evaluar una cadena con código JavaScript sin referirse a un objeto concreto.toString(2) = “1101” sie ndo 1310 = 11012 FUNCIONES GLOBALES Así como JavaScript proporciona objetos predefinidos. document. número) Devuelve números enteros. . Number. si es posible. unescape.456 parseFloat ("123ABC") = 123 parseFloat ("ABC") = NaN parseInt(cadena. Si la cadena empieza por 0 y no existe el segundo argumento. Por ejemplo: . por defecto es 10. isNan. parseFloat ("123. Escribirá en pantalla la cadena "Sun Sep 3 10:20:50 UTC+0200 2000" si la fecha del día es domingo 3 de Septiembre y la hora es las 10:20:50. var hoy = new Date().. escape. isNaN(arg) Determina si el argumento es un valor NaN (not a number) Number(objArg) and String(objArg) Permiten convertir el objeto pasado como argumento a un número o a una cadena.. se entiende que es 16.16) = 2748 ABC16 = 274810 Si no especificamos el segundo argumento. hoy. el segundo argumento nos permite escoger la base de numeración (entre 2 y 36) parseInt ("ABC". se entiende que es 8 toString(argumento) Si argumento = número Devuelve una cadena que contiene el número Puede haber un argumento opcional: (13).Lenguaje Java Script Topicos Internet CONVERSIÓN EXPLÍCITA DE TIPOS parseFloat(cadena) Toma la "cadena" y la transforma en un número en coma flotante. .write(string(hoy)).. La sintáxis de eval es: eval(expr) donde expr es la cadena a evaluar. también posee una serie de funciones predefinidas.. Se trata de las funciones: eval. String.456") = 123.. Si la cadena empieza por 0x y no existe el segundo argumento.toString(16) =”d” siendo 1310 = d16 (13).

unescape(cadarg) Es inversa a la anterior..split..write(escape(cadena)). Produce la frase "Buenos d%EDas".. etc.write(escape(cadena)). La subcadena que buscamos en el texto es lo que se llama un patrón y se construye encerrando entre dos barras inclinadas ( / ) una serie de caracteres normales y símbolos especiales llamados comodines o metacaracteres. Por ejemplo: . . como por ejemplo: buscar aquellas palabras que comienzan con http: y finalizan con una \. de manera que si la cadena contiene códigos del tipo %xx son convertidos al correspondiente carácter ASCII extendido.. var cadena = "Buenos d%EDas". var cadena = "Buenos días".\b/ Resultado Busca la palabra $ftp Líneas que comienzan por Líneas que terminan por s Palabras de una sola letra \ ^ $ . Las expresiones regulares se usan con el objeto Regular Expresion y también dentro de los métodos String. document. .bat usada en el DOS cuando queríamos listar los ficheros con extensión bat). es el de buscar y/o sustituir una subcadena de texto dentro de otra cadena..match. El proceso para el que se usan estas expresiones.. En la tabla que sigue se muestran los caracteres comodín usados para crear los patrones y su significado. pero el problema surge cuando no tenemos una subcadena fija y concreta sino que queremos buscar un texto que responda a un cierto esquema. presente en el mundo el UNIX y el lenguaje Perl. Ahora se escribirá "Buenos días". En principio esto puede hacerse usando los métodos del objeto string. . es en estos casos cuando las expresiones regulares muestran toda su potencia.. se ha substituido %ED por su equivalente í (i acentuada). document. String.. o buscar palabras que contengan una serie de números consecutivos..Lenguaje Java Script Topicos Internet escape(cadarg) Codifica la cadena del argumento substituyendo todos los caracteres no ASCII por su código en el formato %xx.replace. (algo parecido a la orden dir *.. . EXPRESIONES REGULARES Las expresiones regulares constituyen un mecanismo bastante potente para realizar manipulaciones de cadenas de texto.search y String.. junto a un pequeño ejemplo de su utilización.. pues la í (i acentuada) es el código hexadecimal ED de ese carácter. Este patrón es una descripción del texto que se está buscando y JavaScript encontrará las subcadenas que concuerdan con ese patrón o definición. String.. Significado Marca de carácter especial Comienzo de una línea Final de una línea Cualquier carácter (menos salto de línea) Ejemplo /\$ftp/ /^-/ /s$/ /\b.

escribe La tabla que sigue describe los modificadores que se pueden usar con los caracteres que forman el patrón. ([^a-zA-Z0. aaamar... numéricos.. 1234. 11234. como puedan ser el fín de línea o un tabulador.n} entre m y n veces Ejemplo /l*234/ /a*mar/ /a?mar/ /p{2}sado/ /(m){2}ala/ /tal{1. focal /(vocal)/ Busca vocal /escrib[aoe]/ Vale escriba. local. pero no el . pero no en "Digo Sientate" \c9 /\x41/ El tabulador Encuentra la A (ASCII Hex41) en "letra A" .) Descripción Principio o final de palabra Frontera entre no-palabras Un dígito Alfabético (no dígito) Carácter nulo Carácter ASCII 9 (tabulador) Salto de página Salto de línea Cualquier alfanumérico. (punto).".... etc.. Valen amar. talla.Lenguaje Java Script Topicos Internet | () [] Indica opciones Agrupar caracteres Conjunto de caracteres opcionales /(L|l|f|)ocal/ Busca Local.. [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" Fallaría en "A4" \b \B \d \D \O \t \f \n \w \W /\w+/ \s \S \cX \oNN \xhh Carácter tipo espacio (como tab) Opuesto a \s Carácter de control X Carácter octal NN El hexadecimal hh Encuentra frase en "frase. mmmala.} Al menos n veces {m. mar.3}a/ Resultado Valen 234. aamar.Hallaría sólo el punto (. escribo. Descripción Repetir 0 o mas veces * Repetir 1 o mas veces + 1 o 0 veces ? Exactamente n veces {n} {n. Vale tala.) 9_ ]) /\W/ /\sSi\s/ Encuentra Si en "Digo Si ". tallla Los siguientes son caracteres especiales o metacaracteres para indicar caracteres de texto no imprimibles. Valen amar.. Vale ppsado Vale mmala. o grupos predefinidos de caracteres (alfabéticos. Cada modificador actúa sobre el carácter o el paréntesis inmediatamente anterior.

if (condición) {bloque a ejecutar si la condición es cierta} else {bloque a ejecutar si la condición es falsa} Si omitimos la parte del else tendremos una condicional simple. SENTENCIAS CONDICIONALES Una sentencia condicional es una instrucción en la que se hace una comparación y según el resultado verdadero o falso (true o false) de la misma el programa seguirá ejecutando una u otra instrucciones.... Esta sintaxis en algunos casos puede simplificarse utilizando la siguiente forma: (condición) ?{bloque si cierta} : {bloque si falsa} Ejemplo: Evitar realizar una división con cero . . La sintaxis de esta sentencia es.... En este ejemplo cad tomará el valor + si num es positivo o cero y el .. cad = (num >= 0) ? ' + ' : ' . utilizando un punto y coma para indicar el final de la instrucción.. por defecto.. Pueden agruparse una serie de sentencias en un bloque encerrándolas entre llaves. secuencial ejecuta instrucción tras instrucción....'. es decir... Las condiciones pueden ser sencillas como en estos ejemplos o pueden enlazarse usando los operadores && y || (AND y OR lógicos). if (div == 0) alert('No se puede dividir por 0').. else coc = num / div..si es negativo.... La condicional mas simple que podemos escribir es aquella que ejecuta u omite una serie de sentencias dependiendo de si la comprobación da verdadero o falso... dentro de una sentencia if pueden incluirse mas sentencias if... A veces es necesario alterar este orden para ello se utilizan las instrucciones de control: condicionales.. Ejemplo: comprobar si un número está comprendido entre 1 y 5: if ((num>=1) && (num < 5) . selección y bucles. Así un programa se escribirá como una sucesión de instrucciones o sentencias.. Las sentencias if pueden anidarse. Ejemplo: usando la segunda forma: .Lenguaje Java Script Topicos Internet SENTENCIAS DE CONTROL Y FLUJO El orden en que se ejecutan las instrucciones de un programa es..... ....

En cualquier caso la siguiente instrucción que se ejecute tras el condicional será la que incrementa el valor de indice. else error('idioma no presente'). Esto puede solucionarse mediante varios if anidados. .. break. de selección múltiple. case 'ingles' : pagIng(). else if (leng == "frances") pagFran(). Como vemos resulta un código bastante complejo.. . Ejemplo tenemos que elegir entre idiomas: castellano. else if (leng == "ingles") pagIng(). Pero pueden existir casos en los que el programa deba tener mas de dos alternativas.Lenguaje Java Script Topicos Internet { lista[indice] = 'Muy bajo'. else if (leng == "alemán") pagAlemt(). SELECCIÓN MÚLTIPLE La estructura condicional permitía elegir entre dos posibles caminos en la ejecución de un programa: si la condición era cierta se ejecuta un bloque y si no se ejecuta otro.. bajos++. break.default. ingles. Si num no cumple la condición el programa se salta este bloque.. El ejemplo anterior quedaría: .. default : error ('Idioma no presente'). break.. por ejemplo si queremos un programa que presente un título en un idioma de cuatro posibles. case 'alemán' : pagAlem().. Como vemos no se ha usado la parte de else y como se deben ejecutar mas de una sentencia las hemos encerrado entre llaves. } indice++. if (leng == "castellano") pagCast().case. case 'frances' : pagFran(). Para estos casos disponemos de la sentencia switch.. switch (idioma) { case 'castellano' : pagCast()... break. francés y alemán. 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. .

el programa quedaría ejecutando indefinidamente el cuerpo del bucle. ... es una sentencia que se repetirá tantas veces como el número de elementos que tenga el array. La instrucción break pone fin al bloque y hace que el programa salte a la instrucción siguiente a la sentencia switch(). En esencia la ejecución de un bucle consiste en ejecutar repetidas veces una misma parte del programa (cuerpo del bucle) hasta que se cumpla una determinada condición.. Por ejemplo para borrar todos los elementos de un array simplemente debemos hacer delete en cada uno de ellos. }  do {.... BUCLES A veces es necesario repetir un mismo conjunto de sentencias varias veces. su finalidad es ejecutar algún código cuando ninguna de las condiciones se cumpla. var ind = 0. Si no se incrementara el valor de ind el bucle no acabaría nunca. si se omite el programa continuaría con la siguiente comparación.} until (condicion)  for(contador. Ejemplo: var lista = new Array(10). Cuando este valor sea 10 el programa no entrará en el cuerpo del bucle. en cuyo caso se acaba la repetición y el programa continúa con su flujo normal.WHILE Se trata de un bucle en el que la condición se comprueba tras la primera iteración. var ind = 0.. modcont){..Lenguaje Java Script Topicos Internet } Durante la ejecución se compara la variable idioma con cada uno de los posibles valores y cuando coincidan ejecuta el código correspondiente.}. La sección del default es opcional. Ejemplo var lista = new Array(10). SENTENCIA WHILE En esta estructura el programa primero comprueba la condición: si es cierta pasa a ejecutar el cuerpo del bucle. Existen varias sentencias de bucles:  while (condición) {. Este es un típico trabajo para las estructuras repetitivas o bucles. condición. y si es falsa pasa a la instrucción siguiente a la sentencia while. } 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. SENTENCIA DO. while (ind < 10) { lista[ind] = '0'. es decir que el cuerpo del bucle se ejecuta al menos una vez. ind++.

. si no lo salta y continúa por la siguiente sentencia. break La sentencia break interrumpe la iteración actual y envía al programa a la instrucción que sigue al bucle. Son sentencias aplicables a cualquiera de las estructuras de bucle en JavaScript. esto se indica en la cabecera de la sentencia. Ejemplo: var item.'z'. si se cumple ejecuta el cuerpo del bucle. .'x'. ind++) { lista[ind] = '0'.'f'). } Como vemos el cuerpo del bucle no incrementa la variable ind. var ind. for (ind=0. no su contenido. La sentencia da un valor inicial a este contador y en cada iteración lo modifica según le indiquemos y comprueba la condición. Con una matriz la variable de control toma el valor de los índices de la matriz.write(item+'<br>').'c'. Este código hace exactamente lo mismo que el anterior.Lenguaje Java Script Topicos Internet do { lista[ind] = '0'. 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. ind++. RUPTURA DE BUCLES Aunque procuremos usara una programación estructura alguna vez puede ser necesario interrumpir la repetición de un bucle o forzar una iteración del mismo. var item .. Usa una variable de control que en cada iteración toma el valor del elemento del objeto recorrido. ind < 10. Vemos el ejemplo anterior usando esta sentencia: var lista = new Array(10).'b'. var lista = new Array ('a'. }while (ind < 10) SENTENCIA FOR Esta sentencia utiliza una variable de control a modo de contador para controlar la repetición del cuerpo del bucle. esto puede lograrse mediante las sentencias break y continue. for (item in document) document.

tamagno = lista. es decir. 'Jueves'. var item . Propiedades length Como su nombre indica esta propiedad nos devuelve la longitud del array.write(lista[item]+'<br>').descriptor = "Dias laborables de la semana". } Este ejemplo escribiría el contenido del array lista hasta encontrar una letra z. document. dias. 'Miercoles'. .length. document. OBJETOS ARRAYS Como objetos que son.protoype. /*tamagno almacenaría el valor 50 */ prototype Esta es una propiedad muy potente en el sentido que nos permite agregar al objeto Array las propiedades y métodos que queramos.'z'. for (item in lista) { if (lista[item] == "z") continue.Lenguaje Java Script Topicos Internet for (item in lista) { if (lista[item] == "z") break. 'Viernes').0 de Microsoft. } Este ejemplo escribiría el contenido del array saltándose la letra z. Su uso es muy simple: var lista = new Array(50).'f'). Array. dias = new Array ('lunes'.'c'. 'Martes'. que son ampliables por el usuario.'x'. si esta es cierta continúa con la siguiente iteración. los arrays poseen sus propiedades y métodos predefinidos. Netscape añade mas métodos en su versión.write(lista[item]+'<br>'). pero los aquí definidos son comunes a ambos navegadores. el número de elementos que puede almacenar.descriptor = null. var lista = new Array ('a'. Es necesario hacer notar que estos métodos y propiedades son los definidos para el JavaScript 3.'b'. continue La sentencia continue interrumpe la iteración actual y envía al programa a la comprobación de la condición.

document. ") +" <br>"). 'f'. Buenos. 'd'. Esto significa que los objetos usados en JavaScript heredan las propiedades y métodos de Object. 'f'. sin crear uno nuevo. la propiedad descriptor que podría utilizarse para darle un título a la matriz. 'b'.write(a. o sea. En castellano esto es necesario si queremos que la ñ y vocales acentuadas figuren en su lugar.write(a. En el ejemplo sublista contendrá los elementos desde el índice 2 al 5 ambos inclusive. 'c'.write(a. sin modificar los arrays que se concatenan. 'e'. sort(rutord) Ordena alfabéticamente los elementos de un objeto Array. Opcionalmente podemos pasar como argumento una función para determinar el orden."Buenos". document.join() +" <br>"). cero si son iguales y un valor positivo si el primer argumento es mayor que el segundo. . OBJETO OBJECT Pues sí: existe un objeto llamado Object del que derivan todos los objetos de JavaScript. 'd'. Días Hola+Buenos+Días reverse() Invierte el orden de los elementos de un Array en el propio array. Métodos concat(objArray) Une el objeto Array con el array que se le pasa como argumento y devuelve el resultado en un nuevo array. a= new Array("Hola".Buenos. fin) Extrae parte de un Array devolviéndolo en un nuevo objeto Array. 'c'. 'h').join(" + ") +" <br>") . alert(sublista."días"). esta función posee dos argumentos y devolverá un valor negativo si el primer argumento es menor que el segundo. 'g'. los predefinidos y los definidos por el usuario. lista = new Array('a'.join(". El separador por defecto es la coma.Días Hola.slice(2.Lenguaje Java Script Topicos Internet En este ejemplo hemos creado una nueva propiedad para el objeto array.join()). La salida de este programa sería Hola. 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. slice(ini.6). join() Convierte los elementos de un array en una cadena separados por el carácter que se le indique. document. sublista = lista. 'e'.

constructor contendrá // function String() { [native code] } prototype . //En este caso s.Lenguaje Java Script Topicos Internet Métodos toString Devuelve una cadena dependiendo del objeto en que se use. Objeto Cadena devuelta por el método Array Los elementos del array separados por coma Boolean Si el valor es false devuelve "false" si no devuelve "true" Function La cadena "function nombre_de_función(argumentos){ [código]}" Number Representación textual del número String El valor de la cadena Default "[object nombre_del_objeto]" ValueOf Devuelve el valor del objeto dependiendo del objeto en que se use Objeto Valor que devuelve el método Array Una cadena formada por los elementos separados por coma Boolean El valor booleano (true o false) Date La fecha como el número de milisegundos desde el 1/1/1970. 00:00 Function La propia función Number El valor numérico String La cadena Default El propio objeto Propiedades constructor Esta propiedad contiene una referencia a la función que crea las instancias del objeto en particular. Por ejemplo: x = new String("Hola").

indexOf("una"). document. 1</a> La sintaxis de este método permite usar una constante String en lugar del nombre de un objeto String. etc. así '45' no es el número cuarenta y cinco sino la cadena formada por los caracteres 4 y 5. una cadena conteniendo un elemento HTML ANCHOR. //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. elementos estos que serán heredados por las diferentes instancias de ese objeto. buscar texto. Al usar un método o referirnos a una propiedad podemos usar el nombre de la variable o una constante de cadena así el ejemplo var mitexto = "Esta es una cadena". Propiedades length: devuelve la longitud de la cadena.indexOf("una") Puede también escribirse en la siguiente forma: var pos = "Esta es una cadena". Ejemplo: Array.Lenguaje Java Script Topicos Internet Es una propiedad utilizada para asignar nuevos métodos o propiedades a un objeto. El valor de la variable ancla será: <A NAME="Refer1">Referencia num. var pos = mitexto.anchor("Refer1"). En JavaScript todo texto encerrado entre comillas. El ejemplo anterior podría haber escrito como: var ancla = "Referencia num. prototype: permite agregar métodos y propiedades al objeto Métodos anchor(atrcad) Este método crea. var refer = "Referencia num. lista = new Array(9).nombTipo). Por ejemplo: . El objeto String permite realizar operaciones con cadenas como concatenar o dividir cadenas. var ancla = refer. big() Este método devuelve una cadena consistente en el objeto String rodeado con las etiquetas <BIG> </BIG> del lenguaje HTML. La operación de crear una variable de este tipo se lleva a cabo como es habitual con el operador new pudiéndole pasar un argumento para inicializar la variable. 1" .nombTipo = "matriz". dobles o simples. extraer parte de un texto. 1".write(lista.. se interpreta como una cadena.anchor("Refer1"). a partir de un objeto String.prototype. con el atributo NAME igual a la cadena que se le pase en atrcad.

Por ejemplo el siguiente código devuelve la posición del tercer carácter de la cadena nombre: var nombre = "abcdefghij". mitexto = mitexto. 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. Tras la última sentencia la variable mi texto contendrá el valor: <B>Texto para negrita</B> charAt(atrent) Este método aplicado a una cadena devuelve el carácter que se encuentra en la posición dada por el atributo atrent.blink().bold(). var car3 = nombre. del lenguaje HTML. blink() Este método devuelve una cadena consistente en el String rodeado con las etiquetas <blink></blink> del lenguaje HTML. así el ejemplo podría haberse escrito: var mitexto = "Este es el texto". Tras la última sentencia la variable mi texto contendrá el valor: <blink>Texto para intermitente</blink> bold() Este método devuelve una cadena consistente en el String rodeado con las etiquetas <B> </B>. que es el tercer carácter por la izquierda (índice igual a 2). mitexto = mitexto.big(). negrita. teniendo en cuenta que el índice del primer carácter a la izquierda de la cadena es 0 y el último es una unidad menor que longitud de la cadena.Lenguaje Java Script Topicos Internet var mitexto = "Este es el texto". Por ejemplo: var mitexto = "Texto para negrita". Devolverá "c". Si el valor del atributo no es válido (igual o mayor que la longitud de la cadena o negativo) el método devuelve el valor undefined. Por ejemplo: var mitexto = "Texto para intermitente".charAt(2).big(). _ . mitexto = mitexto.

así el ejemplo podría haberse escrito: var mitexto = "Este es el texto".concat("días"). cualquier otro tipo es convertido a cadena. que es el código de la letra 'c'. teniendo en cuenta que el índice del primer carácter a la izquierda de la cadena es 0 y el último es una unidad menor que longitud de la cadena. concat(atrcad) Este método aplicado a una cadena le agrega la cadena pasada como atributo. a partir de un objeto String. Devolverá 99.charAt(2).Lenguaje Java Script Topicos Internet charAt(atrent) Este método aplicado a una cadena devuelve el código Unicode del carácter que se encuentra en la posición dada por el atributo atrent. Por ejemplo el siguiente código devuelve el Unicode del tercer carácter de la cadena nombre: var nombre = "abcdefghij". el tercer carácter por la izquierda (índice igual a 2). Si el valor del atributo no es válido (igual o mayor que la longitud de la cadena o negativo) el método devuelve el valor NAN. var car3 = nombre. Tras la última sentencia la variable mitext contendrá <TT>Este es el texto</TT> Se puede usar una constante de cadena en lugar de un nombre de variable. . atrcad. Por ejemplo: var mitexto = "Este es el texto". var hola = saludo. es lo mismo que si se hubiera escrito: var hola = saludo + "días" fixed() Este método devuelve una cadena consistente en el objeto String rodeado con las etiquetas <TT> </TT>.fontcolor("#FFAC3E"). var mitexto = "Texto en color" . mitexto = mitexto. una cadena conteniendo un elemento FONT del lenguaje HTML con el atributo COLOR igual a la cadena que se le pase en atrcad. Por ejemplo el siguiente código concatena 'Buenos ' y 'días': var saludo = "Buenos ". La variable hola contendrá "Buenos días". del lenguaje HTML.fixed(). mitexto = mitexto. fontcolor(atrcad) Este método crea. espaciado fijo o teletype.fixed(). que será una variable o constante literal.

fromCharCode( cod1.indexOf('@'). fontsize(atrnum) Este método crea.com". que son los caracteres con los códigos 65. desde) Este método devuelve la primera posición dentro del objeto String donde comienza la subcadena pasada como argumento en atrcad. una cadena conteniendo un elemento FONT del lenguaje HTML con el atributo SIZE igual al valor entero que se le pase en atrnum. Admite un segundo argumento opcional que indica desde que posición debe realizar la búsqueda. ) Este es un método global del objeto String que crea una cadena a partir de los códigos Unicode que se le pasen como parámetros.. Valores del segundo argumento negativos o mayores que la longitud de la cadena se consideran 0.Lenguaje Java Script Topicos Internet El valor de la variable ancla será: <FONT COLOR="#FFAC3E">Texto en color</FONT> La sintaxis de este método permite usar una constante String en lugar del nombre de un objeto String. var punto = cadena. si se omite comienza a buscar por el primer carácter de la izquierda.67). 66 y 67.. mitexto = mitexto.fontsize(-1). . El ejemplo anterior podría haber escrito como: var mitexto = "Texto de prueba". El ejemplo anterior podría haber escrito como: var mitexto = "Texto en color".indexOf('.arroba). a partir de un objeto String. . cod2. La variable cadena contendrá "ABC". Por ejemplo: var cadena = "mi. El valor de la variable mitexto será: <FONT SIZE="-1">Texto de prueba</FONT> La sintaxis de este método permite usar una constante String en lugar del nombre de un objeto String. Si la subcadena no se encuentra el valor devuelto es 1._ indexOf( atrcad. var arroba = cadena.fromCharCode(65. Por ejemplo: var cadena = String.66.fontsize(-1). var mitexto = "Texto de prueba" .correo@mail.fontcolor("#FFAC3E").'.

Admite un segundo argumento opcional que indica desde que posición debe realizar la búsqueda.lastIndexOf('. Este ejemplo devuelve en arroba la posición 9 mientras que punto contiene la 2 pues la búsqueda se hizo desde la posición donde está el carácter arroba hacia el principio de la cadena encontrando el primer punto. Por ejemplo: var mitexto = "Texto en cursiva". . var arroba = cadena. Si la subcadena no se encuentra el valor devuelto es -1. mitexto = mitexto. del lenguaje HTML.lastIndexOf('@').Lenguaje Java Script Topicos Internet Este ejemplo devuelve en arroba la posición 9 mientras que punto contiene la 14 pues la búsqueda se hizo desde la posición donde está el carácter arroba y encuentra el segundo punto. El valor de la variable enlace será: <A HREF="http://www. cursivas.com". pero realizando la búsqueda de derecha a izquierda. Recuerda que las posiciones en las cadenas se cuentan desde 0.com">Dirección</a> La sintaxis de este método permite usar una constante String en lugar del nombre de un objeto String.com'). Por ejemplo: var cadena = "mi. italics() Este método devuelve una cadena consistente en el String rodeado con las etiquetas <I> </I>.arroba).correo@mail.ciudadfutura. enlace = enlace. Recuerda que las posiciones en las cadenas se cuentan desde 0. una cadena conteniendo un elemento ANCHOR del lenguaje HTML. var enlace = "Dirección" . valores negativos o mayores que la longitud de la cadena se consideran 0. El ejemplo anterior podría haber escrito como: var enlace = "Dirección".italics(). link(atrcad)_ Este método crea. desde) Este método devuelve la primera posición dentro del objeto String donde comienza la subcadena pasada como argumento en atrcad. Tras la última sentencia la variable mi texto contendrá el valor: <I>Texto en cursiva</I> lastIndexOf(atrcad.ciudadfutura.link("http://www. var punto = cadena. a partir de un objeto String. con el atributo HREF igual a la cadena que se le pase en atrcad.'. si se omite comienza a buscar por el primer carácter de la derecha.anchor("Refer1").

document. result=frase. difíciles pero potentes.write("Hallados: '+result+'<br>'). "<i>$2</i>"). document. nueva. Por ejemplo: var frase = new String(). replace ( expreg. linea = linea.write("En la frase: " + RegExp. frase="Busco palabras con menos de cinco letras".write(frase+"<br>"). que puede contener elementos del patrón mediante los símbolos $1 a $9.replace(/palabra/g. si se omite sólo se cambia la primera. En la cadena nueva pueden usarse elementos del patrón. document. Si pruebas el ejemplo obtendrás lo siguiente Cada frase dicha es una frase falsa En esta ocasión se ha usado un patrón con el modificador g de global por lo que cambia todas las coincidencias. nueva ) A vueltas con las expresiones regulares. . Con este método todas las cadenas que concuerden con la expreg del primer argumento son reemplazadas por la cadena especificada en el segundo argumento. lo que se denominan expresiones regulares. linea="Cada palabra dicha es una palabra falsa". por ejemplo cambiemos las negritas a cursivas en la frase: var patron = /(<b>)([^<]+)(<\/b>)/g.input). var frase = "Cada <b>negrita</b> pasa a <b>itálica</b>". Permite usar patrones de búsqueda construidos con comodines y texto. Por ejemplo vamos a cambiar palabra por frase en la frase "Cada palabra dicha es una palabra falsa" var linea = new String().match(/\b\w{1. newstr = str. "frase"). var result=new Array(). document.replace(patron.write(linea). Si no encuentra ninguna devuelve null.de En la frase: Busco palabras con menos de cinco letras El patrón de búsqueda está encerrado entre dos barras / . Esta subcadena la devuelve en un array. Además actualiza el valor de una variable global RegExp que almacena en sus propiedades diversa información acerca de la búsqueda realizada. Si pruebas el ejemplo obtendrás el siguiente listado Hallados: con. y busca caracteres alfanuméricos ( \ w ) comprendidos entre límites de palabras ( \ b ) además hace una búsqueda global (indicado por la g fuera de las barras). Este método usa como argumento una expresión regular y va buscando en el objeto alguna subcadena que concuerde con esa expresión.Lenguaje Java Script Topicos Internet match( expreg ) Este es uno de los más potentes métodos para buscar subcadenas y realizar sustituciones dentro de cadenas de texto. El resultado devuelto es la cadena con las sustituciones realizadas.4}\b/g).

se interpreta como número de posiciones contadas desde el final de la cadena. del lenguaje HTML. la letra i del patrón indica que se debe ignorar el tipo mayúsculas o minúsculas en la búsqueda: var patron = /sábado|miércoles/i. document. small() Este método devuelve una cadena consistente en el objeto String rodeado con las etiquetas <SMALL> </SMALL>. ultimo ) Este método devuelve la porción de cadena comprendida entre las posiciones dadas por los argumentos inicio y ultimo. var cita = "La reunión será el lunes y el miércoles". slice ( inicio.small(). var nombre = frase. En este otro ejemplo usamos un segundo argumento: var frase = "Autor: Luis Sepúlveda". search ( expreg ) Es un método similar al método match pero más rápido. reducir tamaño.search(patron)+"<br>"). la posición de la palabra 'lunes'. Si ultimo es negativo. así $1 indica lo contenido en el primer paréntesis (<b>) mientras que $3 es <\b>. Si pruebas el ejemplo obtendrás un 30. La variable nombre contendrá "Luis Sepúlveda". Veras la frase antes y después del cambio: Cada negrita pasa a itálica Cada negrita pasa a itálica El $2 es un índice referido a los paréntesis del patrón. por ejemplo cadenas. mitexto = mitexto. Este método realiza una búsqueda en la cadena y devuelve el índice donde se produce la primera concordancia con el patrón o -1 si no existe ninguna. var nombre = frase. nombre contendrá "Gonzalo"'. . Si los argumentos no son números enteros. var frase = "Autor: Luis Sepúlveda". el tercer paréntesis. -10).write(cita.write(frase). es decir desde la posición 7 hasta 10 posiciones antes del final.parseInt().Lenguaje Java Script Topicos Internet document. o el final de la cadena si se omite este segundo argumento.slice(7. Por ejemplo buscamos las cadenas 'lunes' o 'martes' en la frase cita. se convierten a números enteros como haría el método Number.slice(7). Por ejemplo: var mitexto = "Este es el texto".

. strike() Este método devuelve una cadena consistente en el String rodeado con las etiquetas <STRIKE> </STRIKE>.Lenguaje Java Script Topicos Internet Tras la última sentencia la variable mitext contendrá <SMALL>Este es el texto</SMALL> Se puede usar una constante de cadena en lugar de un nombre de variable. lista = linea. var lista = linea. lista = linea.split(/:\s*/).write(lista).o. así el ejemplo podría haberse escrito: var mitexto = "Este es el texto". document.o. del lenguaje HTML.:. La variable lista es un array con dos elementos "Título" y "El portero".p. var linea=new String("Título: El portero"). split (separ) Devuelve un array conteniendo las porciones en que queda separada la cadena por el separador indicado mediante el argumento separ.small(). en este caso el primer elemento de lista es "Título" y el segundo " El portero" con un espacio por delante. Si se omite el separador el resultado es un array de un elemento con la cadena completa. la variable lista contendrá T. Por ejemplo: . mitexto = mitexto. Tras la última sentencia la variable mi texto contendrá el valor: <STRIKE>Texto para ver tachado</STRIKE> sub() Este método devuelve una cadena consistente en el objeto String rodeado con las etiquetas <SUB> </SUB>.l. Por ejemplo: var mitexto = "Texto para ver tachado".strike(). subíndice.e.write(lista).í.split(""). Por último si el separador es una cadena vacía: var linea=new String("Título: El portero"). Si este separador es una cadena vacía el texto queda desglosado en todos sus caracteres.u.split(":"). del lenguaje HTML.o.t. que será una expresión regular o una cadena literal. document.r.r.E.l. . También podriamos haberlo escrito como var linea=new String("Título: El portero"). tachado.t.

al igual que en var linea=new String("Mi página es ideal). var lista = linea.substr(3). largo) Devuelve una subcadena extraída del objeto string comenzando por la posición dada por el primer argumento. substring(ind1. Si se omite este último argumento la subcadena extraída va desde la posición indicada por el único argumento hasta el final de la cadena. sup() .substr(9. 3). substr(inicio. 9). largo. var lista = linea. 6).substr(3). Si los argumentos son literales se convierten a enteros como un parseInt(). La variable lista contendrá "página es ideal".substr(3. var lista = linea.sub(). mitexto = mitexto. La variable lista contendrá "página es ideal". Ahora la variable lista contendrá "página".Lenguaje Java Script Topicos Internet var mitexto = "Este es el texto".ind2) Devuelve una subcadena del objeto string que comienza en la posición dada por el menor de los argumentos y finaliza en la posición dada por el otro argumento. var linea=new String("Mi página es ideal).sub(). var lista = linea. así el ejemplo podría haberse escrito: var mitexto = "Este es el texto". Ahora la variable lista contendrá "página". var linea=new String("Mi página es ideal). inicio. Si se omite este último argumento la subcadena extraída va desde inicio hasta el final de la cadena.substr(3. y con un número de caracteres dado por el segundo argumento. var linea=new String("Mi página es ideal). var lista = linea. 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. var linea=new String("Mi página es ideal).

Lenguaje Java Script Topicos Internet Este método devuelve una cadena consistente en el objeto String rodeado con las etiquetas <SUP> </SUP>. o sea. Para crear una instancia de este objeto usamos alguna de las siguientes sintaxis: var fecha= new Date() var var var new fecha= new date(número) fecha= new date(cadena) fecha= date(año. En la primera forma la variable fecha contendrá la fecha del día actual. No afecta como es lógico a caracteres no alfabéticos. Tras la última sentencia la variable mitexto contendrá <big>Este es el texto</big> Se puede usar una constante de cadena en lugar de un nombre de variable. a los números. Por ejemplo: var mitexto = "Este es el texto". o sea. var linea=new String("´Hoy es Domingo"). seg[. La variable lista contendrá "HOY ES DOMINGO". del lenguaje HTML. letras acentuadas y caracteres especiales como la Ñ var linea=new String("´Hoy es Domingo"). minutos[.sup(). toLowerCase() Devuelve una cadena igual a la original pero con todos los caracteres en minúsculas.toLowerCasesubstr(). linea = linea. mes. toUpperCase() Devuelve una cadena igual a la original pero con todos los caracteres en mayúsculas. hora[. así el ejemplo podría haberse escrito: var mitexto = "Este es el texto". No afecta como es lógico a caracteres no alfabéticos. linea = linea. mitexto = mitexto.sup(). OBJETO DATE El objeto Date contiene un valor que representa fecha y hora de un instante dado.toUpperCase(). día[.ms]]]]) Los argumentos encerrados entre corchetes son opcionales. superíndice. a los números. Es muy útil a la hora de comparar cadenas para asegurarse que dos cadenas no difieran sólo por que algún carácter esté en mayúscula o minúscula. La segunda opción almacena en fecha la fecha dada por el argumento como el número de milisegundos transcurridos desde la media noche del . letras acentuadas y caracteres especiales como la Ñ. La variable lista contendrá "hoy es domingo".

minuto. Primero creamos la variable fecha instanciada como un objeto Date() para a continuación escribir directamente el valor de getDate() aplicado a fecha var fecha = new Date(). Este método controla por supuesto el número de días de cada mes y contempla el caso de años bisiestos. var var var var var hoy = new date() /*fecha del día en hoy */ evento = new Date("November 10 1990"). suponiendo que la fecha del sistema es 2-Octubre-2000. mes. Si echamos manos de un array podemos mejorar un poquito este ejemplo presentando el nombre del DIA de la semana: var fecha = new Date(). Estas son tres posibles formas de declarar objetos de tipo fecha. día. otro = new Date("10/02/2000"). En el siguiente ejemplo se presenta en pantalla Hoy es 1. . Métodos getDate() Nos devuelve el día del mes del objeto fecha al que se aplica. suponiendo que la fecha del sistema es 2-10-200. var diaSemana = new Array('domingo'. pero es aconsejable usar siempre cuatro dígitos por aquello de los efectos 2000. document. Por último la fecha puede crearse pasándole como argumento los números de año.getDay(). //Oct. Primero creamos la variable fecha instanciada como un objeto Date() para a continuación escribir directamente el valor de getDay() aplicado a fecha var fecha = new Date(). Donde se usen cadenas para indicar una fecha podemos añadir al final las siglas GMT (o UTC) para indicar que la hora se refiere a hora del meridiano Greenwich. según la zona horaria configurada en el ordenador donde se ejecute el script. lunes. 2000 instante = new Date(1990. 2.getDay()). 'viernes'.getDate()). otro = new Date("10 Nov 1990").00). o sea. En el siguiente ejemplo se presenta en pantalla Hoy es día 2.'sábado'). Los años posteriores a 1970 puede escribirse con dos dígitos.write("Hoy es día: "+fecha. 20. 'jueves'. 'miércoles'. 'lunes'. o sea. El tercer tipo se usa cuando la fecha se pasa en forma de cadena.Lenguaje Java Script Topicos Internet 1 de Enero de 1970. document. 11. hora.write("Hoy es "+fecha. si no se toma como hora local. pero en la última además se guarda la hora. var dia = fecha. 'martes'. 10. hora y opcionalmente. segundo y milisegundo. getDay() Nos devuelve el día de la semana del objeto fecha al que se aplica en forma numérica con una cifra entre 0 para el domingo y 6 para el sábado. Las dos últimas almacenan el mismo día. incluida la excepción del 2000.

document. esta función nos dará 2000.write("Son las "+fecha. si son las 17:30:08:550 el valor de getMilliseconds() presentará 550. var fecha = new Date().getHours()+" horas. document.getHours()+" horas. getFullYear() Nos devuelve el año correspondiente del objeto fecha en formato completo es decir incluyendo el siglo.getFullYear()). Por ejemplo creemos la variable fecha instanciada como un objeto Date(). Así si la fecha contiene 12:40:00.getSeconds() ). Así si la fecha contiene en su parte de hora 12:40:08:640. Por ejemplo creemos la variable fecha instanciada como un objeto Date().Lenguaje Java Script Topicos Internet document."). . getHours() Nos devuelve la sección horas en formato 0-24 almacenada en la parte dedicada a la hora del objeto fecha al que se aplica. document.write("Son las "+fecha. Este caso presentará en pantalla Son las 20 horas getMilliseconds() Nos devuelve los minutos de la sección dedicada a la hora almacenada en el objeto fecha al que se aplica. var fecha = new Date(). 2000.write(":" + fecha. var fecha = new Date(). Ahora se obtendría la más amigable frase Hoy es lunes. esta función nos dará 12. Este método evita el efecto 2000 al presentar loa años siempre con cuatro dígitos.getHours() ). Por ejemplo creemos la variable fecha instanciada como un objeto Date() para a continuación se presenta directamente el valor de getFullYear() aplicado a fecha.write(":" + fecha.write("Hoy es "+diaSemana[dia]). o sea. Igualmente el método interpreta los modificadores am / pm pero siempre devuelve la hora en formato de 24 horas. document.write(":" + fecha. document. 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")."). si son las 17:30:10 el valor de getHoursr() presentará 17. pero si contiene 5:40:00 nos dará 17.getMinutes() ). document. Así si la fecha contiene 2-Octubre-2000. esta función nos dará 640.write("El año actual es "+fecha.getMilliseconds()).write("Son las "+fecha. document.

write(":" + fecha. mes[4] = "Abril". Por ejemplo creemos la variable fecha instanciada como un objeto Date(). Así si la fecha contiene en su parte de hora 12:40:08. horas = (horas < 10)?"0"+horas:horas. document. Así para la fecha correspondiente al 10/Oct/2000.write("Mes actual:" + meses[nmes]). getMinutes() Nos devuelve los minutos de la sección dedicada a la hora almacenada en el objeto fecha al que se aplica. var horas = fecha. Si queremos que quede más presentable podemos completar con ceros por la izquierda cuando el número (de horas.write(":" + mins). esta función nos dará 24. el número de orden de Octubre. .. document. si son las 17:30:08 el valor de getMinutes() presentará 8.. var mins = fecha. document.write("Son las "+horas). var fecha = new Date().. . document. var nmes = fecha.getMinutes(). Por ejemplo creemos la variable fecha instanciada como un objeto Date(). document. mes[1] = "Enero".getMonth(). var fecha = new Date().Lenguaje Java Script Topicos Internet Esta función está presente en JScript de Microsoft y en ECMAScript pero no es soportada por Netscape.getMonth() ). mins = (mins < 10)?"0"+mins:mins. minutos o segundos) sea menor que 10. . esta función nos dará 10. segs = (segs<10)?"0"+segs:segs. mes[2] = "Febrero".write("Este mes es el "+fecha.getSeconds() ).getHours().write(":" + fecha.getMinutes() ).write("Son las "+fecha.getHours() ). document. Esto es tan fácil como se ve en el ejemplo: var fecha = new Date(). luego usamos el resultado de getMonth() como índice a ese array var array = new meses(). document. var segs = fecha.write(":" + segs). document. . var fecha = new Date(). getMonth() Nos devuelve en forma numérica el mes correspondiente al objeto fecha al que se aplica.getSeconds(). mes[3] = "Marzo".. Si queremos que aparezca el nombre del mes en lugar del número debemos crear primero un array de doce elementos y rellenarlos con los nombres de los meses.

getSeconds() ).getHours() ).getSeconds(). getTimezoneOffset() Esta función nos da la diferencia horaria en minutos del ordenador con respecto al meridiano de Greenwich.write("Son las "+horas). var mins = fecha. Esto es tan fácil como se ve en el ejemplo: var fecha = new Date().getMinutes() ). var horas = fecha. var segs = fecha.write(":" + segs). Así si la fecha contiene en su parte de hora 12:40:08. var fecha = new Date().write(":" + mins).write("Son las "+fecha.write(":" + fecha. segs = (segs<10)?"0"+segs:segs. Si queremos que quede mas presentable podemos completar con ceros por la izquierda cuando el número (de horas. el resultado depende de tu ordenador.getTime()). var ahora = new Date(). realmente esta función puede ser útil para calcular el tiempo transcurrido entre dos instantes.write(ahora. document. restando el getTime() obtenido al final del juego del getTime() obtenido al inicio.write(":" + fecha. document. document. var ahora = new Date().Lenguaje Java Script Topicos Internet getSeconds() Nos devuelve los segundos de la sección dedicada a la hora almacenada en el objeto fecha al que se aplica.getMinutes(). mins = (mins < 10)?"0"+mins:mins. esta función nos dará 8. document. horas = (horas < 10)?"0"+horas:horas. document. 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. verás que este número habitualmente es muy grande. a continuación escribimos el número de milisegundos dado por este función.write(ahora. document. si son las 17:30:08 el valor de getSeconds() presentará 8. El ejemplo que muestra el uso de la función define la variable ahora con la fecha actual y devuelve en minutos la diferencia horaria con la GMT. En el ejemplo que sigue creamos un objeto Date con la fecha actual. por ejemplo en un puzzle podría ser útil para calcular el tiempo que el jugador emplea en resolver el puzzle. document. . pudiendo ser negativo o positivo según esté en la zona oriental u occidental. minutos o segundos) sea menor que 10. Por ejemplo creemos la variable fecha instanciada como un objeto Date(). document.getHours().getTimezoneOffset()). El valor depende por tanto de la zona o huso horario para el que esté configurado el ordenador.

write("Este año es el "+fecha.setDate(31). esta función nos dará 2000 en IExplorer y 100 en Netscape. setDate(diames) Nos permite cambiar el día del mes del objeto fecha al que se aplica para poner el valor que se pasado en el argumento diames. luego comprobamos la fecha almacenada: var fecha = new Date("1 Sep 2000").toString()). no el 95. var transcurridos = Date.parse("1/1/2000 00:00:00"). document.Lenguaje Java Script Topicos Internet getYear() Nos devuelve en forma numérica el mes correspondiente al objeto fecha al que se aplica. Esto lo vemos en el ejemplo que sigue: creamos una variable como un objeto Date con el último día de Septiembre (mes de 30 días) e intentamos poner el día a 31. El ejemplo pone precisamente este valor en el campo año de la variable fecha. que para poner el año 1995 se debe pasar 1995. o sea. como vemos en este ejemplo. document. fecha. Así para la fecha correspondiente al 10/Oct/2000.write("Hoy es día: "+fecha. Por ejemplo creamos la variable fecha instanciada como un objeto Date(). y luego extraemos el año var fecha = new Date().write(transcurridos). setFullYear() Nos permite cambiar el año del objeto fecha por el valor pasado como argumento. . un número interpretado como año completo.getYear()). de forma que si pasamos como argumento 31 y el mes es de 30 días la función corrige la fecha completa pasándola al día 1 del mes siguiente. Como el año es de cuatro dígitos no hay problema de efecto 2000. fecha. Si pruebas este ejemplo en Netscape y en Internet Explorer verás que éste último da el año con cuatro dígitos mientras que el primero elimina el siglo. Este método controla por supuesto el número de días de cada mes y contempla el caso de años bisiestos.write(fecha.toString()). 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.setFullYear(1995) document. Este método es un método global del objeto y por tanto no es necesario crear un objeto Date para usarlo. var fecha = new Date(). document. Como verás si pruebas el ejemplo la fecha es corregida y pasa a 1 de Octubre. incluida la excepción del 2000.

fecha.setMilliSeconds(900).write("A las -2: "+fecha. El nuevo valor para los minutos se pasa como argumento. document.setMinutes(68). Igualmente si se usa un número negativo en el argumento se toma como horas antes de la última media noche del mismo día.write("A las 20: "+fecha. Por ejemplo si intentamos poner la hora en 30 la fecha se adelanta 24 horas y se pone en las 6 horas. var fecha = new Date("10 Sep 2000 00:00:00").write("Minact -4: "+fecha. cambiando además el día. Puedes ver lo que ocurre en este ejemplo var fecha = new Date("10 Sep 2000 00:00:00"). fecha.write(fecha.toString()+nl). fecha.toString()+nl). var nl="<br>". Como ves si es necesario. document. donde al final de cada acción se presenta la fecha completa en forma de cadena: var fecha = new Date("10 Sep 2000 00:00:00"). Así 68 en el argumento adelanta el reloj una hora pone los minutos a 8.write("Minact 68: "+fecha. document.setMinutes(20). fecha.setMinutes(-4). Habitualmente el argumento estará comprendido entre 0 y 1000. fecha.setHours(30).toString()+nl). aunque un valor fuera de este rango no da error sino que ajusta el resto de la hora. fecha.setHours(20). se ajusta la hora cuando el número de minutos supera el valor setMonth(nummes) . document. var nl="<br>".setHours(-2). que habitualmente estará entre 0 y 59. setMilliseconds() Nos permite modificar el número de milisegundos de la hora almacenada en el objeto fecha al que se aplica. Lógicamente este argumento estará entre 0 y 24. document. aunque si se usa un valor fuera de este rango la fecha es corregida en consecuencia. document. fecha.toString()+nl). Observa todo esto en el ejemplo.toString()+nl). document. mientras que un -4 pone los minutos a 56 (60 menos 4).toString()+nl). poniendo los milisegundos al valor pasado como argumento.write("Minact 20: "+fecha.write("A las 30: "+fecha. var nl="<br>".Lenguaje Java Script Topicos Internet setHours() Nos permite modificar la hora almacenada en el objeto fecha al que se aplica y poner la que se pasa como argumento.toString()+nl). setMinutes(minact) Nos permite ajustar los minutos de la sección dedicada a la hora almacenada en el objeto fecha al que se aplica.

Si el valor está fuera del rango se toma el exceso sobre 11 y se corrige adecuadamente la fecha.setTime()).toString()+nl). El nuevo valor se pasa como un número en el argumento. El ejemplo pone precisamente este valor en el campo año de la variable fecha. fecha. no el 95. fecha. var fecha = new Date("10 Sep 2000 00:00:00"). document. toLocaleString() . document. El ejemplo es muy sencillo.setSeconds(90). a continuación escribimos el número de milisegundos dado por este función. En el ejemplo que sigue creamos un objeto Date con la fecha actual. var ahora = new Date(). en este caso se cambia el mes de Septiembre por Marzo var fecha = new Date("10 Sep 2000 00:00:00").setFullYear(1995) document. que para poner el año 1995 se debe pasar 1995. fecha. Habitualmente el argumento estará comprendido entre 0 y 60. var nl="<br>".Lenguaje Java Script Topicos Internet Esta función se usa para modificar el mes del objeto fecha al que se aplica. realmente esta función puede ser útil para calcular el tiempo transcurrido entre dos instantes.write(fecha. restando el setTime() obtenido al final del juego del setTime() obtenido al inicio. por ejemplo en un puzzle podría ser útil para calcular el tiempo que el jugador emplea en resolver el puzzle.write("Minact 20: "+fecha. y si es negativo se toma como número de meses antes de Enero (-1 sería Diciembre. -2 sería Noviembre. poniendo los segundos al valor pasado como argumento. var fecha = new Date().toString()). 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.write(fecha. El valor deberá ser como es lógico numérico o convertible a numérico y comprendido entre 0 (Enero) y 11 (Diciembre). Como el año es de cuatro dígitos no hay problema de efecto 2000. document. o sea. un número interpretado como año completo.toString()). setYear() Nos permite cambiar el año del objeto fecha por el valor pasado como argumento.write(ahora. setSeconds(miliseg) Nos permite modificar el número de segundos de la hora almacenada en el objeto fecha al que se aplica. etc. verás que este número habitualmente es muy grande.).setMonth(2).

Este argumento se pasa como una serie de números separados por comas en el orden: Año. PI y algunos otros valores habituales en cálculos matemáticos.Raíz cuadrada de 0.Logaritmo en base 2 de E PI.10. Propiedades Son las habituales constantes como el número e. minuto. var transc= Date.Lenguaje Java Script Topicos Internet Esta función se usa para transformar el objeto fecha al que se aplica a una cadena de caracteres según el estándard UTC (Universal Time Coordinates).write(transc). Existe una función similar.1).Logaritmo natural de 10 LOG10E.write(fecha. la toGMTString(). OBJETO MATH Es el objeto que usa JavaScript para dotar al lenguaje de funciones matemáticas avanzadas y de constantes predefinidas. día.El conocido número pi .. En el ejemplo que sigue la cadena devuelta será "Mon.Constante de Euler la base para los logaritmos naturales LN10. segundos. Este método es un método global del objeto y por tanto no es necesario crear un objeto Date para usarlo. denominación actual del GMT (Greenwich Meridian Time). 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.UTC(2000. 10 Apr 2000 02:00:00 UTC" (Netscape cambia UTC por GMT) var fecha = new Date("10 Apr 2000 02:00:00"). como el número PI. E . y opcionalmente: hora.. document.Logaritmo natural de 2 LOG2E....5 o sea la inversa dela raíz de 2 LN2. document... La hora se ajusta según la configuración del ordenador. esto es debido a que la cadena devuelta es la hora correspondiente a Greenwich.Logaritmo en base 10 de E SQRT1_2. que es considerada como obsoleta y que se mantiene por cuestiones de compatibilidad. como vemos en este ejemplo que toma como fecha actual el 1 de Noviembre de 2000 a las 00:00:00. mes.toUTCString()). Como ves existe una diferencia en la hora almacenada y la devuelta por la función. no la local del ordenador.

Si el argumento fuera no entero será convertido a numérico siguiendo las reglas de la función parseInt() o parseFloat(). Este argumento deberá ser una expresión numérica o transformable en numérica. El radián es una unidad de medida de arcos tal que 2*pi radianes equivalen a 360º. Este argumento deberá ser una expresión numérica o transformable en numérica. atan(exprnum) Es una función trigonométrica que sirve para calcular el ángulo cuya tangente es el valor dado por el argumento. o sea el arctg(). del argumento.45) La variable numabs contendrá el valor 45. El radián es una unidad de medida de arcos tal que 2*pi radianes equivalen a 360º. o sea. Su sintaxis es tan simple como el ejemplo: var numabs = Math. acos(exprnum) Es una función trigonométrica que sirve para calcular el ángulo cuyo coseno es el valor dado por el argumento. var arco = Math. el llamado arcosen. es decir. o sea. sin límites.Raíz cuadrada de 2 Métodos abs(exprnum) Devuelve el valor absoluto. comprendida entre -1 y +1 y el ángulo devuelto viene dado en radianes. var arco = Math.Lenguaje Java Script Topicos Internet SQRT2.asin( 1 ) La variable arco contendrá el arco cuyo seno es 1. acos( 1) La variable arco contendrá el valor 0.abs( . o transformable en numérica. asin(exprnum) Es una función trigonométrica que sirve para calcular el ángulo cuyo seno es el valor dado por el argumento. comprendida entre -1 y +1 y el ángulo devuelto viene dado en radianes.atan( 1 ) . Este argumento deberá ser una expresión numérica. el arccos(). Recuerda las matemáticas del cole. sin signo. var arco = Math.57 o lo que es lo mismo pi / 2 radianes. y el ángulo devuelto viene dado en radianes.. 1. Recuerda las matemáticas del cole.

var coseno = Math. Si el argumento fuera no entero será convertido a numérico siguiendo las reglas de las funciones parseInt() o parseFloat(). es decir el menor número entero mayor o igual al argumento. Su sintaxis es tan simple como el ejemplo: var redexceso = Math. Los argumentos deberán ser numéricos o transformables en numéricos. atan2(coorX. coorY) Es una función trigonométrica que sirve para calcular el ángulo cuya tangente es el cociente de sus argumentos. ceil(exprnum) Devuelve el valor del argumento redondeado por exceso. Este argumento deberá ser una expresión numérica o transformable en numérica. exp(exprnum) Devuelve el valor del número e (constante de Euler. var argum= Math.atan2( 10. y el ángulo devuelto viene dado en radianes. Recuerda las matemáticas del cole. aproximadamente 2. cos(exprnum) Es una función trigonométrica que sirve para calcular el coseno del ángulo pasado como argumento en radianes. Si el argumento fuera no numérico será convertido a numérico siguiendo las reglas de la función parseInt() o parseFloat(). Su sintaxis es tan simple como el ejemplo: . o sea. Es una función útil para trabajar con números complejos pues realmente calcula el argumento de un complejo donde coorY es la parte real y coorX es la imaginaria.7853981633974483 o lo que es lo mismo pi / 4 radianes (45º). 4) La variable argum contendrá el arco cuya tangente es 10/4.cos( Math.25) La variable redexceso contendrá el valor 5. 0. que es el coseno de pi/2 radianes (90º).Lenguaje Java Script Topicos Internet La variable arco contendrá el arco cuya tangente es 1.PI/2) La variable coseno contendrá el valor 0.178) elevada al exponente dado por el argumento. El radián es una unidad de medida de arcos tal que 2*pi radianes equivalen a 360º . en otras palabras devuelve el ángulo desde el origen de coordenadas hasta un punto cuyas coordenadas son los argumentos de la función.ceil( 4. El radián es una unidad de medida de arcos tal que 2*pi radianes equivalen a 360º. Recuerda las matemáticas del cole.

pow(base. en base al número e. Su sintaxis es tan simple como el ejemplo: var logaritmo = Math. El número e es la base de los logaritmos neperianos por lo que esta función sirve para calcular antilogaritmos. o sea. Si el argumento fuera no numérico será convertido a numérico siguiendo las reglas de la función parseInt() o parseFloat(). Si el argumento fuera un valor negativo esta función devuelve NaN. del argumento.min( 12.exp(4) La variable e4 contendrá el valor e4.log( 1000) La variable logaritmo contendrá el valor 6. Su sintaxis es tan simple como el ejemplo: var redexceso = Math. exp) . Si alguno de los argumentos fuera no numérico será convertido a numérico siguiendo las reglas de la función parseInt() o parseFloat(). Si alguno de los argumentos fuera no numérico será convertido a numéricos siguiendo las reglas de la función parseInt() o parseFloat(). Si el argumento fuera no numérico será convertido a numérico siguiendo las reglas de la función parseInt() o parseFloat(). num2) Devuelve el menor de los dos números o expresiones numéricas pasadas como argumentos.Lenguaje Java Script Topicos Internet var e4 = Math. floor(exprnum) Devuelve el valor del argumento redondeado por defecto. es decir. el mayor número entero menor o igual al argumento. 5) La variable menor contendrá el valor 5. Su sintaxis es tan simple como el ejemplo: var mayor = Math. num2) Devuelve el mayor de los dos números o expresiones numéricas pasadas como argumentos.907755278982137 . min(num1. log(exprnum) Devuelve el logaritmo natural o neperiano.75) La variable redexceso contendrá el valor 4.wax( 12. 5) La variable mayor contendrá el valor 12. max(num1.floor( 4. Su sintaxis es tan simple como el ejemplo: var menor = Math.

es decir. random() Calcula un número aleatorio. Cada vez que se carga el intérprete de JavaScript se genera una semilla base para el cálculo.random(4.25) var entero2 = Math.sqrt( 49) .PI/2) La variable seno contendrá el valor 1.pow( 2. No lleva argumentos y su sintaxis es tan simple como el ejemplo: var azar = Math. round(exprnum) Devuelve el valor entero mas próximo al número pasado como argumento.sin( Math. 4) La variable potencia contendrá el valor 16. Si el argumento fuera no entero será convertido a numérico siguiendo las reglas de la función parseInt() o parseFloat().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). dado por el argumento base. comprendido entre 0 y 1 ambos inclusive. que es el seno de pi/2 radianes (90º).random(4. sin(exprnum) Es una función trigonométrica que sirve para calcular el seno del ángulo pasado como argumento en radianes. Este argumento deberá ser una expresión numérica o transformable en numérica.random()*10 La variable azar contendrá un número al azar entre 0 y 10. Si alguno de los argumentos fuera no numérico será convertido a numérico siguiendo las reglas de la función parseInt() o parseFloat().65) La variable entero1 contendrá el valor 4 mientras entero1 que contendrá 5. Si el argumento fuera negativo o cualquier otro valor no numérico devolverá NaN. Su sintaxis es tan simple como el ejemplo: var potencia = Math.Lenguaje Java Script Topicos Internet Calcula la potencia de un número. Su sintaxis es tan simple como el ejemplo: var entero1 = Math. var seno = Math. Si el argumento fuera no entero será convertido a numérico siguiendo las reglas de la función parseInt() o parseFloat(). realmente seudo-aleatorio. elevado al exponente dado por el argumento exp. Si la parte decimal del argumento es 0. redondea. Su sintaxis es tan simple como el ejemplo: var raiz = Math. sqrt(exprnum) Devuelve la raíz cuadrada del valor pasado como argumento.

Este argumento deberá ser una expresión numérica o transformable en numérica.PI/4) La variable tangente contendrá el valor 1. tan(exprnum) Es una función trigonométrica que sirve para calcular la tangente del ángulo pasado como argumento en radianes. que es la tangente de pi/4 radianes (45º). . var tangente = Math.Lenguaje Java Script Topicos Internet La variable raiz contendrá el valor 7.tan( Math.