Fundamentos de Programación Web

Fundamentos de Programaci´ on Web Html, JavaScript y VBScript

Juli´ an Esteban Guti´ errez Posada Carlos Eduardo G´ omez Montoya Leonardo Alonso Hern´ andez Rodr´ıguez Profesores adscritos al Programa de Ingenier´ıa de Sistemas y Computaci´ on Facultad de Ingenier´ıa Universidad del Quind´ıo

ii

Fundamentos de Programaci´ on Web Html, JavaScript y VBScript No est´a permitida la reproducci´on total o parcial de esta obra, ni su tratamiento o transmisi´on por cualquier m´etodo sin autorizaci´on escrita del editor.

Derechos reservados c Junio de 2004 ° ISBN: 958 - 33 - 6276 - X Este libro fue editado usando LATEX 2ε Conceptos Gr´aficos Ltda Calle 19 13-30 Tel´efono: (6) 741 07 91 - 741 14 02 Armenia, Quind´ıo Armenia, Quind´ıo - Colombia

Presentaci´on Por todos es conocido el incremento del uso de Internet a nivel mundial con m´ ultiples prop´ositos. Esta situaci´on ha motivado una tendencia hacia la utilizaci´on de programas que funcionen en la red. Por lo tanto, se hace necesario que m´as personas comprendan el funcionamiento de Internet y est´en capacitadas para la creaci´on de p´aginas Web. Este libro hace un aporte en estos dos importantes aspectos.

Por otra parte, el libro hace una introducci´on al desarrollo de aplicaciones Web, escritas en los lenguajes HTML, JavaScript y VBScript. Estos lenguajes son ampliamente utilizados hoy en d´ıa y, adem´as, son compatibles con la mayor´ıa de los navegadores de Internet actuales.

¿C´ omo est´ a organizado el libro?

En la parte I se tratan conceptos generales de Internet, as´ı como los principales servicios que se pueden obtener en la red.

La parte II, es un recorrido por el lenguaje HTML, desde lo b´asico hasta los elementos que le permiten construir p´aginas Web con formularios, estilos, capas, frames y contenido hipermedial.

Las partes III y IV muestran la forma de procesar los datos de un formulario HTML haciendo programas en JavaScript y en VBScript. Cada programa escrito en JavaScript tiene su equivalente en VBScript, para facilitar en gran medida, el proceso de aprendizaje.

A lo largo de los diferentes cap´ıtulos se incluyen cerca de 50 preguntas de autoevaluaci´on y en la parte V, se presentan 80 problemas para poner a prueba los conocimientos adquiridos.

iv

´ PRESENTACION

¿A qui´ en va dirigido este libro?

Fundamentos de programaci´ on Web est´a dirigido a dos clases de p´ ublico: Las dos primeras partes pueden ser estudiadas por cualquier persona, porque Internet y las p´aginas Web son temas de inter´es para todos.

Las otras tres partes son de inter´es para personas que tengan cierto conocimiento sobre programaci´on de computadoras y deseen aprender los lenguajes JavaScript y VBScript.

¿Porqu´ e este libro, si hay tutoriales gratuitos en Internet?

El libro no se limita a la explicaci´on de ejemplos cortos y sencillos. Trata de ejemplos medianamente complejos, con miras a ser la base de aplicaciones reales que funcionen sobre Internet.

Por otra parte, el lector puede estudiar JavaScript y VBScript de forma independiente o, si lo prefiere, puede aprender a partir de la comparaci´on entre ellos. Esto es posible, gracias al esfuerzo que se hizo al resolver de forma similar los mismos problemas en ambos lenguajes.

El libro incluye funciones que se reutilizan en varios ejemplos. Las funciones mencionadas podr´an ser de gran utilidad en proyectos propios del lector, reduciendo el tiempo de desarrollo de sus aplicaciones Web.

Comentarios generales Es de aclarar que en los ejemplos que usan formularios, ´estos se encuentran completamente diligenciados con el fin de que el lector pueda tener una idea clara de los datos de prueba de cada programa.

Por otra parte, se han incluido numerosas figuras que hacen posible leer este libro aunque no se disponga de una computadora.

Finalmente, para facilitar la comprensi´on de los programas, se han utilizado nombres significativos y no abreviados, y los programas se han dividido en varias partes. Cada una de estas partes viene acompa˜ nada de su respectiva explicaci´on.

v

Acerca de los autores Juli´ an Esteban Guti´ errez Posada. Ingeniero de Sistemas de la Universidad del Valle y Especialista en Inform´atica Educativa de la Universidad Cooperativa de Colombia. Profesor de tiempo completo de la Universidad del Quind´ıo adscrito al programa Ingenier´ıa de Sistemas y Computaci´on. Autor de diferentes obras en el ´area de la Ingenier´ıa de Sistemas e inform´atica. jugutier@uniquindio.edu.co Carlos Eduardo G´ omez Montoya. Licenciado en Matem´aticas y Computaci´on de la Universidad del Quind´ıo y Especialista en Redes de Comunicaci´on de la Universidad del Valle. Profesor de tiempo completo de la Universidad del Quind´ıo adscrito al programa Ingenier´ıa de Sistemas y Computaci´on. Autor de diferentes obras en el ´area de la Ingenier´ıa de Sistemas e inform´atica. carloseg@uniquindio.edu.co Leonardo Alonso Hern´ andez Rodr´ıguez. Licenciado en Matem´aticas de la Universidad del Quind´ıo y Magister en Ciencias Financieras y de Sistemas del Convenio Universidad Central - Universidad del Quind´ıo.

Profesor de tiempo completo de la Universidad del Quind´ıo adscrito al programa Ingenier´ıa de Sistemas y Computaci´on. leonardohernandez@uniquindio.edu.co

vi

´ PRESENTACION

Contenido

Presentaci´ on

I

III

Generalidades acerca de Internet

1. Internet

1 3

1.1. Conceptos generales . . . . . . . . . . . . . . . . . . . . . . . .

3

1.2. Caracter´ısticas

. . . . . . . . . . . . . . . . . . . . . . . . . .

4

1.3. Aplicaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6

1.4. Autoevaluaci´on . . . . . . . . . . . . . . . . . . . . . . . . . . 11 2. Protocolos y Servicios

13

2.1. TCP/IP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 2.2. Programaci´on Cliente/Servidor . . . . . . . . . . . . . . . . . 14 2.2.1. Caracter´ısticas de un programa cliente . . . . . . . . . 15 2.2.2. Caracter´ısticas de un programa servidor . . . . . . . . 15 2.2.3. Hardware y software servidor . . . . . . . . . . . . . . 16 2.2.4. Varios servidores en una computadora . . . . . . . . . 16 2.3. Servicios de Internet . . . . . . . . . . . . . . . . . . . . . . . 16 2.3.1. DNS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 2.3.2. HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 2.3.3. FTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 2.3.4. SMTP/POP3 . . . . . . . . . . . . . . . . . . . . . . . 20 vii

viii

CONTENIDO

2.4. P´aginas Web . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 2.4.1. C´omo escribir p´aginas web . . . . . . . . . . . . . . . . 21 2.4.2. C´omo visualizar p´aginas web . . . . . . . . . . . . . . . 22 2.4.3. Tipos de p´aginas web . . . . . . . . . . . . . . . . . . . 22 2.4.4. C´omo publicar p´aginas web . . . . . . . . . . . . . . . 23 2.5. Autoevaluaci´on . . . . . . . . . . . . . . . . . . . . . . . . . . 24

II

HTML

25

3. HTML B´ asico

27

3.1. Estructura de un documento . . . . . . . . . . . . . . . . . . . 28 3.2. Comentarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 3.3. Formato . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 3.3.1. Espacios y saltos de l´ınea . . . . . . . . . . . . . . . . . 30 3.3.2. Caracteres especiales . . . . . . . . . . . . . . . . . . . 31 3.3.3. Formato de texto . . . . . . . . . . . . . . . . . . . . . 32 3.3.4. Fondos y colores . . . . . . . . . . . . . . . . . . . . . 38 3.4. Listas y enumeraciones . . . . . . . . . . . . . . . . . . . . . . 40 3.5. Tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 3.6. Autoevaluaci´on . . . . . . . . . . . . . . . . . . . . . . . . . . 47 4. Hipermedia

51

4.1. Im´agenes con < img > . . . . . . . . . . . . . . . . . . . . . . 51 4.2. Videos con < img > . . . . . . . . . . . . . . . . . . . . . . . 54 4.3. Pluggins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 4.4. Sonidos con < bgsound > . . . . . . . . . . . . . . . . . . . . 57 4.5. Enlaces

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

4.6. Mapas sensitivos . . . . . . . . . . . . . . . . . . . . . . . . . 63 4.7. Autoevaluaci´on . . . . . . . . . . . . . . . . . . . . . . . . . . 66

CONTENIDO

ix

5. Frames, estilos y capas

69

5.1. Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 5.2. Etiqueta < style > . . . . . . . . . . . . . . . . . . . . . . . . 72 5.3. Capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 5.3.1. Ejemplo . . . . . . . . . . . . . . . . . . . . . . . . . . 80 5.4. Autoevaluaci´on . . . . . . . . . . . . . . . . . . . . . . . . . . 81 6. Formularios

85

6.1. Etiqueta < input > . . . . . . . . . . . . . . . . . . . . . . . . 85 6.2. Ejemplo de una p´agina web con eventos

. . . . . . . . . . . . 91

6.3. Etiqueta < select > . . . . . . . . . . . . . . . . . . . . . . . . 96 6.4. Otros atributos de la etiqueta < select > . . . . . . . . . . . . 97 6.5. Etiqueta < textarea > . . . . . . . . . . . . . . . . . . . . . . 98 6.6. Agrupaci´on de elementos . . . . . . . . . . . . . . . . . . . . . 98 6.6.1. Etiqueta < f ieldset > . . . . . . . . . . . . . . . . . . 98 6.6.2. Etiqueta < legend > . . . . . . . . . . . . . . . . . . . 99 6.6.3. Etiqueta < label > . . . . . . . . . . . . . . . . . . . . 99 6.7. Ejemplo de un formulario . . . . . . . . . . . . . . . . . . . . 99 6.8. Autoevaluaci´on . . . . . . . . . . . . . . . . . . . . . . . . . . 104

III

JavaScript

7. Visi´ on general 7.1. Caracter´ısticas

105 107 . . . . . . . . . . . . . . . . . . . . . . . . . . 108

7.2. Comunicaci´on con el usuario . . . . . . . . . . . . . . . . . . . 108 7.2.1. Entrada de datos . . . . . . . . . . . . . . . . . . . . . 108 7.2.2. Salida por pantalla . . . . . . . . . . . . . . . . . . . . 109 7.3. Integrando JavaScript y HTML . . . . . . . . . . . . . . . . . 113 7.4. Versiones y compatibilidad . . . . . . . . . . . . . . . . . . . . 113

x

CONTENIDO 7.5. Sintaxis del lenguaje . . . . . . . . . . . . . . . . . . . . . . . 115 7.5.1. Comentarios . . . . . . . . . . . . . . . . . . . . . . . . 115 7.5.2. Tipos de datos . . . . . . . . . . . . . . . . . . . . . . 115 7.5.3. Declaraci´on de variables . . . . . . . . . . . . . . . . . 115 7.5.4. Operadores aritm´eticos . . . . . . . . . . . . . . . . . . 119 7.5.5. Operadores relacionales . . . . . . . . . . . . . . . . . . 120 7.5.6. Operadores l´ogicos . . . . . . . . . . . . . . . . . . . . 120 7.5.7. Operadores de asignaci´on

. . . . . . . . . . . . . . . . 121

7.5.8. Operadores sobre objetos . . . . . . . . . . . . . . . . . 121 7.6. Funciones y Constantes . . . . . . . . . . . . . . . . . . . . . . 121 7.6.1. Funciones definidas por el usuario . . . . . . . . . . . . 124 8. Ejemplos de JavaScript

125

8.1. Formulario de interacci´on con JavaScript . . . . . . . . . . . . 126 8.2. El mayor de seis n´ umeros . . . . . . . . . . . . . . . . . . . . . 139 8.3. Reloj de arena . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 8.4. Costo del uso de un gimnasio . . . . . . . . . . . . . . . . . . 152 8.5. B´ usqueda en un vector . . . . . . . . . . . . . . . . . . . . . . 164

IV

VBScript

177

9. Visi´ on general

179

9.1. Caracter´ısticas

. . . . . . . . . . . . . . . . . . . . . . . . . . 179

9.2. Comunicaci´on con el usuario . . . . . . . . . . . . . . . . . . . 180 9.2.1. Entrada de datos . . . . . . . . . . . . . . . . . . . . . 180 9.2.2. Salida por pantalla . . . . . . . . . . . . . . . . . . . . 181 9.3. Integrando VBScript y HTML . . . . . . . . . . . . . . . . . . 185 9.4. Versiones y compatibilidad . . . . . . . . . . . . . . . . . . . . 186 9.5. Sintaxis del lenguaje . . . . . . . . . . . . . . . . . . . . . . . 187

CONTENIDO

xi

9.5.1. Comentarios . . . . . . . . . . . . . . . . . . . . . . . . 187 9.5.2. Tipos de datos . . . . . . . . . . . . . . . . . . . . . . 188 9.5.3. Declaraci´on de variables . . . . . . . . . . . . . . . . . 188 9.5.4. Operadores aritm´eticos . . . . . . . . . . . . . . . . . . 191 9.5.5. Operadores relacionales . . . . . . . . . . . . . . . . . . 191 9.5.6. Operadores l´ogicos . . . . . . . . . . . . . . . . . . . . 192 9.5.7. Otros operadores . . . . . . . . . . . . . . . . . . . . . 192 9.6. Funciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 9.6.1. Funciones definidas por el usuario . . . . . . . . . . . . 195 10.Ejemplos de VBScript

197

10.1. Formulario de interacci´on con VBScript . . . . . . . . . . . . . 198 10.2. El mayor de seis n´ umeros . . . . . . . . . . . . . . . . . . . . . 208 10.3. Reloj de arena . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 10.4. Costo del uso de un gimnasio . . . . . . . . . . . . . . . . . . 221 10.5. B´ usqueda en un vector . . . . . . . . . . . . . . . . . . . . . . 232

V

Problemas

11.Problemas propuestos

243 245

11.1. Programaci´on secuencial . . . . . . . . . . . . . . . . . . . . . 245 11.2. Decisiones simples . . . . . . . . . . . . . . . . . . . . . . . . . 247 11.3. Decisiones anidadas . . . . . . . . . . . . . . . . . . . . . . . . 249 11.4. Decisiones m´ ultiples

. . . . . . . . . . . . . . . . . . . . . . . 253

11.5. Ciclos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259 11.6. Vectores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263 11.7. Matrices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265

Bibliograf´ıa

267

xii

CONTENIDO

Parte I Generalidades acerca de Internet

1

“Si tuviese ocho horas para talar un ´arbol, gastar´ıa seis afilando el hacha”.

Abraham Lincoln

1

Internet Internet es una red de computadoras de alcance mundial conformada por una gran cantidad de redes peque˜ nas y computadoras individuales, las cuales se conectan para intercambiar informaci´on. Frecuentemente se le denomina La Gran Telara˜ na de Informaci´on, World Wide Web (WWW), o simplemente la Web.

1.1.

Conceptos generales

P´ agina Web: La informaci´on en Internet es presentada principalmente a trav´es de p´aginas web. Estas p´aginas se escriben en lenguaje HTML1 y pueden incluir textos, fotos, sonidos, videos y aplicaciones. Mediante hiperv´ınculos o enlaces se puede pasar de una p´agina a otra, permitiendo navegar por la informaci´on. Todo esto es posible gracias al protocolo HTTP2 .

1 2

HTML: HyperText Markup Language HTTP: HyperText Transfer Protocol

CAP´ITULO 1. INTERNET

4

Sitio Web: Es un conjunto de p´aginas web interconectadas mediante enlaces de hipertexto3 o hipermedia4 de manera que cada p´agina se encuentre asociada con las dem´as. A la p´agina principal de un sitio se le denomina “p´agina de entrada” o “p´agina de inicio”. Ver figura 1.1.

Figura 1.1: http://www.yahoo.com

Navegar: Los usuarios de Internet tienen la posibilidad de “navegar” por medio de enlaces que permiten saltar de un documento a otro sin importar su ubicaci´on, proporcionando un universo de posibilidades. Estos enlaces son los que hacen que el t´ermino telara˜ na (Web) tenga un significado especial para Internet. Ver figura 1.2.

Figura 1.2: Navegar por Internet

1.2.

Caracter´ısticas

Dinamismo: Internet cambia permanentemente. Cada instante nuevas computadoras se unen y otras dejan de pertenecer a la red.

3 4

Hipertexto: Documento de texto que contiene enlaces a otros documentos.

Hipermedia: Documento multimedia que contiene enlaces a otros documentos.

1.2. CARACTER´ISTICAS

5

Crecimiento: Cada d´ıa a Internet se unen gran cantidad de nuevos usuarios.

Cobertura: Gracias a los avances en la tecnolog´ıa, y al aumento de la demanda de servicios de Internet, permanentemente se crean nuevos medios de comunicaci´on m´as poderosos (r´apidos, confiables y seguros). Por ejemplo, las tecnolog´ıas inal´ambricas (wireless) y las de fibra ´optica, hacen que la cobertura de Internet aumente, sin perder la compatibilidad con los medios existentes.

Ubicaci´ on: La ubicaci´on de Internet es dif´ıcil de precisar dada su condici´on de red mundial y su continua evoluci´on.

Disponibilidad: Cierta informaci´on se encuentra duplicada en varias computadoras conectadas a Internet, lo que aumenta su disponibilidad.

Permanencia: Internet funciona todo el tiempo. Aunque algunas computadoras se desconecten de la red, la red nunca se interrumpe.

Aldea global: Debido a la conexi´on existente entre tantas computadoras se puede lograr que la distancia no tenga importancia, es decir, dos computadoras conectadas a la red a miles de kil´ometros de distancia pueden compartir informaci´on de manera similar que si estuvieran una al lado de otra. De esta manera, se pierde la noci´on de ubicaci´on geogr´afica.

Autoridad: Internet no tiene un control estricto de la informaci´on que maneja. Esto debido, entre otras razones, a la evoluci´on permanente de la red y a la falta de legislaci´on adecuada en los diferentes pa´ıses. Es muy f´acil cambiar de sitio la informaci´on de un pa´ıs a otro con leyes m´as flexibles.

Variedad: En Internet se puede encontrar una gran variedad de informaci´on sobre diversos temas, tratados por una gran cantidad de personas, desde diferentes puntos de vista y con diferentes grados de profundidad. Esta informaci´on puede contener texto, gr´aficos, sonidos, videos y otros.

Confiabilidad: La informaci´on disponible en Internet no es 100% confiable debido a la falta de control y a la facilidad que tienen los usuarios para poner informaci´on a disposici´on de todos los navegantes de la red.

CAP´ITULO 1. INTERNET

6

Seguridad: Existe informaci´on confidencial que viaja por la red, la cual es propensa a peligros tales como p´erdida, acceso no autorizado o modificaci´on de informaci´on por terceros. Estos peligros fomentan el desarrollo de sistemas de seguridad.

1.3.

Aplicaciones

Con el aumento de la demanda de servicios de Internet y el aumento en la cobertura, es natural que d´ıa a d´ıa aparezcan nuevas aplicaciones. Entre las m´as importantes tenemos: B´ usqueda: Debido a la complejidad de la web, existen sitios en Internet que ayudan a ubicar p´aginas web que contengan ciertas palabras claves.

Los usuarios pueden utilizarlas con fines acad´emicos, comerciales, de entretenimiento, entre otros. Ver figura 1.3.

Figura 1.3: http://www.google.com

Correo electr´ onico: Una de las m´as populares aplicaciones de Internet es el correo electr´onico o e-mail. Esta tecnolog´ıa permite el intercambio de mensajes de texto entre usuarios distribuidos en todo el mundo, de manera similar al correo tradicional, pero con las ventajas que ofrece Internet, entre las que se destacan la velocidad (muy r´apido), la cobertura (cada d´ıa mayor) y el costo (muy barato). Ver figura 1.4.

1.3. APLICACIONES

7

Figura 1.4: http://mail.yahoo.com

Mensajer´ıa instant´ anea: La mensajer´ıa instant´anea es similar al uso del tel´efono. Los interlocutores deben estar conectados a la red al mismo tiempo. Estas aplicaciones permiten el intercambio de mensajes de voz y de texto. Ver figura 1.5.

Figura 1.5: http://messenger.yahoo.com

Intercambio de informaci´ on: Dos o m´as usuarios de la red se pueden enviar archivos utilizando Internet como medio de transmisi´on, sin importar la distancia que los separe. Ver figura 1.6.

Figura 1.6: http://www.audiogalaxy.com

Medio de difusi´ on: Internet es aprovechada por muchas empresas para hacer publicidad a su negocio. Adem´as, medios de comunicaci´on tradicionales como peri´odicos y revistas o canales de televisi´on ofrecen informaci´on actualizada a trav´es de su sitio oficial en Internet, lo cual aumenta su cobertura y mejora su imagen corporativa ante los clientes.

Ver figura 1.7.

CAP´ITULO 1. INTERNET

8

Figura 1.7: http://cnn.com

Soporte permanente: Empresas comerciales prestan servicio de soporte a los clientes a trav´es de conversaci´on en l´ınea (chat) con los asesores.

Adem´as, compa˜ n´ıas del sector inform´atico permiten obtener controladores (drivers)5 , informaci´on importante que no fue tenida en cuenta en los manuales, actualizaci´on de ayudas o nuevos productos con versiones de demostraci´on. Ver figura 1.8.

Figura 1.8: http://www.sun.com

Comercio electr´ onico: Una de las aplicaciones de mayor crecimiento y expectativa entre los usuarios es el comercio electr´onico, el cual se puede facilitar porque evita grandes desplazamientos hacia los almacenes y p´erdida de tiempo para la adquisici´on de productos y servicios, a trav´es de suscursales virtuales. El comercio electr´onico se encuentra limitado por el desarrollo de sistemas de seguridad que aumenten la confiabilidad. Ver figura 1.9.

Figura 1.9: http://www.amazon.com

5

Driver: programa que permite poner en funcionamiento un dispositivo

1.3. APLICACIONES

9

Teletrabajo: Cada d´ıa aumenta el n´ umero de personas que pueden trabajar en su residencia, aumentando el desempe˜ no y disminuyendo costos. Ver figura 1.10.

Figura 1.10: http://www.imefez.org/reportajes/freelance/1.html

Videoconferencia: Con el fin de evitar desplazamientos se pueden lograr reuniones familiares, de trabajo o de estudio, a trav´es de Internet. Ver figura 1.11.

Figura 1.11: http://www.microsoft.com/windows/netmeeting/

Entretenimiento: Muchas personas buscan en Internet la forma de pasar el tiempo. Por ejemplo jugando en un casino virtual. Ver figura 1.12.

Figura 1.12: http://www.casinoonnet.com

Foros de discusi´ on: Usuarios ubicados en diferentes lugares comparten informaci´on sobre un tema en particular, como por ejemplo el lenguaje de programaci´on Java de Sun Microsystems. Los usuarios se reunen de

10

CAP´ITULO 1. INTERNET manera virtual en un sitio para hacer comentarios, los cuales se distribuyen a los dem´as usuarios. Algunos foros funcionan adecuadamente sin que los usuarios est´en conectados a la red al mismo tiempo. Ver figura 1.13.

Figura 1.13: http://www.java.sun.com

Educaci´ on virtual: Esta modalidad de educaci´on tiene importantes ventajas. Entre ellas, se requiere menor espacio f´ısico para aulas y no es necesario que el estudiante se desplace f´ısicamente a la instituci´on. Como consecuencia, se aumenta la cobertura y se disminuyen algunos costos.

Ver figura 1.14.

Figura 1.14: http://cisco.netacad.net

Viaje virtual: Es la posibilidad de conocer sitios tur´ısticos ubicados en diferentes lugares del mundo, a trav´es de la red. Esto ser´ıa imposible de hacer f´ısicamente, por el manejo del tiempo y los costos. Por ejemplo ir a la Estatua de la Libertad en Estados Unidos y un momento despu´es estar en frente a la Torre Eiffel en Par´ıs. El viaje virtual se puede realizar gracias a la ubicaci´on de c´amaras en lugares estrat´egicos. Generalmente el video es de baja resoluci´on para que se pueda transmitir con mayor velocidad. Ver figura 1.15.

´ 1.4. AUTOEVALUACION

11

Figura 1.15: http://www.earthcam.com

Procesamiento distribuido: Algunas organizaciones utilizan el poder de c´omputo que puede lograrse haciendo que miles o millones de computadoras conectadas a Internet trabajen por un objetivo com´ un, en momentos “ociosos”. Por ejemplo la b´ usqueda de la cura del c´ancer o el procesamiento de las se˜ nales de los radiotelescopios para buscar inteligencia extraterrestre. Ver figura 1.16.

Figura 1.16: http://www.chem.ox.ac.uk/curecancer.html

1.4.

Autoevaluaci´ on

1. ¿Qu´e es Internet?

2. ¿Cu´al es el significado de WWW? 3. ¿Cu´al es la relaci´on entre p´agina web y sitio web?

4. ¿Qu´e es un enlace?

5. Investigue si Internet tiene alg´ un tipo de autoridad o control central.

CAP´ITULO 1. INTERNET

12

6. ¿Qu´e diferencia hay entre confiabilidad y seguridad?

7. Investigue en Internet el objetivo de los siguientes sitios web: http://www.ixquick.com

http://www.apple.com

http://www.canalrcn.com

http://www.terra.com

http://www.amazon.com

http://www.disney.com

http://www.geocities.com

http://www.espndeportes.com

“La genialidad es la habilidad para sostener una visi´on firmemente hasta que se convierte en realidad”.

Benjam´ın Franklin

2

Protocolos y Servicios 2.1.

TCP/IP

Protocolo: Es un acuerdo previo, establecido con el fin de determinar las normas que se deben respetar para realizar un procedimiento. En este caso, el procedimiento es una comunicaci´on entre aplicaciones que pueden ejecutarse en computadoras diferentes. Es decir, un protocolo especifica la forma como se solicita y se suministra un servicio entre dos aplicaciones.

Protocolo TCP: El Protocolo TCP1 es un conjunto de normas que permite crear un servicio de entrega confiable y de flujo controlado. La confiabilidad consiste en solucionar errores derivados de la transmisi´on como p´erdida de paquetes y en la eliminaci´on de paquetes duplicados. El control de flujo es la capacidad de ajustar la velocidad de transmisi´on de manera que no se produzca saturaci´on en el receptor.

Protocolo IP: El Protocolo IP2 , es un conjunto de normas que debe seguir una computadora para comunicarse a trav´es de Internet. Adem´as, 1 2

TCP: Transfer Control Protocol IP: Internet Protocol

CAP´ITULO 2. PROTOCOLOS Y SERVICIOS

14

define la forma de construir los paquetes3 de Internet, llamados datagramas IP. Especifica tambi´en un esquema de direcciones que asigna un n´ umero u ´nico a cada computadora. Este n´ umero, tambi´en llamado direcci´on IP, debe utilizarse en cualquier comunicaci´on en Internet.

TCP/IP: Es un conjunto de protocolos entre los que se encuentran TCP e IP. TCP/IP ofrece diferentes servicios especialmente orientados a Internet. Estos protocolos deben trabajar con un objetivo com´ un, haciendo parte de un sistema unificado utilizado para la transferencia confiable de informaci´on. Una de las mayores fortalezas de TCP/IP es la capacidad de operar sobre redes con infraestructuras f´ısicas y medios de transmisi´on diferentes.

2.2.

Programaci´ on Cliente/Servidor

La programaci´on Cliente/Servidor es el concepto fundamental de las aplicaciones de red. Este tipo de programaci´on se basa en una aplicaci´on que espera que otra le haga una solicitud de conexi´on. A la aplicaci´on que espera se le llama Servidor. El programa que realiza la solicitud se conoce con el nombre de Cliente.

Los t´erminos Cliente y Servidor hacen referencia a los programas de computadora que participan en la comunicaci´on. El Servidor se encarga generalmente de la parte m´as compleja del procesamiento. En caso de que los dos programas no se encuentren en la misma m´aquina, la comunicaci´on se hace por la red que los conecta, de forma transparente para el usuario. Ver figura 2.1.

Figura 2.1: Programaci´on Cliente/Servidor

3

Paquete: Unidad de informacin que se transmite entre dos dispositivos de una red.

´ CLIENTE/SERVIDOR 2.2. PROGRAMACION

2.2.1.

15

Caracter´ısticas de un programa cliente

Un cliente es un programa (software) que se conecta temporalmente con otro cuando necesita algo de ´el. El otro programa se denomina servidor.

Un programa cliente es ejecutado directamente por el usuario. La ejecuci´on se realiza durante un tiempo determinado de acuerdo a su necesidad.

Generalmente los programas cliente se ejecutan en las m´aquinas personales de los usuarios.

Los programas cliente inician el contacto con el servidor.

Un programa cliente puede acceder a diferentes servicios.

Los clientes generalmente no necesitan hardware sofisticado, ni sistema operativo especial.

Si el servidor al que se accede est´a en la misma m´aquina, no es necesario estar conectado a una red.

2.2.2.

Caracter´ısticas de un programa servidor

Un servidor es un programa de prop´osito espec´ıfico, que ofrece un servicio con la posibilidad de atender las solicitudes de varios clientes, por lo general “al mismo tiempo”. En realidad, el computador asigna una peque˜ na cantidad de tiempo a cada solicitud (por turnos), dando la impresi´on de estar atendi´endolas simult´aneamente.

Un programa servidor es ejecutado directamente por un usuario administrador o por el sistema en forma autom´atica, durante un tiempo no determinado (horas, d´ıas, meses, etc.).

Los programas servidores se ejecutan generalmente en m´aquinas compartidas.

Los programas servidores esperan la solicitud de los programas cliente.

CAP´ITULO 2. PROTOCOLOS Y SERVICIOS

16

Un programa servidor podr´ıa atender solicitudes de varios clientes “simult´aneamente”.

Los programas servidores generalmente necesitan hardware especial (recursos compartidos de alto desempe˜ no) y sistema operativo con capacidad de multitarea.

2.2.3.

Hardware y software servidor

El t´ermino servidor se refiere a programas que prestan servicios a otros programas llamados clientes. Este t´ermino tambi´en se utiliza para hablar de computadoras dotadas de recursos especiales, en donde se ejecutan los programas servidores.

Con el fin de evitar la confusi´on algunos autores utilizan el t´ermino servicio o demonio (daemon) para referirse a los programas servidores y el t´ermino servidor para el hardware.

2.2.4.

Varios servidores en una computadora

Una computadora puede estar ejecutando varios servicios “al mismo tiempo”.

Por ejemplo, una misma m´aquina puede ejecutar un servidor de p´aginas web y un servidor de correo electr´onico.

2.3.

Servicios de Internet

2.3.1.

DNS

Las computadoras conectadas a Internet, adem´as de tener un n´ umero IP asociado a ellas, tambi´en tienen un nombre que las identifica de manera u ´nica.

En vista de que una comunicaci´on a trav´es de Internet requiere el n´ umero y no el nombre, se hace necesario un mecanismo que relacione estos dos elementos. Este mecanismo se conoce con el nombre de Sistema de Nombres de Dominio (Domain Name System - DNS).

2.3. SERVICIOS DE INTERNET

17

El DNS funciona bajo la programaci´on Cliente/Servidor donde un programa cliente hace una solicitud entregando un nombre y el servidor env´ıa como respuesta el correspondiente n´ umero IP. Dado que es imposible que una s´ola m´aquina tenga la informaci´on de todos los n´ umeros IP de Internet, existen muchos servidores DNS distribuidos alrededor del mundo prestando este servicio. Cuando un servidor DNS no conoce el n´ umero IP que se le solicita, puede recurrir a otro servidor DNS para averiguarlo.

2.3.2.

HTTP

El Protocolo de Transferencia de HiperTexto (HyperText Transfer Protocol - HTTP) es el encargado de definir las normas que permiten la solicitud y env´ıo de p´aginas web entre computadoras conectadas a Internet.

El HTTP opera bajo la programaci´on Cliente/Servidor, donde un programa servidor como el Apache4 (ver figura 2.2) o el Internet Information Server (IIS5 ) espera una comunicaci´on de un cliente (browser o navegador) como el Internet Explorer o el Netscape Navigator, entre otros.

Figura 2.2: Logo de Apache Web Server El proceso para la transferencia de una p´agina web es el siguiente: El usuario escribe en la barra de direcciones del navegador el URL6 , en el cual se especifica el nombre de la m´aquina y opcionalmente el 4

Apache: Es un servidor web gratuito utilizado ampliamente en servidores Unix y disponible tambi´en para ambientes Windows y Macintosh. Apache es el servidor web m´as popular y de mayor crecimiento en Internet. Adem´as, Apache es un demonio HTTP (HTTPD).

5 IIS: Servidor web utilizado en plataformas Windows NT/2000. Tambi´en ofrece otros servicios como el FTP. 6 URL: Uniform Resource Locator, Localizador de recursos uniforme, es la especificaci´on est´andar de la localizaci´on de un archivo o recurso en Internet. La forma general de un URL es servicio://maquina:puerto/ruta/archivo@usuario.

CAP´ITULO 2. PROTOCOLOS Y SERVICIOS

18

nombre de la p´agina que se desea acceder. Si no se especifica este u ´ltimo, el servidor utilizar´a una p´agina web por omisi´on, cuyo nombre frecuentemente es index.htm o index.html. Ver figura 2.3.

Figura 2.3: URL

El navegador se conecta con el servidor DNS para conseguir la direcci´on IP asociada al nombre de la m´aquina.

El servidor DNS responde la solicitud y, si tiene conocimiento de la direcci´on, env´ıa la respuesta. Puede necesitar informaci´on de otros servidores DNS antes de contestar.

Una vez que el navegador (cliente web) tiene el n´ umero IP, hace una solicitud HTTP a la m´aquina remota.

La m´aquina en la que se encuentra el servidor web contesta transfiriendo los archivos que conforman la p´agina web solicitada, la cual es mostrada por el navegador, si la transferencia es exitosa. Si la transferencia no es exitosa, aparece la p´agina incompleta o se muestra una p´agina de error. Ver figura 2.4 Es de anotar que algunos navegadores como el Internet Explorer de Microsoft y Netscape, entre otros, almacenan copias de algunos de los sitios visitados7 , manteniendo as´ı un historial que puede ser consultado sin estar conectado a la red.

7

Ciertos sitios no permiten ser almacenados en el historial o tienen una vigencia muy corta en ´el, debido a su permanente actualizaci´on. Por ejemplo sitios de juegos, peri´odicos, pron´ostico del clima etc.

2.3. SERVICIOS DE INTERNET

19

Figura 2.4: Solicitud de una p´agina web

2.3.3.

FTP

El Protocolo de Transferencia de Archivos (File Transfer Protocol - FTP) especifica la forma de enviar y recibir archivos entre dos computadoras conectadas a Internet. Al igual que en HTTP, hay transferencia de archivos, pero el FTP no tiene navegador que interprete el contenido de los archivos recibidos para ser procesados o mostrados en la pantalla del usuario, raz´on por la cual es recomendable utilizar este servicio cuando solo se trata de mover archivos.

El FTP tambi´en utiliza Cliente/Servidor para sus comunicaciones. As´ı como en HTTP existe el servidor HTTPD, en FTP existe un programa equivalente, llamado FTPD (File Transfer Protocol Daemon). Por el lado de los clientes, existen numerosos programas que facilitan el uso de este servicio.

Entre los m´as comunes se encuentran WS FTP, CUTE FTP, y WAR FTP para Windows y, GFTP y mc para Linux, los cuales permiten enviar y recibir archivos. Por otra parte, el navegador, adem´as de ser cliente HTTP, tambi´en es cliente FTP. Desde la barra de direcciones, se escribe el URL, el cual deber´a iniciar con ftp://, seguido del nombre de la computadora en la cual est´a en ejecuci´on el servidor FTP, u ´nicamente para recibir archivos p´ ublicos.

Los sistemas operativos como Windows y Linux tambi´en tienen desde la l´ınea de comandos la posibilidad de utilizar el servicio FTP en forma bidireccional, para usuarios del sistema.

CAP´ITULO 2. PROTOCOLOS Y SERVICIOS

20

2.3.4.

SMTP/POP3

Uno de los m´as populares servicios de Internet es el correo electr´onico (electronic mail o e-mail). Este servicio permite que los usuarios intercambien mensajes (correspondencia) en forma electr´onica.

El correo electr´onico utiliza Cliente/Servidor para sus operaciones, utilizando los protocolos SMTP8 y POP39 . Un programa cliente de correo puede enviar y recibir mensajes desde la computadora personal del usuario.

Entre los programas cliente m´as comunes se encuentran OutLook Express (Ver figura 2.5), Eudora Mail y Netscape. El servidor de correos m´as com´ un es el SendMail, de uso gratuito, utilizado en ambientes Unix. En Windows NT/2000 el servidor de correos m´as com´ un es el Exchange Server, de uso comercial.

Figura 2.5: Logo de Microsoft Outlook Express

El proceso para la transferencia de un mensaje de correo electr´onico es el siguiente: El usuario que desea enviar el mensaje debe conectarse con su servidor SMTP especificando la direcci´on de correo electr´onico10 y el mensaje.

El servidor SMTP del usuario recibe el mensaje y se vuelve cliente del servidor SMTP del destinatario y env´ıa el mensaje.

El servidor SMTP del destinatario recibe el mensaje y lo guarda en el buz´on respectivo.

El proceso para leer un mensaje de correo electr´onico es el siguiente: 8

SMTP: Simple Mail Transfer Protocol, Protocolo Simple de Transferencia de Correo POP3: Post Office Protocol Version 3, Protocolo de Oficina Postal Versi´on 3 10 Direcci´on e-mail: Formada por dos partes, el nombre que identifica al usuario (buz´on) y el nombre de dominio de la m´aquina donde se encuentra el buz´on del destinatario. Las dos partes de la direcci´on se separan con el caracter @.

9

´ 2.4. PAGINAS WEB

21

El usuario que desea leer un mensaje debe conectarse con su servidor POP3, que generalmente funciona en la misma computadora en la que se encuentra en ejecuci´on el servidor SMTP. El servidor POP3 obtiene del buz´on del usuario los mensajes existentes y los env´ıa a la computadora personal para que sean interpretados por un programa cliente de correo. Generalmente, se configura POP3 para borrar los mensajes del servidor, liberando espacio en el disco.

El Protocolo Simple de Transferencia de Correo (Simple Mail Transfer Protocol - SMTP) es el encargado de determinar la forma como se deben mover los archivos de correo electr´onico entre computadoras conectadas a Internet.

Un usuario de correo electr´onico debe tener un buz´on en el cual pueda recibir los mensajes. Un buz´on debe ubicarse en una computadora que permanezca conectada a Internet 24 horas al d´ıa con el fin de que los mensajes no se pierdan si el usuario no se encuentra directamente conectado en el momento en el que le llegan. Esta m´aquina que permanece conectada a Internet tiene en ejecuci´on un programa servidor de correo electr´onico.

2.4.

P´ aginas Web

Como ya se ha mencionado, una p´agina web es un documento disponible para Internet escrito en lenguaje HTML. En la parte II de este libro se ofrece un curso r´apido de HTML. Con el fin de facilitar la elaboraci´on de p´aginas web, existen algunas herramientas como el DreamWeaver de Macromedia o el FrontPage de Microsoft, entre otras. Estas herramientas ocultan el manejo b´asico del lenguaje HTML, permitiendo escribir p´aginas web utilizando botones en una interfaz gr´afica.

2.4.1.

C´ omo escribir p´ aginas web

Para escribir p´aginas web, generalmente se utiliza un editor de textos como el editor del DOS, el bloc de notas de Windows o cualquier otro como el Crimson Editor, el cual ayuda a identificar la sintaxis propia de HTML y otros lenguajes utilizando colores en las palabras claves. Ver figura 2.6.

22

CAP´ITULO 2. PROTOCOLOS Y SERVICIOS

Figura 2.6: http://www.crimsoneditor.com/

2.4.2.

C´ omo visualizar p´ aginas web

Para visualizar el contenido de una p´agina web usando un navegador, existen dos formas: accediendo el archivo directamente o a trav´es del servidor web.

Para acceder a la p´agina directamente, hay que especificar en la barra de direcciones del navegador el URL completo o la ubicaci´on exacta del archivo en la computadora local.

Por ejemplo: file://c:\Apache\htdocs\paginas\index.html.

La segunda forma consiste en especificar en el URL el nombre de la computadora que tiene en ejecuci´on el servidor web, seguido opcionalmente del nombre de la p´agina.

Por ejemplo: http://www.microsoft.com/latam/vstudio/default.asp.

2.4.3.

Tipos de p´ aginas web

Dependiendo del momento en que se determina el contenido de un documento web, las p´aginas se dividen en: Est´ atica: El contenido de la p´agina web se determina al momento de escribirla. Este contenido no cambia, es decir, siempre genera la misma respuesta. Ejemplo: P´aginas escritas utilizando u ´nicamente HTML. Din´ amica: Una p´agina web de contenido din´amico no existe de forma predeterminada. Es creada por el servidor de p´aginas web como respuesta a la solicitud de un navegador (cliente web). El servidor web ejecuta un programa de aplicaci´on que crea el contenido de la p´agina web de

´ 2.4. PAGINAS WEB

23

respuesta (“en tiempo de ejecuci´on” o “al vuelo”). En vista de que el servidor crea una p´agina nueva por cada solicitud, el contenido de un documento web puede cambiar entre una solicitud y otra. Por ejemplo, programas creados en lenguajes como C/C++, Perl, Php y Asp, entre otros. Un programa de este tipo se conoce con el nombre de CGI11 .

Activa: Un documento activo no es especificado completamente por el servidor. Se compone de un programa que recibe valores, puede ejecutar c´alculos y presentar resultados. Cuando un navegador solicita una p´agina web activa, el servidor env´ıa como respuesta una copia del programa, el cual deber´a ejecutarse en la misma m´aquina del cliente web.

De esta manera el programa puede cambiar continuamente gracias a la interacci´on con el usuario. Por ejemplo, applets de java, o los llamados lenguajes de script, como JavaScript y VisualBasicScript (VBScript), entre otros.

2.4.4.

C´ omo publicar p´ aginas web

Publicar una p´agina en Internet es un proceso sencillo. Consiste en ubicar la carpeta o directorio ra´ız del servidor web y colocar all´ı los archivos que conforman su p´agina o sitio web, con la estructura de directorios que el usuario desee.

Cuando un usuario utiliza un navegador (cliente web) para acceder a una p´agina web, podr´a especificar la ruta completa hasta el archivo deseado. En caso de que no se indique un nombre de archivo en el segmento final del URL, se entiende que la solicitud es el archivo por omisi´on, llamado normalmente index.html o index.htm.

Generalmente, la carpeta c:\Apache\htdocs\ es el directorio ra´ız del servidor Apache en Windows. En Linux, corresponde a /var/httpd/html. En Windows NT/2000, la carpeta est´a ubicada en c:\inetpub\wwwroot\ con el servidor web Internet Information Server o IIS de Microsoft. Sin embargo, esta ubicaci´on es configurable por el administrador del servidor web, cualquiera que sea el sistema operativo.

Por otra parte, los usuarios de un sistema Linux pueden tener, en su cuenta, un directorio llamado public_html y ubicar all´ı su p´agina web, la cual depende del servidor web.

11

CGI: Common Gateway Interface - Interfaz de pasarela com´ un.

CAP´ITULO 2. PROTOCOLOS Y SERVICIOS

24

Si la p´agina que se desea publicar contiene documentos est´aticos o activos, simplemente se almacenan los archivos en la carpeta ra´ız del servidor web.

Finalmente, algunos lenguajes de programaci´on con soporte para la Web (como Perl y lenguaje C) necesitan que sus programas se almacenen en la carpeta Cgi-Bin del servidor web.

2.5.

Autoevaluaci´ on

1. Explique a qu´e hace referencia el t´ermino servidor en los siguientes enunciados: a) El servidor de la red dej´o de funcionar esta ma˜ nana. b) El disco duro del servidor de correo est´a demasiado lleno. c) Se necesita cambiar el servidor de p´aginas web por uno gratuito, como el Apache Web Server. d ) Cambi´o la direcci´on IP del servidor DNS. 2. En una sesi´on de navegaci´on, usando el Internet Explorer, se digita el URL de un sitio nunca antes visitado. ¿Se comporta el navegador como un cliente DNS para consultar el n´ umero IP del sitio web? S´ı o no.

Explique.

3. Si un usuario est´a navegando y queda fuera de servicio el DNS ¿se interrumpen las descargas en proceso? ¿deja de funcionar el navegador?

4. ¿Cu´al es el servicio que permite recibir los archivos que componen una p´agina web para visualizarla en pantalla?

5. ¿En qu´e se diferencian los servicios HTTP y FTP? 6. ¿D´e ejemplos de programas cliente para FTP y HTTP? 7. ¿Qu´e diferencia hay entre los navegadores y los clientes FTP? 8. ¿Siempre se aloja un buz´on de correo en una m´aquina remota?

9. ¿Siempre se ejecutan en la misma m´aquina los servidores POP y SMTP?

Parte II HTML

25

“Cualquier cosa que usted haga ser´a insignificante, pero es muy importante que lo haga”.

Mahatma Gandhi

3

HTML B´asico El lenguaje de marcado para hipertexto (HyperText Markup Language HTML) es el lenguaje utilizado para escribir p´aginas web. Este lenguaje est´a basado en el uso de marcas o etiquetas (tambi´en llamadas tags).

Ver “Estructura de las etiquetas de HTML”.

Estructura de las etiquetas de HTML <etiqueta> </etiqueta>

Para definir el comienzo de una etiqueta, se escribe entre los s´ımbolos “menor que”(<) y “mayor que”(>) tal como aparece en el ejemplo. De manera similar, el fin de una etiqueta es igual al inicio de la etiqueta, a˜ nadi´endole el s´ımbolo “slash”(/).

Es importante tener en cuenta que las etiquetas pueden escribirse con letras may´ usculas o min´ usculas sin que cambie su significado. Cuando un texto

´ CAP´ITULO 3. HTML BASICO

28

est´a delimitado por el comienzo y fin de una etiqueta, se ve afectado por ella, de acuerdo a la aplicaci´on que tiene dentro del lenguaje HTML. Un documento HTML se compone de dos partes: Encabezado (Header): Contiene algunos detalles generales del documento. Entre ellos se destaca el t´ıtulo de la ventana.

Cuerpo (Body): Es la parte del documento HTML que contiene la informaci´on de la p´agina que ser´a visible al usuario.

3.1.

Estructura de un documento

En la estructura del documento HTML, se pueden observar las etiquetas <html> - </html>, las cuales lo delimitan.

Ver “Estructura de un documento HTML”.

Estructura de un documento HTML <html> <head> <title> Titulo de la ventana </title> </head> <body> Cuerpo del documento </body> </html>

El encabezado est´a delimitada por las etiquetas <head> - </head> y en ella se tiene el t´ıtulo de la ventana, entre <title> y </title>.

El cuerpo del documento es el conjunto de textos y etiquetas delimitado por <body> y </body>.

3.2. COMENTARIOS

29

Una forma no recomendable de escribir el conjunto de etiquetas que presentan la estructura de un documento HTML, para obtener el mismo resultado es la siguiente: Ver “Estructura de un documento HTML (2)”.

Estructura de un documento HTML (2) <html> <head> <title> Titulo de la ventana </title> </head> <body> Cuerpo del documento </body> </html>

El navegador es el encargado de interpretar las etiquetas y mostrar en pantalla el resultado, en forma de p´agina web. En pantalla podr´ıa verse una presentaci´on similar a la de la figura 3.1.

Figura 3.1: Documento HTML

3.2.

Comentarios

Los comentarios en HTML son trozos de texto en medio del documento web, los cuales son ignorados por el navegador al momento de visualizarlo. El objetivo de ellos es dar claridad sobre una zona de c´odigo para que en el futuro pueda ser le´ıda y entendida con mayor facilidad. Un comentario se debe escribir entre las etiquetas <!-- y -->.

Ver “Comentarios en HTML”.

´ CAP´ITULO 3. HTML BASICO

30

Comentarios en HTML <!-- comentario --> <!-comentario comentario -->

Otro uso de los comentarios consiste en ocultar algunas instrucciones incompatibles o desconocidas por navegadores antiguos.

3.3.

Formato

3.3.1.

Espacios y saltos de l´ınea

Cuando se escribe una p´agina web, es frecuente el uso de varios espacios o saltos de l´ınea para mejorar el aspecto del c´odigo fuente.

Sin embargo, los navegadores ignoran los espacios adicionales entre palabras, y saltos de l´ınea, tratando de mostrar la p´agina de acuerdo a algunas preferencias (tipo de letra, tama˜ no, resoluci´on de la pantalla, etc.) que son configuradas en la m´aquina cliente.

En consecuencia, HTML tiene etiquetas para respetar los saltos de l´ınea y los espacios en blanco.

Ver “Espacios y saltos de linea”.

La p´agina web correspondiente se puede apreciar en la figura 3.2.

Observe que la etiqueta <br> es la encargada de indicarle al navegador que el texto que se encuentra a continuaci´on deber´a ser mostrado en la l´ınea siguiente. Al usar dos veces esta etiqueta (<br><br>), se est´a dejando una l´ınea vac´ıa. Observe que <br> no necesita cerrarse con </br>.

Por otra parte, el texto delimitado por <pre> y </pre> indica que se deben respetar los espacios y los saltos de l´ınea presentes en el c´odigo fuente.

Adem´as, el formato de texto cambia como si se utiliza <tt> - </tt>, etiqueta que ser´a explicada m´as adelante.

3.3. FORMATO

31 Espacios y saltos de linea

Linea de Otra linea de

texto texto <br><br>

<pre> Linea de Otra linea de </pre>

texto texto

Figura 3.2: Espacios y saltos de l´ınea

3.3.2.

Caracteres especiales

Algunos navegadores reconocen caracteres especiales utilizados en el idioma ˜ entre otros) para ser incluidos en p´aginas web. espa˜ nol (´a, ´e, ´ı, ´o, u ´, n ˜, N, Sin embargo, esto no es est´andar en todos los navegadores o versiones de ellos. La tabla 3.1 contiene algunos de los caracteres especiales m´as comunes, compatibles con todos los navegadores.

Especial ´a ´e ´ı ´o u ´ n ˜ ˜ N

HTML &aacute; &eacute; &iacute; &oacute; &uacute; &ntilde; &Ntilde;

Especial < > & " u ¨ ¿ ¡

HTML &lt; &gt; &amp; &quot; &uuml; &#191; &#161;

Tabla 3.1: Caracteres especiales

´ CAP´ITULO 3. HTML BASICO

32

Observe que algunos caracteres especiales de la tabla 3.1 est´an representados por el s´ımbolo de numeral ( # ), como en el caso del s´ımbolo ( ¿ ), asociado con el n´ umero 191. Este n´ umero hace parte del mapa de caracteres usado en Windows o Linux, el cual se puede observar en la figura 3.3.

Figura 3.3: Mapa de caracteres de Windows Observe el siguiente ejemplo: Ver “Caracteres especiales”.

Caracteres especiales <pre> P&aacute;gina, tambi&eacute;n, art&iacute;culo, aplicaci&oacute;n, &uacute;nico, tama&ntilde;o, TAMA&Ntilde;O, &#191;Qu&eacute;?, &#161;C&oacute;mo! </pre>

La p´agina web con los caracteres especiales del ejemplo anterior se puede apreciar en la figura 3.4.

3.3.3.

Formato de texto

Como ya se ha mencionado, las p´aginas web se escriben como texto plano en un editor. Es decir, no se cuenta con la posibilidad de ofrecer texto en negrita,

3.3. FORMATO

33

Figura 3.4: Caracteres especiales

colores o tama˜ nos diferentes. Son las etiquetas de formato las que permiten modificar la apariencia del texto cuando es visualizado por el navegador. A continuaci´on, se puede apreciar un listado con las etiquetas de formato m´as comunes: <b> Texto en negrita. <i> Texto en cursiva. <tt> Texto como m´aquina de escribir. <u> Texto subrayado. <sub> Texto en sub´ındice. <sup> Texto en super´ındice (exponente). <big> Texto grande. <small> Texto peque˜ no. <strong> Texto enfatizado.

En el siguiente ejemplo, se muestra u ´nicamente el cuerpo de la p´agina web.

Ver “Formato de texto (1)”.

´ CAP´ITULO 3. HTML BASICO

34

Formato de texto (1)

<b> <i> <tt> <u> X<sub>i X<sup>2 <big> <small> <strong>

Texto Texto Texto Texto Texto

normal <br> en negrita </b><br> en cursiva </i><br> como m&aacute;quina de escribir </tt><br> subrayado </u><br> </sub> </sup><br> Texto grande </big><br> Texto peque&ntilde;o </small><br> Texto enfatizado </strong><br>

La p´agina web correspondiente se puede apreciar en la figura 3.5.

Figura 3.5: Formato de texto (1)

<h1> Delimita texto enfatizado, donde el n´ umero 1 especifica el tama˜ no.

Este n´ umero puede cambiarse por otro, entre el 2 y el 6, siendo 1 el m´as grande. Adem´as, el texto delimitado por estas etiquetas se muestra en l´ıneas independientes.

Ver “Formato de texto (2)”.

3.3. FORMATO

35 Formato de texto (2)

Texto normal <h1> Texto entre <h2> Texto entre <h3> Texto entre <h4> Texto entre <h5> Texto entre <h6> Texto entre

h1 h2 h3 h4 h5 h6

</h1> </h2> </h3> </h4> </h5> </h6>

La p´agina web correspondiente se puede apreciar en la figura 3.6.

Figura 3.6: Formato de texto (2)

<p> Indica el inicio de un nuevo p´arrafo. El efecto es similar al que se logra escribiendo <br><br>. Esta etiqueta posee el atributo align con los valores left, right o center para especificar la alineaci´on deseada en el nuevo p´arrafo. Al igual que <br>, <p> no se cierra con </p>. <hr> Dibuja una l´ınea horizontal tan ancha como lo permita la ventana del navegador. Posee los modificadores size, para especificar el grosor; width, para indicar el ancho de la l´ınea en pixeles o porcentaje; align,

´ CAP´ITULO 3. HTML BASICO

36

para especificar la alineaci´on horizontal y noshade, para generar una l´ınea s´olida. La etiqueta <hr> no necesita cerrarse con </hr>. <blockquote>: Esta etiqueta se utiliza para escribir citas textuales. El texto correspondiente a la cita debe estar delimitado por esta etiqueta.

El navegador presenta el texto con sangria a ambos lados. <center>: Delimita un texto que desea centrarse.

Ver “Formato de texto (3)”.

Formato de texto (3) <center> Software Libre </center> <p align = "right"> La licencia GPL, se cre&oacute; para evitar que alguien se apropiara de los derechos de autor. <p><hr width = "50%" align = "center" size = "5" noshade> Es promovido por la Free Software Foundation.<p> <hr width = "30%" align = "left" size = "8"> <blockquote> &quot;El software de dominio p&uacute;blico puede ser copiado sin costo alguno, pero no se puede distribuir como si fuera software propietario.&quot; </blockquote>

La p´agina web correspondiente se puede apreciar en la figura 3.7.

3.3. FORMATO

37

Figura 3.7: Formato de texto (3)

<div>: Delimita elementos de un documento para controlar su estructura de una manera m´as eficiente. Por ejemplo, para alinear a la derecha o justificar a ambos lados. <font>: Delimita un texto que desea modificarse con par´ametros como: • color: Debe especificarse un color en formato RGB (6 caracteres hexadecimales, dos para rojo, dos para verde y dos para azul), por ejemplo #ff0000 corresponde a rojo y #0000ff representa el azul. Otra forma de indicar el color cuando corresponde a un color plano, es escribirlo en ingl´es, encerrado entre comillas, como yellow (amarillo), gray (gris), entre otros.

• size: Modifica el tama˜ no de los caracteres, con un n´ umero entre 1 y 7 entre comillas. El tama˜ no 1 es el m´as peque˜ no.

• face: Establece el tipo de letra. Hay que anotar que no todos los tipos de letra est´an disponibles en todas las computadoras. Por lo tanto, debe tener especial cuidado al utilizarlos.

Ver “Formato de texto (4)”.

´ CAP´ITULO 3. HTML BASICO

38

Formato de texto (4) <font face = "arial" color = "#0000ff" size = "2"> La licencia GPL, se cre&oacute; para evitar que alguien se apropiara de los derechos de autor. </font> <p><hr> <div align = "right"> Es promovido por la Free Software Foundation. </div><p> <div align = "justify"> &quot;El software de dominio p&uacute;blico puede ser copiado sin costo alguno, pero no se puede distribuir como si fuera software propietario.&quot; </div>

La p´agina web correspondiente se puede apreciar en la figura 3.8.

Figura 3.8: Formato de texto (4)

3.3.4.

Fondos y colores

El modificador bgcolor (color de fondo) de la etiqueta body (cuerpo de la p´agina web), permite cambiar el fondo del documento, especificando el color,

3.3. FORMATO

39

ya sea con su nombre en ingl´es o con el n´ umero RGB. Ver p´agina 37.

Ver “Formato de texto (5)”.

Formato de texto (5) <body bgcolor = "black"> <font color = "#ffffff"> <center> Software Libre </center> <p><hr> La licencia GPL, se cre&oacute; para evitar que alguien se apropiara de los derechos de autor. </font> </body>

La figura 3.9 muestra el efecto de una p´agina web con fondo negro y texto de color blanco.

Figura 3.9: Formato de texto (5)

Puede escoger un archivo gr´afico como fondo de la p´agina web, especificando su nombre a continuaci´on del modificador background (fondo) de la etiqueta <body>. En caso de escribir <body background = "fondo.jpg">, el efecto ser´ıa como el de la figura 3.10.

Nota: En este ejemplo, el archivo fondo.jpg debe estar almacenado en la misma carpeta de la p´agina web. Si el archivo no se encuentra entonces el navegador ignora el atributo background.

´ CAP´ITULO 3. HTML BASICO

40

Figura 3.10: Fondo para una p´agina web

3.4.

Listas y enumeraciones

Una lista es un conjunto de ´ıtems (palabras o p´arrafos), los cuales se pueden diferenciar utilizando vi˜ netas o n´ umeros. HTML soporta listas numeradas, no numeradas y listas de definici´on, de uno o varios niveles.

Las principales etiquetas que se utilizan para el manejo de listas y enumeraciones son: <ul>: Delimita una lista sin numeraci´on, mostrando una vi˜ neta por cada ´ıtem especificado con la etiqueta <li>. <li>: Es utilizada para insertar cada ´ıtem en una lista con vi˜ netas o numerada. No es requisito usar </li>. <ol>: Delimita una lista numerada, mostrando un n´ umero por cada ´ıtem especificado con la etiqueta <li>.

Ver “P´ aginas web con Listas (1)”.

3.4. LISTAS Y ENUMERACIONES

41

P´ aginas web con Listas (1) Partes del computador <ul> <li> CPU <ol> <li> Procesador <li> Main Board </ol> <li> Monitor <li> Teclado </ul>

La figura 3.11 muestra una lista con vi˜ netas en la cual el segundo nivel del primer ´ıtem corresponde a una lista numerada.

Figura 3.11: P´agina web con listas (1)

<dl>: Indica el comienzo de una lista de definici´on de t´erminos. <dt>: Se utiliza para indicar el t´ermino que ser´a definido dentro de una lista de definiciones. El uso de </dt> es opcional. <dd>: Es la etiqueta utilizada para la definici´on de cada t´ermino en una lista de definiciones. No se requiere cerrar la etiqueta con </dd>.

´ CAP´ITULO 3. HTML BASICO

42 Ver “P´ aginas web con Listas (2)”.

P´ aginas web con Listas (2) Partes del computador <dl> <dt>Monitor: <dd> Dispositivo de salida. <dt>Teclado: <dd> Dispositivo de entrada. <dt>Disco Duro:<dd> Dispositivo de almacenamiento externo. </dl>

La figura 3.12 muestra una lista de definiciones.

Figura 3.12: P´agina web con listas (2) HTML permite modificar la apariencia de las listas numeradas, en las cuales es posible cambiar el tipo de numeraci´on, es decir, utilizar letras may´ usculas, min´ usculas o n´ umeros romanos tanto en may´ usculas como en min´ usculas, utilizando el modificador type. Adem´as, permite iniciar en un n´ umero establecido por el atributo start.

3.4. LISTAS Y ENUMERACIONES

43

Ver “Listas numeradas especiales”.

Listas numeradas especiales N&uacute;meros ar&aacute;bigos: <ol> <li> &Iacute;tem <br> N&uacute;meros ar&aacute;bigos iniciando en el tercero <ol start = "3"> <li> &Iacute;tem <li> &Iacute;tem </ol> <li> &Iacute;tem </ol> Letras min&uacute;sculas iniciando en la quinta: <ol type = "a" start = "5"> <li> &Iacute;tem <br> N&uacute;meros romanos en min&uacute;scula <ol type = "i"> <li> &Iacute;tem <li> &Iacute;tem </ol> <li> &Iacute;tem </ol>

La figura 3.13 muestra una lista numerada con algunas modificaciones en cuanto al tipo de numeraci´on a utilizar y los valores iniciales.

´ CAP´ITULO 3. HTML BASICO

44

Figura 3.13: Listas numeradas especiales

Por otra parte, el modificador type, tambi´en puede utilizarse en la etiqueta <ul> y en <li>, con los valores "circle", "square" y "disk", permitiendo establecer la vi˜ neta a gusto del usuario. Por ejemplo <ul type = "circle"> o <li type = "square">.

3.5.

Tablas

Las tablas permiten organizar la informaci´on (texto, n´ umeros e im´agenes) en filas y columnas. Tambi´en controlan la disposici´on de la informaci´on de una manera m´as apropiada gracias a la cantidad de par´ametros que se pueden manipular.

En primer lugar, se deben definir las caracter´ısticas de la tabla. A continuaci´on las particularidades de cada fila y luego de cada celda. La primera fila de una tabla puede contener los encabezados de las columnas.

Las etiquetas que se utilizan para formar tablas son: <table>: Delimita una tabla. Tiene los siguientes atributos: • align: Para especificar la ubicaci´on horizontal de la tabla. Los valores pueden ser left, right y center.

3.5. TABLAS

45

• border: Para establecer el grosor del borde en pixeles.

• bgcolor: Para indicar el color del fondo de la tabla.

• cellpadding: Afecta todas las celdas de la tabla. Especifica el espacio entre los bordes de la tabla y el contenido, en pixeles.

• cellspacing: Afecta todas las celdas de la tabla. Especifica el espacio entre las celdas.

• width: Para indicar el ancho de la tabla en pixeles o porcentaje. <tr>: Delimita una fila de la tabla. Tiene los siguientes atributos: • align: Para especificar la alineaci´on del contenido de las celdas que conforman la fila.

• bgcolor: Para indicar el color del fondo de la fila. <td>: Indica el comienzo de la informaci´on de una celda. No requiere el uso del terminador </td>. Tiene los siguientes atributos: • align: Para especificar la alineaci´on del contenido de la celda.

• bgcolor: Para indicar el color del fondo de la celda.

• colspan: Para unir celdas de forma horizontal.

• rowspan: Para unir celdas de forma vertical. <th>: Indica el comienzo de la informaci´on de una celda utilizada como encabezado de columna. Normalmente la informaci´on se visualiza con negrita y centrada. <caption>: Especifica el t´ıtulo de una tabla. Por omisi´on el t´ıtulo aparece centrado en la parte superior de la tabla. Use align = "left" o align = "right" si desea que el t´ıtulo salga a la izquierda o a la derecha respectivamente. Para que el t´ıtulo salga en la parte inferior de la tabla use valign = "bottom".

´ CAP´ITULO 3. HTML BASICO

46 Ver “Tablas”.

Tablas

<table border = "2" align = "left" bgcolor = "#e4e4e4" cellpadding = "5" cellspacing = "10" width = "30%"> <caption align = "bottom"> Ejemplo de una tabla </caption> <tr> <th> A <th> B <th> C </tr> <tr bgcolor = "white"> <td> 1 <td> 2 <td align = "center" bgcolor = "black" rowspan = "2"> <font size = "6" color = "white"> <b> 3 </b> </font> </tr> <tr> <td colspan = "2" align = "center"> 4 </tr> </table>

La figura 3.14 muestra la tabla correspondiente a la p´agina web anterior.

´ 3.6. AUTOEVALUACION

47

Figura 3.14: P´agina web con tablas

3.6.

Autoevaluaci´ on

1. Si una p´agina va a ser visualizada con el Internet Explorer ¿es necesario que el c´odigo fuente incluya la etiqueta <HTML>? Sugerencia: experimente con el navegador Internet Explorer.

2. ¿Para qu´e sirve la etiqueta <pre>?

3. ¿Cu´al es la etiqueta usada con citas bibliogr´aficas?

4. ¿Explique c´omo se logra la justificaci´on de un p´arrafo a ambos lados, a la derecha, a la izquierda y al centro?

5. Si deseara cambiarle el fondo a una p´agina web ¿Qu´e etiqueta deber´ıa usar?

6. ¿Cu´al es el prop´osito del atributo start en una lista numerada?

7. ¿Qu´e diferencia existe entre las etiquetas cellpadding y cellspacing?

8. Investigue usando el navegador los colores que producen los siguientes n´ umeros RGB: #FFFF00, #FF00FF, #00FFFF. 9. Investigue cinco tonalidades de azul y escriba el n´ umero RGB correspondiente.

10. Elabore una p´agina web que incluya cinco tipos de letra diferentes.

48

´ CAP´ITULO 3. HTML BASICO

11. Escriba el c´odigo HTML necesario para producir una p´agina web con apariencia similar a la de la figura 3.15. Tenga en cuenta las siguientes caracter´ısticas Los t´ıtulos son encabezados de nivel 1.

Hay una vi˜ neta de forma rectangular.

Los p´arrafos se encuentran justificados a ambos lados.

Especifique un color que no sea blanco para el fondo de la p´agina.

Figura 3.15: Ejercicio b´asico HTML - (1)

12. Escribe el c´odigo HTML necesario para producir una p´agina web con una tabla como se puede apreciar en la figura 3.16. Tenga en cuenta las siguientes caracter´ısticas: El texto est´a centrado dentro de cada celda.

El texto de la fila de encabezados y el de la primera columna est´a en negrilla Use colores de fondo para cada celda que considere adecuados.

´ 3.6. AUTOEVALUACION

49

Figura 3.16: Ejercicio b´asico HTML - (2)

13. Escribe el c´odigo HTML necesario para producir una p´agina web con un cuadrado m´agico1 de tama˜ no 5, similar al de la figura 3.17. Tenga en cuenta las siguientes caracter´ısticas: La tabla est´a centrada dentro de la ventana.

Los n´ umeros est´an centrados dentro de su respectiva celda.

Se recomienda usar el tipo de letra Arial Black.

El borde de la tabla es de grosor 4.

El espacio entre el borde y el contenido es de 3 pixeles.

El espacio entre las celdas es 3 pixeles.

Figura 3.17: Ejercicio b´asico HTML - (3)

1

Cuadrado m´agico: La suma de los elementos de cada fila, cada columna y cada diagonal es igual

50

´ CAP´ITULO 3. HTML BASICO

“El u ´nico hombre que nunca comete un error es aquel que nunca hace nada”.

Theodore Roosevelt

4

Hipermedia Una p´agina web puede contener texto, im´agenes, animaciones, sonidos, videos y otros. Estos elementos pueden ser simplemente presentados en la p´agina o servir como enlaces que permiten navegar a trav´es de la informaci´on de Internet, seg´ un los intereses particulares del usuario.

4.1.

Im´ agenes con < img >

La etiqueta <img> contiene la informaci´on necesaria para mostrar una foto o dibujo en un documento web. Soporta los formatos gr´aficos m´as comunes como gif y jpg, entre otros. Sus atributos son: src: Para indicar la ubicaci´on del archivo gr´afico que se desea mostrar en la p´agina web. align: Para la alineaci´on de la foto o dibujo. Los valores pueden ser left, right o middle. title: Muestra una peque˜ na caja de texto cuando el puntero del rat´on se detiene sobre de la imagen. El texto que se desea mostrar debe ir encerrado entre comillas.

CAP´ITULO 4. HIPERMEDIA

52

alt: Se utiliza para mostrar en la pantalla un texto cuando el navegador no puede mostrar la imagen. Algunos navegadores muestran una peque˜ na caja de texto cuando el puntero del rat´on pasa por encima de la imagen si no se utiliza el atributo title. border: Establece el grosor del borde, medido en pixeles. height: Permite establecer la altura de la imagen, medida en pixeles o en porcentaje. En caso de no utilizar el atributo width, se mantiene la proporci´on. width: Permite establecer el ancho de la imagen, medida en pixeles o en porcentaje. En caso de no utilizar el atributo height, se mantiene la proporci´on. hspace: Especifica la cantidad de espacio m´ınimo entre la imagen y los extremos izquierdo y derecho de la p´agina. vspace: Especifica la cantidad de espacio m´ınimo entre la imagen y los extremos superior e inferior de la p´agina.

Ver “Incluir archivos gr´aficos”.

Incluir archivos gr´ aficos <img src = "imagen.jpg" border = "10" <img src title

align = "right" alt = "Este es Tux"

= "imagen.jpg" width = "250" = "Titulo de la grafica">

width = "200" hspace = "100"> height = "100"

En el ejemplo se han incluido dos archivos gr´aficos. Se ha escogido la misma imagen para que sea m´as notoria la diferencia al utilizar algunos de los atributos de la etiqueta <img>.

En la primera instrucci´on se utilizan los atributos align para ubicarla a la derecha de la p´agina web, width con ancho de 200 pixeles, y no se especifica la altura (guarda la proporci´on). El atributo border establece un borde de

´ 4.1. IMAGENES CON < IM G >

53

10 pixeles, se tiene un mensaje alternativo ("Este es Tux") con alt y se separa 100 pixeles del extremo derecho.

Para la segunda instrucci´on, se utilizan width y height para indicarle al navegador que muestre la imagen con 250 pixeles de ancho y 100 pixeles de alto, aunque altere la proporci´on original. Adem´as, tiene un t´ıtulo. Ver figura 4.1.

Figura 4.1: P´agina web con im´agenes

La figura 4.2 muestra la apariencia de una p´agina web en un navegador que tiene deshabilitada la opci´on de mostrar im´agenes, con el fin de poder observar el texto alternativo.

Figura 4.2: P´agina web con texto alternativo

Puede habilitar o deshabilitar la opci´on del navegador para que sea posible que se muestren o no las im´agenes. En Internet Explorer se utiliza Opciones de Internet del men´ u Herramientas. En la ficha Opciones avanzadas busque multimedia y desactive Mostrar imagenes. Ver figura 4.3.

CAP´ITULO 4. HIPERMEDIA

54

Figura 4.3: Opciones avanzadas de Internet Explorer

4.2.

Videos con < img >

La etiqueta <img> tambien permite que el navegador reproduzca archivos de video. Se soportan los formatos m´as comunes como avi, mpg, y mov, entre otros. Sus atributos m´as importantes son: dynsrc: Para indicar la ubicaci´on del archivo de video que desea. height: Permite establecer la altura de la ventana de video, medida en pixeles o en porcentaje. En caso de no utilizar el atributo width, se mantiene la proporci´on. width: Permite establecer el ancho de la ventana de video, medido en pixeles o en porcentaje. En caso de no utilizar el atributo height, se mantiene la proporci´on. start: Indica cuando se iniciar´a la reproducci´on del video. Sus valores posibles son: fileopen (al abrir la p´agina), y mouseover (al pasar el puntero del rat´on sobre la imagen que representa el video).

Ver “Incluir archivos de video”.

4.3. PLUGGINS

55 Incluir archivos de video

<img dynsrc = "Video.avi" Video Avi

start = "fileopen">

<img dynsrc = "Video.mpg" Video Mpg

width = "150"

start = "mouseover">

En el ejemplo se incluye un archivo de video, del tama˜ no original, en formato avi el cual inicia su ejecuci´on al abrir la p´agina web. A continuaci´on, se encuentra una ventana de 150 pixeles de ancho, conservando la proporci´on del video original. Este video inicia al pasar el puntero del rat´on sobre la ventana del video. Ver figura 4.4.

Figura 4.4: P´agina web con videos

4.3.

Pluggins

Un pluggin es un programa peque˜ no que a˜ nade funcionalidades al navegador.

Por ejemplo, ofrece la posibilidad de abrir archivos en formato pdf, ppt, wrl, mov, mpg, avi, mp3, swf, entre muchos otros.

La etiqueta <embed> permite que las p´aginas web ejecuten archivos de programas con formato especial, siempre y cuando la m´aquina en la que funcione el navegador tenga instalados los pluggins correspondientes. Sus atributos m´as importantes son: src: Para indicar la ubicaci´on del archivo deseado.

CAP´ITULO 4. HIPERMEDIA

56

height: Permite establecer la altura de la ventana, medida en pixeles o en porcentaje. En caso de no utilizar el atributo width, se mantiene la proporci´on. width: Permite establecer el ancho de la ventana, medido en pixeles o en porcentaje. En caso de no utilizar el atributo height, se mantiene la proporci´on. autostart: Indica si la ejecuci´on debe iniciar autom´aticamente. Sus valores posibles son: true y false.

Ver “Incluir archivos de diferente formato”.

Incluir archivos de diferente formato Sonido mp3: <embed src = "musica.mp3" autostart = "false">

width = "150"

height = "150"

Video avi <embed src = "video.avi" autostart = "true"> <br>

width = "150"

height = "150"

width = "400"

height = "300">

Archivo pdf: <embed src

= "php.pdf"

En el ejemplo se incluye un archivo de sonido mp3. A continuaci´on, se incluye un archivo de video avi el cual se empieza a reproducir al abrir la p´agina web. Despu´es de un salto de l´ınea, se muestra una ventana de 400 x 300 pixeles con el archivo PHP.PDF. Ver figura 4.5.

4.4. SONIDOS CON < BGSOU N D >

57

Figura 4.5: P´agina web con archivos de diferente formato

4.4.

Sonidos con < bgsound >

<bgsound> permite que las p´aginas web ejecuten archivos de sonido. Soporta formatos como wav, mid, au, y mp3, entre otros. Sus atributos m´as importantes son: src: Para indicar la ubicaci´on del archivo de sonido. loop: Indica el n´ umero de veces que se repite el sonido. Si se asigna el valor infinite se repite el sonido hasta que abandone la p´agina. volume: Indica el volumen o nivel de sonido entre -10000 y 0, siendo 0 el m´aximo.

Ver “Incluir archivos de diferente formato”.

4.5.

Enlaces

El lenguaje HTML posee etiquetas para especificar enlaces. Un enlace es un elemento esencial de Internet, el cual se activa haciendo clic sobre ´el. Usando un enlace es posible, entre otros:

CAP´ITULO 4. HIPERMEDIA

58

Incluir archivos de diferente formato <bgsound src = "musica.wav"

loop = "infinite"

volume = "0">

Pasar de un lugar a otro en la misma p´agina web.

Ir a un sitio cualquiera de Internet.

Activar el programa cliente de correo electr´onico por defecto.

Ir a un sitio ftp. <a> es la etiqueta utilizada para definir enlaces. Tiene los siguientes atributos: accesskey: Especifica la tecla de acceso. Presionando alt y la tecla de acceso se selecciona el enlace. Un enlace seleccionado se activa presionando Enter. Si dos o m´as enlaces de una p´agina tienen la misma tecla de acceso, se seleccionar´an alternadamente. href: Especifica el destino, el cual puede ser de diferentes clases.

• Puede ser otra secci´on de la misma p´agina web. En este caso, debe utilizarse otra etiqueta <a> con el atributo name y como valor un nombre que sirva como punto de referencia para que sea el destino del enlace.

• Una p´agina de la misma m´aquina, especificando la ruta absoluta (desde el directorio ra´ız), o relativa (desde el directorio actual o en uso). Se puede especificar el sitio exacto en la p´agina destino utilizando el atributo name.

• Una p´agina en una m´aquina remota en la que se encuentre en ejecuci´on un servidor de p´aginas web. Se debe especificar el URL. • Acceso a un archivo o directorio de un servidor ftp como usuario an´onimo.

• Un buz´on de correo electr´onico. El valor ser´a mailto: acompa˜ nado de una direcci´on de correo electr´onico.

4.5. ENLACES

59

name: Permite asignar un nombre que sirva como punto de referencia para enlaces de la misma p´agina o de otras p´aginas. title: Permite especificar un texto en una peque˜ na caja de texto, alusiva al enlace.

Ver “Enlaces”.

Enlaces <a href = "#final" name = "inicio"> Enlace al final de esta pagina </a> <br> <a href = "formato1.htm" accesskey = "a"> Enlace a Formato1.htm </a> <br> <a href = "imagen.jpg" accesskey = "b"> Enlace a imagen.jpg </a> <br> <a href = "musica.mp3" title = "sonido mp3 haciendo clic sobre el video mpg"> <img dynsrc = "Video.mpg" width = "200" start = "mouseover"></a> <a href <img src </a><br>

= "http://www.redhat.com"> = "imagen.jpg" hspace = "50"

width = "200">

<a href = "ftp://cafe.uniquindio.edu.co"> Descargue de nuestro sitio ftp </a> <br> <a href = "mailto:jugutier@uniquindio.edu.co, carloseg@uniquindio.edu.co, leonardohernandez@uniquindio.edu.co"> Correo electronico autores </a> <br> <a href = "#inicio" name = "final"> Enlace al inicio de esta pagina </a>

El c´odigo HTML del ejemplo anterior produce la p´agina Web de la figura 4.6. Los ocho enlaces se detallan a continuaci´on:

60

CAP´ITULO 4. HIPERMEDIA

Figura 4.6: P´agina web con enlaces hipermedia

1. Enlace a un punto en la misma p´agina. <a href = "#final" name = "inicio" > Enlace al final de esta pagina </a> <br>

Observe que el texto “Enlace al final de esta pagina”, escrito en medio de las etiquetas <a> y </a> es el que aparece en la pantalla. Una vez que se hace clic en cualquier parte de este texto, el navegador busca un lugar en la p´agina web con una etiqueta <a name = "final">. Es de anotar que en este caso, se ha puesto un punto de referencia en este enlace, llamado inicio, el cual ser´a utilizado en el numeral 8, con un enlace que lleve al inicio de la p´agina web. Los nombres "inicio" y "final" son arbitrarios.

2. Enlace a otra p´agina en la misma m´aquina. <a href = "formato1.htm" accesskey = "a"> Enlace a Formato1.htm </a> <br>

Este enlace permite utilizar Alt+a para seleccionarlo. Pulsando la tecla Enter hace el mismo efecto que haciendo clic sobre el texto del enlace que aparece en la p´agina web.

4.5. ENLACES

61

3. Enlace a una imagen jpg de la misma m´aquina. <a href = "imagen.jpg" accesskey = "b"> Enlace a imagen.jpg </a> <br>

Este enlace permite abrir una nueva p´agina web la cual incluye una imagen. Se puede acceder con Alt+b y Enter.

4. Enlace a un sonido mp3 de la misma m´aquina. <a href = "musica.mp3" title = "sonido mp3 haciendo clic sobre el video mpg"> <img dynsrc = "Video.mpg" width = "200" start = "mouseover"> </a>

Con este enlace se abre una p´agina web, la cual carga un archivo de sonido mp3. Adem´as se escribe un t´ıtulo que indica la forma como se logra activar el enlace. Por otra parte, el enlace se logra haciendo clic sobre un video con extensi´on mpg.

Es en la etiqueta <img> donde se especifica el ancho en pixeles, lo mismo que la forma de iniciar la reproducci´on del video.

5. Enlace a una p´agina en Internet. <a href = "http://www.redhat.com"> <img src = "imagen.jpg" hspace = "50" </a> <br>

width = "200">

De forma similar al anterior, este enlace permite que al hacer clic se acceda a una p´agina web remota.

CAP´ITULO 4. HIPERMEDIA

62 6. Enlace a un sitio ftp de Internet.

<a href = "ftp://cafe.uniquindio.edu.co"> Descargue de nuestro sitio ftp </a> <br>

Este enlace permite ir a un sitio ftp como usuario remoto. Ver figura 4.7.

Figura 4.7: Direcci´on de un sitio ftp

7. Enlace para enviar un e-mail a un destino determinado. <a href = "mailto:jugutier@uniquindio.edu.co, carloseg@uniquindio.edu.co, leonardohernandez@uniquindio.edu.co"> Correo electronico autores </a> <br>

Este enlace activa el programa de correo electr´onico por defecto, por ejemplo Microsoft Outlook Express. El programa se activa con los datos del destinatario o de los destinatarios, escritos en la casilla correspondiente. Ver figura 4.8.

Figura 4.8: Destinatarios de correo

4.6. MAPAS SENSITIVOS

63

8. Enlace a un punto en la misma p´agina. <a href = "#inicio" name = "final"> Enlace al inicio de esta pagina </a>

Este c´odigo presenta un enlace con la parte inicial de la p´agina web.

Vale la pena aclarar que tambi´en es posible llegar a un punto espec´ıfico (name) de otra p´agina en Intenet. Lo u ´nico que hay que hacer es adicionar el URL correspondiente a la etiqueta href. Por ejemplo. Suponga que la p´agina web de www.redhat.com tiene un punto de referencia llamado support y que se desea llegar exactamente a ´el. El enlace ser´ıa: <a href = "http://www.redhat.com#support"> Enlace al Soporte de Red Hat </a>

4.6.

Mapas sensitivos

Como ya se ha mencionado, una imagen puede utilizarse para realizar enlaces.

Los mapas sensitivos permiten asociar m´ ultiples enlaces a diferentes zonas de una imagen. Las zonas pueden estar delimitadas por un ´area rectangular, circular o poligonal, especificando sus coordenadas, con respecto a la esquina superior izquierda, la cual tiene como coordenadas (0,0).

La etiqueta <map> se utiliza para iniciar un mapa sensitivo. Dentro de <map> - </map> se indican las zonas y los enlaces respectivos. Adem´as, los mapas deben llevar un nombre que permita su asociaci´on con la imagen.

Ver “Mapas sensitivos”.

En esta p´agina se puede observar que la imagen logos.jpg est´a asociada al mapa llamado Enlaces. Al nombre del mapa siempre se le antepone el caracter #. La p´agina Web correspondiente puede observarse en la figura 4.9.

Cada enlace y su correspondiente zona en la figura se explica a continuaci´on:

CAP´ITULO 4. HIPERMEDIA

64

Mapas sensitivos <map name <area shape href <area shape href <area shape href

= = = = = =

"Enlaces"> "rect" coords = "0,60,220,110" "http://www.yahoo.com" title = "Yahoo"> "circ" coords = "276,80,50" "http://www.cisco.com" title = "Cisco"> "poly" coords="366,12,452,10,454,72,472,74, 472,85,513,87,513,115,339,113,332,44" ="http://www.microsoft.com" title = "Microsoft">

</map> <img src = "logos.jpg"

usemap = "#Enlaces">

Figura 4.9: Ejemplo de mapas sensitivos

´ Area rectangular: Se especifica mediante las coordenadas de la esquina superior izquierda de la zona y la esquina inferior derecha. <area shape = "rect" href = "http://www.yahoo.com"

coords = "0,60,220,110" title = "Yahoo">

———————————————————————————————————–

Observe que el punto (0,60) corresponde a la esquina superior izquierda, y (220,110) son las coordenadas de la esquina inferior derecha.

4.6. MAPAS SENSITIVOS

65

´ Area circular: Es necesario indicar las coordenadas del centro y la longitud del radio.

<area shape = "circ" href = "http://www.cisco.com"

coords = "276,80,50" title = "Cisco">

———————————————————————————————————–

Las coordenadas del centro del c´ırculo son (276,80). El radio es de 50 pixeles. ´ Area poligonal: Especifique cada punto, uno a continuaci´on de otro.

<area shape = "poly" coords = "366,12,452,10,454,72, 472,74,472,85,513,87,513,115,339,113,332,44" href = "http://www.microsoft.com" title = "Microsoft"> ———————————————————————————————————–

Los puntos que corresponden a la poligonal se pueden apreciar en la tabla 4.1.

X 366 Y 12

452 454 10 72

472 74

472 513 85 87

513 339 115 113

Tabla 4.1: Puntos de una poligonal

332 44

CAP´ITULO 4. HIPERMEDIA

66

4.7.

Autoevaluaci´ on

1. Suponga que el archivo logo.jpg contiene la imagen del logo de alguna empresa. Escriba el c´odigo HTML necesario para que esta imagen aparezca en una p´agina Web. Nota: La imagen debe quedar centrada horizontalmente.

2. Elabore el c´odigo HTML necesario para que la imagen del punto anterior aparezca cuatro veces en una p´agina Web. Las im´agenes deben aparecer organizadas en un arreglo rectangular de dos filas por dos columnas.

Sugerencia: Cree una tabla de dos filas y dos columnas y ubique una imagen dentro de cada celda.

3. Suponga que el archivo presentacion.mpg contiene un video donde se muestra informaci´on general de cierta empresa. Elabore el c´odigo HTML necesario para incluir el video en una p´agina Web. La reproducci´on del video debe comenzar inmediatamente se abra la p´agina con una altura de 100 pixeles.

4. Asuma que el archivo historia.pdf contiene la historia de la computadora personal. Escriba el c´odigo HTML necesario para incluir este archivo con un ancho de 200 pixeles en una p´agina Web. El archivo no debe abrirse autom´aticamente sino mediante un clic.

5. Cierta p´agina Web con mensajes de autosuperaci´on, requiere m´ usica de fondo, la cual se encuentra en el archivo relax.mp3. Escriba el c´odigo HTML necesario para incluir la m´ usica, en la p´agina, con un volumen de -200. La m´ usica debe sonar dos veces y detenerse.

6. Escriba la etiqueta necesaria para incluir en una p´agina Web un enlace al sitio de correo electr´onico gratuito http://www.hotmail.com. El texto del enlace ser´a: Hotmail.

7. Escriba el c´odigo HTML necesario para incluir un punto de referencia (atributo name de la etiqueta href) en cierto lugar de una p´agina Web sobre Lenguajes de programaci´ on. El nombre del punto de referencia ser´a java, el cual ir´a en el punto exacto donde comienza una secci´on de la p´agina que trata sobre este lenguaje.

´ 4.7. AUTOEVALUACION

67

8. Escriba el c´odigo necesario para incluir en alg´ un lugar de la p´agina Web del punto anterior, un enlace al punto de referencia java, implementado en dicho punto. El texto del enlace ser´a: Lenguaje de programaci´ on JAVA. 9. Suponga que el archivo google.jpg contiene el logo del famoso motor de b´ usqueda Google. Escriba el c´odigo HTML necesario para que en una p´agina Web esta imagen sea un enlace a http://www.google.com.

10. En cierta p´agina del sitio Web de un profesor universitario se requiere un enlace a la p´agina fundamentos.htm del mismo sitio y de la misma carpeta de la p´agina inicial. Escriba el c´odigo HTML correspondiente.

11. En el ejercicio anterior, tambi´en se requiere un enlace para que los estudiantes env´ıen al profesor, por correo electr´onico, comentarios y preguntas sobre el sitio Web. Escriba el c´odigo HTML necesario para ´esto.

12. Suponga que la siguiente imagen se encuentra en el archivo pc.jpg. Se requiere que la imagen sea un mapa sensitivo a los puntos de referencia monitor, teclado y raton ubicados en la misma p´agina, mediante la etiqueta <href>, atributo name. Por ejemplo, si se hace clic sobre el monitor, el navegador debe ir al punto de referencia monitor. Escriba el c´odigo HTML necesario para crear este mapa sensitivo. Ver figura 4.10.

Figura 4.10: Ejercicio de mapas sensitivos

68

CAP´ITULO 4. HIPERMEDIA

“Estar en posici´on de una mente vigorosa no es suficiente; el primer requisito es aplicarla correctamente”.

Ren´e Descartes

5

Frames, estilos y capas 5.1.

Frames

En algunas ocasiones es necesario que una p´agina web sea dividida en zonas independientes llamadas frames o marcos. Cada zona se comporta como una p´agina web con sus propios bordes y barras de desplazamiento.

En un documento HTML se especifican los frames en cuanto a tama˜ no y distribuci´on, lo mismo que la p´agina web que ser´a contenida en cada uno de ellos.

Las principales etiquetas utilizadas para la creaci´on de frames son: <frameset>: Define los par´ametros generales de un conjunto de frames.

Los frames por s´ı solos son definidos con el uso de la etiqueta <frame>.

Si se define esta etiqueta, la p´agina web no tiene la etiqueta <body>. <frameset> tiene los siguientes atributos: • border: Indica el grosor del borde entre marcos, especificado en pixeles.

CAP´ITULO 5. FRAMES, ESTILOS Y CAPAS

70

• cols: Especifica la divisi´on en frames verticales. Los valores, separados por comas, pueden ir expresados en pixeles o porcentaje, donde cada valor representa un frame. Un s´ımbolo * indica “la cantidad restante”, hasta completar el 100% o el total de pixeles de la pantalla.

• frameborder: Determina la existencia del borde para el conjunto de frames. Sus valores son "yes" o "no".

• rows: Especifica la divisi´on en frames horizontales. Los valores, separados por comas, pueden ir expresados en pixeles o porcentaje, donde cada valor representa un frame. De igual manera que en el atributo cols, un s´ımbolo * indica “la cantidad restante”, hasta completar el 100% o el total de pixeles de la pantalla. <frame>: Define los par´ametros generales de un solo frame. Esta etiqueta no tiene la correspondiente </frame>. Sus atributos son los siguientes: • frameborder: Determina la existencia del borde para el frame.

Sus valores son "yes" o "no".

• marginheight: Es la cantidad de pixeles que separan el frame de sus bordes superior e inferior.

• marginwidth: Es la cantidad de pixeles que separan el frame de sus bordes izquierdo y derecho.

• name: Este atributo permite asignar un nombre al frame.

• noresize: Indica que la posibilidad de cambiar el tama˜ no del frame no est´a disponible para el usuario.

• src: Especifica la ubicaci´on del contenido inicial del frame.

Ver “Frames (1)”.

En el ejemplo “Frames (1)”, se crea una divisi´on de la ventana principal del navegador en tres frames verticales, donde los dos primeros ocupan el 20% del espacio y el tercer frame el espacio restante. Los nombres de los frames son frame1, frame2 y frame3.

En cada frame se incluye una p´agina web. Los nombres son contenido1.html, contenido2.html y contenido3.html, respectivamente. La p´agina web dividida en frames se puede apreciar en la figura 5.1.

5.1. FRAMES

71 Frames (1)

<frameset cols <frame name <frame name <frame name </frameset>

= = = =

"20%,20%,*"> "frame1" src = "contenido1.html"> "frame2" src = "contenido2.html"> "frame2" src = "contenido3.html">

Figura 5.1: p´agina web con frames (1)

Ver “Frames (2)”.

Frames (2) <frameset cols = "30%,70%"> <frame name = "frame1" src = "contenido1.html"> <frameset rows = "*,40%"> <frame name = "frame2" src = "contenido2.html" marginheight = "30" marginwidth = "30"> <frame name = "frame3" </frameset> </frameset>

src = "contenido3.html" noresize>

En el ejemplo “Frames (2)”, se crean dos frames verticales, los cuales ocupan el 30% y el 70% del espacio horizontal. El frame cuyo nombre es frame1, tiene asociada la p´agina web contenido1.html.

El segundo frame se encuentra dividido en dos frames horizontales, el primero con el 60% y el segundo con el 40%, llamados frame2 y frame3, asociados a

CAP´ITULO 5. FRAMES, ESTILOS Y CAPAS

72

contenido2.html y contenido3.html, respectivamente. La apariencia de la p´agina web que se divide en estos frames se puede observar en la figura 5.2.

Figura 5.2: p´agina web con frames (2)

5.2.

Etiqueta < style >

Las p´aginas web generalmente se construyen de tal manera que el navegador interprete de la mejor manera su presentaci´on en la pantalla. La etiqueta <style> permite definir un estilo para otras etiquetas en cuanto a su formato, tal como el tipo de letra, el tama˜ no, el color de la letra y del fondo, las m´argenes, etc.

Debido a que no todos los navegadores soportan la etiqueta <style>, se recomienda escribir su contenido como comentario HTML para evitar inconvenientes.

Ver “Ejemplo de estilos”.

Ejemplo de estilos <html> <head> <title>Ejemplo de estilos</title>

La primera parte de este ejemplo establece el comienzo de la p´agina web.

5.2. ETIQUETA < ST Y LE >

<style type = "text/css"> <!-body { font-family : font-size : margin-left : margin-right : }

73

times,sans-serif; medium; 0.5in; 0.5in

En esta parte se encuentra la definici´on del estilo para la p´agina web. El atributo type indica el tipo de informaci´on contenida en la etiqueta <style>.

En este caso, corresponde a texto css1 . Ver p´agina 79.

El estilo que se desea establecer es para la etiqueta body, con las siguientes propiedades: font-family: Utilizar la fuente times o en su defecto sans-serif, la cual se encuentra generalmente en todas las computadoras. font-size: El tama˜ no de la letra ser´a medium.

Los valores posibles son: xx-large, x-large, large, medium, small, x-small, xx-small; o mediante una longitud, la cual puede ser expresada en puntos (pt), cent´ımetros (cm) o pulgadas (in). margin-left: Especifica la margen izquierda. Puede medirse en cent´ımetros, pulgadas, puntos o porcentaje, entre otras. margin-right: Especifica la margen derecha. Adem´as, puede utilizar margin-top (margen superior) y margin-bottom (margen inferior).

En la etiqueta body, tambi´en puede especificar otros atributos entre los que se destacan background-color para el color del fondo y color para el color de la fuente predeterminada.

1

CSS: Hojas de estilo en cascada (Cascade StyleSheet).

CAP´ITULO 5. FRAMES, ESTILOS Y CAPAS

74

h2

{ font-family:arial,sans-serif; font-size:0.6cm; color:blue }

En esta parte del ejemplo se est´a especificando el estilo de los encabezados de nivel 2. Adem´as de las caracter´ısticas de la fuente y se establece el color para el texto. b

{ font-family:times,sans-serif; font-size:12pt; color:#6767ff }

El estilo de un texto en negrita, tambi´en puede ser cuidadosamente especificado. En este caso, el color es un tono de azul cuyo c´odigo RGB es #6767ff. th

{ font-family:tahoma,sans-serif; font-size:medium; color:white; background-color:#6767ff }

Los encabezados de una tabla se hacen con letra blanca mediana y fondo azul. td

{ font-family:courier,sans-serif; font-size:small; color:#6767ff }

Los datos de una tabla se har´an con letra peque˜ na y de color RGB es #6767ff.

5.2. ETIQUETA < ST Y LE >

tt

75

{ font-family:courier, sans-serif; font-size:12pt; color:red }

El tipo m´aquina de escribir utilizar´a letra tipo courier de 12 puntos y color rojo.

--> </style> </head>

Esta parte contiene el final del comentario y el cierre de la etiquetas <style> y <head>. <body> <H2>Internet y el protocolo TCP/IP</H2> <b>TCP/IP</b> es el protocolo utilizado por Internet, la red de computadoras m&aacute;s importante del mundo; y por la mayor&iacute;a de las redes locales que encontramos hoy en d&iacute;a.

Diariamente millones de personas utilizan <tt>TCP/IP</tt> cuando ev&iacute;an un mensaje de correo electr&oacute;nico o cuando descargan un archivo de Internet, aunque muchos no se den cuenta.

Algunos protocolos que se incluyen en <b>TCP/IP</b> son: <p> <table border=1 cellspacing=2 cellpadding=2> <tr> <th>Nombre <th>Descripci&oacute;n </tr>

CAP´ITULO 5. FRAMES, ESTILOS Y CAPAS

76

<tr> <td>HTTP <td>Transferencia de p&aacute;ginas web </tr> <tr> <td>SMTP <td>Correo Electr&oacute;nico </tr> <tr> <td>FTP <td>Transferencia de archivos </tr> </table> </body> </html>

El texto correspondiente a esta parte, es la informaci´on que se quiere mostrar en la p´agina web y el final de ella. Observe que en el texto de esta parte del ejemplo, no se hace ninguna especificaci´on sobre fuente, tama˜ no o color. Es decir, ha sido la etiqueta <style> la que ha actuado. Ver figuras 5.3 y 5.4.

Figura 5.3: p´agina web sin estilos

5.2. ETIQUETA < ST Y LE >

77

Figura 5.4: p´agina web con estilos

Es importante aclarar algunos aspectos: Para el atributo font-family se escribe una lista de familias de fuentes separadas por comas. Es posible que las fuentes correspondientes a la lista est´en presentes en el computador donde ser´a visualizada la p´agina web. El navegador debe buscar en orden y aplicar la primera que encuentre. En caso de que no encuentre ninguna, deber´a utilizar la fuente por defecto. Algunos ejemplos de familias de fuentes son: Times, Arial, Verdana, Tahoma, Arioso, entre otras.

El color se puede indicar espec´ıficamente mediante su nombre o en formato RGB. Los colores que tienen nombres son: aqua gray navy silver

black blue green lime olive purple teal white

fuchsia maroon red yellow

Tabla 5.1: Nombres de colores Si se desea aplicar el mismo estilo a m´as de una etiqueta, simplemente se separan por comas y luego se especifica el estilo. Cada propiedad va seguida

78

CAP´ITULO 5. FRAMES, ESTILOS Y CAPAS

de un signo de dos puntos (:) y las propiedades se separan entre s´ı por el signo punto y coma (;). Las propiedades de una etiqueta se encierran entre llaves ({ ... }).

Por otra parte, si el objetivo es definir el estilo en una p´agina web individual, se puede hacer uso de la etiqueta <style> en el encabezado de la p´agina. Si por el contrario, lo que se pretende es definir un estilo para un sitio web, de manera que todas sus p´aginas tengan la misma apariencia, es mejor escribir un archivo con extensi´on .css, donde se especifique el estilo, de igual manera que con la etiqueta <style>. Este archivo se debe referenciar en todas las p´aginas web que conforman el sitio, utilizando la etiqueta <link> en el encabezado de cada p´agina web en lugar de la etiqueta <style>.

Ver “Ejemplo de estilos con un archivo externo”.

Ejemplo de estilos con un archivo externo <head> <title>Ejemplo de estilos con un archivo externo</title> <link rel="stylesheet" type="text/css" href="estilo.css"> </head>

En este caso, se hace referencia al archivo css para que de all´ı se tome el estilo. <link>: Establece un enlace con un archivo externo, puede ser un archivo de estilos, otro documento HTML, entre otros. Esta etiqueta se inserta en el encabezado (<head>) y puede ser utilizado tantas veces como sea necesario.

Sus atributos son los siguientes: rel="stylesheet": El argumento rel, indica la relaci´on entre el documento y el archivo especificado en el atributo href. En este caso hace referencia a un archivo externo de estilo. type="text/css": El atributo type indica el tipo de informaci´on contenida en el archivo. En este caso indica que es un archivo de texto css.

5.3. CAPAS

79

href="estilo.css": El atributo href indica el URL donde se encuentra el archivo. En este caso se llama "estilo.css" en la misma carpeta de la p´agina web.

Si varias p´aginas web comparten el mismo archivo, pueden tomar cualquier cambio que se haga en el archivo css. Por esta raz´on se les llama “Hojas de estilo en cascada”.

Ver “estilo.css”. estilo.css body

{ font-family font-size margin-left margin-right

: : : :

times,sans-serif; medium; 0.5in; 0.5in

} —————————————————————————————————————— tt

{ font-family:courier, sans-serif; font-size:12pt; color:red }

5.3.

Capas

Una capa es una secci´on de una p´agina web sobre la cual se define un estilo el cual va a indicar la posici´on que tomar´a en el documento. Adem´as, tiene la posibilidad de ser visible o no y estar superpuesto con otros elementos.

Las capas se pueden crear utilizando posicionamiento CSSP (posicionamiento CSS). Es importante que el navegador soporte CSSP para que se puedan visualizar las capas en las p´aginas web.

CSSP es una extensi´on de CSS, y permiten un control a nivel de pixel sobre la ubicaci´on de los elementos de una p´agina web.

CAP´ITULO 5. FRAMES, ESTILOS Y CAPAS

80 Propiedades de los cssp:

position: Define la forma de posicionamiento de la capa. Si el valor es absolute las dimensiones ser´an tomadas con respecto a la esquina superior izquierda. Por el contrario, si es relative, las dimensiones ser´an tomadas con respecto a la posici´on actual de las coordenadas (x,y) del documento HTML. left: Define la distancia a la izquierda que tendr´a la capa. top: Define la distancia desde hacia arriba que tendr´a la capa. width: Define el ancho de la capa. height: Define la altura de la capa. clip: Define un rectangulo visible, medido en pixeles (tama˜ no, no coordenadas), en la secuencia (arriba,derecha,abajo,izquierda). visibility: Puede tomar uno de tres valores para determinar si la capa ser´a "visible", "hidden" (oculta) o "inherit" (hereda visibilidad, opci´on por defecto). z-index: Define la profundidad de la capa, siendo cero (0) la que se encuentra m´as abajo. background-color: Define el color de fondo de la capa.

5.3.1.

Ejemplo

Ver “Ejemplo de capas”.

La p´agina web generada por el c´odigo HTML anterior corresponde a la figura 5.5.

´ 5.4. AUTOEVALUACION

81 Ejemplo de capas

<DIV STYLE="position: absolute; top:10px; left:10px; width:120px; z-index=0;"> <img src="neumann.jpg" width="120" height="158"> </DIV> <DIV STYLE="position: absolute; top:30px; left:120px; width:96px; z-index=1"> <img src="babbage.jpg" width="96" height="96"> </DIV> <DIV STYLE="position: absolute; top:70px; left:90px; width:99px; z-index=2 "> <img src="turing.jpg" width="99" height="123"> </DIV>

Figura 5.5: Ejemplo de capas

5.4.

Autoevaluaci´ on

1. Escriba el c´odigo HTML necesario para obtener una p´agina web con tres frames. La p´agina debe aparecer dividida en dos secciones horizontales, la primera con el 45% de la altura disponible y la segunda con el 55%. La primera de estas dos secciones, a su vez, se subdividir´a en dos secciones verticales, la primera con el 30% del ancho disponible y la segunda con el 70%. Las tres secciones resultantes contendr´an respectivamente los t´erminos: Men´ u, Correo Electr´onico y Foro.

82

CAP´ITULO 5. FRAMES, ESTILOS Y CAPAS La figura 5.6 muestra una idea de la forma como debe quedar la p´agina web.

Figura 5.6: Ejercicio de Frames

2. Obtenga en Internet tres im´agenes sobre alg´ un tema de su predilecci´on: f´ utbol, ecolog´ıa, salud, esoterismo etc. Elabore una p´agina web que muestre las tres im´agenes superpuestas de alguna manera que usted considere agradable.

3. Experimente con el navegador Internet Explorer el uso de estilos en una etiqueta, en una p´agina y desde un archivo CSS, que afecten a la misma etiqueta. Encuentre una regla que determine el estilo que prevalece cuando se tiene esa situaci´on.

4. Usando la etiqueta <style>, escriba el c´odigo HTML correspondiente a la siguiente p´agina web. Observe en la figura 5.7 las siguientes caracter´ısticas: Todo el texto est´a en tipo Verdana.

El encabezado principal es de nivel 3 y sus letras son de color verde.

Las letras del encabezado van en tama˜ no Small. Las de los datos de la tabla van en tama˜ no xx-small. Las restantes letras van en tama˜ no x-small.

Los encabezados de columna de tabla van en letras azules sobre fondo amarillo.

Todas las caracter´ısticas deben ser especificadas mediante la etiqueta <style>.

´ 5.4. AUTOEVALUACION

Figura 5.7: Ejercicio de Estilos

83

84

CAP´ITULO 5. FRAMES, ESTILOS Y CAPAS

“No hay signo m´as claro de locura que repetir lo mismo una y otra vez esperando resultados distintos”.

Albert Einstein

6

Formularios Cuando es necesario que a trav´es de una p´agina web se solicite informaci´on al usuario, se requiere la elaboraci´on de formularios.

Los formularios presentan de una manera muy amistosa, una serie de elementos que el usuario puede utilizar para ingresar informaci´on que ser´a procesada posteriormente. El proceso mencionado puede hacerse mediante el env´ıo de esta informaci´on a un buz´on de correo electr´onico, o pasarla a programas que colaboran con HTML para la producci´on de p´aginas web activas o de contenido din´amico. Los formularios se delimitan utilizando <form> - </form>.

6.1.

Etiqueta < input >

Esta etiqueta se utiliza para ingresar la mayor´ıa de los datos a un formulario.

El atributo principal es type el cual especifica el tipo de entrada que se desea utilizar. Los tipos de entrada asociados a la etiqueta <input> son: Text: Es una caja de texto para ingresar mensajes o n´ umeros desde el teclado. Se utiliza cuando el usuario ingresar´a una informaci´on totalmente desconocida, como por ejemplo un nombre, el peso, la edad, etc.

CAP´ITULO 6. FORMULARIOS

86

Nombre: <input

name="nombre" type="text"

size="50">

—————————————————————————————————————–

El atributo name se utiliza para asignar un nombre a la entrada de texto y size especifica el ancho en caracteres.

CheckBox: Es un conjunto de opciones que se pueden elegir, m´ınimo ninguna, m´aximo todas.

Lenguajes de programaci&oacute;n que conoce: <input name = "lenguaje" type = "checkbox" value <input name = "lenguaje" type = "checkbox" value <input name = "lenguaje" type = "checkbox" value <input name = "lenguaje" type = "checkbox" value

= = = =

"CPP"> "JV" > "DLP"> "ST" >

C++ Java Delphi Small Talk

——————————————————————————————————————

El atributo value indica el valor que tomar´a la variable (lenguaje en este caso), cuando esta opci´on sea seleccionada. El texto que acompa˜ na cada entrada aparecer´a en la p´agina.

Puede ser necesario agregar corchetes al nombre de la variable (name= "lenguaje[]"), dependiendo del lenguaje que se utilice para procesar el formulario. Los corchetes se requieren para el caso del lenguaje PHP, pero no se deben usar en JavaScript o VBScript.

Radio: Es un conjunto de opciones entre las que se puede hacer una selecci´on exclusiva, es decir, solo se puede elegir una.

6.1. ETIQUETA < IN P U T >

Sexo: <input <input

87

name = "sexo" type = "radio" value = "Fem"> Femenino name = "sexo" type = "radio" value = "Mas"> Masculino

——————————————————————————————————————

Hidden: Es la forma que ofrece HTML para pasar datos a otros programas de manera oculta al usuario, es decir, sin que los datos se desplieguen en la p´agina. <input name = "version"

type = "hidden" value = "1.0">

——————————————————————————————————————

Password: Es una caja de texto utilizada para ingresar una clave de acceso.

En la caja aparecen asteriscos, a medida que se ingresan los caracteres.

Clave: <input name = "clave"

type = "password"

size = "8" >

——————————————————————————————————————

Reset: Es un bot´on que permite inicializar el formulario con los valores por defecto, para que el usuario pueda empezar a diligenciarlo. <input type = "reset" value = "Limpiar"> ——————————————————————————————————————

Submit: Es un bot´on de aprobaci´on, para enviar los datos del formulario.

CAP´ITULO 6. FORMULARIOS

88

<input type="submit" value="Enviar" > ——————————————————————————————————————

Image: Es un bot´on que tiene la forma de una imagen en lugar de la forma tradicional de bot´on. La imagen se especifica mediante su ruta y nombre en el disco. <input name="grafico" type="image" src="email.jpg" width="50" title="Aceptar"> ——————————————————————————————————————

Al hacer clic sobre la imagen, se logra el mismo efecto que si tuviera un bot´on submit. Adem´as, se env´ıan los atributos grafico.x y grafico.y (coordenadas de la imagen en donde se hizo clic). En este caso, grafico corresponde al nombre del bot´on.

File: Es un bot´on especial que permite ingresar la ruta y el nombre de un archivo directamente o mediante la ventana de exploraci´on del sistema de archivos del sistema operativo.

Nombre del archivo : <br> <input name="archivo" type="file" size="40" > ——————————————————————————————————————

Al hacer clic en el bot´on Examinar se lanza la aplicaci´on del sistema operativo que permite navegar por las carpetas del disco duro. Ver figura 6.1.

6.1. ETIQUETA < IN P U T >

89

Figura 6.1: Ventana de exploraci´on de Windows

Button: Es un bot´on que se puede asociar a eventos en diferentes lenguajes de programaci´on para Internet. <input type language value onClick

= = = =

"button" "JavaScript" "Mensaje JavaScript" "alert(’Se ha generado un evento’)">

——————————————————————————————————————

Cuando se desea que al hacer clic sobre un bot´on se realice una acci´on determinada, se utiliza el atributo onclick, al cual se le asigna un script. En este caso, se ha asociado el llamado al m´etodo alert del lenguaje JavaScript.

Al hacer clic en el bot´on Mensaje JavaScript, aparece una nueva ventana con el mensaje Se ha generado un evento. Ver figura 6.2.

Otros eventos que se pueden tener en cuenta, tanto en el tipo button como en los dem´as tipos de entrada, son: onBlur: Ocurre cuando el elemento del formulario pierde foco,

90

CAP´ITULO 6. FORMULARIOS

Figura 6.2: Ventana con un mensaje de JavaScript

es decir, cuando se presiona Enter, Tab, o se hace clic en otro elemento. onChange: Ocurre cuando se modifica el valor del elemento y se pierde el foco. onClick: Ocurre cuando se hace clic sobre el elemento. onDblClick: Ocurre cuando el usuario hace doble clic sobre el elemento. onFocus: Ocurre cuando un elemento obtiene el foco. onKeyDown: Ocurre cuando una tecla es presionada sobre el elemento. A continuaci´on la tecla es procesada. onKeyPress: Es equivalente a onkeydown sin tener en cuenta algunas teclas especiales o de control como por ejemplo BackSpace, Control, Shift, entre otras. onKeyUp: Ocurre cuando una tecla es liberada sobre el elemento. onLoad: Ocurre cuando la p´agina web es cargada a la memoria. onMouseDown: Ocurre cuando se presiona el bot´on del mouse mientras que el puntero se˜ nala el elemento. A pesar de que al momento de dar clic sobre un elemento se le da foco, no se debe confundir con el evento onfocus. onMouseMove: Ocurre cuando el puntero del rat´on se mueve dentro del ´area del elemento. onMouseOut: Ocurre cuando el puntero del rat´on abandona el ´area del elemento. onMouseOver: Ocurre cuando el puntero del rat´on ingresa al ´area del elemento.

´ 6.2. EJEMPLO DE UNA PAGINA WEB CON EVENTOS

91

onMouseUp: Ocurre cuando se libera el bot´on dentro del ´area del elemento. onSelect: Ocurre cuando se selecciona texto en un campo de texto del formulario, ya sea con el teclado o con el rat´on. onSubmit: Ocurre cuando se hace clic en el bot´on de enviar los datos del formulario, bot´on de tipo submit. onUnLoad: Ocurre cuando se cierra la p´agina.

6.2.

Ejemplo de una p´ agina web con eventos

El siguiente ejemplo muestra la forma de utilizar eventos para validar1 las entradas a un formulario. Ver figura 6.3.

Figura 6.3: Validaci´on de un formulario En el caso del ejemplo, se solicitan a trav´es de un formulario, el nombre de una persona y dos notas, las cuales pueden tomar valor entre 0.0 y 5.0. Se pretende validar que el campo nombre tenga siempre contenido y que las notas contengan informaci´on num´erica en el rango permitido.

Para poder realizar esta validaci´on se requiere la ayuda de un lenguaje de programaci´on, como JavaScript (ver p´agina 107) o VisualBasicScript (ver p´agina 179).

Ver “Validaci´ on de Formularios”.

1

Validar: Forma de evitar que los datos recibidos en una variable tomen valores no permitidos.

CAP´ITULO 6. FORMULARIOS

92

Validaci´ on de Formularios <html> <head> <title> Validaci&oacute;n de formularios </title> </head>

Antes de explicar el funcionamiento de esta p´agina web, se debe aclarar que la p´agina se ha dividido en bloques para facilitar la explicaci´on. Sin embargo, todas las partes conforman un u ´nico archivo, el cual puede llamarse Validar.html, por ejemplo.

El primer bloque muestra el encabezado de la p´agina. <body> <h3>ENTRADA DE DATOS</h3> <form name = "datos" action ="mailto: carloseg@uniquindio.edu.co; jugutier@uniquindio.edu.co; leonardohernandez@uniquindio.edu.co" method = "post" >

Este bloque indica el inicio de un formulario llamado datos. El atributo action indica la consecuencia o acci´on que debe ejecutar el navegador cuando el usuario haga clic sobre el bot´on Aceptar. En este caso, se enviar´an los datos ingresados a los tres buzones de correo electr´onico especificados utilizando el m´etodo post.

Los formularios en HTML utilizan dos m´etodos de transferencia de datos, llamados m´etodo post y m´etodo get.

El m´etodo post env´ıa la informaci´on por un canal diferente al utilizado para enviar la p´agina web (los archivos que la conforman). Por lo tanto, los datos no son visibles al usuario. Por otra parte, el m´etodo get transmite por el mismo canal, dejando ver al usuario los valores en el campo URL del navegador.

´ 6.2. EJEMPLO DE UNA PAGINA WEB CON EVENTOS

93

Nombre : <input name = "nombre" type = "text" size = "50" language = "JavaScript" onBlur = "validarCadena( nombre, ’Error en Nombre’ ); "><p>

Observe que la caja de texto tiene asociado el evento onblur y la funci´on validarCadena la cual hace parte de la p´agina web y est´a escrita en JavaScript (Ver p´agina 94).

Cuando la caja de texto pierda foco, el navegador ejecuta la funci´on, la cual validar´a la entrada. La funci´on necesita el nombre de la variable y el mensaje que saldr´a en la p´agina, en caso de una entrada no v´alida.

Primera Nota: <input name = "n1" type = "text" size = "5" language = "JavaScript" onChange = "validarFloat( n1, ’Error en la Primera Nota’, 0.0, 5.0 );"> <p> Segunda Nota: <input name = "n2" type = "text" size = "5" language = "JavaScript" onChange = "validarFloat( n2, ’Error en la Segunda Nota’, 0.0, 5.0 );">

De manera similar a la validaci´on del nombre, en este caso se asocia al evento onchange la funci´on validarFloat la cual recibe adem´as los valores m´ınimo y m´aximo permitidos. Observe que el evento ocurre cuando se produce un cambio en la caja de texto y se pierde el foco.

CAP´ITULO 6. FORMULARIOS

94

<p> <input type = "reset" value = "limpiar"> <input type = "submit" value = "aceptar" language = "javascript" onclick = "validarformulario ( datos )"> </form> </body> </html>

El bloque anterior indica la parte final tanto del formulario como de la p´agina web. En caso de que el usuario haga clic sobre el bot´on Aceptar, se ejecuta la funci´on validarFormulario la cual recibe todo el formulario datos, para su validaci´on.

A continuaci´on se detallan las funciones de validaci´on que conforman la p´agina web. Estas funciones aparecen dentro de la etiqueta <script>. El atributo language indica el lenguaje de scripts a utilizar, en este caso, se utiliz´o JavaScript. <script language = "javascript" > function validarCadena ( elemento, mensaje ) { if ( elemento.value == ’’ ) { alert( mensaje ); elemento.focus(); } }

En esta funci´on, si el valor del elemento (elemento.value) es nulo, se muestra una ventana de alerta con el mensaje especificado en la variable mensaje y se le da foco de nuevo para su entrada. Es decir, el usuario no puede salir de este campo sin teclear informaci´on alguna.

´ 6.2. EJEMPLO DE UNA PAGINA WEB CON EVENTOS

95

function validarFloat ( elemento, mensaje, inferior, superior ) { var valor; valor = parseFloat ( elemento.value ); if ( valor < inferior || valor > superior || isNaN ( valor ) ) { alert( mensaje ); elemento.value=’0.0’; } }

En este ejemplo, la funci´on validarFloat se activa cuando ocurre un cambio en la entrada de una nota y se pierde el foco, o si la funci´on es llamada directamente.

La funci´on convierte a flotante el valor almacenado en la caja de texto. Este valor se verifica para evitar errores. En este caso, si este valor se encuentra por fuera del rango permitido (valor < inferior || valor > superior) o el valor no es num´erico (isNaN ( valor )), se muestra el mensaje de alerta especificado y se asigna el valor 0.0 a la caja de texto. function validarFormulario ( formulario ) { validarCadena( formulario.nombre, "Error en Nombre"); validarFloat ( formulario.n1, "Error en la Primera Nota", 0.0, 5.0); validarFloat ( formulario.n2, "Error en la Segunda Nota", 0.0, 5.0); } </script>

La funci´on validarFormulario se encarga de validar los tres campos del formulario haciendo un llamado directo a las funciones validarCadena y validarFloat.

Es de anotar que el ejemplo ilustra el uso de los eventos. Sin embargo, a pesar de que es recomendable validar las entradas, no es obligaci´on hacerlo en cada uno de los campos de los formularios o al hacer clic en el bot´on Aceptar.

Observe adem´as la etiqueta </script>.

CAP´ITULO 6. FORMULARIOS

96

6.3.

Etiqueta < select >

Esta etiqueta se utiliza para crear listas para selecci´on u ´nica o m´ ultiple.

Selecci´ on u ´ nica: Presenta una lista desplegable la cual se ampl´ıa cuando se hace clic en la flecha que acompa˜ na la opci´on visible.

La etiqueta <option> debe acompa˜ nar cada una de las opciones que se desea incluir en la lista. La opci´on por defecto es la que se marca con el atributo selected. Si no se selecciona ninguna, la opci´on por defecto ser´a la primera.

Nivel de Estudios : <select name = "nivel"> <option selected> Bachiller <option> T&eacute;cnico <option> Tecn&oacute;logo <option> Universitario <option> Posgrado <option> Otro </select> ——————————————————————————————————————

Selecci´ on m´ ultiple: Presenta una lista de la cual se pueden seleccionar varias opciones, haciendo clic en cada una sin soltar la tecla Ctrl, o haciendo clic en la primera y u ´ltima, presionando la tecla Mayuscula Shift (seleccionando todas las opciones entre ese rango).

6.4. OTROS ATRIBUTOS DE LA ETIQUETA < SELECT >

Sistema operativo favorito : <select name = "sistema" size = "3" <option selected> Linux <option> Windows <option> MacOS <option> FreeBSD </select>

97

multiple>

——————————————————————————————————————

La etiqueta <option> debe acompa˜ nar cada una de las opciones que se desea incluir en la lista. Las opciones por defecto (opcional) se marcan con el atributo selected.

Es de aclarar que el lenguaje PHP requiere que se utilice un vector para almacenar las posibles opciones seleccionadas (una o m´as). Por lo tanto, si se usa este lenguaje, se deben agregar corchetes ([]) a continuaci´on del nombre de la variable. Por ejemplo: name = "sistema[]"

6.4.

Otros atributos de la etiqueta < select >

accesskey: Se utiliza para indicar el acceso al elemento. Ver p´agina 58. title: Indica el titulo de un elemento de un formulario. Ver p´agina 51. src: Indica la ubicaci´on de un archivo. Ver p´agina 51. disabled: Desactiva un elemento de un formulario, generalmente para una salida. Impide que el usuario pueda interactuar con el elemento deshabilitado. Por ejemplo, seleccionar o editar. maxlenght: Especifica la m´axima cantidad de caracteres permitida.

Opera en las cajas de texto tipo text y tipo password. readonly Impide cambiar el contenido de un elemento del formulario tipo text, textarea, password. Su objetivo es evitar los cambios a los datos (generalmente salida) sin limitar la interacci´on con el usuario.

CAP´ITULO 6. FORMULARIOS

98

tabindex: Permite fijar de cierta manera el orden de los elementos de un formulario al presionar la tecla Tab o Mayuscula Tab.

6.5.

Etiqueta < textarea >

Es una caja de texto la cual permite que el usuario escriba varias l´ıneas de texto.

Observaciones: <textarea name = "observacion" cols = "15" rows = "5"> Texto que aparece por omision en el area de texto. </textarea> ——————————————————————————————————————

Los atributos cols y rows especifican la cantidad de caracteres (columnas y filas) que puede contener la caja de texto para una entrada. En texto que se escriba entre <textarea> y </textarea> aparecer´a como texto por defecto.

6.6.

Agrupaci´ on de elementos

La agrupaci´on de elementos se utiliza para mejorar el aspecto de un formulario, de manera que se puedan reunir algunos elementos como integrantes de una misma secci´on.

6.6.1.

Etiqueta < f ieldset >

Permite establecer un conjunto de elementos que se agrupan.

6.7. EJEMPLO DE UN FORMULARIO

6.6.2.

99

Etiqueta < legend >

Es el texto que acompa˜ na un grupo de elementos de un formulario para su identificaci´on. Su objetivo es proporcionar claridad o mejorar la apariencia del formulario.

6.6.3.

Etiqueta < label >

Es una etiqueta que permite asociar un texto a un elemento del formulario.

6.7.

Ejemplo de un formulario

Ver “Ejemplo de un formulario”.

Ejemplo de un formulario <h3>FORMULARIO DE ENTRADA</h3> <form action = "mailto: carloseg@uniquindio.edu.co; jugutier@uniquindio.edu.co; leonardohernandez@uniquindio.edu.co" method = "post" > <fieldset> <legend align = "right"> <b>Formulario de consuta</b> </legend><p> <fieldset> <legend align = "center"> <b>Datos personales</b> </legend>

CAP´ITULO 6. FORMULARIOS

100

Ver “Continuaci´ on - Formulario - Parte 2 de 3”.

Continuaci´ on - Formulario - Parte 2 de 3 <label> Nombre : <input name = "nombre" </label> <p>

type = "text"

size = "50">

<label> Nivel de Estudios : <select name = "nivel"> <option selected> Bachiller <option> T&eacute;cnico <option> Tecn&oacute;logo <option> Universitario <option> Posgrado <option> Otro </select> </label> <label> Sexo : <input name = "sexo" <input name = "sexo" </label><p>

type = "radio" type = "radio"

value = "Femenino" > Femenino value = "Masculino"> Masculino

</fieldset> <p> <fieldset> <legend align = "center"> <b>Datos de preferencia</b> </legend><p> <label> Lenguajes de programaci&oacute;n que conoce: <input name="lenguaje" type="checkbox" value="C++" >C++ <input name="lenguaje" type="checkbox" value="Java" >Java <input name="lenguaje" type="checkbox" value="Delphi" >Delphi <input name="lenguaje" type="checkbox" value="Small Talk">Small Talk </label> <p>

6.7. EJEMPLO DE UN FORMULARIO

101

Ver “Continuaci´on - Formulario - Parte 3 de 3”.

Continuaci´ on - Formulario - Parte 3 de 3 <label> Sistema operativo favorito : <select name = "sistema" size = "3" multiple> <option selected> Linux <option> Windows <option> MacOS <option> FreeBSD </select> </label> Observaciones: <textarea name = "observaciones" cols = "15" rows = "5"> </textarea><p> </fieldset> <p> <label> Clave : <input name = "clave" </label>

type = "password"

<input name = "version"

type = "hidden"

<input type = "reset" <input type = "submit"

value = "Limpiar"> value = "Enviar" >

size = "8" >

value = "1.0">

</fieldset> </form>

La figura 6.4 muestra la apariencia final del formulario con unos datos de prueba para que se pueda apreciar la informaci´on que se env´ıa.

102

CAP´ITULO 6. FORMULARIOS

Figura 6.4: p´agina web con un formulario Los datos que captura el formulario son enviados por correo electr´onico al buz´on especificado en forma de archivo adjunto. Ver figura 6.5.

Figura 6.5: Datos enviados por un formulario

6.7. EJEMPLO DE UN FORMULARIO

103

Al abrir el archivo adjunto en el bloc de notas de Windows, se pueden apreciar los datos y la forma como ellos son recibidos en el archivo. Ver figura 6.6.

Figura 6.6: Archivo adjunto con los datos enviados por un formulario Observe la forma como aparecen los espacios en blanco y las variables que pueden tomar m´as de un valor. Tambi´en tenga en cuenta que el nombre de la variable version y su correspondiente valor no aparecen en el formulario de entrada, pero s´ı en los datos que se env´ıan al activar el bot´on tipo submit.

Los datos de las variables son los siguientes: nombre nivel sexo lenguaje lenguaje lenguaje sistema sistema observacion clave version

= = = = = = = = = = =

"Luis Enrique Mahecha" "Universitario" "Mas" "CPP" "JV" "SM" "Linux" "Windows" "Me gusta SmallTalk por ser orientado a objetos" 123456 1.0

CAP´ITULO 6. FORMULARIOS

104

6.8.

Autoevaluaci´ on

1. Escriba el c´odigo HTML necesario para crear un formulario como el que se puede apreciar en la figura 6.7.

Figura 6.7: Ejercicio de formularios (2)

2. Escriba el c´odigo HTML necesario para crear un formulario como el que se puede apreciar en la figura 6.8.

Figura 6.8: Ejercicio de formularios (3)

Parte III JavaScript

105

“No es que yo sea inteligente, simplemente me estoy con los problemas m´as tiempo”.

Albert Einstein

7 Visi´on general

En este cap´ıtulo se hace una breve descripci´on de los elementos m´as representativos de JavaScript sin pretender abarcar completamente las posibilidades que ofrece este lenguaje.

JavaScript es un lenguaje de scripts basado en objetos creado por la compa˜ n´ıa Netscape. Ver figura 7.1.

Figura 7.1: http://www.netscape.com

JavaScript ampl´ıa las posibilidades de construcci´on de p´aginas Web permitiendo que ´estas sean de contenido activo.

´ GENERAL CAP´ITULO 7. VISION

108

7.1.

Caracter´ısticas

El c´odigo JavaScript va incluido dentro de las p´aginas Web. Algunas de sus funciones son: solicitud de informaci´on al usuario, validaciones, control de presentaciones.

Para que una p´agina Web puede utilizar la funcionalidad de JavaScript no necesita ning´ un programa adicional, ni estar conectado a Internet, debido a que los navegadores actuales tienen integrado el int´erprete del lenguaje.

JavaScript, mediante cookies (archivos de texto), almacena peque˜ nas cantidades de informaci´on en el computador cliente. Estos archivos se ubican en una carpeta especial del disco duro, la cual varia de acuerdo al sistema operativo.

Por otra parte, debe quedar muy claro que JavaScript no es Java1 . Sin embargo, comparten algunas caracter´ısticas como cierta parte de la sintaxis, y que es “Case Sensitive”, es decir, diferencia las letras may´ usculas de las min´ usculas.

7.2.

Comunicaci´ on con el usuario

Una de las m´as importantes funciones de todo lenguaje es la comunicaci´on con el usuario, tanto para la entrada de datos como para la salida de resultados o mensajes en la pantalla.

7.2.1.

Entrada de datos

La entrada de datos en JavaScript puede hacerse b´asicamente de dos maneras: Utilizando la instrucci´on prompt:

1

Java: Lenguaje de programaci´on orientado a objetos de la compa˜ n´ıa Sun Microsystems.

´ CON EL USUARIO 7.2. COMUNICACION

109

nombre = prompt ( "Ingrese el nombre", "Gabriel" ); ———————————————————————————————————–

Observe que aparece en pantalla un cuadro de entrada el cual tiene dos elementos: el mensaje asociado ("Ingrese el nombre") y el valor por omisi´on o sugerido ("Gabriel"). En caso de no tener ning´ un valor por omisi´on, se debe usar "" en la instrucci´on prompt.

Cuando el usuario hace clic en el bot´on Aceptar, se puede almacenar en una variable el texto del cuadro de entrada. Para este ejemplo, la variable es nombre.

A trav´es de formularios. Ver formularios en la p´agina 85 y el ejemplo Entrada y Salida (2) - JavaScript en la p´agina 112.

7.2.2.

Salida por pantalla

La salida por pantalla se puede hacer b´asicamente de dos maneras: Utilizando la instrucci´on alert: La instrucci´on alert permite mostrar en la pantalla una ventana con un texto, el cual puede ser una cadena especificada entre comillas dobles (" ") o comillas sencillas (0 0 ), el nombre de una variable, o la uni´on de ambos, tal como se puede apreciar en la figura. Para este caso, la variable tiene asignado el valor “Gabriel”.

´ GENERAL CAP´ITULO 7. VISION

110

alert ( "Bienvenido " + nombre ); ———————————————————————————————————–

A trav´es de la instrucci´on document.write: document.write ( "Bienvenido " + nombre ); ———————————————————————————————————–

La instrucci´on document.write permite generar c´odigo HTML. En este caso muestra en la pantalla un texto, el cual corresponde a la cadena "Bienvenido" y el valor de la variable nombre. Esta instrucci´on se puede utilizar de diversas maneras como se podr´a apreciar en los ejemplos de este cap´ıtulo.

El siguiente ejemplo muestra como asociar el evento onclick a un encabezado de nivel 5. En este caso, al hacer clic en dicho encabezado, se hace un llamado a una secuencia de instrucciones (prompt y alert).

Cuando se desea indicar una cadena dentro de otra, es necesario utilizar delimitadores diferentes para evitar la ambig¨ uedad. En este caso se utilizaron comillas dobles para la cadena exterior y sencillas para las interiores.

´ CON EL USUARIO 7.2. COMUNICACION

111

Ver “Entrada y Salida (1) - JavaScript”.

Entrada y Salida (1) - JavaScript <html> <head> <title> Entrada y Salida de datos </title> </head> <body> <h3> ENTRADA Y SALIDA DE DATOS</h3> <h5 language = "JavaScript" onClick = " nombre = prompt ( ’Ingrese el nombre’,’’ ); alert ( ’Hola ’+ nombre ); "> Haga click aqu&iacute; para ingresar el nombre. </h5> </body> </html>

La figura 7.2 muestra la p´agina Web para la de la entrada de datos, del ejemplo anterior.

Figura 7.2: Entrada (1) - JavaScript La figura 7.3 muestra la salida del ejemplo.

´ GENERAL CAP´ITULO 7. VISION

112

Figura 7.3: Salida (1) - JavaScript

El siguiente ejemplo muestra como asociar el evento onchange a un campo de texto de un formulario y la instrucci´on document.write.

Ver “Entrada y Salida (2) - JavaScript”.

Entrada y Salida (2) - JavaScript <html> <head> <title> Entrada y Salida de </title> </head> <body> <h3> ENTRADA Y SALIDA <form> Edad: <input name = onchange = </form> </body> </html>

datos

DE DATOS</h3> "edad" type = "text" size = "4" "document.write(’Su edad es: ’+ edad.value);">

La figura 7.4 muestra la p´agina Web con el formulario de entrada del ejemplo anterior.

7.3. INTEGRANDO JAVASCRIPT Y HTML

113

Figura 7.4: Entrada (2) - JavaScript

La figura 7.5 muestra la salida generada por la instrucci´on document.write.

Figura 7.5: Salida (2) - JavaScript

7.3.

Integrando JavaScript y HTML

Cuando el c´odigo JavaScript es algo m´as que unas pocas l´ıneas, es recomendable utilizar la etiqueta <script> de HTML para delimitarlo, como en el ejemplo “Navegador en uso - JavaScript”de la p´agina 114. Algunos autores, adem´as, encierran el c´odigo con comentarios HTML, para que sea ignorado por los navegadores anteriores que no son compatibles con este lenguaje. Es decir, entre (<!--) y (-->).

El navegador interpretar´a el script de acuerdo a las instrucciones que est´en contenidas dentro de las etiquetas <script> y </script>. Generalmente los scripts se escriben al finalizar la p´agina Web o dentro de la cabecera. El c´odigo JavaScript se ejecuta en el sitio de la p´agina Web donde est´e ubicado.

En el caso de las funciones, se ejecutan en el sitio donde se hace el llamado.

Tambi´en es posible sacar el c´odigo JavaScript a un archivo independiente, caso en el que deber´a indicar la ruta para encontrarlo, utilizando el atributo src de la etiqueta <script>.

7.4.

Versiones y compatibilidad

Las pruebas se realizaron utilizando Internet Explorer 6.0. Los navegadores m´as modernos son compatibles con JavaScript.

´ GENERAL CAP´ITULO 7. VISION

114 Ver “Navegador en uso - JavaScript”.

Navegador en uso - JavaScript <html> <head> <title> Navegador en uso </title> </head> <body> <h3>NAVEGADOR EN USO</h3> <script language = document.writeln document.writeln document.writeln document.writeln </script>

’JavaScript’> ( "<pre>"); ( "Nombre : " + navigator.appName ); ( "Versi&oacute;n: " + navigator.appVersion ); ( "</pre>");

</body> </html>

La salida del ejemplo anterior se puede ver en la figura 7.6. El nombre del navegador se encuentra almacenado en navigator.appName y la versi´on en navigator.appVersion.

Figura 7.6: Navegador en uso - JavaScript

7.5. SINTAXIS DEL LENGUAJE

7.5.

115

Sintaxis del lenguaje

En esta secci´on se pretende dar un vistazo a los elementos fundamentales de JavaScript.

7.5.1.

Comentarios

Un comentario en JavaScript se puede escribir de dos maneras: Hasta el final de la l´ınea iniciando con dobleslash (//).

Desde el conjunto de caracteres /* hasta */, sin importar si el comentario ocupa varias l´ıneas de texto.

7.5.2.

Tipos de datos

Los tipos de datos en Javascript son asignados en forma din´amica, de acuerdo a los valores que tomen las variables. Por ejemplo una variable podr´ıa tomar primero un valor de un entero y un momento despu´es ser una cadena.

JavaScript soporta los siguientes tipos de datos: enteros, flotantes, booleanos, cadenas, vectores, matrices, referencias y objetos.

7.5.3.

Declaraci´ on de variables

Toda variable en JavaScript no declarada se considera de alcance global. Las variables declaradas espec´ıficamente tendr´an alcance (´ambito de la varible) de acuerdo al lugar en el cual han sido declaradas. Por ejemplo, si se declara una variable dentro de una funci´on, ´esta tendr´a alcance u ´nicamente dentro de la funci´on.

Para declarar variables use la instrucci´on var y a continuaci´on la lista de variables separadas por comas, finalizando el rengl´on con el s´ımbolo punto y coma.

Los vectores en JavaScript son objetos. Un vector se declara como cualquier variable, pero para poder utilizarlo se requiere crear el objeto con el operador new. Por ejemplo, miVector = new Array();. En el caso de las matrices, se utiliza un vector de vectores.

´ GENERAL CAP´ITULO 7. VISION

116

Observe el siguiente ejemplo donde se crea una matriz de 5 filas por 4 columnas con los n´ umero enteros entre 1 y 20, haciendo un recorrido por filas.

Ver “Uso de Matrices - JavaScript”.

Uso de Matrices - JavaScript <html> <head> <title> Matrices en JavaScript </title> </head>

La primera parte del ejemplo corresponde al inicio de la p´agina Web. <body> <h3>MATRICES EN JAVASCRIPT</h3> <script language = "JavaScript" > var matriz; matriz = new Array ( ); crearMatriz ( matriz, 5, 4 ); llenarMatriz ( matriz, 5, 4 ); imprimirMatriz ( matriz, 5, 4 );

La segunda parte del ejemplo corresponde a la declaraci´on de la matriz, la creaci´on del objeto y el llamado a tres funciones para crear la matriz, llenarla con los n´ umeros enteros del 1 al 20 e imprimirla. Es importante tener en cuenta que para que se pueda utilizar la variable matriz como par´ametro en una funci´on, primero debe ser creado el objeto con el operador new. Adem´as, hasta que no se ejecute la funci´on crearMatriz, el objeto matriz es un arreglo unidimensional (vector).

7.5. SINTAXIS DEL LENGUAJE

117

function crearMatriz ( matriz, filas, columnas ) { var i; matriz.length = filas; for ( i = 0 ; i < matriz.length ; i++ ) { matriz[ i ] = new Array ( ); matriz[ i ].length = columnas; } }

En la funci´on crearMatriz, el identificador matriz representa la matriz que ser´a creada. Observe que matriz por ser un arreglo es un objeto, el cual posee un atributo llamado length el cual almacena el n´ umero de elementos.

En este caso, el n´ umero de elementos del vector (filas de la futura matriz).

A continuaci´on se utiliza un ciclo para permitir que en cada posici´on del arreglo se almacene un nuevo arreglo (matriz[ i ] = new Array ( );).

En este caso, el n´ umero de elementos est´a especificado por el par´ametro (columnas). Es decir, se ha creado una matriz como un arreglo de arreglos. function llenarMatriz ( matriz, filas, columnas ) { var i, j, k; k = 1; for ( i = 0; i < filas ; i++ ) { for ( j = 0; j < columnas; j++ ) { matriz [ i ][ j ] = k; k++; } } }

118

´ GENERAL CAP´ITULO 7. VISION

Nuevamente se hace un paso por referencia de la matriz (arreglo de arreglos).

Observe que matriz usa dos ´ındices, uno para la fila y otro para la columna.

Por otra parte, el valor de la variable k se va asignando en cada uno de los elementos de la matriz. Cada que se asigna un valor a una posici´on de la matriz, el valor de k aumenta. function imprimirMatriz ( matriz, filas, columnas ) { var i,j; document.write ( "<table border = ’4’ cellpadding = ’5’" ); document.write ( " cellspacing = ’10’>" ); for ( i = 0; i < filas ; i++ ) { document.write ( "<tr>"); for ( j = 0; j < columnas; j++ ) { document.write ( "<td align = center>"); document.write ( matriz [ i ][ j ] ); } document.write ( "</tr>" ); } document.write ( "</table>" ); }

La funci´on imprimirMatriz genera el c´odigo HTML de una tabla. En cada celda de la tabla se ubica un elemento de la matriz. Observe las l´ıneas document.write("<tr>"); al iniciar cada fila y document.write("</tr>"); al terminarla. Los atributos y dem´as aspectos relacionados con las tablas en HTML los puede ampliar en la p´agina 44. </script> </body> </html>

La parte final corresponde al cierre del script y de la p´agina Web.

7.5. SINTAXIS DEL LENGUAJE

119

La figura 7.7 muestra la salida generada por el ejemplo anterior.

Figura 7.7: Uso de Matrices - JavaScript

7.5.4.

Operadores aritm´ eticos

Los operadores aritm´eticos de JavaScript son, en orden de precedencia: Significado Signo menos unario Incremento - Decremento Multiplicaci´on - Divisi´on - M´odulo Suma - Resta

Operador ++ -* / % + -

Tabla 7.1: Operadores aritm´eticos de JavaScript La precedencia indica en qu´e orden se deben realizar las operaciones. Se puede alterar este orden usando par´entesis. La operaci´on entre par´entesis tendr´a mayor precedencia.

En caso de que se encuentren operaciones con el mismo nivel de precedencia, se resuelven de izquierda a derecha.

´ GENERAL CAP´ITULO 7. VISION

120

7.5.5.

Operadores relacionales Significado Mayor que Menor que Mayor o igual que Menor o igual que Igual Diferente Igualdad estricta Diferencia estricta

Operador > < >= <= == != === !==

Tabla 7.2: Operadores relacionales de JavaScript Los operadores relacionales tienen igual nivel de precedencia entre s´ı. En cualquier caso los operadores aritm´eticos tienen mayor precedencia que los operadores relacionales.

Es importante tener en cuenta que la igualdad estricta (===) y la diferencia estricta (!==) hacen una comparaci´on de tipos y valores, mientras que la igualdad (==) y diferencia (!=) solo verifican los valores. Por ejemplo: 5 == ’5’ es verdadero mientras que 5 === ’5’ es falso.

7.5.6.

Operadores l´ ogicos

Los operadores l´ogicos en orden de precedencia son: Significado No Y O exclusiva O

Operador ! && ^ ||

Tabla 7.3: Operadores l´ogicos de JavaScript Los operadores relacionales y los ar´ıtmeticos tienen mayor precedencia que los operadores l´ogicos.

7.6. FUNCIONES Y CONSTANTES

7.5.7.

121

Operadores de asignaci´ on Significado Asignaci´on Incremento y asignaci´on Decremento y asignaci´on Producto y asignaci´on Divisi´on y asignaci´on

Operador = += -= *= /=

Tabla 7.4: Operadores de asignaci´on de JavaScript

7.5.8.

Operadores sobre objetos Significado Crear un objeto Borrar un objeto Referencia al objeto actual

Operador new delete this

Tabla 7.5: Operadores sobre objetos de JavaScript

7.6.

Funciones y Constantes

En las tablas siguientes se hace una breve descripci´on de algunas de las constantes y funciones m´as importantes de JavaScript.

Nombre Math.PI Math.E

Descripci´ on π. Constante Pi. Aprox = 3.1416 e. Constante de Euler. Aprox = 2.718

Tabla 7.6: Constantes matem´aticas en JavaScript

´ GENERAL CAP´ITULO 7. VISION

122 Nombre Math.random ( ) Math.abs ( x ) Math.sin ( x ) Math.cos ( x ) Math.asin ( x ) Math.acos ( x ) Math.exp ( x ) Math.log ( x ) Math.ceil ( x ) Math.floor ( x ) Math.round ( x ) Math.sqrt ( x ) isNaN ( x ) Math.min ( x, y ) Math.max ( x, y ) Math.pow ( x, y )

Descripci´ on N´ umero aleatorio entre 0 y 1. |x| sin(x). x se da en radianes. cos(x). x se da en radianes. sin−1 (x). Valor en radianes. cos−1 (x). Valor en radianes. ex ln(x) El menor entero mayor o igual a x.

El mayor entero menor o igual a x.

El entero m´as cercano o igual a x. √ x true si x es NaN. Si no, false.

El menor entre x y y.

El mayor entre x y y. xy

Tabla 7.7: Funciones matem´aticas en JavaScript Cuando se aplica Math.round a un valor cuya parte decimal es 0.5, el resultado ser´a la aproximaci´on al entero mayor m´as cercano.

NaN corresponde a la expresi´on Not a Number. Se utiliza cuando el resultado de una operaci´on no se puede expresar como un n´ umero.

Nombre parseInt ( cadena [, base] )

parseFloat ( cadena )

Descripci´ on Convierte la cadena a su equivalente entero en la base especificada.

Si base no se indica, se asume base 10. Devuelve NaN si fracasa la conversi´on.

Convierte la cadena a su equivalente flotante. Devuelve NaN si fracasa la conversi´on.

Tabla 7.8: Funciones de conversi´on en JavaScript

7.6. FUNCIONES Y CONSTANTES

split

Nombre ( caracter

indexOf

( subCadena )

charAt

( posicion

concat length substr

( cadena ) ( ) ( indice, longitud )

)

)

substring ( indice1, indice2 )

123 Descripci´ on Devuelve un vector con subcadenas obtenidas separando la cadena por el caracter separador (caracter).

Devuelve la posici´on de la subcadena dentro de la cadena, ´o -1 en caso de que no se encuentre.

Devuelve el caracter que est´a en la posici´on indicada de la cadena.

A˜ nade cadena al final de la cadena.

Devuelve la longitud de la cadena.

Devuelve la subcadena de tama˜ no longituda partir de indice.

Devuelve la subcadena que comienza en la posici´on indice1 y finaliza en la posici´on indice2.

Tabla 7.9: Funciones de cadenas en JavaScript

Las funciones de la tabla 7.9 trabajan sobre objetos de tipo cadena. Por ejemplo, la funci´on split debe utilizarse indicando el objeto al cual hace referencia. Por ejemplo: Ver “Ejemplo de la funci´on split - JavaScript”.

Ejemplo de la funci´ on split - JavaScript lista = "Fresa, Guayaba, Naranja, Pera, Manzana"; frutas = lista.split(",");

Despu´es de la ejecuci´on de estas dos instrucciones, frutas ser´a un arreglo de cinco elementos, uno por cada fruta, debido a que en la cadena lista los nombres de las frutas est´an separados por el caracter coma (,).

124

7.6.1.

´ GENERAL CAP´ITULO 7. VISION

Funciones definidas por el usuario

El manejo de funciones del usuario en JavaScript permite el paso de par´ametros por valor para los tipos de datos b´asicos y por referencia para los objetos (vectores, matrices, formularios, entre otros). De igual manera soporta funciones que retornan valores o funciones que no retornan valores (procedimientos). Veamos algunos ejemplos: Ver “Funci´ on del usuario - JavaScript”.

Funci´ on del usuario - JavaScript function areaCirculo ( radio ) { return Math.PI * Math.pow ( radio, 2 }

);

Ver “Funci´ on tipo procedimiento - JavaScript”.

Funci´ on tipo procedimiento - JavaScript function Salida ( mensaje, numero ) { document.write ( mensaje + " " + numero + "<br>" ); }

Observe el uso del operador + dentro de la instrucci´on document.write.

Este operador permite convertir numero a una cadena y concatenarlo con las cadenas mensaje, " " (espacio en blanco) y "<br>", formando una u ´nica cadena que se imprimir´a en la p´agina Web de resultados.

“No tengo ning´ un talento especial. S´olo soy apasionadamente curioso”.

Albert Einstein

8

Ejemplos de JavaScript A continuaci´on se presentan cinco ejemplos de p´aginas Web de contenido activo escrito en JavaScript.

El primero de ellos explica la interacci´on de un usuario con un formulario HTML, del cual pueden obtener datos de los diferentes componentes como campos de texto, listas de chequeo, botones de radio, entre otros. Los datos obtenidos son mostrados por el programa JavaScript en la p´agina Web resultante.

Los otros cuatro ejemplos muestran el uso de las sentencias de control de JavaScript: decisiones simples, anidadas y m´ ultiples ciclos condicionados al comienzo ciclos condicionados al final arreglos

126

CAP´ITULO 8. EJEMPLOS DE JAVASCRIPT

Adem´as, todos muestran la interacci´on con formularios HTML, y permiten reforzar algunos conceptos b´asicos de este lenguaje.

8.1.

Formulario de interacci´ on con JavaScript

El primer ejemplo tiene como finalidad mostrar la forma en la cual JavaScript recibe la informaci´on de un formulario HTML, con sus distintos elementos.

Ver figura 8.1.

Figura 8.1: P´agina Web con un formulario

´ CON JAVASCRIPT 8.1. FORMULARIO DE INTERACCION

127

C´ odigo E01-Js.html Ver “Formulario - HTML”.

Formulario - HTML <html> <head> <title>Formulario para interacci&oacute;n con JavaScript</title> </head> <body> <h3>FORMULARIO DE ENTRADA - JavaScript</h3> <form name="formulario"> <fieldset> <legend align = "right"> <b> Formulario de consuta </b> </legend> <p>

La primera parte corresponde al encabezado de la p´agina Web y al inicio del formulario de entrada. Observe el nombre que se le ha dado al formulario.

Este nombre es importante al ser recibido por una funci´on elaborada en JavaScript llamada recibir, la cual est´a asociada al evento onClick sobre el bot´on Aceptar. Adem´as, se encuentra el inicio de la etiqueta <fieldset>, la cual agrupa todos los elementos del formulario. <fieldset> <legend align = "center"><b> Datos personales</b> </legend> <label> Nombre : <input name = "nombre" type = "text" size = "50"> </label> <p>

128

CAP´ITULO 8. EJEMPLOS DE JAVASCRIPT

<label> Nivel de Estudios : <select name = "nivel"> <option value = "Bachiller"> <option value = "T&eacute;cnico"> <option value = "Tecn&oacute;logo"> <option value = "Universitario"> <option value = "Posgrado"> <option value = "Otro"> </select> </label>

Bachiller T&eacute;cnico Tecn&oacute;logo Universitario Posgrado Otro

<label> Sexo : <input name = "sexo" type = "radio" value = "Femenino"> Femenino <input name = "sexo" type = "radio" value = "Masculino"> Masculino </label> <p> </fieldset> <p>

La segunda parte corresponde a elementos del formulario. Observe que en esta parte se tienen: un campo de texto, una lista de selecci´on u ´nica llamada nivel y unos botones radio para el sexo, agrupados con la etiqueta <fieldset>.

Es importante hacer notar que en la lista de selecci´on se utiliz´o el atributo value, igual que para el sexo. Estos valores son los que ser´an asignados a los identificadores, especificados con el atributo name. <fieldset> <legend align = "center"> <b>Datos de preferencia</b> </legend> <p> <label> Lenguajes de programaci&oacute;n <input name="lenguaje" type="checkbox" <input name="lenguaje" type="checkbox" <input name="lenguaje" type="checkbox" <input name="lenguaje" type="checkbox" </label> <p>

que conoce: value="C++"> value="Java" > value="Delphi"> value="SmallTalk" >

C++ Java Delphi SmallTalk

´ CON JAVASCRIPT 8.1. FORMULARIO DE INTERACCION

129

La parte n´ umero tres de este ejemplo agrupa un checkbox llamado lenguaje, una lista de selecci´on m´ ultiple llamada sistema y un cuadro de texto llamado observaciones. <label> Sistema operativo favorito : <select name = "sistema" size = "3" multiple> <option> Linux <option> Windows <option> MacOS <option> FreeBSD </select> </label> Observaciones: <textarea name = "observaciones" cols = "15" rows = "5"></textarea> <p> </fieldset> <p> <label> Clave <input name </label>

: = "clave"

type = "password" size = "8">

La cuarta parte corresponde al elemento tipo password, con nombre clave. <input name <input <input

= "version" type = "hidden" value = "1.0">

type = "reset" value = "Limpiar"> type = "submit" value = "Aceptar" onclick = "recibir ( formulario )">

</fieldset> </form>

La quinta parte corresponde a los elementos tipo hidden, reset y submit. Al hacer click sobre el bot´on Aceptar (submit), se env´ıa el formulario llamado formulario a la funci´on recibir. El valor de la versi´on ser´a constante y siempre valdr´a 1.0. Esto se hace con el fin de ilustrar el paso de variables ocultas a trav´es de p´aginas web. Observe el final del formulario.

CAP´ITULO 8. EJEMPLOS DE JAVASCRIPT

130

</body> </html> <script language = "JavaScript" src = "js/E01-Js.js"> </script>

La u ´ltima parte indica el final de la p´agina Web y con la etiqueta <script> se especifica la ruta donde se encuentra el c´odigo JavaScript asociado a la p´agina Web, en el directorio js de la carpeta donde est´e almacenado el c´odigo HTML anterior.

Si desea mayor detalle en el manejo de formularios, consulte la p´agina 85.

C´ odigo E01-Js.js El programa E01-Js.js inicia con la funci´on recibir, a la cual le llega como par´ametro un formulario cuyo nombre interno ser´a formulario. Recuerde que el nombre del formulario en HTML era formulario.

El objetivo de la funci´on recibir es extraer del formulario variables locales para que puedan ser procesadas independientemente. Para poder independizarlas se utilizan las funciones obtenerUno y obtenerMultiples.

Ver programa 1 “Formulario - JS”.

Programa 1 - Formulario - JS function recibir ( formulario ) { var nombre, clave, version, observaciones, nivel, sexo; var lenguaje, sistema; lenguaje = new Array ( ); sistema = new Array ( );

´ CON JAVASCRIPT 8.1. FORMULARIO DE INTERACCION

131

Continuaci´ on programa 1 nombre observaciones clave version nivel sexo

= = = = = =

obtenerUno obtenerUno obtenerUno obtenerUno obtenerUno obtenerUno

(formulario, (formulario, (formulario, (formulario, (formulario, (formulario,

’nombre’, ’observaciones’, ’clave’, ’version’, ’nivel’, ’sexo’,

’text’ ); ’textarea’ ); ’password’ ); ’hidden’ ); ’select-one’); ’radio’ );

obtenerMultiples (formulario, ’lenguaje’, ’checkbox’, lenguaje); obtenerMultiples (formulario, ’sistema’, ’select-multiple’, sistema ); principal ( nombre, observaciones, clave, version, nivel, sexo, lenguaje, sistema ); }

Observe la declaraci´on de las variables. Tanto lenguaje como sistema son vectores que servir´an para almacenar la informaci´on que fue agrupada en el formulario con los componentes checkbox y select-multiple.

Una vez que las variables locales tienen los datos se hace uso de la funci´on principal para su procesamiento. Es de tener en cuenta que los nombres de las funciones son arbitrarios.

Continuaci´ on programa 1 function obtenerUno ( formulario, nombreVariable, tipo ) { var cantidad, i, indice; cantidad = formulario.elements.length;

La funci´on obtenerUno recibe tres par´ametros: un formulario, el cual pasa por referencia; el nombre de la variable que se desea extraer del formulario (con el nombre que trae desde HTML) y el tipo de entrada (select-one, radio, text, entre otros).

La variable cantidad recupera la cantidad de elementos que tiene el formulario. Este valor sirve para hacer un recorrido por los diferentes elementos del formulario y poder encontrar el que se desea extraer.

CAP´ITULO 8. EJEMPLOS DE JAVASCRIPT

132

Continuaci´ on programa 1 for ( i = 0; i < cantidad; i++ ) { if ( formulario.elements[i].type == tipo && formulario.elements[i].name == nombreVariable ) { switch ( formulario.elements[i].type ) { case ’select-one’: indice = formulario.elements[i].selectedIndex; return formulario.elements[i].options[indice].text; break; case ’radio’: if ( formulario.elements[i].checked == true ) { return formulario.elements[i].value; } break; default: return formulario.elements[i].value; break; } } } return null; }

A continuaci´on, se realiza el ciclo que recorre todo el formulario, compuesto por cantidad elementos. Si el tipo y el nombre corresponden a los especificados por el usuario en el llamado a esta funci´on, se procede a identificar su tipo para extraer apropiadamente su valor.

Tenga presente que el objeto formulario tiene un vector llamado elements.

Cada elemento de este vector contiene dos atributos llamados type y name, los cuales permiten determinar el tipo y nombre de dicho elemento.

El tipo del elemento es utilizado para su evaluaci´on en la sentencia de control switch (decisi´on m´ ultiple). Existen tres alternativas: select-one: En la variable indice se almacena el ´ındice del elemento

´ CON JAVASCRIPT 8.1. FORMULARIO DE INTERACCION

133

seleccionado de la lista de selecci´on u ´nica. Con este ´ındice se obtiene el valor asociado al campo text del arreglo options, el cual es un atributo del elemento que est´a siendo evaluado. indice = formulario.elements[i].selectedIndex; return formulario.elements[i].options[indice].text; radio: En el caso de un radiobutton, se necesita saber si uno de los campos ha sido marcado (checked). Como se trata de un elemento de respuesta u ´nica, al encontrar el primer elemento marcado, se retorna el atributo value (valor) del elemento evaluado. if ( formulario.elements[i].checked == true ) { return formulario.elements[i].value; } Los dem´as tipos soportados son: • text • textarea • password • hidden En cualquiera de estos casos, se retorna el atributo value del elemento evaluado. return formulario.elements[i].value; Finalmente, esta funci´on retorna el valor null en caso de que se solicite un elemento que no exista en el formulario.

134

CAP´ITULO 8. EJEMPLOS DE JAVASCRIPT Continuaci´ on programa 1

function obtenerMultiples ( formulario, nombreVariable, tipo, vector ) { var cantidad, i, j, k; cantidad = formulario.elements.length; j = 0;

La funci´on obtenerMultiples recibe cuatro par´ametros: un formulario, el cual pasa por referencia; el nombre de la variable que se desea extraer del formulario (con el nombre que trae desde HTML); el tipo de entrada (checkbox o select-multiple) y el vector (pasado por referencia), que almacenar´a el conjunto de opciones seleccionadas desde el formulario HTML. La variable cantidad almacena la cantidad de elementos que tiene el formulario. La variable j controla el tama˜ no del vector de resultados (vector).

Continuaci´ on programa 1 for (i = 0; i < cantidad; i++) { if ( formulario.elements[i].type == tipo && formulario.elements[i].name == nombreVariable ) {

A continuaci´on, se realiza el ciclo que recorre todo el formulario, compuesto por cantidad elementos. De manera similar a la funci´on obtenerUno, en esta funci´on se busca una variable con el nombre y tipo especificado.

´ CON JAVASCRIPT 8.1. FORMULARIO DE INTERACCION

135

Continuaci´ on programa 1 switch ( formulario.elements[i].type ) { case ’checkbox’ : if ( formulario.elements[i].checked == true) { vector[j] = formulario.elements[i].value; j++; } break; case ’select-multiple’ : for ( k = 0; k < formulario.elements[i].options.length ; k++ ) { if ( formulario.elements[i].options[k].selected ) { vector[j] = formulario.elements[i].options[k].text; j++; } } break; } } } }

En la sentencia switch existen dos alternativas: checkbox: En este caso, se asigna a una posici´on del vector vector cada valor de un elemento que haya sido marcado (checked). Las posiciones del vector son controladas por j. if ( formulario.elements[i].checked == true) { vector[j] = formulario.elements[i].value; j++; } select-multiple: La selecci´on m´ ultiple es diferente al checkbox debido a que todas las opciones posibles de la selecci´on m´ ultiple est´an

CAP´ITULO 8. EJEMPLOS DE JAVASCRIPT

136

almacenados en un vector (options), el cual hace parte del elemento que est´a siendo evaluado. Por lo tanto, es necesario utilizar otro ciclo para recorrer dicho vector y determinar las opciones seleccionadas. El valor (text) asociado a cada una de las opciones seleccionadas ser´a asignado a una posici´on de vector. for ( k = 0; k < formulario.elements[i].options.length ; k++ ) { if ( formulario.elements[i].options[k].selected ) { vector[j] = formulario.elements[i].options[k].text; j++; } } Continuaci´ on programa 1 function principal ( nombre, observaciones, clave, version, nivel, sexo, lenguaje, sistema ) { inicioPagina ( "Procesamiento de formularios en JS", "Datos recibidos - JavaScript" ); inicioFormato ( ); imprimirValor imprimirValor imprimirValor

( "Nombre" , nombre ( "Nivel de Estudios", nivel ( "Sexo" , sexo

); ); );

imprimirVector ( "Lenguajes que conoce", lenguaje ); imprimirVector ( "Sistema operativo favorito", sistema ); imprimirValor imprimirValor imprimirValor finFormato ( ); finPagina ( ); }

( "Version" , version ); ( "Clave" , clave ); ( "Observaciones", observaciones );

´ CON JAVASCRIPT 8.1. FORMULARIO DE INTERACCION

137

La funci´on principal recibe como par´ametros las variables individuales y arreglos que fueron extra´ıdos del formulario, con el fin de generar c´odigo HTML que muestre los datos ingresados en el formulario. Para ello, se utilizan las funciones imprimirValor e imprimirVector.

Adem´as, con el fin de generar adecuadamente el c´odigo HTML, se crearon las funciones inicioPagina y finPagina y las funciones inicioFormato y inicioFormato son para formatear el texto, es decir, tienen un efecto sobre la presentaci´on de la p´agina Web. Continuaci´ on programa 1 function imprimirValor ( texto, valor ) { document.writeln ( "<b>"+ texto + "</b>\n" + valor + "\n" ); }

Esta funci´on imprime un valor acompa˜ nado de un mensaje.

Continuaci´ on programa 1 function imprimirVector ( texto, vector ) { var i; document.writeln ( "<b>" + texto + "</b>" ); for ( i = 0; i < vector.length ; i++ ) { document.writeln ( vector[i] ); } document.write ( "\n" ); }

La funci´on imprimirVector se encarga de imprimir los elementos de un vector acompa˜ nados de un t´ıtulo general. El tama˜ no del vector es uno de sus atributos (vector.length). Observe que la funci´on document.write algunas veces termina con los caracteres ln, lo que indica que al generar el c´odigo HTML insertar´a un salto de l´ınea al terminar de imprimir.

CAP´ITULO 8. EJEMPLOS DE JAVASCRIPT

138

Continuaci´ on programa 1 function inicioPagina ( titulo, texto ) { document.writeln ( "<html>" ); document.writeln ( " <head>" ); document.writeln ( " <title>" ); document.writeln ( titulo ); document.writeln ( " </title>" ); document.writeln ( " </head>" ); document.writeln ( " <body>\n" ); document.writeln ( " <center>" ); document.writeln ( " <h3>"+ texto + "</h3>" ); }

La funci´on inicioPagina tiene como objetivo generar el c´odigo HTML correspondiente al encabezado de la p´agina Web con el t´ıtulo para la ventana y un texto (<h3>) para el documento.

Continuaci´ on programa 1 function finPagina { document.writeln document.writeln document.writeln }

( ) ( " </center>" ); ( " </body>" ); ( "</html>" );

La funci´on finPagina genera la parte final de la p´agina Web. Continuaci´ on programa 1 function inicioFormato ( ) { document.writeln ( "<pre>" ); }

Estas dos funciones permiten activar/descactivar el texto preformateado.

La salida del programa se puede apreciar en la figura 8.2.

´ 8.2. EL MAYOR DE SEIS NUMEROS

139

Continuaci´ on programa 1 function finFormato ( ) { document.writeln ( "</pre>" ); }

Figura 8.2: Formulario - Salida - JavaScript

8.2.

El mayor de seis n´ umeros

Teniendo un formulario de entrada en el cual se solicitan al usuario seis n´ umeros enteros, encontrar el mayor. La salida se har´a en un formulario, donde los elementos est´an desactivados. Ver figura 8.3.

CAP´ITULO 8. EJEMPLOS DE JAVASCRIPT

140

Figura 8.3: El mayor de seis n´ umeros - Entrada - JavaScript

C´ odigo E02-Js.html Ver “El mayor de seis n´ umeros - HTML”.

El mayor de seis n´ umeros - HTML <html> <head> <title> El mayor de seis n&uacute;meros </title> </head> <body> <center> <h3>EL MAYOR DE SEIS N&Uacute;MEROS - JavaScript</h3>

La primera parte del ejemplo corresponde al encabezado de la p´agina Web.

´ 8.2. EL MAYOR DE SEIS NUMEROS

141

<form name = "formulario"> <fieldset> <legend align = "center"><b> N&uacute;meros a examinar</b> </legend> <p> <label> <input </label>

name = "n1" type = "text"

size = "5">

<label> <input </label>

name = "n2" type = "text"

size = "5">

<label> <input name = "n3" type = "text" </label> <P>

size = "5">

<label> <input </label>

name = "n4" type = "text"

size = "5">

<label> <input </label>

name = "n5" type = "text"

size = "5">

<label> <input name = "n6" type = "text" </label> <p>

size = "5">

<input type = "reset" value = "Limpiar"> <input type = "submit" value = "Aceptar" onclick = "recibir ( formulario )"> <p> </fieldset> </form> </center> </body> </html> <script language = "JavaScript" src = "js/E02-Js.js" > </script>

CAP´ITULO 8. EJEMPLOS DE JAVASCRIPT

142

El formulario de entrada tiene seis cajas de entrada de tipo text. Al hacer clic en Aceptar se pasa el formulario a la funci´on recibir. Observe los nombres de las variables asociadas a cada caja de texto: n1, n2, n3, n4, n5, n6. Al final de la p´agina se encuentra la referencia al archivo que contiene el programa JavaScript.

C´ odigo E02-Js.js Ver programa 2 “El mayor de seis n´ umeros - JS”.

Programa 2 - El mayor de seis n´ umeros - JS function recibir ( formulario ) { var a, b, c, d, e, f; a b c d e f

= = = = = =

obtenerUno obtenerUno obtenerUno obtenerUno obtenerUno obtenerUno

( ( ( ( ( (

formulario, formulario, formulario, formulario, formulario, formulario,

’n1’, ’n2’, ’n3’, ’n4’, ’n5’, ’n6’,

’text’ ’text’ ’text’ ’text’ ’text’ ’text’

); ); ); ); ); );

principal ( a, b, c, d, e, f ); }

La primera parte de este programa corresponde a la funci´on recibir, la cual recibe un formulario y se encarga de extraer los valores de cada caja de texto, almacen´andolos en las variables de la a a la f, para luego pasar estos valores por par´ametro, a la funci´on principal.

´ 8.2. EL MAYOR DE SEIS NUMEROS

143

Continuaci´ on programa 2 function principal ( n1, n2, n3, n4, n5, n6 ) { var mayor; inicioPagina ( "El mayor de seis n&uacute;meros", "EL MAYOR DE SEIS N&Uacute;MEROS - JavaScript" ); inicioSalida ( "N&uacute;meros ingresados" ); document.write ("<table border = ’1’ align = ’center’"); document.write (" cellspacing = ’5’ cellpadding = ’5’ > "); adicionarFilaNumeros ( n1, n2, n3 ); adicionarFilaNumeros ( n4, n5, n6 ); document.write ( "</table> <p>" ); mayor mayor mayor mayor mayor

= = = = =

encontrarMayor encontrarMayor encontrarMayor encontrarMayor encontrarMayor

( ( ( ( (

n1, mayor, mayor, mayor, mayor,

n2 n3 n4 n5 n6

); ); ); ); );

imprimirEnTextInput ( "El mayor es:", "5", mayor ); finSalida ( ); finPagina ( ); }

La funci´on principal es la parte m´as importante del programa. Su objetivo es hacer el llamado de las funciones inicioPagina - finPagina e inicioSalida - finSalida; construir una tabla donde cada celda tendr´a uno de los seis valores recibidos como par´ametro (los cuales se fueron obtenidos del formulario a trav´es de la funci´on recibir); encontrar el mayor utilizando varias veces la funci´on encontrarMayor. Posteriormente el resultado se escribe en la p´agina Web.

144

CAP´ITULO 8. EJEMPLOS DE JAVASCRIPT Continuaci´ on programa 2

function encontrarMayor ( a, b ) { var numero; if ( parseInt ( a ) > parseInt ( b ) ) { numero = a; } else { numero = b; } return numero; }

La funci´on encontrarMayor devuelve el mayor entre dos enteros. Observe que los par´ametros recibidos son convertidos a entero utilizando la funci´on parseInt, propia de JavaScript.

Continuaci´ on programa 2 function inicioSalida ( leyenda ) { document.write ( "<fieldset>\n" document.write ( " <legend align = ’center’>\n" document.write ( " <b>" + leyenda + "</b>\n" document.write ( " </legend> <p>\n" }

); ); ); );

La funci´on inicioSalida permite iniciar la agrupaci´on de campos en un formulario de salida HTML. Utiliza alineaci´on central para la leyenda que se recibe por par´ametro.

´ 8.2. EL MAYOR DE SEIS NUMEROS

145

Continuaci´ on programa 2 function finSalida ( ) { document.write ( "<p></fieldset> <p>\n" ); }

La funci´on finSalida hace una separaci´on de p´arrafo, finaliza un grupo de campos y deja nuevamente un espacio con respecto al siguiente p´arrafo.

Continuaci´ on programa 2 function adicionarFilaNumeros ( numero1, numero2, { document.write ( "<tr>\n" ); document.write ( " <td>"); imprimirEnTextInput document.write ( " <td>"); imprimirEnTextInput document.write ( " <td>"); imprimirEnTextInput document.write ( "</tr>\n" ); }

numero3 )

("", "5", numero1); ("", "5", numero2); ("", "5", numero3);

La funci´on adicionarFilaNumeros adiciona una fila de tres columnas a una tabla. Para ubicar en cada celda los n´ umeros que recibe como par´ametros, hace el llamado a la funci´on imprimirEnTextInput.

Continuaci´ on programa 2 function imprimirEnTextInput ( texto, ancho, valor ) { document.write ( "<label>\n" document.write ( " <b>" + texto + "</b>\n" document.write ( " <input type = ’text’ size = ’" document.write ( ancho + "’ value = ’" + valor + "’ disabled>" document.write ( "</label>\n" }

); ); ); ); );

La funci´on imprimirEnTextInput asume que ser´a utilizada dentro de un formulario de salida, donde existen campos agrupados por <fieldset>, uti-

146

CAP´ITULO 8. EJEMPLOS DE JAVASCRIPT

lizada en las funciones inicioSalida y finSalida. El par´ametro texto es el t´ıtulo que acompa˜ nar´a una caja de texto, utilizada para la salida del valor que se recibe con el par´ametro valor. El par´ametro ancho se utiliza para establecer el ancho de la caja de texto. Observe que el valor ser´a mostrado en una tonalidad de gris, indicando que se encuentra deshabilitado (disabled).

Reutilizaci´ on de c´ odigo Funci´ on obtenerUno inicioPagina finPagina

P´ agina 131 138 138

Tabla 8.1: El mayor de seis n´ umeros - Funciones reutilizadas - JavaScript La figura 8.4 presenta la apariencia final del formulario.

Figura 8.4: El mayor de seis n´ umeros - Salida - JavaScript

8.3.

Reloj de arena

Hacer un programa que realice una figura similar a un reloj de arena dado el ancho (m´ınimo 5 - m´aximo 10) y el caracter con el cual se desea realizar la c %). Ver figura 8.5. figura (*, -, =, #, °, La entrada se realiza mediante el formulario HTML de la figura 8.5.

8.3. RELOJ DE ARENA

Figura 8.5: Reloj de arena - Entrada - JavaScript

Figura 8.6: Reloj de arena - Salida - JavaScript

C´ odigo E03-Js.html Ver “Reloj de arena - HTML”.

Reloj de arena - HTML <html> <head> <title>Reloj de arena</title> </head>

147

148

CAP´ITULO 8. EJEMPLOS DE JAVASCRIPT

<body> <center> <h3>FIGURA CON CARACTERES</h3> <form name="formulario"> <fieldset> <legend align = "center"><b> Datos de la figura</b> </legend> <p> <label> <b>Ancho de la figura:</b> <select name = "ancho"> <option value = 5> 5 <option value = 6> 6 <option value = 7> 7 <option value = 8> 8 <option value = 9> 9 <option value = 10>10 </select> </label>

La primera parte del ejemplo corresponde al inicio de la p´agina Web y al inicio del formulario de entrada. El ancho de la figura se ingresa a trav´es de una lista de selecci´on u ´nica. <label> <b>Caracter:</b> <select name = "caracter"> <option value = "*"> * <option value = "-"> <option value = "="> = <option value = "#"> # <option value = "&#169;"> &#169; <option value = "%"> % </select> </label> <p>

8.3. RELOJ DE ARENA

149

<input type = "reset" value = "Limpiar"> <input type = "submit" value="Aceptar" onclick = "recibir ( formulario )"> <p> </fieldset> </form>

De igual manera como se ingresa el ancho de la figura, con una lista de selecci´on u ´nica se puede seleccionar el caracter elegido para realizar la figura. </center> </body> </html> <script language = "JavaScript" src = "js/E03-Js.js" > </script>

La u ´ltima parte corresponde a la finalizaci´on de la p´agina Web y la referencia al archivo donde se encuentra el programa JavaScript.

C´ odigo E03-Js.js Ver programa 3 “Reloj de arena - JS”.

Programa 3 - Reloj de arena - JS function recibir ( formulario ) { var caracter, ancho; ancho = obtenerUno ( formulario, ’ancho’, ’select-one’ ); caracter = obtenerUno ( formulario, ’caracter’, ’select-one’ ); principal ( ancho, caracter ); }

La funci´on recibir obtiene del formulario que le llega como par´ametro, dos valores, el ancho y el caracter. Luego se los pasa a la funci´on principal.

150

CAP´ITULO 8. EJEMPLOS DE JAVASCRIPT Continuaci´ on programa 3

function principal ( ancho, caracter ) { inicioPagina ( "Reloj de arena", "RELOJ DE ARENA" ); inicioSalida ( "Figura generada - JavaScript" ); inicioFormato ( ); figura ( ancho, caracter ); finFormato ( ); finSalida ( ); finPagina ( ); }

La funci´on principal hace el llamado de las funciones que permiten construir adecuadamente la p´agina web. Adem´as, llama la funci´on figura donde le pasa por par´ametro los dos valores que recibe.

Continuaci´ on programa 3 function figura ( ancho, caracter ) { var i, mitad, numeroEspacios, numeroCaracteres; mitad = ancho / 2.0; numeroEspacios = 0; for ( i = 1 ; i <= ancho ; i++ ) { numeroCaracteres = ancho - 2 * numeroEspacios; imprimirHorizontal ( numeroEspacios, " " ); imprimirHorizontal ( numeroCaracteres, caracter ); imprimirHorizontal ( numeroEspacios, " " );

8.3. RELOJ DE ARENA

151

Continuaci´ on programa 3 if ( i < mitad ) { numeroEspacios++; } if ( i > mitad ) { numeroEspacios--; } document.writeln ( ); } }

La figura se hace mediante un ciclo que controla el n´ umero de filas. En cada una de las filas se hacen tres llamados a la funci´on imprimirHorizontal, debido a que para realizar el dibujo, de forma horizontal se pueden distinguir tres partes, la primera y la u ´ltima con espacios en blanco y la del medio con el caracter elegido.

Observe que en la primera figura el n´ umero de espacios aumenta y que en la segunda mitad disminuye. Adem´as, si la figura es par, el n´ umero de espacios permanece constante cuando llega a la mitad, logrando el efecto deseado.

La f´ormula numeroCaracteres = ancho - 2 * numeroEspacios; indica que el n´ umero de caracteres se disminuye en dos cada regl´on.

Finalmente, tenga en cuenta que la variable i es entera, mientras que mitad es flotante.

Continuaci´ on programa 3 function imprimirHorizontal ( ancho, caracter ) { var j; for ( j = 0 ; j < ancho ; j++ ) { document.write ( caracter ); } }

152

CAP´ITULO 8. EJEMPLOS DE JAVASCRIPT

La funci´on imprimirHorizontal se encarga de imprimir el caracter recibido como par´ametro, la cantidad de veces especificado en el par´ametro ancho.

La salida del programa anterior se puede observar en la figura 8.6.

Reutilizaci´ on de c´ odigo Funci´ on obtenerUno inicioPagina finPagina inicioFormato finFormato inicioSalida finSalida

P´ agina 131 138 138 138 139 144 145

Tabla 8.2: Reloj de arena - Funciones reutilizadas - JavaScript

8.4.

Costo del uso de un gimnasio

Calcular el valor a pagar en un gimnasio de acuerdo al peso del cliente, al n´ umero de sesiones por semana y a la antig¨ uedad. Ver las siguientes tablas.

El usuario tendr´a un descuento de $100 si visita el gimnasio el d´ıa martes y otros $100 si lo hace el jueves. Adem´as, tendr´a un recargo de $100 si asiste al gimnasio el domingo.

Peso hasta 50 ( 50 , 65 ) [ 65 , 85 ] m´as de 85

Cargo fijo $ 0 $ 2.000 $ 3.000 $ 4.000

8.4. COSTO DEL USO DE UN GIMNASIO Antig¨ uedad 0 1 2 3 ´o m´as

Costo por sesi´ on 1.200 1.000 700 500

Figura 8.7: Gimnasio - Entrada - JavaScript

C´ odigo E04-Js.html Ver “Costo del uso de un gimnasio - HTML”.

Costo del uso de un gimnasio - HTML <html> <head> <title> Costo del uso de un gimnasio </title> </head>

La primera parte, corresponde al inicio de la p´agina web.

153

154

CAP´ITULO 8. EJEMPLOS DE JAVASCRIPT

<body> <center> <h3>COSTO DEL USO DE UN GIMNASIO - JavaScript</h3> <form name = "formulario" > <fieldset> <legend align = "center"> <b>Datos personales</b> </legend> <p> <label> <b>Nombre :</b> <input name = "nombre" type = "text" size = "40"> </label> <table align = "center" cellspacing = "35" > <tr align = "center"> <td> <label> <b>Peso :</b> <input name = "peso" </label>

type = "text"

size = "5"> <b>Kilos</b>

En esta parte se inicia el formulario y se hacen las entradas del nombre y el peso del cliente en cajas de texto. <td> <label> <b>Antig&uuml;edad:</b> <select name = "tiempo"> <option>0 <option>1 <option>2 <option>3 &oacute; m&aacute;s </select> <b>Meses</b> </label> </tr> </table>

A continuaci´on se hace una lista de selecci´on u ´nica para que el usuario elija la opci´on correcta con respecto a la antig¨ uedad.

8.4. COSTO DEL USO DE UN GIMNASIO

<label> <b>D&iacute;as que desea asistir:</b> <p> <input name ="dias" type="checkbox" value="Lunes" <input name ="dias" type="checkbox" value="Martes" <input name ="dias" type="checkbox" value= "Miercoles" <input name ="dias" type="checkbox" value="Jueves" <input name ="dias" type="checkbox" value="Viernes" <input name ="dias" type="checkbox" value="Sabado" <input name ="dias" type="checkbox" value="Domingo" </label> <p>

155

> > > > > > >

Lunes Martes Miercoles Jueves Viernes Sabado Domingo

Esta parte del formulario solicita la entrada de los d´ıas de la semana en los cuales el usuario asiste al gimnasio. La entrada se hace en un checkbox. <input type = "reset" value = "Limpiar"> <input type = "submit" value = "Aceptar" onclick = "recibir ( formulario )"> <p> </fieldset> </form>

En esta parte aparecen los botones de Aceptar y Limpiar, y se finaliza el formulario. </center> </body> </html> <script language = "JavaScript" src = "js/E04-Js.js" > </script>

Aqu´ı se termina la p´agina web y se hace la referencia del programa JavaScript.

C´ odigo E04-Js.js Ver programa 4 “Costo del uso de un gimnasio - JS”.

CAP´ITULO 8. EJEMPLOS DE JAVASCRIPT

156

Programa 4 - Costo del uso de un gimnasio - JS function recibir ( formulario ) { var nombre, peso, tiempo, dias; dias

= new Array ( );

nombre peso tiempo

= obtenerUno = obtenerUno = obtenerUno obtenerMultiples

( ( ( (

formulario, formulario, formulario, formulario,

’nombre’, ’peso’, ’tiempo’, ’dias’,

’text’ ’text’ ’select-one’ ’checkbox’, dias

); ); ); );

principal ( nombre, peso, tiempo, dias ); }

La funci´on recibir extrae del formulario los valores correspondientes a las variables nombre, peso, tiempo (antig¨ uedad), y el vector dias (en un par´ametro) para, que puedan procesarse a trav´es de la funci´on principal.

Continuaci´ on programa 4 function principal ( nombre, peso, tiempo, dias ) { var cargoFijo, costoSesion, descuento, recargo, total; inicioPagina ( "Costo del uso de un gimnasio", "COSTO DEL USO DE UN GIMNASIO - JavaScript" ); inicioSalida ( "Datos del usuario" ); cargoFijo costoSesion descuento recargo total

= = = = =

calculoCargoFijo calculoSesion calculoDescuento calculoRecargo calculoTotal

( ( ( ( (

peso ); tiempo, dias ); dias ); dias ); cargoFijo, costoSesion, descuento, recargo );

La primera parte de la funci´on principal llama a las funciones que inicializan

8.4. COSTO DEL USO DE UN GIMNASIO

157

la p´agina web y realizan los c´alculos cargoFijo, costoSesion (costo de sesi´on), descuento, recargo y total.

Continuaci´ on programa 4 imprimirEnTextInput( "Nombre :","40", nombre

);

document.write ( "<table align=’center’ cellspacing=’35’ >\n" ); document.write ( "<tr>\n" ); adicionarFilaTextoUnidad ( "Peso" , "5", peso, "Kilos" ); adicionarFilaTextoUnidad ( "Antig&uuml;edad:", "7", tiempo, "Meses" ); document.write ( "</tr>\n" ); document.write ( "</table>\n" );

En esta parte de la funci´on principal, se imprimen los datos principales del cliente en una tabla.

Continuaci´ on programa 4 document.write ( "<table align = ’center’>\n" ); adicionarFila ( "Cargo Fijo : ", cargoFijo adicionarFila ( "Costo Sesiones : ", costoSesion adicionarFila ( "Descuento : ", descuento adicionarFila ( "Recargo : ", recargo adicionarFilaTexto ( "======" adicionarFila ( "TOTAL : ", total adicionarFilaTexto ( "======" document.write ( "</table> <p>\n" );

); ); ); ); ); ); );

finSalida ( ); finPagina ( ); }

La parte final de la funci´on principal se encarga de mostrar en una tabla los valores calculados en la primera parte de la funci´on y se finaliza la p´agina web.

CAP´ITULO 8. EJEMPLOS DE JAVASCRIPT

158

Continuaci´ on programa 4 function calculoCargoFijo ( peso ) { var cargoFijo; cargoFijo = 0.0; if ( peso <= 50.0 ) { cargoFijo = 0.0; } else { if ( peso < 65.0 ) { cargoFijo = 2000.0; } else { if ( peso <= 85.0 ) { cargoFijo = 3000.0; } else { cargoFijo = 4000.0; } } } return ( cargoFijo ); }

La funci´on calculoCargoFijo permite obtener el costo del cargo fijo para el usuario del gimnasio de acuerdo al peso, recibido en el par´ametro peso y con base en la informaci´on de la primera tabla de la p´agina 152.

8.4. COSTO DEL USO DE UN GIMNASIO

159

Continuaci´ on programa 4 function costoSesion ( tiempo ) { var costo; costo = 0.0; switch ( parseInt ( tiempo ) ) { case 0: costo = 1200; break; case 1: costo = 1000; break; case 2: costo = 700; break; default: costo = 500; break; } return ( costo ); }

La funci´on costoSesion permite obtener el costo de una visita al gimnasio para el usuario de acuerdo a la antig¨ uedad, recibido en el par´ametro tiempo y con base en la informaci´on de la segunda tabla de la p´agina 152.

Continuaci´ on programa 4 function calculoSesion ( tiempo, dias ) { return ( parseInt ( costoSesion ( tiempo ) ) * parseInt ( cantidadSesiones ( dias ) ) ); }

La funci´on calculoSesion se utiliza para obtener el valor de las visitas al gimnasio en la semana.

CAP´ITULO 8. EJEMPLOS DE JAVASCRIPT

160

Continuaci´ on programa 4 function cantidadSesiones ( dias ) { return ( dias.length ); }

La funci´on cantidadSesiones tiene como objetivo retornar el n´ umero de d´ıas que el usuario asiste al gimnasio en la semana. Este valor coincide con el n´ umero de elementos del vector dias que la funci´on recibe como par´ametro.

Continuaci´ on programa 4 function calculoDescuento ( dias ) { var descuento; descuento = 0.0; for ( i = 0; i < dias.length ; i++ ) { if ( dias[i] == "Martes" || dias[i] == "Jueves" ) { descuento += 100.0; } } return ( descuento ); }

La funci´on calculoDescuento permite obtener un descuento para el usuario, en caso de que asista al gimnasio martes o jueves.

8.4. COSTO DEL USO DE UN GIMNASIO

161

Continuaci´ on programa 4 function calculoRecargo ( dias ) { var recargo; recargo = 0.0; for ( i = 0; i < dias.length ; i++ ) { if ( dias[i] == "Domingo" ) { recargo = 100.0; } } return ( recargo ); }

La funci´on calculoRecargo permite obtener un costo adicional para el usuario, en caso de que asista al gimnasio el d´ıa domingo.

Continuaci´ on programa 4 function calculoTotal ( cargoFijo, costoSesion, descuento, recargo ) { return ( cargoFijo + costoSesion - descuento + recargo ); }

La funci´on calculoTotal permite obtener el costo del uso del gimnasio para un usuario, de acuerdo a los valores que recibe como par´ametro.

162

CAP´ITULO 8. EJEMPLOS DE JAVASCRIPT Continuaci´ on programa 4

function adicionarFila ( texto, valor ) { document.write ( "<tr>\n" document.write ( "<td>" imprimirTitulo ( texto document.write ( " <td>" imprimirEnTextInput ( "", "5", valor document.write ( " <td>" imprimirTitulo ( " Pesos</b>" document.write ( "</tr>\n" }

); ); ); ); ); ); ); );

La funci´on adicionarFila permite adicionar una fila a una tabla previamente creada. Cada fila tiene tres celdas: un mensaje, un valor, dentro de un cuadro de texto y la unidad (Pesos). Observe que el mensaje se imprime de acuerdo al llamado de la funci´on imprimirTitulo y que cuadro de texto se incorpora utilizando la funci´on imprimirEnTextInput.

Continuaci´ on programa 4 function adicionarFilaTexto ( { document.write ( "<tr>\n" document.write ( " <td>" document.write ( " <td>" imprimirTitulo ( texto document.write ( " <td>" document.write ( "</tr>\n" }

texto ) ); ); ); ); ); );

La funci´on adicionarFilaTexto es similar a la anterior. En esta funci´on el mensaje que se recibe en el par´ametro texto se imprime en la segunda celda, dejando vac´ıas las otras dos.

8.4. COSTO DEL USO DE UN GIMNASIO

163

Continuaci´ on programa 4 function adicionarFilaTextoUnidad ( texto, ancho, valor, unidad ) { document.write ( "<td>" ); imprimirEnTextInput ( texto, ancho, valor ); imprimirTitulo ( unidad ); }

La funci´on adicionarFilaTextoUnidad imprime un valor dentro de una caja de texto con ancho especificado, un mensaje asociado (antes) y una unidad de medida (despu´es), dentro de una tabla.

Continuaci´ on programa 4 function imprimirTitulo ( texto ) { document.write ( "<b>" + texto + "</b>\n" ); }

Esta funci´on imprime un texto en negrita.

La figura 8.8 presenta la apariencia final del formulario.

Reutilizaci´ on de c´ odigo Funci´ on obtenerUno obtenerMultiples inicioPagina finPagina inicioSalida finSalida imprimirEnTextInput

P´ agina 131 134 138 138 144 145 145

Tabla 8.3: Gimnasio - Funciones reutilizadas - JavaScript

CAP´ITULO 8. EJEMPLOS DE JAVASCRIPT

164

Figura 8.8: Gimnasio - Salida - JavaScript

8.5.

B´ usqueda en un vector

Dado un vector de n´ umeros enteros de un tama˜ no especificado por el usuario, se debe imprimir el mayor de los elementos del arreglo, los elementos de las posiciones pares, el mayor de los elementos del las posiciones pares, los elementos de las posiciones impares, el mayor de los elementos del las posiciones impares.

C´ odigo E05-Js.html Ver “B´ usqueda en un vector - HTML (1)”.

La primera parte corresponde al encabezado de la p´agina Web.

´ 8.5. BUSQUEDA EN UN VECTOR

165

Figura 8.9: Vector - Entrada (1) - JavaScript

Figura 8.10: Vector - Entrada (2) - JavaScript B´ usqueda en un vector - HTML (1) <html> <head> <title> B&uacute;squeda en un vector </title> </head>

La segunda parte contiene un formulario inicial con la entrada del tama˜ no del vector. Observe detenidamente que al hacer clic en el bot´on Aceptar de tipo submit se hace el llamado a la p´agina Web E05a-Js.html por el m´etodo get, pasando el valor de la variable n a trav´es del URL. Ver figura 8.11.

CAP´ITULO 8. EJEMPLOS DE JAVASCRIPT

166

<body> <center> <h3>B&Uacute;SQUEDA EN UN VECTOR - JavaScript</h3> <br> <form method = "get" action = "E05a-Js.html"> <fieldset> <legend align = "center"><b> Datos del Vector</b> </legend> <p> <label> <b>Cantidad de elementos :</b> <input name = "n" type = "text" size = "5"> </label> <p> <input type = "reset" <input type = "submit" </fieldset> </form>

value = "Limpiar"> value = "Aceptar"> <p>

Figura 8.11: M´etodo get para el paso de par´ametros

</center> </body> </html>

La u ´ltima parte corresponde al final de la p´agina Web. Ahora observe el c´odigo de la p´agina Web que captura los datos del arreglo. Esta p´agina tiene una caja de texto para cada una de las posiciones del arreglo, de tama˜ no n.

´ 8.5. BUSQUEDA EN UN VECTOR

C´ odigo E05a-Js.html Ver “B´ usqueda en un vector - HTML (2)”.

B´ usqueda en un vector - HTML (2) <html> <head> <title> B&uacute;squeda en un vector </title> </head> <body> <center> <h3>B&Uacute;SQUEDA EN UN VECTOR</h3>

La primera parte corresponde al inicio de la p´agina Web. <fieldset> <legend align = "center"> <b> Entrada de datos</b> </legend> <p> <form method = "post" <table border = 4> <tr>

name="formulario">

La segunda parte corresponde al inicio del formulario.

167

CAP´ITULO 8. EJEMPLOS DE JAVASCRIPT

168

<script language = "javascript" > for ( i = 0; i < obtenerValorURL ( ) ; i++ ) { document.writeln( "<td>" ); document.writeln("<input type=’text’ size=’4’ name=’arreglo’>"); }

La tercera parte corresponde al c´odigo JavaScript necesario para crear las cajas de texto en la p´agina Web donde se ingresar´an los elementos del vector. Para obtener el n´ umero de elementos del vector utiliza la funci´on obtenerValorURL, la cual examina el URL y extrae el valor de la variable n, de la p´agina anterior.

function obtenerValorURL ( ) { cadena = location.search; valor = 0; if ( cadena == "" ) { document.write( "Cantidad no especificada." ); } else { valor = parseInt( cadena.substring(cadena.indexOf( "=" ) + 1, cadena.length) ); } return valor; } </script>

La funci´on obtenerValorURL opera de la siguiente forma: A trav´es de location.search; se obtienen los par´ametros que vienen por el URL. Esta informaci´on se recibe en forma de cadena de caracteres y se almacena en la variable cadena. Si la cadena es vac´ıa, quiere decir que no

´ 8.5. BUSQUEDA EN UN VECTOR

169

se recibieron par´ametros, caso en el cual se escribe un mensaje en la p´agina Web generada.

En caso de que la cadena no sea vac´ıa, se obtiene la subcadena que inicia a continuaci´on del signo = hasta el final y se convierte a entero para retornar ese valor. </tr> </table><br> <input type = "reset" value="Limpiar"> <input type = "submit" value="Aceptar" onclick = "recibir ( formulario )"> </form> </center> </body> </html> <script language = "JavaScript" src = "js/E05-Js.js"> </script>

La parte final contiene los botones Aceptar y Limpiar, as´ı como el llamado al programa JavaScript.

C´ odigo E05-Js.js Ver programa 5 “B´ usqueda en un vector - JS”.

La funci´on recibir se encarga de recibir el formulario HTML, del cual se obtiene el arreglo con los datos ingresados. A continuaci´on, hace el llamado a la funci´on principal.

La funci´on obtenerArreglo extrae los n´ umeros del formulario y los asigna a un arreglo llamado vector.

170

CAP´ITULO 8. EJEMPLOS DE JAVASCRIPT

Programa 5 - B´ usqueda en un vector - JS function recibir ( formulario ) { var arreglo; arreglo = new Array ( ); obtenerArreglo ( formulario, "arreglo", ’text’, arreglo ); principal ( arreglo ); } function obtenerArreglo ( formulario, nombreVariable, tipo, vector ) { var cantidad, i, j; cantidad = formulario.elements.length; j = 0; for (i = 0; i < cantidad; i++) { if ( formulario.elements[i].type == tipo && formulario.elements[i].name == nombreVariable ) { vector[j] = formulario.elements[i].value; j = j + 1; } } }

´ 8.5. BUSQUEDA EN UN VECTOR

171

Continuaci´ on programa 5 function principal ( arreglo ) { var mayor; inicioPagina ( "B&uacute;squeda en un vector", "B&Uacute;SQUEDA EN UN VECTOR - JavaScript" ); inicioSalida( "Resultados" ); inicioSalida ( "Elementos del vector" ); imprimirVector ( arreglo ); mayor = buscarMayorVector ( arreglo ); imprimirEnTextInput ( "El mayor es:", 5, mayor ); finSalida( ); inicioSalida ( "Elementos de posiciones pares" ); imprimirVectorPosicionesPares ( arreglo ); mayor = buscarMayorPosicionesPares ( arreglo ); imprimirEnTextInput ( "El mayor es:", 5, mayor ); finSalida( ); inicioSalida( "Elementos de posiciones impares" ); imprimirVectorPosicionesImpares ( arreglo ); mayor = buscarMayorPosicionesImpares ( arreglo ); imprimirEnTextInput ( "El mayor es:", 5, mayor ); finSalida( ); finSalida( ); finPagina( ); }

La funci´on principal se encarga de crear la p´agina web de resultados, mediante el llamado a las funciones que permiten cumplir con el prop´osito de este programa.

Observe que el mismo vector es enviado a seis funciones diferentes, donde cada cumple un objetivo diferente.

172

CAP´ITULO 8. EJEMPLOS DE JAVASCRIPT Continuaci´ on programa 5

function buscarMayorVector ( vector ) { return buscarMayorSubVector ( vector, 0, 1 ); }

Esta funci´on retorna el mayor de los elementos de un vector, el cual se obtiene como resultado del llamado a la funci´on buscarMayorSubVector, con los par´ametros que indican el vector a examinar, la posici´on inicial y el incremento para el ´ındice.

Continuaci´ on programa 5 function buscarMayorPosicionesPares ( vector ) { return buscarMayorSubVector ( vector, 0, 2 ); }

Esta funci´on retorna el mayor de los elementos de un vector en las posiciones pares, el cual se obtiene como resultado del llamado a la funci´on buscarMayorSubVector. Observe que inicia en la posici´on cero y el ´ındice se incrementa de dos en dos.

Continuaci´ on programa 5 function buscarMayorPosicionesImpares ( vector ) { return buscarMayorSubVector ( vector, 1, 2 ); }

Esta funci´on retorna el mayor de los elementos de un vector en las posiciones impares, el cual se obtiene como resultado del llamado a la funci´on buscarMayorSubVector. Observe que inicia en la posici´on uno y el ´ındice se incrementa de dos en dos.

´ 8.5. BUSQUEDA EN UN VECTOR

173

Continuaci´ on programa 5 function buscarMayorSubVector ( vector, inicio, incremento ) { mayor = parseInt ( vector [ inicio ] ); for ( i = inicio+incremento; i < vector.length ; i+=incremento ) { if ( parseInt ( vector [ i ] ) > mayor) { mayor = parseInt ( vector[ i ] ); } } return mayor; }

La funci´on buscarMayorSubVector retorna el mayor de los elementos de un vector, examinando la posici´on inicial y las posiciones que correspondan al valor de la variable i.

Continuaci´ on programa 5 function imprimirVector ( vector ) { imprimirSubVector ( vector, 0, 1 ); } function imprimirVectorPosicionesPares ( vector ) { imprimirSubVector ( vector, 0, 2 ); }

174

CAP´ITULO 8. EJEMPLOS DE JAVASCRIPT Continuaci´ on programa 5

function imprimirVectorPosicionesImpares ( vector ) { imprimirSubVector ( vector, 1, 2 ); }

Estas tres funciones permiten imprimir un vector o un subvector a trav´es del llamado a la funci´on imprimirSubVector, aplicando el mismo principio de las funciones que encontraban el mayor de los elementos de un vector.

Continuaci´ on programa 5 function imprimirSubVector ( vector, inicio, incremento ) { document.write ( "<br>" ); document.write ( "<table border = 4 cellpadding = ’10’>" ); document.write ( "<tr align = ’center’>" ); for ( i = inicio; i < vector.length ; i+=incremento ) { document.write ( "<td>" ); document.write (vector[ i ]); document.write ( "\n" ); } document.write ( "</tr>" ); document.write ( "</table> <p>" ); }

Esta funci´on forma una tabla de una sola fila con los elementos de un vector, o una parte de ´el, dado el vector, el valor inicial y el incremento.

´ 8.5. BUSQUEDA EN UN VECTOR

175

Reutilizaci´ on de c´ odigo Funci´ on inicioPagina finPagina inicioSalida finSalida imprimirEnTextInput

P´ agina 138 138 144 145 145

Tabla 8.4: Vector - Funciones reutilizadas - JavaScript

Figura 8.12: Vector - Salida - JavaScript

176

CAP´ITULO 8. EJEMPLOS DE JAVASCRIPT

Parte IV VBScript

177

“Imposible s´olo significa que no ha encontrado la soluci´on todav´ıa”.

An´onimo

9

Visi´on general En este cap´ıtulo se hace una breve descripci´on de los elementos m´as representativos de VBScript sin pretender abarcar completamente las posibilidades que ofrece este lenguaje.

VBScript es un lenguaje de scripts basado en objetos, derivado de Visual Basic y creado por la compa˜ n´ıa Microsoft. Ver figura 9.1.

Figura 9.1: http://www.microsoft.com De manera similar a JavaScript, VBScript tambi´en ampl´ıa las posibilidades de construcci´on de p´aginas Web permitiendo que ´estas sean de contenido activo.

9.1.

Caracter´ısticas

Al igual que en JavaScript, el c´odigo VBScript va incluido dentro de las p´aginas Web y no necesita ning´ un programa adicional, ni estar conectado a

´ GENERAL CAP´ITULO 9. VISION

180

Internet, ya que los navegadores actuales tienen incorporado el int´erprete del lenguaje.

VBScript, mediante cookies (archivos de texto), almacena peque˜ nas cantidades de informaci´on en el computador cliente. Estos archivos se ubican en una carpeta especial del disco duro, la cual varia de acuerdo al sistema operativo.

VBScript, al ser derivado de Visual Basic utiliza parte de su sintaxis. Adem´as, no es “Case Sensitive”, es decir, no diferencia las may´ usculas y min´ usculas.

VBScript no permite dividir una l´ınea de c´odigo en dos como s´ı lo hacen otros lenguajes.

9.2.

Comunicaci´ on con el usuario

Una de las m´as importantes funciones de todo lenguaje es la comunicaci´on con el usuario, tanto para la entrada de datos como para la salida de resultados o mensajes en la pantalla.

9.2.1.

Entrada de datos

La entrada de datos en VBScript puede hacerse b´asicamente de dos maneras: Utilizando la instrucci´on InputBox: nombre = InputBox ( "Ingrese el nombre", "Entrada", "Gabriel" ) ———————————————————————————————————–

´ CON EL USUARIO 9.2. COMUNICACION

181

Observe que aparece en pantalla un cuadro de entrada el cual tiene tres elementos b´asicos: el mensaje asociado ("Ingrese el nombre"), el t´ıtulo de la ventana ("Entrada") y el valor por omisi´on o sugerido ("Gabriel"). En caso de no tener ning´ un valor por omisi´on, se debe usar "" en la instrucci´on InputBox. A trav´es de formularios. Ver formularios en la p´agina 85 y el ejemplo Entrada y Salida (2) - VBScript en la p´agina 183.

9.2.2.

Salida por pantalla

La salida por pantalla se puede hacer b´asicamente de dos maneras: Utilizando la instrucci´on MsgBox: MsgBox ( "Bienvenido " + nombre ) ———————————————————————————————————–

La instrucci´on MsgBox permite mostrar en la pantalla una ventana con un texto, el cual puede ser una cadena especificada entre comillas dobles (" ") o comillas sencillas (0 0 ), el valor de una variable, o la uni´on de ambos, tal como se puede apreciar en la figura.

MsgBox puede tener dos par´ametros adicionales, los cuales son: • El tipo de ventana. Ver tabla 9.1.

• El t´ıtulo de la ventana.

Observe el siguientepor ejemplo.

El valor retornado MsgBox es almacenado en resultado.

A trav´es de la instrucci´on document.write:

´ GENERAL CAP´ITULO 9. VISION

182

Tipo VBOKONLY VBOKCANCEL: VBYESNOCANCEL VBABORTRETRYIGNORE VBYESNO VBRETRYCANCEL VBCRITICAL VBQUESTION VBEXCLAMATION VBINFORMATION

Significado ´ Unicamente con el bot´on Aceptar ( OK).

Botones Aceptar y Cancelar.

Botones S´ı, No y Cancelar.

Botones Anular, Reintentar, y Omitir.

Botones S´ı y No. Botones Reintentar y Cancelar.

Ventana de Error cr´ıtico con bot´on Aceptar.

Ventana de Interrogaci´ on con bot´on Aceptar.

Ventana de Exclamaci´on con bot´on Aceptar.

Ventana de Informaci´on con bot´on Aceptar.

Tabla 9.1: Tipo de ventanas MsgBox en VBScript

resultado = MsgBox ( "Error en la entrada", VBCRITICAL ) ———————————————————————————————————–

document.write ( "Bienvenido " + nombre ) ———————————————————————————————————–

´ CON EL USUARIO 9.2. COMUNICACION

183

La instrucci´on document.write permite generar c´odigo HTML. En este caso muestra en la pantalla un texto, el cual corresponde a la cadena "Bienvenido" y el valor de la variable nombre. En los ejemplos de este cap´ıtulo se puede apreciar la forma de utilizar esta instrucci´on.

El siguiente ejemplo muestra como asociar el evento onClick a un encabezado de nivel 5 y las instrucciones InputBox y MsgBox. Ver “Entrada y Salida (1) - VBScript”.

Entrada y Salida (1) - VBScript <html> <head> <title> Entrada y Salida de datos </title> </head> <body> <h3> ENTRADA Y SALIDA DE DATOS</h3> <h5 language = "VBScript" onClick = " nombre = InputBox ( ’Ingrese el nombre’ ) MsgBox ( ’Hola ’+ nombre ) "> Haga click aqu&iacute; para ingresar el nombre. </h5> </body> </html>

La figura 9.2 muestra la p´agina Web para la de la entrada de datos, del ejemplo anterior.

La figura 9.3 muestra la salida del ejemplo.

El siguiente ejemplo muestra como asociar el evento onChange a un campo de texto de un formulario y la instrucci´on document.write.

Ver “Entrada y Salida (2) - VBScript”.

184

´ GENERAL CAP´ITULO 9. VISION

Figura 9.2: Entrada (1) - VBScript

Figura 9.3: Salida (1) - VBScript

Entrada y Salida (2) - VBScript <html> <head>

9.3. INTEGRANDO VBSCRIPT Y HTML

185

<title> Entrada y Salida de datos </title> </head> <body> <h3> ENTRADA Y SALIDA DE DATOS</h3> <form> Edad: <input name = "edad" type = "text" size = "4" language = "VBScript" onChange = "document.write(’Su edad es: ’+ edad.value)"> </form> </body> </html>

La figura 9.4 muestra la p´agina Web con el formulario de entrada del ejemplo anterior.

Figura 9.4: Entrada (2) - VBScript

La figura 9.5 muestra la salida generada por la instrucci´on document.write.

Figura 9.5: Salida (2) - VBScript

9.3.

Integrando VBScript y HTML

Cuando el c´odigo VBScript es algo m´as que unas pocas l´ıneas, es recomendable utilizar la etiqueta <script> de HTML para delimitarlo, como en el ejemplo “Navegador en uso - VBScript”de la p´agina 186. Algunos autores, adem´as, encierran el c´odigo con comentarios HTML, para que sea ignorado

´ GENERAL CAP´ITULO 9. VISION

186

por los navegadores anteriores que no son compatibles con este lenguaje. Es decir, entre (<!--) y (-->).

El navegador interpretar´a el script de acuerdo a las instrucciones que est´en contenidas dentro de las etiquetas <script> y </script>. Generalmente los scripts se escriben al finalizar la p´agina Web o dentro de la cabecera. El c´odigo VBScript se ejecuta en el sitio de la p´agina Web donde est´e ubicado.

En el caso de las funciones, se ejecutan en el sitio donde se hace el llamado.

Tambi´en es posible sacar el c´odigo VBScript a un archivo independiente, caso en el que deber´a indicar la ruta para encontrarlo, utilizando el atributo src de la etiqueta <script>.

9.4.

Versiones y compatibilidad

VBScript est´a dise˜ nado para trabajar en el navegador Internet Explorer de Microsoft. Otros navegadores hasta ahora, no traen el lenguaje incluido. Las pruebas se realizaron utilizando el navegador Internet Explorer 6.0. El siguiente ejemplo permite ver el nombre del navegador, la versi´on y el sistema operativo en el cual se realizaron las pruebas.

Ver “Navegador en uso - VBScript”.

Navegador en uso - VBScript <html> <head> <title> Navegador en uso </title> </head> <body> <h3>NAVEGADOR EN USO</h3>

9.5. SINTAXIS DEL LENGUAJE

<script language = document.writeln document.writeln document.writeln document.writeln </script> </body> </html>

187

"VBScript"> ( "<pre>") ( "Nombre : " + navigator.appName ) ( "Versi&oacute;n: " + navigator.appVersion ) ( "</pre>")

La salida del ejemplo anterior se puede ver en la figura 9.6. El nombre del navegador se encuentra almacenado en navigator.appName y la versi´on en navigator.appVersion.

Figura 9.6: Navegador en uso - VBScript

9.5.

Sintaxis del lenguaje

En esta secci´on se pretende dar un vistazo a los elementos fundamentales de VBScript.

9.5.1.

Comentarios

Un comentario en VBScript se escribe hasta el final de la l´ınea, de dos maneras: Inicia con la palabra rem.

Inicia con una comilla simple (’).

´ GENERAL CAP´ITULO 9. VISION

188

9.5.2.

Tipos de datos

Los tipos de datos en VBScript son asignados en forma din´amica, de acuerdo a los valores que tomen las variables. Por ejemplo una variable podr´ıa tomar primero un valor de un entero y un momento despu´es ser una cadena.

VBScript soporta los siguientes tipos de datos: enteros, flotantes, booleanos, cadenas, vectores, matrices, y objetos, entre otros.

9.5.3.

Declaraci´ on de variables

Toda variable en VBScript no declarada se considera de alcance global. Las variables declaradas espec´ıficamente tendr´an alcance (´ambito de la varible) de acuerdo al lugar en el cual han sido declaradas. Por ejemplo, si se declara una variable dentro de una funci´on, ´esta tendr´a alcance u ´nicamente dentro de la funci´on.

Para declarar variables use la instrucci´on Dim y a continuaci´on la lista de variables separadas por comas. Si desea que VBScript impida el uso de variables no declaradas, escriba como primera instrucci´on option explicit.

Los vectores se declaran indicando entre par´entesis el n´ umero de elementos a contener menos uno. Es decir, si se desea declarar un vector de 10 elementos se declara como Dim vector ( 9 ) (La posici´on 0 tambi´en cuenta). Con las matrices, se indica el n´ umero de filas y columnas separados por el signo coma, dentro del par´entesis (Dim matriz ( 4, 3 )). En el ejemplo anterior se declar´o una matriz de cinco filas (fila 0 a la fila 4) por cuatro columnas (columna 0 a la columna 3).

Observe el siguiente ejemplo donde se crea una matriz de 5 filas por 4 columnas con los n´ umero enteros entre 1 y 20, haciendo un recorrido por filas.

Ver “Uso de matrices - VBScript”.

9.5. SINTAXIS DEL LENGUAJE

189

Uso de matrices - VBScript <html> <head> <title> Matrices en VBScript </title> </head>

<body> <h3>MATRICES EN VBSCRIPT</h3> <script language = "VBScript" > Dim matriz ( 4, 3 ) Call llenarMatriz ( matriz, 4, 3 ) Call imprimirMatriz ( matriz, 4, 3 )

La primera parte del ejemplo corresponde al inicio de la p´agina Web y la declaraci´on de la matriz de 5 filas por 4 columnas. Recuerde que se cuenta desde la posici´on 0, hasta el n´ umero indicado en la declaraci´on.

A continuaci´on se hace el llamado (Call) a las funciones llenarMatriz e imprimirMatriz.

Function llenarMatriz ( matriz, filas, columnas ) Dim i, j, k k = 1 For i = 0 to filas For j = 0 to columnas matriz ( i, j ) = k k = k + 1 Next Next End Function

La funci´on llenarMatriz se encarga de asignar los enteros del 1 al 20 a cada una de las posiciones de la matriz haciendo un recorrido por filas.

´ GENERAL CAP´ITULO 9. VISION

190

Function imprimirMatriz ( matriz, filas, columnas ) Dim i,j document.write ( "<table border = ’2’ cellpadding = ’5’ " ) document.write ( " cellspacing = ’10’ > " )

For i = 0 to filas document.write ( "<tr>") For j = 0 to columnas document.write ( "<td align = center>") document.write ( matriz ( i, j ) ) Next document.write ( "</tr>") Next document.write ( "</table>") End Function </script> </body> </html>

La funci´on imprimirMatriz genera una tabla HTML en la cual se ubica cada elemento de la matriz en una celda de la tabla. Observe las l´ıneas document.write ( "<tr>") al iniciar y document.write ( "</tr>" ) al terminar cada fila de la tabla y de la matriz. Los atributos y dem´as aspectos relacionados con las tablas en HTML los puede ampliar en la p´agina 44.

La figura 9.7 muestra la salida generada por el ejemplo anterior.

9.5. SINTAXIS DEL LENGUAJE

191

Figura 9.7: Uso de Matrices - VBScript

9.5.4.

Operadores aritm´ eticos

Los operadores aritm´eticos de VBScript son, en orden de precedencia: Significado Signo menos unario Potencia Multiplicaci´on - Divisi´on - Divisi´on entera - M´odulo Suma - Resta

Operador ^ * / \ Mod + -

Tabla 9.2: Operadores aritm´eticos de VBScript La precedencia de los operadores aritm´eticos se puede alterar usando par´entesis. La operaci´on entre par´entesis tendr´a mayor precedencia.

En caso de que se encuentren operaciones con el mismo nivel de precedencia, se resuelven de izquierda a derecha.

9.5.5.

Operadores relacionales

Los operadores relacionales tienen igual nivel de precedencia y los operadores aritm´eticos tienen mayor precedencia que los operadores relacionales.

´ GENERAL CAP´ITULO 9. VISION

192

Significado Mayor que Menor que Mayor o igual que Menor o igual que Igual Diferente

Operador > < >= <= = <>

Tabla 9.3: Operadores relacionales de VBScript

9.5.6.

Operadores l´ ogicos

Los operadores l´ogicos en orden de precedencia son: Significado No Y O exclusiva O

Operador Not And Xor Or

Tabla 9.4: Operadores l´ogicos de VBScript

Los operadores relacionales y los ar´ıtmeticos tienen mayor precedencia que los operadores l´ogicos.

9.5.7.

Otros operadores Significado Asignaci´on Concatenaci´on de datos de diferente tipo Concatenaci´on de cadenas

Operador = & +

Tabla 9.5: Otros operadores de VBScript

9.6. FUNCIONES

9.6.

193

Funciones

En las tablas siguientes se hace una breve descripci´on de algunas de las funciones m´as importantes de VBScript.

´ GENERAL CAP´ITULO 9. VISION

194 Nombre randomize ( ) rnd

(

)

abs sin cos exp log int sqr isNumeric

( ( ( ( ( ( ( (

round

( x, decimales )

x x x x x x x x

) ) ) ) ) ) ) )

Descripci´ on Inicializa el generador de n´ umeros aleatorios.

N´ umero aleatorio entre 0 y 1. Debe usar randomize() para generar diferentes secuencias de “n´ umeros aleatorios” en cada ejecuci´on. |x| sin(x). x es un ´angulo en radianes. cos(x). x es un ´angulo en radianes. ex ln(x) El entero m´as grande menor o igual a x. √ x Retorna true, si x es un n´ umero.

Si no, retorna false.

Redondea x a decimales posiciones decimales.

Tabla 9.6: Funciones matem´aticas en VBScript

Cuando se aplica round a un valor cuya parte decimal es 0.5, el resultado ser´a la aproxici´on al entero par m´as cercano.

Nombre cInt ( cadena ) clng ( cadena ) cSng ( cadena ) cDbl ( cadena ) cStr ( x )

Descripci´ on Convierte una cadena que contiene un n´ umero a entero.

Convierte una cadena que contiene un n´ umero a entero largo (long).

Convierte una cadena que contiene un n´ umero a flotante de precisi´on simple.

Convierte una cadena que contiene un n´ umero a flotante de precisi´on doble.

Convierte x a cadena.

Tabla 9.7: Funciones de conversi´on en VBScript

9.6. FUNCIONES

len inStr

mid

195

Nombre ( cadena ) ( posicion, cadena1, cadena2 )

( cadena, posicion, longitud ) strcmp ( cadena1, cadena2 )

Descripci´ on Devuelve la longitud de cadena.

Posici´on de la primera aparici´on de cadena2 en cadena1 a partir de posicion. Si no existe, devuelve 0. El par´ametro posicion debe ser mayor o igual a 1.

Devuelve la subcadena de tama˜ no longitud a partir de la posici´on posicion.

Compara dos cadenas. Devuelve 0 si son iguales.

Si la primera es mayor que la segunda devuelve 1.

Si no, retorna -1. Si alguna de las cadenas es null, devuelve null.

Tabla 9.8: Funciones de cadenas en VBScript

No olvide que en VBScript no es posible dividir una instrucci´on en dos renglones o m´as.

9.6.1.

Funciones definidas por el usuario

El manejo de funciones del usuario en VBScript permite el paso de par´ametros por referencia. De igual manera soporta funciones y procedimientos.

Ver “Funci´ on del usuario - VBScript”.

Funci´ on del usuario - VBScript Function areaCirculo ( radio ) areaCirculo = 3.1416 * radio ^ 2 end Function

Observe que el valor a retornar debe ser asignado al identificador de la funci´on. No todas las funciones retornan valores. En el caso de necesitar funciones que no retornan valores o se desea ignorar el valor que retornan, se hace el llamado usando la instrucci´on Call.

196

´ GENERAL CAP´ITULO 9. VISION

Ver “Procedimiento del usuario - VBScript”.

Procedimiento del usuario - VBScript Sub salida ( mensaje, numero ) document.write ( mensaje + " " & numero & "<br>" ) end Sub

Un procedimiento no retorna ning´ un valor. Observe el uso de los operadores + y & dentro de la instrucci´on document.write. Estos operadores permiten concatenar los elementos a imprimir a pesar de ser de diferente tipo, formando una u ´nica cadena que se imprimir´a en la p´agina Web de resultados.

Existen dos formas para llamar un procedimiento: Como una instrucci´on m´as del lenguaje. Tenga en cuenta que en este caso no se usan los par´entesis. Por ejemplo: salida "El area es: ", area Como una funci´on, con la instrucci´on Call y con par´entesis. Por ejemplo: Call salida ("El area es: ", area)

“No les diga a las personas c´omo hacer las cosas. D´ıgales qu´e hacer y permita que lo sorprendan con los resultados”.

George Patton

10

Ejemplos de VBScript A continuaci´on se presentan cinco ejemplos de p´aginas Web de contenido activo escrito en VBScript.

El primero de ellos explica la interacci´on de un usuario con un formulario HTML, del cual pueden obtener datos de los diferentes componentes como campos de texto, listas de chequeo, botones de radio, entre otros. Los datos obtenidos son mostrados por el programa VBScript en la p´agina Web resultante.

Los otros cuatro ejemplos muestran el uso de las sentencias de control de VBScript: decisiones simples, anidadas y m´ ultiples ciclos condicionados al comienzo ciclos condicionados al final arreglos

198

CAP´ITULO 10. EJEMPLOS DE VBSCRIPT

Adem´as, todos muestran la interacci´on con formularios HTML, y permiten reforzar algunos conceptos b´asicos de este lenguaje.

10.1.

Formulario de interacci´ on con VBScript

El primer ejemplo tiene como objetivo mostrar la forma en la cual VBScript recibe la informaci´on de un formulario HTML, con sus distintos elementos.

Ver figura 10.1.

Figura 10.1: Formulario - Entrada - VBScript

´ CON VBSCRIPT 10.1. FORMULARIO DE INTERACCION

199

C´ odigo E01-Vbs.html Ver “Formulario - HTML”.

Formulario - HTML <html> <head> <title>Formulario para interacci&oacute;n con VBScript</title> </head> <body> <h3>FORMULARIO DE ENTRADA - VBScript</h3> <form name="formulario"> <fieldset> <legend align="right"> <b> Formulario de consuta </b> </legend> <p>

La parte corresponde al inicio del formulario de entrada. Observe el nombre que se le ha dado al formulario. Este nombre es importante al ser recibido por una funci´on elaborada en VBScript llamada recibir, la cual est´a asociada al evento onClick sobre el bot´on Aceptar. <fieldset> <legend align = "center"><b> Datos personales</b> </legend> <label> Nombre : <input name = "nombre" type = "text" size = "50"> </label> <p>

200

CAP´ITULO 10. EJEMPLOS DE VBSCRIPT

<label> Nivel de Estudios : <select name = "nivel"> <option value = "Bachiller"> <option value = "T&eacute;cnico"> <option value = "Tecn&oacute;logo"> <option value = "Universitario"> <option value = "Posgrado"> <option value = "Otro"> </select> </label>

Bachiller T&eacute;cnico Tecn&oacute;logo Universitario Posgrado Otro

<label> Sexo : <input name = "sexo" type = "radio" value = "Femenino"> Femenino <input name = "sexo" type = "radio" value = "Masculino"> Masculino </label> <p> </fieldset> <p>

La segunda parte corresponde a los elementos del formulario. Observe que en esta parte se tienen un campo de texto, una lista de selecci´on u ´nica llamada nivel y un radiobutton llamado sexo, agrupados con la etiqueta <fieldset>. Es importante hacer notar que en la lista de selecci´on se utiliz´o el atributo value, lo mismo para el sexo. Estos valores son los que ser´an asignados a los identificadores, especificados con el atributo name. <fieldset> <legend align = "center"> <b>Datos de preferencia</b> </legend> <p> <label> Lenguajes de programaci&oacute;n <input name="lenguaje" type="checkbox" <input name="lenguaje" type="checkbox" <input name="lenguaje" type="checkbox" <input name="lenguaje" type="checkbox" </label> <p>

que conoce: value="C++"> value="Java" > value="Delphi"> value="SmallTalk" >

C++ Java Delphi SmallTalk

´ CON VBSCRIPT 10.1. FORMULARIO DE INTERACCION

201

<label> Sistema operativo favorito : <select name = "sistema" size = "3" multiple> <option> Linux <option> Windows <option> MacOS <option> FreeBSD </select> </label> Observaciones: <textarea name = "observaciones" cols = "15" rows = "5"></textarea> <p> </fieldset> <p> <label> Clave <input name </label>

: = "clave"

<input name

= "version" type = "hidden" value = "1.0">

type = "password" size = "8">

<input type = "reset" value = "Limpiar"> <input type = "submit" value = "Aceptar" onclick = ’recibir ( formulario )’> </fieldset> </form>

La parte n´ umero tres de este ejemplo agrupa un checkbox (lenguaje), una lista de selecci´on m´ ultiple llamada sistema, un cuadro de texto llamado observaciones, un elemento tipo password llamado clave, un elemento tipo hidden y los botones reset y submit. Al hacer click sobre el bot´on Aceptar (submit), se env´ıa el formulario llamado formulario a la funci´on recibir. El valor de la versi´on ser´a constante y siempre valdr´a 1.0. Esto se hace con el fin de ilustrar el paso de variables ocultas a trav´es de p´aginas Web. Observe el final del formulario.

202

CAP´ITULO 10. EJEMPLOS DE VBSCRIPT

</body> </html> <script language = "VBscript" src = "Vbs/E01-Vbs.vbs"> </script>

La u ´ltima parte indica el final de la p´agina Web y con la etiqueta <script> se especifica la ruta donde se encuentra el c´odigo VBScript asociado a la p´agina Web, en el directorio Vbs de la carpeta donde est´e almacenado el c´odigo HTML anterior.

Si desea mayor detalle en el manejo de formularios, consulte la p´agina 85.

C´ odigo E01-Vbs.vbs El programa E01-Vbs.vbs inicia con la funci´on recibir, a la cual le llega como par´ametro un formulario cuyo nombre interno ser´a formulario. Recuerde que el nombre del formulario en HTML era formulario.

El objetivo de la funci´on recibir es extraer del formulario variables locales para que puedan ser procesadas independientemente. Para poder independizar las variables se utilizan las funciones obtenerUno, obtenerRadio, obtenerCheckBox y obtenerList.

Observe la declaraci´on de las variables. Tanto lenguaje como sistema son vectores de cinco elementos, los cuales servir´an para almacenar la informaci´on que en forma de arreglo fue utilizada en el formulario (checkbox y select-multiple).

Una vez que las variables locales tienen los datos se hace uso de la funci´on principal para su procesamiento. Es de tener en cuenta que los nombres de las funciones son arbitrarios.

Ver programa 6 “Formulario - VBS”.

´ CON VBSCRIPT 10.1. FORMULARIO DE INTERACCION

203

Programa 6 - Formulario - VBS Function recibir ( formulario ) Dim nombre, clave, version, observaciones, nivel, sexo Dim lenguaje ( 4 ), sistema ( 4 ) nombre observaciones clave version nivel

= = = = =

obtenerUno obtenerUno obtenerUno obtenerUno obtenerUno

( ( ( ( (

formulario.nombre formulario.observaciones formulario.clave formulario.version formulario.nivel

Call obtenerRadio ( formulario.sexo, 1, sexo Call obtenerCheckBox ( formulario.lenguaje, lenguaje Call obtenerList ( formulario.sistema, sistema

) ) ) ) ) ) ) )

Call principal ( nombre, observaciones, clave, version, nivel, sexo, lenguaje, sistema ) End Function

Tenga en cuenta que VBScript no permite dividir una instrucci´on en dos o m´as renglones.

Continuaci´ on programa 6 Function obtenerUno ( nombre ) obtenerUno = nombre.value End Function

La funci´on obtenerUno recibe un elemento de un formulario y retorna su atributo value, cuando corresponde a uno de los siguientes tipos: text, textarea, password, hidden y select-one.

CAP´ITULO 10. EJEMPLOS DE VBSCRIPT

204

Continuaci´ on programa 6 Function obtenerRadio ( nombreRadio, cantidad, nombreVariable ) Dim i, j j = 0 For i = 0 to cantidad If ( nombreRadio(i).status = true ) Then nombreVariable = nombreRadio(i).value j = 1 End If Next obtenerRadio = j End Function

La funci´on obtenerRadio recibe tres par´ametros: El elemento tipo radio1 el cual hace parte de un formulario, la cantidad de opciones de ese elemento menos uno (comienza en cero) y el nombre de la variable que almacenar´a el valor (value) de la opci´on marcada (status = true). Esta funci´on retorna 0 cuando no hay ninguna opci´on marcada y 1 en caso contrario.

Continuaci´ on programa 6 Function obtenerCheckBox ( nombreCheckBox, nombreArreglo ) Dim i, j j = 0 For i = 0 to Ubound( nombreArreglo ) - 1 If ( nombreCheckBox(i).status = true ) Then nombreArreglo(j) = nombreCheckBox(i).value j=j+1 End If Next obtenerCheckBox = j End Function

1

El elemento tipo radio es un vector que contiene varias opciones.

´ CON VBSCRIPT 10.1. FORMULARIO DE INTERACCION

205

La funci´on obtenerCheckBox permite obtener el valor (value) de todas las opciones marcadas (status = true) en el formulario HTML. Estas opciones seleccionadas se almacenan en el vector nombreArreglo. La capacidad m´axima de este vector, es determinada por la funci´on Ubound de VBScript.

La funci´on retorna el n´ umero de opciones marcadas (j).

Continuaci´ on programa 6 Function obtenerList ( nombreList, nombreArreglo ) Dim i, j j = 0 For i = 0 to Ubound( nombreArreglo ) - 1 If ( nombreList(i).selected = true ) Then nombreArreglo(j) = nombreList(i).Text j=j+1 End If Next obtenerList = j End Function

La funci´on obtenerList es similar a la anterior. Se diferencian en que el arreglo de resultados almacena el texto (Text) asociado a cada opci´on seleccionada. Esta funci´on se utiliza para listas de selecci´on m´ ultiple.

Continuaci´ on programa 6 Function principal ( nombre, observaciones, clave, sexo, lenguaje, sistema Call inicioPagina ( "Procesamiento de formularios "Datos recibidos - VBScript" Call inicioFormato ( )

version, nivel, ) en VBS", )

CAP´ITULO 10. EJEMPLOS DE VBSCRIPT

206

Continuaci´ on programa 6 Call imprimirValor Call imprimirValor Call imprimirValor Call imprimirVector Call imprimirVector Call imprimirValor Call imprimirValor Call imprimirValor Call finFormato ( ) Call finPagina ( ) End Function

( ( ( ( ( ( ( (

"Nombre" , nombre ) "Nivel de Estudios", nivel ) "Sexo" , sexo ) "Lenguajes que conoce", lenguaje ) "Sistema operativo favorito", sistema ) "Version" , version ) "Clave" , clave ) "Observaciones", observaciones )

La funci´on principal recibe como par´ametros las variables individuales y arreglos que fueron extra´ıdos del formulario con el fin de generar c´odigo HTML que muestre los datos ingresados en el formulario. Para ello, se utilizan las funciones imprimirValor e imprimirVector.

Adem´as, con el fin de generar adecuadamente el c´odigo HTML, se crearon las funciones inicioPagina y finPagina y las funciones inicioFormato y inicioFormato son para formatear el texto, es decir, tienen un efecto sobre la presentaci´on de la p´agina Web. Continuaci´ on programa 6 Function imprimirValor ( texto, valor ) document.writeln ( "<b>"+ texto + "</b><br>" + valor + "<br>" ) End Function

Esta funci´on imprime un valor acompa˜ nado de un mensaje.

´ CON VBSCRIPT 10.1. FORMULARIO DE INTERACCION

207

Continuaci´ on programa 6 Function imprimirVector ( texto, vector ) document.writeln ( "<b>" + texto + "</b>" ) For i = 0 to Ubound( vector ) - 1 If ( vector(i) <> "" ) Then document.writeln ( vector(i) ) End If Next document.writeln ( "<br>" ) End Function

La funci´on imprimirVector se encarga de imprimir los elementos de un vector acompa˜ nados de un t´ıtulo general. El tama˜ no del vector es calculado con la funci´on Ubound, propia de VBScript. Observe que al igual que en JavaScript la terminaci´on ln de la funci´on document.write indica que al generar el c´odigo HTML insertar´a un salto de l´ınea al terminar de imprimir.

Continuaci´ on programa 6 Function inicioPagina document.writeln document.writeln document.writeln document.writeln document.writeln document.writeln document.writeln document.writeln document.writeln End Function

( ( ( ( ( ( ( ( ( (

titulo, texto ) "<html>" ) " <head>" ) " <title>" ) titulo ) " </title>" ) " </head>" ) " <body>" ) " <center>" ) " <h3>"+ texto + "</h3>" )

La funci´on inicioPagina tiene como objetivo generar el c´odigo HTML correspondiente al encabezado de la p´agina Web con el t´ıtulo para la ventana y un texto (<h3>) para el documento.

CAP´ITULO 10. EJEMPLOS DE VBSCRIPT

208

Continuaci´ on programa 6 Function finPagina document.writeln document.writeln document.writeln End Function

( ( ( (

) " </center>" ) " </body>" ) "</html>" )

La funci´on finPagina genera la parte final de la p´agina Web. Continuaci´ on programa 6 Function inicioFormato ( ) document.writeln ( "<pre>" ) End Function

Esta funci´on permite iniciar el texto con tipo de letra similar al de una m´aquina de escribir y preformateado (respeta los espacios en blanco y saltos de l´ınea, entre otros). Esta funci´on podr´ıa incluir colores, tipos de letra y otros atributos que afecten la presentaci´on de la p´agina Web. Continuaci´ on programa 6 Function finFormato ( ) document.writeln ( "</pre>" ) End Function

Esta funci´on se encarga de desactivar el formato que se activa con la funci´on iniciarFormato.

10.2.

El mayor de seis n´ umeros

Teniendo un formulario de entrada en el cual se solicitan al usuario seis n´ umeros enteros, encontrar el mayor. La salida se har´a en un formulario, donde los elementos est´an desactivados. Ver figura 10.3.

´ 10.2. EL MAYOR DE SEIS NUMEROS

Figura 10.2: Formulario - Salida - VBScript

Figura 10.3: El mayor de seis n´ umeros - Entrada - VBScript

C´ odigo E02-Vbs.html Ver “El mayor de seis n´ umeros - HTML”.

209

CAP´ITULO 10. EJEMPLOS DE VBSCRIPT

210

El mayor de seis n´ umeros - HTML <html> <head> <title> El mayor de seis n&uacute;meros </title> </head> <body> <center> <h3>EL MAYOR DE SEIS N&Uacute;MEROS - VBScript</h3>

La primera parte del ejemplo corresponde al encabezado de la p´agina Web. <form name = "formulario"> <fieldset> <legend align = "center"><b> N&uacute;meros a examinar</b> </legend> <p> <label> <input </label>

name = "n1" type = "text"

size = "5">

<label> <input </label>

name = "n2" type = "text"

size = "5">

<label> <input name = "n3" type = "text" </label> <P>

size = "5">

<label> <input </label>

size = "5">

name = "n4" type = "text"

´ 10.2. EL MAYOR DE SEIS NUMEROS

<label> <input </label>

211

name = "n5" type = "text"

size = "5">

<label> <input name = "n6" type = "text" </label> <p>

size = "5">

<input type = "reset" value = "Limpiar"> <input type = "submit" value = "Aceptar" onclick = "recibir ( formulario )"> <p> </fieldset> </form> </center> </body> </html> <script language = ’VBscript’ src = ’Vbs/E02-VBs.vbs’ > </script>

El formulario de entrada tiene seis cajas de entrada de tipo text. Al hacer clic en Aceptar se pasa el formulario a la funci´on recibir. Observe los nombres de las variables asociadas a cada caja de texto: n1, n2, n3, n4, n5, n6. Al final de la p´agina se encuentra la referencia al archivo que contiene el programa VBScript.

C´ odigo E02-Vbs.vbs La primera parte de este programa corresponde a la funci´on recibir, la cual recibe un formulario y se encarga de extraer los valores de cada caja de texto, almacen´andolos en las variables de la a a la f, para luego pasar estos valores por par´ametro, a la funci´on principal.

Ver programa 7 “El mayor de seis n´ umeros - VBS”.

CAP´ITULO 10. EJEMPLOS DE VBSCRIPT

212

Programa 7 - El mayor de seis n´ umeros - VBS Function recibir ( formulario ) Dim a, b, c, d, e, f a b c d e f

= = = = = =

obtenerUno obtenerUno obtenerUno obtenerUno obtenerUno obtenerUno

( ( ( ( ( (

formulario.n1 formulario.n2 formulario.n3 formulario.n4 formulario.n5 formulario.n6

) ) ) ) ) )

Call principal ( a, b, c, d, e, f ) End Function

Function principal ( n1, n2, n3, n4, n5, n6 ) Dim mayor Call inicioPagina ( "El mayor de seis n&uacute;meros", "EL MAYOR DE SEIS N&Uacute;MEROS - VBScript" ) Call inicioSalida ( "N&uacute;meros ingresados" ) document.write ("<table border = ’1’ align = ’center’") document.write (" cellspacing = ’5’ cellpadding = ’5’ > ") Call adicionarFilaNumeros ( n1, n2, n3 ) Call adicionarFilaNumeros ( n4, n5, n6 ) document.write ( "</table> <p>" ) mayor mayor mayor mayor mayor

= = = = =

encontrarMayor encontrarMayor encontrarMayor encontrarMayor encontrarMayor

( ( ( ( (

n1, mayor, mayor, mayor, mayor,

n2 n3 n4 n5 n6

) ) ) ) )

Call imprimirEnTextInput ( "El mayor es:", "5", mayor ) Call finSalida( ) Call finPagina( ) End Function

´ 10.2. EL MAYOR DE SEIS NUMEROS

213

La funci´on principal es la parte m´as importante del programa. Su objetivo es hacer el llamado de las funciones inicioPagina - finPagina e inicioSalida - finSalida; construir una tabla donde cada celda tendr´a uno de los seis valores recibidos como par´ametro (los cuales se fueron obtenidos del formulario a trav´es de la funci´on recibir); encontrar el mayor utilizando varias veces la funci´on encontrarMayor. Posteriormente el resultado se escribe en la p´agina Web. Continuaci´ on programa 7 Function encontrarMayor ( a, b ) Dim numero If ( cInt ( a ) > cInt ( b ) ) Then numero = cInt ( a ) Else numero = cInt ( b ) End If encontrarMayor = numero End Function

La funci´on encontrarMayor devuelve el mayor entre dos enteros. Observe que los par´ametros recibidos son convertidos a entero utilizando la funci´on cInt, propia de VBScript.

Continuaci´ on programa 7 Function inicioSalida ( leyenda ) document.writeln ( "<fieldset>" document.writeln ( " <legend align = ’center’>" document.writeln ( " <b>" + leyenda + "</b> " document.writeln ( " </legend> <p>" End Function

) ) ) )

La funci´on inicioSalida permite iniciar la agrupaci´on de campos en un formulario de salida HTML. Utiliza alineaci´on central para la leyenda que se recibe por par´ametro.

214

CAP´ITULO 10. EJEMPLOS DE VBSCRIPT Continuaci´ on programa 7

Function finSalida ( ) document.writeln ( "<p></fieldset> <p>" ) End Function

La funci´on finSalida hace una separaci´on de p´arrafo, finaliza un grupo de campos y deja nuevamente un espacio con respecto al siguiente p´arrafo.

Continuaci´ on programa 7 Function adicionarFilaNumeros ( numero1, numero2, numero3 ) document.writeln ( "<tr>" ) document.write ( "<td>" ) Call imprimirEnTextInput( "", "5", numero1 ) document.write ( "<td>" ) Call imprimirEnTextInput( "", "5", numero2 ) document.write ( "<td>" ) Call imprimirEnTextInput( "", "5", numero3 ) document.writeln ( "</tr>" ) End Function

La funci´on adicionarFilaNumeros adiciona una fila de tres columnas a una tabla. Para ubicar en cada celda los n´ umeros que recibe como par´ametros, hace el llamado a la funci´on imprimirEnTextInput.

Continuaci´ on programa 7 Function imprimirEnTextInput ( texto, ancho, valor ) document.writeln ( "<label>" document.writeln ( " <b>" + texto + "</b>" document.write ( " <input type = ’text’ size = ’" document.write ( ancho & "’ value = ’" & valor & "’ disabled>" document.writeln ( "</label>" End Function

) ) ) ) )

imprimirEnTextInput asume que ser´a utilizada dentro de un formulario de salida, donde existen campos agrupados por la etiqueta <fieldset>, utili-

10.3. RELOJ DE ARENA

215

zada en las funciones inicioSalida y finSalida. El par´ametro texto es el t´ıtulo que acompa˜ nar´a una caja de texto, utilizada para la salida del valor que se recibe con el par´ametro valor. ancho se utiliza para establecer el ancho de la caja de texto. Observe que el valor ser´a mostrado en una tonalidad de gris, indicando que se encuentra deshabilitado (disabled).

Reutilizaci´ on de c´ odigo Funci´ on obtenerUno inicioPagina finPagina

P´ agina 203 207 208

Tabla 10.1: El mayor de seis n´ umeros - Funciones reutilizadas - VBScript

Figura 10.4: El mayor de seis n´ umeros - Salida - VBScript

10.3.

Reloj de arena

Hacer un programa que realice una figura similar a un reloj de arena dado el ancho (m´ınimo 5 - m´aximo 10) y el caracter con el cual se desea realizar la c %). Ver figura 10.5. figura (*, -, =, #, °, La entrada se realiza mediante el formulario HTML de la figura 10.5.

CAP´ITULO 10. EJEMPLOS DE VBSCRIPT

216

Figura 10.5: Reloj de arena - Entrada - VBScript

Figura 10.6: Reloj de arena - Salida - VBScript

C´ odigo E03-Vbs.html Ver “Reloj de arena - HTML”.

Reloj de arena - HTML <html> <head> <title> Reloj de arena </head>

</title>

10.3. RELOJ DE ARENA

217

<body> <center> <h3>FIGURA CON CARACTERES - VBScript</h3> <form name="formulario"> <fieldset> <legend align="center"><b> Datos de la figura</b> </legend> <p>

La primera parte del ejemplo corresponde al inicio de la p´agina Web y al inicio del formulario de entrada. <label> <b>Ancho de la figura:</b> <select name="ancho"> <option value=5> 5 <option value=6> 6 <option value=7> 7 <option value=8> 8 <option value=9> 9 <option value=10>10 </select> </label> <label> <b>Caracter:</b> <select name="caracter"> <option value="*"> * <option value="-"> <option value="="> = <option value="#"> # <option value="&#169;">&#169; <option value="%"> % </select> </label> <p> <input type="reset" value="Limpiar"> <input type="submit" value="Aceptar" onclick=’recibir ( formulario )’> </fieldset> </form>

CAP´ITULO 10. EJEMPLOS DE VBSCRIPT

218

El ancho de la figura se ingresa a trav´es de una lista de selecci´on u ´nica. De igual manera como se ingresa el ancho de la figura, se puede seleccionar el caracter elegido para realizar la figura. </center> </body> </html> <script language = ’VBscript’ src = ’Vbs/E03-Vbs.vbs’ > </script>

La u ´ltima parte corresponde a la finalizaci´on de la p´agina Web y la referencia al archivo donde se encuentra el programa VBScript.

C´ odigo E03-Vbs.vbs Ver programa 8 “Reloj de arena - VBS”.

Programa 8 - Reloj de arena - VBS Function recibir ( formulario ) Dim caracter, ancho ancho = obtenerUno ( formulario.ancho ) caracter = obtenerUno ( formulario.caracter ) Call principal ( ancho , caracter ) End Function

La funci´on recibir obtiene del formulario que le llega como par´ametro, dos valores, el ancho y el caracter. Luego se los pasa a la funci´on principal.

10.3. RELOJ DE ARENA

219

Continuaci´ on programa 8 Function principal( ancho, caracter ) Call inicioPagina( "Reloj de arena", "RELOJ DE ARENA - VBScript") Call inicioSalida( "Figura generada" ) Call inicioFormato( ) Call figura ( ancho, caracter ) Call finFormato( ) Call finSalida( ) Call finPagina( ) End Function

La funci´on principal hace el llamado de las funciones que permiten construir adecuadamente la p´agina Web. Adem´as, llama la funci´on figura donde le pasa por par´ametro los dos valores que recibe.

Continuaci´ on programa 8 Function figura ( ancho, caracter ) Dim i, numeroEspacios, numeroCaracteres, mitad mitad = ancho / 2.0 numeroEspacios = 0 For i = 1 to ancho numeroCaracteres = ancho - 2 * numeroEspacios Call imprimirHorizontal ( numeroEspacios, " " ) Call imprimirHorizontal ( numeroCaracteres, caracter ) Call imprimirHorizontal ( numeroEspacios, " " ) If ( i < mitad ) Then numeroEspacios = numeroEspacios + 1 End If If ( i > mitad ) Then numeroEspacios = numeroEspacios - 1 End If document.writeln ( ) Next End Function

220

CAP´ITULO 10. EJEMPLOS DE VBSCRIPT

La figura se hace mediante un ciclo que controla el n´ umero de filas. En cada una de las filas se hacen tres llamados a la funci´on imprimirHorizontal, debido a que para realizar el dibujo, de forma horizontal se pueden distinguir tres partes, la primera y la u ´ltima con espacios en blanco y la del medio con el caracter elegido.

Observe que en la primera figura el n´ umero de espacios aumenta y que en la segunda mitad disminuye. Adem´as, si la figura es par, el n´ umero de espacios permanece constante cuando llega a la mitad, logrando el efecto deseado.

La f´ormula numeroCaracteres = ancho - 2 * numeroEspacios; indica que el n´ umero de caracteres se disminuye en dos cada regl´on.

Finalmente, tenga en cuenta que la variable i es entera, mientras que mitad es flotante.

Continuaci´ on programa 8 Function imprimirHorizontal ( ancho, caracter ) Dim j For j = 1 to ancho document.write ( caracter ) Next End Function

La funci´on imprimirHorizontal se encarga de imprimir el caracter recibido como par´ametro, la cantidad de veces especificado en el par´ametro ancho.

La salida del programa anterior se puede observar en la figura 10.6.

10.4. COSTO DEL USO DE UN GIMNASIO

221

Reutilizaci´ on de c´ odigo Funci´ on obtenerUno inicioPagina finPagina inicioFormato finFormato inicioSalida finSalida

P´ agina 203 207 208 208 208 213 214

Tabla 10.2: Reloj de arena - Funciones reutilizadas - VBScript

10.4.

Costo del uso de un gimnasio

Calcular el valor a pagar en un gimnasio de acuerdo al peso del cliente, al n´ umero de sesiones por semana y a la antig¨ uedad. Ver las siguientes tablas.

El usuario tendr´a un descuento de $100 si visita el gimnasio el d´ıa martes y otros $100 si lo hace el jueves. Adem´as, tendr´a un recargo de $100 si asiste al gimnasio el domingo.

Peso Cargo fijo hasta 50 $ 0 ( 50 , 65 ) $ 2.000 [ 65 , 85 ] $ 3.000 m´as de 85 $ 4.000 Antig¨ uedad 0 1 2 3 ´o m´as

Costo por sesi´ on 1.200 1.000 700 500

222

CAP´ITULO 10. EJEMPLOS DE VBSCRIPT

Figura 10.7: Gimnasio - Entrada - VBScript

C´ odigo E04-Vbs.html Ver “Costo del uso de un gimnasio - HTML”.

Costo del uso de un gimnasio - HTML <html> <head> <title> Costo del uso de un gimnasio </head>

</title>

<body> <center> <h3>COSTO DEL USO DE UN GIMNASIO - VBScript</h3>

10.4. COSTO DEL USO DE UN GIMNASIO

223

La primera parte, corresponde al inicio de la p´agina Web. <form method="post" name="formulario"> <fieldset> <legend align="center"> <b>Datos personales</b> </legend> <p> <label> <b>Nombre :</b> <input name="nombre" type="text" size="40"> </label> <table align="center" cellspacing="35" > <tr align="center"> <td> <label> <b>Peso :</b> <input name="peso" type="text" size="5"> <b>Kilos</b> </label>

En esta parte se inicia el formulario y se hacen las entradas del nombre y el peso del cliente en cajas de texto. <td> <label> <b>Antig&uuml;edad:</b> <select name="tiempo"> <option value=0>0 <option value=1>1 <option value=2>2 <option value=3>3 &oacute; m&aacute;s </select> <b>Meses</b> </label> </tr> </table>

En la tercera parte se hace una lista de selecci´on u ´nica para que el usuario elija la opci´on correcta con respecto a la antig¨ uedad.

CAP´ITULO 10. EJEMPLOS DE VBSCRIPT

224

<label> <b>D&iacute;as que desea asistir:</b> <p> <input name="dias" type="checkbox" value="Lunes" > <input name="dias" type="checkbox" value="Martes" > <input name="dias" type="checkbox" value="Miercoles"> <input name="dias" type="checkbox" value="Jueves" > <input name="dias" type="checkbox" value="Viernes" > <input name="dias" type="checkbox" value="Sabado" > <input name="dias" type="checkbox" value="Domingo" > </label> <p>

Lunes Martes Miercoles Jueves Viernes Sabado Domingo

<input type ="reset" value="Limpiar"> <input type ="submit" value="Aceptar" onclick=’recibir ( formulario )’> <p> </fieldset> </form> </center> </body> </html> <script language = "VBScript" src = "vbs/E04-Vbs.vbs" > </script>

En la parte final del formulario solicita la entrada de los d´ıas de la semana en los cuales el usuario asiste al gimnasio. La entrada se hace en un checkbox.

Tambi´en aparecen los botones de Aceptar y Limpiar. Adem´as, se finaliza el formulario, se termina la p´agina Web y se hace la referencia del programa VBScript.

C´ odigo E04-Vbs.vbs Ver programa 9 “Costo del uso de un gimnasio - VBS”.

10.4. COSTO DEL USO DE UN GIMNASIO

225

Programa 9 - Costo del uso de un gimnasio - VBS Function recibir ( formulario ) Dim nombre, peso, tiempo, numeroDias, dias( 7 ) nombre = obtenerUno ( formulario.nombre ) peso = parseFloat ( obtenerUno ( formulario.peso ) ) tiempo = obtenerUno ( formulario.tiempo ) numeroDias = obtenerCheckBox ( formulario.dias, dias ) Call principal ( nombre, peso, tiempo, dias End Function

)

La funci´on recibir extrae del formulario los valores correspondientes a las variables nombre, peso, tiempo (antig¨ uedad), y el vector dias (en un par´ametro) para, que puedan procesarse a trav´es de la funci´on principal.

Continuaci´ on programa 9 Function principal ( nombre, peso, tiempo, dias ) Dim cargoFijo, costoSesion, descuento, recargo, total Call inicioPagina ( "Costo del uso de un gimnasio", "COSTO DEL USO DE UN GIMNASIO - VBScript" ) Call inicioSalida ( "Datos del usuario" ) cargoFijo costoSesion descuento recargo total

= = = = =

calculoCargoFijo calculoSesion calculoDescuento calculoRecargo calculoTotal

( ( ( ( (

peso ) tiempo, dias ) dias ) dias ) cargoFijo, costoSesion, descuento, recargo )

La primera parte de la funci´on principal llama a las funciones que inicializan la p´agina Web y realizan los c´alculos cargoFijo, costoSesion (costo de sesi´on), descuento, recargo y total. Recuerde que en VBScript no se permite dividir una instrucci´on en dos renglones distintos, como en el caso del llamado a la funci´on calculoTotal.

CAP´ITULO 10. EJEMPLOS DE VBSCRIPT

226

Continuaci´ on programa 9 Call imprimirEnTextInput ( "Nombre :","40", nombre ) document.writeln ( "<table align=’center’ cellspacing=’35’ >" ) document.writeln ( "<tr>" ) Call adicionarFilaTextoUnidad ("Peso" ,"5",peso, "Kilos") Call adicionarFilaTextoUnidad ("Antiguedad:","7",tiempo,"Meses") document.writeln ( "</tr>" ) document.writeln ( "</table>" ) document.writeln ( "<table align=’center’>" Call adicionarFila ( "Cargo Fijo Call adicionarFila ( "Costo Sesiones Call adicionarFila ( "Descuento Call adicionarFila ( "Recargo Call adicionarFilaTexto ( "======" Call adicionarFila ( "TOTAL Call adicionarFilaTexto ( "======" document.writeln ( "</table> <p>" )

) : : : :

", ", ", ",

cargoFijo costoSesion descuento recargo

: ", total

) ) ) ) ) ) )

Call finSalida() Call finPagina() End Function

En esta parte de la funci´on principal, se imprimen los datos principales del cliente en una tabla.

La parte final de la funci´on principal se encarga de mostrar en una tabla los valores calculados en la primera parte de la funci´on y se finaliza la p´agina Web. Continuaci´ on programa 9 Function calculoCargoFijo ( peso ) Dim cargoFijo cargoFijo = 0.0 If ( peso <= 50.0 ) Then cargoFijo = 0.0

10.4. COSTO DEL USO DE UN GIMNASIO

227

Continuaci´ on programa 9 Else If ( peso < 65.0 ) Then cargoFijo = 2000.0 Else If ( peso <= 85.0 ) Then cargoFijo = 3000.0 Else cargoFijo = 4000.0 End If End If End If calculoCargoFijo = cargoFijo End Function

La funci´on calculoCargoFijo permite obtener el costo del cargo fijo para el usuario del gimnasio de acuerdo al peso, recibido en el par´ametro peso y con base en la informaci´on de la primera tabla de la p´agina 221.

Continuaci´ on programa 9 Function costoSesion ( tiempo ) Dim costo costo = 0.0 select case ( tiempo ) case 0 : costo = 1200 case 1

: costo = 1000

case 2

: costo = 700

case Else: costo = 500 End select costoSesion = costo End Function

228

CAP´ITULO 10. EJEMPLOS DE VBSCRIPT

La funci´on costoSesion permite obtener el costo de una visita al gimnasio para el usuario de acuerdo a la antig¨ uedad, recibido en el par´ametro tiempo y con base en la informaci´on de la segunda tabla de la p´agina 221.

Continuaci´ on programa 9 Function calculoSesion ( tiempo, dias ) calculoSesion = costoSesion ( tiempo ) * cantidadSesiones ( dias ) End Function

La funci´on calculoSesion se utiliza para obtener el valor de las visitas al gimnasio en la semana.

Continuaci´ on programa 9 Function cantidadSesiones ( dias ) Dim i i = 0 Do While ( dias ( i ) <> "" ) i = i + 1 Loop cantidadSesiones = i End Function

La funci´on cantidadSesiones tiene como objetivo retornar el n´ umero de d´ıas que el usuario asiste al gimnasio en la semana. Este valor coincide con el n´ umero de elementos del vector dias que la funci´on recibe como par´ametro.

Para obtener el n´ umero de elementos en el vector, se hace un recorrido hasta encontrar un elemento vac´ıo.

Continuaci´ on programa 9 Function calculoDescuento ( dias ) Dim descuento descuento = 0.0

10.4. COSTO DEL USO DE UN GIMNASIO

229

Continuaci´ on programa 9 For i = 0 to ubound ( dias ) - 1 If ( dias ( i ) = "Martes" or dias ( i ) = "Jueves" ) Then descuento = descuento + 100.0 End If Next calculoDescuento = descuento End Function

La funci´on calculoDescuento permite obtener un descuento para el usuario, en caso de que asista al gimnasio martes o jueves.

Continuaci´ on programa 9 Function calculoRecargo ( dias ) Dim recargo recargo = 0.0 For i = 0 to ubound ( dias ) - 1 If ( dias ( i ) = "Domingo" ) Then recargo = 100.0 End If Next calculoRecargo = recargo End Function

La funci´on calculoRecargo permite obtener un costo adicional para el usuario, en caso de que asista al gimnasio el d´ıa domingo.

Continuaci´ on programa 9 Function calculoTotal ( cargoFijo, costoSesion, descuento, recargo ) calculoTotal = cargoFijo + costoSesion - descuento + recargo End Function

La funci´on calculoTotal permite obtener el costo del uso del gimnasio para un usuario, de acuerdo a los valores que recibe como par´ametro.

230

CAP´ITULO 10. EJEMPLOS DE VBSCRIPT Continuaci´ on programa 9

Function adicionarFila ( texto, valor ) document.writeln ( "<tr>" document.write ( "<td>" Call imprimirTitulo ( texto document.write ( " <td>" Call imprimirEnTextInput ( "", "5", valor document.write ( " <td>" Call imprimirTitulo ( " Pesos</b>" document.writeln ( "</tr>" End Function

) ) ) ) ) ) ) )

La funci´on adicionarFila permite adicionar una fila a una tabla previamente creada. Cada fila tiene tres celdas: un mensaje, un valor, dentro de un cuadro de texto y la unidad (Pesos). Observe que el mensaje se imprime de acuerdo al llamado de la funci´on imprimirTitulo y que cuadro de texto se incorpora utilizando la funci´on imprimirEnTextInput.

Continuaci´ on programa 9 Function adicionarFilaTexto ( texto ) document.writeln ( "<tr>" ) document.write ( " <td>" ) document.write ( " <td>" ) Call imprimirTitulo ( texto ) document.write ( " <td>" ) document.writeln ( "</tr>" ) End Function

La funci´on adicionarFilaTexto es similar a la anterior. En esta funci´on el mensaje que se recibe en el par´ametro texto se imprime en la segunda celda, dejando vac´ıas las otras dos.

10.4. COSTO DEL USO DE UN GIMNASIO

231

Continuaci´ on programa 9 Function adicionarFilaTextoUnidad ( texto, ancho, valor, unidad ) document.write ( "<td>" ) Call imprimirEnTextInput ( texto, ancho, valor ) Call imprimirTitulo ( unidad ) End Function

La funci´on adicionarFilaTextoUnidad imprime un valor dentro de una caja de texto con ancho especificado, un mensaje asociado (antes) y una unidad de medida (despu´es), dentro de una tabla.

Continuaci´ on programa 9 Function imprimirTitulo ( texto ) document.writeln ( "<b>" + texto + "</b>" ) End Function

Esta funci´on imprime un texto en negrita.

La figura 10.8 presenta la apariencia final del formulario.

Reutilizaci´ on de c´ odigo Funci´ on obtenerUno obtenerCheckBox inicioPagina finPagina inicioSalida finSalida imprimirEnTextInput

P´ agina 203 204 207 208 213 214 214

Tabla 10.3: Gimnasio - Funciones reutilizadas - VBScript

232

CAP´ITULO 10. EJEMPLOS DE VBSCRIPT

Figura 10.8: Gimnasio - Salida - VBScript

10.5.

B´ usqueda en un vector

Dado un vector de n´ umeros enteros de un tama˜ no especificado por el usuario, se debe imprimir el mayor de los elementos del arreglo, los elementos de las posiciones pares, el mayor de los elementos del las posiciones pares, los elementos de las posiciones impares, el mayor de los elementos del las posiciones impares.

C´ odigo E05-Vbs.html Ver “B´ usqueda en un vector - HTML (1)”.

La primera parte corresponde al encabezado de la p´agina Web.

´ 10.5. BUSQUEDA EN UN VECTOR

Figura 10.9: Vector - Entrada (1) - VBScript

Figura 10.10: Vector - Entrada (2) - VBScript B´ usqueda en un vector - HTML (1) <html> <head> <title> B&uacute;squeda en un vector </title> </head> <body> <center> <h3>B&Uacute;SQUEDA EN UN VECTOR - VBScript</h3> <br>

233

CAP´ITULO 10. EJEMPLOS DE VBSCRIPT

234

<form method="get" action="E05a-Vbs.html"> <fieldset> <legend align="center"><b> Datos del Vector</b> </legend> <p> <label> <b>Cantidad de elementos :</b> <input name="n" type="text" size="5"> </label> <p> <input type="reset" value="Limpiar"> <input type="submit" value="Aceptar"> <p> </fieldset> </form>

La segunda parte contiene un formulario inicial con la entrada del tama˜ no del vector. Observe detenidamente que al hacer clic en el bot´on Aceptar de tipo submit se hace el llamado a la p´agina Web E05a-Vbs.html por el m´etodo get, pasando el valor de la variable n a trav´es del URL. Ver figura 10.11.

Figura 10.11: M´etodo get para el paso de par´ametros

</center> </body> </html>

La u ´ltima parte corresponde al final de la p´agina Web.

´ 10.5. BUSQUEDA EN UN VECTOR

C´ odigo E05a-Vbs.html Ver “B´ usqueda en un vector - HTML (2)”.

B´ usqueda en un vector - HTML (2) <html> <head> <title> B&uacute;squeda en un vector </title> </head> <body> <center> <h3>B&Uacute;SQUEDA EN UN VECTOR - VBScript</h3>

La primera parte corresponde al inicio de la p´agina Web. <fieldset> <legend align=’center’> <b> Entrada de datos</b> </legend> <p> <form method="post" name="formulario"> <table border=4> <tr>

La segunda parte corresponde al inicio del formulario. <script language = "VBscript"> Dim i, cantidad cantidad = obtenerValorURL ( )

235

236

CAP´ITULO 10. EJEMPLOS DE VBSCRIPT

For i = 1 to cantidad document.writeln ( "<td>" ) document.write ( "<input type=’text’ " ) document.writeln ( "size=’4’ name=’arreglo’>" ) Next cantidad = cantidad - 1 document.write ( "<input type=’hidden’ document.writeln ( " name=’cantidad’

size=’4’ " ) value=’"& cantidad & "’ >")

La tercera parte corresponde al c´odigo VBScript necesario para crear las cajas de texto en la p´agina Web donde se ingresar´an los elementos del vector. Para obtener el n´ umero de elementos del vector utiliza la funci´on obtenerValorURL, la cual examina el URL y extrae el valor de la variable n, de la p´agina anterior.

Function obtenerValorURL ( ) Dim cadena, valor cadena = location.search valor = 0 If ( cadena = "" ) Then document.writeln( "Cantidad no especificada." ) Else valor = cint( mid( cadena, instr(cadena,"=" )+1, len(cadena))) End If obtenerValorURL = valor End Function </script>

La funci´on obtenerValorURL opera de la siguiente forma: A trav´es de location.search se obtienen los par´ametros que vienen por el URL. Esta informaci´on se recibe en forma de cadena de caracteres y se almacena en la variable cadena. Si la cadena es vac´ıa, quiere decir que no se recibieron par´ametros, caso en el cual se escribe un mensaje en la p´agina Web generada.

´ 10.5. BUSQUEDA EN UN VECTOR

237

En caso de que la cadena no sea vac´ıa, se obtiene la subcadena que inicia a continuaci´on del signo = hasta el final y se convierte a entero para retornar ese valor. </tr> </table><br> <input type =’reset’ value=’Limpiar’> <input type =’submit’ value=’Aceptar’ onclick=’recibir ( formulario )’> </form> </center> </body> </html> <script language = "VBscript" src = "Vbs/E05-Vbs.vbs" > </script>

La parte final contiene los botones Aceptar y Limpiar, as´ı como el llamado al programa VBScript.

C´ odigo E05-Vbs.vbs Ver programa 10 “B´ usqueda en un vector - VBS”.

Programa 10 - B´ usqueda en un vector - VBS Function recibir ( formulario ) Dim i, cantidad, arreglo ( 50 ) cantidad = formulario.cantidad.value Call obtenerArreglo ( formulario.arreglo, cantidad, arreglo ) Call principal ( arreglo, cantidad ) End Function

238

CAP´ITULO 10. EJEMPLOS DE VBSCRIPT

La funci´on recibir se encarga de recibir el formulario HTML, del cual se obtiene el arreglo con los datos ingresados. A continuaci´on, hace el llamado a la funci´on principal.

Continuaci´ on programa 10 Function obtenerArreglo ( arreglo, cantidad, vectorResultado ) Dim i For i = 0 to cantidad vectorResultado(i) = arreglo(i).value Next End Function

La funci´on obtenerArreglo extrae los n´ umeros del formulario y los asigna a un arreglo llamado vectorResultado.

Continuaci´ on programa 10 Function principal ( arreglo, cantidad ) Dim mayor Call inicioPagina ( "B&uacute;squeda en un vector", "B&Uacute;SQUEDA EN UN VECTOR - VBScript" ) Call inicioSalida( "Resultados" ) Call inicioSalida ( "Elementos del vector" ) Call imprimirVector ( arreglo, cantidad ) mayor = buscarMayorVector ( arreglo, cantidad ) Call imprimirEnTextInput ( "El mayor es:", 5, mayor ) Call finSalida ( ) Call inicioSalida ( "Elementos de posiciones pares" ) Call imprimirVectorPosicionesPares ( arreglo, cantidad mayor = buscarMayorPosicionesPares ( arreglo, cantidad Call imprimirEnTextInput ( "El mayor es:", 5, mayor ) Call finSalida ( )

) )

´ 10.5. BUSQUEDA EN UN VECTOR

239

Continuaci´ on programa 10 Call inicioSalida ( "Elementos de posiciones impares" ) Call imprimirVectorPosicionesImpares ( arreglo, cantidad ) mayor = buscarMayorPosicionesImpares ( arreglo, cantidad ) Call imprimirEnTextInput ( "El mayor es:", 5, mayor ) Call finSalida ( ) Call finSalida ( ) Call finPagina ( ) End Function

La funci´on principal se encarga de crear la p´agina web de resultados, mediante el llamado a las funciones que permiten cumplir con el prop´osito de este programa.

Observe que el mismo vector es enviado a seis funciones diferentes, donde cada cumple un objetivo diferente.

Continuaci´ on programa 10 Function buscarMayorVector ( vector, cantidad ) buscarMayorVector = buscarMayorSubVector ( vector, cantidad , 0, 1 ) End Function

Esta funci´on retorna el mayor de los elementos de un vector, el cual se obtiene como resultado del llamado a la funci´on buscarMayorSubVector, con los par´ametros que indican el vector a examinar, la posici´on inicial y el incremento para el ´ındice.

Continuaci´ on programa 10 Function buscarMayorPosicionesPares ( vector, cantidad ) buscarMayorPosicionesPares = buscarMayorSubVector (vector,cantidad,0,2) End Function

Esta funci´on retorna el mayor de los elementos de un vector en las posiciones pares, el cual se obtiene como resultado del llamado a la funci´on buscarMayorSubVector. Observe que inicia en la posici´on cero y el ´ındice se incrementa de dos en dos.

240

CAP´ITULO 10. EJEMPLOS DE VBSCRIPT Continuaci´ on programa 10

Function buscarMayorPosicionesImpares ( vector, cantidad ) buscarMayorPosicionesImpares = buscarMayorSubVector(vector,cantidad,1,2) End Function

Esta funci´on retorna el mayor de los elementos de un vector en las posiciones impares, el cual se obtiene como resultado del llamado a la funci´on buscarMayorSubVector. Observe que inicia en la posici´on uno y el ´ındice se incrementa de dos en dos.

Continuaci´ on programa 10 Function buscarMayorSubVector ( vector, cantidad , inicio, incremento ) Dim mayor mayor = cint ( vector ( inicio ) ) For i = inicio + incremento to cantidad step incremento If ( cint ( vector ( i ) ) > mayor ) Then mayor = cint ( vector ( i ) ) End If Next buscarMayorSubVector = mayor End Function Function imprimirVector ( vector, cantidad ) Call imprimirSubVector ( vector, cantidad , 0, 1 ) End Function

La funci´on buscarMayorSubVector retorna el mayor de los elementos de un vector, examinando la posici´on inicial y las posiciones que correspondan al valor de la variable i.

´ 10.5. BUSQUEDA EN UN VECTOR

241

Continuaci´ on programa 10 Function imprimirVectorPosicionesPares ( vector, cantidad ) Call imprimirSubVector ( vector, cantidad, 0, 2 ) End Function Function imprimirVectorPosicionesImpares ( vector, cantidad ) Call imprimirSubVector ( vector, cantidad, 1, 2 ) End Function

Las funciones imprimirXX permiten imprimir un vector o un subvector a trav´es del llamado a la funci´on imprimirSubVector, aplicando el mismo principio de las funciones que encontraban el mayor de los elementos de un vector.

Continuaci´ on programa 10 Function imprimirSubVector ( vector, cantidad, inicio, incremento ) Dim i document.writeln ( "<br>" ) document.writeln ( "<table border=4 cellpadding=’10’>" ) document.writeln ( " <tr align=’center’>" ) For i = inicio to cantidad step incremento document.write ( "<td>" ) document.write ( vector ( i ) ) document.writeln ( ) Next document.writeln ( " </tr>" ) document.writeln ( "</table> <p>" ) End Function

Esta funci´on forma una tabla de una sola fila con los elementos de un vector, o una parte de ´el, dado el vector, el valor inicial y el incremento.

242

CAP´ITULO 10. EJEMPLOS DE VBSCRIPT

Reutilizaci´ on de c´ odigo Funci´ on inicioPagina finPagina inicioSalida finSalida imprimirEnTextInput

P´ agina 207 208 213 214 214

Tabla 10.4: Vector - Funciones reutilizadas - VBScript

Figura 10.12: Vector - Salida - VBScript

Parte V Problemas

243

“No he fracasado, he encontrado diez mil maneras en las que la cosa no funciona”.

Benjam´ın Franklin

11

Problemas propuestos Antes de resolver cualquier ejercicio, lea detenidamente el enunciado, identifique los datos que necesita, cu´ales son conocidos y cu´ales no. Los datos desconocidos generalmente est´an asociados a f´ormulas matem´aticas que debe tener a la mano.

No olvide que la respuesta del programa debe estar de acuerdo con los requerimientos del enunciado. Documente sus programas y use identificadores representativos.

11.1.

Programaci´ on secuencial

1. Dado un n´ umero natural n, calcular la suma de los primeros n n´ umeros naturales. n × (n + 1) suma = 2 2. Calcular el valor de una compra de d´olares, conociendo el valor de la tasa representativa del mercado (TRM) en pesos. pesos = d´ olares × T RM

CAP´ITULO 11. PROBLEMAS PROPUESTOS

246

3. De un estudiante conocemos la nota 1, la nota 2, la nota de trabajos y el Examen final. Calcular la nota definitiva (notaDef initiva) aplicando los porcentajes 20%, 20%, 30% y 30%, respectivamente. Tenga en cuenta que 20% equivale a 0.2 y 30% es igual a 0.3.

4. Dados dos puntos del plano cartesiano P (x1 , y1 ) y Q(x2 , y2 ), hallar las coordenadas del punto medio. x1 + x2 2 y1 + y2 ym = 2

xm =

5. En una competencia cicl´ıstica se hace un recorrido de una distancia medida en Km, en un tiempo total medido en horas, minutos, segundos y cent´esimas de segundo. Calcular la velocidad en Km por hora. Tenga en cuenta que una hora equivale a 60 minutos, un minuto a 60 segundos y un segundo a 100 cent´esimas de segundo. tiempo = horas + minutos/60 + segundos/3600 + centesimas/360000 velocidad =

distancia tiempo

6. Dada la longitud del lado de un cubo, calcular el ´area de la base, el ´area lateral, y el volumen. areaBase = lado2

areaLateral = 4×areaBase

volumen = lado3

7. Hallar el deteminante de una matriz 2 x 2, de la forma: µ ¶ a b c d determinante = a × d − b × c 8. Calcular el rendimiento de un CDT en una entidad financiera, conociendo el monto, el plazo en d´ıas y la tasa de inter´es anual. Observe que por tener el plazo en dias, la tasa de inter´es anual se divide entre 360. monto × inter´ es × plazo rendimiento = 360

11.2. DECISIONES SIMPLES

247

9. Dado el monto de un cr´edito, el plazo y tasa de interes anual, calcular la cuota fija mensual que se debe cancelar a una entidad financiera. cuota =

monto × interes × (interes + 1)plazo (interes + 1)plazo − 1

10. Dados tres puntos del plano cartesiano P (x1 , y1 ); Q(x2 , y2 ) y R(x3 , y3 ), correspondientes a los v´ertices de un tri´angulo, hallar su ´area y su per´ımetro. Considere a, b y c como los lados del tri´angulo. p distanciaP −Q = a = (x2 − x1 )2 + (y2 − y1 )2 s= a ´rea =

11.2.

p

a+b+c 2

s × (s − a) × (s − b) × (s − c) per´imetro = 2 × s

Decisiones simples

1. Dado un n´ umero real cualquiera, imprimir su valor absoluto. ½ |x| =

x, si x ≥ 0 −x, si x < 0

2. De un empleado se conoce su sueldo actual. Si ´este es mayor o igual a $500.000, se le aumenta un 8%. En caso contrario, se le aumenta el 10%. Calcule el nuevo sueldo. sueldoN uevo = sueldoActual × 1,08 sueldoN uevo = sueldoActual × 1,1 3. Dadas tres notas de un estudiante, calcular la definitiva por promedio aritm´etico y un mensaje que indique si gan´o o perdi´o el curso. La nota m´ınima necesaria para aprobar es 3.0. promedio =

nota1 + nota2 + nota3 3

248

CAP´ITULO 11. PROBLEMAS PROPUESTOS

4. Dado un n´ umero r y los coeficientes de una ecuaci´on cuadr´atica, imprima un mensaje que indique si r es ra´ız de la ecuaci´on, utilizando el m´etodo de sustituci´on. a × r2 + b × r + c = 0 5. Dado el precio de un art´ıculo, la cantidad de art´ıculos a comprar y el valor entregado por el cliente, calcular la devuelta (si le alcanza) o imprimir un mensaje que le indique que le hace falta dinero para pagar la cuenta. cuenta = cantidad × precio devuelta = valorP agado − cuenta 6. Dados dos puntos del plano cartesiano P (x1 , y1 ) y Q(x2 , y2 ), hallar la pendiente de la recta que pasa por ellos. Si x1 = x2 , la pendiente no existe. pendiente =

y2 − y1 x2 − x1

7. Dados dos n´ umeros racionales en la forma ab y dc , realice la suma teniendo en cuenta que los denominadores no pueden ser ceros. a c a×d+b×c + = b d b×d 8. Dada una ecuaci´on de segundo grado, encontrar las soluciones. Si el discirminate es cero o positivo, hay soluciones reales. Si es negativo, las soluciones son imaginarias. x=

−b ±

√

b2 − 4 × a × c 2×a

9. Hallar la inversa de una matriz de 2 x 2 de la forma: µ ¶ a b matriz = c d

11.3. DECISIONES ANIDADAS

249

La inversa es: 1 determinante(matriz)

µ

d −b −c a

¶

Verifique que el determinante no sea cero.

10. Hallar la soluci´on u ´nica de un sistema de ecuaciones de 2 x 2 dados los coeficientes de las variables y los t´erminos independientes, utilizando la regla de Cramer. Si el determinante de la matriz de coeficientes es cero, el sistema no tiene soluci´on u ´nica.

ax + by = c dx + ey = f ¯ ¯ a determinante = ¯¯ d ¯ ¯ c determinanteX = ¯¯ f

11.3.

¯ b ¯¯ e ¯

¯ b ¯¯ e ¯

¯ ¯ a c determinanteY = ¯¯ d f

¯ ¯ ¯ ¯

determinanteX determinante determinanteY Y = determinante

X=

Decisiones anidadas

1. Muestre en pantalla el siguiente men´ u: 1.

2.

3.

4.

Convertir Convertir Convertir Convertir

de de de de

pulgadas a cent´ımetros cent´ımetros a pulgadas kil´ometros a metros metros a kil´ometros.

En cada opci´on haga la conversi´on e imprima el resultado correspondiente.

1 pulgada = 2.54 cm 1 Km = 1000 m.

2. Dado el valor de x, calcule el valor de y, como resultado de la siguiente funci´on.

CAP´ITULO 11. PROBLEMAS PROPUESTOS

250

   

−x, x + 3, y= x,    10, 2

si si si si

x < −5 x ∈ [−5, 2] x ∈ (2, 5) x≥5

3. Solicite la entrada de la categor´ıa de un vendedor y las ventas del u ´ltimo mes. Calcule el pago teniendo en cuenta la tabla 11.1. No olvide que los porcentajes se deben escribir correctamente (3 % = 0,03). categor´ıa 1 2 3 4

ventas

Hasta 1.000.000 1.000.001 - 2.000.000 2.000.001 en adelante

5

b´ asico 100.000 200.000 300.000 1.000.000 0 100.000 200.000

comisi´ on 3% 2% 1% 0% 3% 5% 10%

Tabla 11.1: Datos del problema pago = b´ asico + ventas × porcentajeComisi´ on

4. Dado el salario asignado a un empleado, calcular el impuesto sobre el salario recibido y el valor a pagar, de acuerdo a las siguientes consideraciones. Los primeros $250.000 no tienen impuesto; los segundos $250.000 tienen impuesto del 2%, los terceros $250.000 tienen un descuento del 4% adicional y el resto, 5% adicional. Tenga presente que un porcentaje del 4 % se escribe 0,04.    

0, (s − 250,000) × 2 %, i= (s − 500,000) × 4 % + 5,000,    (s − 750,000) × 5 % + 15,000, donde i : impuesto

si si si si

s ≤ 250,000 s ∈ (250,000, 500,000] s ∈ (500,000, 750,000] s > 750,000

s : salario

11.3. DECISIONES ANIDADAS

251

5. Leer el precio de un art´ıculo e imprimir el valor a pagar, teniendo en cuenta la tabla 11.2. No olvide que 5 % = 0,05.

Precio Descuento 1 - 10.000 0% 10.001 - 20.000 5% 20.001 - 30.000 8% 30.001 en adelante 10% Tabla 11.2: Datos del problema pago = precio − precio × descuento 6. Dados tres valores enteros, correspondientes a las longitudes de los lados de un tri´angulo, determine el tipo de tri´angulo: is´osceles, escaleno, equil´atero; o si estas longitudes no corresponden a los lados de un tri´angulo. Si las longitudes de los lados son lado1 , lado2 y lado3 , un tri´angulo se puede formar siempre y cuando (s − lado1 ) × (s − lado2 ) × (s − lado3 ) > 0 lado1 + lado2 + lado3 s= 2 donde s : semiper´imetro 7. La nota definitiva de un curso es el promedio aritm´etico de cuatro notas parciales. Para aprobar la asignatura se requiere una nota definitiva de m´ınimo 3,0. Dadas las tres primeras notas parciales de un estudiante, calcular la cuarta nota m´ınima necesaria para aprobar la asignatura.

Imprima un mensaje de acuerdo a la nota que debe obtener el estudiante, as´ı:  “P erdi´ o el curso”, si notaM inima > 5,0     “T odavia se puede”, si notaM inima ∈ [4,0, 5,0]     “N ecesita una buena nota”, si notaM inima ∈ [3,5, 4,0)    “Es f a ´cil ganarla”, si notaM inima ∈ [3,0, 3,5) M ensaje : “La tiene casi ganada”, si notaM inima ∈ [2,0, 3,0)     “P r´ a cticamente ya gan´ o ”, si notaM inima ∈ [1,0, 2,0)     “M uy dif icil de perder”, si notaM inima ∈ [0,1, 1,0)    “F elicitaciones Y a gan´ o”, si notaM inima ≤ 0,0

252

CAP´ITULO 11. PROBLEMAS PROPUESTOS notaM inima = 4 × 3,0 − (nota1 + nota2 + nota3 )

8. Dados los coeficientes de una ecuaci´on cuadr´atica, halle las ra´ıces reales.

Verifique que la ecuaci´on sea cuadr´atica y que tenga ra´ıces reales. Si no se puede calcular, imprima el mensaje correspondiente.  a × x2 + b × x + c es cuadr´ atica, si a 6= 0,0     √ −b ± b2 − 4 × a × c , si b2 − 4 × a × c ≥ 0,0 x =  2×a    x∈ / R, si b2 − 4 × a × c < 0,0 9. De un estudiante se tienen 3 notas parciales. Se desea obtener la nota definitiva aplicando los porcentajes 30%, 30% y 40% respectivamente.

De acuerdo a la definitiva en este curso, recibir´a un descuento para el pr´oximo curso (si lo gana) o una multa (si lo pierde), de acuerdo a la siguiente tabla. Debe solicitar el valor del curso y hallar el valor neto a pagar. Ver tabla 11.3.

Definitiva 0.0 - 0.9 1.0 - 1.9 2.0 - 2.9 3.0 - 3.4 3.5 - 3.9 4.0 - 4.4 4.5 - 5.0

Descuento

Multa 40% 20% 10%

10% 20% 30% 40%

Tabla 11.3: Datos del problema def initiva = nota1 × 0,3 + nota2 × 0,3 + nota3 × 0,4 precio = precio + precio × multa precio = precio − precio × descuento 10. Solicitar la fecha de nacimiento de una persona y la fecha actual, ambas en forma de aa mm dd. Verificar si las fechas son correctas y, en caso afirmativo, imprimir un mensaje que informe si la persona es mayor de edad o no.

´ 11.4. DECISIONES MULTIPLES

253

a˜ nos = a˜ noActual − a˜ noN acimiento meses = mesActual − mesN acimiento d´ıas = d´ıaActual − d´ıaN acimiento  nos > 18  si a˜ si a˜ nos = 18 y meses > 0 M ayor de edad :  si a˜ nos = 18 y meses = 0 y d´ıas ≥ 0

11.4.

Decisiones m´ ultiples

1. De un empleado se conocen: Dados el sueldo actual y la categor´ıa de un empleado, calcular el nuevo sueldo si se efectuara un aumento de acuerdo con la tabla 11.4.

Categor´ıa 1 2 3 4

Porcentaje de Aumento 12% 10% 8% 6%

Tabla 11.4: Datos del problema sueldoN uevo = sueldoActual + sueldoActual × porcentajeAumento

2. Se ingresa el n´ umero de ejes de un veh´ıculo. Hallar el valor que debe pagar por peaje, de acuerdo a la tabla 11.5: No. Ejes 2 3 4 5

Peaje 4.000 5.000 7.000 11.000

Tabla 11.5: Datos del problema

254

CAP´ITULO 11. PROBLEMAS PROPUESTOS

3. Calcular el pago de la comisi´on sobre las ventas a un vendedor de acuerdo al tipo de vendedor como est´a en la tabla 11.6.

Tipo de vendedor A B C D

Comision 8% 6% 4% 2%

Tabla 11.6: Datos del problema comisi´ on = ventas × porcentajeComisi´ on

4. En la n´omina de una empresa se le hace descuento a los empleados por concepto de ahorro, de acuerdo al estrato social en que vive, y seg´ un la tabla 11.7. Calcule e imprima el valor a descontar.

Estrato 1-2 3-4 5 6

Porcentaje de Descuento 2% 4% 8% 10%

Tabla 11.7: Datos del problema descuento = sueldoActual × porcentajeDescuento

5. De un empleado se conoce la categor´ıa 1, 2, 3 ´o 4 y el sueldo b´asico. El empleado posee una bonificaci´on y un descuento seg´ un la tabla 11.8.

Calcular el valor a pagar al empleado.

´ 11.4. DECISIONES MULTIPLES Categor´ıa 1 2 3 4

Bonificaci´ on 15% 10% 8% 0%

255 Descuento 2.0% 1.5% 1.0% 0.0%

Tabla 11.8: Datos del problema pago = salarioActual+salarioActual×bonif icaci´ on−SalarioActual×descuento

6. En un lavautos se cobra el servicio de la lavada de acuerdo al tipo de veh´ıculo. En caso de que el carro tenga 8 a˜ nos o m´as de antig¨ uedad, el costo se incrementa un 20%. Solicitar el a˜ no actual, el modelo y el tipo de veh´ıculo. Tenga en cuenta la tabla 11.9. Halle el valor a pagar por concepto de la lavada del veh´ıculo.

Tipo de veh´ıculo peque˜ no Automovil mediano de lujo sencillo Campero de lujo cabina sencilla Camioneta doble cabina

Valor lavada 4.000 5.000 6.000 5.000 8.000 6.000 8.000

Tabla 11.9: Datos del problema

7. Se realiz´o un estudio para determinar el costo diario promedio de hospitalizaci´on de un paciente, en d´olares, de acuerdo al tipo de enfermedad que sufre el paciente. Adem´as, se pudo establecer que si el paciente tiene una edad entre 10 y 25 a˜ nos de edad, el costo promedio diario se incrementa en un 15%. Con base en la siguiente tabla, calcule e imprima el costo total que se le cobrar´ıa a un paciente, conociendo el n´ umero de d´ıas que permanecer´a hospitalizado. Exprese el resultado en pesos, con una tasa de cambio de $2.500. Ver tabla 11.10.

CAP´ITULO 11. PROBLEMAS PROPUESTOS

256

Tipo de Enfermedad 1 2 3 4

Costo promedio diario en d´ olares 28 26 18 34

Tabla 11.10: Datos del problema costoHospital = numeroDias × costoDiario ½ costoHospital × 1,15, si edad ∈ [10, 25] incrementoEdad = 0, si edad ∈ / [10, 25] costoP esos = (costoHospital + incrementoEdad) ∗ 2,500 8. Un agricultor desea saber el costo de producci´on de un cultivo de acuerdo a la semilla seleccionada, conociendo el n´ umero de semillas que utilizar´a y el costo de cada semilla. El valor de cada semilla se encuentra en la tabla 11.11.

Verdura Tomate Repollo Papa Cebolla

Tipo Chonto Ensalada

Valor cada semilla 15 20 10 Criolla 8 Pastusa 9 Salentuna 11 Larga 15 De huevo 13

Tabla 11.11: Datos del problema costoSemillas = numeroSemillas × valorSemilla

9. Calcular el valor de la matr´ıcula en la Universidad, de acuerdo al estrato social, al estado civil, y al n´ umero de materias, de acuerdo a la tabla 11.12.

´ 11.4. DECISIONES MULTIPLES Estrato 1

2

3 o m´ as

Estado civil Casado Separado Viudo Soltero Casado Separado Viudo Soltero Casado Separado Viudo Soltero

Cargo fijo 15.000 30.000 20.000 25.000 25.000 40.000 30.000 35.000 50.000 80.000 65.000 70.000

257 Valor por materia 10.000 15.000 12.000 12.000 15.000 20.000 18.000 18.000 30.000 40.000 35.000 35.000

Tabla 11.12: Datos del problema valorM atricula = cargoF ijo + numeroM aterias × valorM ateria

10. Se va a cobrar la matr´ıcula de la universidad a los estudiantes de acuerdo al estrato social, al ingreso promedio mensual de la familia y al n´ umero de materias registradas, seg´ un las tablas: 11.13, 11.14, 11.15 y 11.16. En cada tabla aparece el valor por materia. El cargo fijo est´a indicado al terminar cada una de las tablas.

En todos los casos, si el valor del semestre cuesta m´as del 30% del ingreso familiar promedio, se tendr´a derecho a un descuento de acuerdo con la tabla 11.17.

Estratos 1 y 2 No. de materias hasta 2 de 3 a 5 m´ as de 5 0 - 400.000 18.000 15.000 12.000 400.001 - 750.000 22.000 20.000 18.000 750.001 en adelante 25.000 22.000 20.000 Ingreso promedio

Cargo fijo $ 20.000 Tabla 11.13: Datos del problema (a)

258

CAP´ITULO 11. PROBLEMAS PROPUESTOS Estrato 3 No. de materias Ingreso promedio hasta 2 de 3 a 5 m´ as de 5 0 - 500.000 22.000 20.000 18.000 500.001 - 800.000 28.000 24.000 20.000 800.001 - 1.000.000 35.000 30.000 25.000 1.000.001 en adelante 40.000 35.000 30.000 Cargo fijo $ 30.000 Tabla 11.14: Datos del problema (b)

Estrato 4 No. de materias Ingreso promedio hasta 2 de 3 a 5 m´ as de 5 0 - 600.000 35.000 30.000 25.000 600.001 - 1.000.000 45.000 40.000 35.000 1.000.001 - 2.000.000 55.000 50.000 45.000 2.000.001 en adelante 65.000 60.000 55.000 Cargo fijo $ 80.000 Tabla 11.15: Datos del problema (c)

Estratos 5 y 6 Ingreso promedio 0 - 1.000.000 1.000.001 - 2.000.000 2.000.001 - 3.000.000 3.000.001 en adelante

No. de materias hasta 2 de 3 a 5 m´ as de 5 45.000 40.000 35.000 55.000 50.000 45.000 65.000 60.000 55.000 75.000 70.000 65.000

Cargo fijo Estratos 5 $ 100.000 Cargo fijo Estratos 6 $ 120.000 Tabla 11.16: Datos del problema (d)

11.5. CICLOS

259 Estrato 1 2 3 4 5 6

Descuento 30% 25% 20% 15% 12% 10%

Tabla 11.17: Datos del problema (e) valorM atricula = cargoF ijo + numeroM aterias × valorM ateria descuento = valorM atricula × porcentajeDescuento pago = valorM atricula − descuento Imprimir el valor de la matr´ıcula sin descuento. Si tiene descuento, imprimir el valor a pagar.

11.5.

Ciclos

1. Se conoce el n´ umero de horas trabajadas y el valor a pagar por hora de cada empleado de una empresa. Elabore un programa para hallar el valor a pagar a cada empleado, el total de horas trabajadas por todos los empleados, el total de n´omina y el promedio de horas trabajadas. pagoi = horasi × valori totalHoras =

n X

horasi

i=1

totalP ago =

n X

pagoi

i=1

promedio =

totalP ago n

260

CAP´ITULO 11. PROBLEMAS PROPUESTOS

2. Imprimir la serie 0, 0, 1, 0, 0, 1, 0, 0, 1, con n elementos.

3. Imprimir una figura como la de la ilustraci´on, con un ancho ingresado por el usuario. Note que el ancho y el alto son iguales. Valide que el valor sean positivo. ******* ** * * * * * * * * * * 4. Calcular la suma de 1 + 4 + 9 + 16 + 25 + · · · + n2 suma =

n X

i2

i=1

5. Elabore una funci´on que imprima la potencia usando productos. Valide que el exponente sea positivos. potencia = base × base{z× · · · × base} | n veces

potencia =

n Y

base

i=1

6. Sumar varios tiempos en HH:MM:SS. La respueta se debe mostrar en DD, HH, MM y SS. 14h 3m 50s 12h 58m 40s Ejemplo : 10h 13m 28s 1d 13h 15m 58s

11.5. CICLOS

261

7. Calcular la suma de todos los enteros que pertenezcan al intervalo [a,b]. suma =

b X

i

i=a

8. Programa que genere los n´ umeros primos menores que 100. Un n´ umero n es primo s´ı y solo si sus dos u ´nicos divisores son 1 y n.

P = 1, 2, 3, 5, 7, 11, 13, 17, · · · 97 9. Crear un rect´angulo en la pantalla con el caracter *. El usuario ingresar´a el ancho y el alto. *********** * * * * * * *********** 10. Imprimir en pantalla una figura como la que se encuentra a continuaci´on. El usuario ingresar´a el alto y el tipo de figura. * ** * * * * * * ****** Tipo 0

* ** *** **** ***** ****** Tipo 1

11. Dibuje en pantalla una figura como las de la ilustraci´on. El usuario ingresar´a el ancho (incluye los extremos). ******** * * * * ** Ancho Par

********* * * * * * * * Ancho Impar

CAP´ITULO 11. PROBLEMAS PROPUESTOS

262

12. Halle n t´erminos de la secuencia: 2, 3, 8, 30, 144, 840, · · ·, donde Elementon = n! + (n − 1)!

n≥1

13. Imprima el tri´angulo de Pascal para un n menor o igual a 7.

1 1 1 1 1 1

1 2 1 3 3 1 4 6 4 5 10 10 ...

1 5

1

14. Dibujar en la pantalla una figura como la siguiente. El ancho es igual al alto y es ingresado por el usuario. ****** ***** **** *** ** * 15. Hallar los divisores de un entero positivo dado.

16. Hallar el m´aximo com´ un divisor de dos enteros positivos.

17. Dados a y b, enteros positivos, calcular a×b usando u ´nicamente sumas.

18. Calcular, utilizando multiplicaciones sucesivas, la primera potencia de 3 mayor que un valor n ingresado por el usuario.

19. Calcular el factorial de un n´ umero entero positivo menor de 7, utilizando u ´nicamente sumas. n! = n × (n − 1) × (n − 2) × · · · × 3 × 2 × 1 a×b=a | + a + a{z+ · · · + a} b veces

20. Genere 100 n´ umeros al azar entre 1 y 5 y determine la frecuencia de cada n´ umero.

11.6. VECTORES

11.6.

263

Vectores

1. Concatene dos arreglos, donde el primer arreglo es de n elementos, y el segundo es de m elementos, en un tercer arreglo. Los valores m y n est´an entre 1 y 20.

6

4

9

5

6

4

9

5

2

5

2

3

8

5

2

3

8

0

2

0

2. Generar e imprimir un arreglo de 40 elementos similar al que se muestra a continuaci´on.

1

4

9

16

25

36

49

···

3. Inicializar un vector de 50 elementos enteros con la serie que se puede apreciar en el siguiente arreglo. Finalmente, encuentre la suma de sus elementos utilizando una funci´on.

0

3

6

9

0

3

6

9

0

3

6

9

···

6

···

4. Generar e imprimir el arreglo de 50 elementos.

1

1

2

2

3

3

4

4

5

5

6

5. Dado un vector a, de n elementos, hallar la mediana. El vector se ingresa ordenado de menor a mayor.

M ediana =

a[ n2 ] + a[ n2 − 1] 2

a[ 28 ] + a[ 82 − 1] 2 a[4] + a[3] 7+5 M ediana = = =6 2 2 M ediana =

CAP´ITULO 11. PROBLEMAS PROPUESTOS

264

 n−1  a[ 2 ], M ediana =



si n es impar

a[ n ]+a[ n −1] 2 2 2

si n es par

Por ejemplo, dado el siguiente arreglo de 8 elementos: 1

2

2

5

7

8

8

9

6. Dado un arreglo de 10 enteros y un n´ umero x entre cero y nueve, cree un segundo arreglo de nueve posiciones con los elementos del primero excepto el elemento de la posici´on x.

5

7

2

5

1

1

6

3

5

6

5

7

2

5

1

6

3

5

x=5 6

7. Dado un arreglo de 8 enteros, un n´ umero x entero entre cero y siete, y un entero cualquiera m, cree un segundo arreglo de nueve posiciones al que se le ha adicionado el elemento m en la posici´on x.

4

3

2

3 4

7 3

8 2

9 8

3 3

x=3 7

8

9

m=8 3

8. Dados dos arreglos de m y n elementos respectivamente, determinar si son iguales o no.

9. Dado un vector de 15 elementos enteros que se ingresa en orden de menor a mayor, imprima un segundo vector igual al primero sin repeticiones.

10. Dado un vector de 15 elementos enteros que se ingresa en cualquier orden, imprima un segundo vector igual al primero sin repeticiones.

11.7. MATRICES 1

6

1

9

265 2

3

3

2 6

11.7.

3

3

4

6

8

8

8

1

2

3

4

6

8

9

6

0

2

5

1

4

0

9

3

2

0

5

1

8

9

9

9

3

2

1

5

4

Matrices

Suponga para cada problema, la existencia de una matriz de tama˜ no N por M. 1. Encuentre los elementos mayor y menor. Adem´as, calcule el promedio de todos sus elementos.

2. Determine si la matriz es o no sim´etrica. Una matriz es sim´etrica si es cuadrada (N es igual a M) y los elementos por encima de la diagonal son iguales a los elementos por debajo en forma de espejo. Ver un ejemplo en la tabla 11.18.

0 1 2

0

1

2

a b

a c

b c -

Tabla 11.18: Matriz sim´etrica de orden 3

3. Determine si la matriz es o no un cuadrado m´agico.

4. Elimine una fila y columna especificadas y construya otra matriz con el resultado.

5. En la matriz se almacenan las notas de un curso. Suponga que una fila corresponde a las notas parciales de un estudiante. Calcule la nota definitiva de todos los estudiantes, el promedio general del curso, el

CAP´ITULO 11. PROBLEMAS PROPUESTOS

266

n´ umero de estudiantes que ganaron y la cantidad de estudiantes que perdieron el curso.

6. Determine si todos y cada uno de los elementos de la diagonal principal, est´an en otra posici´on de la matriz.

7. Dadas dos matrices de N x M llamadas A y B respectivamente, calcule el valor de k, si existe, por tal que la matriz A sea igual a k por la matriz B. 8. Indique si los elementos de la diagonal principal corresponden a los elementos de la diagonal secundaria. Ver tabla 11.19.

0 1 2

0

1

2

a c

b -

a c

Tabla 11.19: Matriz con diagonales iguales de orden 3

9. Determine si en la matriz existen por lo menos dos ceros consecutivos en una misma fila, o en una misma columna.

10. Calcule el producto entre la matriz de N x M y por otra matriz dada por el usuario de M x N. Recuerde que el producto de estas dos matrices produce una tercera matriz de N x N elementos. ci,j =

M −1 X

ai,k × bk,j

∀ a ∈ A, ∀ b ∈ B,

k=0

i = 0, 1, ..., N − 1

j = 0, 1, ..., N − 1

Bibliograf´ıa [1] BALENA, Francisco: Programaci´ on avanzada con Microsoft Visual Basic 6.0. McGraw-Hill, Espa˜ na, 2000.

[2] COMER, Douglas: El libro de Internet. Segunda Edici´on. Prentice-Hall, M´exico, 1998.

[3] COMER, Douglas: Redes de computadoras, Internet e interredes.

Prentice-Hall, M´exico, 1997.

[4] KAHN, Louis: Construya su propio Web. McGraw-Hill, Madrid, 1997.

[5] MCKELVY, Mike; MARTINSEN, Ronald y WEBB, Jeff: Edicion EspecialVisual Basic 5.

Prentice Hall, Madrid, 1997.

[6] MOHR, James: Linux: Recursos para el usuario.

Prentice Hall, Madrid, 1997.

[7] Netscape Communications Corporation.: Client-Side JavaScript Guide.

Version 1.3. USA, 1999.

[8] Netscape Communications Corporation.: Client-Side JavaScript Reference.

Version 1.3. USA, 1999.

[9] Netscape Communications Corporation.: Dynamic HTML. Version 4.0. USA, 1997.

[10] RATSCHILLER, Tob´ıas, y GERKEN, Till: Creaci´ on de aplicaciones con PHP 4.

Pearson Educaci´on S.A., Madrid, 2001.

267

268

BIBLIOGRAF´IA

[11] RAY, John: TCP/IP Edici´on Especial. Prentice-Hall, Madrid, 1999.

[12] SAETHER, Stig y otros: Manual de PHP. www.php.org: Menual-es.pdf, 2001.

[13] SEQUERA, Richard: Curso de Dise˜ no de P´aginas Web - HTML. www.monografias.com: CursoWeb.pdf, 2001.

[14] WEBB, Martiin; PLUNGJAN, Michael y DRAKARD, Keith: Instant JavaScript.

McGraw-Hill, USA, 2001

´Indice alfab´etico A agrupaci´on de elementos . . . . . . . . . 98 aldea global . . . . . . . . . . . . . . . . . . . . . . . 5 Apache . . . . . . . . . . . . . . . . . . . . . . . . . . 17 aplicaciones b´ usqueda . . . . . . . . . . . . . . . . . . . . . . 6 chat . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 comercio electr´onico . . . . . . . . . . . 8 correo electr´onico. . . . . . . . . . . . . .6 e-mail . . . . . . . . . . . . . . . . . . . . . . . . . 6 educaci´on virtual . . . . . . . . . . . . . 10 entretenimiento . . . . . . . . . . . . . . . 9 foros de discusi´on . . . . . . . . . . . . . 9 intercambio de informaci´on . . . . 7 medio de difusi´on . . . . . . . . . . . . . 7 mensajer´ıa instant´anea . . . . . . . . 6 procesamiento distribuido . . . . 10 soporte permanente . . . . . . . . . . . 7 teletrabajo . . . . . . . . . . . . . . . . . . . . 8 viaje virtual . . . . . . . . . . . . . . . . . . 10 videoconferencia . . . . . . . . . . . . . . . 9 autoridad . . . . . . . . . . . . . . . . . . . . . . . . . 5 B b´ usqueda. . . . . . . . . . . . . . . . . . . . . . . . . .6 body . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 buz´on . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 C CGI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 chat . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6, 7

cliente . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 acceso a red . . . . . . . . . . . . . . . . . . 15 caracter´ısticas . . . . . . . . . . . . . . . . 14 HTTP . . . . . . . . . . . . . . . . . . . . . . . 17 Outlook . . . . . . . . . . . . . . . . . . . . . . 20 cliente/servidor . . . . . . . . . . . . . . . . . . 14 cobertura . . . . . . . . . . . . . . . . . . . . . . . . . 5 color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 RGB . . . . . . . . . . . . . . . . . . . . . . . . . 38 comercio electr´onico . . . . . . . . . . . . . . . 8 confiabilidad . . . . . . . . . . . . . . . . . . . . . . 5 constantes JavaScript . . . . . . . . . . . . . . . . . . 121 correo electr´onico . . . . . . . . . . . . . . . . . 6 buz´on . . . . . . . . . . . . . . . . . . . . . . . . 20 crecimiento. . . . . . . . . . . . . . . . . . . . . . . .4 Crimson Editor . . . . . . . . . . . . . . . . . . 21 cuerpo . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 CUTE-FTP . . . . . . . . . . . . . . . . . . . . . . 19 D daemon . . . . . . . . . . . . . . . . . . . . . . . . . . 16 demonio . . . . . . . . . . . . . . . . . . . . . . . . . 16 FTP . . . . . . . . . . . . . . . . . . . . . . . . . 19 HTTP . . . . . . . . . . . . . . . . . . . . . . . 17 dinamismo . . . . . . . . . . . . . . . . . . . . . . . . 4 disponibilidad . . . . . . . . . . . . . . . . . . . . . 5 DNS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Domain Name System . . . . . . . . . . . 16 DreamWeaver . . . . . . . . . . . . . . . . . . . . 21

269

270 E e-mail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 buz´on . . . . . . . . . . . . . . . . . . . . . . . . 20 educaci´on virtual. . . . . . . . . . . . . . . . .10 encabezado . . . . . . . . . . . . . . . . . . . . . . 28 enlace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 enlaces . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 e-mail . . . . . . . . . . . . . . . . . . . . . . . . 62 ftp . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 url . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 entrada de datos agrupaci´on de elementos . . . . . 98 button . . . . . . . . . . . . . . . . . . . . . . . 88 checkbox . . . . . . . . . . . . . . . . . . . . . 86 eventos. . . . . . . . . . . . . . . . . . . . . . .89 file . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 hidden . . . . . . . . . . . . . . . . . . . . . . . 87 image . . . . . . . . . . . . . . . . . . . . . . . . 87 JavaScript . . . . . . . . . . . . . . . . . . 108 password . . . . . . . . . . . . . . . . . . . . . 87 maxlenght. . . . . . . . . . . . . . . . . .97 readonly . . . . . . . . . . . . . . . . . . . 97 radio . . . . . . . . . . . . . . . . . . . . . . . . . 86 reset . . . . . . . . . . . . . . . . . . . . . . . . . 87 submit . . . . . . . . . . . . . . . . . . . . . . . 87 text . . . . . . . . . . . . . . . . . . . . . . . . . . 85 maxlenght. . . . . . . . . . . . . . . . . .97 readonly . . . . . . . . . . . . . . . . . . . 97 textarea readonly . . . . . . . . . . . . . . . . . . . 97 VBScript . . . . . . . . . . . . . . . . . . . 180 entretenimiento . . . . . . . . . . . . . . . . . . . 9 etiqueta . . . . . . . . . . . . . . . . . . . . . . . . . . 27 < a > . . . . . . . . . . . . . . . . . . . . . . . . 58 accesskey. . . . . . . . . . . . . . . . . . .58 href . . . . . . . . . . . . . . . . . . . . . . . . 58 name. . . . . . . . . . . . . . . . . . . . . . .58 title . . . . . . . . . . . . . . . . . . . . . . . . 59

´INDICE ALFABETICO ´ < area > coords . . . . . . . . . . . . . . . . . . . . . 65 shape . . . . . . . . . . . . . . . . . . . . . . 64 < b > . . . . . . . . . . . . . . . . . . . . . . . . 33 < bgsound > . . . . . . . . . . . . . . . . . 57 loop . . . . . . . . . . . . . . . . . . . . . . . . 57 src . . . . . . . . . . . . . . . . . . . . . . . . . 57 volume . . . . . . . . . . . . . . . . . . . . . 57 < big > . . . . . . . . . . . . . . . . . . . . . . 33 < blockquote > . . . . . . . . . . . . . . . 35 < body >. . . . . . . . . . . . . . . . . . . . .28 background . . . . . . . . . . . . . . . . 39 bgcolor . . . . . . . . . . . . . . . . . . . . . 38 < br > . . . . . . . . . . . . . . . . . . . . . . . 30 < caption > . . . . . . . . . . . . . . . . . . 45 < center > . . . . . . . . . . . . . . . . . . . 36 < dd > . . . . . . . . . . . . . . . . . . . . . . . 41 < div > . . . . . . . . . . . . . . . . . . . . . . 37 < dl > . . . . . . . . . . . . . . . . . . . . . . . 41 < dt > . . . . . . . . . . . . . . . . . . . . . . . 41 < embed > . . . . . . . . . . . . . . . . . . . 55 autostart . . . . . . . . . . . . . . . . . . . 56 height . . . . . . . . . . . . . . . . . . . . . . 55 src . . . . . . . . . . . . . . . . . . . . . . . . . 55 width . . . . . . . . . . . . . . . . . . . . . . 56 < f ieldset > . . . . . . . . . . . . . . . . . 98 < f ont > . . . . . . . . . . . . . . . . . . . . 37 color . . . . . . . . . . . . . . . . . . . . . . . 37 face . . . . . . . . . . . . . . . . . . . . . . . . 37 size . . . . . . . . . . . . . . . . . . . . . . . . 37 < f orm > . . . . . . . . . . . . . . . . . . . 85 action . . . . . . . . . . . . . . . . . . . . . . 92 method . . . . . . . . . . . . . . . . . . . . 92 name. . . . . . . . . . . . . . . . . . . . . . .92 < f rame > . . . . . . . . . . . . . . . . . . 70 < f rameset > . . . . . . . . . . . . . . . 69 border . . . . . . . . . . . . . . . . . . . . . 69 cols . . . . . . . . . . . . . . . . . . . . . . . . 69

´INDICE ALFABETICO ´ frameborder . . . . . . . . . . . . . . . . 70 marginheight . . . . . . . . . . . . . . . 70 marginwidth . . . . . . . . . . . . . . . 70 name. . . . . . . . . . . . . . . . . . . . . . .70 noresize . . . . . . . . . . . . . . . . . . . . 70 rows . . . . . . . . . . . . . . . . . . . . . . . 70 src . . . . . . . . . . . . . . . . . . . . . . . . . 70 < h1 > − < h6 > . . . . . . . . . . . . 34 < head > . . . . . . . . . . . . . . . . . . . . 28 < hr > . . . . . . . . . . . . . . . . . . . . . . . 35 align . . . . . . . . . . . . . . . . . . . . . . . 36 size . . . . . . . . . . . . . . . . . . . . . . . . 36 width . . . . . . . . . . . . . . . . . . . . . . 36 < html > . . . . . . . . . . . . . . . . . . . . 28 < i > . . . . . . . . . . . . . . . . . . . . . . . . 33 < img > . . . . . . . . . . . . . . . . . 51, 54 align . . . . . . . . . . . . . . . . . . . . . . . 51 alt . . . . . . . . . . . . . . . . . . . . . . . . . 51 border . . . . . . . . . . . . . . . . . . . . . 52 dynscr . . . . . . . . . . . . . . . . . . . . . 54 height . . . . . . . . . . . . . . . . . . 52, 54 hspace . . . . . . . . . . . . . . . . . . . . . 52 src . . . . . . . . . . . . . . . . . . . . . . . . . 51 start . . . . . . . . . . . . . . . . . . . . . . . 54 title . . . . . . . . . . . . . . . . . . . . . . . . 51 usemap . . . . . . . . . . . . . . . . . . . . 63 vspace . . . . . . . . . . . . . . . . . . . . . 52 width. . . . . . . . . . . . . . . . . . .52, 54 < input > . . . . . . . . . . . . . . . . . . . . 85 accesskey. . . . . . . . . . . . . . . . . . .97 disabled . . . . . . . . . . . . . . . . . . . . 97 height . . . . . . . . . . . . . . . . . . . . . . 87 name. . . . . . . . . . . . . . . . . . . . . . .86 scr . . . . . . . . . . . . . . . . . . . . . . . . . 97 size . . . . . . . . . . . . . . . . . . . . . . . . 86 src . . . . . . . . . . . . . . . . . . . . . . . . . 87 tabindex . . . . . . . . . . . . . . . . . . . 97 title . . . . . . . . . . . . . . . . . . . . 87, 97

271 type. . . . . . . . . . . . . . . . . . . . . . . .85 value . . . . . . . . . . . . . . . . . . . . . . . 86 width . . . . . . . . . . . . . . . . . . . . . . 87 < label > . . . . . . . . . . . . . . . . . . . . 99 < legend > . . . . . . . . . . . . . . . . . . 99 < li > . . . . . . . . . . . . . . . . . . . . . . . 40 start . . . . . . . . . . . . . . . . . . . . . . . 43 type. . . . . . . . . . . . . . . . . . . . . . . .43 < map > . . . . . . . . . . . . . . . . . . . . . 63 < ol > . . . . . . . . . . . . . . . . . . . . . . . 40 < option > . . . . . . . . . . . . . . . . . . . 96 selected . . . . . . . . . . . . . . . . . . . . 96 < p > . . . . . . . . . . . . . . . . . . . . . . . . 35 align . . . . . . . . . . . . . . . . . . . . . . . 36 < pre > . . . . . . . . . . . . . . . . . . . . . . 30 < script >. . . . . . . . . .94, 113, 186 language. . . . . . . . . .94, 113, 186 src . . . . . . . . . . . . . . . . . . . 113, 186 < select > . . . . . . . . . . . . . . . . . . . 96 accesskey. . . . . . . . . . . . . . . . . . .97 disabled . . . . . . . . . . . . . . . . . . . . 97 multiple . . . . . . . . . . . . . . . . . . . . 97 name. . . . . . . . . . . . . . . . . . . . . . .97 size . . . . . . . . . . . . . . . . . . . . . . . . 97 src . . . . . . . . . . . . . . . . . . . . . . . . . 97 tabindex . . . . . . . . . . . . . . . . . . . 97 title . . . . . . . . . . . . . . . . . . . . . . . . 97 < small > . . . . . . . . . . . . . . . . . . . 33 < strong > . . . . . . . . . . . . . . . . . . 33 < sub > . . . . . . . . . . . . . . . . . . . . . . 33 < sup > . . . . . . . . . . . . . . . . . . . . . 33 < table > . . . . . . . . . . . . . . . . . . . . 44 align . . . . . . . . . . . . . . . . . . . . . . . 44 bgcolor . . . . . . . . . . . . . . . . . . . . . 45 border . . . . . . . . . . . . . . . . . . . . . 44 cellpadding . . . . . . . . . . . . . . . . . 45 cellspacing . . . . . . . . . . . . . . . . . 45 width . . . . . . . . . . . . . . . . . . . . . . 45

272 < td > . . . . . . . . . . . . . . . . . . . . . . . 45 align . . . . . . . . . . . . . . . . . . . . . . . 45 bgcolor . . . . . . . . . . . . . . . . . . . . . 45 colspan. . . . . . . . . . . . . . . . . . . . .45 rowspan . . . . . . . . . . . . . . . . . . . . 45 < textarea > . . . . . . . . . . . . . . . . 98 cols . . . . . . . . . . . . . . . . . . . . . . . . 98 rows . . . . . . . . . . . . . . . . . . . . . . . 98 < th > . . . . . . . . . . . . . . . . . . . . . . . 45 < title > . . . . . . . . . . . . . . . . . . . . . 28 < tr > . . . . . . . . . . . . . . . . . . . . . . . 45 align . . . . . . . . . . . . . . . . . . . . . . . 45 bgcolor . . . . . . . . . . . . . . . . . . . . . 45 < tt > . . . . . . . . . . . . . . . . . . . . . . . 30 < u > . . . . . . . . . . . . . . . . . . . . . . . . 33 < ul > . . . . . . . . . . . . . . . . . . . . . . . 40 eventos . . . . . . . . . . . . . . . . . . . . . . . . . . 89 onblur . . . . . . . . . . . . . . . . . . . . . . . 89 onchange . . . . . . . . . . . . . . . . . . . . . 90 onclick . . . . . . . . . . . . . . . . . . . . . . . 90 ondblclick . . . . . . . . . . . . . . . . . . . . 90 onfocus . . . . . . . . . . . . . . . . . . . . . . 90 onkeydown . . . . . . . . . . . . . . . . . . . 90 onkeypress . . . . . . . . . . . . . . . . . . . 90 onkeyup. . . . . . . . . . . . . . . . . . . . . .90 onload . . . . . . . . . . . . . . . . . . . . . . . 90 onmousedown . . . . . . . . . . . . . . . . 90 onmousemove . . . . . . . . . . . . . . . . 90 onmouseout . . . . . . . . . . . . . . . . . . 90 onmouseover . . . . . . . . . . . . . . . . . 90 onmouseup . . . . . . . . . . . . . . . . . . . 90 onselect . . . . . . . . . . . . . . . . . . . . . . 91 onsubmit. . . . . . . . . . . . . . . . . . . . . 91 onunload . . . . . . . . . . . . . . . . . . . . . 91 Exchange . . . . . . . . . . . . . . . . . . . . . . . . 20

´INDICE ALFABETICO ´ foros de discusi´on . . . . . . . . . . . . . . . . . 9 FPT CUTE-FTP . . . . . . . . . . . . . . . . . . 19 WAR-FTP . . . . . . . . . . . . . . . . . . . 19 WS-FTP . . . . . . . . . . . . . . . . . . . . . 19 frames . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 FrontPage. . . . . . . . . . . . . . . . . . . . . . . .21 FTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 GFTP . . . . . . . . . . . . . . . . . . . . . . . 19 FTPD . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 funciones JavaScript . . . . . . . . . . . . . . . . . . 122 VBScript . . . . . . . . . . . . . . . . . . . 193 G get . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 GFTP . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

H header . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 hipermedia . . . . . . . . . . . . . . . . . . . . 4, 51 hipertexto. . . . . . . . . . . . . . . . . . . . . . . . . 4 HTML . . . . . . . . . . . . . . . . . . . . . . . . 3, 21 body . . . . . . . . . . . . . . . . . . . . . . . . . 28 caracteres especiales . . . . . . . . . . 31 comentarios . . . . . . . . . . . . . . . . . . 29 cuerpo . . . . . . . . . . . . . . . . . . . . . . . 28 encabezado. . . . . . . . . . . . . . . . . . .28 enlaces . . . . . . . . . . . . . . . . . . . . . . . 57 entrada de datos . . . . . . . . . . . . . 85 formato . . . . . . . . . . . . . . . . . . . . . . 30 formularios . . . . . . . . . . . . . . . . . . . 85 frames . . . . . . . . . . . . . . . . . . . . . . . 69 header . . . . . . . . . . . . . . . . . . . . . . . 28 hipermedia . . . . . . . . . . . . . . . . . . . 51 im´agenes . . . . . . . . . . . . . . . . . . . . . 51 listas . . . . . . . . . . . . . . . . . . . . . . . . . 40 F marcos . . . . . . . . . . . . . . . . . . . . . . . 69 formularios. . . . . . . . . . . . . . . . . . . . . . .85 tablas . . . . . . . . . . . . . . . . . . . . . . . . 44

´INDICE ALFABETICO ´ videos . . . . . . . . . . . . . . . . . . . . . . . . 54 HTTP . . . . . . . . . . . . . . . . . . . . . . . . . 3, 17 HTTPD . . . . . . . . . . . . . . . . . . . . . . . . . 17 I IIS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 intercambio de informaci´on . . . . . . . . 7 Internet . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 aldea global . . . . . . . . . . . . . . . . . . . 5 aplicaciones . . . . . . . . . . . . . . . . . . . 6 autoridad . . . . . . . . . . . . . . . . . . . . . 5 caracter´ısticas . . . . . . . . . . . . . . . . . 4 cobertura . . . . . . . . . . . . . . . . . . . . . 5 confiabilidad . . . . . . . . . . . . . . . . . . 5 crecimiento . . . . . . . . . . . . . . . . . . . . 4 dinamismo . . . . . . . . . . . . . . . . . . . . 4 disponibilidad . . . . . . . . . . . . . . . . . 5 permanencia . . . . . . . . . . . . . . . . . . 5 seguridad . . . . . . . . . . . . . . . . . . . . . 5 servicios. . . . . . . . . . . . . . . . . . . . . .16 DNS . . . . . . . . . . . . . . . . . . . . . . . 16 FTP . . . . . . . . . . . . . . . . . . . . . . . 19 HTTP . . . . . . . . . . . . . . . . . . . . . 17 POP3 . . . . . . . . . . . . . . . . . . . . . . 20 SMTP . . . . . . . . . . . . . . . . . . . . . 20 ubicaci´on . . . . . . . . . . . . . . . . . . . . . . 5 variedad. . . . . . . . . . . . . . . . . . . . . . .5 IP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 n´ umero . . . . . . . . . . . . . . . . . . . . . . 16 J JavaScript. . . . . . . . . . . . . . . . . . .94, 107 alert . . . . . . . . . . . . . . . . . . . . . . . . 109 array. . . . . . . . . . . . . . . . . . . . . . . .115 caracter´ısticas . . . . . . . . . . . . . . . 108 comentarios . . . . . . . . . . . . . . . . . 115 compatibilidad . . . . . . . . . . . . . . 113 constantes propias . . . . . . . . . . 121 matem´aticas . . . . . . . . . . . . . . 121

273 document.write . . . . . . . . . . . . . 110 en una p´agina Web . . . . . . . . . 113 entrada de datos . . . . . . . . . . . . 108 eventos onchange. . . . . . . . . . . . . . . . . . 112 onclick . . . . . . . . . . . . . . . . . . . . 110 funciones del usuario . . . . . . . . 124 par´ametros . . . . . . . . . . . . . . . . 124 funciones propias. . . . . . . . . . . .122 de cadenas . . . . . . . . . . . . . . . . 122 de conversi´on . . . . . . . . . . . . . 122 del usuario . . . . . . . . . . . . . . . . 124 matem´aticas . . . . . . . . . 121, 122 introducci´on . . . . . . . . . . . . . . . . 107 length . . . . . . . . . . . . . . . . . . . . . . 117 matriz . . . . . . . . . . . . . . . . . . . . . . 115 instancia . . . . . . . . . . . . . . . . . . 115 new . . . . . . . . . . . . . . . . . . . . . . . . . 115 operadores . . . . . . . . . . . . . . . . . . 119 aritm´eticos . . . . . . . . . . . . . . . . 119 de asignaci´on . . . . . . . . . . . . . 121 l´ogicos . . . . . . . . . . . . . . . . . . . . 120 relacionales . . . . . . . . . . . . . . . 120 sobre objetos . . . . . . . . . . . . . . 121 par´ametros por referencia . . . . . . . . . . . . . 124 por valor . . . . . . . . . . . . . . . . . . 124 parseFloat . . . . . . . . . . . . . . . . . . 122 parseInt. . . . . . . . . . . . . . . . . . . . .122 prompt . . . . . . . . . . . . . . . . . . . . . 108 tipos de datos . . . . . . . . . . . . . . . 115 var. . . . . . . . . . . . . . . . . . . . . . . . . . 115 variables declaraci´on . . . . . . . . . . . . . . . . 115 globales . . . . . . . . . . . . . . . . . . . 115 locales . . . . . . . . . . . . . . . . . . . . 115 vector . . . . . . . . . . . . . . . . . . . . . . . 115 instancia . . . . . . . . . . . . . . . . . . 115

´INDICE ALFABETICO ´

274 length. . . . . . . . . . . . . . . . . . . . .117 L Linux GFTP . . . . . . . . . . . . . . . . . . . . . . . 19 Sendmail . . . . . . . . . . . . . . . . . . . . . 20 M m´etodo get . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 post. . . . . . . . . . . . . . . . . . . . . . . . . .92 Macromedia DreamWeaver . . . . . . . . . . . . . . . . 21 mailto . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 mapas sensitivos . . . . . . . . . . . . . . . . . 63 marcas . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 marcos . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 medio de difusi´on . . . . . . . . . . . . . . . . . 7 mensajer´ıa instant´anea . . . . . . . . . . . . 6 Microsoft Exchange . . . . . . . . . . . . . . . . . . . . 20 Frontpage . . . . . . . . . . . . . . . . . . . . 21 IIS . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Outlook . . . . . . . . . . . . . . . . . . . . . . 20 N n´ umero IP . . . . . . . . . . . . . . . . . . . . . . . 16 navegar . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 O Outlook . . . . . . . . . . . . . . . . . . . . . . . . . . 20 P p´agina de entrada . . . . . . . . . . . . . . . . . . . . 4 inicio . . . . . . . . . . . . . . . . . . . . . . . . . . 4 principal . . . . . . . . . . . . . . . . . . . . . . 4 web . . . . . . . . . . . . . . . . . . . . . . . 3, 21 activa . . . . . . . . . . . . . . . . . . . . . . 23 caracteres especiales . . . . . . . . 31

clases . . . . . . . . . . . . . . . . . . . . . . 22 color . . . . . . . . . . . . . . . . . . . . . . . 38 comentarios . . . . . . . . . . . . . . . . 29 cuerpo . . . . . . . . . . . . . . . . . . . . . 28 din´amica . . . . . . . . . . . . . . . . . . . 22 encabezado. . . . . . . . . . . . . . . . .28 enlaces . . . . . . . . . . . . . . . . . . . . . 57 entrada de datos . . . . . . . . . . . 85 est´atica . . . . . . . . . . . . . . . . . . . . 22 estructura . . . . . . . . . . . . . . . . . . 27 fondo . . . . . . . . . . . . . . . . . . . . . . 38 formato . . . . . . . . . . . . . . . . . . . . 30 formularios . . . . . . . . . . . . . . . . . 85 frames . . . . . . . . . . . . . . . . . . . . . 69 hipermedia . . . . . . . . . . . . . . . . . 51 im´agenes . . . . . . . . . . . . . . . . . . . 51 listas . . . . . . . . . . . . . . . . . . . . . . . 40 marcos . . . . . . . . . . . . . . . . . . . . . 69 publicar . . . . . . . . . . . . . . . . . . . . 23 tablas . . . . . . . . . . . . . . . . . . . . . . 44 tipos . . . . . . . . . . . . . . . . . . . . . . . 22 videos . . . . . . . . . . . . . . . . . . . . . . 54 par´amatros JavaScript . . . . . . . . . . . . . . . . . . 124 VBScript . . . . . . . . . . . . . . . . . . . 195 permanencia . . . . . . . . . . . . . . . . . . . . . . 5 pluggins . . . . . . . . . . . . . . . . . . . . . . . . . 55 avi . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 mov . . . . . . . . . . . . . . . . . . . . . . . . . . 55 mp3. . . . . . . . . . . . . . . . . . . . . . . . . .55 mpg. . . . . . . . . . . . . . . . . . . . . . . . . .55 pdf. . . . . . . . . . . . . . . . . . . . . . . . . . .55 ppt . . . . . . . . . . . . . . . . . . . . . . . . . . 55 swf. . . . . . . . . . . . . . . . . . . . . . . . . . .55 wrl . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 POP3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 post . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 procesamiento distribuido . . . . . . . . 10

´INDICE ALFABETICO ´

275

protocolo . . . . . . . . . . . . . . . . . . . . . . 3, 13 URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 IP . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 www.amazon.com . . . . . . . . . . . . . 8 TCP . . . . . . . . . . . . . . . . . . . . . . . . . 13 www.audiogalaxy.com . . . . . . . . . 7 TCP/IP . . . . . . . . . . . . . . . . . . . . . 14 www.casinoonnet.com . . . . . . . . . 9 www.chem.ox.ac.uk . . . . . . . . . . 11 R www.cisco.com . . . . . . . . . . . . . . . 10 red . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 www.cnn.com . . . . . . . . . . . . . . . . . 7 RGB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 www.crimsoneditor.com . . . . . . 21 www.earthcam.com . . . . . . . . . . 10 S www.java.sun.com. . . . . . . . . . . .10 script. . . . . . . . . . . . . . . . . . .94, 107, 179 www.microsoft.com . . . . . . . . . 179 seguridad . . . . . . . . . . . . . . . . . . . . . . . . . 5 www.netscape.com . . . . . . . . . . 107 Sendmail. . . . . . . . . . . . . . . . . . . . . . . . . 20 www.sun.com . . . . . . . . . . . . . . . . . 8 servicio . . . . . . . . . . . . . . . . . . . . . . . . . . 16 www.yahoo.com . . . . . . . . . . . . . . . 4 DNS . . . . . . . . . . . . . . . . . . . . . . . . . 16 FTP . . . . . . . . . . . . . . . . . . . . . . . . . 19 V HTTP . . . . . . . . . . . . . . . . . . . . . . . 17 POP3 . . . . . . . . . . . . . . . . . . . . . . . . 20 variedad . . . . . . . . . . . . . . . . . . . . . . . . . . 5 SMTP . . . . . . . . . . . . . . . . . . . . . . . 20 VBScript . . . . . . . . . . . . . . . . . . . . . . . 179 caracter´ısticas . . . . . . . . . . . . . . . 179 servidor . . . . . . . . . . . . . . . . . . . . . . . . . . 14 comentarios . . . . . . . . . . . . . . . . . 187 Apache . . . . . . . . . . . . . . . . . . . . . . 17 compatibilidad . . . . . . . . . . . . . . 186 caracter´ısticas . . . . . . . . . . . . . . . . 15 Dim . . . . . . . . . . . . . . . . . . . . . . . . 188 Exchange . . . . . . . . . . . . . . . . . . . . 20 hardware . . . . . . . . . . . . . . . . . . . . . 16 document.write . . . . . . . . . . . . . 181 IIS . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 en una p´agina Web . . . . . . . . . 185 Sendmail . . . . . . . . . . . . . . . . . . . . . 20 entrada de datos . . . . . . . . . . . . 180 sistema operativo . . . . . . . . . . . . 16 eventos software . . . . . . . . . . . . . . . . . . . . . . 16 onchange. . . . . . . . . . . . . . . . . . 183 Sistema de Nombres . . . . . . . . . . . . . 16 onclick . . . . . . . . . . . . . . . . . . . . 183 sitio web . . . . . . . . . . . . . . . . . . . . . . . . . . 4 funciones del usuario . . . . . . . . 195 SMTP . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 par´ametros . . . . . . . . . . . . . . . . 195 funciones propias. . . . . . . . . . . .193 T de cadenas . . . . . . . . . . . . . . . . 194 tag. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .27 de conversi´on . . . . . . . . . . . . . 194 TCP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 del usuario . . . . . . . . . . . . . . . . 195 TCP/IP . . . . . . . . . . . . . . . . . . . . . . . . . 14 matem´aticas . . . . . . . . . . . . . . 193 teletrabajo . . . . . . . . . . . . . . . . . . . . . . . . 8 InputBox . . . . . . . . . . . . . . . . . . . 180 introducci´on . . . . . . . . . . . . . . . . 179 U ubicaci´on . . . . . . . . . . . . . . . . . . . . . . . . . 5 matriz . . . . . . . . . . . . . . . . . . . . . . 188

276 MsgBox . . . . . . . . . . . . . . . . . . . . . 181 operadores . . . . . . . . . . . . . . . . . . 191 aritm´eticos . . . . . . . . . . . . . . . . 191 de asginaci´on . . . . . . . . . . . . . 192 l´ogicos . . . . . . . . . . . . . . . . . . . . 192 otros . . . . . . . . . . . . . . . . . . . . . . 192 relacionales . . . . . . . . . . . . . . . 191 par´ametros por referencia . . . . . . . . . . . . . 195 parseFloat . . . . . . . . . . . . . . . . . . 194 parseInt. . . . . . . . . . . . . . . . . . . . . 194 tipos de datos . . . . . . . . . . . . . . . 188 variables declaraci´on . . . . . . . . . . . . . . . . 188 globales . . . . . . . . . . . . . . . . . . . 188 locales . . . . . . . . . . . . . . . . . . . . 188 vector . . . . . . . . . . . . . . . . . . . . . . . 188 viaje virtual . . . . . . . . . . . . . . . . . . . . . 10 videoconferencia . . . . . . . . . . . . . . . . . . 9 W WAR-FTP . . . . . . . . . . . . . . . . . . . . . . . 19 web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 publicar Linux . . . . . . . . . . . . . . . . . . . . . . 23 Windows . . . . . . . . . . . . . . . . . . . 23 WS-FTP . . . . . . . . . . . . . . . . . . . . . . . . . 19

´INDICE ALFABETICO ´