libro php
TRANSCRIPT
-
Desarrollo Web con PHP Oscar Capuay Uceda
-
Contenido
DEDICATORIA 7
AGRADECIMIENTOS 7
INTRODUCCIN 9
I. PREPARANDO LA PLATAFORMA DE DESARROLLO 11
INSTALACIN DEL SERVIDOR WEB Y PHP 11 INSTALACIN EN WINDOWS 11
II. DHTML 16
HTML 16 FORMATO DE TEXTO CON HTML 19 LISTAS 19 COMENTARIOS NO VISIBLES EN LA PANTALLA 22 CARACTERES ESPECIALES 23 ENLACES O HIPERVNCULOS 25 IMGENES 28 TABLAS 31 FORMULARIOS 38 HTML 4 45 JAVASCRIPT 61 ELEMENTOS BSICOS 62 COMENTARIOS 62 LITERALES 63 TIPOS DE DATOS 64 VARIABLES 64 OPERADORES 65 ESTRUCTURAS DE CONTROL 68 OBJETOS 70 OBJETOS PREDEFINIDOS 71 EVENTOS 75 DEFINICIN MEDIANTE CDIGO 77 MODELO DE OBJETOS DEL DOCUMENTO 78 OBJETO WINDOW 79 OBJETO DOCUMENT 82 OBJETO FORM 83 OTROS OBJETOS 88 FICHEROS .JS 90 HOJAS DE ESTILO EN CASCADA 91 SINTAXIS Y TIPOS BSICOS DE DATOS EN CSS2 95 PALABRAS CLAVE 97
-
III. INICIANDO LA PROGRAMACIN CON PHP 99
QUE ES PHP? 99 VARIABLES 99 CONSTANTES 99 TIPOS DE DATOS 100 EXPRESIONES 100 OPERADORES 102 OPERADORES DE ARITMTICA 103 OPERADORES DE ASIGNACIN 103 OPERADORES DE COMPARACIN 104 OPERADORES DE CONTROL DE ERRORES 105 OPERADORES DE EJECUCIN 106 OPERADORES DE INCREMENTO/DECREMENTO 106 OPERADORES DE LGICA 108 OPERADORES DE CADENA 108 OPERADORES DE MATRICES 109 OPERADORES DE TIPO 110
IV. ESTRUCTURAS DE CONTROL 113
SI (CONDICIONAL): IF 113 ELSE 114 ELSEIF 114 FOR 115 WHILE 115 DO..WHILE 115
V. ACCESO A DATOS CON PHP 117
FORMULARIOS HTML Y PHP 124 SUBIENDO ARCHIVOS AL SERVIDOR 129 ACCESO A BASES DE DATOS 132 CREANDO UNA BASE DE DATOS MYSQL EN MYSQL ADMINISTRATOR 132 CREANDO UNA BASE DE DATOS MYSQL EN PHPMYADMIN 137 ACCESO A MYSQL DESDE PHP 143 INSTALACIN DE POSTGRESQL SOBRE WINDOWS XP 151 CREANDO UNA BASE DE DATOS POSTGRESQL EN PGADMIN III 158 CREANDO UNA BASE DE DATOS POSTGRESQL EN PHPPGADMIN 165 ACCESO A POSTGRESQL DESDE PHP 170 ACCESO A MS SQL-SERVER DESDE PHP 177
VI. PHP ORIENTADO A OBJETOS 187
CLASES EN PHP 187 INSTANCIA DE UN OBJETO 187 EXTENDIENDO OBJETOS 188
-
AUTO CARGA DE OBJETOS 189 ACCESO A MYSQL CON PHP ORIENTADO A OBJETOS 191 MYSQLI 191 MYSQLI_STMT 193 MYSQLI_RESULT 194 PAGINANDO RESULTADOS 202 ARQUITECTURA MVC 205 MVC CON PHP 205 MVC Y PHP CON ACCESO A BASE DE DATOS 212 PDO PHP DATA OBJECT 215 CLASES PREDEFINIDAS 215 CONEXIONES CON PDO 218 EJECUCIN DE SENTENCIAS PREPARADAS CON PDO 221
VII. SEGURIDAD WEB 225
SEGURIDAD EN EL SISTEMA DE ARCHIVOS 225 SEGURIDAD EN BASE DE DATOS 227 INYECCIN SQL 229 SESIONES 242 AUTENTIFICACIN HTTP CON PHP 246 LOGIN 248 CAPTCHA 253
VIII. GENERACIN DE ARCHIVOS CON PHP 257
IMGENES 257 ARCHIVOS PDF 264 FPDF 264 ARCHIVOS XLS 274
IX. PHP + AJAX 281
AJAX 281 XAJAX 282 EVENTOS CON XAJAX 291 TRABAJO CON FORMULARIOS EN XAJAX 293 ERROR COMN 298 BSQUEDA EN BASE DE DATOS CON XAJAX 299 ADMINISTRACIN DE DATOS CON AJAX 301 CONTROLADOR CON AJAX 301 CAPA DE DATOS CON AJAX 306 VISTA CON AJAX 308
X. REFERENCIAS BIBLIOGRAFICAS 313
XI. ANEXOS 314
-
LISTA DE EJEMPLOS 314 LISTA DE TABLAS 318 LISTA DE FIGURAS 319
-
Dedicatoria Este libro lo dedico a Dios, a mi esposa Kelly, y a mi hijo Oscar Armando.
Agradecimientos Este libro es gracias a la bendicin de Dios, al apoyo y aliento de mis padres, a la colaboracin de mis hermanos Carlos, Jaime y Benjamn y al amor de mi esposa Kelly.
-
Introduccin
Introduccin PHP desde el ao 1997 ha crecido aceleradamente, su versin 4 lanzada en el 2000 gan mucha popularidad y logr estar instalado en mas de la cuarta parte de los servidores Web a nivel mundial, esto la convirti en el 2003 en la plataforma Web con mayor presencia en Internet en comparacin con sus similares. En la actualidad muchas empresas han optado por el desarrollo de sus aplicaciones con PHP, esto ha generado una creciente demanda de profesionales con habilidades y conocimiento de este lenguaje, es por este motivo que decid escribir este libro, y aportar algunos conocimientos basados en la experiencia obtenida en los ltimos seis aos desarrollando aplicaciones Web.
Oscar E Capuay Uceda 9
-
Preparando la plataforma de desarrollo
I. Preparando la plataforma de desarrollo
Instalacin del servidor Web y PHP
Instalacin en Windows Para trabajar con PHP vamos a utilizar WAMP un software que instala el servidor Web APACHE, PHP y el manejador de base de datos MySQL. Veamos a continuacin los pasos de la instalacin:
Figura 1. Inicio de la instalacin de WAMP
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: .
conocimientos de HTML Dinmico DHTML, debido a que en los documentos Web no slo se escribe un lenguaje sino que es necesario utilizar diferentes lenguajes para la implementacin de las diversas rutinas que se pueden requerir para un buen funcionamiento de la aplicacin. Debido a esto a continuacin veremos un repaso rpido de los temas relacionados con DHTML.
HTML HTML es un lenguaje que permite definir los elementos que conforman una pgina Web. Los diseadores y programadores de pginas Web utilizan el lenguaje HTML de modo que los navegadores que utilizamos los usuarios muestran las pginas Web despus de interpretar su contenido HTML.
l W3C Euniversalsu primeexclusivamente para crear documentose utiliza en la mayora de apliccomercialetc.). El lenguaj"Tags", la Modelo de Inicio de una etiqueta. modelo de Cierre de una etiqueta. El texto o cualquier elemento de la pgina Web, que est entre ambas etiquetas (de inicio y cierre), estar influenciado por la accin que stas realicen. Por ejemplo, todo el documento HTML debe estar entre las tiquetas y . e
[Documento Web] Hay que considerar que no todos los tags tienen etiqueta de cierre. Aunque se recomienda que las etiquetas o tags que no tienen incluyan un / antes del cierre. Por ejemplo la etiqueta BR se recomienda escribi Es indiferente escribir las etiquetas en maysculas o minsculas. Pero se recomienda escribirlas en minsculas. Para diferenciarlas del texto comn, las escribiremos en maysculas.
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 y su finalizacin es con cera se coloca la informacin sobre la pgina Web,
ero hay que tener en cuenta que esta informacin no se muestra en el r, excepto el ttulo de la pgina que se muestra en la barra de ttulo tana del navegador, el cual se encuentra entre las etiquetas
est comprendido entre las etiquetas y . que aparezca en la pantalla
l encabezado y el cuerpo, y as utilizadas para delimitar estas partes, las
TML para construir una pgina Web deben estar en el siguiente
Ttulo de la p
/HEAD>
ner varios ttulos, los cuales escribiremos y , etc. (hasta H6), el nmero
xisten otros tags como por ejemplo, los separadores horizontales
documento. L. En la cabepnavegadode la ven y .
,El cuerpoDentro de ste est todo lo que queremos
(texto, imgenes, etc.) principal Por lo mencionado anteriormente, podemos concluir que la estructura de un documento Web (pgina Web) tiene dos partes: eque de acuerdo a las etiquetetiquetas Horden:
gina < [En este lugar escribiremos el contenido de la pgina] Antes de crear nuestra primera pgina Web, debemos tener ciertas consideraciones sobre el texto que vamos a incluir en el documento: No hay necesidad de tratar de justificar el texto al ancho del navegador, pues el texto de una pgina Web se caracteriza por justificarse de acuerdo al ancho que tome la ventana, adems cuando queramos pasar a un nuevo prrafo, es
ecesario utilizar la etiqueta . n El contenido de la pgina puede teentre las etiquetas y , en la etiqueta de ttulo indica el tamao de los caracteres de la frase o palabra. El tamao mayor es el correspondiente al nmero 1. Una etiqueta muy interesante es la de centrado y (debemos tomar en cuenta que a esta etiqueta no la soportan todos los navegadores, aunque s la mayora de ellos). Esta etiqueta centra todo lo que est dentro de ella, ya sea texto, imgenes, etc. E(horizontal rules), que se insertan con la etiqueta (este tag no tiene la correspondiente etiqueta de cierre). Con ella se obtiene una raya horizontal
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
mi primera pgina Web programando con HTML, aun es muy sencillo el
Ejemplo 1: Prim Ejercicio01.html Mi Primer Ejercicio Ejercicio 1 Esta es diseo pero pronto haremos pginas ms complejas. Este es el segundo prrafo.
Resultado Web
Figura 10. Resultado de ejercicio01.html
Cuando programsea necesario, mayorme
emos, tratemos de colocar algunas lneas en blanco cuando nte para separar la cabecera del cuerpo de la
pgina, y adems justificar a la izquierda las lneas en varios niveles, para identificar con mucha mayor claridad el cdigo que se encuentra dentro de ciertas etiquetas, como lo podemos notar en el ejemplo anterior. De hecho, todo el cdigo podra estar escrito dentro de una sola lnea. Lo importante es el orden correcto de las etiquetas. Por cierto, una etiqueta puede estar anidada dentro de otra. En el ejemplo podemos notar la etiqueta dentro de la etiqueta . Es muy importante, en estos casos, que las etiquetas de inicio y de cierre vayan en el orden correcto, pues de lo contrario se produciran errores.
Oscar E Capuay Uceda 18
-
DHTML
Formato de Texto con texto, este
os crear un s la etiqueta , esta etiqueta inserta una lnea en
ma del prrafo anterior. Pero si deseamos realizar nea, es decir pasar a la siguiente lnea sin incluir una en blanco,
mos el tag . Esta etiqueta por su funcionamiento no tiene una
y Cursiva bajamos con texto formateado, las caractersticas ms utilizadas
a y cursiva. Pues en HTML, podemos darle esas caractersticas al tilizando las etiquetas: para poner el texto en negrita, y para
Cada una de ellas si cuenta con su respectiva etiqueta de >).
spacios en blanco
ndices y Subndices matemticas puede interesar poder escribir ndices y
nsiguen con las etiquetas y te. Por ejemplo: m2 se obtiene con: m2
/SUB>.
ntos es necesario mostrarlos en forma de listas, las cuales pueden ser de diferentes tipos: 1. Listas sin orden (sin numerar) 2. Listas ordenadas (numeradas) 3. Listas de definicin. Una lista sin orden (Unordered List) sirve para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un nmero. Su estructura es la siguiente: Naranja
LI> Manzana
HTML En ejemplo anterior, podemos notar que cuando colocamos
ce sin ningn formato en especial. Slo, cuando quisimaparenuevo prrafo, utilizamoblanco despus de la ltiun salto de lutilizareetiqueta de cierre. Negrita Cuando tra
egritson: nexto utformato cursiva. c rre ( y
-
DHTML
Resultado Web
Figura 11. Lista sin orden
Adems podemos anidar una lista dentro de otra. Por ejemplo:
Bacalao
Mamferos Peces Sardina Aves Resultado Web
Figura 12. Listas sin orden anidadas
s Ordenadas (Ordered Lists) sirven para presentar tems en un eterminado. Su estructura es muy similar a la anterior. La diferencia
ente un nmero
Las Lista
rden doest en que en el resultado aparecer automticam
ativo para cada elemento de la lista. correl
troduccion In Conceptos Basicos Aplicaciones
Oscar E Capuay Uceda 20
-
DHTML
Bibliografia El texto aparecer de la siguiente forma:
Figura 13. Lista ordenada
listas sin orden, tambin se pueden anidar las listas ordenadas. El tercer tipo lo forman las listas de definicin. Como su nombre indica, son apropiadas para glosarios (o definiciones de trminos). Toda la lista debe ir englobada entre las etiquetas y . Y a diferencia de las dos que hemos visto, cada rengln de la lista tiene dos partes: 1) el nombre de la cosa a definir, que se consigue con la etiqueta (definition term) y 2) la definicin de dicha cosa, que se consigue con la etiqueta (definition definition). HTML Son las iniciales de HyperText Markup Language WWW Son las iniciales de World Wide Web Su resultado es:
Al igual que las
Figura 14. Lista de definiciones
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
qque no queremos
stos dos smbolos: !-- y --> .
Por eje
ici E> Mis Cur
LI> Software de Aplicacin I
s de rencial
os cursos que me gustan son (en orden de preferencia):
eria de Software erencial
s de Computadoras
ue se vean en pantalla. Esto se consigue encerrando dichos comentarios entre e < Ejerc o 2 < L Ingeni Sistemas de Informacin G Rede
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 tildeespeciales, esto debido atexto. Una de ellas es dcomando escrito entre los smbolos "". Por taeambigedad, ya que el navfi Para superar estas limitaciones, existen cdigos para escribir estos caracteres y otros relacionados junto con las etiquetas.
> obtenemos > (greater than, mayor que) & obtenemos & (ampersand) " obtenemos " (double quotation)
Podemos ver, que estos cdigos empiezan siempre con el signo & y
digos para escribir letras s vocales acentuadas se
acaban siempre con ;. De igual manera, existen cespecficas de distintos idiomas. Los cdigos de la
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 - - - - - - - - - - - - - -
Tescribimos nuestro texto sin hacer nieposible que el resultado lo veamos correctamente en nuestro navegador, pero nunca podremos estar seguros que l
estras pginas con otros na Para corregir el ejercicio anterior con vocales acentuadas utilsiguiente ejemplo. Ejemplo 3: Uso de tildes Ejercicio03.html
HTML> < Ejercicio 3 Mis Cursos
in un orden particular, mis cursos son lS Redes de computadoras Ingeniera de Software Herramientas Case Software de Aplicacin I Software de Aplicacin II Sistemas de Informacin Gerencial
/UL> < Resultado Web:
Figura 16. Resultado de ejercicio03.html
te en este elemento: el Hipervnculo o tos repartidos
s, en general, tienen la siguiente estructura:
yyy xxx : es el destino del hipervnculo. yyy : es el texto que generalmente aparece subrayado y con un color especial, el cual indicar en la pantalla la existencia de un enlace.
Enlaces o hipervnculos El xito de la Web, se basa justamenenlace, pues nos da la posibilidad de unir los distintos documenpor todo el mundo. Estructura de los enlaces Los enlace
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 saltarse sustituye por alquier palabra). Lo que hemos llamado antes YYY es la palabra (o palabras) que
en la pantalla en color (en forma de hipertexto). Su estructura
remos saltar, debemos poner la siguiente >
ltar desde aqu a la pantalla final, pongo la siguiente
pgina nuestra arias mpre
pal y otras enlazadas a ella.
-
DHTML
Si la pgina a la que quiero saltar est, por ejemplo en el subdirectorio
a la inversa, si quiero saltar desde una pgina a otra que est en un ue haber puesto irectorio anterior.
os subdirectorios, y emos evitar todas
(es dor distinto), es necesario conocer su direccin
source Locator). El URL podra ser, adems de
recciones correctamente (respetando las las distinguen)
rio@servidoremail">Texto del enlace
CENTER> Mis pginas favoritas
stas son mis pginas favoritas: EF="http://www.desarrolloweb.com">Desarrollo Web REF="http://www.forosdelweb.com">Foros del Web
cursos, entonces en la etiqueta tendra que haber puesto "cursos/pag5.html". Segn el prrafo anterior, la etiqueta tiene que ser: Cursos . Ydirectorio anterior o nivel superior, en la etiqueta tendra q"../pag5.html". Esos dos puntos (..) hace que se dirija al dObsrvese que se debe utilizar el smbolo / para indicar l
o este otro \, que es propio nicamente de Windows. Podnestas complicaciones colocando todos los archivos en un solo directorio, pero si tenemos muchas pginas lo mejor es tenerlas en directorios, pues nos facilitar el mantenimiento de ellas. Enlaces con una pgina fuera de nuestro sistema
i queremos enlazar con una pgina que est fuera de nuestro Sitio Web Sdecir, que est en un serviompleta, o URL (Uniform Rec
la direccin de una pgina del Web, una direccin de ftp, gopher, etc. Una vez conocida la direccin (o URL), la colocamos en vez de lo que hemos llamado anteriormente xxx (el destino del enlace). Si queremos enlazar con la pgina de la Nasa (cuyo URL es: http://www.nasa.com), la etiqueta sera: Pgina inicial de la Nasa
s importante escribir estas diEmaysculas y minsculas, pues los servidores UNIX s Enlaces con una direccin de Correo Electrnico En este caso, sustituimos lo que se ha llamado antes xxx (el destino del enlace) por mailto: seguido de la direccin de correo electrnico. La estructura de la etiqueta es:
A HREF="mailto: usua< Ejemplo 4: Enlaces Ejercicio 4 < E
-
DHTML
Resultado Web:
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: Con el comando IMG SRC (Image Source, origen o fuente de la imagen) se
dica que se quiere mostrar uintenga el archivo).
etiqueta se Dentro de la
on ALT se inserta una descripcCimagen. ALT se puede opgina con un programacapaces de ver la image Snombre. Pero si se encontrara en otro lugar es necesario indicar su ubicacin exacta, ut Un aspecto muy importante a tener en cuenta es el tamao de las imgenes, pues una imagen grande supone un archivo grande, y esto puede resultar en un tiempo excesivo de carga, con el consiguiente riesgo de que quien esintentando cargar nuestra pgina se canse de esperar, y desista de ello.
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 .
destino del enlace e yyy el texto del enlace (o ms generalmente hablando, lo que aparece en la pantalla como el enlace; anteriormente era un texto, y en ste va a ser una imagen). En este caso sustituimos xxx por el nombre del archivo de la pgina a la que queremos acceder. Y en lugar de yyy ponemos la etiqueta completa de la imagen (que queda as englobada dentro de la etiqueta del enlace). Como ejemplo vamos a utilizar la imagen (flecha.gif) para acceder al ejercicio 2 (ejercicio2.html): Pulsando la imagen comprobamos cmo efectivamente enlaza con la pgina deseada. Obsrvese adems que la imagen est rodeada de un rectgulo del color normal en los enlaces. Si no se desea que aparezca eserectngulo, hay que incluir la imagen el atributo
ORDER=0, es decir:
gen, comprobamos que acta mbin como enlace aunque carezca del rectngulo de color. Esto puede
resultar ms esttico, pero se corre el riesgo de que el usuario no se d cuenta de que la imagen
genes
pa un lado De momento nos vamos a limitar a escoger l
a imagen (si es que queremos ponerlrespecto a lpuede poner arriba, e
ando ALaade el com
if" ALIGN=TOP> Titular alineado arriba
-
DHTML
Ejercicio 5
icio 5
entos bsicos sobre todo
cio1.html">
R>
Resultado Web:
Ejerc Esta es una pgina Web. Tiene todos los elemimgenes.
-
DHTML
Tablas ara crear tablas son:
ara especificar el inicio y final de la tabla.
etiqueta le podemos aadir un comando: BORDER, que sirve para el grosor del borde de las celdas. La manera de especificar esta
tica es la siguiente:
[resto de las etiquetas]
entro de estas etiquetas, es necesario especificar las filas y columnas que
uetas para formar cada fila (row) de la tabla, que son: y . stas etiquetas tenemos que repetirlas tantas veces como filas queremos
s veces como celdas queremos que haya en esa fila.
ntana -->
>fila2-celda2 fila2-celda3
/HTML>
Las etiquetas necesarias p Y p A esta especificararactersc
Por ejemplo: si queremos una tabla con un borde de una unidad de espesor, escribiremos el siguiente cdigo: [resto de las etiquetas] Dcontendr la tabla. Las etiqEque tenga la tabla. Las etiquetas para crear columnas son: y , que engloban el contenido de cada celda concreta (texto, imgenes, etc.). Hay que repetirla tanta Ejemplo 6: Tablas Ejercicio06.html Ejercicio 6 Ejercicio 6
-
DHTML
Resultado Web:
Figura 19. Tabla HTML
Que pasara si creamos filas con diferente numero de columnas?, el un espacio vaco en dicha posicin. Si en la tabla del
ejercicio 6 eliminamos la tercera celda de la segunda fila, es decir si borramos fila2-celda3, resultar:
navegador crear
Figura 20. Tabla sin una celda
ular a la tabla, es decir un texto situado en la parte o. ste titular se consigue
etiquetas: y para su inicio y finalizacin,
cuenta el ejercicio anterior, vemos como podemos utilizar esta
ORDER="1"> desiguales
Titular de la tabla Se puede aadir un titsuperior de la tabla que indica cul es su contenidcon las respectivamente. Tomando en etiqueta:
-
DHTML
fila1-celda1 fila1-celda2 fila1-celda3
a2-celda2
/table>
R sultado Web:
fila2-celda1 fil <
e
Figura 21. Tabla con etiqueta CAPTION
dems de las celdas que contienen datos normales, podemos poner, si noA s
umna 2 Columna 3 fila1-celda1 fila1-celda2 fila1-celda3 fila2-celda1 fila2-celda2
conviene, celdas de cabecera, que se distinguen por estar el texto de dichas celdas en negrita y centrado. Estas celdas se insertan escribiendo la etiqueta: y . Vamos a aadir, en el ejemplo anterior, una fila de estas celdas de cabecera, antes de las otras dos que ya existan: Ejemplo de filas desiguales
Columna 1 Col
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: Al centro A la derecha Cabecera a la izquierda
n el caso de la etiqueta , por defecto el texto esta en el centro de la
celdas tienen alineacin vertical es en el medio. Esto mbin se puede cambiar, aadiendo dentro de la etiqueta de la celda los
s atributos:
entro
N=BOTTOM> Abajo
ensiones de la tabla lmente dimensiona el tamao de la tabla de acuerdo con
s, de columnas, por el contenido de las celdas, espesor de tambin podemos tos son: WIDTH y
T (ancho y alto), los cuales pueden estar expresados en pixeles o en sin de la pantalla. otras varias arnos que una celda se extienda sobre otras varias.
e consigue aadindo dentro de la etiqueta de la celda los atributos PAN=nmero para extenderse sobre un nmero determinado de
Ecelda. Por defecto, lastasiguiente Arriba
N=CENTER> C
-
DHTML
columnas, o ROWSPAN=nmero para extenderse verticalmente sobre un e filas.
lo, en la tabla anterior vamos a aadir una fila con una sola celda, a tres columnas:
ORDER="1"> plo de filas desiguales
Columna 1
elda sobre 3 columnas
fila1-celda1
< f f
/TA E
nmero determinado d Por ejemp
aque abarc
TABLE B< Ejem
TR> Columna 2 Columna 3 ila2-celda1 ila2-celda2 D
< BL > Resultado Web
Figura 23. Tabla con COLSPAN
pero que barque tambin a la siguiente:
DER="1">
O, en la misma tabla, vamos a aadir una celda en la primera fila. a
-
DHTML
Columna 1 Columna 2 Columna 3
-celda2
Celda sobre 3 columnas fila1-celda1
fila1-celda2 Celda junto a 2 filas
fila2-celda1 fila2 Resultado Web
Figura 24. Tabla con ROWSPAN
Separacin entre las celdas de una tabla
or defecto, la separacin entre celdas de una tabla es de dos pixels. Pero e dentro de
els entre celdas
cin entre el borde y el contenido dentro de las celdas es de un o hacemos con el atributo
ABLE>.
NG=20>
Pse puede variar esto con el atributo CELLSPACING, que se pona etiqueta . l
20 pixPor ejemplo, para obtener una separacin deponemos: Separacin entre el borde y el contenido dentro de las celdas
a separaLpixel. Si queremos cambiar esto, lCELLPADDING, que se pone dentro de la etiqueta
-
DHTML
Se puede combinar este atributo con CELLSPACING, visto lneas atrs. Por as de
nido con respecto a los bordes de las celdas de 20, ndramos con:
Web
ejemplo, una tabla con bordes de 5 de espesor, separacin entre celd15 y separacin del contelo obte
R=5 CELLSPACING=15 CELLPADDING=20>
HR width=75%>
Ejemplo 7: Ejemplo de Tablas en HTML ejemp Tablas < Tablas fila2-celda2< < /TD>
/TR> fila2-celda3 < Resultado Web
Figura 26. Resultado de ejemplo06.html
Formularios Los formularios permiten a los usuarios enviar informacin al servidor, en el ual hay instac lado(s) programa(s) que procesan esta informacin.
uiente:
ara poder
tones de envo y de borrado. Etiqueta de cierre
Estructura de un formulario
uctura de un formulario es la sigLa estr
Etiqueta de inicio: Cuerpo del formulario, con los distintos elementos p
introducir los datos. Bo
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".
El atributo ACTION indica la accin que se debe efeEenviados a la direccin de ematributo ACTION. Con el atributo ENCTYPE="TEXT/PLAIN" se consigue que las respuestas las recibamos como un archivo dc E E1. Introduccin por medio de texto 2. Introduccin po3. Introduccin por medio de botones
cin de los datos se consigue por medio dLa introduc En donde: xx es la palabra que indica el tipo de introducx
yyy es el nombre que le asignamato. d
zzz es el nombre de la variable que contendr el valor del elemento.
troduccin por medio de texto (una lnea)InEn este caso es xxx=text, es decir, INPUTo procede en este caso. n
Vamos a poner un ejemplo: solicitamos el apellido del usuario.
-
DHTML
En el caso que hemos visto, si hubiramos cambiado la etiqueta nte por:
LENGTH="12">
conocible, es r asteriscos. Basta con
PUT TYPE="password". En orrespondiente por:
assword" NAME="Apellido" SIZE="10" MAXLENGTH="12">
teres introducidos se representan por asteriscos. troduccin por medio de texto (mltiples lneas)
a introducir puede alcanzar una gran longitud, por ejemplo un comentario, es conveniente utilizar un formulario de texto de mltiples
Esto se consigue con la etiqueta de inicio: (en donde no se utiliza INPUT TYPE y donde ROWS representa el nmero de filas, y COLS el de columnas). y la de cierre: Ejemplo 8: Formulario solicitando los comentarios del usuario: Introduce tus comentarios: Resultado Web:
correspondie
lido" SIZE="10" MAX
-
DHTML
Introduccin por medio de Listas Desplegables os que el usuario, en vez de introducir un texto, como hemos visto
tiqueta de inicio y la de cierre
/PLAIN">
-
DHTML
Botones de radio Cuando queremos que el usuario elija una nica opcin entre varias, podemos hacer uso de los botones de radio, que se consiguen con la tiqueta:
N= HOD="POST" ENCTYPE="TEXT/PLAIN"> Cul es tu sistema operativo preferido?
YPE="radio" NAME="SistemaOperativo" VALUE="PC" CHECKED> PC YPE="radio" NAME="SistemaOperativo" VALUE="Mac"> Mac
o" VALUE="Unix"> Unix
ECKED que se ha aadido en la primera parece marcada por defecto.
escogido la opcin PC y pulsa el botn de envo, recibiremos on el texto: SistemaOperativo=PC.
ba un elemento lquier formulario, y es el botn de envo de los datos, que se
con la etiqueta:
t" VALUE="Enviar">
to que queremos que aparezca en el botn. Ejemplo:
TION=mailto:email METHOD="POST" ENCTYPE="TEXT/PLAIN"> pellido:
UT TYPE="text" NAME="Apellido"> T TYPE="submit" VALUE="Enviar datos">
/FORM>
tn interesante es el de borrado de los datos introducidos, muy nte en un formulario con muchos elementos. Es muy similar al de
:
PE="reset" VALUE="zzz">
s el texto que queremos que aparezca en el botn. Si s al ejemplo anterior la etiqueta:
e Donde yyy es el nombre que le ponemos a la variable que se trata de elegir, y zzz es el nombre de cada una de las opciones en concreto. Ejemplo: solicitamos al usuario que defina cul es su sistema operativo preferido:
-
DHTML
Se puede comprobar su funcionamiento, escribiendo algo en el formulario y pulsando luego el botn de borrado. Consideraciones finales Hasta ahora hemos visto uno a uno los diferentes elementos que se pueden utilizar. Pero no hay ningn inconveniente en usar, dentro del mismo formulario, distintos tipos de introduccin de datos. Al pulsar el usuario el botn de envo recibiramos en email suyo con las distintas parejas NAME=VALUE de cada elemento, encadenadas con el smbolo &. Ejemplo 10: Formulario 2
jercicio10.html
P>
XTAREA NAME="Comentarios" ROWS="6" COLS="40">
INPUT TYPE="reset" VALUE="Borrar datos">
/BODY>
E LIBRO DE VISITAS
-
DHTML
Resultado de ejercicio10.html
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, OBJECT, RAM, SPAN, TBODY, TFOOT, THEAD y Q.
Cambios en los atributos
Casi todos los atributos que especifican el formato (tamao, color, alineacin, etc) de un documento HTML han sido desaprobados en favor de las hojas de estilo en cascada.
La lista de atributos del apndice indica qu atributos han sido desaprobados.
Los atributos id y class permiten a los autores asignar informacin de nombre y clase a los elementos para las hojas de estilo, comoidentificadore eclaraciones deobjetos, para tratamientos genricos del documento, etc.
rames (en ingls, marcos o cuadros) es un procedimiento del lenguaje ir la pantalla en diferentes zonas, o ventanas, que pueden
ctuar independientemente unas de otras, como si se trataran de pginas es incluso cada una de ellas pueden tener sus propias barras
entan son el Netscape xplorer 2.0 en adelante. Una de sus caractersticas ms
e, se puede argar en otro frame una pgina determinada. Esto se utiliza frecuentemente
e estrecho en la parte lateral (o superior) con un ndice del contenido en forma de diferentes enlaces, que, al ser pulsados cargan en la ventana principal las era se facilita la
avegacin entre las pginas, pues aunque se vaya pasando de unas a la vista el ndice del conjunto.
pgina con dos frames. El de la izquierda va a servir de ndice
ocumento de definicin de los frames ue e hacer es crear un documento HTML en el que
efiniremos cuntas zonas va a haber, qu distribucin y tamao van a er el contenido de cada una de ellas.
versin 3.2, las cuales sern comentadas a con
os nuevos ElementvLos nue
UTTONBIFRAME, INS, OPTGROUP, PA
s de vnculo, para los scripts, para d
Veamos a continuacin detalles de algunas nuevas etiquetas: Frames FHTML para dividadiferentes, pude desplazamiento. Los navegadores que lo implem2.0, y el Eimportantes es que pulsando un enlace situado en un framcpara tener un fram
distintas pginas. De esta mannotras, siempre estar a Para comprender los distintos conceptos vamos a desarrollar un ejemplo, creando una de lo que veamos en el de la derecha, y en ste veremos inicialmente una pgina de presentacin. Se podr acceder tambin aqu a las pginas creadas anteriormente, si se pulsa un enlace en el frame de la izquierda. DLo primero q tenemos qudtener, y cul va s
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
aacute;gi
RC="ejercicio11b.html" NAME="principal">
/HTML>
jercicio11a.html
head>
html>
encima d Con respecto al tamao, haremos que el primero (el de la izquierd20% d Y con respecto
Mi p& na con frames
FRAME SRC="ejercicio11a.html">
ea
ento HTML ejercicio11b.html.
to r
e al segundo frame, pues, podramos utilizar hipervnculos en el arco que muestren pginas Web en el segundo, utilizando la
TARGET, por ejemplo: ejercicio 12. Segn este ejemplo la pgina
ml se abrir en el frame del lado derecho de la pgina.
que el navegador no soporte FRAMES se utiliza la etiqueta NOFRAMES>. Se aaden al final del documento de es, y a se pone entre ambas lo que queremos que vean
navegador que no soporta frames. Puede incluso
est en que en vez de utilizar la etiqueta BODY, que sirve nodelimitar lo que se va a ver en la pantalla, se hace uso de la etiqueta FRAMESET (definir los frames). En este caso, con la etiqueta se define que va a haber dos frames y que van a ir en columnas. Si hubiramos querido que fueran en filas, habramos puesto ROWS (filas, en ingls). Tambin se define el ancho que van a ocupar cada uno de ellos en la pantalla. Se ha puesto como porcentajes del total, pero se podra tambin haber puesto una cifra absoluta, que representara el nmero de pxeles a ocupar. Ya se ha definido el nmero de frames, su distribucin y su tamao, pero falta por definir el contenido de cada frame. Esto se hace con las etiquet
-
DHTML
ser el cdigo HTML de una pgina completa (lo que normalmente va entre as y )
do diseo con frames podra ser dividiendo la pgina de manera horizontal.
RC="ejercicio11b.html" NAME="principal"> ET>
navegador que no soporta frames. 12.html"> ir a pgina sin frames .
Resultado Web:
las etiquet Un segun Ejemplo11c.html Mi pgina con frames
-
DHTML
Etiqueta ACRONYM dica un acrnimo (es la suma de los significados de las palabras que lo
ML, (Hyper Text Markup Language).
t-Type" content="text/html; charset=iso-8859-1">
NYM lang="en" age">
"es" title="Doctor">Dr
Informan. Por ejemplo HT Etiqueta ABBR Indica una forma abreviada (etc, Dr, Ing, Corp, etc.). Los elementos ABBR y ACRONYM permiten a los autores indicar claramente la aparicin de abreviaturas y acrnimos. Ejemplo 12: Acrnimos y Abreviaturas Ejemplo12.html Documento sin ttulo
-
DHTML
Carlos dice: Estoy aprendiendo HTML Jaime dice: Es un lenguaje fcil de aprender Resultado Web:
Figura 31. Frase entre comillas
INS y DEL S y DEL se usan para marcar secciones del documento que han sido
s o borradas con respecto a una versin diferente de un
tos son especiales dentro de HTML, ya que pueden actuar como elementos en bloque o bien como elementos en lnea (pero no
er una o ms palabras dentro de un
-09-25T08:15:30-05:00" /index.php">Ejemplo de texto nuevo.
P> L>una palabra borrada algo borrado.
EtiquetasINinsertadadocumento. Estos dos elemeno biencomo ambos a la vez). Pueden contenprrafo o uno o ms elementos en bloque como prrafos, listas y tablas. Ejemplo 14: INS y DEL Ejercicio14.html
-
DHTML
OBJECT Esta etiqueta se usa cuando un elemento Web ser representado utilizando un plug-in de algn software externo al agente o navegador utilizado. PARAM Las etiquetas PARAM especifican un conjunto de valores que pueden ser necesarios para un objeto en tiempo de ejecucin. Puede aparecer cualquier nmero de elementos PARAM en el contenido de un elemento OBJECT o APPLET, y en cualquier orden, pero deben ser colocados al principio del contenido del elemento OBJECT o APPLET que los contienen. Ejemplo 15: OBJECT Y PARAM Ejemplo15.html Ejemplo de OBJE
b#version=6,0,0,0"
PARAM NAME=loop VALUE=falsM
PARAM NAME=quality VALUE=high> =scale VALUE=exactfit>
PARAM NAME=bgcolor VALUE=#080638> tfit
#080638 WIDTH="100%" HEIGHT="100%" NAME="intro2" "
/OBJECT>
CT, PARAM y EMBED tent-Type" content="text/html; chars
< Resultado Web:
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
GLas filas de una ttaTHEAD, TFOOT y TBODY, respectivamente. Esta divisin permite a agentescuerpos imprimen tablas largas, la infrepeLa cabecera de tablalas columnas de la tabla. El cuerpo de tabla dede tabla. Enun gru Ejemplo 16: Uso Ejercicio16.ht
-
DHTML
Id Nombres Apellidos
"3">Pie de la tabla
1 Kelly Quiroz Ch 2 Carlos Capuay Uceda
>3 Marco Quiroz Chavil
-
DHTML
FORMULARIOS
creados con el elemento BUTTON funcionan exactamente igual s creados con el elemento INPUT, pero ofrecen posibilidades
s de representacin: el elemento BUTTON puede tener contenido. plo, un elemento BUTTON que contenga una imagen se parece y como un elemento INPUT cuyo atributo type sea igual a "image",
ero el tipo de elemento BUTTON permite un contenido. y s
omo imgenes "planas". plo extiende un ejemplo previo, pero creando los botones
de envo
El elemento BUTTON Los botonesque los botonems ricaPor ejemfunciona pLos navegadores pueden representar los botones BUTTON con un relieve
n movimiento arriba/abajo al pulsarlos, mientras que pueden representar loubotones INPUT cEl siguiente ejem
y de restablecer con BUTTON en lugar de INPUT. Los botones contienen imgenes sacadas de elementos IMG. Ejemplo 17: Button con imagen Ejercicio17.html Ejemplo de BUTTON Nombre: Apellido: email: sexo: Hombre Mujer Editar /body> /html>
Resultado Web:
ON name="reiniciar" type="reset"> Rw selected label="ninguno" value="ninguno"> Ninguno ROUP label="Limpieza">
Escoba
N> e="limp003">Detergente
ROUP label="Dulces"> Chocolate
elemento SELECT (es dectros). o
jemplo 18: E
Ejercicio18.ht
UBLIC "-//W3C
-
DHTML
Caramelo Gelatina
psi" value="bebi001">PEPSI Coca Cola
/body>
-
DHTML
FIELDSET> GEND>
Nombres:
Telfono: T>
ext" size="50"
e="txtblog" type="text" size="40" tabindex="2"> eo Electrnico:
< Datos Personales
-
DHTML
Etiquetas DIV y SPAN
on los atributos id y class, ofrecen un r estructura a los documentos. Estos
si su contenido es en lnea (SPAN) o en bloque (DIV)
ar hojas de estilo en cascada a estas etiquetas.
Ejemplo 20: DIV y SPAN
script type="text/javascript">
le(obj){
body>
"toggle('tablas');return false;"
las" style="display: none;">
Escuelas
Semestre
Las etiquetas DIV y SPAN, junto cecanismo genrico para aadim
elementos especificanpero no imponen ningn otro estilo de presentacin al contenido, por este motivo, se pueden aplic
Ejercicio20.html
head>
SPAN>Maestros
r>
Evaluaciones
Enc Podem
plo odem cer
Resulta
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 Java o VRML, es una de las mltiples maneras que
pacidades del lenguaje HTML. Al ser la ms
er un rograma con JavaSc pgina Web con
algunas cosas senc aS cosas distintas, principalmente programacin completo. Lo e n mi xis. Existen tres versiones de Ja C ha n este documento funciona con la versin 1.0, que na n e vigator 2.0. Tambin existe una versi d cida en la versin 4.06. Esta versin
s una pequea revisin de la 1.2 creada para ajustarse al estndar la el lenguaje JavaScript.
s una pgina Web , al pulsarlo, muestra el mensaje.
, Web
AME Boton" VALUE=" ame" onClick="HolaWeb()">
/HTML> Ahora vamos a ver, paso por paso, que significa cada uno de los elementos extraos que tiene la pgina anterior:
Jhan surgido para extender las casencilla, es por el momento la ms extendida. Es importante saber que: JavaScript no es un lenguaje de programacin propiamente dicho. Es un lenguaje script u orientado a documento, como pueden ser los lenguajes de
acros que tienen muchos procesadores de texto. Nunca se podr hacmp ript, tan slo se podr mejorar una
illas. Jav cript y Java son dos porque Java s que es un lenguaje denico qu comparte es la sma sintavaScript. asi todo lo que se
ci co escrito el Netscape Na
n 1.3, intro ueinternacional ECMA que regu Vamos a realizar nuestro primer "programa" en JavaScript. Haremos surgir una ventana que nos muestre el mensaje "hola, Web". As podremos ver los
lementos principales del lenguaje. El siguiente cdigo eecompleta con un botn que Ejemplo 21: funcin alert HolaWeb.html
function HolaWeb() { alert("Hola }
!");
-
DHTML
Dentro de estos elementos ser donde se puedan poner funciones en
"archivo.js">
plo, se ha escrito en la cabecera con la finalidad de hacer igo ms legible. Si un navegador no acepta JavaScript no leer lo que tre estos elementos.
unque JavaScript es o a objetos no es de ningn modo tan a de un objeto. En el cdigo de la
utton" NAME="Boton" VALUE="Pulsame"
ento que usamos para mostrar un botn vemos una cosa vento. Cuando el usuario pulsa el
vento click se dispara y ejecuta el cdigo que tenga entre comillas dor de evento onClick, en este caso la llamada a la funcin
con anterioridad. Existen uchos ms eventos que iremos descubriendo segn avancemos. En alidad, podramos haber escrito lo siguiente:
es una parte de nuestro programa que el ordenador ignora y realiza ninguna tarea. Se utilizan generalmente para poner
JavaScript. Por otra parte el cdigo de JavaScript puede ser incluido en la pgina Web de la siguiente manera:
script language="JavaScript" src =< El archivo externo simplemente es un archivo del texto que contiene cdigo JavaScript, y cuyo nombre acaba con la extensin js. El cdigo de Java Script puede ser escrito en cualquier lugar de la pgina
eb, en este ejemWel cdhay en function HolaWeb() { alert("Hola, Web!"); } A t orientadestricto como Java, donde nada est fuerfuncin vemos una llamada al mtodo alert (que pertenece al objeto window) que es la que se encarga de mostrar el mensaje en pantalla.
-
DHTML
en lenguaje humano lo que estamos haciendo en el lenguaje de r que el cdigo sea ms comprensible.
tipos de comentarios. El primero nos permite que e la lnea sea un comentario. Para ello se utilizan dos barras
mentario
ue, false
yso vectores:
acaciones = ["Navidad", "Semana Santa", "Verano"]; lert(vacaciones[0]);
Tabla 3. Caracteres especiales para cadenas en JavaScript do
programacin y as hace JavaScript existen dos En
el resto dinclinadas: ar i = 1; // Aqui esta el cov
Sin embargo, tambin permite un tipo de comentario que puede tener las lneas que queramos. Estos comentario comienzan con: /* y terminan por */.
Literales Se llama as a los valores que puede tomar una variable o una constante.
parte de los distintos tipos de nmeros y valores booleanos: A "Soy una cadena" 3434 3.43 tr Tambin podemos especificar arra va Dentro de las cadenas podemos indicar varios caracteres especiales, con significados especiales. Estos son los ms usados:
Carcter Significa\n Nueva lnea \t Tabulador \' Comilla simple \" Comilla doble \\ Barra invertida \999 El nmero ASCII (segn la codificacin Latin-1) del carcter en
hexadecimal De este modo, el siguiente literal: "Javascript (\xA9 2002)" e corresponde con la cadena: s
2) Javascript ( 200
or ltimo, tambiP
fun se pueden especificar objetos como literales, aunque no
ncione en ms que en Netscape 4 y superiores:
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 Javascript las sentencias se separan con un punto y coma, y se agrupan mediante llaves ({ y }).
Tipos de datos En
igJavascript lo
asetre
Variables Las variables son nombres que ponemos a los lugares donde almacenamos la informacin. En Javascript, deben comenzar por una letra o un subrayado (_), pudiendo haber adems dgitos entre los dems caracteres. No es necesario declarar una variable, pero cuando se hace es por medio
e la palabra reservada var. Una vadsiempre mbito global, mientras que en caso contrario
lobal si est definida fuera de una funcin, y local si est definig var x; // Accesible fuera y dentro de pruebas y = 2; // Accesible fuera y dentro de pruebas function pruebas() { var z; // Accesible slo dentro de pruebas w = 1; // Acce
} Se pueden declarar varias variables en una misma sentencia separndolos por comas:
x, y, z; var El tipo de datos de la variable ser aquel que tenga el valor que asignemos a la misma, a no ser que le asignemos un objeto por medio del operador new. Vectores y matrices
stos tipos de datos complejos son un conjunto oEcada uno de los cuales es en s mism
atrices son objelos vectores y las mlos objetos, se declara miVector = new Arra
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 Javascript";
ya que tenemos que ctor nuevo en cada elemento del vector
iginal.
de JavaScript deben referenciarse cmo se definieron, no es
os operadores nos permiten unir identificadores y literales para formar nes son el resultado de operaciones matemticas variable son expresiones, pero tambin lo son esos
rar que nuestro cdigo no lo entendamos ni nosotros.
e los operadores aritmticos clsicos y algn que otro
eradores aritmticos
lo Expresin de ejemplo Resultado del ejemplo
miEstupendoVector[25] = "Algn valor"
e hecho, podemoDutilizar. Ni siquiera necueremos: q
ectorRaro = new Array(); v
vectorRaro["insertar en lo
es ms complicado,Hacer una matriz bidimensionalhacer un bucle que cree un veor Nota importante: JavaScript es sensible a maysculas y minsculas, todos los elementoslo mismo "Salto" que "salto".
Operadores Lexpresiones. Las expresioo lgicas. Un literal o una mismos literales y variables unidos entre s mediante operadores. JavaScript dispone de muchos ms operadores que la mayora de los lenguajes, si exceptuamos a sus padres C, C++ y Java. Algunos de ellos no los estudiaremos debido a su escasa utilidad y con algunos otros (especialmente el condicional) deberemos andarnos con cuidado, ya que puede log Operadores aritmticos JavaScript dispone dms:
Tabla 4. Op
Descripcin Smbo
Multiplicacin * 2*4 8 Divisin / 5/2 2.5 Resto de una divisin entera % 5 % 2 1
Suma + 2+2 4 Resta - 7-2 5 Incremento ++ ++2 3 Decremento -- --2 1
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; bEn este primer caso, a valdr 2 ya = 1;
= a++; b Ahora, a sigue valiendo 2, pero b es ahora 1. Es decir, estos operadores modifican siempre a se
Operadores de co
ientes: Podemos usar los sigu
Tabla 5. Operadores de comparacin
Descripcin Smbolo Expresin de ejemplo ResultadoIgualdad == 2 == '2' Verdadero Desigualdad != 2 != 2 Falso Igualdad estricta === 2 === '2' Falso Desigualdad estricta !== 2 !== 2 Falso Menor que < 2 < 2 Falso Mayor que > 3 > 2 Verdadero Menor o igual que = 2 Falso
a igualdad y desigualdad estricta son iguales a las noL rmales pero hacen bacin estricta de tipo. Han sido incluidos en el estndar
lo soportan Netscape 4.06 y superiores y Explorer 3 y que indicar que versiones ms antiguas de Netscape tratan
. Operadores lgicos
n Smbolo Expresin de ejemplo Resultado del ejemplo
una comproECMAScript y superiores. Hay la igualdad normal como si fuera estricta. Operadores lgicos Estos operadores permiten realizar expresiones lgicas complejas:
Tabla 6
DescripciNegacin ! !(2 = 2) Falso
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
NormalmenteJavaScript es el scombinar co
Opx += y x = x + y x -= y x = x - y x /= y x = x / y x *= y x = x * y x % y x = x % y
Operadores Especiales Vamos a incluir en este apartado operadores que no hayan sido incluidos en
s anteriores. La concatenacin de cadenas, por ejemplo, se realiza con el l operador condicional tiene esta estructura:
Si la condicin se cumple devuelve el primer valor y, en caso contrario, el ejemplo asignara a la variable a un 2:
ores:
bla
i olo Ejemplo
losmbolo +. E condicin ? valor1 : valor2
segundo. El siguiente a = 2 > 3 ? 1 : 2
ara tratar con objetos disponemos de tres operadP
Ta 8. Operadores especiales
Descripc n Smb Resultado del ejemplo Crear un o a = new Array( n vector bjeto new ) a es ahora u
Borrar un objeto delete delete a Elimina el vector anteriormente creadoReferencia
actual is al thobjeto
this se a otros m
su r en el cdigo de los mtodos de un objeto para referirse objeto. ele utilizatodos o a propiedades de su mismo
Oscar E Capuay Uceda 67
-
DHTML
Estructupos: bifurcaciones de e ucturas de
control, en estructuras adicionales para ar el
a) Bifurc les bifurc al en una estruc za una rea u otra
ependiendo del resultado de evaluar una condicin. La primera que vamos a estudiar es la estructura if...else. Esta estructura es la ms sencilla y
mayor
es mayor que b);
s o
Es la se
witch(color) {
rojo);
o);
dicar que no es compatible con estndar ECMA y no es soportado or el Explorer 3.
petir una tarea un nmero de na condicin. Para hacer bucles podemos utilizar
ncia entre ellas es que la primera omprueba dicha condicin antes de realizar cada iteracin y la segunda lo
ras de control Estas estrcondiciona
ucturas se pueden clasificar en doles y bucles. Aparte de los dos
s grandes gru tipos clsicos str
JavaScript disponemos de algunasmanejo de objetos.
aciones condiciona
facilit
Una acin condicion tura que reali tad
antigua de todas: a=5; b=7; f (a>b) i alert(a es que b); else alert(a no Hay que indicar que el else e pcional..
La siguiente estructura bifurca suna variable especfica.
egn los distintos valores que pueda tomar ntencia switch:
s case "azul": alert( El color elegido es el azul); break; case "rojo": alert( El color elegido es el break; default:
alert( El color por defecto es negr } Hay que inp Bucles Un bucle es una estructura que permite reveces, determinado por ulas estructuras while y do...while. Estos bucles iteran indefinidamente mientras se cumpla una condicin. La diferechace despus: var numero=0;
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
ropiedente mplo:
= [
alert('Soy un while'); } do { alert('S
} while (numero==1);
n este caso solo veramos aparecer una ventana diciendo que Edo...numero edentro del bucle. En cambio, el do...while primero ejecuta el cdigo y luego, viendo que la condicin es falsa, saldra. Hay que resaltar que do...while no pertenece al estndar y no es soportado por el Explorer 3.
n Javascript, el bucle for es singularmEnumricos como en muchos otros lenguajes sino que nbertad. Tiene la siguiente estructura: li
r (inicio; condicin; incremento) fo cdigo El cdigocumpla. An
tenido en el bucle se ejecut de com
ar mientras la acin del bucle s
sentencia inihabitual de u
io y en cada iteracin lo harr estas posibili
incremento. La man est, la numrica:
var numero = 4;
-
DHTML
Este ejemplo sumara dos a todos los elementos del vector. Sin embargo, conviene tener cuidado ya que, de los navegadores de Microsoft, slo la ersin 5 lo soporta.
a otra estructura es with, que nos permitir una mayor comodidad cuando tratar con muyas propiedades de un mismo objeto. En lugar
e referirnos a todas ellas con un objeto.propiedad podemos
to es una estructura que contiene tanto variables (llamadas ulan dichas variables (llamadas
uctura se ha creado un nuevo modelo de programacin macin orientada a objetos) que atribuye a los objetos propiedades ncia o polimorfismo.
s, JavaScript simplifica en algo este modelo. Creacin mediante co
n constructor es una fun do creamos un bjeto nuevo del tipo que sea, lo que hacemos en realidad es llamar al
constructor pasndole argumentos. Por ejemplo, si creamos un objeto Array de esta manera: vector = new Array(9); En realidad, estamos llamando a un constructor llamado Array que admite un parmetro. Sera algo as: function Array(longitu ...
bjeto. Supongamos que queremos codificar
= autor;
v Ltengamos quede tener quhacer: with (objeto) { propiedad1 = ... propiedad2 = ... ... }
Objetos Un objepropiedades) como las funciones que manipmtodos).
rtir de esta estrA pa(la progra
recomo he
omo veremoC
nstructores cin que inicializa un objeto. CuanU
o
d) {
} Vamos a crear nuestro primero oen Javascript una aplicacin que lleve nuestra biblioteca de libros tcnicos de Informtica. Para lograrlo, crearemos un objeto Libro que guarde toda la informacin de cada libro. Este sera el constructor: function Libro(titulo, autor, tema) { this.titulo = titulo; this.autor
this.tema = tema; }
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("JavaScript Bible", "Danny Goodman",
ro.autor);
demos incluirlos de la siguiente forma:
escribirLibro() { l libro " + this.titulo + " de " + this.autor +
" trata sobre " + this.tema); }
ara incluirlo en nuestro objeto aadimos la siguiente lnea a nuestra funcin constructora: this.escribir = escribirLibro; Y podremos acceder al mismo de la manera normal: miLibro.escribir();
Objetos predefinidos JavaScript dispone d er a muchas de
s funciones normales de cualquier lenguaje, como puede ser el manejo de algunos casos estaremos tratando con objetos
unque no nos demos cuenta, ya que los usos ms habituales de los ponen de abreviaturas que esconden el hecho de que sean
bjetos.
ctores. Se inicializa de iguientes maneras:
ngitud); emento1, elemento2, ..., elementoN);
er caso crearemos un vector con el nmero especificado de s, mientras que en el segundo tendremos un vector que contiene entos indicados y de longitud N. Para acceder al mismo debemos que el primero elemento es el nmero cero. Array tiene, entre otros, los siguientes mtodos y propiedades:
ngth: Propiedad que contiene el nmero de elementos del vector.
objetos nuestros objetos tipo Libro: miLibro = new"JavaScript"); alert(miLib Los mtodos tambin po function alert("E
P
e varios objetos predefinidos para accedlavectores o el de fechas. Enamismos diso
a) Objeto Array Como dijimos an
las stes, este objeto permite crear ve
cualquiera de vector = new Array(lo
r = new Array(elvecto
rimEn el pelemento
elemlosrecordar El objeto le
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
-
DHTML
Realizan la misma funcin que los anteriores, pero sin tantos los, ya que
meros con todos sus dgitos. Funciona en Explorer 4 y y superiores.
etMonth()
) utos)
nds(segundos)
, el mes, da, hora, minuto y segundo de espectivamente hablando.
a de nmero que va
o est construido para que tengamos nuestras variables Math, contenedor donde meter diversas constantes (como Math.E y
los siguientes mtodos matemticos:
Tabla 9. Mtodos matemticos del Objeto Math
ejemplo del ejemplo
siempre devuelven nNetscape 4.06 gsetMonth(mes) getDate() setDate(dia) getHours() setHours(horas)
etMinutes(gsetMinutes(min
etSeconds() gsetSeco Obtienen y ponen, respectivamente
ivamente, rla fecha, tambin respect getDay() Devuelve el da de la semana de la fecha en form del 0 (domingo) al 6 (sbado).
c) Objeto Math Este objeto nsino como unMath.PI
) y
Mtodo Descripcin Expresin de Resultado
abs Valor absoluto Math.abs(-2) 2
sin, cos, n
Funciones trigonomtricas, reciben el argumento en Math.cos(Math.PI) -1 ta radianes
asin, acos, atan
Funciones trigonomtricas inversas Math.asin(1) 1.57
exp, log Exponenciacin y logaritmo, Math.log(Mbase E ath.E) 1
Devuelve el entero ms pequeo mayor o igual al argument
Math.ceil(-2.7) -2 ceil o
floor Devuelve el entero ms grande menor o igual al argumento Math.floor(-2.7) -3
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 Numbecomo propiedades los siguientes valores numricos.
Tabla 10. Propiedades del objeto Number
Propiedad Descripcin NaN Valor que significa "no es un nmero" MAX_VALUE y MIN_VALUE Mximo y mnimo nmero representable
NEGATIVE_INFINITIVE y Infinito negativo y positivo,
POSITIVE_INFINITIVE
se utilizan cuando hay desbordamiento al realizar alguna operacin matemtica
e) Objeto String Al crear una cadena estamos Su utilidad est en sus mtodos, entre lo
creando a la vez un objeto String asociado.
a posicin de la subcadena dentro de la cadena, o -1 en caso de
plit(separador) ena por el
ciona en Explorer 3. ,Verano";
ector = cadena.split(","); jemplo, el vector tendr tres elementos con cada una de las
oncat(cadena2) sultado de concatenar cadena2 al final de la cadena. No
funciona en Explorer 3 y no forma parte del estndar ECMA.
s que cabe destacar: charAt(pos) y charCodeAt(pos) Devuelven el caracter o el cdigo numrico del carcter que est en la posicin indicada de la cadena. indexOf(subcadena) Devuelven lno estar. sDevuelven un vector con subcadenas obtenidas separando la cadcarcter separador. No funcadena = "Navidad,Semana SantavEn el evacaciones de un escolar espaol normal. cDevuelve el re
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 JavaScript
Descripcin Elementos que lo admiten
cndices. toLowerCase()y toUpperCase() Transforman la cadena a minsculas y maysculas, respectivamente.
Eventos Un evento, como su mismo nombre indica, es algo que ocurre. Para que una rutina nuestra se ejecute slo cuando suceda algo extrao deberemos llamarla desde un controlador de eventos. Estos controladores se asocian a un elemento HTML y se incluyen as:
-
DHTML
impidiendo, de paso, que quien est viendo la pgina pueda hacer uso del
HTML>
arios esconden el cdigo a navegadores sin JavaScript
function Alarma() { e activo la funcin Alarma"); ue;
eb:
mismo). Ejemplo 22: Eventos eventos.html <
>
-
DHTML
Definicin mediante cdigo isto como declarar un controlHemos v
HTML. Sinador de eventos desde etiquetas
s versiones 3 de Netscape y 4 de Explorer, acerlo mediante cdigo.
rmiten atributos acceso a dichos
tml
}
embargo, y desde latro modo de hexiste o
Muchos objetos cuyas etiquetas HTML correspondientes pen controladores de evento, permiten el que define
controladores por medio de propiedades con el mismo nombre. Por ejemplo, la pgina: Ejemplo 23: Definicin mediante cdigo load1.h
. ..
Figura 41. Resultado de load1.html
Oscar E Capuay Uceda 77
-
DHTML
Figura 42. Resultado del mtodo alert
ibir como:
load2.html ...
/HTML>
Modelo de objetos duando funciona en un navegador, el lenguaje JavaScript dispone de una erie de objetos que se refieren a cosas como la ventana actual, el
que pueda parecer, no existe
e representa una ventana or. Dado que cada marco se considera una ventana
e puede reescrS
<
el documento Csdocumento sobre el que trabajamos, o el navegador que estamos utilizando. Para los ms iniciados en la programacin orientada a objetos, conviene aclarar que en esta jerarqua, contra loherencia alguna. Los objetos se relacionan por composicin, es decir, un objeto Window se compone (entre otras cosas) de un objeto Document, y ste a su vez se compone de diversos objetos Form, Image, etc..
jerarqua es el objeto Window, quEl padre de estae nuestro navegadd
distinta, cada uno de ellos dispone de su propio objeto Window. El objeto Document representa el documento HTML y cada uno de los objetos que lo componen se corresponde con diversas etiquetas HTML.
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 Javascript, se supone que todas las propiedades y tilizar ninguna referencia, en realidad se hacen
ow.]open(URL, nombre, propiedades)
able, si no te invocamos el mtodo: el navegador automticamente sabr
los
ner cuidado con las propiedades que modifiquemos, es posible nas combinaciones de los mismos no funcionen en todos los res. El Explorer 4, por ejemplo, da error ante la combinacin
enubar=no. Veamos un ejemplo:
Es el objeto principal. Define la ventaincluye los objetos referentes
referencia a l llamada window (recuerde que Javascript distingue entre maysculas y minsculas). Ser con esa referencia con la que trabajemos.
mtodos que llamamos sin uutilizando esa referencia window. As, por ejemplo, cuando ejecutamos el mtodo alert en realidad lo que estamos haciendo es ejecutar el mtodo window.alert. [Variable=][wind Permite crear (y abrir) una nueva ventana. Si queremos tener acceso a ella
esde la ventana donde la creamos deberemos asignarle una varidsimplemenque pertenece al objeto window. El parmetro URL es una cadena que contendr la direccin de la ventana que estamos abriendo: si est en blanco, la ventana se abrir con una pgina en blanco. El nombre ser el
ue queramos que se utilice como parmetro de un TARGET y lasqpropiedades son una lista separada por comas de algunos de iguientes elementos: s
olbar[=yes|no] to
location[=yes|no] directories[=yes|no] status[=yes|no] menubar[=yes|no] scrollbars[=yes|no] esizable[=yes|no] r
width=pixels height=pixels Debemos teque algunavegadotoolbar=no, directories=no, m Ejemplo 24: Funcin open() ventanas.html
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 JavaScript. Se llama a la funcin AbrirVentana desde el evento onClick, como ya sabemos hacer desde el primer ejemplo. Esta funcin crea la nueva ventana MiVentana y escribe en ella por medio del objeto Document todo el cdigo HTML de la pgina. Resultado Web:
MiVentana=open("","ventana2","t MiVentana.document.write("Una ventana"); MiVentana.document.write("Visitar AL p://www.w3c.org">W3C
Capunay le
irA simplemente utiliza la opcin elegida para obtener por medio r la direccin de la pgina a la que debe acudir.
escogida Ejemplo 26: Select con javascr select.htm function irA(menu){
ref = menu.opti window.location.h }
-
DHTML
Otros objetos lo de objetos del documento define varios objetos, por as decirlo,
cin con nada fsico de la pgina en la que que estn en
dio de la referencia document.history y ontiene todas las direcciones que se han visitado en la sesin actual.
erm pone de varios mtodos para sustituir l documento actual por alguno que el usuario ya haya visitado:
a pgina anterior. Es muy sencillo de utilizar:
iente.
e se indique, siendo donde un nmero tal que go(1)=forward()
rotocolo de la pgina actual. Habitualmente http.
de se alberga la pgina actual.
la pgina actual.
dido a una pgina por medio de un ancla, contiene una ohadilla seguida de ese ancla. Por ejemplo, #location.
E"m
l modeenores", que no tienen rela
estamos. Es decir, no guardan relacin con las etiquetas HTMLellas escritas.
Objeto History Se accede a este objeto por mecAunque no p ite acceder a ellas, dise back() Volver a l forward() Ir a la pgina sigu go(donde)Ir a dondy go(-1)=back().
Objeto Location Se accede a este objeto por medio de la referencia document.location y contiene informacin sobre la direccin de la pgina actual en varias propiedades. href Permite el acceso a la direccin de la pgina actual. Si lo cambiamos, pues cambiaremos de pgina. protocol P host Mquina don pathname Camino de hash Si hemos accealm search
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 inmensascomo: pagpermite ina otra.
Objeto Navigator Se accede a l por medio de la referencia navigator y nos permite averiguar varias caractersticas del navegador que usamos. Por ejemplo: appName Nombre del navegador. appVer Nmero principal de versin. language Idioma del mismo. platform
lataformaPN
Objeto Screen Como caba esperarse, se puede acceder a este objeto por medio de la referencia screen. Nos permitir conocer la configuracin de la pantalla del usuario. Al igual que en el anterior objeto, todos sus atributos son de slo
ctura. Conviene indicar que este oleversiones 4. height :Altura de la resolucin de la pantalla. width :Anchura de la resolucin de la pantalla. pixelDepth :Nmero de bits por pixel.
jempEif (window.screen) texto=screen.width + "x" + screen.height + "x" + Math.pow(2,screen.colorDepth) + " colores."; else texto="quien sabe cuantos colores, necesito que tenga
rando un de circun
Oscar E Capuay Uceda 89
-
DHTML
FichUn fi es un ar e podremos guardar funciones y variables globa rn leerse desde cualquier pgina HTML. Gracias a ellos podre plicar funciones que se necesiten en ms de un do rarlos a nuestras pginas de esta manera: Ejemplo 27: Uso de externo.html
-
DHTML
HOJ CSS Ca Dentro del dis eb, se presenta esta como la vanguardia en uanto a definicin de estilos dentro de las plantillas de diseo. A travs de
nforman el proyecto. SS2, como fue antes CSS1, se basa en una serie de reglas de diseo:
atibilid Las aplicaciones del o CSS s hojas de estilo CSS1.
aci e estilo y de Adems, las ones
trar los to estil r CSS no ser procesado, pero el conte
men os. Las hojas de comp
acionesmarcado. Dimpacto en e
Independen or, la plataforma y el dispositivo. Las hojas
un archivo necesita ser cambiado.
d. CSS2 es ms compleja que CSS1, pero sigue siendo je de estilo simple que es humanamente legible y posible
eterminado. Rendimiento de la red. CSS proporciona una compacta codificacin
los contenidos. Comparado con los archivos de nes o de audio que son usados frecuentemente por los
ara conseguir ciertos efectos en el procesamiento, las tilo, la mayora de las veces, disminuyen el tamao del Adems, menos conexiones de la red tienen que ser
abiertas, lo cual ayuda a incrementar el rendimiento de la red. Flexibilidad. Las CSS pueden ser aplicadas al contenido de varias
maneras. La caracterstica clave es la capacidad de formar una cascada de estilos con la informacin especificada en la hoja de
AS DE ESTILO EN CASCADA
scade Style Sheet (Hojas de Estilo en Cascada).
eo de pginas Wcinstrucciones en cdigo HTML se definen los estndares del conjunto de pginas que coC
Compusuari
ad hac 2 sern capaces de entender la
ia atrs y hacia adelante.
Las aplic ones del usuario CSS1 podrn leer las hojas dscartar las partes que no entienden. CSS2
aplicacimos
del usuario que no soporten CSS sern capaces de documentos estilsticamente mejorados. Por supuesto, el
efectodo
stico hecho posible ponido ser presentado.
Comple tariedad con documentos estructuradlementan los documentos estructuradestilo os (ej., HTML y XML) proveyendo informacin estilstica del texto ebe ser fcil cambiar la hoja de estilo con poco o ningn l sistema de marcas.
cia del vended
aplic
de estilo permiten a los documentos permanecer independientes del vendedor, la plataforma y el dispositivo. Las mismas hojas de estilo son tambin independientes del vendedor y la plataforma, pero CSS2 permite dirigir una hoja de estilo a un grupo de dispositivos (ej., impresoras).
Mantenibilidad. Apuntando a una hoja de estilo desde los documentos, los responsables de los sitios en la Web pueden simplificar el mantenimiento y conservar un estilo y un efecto consistente a todo lo largo del sitio. Por ejemplo, si el color del fondo de las pginas de una organizacin cambia, slo
Simplicidaun lenguade escribir. Las propiedades CSS se mantienen independientes unas de otras en la medida de lo posible y generalmente slo hay un modo de conseguir un efecto d
para presentar imgeautores phojas de escontenido.
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 JavaScript puede cambiar dinmicamente el valor de la propiedad 'color' de un determinado elemento.
Accesibilidad. Varias caractersticas de CSS harn a la Web ms accesible para los usuarios con discapacidades: Las propiedades para controlar la apariencia de las fuentes permiten a los autores eliminar las inaccesibles imgenes de texto renderizado. Las propiedades de posicionamiento permite a los autores eliminar los artilugios con el sistema de marcas (ej., imgenes invisibles) para forzar la composicin. La semntica de las reglas !important indica que los usuarios con particulares requerimientos de presentacin pueden suplantar las hojas de estilo del autor. El nuevo valor 'inherit' (heredado) para todas las propiedades mejora la generalidad del funcionamiento en cascada y permite una ms fcil y consistente sintona en el estilo. El avanzado soporte de medios, incluyendo grupos de medios y los tipos de medios braille, de relieve y tty permitirn a los usuarios y autores confeccionar pginas para esos dispositivos. Las propiedades auditivas ofrecen control sobre la salida de voz y audio. Los selectores de atributos, la funcin 'attr()' y la propiedad 'content' brindan acceso al contenido alterno. Los contadores y la numeracin de secciones y prrafos pueden mejorar la navegabilidad del documento y economizar espacio de sangrado (importante en los dispositivos braille). Las propiedades 'word-spacing' y 'text-indent' tambin eliminan la necesidad de usar espacios en blanco extras en el documento.
Aqu Mostraremos cun fcil puede ser disear unas simples hojas de estilo. Para esta gua, necesitar saber un poco del cdigo HTML y alguna terminologa bsica de composicin grfica. Comenzamos con un pequeo documento HTML: Ejemplo 28: HTML y CSS
Oscar E Capuay Uceda 92
-
DHTML
>
rCap
L PUBLIC "-//W3C//DTD HTML 4.0//EN">
scarCap
ente HTML y pueden compartirse entre varios documentos. Para vincular
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> HTML>
-
DHTML
ento LINK especifica: lesheet").
uto "href". de hoja de estilo que se vincula: "text/css".
Para mostrar la ntima relacin entre una hoja de estilo y el sistema as, continuamos usando el elemento STYLE en esta
carCap ----
r del D gunda coloca el color del en 'blue'. Co o ningn valor para el color
ento P, ste heredar el color de su elemento padre, es decir, ento H1 tambin es un elemento hijo de BODY pero la
plaza el valor heredado. En CSS existen a menudo tales ntre diferentes valores y esta especificacin describe cmo
erlos. 2 tiene ms de 100 propiedades diferentes, incluyendo 'color'. Veamos
El elemel tipo de vnculo: a una hoja de estilo ("styla ubicacin de la hoja de estilo a travs del atribel tipo
estructurado de marcgua. Agreguemos ms colores: Ejemplo 30: Colores con CSS ---- La Web de Os BODY { color: red } H1 { color: blue }
La Web de OscarCap Esta pgina Web te ensear mucho.
a hoja de estilo contiene ahora dos reglas: la primera establece el coloL
elemento BO Y como 'red' , en tanto la selemento H1 mo no se ha especificade
del elemBODY. El elem
la reemsegunda regnflictos eco
resolvSSC
algunos otros: ---- La Web de OscarCap ----
BODY { font-family: "Gill Sans", sans-serif; font-size: 12pt; margin: 3em; }
Oscar E Capuay Uceda 94
-
DHTML
La Web de OscarCap Esta pgina Web te ensear mucho. Lo primero que se puede observar es que varias declaraciones se agrupan en un bloque encerrado por llaves ({...}) y separado por un punto y coma, no obstante la ltima declaracin tambin debe estar seguida por un punto y coma. La primera declaracin en el elemento BODY establece la familia de fuentes "Gill Sans". Si esa fuente no est disponible, el navegador del usuario usar la familia 'sans-serif' que es una de las cinco familias de fuentes genricas
ue todas las aplicaciones del usuario reconocen. Los elementos hijos de
argen alrededor del elemento BODY es tres veces mayor que el tamao de
de CSS