html css javascript

46
Autor: Daniel Vega Página 1 HTML - CSS - JAVASCRIPT Autor: Daniel Vega E-mail: [email protected] Versión: 20130215

Upload: franco-manzur

Post on 29-Dec-2015

101 views

Category:

Documents


4 download

TRANSCRIPT

Page 1: HTML CSS Javascript

Autor: Daniel Vega Página 1

HTML - CSS - JAVASCRIPT

Autor: Daniel Vega E-mail: [email protected]

Versión: 20130215

Page 2: HTML CSS Javascript

Autor: Daniel Vega Página 2

HTML .................................................................................................................................................................... 4

Estructura y etiquetas básicas ........................................................................................................................... 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

Presentación del texto ....................................................................................................................................... 7 Dar formato al texto ........................................................................................................................................... 7 Listas ................................................................................................................................................................. 8

Listas ordenadas ........................................................................................................................................... 8 Listas no ordenadas ...................................................................................................................................... 8 Lista de definiciones ...................................................................................................................................... 8

Hipervínculos ..................................................................................................................................................... 8 Valores especiales de target .......................................................................................................................... 8 Hipervínculos dentro de una página (Anclas) ................................................................................................. 9 Direcciones relativas a una base. .................................................................................................................. 9

Imágenes 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 línea (iframe) .................................................................................................................................. 14 Formularios ..................................................................................................................................................... 15 Atributos .......................................................................................................................................................... 15 Elementos del formulario: ................................................................................................................................ 16 Otros elementos .............................................................................................................................................. 17

CSS ..................................................................................................................................................................... 18 Ventajas .......................................................................................................................................................... 18 Formas de aplicación de estilos ....................................................................................................................... 18 Selectores ....................................................................................................................................................... 19 Pseudo-elementos ........................................................................................................................................... 19 Para ampliar los selectores y filtrar más la búsqueda 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 según 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 aritméticos ............................................................................................................................... 29 Operadores de comparación........................................................................................................................ 29 Operadores lógicos ..................................................................................................................................... 29 Operadores de asignación ........................................................................................................................... 30 Operador ternario ........................................................................................................................................ 30

Funciones ........................................................................................................................................................ 30 Estructuras de control ...................................................................................................................................... 30 Estructuras de control de objetos ..................................................................................................................... 32 Objetos ............................................................................................................................................................ 32

Creación de objetos ..................................................................................................................................... 32 Objetos predefinidos ........................................................................................................................................ 34

Objeto Array ................................................................................................................................................ 34 Objeto Date ................................................................................................................................................. 34

Page 3: HTML CSS Javascript

Autor: Daniel Vega Página 3

Objeto Math ................................................................................................................................................. 35 Objeto String ............................................................................................................................................... 35

Los objetos del navegador ............................................................................................................................... 37 Modelo de objetos del navegador según JavaScript ......................................................................................... 37

El objeto Navigator ...................................................................................................................................... 38 El objeto Windows ....................................................................................................................................... 38 El objeto history ........................................................................................................................................... 41 El objeto document ...................................................................................................................................... 41 Los eventos de javascript ............................................................................................................................ 45

Page 4: HTML CSS Javascript

Autor: Daniel Vega Página 4

HTML HyperText Markup Language – Lenguaje de marcado de hipertexto donde hipertexto hace referencia a la capacidad de usar los hipervinculos. Una página web html es un archivo de texto con extensión .html o .htm. Se compone de etiquetas (tags) que es la unidad básica del HTML y dan forma a todos los componentes de una página. Un tag es una instrucción que, dentro del archivo HTML, se encierra entre paréntesis angulares (símbolos menor y mayor). La mayor parte de las etiquetas de HTML están 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 diseñar una página si queremos que sea cien por cien compatible con todos los navegadores del mercado, ya que algunos usuarios no podrán apreciar la página completa. HTTP, el protocolo de comunicación entre un browser y un servidor web, es state-less, es decir, no mantiene el estado entre una petición y otra. La conexión se cierra al terminar la transferencia de una página, y por ello, en principio, no hay forma directa de relacionar la conexión constante de un usuario ni los valores existentes entre distintas páginas.

Estructura y etiquetas básicas 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 página</title>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

<meta name="description" content="Esta es una página 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 línea indica la definición del tipo de documento (html) y la versión del lenguaje utilizado (4.01). La etiqueta <meta> tiene usos múltiples:

Indica la descripción, el autor y las palabras clave de la página. Estos datos son indexados por los buscadores (Altavista, Google, Yahoo, Bing, etc.) para luego poder encontrar nuestra página en caso de que se realice alguna consulta.

También se indica el conjunto de caracteres utilizados en la página. La etiqueta <link> permite vincular un archivo externo a la página. 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>

Page 5: HTML CSS Javascript

Autor: Daniel Vega Página 5

El encabezado Dentro del HEAD se agrupará toda la información relativa a la página 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 página 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 estarán descargados antes de que la página se dibuje. El cuerpo El cuerpo de un archivo HTML es el que tendrá todo el contenido, textual, gráfico o multimedia de la página 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".

Page 6: HTML CSS Javascript

Autor: Daniel Vega Página 6

DOCTYPE Cada documento HTML requiere un tipo declaración. El "DOCTYPE" comienza el documento del HTML y le dice a un Validator qué versión del HTML utilizar en la comprobación de sintaxis del documento. El DTD específica 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 presentación 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 presentación 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 presentación 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 presentación 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">

Page 7: HTML CSS Javascript

Autor: Daniel Vega Página 7

Presentación del texto Una página 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 resolución de pantalla y el tamaño de ventana. Nuestro objetivo es hacer que nuestra página se vea lo mejor posible en todos los casos. Para ingresar espacios irrompibles en HTML se usa el código &nbsp; (non breaking space): &aacute; //á

&Oacute; //Ó

&ntilde; //ñ

Dar formato al texto <h1> a <h6> Etiquetas de títulos de distinta jerarquía. <p></p> Párrafo <hr /> Línea horizontal <br /> Salto de línea (break line) <div></div> Contenedor o bloque (comportamiento block) <span></span> Similar a div, solo que no inserta un salto de línea. (comportamiento inline) <b></b> Negrita (Se recomienda <strong>) <i></i> Cursiva (Se recomienda <em>) <code></code> Código de programación. <pre></pre> El texto que se escriba dentro de las etiquetas se mostrará respetando los espacios y

los saltos de línea tal cual lo escribamos en el archivo de texto. <sub></sub> Sub índice <sup></sup> Super índice

Page 8: HTML CSS Javascript

Autor: Daniel Vega Página 8

Listas

Listas ordenadas Son listas que llevan una numeración <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 número 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 viñetas. <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>

Hipervínculos Son links que abren nuevos documentos. <a href="destino" target="ventana">Texto del hipervínculo</a>

href="http://www.dominio.com/pag2.html"

href="pagina2.html"

href="Donwloads/Wallpapers/paisaje02.jpg"

href="../../pagina1.html"

href="mailto:[email protected]?subject=tema privado&[email protected]"

<a href="productos.html" target="principal">Productos</a>

El atributo target define la ventana o marco de destino en el que se abrirá el hipervínculo. Si no se coloca el atributo target, el archivo de destino se abrirá por defecto en la misma ventana.

Valores especiales de target _blank: Se muestra en una nueva ventana. _self: Se muestra en la misma ventana o frame donde está el enlace.

Page 9: HTML CSS Javascript

Autor: Daniel Vega Página 9

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

toda estructura de frames.

Hipervínculos dentro de una página (Anclas) Los vínculos dentro de la misma página se usan mucho para el caso de páginas largas con varias secciones. Para utilizarlos es necesario primero definir un punto de destino en alguna parte de la página. <a name="seccion01">Sección Animales</a>

<a href="#seccion01">Ir a sección Animales</a>

Forma para ir a otra página a una sección especifica: <a href="vacaciones/historia.html#avion">Sección aviones</a>

Direcciones relativas a una base. Si la página se encuentra dentro del mismo servidor, no es necesario colocar la dirección completa; se utilizan direcciones relativas. Pero también 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 página 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 quisiéramos obtener, tendríamos 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, estaríamos accediendo directamente a los documentos de "www.sitio.com".

Imágenes y mapas <img />

Atributo Descripción

align Deprecado. Alineación de la imagen. (baseline, top, middle, bottom, texttop, absmiddle, absbottom, left, right).

alt Texto alternativo en el caso de que la imagen no se muestre por algún problema.

border Deprecado. Espesor del borde en pixeles.

height Altura

hspace Deprecado. Espacio horizontal en pixeles alrededor de la imagen.

src Ruta absoluta o relativa de la imagen.

title Texto que se muestra en forma de tooltip

vspace Deprecado. Espacio vertical en pixeles alrededor de la imagen.

width Ancho

Page 10: HTML CSS Javascript

Autor: Daniel Vega Página 10

Tablas Es una grilla formada por filas y columnas. Se usan para la presentación ordenada de datos, alineación y presentación de contenido. Cada intersección entre una fila y una columna se denomina celda. Las celdas son los únicos elementos de una tabla que pueden contener objetos, como textos, imágenes, etc. <table class="cssTable">

<caption>Titulo de la tabla</caption>

<tr>

<th></th>

<th></th>

</tr>

<tr>

<td></td>

<td></td>

</tr>

</table>

Propiedad Descripción

align center, right, left

border Ancho del borde.

cellpadding Margen de celda; espacio al borde de la misma, respecto al contenido.

cellspacing Distancia entre celdas de la misma tabla.

rules Indica por dónde aparecerán los bordes de una tabla (none, groups, rows, cols, all)

width Ancho

Propiedades para tr, td y th Propiedad Descripción

align Alineación horizontal (right, left, middle)

bgcolor Color de fondo

colspan Especifica el número de columnas unificadas por esta celda. El valor "0" indica que se unifican todas las celdas desde esta posición hasta la última columna en la sección contenedora.

height Deprecado. Alto

rowspan Especifica el número de filas unificadas por esta celda. El valor "0" significa que se unifican todas las celdas desde esta posición hasta la última fila en la sección contenedora.

valign Alineación vertical (bottom, top, middle)

width Deprecado. Ancho

Agrupar filas y columnas Este recurso se emplea cuando se desea aplicar el mismo formato a un grupo de varias filas o columnas, según el caso. Las filas se agrupan mediante una clasificación: <thead> filas de cabecera <tbody> filas del cuerpo <tfoot> 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>

Page 11: HTML CSS Javascript

Autor: Daniel Vega Página 11

</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>Descripción</td>

<td>Dirección</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>

Page 12: HTML CSS Javascript

Autor: Daniel Vega Página 12

Ejemplo de tabla con columnas agrupadas, filas agrupadas y varios atributos para cada tag que definirán el estilo visual: <table border="1" frame="border" rules="groups"

summary="Funcionalidad de archivos HTML en diferentes versiones de Internet

Explorer">

<caption>Representación de cómo 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>

Page 13: HTML CSS Javascript

Autor: Daniel Vega Página 13

<tr>

<td>7</td>

<td>send.php</td>

<td>Ok</td>

<td>Ok</td>

</tr>

</tbody>

</table>

Page 14: HTML CSS Javascript

Autor: Daniel Vega Página 14

Marcos (Frames) Permiten dividir una página en distintos sectores. Cada sector podrá contener una página diferente e independiente. De esta forma podemos, colocar sectores de la página que son fijos y solo actualizar el contenido de uno de los marcos. La página de marcos (frameset) no tiene información visible. Solo describe cómo está organizada la disposición de los distintos marcos que la componen. Tienen una sección HEAD y otra FRAMESET en vez de BODY. Cada frame muestra una página HTML común y corriente; por lo tanto, en la página 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 Descripción

frameborder 1 o 0

marginheight Margen superior e inferior con el contenido.

marginwidth Margen izquierdo y derecho con el contenido.

noresize Deshabilita que el usuario cambie el tamaño de los marcos.

scrolling Determina la aparición o no de la barra de desplazamiento. (yes, no, auto)

<noframes> Mensaje </noframes> Muestra un mensaje de que el navegador no soporta marcos.

Marcos anidados Consiste en colocar una nueva etiqueta <frameset> dentro de la definición del conjunto de marcos. Este tipo de diseño se suele utilizar para colocar el titulo, nombre o logo del sitio o empresa en el primer marco, una barra de navegación con links en el segundo y el contenido que irá cambiando en el tercero y más grande. <frameset rows="100, *">

<frame src="pag01.html">

<frameset cols="20%, *">

<frame src="pag02.html">

<frame src="pag03.html">

</frameset>

</frameset>

Marcos en línea (iframe) Permite insertar un marco entre el contenido del documento. <iframe> </iframe>

Atributo Descripción

frameborder Determina la aparición de un borde (1 o 0)

height Altura.

height y width Alto y ancho en pixeles o en porcentaje

marginheight

Margen superior en inferior con el contenido.

marginwidth Margen izquierdo y derecho con el contenido

name Nombre del marco.

scrolling Define si se muestran las barras de desplazamiento. (auto, yes, no)

src Ruta de la página inicial para el marco.

width Ancho.

Page 15: HTML CSS Javascript

Autor: Daniel Vega Página 15

Formularios HTML permite la interacción 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 información por parte del usuario que luego será enviada al servidor. Los formularios están creados simplemente en HTML. Sirven para enviar valores de datos al servidor para que sean procesados por algún lenguaje de servidor como PHP, ASP.Net, etc. Es muy importante que cada campo del formulario tenga un nombre (parámetro name del campo) para poder identificarlo luego. El código PHP se puede utilizar adentro del formulario para, por ejemplo, asignar valores por defecto o desactivar ciertos campos según la información disponible (variable de sesión, 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 envío de datos.

Existen dos maneras de enviar la información 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 interrogación (?) separa el nombre del archivo de los valores. Luego de éste siempre se ubica el nombre del valor, un símbolo de igualdad (=) y el dato solicitado. Por cada dato adicional se deberá incorporar el separador & (ampersand). post: los datos son enviados a través de las cabeceras del protocolo HTTP y son invisibles para el usuario. ¿Qué método usar? Hay que tener en cuenta algunas cosas:

Algunos navegadores no soportan más de 255 caracteres en la línea de direcciones (URL), por lo que si la información enviada por el método GET supera esa cantidad de caracteres, los datos serán truncados (borrados a partir de la posición 256), con la consecuente pérdida de información.

El envío de archivos adjuntos se debe realizar obligatoriamente con el método POST.

Cuando se trate de información vital (contraseñas, números de tarjeta de crédito, 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, eñes, etc. Éstos serán convertidos a un código especial que luego debe ser reconvertido a la normalidad.

En la URL tampoco deberían 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 envío, éste es transformado a Carlos%20Daniel. El código %20 es el que identifica al espacio en blanco.

Cuando los datos por enviar son pocos (uno o dos), como un identificador, código o documento, es recomendable usar GET, ya que es más veloz.

Si utilizamos el método GET, podremos hacer uso del envío de datos de una página a otra sin necesidad de emplear un formulario, sino a través de hipervínculos indicando los datos dentro de la URL.

Page 16: HTML CSS Javascript

Autor: Daniel Vega Página 16

enctype: Especifica el tipo de codificación que utiliza el explorador cuando envía datos del formulario al servidor. Tipo de codificación Descripción

application/x-www-form-urlencoded Los datos del formulario están codificados como pares de nombre y valor. Este es el formato de codificación por defecto en caso de que no se especifique el valor de este atributo.

multipart/form-data Los datos del formulario están codificados como mensaje con partes independientes para cada control de la página. Este debe ser usado cuando usamos el elemento input type="file".

text/plain Los datos del formulario están codificados en texto sin formato, sin controles ni caracteres de formato.

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 verificación) <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" />

Botón submit <input type="submit" name="btnProcesar" value="Procesar" />

Botón reset <input type="reset" name="btnReset" value="Limpiar" />

Botón de acción <input type="button" name="btnProcesar" value="Procesar" onClick="Procesar();" />

Page 17: HTML CSS Javascript

Autor: Daniel Vega Página 17

Botón 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> Agrupa campos <legend> Para colocar un nombre al grupo de campos Ej: <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 Prefijo Ejemplo

input type='text' txt txtName

input type='password' txt txtPassword

textarea txt txtComment

input type='checkbox' chk chkEnabled

input type='radio' rdb rdbActive

select cbo cboCountries

input type='hidden' hf hfProductId

input type='file' fu fuLogo

input type='submit' btn btnSave

input type='reset' btn btnReset

input type='button' btn btnValidate

input type='image' btn btnProcess

Page 18: HTML CSS Javascript

Autor: Daniel Vega Página 18

CSS CSS (cascade style sheets) es un lenguaje usado para definir la presentación 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 páginas web y cualquiera de sus elementos. El W3C (World Wide Web Consortium) (www.w3c.org) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar 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 estándar, podemos ir a la página de la W3C: www.w3c.org/style/css Y luego buscar el link CSS validator

Ventajas

Permite concentrar en un único lugar la definición de estilos.

Mediante un bloque de código dentro de la misma página o en un archivo separado se controla los estilos de ciertos elementos, en vez de dar formato a cada elemento en forma individual.

Es más mantenible, ya que para modificar el estilo, solo lo hacemos en un solo lugar.

Formas de aplicación de estilos Dentro del documento, en la sección 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 extensión .css se coloca directamente el código css. Para vincular dicho archivo con cada página web. <link rel="stylesheet" type="text/css" href="cssMain.css" />

En la misma etiqueta: (estilo inline) <p style="font-family:arial;">texto</p>

Page 19: HTML CSS Javascript

Autor: Daniel Vega Página 19

Selectores Es la forma de poder identificar a que elementos queremos aplicar algún estilo. Los selectores pueden ser:

Etiquetas HTML

Nombres que identifican el atributo #id del elemento HTML.

Nombres creados por nosotros (.nombreClase)

Jerarquía 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 aplicación de estilos css:

Se aplican las CSS propias del browser.

Se aplican las CSS externas.

Se aplican las CSS incrustadas dentro de la página HTML.

Se aplican los estilos en línea. Selector Significado (Afecta…)

Cómo este situado el tag respecto a otros tags

* cualquier elemento

E cualquier etiqueta de tipo E

E F 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 algún evento de usuario

E.E:link, E:visited Al elemento E si E es una etiqueta que contiene un hipervínculo que todavía 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, E:lang(c)

Cuando el ratón este sobre el elemento (hover) o cuando tiene el foco (focus). Al elemento E si el documento está en el idioma c (especificado en la etiqueta HTML)

tags con atributos

E[atributo] Cualquier etiqueta E que tenga el atributo, con cualquier valor.

E[atributo="valor"] A las etiquetas E cuya atributo tengan ese valor.

E[atributo~="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.

E[atributo|="valor"] El valor del atributo es igual o comienza con la palabra y este es inmediatamente seguido por guión medio (-).

E[atributo^="valor"] El valor del atributo comienza con el valor especificado.

E[atributo$="valor"] El valor del atributo finaliza con el valor especificado.

E[atributo*="value"] El valor del atributo contiene el valor value especificado.

tag.clase Un tag con el atributo class igual a clase. Es una forma abreviada que permite CSS de poner tag[class~="valor"].

tag#algo Cualquier elemento HTML con su propiedad id="algo"

.algo Cualquier elemento con la propiedad class="algo"

#algo Cualquier elemento con la propiedad id="algo"

Pseudo-elementos Para ampliar los selectores y filtrar más la búsqueda de elementos. :first-line Se refiere a la primera línea del elemento, normalmente usado para elementos de texto.

Page 20: HTML CSS Javascript

Autor: Daniel Vega Página 20

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, también 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 algún contenido delante de un elemento. h1:before { content:"BEFORE" }

:after Elemento usado para insertar algún 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; } también: #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 Además nos permite utilizar varios pseudo-elementos sobre un mismo elemento. p {font-size: 12pt}

Page 21: HTML CSS Javascript

Autor: Daniel Vega Página 21

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

Page 22: HTML CSS Javascript

Autor: Daniel Vega Página 22

Formato de links a:link {text-decoration:none;}

a:active{color:red;}

a:hover{ text-decoration:underline}

a:visited{text-decoration:none}

Estilo según el lenguaje <html lang="es">

Propiedades y valores Cuando se especifica algún número como valor, hay que indicar también su unidad. Unidades relativas: em: tamaño relativo al de la fuente utilizada en el elemento en que se aplica. xm: tamaño relativo tomando como referencia la altura de las letras minúsculas de la fuente. px: píxeles, unidad relativa, en base a la resolución de pantalla. Unidades absolutas: in: inches (pulgadas). 1 pulgada equivale a 25.4 milímetros. cm: centímetros mm: milímetros pt: points (puntos). Los puntos equivalen a 0.35 milímetros o 1/72 pulgadas. pc: picas. 1 pica equivale a 12 puntos, 4.23 milímetros o 1/6 de pulgada.

El modelo de caja En realidad, todos los elementos de una web (párrafos, enlaces, imágenes, tablas, etc.) son cajas rectangulares. Los navegadores sitúan estas cajas de la forma que nosotros les hayamos indicado para maquetar la página. Hay dos tipos de cajas: block e inline. Los elementos block rompen el flujo de maquetación. Esto es, aparecen solos, insertando "saltos de línea". Los elementos inline siguen el flujo, y están 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 próximo elemento). Se puede determinar las propiedades de los bordes de una sola vez para todos los bordes por igual o especificar características diferentes para cada uno de los cuatro bordes.

Page 23: HTML CSS Javascript

Autor: Daniel Vega Página 23

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: ningún borde dotted: borde punteado dashedd: borde con guiones solid: línea solida double: doble línea solida groove: muestra borde con sombra ridge: efecto opuesto a groove inset: efecto 3D outset: efecto 3D opuesto a inset background: Color del fondo por nombre o un valor hexadecimal.

Page 24: HTML CSS Javascript

Autor: Daniel Vega Página 24

Bloques y capas (layers) Una capa es una división, una parte de la página, 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 más 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 distinción 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 cómo 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 página:

static: Caja normal, siguiendo el flujo de contenido.

relative: La caja se ubica en relación con el flujo normal de contenido.

absolute: La posición es especificada con las propiedades left, right, top y bottom. La caja se ubica en un lugar fijo del documento.

fixed: La posición se indica de igual forma que absolute, pero la caja queda fija aún al desplazar la página. La caja se ubica en relación 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 página y con respecto a otras.

Propiedades para el trabajo con texto: font-family: Fuente de letra (arial, verdana, etc.) font-size: Tamaño de la fuente. font-style: normal, italic(cursiva) font-variant: normal, small-caps (las letras minúsculas se ven como las mayúsculas pero más chicas) font-weight: normal, bold, bolder, lighter. O valores del 100 al 900. font-stretch: Separación entre letras.

CSS Reseter Todos los elementos HTML tienen por defecto unos atributos CSS predeterminados según 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 solución a veces es resetear tus estilos. El consorcio W3C, junto con su especificación de CSS 2.11 del 23 de abril de 2009, publicó en su recomendación, un valor por defecto para cada propiedad de CSS que deberían adoptar los agentes de usuario. Debido a que algunos navegadores hicieron caso omiso a sus indicaciones, los diseñadores web se han visto obligados a recurrir al uso de este tipo de trucos para garantizar la correcta visualización en la mayoría de navegadores. Link: http://www.cssreset.com/

Page 25: HTML CSS Javascript

Autor: Daniel Vega Página 25

JavaScript Es un lenguaje de programación interpretado (no requiere compilación) que se ejecuta del lado del cliente (en el browser). Está pensado para agregar interactividad con el usuario a las páginas HTML o para controlar ciertos aspectos de los formularios web, imágenes y demás 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 mayoría de los navegadores soportan este lenguaje, que se ejecuta en la aplicación cliente, pero no todos lo soportan del mismo modo, por lo tanto habrá que detectar el browser usado y adaptar el código. Se puede incluir el código dentro de la sección <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 página que estás viendo requiere para su funcionamiento el uso de

JavaScript.

Si lo has deshabilitado intencionadamente, por favor vuelve a activarlo.</p>

</noscript>

</body>

Sintaxis // Comentario de una línea. /* codigo */ Comentario multilínea Cada instrucción termina con punto y coma (;). Las funciones propias del lenguaje se escriben en minúsculas. Es sensible a mayúsculas y minúsculas.

Variables No exige la definición explícita de las variables. Es posible declarar la variable con solo utilizarla por primera vez. También se puede declarar usando la palabra reservada var. var a;

var miVariable1;

var edad = 25;

Javascript asigna automáticamente el tipo de dato, según 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

Page 26: HTML CSS Javascript

Autor: Daniel Vega Página 26

number

boolean

object

null

undefined typeof (variable) Devuelve el tipo de dato de la 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 todavía 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 Carácter Significado

\n Salto de línea

\r Retorno de carro

\f Salto de página

\t Tabulación

\\ Barra invertida (\)

\' Comilla simple

\" Comilla doble

\b Carácter 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, automáticamente 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 instrucción, JavaScript crea automáticamente una variable global llamada variable2 y le asigna el valor correspondiente. El ámbito de una variable (llamado scope en inglés) 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);

Page 27: HTML CSS Javascript

Autor: Daniel Vega Página 27

Cuando se ejecuta el código JavaScript anterior, su resultado no es el esperado, ya que no se muestra por pantalla ningún mensaje. La variable mensaje se ha definido dentro de la función y por tanto es una variable local que solamente está definida dentro de la función. Cualquier instrucción que se encuentre dentro de la función puede hacer uso de la variable. Sin embargo, cualquier instrucción que se encuentre en otras funciones o fuera de cualquier función no tendrá definida la variable mensaje. Además de variables locales, también existe el concepto de variable global, que está definida en cualquier punto del programa (incluso dentro de cualquier función). var mensaje = "Mensaje de prueba";

function muestraMensaje() {

alert(mensaje);

}

El código JavaScript anterior define una variable fuera de cualquier función. Este tipo de variables automáticamente se transforman en variables globales y están disponibles en cualquier punto del programa. De esta forma, aunque en el interior de la función no se ha definido ninguna variable llamada mensaje, la variable global creada anteriormente permite que la instrucción alert() dentro de la función muestre el mensaje correctamente. Si una variable se declara fuera de cualquier función, automáticamente se transforma en variable global independientemente de si se define utilizando la palabra reservada var o no. Sin embargo, en el interior de una función, las variables declaradas mediante var se consideran locales y el resto se transforman también automáticamente 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 colisión entre las variables globales y locales, dentro de una función 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 código 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 función tiene más prioridad que la variable global del mismo nombre, pero solamente dentro de la función. Si no se define la variable dentro de la función con la palabra reservada var, en realidad se está modificando el valor de la variable global: var mensaje = "gana la de fuera";

Page 28: HTML CSS Javascript

Autor: Daniel Vega Página 28

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 recomendación general es definir como variables locales todas las variables que sean de uso exclusivo para realizar las tareas encargadas a cada función. Las variables globales se utilizan para compartir variables entre funciones de forma rápida.

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

eval("document.write(" + miTexto + ")");

isNaN()

Esta función devuelve un booleano dependiendo de si lo que recibe es un número o no. Lo único que puede recibir es un número o la expresión NaN. Si recibe un NaN devuelve true y si recibe un número devuelve false. Ej: miInteger = parseInt("A3.6")

isNaN(miInteger)

miFloat = parseFloat("4.7")

isNaN(miFloat)

parseInt (string) parsea un string y devuelve un entero. parseFloat (string) parsea un string y devuelve un numero flotante. toString()

Este método lo tienen todos los objetos y se usa para convertirlos en cadenas. El resultado depende del tipo de dato al que se aplique: Número: Devuelve el número en formato string Booleano: Devuelve las cadenas "true" o "false" Objeto: Devuelve la cadena "[object NombreObjeto]". Función: Devuelve una cadena con la definición de la función y su código. Vector: Devuelve una cadena con los elementos del vector separados por coma.

Ej: var numero = 1342

var cadena = numero.toString();

var cadena2 = (56778).toString();

var cadena3 = (0xAF76).toString(16);

instanceof Determina la clase concreta de un objeto. var variable1 = new String("hola mundo");

typeof variable1; // devuelve "object"

Page 29: HTML CSS Javascript

Autor: Daniel Vega Página 29

variable1 instanceof String; // devuelve true

Operadores

Operadores aritméticos * Multiplicación / División % Módulo (resto de una división entera) + Suma - Resta ++ Incremento -- Decremento

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

Operadores lógicos ! Negación && Y || O

Page 30: HTML CSS Javascript

Autor: Daniel Vega Página 30

Operadores de asignación = += -= *=

Operador ternario variable = (condicion) ? valor1 : valor2; Ej: var saludo;

saludo = (hora > 12) ? "Buenas tardes" : "Buen día";

Funciones function Sumar(x, y)

{

z = x + y;

return z;

}

Llamada: var resultado = Sumar(18, 19);

Si a una función se le pasan más parámetros que los que ha definido, los parámetros sobrantes se ignoran. Si se pasan menos parámetros que los que ha definido la función, al resto de parámetros hasta completar el número correcto se les asigna el valor undefined. Las funciones también se pueden crear mediante lo que se conoce como "function literals" o "funciones anónimas" y que consiste en definir la función con una expresión en la que el nombre de la función es opcional. function Sumar(a, b) {

return a + b;

}

var miFuncion = function(a, b) { return a + b; }

Las funciones anónimas son ideales para los casos en los que se necesita definir funciones sencillas que sólamente se utilizan una vez y para las que no es necesario crear una función tradicional con nombre.

Estructuras de control if(expresion)

{

//acciones a realizar si la condición es verdadera

}

else

{

//acciones a realizar si la condición no se cumplió

}

switch(miVariable)

{

case 1:

//Acciones

break;

case 2:

//Acciones

Page 31: HTML CSS Javascript

Autor: Daniel Vega Página 31

break;

default:

//Acciones por predefinición

}

for(inicio, condicion, incremento)

{

//Codigo

}

while(condicion)

{

//Codigo

}

do

{

//Codigo

}while(condicion)

Page 32: HTML CSS Javascript

Autor: Daniel Vega Página 32

Estructuras de control de objetos Con el bucle for…in 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, métodos. objeto.propiedad objeto.metodo(parametros)

Creación de objetos Se asemeja bastante a la creación de una función. Las propiedades y métodos 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; //método.

}

function correr(){

alert("El amigo " + this.nombre + " está corriendo");

}

Instanciar un objeto: objAmigo = new Amigo("Fernando", "Gambino", "42911188", "[email protected]");

Para acceder a sus propiedades: document.write("<br />Nombre: "+ objAmigo.nombre);

document.write("<br />Apellido: "+ objAmigo.apellido);

document.write("<br />Telefono: "+ objAmigo.telefono);

document.write("<br />Email: "+ objAmigo.correo);

Page 33: HTML CSS Javascript

Autor: Daniel Vega Página 33

Para ejecutar sus métodos: objAmigo.correr();

Para recorrer el objeto con for…in: for(i in objAmigo)

{

document.write("<br />"+ i +": "+ objAmigo[i]);

}

Si hay problemas con los caracteres (acentos, eñes) verificar los códigos HTML: http://www.ascii.cl/htmlcodes.htm A un objeto se le pueden seguir añadiendo propiedades tras ser definido. Para ello se usa la palabra prototype. objAmigo.prototype.direccion = null;

objAmigo.direccion = "alvear 123";

Page 34: HTML CSS Javascript

Autor: Daniel Vega Página 34

Objetos predefinidos

Objeto Array Con esta clase manejamos los arrays, que pueden ser numéricos o asociativos miVector = new Array(10); //El argumento que define la capacidad del array es

opcional.

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 Devuelve la longitud del vector. (ej: objArray.length;) concat (otroVector)

Agrega los elementos de un vector (pasado como parámetro) al vector que invoca el método.

sort () Orden alfabéticamente los elementos del vector. reverse () Invierte el orden de los elementos del array. 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 () Añade un elemento al final del array. El array original se modifica y aumenta su longitud una unidad. También es posible añadir más 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 () Añade un elemento al principio del array. El array original se modifica y aumenta su longitud en una unidad. También es posible añadir más de un elemento a la vez.

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(año, mes, día, hora, minutos, segundos)

miFecha = new Date(año, mes, día)

Métodos: getDate() Devuelve el día del mes del 1 al 31. getDay() Devuelve el día de la semana del 0 (domingo) al sábado (6). getMonth() Devuelve el mes de 0 a 11. getHours() Devuelve la hora. getMinutes() Devuelve los minutos.

Page 35: HTML CSS Javascript

Autor: Daniel Vega Página 35

getSeconds() Devuelve los segundos. getMiliseconds() Devuelve los milisegundos. getTime()

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

getFullYear() Devuelve el año en 4 cifras. getYear() Devuelve el año en 2 cifras. Cada método get() mostrado anteriormente tiene su correspondiente método set() que permite establecer el valor de cada una de las propiedades.

Objeto Math Este objeto permite realizar tareas matemáticas. Math.PI Número PI. (3.14159) abs (numero) Devuelve el valor absoluto del número pasado como parámetro. sin(), cos(), tan() Funciones trigonométricas, reciben el argumento en radianes. asin(), acos(), atan() Funciones trigonométricas inversas. exp(), log() Exponenciación y logaritmo, base e. ceil (numero) Devuelve el entero más pequeño mayor o igual al argumento.

Redondea hacia arriba al entero mas cerca. Ej: Math.ceil(0.6); //1

floor () Devuelve el entero más grande menor o igual al argumento.

Redondea hacia abajo al entero mas cerca. Ej: Math.floo(0.6); //0

round () Devuelve el entero más cercano o igual al argumento. min (a, b), max (a, b) Devuelve el menor (o mayor) de sus dos argumentos. pow (base, exp) Exponenciación. sqrt (base, exp) Raíz.

Objeto String length Longitud de la cadena. chartAt (n) Devuelve el carácter ubicado en la posición indicada. charCodAt (n) Similar al anterior, solo que devuelve el código ASCII. indexOf (cadena2)

Busca la cadena2 en la cadena que invoca el método. Si la encuentra devuelve la posición, si no, -1.

lastIndexOf (cadena2) Devuelve la última posición en la que se encuentra el carácter indicado dentro de la cadena de texto.

Si no se encuentra, devuelve -1.

concat (cadena2) Se emplea para concatenar varias cadenas de texto. substr (indice, n) Devuelve una parte de la cadena contando n caracteres a partir de la posición índice. substring (inicio, final)

Devuelve la subcadena comprendida entre las posiciones indicadas. La posición inicio esta incluida y la final no.

toLowerCase () Transforma la cadena a minúsculas. toUpperCase () Transforma la cadena a mayúsculas. split (separador)

Page 36: HTML CSS Javascript

Autor: Daniel Vega Página 36

Convierte una cadena de texto en un array de cadenas de texto a partir de un carácter delimitador.

Objeto Number La clase Number permite definir variables de tipo numérico independientemente de si el valor es entero o decimal. valueOf() Devuelve el valor numérico almacenado. toFixed() Trunca el número de decimales de un número al valor indicado como parámetro. var variable1 = new Number(3.141592);

var variable2 = variable1.toFixed(); // variable2 = 3

var variable3 = variable1.toFixed(2); // variable3 = 3.14

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

Page 37: HTML CSS Javascript

Autor: Daniel Vega Página 37

Los objetos del navegador El modelo de objetos del navegador se organiza jerárquicamente. navigator -> window -> document El objeto navigator contiene información 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 página. El objeto document tiene como hijos a todos los objetos de una página web. window.self.document.write("Hola mundo");

window.document.write("Hola mundo");

document.write("Hola mundo");

Modelo de objetos del navegador según JavaScript

Page 38: HTML CSS Javascript

Autor: Daniel Vega Página 38

El objeto navigator Permite obtener información sobre el propio navegador. En Internet Explorer, el objeto navigator también se puede acceder a través del objeto clientInformation Aunque es uno de los objetos menos estandarizados, algunas de sus propiedades son comunes en casi todos los navegadores. A continuación se muestran algunas de esas propiedades: Propiedad / Método Descripción

appCodeName Devuelve el código de aplicación del navegador.

appName Devuelve el nombre del navegador.

appMinorVersion (Sólo Internet Explorer) Cadena que representa información extra sobre la versión del navegador

appVersion Devuelve el número de versión del navegador.

browserLanguage Devuelve el idioma del navegador.

connectionSpeed Proporciona la velocidad actual de conexión a la red.

cookieEnabled Averigua si el usuario tiene habilitadas las cookies.

cpuClass Informa el tipo de procesador de la computadora del usuario.

javaEnabled Averigua si el navegador tiene JAVA instalado.

language Cadena que representa el idioma del navegador.

mimeTypes Array con los tipos MIME soportados por el navegador.

onLine (Sólo Internet Explorer) Boolean que indica si el navegador está conectado a Internet.

platform Devuelve el tipo de sistema operativo.

plugins Devuelve un array con los nombres de los plugins instalados.

systemLanguage Devuelve el idioma del sistema.

userAgent Especifica el agente de usuario que se envía en la cabecera HTTP. Es el valor de appCodeName unido al de appVersion, separados por una barra.

userLanguage

Devuelve el idioma del usuario.

El objeto navigator se emplea habitualmente para detectar el tipo y/o versión del navegador en las aplicaciones cuyo código difiere para cada navegador. Además, se emplea para detectar si el navegador tiene habilitadas las cookies y Java y también para comprobar los plugins disponibles en el navegador.

El objeto window Representa la ventana completa del navegador Como todos los demás objetos heredan directa o indirectamente del objeto window, no es necesario indicarlo de forma explícita en el código JavaScript. En otras palabras: window.frames[0] == frames[0]

window.document == document

Propiedades: name Nombre de la ventana o marco (frame o iframe). frames Array que contiene los frames que emplea una página. closed Indica si la ventana está cerrada. length

Indica la cantidad de ventanas hijas que tiene una ventana. Es equivalente a windows.frames.length

self Devuelve una referencia a la ventana actual. opener

Devuelve una referencia a la ventana que abrió la ventana actual. Se suele usar para identificar la ventana que usó el método open del objeto window.

parent Devuelve una referencia a la ventana padre. top Devuelve una referencia a la ventana de orden más alto en el navegador

Page 39: HTML CSS Javascript

Autor: Daniel Vega Página 39

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 dirección 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 Devuelve el puerto mediante el que se accede al documento. hostname Devuelve el nombre del servidor remoto o local (localhost). protocol Informa el protocolo mediante el cual se accede al documento. pathname Devuelve el camino luego del dominio.

Métodos: moveTo (x, y)

Sitúa 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 ubicación 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 método, también se genera un evento onBlur.

focus () Hace que la ventana pase a primer plano y provoca un evento onFocus. scroll (x, y) Desplaza el documento hasta las coordenadas x e y.

open () Permite abrir nuevas ventanas con una URL, un nombre y una serie de características. Abrir ventana nueva

window.open ("sitio", "nombreVentana", "caracteristicas");

toolbar: Barra de herramientas location: Barra de direcciones directories: Barra de vinculos status: Barra de estado menubar: Barra de menús scrollbars: Barras de desplazamiento resizable: Establece si el usuario puede cambiar el tamaño de la ventana.

Page 40: HTML CSS Javascript

Autor: Daniel Vega Página 40

width: Ancho de la ventana height: Alto de la ventana top: Posición respecto de la parte superior de la pantalla. left: Posición respecto de la parte izquierda de la pantalla. Ej: <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>

Método mediante eventos. <a href="#" onclick="Abrir('google.com)">Ir al sitio</a>

close () Cierra la ventana actual. alert ("mensaje") Muestra una caja de alerta con un mensaje y un botón OK. confirm ("mensaje") Crea una ventana de confirmación. prompt ("mensaje", "valor_inicial") Crea una ventana de dialogo con un cuadro de texto para editar. setTimeout ("funcion", tiempo)

Ejecuta la función especificada en el primer argumento, cada cierto tiempo especificado en milisegundos.

clearTimeout (id) Impide que se ejecute el código pendiente.

setInterval (function, tiempo)

Funcionamiento identico a setTimeout. Permite establecer la ejecución periódica y repetitiva de una función clearInterval (id)

Permite eliminar una repetición periódica. function muestraMensaje() {

alert("Este mensaje se muestra cada segundo");

}

var id = setInterval(muestraMensaje, 1000);

// Despues de ejecutarse un determinado número de veces, se elimina el intervalo

clearInterval(id);

Page 41: HTML CSS Javascript

Autor: Daniel Vega Página 41

El objeto history Permite navegar por el historial de las páginas que el usuario fue visitando. current url de la página actual. back () para ir atrás forward () para ir adelante go (numero_del_documento o url) Carga el url indicado como parámetro. 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 información sobre la propia página HTML. Este objeto contiene métodos y propiedades relacionados con el documento HTML. Contiene también todos los elementos HTML de la página a los que podemos hacer referencia, como imágenes, links, formularios, elementos de formularios, etc. Propiedades: Propiedad Descripción

lastModified Devuelve la fecha de la última modificación del documento.

referrer Devuelve la dirección de la página mediante la cual se llegó a la presente. Si no se llegó cliqueando en un link, devuelve el valor "empty".

title El texto de la etiqueta <title>.

URL Similar a location.href. Retorna la url completa del documento.

Colecciones (arrays): anchors[]

Contiene todas las anclas de la página (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[] Contiene todos los applets de la página. embeds[] Contiene todos los objetos embebidos en la página mediante la etiqueta <embed>. forms[] Contiene todos los formularios del documento. images[] Contiene todas las imágenes del documento. links[] Contiene todos los links del documento (del tipo <a href="enlace.html"></a>). Métodos

Método Descripción

getElementById("id_control") Accede al primer elemento con el id especificado.

Page 42: HTML CSS Javascript

Autor: Daniel Vega Página 42

getElementsByName("name_control") Accede a todos los elementos con un nombre especificado.

getElementsByTagName("tag") Accede a todos los elementos con un tag específico.

El objeto location El objeto location es uno de los objetos más útiles del BOM. Debido a la falta de estandarización, location es una propiedad tanto del objeto window como del objeto document. El objeto location representa la URL de la página HTML que se muestra en la ventana del navegador y proporciona varias propiedades útiles para el manejo de la URL: Propiedad Descripción

hash El contenido de la URL que se encuentra después del signo # (para los enlaces de las anclas) http://www.ejemplo.com/ruta1/ruta2/pagina.html#seccion hash = #seccion

host El nombre del servidor http://www.ejemplo.com/ruta1/ruta2/pagina.html#seccion host = www.ejemplo.com

hostname La mayoría 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

href La URL completa de la página actual http://www.ejemplo.com/ruta1/ruta2/pagina.html#seccion URL = http://www.ejemplo.com/ruta1/ruta2/pagina.html#seccion

pathname Todo el contenido que se encuentra después del host http://www.ejemplo.com/ruta1/ruta2/pagina.html#seccion pathname = /ruta1/ruta2/pagina.html

port Si se especifica en la URL, el puerto accedido http://www.ejemplo.com:8080/ruta1/ruta2/pagina.html#seccion port = 8080 La mayoría de URL no proporcionan un puerto, por lo que su contenido es vacío http://www.ejemplo.com/ruta1/ruta2/pagina.html#seccion port = (vacío)

protocol 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:

search Todo el contenido que se encuentra tras el símbolo ?, es decir, la consulta o "query string" http://www.ejemplo.com/pagina.php?variable1=valor1&variable2=valor2 search = ?variable1=valor1&variable2=valor2

Métodos: // Método assign()

location.assign("http://www.ejemplo.com");

// Equivalente a location.href = "http://www.ejemplo.com"

// Método replace()

location.replace("http://www.ejemplo.com");

// Similar a assign(), salvo que se borra la página actual del array history del

navegador

// Método reload()

location.reload(true);

/* Recarga la página. Si el argumento es true, se carga la página desde el servidor.

Si es false, se carga desde la cache del navegador */

El objeto screen El objeto screen se utiliza para obtener información sobre la pantalla del usuario. Uno de los datos más importantes que proporciona el objeto screen es la resolución del monitor en el que se están visualizando las páginas. Los diseñadores de páginas web necesitan conocer las resoluciones más utilizadas por los usuarios para adaptar sus diseños a esas resoluciones.

Page 43: HTML CSS Javascript

Autor: Daniel Vega Página 43

Propiedad Descripción

availHeight Altura de pantalla disponible para las ventanas

availWidth Anchura de pantalla disponible para las ventanas

colorDepth Profundidad de color de la pantalla (32 bits normalmente)

height Altura total de la pantalla en píxel

width Anchura total de la pantalla en píxel

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 tamaño de los elementos del sistema operativo como por ejemplo la barra de tareas y los bordes de las ventanas del navegador. Además de la elaboración de estadísticas de los equipos de los usuarios, las propiedades del objeto screen se utilizan por ejemplo para determinar cómo 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 tamaño máximo posible según la pantalla del usuario: window.moveTo(0, 0);

window.resizeTo(screen.availWidth, screen.availHeight);

Page 44: HTML CSS Javascript

Autor: Daniel Vega Página 44

Los elementos de la página El objeto document también contiene todos los elementos de la página a los que podemos acceder para cambiar alguna de sus propiedades. La forma en que están guardados dentro de document es como vectores, aunque también se puede acceder a ellos por un nombre, pero se debe establecer un nombre al element, mediante la propiedad name. Los hipervínculos de la página 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 través de los objetos: Objeto Elemento

anchors Enlaces internos

links Enlaces fuera del documento

applets Applets de Java

images Imágenes

embeds Elementos incrustados

forms Formularios

forms[x].elements[y] 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";

Page 45: HTML CSS Javascript

Autor: Daniel Vega Página 45

Los eventos de javascript Los eventos son las acciones que realiza el usuario u otros elementos de la aplicación. El nombre de los eventos se construye mediante el prefijo on, seguido del nombre en inglés de la acción asociada al evento. Evento Descripción Elementos que lo admiten

onabort Detener la carga image

onblur Perder el foco <button>, <input>, <label>, <select>, <textarea>, <body>

onchange Cuando el control pierde el foco y su valor ha sido modificado desde que recibió el foco.

<input>, <select>, <textarea>

onclick Pulsar un elemento Todos los elementos

ondblclick Doble click Todos los elementos

onerror Al no cargarse una imagen image

onfocus Conseguir el cursor o foco <button>, <input>, <label>, <select>, <textarea>, <body>

onkeydown La tecla es presionada sobre un elemento

Elementos de formulario y <body>

onkeypress La tecla es presionada y soltada sobre un elemento.

Elementos de formulario y <body>

onkeyup La tecla es soltada sobre un elemento Elementos de formulario y <body>

onload Terminar de cargar una página <body>

onmousedown Botón de mouse presionado Todos los elementos

onmousemove El mose se mueve mientras está sobre un elemento.

Todos los elementos

onmouseout Quitar el mouse de encima Todos los elementos

onmouseover Pasar el mouse por encima (desde afuera)

Todos los elementos

onmouseup El botón del mouse es soltado sobre un elemento.

Todos los elementos

onreset Cuando un formulario es reseteado <form>

onresize Cuando se modifica el tamaño de la ventana.

<body>

onselect Seleccionar texto <input>, <textarea>

onsubmit Enviar un formulario

onunload Salir de una página (descargarla) <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 típicas que realiza un usuario en una página web pueden dar lugar a una sucesión de eventos. Si se pulsa por ejemplo sobre un botón de tipo submit se desencadenan los eventos onmousedown, onmouseup, onclick y onsubmit.

Page 46: HTML CSS Javascript

Autor: Daniel Vega Página 46

Ej: Abrir un popup de noticias o publicidad al inicio de la página. <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 navegación. <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>