LIBRO PHP

Desarrollo Web con PHP Oscar Capuay Uceda

Contenido

DEDICATORIA 7

AGRADECIMIENTOS 7

INTRODUCCIN 9

I. PREPARANDO LA PLATAFORMA DE DESARROLLO 11

INSTALACIN DEL SERVIDOR WEB Y PHP 11 INSTALACIN EN WINDOWS 11

II. DHTML 16

HTML 16 FORMATO DE TEXTO CON HTML 19 LISTAS 19 COMENTARIOS NO VISIBLES EN LA PANTALLA 22 CARACTERES ESPECIALES 23 ENLACES O HIPERVNCULOS 25 IMGENES 28 TABLAS 31 FORMULARIOS 38 HTML 4 45 JAVASCRIPT 61 ELEMENTOS BSICOS 62 COMENTARIOS 62 LITERALES 63 TIPOS DE DATOS 64 VARIABLES 64 OPERADORES 65 ESTRUCTURAS DE CONTROL 68 OBJETOS 70 OBJETOS PREDEFINIDOS 71 EVENTOS 75 DEFINICIN MEDIANTE CDIGO 77 MODELO DE OBJETOS DEL DOCUMENTO 78 OBJETO WINDOW 79 OBJETO DOCUMENT 82 OBJETO FORM 83 OTROS OBJETOS 88 FICHEROS .JS 90 HOJAS DE ESTILO EN CASCADA 91 SINTAXIS Y TIPOS BSICOS DE DATOS EN CSS2 95 PALABRAS CLAVE 97

III. INICIANDO LA PROGRAMACIN CON PHP 99

QUE ES PHP? 99 VARIABLES 99 CONSTANTES 99 TIPOS DE DATOS 100 EXPRESIONES 100 OPERADORES 102 OPERADORES DE ARITMTICA 103 OPERADORES DE ASIGNACIN 103 OPERADORES DE COMPARACIN 104 OPERADORES DE CONTROL DE ERRORES 105 OPERADORES DE EJECUCIN 106 OPERADORES DE INCREMENTO/DECREMENTO 106 OPERADORES DE LGICA 108 OPERADORES DE CADENA 108 OPERADORES DE MATRICES 109 OPERADORES DE TIPO 110

IV. ESTRUCTURAS DE CONTROL 113

SI (CONDICIONAL): IF 113 ELSE 114 ELSEIF 114 FOR 115 WHILE 115 DO..WHILE 115

V. ACCESO A DATOS CON PHP 117

FORMULARIOS HTML Y PHP 124 SUBIENDO ARCHIVOS AL SERVIDOR 129 ACCESO A BASES DE DATOS 132 CREANDO UNA BASE DE DATOS MYSQL EN MYSQL ADMINISTRATOR 132 CREANDO UNA BASE DE DATOS MYSQL EN PHPMYADMIN 137 ACCESO A MYSQL DESDE PHP 143 INSTALACIN DE POSTGRESQL SOBRE WINDOWS XP 151 CREANDO UNA BASE DE DATOS POSTGRESQL EN PGADMIN III 158 CREANDO UNA BASE DE DATOS POSTGRESQL EN PHPPGADMIN 165 ACCESO A POSTGRESQL DESDE PHP 170 ACCESO A MS SQL-SERVER DESDE PHP 177

VI. PHP ORIENTADO A OBJETOS 187

CLASES EN PHP 187 INSTANCIA DE UN OBJETO 187 EXTENDIENDO OBJETOS 188

AUTO CARGA DE OBJETOS 189 ACCESO A MYSQL CON PHP ORIENTADO A OBJETOS 191 MYSQLI 191 MYSQLI_STMT 193 MYSQLI_RESULT 194 PAGINANDO RESULTADOS 202 ARQUITECTURA MVC 205 MVC CON PHP 205 MVC Y PHP CON ACCESO A BASE DE DATOS 212 PDO PHP DATA OBJECT 215 CLASES PREDEFINIDAS 215 CONEXIONES CON PDO 218 EJECUCIN DE SENTENCIAS PREPARADAS CON PDO 221

VII. SEGURIDAD WEB 225

SEGURIDAD EN EL SISTEMA DE ARCHIVOS 225 SEGURIDAD EN BASE DE DATOS 227 INYECCIN SQL 229 SESIONES 242 AUTENTIFICACIN HTTP CON PHP 246 LOGIN 248 CAPTCHA 253

VIII. GENERACIN DE ARCHIVOS CON PHP 257

IMGENES 257 ARCHIVOS PDF 264 FPDF 264 ARCHIVOS XLS 274

IX. PHP + AJAX 281

AJAX 281 XAJAX 282 EVENTOS CON XAJAX 291 TRABAJO CON FORMULARIOS EN XAJAX 293 ERROR COMN 298 BSQUEDA EN BASE DE DATOS CON XAJAX 299 ADMINISTRACIN DE DATOS CON AJAX 301 CONTROLADOR CON AJAX 301 CAPA DE DATOS CON AJAX 306 VISTA CON AJAX 308

X. REFERENCIAS BIBLIOGRAFICAS 313

XI. ANEXOS 314

LISTA DE EJEMPLOS 314 LISTA DE TABLAS 318 LISTA DE FIGURAS 319

Dedicatoria Este libro lo dedico a Dios, a mi esposa Kelly, y a mi hijo Oscar Armando.

Agradecimientos Este libro es gracias a la bendicin de Dios, al apoyo y aliento de mis padres, a la colaboracin de mis hermanos Carlos, Jaime y Benjamn y al amor de mi esposa Kelly.

Introduccin

Introduccin PHP desde el ao 1997 ha crecido aceleradamente, su versin 4 lanzada en el 2000 gan mucha popularidad y logr estar instalado en mas de la cuarta parte de los servidores Web a nivel mundial, esto la convirti en el 2003 en la plataforma Web con mayor presencia en Internet en comparacin con sus similares. En la actualidad muchas empresas han optado por el desarrollo de sus aplicaciones con PHP, esto ha generado una creciente demanda de profesionales con habilidades y conocimiento de este lenguaje, es por este motivo que decid escribir este libro, y aportar algunos conocimientos basados en la experiencia obtenida en los ltimos seis aos desarrollando aplicaciones Web.

Oscar E Capuay Uceda 9

Preparando la plataforma de desarrollo

I. Preparando la plataforma de desarrollo

Instalacin del servidor Web y PHP

Instalacin en Windows Para trabajar con PHP vamos a utilizar WAMP un software que instala el servidor Web APACHE, PHP y el manejador de base de datos MySQL. Veamos a continuacin los pasos de la instalacin:

Figura 1. Inicio de la instalacin de WAMP



Figura 2. Licencia de uso de WAMP

Si estamos de acuerdo con los trminos de la licencia, seleccionamos I

ccept the agreement y presionamos el botn Next para continuar. a

Figura 3. Destino de la instalacin de WAMP

Luego seleccionamos la ubicacin de los paquetes que vamos a instalar.



Figura 4. Seleccionar men de inicio de WAMP

Luego indicamos el nombre del acceso directo que nos permitir cargar WAMP desde el men de inicio.

Figura 5. Inicio de WAMP en el arranque del Sistema Operativo.

Despus elegimos si queremos que WAMP se inicie automticamente cuando se inicie una sesin en el sistema operativo.



Figura 6. Resumen de la configuracin de la instalacin

Ahora nos muestra el resumen de la configuracin elegida antes del inicio de la instalacin. Slo nos queda presionar el botn Install para instalar los programas.

Figura 7. Instalando WAMP



Figura 8. Instalacin de WAMP completa

Finalmente la instalacin termina y nos muestra la pantalla anterior en la que podemos elegir si se carga WAMP en ese momento o posteriormente. Hay que cerciorarnos que cuando WAMP se inicie los servicios deben estar iniciados correctamente, haciendo clic en el icono que aparece en la barra de

tareas: . Luego de hacer clic aparecer un men:

Figura 9. Men de WAMP


DHTML

II. DHTML Para desarrollar aplicaciones Web con PHP es necesario tener

define el lenguaje HTML como un lenguaje reconocido mente y que permite publicar informacin de forma global. Desde ra definicin, el lenguaje HTML ha sido un lenguaje utilizado

s electrnicos pero es un lenguaje que aciones electrnicas (aplicaciones Web

es, educativas, financieras y tambin muy utilizada en buscadores,

e HTML, cuenta con un conjunto de etiquetas o tambin llamadas s cuales funcionan de la siguiente manera:

rla as: .

conocimientos de HTML Dinmico DHTML, debido a que en los documentos Web no slo se escribe un lenguaje sino que es necesario utilizar diferentes lenguajes para la implementacin de las diversas rutinas que se pueden requerir para un buen funcionamiento de la aplicacin. Debido a esto a continuacin veremos un repaso rpido de los temas relacionados con DHTML.

HTML HTML es un lenguaje que permite definir los elementos que conforman una pgina Web. Los diseadores y programadores de pginas Web utilizan el lenguaje HTML de modo que los navegadores que utilizamos los usuarios muestran las pginas Web despus de interpretar su contenido HTML.

l W3C Euniversalsu primeexclusivamente para crear documentose utiliza en la mayora de apliccomercialetc.). El lenguaj"Tags", la Modelo de Inicio de una etiqueta. modelo de Cierre de una etiqueta. El texto o cualquier elemento de la pgina Web, que est entre ambas etiquetas (de inicio y cierre), estar influenciado por la accin que stas realicen. Por ejemplo, todo el documento HTML debe estar entre las tiquetas y . e

[Documento Web] Hay que considerar que no todos los tags tienen etiqueta de cierre. Aunque se recomienda que las etiquetas o tags que no tienen incluyan un / antes del cierre. Por ejemplo la etiqueta BR se recomienda escribi Es indiferente escribir las etiquetas en maysculas o minsculas. Pero se recomienda escribirlas en minsculas. Para diferenciarlas del texto comn, las escribiremos en maysculas.


DHTML

Toda pgina Web, esta dividida en dos partes bien definidas: la primera es la cabecera o encabezado y la segunda es el cuerpo o contenido del

a cabecera se define con la etiqueta y su finalizacin es con cera se coloca la informacin sobre la pgina Web,

ero hay que tener en cuenta que esta informacin no se muestra en el r, excepto el ttulo de la pgina que se muestra en la barra de ttulo tana del navegador, el cual se encuentra entre las etiquetas

est comprendido entre las etiquetas y . que aparezca en la pantalla

l encabezado y el cuerpo, y as utilizadas para delimitar estas partes, las

TML para construir una pgina Web deben estar en el siguiente

Ttulo de la p

/HEAD>

ner varios ttulos, los cuales escribiremos y , etc. (hasta H6), el nmero

xisten otros tags como por ejemplo, los separadores horizontales

documento. L. En la cabepnavegadode la ven y .

,El cuerpoDentro de ste est todo lo que queremos

(texto, imgenes, etc.) principal Por lo mencionado anteriormente, podemos concluir que la estructura de un documento Web (pgina Web) tiene dos partes: eque de acuerdo a las etiquetetiquetas Horden:

gina < [En este lugar escribiremos el contenido de la pgina] Antes de crear nuestra primera pgina Web, debemos tener ciertas consideraciones sobre el texto que vamos a incluir en el documento: No hay necesidad de tratar de justificar el texto al ancho del navegador, pues el texto de una pgina Web se caracteriza por justificarse de acuerdo al ancho que tome la ventana, adems cuando queramos pasar a un nuevo prrafo, es

ecesario utilizar la etiqueta . n El contenido de la pgina puede teentre las etiquetas y , en la etiqueta de ttulo indica el tamao de los caracteres de la frase o palabra. El tamao mayor es el correspondiente al nmero 1. Una etiqueta muy interesante es la de centrado y (debemos tomar en cuenta que a esta etiqueta no la soportan todos los navegadores, aunque s la mayora de ellos). Esta etiqueta centra todo lo que est dentro de ella, ya sea texto, imgenes, etc. E(horizontal rules), que se insertan con la etiqueta (este tag no tiene la correspondiente etiqueta de cierre). Con ella se obtiene una raya horizontal


DHTML

tan ancha como la pantalla, y con la apariencia de estar embutida sobre el fondo, o podemos tambin especificar su ancho en pxeles o en porcentaje respecto al ancho de la ventana.

era pgina Web

mi primera pgina Web programando con HTML, aun es muy sencillo el

Ejemplo 1: Prim Ejercicio01.html Mi Primer Ejercicio Ejercicio 1 Esta es diseo pero pronto haremos pginas ms complejas. Este es el segundo prrafo.

Resultado Web

Figura 10. Resultado de ejercicio01.html

Cuando programsea necesario, mayorme

emos, tratemos de colocar algunas lneas en blanco cuando nte para separar la cabecera del cuerpo de la

pgina, y adems justificar a la izquierda las lneas en varios niveles, para identificar con mucha mayor claridad el cdigo que se encuentra dentro de ciertas etiquetas, como lo podemos notar en el ejemplo anterior. De hecho, todo el cdigo podra estar escrito dentro de una sola lnea. Lo importante es el orden correcto de las etiquetas. Por cierto, una etiqueta puede estar anidada dentro de otra. En el ejemplo podemos notar la etiqueta dentro de la etiqueta . Es muy importante, en estos casos, que las etiquetas de inicio y de cierre vayan en el orden correcto, pues de lo contrario se produciran errores.


DHTML

Formato de Texto con texto, este

os crear un s la etiqueta , esta etiqueta inserta una lnea en

ma del prrafo anterior. Pero si deseamos realizar nea, es decir pasar a la siguiente lnea sin incluir una en blanco,

mos el tag . Esta etiqueta por su funcionamiento no tiene una

y Cursiva bajamos con texto formateado, las caractersticas ms utilizadas

a y cursiva. Pues en HTML, podemos darle esas caractersticas al tilizando las etiquetas: para poner el texto en negrita, y para

Cada una de ellas si cuenta con su respectiva etiqueta de >).

spacios en blanco

ndices y Subndices matemticas puede interesar poder escribir ndices y

nsiguen con las etiquetas y te. Por ejemplo: m2 se obtiene con: m2

/SUB>.

ntos es necesario mostrarlos en forma de listas, las cuales pueden ser de diferentes tipos: 1. Listas sin orden (sin numerar) 2. Listas ordenadas (numeradas) 3. Listas de definicin. Una lista sin orden (Unordered List) sirve para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un nmero. Su estructura es la siguiente: Naranja

LI> Manzana

HTML En ejemplo anterior, podemos notar que cuando colocamos

ce sin ningn formato en especial. Slo, cuando quisimaparenuevo prrafo, utilizamoblanco despus de la ltiun salto de lutilizareetiqueta de cierre. Negrita Cuando tra

egritson: nexto utformato cursiva. c rre ( y

DHTML

Resultado Web

Figura 11. Lista sin orden

Adems podemos anidar una lista dentro de otra. Por ejemplo:

Bacalao

Mamferos Peces Sardina Aves Resultado Web

Figura 12. Listas sin orden anidadas

s Ordenadas (Ordered Lists) sirven para presentar tems en un eterminado. Su estructura es muy similar a la anterior. La diferencia

ente un nmero

Las Lista

rden doest en que en el resultado aparecer automticam

ativo para cada elemento de la lista. correl

troduccion In Conceptos Basicos Aplicaciones


DHTML

Bibliografia El texto aparecer de la siguiente forma:

Figura 13. Lista ordenada

listas sin orden, tambin se pueden anidar las listas ordenadas. El tercer tipo lo forman las listas de definicin. Como su nombre indica, son apropiadas para glosarios (o definiciones de trminos). Toda la lista debe ir englobada entre las etiquetas y . Y a diferencia de las dos que hemos visto, cada rengln de la lista tiene dos partes: 1) el nombre de la cosa a definir, que se consigue con la etiqueta (definition term) y 2) la definicin de dicha cosa, que se consigue con la etiqueta (definition definition). HTML Son las iniciales de HyperText Markup Language WWW Son las iniciales de World Wide Web Su resultado es:

Al igual que las

Figura 14. Lista de definiciones


DHTML

Comentarios no visibles en la pantalla A veces es muy til escribir comentarios en el documento HTML sobre todo cuando creamos pginas dinmicas, el cdigo que escribimos, nos pueden ervir para recordar posteriormente sobre lo que hicimos, y s

qque no queremos

stos dos smbolos: !-- y --> .

Por eje

ici E> Mis Cur

LI> Software de Aplicacin I

s de rencial

os cursos que me gustan son (en orden de preferencia):

eria de Software erencial

s de Computadoras

ue se vean en pantalla. Esto se consigue encerrando dichos comentarios entre e < Ejerc o 2 < L Ingeni Sistemas de Informacin G Rede


DHTML

Resultado Web:


s, y no hemos utilizado algunos otros caracteres que existen algunas limitaciones para escribir el ebido a que las etiquetas se forman como un

nto, si se quisieran scribir estos caracteres como parte normal del texto, provocara una

egador podra interpretarlos como el comienzo o nal de una etiqueta, en vez de un carcter ms del texto.

Tabla 1. Cdigos HTML para caracteres especiales < obtenemos < (less than, menor que)

Caracteres especiales Hemos podido notar en los ejemplos anteriores, que las palabras no aparecen con tildeespeciales, esto debido atexto. Una de ellas es dcomando escrito entre los smbolos "". Por taeambigedad, ya que el navfi Para superar estas limitaciones, existen cdigos para escribir estos caracteres y otros relacionados junto con las etiquetas.

> obtenemos > (greater than, mayor que) & obtenemos & (ampersand) " obtenemos " (double quotation)

Podemos ver, que estos cdigos empiezan siempre con el signo & y

digos para escribir letras s vocales acentuadas se

acaban siempre con ;. De igual manera, existen cespecficas de distintos idiomas. Los cdigos de la


DHTML

forman comenzando con &, seguido de la vocal en cuestin, seguido de la alabra acute (aguda) y terminando con el signo: ; (punto y coma).

odo esto, que como se ve es muy laborioso, puede parecer intil ya que si

ngn caso de estas convenciones, scribiendo las letras acentuadas y dems signos directamente, es muy

es ocurra lo mismo a todos los que ccedan a nu avegadores distintos.

izaremos el

os siguientes:

p

Tabla 2. Cdigos HTML para caracteres especiales - - - - - - - - - - - - - -

Tescribimos nuestro texto sin hacer nieposible que el resultado lo veamos correctamente en nuestro navegador, pero nunca podremos estar seguros que l

estras pginas con otros na Para corregir el ejercicio anterior con vocales acentuadas utilsiguiente ejemplo. Ejemplo 3: Uso de tildes Ejercicio03.html

HTML> < Ejercicio 3 Mis Cursos

in un orden particular, mis cursos son lS Redes de computadoras Ingeniera de Software Herramientas Case Software de Aplicacin I Software de Aplicacin II Sistemas de Informacin Gerencial

/UL> < Resultado Web:


te en este elemento: el Hipervnculo o tos repartidos

s, en general, tienen la siguiente estructura:

yyy xxx : es el destino del hipervnculo. yyy : es el texto que generalmente aparece subrayado y con un color especial, el cual indicar en la pantalla la existencia de un enlace.

Enlaces o hipervnculos El xito de la Web, se basa justamenenlace, pues nos da la posibilidad de unir los distintos documenpor todo el mundo. Estructura de los enlaces Los enlace


DHTML

Tipos de enlaces Los enlaces los podemos clasificar en cuatro tipos: Enlaces dentro de la misma pgina Enlaces con otra pgina nuestra Enlaces con una pgina fuera de nuestro sistema Enlaces con una direccin de correo electrnico Enlaces dentro de la misma pgina

Cuando tenemos documentos (o pginas Web) muy extensos, es adecuado trabajar con este tipo de enlaces, pues nos permite dar un salto desde una posicin a otra determinada, dentro de la misma pgina. En este caso, lo que antes hemos llamado XXX, es decir, el destino del enlace, en este caso el sitio dentro de la pgina a donde queremos saltarse sustituye por alquier palabra). Lo que hemos llamado antes YYY es la palabra (o palabras) que

en la pantalla en color (en forma de hipertexto). Su estructura

remos saltar, debemos poner la siguiente >

ltar desde aqu a la pantalla final, pongo la siguiente

pgina nuestra arias mpre

pal y otras enlazadas a ella.

DHTML

Si la pgina a la que quiero saltar est, por ejemplo en el subdirectorio

a la inversa, si quiero saltar desde una pgina a otra que est en un ue haber puesto irectorio anterior.

os subdirectorios, y emos evitar todas

(es dor distinto), es necesario conocer su direccin

source Locator). El URL podra ser, adems de

recciones correctamente (respetando las las distinguen)

rio@servidoremail">Texto del enlace

CENTER> Mis pginas favoritas

stas son mis pginas favoritas: EF="http://www.desarrolloweb.com">Desarrollo Web REF="http://www.forosdelweb.com">Foros del Web

cursos, entonces en la etiqueta tendra que haber puesto "cursos/pag5.html". Segn el prrafo anterior, la etiqueta tiene que ser: Cursos . Ydirectorio anterior o nivel superior, en la etiqueta tendra q"../pag5.html". Esos dos puntos (..) hace que se dirija al dObsrvese que se debe utilizar el smbolo / para indicar l

o este otro \, que es propio nicamente de Windows. Podnestas complicaciones colocando todos los archivos en un solo directorio, pero si tenemos muchas pginas lo mejor es tenerlas en directorios, pues nos facilitar el mantenimiento de ellas. Enlaces con una pgina fuera de nuestro sistema

i queremos enlazar con una pgina que est fuera de nuestro Sitio Web Sdecir, que est en un serviompleta, o URL (Uniform Rec

la direccin de una pgina del Web, una direccin de ftp, gopher, etc. Una vez conocida la direccin (o URL), la colocamos en vez de lo que hemos llamado anteriormente xxx (el destino del enlace). Si queremos enlazar con la pgina de la Nasa (cuyo URL es: http://www.nasa.com), la etiqueta sera: Pgina inicial de la Nasa

s importante escribir estas diEmaysculas y minsculas, pues los servidores UNIX s Enlaces con una direccin de Correo Electrnico En este caso, sustituimos lo que se ha llamado antes xxx (el destino del enlace) por mailto: seguido de la direccin de correo electrnico. La estructura de la etiqueta es:

A HREF="mailto: usua< Ejemplo 4: Enlaces Ejercicio 4 < E

DHTML

Resultado Web:


Imgenes a etiqueta que nos sirve para incluir imgenes en las pginas Web es muy

similar a la de enlaces a otras pginas. A esta etiqueta se le indica el nombre zacin de un archivo que contiene una imagen.

na imagen llamada imagen.gif (el nombre que

pueden aadir otros comandos, tal como ALT

in (una palabra o una frase breve) de la mitir, es en beneficio de los que accedan a nuestra navegador en forma de texto slo. Ya que no son

n, por lo menos pueden hacerse una idea sobre ella.

i el archivo se encuentra en el mismo directorio, es suficiente escribir el

ilizando los criterios que vimos en la parte de enlaces.

t

L

y la locali La estructura de la etiqueta es: Con el comando IMG SRC (Image Source, origen o fuente de la imagen) se

dica que se quiere mostrar uintenga el archivo).

etiqueta se Dentro de la

on ALT se inserta una descripcCimagen. ALT se puede opgina con un programacapaces de ver la image Snombre. Pero si se encontrara en otro lugar es necesario indicar su ubicacin exacta, ut Un aspecto muy importante a tener en cuenta es el tamao de las imgenes, pues una imagen grande supone un archivo grande, y esto puede resultar en un tiempo excesivo de carga, con el consiguiente riesgo de que quien esintentando cargar nuestra pgina se canse de esperar, y desista de ello.


DHTML

Para elegir la posicin de la imagen con respecto al texto hay distintas osibilidades. La ms sencilla es colocarla entre dos prrafos, con un titular

.

a posicin del titular con e un titular, claro est). Se

n medio o abajo del lado de la imagen. Para ello se IGN a la etiqueta, de la siguiente manera:

s

os anteriormente, la estructura general de un enlace es:

"xxx"> yyy .

destino del enlace e yyy el texto del enlace (o ms generalmente hablando, lo que aparece en la pantalla como el enlace; anteriormente era un texto, y en ste va a ser una imagen). En este caso sustituimos xxx por el nombre del archivo de la pgina a la que queremos acceder. Y en lugar de yyy ponemos la etiqueta completa de la imagen (que queda as englobada dentro de la etiqueta del enlace). Como ejemplo vamos a utilizar la imagen (flecha.gif) para acceder al ejercicio 2 (ejercicio2.html): Pulsando la imagen comprobamos cmo efectivamente enlaza con la pgina deseada. Obsrvese adems que la imagen est rodeada de un rectgulo del color normal en los enlaces. Si no se desea que aparezca eserectngulo, hay que incluir la imagen el atributo

ORDER=0, es decir:

gen, comprobamos que acta mbin como enlace aunque carezca del rectngulo de color. Esto puede

resultar ms esttico, pero se corre el riesgo de que el usuario no se d cuenta de que la imagen

genes

pa un lado De momento nos vamos a limitar a escoger l

a imagen (si es que queremos ponerlrespecto a lpuede poner arriba, e

ando ALaade el com

if" ALIGN=TOP> Titular alineado arriba

DHTML

Ejercicio 5

icio 5

entos bsicos sobre todo

cio1.html">

R>

Resultado Web:

Ejerc Esta es una pgina Web. Tiene todos los elemimgenes.

DHTML

Tablas ara crear tablas son:

ara especificar el inicio y final de la tabla.

etiqueta le podemos aadir un comando: BORDER, que sirve para el grosor del borde de las celdas. La manera de especificar esta

tica es la siguiente:

[resto de las etiquetas]

entro de estas etiquetas, es necesario especificar las filas y columnas que

uetas para formar cada fila (row) de la tabla, que son: y . stas etiquetas tenemos que repetirlas tantas veces como filas queremos

s veces como celdas queremos que haya en esa fila.

ntana -->

>fila2-celda2 fila2-celda3

/HTML>

Las etiquetas necesarias p Y p A esta especificararactersc

Por ejemplo: si queremos una tabla con un borde de una unidad de espesor, escribiremos el siguiente cdigo: [resto de las etiquetas] Dcontendr la tabla. Las etiqEque tenga la tabla. Las etiquetas para crear columnas son: y , que engloban el contenido de cada celda concreta (texto, imgenes, etc.). Hay que repetirla tanta Ejemplo 6: Tablas Ejercicio06.html Ejercicio 6 Ejercicio 6

DHTML

Resultado Web:

Figura 19. Tabla HTML

Que pasara si creamos filas con diferente numero de columnas?, el un espacio vaco en dicha posicin. Si en la tabla del

ejercicio 6 eliminamos la tercera celda de la segunda fila, es decir si borramos fila2-celda3, resultar:

navegador crear

Figura 20. Tabla sin una celda

ular a la tabla, es decir un texto situado en la parte o. ste titular se consigue

etiquetas: y para su inicio y finalizacin,

cuenta el ejercicio anterior, vemos como podemos utilizar esta

ORDER="1"> desiguales

Titular de la tabla Se puede aadir un titsuperior de la tabla que indica cul es su contenidcon las respectivamente. Tomando en etiqueta:

DHTML

fila1-celda1 fila1-celda2 fila1-celda3

a2-celda2

/table>

R sultado Web:

fila2-celda1 fil <

e

Figura 21. Tabla con etiqueta CAPTION

dems de las celdas que contienen datos normales, podemos poner, si noA s

umna 2 Columna 3 fila1-celda1 fila1-celda2 fila1-celda3 fila2-celda1 fila2-celda2

conviene, celdas de cabecera, que se distinguen por estar el texto de dichas celdas en negrita y centrado. Estas celdas se insertan escribiendo la etiqueta: y . Vamos a aadir, en el ejemplo anterior, una fila de estas celdas de cabecera, antes de las otras dos que ya existan: Ejemplo de filas desiguales

Columna 1 Col


DHTML

Resultado Web

Figura 22. Tabla con etiqueta TH

Ubicacin contenido dentro de la celda El contenido de una celda por defecto est alineado a la izquierda. Pero se puede cambiar aadiendo dentro de la etiqueta de la celda los siguientes atributos: Al centro A la derecha Cabecera a la izquierda

n el caso de la etiqueta , por defecto el texto esta en el centro de la

celdas tienen alineacin vertical es en el medio. Esto mbin se puede cambiar, aadiendo dentro de la etiqueta de la celda los

s atributos:

entro

N=BOTTOM> Abajo

ensiones de la tabla lmente dimensiona el tamao de la tabla de acuerdo con

s, de columnas, por el contenido de las celdas, espesor de tambin podemos tos son: WIDTH y

T (ancho y alto), los cuales pueden estar expresados en pixeles o en sin de la pantalla. otras varias arnos que una celda se extienda sobre otras varias.

e consigue aadindo dentro de la etiqueta de la celda los atributos PAN=nmero para extenderse sobre un nmero determinado de

Ecelda. Por defecto, lastasiguiente Arriba

N=CENTER> C

DHTML

columnas, o ROWSPAN=nmero para extenderse verticalmente sobre un e filas.

lo, en la tabla anterior vamos a aadir una fila con una sola celda, a tres columnas:

ORDER="1"> plo de filas desiguales

Columna 1

elda sobre 3 columnas

fila1-celda1

< f f

/TA E

nmero determinado d Por ejemp

aque abarc

TABLE B< Ejem

TR> Columna 2 Columna 3 ila2-celda1 ila2-celda2 D

< BL > Resultado Web

Figura 23. Tabla con COLSPAN

pero que barque tambin a la siguiente:

DER="1">

O, en la misma tabla, vamos a aadir una celda en la primera fila. a

DHTML

Columna 1 Columna 2 Columna 3

-celda2

Celda sobre 3 columnas fila1-celda1

fila1-celda2 Celda junto a 2 filas

fila2-celda1 fila2 Resultado Web

Figura 24. Tabla con ROWSPAN

Separacin entre las celdas de una tabla

or defecto, la separacin entre celdas de una tabla es de dos pixels. Pero e dentro de

els entre celdas

cin entre el borde y el contenido dentro de las celdas es de un o hacemos con el atributo

ABLE>.

NG=20>

Pse puede variar esto con el atributo CELLSPACING, que se pona etiqueta . l

20 pixPor ejemplo, para obtener una separacin deponemos: Separacin entre el borde y el contenido dentro de las celdas

a separaLpixel. Si queremos cambiar esto, lCELLPADDING, que se pone dentro de la etiqueta

DHTML

Se puede combinar este atributo con CELLSPACING, visto lneas atrs. Por as de

nido con respecto a los bordes de las celdas de 20, ndramos con:

Web

ejemplo, una tabla con bordes de 5 de espesor, separacin entre celd15 y separacin del contelo obte

R=5 CELLSPACING=15 CELLPADDING=20>

HR width=75%>

Ejemplo 7: Ejemplo de Tablas en HTML ejemp Tablas < Tablas fila2-celda2< < /TD>

/TR> fila2-celda3 < Resultado Web

Figura 26. Resultado de ejemplo06.html

Formularios Los formularios permiten a los usuarios enviar informacin al servidor, en el ual hay instac lado(s) programa(s) que procesan esta informacin.

uiente:

ara poder

tones de envo y de borrado. Etiqueta de cierre

Estructura de un formulario

uctura de un formulario es la sigLa estr

Etiqueta de inicio: Cuerpo del formulario, con los distintos elementos p

introducir los datos. Bo


DHTML

Etiqueta de inicio

ctuar. l atributo METHOD=POST indica que los datos sean inmediatamente

ail u a otro destino establecido segn el

e texto, perfectamente legible y sin odificar.

lementos para introducir los datos

xisten tres tipos de elementos:

r medio de mens

e la etiqueta:

cin. os nosotros a la variable de introduccin del

TYPE="text". El atributo VALUE

ETHOD="POST" ENCTYPE="TEXT/PLAIN">

botn de nvo (que veremos ms adelante), recibiremos un email suyo con el

o:

d de esta caja de texto es por defecto de 20 caracteres. Se puede nmero". Por otra parte,

sea la longitud, si no se indica nada, el usuario puede introducir el cteres que quiera. Se puede limitar esto, incluyendo en la

NGTH="nmero".

El atributo ACTION indica la accin que se debe efeEenviados a la direccin de ematributo ACTION. Con el atributo ENCTYPE="TEXT/PLAIN" se consigue que las respuestas las recibamos como un archivo dc E E1. Introduccin por medio de texto 2. Introduccin po3. Introduccin por medio de botones

cin de los datos se consigue por medio dLa introduc En donde: xx es la palabra que indica el tipo de introducx

yyy es el nombre que le asignamato. d

zzz es el nombre de la variable que contendr el valor del elemento.

troduccin por medio de texto (una lnea)InEn este caso es xxx=text, es decir, INPUTo procede en este caso. n

Vamos a poner un ejemplo: solicitamos el apellido del usuario.

DHTML

En el caso que hemos visto, si hubiramos cambiado la etiqueta nte por:

LENGTH="12">

conocible, es r asteriscos. Basta con

PUT TYPE="password". En orrespondiente por:

assword" NAME="Apellido" SIZE="10" MAXLENGTH="12">

teres introducidos se representan por asteriscos. troduccin por medio de texto (mltiples lneas)

a introducir puede alcanzar una gran longitud, por ejemplo un comentario, es conveniente utilizar un formulario de texto de mltiples

Esto se consigue con la etiqueta de inicio: (en donde no se utiliza INPUT TYPE y donde ROWS representa el nmero de filas, y COLS el de columnas). y la de cierre: Ejemplo 8: Formulario solicitando los comentarios del usuario: Introduce tus comentarios: Resultado Web:

correspondie

lido" SIZE="10" MAX

DHTML

Introduccin por medio de Listas Desplegables os que el usuario, en vez de introducir un texto, como hemos visto

tiqueta de inicio y la de cierre

/PLAIN">

DHTML

Botones de radio Cuando queremos que el usuario elija una nica opcin entre varias, podemos hacer uso de los botones de radio, que se consiguen con la tiqueta:

N= HOD="POST" ENCTYPE="TEXT/PLAIN"> Cul es tu sistema operativo preferido?

YPE="radio" NAME="SistemaOperativo" VALUE="PC" CHECKED> PC YPE="radio" NAME="SistemaOperativo" VALUE="Mac"> Mac

o" VALUE="Unix"> Unix

ECKED que se ha aadido en la primera parece marcada por defecto.

escogido la opcin PC y pulsa el botn de envo, recibiremos on el texto: SistemaOperativo=PC.

ba un elemento lquier formulario, y es el botn de envo de los datos, que se

con la etiqueta:

t" VALUE="Enviar">

to que queremos que aparezca en el botn. Ejemplo:

TION=mailto:email METHOD="POST" ENCTYPE="TEXT/PLAIN"> pellido:

UT TYPE="text" NAME="Apellido"> T TYPE="submit" VALUE="Enviar datos">

/FORM>

tn interesante es el de borrado de los datos introducidos, muy nte en un formulario con muchos elementos. Es muy similar al de

:

PE="reset" VALUE="zzz">

s el texto que queremos que aparezca en el botn. Si s al ejemplo anterior la etiqueta:

e Donde yyy es el nombre que le ponemos a la variable que se trata de elegir, y zzz es el nombre de cada una de las opciones en concreto. Ejemplo: solicitamos al usuario que defina cul es su sistema operativo preferido:

DHTML

Se puede comprobar su funcionamiento, escribiendo algo en el formulario y pulsando luego el botn de borrado. Consideraciones finales Hasta ahora hemos visto uno a uno los diferentes elementos que se pueden utilizar. Pero no hay ningn inconveniente en usar, dentro del mismo formulario, distintos tipos de introduccin de datos. Al pulsar el usuario el botn de envo recibiramos en email suyo con las distintas parejas NAME=VALUE de cada elemento, encadenadas con el smbolo &. Ejemplo 10: Formulario 2

jercicio10.html

P>

XTAREA NAME="Comentarios" ROWS="6" COLS="40">

INPUT TYPE="reset" VALUE="Borrar datos">

/BODY>

E LIBRO DE VISITAS

DHTML

Resultado de ejercicio10.html


DHTML

HTML 4 La especificacin 4.0 de HTML, nos trae algunas novedades respecto a la

tinuacin:

os elementos en HTML 4.0 son: ABBR, ACRONYM, BDO, , COL, COLGROUP, DEL, FIELDSET, FRAME, FRAMESET,

LABEL, LEGEND, NOFRAMES, NOSCRIPT, OBJECT, RAM, SPAN, TBODY, TFOOT, THEAD y Q.

Cambios en los atributos

Casi todos los atributos que especifican el formato (tamao, color, alineacin, etc) de un documento HTML han sido desaprobados en favor de las hojas de estilo en cascada.

La lista de atributos del apndice indica qu atributos han sido desaprobados.

Los atributos id y class permiten a los autores asignar informacin de nombre y clase a los elementos para las hojas de estilo, comoidentificadore eclaraciones deobjetos, para tratamientos genricos del documento, etc.

rames (en ingls, marcos o cuadros) es un procedimiento del lenguaje ir la pantalla en diferentes zonas, o ventanas, que pueden

ctuar independientemente unas de otras, como si se trataran de pginas es incluso cada una de ellas pueden tener sus propias barras

entan son el Netscape xplorer 2.0 en adelante. Una de sus caractersticas ms

e, se puede argar en otro frame una pgina determinada. Esto se utiliza frecuentemente

e estrecho en la parte lateral (o superior) con un ndice del contenido en forma de diferentes enlaces, que, al ser pulsados cargan en la ventana principal las era se facilita la

avegacin entre las pginas, pues aunque se vaya pasando de unas a la vista el ndice del conjunto.

pgina con dos frames. El de la izquierda va a servir de ndice

ocumento de definicin de los frames ue e hacer es crear un documento HTML en el que

efiniremos cuntas zonas va a haber, qu distribucin y tamao van a er el contenido de cada una de ellas.

versin 3.2, las cuales sern comentadas a con

os nuevos ElementvLos nue

UTTONBIFRAME, INS, OPTGROUP, PA

s de vnculo, para los scripts, para d

Veamos a continuacin detalles de algunas nuevas etiquetas: Frames FHTML para dividadiferentes, pude desplazamiento. Los navegadores que lo implem2.0, y el Eimportantes es que pulsando un enlace situado en un framcpara tener un fram

distintas pginas. De esta mannotras, siempre estar a Para comprender los distintos conceptos vamos a desarrollar un ejemplo, creando una de lo que veamos en el de la derecha, y en ste veremos inicialmente una pgina de presentacin. Se podr acceder tambin aqu a las pginas creadas anteriormente, si se pulsa un enlace en el frame de la izquierda. DLo primero q tenemos qudtener, y cul va s


DHTML

En el ejemplo que vamos a desarrollar, la pgina va a tener dos frames distribuidos en columnas (es decir, uno al lado del otro, en vez de uno

el otro, lo que sera una distribucin en filas).

a) ocupe el el ancho de la pantalla, y el otro, el 80% restante.

al contenido, el frame de la izquierda va a contener un documento HTML que va a servir de ndice de lo que veamos en el otro (y que vamos a llamar pagind.html), y el de la derecha otro documento HTML que va a servir de pgina de presentacin (al que llamaremos pagpre.html). Todo lo anterior se refleja en el siguiente documento HTML: Ejemplo 11: Uso de frames Ejercicio11.html

aacute;gi

RC="ejercicio11b.html" NAME="principal">

/HTML>

jercicio11a.html

head>

html>

encima d Con respecto al tamao, haremos que el primero (el de la izquierd20% d Y con respecto

Mi p& na con frames

FRAME SRC="ejercicio11a.html">

ea

ento HTML ejercicio11b.html.

to r

e al segundo frame, pues, podramos utilizar hipervnculos en el arco que muestren pginas Web en el segundo, utilizando la

TARGET, por ejemplo: ejercicio 12. Segn este ejemplo la pgina

ml se abrir en el frame del lado derecho de la pgina.

que el navegador no soporte FRAMES se utiliza la etiqueta NOFRAMES>. Se aaden al final del documento de es, y a se pone entre ambas lo que queremos que vean

navegador que no soporta frames. Puede incluso

est en que en vez de utilizar la etiqueta BODY, que sirve nodelimitar lo que se va a ver en la pantalla, se hace uso de la etiqueta FRAMESET (definir los frames). En este caso, con la etiqueta se define que va a haber dos frames y que van a ir en columnas. Si hubiramos querido que fueran en filas, habramos puesto ROWS (filas, en ingls). Tambin se define el ancho que van a ocupar cada uno de ellos en la pantalla. Se ha puesto como porcentajes del total, pero se podra tambin haber puesto una cifra absoluta, que representara el nmero de pxeles a ocupar. Ya se ha definido el nmero de frames, su distribucin y su tamao, pero falta por definir el contenido de cada frame. Esto se hace con las etiquet

DHTML

ser el cdigo HTML de una pgina completa (lo que normalmente va entre as y )

do diseo con frames podra ser dividiendo la pgina de manera horizontal.

RC="ejercicio11b.html" NAME="principal"> ET>

navegador que no soporta frames. 12.html"> ir a pgina sin frames .

Resultado Web:

las etiquet Un segun Ejemplo11c.html Mi pgina con frames

DHTML

Etiqueta ACRONYM dica un acrnimo (es la suma de los significados de las palabras que lo

ML, (Hyper Text Markup Language).

t-Type" content="text/html; charset=iso-8859-1">

NYM lang="en" age">

"es" title="Doctor">Dr

Informan. Por ejemplo HT Etiqueta ABBR Indica una forma abreviada (etc, Dr, Ing, Corp, etc.). Los elementos ABBR y ACRONYM permiten a los autores indicar claramente la aparicin de abreviaturas y acrnimos. Ejemplo 12: Acrnimos y Abreviaturas Ejemplo12.html Documento sin ttulo

DHTML

Carlos dice: Estoy aprendiendo HTML Jaime dice: Es un lenguaje fcil de aprender Resultado Web:

Figura 31. Frase entre comillas

INS y DEL S y DEL se usan para marcar secciones del documento que han sido

s o borradas con respecto a una versin diferente de un

tos son especiales dentro de HTML, ya que pueden actuar como elementos en bloque o bien como elementos en lnea (pero no

er una o ms palabras dentro de un

-09-25T08:15:30-05:00" /index.php">Ejemplo de texto nuevo.

P> L>una palabra borrada algo borrado.

EtiquetasINinsertadadocumento. Estos dos elemeno biencomo ambos a la vez). Pueden contenprrafo o uno o ms elementos en bloque como prrafos, listas y tablas. Ejemplo 14: INS y DEL Ejercicio14.html

DHTML

OBJECT Esta etiqueta se usa cuando un elemento Web ser representado utilizando un plug-in de algn software externo al agente o navegador utilizado. PARAM Las etiquetas PARAM especifican un conjunto de valores que pueden ser necesarios para un objeto en tiempo de ejecucin. Puede aparecer cualquier nmero de elementos PARAM en el contenido de un elemento OBJECT o APPLET, y en cualquier orden, pero deben ser colocados al principio del contenido del elemento OBJECT o APPLET que los contienen. Ejemplo 15: OBJECT Y PARAM Ejemplo15.html Ejemplo de OBJE

b#version=6,0,0,0"

PARAM NAME=loop VALUE=falsM

PARAM NAME=quality VALUE=high> =scale VALUE=exactfit>

PARAM NAME=bgcolor VALUE=#080638> tfit

#080638 WIDTH="100%" HEIGHT="100%" NAME="intro2" "

/OBJECT>

CT, PARAM y EMBED tent-Type" content="text/html; chars

< Resultado Web:


DHTML

Figura 33. Animacin flash

TABLAS

rupos de filas: los elementos THEAD, TFOOT y TBODY abla pueden agruparse en una cabecera de tabla, un pie de

bla, y una o ms secciones de cuerpo de tabla, usando los elementos los

de usuario ofrecer la posibilidad de desplazar la informacin de los de la tabla independientemente de la cabecera y el pie. Cuando se

ormacin de cabecera y pie de tabla puede tirse en todas las pginas que contengan datos de la tabla.

y el pie de tabla deberan contener informacin sobre bera contener filas de datos

caso de estar presentes, cada elemento THEAD, TFOOT y TBODY contiene po de filas. Cada grupo de filas debe contener al menos una fila.

de TABLA, THEAD, TFOOT y TBODY

ml

PE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

ead>T y TBODY

GLas filas de una ttaTHEAD, TFOOT y TBODY, respectivamente. Esta divisin permite a agentescuerpos imprimen tablas largas, la infrepeLa cabecera de tablalas columnas de la tabla. El cuerpo de tabla dede tabla. Enun gru Ejemplo 16: Uso Ejercicio16.ht

DHTML

Id Nombres Apellidos

"3">Pie de la tabla

1 Kelly Quiroz Ch 2 Carlos Capuay Uceda

>3 Marco Quiroz Chavil

DHTML

FORMULARIOS

creados con el elemento BUTTON funcionan exactamente igual s creados con el elemento INPUT, pero ofrecen posibilidades

s de representacin: el elemento BUTTON puede tener contenido. plo, un elemento BUTTON que contenga una imagen se parece y como un elemento INPUT cuyo atributo type sea igual a "image",

ero el tipo de elemento BUTTON permite un contenido. y s

omo imgenes "planas". plo extiende un ejemplo previo, pero creando los botones

de envo

El elemento BUTTON Los botonesque los botonems ricaPor ejemfunciona pLos navegadores pueden representar los botones BUTTON con un relieve

n movimiento arriba/abajo al pulsarlos, mientras que pueden representar loubotones INPUT cEl siguiente ejem

y de restablecer con BUTTON en lugar de INPUT. Los botones contienen imgenes sacadas de elementos IMG. Ejemplo 17: Button con imagen Ejercicio17.html Ejemplo de BUTTON Nombre: Apellido: email: sexo: Hombre Mujer Editar /body> /html>

Resultado Web:

ON name="reiniciar" type="reset"> Rw selected label="ninguno" value="ninguno"> Ninguno ROUP label="Limpieza">

Escoba

N> e="limp003">Detergente

ROUP label="Dulces"> Chocolate

elemento SELECT (es dectros). o

jemplo 18: E

Ejercicio18.ht

UBLIC "-//W3C

DHTML

Caramelo Gelatina

psi" value="bebi001">PEPSI Coca Cola

/body>

DHTML

FIELDSET> GEND>

Nombres:

Telfono: T>

ext" size="50"

e="txtblog" type="text" size="40" tabindex="2"> eo Electrnico:

< Datos Personales

DHTML

Etiquetas DIV y SPAN

on los atributos id y class, ofrecen un r estructura a los documentos. Estos

si su contenido es en lnea (SPAN) o en bloque (DIV)

ar hojas de estilo en cascada a estas etiquetas.

Ejemplo 20: DIV y SPAN

script type="text/javascript">

le(obj){

body>

"toggle('tablas');return false;"

las" style="display: none;">

Escuelas

Semestre

Las etiquetas DIV y SPAN, junto cecanismo genrico para aadim

elementos especificanpero no imponen ningn otro estilo de presentacin al contenido, por este motivo, se pueden aplic

Ejercicio20.html

head>

SPAN>Maestros

r>

Evaluaciones

Enc Podem

plo odem cer

Resulta


DHTML

Figura 38. Ejemplo de pgina con DIV ANs s y SP


DHTML

JavaScript avaScript, al igual que Java o VRML, es una de las mltiples maneras que

pacidades del lenguaje HTML. Al ser la ms

er un rograma con JavaSc pgina Web con

algunas cosas senc aS cosas distintas, principalmente programacin completo. Lo e n mi xis. Existen tres versiones de Ja C ha n este documento funciona con la versin 1.0, que na n e vigator 2.0. Tambin existe una versi d cida en la versin 4.06. Esta versin

s una pequea revisin de la 1.2 creada para ajustarse al estndar la el lenguaje JavaScript.

s una pgina Web , al pulsarlo, muestra el mensaje.

, Web

AME Boton" VALUE=" ame" onClick="HolaWeb()">

/HTML> Ahora vamos a ver, paso por paso, que significa cada uno de los elementos extraos que tiene la pgina anterior:

Jhan surgido para extender las casencilla, es por el momento la ms extendida. Es importante saber que: JavaScript no es un lenguaje de programacin propiamente dicho. Es un lenguaje script u orientado a documento, como pueden ser los lenguajes de

acros que tienen muchos procesadores de texto. Nunca se podr hacmp ript, tan slo se podr mejorar una

illas. Jav cript y Java son dos porque Java s que es un lenguaje denico qu comparte es la sma sintavaScript. asi todo lo que se

ci co escrito el Netscape Na

n 1.3, intro ueinternacional ECMA que regu Vamos a realizar nuestro primer "programa" en JavaScript. Haremos surgir una ventana que nos muestre el mensaje "hola, Web". As podremos ver los

lementos principales del lenguaje. El siguiente cdigo eecompleta con un botn que Ejemplo 21: funcin alert HolaWeb.html

function HolaWeb() { alert("Hola }

!");

DHTML

Dentro de estos elementos ser donde se puedan poner funciones en

"archivo.js">

plo, se ha escrito en la cabecera con la finalidad de hacer igo ms legible. Si un navegador no acepta JavaScript no leer lo que tre estos elementos.

unque JavaScript es o a objetos no es de ningn modo tan a de un objeto. En el cdigo de la

utton" NAME="Boton" VALUE="Pulsame"

ento que usamos para mostrar un botn vemos una cosa vento. Cuando el usuario pulsa el

vento click se dispara y ejecuta el cdigo que tenga entre comillas dor de evento onClick, en este caso la llamada a la funcin

con anterioridad. Existen uchos ms eventos que iremos descubriendo segn avancemos. En alidad, podramos haber escrito lo siguiente:

es una parte de nuestro programa que el ordenador ignora y realiza ninguna tarea. Se utilizan generalmente para poner

JavaScript. Por otra parte el cdigo de JavaScript puede ser incluido en la pgina Web de la siguiente manera:

script language="JavaScript" src =< El archivo externo simplemente es un archivo del texto que contiene cdigo JavaScript, y cuyo nombre acaba con la extensin js. El cdigo de Java Script puede ser escrito en cualquier lugar de la pgina

eb, en este ejemWel cdhay en function HolaWeb() { alert("Hola, Web!"); } A t orientadestricto como Java, donde nada est fuerfuncin vemos una llamada al mtodo alert (que pertenece al objeto window) que es la que se encarga de mostrar el mensaje en pantalla.

DHTML

en lenguaje humano lo que estamos haciendo en el lenguaje de r que el cdigo sea ms comprensible.

tipos de comentarios. El primero nos permite que e la lnea sea un comentario. Para ello se utilizan dos barras

mentario

ue, false

yso vectores:

acaciones = ["Navidad", "Semana Santa", "Verano"]; lert(vacaciones[0]);

Tabla 3. Caracteres especiales para cadenas en JavaScript do

programacin y as hace JavaScript existen dos En

el resto dinclinadas: ar i = 1; // Aqui esta el cov

Sin embargo, tambin permite un tipo de comentario que puede tener las lneas que queramos. Estos comentario comienzan con: /* y terminan por */.

Literales Se llama as a los valores que puede tomar una variable o una constante.

parte de los distintos tipos de nmeros y valores booleanos: A "Soy una cadena" 3434 3.43 tr Tambin podemos especificar arra va Dentro de las cadenas podemos indicar varios caracteres especiales, con significados especiales. Estos son los ms usados:

Carcter Significa\n Nueva lnea \t Tabulador \' Comilla simple \" Comilla doble \\ Barra invertida \999 El nmero ASCII (segn la codificacin Latin-1) del carcter en

hexadecimal De este modo, el siguiente literal: "Javascript (\xA9 2002)" e corresponde con la cadena: s

2) Javascript ( 200

or ltimo, tambiP

fun se pueden especificar objetos como literales, aunque no

ncione en ms que en Netscape 4 y superiores:


DHTML

miNavegador = {nombre: "Netscape", version: 4.5, idioma: "Espaol", plataforma: "PC"}; alert(miNavegador.plataforma);

s tipos de datos se asignan dinmicamente segn namos valores a las distintas variables y son los clsicos: cadenas de

xto, varios tipos de enteros y reales, valores booleanos, vectores, matrices, ferencias y objetos.

riable, cuando no es declarada, tiene ser de mbito

da dentro:

sible fuera y dentro de pruebas

rdenado de elementos, o una variable distinta. En Javascript, tos. Como veremos que hacen todos

n utilizando el operador new:

y(20)

Sentencias y bloques En Javascript las sentencias se separan con un punto y coma, y se agrupan mediante llaves ({ y }).

Tipos de datos En

igJavascript lo

asetre

Variables Las variables son nombres que ponemos a los lugares donde almacenamos la informacin. En Javascript, deben comenzar por una letra o un subrayado (_), pudiendo haber adems dgitos entre los dems caracteres. No es necesario declarar una variable, pero cuando se hace es por medio

e la palabra reservada var. Una vadsiempre mbito global, mientras que en caso contrario

lobal si est definida fuera de una funcin, y local si est definig var x; // Accesible fuera y dentro de pruebas y = 2; // Accesible fuera y dentro de pruebas function pruebas() { var z; // Accesible slo dentro de pruebas w = 1; // Acce

} Se pueden declarar varias variables en una misma sentencia separndolos por comas:

x, y, z; var El tipo de datos de la variable ser aquel que tenga el valor que asignemos a la misma, a no ser que le asignemos un objeto por medio del operador new. Vectores y matrices

stos tipos de datos complejos son un conjunto oEcada uno de los cuales es en s mism

atrices son objelos vectores y las mlos objetos, se declara miVector = new Arra


DHTML

El vector tendr inicialmente 20 elementos (desde el 0 hasta el 19). Si queremos ampliarlo no tenemos ms que asignar un valor a un elemento que est fuera de los lmites del vector:

s utilizar de ndices cualquier expresin que deseemos esitamos especificar la longitud inicial del vector si no

s favoritos"] = "Esto es Javascript";

ya que tenemos que ctor nuevo en cada elemento del vector

iginal.

de JavaScript deben referenciarse cmo se definieron, no es

os operadores nos permiten unir identificadores y literales para formar nes son el resultado de operaciones matemticas variable son expresiones, pero tambin lo son esos

rar que nuestro cdigo no lo entendamos ni nosotros.

e los operadores aritmticos clsicos y algn que otro

eradores aritmticos

lo Expresin de ejemplo Resultado del ejemplo

miEstupendoVector[25] = "Algn valor"

e hecho, podemoDutilizar. Ni siquiera necueremos: q

ectorRaro = new Array(); v

vectorRaro["insertar en lo

es ms complicado,Hacer una matriz bidimensionalhacer un bucle que cree un veor Nota importante: JavaScript es sensible a maysculas y minsculas, todos los elementoslo mismo "Salto" que "salto".

Operadores Lexpresiones. Las expresioo lgicas. Un literal o una mismos literales y variables unidos entre s mediante operadores. JavaScript dispone de muchos ms operadores que la mayora de los lenguajes, si exceptuamos a sus padres C, C++ y Java. Algunos de ellos no los estudiaremos debido a su escasa utilidad y con algunos otros (especialmente el condicional) deberemos andarnos con cuidado, ya que puede log Operadores aritmticos JavaScript dispone dms:

Tabla 4. Op

Descripcin Smbo

Multiplicacin * 2*4 8 Divisin / 5/2 2.5 Resto de una divisin entera % 5 % 2 1

Suma + 2+2 4 Resta - 7-2 5 Incremento ++ ++2 3 Decremento -- --2 1


DHTML

Menos unario - -(2+4) -6

os operadores de incremento y L decremento merecen una explicacin

b 2 tambin. Sin embargo:

u operando, pero si se colocan detrs del mismo se jecutan despus de todas las dems operaciones.

mparacin

del ejemplo

auxiliar. Se pueden colocar tanto antes como despus de la expresin que deseemos modificar pero slo devuelven el valor modificado si estn delante. a = 1;

= ++a; bEn este primer caso, a valdr 2 ya = 1;

= a++; b Ahora, a sigue valiendo 2, pero b es ahora 1. Es decir, estos operadores modifican siempre a se

Operadores de co

ientes: Podemos usar los sigu

Tabla 5. Operadores de comparacin

Descripcin Smbolo Expresin de ejemplo ResultadoIgualdad == 2 == '2' Verdadero Desigualdad != 2 != 2 Falso Igualdad estricta === 2 === '2' Falso Desigualdad estricta !== 2 !== 2 Falso Menor que < 2 < 2 Falso Mayor que > 3 > 2 Verdadero Menor o igual que = 2 Falso

a igualdad y desigualdad estricta son iguales a las noL rmales pero hacen bacin estricta de tipo. Han sido incluidos en el estndar

lo soportan Netscape 4.06 y superiores y Explorer 3 y que indicar que versiones ms antiguas de Netscape tratan

. Operadores lgicos

n Smbolo Expresin de ejemplo Resultado del ejemplo

una comproECMAScript y superiores. Hay la igualdad normal como si fuera estricta. Operadores lgicos Estos operadores permiten realizar expresiones lgicas complejas:

Tabla 6

DescripciNegacin ! !(2 = 2) Falso


DHTML

Y && (2 = 2) && (2 >= 0) Verdadero || (2 = 2) || (2 2) Verdadero

Operadores de asignacin

los lenguajes tienen un nico operador de asignacin, que en mbolo =. Pero en este lenguaje, dicho operador se puede

n operadores aritmticos y lgicos para dar los siguientes:

Tabla 7. Operadores de asignacin

erador Significado Operador Significado

NormalmenteJavaScript es el scombinar co

Opx += y x = x + y x -= y x = x - y x /= y x = x / y x *= y x = x * y x % y x = x % y

Operadores Especiales Vamos a incluir en este apartado operadores que no hayan sido incluidos en

s anteriores. La concatenacin de cadenas, por ejemplo, se realiza con el l operador condicional tiene esta estructura:

Si la condicin se cumple devuelve el primer valor y, en caso contrario, el ejemplo asignara a la variable a un 2:

ores:

bla

i olo Ejemplo

losmbolo +. E condicin ? valor1 : valor2

segundo. El siguiente a = 2 > 3 ? 1 : 2

ara tratar con objetos disponemos de tres operadP

Ta 8. Operadores especiales

Descripc n Smb Resultado del ejemplo Crear un o a = new Array( n vector bjeto new ) a es ahora u

Borrar un objeto delete delete a Elimina el vector anteriormente creadoReferencia

actual is al thobjeto

this se a otros m

su r en el cdigo de los mtodos de un objeto para referirse objeto. ele utilizatodos o a propiedades de su mismo


DHTML

Estructupos: bifurcaciones de e ucturas de

control, en estructuras adicionales para ar el

a) Bifurc les bifurc al en una estruc za una rea u otra

ependiendo del resultado de evaluar una condicin. La primera que vamos a estudiar es la estructura if...else. Esta estructura es la ms sencilla y

mayor

es mayor que b);

s o

Es la se

witch(color) {

rojo);

o);

dicar que no es compatible con estndar ECMA y no es soportado or el Explorer 3.

petir una tarea un nmero de na condicin. Para hacer bucles podemos utilizar

ncia entre ellas es que la primera omprueba dicha condicin antes de realizar cada iteracin y la segunda lo

ras de control Estas estrcondiciona

ucturas se pueden clasificar en doles y bucles. Aparte de los dos

s grandes gru tipos clsicos str

JavaScript disponemos de algunasmanejo de objetos.

aciones condiciona

facilit

Una acin condicion tura que reali tad

antigua de todas: a=5; b=7; f (a>b) i alert(a es que b); else alert(a no Hay que indicar que el else e pcional..

La siguiente estructura bifurca suna variable especfica.

egn los distintos valores que pueda tomar ntencia switch:

s case "azul": alert( El color elegido es el azul); break; case "rojo": alert( El color elegido es el break; default:

alert( El color por defecto es negr } Hay que inp Bucles Un bucle es una estructura que permite reveces, determinado por ulas estructuras while y do...while. Estos bucles iteran indefinidamente mientras se cumpla una condicin. La diferechace despus: var numero=0;


DHTML

while (numero==1) {

oy un do...while');

es un while. Qu por qu? Veamos. El while comprueba primero si

s igual a 1 y, como no lo es, no ejecutara el cdigo que tiene

ente potente. No se reduce a casos os da mucha ms

con condicin se tes enzar la primera iter e ejecutar la

c era ms sa dades es, claro

for (n = 2, factorial = 1; n

hay cucin d ncia break dentro de

r parte del salida i hay lizarlo, e

legibilidad y elegancia del cdigo.

s sp distintas. La ucle for...in, que

ropiedente mplo:

= [

alert('Soy un while'); } do { alert('S

} while (numero==1);

n este caso solo veramos aparecer una ventana diciendo que Edo...numero edentro del bucle. En cambio, el do...while primero ejecuta el cdigo y luego, viendo que la condicin es falsa, saldra. Hay que resaltar que do...while no pertenece al estndar y no es soportado por el Explorer 3.

n Javascript, el bucle for es singularmEnumricos como en muchos otros lenguajes sino que nbertad. Tiene la siguiente estructura: li

r (inicio; condicin; incremento) fo cdigo El cdigocumpla. An

tenido en el bucle se ejecut de com

ar mientras la acin del bucle s

sentencia inihabitual de u

io y en cada iteracin lo harr estas posibili

incremento. La man est, la numrica:

var numero = 4;

DHTML

Este ejemplo sumara dos a todos los elementos del vector. Sin embargo, conviene tener cuidado ya que, de los navegadores de Microsoft, slo la ersin 5 lo soporta.

a otra estructura es with, que nos permitir una mayor comodidad cuando tratar con muyas propiedades de un mismo objeto. En lugar

e referirnos a todas ellas con un objeto.propiedad podemos

to es una estructura que contiene tanto variables (llamadas ulan dichas variables (llamadas

uctura se ha creado un nuevo modelo de programacin macin orientada a objetos) que atribuye a los objetos propiedades ncia o polimorfismo.

s, JavaScript simplifica en algo este modelo. Creacin mediante co

n constructor es una fun do creamos un bjeto nuevo del tipo que sea, lo que hacemos en realidad es llamar al

constructor pasndole argumentos. Por ejemplo, si creamos un objeto Array de esta manera: vector = new Array(9); En realidad, estamos llamando a un constructor llamado Array que admite un parmetro. Sera algo as: function Array(longitu ...

bjeto. Supongamos que queremos codificar

= autor;

v Ltengamos quede tener quhacer: with (objeto) { propiedad1 = ... propiedad2 = ... ... }

Objetos Un objepropiedades) como las funciones que manipmtodos).

rtir de esta estrA pa(la progra

recomo he

omo veremoC

nstructores cin que inicializa un objeto. CuanU

o

d) {

} Vamos a crear nuestro primero oen Javascript una aplicacin que lleve nuestra biblioteca de libros tcnicos de Informtica. Para lograrlo, crearemos un objeto Libro que guarde toda la informacin de cada libro. Este sera el constructor: function Libro(titulo, autor, tema) { this.titulo = titulo; this.autor

this.tema = tema; }


DHTML

Como vemos, accederemos a las propiedades y mtodos de nuestros por medio de la referencia this. Ahora podemos crear y acceder a

Libro("JavaScript Bible", "Danny Goodman",

ro.autor);

demos incluirlos de la siguiente forma:

escribirLibro() { l libro " + this.titulo + " de " + this.autor +

" trata sobre " + this.tema); }

ara incluirlo en nuestro objeto aadimos la siguiente lnea a nuestra funcin constructora: this.escribir = escribirLibro; Y podremos acceder al mismo de la manera normal: miLibro.escribir();

Objetos predefinidos JavaScript dispone d er a muchas de

s funciones normales de cualquier lenguaje, como puede ser el manejo de algunos casos estaremos tratando con objetos

unque no nos demos cuenta, ya que los usos ms habituales de los ponen de abreviaturas que esconden el hecho de que sean

bjetos.

ctores. Se inicializa de iguientes maneras:

ngitud); emento1, elemento2, ..., elementoN);

er caso crearemos un vector con el nmero especificado de s, mientras que en el segundo tendremos un vector que contiene entos indicados y de longitud N. Para acceder al mismo debemos que el primero elemento es el nmero cero. Array tiene, entre otros, los siguientes mtodos y propiedades:

ngth: Propiedad que contiene el nmero de elementos del vector.

objetos nuestros objetos tipo Libro: miLibro = new"JavaScript"); alert(miLib Los mtodos tambin po function alert("E

P

e varios objetos predefinidos para accedlavectores o el de fechas. Enamismos diso

a) Objeto Array Como dijimos an

las stes, este objeto permite crear ve

cualquiera de vector = new Array(lo

r = new Array(elvecto

rimEn el pelemento

elemlosrecordar El objeto le


DHTML

concat(vector2): Aade los elementos de vector2 al final de los del vector

etTime(milisegundos)

btienen y ponen, respectivamente, la fecha y la hora tomados como

plementacin de stos mtodos puede variar en las ltimas versiones de Netscape.

que invoca el mtodo, devolviendo el resultado. No funciona en Explorer 3 y no forma parte del estndar ECMA. ort(funcionComparacion): Ordena los elementos del vector s

alfabticamente. Si se aade una funcin de comparacin como parmetro los ordenar utilizando sta. Dicha funcin debe aceptar dos parmetros y devolver 0 si son iguales, menor que cero si el primer parmetro es menor que el segundo y mayor que cero si es al revs.

nction compararEnteros(a,b) { fu return a

DHTML

Realizan la misma funcin que los anteriores, pero sin tantos los, ya que

meros con todos sus dgitos. Funciona en Explorer 4 y y superiores.

etMonth()

) utos)

nds(segundos)

, el mes, da, hora, minuto y segundo de espectivamente hablando.

a de nmero que va

o est construido para que tengamos nuestras variables Math, contenedor donde meter diversas constantes (como Math.E y

los siguientes mtodos matemticos:

Tabla 9. Mtodos matemticos del Objeto Math

ejemplo del ejemplo

siempre devuelven nNetscape 4.06 gsetMonth(mes) getDate() setDate(dia) getHours() setHours(horas)

etMinutes(gsetMinutes(min

etSeconds() gsetSeco Obtienen y ponen, respectivamente

ivamente, rla fecha, tambin respect getDay() Devuelve el da de la semana de la fecha en form del 0 (domingo) al 6 (sbado).

c) Objeto Math Este objeto nsino como unMath.PI

) y

Mtodo Descripcin Expresin de Resultado

abs Valor absoluto Math.abs(-2) 2

sin, cos, n

Funciones trigonomtricas, reciben el argumento en Math.cos(Math.PI) -1 ta radianes

asin, acos, atan

Funciones trigonomtricas inversas Math.asin(1) 1.57

exp, log Exponenciacin y logaritmo, Math.log(Mbase E ath.E) 1

Devuelve el entero ms pequeo mayor o igual al argument

Math.ceil(-2.7) -2 ceil o

floor Devuelve el entero ms grande menor o igual al argumento Math.floor(-2.7) -3


DHTML

round Devuelve el entero ms cercano o igual al argumento Math.round(-2.7) -3

min, max Devuelve el menor (o mayor) de sus dos argumentos Math.min(2,4) 2

pow Exponenciacin, siendo el primer argumento la base y el segundo el exponente

Math.pow(2,4) 16

sqrt Raz cuadrada Math.sqrt(4) 2

d) Objeto Number l igual que en el objetos de tipo

r, sino que debemos referirnos al genrico. Este objeto contiene A caso anterior, no se pueden crear Numbecomo propiedades los siguientes valores numricos.

Tabla 10. Propiedades del objeto Number

Propiedad Descripcin NaN Valor que significa "no es un nmero" MAX_VALUE y MIN_VALUE Mximo y mnimo nmero representable

NEGATIVE_INFINITIVE y Infinito negativo y positivo,

POSITIVE_INFINITIVE

se utilizan cuando hay desbordamiento al realizar alguna operacin matemtica

e) Objeto String Al crear una cadena estamos Su utilidad est en sus mtodos, entre lo

creando a la vez un objeto String asociado.

a posicin de la subcadena dentro de la cadena, o -1 en caso de

plit(separador) ena por el

ciona en Explorer 3. ,Verano";

ector = cadena.split(","); jemplo, el vector tendr tres elementos con cada una de las

oncat(cadena2) sultado de concatenar cadena2 al final de la cadena. No

funciona en Explorer 3 y no forma parte del estndar ECMA.

s que cabe destacar: charAt(pos) y charCodeAt(pos) Devuelven el caracter o el cdigo numrico del carcter que est en la posicin indicada de la cadena. indexOf(subcadena) Devuelven lno estar. sDevuelven un vector con subcadenas obtenidas separando la cadcarcter separador. No funcadena = "Navidad,Semana SantavEn el evacaciones de un escolar espaol normal. cDevuelve el re


DHTML

substr(indice,longitud) y substring(indice1, indice2) Devuelven una

teres a subcadena de la cadena, ya sea cogiendo un nmero de

arac partir de un ndice o pillando todos los caracteres entre dos

" onMouseOver="MiFuncion()">

Tabla 11. Eventos de JavaScript

Descripcin Elementos que lo admiten

cndices. toLowerCase()y toUpperCase() Transforman la cadena a minsculas y maysculas, respectivamente.

Eventos Un evento, como su mismo nombre indica, es algo que ocurre. Para que una rutina nuestra se ejecute slo cuando suceda algo extrao deberemos llamarla desde un controlador de eventos. Estos controladores se asocian a un elemento HTML y se incluyen as:

DHTML

impidiendo, de paso, que quien est viendo la pgina pueda hacer uso del

HTML>

arios esconden el cdigo a navegadores sin JavaScript

function Alarma() { e activo la funcin Alarma"); ue;

eb:

mismo). Ejemplo 22: Eventos eventos.html <

>

DHTML

Definicin mediante cdigo isto como declarar un controlHemos v

HTML. Sinador de eventos desde etiquetas

s versiones 3 de Netscape y 4 de Explorer, acerlo mediante cdigo.

rmiten atributos acceso a dichos

tml

}

embargo, y desde latro modo de hexiste o

Muchos objetos cuyas etiquetas HTML correspondientes pen controladores de evento, permiten el que define

controladores por medio de propiedades con el mismo nombre. Por ejemplo, la pgina: Ejemplo 23: Definicin mediante cdigo load1.h

. ..

Figura 41. Resultado de load1.html


DHTML

Figura 42. Resultado del mtodo alert

ibir como:

load2.html ...

/HTML>

Modelo de objetos duando funciona en un navegador, el lenguaje JavaScript dispone de una erie de objetos que se refieren a cosas como la ventana actual, el

que pueda parecer, no existe

e representa una ventana or. Dado que cada marco se considera una ventana

e puede reescrS

<

el documento Csdocumento sobre el que trabajamos, o el navegador que estamos utilizando. Para los ms iniciados en la programacin orientada a objetos, conviene aclarar que en esta jerarqua, contra loherencia alguna. Los objetos se relacionan por composicin, es decir, un objeto Window se compone (entre otras cosas) de un objeto Document, y ste a su vez se compone de diversos objetos Form, Image, etc..

jerarqua es el objeto Window, quEl padre de estae nuestro navegadd

distinta, cada uno de ellos dispone de su propio objeto Window. El objeto Document representa el documento HTML y cada uno de los objetos que lo componen se corresponde con diversas etiquetas HTML.


DHTML

Objeto Window na sobre la que estamos trabajando e

a la barra de tareas, el documento o la secuencia de direcciones de la ltima sesin. En este captulo veremos los mtodos y propiedades ms utilizadas, al menos por m, dejando el estudio de dichos objetos para sus captulos correspondientes. An cuando el objeto se llame Window, disponemos siempre de una

Por ltimo, indicar que en Javascript, se supone que todas las propiedades y tilizar ninguna referencia, en realidad se hacen

ow.]open(URL, nombre, propiedades)

able, si no te invocamos el mtodo: el navegador automticamente sabr

los

ner cuidado con las propiedades que modifiquemos, es posible nas combinaciones de los mismos no funcionen en todos los res. El Explorer 4, por ejemplo, da error ante la combinacin

enubar=no. Veamos un ejemplo:

Es el objeto principal. Define la ventaincluye los objetos referentes

referencia a l llamada window (recuerde que Javascript distingue entre maysculas y minsculas). Ser con esa referencia con la que trabajemos.

mtodos que llamamos sin uutilizando esa referencia window. As, por ejemplo, cuando ejecutamos el mtodo alert en realidad lo que estamos haciendo es ejecutar el mtodo window.alert. [Variable=][wind Permite crear (y abrir) una nueva ventana. Si queremos tener acceso a ella

esde la ventana donde la creamos deberemos asignarle una varidsimplemenque pertenece al objeto window. El parmetro URL es una cadena que contendr la direccin de la ventana que estamos abriendo: si est en blanco, la ventana se abrir con una pgina en blanco. El nombre ser el

ue queramos que se utilice como parmetro de un TARGET y lasqpropiedades son una lista separada por comas de algunos de iguientes elementos: s

olbar[=yes|no] to

location[=yes|no] directories[=yes|no] status[=yes|no] menubar[=yes|no] scrollbars[=yes|no] esizable[=yes|no] r

width=pixels height=pixels Debemos teque algunavegadotoolbar=no, directories=no, m Ejemplo 24: Funcin open() ventanas.html


DHTML

function AbrirVentana() {

oolbar=no,directories=no,menubar=no,status=yes"); nueva

B>Texto de

INPUT TYPE="button" NAME="Boton1" VALUE="Abrir otra ventana"

/HTML> Este ejemplo muestra la posibilidad de abrir nuevas ventanas de nuestro navegador con JavaScript. Se llama a la funcin AbrirVentana desde el evento onClick, como ya sabemos hacer desde el primer ejemplo. Esta funcin crea la nueva ventana MiVentana y escribe en ella por medio del objeto Document todo el cdigo HTML de la pgina. Resultado Web:

MiVentana=open("","ventana2","t MiVentana.document.write("Una ventana"); MiVentana.document.write("Visitar AL p://www.w3c.org">W3C

Capunay le

irA simplemente utiliza la opcin elegida para obtener por medio r la direccin de la pgina a la que debe acudir.

escogida Ejemplo 26: Select con javascr select.htm function irA(menu){

ref = menu.opti window.location.h }

DHTML

Otros objetos lo de objetos del documento define varios objetos, por as decirlo,

cin con nada fsico de la pgina en la que que estn en

dio de la referencia document.history y ontiene todas las direcciones que se han visitado en la sesin actual.

erm pone de varios mtodos para sustituir l documento actual por alguno que el usuario ya haya visitado:

a pgina anterior. Es muy sencillo de utilizar:

iente.

e se indique, siendo donde un nmero tal que go(1)=forward()

rotocolo de la pgina actual. Habitualmente http.

de se alberga la pgina actual.

la pgina actual.

dido a una pgina por medio de un ancla, contiene una ohadilla seguida de ese ancla. Por ejemplo, #location.

E"m

l modeenores", que no tienen rela

estamos. Es decir, no guardan relacin con las etiquetas HTMLellas escritas.

Objeto History Se accede a este objeto por mecAunque no p ite acceder a ellas, dise back() Volver a l forward() Ir a la pgina sigu go(donde)Ir a dondy go(-1)=back().

Objeto Location Se accede a este objeto por medio de la referencia document.location y contiene informacin sobre la direccin de la pgina actual en varias propiedades. href Permite el acceso a la direccin de la pgina actual. Si lo cambiamos, pues cambiaremos de pgina. protocol P host Mquina don pathname Camino de hash Si hemos accealm search


DHTML

Puede que hallas notado que muchas pginas (especialmente en los con una estructura

ina.php?busq=HTML+en+espanol&tipo=Y. Esta propiedad acceder a esa ltima parte de la direccin (a partir de la

terrogacin, inclusive). Puede ser til para pasar parmetros de una pgina

donde esta ejecutndose. o podemos sobreescribir estos atributos, pero s leerlos.

bjeto slo est disponible desde las 0 de ambos navegadores.

lo:

as Communicator o IE4 para veriguarlo.";

document.write(texto); Puede verse que antes de acceder al objeto, investigo si ste existe, most mensaje stancias en caso de que no sea as.

motores de bsqueda) tienen unas direcciones inmensascomo: pagpermite ina otra.

Objeto Navigator Se accede a l por medio de la referencia navigator y nos permite averiguar varias caractersticas del navegador que usamos. Por ejemplo: appName Nombre del navegador. appVer Nmero principal de versin. language Idioma del mismo. platform

lataformaPN

Objeto Screen Como caba esperarse, se puede acceder a este objeto por medio de la referencia screen. Nos permitir conocer la configuracin de la pantalla del usuario. Al igual que en el anterior objeto, todos sus atributos son de slo

ctura. Conviene indicar que este oleversiones 4. height :Altura de la resolucin de la pantalla. width :Anchura de la resolucin de la pantalla. pixelDepth :Nmero de bits por pixel.

jempEif (window.screen) texto=screen.width + "x" + screen.height + "x" + Math.pow(2,screen.colorDepth) + " colores."; else texto="quien sabe cuantos colores, necesito que tenga

rando un de circun


DHTML

FichUn fi es un ar e podremos guardar funciones y variables globa rn leerse desde cualquier pgina HTML. Gracias a ellos podre plicar funciones que se necesiten en ms de un do rarlos a nuestras pginas de esta manera: Ejemplo 27: Uso de externo.html

DHTML

HOJ CSS Ca Dentro del dis eb, se presenta esta como la vanguardia en uanto a definicin de estilos dentro de las plantillas de diseo. A travs de

nforman el proyecto. SS2, como fue antes CSS1, se basa en una serie de reglas de diseo:

atibilid Las aplicaciones del o CSS s hojas de estilo CSS1.

aci e estilo y de Adems, las ones

trar los to estil r CSS no ser procesado, pero el conte

men os. Las hojas de comp

acionesmarcado. Dimpacto en e

Independen or, la plataforma y el dispositivo. Las hojas

un archivo necesita ser cambiado.

d. CSS2 es ms compleja que CSS1, pero sigue siendo je de estilo simple que es humanamente legible y posible

eterminado. Rendimiento de la red. CSS proporciona una compacta codificacin

los contenidos. Comparado con los archivos de nes o de audio que son usados frecuentemente por los

ara conseguir ciertos efectos en el procesamiento, las tilo, la mayora de las veces, disminuyen el tamao del Adems, menos conexiones de la red tienen que ser

abiertas, lo cual ayuda a incrementar el rendimiento de la red. Flexibilidad. Las CSS pueden ser aplicadas al contenido de varias

maneras. La caracterstica clave es la capacidad de formar una cascada de estilos con la informacin especificada en la hoja de

AS DE ESTILO EN CASCADA

scade Style Sheet (Hojas de Estilo en Cascada).

eo de pginas Wcinstrucciones en cdigo HTML se definen los estndares del conjunto de pginas que coC

Compusuari

ad hac 2 sern capaces de entender la

ia atrs y hacia adelante.

Las aplic ones del usuario CSS1 podrn leer las hojas dscartar las partes que no entienden. CSS2

aplicacimos

del usuario que no soporten CSS sern capaces de documentos estilsticamente mejorados. Por supuesto, el

efectodo

stico hecho posible ponido ser presentado.

Comple tariedad con documentos estructuradlementan los documentos estructuradestilo os (ej., HTML y XML) proveyendo informacin estilstica del texto ebe ser fcil cambiar la hoja de estilo con poco o ningn l sistema de marcas.

cia del vended

aplic

de estilo permiten a los documentos permanecer independientes del vendedor, la plataforma y el dispositivo. Las mismas hojas de estilo son tambin independientes del vendedor y la plataforma, pero CSS2 permite dirigir una hoja de estilo a un grupo de dispositivos (ej., impresoras).

Mantenibilidad. Apuntando a una hoja de estilo desde los documentos, los responsables de los sitios en la Web pueden simplificar el mantenimiento y conservar un estilo y un efecto consistente a todo lo largo del sitio. Por ejemplo, si el color del fondo de las pginas de una organizacin cambia, slo

Simplicidaun lenguade escribir. Las propiedades CSS se mantienen independientes unas de otras en la medida de lo posible y generalmente slo hay un modo de conseguir un efecto d

para presentar imgeautores phojas de escontenido.


DHTML

estilo predeterminada (aplicacin del usuario), las hojas de estilo del usuario, las hojas de estilo vinculadas, el encabezamiento del documento y en los atributos de los elementos que forman el cuerpo del documento.

Riqueza. Proporcionando a los autores un abundante juego de efectos de procesamiento, aumenta la riqueza de la Web como medio de expresin. Los diseadores han estado ambicionando la funcionalidad comnmente encontrada en los programas de edicin y de presentaciones grficas. Algunos de los efectos requeridos entran en conflicto con la independencia del dispositivo, pero CSS2 llega muy lejos satisfaciendo las demandas de los diseadores.

Combinacin con lenguajes alternativos. El juego de propiedades de CSS descriptas en esta especificacin conforman un slido modelo de aplicacin de formatos para presentaciones visuales y auditivas. Este modelo puede ser accedido mediante el lenguaje CSS, pero la combinacin con otros lenguajes tambin es posible. Por ejemplo, un programa en JavaScript puede cambiar dinmicamente el valor de la propiedad 'color' de un determinado elemento.

Accesibilidad. Varias caractersticas de CSS harn a la Web ms accesible para los usuarios con discapacidades: Las propiedades para controlar la apariencia de las fuentes permiten a los autores eliminar las inaccesibles imgenes de texto renderizado. Las propiedades de posicionamiento permite a los autores eliminar los artilugios con el sistema de marcas (ej., imgenes invisibles) para forzar la composicin. La semntica de las reglas !important indica que los usuarios con particulares requerimientos de presentacin pueden suplantar las hojas de estilo del autor. El nuevo valor 'inherit' (heredado) para todas las propiedades mejora la generalidad del funcionamiento en cascada y permite una ms fcil y consistente sintona en el estilo. El avanzado soporte de medios, incluyendo grupos de medios y los tipos de medios braille, de relieve y tty permitirn a los usuarios y autores confeccionar pginas para esos dispositivos. Las propiedades auditivas ofrecen control sobre la salida de voz y audio. Los selectores de atributos, la funcin 'attr()' y la propiedad 'content' brindan acceso al contenido alterno. Los contadores y la numeracin de secciones y prrafos pueden mejorar la navegabilidad del documento y economizar espacio de sangrado (importante en los dispositivos braille). Las propiedades 'word-spacing' y 'text-indent' tambin eliminan la necesidad de usar espacios en blanco extras en el documento.

Aqu Mostraremos cun fcil puede ser disear unas simples hojas de estilo. Para esta gua, necesitar saber un poco del cdigo HTML y alguna terminologa bsica de composicin grfica. Comenzamos con un pequeo documento HTML: Ejemplo 28: HTML y CSS


DHTML

>

rCap

L PUBLIC "-//W3C//DTD HTML 4.0//EN">

scarCap

ente HTML y pueden compartirse entre varios documentos. Para vincular

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> HTML>

DHTML

ento LINK especifica: lesheet").

uto "href". de hoja de estilo que se vincula: "text/css".

Para mostrar la ntima relacin entre una hoja de estilo y el sistema as, continuamos usando el elemento STYLE en esta

carCap ----

r del D gunda coloca el color del en 'blue'. Co o ningn valor para el color

ento P, ste heredar el color de su elemento padre, es decir, ento H1 tambin es un elemento hijo de BODY pero la

plaza el valor heredado. En CSS existen a menudo tales ntre diferentes valores y esta especificacin describe cmo

erlos. 2 tiene ms de 100 propiedades diferentes, incluyendo 'color'. Veamos

El elemel tipo de vnculo: a una hoja de estilo ("styla ubicacin de la hoja de estilo a travs del atribel tipo

estructurado de marcgua. Agreguemos ms colores: Ejemplo 30: Colores con CSS ---- La Web de Os BODY { color: red } H1 { color: blue }

La Web de OscarCap Esta pgina Web te ensear mucho.

a hoja de estilo contiene ahora dos reglas: la primera establece el coloL

elemento BO Y como 'red' , en tanto la selemento H1 mo no se ha especificade

del elemBODY. El elem

la reemsegunda regnflictos eco

resolvSSC

algunos otros: ---- La Web de OscarCap ----

BODY { font-family: "Gill Sans", sans-serif; font-size: 12pt; margin: 3em; }


DHTML

La Web de OscarCap Esta pgina Web te ensear mucho. Lo primero que se puede observar es que varias declaraciones se agrupan en un bloque encerrado por llaves ({...}) y separado por un punto y coma, no obstante la ltima declaracin tambin debe estar seguida por un punto y coma. La primera declaracin en el elemento BODY establece la familia de fuentes "Gill Sans". Si esa fuente no est disponible, el navegador del usuario usar la familia 'sans-serif' que es una de las cinco familias de fuentes genricas

ue todas las aplicaciones del usuario reconocen. Los elementos hijos de

argen alrededor del elemento BODY es tres veces mayor que el tamao de

de CSS

Documents

LIBRO PHP