Documente Academic
Documente Profesional
Documente Cultură
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
J AVASCRIPT 61
ELEMENTOS BSICOS 62
COMENTARIOS 62
LITERALES 63
TIPOS DE DATOS 64
VARIABLES 64
OPERADORES 65
ESTRUCTURAS DE CONTROL 68
OBJ ETOS 70
OBJ ETOS PREDEFINIDOS 71
EVENTOS 75
DEFINICIN MEDIANTE CDIGO 77
MODELO DE OBJ ETOS DEL DOCUMENTO 78
OBJ ETO WINDOW 79
OBJ ETO DOCUMENT 82
OBJ ETO FORM 83
OTROS OBJ ETOS 88
FICHEROS .J S 90
HOJ AS 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 EJ ECUCIN 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 OBJ ETO 187
EXTENDIENDO OBJ ETOS 188
AUTO CARGA DE OBJ ETOS 189
ACCESO A MYSQL CON PHP ORIENTADO A OBJ ETOS 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 OBJ ECT 215
CLASES PREDEFINIDAS 215
CONEXIONES CON PDO 218
EJ ECUCIN 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
AJ AX 281
XAJ AX 282
EVENTOS CON XAJ AX 291
TRABAJ O CON FORMULARIOS EN XAJ AX 293
ERROR COMN 298
BSQUEDA EN BASE DE DATOS CON XAJ AX 299
ADMINISTRACIN DE DATOS CON AJ AX 301
CONTROLADOR CON AJ AX 301
CAPA DE DATOS CON AJ AX 306
VISTA CON AJ AX 308
X. REFERENCIAS BIBLIOGRAFICAS 313
XI. ANEXOS 314
LISTA DE EJ EMPLOS 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, J aime 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
Oscar E Capuay Uceda 11
Preparando la plataforma de desarrollo
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.
Oscar E Capuay Uceda 12
Preparando la plataforma de desarrollo
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.
Oscar E Capuay Uceda 13
Preparando la plataforma de desarrollo
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
Oscar E Capuay Uceda 14
Preparando la plataforma de desarrollo
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
Oscar E Capuay Uceda 15
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: <br />.
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 E
universal
su prime
exclusivamente para crear documento
se utiliza en la mayora de aplic
comercial
etc.).
El lenguaj
"Tags", la
<tag> Modelo de Inicio de una etiqueta.
</tag>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 <HTML> y </HTML>. e
<HTML>
[Documento Web]
</HTML>
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.
Oscar E Capuay Uceda 16
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 <HEAD> 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 <BODY> y </BODY>.
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
<HEAD>
<TITLE> 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
</HEAD>. En la cabe
p
navegado
de la ven
<TITLE> y </TITLE>.
, El cuerpo
Dentro 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: e
que de acuerdo a las etiquet
etiquetas H
orden:
<HTML>
gina </TITLE>
<
<BODY>
[En este lugar escribiremos el contenido de la pgina]
</BODY>
</HTML>
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 <P>. n
El contenido de la pgina puede te
entre las etiquetas <H1> y </H1>, <H2> </H2>
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 <CENTER> y </CENTER>
(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 <HR>(este tag no tiene la
correspondiente etiqueta de cierre). Con ella se obtiene una raya horizontal
Oscar E Capuay Uceda 17
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
<HEAD>
</TITLE>
mi primera pgina Web programando con HTML, aun es muy sencillo el
Ejemplo 1: Prim
Ejercicio01.html
<HTML>
<TITLE> Mi Primer Ejercicio
</HEAD>
<BODY>
<H1> <CENTER> Ejercicio 1 </CENTER> </H1>
<HR>
Esta es
diseo pero pronto haremos pginas ms complejas.
<P> Este es el segundo prrafo.
</BODY>
</HTML>
Resultado Web
Figura 10. Resultado de ejercicio01.html
Cuando program
sea 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 <CENTER>
dentro de la etiqueta <H1>. 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.
Oscar E Capuay Uceda 18
DHTML
Formato de Texto con
texto, este
os crear un
s la etiqueta <P>, 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 <BR>. 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: <B> para poner el texto en negrita, y <I> 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 <SUP> </SUP> y <SUB>
te. Por ejemplo: m
2
se obtiene con: m<SUP>2</SUP>
/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:
<UL>
<LI> Naranja
LI> Manzana
HTML
En ejemplo anterior, podemos notar que cuando colocamos
ce sin ningn formato en especial. Slo, cuando quisim apare
nuevo prrafo, utilizamo
blanco despus de la lti
un salto de l
utilizare
etiqueta de cierre.
Negrita
Cuando tra
egrit son: n
exto u t
formato cursiva.
c rre (</B> y </I ie
E
Al escribir el texto, si ponemos ms de un espacio en blanco entre dos
palabras observamos que el navegador slo reconoce uno de ellos. Si
queremos forzarle a que lo haga, debemos poner el cdigo " " (non-
breaking space).
Super
En las frmulas
subndices, que se co
</SUB> respectivamen
y v con: v<SUB>x<
x
Listas
Cuando tenemos un conjunto de eleme
<
<LI> Fresa
LI> Etc. <
</UL>
Como se puede apreciar, para crear una lista de este tipo se utiliza la
etiqueta <UL>, y luego para cada elemento la etiqueta <LI> (List Item).
Oscar E Capuay Uceda 19
DHTML
Resultado Web
Figura 11. Lista sin orden
Adems podemos anidar una lista dentro de otra. Por ejemplo:
<LI> Bacalao
<UL>
<LI> Mamferos
<LI> Peces
<UL>
<LI> Sardina
</UL>
<LI> Aves
</UL>
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 d o
est en que en el resultado aparecer automticam
ativo para cada elemento de la lista. correl
<OL>
troduccion <LI> In
<LI> Conceptos Basicos
<LI> Aplicaciones
Oscar E Capuay Uceda 20
DHTML
<LI> Bibliografia
</OL>
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 <DL>y </DL>. 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 <DT>(definition term) y 2) la
definicin de dicha cosa, que se consigue con la etiqueta <DD>(definition
definition).
<DL>
<DT> HTML
<DD> Son las iniciales de HyperText Markup Language
<DT> WWW
<DD> Son las iniciales de World Wide Web
</DL>
Su resultado es:
Al igual que las
Figura 14. Lista de definiciones
Oscar E Capuay Uceda 21
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
q
que no queremos
stos dos smbolos:
!-- y --> .
Por eje
<!-- Est e rte -->
ici E>
</HEAD>
<BODY>
<CENTER>
<H1> Mis Cur
</CENTER>
<HR>
LI> Software de Aplicacin I
s de rencial
os cursos que me gustan son <I> (en orden de preferencia): </I>
eria de Software
erencial
s de Computadoras
ue se vean en pantalla.
Esto se consigue encerrando dichos comentarios entre e
<
mplo:
o es un com ntario que puedo incluir en cualquier pa
Ejemplo 2: Comentarios
Ejercicio02.html
<HTML>
HEAD> <
<TITLE> Ejerc o 2 </TITL
sos </H1>
Sin un orden particular, mis <B> cursos </B> son los siguientes:
<UL>
<LI> Redes de computadoras
<LI> Ingenieria de Software
<UL>
<LI> Herramientas Case
<
<LI> Software de Aplicacin II
</UL>
<LI> Sistema Informacin Ge
/UL> <
L
<OL>
<LI> Ingeni
<LI> Sistemas de Informacin G
<LI> Rede
</OL>
</BODY>
</HTML>
Oscar E Capuay Uceda 22
DHTML
Resultado Web:
Figura 15. Resultado de ejercicio02.html
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 tilde
especiales, esto debido a
texto. Una de ellas es d
comando escrito entre los smbolos "<" y ">". Por ta
e
ambigedad, ya que el nav
fi
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 c
especficas de distintos idiomas. Los cdigos de la
Oscar E Capuay Uceda 23
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
- á - Á
- é - É
- í - Í
- ó - Ó
- ú - Ú
- ñ - Ñ
- ¿ - ¡
T
escribimos nuestro texto sin hacer ni
e
posible que el resultado lo veamos correctamente en nuestro navegador,
pero nunca podremos estar seguros que l
estras pginas con otros n a
Para corregir el ejercicio anterior con vocales acentuadas util
siguiente ejemplo.
Ejemplo 3: Uso de tildes
Ejercicio03.html
HTML> <
<HEAD>
<TITLE> Ejercicio 3 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Mis Cursos </H1>
</CENTER>
<HR>
in un orden particular, mis <B> cursos </B> son l S
<UL>
<LI> Redes de computadoras
<LI> Ingeniería de Software
<UL>
<LI> Herramientas Case
<LI> Software de Aplicación I
<LI> Software de Aplicación II
</UL>
<LI> Sistemas de Información Gerencial
/UL> <
Los cursos que me gustan son <I> (en orden de preferencia): </I>
<OL>
<LI> Ingeniería de Software
Oscar E Capuay Uceda 24
DHTML
<LI> Sistemas de Información Gerencial
<LI> Redes de Computadoras
</OL>
</BODY>
/HTML> <
Resultado Web:
Figura 16. Resultado de ejercicio03.html
te en este elemento: el Hipervnculo o
tos repartidos
s, en general, tienen la siguiente estructura:
yyy </A>
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 justamen
enlace, pues nos da la posibilidad de unir los distintos documen
por todo el mundo.
Estructura de los enlaces
Los enlace
<A REF ="xxx" >
Oscar E Capuay Uceda 25
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 saltar
se 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
> </A>
ltar desde aqu a la pantalla final, pongo la siguiente
pgina nuestra
arias
mpre
pal y otras enlazadas a ella.
<A
,
#marcador (la palabra marcador puede ser cu
aparecern
es, entonces:
<A HREF=" #marcador" > YYY </A>.
En el sitio exacto a donde que
tiqueta: <A NAME=" marcador" e
or ejemplo, si quiero sa P
etiqueta:<A HREF="#final">Haga Click aqu para ir al final</A>.
En el final del documento se inserta esta etiqueta: <A NAME="final"></A>.
Enlaces con otra
Generalmente cuando vamos a crear un Sitio Web, contamos con v
ginas, las cuales necesitamos enlazar unas con otras. Contamos sie p
con una pgina que ser la Inicial o princi
Supongamos que queremos enlazar con la pgina creada en el ejemplo del
captulo anterior, que la hemos llamado ejemplo2.html. En este caso,
simplemente sustituimos lo que hemos llamado XXX (el destino del enlace)
por el nombre del archivo: <A HREF="ejemplo2.html">Ejemplo 2 </A>
Si queremos que vaya a un sitio concreto de otra pgina nuestra en vez de ir
al principio de la pgina, adonde va por defecto, en ese sitio tenemos que
colocar una marca o marcador (ver seccin anterior), y completar el enlace
on la referencia a ese marcador. c
En este ejemplo podremos hacer un enlace de este tipo:
Deseo poner un enlace desde aqu a otra pgina (supongamos que se llame
pag5.html), pero a un sitio concreto de esa pgina, donde he puesto el
arcador <A NAME="cursos"></A>. Entonces la etiqueta tiene que ser: m
HREF="pag5.html#cursos">Cursos </A>.
Oscar E Capuay Uceda 26
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</A>
CENTER><H1> Mis páginas favoritas </H1></CENTER>
stas son mis páginas favoritas:
EF="http://www.desarrolloweb.com">Desarrollo Web</A>
REF="http://www.forosdelweb.com">Foros del Web</A>
cursos, entonces en la etiqueta tendra que haber puesto "cursos/pag5.html".
Segn el prrafo anterior, la etiqueta tiene que ser: <A
HREF="cursos/pag5.html#cursos">Cursos </A>.
Y
directorio anterior o nivel superior, en la etiqueta tendra q
"../pag5.html". Esos dos puntos (..) hace que se dirija al d
Obsrvese que se debe utilizar el smbolo / para indicar l
o este otro \, que es propio nicamente de Windows. Pod n
estas 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 S
decir, que est en un servi
ompleta, o URL (Uniform Re c
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:
<A HREF="http://www.nasa.com/">Pgina inicial de la Nasa </A>
s importante escribir estas di E
maysculas 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
<HTML><HEAD><TITLE> Ejercicio 4 </TITLE></HEAD>
<BODY>
<
<HR>
E
<P><A HR
<BR><A H
<BR> <A HREF="http://www.google.com">Google</A>
</BODY>
</HTML>
Oscar E Capuay Uceda 27
DHTML
Resultado Web:
Figura 17. Resultado de ejercicio04.html
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:
<IMG SRC="imagen.gif">
Con el comando IMG SRC (Image Source, origen o fuente de la imagen) se
dica que se quiere mostrar u in
tenga el archivo).
etiqueta se Dentro de la
<IMG SRC="imagen.gif" ALT="descripcin">
on ALT se inserta una descripc C
imagen. ALT se puede o
pgina con un programa
capaces de ver la image
S
nombre. 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 es
intentando cargar nuestra pgina se canse de esperar, y desista de ello.
Oscar E Capuay Uceda 28
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 </A>.
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):
<A HREF="ejercicio2.html"><IMG SRC="flecha.gif"></A>
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 ese
rectngulo, 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
p
a un lado
De momento nos vamos a limitar a escoger l
a imagen (si es que queremos ponerl respecto a l
puede poner arriba, e
ando AL aade el com
if" ALIGN=TOP> Titular alineado arriba <IMG SRC="isla.g
<IMG SRC="isla.gif" ALIGN=MIDDLE> Titular alineado en medio
<IMG SRC="isla.gif" ALIGN=BOTTOM> Titular alineado abajo
Otra posibilidad muy interesante es la de utilizar una imagen como enlace a
otra pgina. Para estos casos se utilizan generalmente imgenes pequea
(iconos), aunque se puede usar cualquier tipo de imagen.
Segn vim
A HREF= <
Donde xxx era el
dentro de la etiqueta de
B
<A HREF="ejercicio2.html"> <IMG SRC="flecha.gif" BORDER=0> </A>
Posicionando el cursor sobre esta ltima ima
ta
sirve de enlace.
Ejemplo 5: Im
<HTML>
<HEAD>
Oscar E Capuay Uceda 29
DHTML
<TITLE> Ejercicio 5 </TITLE>
icio 5</H1></CENTER>
entos básicos sobre todo
cio1.html"> <IMG SRC ="iconos/nuevo.gif" width="20"
</A> Mi primera pagina Web.
cio2.html"> <IMG SRC ="iconos/buscar.gif" width="15"
"15" border="0"> </A> Mis Cursos
P </H3>
ado.jpg" ALT="playa" height="145">
R>
Resultado Web:
</HEAD>
<BODY>
<CENTER><H1>Ejerc
<HR>
Esta es una pgina Web. Tiene todos los elem
imágenes.
<P><A HREF ="ejerci
height="22" border="0">
<P><A
height=
HREF ="ejerci
<CENTER>
<H3> Desarrollo Web con PH
<IMG SRC="imagenes/tecl
</CENTE
</BODY>
</HTML>
Figura 18. Resultado de ejercicio05.html
Oscar E Capuay Uceda 30
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:
<TABLE BORDER=[espesor]>
[resto de las etiquetas]
</TABLE>
<TABLE BORDER=1>
entro de estas etiquetas, es necesario especificar las filas y columnas que
uetas para formar cada fila (row) de la tabla, que son: <TR> y </TR>.
stas etiquetas tenemos que repetirlas tantas veces como filas queremos
s veces como celdas queremos que haya en esa fila.
ntana -->
>fila2-celda2</TD> <TD>fila2-celda3</TD></TR>
/HTML>
Las etiquetas necesarias p
<TABLE> Y </TABLE> p
A esta
especificar
aracters c
Por ejemplo: si queremos una tabla con un borde de una unidad de espesor,
escribiremos el siguiente cdigo:
[resto de las etiquetas]
</TABLE>
D
contendr la tabla.
Las etiq
E
que tenga la tabla. Las etiquetas para crear columnas son: <TD> y </TD>,
que engloban el contenido de cada celda concreta (texto, imgenes, etc.).
Hay que repetirla tanta
Ejemplo 6: Tablas
Ejercicio06.html
<HTML>
<HEAD><TITLE> Ejercicio 6 </TITLE></HEAD>
<BODY BGCOLOR="#CCFFFF" TEXT="#AA0000">
<CENTER>
<H1> Ejercicio 6 </H1>
</CENTER>
<!-- Lnea horizontal con 75% de ancho de la ve
<HR width=75%>
<A HREF="ejercicio01.html"> <IMG SRC="iconos/nuevo.gif" WIDTH=20 HEIGHT=22
border="0"> </A>
<TABLE BORDER=1>
<TR><TD>fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1-celda3</TD></TR>
TR><TD>fila2-celda1</TD> <TD <
</TABLE>
</BODY>
<
Oscar E Capuay Uceda 31
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 <TD>fila2-celda3</TD>, 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: <CAPTION> y </CAPTION> para su inicio y finalizacin,
cuenta el ejercicio anterior, vemos como podemos utilizar esta
ORDER="1">
desiguales </caption>
Titular de la tabla
Se puede aadir un tit
superior de la tabla que indica cul es su contenid
con las
respectivamente.
Tomando en
etiqueta:
<table B
<caption>Ejemplo de filas
<tr>
Oscar E Capuay Uceda 32
DHTML
<td>fila1-celda1</td>
<td>fila1-celda2</td>
<td>fila1-celda3</td>
a2-celda2</td>
/table>
R sultado Web:
</tr>
<tr>
<td>fila2-celda1</td>
<td>fil
</tr>
<
e
Figura 21. Tabla con etiqueta CAPTION
dems de las celdas que contienen datos normales, podemos poner, si no A s
umna 2</TH> <TH>Columna 3</TH>
</TR>
<TR>
<TD>fila1-celda1</TD>
<TD>fila1-celda2</TD>
<TD>fila1-celda3</TD>
</TR>
<TR>
<TD>fila2-celda1</TD>
<TD>fila2-celda2</TD>
</TR>
</TABLE>
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: <TH> y </TH>. Vamos a aadir, en el ejemplo anterior, una fila de
estas celdas de cabecera, antes de las otras dos que ya existan:
<TABLE BORDER="1">
<CAPTION>Ejemplo de filas desiguales </CAPTION>
<TR>
<TH>Columna 1</TH> <TH>Col
Oscar E Capuay Uceda 33
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:
<TD ALIGN=CENTER> Al centro </TD>
<TD ALIGN=RIGHT> A la derecha </TD>
<TH ALIGN=LEFT> Cabecera a la izquierda </TH>
n el caso de la etiqueta <TH>, 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:
</TD>
entro </TD>
N=BOTTOM> Abajo </TD>
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
E
celda.
Por defecto, las
ta
siguiente
<TD VALIGN=TOP> Arriba
N=CENTER> C <TD VALIG
<TD VALIG
Cambiando las dim
r norma El navegado
el nmero de fila
los bordes, etc. Pero nosotros por medio de atributos
modificar las dimensiones de una tabla. Estos atribu
HEIGH
porcentaje de la dimen
Celdas que abarcan a
A veces puede interes
Esto s
COLS
Oscar E Capuay Uceda 34
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 </CAPTION>
<TH>Columna 1</T H>
</TR>
<TR>
elda sobre 3 columnas </TD>
<TD>fila1-celda1</TD>
</TR>
<TR>
< f
<T >f
</TR>
/TA E
nmero determinado d
Por ejemp
a que abarc
TABLE B <
<CAPTION>Ejem
TR> <
H> <TH>Columna 2</TH> <TH>Columna 3</T
<TD COLSPAN=3> C
<TR>
<TR>
<TD>fila1-celda2</TD>
<TD>fila1-celda3</TD>
TD>ila2-celda1</TD>
ila2-celda2</TD> D
< BL >
Resultado Web
Figura 23. Tabla con COLSPAN
pero que
barque tambin a la siguiente:
DER="1">
<TR>
O, en la misma tabla, vamos a aadir una celda en la primera fila.
a
<TABLE BOR
<CAPTION>Ejemplo de filas desiguales </CAPTION>
Oscar E Capuay Uceda 35
DHTML
<TH>Columna 1</TH> <TH>Columna 2</TH> <TH>Columna 3</TH>
</TR>
-celda2</TD>
<TR>
<TD COLSPAN=3> Celda sobre 3 columnas </TD>
<TR>
<TR>
<TD>fila1-celda1</TD>
<TD>fila1-celda2</TD>
<TD ROWSPAN=2> Celda junto a 2 filas </TD>
</TR>
<TR>
<TD>fila2-celda1</TD>
<TD>fila2
</TR>
</TABLE>
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>
P
se puede variar esto con el atributo CELLSPACING, que se pon
a etiqueta <TABLE>. l
20 pix Por ejemplo, para obtener una separacin de
ponemos: <TABLE BORDER CELLSPACING=20>
Separacin entre el borde y el contenido dentro de las celdas
a separa L
pixel. Si queremos cambiar esto, l
CELLPADDING, que se pone dentro de la etiqueta <T
Por ejemplo, para obtener una separacin de 20 pixels entre el contenido y
os bordes, dentro de cada celda: <TABLE BORDER CELLPADDI l
Oscar E Capuay Uceda 36
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 celd
15 y separacin del conte
lo obte
R=5 CELLSPACING=15 CELLPADDING=20> <TABLE BORDE
esultado R
Figura 25. Tabla con CELLSPACING y CELLPADDING
lo06.html
CENTER>
HR width=75%>
Ejemplo 7: Ejemplo de Tablas en HTML
ejemp
<HTML>
<HEAD>
<TITLE> Tablas </TITLE>
</HEAD>
<BODY>
<
<H1> Tablas </H1>
</CENTER>
<
Oscar E Capuay Uceda 37
DHTML
<TABLE BORDER=3 CELLSPACING=10 CELLPADDING=8>
<TR>
<TD>fila1-celda1</TD>
<TD>fila1-celda2</TD>
<TD>fila1-celda3</TD>
</TR>
<TR>
<TD>fila2-celda1</TD>
TD>fila2-celda2< < /TD>
/TR>
<TD>fila2-celda3</TD>
<
</TABLE>
</BODY>
</HTML>
Resultado Web
Figura 26. Resultado de ejemplo06.html
Formularios
Los formularios permiten a los usuarios enviar informacin al servidor, en el
ual hay insta c lado(s) programa(s) que procesan esta informacin.
uiente:
ara poder
tones de envo y de borrado.
Etiqueta de cierre </FORM>
Estructura de un formulario
uctura de un formulario es la sig La estr
Etiqueta de inicio:
Cuerpo del formulario, con los distintos elementos p
introducir los datos.
Bo
Oscar E Capuay Uceda 38
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".
<FORM ACTION=mailto:email METHOD="POST" ENCTYPE = "TEXT/PLAIN">
El atributo ACTION indica la accin que se debe efe
E
enviados a la direccin de em
atributo ACTION.
Con el atributo ENCTYPE="TEXT/PLAIN" se consigue que las respuestas
las recibamos como un archivo d
c
E
E
1. Introduccin por medio de texto
2. Introduccin po
3. Introduccin por medio de botones
cin de los datos se consigue por medio d La introduc
<INPUT TYPE="xxx" NAME="yyy" VALUE="zzz">
En donde:
xx es la palabra que indica el tipo de introduc x
yyy es el nombre que le asignam
ato. d
zzz es el nombre de la variable que contendr el valor del elemento.
troduccin por medio de texto (una lnea) In
En este caso es xxx=text, es decir, INPUT
o procede en este caso. n
Vamos a poner un ejemplo: solicitamos el apellido del usuario.
<FORM ACTION=mailto:email M
Escribe tu apellido:
<BR><INPUT TYPE="text" NAME="Apellido">
</FORM>
Si el usuario introduce su apellido, por ejemplo: Ruiz, y pulsa el
e
siguiente text
Apellido=Ruiz
La longitu
variar incluyendo en la etiqueta el atributo SIZE="
sea cual
nmero de cara
etiqueta el atributo MAXLE
Oscar E Capuay Uceda 39
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:
<TEXTAREA NAME="yyy" ROWS="nmero" COLS="nmero">
(en donde no se utiliza INPUT TYPE y donde ROWS representa el nmero
de filas, y COLS el de columnas). y la de cierre: </TEXTAREA>
Ejemplo 8: Formulario solicitando los comentarios del usuario:
<FORM ACTION=mailto:email METHOD="POST" ENCTYPE="TEXT/PLAIN">
Introduce tus comentarios:
<BR>
<TEXTAREA NAME="Comentarios" ROWS="6" COLS="40">
</TEXTAREA>
</FORM>
Resultado Web:
correspondie
lido" SIZE="10" MAX <INPUT TYPE="text" NAME="Apel
ede hacer que el texto introducido no sea re Tambin se pu
decir que todos los caracteres se representen po
or IN cambiar en la etiqueta INPUT TYPE="text" p
el ltimo ejemplo, si cambiamos la etiquea c
<INPUT TYPE="p
Los carac
In
Cuando el texto
lneas.
Figura 27. Resultado de ejemplo08.html
Oscar E Capuay Uceda 40
DHTML
Introduccin por medio de Listas Desplegables
os que el usuario, en vez de introducir un texto, como hemos visto
tiqueta de inicio <SELECT NAME=" yyy" > y la de cierre
/PLAIN">
<SELEC
<OPTIO
<OP
<OPTION>Azul </OPTION>
</SE C
</FORM
s de envo,
emplo anterior, slo es visible en el formulario una opcin. Si
="TEXT/PLAIN">
inicialmente como marcado (el
jemplo:
Si querem
en los casos anteriores, escoja entre varias opciones que le presentamos
nosotros, haremos uso de un formulario en forma de listas desplegables.
Se consigue con la e
</SELECT>. Las distintas opciones a escoger se consiguen con la etiqueta
<OPTION>.
Ejemplo: Pedimos al usuario que elija su color preferido:
FORM ACTION=mailto:email METHOD="POST" ENCTYPE="TEXT <
Cul es tu color preferido?
<BR>
T NAME="ColorPreferido">
N>Rojo </OPTION>
TION>Verde </OPTION>
LE T >
>
uario escoge, por ejemplo: Azul y ha pulsado el botn Si el u
recibiremos un email suyo con el texto: ColorPreferido=Azul.
En el ej
queremos que sean visibles mltiples opciones a la vez, aadimos en la
etiqueta los atributos MLTIPLE SIZE="nmero", donde especificamos el
nmero de opciones visibles.
Formulario de confirmacin (checkbox)
Si queremos que el usuario confirme una opcin determinada, podemos
hacer uso de un formulario de confirmacin, o checkbox, que se consigue
con la etiqueta:
<INPUT TYPE="checkbox" NAME="yyy">
Ejemplo 9: Confirmacin de la inclusin en una lista de correo:
<FORM ACTION=mailto:email METHOD="POST" ENCTYPE
<INPUT TYPE="checkbox" NAME="Lista">
S, deseo ser incluido en la lista de correo.
</FORM>
Si el usuario marca este formulario y pulsa el botn de envo, recibiremos un
mail suyo con el texto: Lista=On. e
Si queremos que el formulario aparezca
usuario no necesitar hacerlo), basta con aadir el atributo CHECKED
dentro de la etiqueta.
<INPUT TYPE="checkbox" NAME="Lista" CHECKED> E
Oscar E Capuay Uceda 41
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
<INPUT TYPE="radio" NAME="yyy" VALUE="zzz">
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:
<FORM ACTIO mailto:email MET
<BR>
<INPUT T
<INPUT T
<INPUT TYPE="radio" NAME="SistemaOperativ
</FORM>
Obsrvese el atributo opcional CH
etiqueta. Esa ser la opcin que a
Si el usuario ha
un email suyo c
Botones de envo y de borrado
n todos los ejemplos que hemos visto, falta Hasta ahora, e
n cua esencial e
onsigue c
<INPUT T
YPE="submi
En donde zzz es el tex
<FORM AC
Escribe tu a
<BR><INP
<P><INPU
<
Otro bo
convenie
envo, pues se consigue con la etiqueta
<INPUT TY
En donde zzz e
aadimo
Oscar E Capuay Uceda 42
DHTML
<P><INPUT TYPE="reset" VALUE="Borrar datos">
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><CENTER>
XTAREA NAME="Comentarios" ROWS="6" COLS="40">
INPUT TYPE="reset" VALUE="Borrar datos">
/BODY>
E
<HTML>
<HEAD><TITLE>LIBRO DE VISITAS</TITLE></HEAD>
<BODY>
<
<H2>Libro de visitas</H2>
<P>
<FORM ACTION=mailto:xy@ab METHOD="POST" ENCTYPE="TEXT/PLAIN">
Tu nombre:
<BR><INPUT TYPE="text" NAME="Nombre">
<P>Escribe tus comentarios:
BR><TE <
</TEXTAREA>
<P><INPUT TYPE="submit" VALUE="Enviar datos">
<
</FORM>
<P><HR><P>
<
</HTML>
Resultado Web:
Oscar E Capuay Uceda 43
DHTML
Resultado de ejercicio10.html
Oscar E Capuay Uceda 44
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, OBJ ECT,
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, como
identificadore eclaraciones de
objetos, 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 Element
v Los nue
UTTON B
IFRAME, INS,
OPTGROUP, PA
s de vnculo, para los scripts, para d
Veamos a continuacin detalles de algunas nuevas etiquetas:
Frames
F
HTML para divid
a
diferentes, pu
de desplazamiento. Los navegadores que lo implem
2.0, y el E
importantes es que pulsando un enlace situado en un fram
c
para tener un fram
distintas pginas. De esta man
n
otras, 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.
D
Lo primero q tenemos qu
d
tener, y cul va s
Oscar E Capuay Uceda 45
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
<HTML>
<HEAD>
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 izquierd
20% d
Y con respecto
<TITLE>Mi p& na con frames</TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">
FRAME SRC="ejercicio11a.html"> <
<FRAME S
</FRAMESET>
<NOFRAMES>
Estas utilizando un navegador que no soporta frames.
<A HREF="ejercicio12.html"> ir a página sin frames </A>.
</NOFRAMES>
<
E
<html>
<
<title>marco 1</title>
</head>
<body>
marco 1
</body>
</html>
Ejercicio11b.html
<
<head>
<title>marco 2</title>
</head>
<body>
marco 2
</body>
</html>
Oscar E Capuay Uceda 46
DHTML
Resultado Web
Figura 28. Marcos o Frames
Es un documento parecido a los que conocamos hasta ahora. La diferencia
rmalmente para
as:
C=
"ejercicio11b.html" NAME="principal">
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: <a href=ejercicio12.html
=principal>ejercicio 12</a>. 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 no
delimitar 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 <FRAMESET COLS="20%, 80%">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
<FRAME SR "ejercicio11a.html">
<FRAME SRC=
Con esto se define que el contenido del primer frame (el de la izquierda) sea
el documento HTML ejercicio11a.html y el del segundo (el de la derecha) s
el docum
Podemos ver en la etiqueta del segundo marco que se ha incluido el atribu
NAME="principal", pero no as en el primero, debido a que se necesita da
un nombr
primer m
etiqueta
TARGET
ejercicio12.ht
Para el caso
<NOFRAMES> y </
definicin de los fram
los que acceden con un
Oscar E Capuay Uceda 47
DHTML
ser el cdigo HTML de una pgina completa (lo que normalmente va entre
as <BODY>y </BODY>)
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 página sin frames </A>.
</NOFRAMES>
</HTML>
Resultado Web:
las etiquet
Un segun
Ejemplo11c.html
<HTML>
<HEAD>
<TITLE>Mi página con frames</TITLE>
</HEAD>
<FRAMESET ROWS="20%, 80%">
<FRAME SRC="ejercicio11a.html">
<FRAME S
</FRAMES
<NOFRAMES>
Estas utilizando un
<A HREF="ejercicio
Figura 29. Marcos con divisin horizontal
Oscar E Capuay Uceda 48
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</ABBR>
In
forman. Por ejemplo HT
Etiqueta ABBR
Indica una forma abreviada (etc, Dr, Ing, Corp, etc.).
Los elementos ABBR y ACRONYMpermiten a los autores indicar claramente la
aparicin de abreviaturas y acrnimos.
Ejemplo 12: Acrnimos y Abreviaturas
Ejemplo12.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Conten
</head>
<body>
<ACRONYM title="World Wide Web">WWW</ACRONYM>
<ACRO
title="Hyper Text Markup langu
HTML
</ACRONYM>
<br>
<ABBR lang=
<ABBR title="Señor">Sr</ABBR>
</body>
</html>
Resultado Web:
Figura 30. Acrnimos y abreviaturas
Q
sta etiqueta inserta comillas dobles en una frase. Se utiliza para citar
Ejemplo 13: Frase entre comillas
jercicio13.html
Etiqueta
E
frases.
E
Oscar E Capuay Uceda 49
DHTML
Carlos dice:
<Q lang="es">Estoy aprendiendo HTML </Q><br>
J aime dice:
<Q lang="es">Es un lenguaje fácil de aprender </Q>
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</DEL>algo borrado.
Etiquetas
IN
insertada
documento.
Estos dos elemen
o bien
como ambos a la vez). Pueden conten
prrafo o uno o ms elementos en bloque como prrafos, listas y tablas.
Ejemplo 14: INS y DEL
Ejercicio14.html
<INS datetime="2008
cite="http://oscar.capunay.com
Este texto fue agregado.
</INS>
<
Esta frase tiene <DE
</P>
Resultado Web:
Figura 32. Acrnimos y abreviaturas
Oscar E Capuay Uceda 50
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 PARAMespecifican un conjunto de valores que pueden ser
necesarios para un objeto en tiempo de ejecucin. Puede aparecer cualquier
nmero de elementos PARAMen el contenido de un elemento OBJ ECT o
APPLET, y en cualquier orden, pero deben ser colocados al principio del
contenido del elemento OBJ ECT o APPLET que los contienen.
Ejemplo 15: OBJ ECT Y PARAM
Ejemplo15.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ejemplo de OBJ E
<meta http-equiv="Con et=iso-8859-1">
b#version=6,0,0,0"
PARAM NAME=loop VALUE=fals
M
PARAM NAME=quality VALUE=high>
=scale VALUE=exactfit>
PARAM NAME=bgcolor VALUE=#080638>
tfit
#080638 WIDTH="100%" HEIGHT="100%" NAME="intro2"
"
/OBJ ECT>
CT, PARAM y EMBED</title>
tent-Type" content="text/html; chars
</head>
<body>
<OBJ ECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swfl
ash.ca
WIDTH="100%" HEIGHT="100%" ALIGN="" id="intro2">
<PARAM NAME=movie VALUE="intro2.swf">
e> <
<PARAM NA E=menu VALUE=false>
<
<PARAM NAME
<
<EMBED src="intro2.swf" loop=false menu=false quality=high scale=exac
bgcolor=
ALIGN="
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED
>
<
</body>
</html>
Resultado Web:
Oscar E Capuay Uceda 51
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</title>
G
Las filas de una t
ta
THEAD, TFOOT y TBODY, respectivamente. Esta divisin permite a
agentes
cuerpos
imprimen tablas largas, la inf
repe
La cabecera de tabla
las columnas de la tabla. El cuerpo de tabla de
de tabla.
En
un gru
Ejemplo 16: Uso
Ejercicio16.ht
<!DOCTY
<html>
<h
<title>Ejemplo de THEAD, TFOO
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
Oscar E Capuay Uceda 52
DHTML
<table>
<thead>
<tr>
<th>Id</th>
<th>Nombres</th>
<th>Apellidos</th>
"3">Pie de la tabla</th>
1</td><td>Kelly</td><td>Quiroz Ch</td></tr>
2</td><td>Carlos</td><td>Capuay Uceda</td></tr>
>3</td><td>Marco</td><td>Quiroz Chavil</td></tr>
<td
Web:
</tr>
</thead>
<tfoot>
<tr>
<th colspan=
</tr>
</tfoot>
<tbody>
<tr><td>
<tr><td>
<tr><td
<tr> >4</td><td>J aime</td><td>Capuay Uceda</td></tr>
</tbody>
</table>
</body>
</html>
Resultado
Figura 34. Tabla con THEAD, TFOOT Y TBODY
entro de una definicin de TABLE
e el navegador pueda representar el pie antes de recibir todas
almente numerosas) filas de datos. A continuacin se resume
TFOOT debe aparecer antes de TBODY d
de modo qu
las (potenci
qu etiquetas son obligatorias y cules pueden omitirse:
Oscar E Capuay Uceda 53
DHTML
FORMULARIOS
creados con el elemento BUTTON funcionan exactamente igual
s creados con el elemento I NPUT, 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 I NPUT cuyo atributo t ype 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 botones
que los botone
ms rica
Por ejem
funciona
p
Los navegadores pueden representar los botones BUTTON con un relieve
n movimiento arriba/abajo al pulsarlos, mientras que pueden representar lo u
botones I NPUT c
El siguiente ejem
y de restablecer con BUTTON en lugar de I NPUT. Los botones
contienen imgenes sacadas de elementos I MG.
Ejemplo 17: Button con imagen
Ejercicio17.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ejemplo de BUTTON</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<FORM action="http://oscar.capunay.com/datos/formulario" method="post">
<P>
Nombre: <INPUT type="text" name="txtnombre"><BR>
Apellido: <INPUT type="text" name="txtapellido"><BR>
email: <INPUT type="text" name="txtemail"><BR>
sexo: <INPUT type="radio" name="optsexo" value="H">Hombre
<INPUT type="radio" name="optsexo" value="M">Mujer<BR>
<BUTTON name="enviar" value="enviar" type="submit">
Editar<IMG src="iconos/editar.gif" alt="Enviar Datos"></BUTTON>
<BUTT
establecer<IMG src="iconos/nuevo.gif" alt="Limpiar"
idth="12"></BUTTON>
</P>
/FORM>
/body>
/html>
Resultado Web:
ON name="reiniciar" type="reset">
R
w
<
<
<
Oscar E Capuay Uceda 54
DHTML
Figura 35. BUTTON con imagen
l elemento OPTGROUP E
El elemento OPTGROUP permite a los autores agrupar opciones lgicamente.
Esto es particularmente til cuando el usuario debe elegir de entre una larga
lista de opciones; es ms fcil apreciar y recordar grupos de opciones
relacionadas que una larga lista de opciones sueltas. En HTML 4, todos los
lementos OPTGROUP deben especificarse directamente e dentro de un
ir, no pueden anidarse unos grupos dentro de
Formulario con OPTGROUP
ml
//DTD HTML 4.01 Transitional//EN">
>Ejemplo de OPTGROUP</title>
quiv="Content-Type" content="text/html; charset=iso-8859-1">
m/datos/registro.php"
name="Producto" size="1">
selected label="ninguno" value="ninguno"> Ninguno</OPTION>
ROUP label="Limpieza">
<OPTION label="escoba" value="limp001">Escoba</OPTION>
N>
e="limp003">Detergente</OPTION>
ROUP label="Dulces">
<OPTION label="chocolate" value="dulc001">Chocolate</OPTION>
elemento SELECT (es dec
tros). o
jemplo 18: E
Ejercicio18.ht
UBLIC "-//W3C <!DOCTYPE HTML P
<html>
<head>
<title
<meta http-e
</head>
<body>
<FORM action="http://oscar.capunay.co
method="post">
<P>
T <SELEC
<OPTION
<OPTG
<OPTION label="jabón"
value="limp002">jabón</OPTIO
<OPTION label="detergente" valu
</OPTGROUP>
<OPTG
Oscar E Capuay Uceda 55
DHTML
<OPTION label="caramelo" value="dulc002">Caramelo</OPTION>
<OPTION label="gelatina" value="dulc003">Gelatina</OPTION>
</OPTGROUP>
psi" value="bebi001">PEPSI</OPTION>
<OPTION label="cola-cola" value="bebi002">Coca Cola</OPTION>
</OPTGROUP>
/body>
<OPTGROUP label="Bebidas">
<OPTION label="pe
</OPTGROUP>
</SELECT>
</FORM>
<
</html>
Resultado Web:
Figura 36. Lista con OPTGROUP
Estructura a los formularios: los elementos FIELDSET y LEGEND
La etiqueta FI ELDSET agrupa controles, lo que permite a los usuarios
entender su propsito y al mismo tiempo facilita la navegacin. El uso
orrecto de esta etiqueta le da mayor nivel de accesibilidad al documento
n FI ELDSET. La leyenda
el FI ELDSET no se representa visualmente.
jemplo 19: Ejemplo de Conjunto de Campos
ML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
c
Web.
La etiqueta LEGEND permite asignar un ttulo a u
mejora la accesibilidad cuando
E
Ejercicio19.html
<!DOCTYPE HT
<html>
<head>
<title>Ejemplo FIELDSET y LEGEND</title>
Oscar E Capuay Uceda 56
DHTML
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<FORM action="data/proceso1.php" method="post">
FIELDSET>
GEND>
Nombres:<INPUT name="txtnombres" type="text" tabindex="1"><br>
Teléfono: <INPUT name="txtfono" type="text" tabindex="4"><br>
T>
ext" size="50"
e="txtblog" type="text" size="40" tabindex="2"><br>
eo Electrónico: <INPUT name="txtcorreo" type="text" size="30"
"><br>
PUT name="txtfono" type="text" size="10" tabindex="4"><br>
0" tabindex="4"><br>
<
<LEGEND>Datos Personales </LE
Apellidos:<INPUT name="txtapellidos" type="text" tabindex="2"><br>
Ciudad: <INPUT name="txtciudad" type="text" tabindex="3"><br>
</FIELDSE
<FIELDSET>
<LEGEND>Datos Internet</LEGEND>
Página personal:<INPUT name="txtpagina" type="t
tabindex="5"><br>
:<INPUT nam Blog
Corr
tabindex="3
Skype: <IN
ICQ: <INPUT name="txtfono" type="text" size="1
/FIELDSET> <
<button type="submit">Enviar</button>
</FORM>
/body> <
</html>
esultado Web: R
Figura 37. Formulario con agrupamiento de controles
Oscar E Capuay Uceda 57
DHTML
Etiquetas DIV y SPAN
on los atributos i d y cl ass, ofrecen un
r estructura a los documentos. Estos
si su contenido es en lnea (SPAN) o en bloque (DI V)
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;"
<img src="iconos/nuevo.gif" alt="despliegue" width="16" height="16"
order="0"></a></th>
</table>
las" style="display: none;">
Escuelas</a></td>
<td><a href="semestre.php" target="principal">Semestre</a></td>
</tr>
Las etiquetas DI V y SPAN, junto c
ecanismo genrico para aadi m
elementos especifican
pero no imponen ningn otro estilo de presentacin al contenido, por este
motivo, se pueden aplic
Ejercicio20.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
head> <
<
<!--
function togg
var objID =document.getElementById(obj);
objID.style.display =(objID.style.display =="none")?"":"none";
}
// -->
</script>
<title>menu</title>
</head>
<
<table>
<tr>
<th width="16"><a href="#" onClick=
title="Ocultar o Mostrar Menu">
b
<th><SPAN>Tablas</SPAN></th>
</tr>
<div id="tab
<table>
<tr>
<td><a href="universidad.php"
rget="principal">Universidades</a></td> ta
</tr>
<tr>
<td><a href="facultad.php" target="principal">Facultades</a></td>
</tr>
<tr>
<td><a href="escuela.php" target="principal">
</tr>
<tr>
Oscar E Capuay Uceda 58
DHTML
</table>
</div>
<table>
<tr>
onClick="toggle('academico');return
lse;" title="Ocultar o Mostrar Menu">
SPAN>Maestros</SPAN></th>
</tr>
r>
<tr>
<td><a href="evaluacion.php" target="principal">Evaluaciones
</a></td>
<tr>
<td><a href="en uestas</a></td>
os ver en este ejem que p os ocultar o ha visible las DIV.
do Web:
<th width="16"><a href="#"
fa
<img src="iconos/nuevo.gif" alt="despliegue2" width="16" height="16"
border="0"></a></th>
<th><
</table>
<div id="academico" style="display: block;">
<table>
<tr>
<td><a href="alumno.php" target="principal">Alumnos</a></td>
</t
<td><a href="curso.php" target="principal">Cursos</a></td>
</tr>
<tr>
</tr>
<tr>
<td><a href="registro.php" target="principal">Registro</a></td>
</tr>
<tr>
<td><a href="asistencia.php"
target="principal">Inasistencias</a></td>
</tr>
<tr>
<td><a href="resultado.php" target="principal">Resultados</a></td>
</tr>
<tr>
<td><a href="mensaje.php" target="principal">Mensajes</a></td>
</tr>
cuesta.php" target="principal">Enc
</tr>
</table>
</div>
</body>
</html>
Podem
plo odem cer
Resulta
Oscar E Capuay Uceda 59
DHTML
Figura 38. Ejemplo de pgina con DIV ANs s y SP
Oscar E Capuay Uceda 60
DHTML
JavaScript
avaScript, al igual que J ava o VRML, es una de las mltiples maneras que
pacidades del lenguaje HTML. Al ser la ms
er un
rograma con J avaSc pgina Web con
algunas cosas senc aS cosas distintas,
principalmente programacin
completo. Lo e n mi xis. Existen tres
versiones de J a 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 J avaScript.
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:
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
J
han surgido para extender las ca
sencilla, es por el momento la ms extendida. Es importante saber que:
J avaScript 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 hac m
p ript, tan slo se podr mejorar una
illas. J av cript y J ava son dos
porque J ava s que es un lenguaje de
nico qu comparte es la sma sinta
vaScript. asi todo lo que se
ci co
escrito e
l Netscape Na
n 1.3, intro u
e
internacional ECMA que regu
Vamos a realizar nuestro primer "programa" en J avaScript. Haremos surgir
una ventana que nos muestre el mensaje "hola, Web". As podremos ver los
lementos principales del lenguaje. El siguiente cdigo e e
completa con un botn que
Ejemplo 21: funcin alert
HolaWeb.html
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function HolaWeb() {
alert("Hola
}
!");
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" N =" Puls
</FORM>
</BODY>
<
Oscar E Capuay Uceda 61
DHTML
Dentro de estos elementos ser donde se puedan poner funciones en
"archivo.js"></script>
plo, se ha escrito en la cabecera con la finalidad de hacer
igo ms legible. Si un navegador no acepta J avaScript no leer lo que
tre estos elementos.
unque J avaScript 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:
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame"
onClick="alert('Hola,Mundo!')">
es una parte de nuestro programa que el ordenador ignora y
realiza ninguna tarea. Se utilizan generalmente para poner
J avaScript.
Por otra parte el cdigo de J avaScript puede ser incluido en la pgina Web
de la siguiente manera:
script language="J avaScript" src = <
El archivo externo simplemente es un archivo del texto que contiene cdigo
J avaScript, y cuyo nombre acaba con la extensin js.
El cdigo de J ava Script puede ser escrito en cualquier lugar de la pgina
eb, en este ejem W
el cd
hay en
function HolaWeb() {
alert("Hola, Web!");
}
A t orientad
estricto como J ava, donde nada est fuer
funcin vemos una llamada al mtodo alert (que pertenece al objeto
window) que es la que se encarga de mostrar el mensaje en pantalla.
<FORM>
<INPUT TYPE="b
onClick="HolaWeb()">
</FORM>
Dentro del elem
nueva: onClick. Es un controlador de e
botn, el e
el controla
HolaWeb(), que tendremos que haber definido
m
re
<FORM>
</FORM>
Elementos bsicos
Comentarios
Un comentario
que, por tanto, no
Oscar E Capuay Uceda 62
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 J avaScript
do
programacin y as hace
J avaScript existen dos En
el resto d
inclinadas:
ar i =1; // Aqui esta el co v
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
v
a
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:
"J avascript (\xA9 2002)"
e corresponde con la cadena: s
2) J avascript (200
or ltimo, tambi P
fu
n se pueden especificar objetos como literales, aunque no
ncione en ms que en Netscape 4 y superiores:
Oscar E Capuay Uceda 63
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 J avascript las sentencias se separan con un punto y coma, y se agrupan
mediante llaves ({y }).
Tipos de datos
En
ig
J avascript lo
as
e t
re
Variables
Las variables son nombres que ponemos a los lugares donde almacenamos
la informacin. En J avascript, 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 va d
siempre mbito global, mientras que en caso contrario
lobal si est definida fuera de una funcin, y local si est defini g
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 o E
cada uno de los cuales es en s mism
atrices son obje los vectores y las m
los objetos, se declara
miVector =new Arra
Oscar E Capuay Uceda 64
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 J avascript";
ya que tenemos que
ctor nuevo en cada elemento del vector
iginal.
de J avaScript 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, podemo D
utilizar. Ni siquiera nec
ueremos: q
ectorRaro =new Array(); v
vectorRaro["insertar en lo
es ms complicado, Hacer una matriz bidimensional
hacer un bucle que cree un ve
or
Nota importante: J avaScript es sensible a maysculas y minsculas, todos
los elementos
lo mismo "Salto" que "salto".
Operadores
L
expresiones. Las expresio
o lgicas. Un literal o una
mismos literales y variables unidos entre s mediante operadores.
J avaScript dispone de muchos ms operadores que la mayora de los
lenguajes, si exceptuamos a sus padres C, C++y J ava. 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
J avaScript dispone d
ms:
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
Oscar E Capuay Uceda 65
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; b
En este primer caso, a valdr 2 y
a =1;
=a++; b
Ahora, a sigue valiendo 2, pero b es ahora 1. Es decir, estos operadores
modifican siempre a s
e
Operadores de co
ientes: Podemos usar los sigu
Tabla 5. Operadores de comparacin
Descripcin Smbolo Expresin de ejemplo Resultado
Igualdad == 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 <=2 Verdadero
Mayor o igual que >= 1 >=2 Falso
a igualdad y desigualdad estricta son iguales a las no L 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 compro
ECMAScript y
superiores. Hay
la igualdad normal como si fuera estricta.
Operadores lgicos
Estos operadores permiten realizar expresiones lgicas complejas:
Tabla 6
Descripci
Negacin ! !(2 =2) Falso
Oscar E Capuay Uceda 66
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
Normalmente
J avaScript es el s
combinar co
Op
x +=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
lo
smbolo +. E
condicin ? valor1 : valor2
segundo. El siguiente
a =2 >3 ? 1 : 2
ara tratar con objetos disponemos de tres operad P
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 creado
Referencia
actual
is
al
th
objeto
this se
a otros m
su r en el cdigo de los mtodos de un objeto para referirse
objeto.
ele utiliza
todos o a propiedades de su mismo
Oscar E Capuay Uceda 67
DHTML
Estructu
pos: 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 estr
condiciona
ucturas se pueden clasificar en do
les y bucles. Aparte de los dos
s grandes gru
tipos clsicos str
J avaScript disponemos de algunas
manejo de objetos.
aciones condiciona
facilit
Una acin condicion tura que reali ta
d
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 s
una 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 in
p
Bucles
Un bucle es una estructura que permite re
veces, determinado por u
las estructuras while y do...while. Estos bucles iteran indefinidamente
mientras se cumpla una condicin. La difere
c
hace despus:
var numero=0;
Oscar E Capuay Uceda 68
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
ropied
ente mplo:
=[
alert('Soy un while');
}
do {
alert('S
}while (numero==1);
n este caso solo veramos aparecer una ventana diciendo que E
do...
numero e
dentro 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 J avascript, el bucle for es singularm E
numricos como en muchos otros lenguajes sino que n
bertad. Tiene la siguiente estructura: li
r (inicio; condicin; incremento) fo
cdigo
El cdigo
cumpla. An
tenido en el bucle se ejecut
de com
ar mientras la
acin del bucle s
sentencia ini
habitual de u
io y en cada iteracin lo har
r estas posibili
incremento. La man
est, la numrica:
var numero =4;
<=numero; n++)
; factorial *=n
Por ltimo, que decir que la eje e la sente
cualquie
veces no
bucle provoca la
ms remedio que uti
nmediata del mismo. Aunque a
s mejor evitarlo para mejorar la
Estructura
J avaScript di
de manejo de objetos
one de dos bien primera es el b
nos permitir recorrer t
principalm
odas las p
con vectores. Por eje
ades de un objeto. Se usa
var vector 1, 2, 2, 5];
for (i in vector)
vector[i] +=2;
Oscar E Capuay Uceda 69
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, J avaScript 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
L
tengamos que
de tener qu
hacer:
with (objeto) {
propiedad1 =...
propiedad2 =...
...
}
Objetos
Un obje
propiedades) como las funciones que manip
mtodos).
rtir de esta estr A pa
(la progra
re como he
omo veremo C
nstructores
cin que inicializa un objeto. Cuan U
o
d) {
}
Vamos a crear nuestro primero o
en J avascript 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;
}
Oscar E Capuay Uceda 70
DHTML
Como vemos, accederemos a las propiedades y mtodos de nuestros
por medio de la referencia this. Ahora podemos crear y acceder a
Libro("J avaScript 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
J avaScript 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
"J avaScript");
alert(miLib
Los mtodos tambin po
function
alert("E
P
e varios objetos predefinidos para acced
la
vectores o el de fechas. En
a
mismos dis
o
a) Objeto Array
Como dijimos an
las s
tes, este objeto permite crear ve
cualquiera de
vector =new Array(lo
r =new Array(el vecto
rim En el p
elemento
elem los
recordar
El objeto
le
Oscar E Capuay Uceda 71
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<b ? -1 : (a==b ? 0 : 1);
}
Usando esta funcin ordenara numricamente (y de menor a mayor) los
elementos del vector.
b) Objeto Date
Este objeto nos permitir manejar fechas y horas. Se invoca as:
fecha =new Date();
fecha =new Date(ao, mes, dia);
fecha =new Date(ao, mes, dia, hora, minuto, segundo);
Si no utilizamos parmetros, el objeto fecha contendr la fecha y hora
actuales, obtenidas del reloj del sistema. En caso contrario hay que tener en
cuenta que los meses comienzan por cero. As, por ejemplo:
navidad99 =new Date(1999, 11, 25)
El objeto Date dispone, entre otros, de los siguientes mtodos:
getTime()
s
O
milisegundos transcurridos desde el 1 de enero de 1970.
getYear()
setYear(ao)
Obtienen y poner, respectivamente, el ao de la fecha. ste se devuelven
como nmeros de 4 dgitos excepto en el caso en que estn entre 1900 y
1999, en cuyo caso se devolvern las dos ltimas cifras. Hay que tener
cuidado, ya que la im
getFullYear()
setFullYear(ao)
Oscar E Capuay Uceda 72
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 n
Netscape 4.06
g
setMonth(mes)
getDate()
setDate(dia)
getHours()
setHours(horas)
etMinutes( g
setMinutes(min
etSeconds() g
setSeco
Obtienen y ponen, respectivamente
ivamente, r la 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 n
sino como un
Math.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(M
base 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
Oscar E Capuay Uceda 73
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
Numbe
como 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 l
no estar.
s
Devuelven un vector con subcadenas obtenidas separando la cad
carcter separador. No fun
cadena ="Navidad,Semana Santa
v
En el e
vacaciones de un escolar espaol normal.
c
Devuelve el re
Oscar E Capuay Uceda 74
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 J avaScript
Descripcin Elementos que lo admiten
c
ndices.
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:
<A HREF="http://home.netscape.com
Lista de eventos
Aqu tienes una pequea gua de eventos definidos en J avaScript.
Evento
OnLoad
Terminar de cargarse una
pgina
<BODY...>
<FRAMESET...>
OnUnLoad
Salir de una pgina
(descargarla)
<BODY...><FRAMESET...>
onMouseOver Pasar el ratn por
<A HREF..>
encima
<AREA...>
onMouseOut
encima <AREA...>
Que el ratn deje de estar <A HREF..>
onSubmit Enviar un formulario <FORM...>
onClick Pulsar un elemento
<INPUT TYPE="button, checkbox, link,
radio"...>
onBlur Perder el cursor
<INPUT TYPE="text"...>
<TEXTAREA...>
OnChange
Cambiar de contenido o
perder el cursor
<INPUT TYPE="text"...>
<TEXTAREA...>
OnFocus Conseguir el cursor
<INPUT TYPE="text"...>
<TEXTAREA...>
<INPUT TYPE="text"...>
OnSelect Seleccionar texto
<TEXTAREA...>
Como ejemplo, vamos a hacer que una ventana aparezca automticamente
to pasemos un cursor por encima de un elemento <A> (e en cuan
Oscar E Capuay Uceda 75
DHTML
impidiendo, de paso, que quien est viendo la pgina pueda hacer uso del
HTML>
<SCRIPT LANGUAGE="JavaScript">
arios esconden el cdigo a navegadores sin JavaScript
function Alarma() {
e activo la funcin Alarma");
ue;
eb:
mismo).
Ejemplo 22: Eventos
eventos.html
<
<HEAD>
<!-- Los coment
alert("S
return tr
}
// -->
> </SCRIPT
</HEAD>
<BODY>
<A HREF="eventos.html" onMouseOver="Alarma()">
Pasa por aqu encima
</A>
</BODY>
</HTML>
esultado W R
Figura 39. Resultado de eventos.html
Figura 40. Resultado del mtodo alert
Oscar E Capuay Uceda 76
DHTML
Definicin mediante cdigo
isto como declarar un control Hemos v
HTML. Sin
ador de eventos desde etiquetas
s versiones 3 de Netscape y 4 de Explorer,
acerlo mediante cdigo.
rmiten atributos
acceso a dichos
tml
<HTML>
}
embargo, y desde la
tro modo de h existe o
Muchos objetos cuyas etiquetas HTML correspondientes pe
n 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
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Los comentarios ocultan el cdigo a browsers sin JScript
function Saludo() {
alert("Hola");
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="Saludo()">
. ..
</BODY>
</HTML>
Figura 41. Resultado de load1.html
Oscar E Capuay Uceda 77
DHTML
Figura 42. Resultado del mtodo alert
ibir como:
load2.html
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Los comentarios esconden el cdigo a navegadores sin JS
function Saludo() {
alert("Hola");
}
window.onload = Saludo;
// -->
</SCRIPT>
</HEAD>
<BODY>
...
</BODY>
/HTML>
Modelo de objetos d
uando funciona en un navegador, el lenguaje J avaScript 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 reescr S
<
el documento
C
s
documento 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 lo
herencia 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, qu El padre de esta
e nuestro navegad d
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.
Oscar E Capuay Uceda 78
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 J avascript, 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:
<SCRIPT LANGUAGE="JavaScript">
Es el objeto principal. Define la venta
incluye los objetos referentes
referencia a l llamada window (recuerde que J avascript distingue entre
maysculas y minsculas). Ser con esa referencia con la que trabajemos.
mtodos que llamamos sin u
utilizando 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 vari d
simplemen
que 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 las q
propiedades 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 te
que algu
navegado
toolbar=no, directories=no, m
Ejemplo 24: Funcin open()
ventanas.html
<HTML>
<HEAD>
Oscar E Capuay Uceda 79
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 J avaScript. 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("<HEAD><TITLE>Una
ventana</TITLE></HEAD>");
MiVentana.document.write("<CENTER><H1><
prueba</B></H1></CENTER>");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<
onClick="AbrirVentana()">
</FORM>
</BODY>
<
Figura 43. Resultado de ventanas.html
Oscar E Capuay Uceda 80
DHTML
Figura 44. La nueva ventana abierta
close()
la ventana. A no ser que hayamos acabado de abrirla nosotros
hace por motivos de seguridad, ya que sera
emasiado fcil hacer un script de esos mal intencionados que nos cerrase
del navegador, con lo que fastidia eso.
ra una ventana de dilogo con el mensaje especificado.
onfirm(mensaje)
a ventana de dilogo con el mensaje especificado y dos
OK, el mtodo devuelve true. Si, en cambio,
ulsa Cancelar, devolver false.
ado y un campo
e texto en el que el usuario pueda teclear, cuyo valor inicial ser igual a
el botn de Aceptar:
e llamas, criatura?", "");
tatus
adena de caracteres que saldr en la barra de estado en un
atus
Cierra
mostrar al usuario una ventana de confirmacin para que decida l si quiere
o no cerrarla. Esto se
d
la ventana
lert(mensaje) a
Muest
c
Muestra un
botones. Si el usuario pulsa
p
prompt(mensaje, sugerencia)
Muestra una ventana de dilogo con el mensaje especific
d
sugerencia. Si el usuario pulsa OK, el mtodo devuelve la cadena
introducida en el campo de texto. Si, por el contrario, pulsa Cancelar,
devolver el valor null. Dado que este valor se considera igual a false,
podemos comprabarlo directamente en una condicin para ver que ha hecho
el usuario.
Por ejemplo, el siguiente cdigo muestra un saludo slo si el usuario ha
pulsado
var contestacion =prompt("Cmo t
if (contestacion)
alert("Hola, " +contestacion);
s
Define la c
momento dado.
defaultSt
Oscar E Capuay Uceda 81
DHTML
Define la cadena de caracteres que saldr por defecto en la barra de estado.
la especificamos, defaultStatus ser igual al ltimo valor que
o milisegundos.
deba ejecutarse a
ferencian a objetos Image, Form o
s, formularios y enlaces del
la fecha y hora en que se modific el documento por ltima vez y
conjuncin con write para aadir al final del documento
ector que contiene los formularios del documento. El primero ser el
ages[]
Vector que contiene las imgenes del documento. Se ordenan igual que en
o, aunque tambin permiten ser accedidas con el nombre
nks[]
cumento. Se ordenan igual que en los
os anterioers, aunque no se suele utilizar en el cdigo J avascript. Su razn
, al ser los enlaces objetos, permiten incluir cdigo J avascript
n ellos por medio de la pseudo-URL javascript:codigo.
ena) y writeln(cadena)
do en cadena en nuestro documento HTML.
orno de carro.
o escribir de nuevo en l.
Cuando no
tom status.
setTimeout("funcin",tiempo)
Llama a funcin cuando hayan pasado tiemp
Imprescindible a la hora de realizar cualquier rutina que
cierta velocidad.
Objeto Document
Este objeto representa el documento HTML en el que estamos. Se accede a
l por medio de la referencia document. Su mayor importancia viene por el
mero de vectores que posee, que re n
Link, los cuales permiten acceder a las imgene
documento, respectivamente.
astModified l
Contiene
se suele usar en
estas caractersticas.
lor bgCo
Modifica el color de fondo del documento. El color deber estar en el formato
usado en HTML. Es decir, puede ser red o FF0000.
forms[]
V
nmero 0, el segundo el 1, etc..
im
el anterior cas
como ndice. Es decir, a una imagen definida como <IMG SRC=" .."
NAME=" miImagen" > se puede acceder con
document.inages[" miImagen" ].
li
Vector que contiene los enlaces del do
d
de ser es que
e
write(cad
Escribe el cdigo HTML indica
writeln hace lo mismo, pero incluyendo al final un ret
close()
el documento, impidiend Cierra
Oscar E Capuay Uceda 82
DHTML
Cmo escribir en el documento
de escribir en un documento por medio de write o writeln hay
en cuenta un hecho fundamental. Para poder escribir en un
, ste debe estar abierto y, al abrirlo, se destruye todo el
e haya en l.
<TITLE>Escribe y no sobreescribe</TITLE>
<BODY>
Esta página fue modificada por ltima vez el da
<script language="JavaScript" type="text/javascript">
document.write(document.lastModified);
</SCRIPT>
</BODY>
</HTML>
Resultado Web:
A la hora
que tener
o document
cdigo qu
Ejemplo 25: Escribir HTML con javascript
escribir.html
<HTML>
HEAD> <
</HEAD>
Figura 45. Resultado de escribir.html
Objeto Form
Los formularios siempre han sido la mejor manera de facilitar la
comunicacin entre los usuarios y los creadores de una Web. Sin embargo,
la implementacin de los mismos en el lenguaje HTML ha provocado ciertos
problemas debido a sus carencias. Estos problemas han intentado
solventarse con scripts, situados tanto en el servidor como en el navegador.
Los programas que se ejecutan en el navegador suelen estar escritos en
J avaScript, y realizan tareas simples de validacin. En muchas ocasiones
estn combinados con scripts CGI que modifican el mensaje generado por
un formulario para facilitar su lectura y manejo.
Oscar E Capuay Uceda 83
DHTML
El vector document.forms contiene todos los formularios de un
documento. As, se accedera al primer formulario definido como
document.forms[0]. Sin embargo, si usamos el parmetro NAME en la
etiqueta HTML:
<FORM NAME="miFormulario">
Entonces podremos acceder al formulario con document.miFormulario,
que resulta bastante ms cmodo y estable ante la posibilidad de variacin
del nmero y posicin de formularios en el documento. Estos son los
mtodos y propiedades del objeto Form:
submit()
Enva el formulario.
reset()
Devuelve los valores de un formulario a su estado inicial.
elements[]
Contiene todos y cada uno de los elementos de los que consta el formulario,
es decir, los botones, cajas de textos, listas desplegables, etc. que
componen un formulario. Cada elemento puede ser un objeto distinto, por lo
que deberemos averiguar de qu tipo son por medio de la propiedad comn
type.
Objetos Text
Cuatro elementos HTML distintos (text, textarea, password y hidden) son,
desde el punto de vista del DOM, objetos tan parecidos entre s que vamos a
estudiarlos conjuntamente. En realidad, slo tienen tres propiedades
verdaderamente importantes: name, type y value.
Los mtodos que podemos utilizar en estos objetos son:
blur(). Pierde el foco del ratn sobre el objeto especificado.
focus(). Obtiene el foco del ratn sobre el objeto especificado.
select(). Selecciona el texto dentro del objeto dado.
Como ejemplo de su uso, vamos a ver ahora el cdigo de nuestro primer
formulario con validacin, que comprueba si la direccin de correo
electrnico que introduce el usuario es correcta:
formularios.html
<HTML>
<HEAD>
<TITLE>Ejemplo de formularios</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function validar(direccion) {
if (direccion.indexOf("@") != -1)
return true;
else {
alert('Debe escribir una direccin vlida');
Oscar E Capuay Uceda 84
DHTML
return false;
/HEAD>
T" ACTION="mailto:demo@capunay.com"
Env
<INPUT
</FORM
</BODY
</HTML>
Res
}
}
</SCRIPT>
<
<BODY>
<FORM NAME="form1" METHOD="POS
ENCTYPE="text/plain" onSubmit="return validar(this.email.value)">
íame tu e-mail: <INPUT NAME="email" TYPE="text"><BR>
TYPE="submit" VALUE="Enviame tu e-mail">
>
>
ultado Web
Figura 46. Resultado de formularios.html
Figura 47. Mensaje de validacin
Oscar E Capuay Uceda 85
DHTML
El cdi
onSub
enviado
arroba e il del formulario.
La m
validar
depend
utiliza p
this.ema
this s
real d
que est
this se
del cam
haya tec
Obj o
En esto
propied
En amb estado del elemento es de tipo lgico: puede estar
seleccio
Por tan
un bot
Objeto
El objet
contiene
propied
selected
Empeza
hay vari cionadas, indica la opcin con el ndice ms bajo.
options[
Vector
una de
propied
selecte est seleccionada.
as. Cada etiqueta OPTION tendr como parmetro
gina Web e incluiremos un controlador del
go es sencillo: el cdigo llamado por el controlador de evento
mit debe devolver false si deseamos que el formulario no sea
. As pues, llamamos a la funcin que comprueba si hay alguna
n el campo ema
anera de llamar a esta funcin es quizs lo ms complicado. La funcin
recibe una cadena de caracteres, devolviendo verdadero o falso
iendo de que haya o no una arroba dentro de ella. El controlador
ara llamar a esta funcin lo siguiente:
il.value
una referencia estndar. Cuando veamos this en algn cdig e o en
ida deberemos sustituirlo mentalmente por el nombre del objeto en el
el cdigo. En este caso, como estamos dentro de miFormulario,
r equivalente a document.miFormulario. email es el nombre
po que queremos investigar y value el atributo que contiene lo que
leado el usuario.
et s Checkbox y Radio
s objetos, tanto el atributo HTML VALUE como su correspondiente
ad value accesible desde J avascript no corresponden a nada visible.
os casos, el
nado o no. Este valor lgico se contiene en la propiedad checked.
to, para comprobar si est pulsado o no una caja de confirmacin o
n de seleccin especfico deberemos preguntar por dicha propiedad.
s Select y Option
o Select es, con mucho, el ms complicado. Esto es debido a que
en su interior un vector de objetos Option. Dispone de dos
ades interesantes:
Index
ndo a contar a partir de cero, indica qu opcin est seleccionada. Si
as selec
]
que contiene los objetos Option correspondientes a todas y cada
las opciones. El objeto Option, por otro lado, dispone de otras dos
ades a estudiar (aparte de las comunes, como type o value):
d: Valor lgico que ser verdadero si la opcin
Text : Texto que acompaa a la opcin.
Como ejemplo, vamos a ver una lista desplegable que nos permita navegar
por diversas pgin
VALUE la direccin de la p
Oscar E Capuay Uceda 86
DHTML
evento onChange (que se ejecuta cuando el usuario cambia la opcin
en la lista) que llamar a una rutina que explicamos ms adelante:
ipt
l
Ejemplo de Select</TITLE>
ons[menu.selectedIndex].value;
ALUE="">Visitar
AL p://www.w3c.org">W3C
<OPTION VALUE="http://www.capunay.com">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
<HTML>
<HEAD>
<TITLE>
<SCRIPT LANGUAGE="JavaScript">
function irA(menu){
ref = menu.opti window.location.h
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="formulario">
<SELECT NAME="menu" SIZE=1 onChange ="irA(this)">
<OPTION V
<OPTION V UE="htt
<OPTION VALUE="http://www.google.com.pe">Goog
T> </SELEC
</FORM>
</BODY>
</HTML>
La funci
o
n
de su val
Resultado Web:
Figura 48. Resultado de select.html
Oscar E Capuay Uceda 87
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 mode
enores", que no tienen rela
estamos. Es decir, no guardan relacin con las etiquetas HTML
ellas escritas.
Objeto History
Se accede a este objeto por me
c
Aunque no p ite acceder a ellas, dis
e
back()
Volver a l
<A HREF="javascript:window.history.back()">
forward()
Ir a la pgina sigu
go(donde)
Ir a dond
y 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 acce
alm
search
Oscar E Capuay Uceda 88
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 inmensas
como: pag
permite
in
a 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
lataforma P
N
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 o le
versiones 4.
height :Altura de la resolucin de la pantalla.
width :Anchura de la resolucin de la pantalla.
pixelDepth :Nmero de bits por pixel.
jemp E
if (window.screen)
texto=screen.width + "x" + screen.height + "x" + Math.pow(2,screen.colorDepth) + "
colores.";
else
texto="quien sabe cuantos colores, necesito que teng
a
rando un de circun
Oscar E Capuay Uceda 89
DHTML
Fich
Un 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
<HTM
<HEA
<TIT gina</TITL
<SCRIPT LANGUAGE=" ript" SRC="funciones.js">
<!--
alert('Error con el ficher
// -->
</SCRIPT>
</HEAD>
<BODY>
Lo qu ea.
</BODY>
</HTM
El cdigo q IPT>slo se
ejecu de q ra del fichero .js falle. Por otra parte, hay
que i fiche n cuestin contendr slo cdigo en J avascript,
no e e n tipo, ni siquiera las de apertura y cierre de
SCRIPT.
eros .js
chero .js chivo dond
les que pod
mos evitar el tene
cumento. Podrem
r que du
os incorpo
archivos js
L>
D>
LE>Mi P E>
Javasc
o js');
e s
L>
ue incluyam
tar en caso
os entre un <SCRIPT SRC>y un </SCR
ue la lectu
ndicar que el ro e
tiquetas HTML d ning
Oscar E Capuay Uceda 90
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
aciones
marcado. D
impacto 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 W
c
instrucciones en cdigo HTML se definen los estndares del conjunto de
pginas que co
C
Comp
usuari
ad hac
2 sern capaces de entender la
ia atrs y hacia adelante.
Las aplic ones del usuario CSS1 podrn leer las hojas d
scartar las partes que no entienden. CSS2
aplicaci
mos
del usuario que no soporten CSS sern capaces de
documentos estilsticamente mejorados. Por supuesto, el
efec
todo
stico hecho posible po
nido ser presentado.
Comple tariedad con documentos estructurad
lementan los documentos estructurad estilo 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
Simplicida
un lengua
de 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
imge
autores p
hojas de es
contenido.
Oscar E Capuay Uceda 91
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 J avaScript 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
Oscar E Capuay Uceda 92
DHTML
>
<BODY>
rCap</H1>
L PUBLIC "-//W3C//DTD HTML 4.0//EN">
<BODY>
scarCap</H1>
ente HTML y pueden compartirse entre varios documentos. Para vincular
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
HTML>
<H >
<TITLE>
<LI re
</HEAD
<BO Y>
<H1>L /H1>
<P s
<HTML
<HEAD>
<TITLE>La Web de OscarCap</TITLE>
</HEAD>
<H1>La Web de Osca
<P>Esta página le ayudará a diseñar páginas Web.
</BODY>
</HTML>
Para establecer el color azul para el texto de los elementos H1, puede
escribir la siguiente regla CSS:
H1 {color: blue }
Una regla CSS consta de dos partes principales: un selector ('H1') y una
declaracin ('color: blue'). La declaracin tiene dos partes: una propiedad
('color') y un valor ('blue').
La especificacin HTML 4.0 define de qu manera las reglas de las hojas de
estilo pueden especificarse para los documentos HTML: ya sea dentro del
documento HTML o a travs de una hoja de estilo externa. Para poner la
hoja de estilo dentro del documento, use el elemento STYLE:
Ejemplo 29: Style
<!DOCTYPE HTM
<HTML>
<HEAD>
<TITLE> ---- La Web de OscarCap ---- </TITLE>
<STYLE type="text/css">
H1 { color: blue }
</STYLE>
</HEAD>
<H1>La Web de O
<P>Esta página Web te enseñará mucho.
</BODY>
</HTML>
Para una mayor flexibilidad, recomiendo que los diseadores especifiquen
hojas de estilo externas; ellas pueden cambiarse sin modificar el documento
fu
una hoja de estilo externa puede usar el elemento LINK:
<
<
EAD
La Web de OscarCap</TITLE>
NK l="stylesheet" href="oscar.css" type="text/css">
>
D
a Web de OscarCap<
> E ta página Web te enseñará mucho.
Oscar E Capuay Uceda 93
DHTML
</BODY>
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 ---- </TITLE>
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
</HTML>
El elem
el tipo de vnculo: a una hoja de estilo ("sty
la ubicacin de la hoja de estilo a travs del atrib
el tipo
estructurado de marc
gua. Agreguemos ms colores:
Ejemplo 30: Colores con CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE> ---- La Web de Os
<STYLE type="text/css">
BODY { color: red }
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>La Web de OscarCap</H1>
<P> Esta página Web te enseñará mucho.
</BODY>
</HTML>
a hoja de estilo contiene ahora dos reglas: la primera establece el colo L
elemento BO Y como 'red' , en tanto la se
lemento H1 mo no se ha especificad e
del elem
BODY. El elem
la reem segunda reg
nflictos e co
resolv
SS C
algunos otros:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE> ---- La Web de OscarCap ---- </TITLE>
<STYLE type="text/css">
BODY {
font-family: "Gill Sans", sans-serif;
font-size: 12pt;
margin: 3em;
}
</STYLE>
</HEAD>
<BODY>
Oscar E Capuay Uceda 94
DHTML
<H1>La Web de OscarCap</H1>
<P> Esta página Web te enseñará mucho.
</BODY>
</HTML>
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 (incluyendo CSS2). Las futuras
q
BODY heredarn el valor de la propiedad 'font-family'.
La segunda declaracin establece el tamao de la fuente del elemento
BODY en 12 puntos. La unidad de medida "punto" es normalmente usada en
la tipografa impresa para indicar el tamao de la fuente y otras dimensiones.
Es un ejemplo de unidad de medida absoluta que no vara segn el entorno.
La tercera declaracin usa una unidad de medida relativa que vara de
acuerdo a las circunstancias. La unidad "eme" est relacionada con el
tamao de la fuente del elemento. En este caso el resultado es que el
m
la fuente.
Sintaxis y tipos bsicos de datos en CSS2
Esta seccin describe una gramtica (y reglas de anlisis con compatibilidad
utura) comn a cualquier versin f
versiones de CSS adherirn a esta sintaxis central, aunque pueden agregar
restricciones sintcticas adicionales.
Comandos
Todos los niveles de CSS --nivel 1, nivel 2 y cualquier futuro nivel-- usan la
misma sintaxis central. Los diseadores pueden usar esta caracterstica para
crear hojas de estilo que funcionen con aplicaciones de usuario antiguas,
mientras ejercitan tambin las posibilidades de los niveles ms nuevos de
CSS.
A nivel de lxico, las hojas de estilo CSS consisten de una secuencia de
comandos. La lista de comandos para CSS2 es la que sigue. Las
definiciones usan expresiones regulares al estilo de Lex. Los cdigos octales
se refieren a ISO 10646. Como en Lex, en caso de mltiples equivalencias,
la equivalencia ms larga determina el comando.
Tabla 12. Comando CSS
Comando Definicin
IDENT {ident}
ATKEYWORD
ST
@{ident}
RING {string}
Oscar E Capuay Uceda 95
DHTML
Comando Definicin
HASH #{name}
N {num}{ident}
&*-
~] | {nonascii}| {escape}) *{w}\ )
ICODE-
U\ +[ 0- 9A- F?] {1, 6}( - [ 0- 9A- F] {1, 6}) ?
<! - -
\ }
) \ )
\ r \ n\ f ] +
~=
DASHMATCH | =
Tabla 13. Macros CSS
NUMBER {num}
PERCENTAGE {num}%
DIMENSIO
URI
ur l \ ( {w}{string}{w}\ )
| ur l \ ( {w}( [ ! #$%
UN
RANGE
CDO
CDC - - >
; ;
{ \ {
}
( \ (
[ \ [
] \ ]
S [ \ t
COMMENT \ / \ *[ ^*] *\ *+( [ ^/ ] [ ^*] *\ *+) *\ /
FUNCTION {ident}\ (
INCLUDES
DELIM
cualquier otro carcter no equivalente con las reglas
anteriores
Las macros entre llaves ({}) arriba son definidas como sigue:
Macro Definicin
- Z0- 9] | {nonascii}| {escape}
|
Ident {nmstart}{nmchar}*
name {nmchar}+
nmstart [ a- zA- Z] | {nonascii}| {escape}
nonascii [ ^\ 0- \ 177]
unicode \ \ [ 0- 9a- f ] {1, 6}[ \ n\ r \ t \ f ] ?
escape {unicode}| \ \ [ - ~\ 200- \ 4177777]
nmchar [ a- zA
num [ 0- 9] +| [ 0- 9] *\ . [ 0- 9] +
string {string1} {string2}
Oscar E Capuay Uceda 96
DHTML
Macro Definicin
string1 \ " ( [ \ t ! #$%&( - ~] | \ \ {nl }| \ ' | {nonascii} {escape}) *\ "
\ ' ( [ \ - {escape}) *\ '
\ n| \ r \ n| \ r | \ f
[ \ t \ r \ n\ f ] *
Abajo est la sintax CSS. Las en
cm .
a ATKEYWORD S* otros* [ bloque | ';' S* ];
'}' S*;
elector otros+;
declaracin propiedad ':' S* valor;
UNCTION | DASHMATCH | '(' otros* ')' | '['
otros* ']' ] S*;
T no aparecen en la gramtica (para mantenerla
gible), pero cualquier cantidad de estos comandos pueden aparecer en
r e
l comando S en la gramtica anterior est colocado para los espacios en
Solamente los caracteres "espacio" (cdigo 32 en Unicode),
ance de
(12) pueden aparecer en los espacios en blanco. Otros caracteres que
roducen espacios, tales como "espacio eme" (8195) y "espacio ideogrfico"
clave to s palabras clave no
s una palabra clave,
d" no lo es. (Es una cadena.)
|
~] | \ \ {nl } cii}| string2 t ! #$%&( | \ " | {nonas
nl
w
is central para secciones siguientes describ
o usarla
Tabla 14. Secciones CSS
hoja de estilo [ CDO | CDC | S | estamento ]*;
estamento regla | regla-arroba;
regla-arrob
bloque '{' S* [ otros | bloque | ATKEYWORD S* | ';' ]* '}' S*;
regla selector? '{' S* declaracin? [ ';' S* declaracin? ]*
s
propiedad IDENT S*;
valor [ otros | bloque | ATKEYWORD S* ]+;
otros [ IDENT | NUMBER | PERCENTAGE | DIMENSION |
STRING | DELIM | URI | HASH | UNICODE-RANGE |
INCLUDES | F
Los comandos COMMEN
le
cualquier luga ntre otros comandos.
E
blanco.
"tabulador" (9), "avance de lnea" (10), "retorno de carro" (13) y "av
hoja"
p
(12288) nunca forman parte de los espacios en blanco.
Palabras clave
Las palabras man la forma de identificadores. La
deben ir entre comillas ("..." o '...'). De este modo, red e
pero "re
Otros ejemplos ilcitos:
width: "auto";
border: "none";
font-family: "serif";
background: "red";
Oscar E Capuay Uceda 97
Iniciando la programacin con PHP
III. Iniciando la programacin con PHP
Para iniciar debemos conocer algunos conceptos bsicos, para ello nos
s PHP?
pertext Preprocessor") es un lenguaje de
go abierto" interpretado, de alto nivel, embebido en pginas HTML y
tado en el servidor [1]. Este lenguaje se caracteriza porque solo es
o J avaScript, PHP es un lenguaje
similar a C; se puede usar en tres
-GTK.
s en PHP pueden almacenar datos de diferentes tipos, sin
intaxis para el uso de
siguiente modelo: $var , es decir, toda variable
ebe iniciar con el smbolo de dlar ($) y luego se escribe el nombre de la
edad se escribe $edad.
fine(). Una vez definida,
a.
stante solo es necesario especificar su
tiene que especificar el prefijo $.
Las constantes solo pueden ser definidas usando la funcin define(),
stantes solo puede albergar valores escalares
haremos una pregunta:
Que e
PHP (acrnimo de "PHP: Hy
"cdi
jecu e
interpretado pero no compilado, y es embebido en el cdigo HTML, lo que le
da una alto rendimiento y potencia.
diferencia de otros lenguajes script com A
script que se ejecuta en el servidor Web, de tal manera que, solamente el
resultado de su ejecucin es enviado al cliente Web (navegador). Tomando
en cuenta lo escrito anteriormente podemos decir que, el cdigo fuente
escrito en PHP no aparecer en el cdigo fuente de la pgina Web que
muestra el navegador.
Viendo el lenguaje desde el punto de vista del programador podemos decir
ue es un lenguaje con una sintaxis q
campos: el primero - el mas tradicional - es en los scripts del lado del
servidor, el segundo es la ejecucin de scripts en la lnea de comandos del
sistema operativo (Linux o Windows); y el tercero en el desarrollo de
plicaciones de interfaz grfica con PHP a
Variables
Las variable
necesidad de ser declaradas previamente. La s
variables esta definido por el
d
variable.
Por ejemplo para hacer referencia a la variable
Constantes
te usando la funcin de Se puede definir una constan
no puede ser modificada ni eliminad
ara obtener el valor de una con P
nombre. A diferencia de las variables, no se
Estas son las diferencias entre constantes y variables: