HTML Dinamico, ASP, JavaScript
HTML Dinamico, ASP, JavaScript
HTML Dinamico, ASP, JavaScript
engtKiiesirfa
>e
Dins
jFp|i
apft •Información proporcionada
•ewiro loas* v^¡£s;gL en el libro:
wíáor.
✓ Fundamentos del lenguaje javaSo^
profesiortaléT-^^''
cptjaeeíiy^ttiBTnárS i vffiáX,'5 1/ Modelo de objetos y eventos en JavaScript
I^ro^am&jótl^ejwginás^^ V ✓ Hojas de estilo CSS
^ Utilización de eventos,
is[nj5.etPtUera5iwdajd;,fluj,.^^^ v' Efectos multimedia
ojryiÁiMvto r- V'Web.dlnárnícarem v' Contenido dinámico
Llí^^MpaJíliacl.SercKiJ^to; ✓ Enlazado de datos
Ihdejj^Bdérrcia-ílef^aVégador y faciljdad--'de?*»;
✓ Ejemplos y utilidades con DHTMl
;s£'<forisr|y^-^;
baci^ndo-nsaiie«pá^na5^áivas eri servidor»..-- Conceptos básicos de Active SetveiPagesCASP)
✓ Cookies ríss^^s
Cqp|!Ífin!Sg*iápífaf-et.3eréod¡£ajé^^^ ^ ✓ Personalización de aplicaciones
Tiétwi^síi,pfQpo.fdpBa,una gran caiítidad do
ejempjps dp»pf3gí1im3ción.convenientemente
^ Acceso a bases de datos remotas. AIX)y ODBC
Acceso a bases de datos a través de SQL
mmi
✓ Ejemplos de ASP en VisualBasicScript
✓ Relación de parámetros OS;
✓ Relación de eventos
^!Í
i' MR
ISBN 970-15-0530-1
I
^.'v-fw-jSc'
78970t'505304
«Él*** TA'
HTML Dinámico,
ASP y JavaScript
a través de ejemplos
Jesús Bobadilla Sancho
Doctor en Informática
Profesor titular en la Escuela Universitaria de Informática de la
Universidad Politécnica de Madrid
[email protected]
Alfaomega
HTML Dinámico, ASP y JavaScript a través de ejemplos
© Jesús Bobadilla Sancho, Alejandro Alcocer Jarabo,
Santiago Alonso Villaverde y Abraham Gutiérrez Rodríguez
ISBN 84-7897-388-5, edición original publicada por RA-MA Editorial,
MADRID,España. Derechos reservados © RA-MA Editorial
MARCAS COMERCIALES: RA-MA ha intentado a lo largo de este libro distinguir
las marcas registradas de los términos descriptivos,siguiendo el estilo de mayúsculas
que utiliza el fabricante, sin intención de infringir la marca y sólo en beneficio del Abraham: "Para todos aquellos sin cuyo
propietario de la misma. inestimable ayuda no hubiera podido
terminar este libro"
Derechos reservados.
Esta obra es propiedad intelectual de su autor y los derechos de publicación en lengua'
española han sido legalmente transferidos al editor. Prohibida su reproducción par
cial o total por cualquier medio sin permiso por escrito del propietario de los dere
chos del copyright.
NOTA IMPORTANTE
La información contenida en esta obra tiene un fin exclusivamente didáctico >. por lo
tanto, no está previsto su aprovechamiento a nivel profesional o industnal. Las indi
caciones técnicas y programas incluidos, han sido elaborados con gran cuidado por
el autor y reproducidos bajo estrictas normas de control. ALFAOMEGA GRUPO
EDITOR,S.A. de C.V. no será jurídicamente responsable por; errores u omisiones;
daños y perjuicios que se pudieran atribuir al uso de la información comprendida en
este libro, ni por la utilización indebida que pudiera dársele.
PRÓLOGO xm
CAPÍTULO 1: FUNDAMENTOS DEL LENGUAJE JAVASCRIPT .... 1
1.1 Introducción i
1.1.1 JavaScript es un lenguaje interpretado 1
1.1.2 Eventos 2
1.1.3 ¿Por qué JavaScript? 2
1.2 Sintaxis básica 3
1.2.1 Tokens 4
1.2.2 Identificadores 4
1.2.3 Palabras Reservadas 5
1.2.4 Literales 6
1.2.5 Variables g
1.2.6 Constantes n
1.2.7 Expresiones H
1.2.8 Comentarios n
1.2.9 Operadores 12
1.2.10 Funciones 12
1.3 Operadores 13
1.3.1 Operadores de asignación 13
1.3.2 Operadores aritméticos 14
1.3.3 Operadores de comparación 16
1.3.4 Operadores de cadena 17
1.3.5 Operadores condicionales 18
1.3.6 Operadores lógicos 18
1.3.7 Operadores de bits 19
1.3.8 El operador typeof 21
1.3.9 Precedencia de operadores 22
1.4 Estructuras de Control 23
1.4.1 Sentencias Condicionales 23
VIH HTML DINÁMICO.ASP Y JAVASCRIPT
CONTENIDO Di
1.4.2 Bucles 26
1.4.3 Sentencia WITH 34 CAPÍTULO 4: UTILIZACIÓN DE LOS EVENTOS MÁS
1.4.4 Sentencia SWTTCH 35 COMUNES 25J
1.5 Funciones yj
1.5.1 Creación de funciones jg 4.1 Introducción
1.5.2 Llamada a las funciones 3g 4.2 Descripción de los eventos más comimes 154
1.5.3 Utilizando Argumentos ^ 4.3 Burbujeo de sucesos j
1.5.4 Utilizando variables locales y globales 43 4.4 Ejemplos de funcionamiento 156
1.5.5 Funciones propias del lenguaje 43
CAPÍTULO 5: EFECTOS.MULTLMEDU
CAPÍTULO 2: MODELO DE OBJETOS Y EVENTOS EN
JAVASCRIPT 5.1 Movimiento
5.1.1 Movimiento horizontal
2.1 El modelo de objetos de JavaScript 40 5.1.2 Movimiento diagonal
2.1.1 Objetos 5.1.3 Movimiento libre 167
2.1.2 El modelo de objetos de JavaScript 5j 5.2 Transiciones ,
2.1.3 Los objetos del Navegador 3j 5.2.1 Fundidos .
2.1.4 Los objetos del Lenguaje g3 5.2.2 Combinación con movimientos 1 ^.
2.2 El modelo de eventos de JavaScript j03 5.3 Dhtml y ActiveX ,
2.2.1 Pulsando un objeto (onClicki 294 5.3.1 Filn-os jyj
2.2.2 Enviando y Limpiando un formulario(onSubmit, onReset) 105 5.3.2 Combinación con movimientos 173
2.2.3 Modificando la información lonChange) IO7 5.3.3 Otros filtros
2.2.4 Recibiendo el foco(onFocusi jQg
2.2.5 Perdiendo el foco lonBluri jjg
2.2.6 Movimientos del ratón. CAPÍTULO 6: EJEMPLOS
2.2.7 Carga y descarga de un documento(onLoad y onUnloadj !..Z 112
l 14
2.2.8 Manejo de errores (onEiror y onAbort) j]g 6.1 Introducción
2.2.9 Selección de un te.xto (onSeíect) I j7 6.2 Ejemplo: botón que se mueve jg^
2.2.10 Manejo del teclado(onKeyDown,onKeyUp y onKeyPress) Z.....ri 17 6.3 Ejemplo: elementos que desaparecen jgy
2.2.11 Manejando la ventana(onMove y onResize) j17 6.4 Ejemplo: cambio de color y fuentes jg^
2.2.12 Produciendo eventos desde el código jj7 6.5 Ejemplo: haciendo uso del burbujeo de sucesos ¡93
6.6 Ejemplo: recorrido genérico de elementos ^93
6.7 Ejemplo: actuando sobre el texto de los elementos jqg
CAPÍTULO 3: HOJAS DE ESTILO CSS II9 6.8 Ejemplo: recepción y pérdida del foco (onFocus, onBlur) 2OO
6.9 Ejemplo: burbujeo de sucesos ; 203
3.1 Infoducción. 6.10 Ejemplo: el objeto Event 205
3.2 Estilos .119 6.11 Ejemplo: onSelect y onChange 208
3.2.1 Importación de Hojas de Estilo 1
.120 6.12 Ejemplo: editor de valores RGB j 209
3.2.2 Propiedades " .....i-j 6.13 Ejemplo: cambio dé posición en los elementos 211
3.2.3 Estilos mediante claZs IZ."" íoo 6.14 Ejemplo: vocales rebotando 214
3.2.4 Identificadores 6.15 Ejemplo:juego de frontón 217
3.2.5 Jerarquía de estilos 6.16 Ejemplo: batalla 1 Z'.Z. 222
3.2.6 aases Falsas ZZZZ. d.l7 Ejemplo: batalla 2 226
3.3 Estilos dinámicos... 6.18 Ejemplo: listas desplegables en varios niveles '231
3.3.1 Elementos visibles y DoZübles 6.19 Ejemplo: maldito botón 235
3.3.2 Capas 6.20 Ejemplo: listas colapsables I - ' 237
6.21 Ejemplo: listas colapsables ü ~240
6.22 Ejemplo: personalización de un f(»inulario "243
X HTML DINÁMICO.ASP Y JAVASCRIPT
CONTENIDO XI
CAPÍTULO 7: CONTENIDO DINÁMICO 247 10.1.5 Ejemplo 14:.\genda de direcciones Web 321
10.2 El objeto integrado Session 325
7.1 Características del Texto 247 10.2.1 Sucesos del objeto Session 327.
7.1.1 Sustitución de texto 250 10.3 El objeto integrado Application 327
7.1.2 Ejemplo con un formulario 251 10.4 Objetos integrados, sumario 329
7.2 Otros métodos 253
7.2.1 Contando palabras 256
7.2.2 Buscando palabras 257 CAPÍTULO 11: ACCESO A BASES DE DATOS 337
7.3 Otras propiedades 260
11.1 Introducción.,
,337
11.2 Creación de bases de datos en Microsoft .Access 337
CAPÍTULO 8: ENLAZADO DE DATOS ... 263 11.3 Objetos ADO 343
11.4 Acceso sencillo a los datos. El objeto Connection 345
8.1 Vinculación de datos 263 11.5 Insertar datos en una tabla 35j
8.2 Productores de datos 264 11.6 Borrado de datos 353
8.3 Consumidores de datos 267 11.7 Modificación de un registro 355
8.3.1 Tablas ref)etidas 267 11.8 Filtrado de un registro 350
8.3.2 Paginación de tablas 269 11.9 División de una tabla en páginas .! 359
8.3.3 Consumidores de registro único 271 11.10 Un ejemplo avanzado 353
8.3.4 Buscando datos 275 11.10.1 Módulo principa]
8.3.5 Ordenación de datos 277 11.10.2 Módulo para visualizar los datos de una tabla 365
11.10.3 Módulo para incluir un nuevo registro en la tabla 371
11.10.4 Módulo para borrar un registro de la tabla 373
CAPÍTULO 9: PRIMEROS PASOS CON ACTIVE SERVUR 11.10.5 Módulo para modificar un registro de la tabla 376
paces 283 11.11 Modalidades del objeto RecordSet 38Q
11.12 Métodos y propiedades para movemos en un RecordSet 382
9.1 Funcionamiento de ASP 283
9.2 Ejemplos sencillos de páginas activas 286
9.2.1 Ejemplo 1; ASP soporta HTML 286 CAPÍTULO 12: EMPLE.ANDO LA POTENCL\ DE SQL 387
9.2.2 Ejemplo 2; Primera instrucción ejecutable 287
9.2.3 Ejemplo 3: Suma de los 100 primeros números 288 12.1 El objeto Command 337'
9.2.4 Ejemplo 4:"Hola a todos" en un bucle 290 12.1.1 Primeras selecciones con el objeto Command 387
9.2.5 Ejemplo 5; Fecha y hora del servidor 292 12.1.2 Resultados sobre un RecordSet preexistente 39[
9.2.6 Ejemplo 6: Script sin tíxto HTML 293 12.2 Tutorial de SQL básico 393
9.2.7 Ejemplo 7: Tabla de multiplicar 294 12.2.1 Introducción 393
9.3 Utilización de'objetos integrados 296 12.2.2 Consultas a bases de datos 393
9.4 Obtención de la inforpiación enviada en los formularios 298 12.2.3 Selecciones sobre varias tablas 405
9.4.1 Ejemplo 8: Formulario con dos páginas Web 301 12.2.4 Funciones para operar con campos 422
9.4.2 Ejemplo 9: Formulario con una sola página Web 303 12.2.5 Otras cláusulas de Select 424
PROLOGO
Introducción
¿Qué se puede hacer con HTML Dinámico? ¿Qué se puede hacer con Active Server Pages?
HTML Dinámico, ante todo, permite modificar el aspecto o contenido de La tecnología ASP ha sido diseñada por Microsoft para facilitar la creación
una página Web sin necesidad de cargar una nueva. Hasta ahora, haciendo uso de de sitios web con una sencillez mayor que la empleada en la programación CGI y
HTML, Scripts, CGTs o ASP, el dinamismo se basaba en recoger información de con una eficiencia igual a la que projxirciona ISAPI(el núcleo de funcionamiento de
fonnularios y responder con ventanas de aviso, con pequeños cambios en el estado ASP es una aplicación ISAPI).
de los elementos de un formulario, cargando una nueva página, etc.
En ASP,todas las páginas web pueden ser diseñadas con editores de HTML,
HTML Dinámico permite, por ejemplo, variar el color de fondo de una puesto que las mstrucciones ejecutables y el código HTML están suficientemente
página, aumentar el tamaño de un texto, variar el color de un botón, hacer aparecer delimitados. Así mismo, pueden utilizarse diversos lenguajes para la programación
una lista desplegable, mover una figura, etc. Todo ello sin necesidad de cargar una del funcionamiento de las páginas activas. Entre estos lenguajes se encuentran
página nueva. Estos cambios se harán de forma dinámica, atendiendo a las VisualBasicScript y JavaScript.
interacciones provenientes del usuario. Los navegadores son los encargados de
visualizar los cambios de forma autónoma en el equipo del cliente. Los desarrollos realizados con ASP no necesitan compilaciones que retarden
el proceso de producción, y los errores de programación no provocan la caída del
La existencia y funcionamiento de HTML Dinámico se basa en: servidor de Web como es habitual en la programación ISAPI.
La reciente creación de una nueva versión de HTML que incorpora las
caracten'sticas de dinamismo(CSS, modelo de objetos, etc.). Desde ASP se pueden realizar accesos a componentes ActiveX que se
^ El desarrollo de versiones de navegadores comerciales que interpretan las ejecutan en el servidor. 1^ esta manera, por.ejemplo, se hace un uso muy simple de
características y propiedades dinámicas de HTML. ODBC para el acceso a distintos tipos de bases de datos sin necesidad de utilizar
Es importante resaltar que, pese a los esfuerzos de estandarización del W3C
(World Wide Web Consonium), buena parte de las posibilidades que nos brinda ASP permite compatibilizar la creación de páginas web activas en el cliente
HTML Dinámico son dependientes de cada fabricante de navegadores, lo que y en el servidor, pudiéndose así balancear la carga de proceso y de comunicaciones
dificulta la utilización extensiva de esta tecnología. según los deseos del diseñador. También resulta posible utilizar diversos tipos de
lenguaje de programación de scripts en una misma página; aunque esta práctica no
Una característica importante de HTML dinámico es la utilización que se resulta recomendable, en algunas ocasiones puede resultar beneficiosa.
puede hacer de CSS (Cacade Style Sheet) para definir estilos comunes en las
diferentes páginas de una aplicación Web, así como modificar de forma dinámica Las páginas activas en el serv idor presentan las siguientes ventajas:
estos estilos. También se fuerza a separar ei contenido o información con la
S on muy fáciles de utilizar
estructura de presentación.
Funcionan adecuadamente en todos los navegadores (E xplorer, Netscape
etc.)
Gracias a la redefmición del modelo de objetos de HTML dinámico es Proporcionan un acceso muy simple a Bases de Datos (Oracle, S QL S erver,
posible acceder de forma directa y dinámica a los estilos e incluso los contenidos de
todos los objetos de un-documento. De esta forma se pueden modificar propiedades Access, etc.)
de estilo como por ejemplo el color de un botón o bien contenidos, como por S u ejecución es muy eficiente (lo que permite utilizar servidores
ejemplo el texto de un párrafo. económicos)
□ S implifican el desarrollo y mantenimiento de las aplicaciones Web
Utilizando Microsoft Explorer 5.0 se puede hacer uso de controles
□ Permiten la utilización e integración de productos y tecnologías de
integrados en el navegador que posibilitan efectos de animación de transiciones Microsoft tales como InterDev, FrontPage, ADO, etc.
entre páginas y filtros digitales para variar el aspecto de los gráficos. También se AS P se encuentra integrado en el soporte estándar de comunicaciones de
incorporan objetos que gestionan el acceso a datos tabulares y bases de datos Windows NT: Internet Information S erver (US )
situadas en el servidor.
XVI HTML DINÁMICO.ASP Y JAVASCRIPT
& R.A-MA
PRÓLOGO KVn
Contenido del libro página Web. Esta posibilidad proporciona una gran potencia a los desanoDos
software que hacen uso de ella.
Esta publicación consta de 12 capítulos y una serie de apéndices. Toda la
información proporcionada se puede dividir en 4 grupos; El capítulo 8, el último de los dedicados a DHTML, incluye ejemplos de
• Capítulos 1 y 2 de JavaScript acceso a bases de datos mediante enlazado de datos.
• Capítulos 3 al 8 de HTML Dinámico
• Capítulos 9 al 12 de Active Server Pages El capímlo 9 explica los conceptos básicos del funcionamiento de .^P
• Apéndices mediante numerosos ejemplos comentados y diversos gráficos explicativos.
El capítulo 1 muestra los conceptos básicos de programación usando el En el capítulo 10 se profundiza en la creación de páginas Web activas en el
enguaje de guiones JavaScript. Este capítulo puede ser empleado para aprender a servidor, proporcionándose ejemplos de programación con "cookies" y objetos
programar con el lenguaje o como guía de referencia para aquellos lectores integrados que permiten personalizar las aplicaciones, realizar "cestas de la
familiarizados con su sintaxis. compra", comercio electrónico, etc.
El capítulo 2 cubre el modelo de objetos y eventos de JavaScript. Los El capítulo 11 muestra el sencillo y potente mecanismo que proporciona
lectores que sepan programar en lenguajes tradicionales como PASCAL o C, ASP para acceder a bases de datos. Se explica la utilización del objeto integrado
encontrarán novedosa esta filosofía de programación basada en objetos y eventos. ADO (ActiveX Data Objects) y se incluyen diversos ejemplos sencillos que a modo
Quienes tengan costumbre de utilizar lenguajes orientados a objetos con entornos de plantillas nos permiten realizar altas, bajas, modificaciones, filtrados, etc. en los
visuales, comprobarán que JavaScript es útil y sencillo, aunque no tan potente como registros de una tabla.
otros lenguajes.
Finalmente, en el capítulo 12 se muestra la forma de acmar sobre bases de
El capítulo 3 es el primero de los que explican HT.ML Dinámico. Se centra datos haciendo uso del lenguaje SQL; también se proporcionan nuevos ejemplos y
en los conceptos y utilización de las hojas de estilo CSS. que es pane de la "columna una referencia básica de programación con SQL.
vertebral" sobre la que se asienta DHTML.
El apéndice C incluye todos los programas de los capítulos 9, 10, 11 y 12
En el capítulo 4 se muestran, mediante ejemplos basados en DHTML, los (Active Server Pages) codificados en el lenguaje VisualBa.sicScript. Este lenguaje es
eventos más comunes utilizados en JavaScript. También se e.xplica su base el utilizado habitualmente para programar páginas ASP. También se proporcionan
conceptual, su funcionamiento y la característica denominada "burbujeo de apéndices que muestran todos los atributos CSS y los eventos que soporta el
sucesos", que nos pennite programaciones elegantes y eficientes de respuesut a los navegador Microsoft Explorer 5.0.
eventos. ^
CAPITULO 1
JAVASCRIPT
1.1 INTRODUCCIÓN
Las respuestas a las acciones de los usuarios pueden ser invocadas sin
necesidad de realizar transmisiones por la red. Ésta es la mayor ventaja de
JavaScript respecto a otras soluciones como ASP (Active Server Pages) o CGI
(Common Gateway Interface): las interacciones del usuario al ser procesadas en el
computador del propio usuario evitan la sobrecarga de tráfico en Internet. Con ASP
o CGI's, las interacciones con el usuario deben ser procesadas en el equipo servidor
y, por tanto, transmitidas por la red.