clase 660 - libro introducción a javascript

JavaScript __________________________________________________________________________________

http://www.pacoarce.com 1

HTML BSICO 1

Objetivos de la unidad

Al finalizar la unidad el participante desarrollar sus propias pginas programadas en HTML.

JavaScript __________________________________________________________________________________

2 Francisco J. Arce AnguianoX

CURSO BSICO DE HTML

El lenguaje de HTML se basa en el uso de etiquetas tambin llamadas marcas, directivas o comandos (tags).

Estas etiquetas son fragmentos de texto delimitados por los signos menor que < y mayor que >. Estas etiquetas indican al navegador, la forma de representar los elementos (texto, grficos, etc.) que contiene el documento; en este manual, nos referiremos a estas ordenes con la palabra etiqueta.

Existe normalmente una etiqueta de inicio y otra de final , algunos comandos solo disponen de la de inicio, como es el caso del salto de lnea .

Todos los elementos que sean situados entre etiquetas o a partir de la de inicio, sern afectados ya sea por texto, o ms etiquetas.

Las etiquetas que estn mal escritas o que sean desconocidas para el navegador, son ignoradas. Estructuracin de un documento.

Un documento HTML esta definido por una etiqueta de inicio y una terminacin . Otras dos partes fundamentales de un documento HTML son la cabecera o encabezamiento, comprendido entre las etiquetas y y el cuerpo, entre y . Definiciones de la cabecera del documento Cuerpo del documento HTML que se va a visualizar La cabecera La cabecera de un documento viene delimitada por las etiquetas y y contiene informacin sobre el documento. Todas ellas son opcionales, pero es recomendable el uso de la etiqueta .

JavaScript __________________________________________________________________________________


La etiqueta especifica el ttulo del documento. Este generalmente se muestra en la parte superior del navegador. Tambin es utilizado como identificador en las listas de favoritos o bookmarks. (Figura 1.1). Ttulo de mi primera pgina WEB

Figura 1.1. Observe en la parte superior el ttulo de la pgina web

Otra etiqueta relacionada con la cabecera de un documento es , usada principalmente para sustituir el documento actual por otro en un determinado nmero de segundos o para incluir elementos informativos como el nombre del autor, fecha de expiracin del documento o el programa con el que hemos diseado la pgina (en el supuesto que se haya utilizado un software especfico). En todos los casos, la informacin se escribe usando pares nombre/valor.

Para el primer supuesto se emplean atributos del tipo HTTP-EQUIV, y para el segundo, del tipo NAME. En ambos, el valor a especificar se estipula en el campo CONTENT.

Siguiendo la estructura bsica de un documento HTML encontramos la etiqueta , que proporciona la direccin base para interpretar los enlaces relativos cuando el documento se lee fuera de su contexto de trabajo. Tambin tenemos la etiqueta que nos sirve para crear barras de herramientas o mens interactivos en la ventana del navegador.

JavaScript __________________________________________________________________________________


Para finalizar, tenemos la etiqueta que permite incluir comentarios dentro de nuestro cdigo fuente, . Es recomendable usarlo en documentos extensos o complejos, ya que permite introducir anotaciones para revisiones posteriores del cdigo. Para identificar el formato en que ha sido desarrollado un cdigo fuente, se utiliza la etiqueta , su contenido de esta permite saber que versin de HTML ha sido utilizada en el documento. El cuerpo El cuerpo de un documento HTML contiene el texto de la pgina. Las etiquetas de inicio y fin son y , y entre ellas se debe situar todo el cdigo restante del documento. Ejemplo de cdigo fuente que utiliza las etiquetas explicadas anteriormente:

Cdigo de ejemplo estructura bsica HTML

COLORES Y FONDO DEL DOCUMENTO

La etiqueta tiene una serie de atributos que permiten establecer una serie de caractersticas generales para todo el documento, como puede ser el color del texto, de los enlaces o del fondo del documento. Hay dos maneras de indicar los colores: en formato hexadecimal o referenciados por su nombre preestablecido.

JavaScript __________________________________________________________________________________


Para indicar los colores en formato hexadecimal, se deber indicar la proporcin de rojo, verde y azul correspondiente para formar el color deseado. El valor RGB del color estar determinado por RR, GG y BB para los niveles de Rojo, Verde y Azul, con los valores entre 0 y FF (de 0 a 255). El nmero es #000000 corresponde al color negro, #FF0000 al rojo, #00FF00 al verde, #0000FF al azul, #FFFFFF al blanco, y as muchos ms. Es ms fcil indicar el nombre del color en ingles como: black, teal, blue, navy, lime, white, purple, yellow, olive, red, marron, gray, fucsia, green, silver y aqua. Los atributos que podrn aadirse a la etiqueta son los siguientes: BGCOLOR=#rrggbb o nombre del color, para indicar el color del fondo del documento. TEXT=#rrggbb o nombre del color, para especificar el color general del texto. LINK=#rrggbb o nombre del color, para especificar el color del texto de los enlaces. VLINK=#rrggbb o nombre del color, para indicar el color del texto de los enlaces ya visitados. ALINK=#rrggbb o nombre del color, para indicar el color en que se pondr el texto del enlace en el momento de su activacin. Tambin existe la opcin de usar imgenes para el fondo de los documentos HTML. La imagen se mostrar debajo del texto y de las imgenes, y si no es lo suficientemente grande para rellenar el fondo del documento. Ser reproducida tantas veces como sea necesario hasta completarlo. El atributo que se utiliza para determinar la imagen de fondo es: BACKGROUND=nombre del archivo grfico. Ejemplos de cdigos HTML que utilizan los atributos anteriores. Ejemplo 1 de aplicacin de la etiqueta BODY

JavaScript __________________________________________________________________________________


Ejemplo 2 de aplicacin de la etiqueta BODY ESTRUCTURACIN DEL TEXTO HTML no reconoce ms de un espacio en blanco separando cualquier elemento o texto, es decir, los saltos de lnea, tabulaciones y dems separadores. Todos son ignorados por el navegador, y son convertidos a un nico espacio en blanco. Prrafos y saltos de lnea. La etiqueta que se utiliza para separar prrafos. Para HTML el texto es continuo, por lo que necesitamos indicar el principio y fin de un prrafo. Las marcas son y , aunque la utilizacin de la ltima es opcional. Otra etiqueta es . Esta etiqueta slo tiene marca inicial y se usa para cambiar de lnea. Ejemplo entre la utilizacin de ambas etiquetas. El agua de la fuente,sobre la piel toscay de verdn cubiertaresbala silenciosa. Antonio Machado. El resultado puede apreciarse en la figura 1.2.

Figura 1.2. Diferencia entre la etiqueta y .

El agua de la fuente, sobre la piel tosca y de verdn cubierta resbala silenciosa. Antonio Machado.

JavaScript __________________________________________________________________________________


Cabeceras y separadores. Las cabeceras se emplean para dividir los documentos en secciones, es decir, para marcar los ttulos de estas secciones. La etiqueta para las cabeceras es y donde n vara de 1 a 6. El valor de 1 correspondera con una letra muy grande y el de 6 con una muy pequea. Al utilizar esta etiqueta, se genera automticamente un salto de lnea similar al utilizado con la etiqueta . Ejemplo de su utilizacin. Pginas interactivas con JavaScript 1.2 Captulo 1 Este libro esta dirigido a aquellos que quieren aprender... El efecto puede observarse en la figura 1.3

Pginas interactivas con JavaScript Captulo 1 Este libro esta dirigido a aquellos que quieren aprender...

Figura 1.3 Ejemplo de distintos tipos de cabeceras.

Para poder separar partes del documento, la etiqueta dibuja una barra horizontal que divide la pantalla con un grosor y una longitud determinada a travs de sus atributos. El atributo SIZE permite especificar el grosor de dicha barra, mientras que WIDTH indica la longitud o el porcentaje relativo con respecto al ancho de la pgina. Para la alineacin de la barra se utilizara ALIGN con los valores left, right, center, justify o el porcentaje adecuado. NOSHADE elimina la sombra de la barra. Ejemplo de cdigo que utiliza de manera variada, las etiquetas anteriores. Listado de ejemplo de cabeceras y separadores

JavaScript __________________________________________________________________________________


Texto con Nivel 1 Texto con Nivel 2 Texto con Nivel 3 Texto con Nivel 4 Texto con Nivel 5 Texto con Nivel 6 El resultado puede observarse en la figura 1.4.

Figura 1.4. Distintos ejemplos de cabeceras y separadores.

Texto con formato preestablecido

JavaScript __________________________________________________________________________________


Existe una etiqueta que permite introducir en HTML texto con formato, es decir, el texto introducido entre las etiquetas y ser visualizado por el navegador respetando los espacios, saltos de lnea, etc. El atributo WIDTH permite especificar el mximo nmero de caracteres por lnea. Ejemplo de un listado Listado HTML ejemplo de texto preformateado VISITAS DE INTERNET Mes Visitas Acumulado Total Enero 1.250 0 1.250 Febrero 1.750 1.250 3.000 Marzo 850 3.000 3.850

Figura 1.5. Resultado de la utilizacin de la etiqueta Estilos de texto A continuacin veremos los estilos de texto fsico y lgicos: Se utiliza para mostrar un bloque de texto en negrita. Para poner texto en cursiva Para subrayar el bloque de texto delimitado. El texto tendr un tamao menor y los caracteres sern similares a los de una mquina de escribir (typewriter). Texto intermitente. Texto grande, el mayor tamao de fuente.

ESTADILLO VISITAS DE INTERNET Mes Visitas Acumulado Total Enero 1.250 0 1.250 Febrero 1.750 1.250 3.000 Marzo 850 3.000 3.850

JavaScript __________________________________________________________________________________


Texto pequeo, el menor tamao de fuente. Superndice. Subndice. Emplearemos esta etiqueta para mostrar un bloque de texto en cursiva. Generalmente se utiliza para marcar una direccin o firma. Etiqueta que define un bloque de texto como una cita de otra fuente. Se suele representar con una tabulacin y en cursiva. Muestra el texto como si fuese una cita. Se utiliza para representar una etiqueta HTML o cdigo de programa. Presenta el contenido de un bloque de texto enfatizado. Texto ms enfatizado que el caso anterior. Negrita. Texto tachado. Texto grande respecto al tamao normal. Texto pequeo respecto al tamao normal. Centra el texto en la pantalla. Cambio de lnea similar en tamao al generado con Se marca un conjunto de palabras a las que se les puede aplicar un Determinado estilo con el atributo style. (Esta etiqueta no genera cambio de lnea) Ejemplo de cdigo para texto con formato. Ejemplo de diversos textos con formatos

JavaScript __________________________________________________________________________________


El resultado puede observarse en la figura 1.6

Figura 1.6. Apariencia de algunos formatos aplicables al texto de una pgina HTML. Fuentes La etiqueta permite controlar casi totalmente el estilo de un bloque de texto. Podremos establecer el tamao de la fuente mediante el atributo SIZE, la fuente de texto mediante FACE y el color de la misma con el atributo COLOR. Debe cerrarse mediante .

Los tamaos del texto van del 1 al 7. El tamao normal es el 3. Texto en tamao 5 Texto en tamao 1

Tambin podemos cambiar el tamao de la fuente tomando como referencia el tamao normal de la fuente. Texto ms pequeo Texto ms grande Texto mucho ms grande

Para cambiar el color de un fragmento de texto: Este texto est en azul

JavaScript __________________________________________________________________________________


Ahora en rojo

Tambin podemos cambiar el tipo de fuente, pero para poder visualizarlas, deberemos disponer de ella en el computador. Este texto se ver con la fuente Cosmic

Si es necesario poner todo el texto con un mismo tamao deberemos utilizar la etiqueta . Ejemplo de cdigo. Listado de ejemplo de utilizacin de FONT Este texto est en azul con una fuente Cosmic Este otro en negro con la fuente Arial Otro ejemplo de utilizacin Para terminar un ms . Os gusta. ENLACES Otra funcin de HTML es el hipertexto, este consiste en poder moverse a travs de un documento o varios, seleccionando zonas de texto o imgenes programadas para tal fin. Cualquier elemento de un documento HTML puede ser definido como enlace, y una imagen, prrafo de texto o un bloque de texto pueden ser enlaces a otros puntos del documento o de la red. Estructuras de los enlaces La estructura general de in enlace esta formada por la etiqueta seguida de determinados atributos. Como norma general un enlace se distingue del texto normal porque ste aparece resaltado

JavaScript __________________________________________________________________________________


en otro color (generalmente azul) y subrayado. Si se trata de una imagen con borde, ste aparecer de color azul. Un enlace ser toda zona de la pgina Web sobre la que al pasar ste cambia de aspecto, y aparecer en la parte inferior del navegador el lugar al que se acceder. La estructura bsica de un enlace: Texto indicativo del enlace Tipos de enlaces Ejemplo A. Enlace a un punto de la misma pgina En documentos extensos o ndices suelen ponerse enlaces desde el principio del documento, al final del mismo y viceversa. El primer paso consiste en marcar las distintas zonas del documento a las que se desea poder acceder de manera inmediata; en este caso el inicio y final del documento.

Para el principio del documento aadiremos la lnea del cdigo siguiente: Hemos marcado como inicio un punto en el comienzo del documento. Ahora para el final del documento, pondremos esta lnea: Una vez marcadas las distintas zonas del documento, vamos a situar en el mismo los enlaces que nos permitirn ir de arriba abajo la pgina. En el inicio y final del documento aadiremos las siguientes lneas: Pulsa aqu para ir al final de esta pagina Pulsa aqu para ir al principio de esta Ejemplo B. Enlaces a otras paginas Cuando se dispone de varias pginas, es normal que desde una de ellas se pueda acceder a otra y, desde esta otra a una tercera, etc. El procedimiento es similar al anterior, pero en esta es necesario especificar el nombre del archivo que contiene la pgina a la que se quiere acceder. Vamos a suponer que tenemos dos pginas llamadas principal.html y secundaria.html

JavaScript __________________________________________________________________________________


Para crear un enlace de la primera a la segunda, deberemos escribir: Pulsa aqu para acceder a mi otra pgina Si el enlace se quisiese conectar con un punto concreto de la pgina de marcado como opciones, la estructura del cdigo sera la siguiente: Pulsa aqu para ver las opciones de mi otra pagina Ejemplo C. Enlaces a otros sitios Los siguientes ejemplos ilustran distintos modelos de enlaces: direccin correo del autor [email protected] Pulsa aqu para ver una foto Ejemplo de cdigo HTML que trabaja con distintas opciones de enlaces: Listado de ejemplo de enlaces Opciones disponibles en esta pgina Relacin de enlaces disponibles Coleccin de fotografas El Tercer Mundo. [No disponible] Todo en msica Biblioteca de los seres vivos Fotografa ertica. [No disponible] [email protected]

JavaScript __________________________________________________________________________________


El resultado se puede mostrar en la figura 1.7

Figura 1.7. Distintos enlaces.

LISTAS Las listas se emplean para presentar de forma ordenada una serie de lneas. Estas pueden ser ordenadas, desordenadas, de definicin, de men y de directorio. Las ltimas no generan resultados relevantes, por lo que no las trataremos. Lista desordenada, Lista ordenada, Lista de definicin,

Destacar que los distintos tipos de listas pueden combinarse entre si.

Listas desordenadas Las etiquetas que definen este tipo de lista son y respectivamente.

Las listas desordenadas se utilizan para relacionar elementos sin orden especfico. HTML coloca un smbolo delante de cada elemento dependiendo del valor especificado en el atributo TYPE. Este atributo puede tomar el valor de circle (crculo sin relleno), disc (crculo con relleno) y square (cuadrado). Se este atributo se aplica a la etiqueta , toda la lista utilizar el smbolo indicado, en cambio, si se le aplica a la etiqueta , encargada de sealar los distintos elementos de una lista, el cambio de smbolo slo afectara al elemento actual y a los siguientes hasta nueva indicacin.

JavaScript __________________________________________________________________________________


Ejemplo de listado. Capitulo 1 Capitulo 2 Capitulo 3 Apartado 3.1 Apartado 3.2 Capitulo 4

Figura 1.8. Ejemplo de utilizacin de listas desordenadas Listas ordenadas Este tipo de lista se utiliza para relacionar elementos con un orden determinado y precedido de un nmero que se incrementa automticamente. Las etiquetas son y . Recordemos que la etiqueta , es la encargada de sealar los distintos elementos de una lista. Las listas ordenadas siempre comienzan por 1 y van aumentando progresivamente, pero estas caractersticas se pueden controlar mediante los atributos TYPE y START. El atributo TYPE determina el formato de la marca encargada de numerar segn la siguiente relacin: Letras maysculas (TYPE=A) Letras minsculas (TYPE=a) Nmeros romanos mayscula (TYPE=I) Nmeros romanos mayscula (TYPE=i) Nmeros (TYPE=1) START especifica el nmero del primer elemento de la lista, para valores distintos a 1 (tomado por efecto). El orden se da siempre en nmeros independientemente del tipo de marca seleccionada. Ejemplo de cdigo

Captulo 1 Captulo 2 Captulo 3

Apartado 3.1 Apartado 3.2

Captulo 4

JavaScript __________________________________________________________________________________


Introduccin a Dynamic HTML Brece recorrido por HTML Breve recorrido por JavaScript Dynamic HTML Hojas de estilo en cascada parmetro CLASS Apndice A. Referencia HTML 4.0 Apndice B. Referencia JavaScript

Figura 1.9. Ejemplo de listas ordenadas Listas de definicin Las listas de definicin, son apropiadas para glosarios, catlogos, etc.. Los elementos deben ir englobados entre las etiquetas y y estn formadas por un primer elemento, al que podramos denominar termino o ttulo concretado con la etiqueta , y un segundo llamad definicin sealado con la etiqueta . Ejemplo de cdigo. HTML Hyper Text MarkUp Language JavaScript Lenguaje orientado a objetos desarrollado para aplicaciones de Internet IMGENES

Para incluir imgenes en documentos HTML se emplea la etiqueta junto con un atributo imprescindible: SRC.

1. Introduccin a Dynamic HTML 2. Breve recorrido por HTML 3. Breve recorrido por JavaScript

A. Dynamic HTML B. Hojas de estilo en cascada

a. parmetro CLASS i. Apndice A. Referencia

HTML 4.0 ii. Apndice B. Referencia

JavaScript

JavaScript __________________________________________________________________________________


Un atributo til es ALT. Este introduce una descripcin de la imagen con la finalidad de que los usuarios que acceden a la pgina con un navegador en modo texto puedan hacerse una idea de las imgenes que contiene. Las imgenes deben estar en formato GIF, JPEG, XBM o PNG (Portable Network Graphics). Las imgenes GIF ocupan poco espacio, se cargan rpidamente y slo pueden trabajar con 256 colores. Pueden hacerse fondos transparentes. El formato JPEG tiene un tamao aun menor que el GIF y trabaja con color de 24 bits, 16.7 millones de colores. El formato PNG est poco introducido y slo los navegadores de ltima generacin lo soportan. Su tamao es menor que el GIF y la calidad superior al JPEG. Alineacin de imgenes con texto El atributo ALIGN permite alinear la imagen respecto al texto en funcin de los siguientes valores: left, right, top, texttop, middle, absmiddle, baseline, bottom y absbottom. Descripcin de los valores: ALIGN=left La imagen se colocar en el primer hueco disponible a partir del margen

izquierdo, hacia abajo, y el texto subsiguiente se colocar a la derecha de la imagen. ALIGN=right La imagen se colocar a la derecha y el texto a la izquierda. ALIGN=top Alinea la parte superior de la imagen con el borde superior de la lnea. ALIGN=texttop Alinea la parte superior de la imagen con el texto que mas altura alcanza la

lnea. ALIGN=middle Alinea la lnea base del texto con la mitad de la imagen. ALIGN=absmiddle Alinea el punto medio vertical de la lnea de texto con la mitad de la

imagen. ALIGN=bottom Alinea el borde inferior del texto con el borde inferior de la imagen. ALIGN= baseline Desempea la misma funcin que el anterior. ALIGN= absbottom Alinea el inferior de la imagen con el inferior de la lnea.

Ejemplo de cdigo HTML. Cdigo ejemplo de alineacin de imgenes Alineacin TOP

JavaScript __________________________________________________________________________________


Alineacin MIDDLE Alineacin BOTTOM Alineacin LEFT Alineacin RIGHT

Figura 1.10. Ejemplo de alineacin de imgenes.

Tamao y borde de una imagen Para poner un marco o borde a una imagen se deber utilizar el atributo BORDER. Ejemplo de bordes en imgenes

JavaScript __________________________________________________________________________________


Figura 1.11. Utilizacin del atributo BORDER trabajando con imgenes

Tambin podemos redefinir el tamao de una imagen mediante los atributos WIDTH y HEIGHT (anchura y altura) con los que podemos redimensionar una imagen para adaptarla a nuestras necesidades. Ejemplo de redimensionado de imagen Imagen a tamao real Imagen redimensionada

JavaScript __________________________________________________________________________________


Imagen a tamao real Imagen redimensionada

Figura 1.12. Utilizacin de los atributos WIDTH y HEIGHT

El atributo VSPACE indica el espacio a reservar por encima y por debajo de la imagen. El atributo HSPACE se refiere al espacio a reservar a derecha e izquierda de la misma. El valor se especifica en puntos. Carga rpida de una imagen El atributo LOWSRC permite cargar rpidamente una imagen de menor resolucin (evidentemente deber tener menor tamao) para ir sustituyndola por la de calidad. Ejemplo de carga de imagen en baja resolucin IMGENES MAPEADAS Las imgenes mapeadas son aquellas en las que se definen diversas zonas que activan distintos enlaces cuando son seleccionadas. Desarrollo de la imagen Primero se realiza el diseo de la imagen mediante un programa grfico. Despus para definir las distintas zonas de la imagen necesitamos conocer las coordenadas que delimitan las reas de la imagen que deseamos sensibilizar, para ello tomaremos las coordenadas que delimitan. Finalmente, asignaremos a cada zona su correspondiente enlace.

JavaScript __________________________________________________________________________________


Programacin del cdigo Primero deberemos definir la imagen a utilizar mediante la etiqueta y asignarle un nombre al mapa resultante mediante el atributo USEMAP. Al nombre de dicho mapa habr que anteponerle el smbolo #. A continuacin, abrimos el mapa mediante la etiqueta . El fragmento de cdigo HTML: Ahora tenemos que asignar a cada parte de la imagen el correspondiente URL de destino. La etiqueta se encarga de gestionar las distintas reas del mapa ayudada por los atributos SHAPE, COORDS y HREF. El atributo SHAPE se encarga de delimitar las distintas zonas del mapa segn los siguientes valores: Rect. Usado para delimitar una superficie rectangular por medio de las coordenadas del

vrtice superior izquierdo e inferior derecho. Circle. Delimita una circunferencia mediante la coordenada del centro de la misma y el valor

del radio. Poly. Polgono definido mediante un conjunto de lneas. Se deben definir las coordenadas de

los distintos vrtices de las polilneas.

Las distintas reas del mapa deban ser definidas mediante coordenadas, por lo que usaremos el atributo COORDS, para introducir estas junto con el URL al que se acceder.

El cdigo necesario para nuestro mapa sera similar al siguiente: Cdigo ejemplo de una imagen mapeada

JavaScript __________________________________________________________________________________


Se ha aadido la lnea con la finalidad de no establecer ningn enlace si se selecciona una zona del mapa no definida. Tambin podemos establecer enlace por defecto para zonas del mapa no definidas mediante TABLAS Las tablas estn divididas en celdas, que pueden contener texto, listas, imgenes, enlaces, formularios, etc. Estructuracin de una tabla Las etiquetas y son las encargadas de definir el principio y el final de una tabla respectivamente. Tambin utilizaremos las etiquetas y para inicio y final de cada una de las celdas y y para el inicio y final de cada fila. Tambin podemos utilizar y para definir el inicio y final de una celda de cabecera. El contenido de esta aparecer en negrita y centrado. Para disear una tabla de 10 celdas y dos filas para clasificar los nmeros del 0 al 9, el cdigo sera similar a este: Tabla con los nmeros del 0 al 9 0 1 2 3 4 5 6 7 8 9

JavaScript __________________________________________________________________________________


Observe la figura 1.13

0 1 2 3 4

5 6 7 8 9

Figura 1.13 Tabulacin del contenido de las celdas de una tabla.

La etiqueta se utiliza para poner un ttulo a la tabla. El ttulo se puede situar arriba o abajo, con el atributo ALIGN.

Veamos el siguiente listado: Tabla con bordes Horas trabajadas de la semana LunesMartes MircolesJuevesViernes SbadoDomingo 10881183

Figura 1.14. Ejemplo de utilizacin de la etiqueta

Alineacin y dimensin de celdas Disponemos de los siguientes valores de alineacin:

JavaScript __________________________________________________________________________________


Alineado en el centro Alineado a la izquierda Alineado a la derecha En la parte superior de la celda En la parte central de la celda En la parte inferior de la celda Los atributos COLSPAN y ROWSPAN permiten que una celda ocupe el espacio de varias, expandindose hacia la celda de la derecha o hacia la siguiente fila. COLSPAN indica el nmero de celdas contiguas que debe ocupar hacia la derecha, mientras que ROWSPAN indica cuntas filas hacia abajo se expande la celda.

Ejemplo: Ejemplo de dimensionado de celdas> Ejemplo de alineaciones y dimensionados Esto ocupa dos celdas Celda Celda Esto ocupa dos filas Celda Celda Celda Celda Celda Celda

JavaScript __________________________________________________________________________________


Figura 1.15. Alineacin y dimensionado de celdas en una tabla.

Los atributos WIDTH y HEIGHT podemos especificar la anchura y altura respectivamente un porcentaje de la dimensin de la pantalla o un determinado nmero de pxeles.

Se puede asignar un color de fondo a toda la tabla, a una celda o la combinacin de varias. El atributo a utilizar es BGCOLOR. Para hacer que toda la tabla tenga como color de fondo el verde (green), el cdigo deber ser: Para que una determinada celda tenga como color de fondo el verde, el atributo deber estar en la etiqueta que define dicha celda: Esta celda tiene el fondo verde Para combinar distintos colores, utilizaremos el atributo tantas veces como sea necesario; el color que predomine se puede establecer en la etiqueta . Colores de fondo y dimensiones generales de la tabla OTRO EJEMPLO MAS DE TABLAS JUAN NIEVES LYDIA

JavaScript __________________________________________________________________________________


JOSE Ma. JOSE DANIEL DAVID JAVI ITO MIRIAM CARLITOS

Figura 1.16. Ejemplo de coloreado de celdas

Separacin entre celdas Mediante el atributo CELLSPACING podemos variar la separacin entre celdas, y con el atributo CELLPADING la separacin entre el borde de la celda y el contenido de la misma. Ambos debern ponerse en la etiqueta . El siguiente cdigo muestra la configuracin de una tabla con un grosor de borde de 2 unidades, separacin entre celdas de 10 y separacin del contenido de las mismas con respecto a los bordes de 20. REPRODUCCIN DE AUDIO La capacidad de reproducir sonido en una pgina Web esta determinada por el navegador que se utilice.

JavaScript __________________________________________________________________________________


Microsoft y Netscape utilizan etiquetas y atributos no estndares de HTML, consiguiendo que determinadas funciones multimedia no sean reconocidas por el navegador. La solucin para eliminar la incompatibilidad entre navegadores es aadir la lnea de ambos. Msica de fondo con el Microsoft Internet Explorer. La etiqueta encargada de reproducir un archivo de audio es asociada al atributo SRC. Los archivos podrn ser del formato *.wav, *.au o *.mid Un atributo fundamental en esta etiqueta es LOOP, sta ser usada para especificar el nmero de veces que se debe ejecutar el archivo de sonido. Puede tener un valor numrico o valor infinite, que reproducir el archivo en un bucle cerrado. El siguiente cdigo de ejemplo reproduce infinitamente el archivo midi llamado msica.mid: Msica de fondo con Netscape La etiqueta que gestiona el sonido en Netscape es asociada al atributo SRC. Netscape presenta en pantalla una ventana de control de audio con las clsicas funciones de avance, retroceso, ejecucin y Stop. Las dimensiones de la ventana se pueden modificar con los atributos WIDTH y HEIGHT. Si no queremos que aparezca la ventana de control, deberemos asignar el atributo HIDDEN asignando el valor true. El siguiente cdigo de ejemplo, reproduce automticamente una sola vez el archivo MIDI musica.mid sin mostrar ninguna ventana de control: LOS FRAMES Un brame es un marco que divide la pantalla en filas y columnas segn nuestras necesidades. Con los brames podemos dividir la pantalla en ventanas y visualizar, por ejemplo, un men en la parte izquierda y los resultados de los enlaces en la derecha. Los enlaces y el atributo TARGET El atributo TARGET, determinar la zona de la pantalla en donde se mostrarn los elementos del enlace seleccionado.

JavaScript __________________________________________________________________________________


Imaginemos que hemos dividido la pantalla en dos partes, una superior e inferior, el cdigo sera: Pulse aqu para ir a la ventana superior Pulse aqu para ir a la ventana inferior El atributo TARGET determina el lugar de destino del contenido del enlace especificado. Una vez dividida la pantalla, deberemos indicar en los enlaces de nuestro cdigo HTML el lugar de la pantalla en donde sern visualizados. Sin embargo, este atributo tiene valores especiales: TARGET=_blank. El enlace siempre se carga en una nueva ventana. TARGET=_self. El enlace se carga en la misma ventana en que se encuentra. TARGET=_parent. El enlace se carga en el FRAMESET inmediatamente superior al

documento. TARGET=_top. El enlace se carga en la totalidad de la ventana.

Estructura bsica El cdigo principal de una pgina con frames no presenta las etiquetas y . El cdigo deber estar incluido entre las etiquetas y .

La primera etiqueta a utilizar es , que es la que permite dividir la pantalla en ventanas, ya sean verticales u horizontales. Los atributos encargados de determinar el aspecto de esas ventanas son ROWS y COLS, filas y columnas respectivamente. El atributo ROWS se encarga de definir el nmero de divisiones verticales a efectuar, mientras que COLS hace lo propio pero con las divisiones horizontales. La forma de introducir los valores de divisin de la pantalla se basan en los siguientes formatos: n. Si se introduce un valor n determinado, se estar indicando la altura o anchura de la ventana

en pxeles. %. Este valor indica que la altura o anchura de la ventana es un porcentaje relativo al tamao

de la ventana que la contiene. *. Un asterisco indica que debe asignarse a la ventana todo el espacio disponible. Si hay

varias ventanas, el espacio libre se divide entre ellas y, si hay un valor delante del asterisco, la ventana que lo tenga asignado tomar ms espacio relativo, por ejemplo 2*,* dara 2/3 del espacio a la primera ventana y un tercio de la segunda.

Formas de dividir una pantalla:

JavaScript __________________________________________________________________________________


La etiqueta y

La etiqueta es la encargada de llamar al documento HTML que se debe cargar en una ventana. Esta etiqueta puede tener hasta seis atributos distintos: SRC=url. El atributo SRC toma como valor el URL del documento que se debe mostrar en

esa ventana en particular. Si no se incluye, la ventana quedar vaca. NAME=nombre ventana. Como se puede deducir, se emplea para dar un nombre a una

ventana, de maneta que pueda ser el destino de cualquier enlace. MARGINWIDTH=valor. Lo emplearemos cuando queramos precisar un nmero de

pxeles entre los bordes izquierdo y derecho de la ventana. MARGINHEIGHT=valor. Lo emplearemos cuando queramos precisar un nmero de

pxeles entre los bordes izquierdo y derecho de la ventana. SCROLLING=yes|no|auto. Este atributo se utilizar para mostrar barras de

desplazamiento o no. Yes mostrar siempre las barras, no nunca pondr barras en la ventana y auto har que el navegador decida si son necesarios o no en funcin del contenido de la misma.

NORESIZE. Atributo que indica al navegador que la ventana no pueda ser redimensionada por el usuario.

Listado principal de definicin del frame: Ejemplo de varios frames combinados

JavaScript __________________________________________________________________________________


En ejemplo ms: Un ejemplo complejo de Frames

LOS FORMULARIOS Los formularios pueden introducirse en cualquier parte del documento, es decir, en tablas, dentro de un texto preformateado, etc. Tambin pueden contener en su interior listas, imgenes, etc. Las etiquetas que definen el inicio y final de un formulario es: y respectivamente. Las etiquetas que definen los campos de entrada , las que definen los campos de seleccin y las reas de texto .

JavaScript __________________________________________________________________________________


Elementos del formulario Declaracin del formulario . Los elementos que componen un formulario deben encontrarse entre las etiquetas y . Atributos de la etiqueta : ACTION. Atributo que determina la accin que debe realizarse al pulsar el botn de

ejecucin. METHOD. Indica el mtodo de transferencia de la informacin introducida en el formulario.

Pueden emplearse los mtodos GET y POST. El mtodo GET enva la informacin a travs de una variable llamada QUERY_STRING. El mtodo POST utiliza dos variables: CONTENT_LENGTH, que contiene la longitud de datos enviados, y CONTENT_TYPE, que son los datos propiamente.

ENCTYPE. Atributo que determina la forma de codificacin empleada para el transporte del contenido del formulario.

Definicin de campos de entrada La etiqueta se emplea para definir todos los elementos del formulario, como botones, cajas de texto, casillas de verificacin, etc. El atributo que determina el tipo de elemento es TYPE. Los tipos de entrada son: Checkbox. Cuadro vaco de seleccin. Permite selecciones mltiples. Hidden. Se utiliza para pasar los datos adquiridos en un formulario a otro sin que se visualice

nada en la pantalla. Text. Como su nombre indica se utiliza para la entrada de textos. Password. Permite la introduccin de texto visualizndose para cada carcter un asterisco. Radio. Crculo vaco de seleccin. Solo permite una opcin entre varias. Reset. Borra todos los datos introducidos en el formulario. Submit. Enva la informacin del formulario.

Checkbox Se utiliza para elegir una serie de opciones disponibles, pudindose realizar selecciones mltiples. Los elementos de este tipo requieren como mnimos los atributos NAME y VALUE, que indican respectivamente el nombre del tipo o grupo de tipos y el valor del campo.

JavaScript __________________________________________________________________________________


Tambin se puede incluir el atributo CHECKED cuando queramos que esa opcin aparezca por defecto. Ejemplo de cdigo. Windows 95 Ms-Dos

JavaScript __________________________________________________________________________________


El cdigo TYPE=text se puede omitir.

Figura 1.18. Ejemplo del campo de entrada text. Observe el redimensionado de la casilla Direccin. Password Este tipo se utiliza generalmente para la introduccin de claves de acceso. El texto que se va escribiendo en la ventana no es legible por curiosos. Cdigo: Introduzca nombre de usuario: Contrasea:

Figura 1.19. Casilla caracterstica de password

Radio Es similar al checkbox, pero sta solo permite elegir una opcin entre todas. Los elementos de este tipo requieren como mnimo los atributos NAME y VALUE. Cdigo de ejemplo: Menos de 18 aos Entre 18 y 25 aos Entre 25 y 35 aos

JavaScript __________________________________________________________________________________


Entre 35 y 50 aos Ms de 50 aos

Figura 1.20. Ejemplo de radio

Reset Se usa para eliminar del formulario todos los valores introducidos. Su aspecto es el de un botn y su nombre se especifica con en atributo VALUE. Submit Es el botn que se encarga de enviar el formulario. La etiqueta del botn se determina mediante el atributo VALUE. Ejemplo de reset y submit. Definicin de campos de seleccin La etiqueta .. permite al usuario seleccionar una opcin de un conjunto de elementos mostrados como una lista desplegable, donde cada una de las opciones se introduce mediante el elemento OPTION. Con el atributo SELECT podemos visualizar una determinada opcin de la lista. Los atributos que reconoce son: MULTIPLE. Por defecto solo puede ser seleccionada una sola opcin. Este atributo permite

selecciona ms, pulsando la tecla CTRL junto con la opcin. NAME. Atributo que especifica el nombre de la lista de seleccin. SIZE. Atributo que determina el nmero de tems visibles superior a

1. en este caso muestra una barra de desplazamiento lateral. Ejemplo de cdigo:

JavaScript __________________________________________________________________________________


Impresora Monitor Scanner Raton Plotter

Figura 1.21 Ejemplo de lista desplegable

rea de Texto La etiqueta de inicio y de final permite presentar un campo de texto de mltiples lneas. Presenta los siguientes atributos: COLS. Determina el nmero de caracteres de ancho de la ventana de texto. NAME. Nombre del campo ROWS. Establece el nmero de lneas visibles del rea de texto en caracteres. WRAP. Establece los saltos de lnea segn los siguientes valores:

o off. No se producen saltos de lnea automticos y el texto es enviado exactamente como fue escrito.

o virtual. Se usa el salto de lnea automtico para mostrar el texto en pantalla. o physical. Utiliza saltos de lnea automticos y enva el texto de idntica manera.

Ejemplo: EDITORIAL Ra-Ma Ctra. de Canillas, 144 28043 MADRID

JavaScript __________________________________________________________________________________


Figura. 1.22. Ejemplo de utilizacin del campo Textarea

JavaScript __________________________________________________________________________________


Introduccin a JavaScript

2


Al finalizar la unidad el participante conocer los principios del lenguaje JavaScript.

Tiempo estimado: 2:30 horas

JavaScript __________________________________________________________________________________


CAPTULO 2 INTRODUCCIN A JAVA SCRIPT JavaScript es un lenguaje de programacin creado por Netscape con el objetivo de integrarse en HTML y facilitar la creacin de pginas interactivas sin necesidad de utilizar scripts de CGI o Java. No hay que confundir Java con JavaScript. Java es un lenguaje completo que permite crear aplicaciones independientes, mientras que JavaScript es un lenguaje que funciona como extensin del HTML, que est orientado a objetos, diseado para el desarrollo de aplicaciones cliente-servidor a travs de Internet. El cdigo de programa de JavaScript, llamado script, se introduce directamente en el documento HTML y no necesita se compilado. El navegador se encarga de traducir dicho cdigo.

JavaScript 1.0 Netscape Navigator 2.0 o superior Microsoft Internet Explorer 3.0

JavaScript 1.1 Netscape Navigator 3 o superior Microsoft Internet Explorer 4

JavaScript 1.2 Netscape Communicator 4 Microsoft Internet Explorer 4

JavaScript 1.3 Netscape Communicator 4.06 y 4.6 Microsoft Internet Explorer 5

JAVASCRIPT Y HTML El primer paso es diferenciar dentro de un documento lo que es JavaScript del resto. Para ello HTML dispone de una etiqueta que define el incio y el final de un cdigo JavaScript. Para definir el inicio de un programa se debe utilizar la etiqueta y determinar el final con . El atributo LANGUAGE indica el navegador el lenguaje script utilizado. En el caso que nos ocupa el nombre a poner debe ser JavaScript. Si se omite la especificacin del lenguaje, el navegador asume que el script est programado en JavaScript. Si se desarrolla un programa con las ultimas novedades de JavaScript 1.3 y se ejecuta en el navegador Netscape 2.0 que solo soporta la primera versin, se produciran errores. As pues, especificando el npumero de versin utilizada en el script, por ejemplo , los navegadores anteriores a Netscape 4.06 ignorarn el cdigo y no se producirn errores. Ejemplo de cdigo

JavaScript __________________________________________________________________________________


document.write("primeros pasos con JavaScript"); El texto anterior muestra en pantalla una lnea con el texto Primeros pasos con JavaScript JavaScript es un lenguaje de programacin Case Sensitive, es decir, que distingue las maysculas de las minsculas, por lo que tendremos que prestar atencin a la utilizacin de variables y comandos. MI NAVEGADOR NO SOPORTA JAVASCRIPT No todos los navegadores pueden soportar JavaScript. Cuando el usuario utiliza un navegador que no soporta JavaScript las etiquetas y son ignoradas y se presenta el cdigo script en pantalla al entender que se trata de texto. La solucin pasa por englobarel cdigo JavaScript con la etiqueta HTML encargada de introducir comentarios, de esta manera los navegadores que no soportan JavaScript interpretarn el cdigo script como un comentario.

El lenguaje HTML dispone tambin de las etiquetas y . Entre ellas se especificar una opcin alternativa para los navegadores que no soportan scripts. Por ejemplo un texto diciendo Su navegador no soporta JavaScript. Ejemplo: Su navegador no soporta JavaScript. PRIMEROS PASOS Introducir comentarios

JavaScript __________________________________________________________________________________


Para introducir comentarios en JavaScript podemos utilizar dos tcnicas diferentes:

Los comentarios en una sola lnea irn precedidos de //; Los comentarios de varias lneas irn encerrados en /* y */.

Ejemplo de un fragmento de cdigo en el que se utilizan los sistemas vistos anteriormente: //Comentario de una sola linea, la siguiente se ejecuta document.write("Bienvenidos a JavaScript") //Nuevamente un comentario de una sola linea //***************************** //Comentarios, Comentarios //***************************** /*Esta es otra forma de introducir comentarios pero utilizando muchas lineas, incluso cosas como document.write("hola"), son vistas como comentarios */ Corchetes Los corchetes se utilizan para definir fragmentos de cdigo de manera que stos no se junten con el resto del programa. Todo el cdigo que ejecuta una funcin debe ir bien diferenciado del resto mediante corchetes.

Figura 2.1. Ventana creada con la funcin alert

El punto y coma El punto y coma sirven para separar sentencias que se encuentran en una misma lnea. Tambin puede indicar el final de una sentencia que ocupa varias lneas. Ejemplo:

JavaScript __________________________________________________________________________________


var texto="FAQ(Frequently Asked Questions, Documentos de Preguntas Frecuentes) Documentos recopilatorios para usuarios principiantes, que contienen las preguntas mas Frecuentes sobre un tema determinado. Son las mejor forma de comenzar a aprender cosas sobre Internet.";

JavaScript __________________________________________________________________________________


Tratamiento de

variables 3


Al finalizar la unidad el participante conocer el manejo de variables en JavaScript.

Tiempo estimado: 1:30 horas

JavaScript __________________________________________________________________________________


CAPITULO 3 TRATAMIENTO DE VARIABLES Todos los lenguajes de programacin necesitan en algn momento cargar en memoria los datos que se van a procesar. Las variables son fundamentales. LAS VARIABLES JavaScript admite prcticamente cualquier tipo de nombre para definir una variable, no obstante, hay una serie de consideraciones que se deben tener presentes:

El primer carcter debe ser siempr una letra o el guin de subrayado ( _ ). Los restantes caracteres pueden ser letras, nmeros o el guin de subrayado, teniendo como precaucin no dejar espacios entre ellos.

El nombre de la variable no debe coincidir las palabras reservadas de JavaScript. JavaScript diferencia entre maysculas y minsculas.

Para declarar variables se utiliza la palabra clave var seguida del nombre de la variable. Las

siguientes variables sern reconocidas como tales por JavaScript. var nombre; var direccin; var entrada_valor_concreto; var variable_numero_12;

Ahora se muestran otra variables que no sern reconocidas por JavaScript al no cumplir algunas de las reglas de definicin vistas anteriormente. var 1dato; var entrada datos; var while; var new; Se recomienda utilizar siempre la misma pauta para definir los nombres de las variables. Se puede escribir en minsculas, o bien la primera mayscula y las dems minsculas. Aunque las siguientes variables parezcan iguales, JavaScript las interpretar como diferentes.

JavaScript __________________________________________________________________________________


var resultadosuma var Resultadosuma var resultadoSuma var RESULTADOSUMA var resultado suma var resultadosumA TIPOS DE VARIABLES JavaScript puede manejar tres tipos de datos distintos decidiendo por nosotros el tipo de variable que deber emplear durante la ejecucin del script. Los tres tipos de variables son:

Variables de cadena Variables numricas Variables booleanas

Un cuarto tipo podran se los datos Nulos (null). Estos se utilizan para comprobar si a una variable

se le ha asignado un valor o no. Null representa un valor nulo para cualquier tipo de variable; por el contrario, una variable que no ha sido inicializada tiene un valor undefined. VARIABLES DE CADENA Una variable de cadena es aquella que contiene texto. Las cadenas de texto en JavaScript se delimitan mediante comillas dobles o simples y pueden contener cualquier tipo de carcter. Tambin pueden tener un valor nulo. Ejemplo: var pais=Espaa; var entrada_codigo; entrada_codigo=79201957; var valor= ; Las comillas simples sern utilizadas dentro de fragmentos de cdigo delimitados por comillas dobles o viceversa. Ejemplo: document.write(Que quiere decir la palabra nuncupatorio ) alert(Pulsa la tecla amigo )

JavaScript __________________________________________________________________________________


Hay una serie de caracteres que permiten representar funciones especiales, como podra ser un salto de lnea en un texto o, por ejemplo, las comillas. A continuacin se presenta una lista:

\b carcter anterior \f salto de pgina \n salto de lnea \r retorno de carro \t tabulador \\ carcter \ comilla simple \ comilla doble

Ejemplo de Cadena de texto var cadena1="Esto es una cadena de texto que no utiliza ningun caracter especial"; var cadena2="Esto es una cadena \nde texto que si utiliza \ncaracateres especiales"; alert (cadena1); alert (cadena2);

VARIABLES NUMRICAS Las variables numricas son aquellas que contienen nmeros enteros o de coma flotante. Enteros

JavaScript __________________________________________________________________________________


JavaScript puede utilizar tres bases distintas para nmeros enteros: la decimal (base 10), la hexadecimal (base 16) y la octal (base 8). Por defecto el sistema es el decimal. var numero; numero = 100; numero = -1000; Si queremos especificar un nmero en base octal deberemos anteponer un cero 0 al nmero. Recordemos que los nmeros en base octal solo pueden contener los dgitos del 0 al 7. var numero_octal; numero_octal = 03254; numero_octal = 02; Para un valor hexadecimal deberemos anteponer al nmero el prefijo 0x. Los nmeros en hexadecimal incluyen los dgitos del 0 al 9 y las letras comprendidas entre la A y la F ambas inclusive. var numero_hex; numero_hex = 0xff; numero_hex = 0x12f; Coma flotante Un valor de coma flotante se compone de un valor entero seguido de un punto y de una fraccin decimal. El exponente se indica mediante una e o E seguida por un entero positivo o negativo. var numero_coma_flotante; numero_coma_flotante=10.236; numero_coma_flotante=43.433e+2; numero_coma_flotante= -56.25; VARIABLES BOOLEANAS Las variables booleanas o lgicas se especifican mediante los valores verdadero (true) o falso (false). var estoy_contento; estoy_contento=false; estoy_contento=true; La utilizacin de tipos booleanos es de suma importancia cuando se quieren comparar datos o tomar decisiones.

JavaScript __________________________________________________________________________________


LOCALIZACIN DE LAS VARIABLES Las variables pueden ser globales y locales segn el lugar en que se hayan definido. Las primeras pueden usarse en cualquier parte del cdigo, mientras que las segundas slo pueden hacerlo dentro de la funcin que las define. Ejemplo: //Definicion de variable global var variable1="Esta cadena de texto se ha definido FUERA de una funcion. Es global"; //Definicion de una variable local function ejemplo() { var variable2="Esta cadena de texto se ha definido DENTRO de una funcion. Es local"; document.write(variable2); } //Impresion en pantalla de la variable global document.write(variable1+""); //Impresion en pantalla de la variable local ejemplo() Si se intenta utilizar una variable local en un mbito global, JavaScript dar un mensaje de error diciendo que la variable no est definida. PALABRAS RESERVADAS abstract boolean break byte case match char class const continue default do doubl else extend false final finally float for function goto int implements input in instanceof interface long native new null package private protected public return short static super switch synchronized this throw throws transient true try var val while with

JavaScript __________________________________________________________________________________


Los operadores 4


Al finalizar la unidad el participante comprender el uso de los operadores en JavaScript

JavaScript __________________________________________________________________________________


CAPTULO 4 LOS OPERADORES Los operadores permiten combinar diferentes valores en una expresin. TIPOS DE OPERADORES Los operadores de JavaScript pueden dividirse en varios grupos. Su clasificacin es meramente funcional y se basa en la operacin que realiza cada operacin. Los grupos son:

Operadores aritmticos Operadores lgicos Operadores de comparacin Operadores condicionales Operadores bit a bit Operadores de asignacin

OPERADORES ARITMTICOS Los operadores aritmticos son los encargados de realizar las operaciones bsicas como sumar, restar, multiplicar y dividir.

Suma (+) Resta (-) Multiplicacin (*) Divisin (/) Mdulo (%). Resto de la divisin. Incremento, Preincremento, Posincremento (++) Decremento, Predecremento, Posdecremento (--) Negacin (!)

Ejemplo: var valor1, valor2, valor3; var suma, resta, multiplicacion, division, resto_division, varios;

JavaScript __________________________________________________________________________________


valor1=50; valor2=10; valor3=20; suma=valor1+valor2; resta=valor1-valor2; multiplicacion=valor1*valor2; division=valor1/valor2; resto_division=valor1%valor2 varios=(valor1+valor3)*valor2; document.write("El resultado de la suma es"+suma+""); document.write("El resultado de la resta es"+resta+""); document.write("El resultado de la multiplicacion es"+multiplicacion+""); document.write("El resultado de la division es"+division+""); document.write("El resto de la division es"+resto_division+""); document.write("El resultado de la variable varios es"+varios+""); Las variables valor1, valor2, valor3 son las encargadas de contener los nmeros con los que se van a realizar las operaciones aritmticas bsicas. Los resultados de dichas operaciones aritmticas bsicas. Los resultados de dichas operaciones se guardan en una variable a la que se le ha dado el mismo nombre que el operador utilizado. As pues, la variable que contiene el resultado de sumar dos nmeros se llama suma, y el resultado de la sustraccin se almacena en resta y as sucesivamente. Otro tipo de operadores aritmticos son los incrementales o decrementales, que se aplican antes o despus del operando. variable++ //Devuelve el valor de variable y despus incrementa su valor en uno. ++variable //Aumenta el valor de variable en uno y despus devuelve su valor. variable -- //Devuelve en valor de variable y despus disminuye su valor en uno. -- variable //Disminuye el valor de variable en uno y despus devuelve su valor. Veamos la eficacia de este tipo de operadores: pesos=pesos+1; //Aumenta el valor de pesos en 1 pesos++ //Aumenta el valor de pesos en 1 //El ltimo operador aritmtico es la negacin. numero+=100 numero= -numero OPERADORES LGICOS

JavaScript __________________________________________________________________________________


Los operadores lgicos o booleanos se emplean para que un programa tome una decisin en funcin de un clculo lgico. Los valores que se obtienen son true o false. Los operadores son los siguientes:

&& Suma lgica (Y o And). Este operador devuelve un valor true cuando las dos condiciones comparadas se cumplen. En el supuesto de que una de ellas sea false, el resultado ser siempre false.

|| Producto lgico (O u Or). Este operador devuelve true siempre que una de las dos condiciones sea verdadera. En caso contrario devuelve false.

! Negacin (No o Not). Este operador devuelve siempre el valor contrario, es decir, si la condicin o variable es true devuelve false y viceversa.

La verdadera utilidad de estos operadores se ve al trabajar con estructuras condicionales. A

continuacin ver un resumen con todos los operadores lgicos.

true && true devuelve true true && false devuelve false false && false devuelve false

true || true devuelve true true || false devuelve true false || false devuelve false

OPERADORES DE COMPARACIN Los operadores de comparacin son similares a los lgicos, solo que estos no tiene porque ser booleanos. Son los clsicos mayor que, menor que. Operadores disponibles:

== Devuelve true si los dos operandos son iguales. != Devuelve true si los dos operandos son diferentes. > Devuelve true si el operando de la izquierda es mayor que el de la derecha < Devuelve true si el operando de la izquierda es menor que el de la derecha. >= Devuelve true si el operando de la izquierda es mayor o igual que el de la derecha.

JavaScript __________________________________________________________________________________


OPERADORES CONDICIONALES Un operador condicional devuelve un valor determinado en funcin del resultado obtenido al evaluar una condicin. (condicin)? valor1 : valor2 Si la condicin es verdadera se devuelve valor1 (verdadero). En caso contrario valor2 (falso). Ejemplo: (nombre==Juan) ? Me llamo Juan:Tu no eres Juan; Si la variable nombre es Juan, el resultado Me llamo Juan. En caso contrario el resultado es Tu no eres Juan. OPERADORES DE ASIGNACIN Un operador de asignacin se utiliza para asignar un valor a una variable. Veamos cules son, y su sintaxis.

+= valor1 += valor2 valor1 = valor1 + valor2 -= valor1 -= valor2 valor1 = valor1 valor2 *= valor1 *= valor2 valor1 = valor1 * valor2 /= valor1 /= valor2 valor1 = valor1 / valor2 %= valor1 %= valor2 valor1 = valor1 % valor2

TABLA DE OPERADORES Se relacionan a continuacin los operadores soportados por JavaScript, as como un pequeo ejemplo de utilizacin. Tipo Operador Cdigo ejemplo Descripcin Aritmticos + valor1 + valor2 Suma - valor1 valor2 Resta * valor1 * valor2 Multiplicacin / valor1 / valor2 Divisin % Valor1 % valor2 Resto divisin ++ ++ valor1 Preincremento ++ valor1 ++ Posincremento

JavaScript __________________________________________________________________________________


-- -- valor1 Predecremento -- valor1 -- Posdecremento - - valor1 Negacin Lgicos && valor1 && valor2 AND lgico || valor1 || valor2 OR lgico ! ! valor1 NOT lgico Comparacin == valor1 == valor2 Igualdad ! = valor1 != valor2 Distinto de < valor1 < valor2 Menor que = valor2 Mayor que >= valor1 >= valor2 Mayor o igual que Bit a bit & valor1 & valor2 AND de bits | valor1 | valor2 OR de bits ^ valor1 ^ valor2 XOR de bits >> valor1 >> valor2 Shift a la derecha > valor1 >>> valor2 Shift sin signo Condicionales ?: (condicin)?

valor1 : valor2 Condicional

Asignacin += valor1 += valor2 valor1=valor1+valor2 -= valor1 -= valor2 valor1=valor1-valor2 *= valor1 *= valor2 valor1=valor1*valor2 /= valor1 /= valor2 valor1=valor1/valor2

%= valor1 %= valor2 valor1=valor1%valor2

EL OPERADOR typeof El operador typeof devuelve una cadena que describe el tipo de operando. As pues, podremos saber si el operando es una cadena, una variable, mtodo, etc. Su funcionamiento es sencillo, basta con escribir a continuacin de typeof la variable o elemento. var variable=Pepe; var numero=1; var fecha=new Date(); document.write(typeof variable + ); document.write(typeof numero + ); document.write(typeof fecha + );

JavaScript __________________________________________________________________________________


El resultado es: variable = string numero = number fecha = object

JavaScript __________________________________________________________________________________


Los operadores 4


Al finalizar la unidad el participante comprender el uso de los operadores en JavaScript

JavaScript __________________________________________________________________________________


CAPTULO 4 LOS OPERADORES Los operadores permiten combinar diferentes valores en una expresin. TIPOS DE OPERADORES Los operadores de JavaScript pueden dividirse en varios grupos. Su clasificacin es meramente funcional y se basa en la operacin que realiza cada operacin. Los grupos son:

Operadores aritmticos Operadores lgicos Operadores de comparacin Operadores condicionales Operadores bit a bit Operadores de asignacin

OPERADORES ARITMTICOS Los operadores aritmticos son los encargados de realizar las operaciones bsicas como sumar, restar, multiplicar y dividir.

Suma (+) Resta (-) Multiplicacin (*) Divisin (/) Mdulo (%). Resto de la divisin. Incremento, Preincremento, Posincremento (++) Decremento, Predecremento, Posdecremento (--) Negacin (!)

Ejemplo: var valor1, valor2, valor3; var suma, resta, multiplicacion, division, resto_division, varios;

JavaScript __________________________________________________________________________________


valor1=50; valor2=10; valor3=20; suma=valor1+valor2; resta=valor1-valor2; multiplicacion=valor1*valor2; division=valor1/valor2; resto_division=valor1%valor2 varios=(valor1+valor3)*valor2; document.write("El resultado de la suma es"+suma+""); document.write("El resultado de la resta es"+resta+""); document.write("El resultado de la multiplicacion es"+multiplicacion+""); document.write("El resultado de la division es"+division+""); document.write("El resto de la division es"+resto_division+""); document.write("El resultado de la variable varios es"+varios+""); Las variables valor1, valor2, valor3 son las encargadas de contener los nmeros con los que se van a realizar las operaciones aritmticas bsicas. Los resultados de dichas operaciones aritmticas bsicas. Los resultados de dichas operaciones se guardan en una variable a la que se le ha dado el mismo nombre que el operador utilizado. As pues, la variable que contiene el resultado de sumar dos nmeros se llama suma, y el resultado de la sustraccin se almacena en resta y as sucesivamente. Otro tipo de operadores aritmticos son los incrementales o decrementales, que se aplican antes o despus del operando. variable++ //Devuelve el valor de variable y despus incrementa su valor en uno. ++variable //Aumenta el valor de variable en uno y despus devuelve su valor. variable -- //Devuelve en valor de variable y despus disminuye su valor en uno. -- variable //Disminuye el valor de variable en uno y despus devuelve su valor. Veamos la eficacia de este tipo de operadores: pesos=pesos+1; //Aumenta el valor de pesos en 1 pesos++ //Aumenta el valor de pesos en 1 //El ltimo operador aritmtico es la negacin. numero+=100 numero= -numero OPERADORES LGICOS

JavaScript __________________________________________________________________________________


Los operadores lgicos o booleanos se emplean para que un programa tome una decisin en funcin de un clculo lgico. Los valores que se obtienen son true o false. Los operadores son los siguientes:

&& Suma lgica (Y o And). Este operador devuelve un valor true cuando las dos condiciones comparadas se cumplen. En el supuesto de que una de ellas sea false, el resultado ser siempre false.

|| Producto lgico (O u Or). Este operador devuelve true siempre que una de las dos condiciones sea verdadera. En caso contrario devuelve false.

! Negacin (No o Not). Este operador devuelve siempre el valor contrario, es decir, si la condicin o variable es true devuelve false y viceversa.

La verdadera utilidad de estos operadores se ve al trabajar con estructuras condicionales. A

continuacin ver un resumen con todos los operadores lgicos.

true && true devuelve true true && false devuelve false false && false devuelve false

true || true devuelve true true || false devuelve true false || false devuelve false

OPERADORES DE COMPARACIN Los operadores de comparacin son similares a los lgicos, solo que estos no tiene porque ser booleanos. Son los clsicos mayor que, menor que. Operadores disponibles:

== Devuelve true si los dos operandos son iguales. != Devuelve true si los dos operandos son diferentes. > Devuelve true si el operando de la izquierda es mayor que el de la derecha < Devuelve true si el operando de la izquierda es menor que el de la derecha. >= Devuelve true si el operando de la izquierda es mayor o igual que el de la derecha.

JavaScript __________________________________________________________________________________


OPERADORES CONDICIONALES Un operador condicional devuelve un valor determinado en funcin del resultado obtenido al evaluar una condicin. (condicin)? valor1 : valor2 Si la condicin es verdadera se devuelve valor1 (verdadero). En caso contrario valor2 (falso). Ejemplo: (nombre==Juan) ? Me llamo Juan:Tu no eres Juan; Si la variable nombre es Juan, el resultado Me llamo Juan. En caso contrario el resultado es Tu no eres Juan. OPERADORES DE ASIGNACIN Un operador de asignacin se utiliza para asignar un valor a una variable. Veamos cules son, y su sintaxis.

+= valor1 += valor2 valor1 = valor1 + valor2 -= valor1 -= valor2 valor1 = valor1 valor2 *= valor1 *= valor2 valor1 = valor1 * valor2 /= valor1 /= valor2 valor1 = valor1 / valor2 %= valor1 %= valor2 valor1 = valor1 % valor2

TABLA DE OPERADORES Se relacionan a continuacin los operadores soportados por JavaScript, as como un pequeo ejemplo de utilizacin. Tipo Operador Cdigo ejemplo Descripcin Aritmticos + valor1 + valor2 Suma - valor1 valor2 Resta * valor1 * valor2 Multiplicacin / valor1 / valor2 Divisin % Valor1 % valor2 Resto divisin ++ ++ valor1 Preincremento ++ valor1 ++ Posincremento -- -- valor1 Predecremento

JavaScript __________________________________________________________________________________


-- valor1 -- Posdecremento - - valor1 Negacin Lgicos && valor1 && valor2 AND lgico || valor1 || valor2 OR lgico ! ! valor1 NOT lgico Comparacin == valor1 == valor2 Igualdad ! = valor1 != valor2 Distinto de < valor1 < valor2 Menor que = valor2 Mayor que >= valor1 >= valor2 Mayor o igual que Bit a bit & valor1 & valor2 AND de bits | valor1 | valor2 OR de bits ^ valor1 ^ valor2 XOR de bits >> valor1 >> valor2 Shift a la derecha > valor1 >>> valor2 Shift sin signo Condicionales ?: (condicin)?

valor1 : valor2 Condicional

Asignacin += valor1 += valor2 valor1=valor1+valor2 -= valor1 -= valor2 valor1=valor1-valor2 *= valor1 *= valor2 valor1=valor1*valor2 /= valor1 /= valor2 valor1=valor1/valor2

%= valor1 %= valor2 valor1=valor1%valor2

EL OPERADOR typeof El operador typeof devuelve una cadena que describe el tipo de operando. As pues, podremos saber si el operando es una cadena, una variable, mtodo, etc. Su funcionamiento es sencillo, basta con escribir a continuacin de typeof la variable o elemento. var variable=Pepe; var numero=1; var fecha=new Date(); document.write(typeof variable + ); document.write(typeof numero + ); document.write(typeof fecha + );

JavaScript __________________________________________________________________________________


El resultado es: variable = string numero = number fecha = object

JavaScript __________________________________________________________________________________


Objetos, funciones y

mtodos

6


Al finalizar la unidad el participante comprender el uso de los objetos, las funciones y los mtodos para realizar pginas interactivas.

JavaScript __________________________________________________________________________________


CAPTULO 6 OBJETOS, FUNCIONES Y MTODOS Los objetos, las funciones y los mtodos van a permitir realizar tareas mucho ms impactantes de las que realmente se han visto hasta ahora. LOS OBJETOS Un objeto es una agrupacin de variables denominadas propiedades que realizan operaciones con las variables propias del mismo, es decir, un conjunto de datos definidos por el usuario junto con las operaciones que actan sobre ellos. Por ejemplo, las propiedades de un computador, seran su procesador, el disco duro, memoria, etc., y adems con l podemos jugar, estudiar, dibujar, por ejemplo. Propiedades de un objeto Un objeto en JavaScript tiene una serie de propiedades asociadas a l. Para acceder a dichas propiedades utilizaremos la notacin punto.

Objeto.propiedad Ejemplo: Imaginemos un objeto llamado computadora, con las propiedades marca, cpu y memoria. computadora.marca=HP; computadora.cpu=pentium150; computadora.memoria=64mb; LAS FUNCIONES Las funciones son uno de los pilares en los que se basa JavaScript. Una funcin es un conjunto de sentencias JavaScript que realizan alguna tarea especfica. Las partes que definen una funcin son:

El nombre de la funcin. La lista de argumentos de la funcin, encerrados entre parntesis y separados por comas(,) Las sentencias en JavaScript que definen la funcin, encerradas entre llaves({,});

JavaScript __________________________________________________________________________________


Una funcin puede incluir llamadas a otras funciones definidas en la aplicacin, pero nicamente de la pgina actual. Una opcin interesante es definir las funciones en el encabezado del documento de manera que, cuando se inicialice la pgina, las funciones se definan antes de cualquier accin del usuario. La sintaxis de definicin de una funcin sera: function nombreFuncion(parametro1, parametro2){ Instrucciones } La definicin de una funcin no implica su ejecucin; sta slo se ejecutar cuando se le realice la llamada pertinente. Ejemplo: Se define una funcin llamada saludo que ser posteriormente llamada para mostrar la cadena de texto especificada. Ejemplo de funciones function saludo() { document.write("Hola amigos, esto es un saludo"); } saludo(); Para que una funcin devuelva el resultado de una serie de operaciones procedentes de la misma funcin, utilizaremos la instruccin return. Ejemplo de funciones function mitad(valor) { return valor/2;

JavaScript __________________________________________________________________________________


} document.write("La mitad de 100 es"+mitad(100));

Argumentos de la funcin Los argumentos de una funcin permiten que el resultado vare segn el valor indicado de la misma. Estos pueden ser variables, nmeros u objetos. En el siguiente script, podr ver el mtodo de definicin de los argumentos de la funcin y posteriormente, el modo de llamar a cada argumento. Ejemplo de funciones function Mensaje(Respuesta) { if(Respuesta==0) alert("La respuesta es correcta"); if(Respuesta==2) alert("La respuesta es incorrecta. Repasa la leccion 10"); if(Respuesta==1) alert("Vaya disparate. Debes repetir curso"); if(Respuesta>=3) alert("Respuesta fuera de rango"); } Mensaje(0); Mensaje(1); Mensaje(2); Mensaje(5);

JavaScript __________________________________________________________________________________


LOS MTODOS Un mtodo es una funcin asociada a un objeto y particular a los objetos del tipo que las define. As pues, un mtodo es una accin que ejecutamos sobre los datos de un objeto. Los mtodos se definen en el mismo sitio que las funciones y de la misma manera, asocindolas posteriormente a un objeto ya existente. Sintaxis para definir un mtodo: Objeto.nombreMetodo=nombreFuncion Y para hacer llamada a mtodo: Objeto.nombreMetodo(parametro1,parametro2..) Creacin de Objetos JavaScript dispone de una serie de objetos predefinidos, pero tambin podemos crear nuestro propios objetos segn sea necesario. Los pasos a seguir para definir un objeto nuevo son dos:

Definir un tipo de objeto a travs de una funcin Crear una instancia del objeto usando la palabra new.

Para definir un tipo de objeto, deberemos especificar el nombre de la funcin, sus propiedades y mtodos.

function nombreTipoObjeto(propiedad1,propiedad2,) { this.propiedad1=propiedad1 this.propiedad2=propiedad2 } La palabra reservada this se utiliza para hacer referencia al objeto actual. La usaremos generalmente cuando pasamos objetos como parmetros a funciones y dentro de stas para acceder a las propiedades de los objetos. Ejemplo: Definamos una funcin llamada Computador con tres propiedades: marca, cpu y memoria.

JavaScript __________________________________________________________________________________


function Computadora(marca,cpu,memoria) { this.marca=marca; this.cpu=cpu; this.memoria=memoria; } Crearemos un objeto para ese tipo, al que llamaremos miComputadora, y le asignaremos valores especficos a sus propiedades. miComputadora = new Computadora(HP,Pentium150,64MB) Recuerde que pueden crearse tantas instancias de un tipo como sean necesarias. miComputadora=new Computadora(HP,Pentium150,64Mb) miComputadora_Dos=new Computadora(Philips,Pentium200,64Mb) miComputadora_Tres=new Computadora(Acer,Pentium133,164Mb) Ahora podemos mostrar en pantalla las propiedades de los objetos definidos. Ejemplo de creacion de Objetos function Computador(marca,cpu,memoria) { this.marca=marca; this.cpu=cpu; this.memoria=memoria; } miComputador=new Computador("HP","Pentium150","64Mb") miComputador_Dos=new Computador("Philips","Pentium200","64Mb") miComputador_Tres=new Computador("Acer","Pentium133","16Mb") var mensaje; mensaje="miComputador\nmarca:"+miComputador.marca+"\n" +"cpu:"+miComputador.cpu+"\n" +"memoria:"+miComputador.memoria+"\n"; alert(mensaje); mensaje="miComputador_Dos\nmarca:"+miComputador_Dos.marca+"\n" +"cpu:"+miComputador_Dos.cpu+"\n"

JavaScript __________________________________________________________________________________


+"memoria:"+miComputador_Dos.memoria+"\n"; alert(mensaje); mensaje="miComputador_Tres\nmarca:"+miComputador_Tres.marca+"\n" +"cpu:"+miComputador_Tres.cpu+"\n" +"memoria:"+miComputador_Tres.memoria+"\n"; alert(mensaje);

JavaScript __________________________________________________________________________________


Objetos y funciones

predefinidas

7


Al finalizar la unidad el participante comprender el uso de los objetos y funciones predefinidas es JavaScript para realizar pginas interactivas.

JavaScript __________________________________________________________________________________


CAPTULO 7 OBJETOS Y FUNCIONES PREDEFINIDAS EL OBJETO String ( ) El objeto String ofrece distintas formas de manejar cadenas de texto. Siempre que se asigne un String una variable o propiedad, se crea un objeto de tipo String. En este caso, al definir una variable con una cadena de texto ya estamos utilizando un objeto String, es decir, no ser necesaria si declaracin. var cadenaTexto; cadenaTexto=Aqu esta la cadena de texto; Los objetos de tipo String disponen de una serie de mtodos que permiten modificar y devolver el valor de la cadena de texto. Los mtodos disponibles para este objeto son:

anchor(nombre) Crea un enlace big() Mestra la cadena de caracteres con una fuente grande. blink() La cadena se representa intermitentemente. bold() Muestra la cadena en negrita. charAt() Muestra el carcter situado en la posicin n de la cadena. fixed() Muestra la cadena con una fuente no proporcional. fontcolor(color) Determina el color de la cadena. fontsize(n) Muestra la cadena con una tamao n. ste puede oscilar entre 1 y 7. indexOf(smallSting,start) Facilita la posicin de un fragmento de la cadena a partir de una

posicin determinada. italics() Muestra la cadena en cursiva. lastIndexOf() Da como resultado la ltima posicin de un carcter. link(URL) Convierte la cadena en un vnculo. small() Muestra la cadena con una fuente pequea. strike() Muestra la cadena subrayada. sub() Muestra la cadena en formato subndice. substring(x,y) Muestra un fragmento de cadena que empieza en posicin x y termina en la

posicin y. sup() Muestra la cadena en formato superndice. toLowerCase() Muestra toda la cadena en minsculas. toUpperCase() Muestra toda la cadena en maysculas.

JavaScript __________________________________________________________________________________


Ejemplo en que se utilizan algunos de estos mtodos: Ejemplo del objeto String var cadena; cadena="Bienvenidos al apasionante mundo de JavaScript"; document.write(cadena+""); document.write(cadena.bold()+""); document.write(cadena.big()+""); document.write(cadena.toUpperCase()+""); document.write(cadena.small()+""); document.write(cadena.italics()+"");

Figura 7.1. Formatos de texto conseguidas utilizando el objeto String()

Los objetos String() disponen de las propiedades length, que determina el nmero de caracteres de la cadena, y prototype, que permite aadir nuevas propiedades y mtodos (ms adelante sern tratadas).

JavaScript __________________________________________________________________________________


EL OBJETO Math ( ) El objeto Math tiene propiedades y mtodos que representan constantes y funciones matemticas. Las propiedades de este objeto son las siguientes:

E Constante de Euler o nmero e. LN2 Logaritmo de 2. LN10 Logaritmo de 10. LOG2E Logaritmo de e en base 2. LOG10E Logaritmo de e en base 10. PI Nmero PI. SQRT1_2 Raz cuadrada de 0.5. SQRT2 Raz cuadrada de 2.

Ejemplo: Ejemplo del objeto Math( ) var valorPi; valorPI=Math.PI; document.write("La variable Pi tiene como valor:"+valorPI);

A continuacin, relacionaremos los mtodos, que son los elementos que nos permiten realizar operaciones.

abs(n) Calcula el valor absoluto de n. acos(n) Calcula el arcocoseno de n. asin(n) Calcula el arcoseno de n. atan(n) Calcula el arcotangente de n. ceil(n) Redondea un nmero hacia el superior. cos(n) Calcula el coseno de un nmero n. exp(n) Calcula un exponencial del nmero e. floor(n) Redondea un nmero hacia el inferior. log(n) Calcula el logaritmo de un nmero n. max(x,y) Devuelve x o y, en funcin de cul de los dos es mayor.

JavaScript __________________________________________________________________________________


min(x,y) Devuelve x o y, en funcin de cul de los dos es menor. pow(x,y) Calcula la potencia de dos nmeros. random() Genera un nmero entero ms cercano. round(n) Redondea al nmero entero ms cercano. sin(n) Calcula el seno de un nmero n. sqrt(n) Calcula la raz cuadrada de un nmero n. tan(n) Calcula la tangente de un nmero n.

Es recomendable utilizar la sentencia with cuando se desean realizar varios clculos matemticos

seguidos para no tener que poner Math en cada referencia. Ejemplo del objeto Math var valorPi; valorPI=Math.PI; document.write("La varibale Pi tiene como valor."+valorPI+""); valorPI=Math.ceil(valorPI); document.write("La variable Pi redondeada mediante ceil tiene como valor:"+valorPI); EL OBJETO Date( ) El objeto Date permite trabajar con horas y fechas. JavaScript maneja las fechas en milisegundos desde 1/1/1970 a las 00:00:00 horas. Por lo que no se puede trabajar con fechas anteriores. En la representacin de los meses para valores enteros JavaScript comienza a contar desde 0, por lo tanto, enero ser el mes 0 y diciembre el mes11. Los das de la semana se cuentan empezando por 0 para el domingo, 1 el lunes y as sucesivamente. Para crear una variable de fecha se debe establecer un nombre para la instancia del objeto y su respectivos parmetros. Los formatos pueden ser los siguientes: Crea un objeto con la fecha y hora actual Fecha=new Date() Crea un objeto con la fecha y la hora en una variable de cadena

JavaScript __________________________________________________________________________________


Fecha=new Date(month day, year[hours:minutes:seconds]) Crea un objeto con la fecha en valores enteros Fecha=new Date(year, month, day[,hours,minutes,seconds]) El objeto Date posee muchos mtodos para manejar fechas y horas, as pues, veamos dichos mtodos:

getDate() Devuelve el da del mes actual. getDay() Devuelve el da de la semana actual. getHours() Devuelve la hora actual. getMinutes() Devuelve los minutos actuales. getMonth() Devuelve el mes actual. getSecond() Devuelve los segundos actuales. getTime() Devuelve la hora actual. getTimeZoneoffset() Devuelve la diferencia en minutos entre la hora actual y la GTM. getYear() Devuelve el ao actual. parse(datestring) Devuelve el tiempo pasado entre las 00:00:00 horas del 1 de enero de 1970

con respecto a la fecha especificada en datestring. setDate(valor) Establece el da del mes. setHours(valor) Establece la hora actual. setMinutes(valor) Establece los minutos actuales. setMonth(valor) Establece el mes actual. setSeconds(valor) Establece los segundos actuales. setTime(valor) Establece el valor del tiempo actual. setYear(valor) Establece el ao actual. toGMTString() Devuelve el valor del objeto actual en GMT como una cadena. toLocateString() Devuelve el valor del objeto actual como una cadena. UTC() Devuelve el nmero de milisegundos transcurridos desde las 00:00:00 del da 1 de

enero de 1970.

Los mtodos set los utilizaremos para fijar la fecha y la hora, los mtodos get para obtener fechas y horas, to para obtener dichos valores como cadenas y parse para convertir cadenas que tengan fechas y horas. Ejemplo que imprime el da actual de la semana. Ejemplo del objeto Date fecha=new Date; dia=fecha.getDay(); if(dia==0){

JavaScript __________________________________________________________________________________


document.write("Hoy es Domingo"); } if(dia==1){ document.write("Hoy es Lunes"); } if(dia==2){ document.write("Hoy es Martes"); } if(dia==3){ document.write("Hoy es Miercoles"); } if(dia==4){ document.write("Hoy es Jueves"); } if(dia==5){ document.write("Hoy es Viernes"); } if(dia==6){ document.write("Hoy es Sabado"); } EL OBJETO Array() Una tcnica importante de programacin es el uso de los arrays, arreglos o vectores. Una matriz es un conjunto de datos de un mismo tipo identificados por un ndice. Desarrollaremos un vector de ejemplo. Primero deberemos definir la matriz, para ello utilizaremos el objeto Array(). Despus se debern ir incluyendo los elementos de esa matriz, los cuales estarn identificados mediante un nmero al que llamaremos ndice. OpenAustralia=new Array(); OpenAustralia[0]=Sergi Bruguera; OpenAustralia[1]=Alex Corretja; OpenAustralia[2]=Felix Mantilla; OpenAustralia[3]=Peter Sampras; OpenAustralia[4]=Gustavo Kuerten; Para arreglos mayores hay una propiedad del objeto Array() llamada length, que facilita el nmero de elementos disponibles en la matriz. document.write(Tengo+OpenAustralia.length+elementos en mi matriz.);

JavaScript __________________________________________________________________________________


El objeto Array() tambin tiene tres mtodos:

join() Mtodo encargado de agrupar todos los elementos en una cadena de caracteres, separados por comas.

reverse() Este mtodo invierte el orden de colocacin de los elementos. El primero pasa a ser el ltimo y viceversa.

sort() Este mtodo devuelve de manera ordenada los elementos de la matriz.

JavaScript no permite eliminar de manera directa elementos de una matriz, sin embargo, se le pu

clase 660 - libro introducción a javascript

Documents