HTML - CSS JAVASCRIPT

Autor: Daniel Vega E-mail: daniel.vega81@gmail.com Versin: 20130215

Autor: Daniel Vega

Pgina 1

HTML .................................................................................................................................................................... 4 Estructura y etiquetas bsicas ........................................................................................................................... 4 DOCTYPE ......................................................................................................................................................... 6 Doctype XHTML 1.0 strict .............................................................................................................................. 6 Doctype XHTML 1.0 transitional..................................................................................................................... 6 Doctype XHTML 1.0 frameset ........................................................................................................................ 6 Doctype HTML 4.01 strict .............................................................................................................................. 6 Doctype HTML 4.01 transitional ..................................................................................................................... 6 Doctype HTML 4.01 frameset ........................................................................................................................ 6 Presentacin del texto ....................................................................................................................................... 7 Dar formato al texto ........................................................................................................................................... 7 Listas................................................................................................................................................................. 8 Listas ordenadas ........................................................................................................................................... 8 Listas no ordenadas ...................................................................................................................................... 8 Lista de definiciones ...................................................................................................................................... 8 Hipervnculos..................................................................................................................................................... 8 Valores especiales de target .......................................................................................................................... 8 Hipervnculos dentro de una pgina (Anclas) ................................................................................................. 9 Direcciones relativas a una base. .................................................................................................................. 9 Imgenes y mapas ............................................................................................................................................ 9 Tablas ............................................................................................................................................................. 10 Propiedades para tr, td y th.......................................................................................................................... 10 Agrupar filas y columnas.............................................................................................................................. 10 Marcos (Frames) ............................................................................................................................................. 14 Atributos de frame: ...................................................................................................................................... 14 Marcos anidados ......................................................................................................................................... 14 Marcos en lnea (iframe) .................................................................................................................................. 14 Formularios ..................................................................................................................................................... 15 Atributos .......................................................................................................................................................... 15 Elementos del formulario: ................................................................................................................................ 16 Otros elementos .............................................................................................................................................. 17 CSS ..................................................................................................................................................................... 18 Ventajas .......................................................................................................................................................... 18 Formas de aplicacin de estilos ....................................................................................................................... 18 Selectores ....................................................................................................................................................... 19 Pseudo-elementos ........................................................................................................................................... 19 Para ampliar los selectores y filtrar ms la bsqueda de elementos. ................................................................ 19 pseudo-elementos y CSS clases...................................................................................................................... 20 Multiples pseudo-elementos ............................................................................................................................ 20 Tabla de compatibilidad de CSS con todos los navegadores ............................................................................ 21 Formato de links .............................................................................................................................................. 22 Estilo segn el lenguaje ................................................................................................................................... 22 Propiedades y valores ..................................................................................................................................... 22 El modelo de caja ............................................................................................................................................ 22 Bloques y capas (layers) .................................................................................................................................. 24 Cajas flotantes................................................................................................................................................. 24 Propiedades para el trabajo con texto: ............................................................................................................. 24 JavaScript ............................................................................................................................................................ 25 Variables ......................................................................................................................................................... 25 Caracteres especiales ..................................................................................................................................... 26 Operadores ..................................................................................................................................................... 29 Operadores aritmticos ............................................................................................................................... 29 Operadores de comparacin........................................................................................................................ 29 Operadores lgicos ..................................................................................................................................... 29 Operadores de asignacin ........................................................................................................................... 30 Operador ternario ........................................................................................................................................ 30 Funciones........................................................................................................................................................ 30 Estructuras de control ...................................................................................................................................... 30 Estructuras de control de objetos ..................................................................................................................... 32 Objetos............................................................................................................................................................ 32 Creacin de objetos..................................................................................................................................... 32 Objetos predefinidos ........................................................................................................................................ 34 Objeto Array ................................................................................................................................................ 34 Objeto Date ................................................................................................................................................. 34
Autor: Daniel Vega Pgina 2

Objeto Math................................................................................................................................................. 35 Objeto String ............................................................................................................................................... 35 Los objetos del navegador ............................................................................................................................... 37 Modelo de objetos del navegador segn JavaScript ......................................................................................... 37 El objeto Navigator ...................................................................................................................................... 38 El objeto Windows ....................................................................................................................................... 38 El objeto history ........................................................................................................................................... 41 El objeto document ...................................................................................................................................... 41 Los eventos de javascript ............................................................................................................................ 45

Autor: Daniel Vega

Pgina 3

HTML
HyperText Markup Language Lenguaje de marcado de hipertexto donde hipertexto hace referencia a la capacidad de usar los hipervinculos. Una pgina web html es un archivo de texto con extensin .html o .htm. Se compone de etiquetas (tags) que es la unidad bsica del HTML y dan forma a todos los componentes de una pgina. Un tag es una instruccin que, dentro del archivo HTML, se encierra entre parntesis angulares (smbolos menor y mayor). La mayor parte de las etiquetas de HTML estn divididas en etiquetas de apertura y etiquetas de cierre. <etiqueta_apertura></etiqueta_cierre> Existen distintas versiones de HTML disponible, como la 3.2, 4.0 y la 5. Cada una de ellas soporta diversas etiquetas y propiedades. Por eso se debe tener en cuenta a la hora de disear una pgina si queremos que sea cien por cien compatible con todos los navegadores del mercado, ya que algunos usuarios no podrn apreciar la pgina completa. HTTP, el protocolo de comunicacin entre un browser y un servidor web, es state-less, es decir, no mantiene el estado entre una peticin y otra. La conexin se cierra al terminar la transferencia de una pgina, y por ello, en principio, no hay forma directa de relacionar la conexin constante de un usuario ni los valores existentes entre distintas pginas.

Estructura y etiquetas bsicas

La estructura de un archivo HTML se divide en dos partes: el encabezado (llamado HEAD) y el cuerpo (llamado BODY). <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="es"> <head> <title>Titulo de la pgina</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <meta name="description" content="Esta es una pgina de prueba" /> <meta name="author" content="Daniel Vega" /> <meta name="keywords" content="prueba, pagina, html, web, etiquetas" /> <link type="text/css" href="css/cssMain.css" /> </head> <body> <!-Comentario --> </body> </html> La primera lnea indica la definicin del tipo de documento (html) y la versin del lenguaje utilizado (4.01). La etiqueta <meta> tiene usos mltiples: Indica la descripcin, el autor y las palabras clave de la pgina. Estos datos son indexados por los buscadores (Altavista, Google, Yahoo, Bing, etc.) para luego poder encontrar nuestra pgina en caso de que se realice alguna consulta. Tambin se indica el conjunto de caracteres utilizados en la pgina. La etiqueta <link> permite vincular un archivo externo a la pgina. El lenguaje HTML no establece reglas en cuanto a los espacios e interlineados entre instrucciones, por lo que las siguientes expresiones son consideradas iguales: <tag>esto es una prueba</tag> <tag> esto es una prueba </tag>
Autor: Daniel Vega Pgina 4

El encabezado Dentro del HEAD se agrupar toda la informacin relativa a la pgina web que estamos viendo y no el contenido en s. Una gran diferencia entre el encabezado y el cuerpo es que hasta que no se descargue todo el encabezado del servidor, la pgina web no ser mostrada. En cambio, el cuerpo es exhibido a medida que se va descargando del servidor. Esto es til si necesitamos incluir algunos objetos que queremos estar seguros de que estarn descargados antes de que la pgina se dibuje. El cuerpo El cuerpo de un archivo HTML es el que tendr todo el contenido, textual, grfico o multimedia de la pgina web. Existen etiquetas que pueden contener propiedades. Estas propiedades son del estilo clave/valor. O sea, a una propiedad se le asigna un valor y se expresa con la siguiente sintaxis: <tag propiedad="valor" propiedad="valor"> Las comillas que encierran los valores de las propiedades son optativas; o sea, el navegador los reconocer igual, aunque no las utilicemos. Pero, de todas formas, es recomendable siempre incluir las comillas para que sea considerado un documento bien formado o "well-formed".

Autor: Daniel Vega

Pgina 5

DOCTYPE
Cada documento HTML requiere un tipo declaracin. El "DOCTYPE" comienza el documento del HTML y le dice a un Validator qu versin del HTML utilizar en la comprobacin de sintaxis del documento. El DTD especfica las reglas para el lenguaje de marcado.

Doctype XHTML 1.0 strict

Este DTD contiene todos los elementos y atributos HTML, pero no incluye elementos de presentacin o deprecados (como font). Framesets no son permitidos. El marcado debe ser escrito como XML bien formado. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Doctype XHTML 1.0 transitional

Este DTD contiene todos los elementos y atributos HTML, incluyendo elementos de presentacin y deprecados (como font). Framesets no son permitidos. El marcado debe ser escrito como XML bien formado. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Doctype XHTML 1.0 frameset

Este DTD es igual al XHTML 1.0 Transitional, pero se permite el uso de frameset. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Doctype HTML 4.01 strict

Este DTD contiene todos los elementos y atributos HTML, pero no incluye elementos de presentacin o deprecados (como font). Framesets no son permitidos. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Doctype HTML 4.01 transitional

Este DTD contienen todos los elementos y atributos HTML, incluyendo elementos de presentacin y deprecados (como font). Framesets no son permitidos. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Doctype HTML 4.01 frameset

Este DTD es igual al HTML 4.01 Transitional, pero se permite el uso de frameset. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Autor: Daniel Vega

Pgina 6

Presentacin del texto

Una pgina web no siempre se va a ver igual en todos los navegadores de quienes visiten el sitio. Esto se debe a muchos factores, como el navegador usado (IE, firefox, chrome, safari, etc.), las fuentes instaladas, la resolucin de pantalla y el tamao de ventana. Nuestro objetivo es hacer que nuestra pgina se vea lo mejor posible en todos los casos. Para ingresar espacios irrompibles en HTML se usa el cdigo &nbsp; (non breaking space): &aacute; &Oacute; &ntilde; // // //

Dar formato al texto

<h1> a <h6> <p></p> <hr /> <br /> <div></div> <span></span> <b></b> <i></i> <code></code> <pre></pre>   Etiquetas de ttulos de distinta jerarqua. Prrafo Lnea horizontal Salto de lnea (break line) Contenedor o bloque (comportamiento block) Similar a div, solo que no inserta un salto de lnea. (comportamiento inline) Negrita (Se recomienda <strong>) Cursiva (Se recomienda <em>) Cdigo de programacin. El texto que se escriba dentro de las etiquetas se mostrar respetando los espacios y los saltos de lnea tal cual lo escribamos en el archivo de texto. Sub ndice Super ndice

Autor: Daniel Vega

Pgina 7

Listas
Listas ordenadas
Son listas que llevan una numeracin <ol type="a"> <li>Elemento 01</li> <li>Elemento 02</li> <li>Elemento 02</li> </ol> type: a, A, i, I, 1 start: especifica el nmero de orden por donde empezar la lista. Se recomienda usar css: list-style-type Valores: decimal (por defecto), lower-roman, lower-alpha, upper-alpha, etc.

Listas no ordenadas
Son listas con vietas. <ul> <li>Elemento 01</li> <li>Elemento 02</li> <li>Elemento 03</li> </ul> type: circle, square, disc. Se recomienda usar css: list-style-type Valores: square, disc (por defecto), circle, etc.

Lista de definiciones
Es una especie de diccionario o glosario. <dl> <dt>Item 1</dt> <dd>Significado del item 1</dd> <dt>Item 2</dt> <dd>Significado del item 2</dd> </dl>

Hipervnculos
Son links que abren nuevos documentos. <a href="destino" target="ventana">Texto del hipervnculo</a> href="http://www.dominio.com/pag2.html" href="pagina2.html" href="Donwloads/Wallpapers/paisaje02.jpg" href="../../pagina1.html" href="mailto:direccion@servidor.com?subject=tema privado&cc=admin@local.com" <a href="productos.html" target="principal">Productos</a> El atributo target define la ventana o marco de destino en el que se abrir el hipervnculo. Si no se coloca el atributo target, el archivo de destino se abrir por defecto en la misma ventana.

Valores especiales de target

_blank: _self: Se muestra en una nueva ventana. Se muestra en la misma ventana o frame donde est el enlace.
Pgina 8

Autor: Daniel Vega

_parent: _top:

Se muestra en el frameset padre del frame actual. Fuerza a que se muestre usando todo el espacio de la ventana del navegador, destruyendo toda estructura de frames.

Hipervnculos dentro de una pgina (Anclas)

Los vnculos dentro de la misma pgina se usan mucho para el caso de pginas largas con varias secciones. Para utilizarlos es necesario primero definir un punto de destino en alguna parte de la pgina. <a name="seccion01">Seccin Animales</a> <a href="#seccion01">Ir a seccin Animales</a> Forma para ir a otra pgina a una seccin especifica: <a href="vacaciones/historia.html#avion">Seccin aviones</a>

Direcciones relativas a una base.

Si la pgina se encuentra dentro del mismo servidor, no es necesario colocar la direccin completa; se utilizan direcciones relativas. Pero tambin puede darse el caso que muchos de los documentos a los que queremos acceder se encuentren en otro servidor. Entonces, podemos utilizar la etiqueta <base> dentro de <head>. Supongamos que nuestra pgina est alojada en el servidor "www.web.com" y que queremos acceder a los documentos que se encuentran en "www.sitio.com/documentos"; en ese caso, por cada documento que quisiramos obtener, tendramos que escribir href="http://www.sitio.com/documentos/document01.html" Con el uso de la etiqueta <base>, esto se simplifica. <base href="http://www.sitio.com/documentos/" /> <a href="documento1.html">Vea el documento 1</a> <a href="documento2.html">Vea el documento 2</a> En este caso, estaramos accediendo directamente a los documentos de "www.sitio.com".

Imgenes y mapas
<img /> Atributo align alt border height hspace src title vspace width Descripcin Deprecado. Alineacin de la imagen. (baseline, top, middle, bottom, texttop, absmiddle, absbottom, left, right). Texto alternativo en el caso de que la imagen no se muestre por algn problema. Deprecado. Espesor del borde en pixeles. Altura Deprecado. Espacio horizontal en pixeles alrededor de la imagen. Ruta absoluta o relativa de la imagen. Texto que se muestra en forma de tooltip Deprecado. Espacio vertical en pixeles alrededor de la imagen. Ancho

Autor: Daniel Vega

Pgina 9

Tablas
Es una grilla formada por filas y columnas. Se usan para la presentacin ordenada de datos, alineacin y presentacin de contenido. Cada interseccin entre una fila y una columna se denomina celda. Las celdas son los nicos elementos de una tabla que pueden contener objetos, como textos, imgenes, etc. <table class="cssTable"> <caption>Titulo de la tabla</caption> <tr> <th></th> <th></th> </tr> <tr> <td></td> <td></td> </tr> </table> Propiedad align border cellpadding cellspacing rules width Descripcin center, right, left Ancho del borde. Margen de celda; espacio al borde de la misma, respecto al contenido. Distancia entre celdas de la misma tabla. Indica por dnde aparecern los bordes de una tabla (none, groups, rows, cols, all) Ancho

Propiedades para tr, td y th

Propiedad align bgcolor colspan Descripcin Alineacin horizontal (right, left, middle) Color de fondo Especifica el nmero de columnas unificadas por esta celda. El valor "0" indica que se unifican todas las celdas desde esta posicin hasta la ltima columna en la seccin contenedora. Deprecado. Alto Especifica el nmero de filas unificadas por esta celda. El valor "0" significa que se unifican todas las celdas desde esta posicin hasta la ltima fila en la seccin contenedora. Alineacin vertical (bottom, top, middle) Deprecado. Ancho

height rowspan valign width

Agrupar filas y columnas

Este recurso se emplea cuando se desea aplicar el mismo formato a un grupo de varias filas o columnas, segn el caso. Las filas se agrupan mediante una clasificacin: <thead> <tbody> <tfoot> filas de cabecera filas del cuerpo filas del pie

<table> <thead align="center" bgcolor="yellow"> <tr> <td>cabecera</td> </tr> <tr> <td>otra fila</td> </tr> </thead> <tbody align="right" valign="top"> <tr> <td>cuerpo</td>
Autor: Daniel Vega Pgina 10

</tr> <tr> <td>otra fila</td> </tr> </tbody> <tfooter align="center"> <tr> <td>pie</td> </tr> <tr> <td>otra fila</td> </tr> </tfooter> </table> Para agrupar columnas, es preciso hacerlo antes de comenzar a describir la estructura de la tabla. Para esto se utilizan: <col> Es para definir las propiedades de una columna en forma individual. <colgroup span="2"> Permite definir un grupo de columnas para especificar sus propiedades. El atributo span determina la cantidad de columnas que ocupar. Su valor por defecto es 1. <table align="center" border="1" cellpadding="3"> <caption>Sitios para descargar programas</caption> <col align="left" bgcolor="yellow" width="30%"> <colgroup align="center" span="2" width="35%"></colgroup> <tr> <td>Sitio</td> <td>Descripcin</td> <td>Direccin</td> </tr> <tr> <td>Download.com</td> <td>novedades de software</td> <td>www.download.com</td> </tr> <tr> <td>softdownload</td> <td>programas para windows, linux, mac y palm</td> <td>www.softonic.com</td> </tr> <tr> <td>Superarchivos</td> <td>todo tipo de programas</td> <td>www.superarchivos.com</td> </tr> </table>

Autor: Daniel Vega

Pgina 11

Ejemplo de tabla con columnas agrupadas, filas agrupadas y varios atributos para cada tag que definirn el estilo visual: <table border="1" frame="border" rules="groups" summary="Funcionalidad de archivos HTML en diferentes versiones de Internet Explorer"> <caption>Representacin de cmo funcionan los archivos HTML en diferentes versiones de Internet Explorer</caption> <colgroup align="center"></colgroup> <colgroup></colgroup> <colgroup align="center" span="2"></colgroup> <thead> <tr> <th>Archivo</th> <th>Nombre</th> <th>6.0</th> <th>8.0</th> </tr> </thead> <tfoot> <tr> <th>Archivo</th> <th>Nombre</th> <th>6.0</th> <th>8.0</th> </tr> </tfoot> <tbody> <tr> <td>1</td> <td>index.html</td> <td>Ok</td> <td>Ok</td> </tr> <tr> <td>2</td> <td>links.html</td> <td>Ok</td> <td>Ok</td> </tr> <tr> <td>3</td> <td>fullfunc.html</td> <td>-</td> <td>Ok</td> </tr> <tr> <td>4</td> <td>nofunc.html</td> <td>Ok</td> <td>Ok</td> </tr> <tr> <td>5</td> <td>panel.html</td> <td>-</td> <td>Ok</td> </tr> </tbody> <tbody> <tr> <td>6</td> <td>search.php</td> <td>Ok</td> <td>Ok</td> </tr>
Autor: Daniel Vega Pgina 12

<tr> <td>7</td> <td>send.php</td> <td>Ok</td> <td>Ok</td> </tr> </tbody> </table>

Autor: Daniel Vega

Pgina 13

Marcos (Frames)
Permiten dividir una pgina en distintos sectores. Cada sector podr contener una pgina diferente e independiente. De esta forma podemos, colocar sectores de la pgina que son fijos y solo actualizar el contenido de uno de los marcos. La pgina de marcos (frameset) no tiene informacin visible. Solo describe cmo est organizada la disposicin de los distintos marcos que la componen. Tienen una seccin HEAD y otra FRAMESET en vez de BODY. Cada frame muestra una pgina HTML comn y corriente; por lo tanto, en la pgina de marcos hay que indicar qu documentos deber mostrase en cada marco. <frameset rows="200, *" cols="30%, 70%"> <frame src="pag01.html" /> <frame src="pag02.html" /> <frame src="pag03.html" /> <frame src="pag04.html" /> </frameset>

Atributos de frame:
Atributo frameborder marginheight marginwidth noresize scrolling Descripcin 1o0 Margen superior e inferior con el contenido. Margen izquierdo y derecho con el contenido. Deshabilita que el usuario cambie el tamao de los marcos. Determina la aparicin o no de la barra de desplazamiento. (yes, no, auto) Muestra un mensaje de que el navegador no soporta marcos.

<noframes> Mensaje </noframes>

Marcos anidados
Consiste en colocar una nueva etiqueta <frameset> dentro de la definicin del conjunto de marcos. Este tipo de diseo se suele utilizar para colocar el titulo, nombre o logo del sitio o empresa en el primer marco, una barra de navegacin con links en el segundo y el contenido que ir cambiando en el tercero y ms grande. <frameset rows="100, *"> <frame src="pag01.html"> <frameset cols="20%, *"> <frame src="pag02.html"> <frame src="pag03.html"> </frameset> </frameset>

Marcos en lnea (iframe)

Permite insertar un marco entre el contenido del documento. <iframe> </iframe> Atributo frameborder height height y width marginheight marginwidth name scrolling src width Descripcin Determina la aparicin de un borde (1 o 0) Altura. Alto y ancho en pixeles o en porcentaje Margen superior en inferior con el contenido. Margen izquierdo y derecho con el contenido Nombre del marco. Define si se muestran las barras de desplazamiento. (auto, yes, no) Ruta de la pgina inicial para el marco. Ancho.

Autor: Daniel Vega

Pgina 14

Formularios
HTML permite la interaccin usuario-servidor mediante lo que se llama formulario. Un formulario es un rea del HTML encerrada por el tag de apertura y cierre <form>, en donde hay una serie de controles que permiten el ingreso de informacin por parte del usuario que luego ser enviada al servidor. Los formularios estn creados simplemente en HTML. Sirven para enviar valores de datos al servidor para que sean procesados por algn lenguaje de servidor como PHP, ASP.Net, etc. Es muy importante que cada campo del formulario tenga un nombre (parmetro name del campo) para poder identificarlo luego. El cdigo PHP se puede utilizar adentro del formulario para, por ejemplo, asignar valores por defecto o desactivar ciertos campos segn la informacin disponible (variable de sesin, u otro formulario). <form name="frmAltaContacto" action="altaContacto.php" method="get" enctype="multipart/form-data"> </form>

Atributos
action: establece el archivo destino de los datos del formulario, cuando el usuario invoque el envo de datos. Existen dos maneras de enviar la informacin de los formularios al servidor para que lo procese: get: los datos del formulario son enviados por la URL del navegador. Ej: http://www.sistema.com/index.php?pagina=5&cantidad=20 El signo de interrogacin (?) separa el nombre del archivo de los valores. Luego de ste siempre se ubica el nombre del valor, un smbolo de igualdad (=) y el dato solicitado. Por cada dato adicional se deber incorporar el separador & (ampersand). post: los datos son enviados a travs de las cabeceras del protocolo HTTP y son invisibles para el usuario.

Qu mtodo usar? Hay que tener en cuenta algunas cosas: Algunos navegadores no soportan ms de 255 caracteres en la lnea de direcciones (URL), por lo que si la informacin enviada por el mtodo GET supera esa cantidad de caracteres, los datos sern truncados (borrados a partir de la posicin 256), con la consecuente prdida de informacin. El envo de archivos adjuntos se debe realizar obligatoriamente con el mtodo POST. Cuando se trate de informacin vital (contraseas, nmeros de tarjeta de crdito, etc.) se debe utilizar POST para tener mayor seguridad. Las URLs trabajan con un encoding de 7 bits, lo que no permite el uso de caracteres especiales, como acentos, ees, etc. stos sern convertidos a un cdigo especial que luego debe ser reconvertido a la normalidad. En la URL tampoco deberan existir espacios en blanco, ya que no son soportados, por lo que si, por ejemplo, el nombre de una persona es "Carlos Daniel", al realizarse el envo, ste es transformado a Carlos%20Daniel. El cdigo %20 es el que identifica al espacio en blanco. Cuando los datos por enviar son pocos (uno o dos), como un identificador, cdigo o documento, es recomendable usar GET, ya que es ms veloz. Si utilizamos el mtodo GET, podremos hacer uso del envo de datos de una pgina a otra sin necesidad de emplear un formulario, sino a travs de hipervnculos indicando los datos dentro de la URL.
Pgina 15

Autor: Daniel Vega

enctype: Especifica el tipo de codificacin que utiliza el explorador cuando enva datos del formulario al servidor. Tipo de codificacin application/x-www-form-urlencoded Descripcin Los datos del formulario estn codificados como pares de nombre y valor. Este es el formato de codificacin por defecto en caso de que no se especifique el valor de este atributo. Los datos del formulario estn codificados como mensaje con partes independientes para cada control de la pgina. Este debe ser usado cuando usamos el elemento input type="file". Los datos del formulario estn codificados en texto sin formato, sin controles ni caracteres de formato.

multipart/form-data

text/plain

Elementos del formulario:

Cajas de texto <input type="text" name="txtNombre" size="20" value="marina" maxlength="20" /> Caja de texto password <input type="password" name="txtPass" size="20" maxlength="20" /> Cajas de texto multilinea <textarea name="txtDescripcion" rows="5" cols="20">Texto</textarea> CheckBox (cajas de verificacin) <input type="checkbox" name="chkHombre" value="h" checked="checked" /> <input type="checkbox" name="chkMujer" value="m" /> Radio Button (Botones de opciones) <input type="radio" name="rdbColor" value="azul" checked="checked" />Azul <input type="radio" name="rdbColor" value="rojo" />Rojo Combos (Cajas combinadas) <select name="cboDia" size="1" [multiple]> <option value="0">Domingo</option> <option value="1" selected="selected">Lunes</option> <option value="2">Martes</option> </select> Campo oculto <input type="hidden" name="hfIdProducto" value="50" /> Campo upload <input type="file" name="fuImagen" /> Botn submit <input type="submit" name="btnProcesar" value="Procesar" /> Botn reset <input type="reset" name="btnReset" value="Limpiar" /> Botn de accin <input type="button" name="btnProcesar" value="Procesar" onClick="Procesar();" />
Autor: Daniel Vega Pgina 16

Botn con imagen <input type="image" name="btnProcesar" value="Procesar" src="imagen.jpg" />

Otros elementos
<input type="checkbox" name="chkPintura" value="Pintura" id="chkPintura" /> <label for="chkPintura">Pintura</label>

<fieldset></fieldset> <legend> Ej:

Agrupa campos Para colocar un nombre al grupo de campos

<form> <fieldset> <legend>Persona</legend> Nombre: <input type="text" /><br /> Email: <input type="text" /><br /> Fecha de nacimiento: <input type="text" /> </fieldset> </form>

Nomenclatura
Etiqueta input type='text' input type='password' textarea input type='checkbox' input type='radio' select input type='hidden' input type='file' input type='submit' input type='reset' input type='button' input type='image' Prefijo txt txt txt chk rdb cbo hf fu btn btn btn btn Ejemplo txtName txtPassword txtComment chkEnabled rdbActive cboCountries hfProductId fuLogo btnSave btnReset btnValidate btnProcess

Autor: Daniel Vega

Pgina 17

CSS
CSS (cascade style sheets) es un lenguaje usado para definir la presentacin de un documento estructurado como lo es el HTML. Las hojas de estilo en cascada proporcionan una manera muy eficiente de aplicar estilo y formato a las pginas web y cualquiera de sus elementos. El W3C (World Wide Web Consortium) (www.w3c.org) es el encargado de formular la especificacin de las hojas de estilo que servirn de estndar para los navegadores. No todos los navegadores interpretan correctamente las especificaciones de CSS. Para validar los estilos que usamos y comprobar que se est respetando el estndar, podemos ir a la pgina de la W3C: www.w3c.org/style/css Y luego buscar el link CSS validator

Ventajas
Permite concentrar en un nico lugar la definicin de estilos. Mediante un bloque de cdigo dentro de la misma pgina o en un archivo separado se controla los estilos de ciertos elementos, en vez de dar formato a cada elemento en forma individual. Es ms mantenible, ya que para modificar el estilo, solo lo hacemos en un solo lugar.

Formas de aplicacin de estilos

Dentro del documento, en la seccin head <style type="text/css"> selector { propiedad_1: valor_1; propiedad_2: valor_2; propiedad_n: valor_n; } </style> En un archivo externo con la extensin .css se coloca directamente el cdigo css. Para vincular dicho archivo con cada pgina web. <link rel="stylesheet" type="text/css" href="cssMain.css" /> En la misma etiqueta: (estilo inline) <p style="font-family:arial;">texto</p>

Autor: Daniel Vega

Pgina 18

Selectores
Es la forma de poder identificar a que elementos queremos aplicar algn estilo. Los selectores pueden ser: Etiquetas HTML Nombres que identifican el atributo #id del elemento HTML. Nombres creados por nosotros (.nombreClase)

Jerarqua
Orden de prioridad si se aplican diferentes estilos a la misma etiqueta: Selectores por ID Selectores por nombre de clase Selectores por etiqueta

Orden de aplicacin de estilos css: Se aplican las CSS propias del browser. Se aplican las CSS externas. Se aplican las CSS incrustadas dentro de la pgina HTML. Se aplican los estilos en lnea.

Selector Significado (Afecta) Cmo este situado el tag respecto a otros tags * cualquier elemento E cualquier etiqueta de tipo E EF cualquier etiqueta de tipo F que es descendiente de E. (en cualquier nivel de anidamiento) E>F A las etiquetas F que son hijas de E E+F A cualquier elemento F inmediatamente precedido(adyacente) por una etiqueta E E:first-child A la primera etiqueta E que precede a su padre E:first-letter A la primera letra dentro del elemento Con algn evento de usuario E.E:link, E:visited Al elemento E si E es una etiqueta que contiene un hipervnculo que todava no ha sido visitado (:link) o que ya fue visitado (:visited) E:active A la etiqueta E durante ciertas acciones del usuario (mientras se hace click en l). E:hover, E:focus, Cuando el ratn este sobre el elemento (hover) o cuando tiene el foco (focus). E:lang(c) Al elemento E si el documento est en el idioma c (especificado en la etiqueta HTML) tags con atributos E[atributo] E[atributo="valor"] E[atributo~="valor"] E[atributo|="valor"] E[atributo^="valor"] E[atributo$="valor"] E[atributo*="value"] tag.clase tag#algo .algo #algo

Cualquier etiqueta E que tenga el atributo, con cualquier valor. A las etiquetas E cuya atributo tengan ese valor. A las etiquetas E cuyo valor del atributo es una lista de valores separados por espacios en donde uno de esos valores concide con el valor del atributo. El valor del atributo es igual o comienza con la palabra y este es inmediatamente seguido por guin medio (-). El valor del atributo comienza con el valor especificado. El valor del atributo finaliza con el valor especificado. El valor del atributo contiene el valor value especificado. Un tag con el atributo class igual a clase. Es una forma abreviada que permite CSS de poner tag[class~="valor"]. Cualquier elemento HTML con su propiedad id="algo" Cualquier elemento con la propiedad class="algo" Cualquier elemento con la propiedad id="algo"

Pseudo-elementos
Para ampliar los selectores y filtrar ms la bsqueda de elementos. :first-line Se refiere a la primera lnea del elemento, normalmente usado para elementos de texto.
Autor: Daniel Vega Pgina 19

Ej: p {font-size: 12pt} p:first-line {color: #0000FF; font-variant: small-caps} <p>Some text that ends up on two or more lines</p> :first-letter La primera letra del elemento, tambin suele usarse para elementos de texto. p {font-size: 12pt} p:first-letter {font-size: 200%; float: left} <p>The first words of an article.</p> :before Elemento usado para insertar algn contenido delante de un elemento. h1:before { content:"BEFORE" } :after Elemento usado para insertar algn contenido al final del elemento. h1:after { content: "AFTER" } :nth-child Identifica un elemento dentro de una lista de etiquetas. <div id="ejemplo"> <p> [ PARRAFO 1 ] </p> <p> [ PARRAFO 2 ] </p> <p> [ PARRAFO 3 ] </p> <p> [ PARRAFO 4 ] </p> </div> #ejemplo p:nth-child(1) { color: LightCoral; } #ejemplo p:nth-child(2) { color: AliceBlue; } #ejemplo p:nth-child(3) { color: GreenYellow; } #ejemplo p:nth-child(4) { color: Gold; } tambin: #ejemplo p:nth-child(2n+1) { /* propiedades */ } #ejemplo p:nth-child(2n) { /* propiedades */ }

pseudo-elementos y CSS clases.

Nos permite encadenar varios selectores para conseguir focalizar en un elemento un pseudo-elemento concreto. p.article:first-letter {color: #FF0000} <p class="article">A paragraph in an article</p>

Multiples pseudo-elementos
Adems nos permite utilizar varios pseudo-elementos sobre un mismo elemento. p {font-size: 12pt}
Autor: Daniel Vega Pgina 20

p:first-letter {color: #FF0000; font-size: 200%} p:first-line {color: #0000FF} <p>The first words of an article</p>

Tabla de compatibilidad de CSS con todos los navegadores

http://www.quirksmode.org/css/contents.html

Autor: Daniel Vega

Pgina 21

Formato de links
a:link {text-decoration:none;} a:active{color:red;} a:hover{ text-decoration:underline} a:visited{text-decoration:none}

Estilo segn el lenguaje

<html lang="es">

Propiedades y valores
Cuando se especifica algn nmero como valor, hay que indicar tambin su unidad. Unidades relativas: em: tamao relativo al de la fuente utilizada en el elemento en que se aplica. xm: tamao relativo tomando como referencia la altura de las letras minsculas de la fuente. px: pxeles, unidad relativa, en base a la resolucin de pantalla. Unidades absolutas: in: inches (pulgadas). 1 pulgada equivale a 25.4 milmetros. cm: centmetros mm: milmetros pt: points (puntos). Los puntos equivalen a 0.35 milmetros o 1/72 pulgadas. pc: picas. 1 pica equivale a 12 puntos, 4.23 milmetros o 1/6 de pulgada.

El modelo de caja
En realidad, todos los elementos de una web (prrafos, enlaces, imgenes, tablas, etc.) son cajas rectangulares. Los navegadores sitan estas cajas de la forma que nosotros les hayamos indicado para maquetar la pgina. Hay dos tipos de cajas: block e inline. Los elementos block rompen el flujo de maquetacin. Esto es, aparecen solos, insertando "saltos de lnea". Los elementos inline siguen el flujo, y estn contenidos dentro de elementos de bloque.

Mediante el modelo de caja es posible especificar propiedades como el color de fondo, del contenido, sus bordes y propiedades, el margen interno (desde el contenido hasta el borde) y el externo (desde el borde hasta el prximo elemento). Se puede determinar las propiedades de los bordes de una sola vez para todos los bordes por igual o especificar caractersticas diferentes para cada uno de los cuatro bordes.
Autor: Daniel Vega Pgina 22

Margenes: margin-top margin-right margin-bottom margin-left Margen interno: padding-top padding-right padding-bottom padding-left Borde: border-top border-right border-bottom border-left border-style none: dotted: dashedd: solid: double: groove: ridge: inset: outset: background:

ningn borde borde punteado borde con guiones lnea solida doble lnea solida muestra borde con sombra efecto opuesto a groove efecto 3D efecto 3D opuesto a inset Color del fondo por nombre o un valor hexadecimal.

Autor: Daniel Vega

Pgina 23

Bloques y capas (layers)

Una capa es una divisin, una parte de la pgina, que tiene un comportamiento muy independiente dentro de la ventana del navegador, ya que la podemos colocar en cualquier parte de la misma y la podremos mover por ella independientemente, por poner dos ejemplos. En el uso de capas se basan muchos de los efectos ms comunes del DHTML. Usualmente se emplean las etiquetas <div> y <span> para representarlas, pero cualquier elemento puede comportarse como una capa. En CSS se hace distincin entre los elementos que se comportan como bloques y los que no (elementos in line). <p>texto <b>importante</b></p> <div></div> <span></span> Para todos los elementos es posible definir cmo se comportar el elemento, como bloque o no (in line). display: [block, inline] position: define como se ubica un bloque respecto del contenido de la pgina: static: Caja normal, siguiendo el flujo de contenido. relative: La caja se ubica en relacin con el flujo normal de contenido. absolute: La posicin es especificada con las propiedades left, right, top y bottom. La caja se ubica en un lugar fijo del documento. fixed: La posicin se indica de igual forma que absolute, pero la caja queda fija an al desplazar la pgina. La caja se ubica en relacin a la ventana del navegador.

Cajas flotantes
Sirve para crear recuadros de cualquier clase. Pueden ser colocadas a la derecha o a la izquierda y permitir (o evitar, mediante la propiedad clear) que el contenido fluya por su costado. Una caja flotante se crea utilizando la propiedad float y sus valores son: left, right, none. z-index: Permite determinar la altura de la capa sobre la pgina y con respecto a otras.

Propiedades para el trabajo con texto:

font-family: font-size: font-style: font-variant: font-weight: font-stretch: Fuente de letra (arial, verdana, etc.) Tamao de la fuente. normal, italic(cursiva) normal, small-caps (las letras minsculas se ven como las maysculas pero ms chicas) normal, bold, bolder, lighter. O valores del 100 al 900. Separacin entre letras.

CSS Reseter
Todos los elementos HTML tienen por defecto unos atributos CSS predeterminados segn los distintos browsers. A veces estos atributos causan problemas comunes a la hora de crear el sitio pensando en cross-browser (que se visualize correctamente en todos los navegadores). Por eso la nica solucin a veces es resetear tus estilos. El consorcio W3C, junto con su especificacin de CSS 2.11 del 23 de abril de 2009, public en su recomendacin, un valor por defecto para cada propiedad de CSS que deberan adoptar los agentes de usuario. Debido a que algunos navegadores hicieron caso omiso a sus indicaciones, los diseadores web se han visto obligados a recurrir al uso de este tipo de trucos para garantizar la correcta visualizacin en la mayora de navegadores. Link: http://www.cssreset.com/

Autor: Daniel Vega

Pgina 24

JavaScript
Es un lenguaje de programacin interpretado (no requiere compilacin) que se ejecuta del lado del cliente (en el browser). Est pensado para agregar interactividad con el usuario a las pginas HTML o para controlar ciertos aspectos de los formularios web, imgenes y dems elementos del navegador. Se puede controlar la mayor parte de los elementos del navegador. Se pueden ejecutar acciones como abrir nuevas ventanas, verificar formularios antes de enviarlos, crear calendarios, etc. La mayora de los navegadores soportan este lenguaje, que se ejecuta en la aplicacin cliente, pero no todos lo soportan del mismo modo, por lo tanto habr que detectar el browser usado y adaptar el cdigo. Se puede incluir el cdigo dentro de la seccin <head> del html: <script type="text/javascript"> alert("hola mundo"); </script> En un archivo externo y luego incluirlo al html: <script type="text/javascript" src="/js/script.js"></script> Incluir javascript en los elementos XHTML: <body> <p onclick="alert('hola mundo');">Saludo de prueba</p> </body> Con la etiqueta <noscript> se muestra al usuario un mensaje cuando el navegador no puede ejecutar JavaScript. <body> <noscript> <p>La pgina que ests viendo requiere para su funcionamiento el uso de JavaScript. Si lo has deshabilitado intencionadamente, por favor vuelve a activarlo.</p> </noscript> </body>

Sintaxis
// /* codigo */ Comentario de una lnea. Comentario multilnea

Cada instruccin termina con punto y coma (;). Las funciones propias del lenguaje se escriben en minsculas. Es sensible a maysculas y minsculas.

Variables
No exige la definicin explcita de las variables. Es posible declarar la variable con solo utilizarla por primera vez. Tambin se puede declarar usando la palabra reservada var. var a; var miVariable1; var edad = 25; Javascript asigna automticamente el tipo de dato, segn el valor que se le asigne a la variable. Mientras una variable no se haya utilizado, se dice que es undefined. Los tipos de datos pueden ser: string
Pgina 25

Autor: Daniel Vega

number boolean object null undefined Devuelve el tipo de dato de la variable

typeof (variable) Ej: var edad = 28; typeof edad;

// "number"

Para las cadenas de texto se pueden usar las comillas dobles o simples. Para concatenar se usa el signo '+' El tipo undefined corresponde a las variables que han sido definidas y todava no se les ha asignado un valor. var nombre; typeof nombre; //devuelve "undefined" El tipo null es similar a undefined y se suele usar para representar objetos que en ese momento no existen. var nombreUsuario = null;

Caracteres especiales
Carcter \n \r \f \t \\ \' \" \b Significado Salto de lnea Retorno de carro Salto de pgina Tabulacin Barra invertida (\) Comilla simple Comilla doble Carcter anterior

Javascript define una clase por cada uno de los tipos de datos primitivos.

Variables locales y variables globales

Si la variable no se declara mediante el operador var, automticamente se crea una variable global con ese identificador y su valor. Ejemplo var variable1 = 16; variable2 = variable1 + 4; En el ejemplo anterior, la variable2 no ha sido declarada, por lo que al llegar a esa instruccin, JavaScript crea automticamente una variable global llamada variable2 y le asigna el valor correspondiente. El mbito de una variable (llamado scope en ingls) es la zona del programa en la que se define la variable. JavaScript define dos mbitos para las variables: global y local. El siguiente ejemplo ilustra el comportamiento de los mbitos: function muestraMensaje() { var mensaje = "Mensaje de prueba"; } muestraMensaje(); alert(mensaje);
Autor: Daniel Vega Pgina 26

Cuando se ejecuta el cdigo JavaScript anterior, su resultado no es el esperado, ya que no se muestra por pantalla ningn mensaje. La variable mensaje se ha definido dentro de la funcin y por tanto es una variable local que solamente est definida dentro de la funcin. Cualquier instruccin que se encuentre dentro de la funcin puede hacer uso de la variable. Sin embargo, cualquier instruccin que se encuentre en otras funciones o fuera de cualquier funcin no tendr definida la variable mensaje. Adems de variables locales, tambin existe el concepto de variable global, que est definida en cualquier punto del programa (incluso dentro de cualquier funcin). var mensaje = "Mensaje de prueba"; function muestraMensaje() { alert(mensaje); } El cdigo JavaScript anterior define una variable fuera de cualquier funcin. Este tipo de variables automticamente se transforman en variables globales y estn disponibles en cualquier punto del programa. De esta forma, aunque en el interior de la funcin no se ha definido ninguna variable llamada mensaje, la variable global creada anteriormente permite que la instruccin alert() dentro de la funcin muestre el mensaje correctamente. Si una variable se declara fuera de cualquier funcin, automticamente se transforma en variable global independientemente de si se define utilizando la palabra reservada var o no. Sin embargo, en el interior de una funcin, las variables declaradas mediante var se consideran locales y el resto se transforman tambin automticamente en variables globales. Por lo tanto, el siguiente ejemplo si que funciona como se espera: function muestraMensaje() { mensaje = "Mensaje de prueba"; } muestraMensaje(); alert(mensaje); En caso de colisin entre las variables globales y locales, dentro de una funcin prevalecen las variables locales: var mensaje = "gana la de fuera"; function muestraMensaje() { var mensaje = "gana la de dentro"; alert(mensaje); } alert(mensaje); muestraMensaje(); alert(mensaje); El cdigo anterior muestra por pantalla los siguientes mensajes: gana la de fuera gana la de dentro gana la de fuera La variable local llamada mensaje dentro de la funcin tiene ms prioridad que la variable global del mismo nombre, pero solamente dentro de la funcin. Si no se define la variable dentro de la funcin con la palabra reservada var, en realidad se est modificando el valor de la variable global: var mensaje = "gana la de fuera";
Autor: Daniel Vega Pgina 27

function muestraMensaje() { mensaje = "gana la de dentro"; alert(mensaje); } alert(mensaje); muestraMensaje(); alert(mensaje); En este caso, los mensajes mostrados son: gana la de fuera gana la de dentro gana la de dentro La recomendacin general es definir como variables locales todas las variables que sean de uso exclusivo para realizar las tareas encargadas a cada funcin. Las variables globales se utilizan para compartir variables entre funciones de forma rpida.

Algunas Funciones
eval (string) //Convierte a string el argumento, luego a cdigo javascript y lo ejecuta. Ej: var miTexto = "3 + 5"; eval("document.write(" + miTexto + ")");

isNaN() Esta funcin devuelve un booleano dependiendo de si lo que recibe es un nmero o no. Lo nico que puede recibir es un nmero o la expresin NaN. Si recibe un NaN devuelve true y si recibe un nmero devuelve false. Ej: miInteger = parseInt("A3.6") isNaN(miInteger) miFloat = parseFloat("4.7") isNaN(miFloat) parseInt (string) parseFloat (string) parsea un string y devuelve un entero. parsea un string y devuelve un numero flotante.

toString() Este mtodo lo tienen todos los objetos y se usa para convertirlos en cadenas. El resultado depende del tipo de dato al que se aplique: Nmero: Booleano: Objeto: Funcin: Vector: Ej: var var var var Devuelve el nmero en formato string Devuelve las cadenas "true" o "false" Devuelve la cadena "[object NombreObjeto]". Devuelve una cadena con la definicin de la funcin y su cdigo. Devuelve una cadena con los elementos del vector separados por coma.

numero = 1342 cadena = numero.toString(); cadena2 = (56778).toString(); cadena3 = (0xAF76).toString(16);

instanceof Determina la clase concreta de un objeto. var variable1 = new String("hola mundo"); typeof variable1; // devuelve "object"
Autor: Daniel Vega Pgina 28

variable1 instanceof String;

// devuelve true

Operadores
Operadores aritmticos
* / % + ++ -Multiplicacin Divisin Mdulo (resto de una divisin entera) Suma Resta Incremento Decremento

Operadores de comparacin
== != === !== < > <= >= Igualdad Desigualdad Identico No identico Menor que Mayor que Menor o igual que Mayor o igual que

Operadores lgicos
! && || Negacin Y O

Autor: Daniel Vega

Pgina 29

Operadores de asignacin
= += -= *=

Operador ternario
variable = (condicion) ? valor1 : valor2; Ej: var saludo; saludo = (hora > 12) ? "Buenas tardes" : "Buen da";

Funciones
function Sumar(x, y) { z = x + y; return z; } Llamada: var resultado = Sumar(18, 19); Si a una funcin se le pasan ms parmetros que los que ha definido, los parmetros sobrantes se ignoran. Si se pasan menos parmetros que los que ha definido la funcin, al resto de parmetros hasta completar el nmero correcto se les asigna el valor undefined. Las funciones tambin se pueden crear mediante lo que se conoce como "function literals" o "funciones annimas" y que consiste en definir la funcin con una expresin en la que el nombre de la funcin es opcional. function Sumar(a, b) { return a + b; } var miFuncion = function(a, b) { return a + b; } Las funciones annimas son ideales para los casos en los que se necesita definir funciones sencillas que slamente se utilizan una vez y para las que no es necesario crear una funcin tradicional con nombre.

Estructuras de control
if(expresion) { //acciones a realizar si la condicin es verdadera } else { //acciones a realizar si la condicin no se cumpli } switch(miVariable) { case 1: //Acciones break; case 2: //Acciones
Autor: Daniel Vega Pgina 30

break; default: //Acciones por predefinicin } for(inicio, condicion, incremento) { //Codigo } while(condicion) { //Codigo } do { //Codigo }while(condicion)

Autor: Daniel Vega

Pgina 31

Estructuras de control de objetos

Con el bucle forin podemos recorrer todas las propiedades de un objeto o los elementos de un vector y conocer sus valores. for(i in navigator) { document.write(i + " = " + navigator[i] + "<br />"); } with(objeto) { propiedad1 = propiedad2 = metodo1(); metodo2(); }

Objetos
Son estructuras que pueden contener tanto variables como funciones. A las variables se las llama propiedades y a las funciones, mtodos. objeto.propiedad objeto.metodo(parametros)

Creacin de objetos
Se asemeja bastante a la creacin de una funcin. Las propiedades y mtodos se definen con el comando this. function Amigo(nombre, apellido, telefono, correo) { this.nombre = nombre; this.apellido = apellido; this.telefono = telefono; this.correo = correo; } Otra forma (recomendada): var Amigo = function(nombre, apellido, telefono, correo) { this.nombre = nombre; this.apellido = apellido; this.telefono = telefono; this.correo = correo; this.correr = correr; } function correr(){ alert("El amigo " + this.nombre + " est corriendo"); } //mtodo.

Instanciar un objeto: objAmigo = new Amigo("Fernando", "Gambino", "42911188", "fgambino@hotmail.com"); Para acceder a sus propiedades: document.write("<br document.write("<br document.write("<br document.write("<br
Autor: Daniel Vega

/>Nombre: "+ objAmigo.nombre); />Apellido: "+ objAmigo.apellido); />Telefono: "+ objAmigo.telefono); />Email: "+ objAmigo.correo);
Pgina 32

Para ejecutar sus mtodos: objAmigo.correr(); Para recorrer el objeto con forin: for(i in objAmigo) { document.write("<br />"+ i +": "+ objAmigo[i]); } Si hay problemas con los caracteres (acentos, ees) verificar los cdigos HTML: http://www.ascii.cl/htmlcodes.htm A un objeto se le pueden seguir aadiendo propiedades tras ser definido. Para ello se usa la palabra prototype. objAmigo.prototype.direccion = null; objAmigo.direccion = "alvear 123";

Autor: Daniel Vega

Pgina 33

Objetos predefinidos
Objeto Array
Con esta clase manejamos los arrays, que pueden ser numricos o asociativos miVector = new Array(10); opcional. //El argumento que define la capacidad del array es

miVector[0] = "elemento 01"; miVector[1] = "elemento 02"; miVector = new Array("Paris", "Mexico", "Buenos Aires", "Montevideo", "Santiago"); miVector = ["elemento 01", "elemento 02", "elemento 03"]; miVector["el01"] = "elemento 01"; miVector["el02"] = "elemento 02";

length concat (otroVector)

Devuelve la longitud del vector. (ej: objArray.length;)

Agrega los elementos de un vector (pasado como parmetro) al vector que invoca el mtodo. sort () reverse () join (separador) Une los elementos de las cadenas de caracteres de cada elemento de un array en un string, separando cada cadena por el separador especificado. pop () Elimina el ltimo elemento del array y lo devuelve. El array original se modifica y su longitud disminuye una unidad. push () Aade un elemento al final del array. El array original se modifica y aumenta su longitud una unidad. Tambin es posible aadir ms de un elemento a la vez. shift () Elimina el primer elemento del array y lo devuelve. El array original se modifica y su longitud disminuye una unidad. unshift () Aade un elemento al principio del array. El array original se modifica y aumenta su longitud en una unidad. Tambin es posible aadir ms de un elemento a la vez. Orden alfabticamente los elementos del vector. Invierte el orden de los elementos del array.

Objeto Date
Este objeto es usado para representar y manipular valores relacionados con fechas. // Se crea un objeto Date con la fecha y hora actual. var fechaHoy = new Date(); miFecha = new Date(ao, mes, da, hora, minutos, segundos) miFecha = new Date(ao, mes, da) Mtodos: getDate() getDay() getMonth() getHours() getMinutes()
Autor: Daniel Vega

Devuelve el da del mes del 1 al 31. Devuelve el da de la semana del 0 (domingo) al sbado (6). Devuelve el mes de 0 a 11. Devuelve la hora. Devuelve los minutos.
Pgina 34

getSeconds() getMiliseconds() getTime()

Devuelve los segundos. Devuelve los milisegundos. Devuelve los milisegundos totales que pasaron desde el 1 de enero de 1970 hasta el da actual. Este valor se conoce como TimeStamp en otros lenguajes.

getFullYear() getYear()

Devuelve el ao en 4 cifras. Devuelve el ao en 2 cifras.

Cada mtodo get() mostrado anteriormente tiene su correspondiente mtodo set() que permite establecer el valor de cada una de las propiedades.

Objeto Math
Este objeto permite realizar tareas matemticas. Math.PI abs (numero) sin(), cos(), tan() asin(), acos(), atan() exp(), log() ceil (numero) Nmero PI. (3.14159) Devuelve el valor absoluto del nmero pasado como parmetro. Funciones trigonomtricas, reciben el argumento en radianes. Funciones trigonomtricas inversas. Exponenciacin y logaritmo, base e. Devuelve el entero ms pequeo mayor o igual al argumento. Redondea hacia arriba al entero mas cerca. Ej: Math.ceil(0.6); //1 Devuelve el entero ms grande menor o igual al argumento. Redondea hacia abajo al entero mas cerca. Ej: Math.floo(0.6); //0 Devuelve el entero ms cercano o igual al argumento. Devuelve el menor (o mayor) de sus dos argumentos. Exponenciacin. Raz.

floor ()

round () min (a, b), max (a, b) pow (base, exp) sqrt (base, exp)

Objeto String
length chartAt (n) charCodAt (n) indexOf (cadena2) Longitud de la cadena. Devuelve el carcter ubicado en la posicin indicada. Similar al anterior, solo que devuelve el cdigo ASCII. Busca la cadena2 en la cadena que invoca el mtodo. Si la encuentra devuelve la posicin, si no, -1. lastIndexOf (cadena2) Devuelve la ltima posicin en la que se encuentra el carcter indicado dentro de la cadena de texto. Si no se encuentra, devuelve -1. concat (cadena2) substr (indice, n) Se emplea para concatenar varias cadenas de texto. Devuelve una parte de la cadena contando n caracteres a partir de la posicin ndice.

substring (inicio, final) Devuelve la subcadena comprendida entre las posiciones indicadas. La posicin inicio esta incluida y la final no. toLowerCase () toUpperCase () split (separador)
Autor: Daniel Vega

Transforma la cadena a minsculas. Transforma la cadena a maysculas.

Pgina 35

Convierte una cadena de texto en un array de cadenas de texto a partir de un carcter delimitador.

Objeto Number
La clase Number permite definir variables de tipo numrico independientemente de si el valor es entero o decimal. valueOf() toFixed() Devuelve el valor numrico almacenado. Trunca el nmero de decimales de un nmero al valor indicado como parmetro. // variable2 = 3 // variable3 = 3.14

var variable1 = new Number(3.141592); var variable2 = variable1.toFixed(); var variable3 = variable1.toFixed(2);

Se recomienda utilizar el tipo de dato primitivo para los nmeros, ya que la clase Number no aporta mejoras significativas

Autor: Daniel Vega

Pgina 36

Los objetos del navegador

El modelo de objetos del navegador se organiza jerrquicamente. navigator -> window -> document El objeto navigator contiene informacin acerca del browser. Ej: for(i in navigator) { document.write(i + " = " + navigator[i] + "<br />"); }

El objeto window es el padre de todos los elementos de la pgina. El objeto document tiene como hijos a todos los objetos de una pgina web. window.self.document.write("Hola mundo"); window.document.write("Hola mundo"); document.write("Hola mundo");

Modelo de objetos del navegador segn JavaScript

Autor: Daniel Vega

Pgina 37

El objeto navigator
Permite obtener informacin sobre el propio navegador. En Internet Explorer, el objeto navigator tambin se puede acceder a travs del objeto clientInformation Aunque es uno de los objetos menos estandarizados, algunas de sus propiedades son comunes en casi todos los navegadores. A continuacin se muestran algunas de esas propiedades: Propiedad / Mtodo appCodeName appName appMinorVersion appVersion browserLanguage connectionSpeed cookieEnabled cpuClass javaEnabled language mimeTypes onLine platform plugins systemLanguage userAgent userLanguage Descripcin Devuelve el cdigo de aplicacin del navegador. Devuelve el nombre del navegador. (Slo Internet Explorer) Cadena que representa informacin extra sobre la versin del navegador Devuelve el nmero de versin del navegador. Devuelve el idioma del navegador. Proporciona la velocidad actual de conexin a la red. Averigua si el usuario tiene habilitadas las cookies. Informa el tipo de procesador de la computadora del usuario. Averigua si el navegador tiene JAVA instalado. Cadena que representa el idioma del navegador. Array con los tipos MIME soportados por el navegador. (Slo Internet Explorer) Boolean que indica si el navegador est conectado a Internet. Devuelve el tipo de sistema operativo. Devuelve un array con los nombres de los plugins instalados. Devuelve el idioma del sistema. Especifica el agente de usuario que se enva en la cabecera HTTP. Es el valor de appCodeName unido al de appVersion, separados por una barra. Devuelve el idioma del usuario.

El objeto navigator se emplea habitualmente para detectar el tipo y/o versin del navegador en las aplicaciones cuyo cdigo difiere para cada navegador. Adems, se emplea para detectar si el navegador tiene habilitadas las cookies y Java y tambin para comprobar los plugins disponibles en el navegador.

El objeto window
Representa la ventana completa del navegador Como todos los dems objetos heredan directa o indirectamente del objeto window, no es necesario indicarlo de forma explcita en el cdigo JavaScript. En otras palabras: window.frames[0] == frames[0] window.document == document Propiedades: name frames closed length Indica la cantidad de ventanas hijas que tiene una ventana. Es equivalente a windows.frames.length self opener Devuelve una referencia a la ventana que abri la ventana actual. Se suele usar para identificar la ventana que us el mtodo open del objeto window. parent top Devuelve una referencia a la ventana padre. Devuelve una referencia a la ventana de orden ms alto en el navegador
Pgina 38

Nombre de la ventana o marco (frame o iframe). Array que contiene los frames que emplea una pgina. Indica si la ventana est cerrada.

Devuelve una referencia a la ventana actual.

Autor: Daniel Vega

status

Devuelve o asigna un texto en la barra de estado del navegador.

defaultStatus Muestra el texto predefinido de la barra de estado. location Es un objeto "hijo" de window, que permite obtener o especificar la direccin URL de la ventana que se est viendo. Ej.: //Redirigir window.location.href = "http://www.sistemasvega.com.ar"; Otras propiedades del objeto location son: port hostname protocol pathname Devuelve el puerto mediante el que se accede al documento. Devuelve el nombre del servidor remoto o local (localhost). Informa el protocolo mediante el cual se accede al documento. Devuelve el camino luego del dominio.

Mtodos: moveTo (x, y) Sita la ventana en las coordenadas x e y, tomando como punto de origen la esquina superior izquierda de la pantalla. moveBy (x, y) Similar al anterior, Solo que mueve la ventana, tomando como punto de origen la ubicacin actual de la ventana. resizeTo (ancho, alto) Redimensiona la ventana del navegador hasta que su anchura sea igual a x y su altura sea igual a y. No se permiten valores negativos. resizeBy (ancho, alto) redimensiona la ventana del navegador de forma que su nueva anchura sea igual a (anchura_anterior + x) y su nueva altura sea igual a (altura_anterior + y). Se pueden emplear valores negativos para reducir la anchura y/o altura de la ventana. blur () Provoca que la ventana pierda el foco, es decir, pase a segundo plano. Cuando se llama a este mtodo, tambin se genera un evento onBlur. focus () scroll (x, y) Hace que la ventana pase a primer plano y provoca un evento onFocus. Desplaza el documento hasta las coordenadas x e y.

open ()

Permite abrir nuevas ventanas con una URL, un nombre y una serie de caractersticas.

Abrir ventana nueva window.open ("sitio", "nombreVentana", "caracteristicas"); toolbar: location: directories: status: menubar: scrollbars: resizable:
Autor: Daniel Vega

Barra de herramientas Barra de direcciones Barra de vinculos Barra de estado Barra de mens Barras de desplazamiento Establece si el usuario puede cambiar el tamao de la ventana.
Pgina 39

width: height: top: left: Ej:

Ancho de la ventana Alto de la ventana Posicin respecto de la parte superior de la pantalla. Posicin respecto de la parte izquierda de la pantalla.

<a href="javascript:window.open('http://www.google.com.ar', '_blank', 'toolbar=yes, location=yes, status=no, width=400, height=300')">Ir al sitio</a> Mtodo mediante eventos. <a href="#" onclick="Abrir('google.com)">Ir al sitio</a>

close () alert ("mensaje") confirm ("mensaje") prompt ("mensaje", "valor_inicial") setTimeout ("funcion", tiempo)

Cierra la ventana actual. Muestra una caja de alerta con un mensaje y un botn OK. Crea una ventana de confirmacin. Crea una ventana de dialogo con un cuadro de texto para editar.

Ejecuta la funcin especificada en el primer argumento, cada cierto tiempo especificado en milisegundos. clearTimeout (id) Impide que se ejecute el cdigo pendiente. setInterval (function, tiempo) Funcionamiento identico a setTimeout. Permite establecer la ejecucin peridica y repetitiva de una funcin clearInterval (id) Permite eliminar una repeticin peridica.

function muestraMensaje() { alert("Este mensaje se muestra cada segundo"); } var id = setInterval(muestraMensaje, 1000); // Despues de ejecutarse un determinado nmero de veces, se elimina el intervalo clearInterval(id);

Autor: Daniel Vega

Pgina 40

El objeto history
Permite navegar por el historial de las pginas que el usuario fue visitando. current url de la pgina actual.

back () para ir atrs forward () para ir adelante go (numero_del_documento o url) Carga el url indicado como parmetro. Ej: <a href="javascript:window.history.back()">Volver</a>

El objeto document
El objeto document es el nico que pertenece tanto al DOM como al BOM. Desde el punto de vista del BOM, el objeto document proporciona informacin sobre la propia pgina HTML. Este objeto contiene mtodos y propiedades relacionados con el documento HTML. Contiene tambin todos los elementos HTML de la pgina a los que podemos hacer referencia, como imgenes, links, formularios, elementos de formularios, etc. Propiedades: Propiedad lastModified referrer title URL Descripcin Devuelve la fecha de la ltima modificacin del documento. Devuelve la direccin de la pgina mediante la cual se lleg a la presente. Si no se lleg cliqueando en un link, devuelve el valor "empty". El texto de la etiqueta <title>. Similar a location.href. Retorna la url completa del documento.

Colecciones (arrays): anchors[] Contiene todas las anclas de la pgina (enlaces de tipo <a name="nombre_ancla"></a>) del documento. <html> <body> <a name="html">HTML Tutorial</a><br /> <a name="css">CSS Tutorial</a><br /> <a name="xml">XML Tutorial</a><br /> <p>Number of anchors: <script type="text/javascript"> document.write(document.anchors.length); //document.write(document.anchors[0].innerHTML); </script></p> </body> </html> applets[] embeds[] forms[] images[] links[] Mtodos Mtodo getElementById("id_control")
Autor: Daniel Vega

Contiene todos los applets de la pgina. Contiene todos los objetos embebidos en la pgina mediante la etiqueta <embed>. Contiene todos los formularios del documento. Contiene todas las imgenes del documento. Contiene todos los links del documento (del tipo <a href="enlace.html"></a>).

Descripcin Accede al primer elemento con el id especificado.

Pgina 41

getElementsByName("name_control") getElementsByTagName("tag")

Accede a todos los elementos con un nombre especificado. Accede a todos los elementos con un tag especfico.

El objeto location
El objeto location es uno de los objetos ms tiles del BOM. Debido a la falta de estandarizacin, location es una propiedad tanto del objeto window como del objeto document. El objeto location representa la URL de la pgina HTML que se muestra en la ventana del navegador y proporciona varias propiedades tiles para el manejo de la URL: Propiedad hash Descripcin El contenido de la URL que se encuentra despus del signo # (para los enlaces de las anclas) http://www.ejemplo.com/ruta1/ruta2/pagina.html#seccion hash = #seccion El nombre del servidor http://www.ejemplo.com/ruta1/ruta2/pagina.html#seccion host = www.ejemplo.com La mayora de las veces coincide con host, aunque en ocasiones, se eliminan las www del principio http://www.ejemplo.com/ruta1/ruta2/pagina.html#seccion hostname = www.ejemplo.com La URL completa de la pgina actual http://www.ejemplo.com/ruta1/ruta2/pagina.html#seccion URL = http://www.ejemplo.com/ruta1/ruta2/pagina.html#seccion Todo el contenido que se encuentra despus del host http://www.ejemplo.com/ruta1/ruta2/pagina.html#seccion pathname = /ruta1/ruta2/pagina.html Si se especifica en la URL, el puerto accedido http://www.ejemplo.com:8080/ruta1/ruta2/pagina.html#seccion port = 8080 La mayora de URL no proporcionan un puerto, por lo que su contenido es vaco http://www.ejemplo.com/ruta1/ruta2/pagina.html#seccion port = (vaco) El protocolo empleado por la URL, es decir, todo lo que se encuentra antes de las dos barras inclinadas // http://www.ejemplo.com/ruta1/ruta2/pagina.html#seccion protocol = http: Todo el contenido que se encuentra tras el smbolo ?, es decir, la consulta o "query string" http://www.ejemplo.com/pagina.php?variable1=valor1&variable2=valor2 search = ?variable1=valor1&variable2=valor2

host

hostname

href

pathname

port

protocol

search

Mtodos: // Mtodo assign() location.assign("http://www.ejemplo.com"); // Equivalente a location.href = "http://www.ejemplo.com" // Mtodo replace() location.replace("http://www.ejemplo.com"); // Similar a assign(), salvo que se borra la pgina actual del array history del navegador // Mtodo reload() location.reload(true); /* Recarga la pgina. Si el argumento es true, se carga la pgina desde el servidor. Si es false, se carga desde la cache del navegador */

El objeto screen
El objeto screen se utiliza para obtener informacin sobre la pantalla del usuario. Uno de los datos ms importantes que proporciona el objeto screen es la resolucin del monitor en el que se estn visualizando las pginas. Los diseadores de pginas web necesitan conocer las resoluciones ms utilizadas por los usuarios para adaptar sus diseos a esas resoluciones.
Autor: Daniel Vega Pgina 42

Propiedad availHeight availWidth colorDepth height width

Descripcin Altura de pantalla disponible para las ventanas Anchura de pantalla disponible para las ventanas Profundidad de color de la pantalla (32 bits normalmente) Altura total de la pantalla en pxel Anchura total de la pantalla en pxel

La altura/anchura de pantalla disponible para las ventanas es menor que la altura/anchura total de la pantalla, ya que se tiene en cuenta el tamao de los elementos del sistema operativo como por ejemplo la barra de tareas y los bordes de las ventanas del navegador. Adems de la elaboracin de estadsticas de los equipos de los usuarios, las propiedades del objeto screen se utilizan por ejemplo para determinar cmo y cuanto se puede redimensionar una ventana y para colocar una ventana centrada en la pantalla del usuario. El siguiente ejemplo redimensiona una nueva ventana al tamao mximo posible segn la pantalla del usuario: window.moveTo(0, 0); window.resizeTo(screen.availWidth, screen.availHeight);

Autor: Daniel Vega

Pgina 43

Los elementos de la pgina El objeto document tambin contiene todos los elementos de la pgina a los que podemos acceder para cambiar alguna de sus propiedades. La forma en que estn guardados dentro de document es como vectores, aunque tambin se puede acceder a ellos por un nombre, pero se debe establecer un nombre al element, mediante la propiedad name. Los hipervnculos de la pgina se almacenan en un vector document.links[], la cual va de 0 a document.links.length. var hp = ""; for(n=0; n < document.links.length; n++) { window.open(document.links[n], "_blank", "width=600,height=400"); } De la misma manera, se puede acceder a otros elementos del documento a travs de los objetos: Objeto anchors links applets images embeds forms forms[x].elements[y] Elemento Enlaces internos Enlaces fuera del documento Applets de Java Imgenes Elementos incrustados Formularios Elementos del formulario x

<form name="frmPrueba"> <input type="button" onClick="alert('Hola ' + document.forms.frmPrueba.elements.txtNombre.value);" value="Ejecutar" /> </form> Para acceder al contenido de un campo de un formulario: document.forms.frmPrueba.elements.txtNombre.value = "Texto de ejemplo";

Autor: Daniel Vega

Pgina 44

Los eventos de javascript

Los eventos son las acciones que realiza el usuario u otros elementos de la aplicacin. El nombre de los eventos se construye mediante el prefijo on, seguido del nombre en ingls de la accin asociada al evento. Evento onabort onblur onchange Descripcin Detener la carga Perder el foco Cuando el control pierde el foco y su valor ha sido modificado desde que recibi el foco. Pulsar un elemento Doble click Al no cargarse una imagen Conseguir el cursor o foco La tecla es presionada sobre un elemento La tecla es presionada y soltada sobre un elemento. La tecla es soltada sobre un elemento Terminar de cargar una pgina Botn de mouse presionado El mose se mueve mientras est sobre un elemento. Quitar el mouse de encima Pasar el mouse por encima (desde afuera) El botn del mouse es soltado sobre un elemento. Cuando un formulario es reseteado Cuando se modifica el tamao de la ventana. Seleccionar texto Enviar un formulario Salir de una pgina (descargarla) Elementos que lo admiten image <button>, <input>, <label>, <select>, <textarea>, <body> <input>, <select>, <textarea>

onclick ondblclick onerror onfocus onkeydown onkeypress onkeyup onload onmousedown onmousemove onmouseout onmouseover onmouseup onreset onresize onselect onsubmit onunload

Todos los elementos Todos los elementos image <button>, <input>, <label>, <select>, <textarea>, <body> Elementos de formulario y <body> Elementos de formulario y <body> Elementos de formulario y <body> <body> Todos los elementos Todos los elementos Todos los elementos Todos los elementos Todos los elementos <form> <body> <input>, <textarea> <body>

Algunos de los eventos anteriores (onclick, onkeydown, onkeypress, onreset y onsubmit) permiten evitar el comportamiento por defecto del evento si se devuelve el valor false. Por otra parte, las acciones tpicas que realiza un usuario en una pgina web pueden dar lugar a una sucesin de eventos. Si se pulsa por ejemplo sobre un botn de tipo submit se desencadenan los eventos onmousedown, onmouseup, onclick y onsubmit.

Autor: Daniel Vega

Pgina 45

Ej: Abrir un popup de noticias o publicidad al inicio de la pgina. <script type="text/javascript"> function MostrarNoticias(){ window.open("noticias.html", "_blank" , "width=300, height=350, toolbars=no, scrollbars=yes, resize=yes"); } </script> <body onLoad="MostrarNoticias();"> Ej: Imagenes rollover <a href="http://www.sistemas.com"> <img name="img01" src="imagen01.gif" onMouseOver="document.images.img01.src='imagen02.gif';" onMouseOut="document.images.img01.src='imagen01.gif';" /> </a> Ej: Combo men de navegacin. <form name="frmBuscador"> <select name="cboBuscador" onChange="window.location=document.forms.frmBuscador.elements.cboBuscador.value;" > <option value="#">Selecciona un buscador</option> <option value="http://www.google.com.ar">Google</option> <option value="http://www.yahoo.com.ar">Yahoo</option> <option value="http://www.bing.com">Bing</option> </select> </form>

Autor: Daniel Vega

Pgina 46