Internet & World Wide Web Como Programar, 5ta Edición - Deitel-FREELIBROS.ORG

A C C E S O A L O S C A P ÍT U L O S A D IC IO N A L E S D E L L IB R O
Para acceder a los capítulos 19 a 29 y apéndices E y F (todos en inglés)
m encionados en el texto, visite el sitio W eb del libro:
w w w .p earso n en esp añ o l.co m /d eitel
U tilice una m oneda para descubrir el código de acceso.
(N o use objetos filosos |>orque podría dañarlo).
r
1
l_
J
IM PO R T A N TE
¡Este código de acceso tiene vigencia de 2 dias!
A segúrese q u e el código no a p a re z c a d a ñ a d o ya q u e sólo pued e u s a rs e una vez
y no s e rá re e m p la z a d o en n in g ú n caso.
Internet &
World Wide Web
CÓMO PROGRAMAR
Internet &
World Wide Web
CÓMO PROGRAMAR
Quinta edición
Paul Deitel
D e i te l & A ssociates, In c.
Harvey Deitel
D e ite l & A ssociates, Inc.
Abbey Deitel
D e ite l & A ssociates, Inc.
T
r a d u c c ió n
Alfonso Vidal R om ero E lizondo
Ingeniero en Sistemas Electrónicos
ITESM , Campus Monterrey
R
e v b ió n
t é c n ic a
Sergio Fuenlabrada V eliz que/
Edna M artha M iran d a Chávcz
José L uis López G oytia
Ju d ith Sonck Ixdczm a
M ario A lberto Sesma M artínez
ó s k a r A rm ando G óm ez C oronel
Academia de Computación
Unidad Profesional Interdisciplinaria de Ingeniería
y Ciencias Sociales y Adm inistrativas (UPI1CSA)
Instituto Politécnico Nacional, México
S andra Luz G óm ez C oronel
Academia de Electrónica
Unidad Profesional Interdisciplinaria de Ingeniería
y Tecnologías Avalizadas (UPITEA)
Instituto Politécnico Nacional, México
PEARSON
D a to s d e c a ta lo g a c ió n b ib lio g rá fic a
DEITEL, PAUL; DEITEL, HARVEY Y DEITEL, ABBEY
Cómo programar Internet & World W ide Web
Quinta edición
PEARSON EDUCACIÓN. México. 2014
ISBN: 978-607-32-2290-7
Área: Com putación
Formato: 20 x 25.5 cm
Páginas: 720
Authorizcd translation from thc English languogc cdition cntitlcd INTERNET AND WORLD W IDE WEB HOW TO PROCiRAM,
5th cdition by (HARVEY & PAUL) DEITEL & ASSOCIATES; HARVEY DEITEL; ABBF.Y DEITEL, publishcd by Pcarson
Education, Inc., publishing as Prenticc Hall, Copyright C 2012. Alt rights rcscrvcd.
ISBN 9780132151009
Traducción autorizada de la edición en idioma ingles titulada IN IER N ET AND WORLD WIDE WEB HOW TO PROGRAM,
5* edición por (HARVEY & PAUL) DEITEL & ASSOCIATES; HARVEY DEITEL; ABBEY DEITEL, publicada por Pcarson
Education, Inc., publicada como Prentioe Hall, Copyright O 2012. Todos los derechos reservados.
Esta edición en español es la única autorizada.
QUINTA EDICIÓN, 2014
Edición en
esp añ o l
Dirección General:
Dirección Educación Superior:
Editor Sponsor:
Editor de Desarrollo:
Supervisor de Producción:
Gerencia Editorial
Educación Superior Latinoamérica:
Philip de la Vega
Mario C o nueras
Luis M. Cruz Castillo
c-mail: [email protected]
Bcmardino Gutiérrez Hernández
Gustavo Rivas Romero
Marisa de Anta
D.R. © 2014 por Pcarson Educación de México, S.A. de C.V.
Atlaoomulco 500-5o. piso
Col. Industrial Atoto, C.P. 53519
Nnucalpan de Juárez, Estado de Méxioo
Cámara Nacional de la Industria Editorial Mexicana. Reg. núm. 1031.
Reservados todos los derechos. Ni la totalidad ni parte de esta publicación pueden reproducirse, registrarse o transmitirse, por un
sistema de recuperación de información, en ninguna forma ni por ningún medio, sea electrónico, mecánico, foloquimico, magnético
o clectroóptico, por fotocopia, grabación o cualquier otro, sin permiso previo por escrito del editor.
El préstamo, alquiler o cualquier otra forma de cesión de uso de este ejemplar requerirá también la autorización del editor o de sus
representantes.
ISBN VERSIÓN IMPRESA: 978-607-32-2290-7
ISBN VERSIÓN E-BOOK: 978-607-32-2291-4
ISBN F.-CHAPTF.R: 978-607-32-2292-1
Impreso en México. Printed in México.
1 2 3 4 5 6 7 8 9 0 - 16 15 14 13
PEARSON
www.pearsonenespanol.com
‘En memoria de TauC(.Baran,
diseñador de Ca red de comunicaciones distribuidas y de [a
conmutación de paquetes, que Ce sobreviven y form an Ca base
de Cos protocolos u tidzados en Internet en Ca actuaddad.
Paul, Harvey y Abbey D ettel
Marcas registradas
deitrl ,
d insecto con los dos pulgares hacia artiba y
dive into
son marcas registradas de Oeitel & Associates, Inc.
Apache es marca rcgisrmda de The Apache Software R>undation.
Apple, iPhonc, iPad, ¡OS y Safari son marcas registradas de Apple. Inc.
CS S, D O M , X H T M L y XM L son marcas registradas del Consorcio World W ide Web.
Firefbx es marca registrada de Mozilla Foundation.
Googlc es marca registrada de Google. In c
JavaScript, Java y todas las marcas basadas en Java son marcas comerciales o registradas de Oracle en Estados Unidos
y otros países.
Microsoft, Internet Explorer, Sihrerlight y el logotipo de W indows son marcas comerciales o registradas de Microsoft
C orporation en Estados U nidos y/o en otros países.
O pera es marca registrada de O pera Software.
Prefacio
x ix
Antes de empezar
xxxi
1
Introducción a las computadoras e Internet
I
1.1
Introducción
2
1.2
Internet en la industria y la investigación
3
1.3
H T M L 5 , CSS3, JavaScript, Canvas y jQ u ery
6
1.4
D em ostraciones
9
1.5
Evolución de Internet y de la W orld W ide W eb
10
1.6
Fundam entos de la W eb
12
1.7
A rquitectura de aplicaciones multinive!
16
1.8
C om paración entre las secuencias de com andos del lado del cliente y del lado del servidor
17
1.9
C onsorcio W orld W ide W eb (W 3C )
18
1.10
W eb 2.0: a socializar
18
1.11
Jerarquía de datos
23
1.12
Sistemas operativos
25
1.12.1
Sistemas operativos de escritorio y de N otcbook
25
1.12.2
Sistemas operativos móviles
26
1.13
T ipos de lenguajes de program ación
27
1.14
Tecnología de objetos
29
1.15
M antenerse actualizado con las tecnologías de la inform ación
31
2
Introducción a HTM L5: parte I
2.1
Introducción
38
2.2
Edición d e H T M L 5
38
2.3
El prim er ejemplo de H T M L 5
38
2.4
Servicio de validación de H T M L 5 del W 3 C
41
2.5
Encabezados
41
37
viii
Contenido
2.6
V inculación
42
2.7
Imágenes
45
2.7.1
A tributo a l t
47
2.7.2
Elem entos vacíos
47
2.7.3
Uso de imágenes com o hipcrvínculos
47
2 .8
Caracteres especiales y reglas horizontales
49
2 .9
Listas
51
2 .1 0
Tablas
54
2.11
Form ularios
58
2.12
Vinculación interna
65
2 .1 3
Elem entos m eta
67
2.1 4
Recursos Web
69
3
Introducción a HTM L5: parte 2
3.1
Introducción
77
3.2
Nuevos tipos 1nput de form ularios de H T M L 5
77
3.3
76
3.2.1
in p u t tip o c o lo r
80
3.2.2
I n p u ttip o d a te
82
3.2.3
in p u t tipo d a te tim e
82
3.2.4
in p u t tipo d a te tlm e - lo c a l
82
3-2.5
in p u t tip o em ail
83
3.2.6
in p u t tip o month
84
3.2.7
in p u t tiponum ber
84
3.2.8
in p u t tipo ran g e
85
3-2.9
in p u t tipo s e a rc h
85
3.2.10
in p u t tip o t e l
86
3-2.11
In p u t tip o tim e
86
3.2.12
in p u t tipo u r l
87
3.2.13
In p u t tipo week
87
Elem entos in p u t y d a t a l i s t y el atrib u to au to co m p lete
87
3-3.1
A tributo a u to c o n p le te del elem ento in p u t
87
3.3.2
Elem ento d a t a l i s t
90
ix
Elem entos de estructura de página
90
3.4.1
Elem ento head er
96
3.4.2
FJem cnto nav
96
3.4.3
Elem ento f i g u r e y elem ento f ig e a p tio n
96
3.4.4
Elem ento a r t i c l e
96
3.4.5
Elem ento summary y elem ento d e t a l l s
96
3.4.6
Elem ento s e c tio n
96
3.4.7
Elem ento a s ld e
96
3.4.8
Elem ento m eter
97
3.4.9
Elem ento f o o te r
98
3.4.10
Semántica a nivel de texto: elem ento mark y elem ento wbr
98
Introducción a las hojas de estilo en cascada
(Cascading Style Sh eets™ , CSS): parte I
105
Introducción
106
Estilos en línea
106
Hojas de estilo incrustadas
108
Estilos conflicruados
111
Vinculación de hojas de estilo externas
114
Pos icio nam iento de los elementos: posicionam icnto absoluto, z -In d e x
116
Posicionamiento de los elementos: posicionam iento relativo, span
118
Fondos
120
Dim ensiones de los elem entos
122
Modelo de cajas y flujo del texto
123
Tipos y consultas de medios
127
M enús desplcgables
130
(O pcional) H ojas de estilo de usuarios
132
Recursos W eb
136
X
Contenido
5
Introducción a las hojas de estilo en cascada
(Cascading Style Sh eets™ , CSS): parte 2
142
5.1
Introducción
143
5.2
Sombras de texto
143
5-3
Esquinas redondeadas
144
5.4
C olor
145
5.5
Sombras de cajas
146
5.6
G radientes lineales: introducción a los prefijos de proveedor
148
5.7
G radientes radiales
151
5.8
(O pcional: W eb K it solam ente) Trazo de texto
153
5.9
M últiples imágenes d e fondo
153
5.10
(O pcional: W ebK it solam ente) Reflejos
155
5.11
Bordes de imágenes
156
5.12
Animación: selectores
159
5.13
Transiciones y transform aciones
162
5.13.1
Las propiedades t r a n s l t l o n y tr a n s fo rm
162
5.13.2
Inclinación
164
5.13.3
Transiciones entre imágenes
165
5.14
Descarga de fuentes Web y la regla ® fo n t-fa c e
166
5.15
M ódulo de diseño de caja flexible y selectores : n th -c h i Id
168
5.16
D iseño m ulticolum na
171
5.17
Consultas de m edios
173
5.18
Recursos W eb
177
6
JavaScript:
introducción a las secuencias de comandos
185
6.1
Introducción
186
6.2
Su prim era secuencia de comandos: m ostrar una línea de texto con
JavaScript en una página W eb
186
C óm o modificar su prim era secuencia de com andos
189
6.3
Contenido
6 .4
Cóm o obtener la entrada del usuario m ediante diálogos prompt
xi
192
6.4.1
Página de bienvenida dinám ica
192
6.4.2
Suma de enteros
196
6 .5
C onceptos de la m em oria
199
6 .6
A ritm ética
200
6 .7
Toma de decisiones: operadores de igualdad y relaciónales
202
6 .8
Recursos W eb
207
7
JavaScript: instrucciones de control I
7.1
Inirod ucción
215
7 .2
Algoritm os
215
7 .3
Pscudocódigo
215
7 .4
Instrucciones de control
215
7 .5
Instrucción de selección 1 f
218
7 .6
Instrucción de selección i f . . . e l s e
219
7 .7
Instrucción de repetición whi le
223
7 .8
Form ulación de algoritmos: repetición controlada por co n tad o r
225
7 .9
Form ulación de algoritmos: repetición controlada por centinela
228
7 .1 0
Form ulación de algoritmos: instrucciones de control anidadas
234
7.11
O peradores de asignación
238
7 .1 2
O peradores de increm ento y decrcm ento
239
7 .1 3
Recursos W eb
242
8
JavaScript: instrucciones de control II
8.1
Introducción
252
8.2
Fundam entos de la repetición controlada por contador
252
8.3
Instrucción de repetición f o r
253
8.4
Ejemplos sobre el uso de b instrucción f o r
256
8.5
Instrucción de selección m últiple svritch
261
8.6
Instrucción de repetición d o . . .w h lle
264
8.7
Instrucciones b reak y c o n tin u é
266
214
251
xü
Contenido
8.8
O peradores lógicos
268
8.9
Recursos W eb
271
9
JavaScript: funciones
9.1
Introducción
279
9.2
M ódulos de program as en JavaScript
279
9.3
Definiciones de (unciones
280
9.3-1
La (unción cuadrado definida por el program ador
281
9.3.2
La (unción máximo definida por el program ador
283
278
9.4
Notas sobre las (unciones definidas por el program ador
285
9.5
G eneración de núm eros aleatorios
286
9.5.1
Escalar y desplazar núm eros aleatorios
286
9-5.2
Visualizar imágenes aleatorias
287
9.5.3
T irar el dado repetidas veces y m ostrar las estadísticas
291
9.6
Ejemplo: Juego de probabilidad; introducción a los elem entos au d io y v id e o de H T M L 5
296
9 .7
Reglas de alcance
306
9.8
Funciones globales de JavaScript
308
9.9
Recursividad
309
9 .1 0
C om paración entre recursividad e iteración
313
10
JavaScript: arreglos
10.1
Introducción
325
10.2
Arreglos
325
10.3
Declaración y asignación de arreglos
327
10.4
Ejemplos del uso de arreglos
327
10.4.1
Creación, iniciaiización y aum ento del tam año de arreglos
327
10.4.2
Iniciaiización de arreglos con listas inidalizadoras
331
10.4.3
Suma de los elem entos de un arreglo con f o r y f o r . . . in
332
10.4.4
Uso de los elem entos de un arreglo com o contadores
334
10.5
G enerador de imágenes al azar m ediante el uso de arreglos
324
337
Contenido
x iü
10.6
Referencias y parám etros de referencia
339
10.7
Paso de arreglos a funciones
340
10.8
O rdenam iento de arreglos m ediante el m étodo s o r t de A rray
343
10.9
Búsqueda en arreglos con el m étodo 1 ndexOf de A rray
344
10.10
Arreglos m ultidim ensionales
347
I I
JavaScript: objetos
360
11.1
Introducción
361
11.2
O bjeto Math
361
11.3
O bjeto S tr in g
363
11.3.1
Fundam entos de caracteres y cadenas
363
11.3.2
M étodos del objeto S tr ln g
363
11.3.3
M étodos de procesam iento de caracteres
365
11.3.4
M étodos de búsqueda
366
11.3.5
D ivisión de cadenas y obtención de subeadenas
369
11.4
O bjeto Date
371
11.5
O bjetos Bool ean y Number
376
11.6
O bjeto document
377
11.7
Búsquedas favoritas en T w itter alm acenam iento W eb de H T M L 5
378
11.8
Uso de JS O N para representar objetos
385
12
Modelo de objetos de documento (D O M ):
objetos y colecciones
395
12.1
Introducción
396
12.2
M odelado de un docum ento: nodos y árboles del D O M
396
12.3
Recorrido y modificación de un árbol de D O M
399
12.4
Colecciones del D O M
409
12.5
Estilos dinám icos
411
12.6
Usa de un tem porizador y de estilos dinám icos para crear efectos anim ados
413
Contenido
Modelo de objetos de JavaScript:
un análisis más detallado
introducción
423
Repaso del evento lo a d
423
El evento mousemove y el objeto e v e n t
425
Sustituciones con mouseover y mouseout
429
Procesamiento de form ularios con focus y bl ur
433
Más procesam iento de form ularios con su b m it y re s e t
436
Burbujeo de eventos
438
Más eventos
440
Recurso Web
440
HTM L5: introducción a canvas
44
Introducción
445
Sistema de coordenadas de canvas
445
Rectángulos
446
Uso de rutas para dibujar lincas
448
D ibujo de arcos y círculos
450
Sombras
452
C u n a s cuadráticas
454
C u n as de Bezier
456
G radientes lineales
457
G radientes radiales
459
Imágenes
461
M anipulación de imágenes: procesam iento de los píxeles individuales de un canvas
463
Patrones
467
Transform aciones
468
14.14.1
M étodos s c a le y t r a n s í a t e : dibujo de elipses
468
14.14.2
M étodo r o t a t e : creación de una anim ación
470
14.14.3
M étodo tr a n s f o m : dibujo de rectángulos sesgados
472
Contenido
XV
Tocto
474
Ajuste del tam año del elem ento canvas para llenar la ventana del navegador
476
Transparencia alfa
477
Com posición
479
J u e g o del c a ñ ó n
482
14.19.1
D ocum ento de H T M L 5
484
14.19.2
Variables de instancia y constantes
484
14.19.3
Función c o n f ig u r a r Juego
486
14.19.4
Funciones In lc ia rT e m p o riz a d o r y d eten erT em p o rlzad o r
487
14.19.5
Función re in ic a rE le m e n to s
487
14.19.6
Función nuevoJuego
488
14.19.7
Función a c tu a lI z a r P o s ic io n e s : anim ación m anual cuadro por cuadro
y detección de colisiones sim ple
489
14.19.8
Función d ispararB alaD eC anion
492
14.19.9
Función a l InearC anion
493
14.19.10 Función d ib u j a r
494
14.19.11 Función m ostrarO lalogoJuegoT erinlnado
496
M étodos save y r e s to r e
496
Una nota sobre SVG
498
Una nota sobre canvas 3D
499
XM L
51 I
Introducción
512
Fundam entos de X M L
512
Estructuración de datos
515
Espacios de nom bres de XM L
521
Definiciones de tipo de docum ento (D T D )
523
D ocum entos de esquemas X M L del W 3 C
526
Vocabularios de XM L
534
15.7.1
M athM L ”
534
15.7.2
O tros lenguajes de marcado
537
xvi
Contenido
15.8
Lenguaje de hojas de estilos cxtcnsiblc y transform aciones XSL
538
15.9
M odelo de objetos de docum ento (D O M )
547
15.10
Recursos W eb
565
16
Aplicaciones enriquecidas de Internet
habilitadas para A jax con X M L y JSON
16.1
Introducción
571
572
16.1.1
C om paración entre aplicaciones Web tradicionales y aplicaciones Ajax
573
16.1.2
Aplicaciones W eb tradicionales
573
16.1.3
Aplicaciones W eb Ajax
574
16.2
Aplicaciones enriquecidas de Internet (RIA) con Ajax
574
16.3
H istoria de Ajax
577
16.4
Ejemplo “crudo” de Ajax m ediante el uso del objeto XMLHttpRequest
577
16.4.1
Solicitudes asincronas
578
16.4.2
M anejo de excepciones
581
16.4.3
Funciones de rcrrollam ada (callbadc)
582
16.4.4
Evento, propiedades y m étodos del o b jeto XMLHttpRequest
582
16.5
Uso de XM L y el D O M
583
16.6
Creación de una aplicación real com patible con Ajax
587
16.6.1
Uso de JS O N
587
16.6.2
Funcionalidad enriquecida
588
16.6.3
Interacción con un servicio W eb en el servidor
597
16.6.4
Análisis d e datos d e JS O N
597
16.6.5
C rear elem entos de H T M L 5 y establecer manejadoras de eventos al instante
598
16.6.6
Im plem entación de escritura adelantada
598
16.6.7
Im plem entación de un form ulario con validación asincrona
599
I7
Servidores W eb (Apache y US)
605
17-1
Introducción
606
17.2
Transacciones de H T T P
606
17.3
A rquitectura de aplicación m ultinivel
610
17.4
C om paración entre secuencia de com andos del lado cliente y del lado servidor
611
x v ii
Acceso a servidores Web
611
Instalación de Apache, M ySQ L y P H P
611
17.6.1
Instalación de XAM PP
612
17.6.2
Ejecución de X A M PP
612
17.6.3
Pruebe su configuración
613
17.6.4
Ejecución de los ejemplos m ediante el servidor H T T P Apache
613
Microsoft IIS Express y W cbM atrix
614
17.7.1
Instalación y ejecución de IIS Express
614
17.7.2
Instalación y ejecución de W ebM atrix
614
17.7.3
Ejecución de los ejemplos del lado cliente usando US Express
614
17.7.4
Ejecución de los ejemplos de P H P usando IIS Express
615
Base de datos: SQL, M ySQL, LIN Q y Java DB
617
Introducción
618
Bases de datos relaciónales
618
G eneralidades acerca de las bases de datos relaciónales:
h base de datos Books
620
SQ L
623
18.4.1
C onsulta SELECT básica
624
18.4.2
La cláusula WHERE
624
18.4.3
La cláusula ORDER BY
626
18.4.4
C óm o fusionar datos de varias rabias: INNER J0IN
628
18.4.5
La instrucción INSERT
629
18.4.6
La instrucción UPDATE
631
18.4.7
La instrucción DELETE
631
M ySQL
632
18.5.1
Instrucciones para configurar una cuenta de usuario de M ySQ L
633
18.5.2
Creación de bases de datos en M ySQL
634
(O pcional) C onsultas integradas en lenguajes (L IN Q ) de M icrosoft
634
18.6.1
C onsultar u n arreglo d e valores i n t m ediante L IN Q
635
18.6.2
C onsultar u n arreglo de objetos Employee m ediante L IN Q
637
18.6.3
C onsultar una colección genérica m ediante L IN Q
642
(O pcional) L IN Q para S Q L
644
x v ii i
Contenido
18.8
(O pcional) C onsultar una base de datos con L IN Q
18.9
645
18.8.1
Creación de clases d e L IN Q para S Q L
645
18.8.2
Vinculaciones de datos entre controles y las clases de L IN Q para S Q L
648
(O pcional) V inculación dinám ica de resultados de consultas de L IN Q para S Q L
652
18.9.1
Creación de b G U I DisplayQueryResul t
652
18.9.2
Codificación de la aplicación D isp la y Query R e s u lt
654
18.10
Java D B /A pache D erby
656
A
Caracteres especiales de H TM L
Al
B
Colores de H TM L
Bl
C
Tabla de precedencia de operadores de JavaScript
Cl
D
Conjunto de caracteres ASCII
DI
índice
11
Los cap ítu lo s 19 a 2 9 y apéndices E y F se en cu en tran
en su id io m a original (inglés) en el sitio web del libro.
19
PHF
20
Web App Development with A SP .N ET in C#
2I
Web App Development with A SP .N ET in
22
Web Services in C#
23
Web App Development with A SP .N ET in Visual Basic
24
Web App Development with A SP.N ET in V B: A Deeper Look
25
Web Services in Visual Basic
26
JavaServer* Faces Web Apps: Part I
27
JavaServer'“ Faces Web Apps: Part 2
28
JavaServer in Java
29
HTML5 WebSockets and W eb Workers
Apéndices E y F
C#: A
Deeper Look
La ciencia, la tecnología y las diversas formas de arte,
todas unen a la hum anidad en un solo sistema ínter conectado.
-Z h o res Alcksandrovich M edvcdc
Bienvenido a la program ación en Internet y Web. Este libro presenta tecnologías de com putación de vanguardia
para estudiantes, profesores y desarro liado res de software.
El m undo de la com putación — en especial, el de la program ación en Internet y W eb — cam bia d e manera
constante. Esta nueva edición se enfoca en H T M L 5 y las tecnologías relacionadas en su ecosistema. Analizare­
m os con detalle las nuevas y em ocionantes características de H T M L 5 , C SS3. la más reciente edición de JavaS­
cript (EC M A Scripr 5) y el elem ento canvas de H T M L 5 . N os enfocam os en tecnologías clave populares q u e le
ayudarán a crear aplicaciones basadas en W eb e In te rn e t p ara ¡n te ra c tu a r co n o tras aplicaciones y bases de
datos, las cuales form an la base de los tipos de aplicaciones en red de nivel empresarial que son populares en la
industria actual.
Este libro es apropiado para cursos de program ación del lado del d ie n te y del lado del servidor, tan to a nivel
introductorio com o interm edio. Tam bién es adecuado para profesionales que deseen actualizar sus aptitudes
técnicas con las tecnologías más recientes de program ación en Internet y Web.
La base del libro es el reconocido “m étodo de código activo’’ de Dcitel: los conceptos se presentan en el
contexto de docum entos H T M L 5 funcionales com pletos, hojas de estilo CSS3, secuencias de com an d o s de
JavaScript, docum entos de X M L. program as y archivos de bases de datos, en vez de hacerlo a través de frag­
m entos separados de código. C ada ejemplo de código com pleto viene acom pañado de ejemplos de ejecuciones
reales. El código fuente está disponible, en inglés, en la página del au to r (w v w .d eitel .co m /b o o k s/i w 3htp5/) y
en el sitio W eb de este libro.
Si surge alguna d u d a o pregunta a m edida q u e lea el libro, envíe u n correo electrónico a d e i t e l f l d e i t e l .
com; le responderem os oportunam ente. Para o b ten er actualizaciones sobre este libro, visite *Avw.deitel .com/
b o o k s /iw 3 h tp 5 /, ú nase a n u estras co m u n id ad es en Facebook (w w w .fa c e b o o k .c o m /d e ite lfa n ) y T w itter
(@ d eitel), o suscríbaseal boletín electrónico D ciut* Suzz O nline (www . d e i t e l .c o m /n e w s le tte r /s u b s c r ib e .
htm l).
Características nuevas y actualizadas
H e aquí las actualizaciones que realizamos en esta nueva edición:
• N uevo capitulo 1. El nuevo capítulo 1 atrae el interés de los estudiantes con hechos y cifras interesantes,
para em ocionarlos en cuanto al hecho de estudiar el desarrollo de aplicaciones de Internet y W eb. El
capítulo incluye una tabla de una parte de la investigación hecha posible por las com putadoras e Inter­
net, las tendencias d e tecnología y discusiones sobre el hardw are actuales, una tabla de publicaciones de
Prefacio
XX
negocios y d e tecn o lo g ía, y sitio s Web q u e le ay u d arán a m a n te n e rse actu alizad o co n las noticias
y tendencias más recientes sobre tecnología, además de ejercicios actualizados.
•
N uevas características de H T M L 5. El capítulo 3 introduce las características m ás recientes de H T M L 5 ,
incluyendo los nuevos tipos de entradas de form ularios de H T M L 5 y los elem entos de estructura de
página (figura 1). luis nuevas características de H TM 1.5 no se imp/ementan de manera universal en todos
los tuivegadores Web. E sto está cam biando a m edida que los proveedores de navegadores liberan nuevas
versiones. H ablarem os sobre m uchas características adicionales d e H T M L 5 en el resto del libro.
Nuevas características de HTML5
Tipos de entradas deformulario
color
email
search
week
date
nooth
datetlne
nunber
tlM
elemento d a ta lls t
te l
elemento Input
d atetln e-lo cal
range
url
atributo autoconplete
Elementos de estructura de página
header
a r tlc le
meter
nav
sumnary
footer
figure
flgcaptlon
sectlon
aslde
semántica a nivel de texto (marcado de saltos de línea potenciales)
Figura I | Nuevos tipos de entradas de formulario y elementos de estructura de página de HTML5.
N uevas características de C SS3. E l capítulo 5 in tro d u c e las características m ás recientes d e CSS3
(figura 2). Las nuevas características de CSS3 no se implementan de numera universal en todos los navega­
dores Web. Esto está cam biando a medida que los proveedores de navegadores liberan nuevas versiones.
Nuevas características de CSS3
som bras d e texto
esquinas redondeadas
color
som bras d e cuadros
gradientes lineales
gradientes radiales
m últiples im ágenes de fo n d o
bordes de im ágenes
anim aciones
transiciones
transform aciones
regla « f o n t- fa c e
M ódulo de d iseñ o d e cu ad ro
selectores : n t h - c h i l d
diseños de varias co lu m n as
flexible
consultas d e m edios
Características que no son estándar
tex t-stro k e
reflexión
Figura 2 | Nuevas características de CSS3
Características nuevas y actualizadas
•
xxi
Tratam iento a ctualizado de JavaScript. Reforzamos la cobertura de JavaScript en los capírulos 6 al
16. JavaScript se ha convertido en el lenguaje de secuencias de com andos del lado del cliente estándar
por excelencia para aplicaciones basadas en W eb, debido a su naturaleza altam ente portable. N uestro
enfoque, que es apropiado para principiantes, sirve para dos fines: introduce las secuencias de com andos
del lado del cliente (capítulos 6 al 16) para que las páginas W eb sean más dinám icas e interactivas, y
proporciona la base de program ación para las secuencias de com andos del lado del servidor en P H P que
se presentan en el capitulo 19. JavaScript es sim ilar a las características fundam entales de los lenguajes
C , C++, C # y Java. U na vez que aprenda JavaScript le será más fácil aprender estos otros lenguajes de
program ación populares.
• Nuevo canvas d e H T M IS . El capítulo 14 sustituye los capítulos de Flash y Silverlight de la edición an te­
rior con el nuevo elem ento canvas de H T M L 5 para gráficos en 2 D (figura 3). canvas está integrado al
navegador, con lo que se elim ina la necesidad de com plem entos com o Flash y Silverlight y nos ayuda a
m ejorar el rendim iento y la conveniencia, adem ás de reducir costos. Al final del capítulo usará canvas
para crear un juego d e cañón anim ado con efectos de audio, com o el que creamos en Flash en ediciones
anteriores de este libro.
Características de canvas de HTML5
rectángulos
lincas
arcos y círculos
so m b ras
curvas cuadráticas
curvas de Bczicr
gradientes lineales
gradientes radiales
m an ipulación de imágenes
imágenes
patrones
Transform aciones
transparencia alfa
composición
Figura 3 | Características de canvas de HTML5.
Ejercicios de m u ltim ed ia nuevos y a ctualizados. El capítulo 14 incluye varios ejercidos m ultim edia
nuevos y actualizados (figura 4).
Ejercicios de multimedia nuevos y actualizados
M ejoras al juego d d cañ ó n
Transición aleatoria e n tre im ágenes
R d o j digital
A nim ación
M arquesina de im ágenes desplaza ble
A udio de fo n d o
Signo de m arquesina
dcsplazablc
G en erad o r de rom pecabezas
autom ático
R d o j análogo
G en erad o r d e laberintos y cam in an te
A udio dinám ico y caleid o s­
copio gráfico
C arrera de caballos
Tejo
D iseñador d e fuegos artificiales
Planificador d e pisos
B andido de un solo brazo
A certijo del 15
P robador d e tiem p o de reacción
Juego d e billar
C olorear fotografías c im ágenes
R o b o t aspiradora
C rucigram a
en blanco y negro
Im ágenes giratorias
Figura 4 | Ejercicios multimedia nuevos y actualizados.
P robador de la vista
xxü
Prefacio
•
Código evaluado en siete navegadores . Para la edición a n te rio r p ro b am o s el có d ig o en d o s nave­
gadores de escritorio: In te rn e t E xplorer y Firefox. A hora probam os to d o el có d ig o en las versiones
más actuales d e siete navegadores populares: cin c» para el e s c r ito r io (C h ro m c , I n te r n e t E x p lo re r,
F irefox, O p e r a y S a fa ri) y d o s p ara d isp o sitiv o s m ó v iles (iP h o n e /iP a d y A n d ro id ). H T M L 5 y
CSS3 están en evolución, por lo que no se han aprobado aún los estándares finales. Los proveedores de
navegadores están im p lc m e n tan d o características d e m an era selectiva, q u e tien en una b u en a p ro b a­
bilidad d e estandarizarse. A lgunos proveedores tien en m ayores niveles d e c u m p lim ie n to q u e otros
con respecto a las características. C o n cada nueva versión d e los navegadores, la ten d en cia h a sido
au m en tar d e m anera co n sid erab le el grado de fu n cio n alid ad im p lem cn tad o . El sitio d e p ru e b a d e
H T M L 5 (h tm l5 te s t.c o m ) m ide q u é tan bien so p o rta cada navegador los estándares y especifica­
ciones p en d ien tes. P uede ver los resultad o s de las p ru eb as y las características so p o rtad as p o r cad a
navegador. T am bién puede revisar sitios c o m o h t t p : / / c a n i u s e . c o m / , en d o n d e o b te n d rá u n a lista
de las características cu b iertas p o r cada navegador. N o todos los documentos en este libro se desplegarán
correctamente en todos los navegadores. En vez d e elegir sólo capacidades q u e existan de m an era u n i­
versal, d em o stram o s las características nuevas y em o cio n an tes en el navegador que m aneje m ejo r
esas funcionalidades. A m edida q u e lea este libro, ejecu te cada ejem plo en varios navegadores W eb
para que p u ed a verlo c in tcractu ar con él d e la m an era q u e se p la n e ó o rig in alm en te. Y recuerde que
todo está cam b ian d o con rapidez, así que tal vez u n navegador q u e no so p o rtab a cierta característi­
ca al m o m e n to de escribir este libro p o d ría so p o rtarla al m o m e n to en q u e usted lo lea.
•
Código H T M L 5 , C SS 3 y Ja va S crip t va lid a d o . T odo el có d ig o H T M L 5 , CSS3 y JavaS cript en el
libro se validó m ed ian te el uso d e v a l1 d a t o r .w 3 .o r g /p a r a H T M L 5 , j1 g s a w .w 3 .o r g /c s s - v a l1 d a to r para CSS3 y j a v a s c r l p t l 1 n t.co m para JavaS cript. No todas las secuencias de comandos se vali­
dan en su totalidad, pero la mayoría lo hacen. A unque to d o el có d ig o fu n c io n a co rrectam en te, tal vez
reciba advertencias (o posibles errores) al validar có d ig o c o n algunas de las nuevas características.
• A plicaciones p a ra sm artphones y tablets. Es probable que esté fam iliarizado con la explosión de
aplicaciones disponibles para las plataform as iP h o n e /iP a d y A n d ro id . H ay casi un m illón d e apli­
caciones en tre las dos. A nteriorm ente, para escribir aplicaciones en estas plataform as se requería un
conocim iento detallado de cada una y, en el caso de ¡P hone/iP ad, el proceso era co n tro lad o de m anera
estricta por Apple; A ndroid es m ás abierto. C on las técnicas q u e aprenderá en este libro, podrá escri­
b ir aplicaciones portables en tre una gran variedad d e plataform as d e escritorio y móviles, incluyendo
¡Phone/iPad y Android. Induso podrá vender esas aplicaciones bajo sus propios térm inos (o a través d e
d ertas tiendas de aplicaciones tam bién). ¡Esta posibilidad es em ocionante! Es una de las verdaderas vir­
tudes de desarrollar con H T M L 5 , C SS3 y JavaScript en general, y con el elem ento canvas de H T M L 5
en particular. Ejecutar una aplicación H T M L 5 en su sm artphonc o tablct es tan sim ple com o abrirla en
su navegador W eb com patible. Tal vez aún se encuentre con algunos problemas deportabilidad.
• Nuevas capacidades d e alm acenam iento Web de H T M L 5 , En el capítulo 11 usaremos las nuevas
herram ientas de alm acenam iento Web d e H T M L 5 para crear u n a aplicación W eb que alm acene en la
com putadora las búsquedas favoritas de un usuario de Twitter, para facilitar el acceso en lo sucesivo. El
alm acenam iento W eb reemplaza a la tecnología controvcrsial de Las cookies, adem ás d e ofrecer m ucho
más espacio de alm acenam iento. El capítulo 11 tam bién incluye una breve introducción a JS O N , un
medio para crear objetos de JavaScript; por lo general se utilizan para transferir datos sobre Internet
entre program as del lado del cliente y del lado del servidor.
Características nuevas y actualizadas x x ü l
Juego de dados m ejorado con elem entos d e a u d io y video d e H T M L 5. El juego de los dados (Craps)
en el capítulo 9 incluye ahora un elem ento de au d io de H T M L 5 , que reproduce un sonido cada vez
que el usuario tira los dados. También incluim os un vínculo a una página con u n elem ento de v id e o de
H T M L 5 incrustado, que reproduce un video para explicar las regias del juego.
Caso d e estudio de jQ u e ry y A jax. En b edición anterior de este libro se incluyó u n a aplicación de
calendario en b que se utilizaban las bibliotecas D o jo (que eran populares en ese m om ento) para crear
b interfaz de usuario, com unicarse con el servidor en form a asincrona, manejar eventos y m anipular el
D O M . Desde entonces, jQ u ery se convirtió en b biblioteca m is p o p u b r de JavaScript. En esta edición
actualizam os b aplicación d e calendario (capítulo 16) m ediante el uso de jQ u ery y b colocam os en línea
oomo un caso de estudio de jQ uery y Ajax.
N uevas herram ientas W ebsocketsy Web W orkers de H T M L 5. Agregamos u n tratam iento en línea de
dos nuevas tecnologías: W ebSockets, que proporciona un modelo sim ple de red y W eb W orkers, que nos
perm ite usar m ulrihilos en una página Web.
A plicaciones Web ha bilita d as p ara A jax. Actualizamos el capítulo sobre b creación de aplicaciones
W eb habilitadas para Ajax, con aplicaciones que dem uestran las actuabzaciones parciales de páginas y las
capacidades de escritura adelantada (type-ahead); cada una de estas herram ientas son capacidades dave
de las Aplicaciones enriquecidas de Internet (Rich Internet Applications).
H T M L D O M y X M L D O M . M ejoram os nuestra form a de tratar los tem as de m anipulación d e D O M ,
eventos de JavaScript y m anipubción de X M L D O M con JavaScript.
L IN Q . D esde la ú ltim a edición del libro. M icrosoft in tro d u jo L 1 N Q (C onsultas integradas en le n ­
guajes) para su stitu ir a S Q L en el acceso a bases de d ato s. El c a p ítu lo 18 ofrece una in tro d u c c ió n
a los fu n d a m e n to s d e L IN Q y una in tro d u c c ió n a L IN Q p ara S Q L (la tecnología q u e su stitu y e a
SQ L ).
Los capítulos 19 a 2 9 y apéndices E y F se encuentran en inglés en la pá gina web d e l libro
(www. pearso n enespa ño I.co m /dei tcl).
C obertura a ctu a liza d a de PHP. El capítulo 19 se actualizó a b versión más reciente de PHP. Si empieza
este libro com o principiante y estudia el lenguaje JavaScript en los capítulos 6 al 13, tendrá la experiencia
de program ación necesaria para com prender b program ación del lado del servidor en PHP. [N uestra
form a de exponer la program ación del lado del servidor en A S R N E T exige un conocim iento de C # o
Visual Basic; para JSF se requiere conocim ientos de Java].
A SR N E T , A ja x en A S P .N E T y servicios Web. Esta secuencia actualizada de tres capítulos se ofrece
ahora para cada uno de los dos lenguajes cbve de desarrollo de aplicaciones de M icrosoft: C # y Visual
Basic Estos capítulos están disponibles en el sirio W eb del libro.
JavaServer Faces (JSF), A ja x en J S F y servicios Web. Esta secuencia actualizada de tres capítulos, dis­
ponibles en línea, se concentra en b creación de aplicaciones JSF habilitadas para Ajax.
Servicios Web. Ahora contam os con capítulos sobre cóm o crear servicios W eb basados en SOAPj» ser­
vicios W eb basados en R EST con A S P N E T en Visual Basic, A SR N E T en C # y JSF en Java.
Aplicaciones cliente/servidor. Tenem os varios casos de estudio del b d o del cliente que perm iten a
los estudiantes interactuar con servicios W eb im piem entados previam ente, los cuales están alojados en
t e s t . d e i t e l . com.
x x iv
•
Prefacio
Casos de estudio nuevos y actualizados. El libro incluye casos de estudio m uy com pletos, en los que
se utilizan varias tecnologías: Visor d e portadas de D eitel (JavaScript/D O M ), Librera de direcciones
(Ajax), Juego del cañón (C anvas de H T M L 5), Lista de correo (PH P /M yS Q L ), Libro de visitantes y
Base de datos de libros protegida por contraseña (ASP.NET), Libreta de direcciones (JavaServer Faces)
y Biackjack (servicios W eb JAX-WS).
N uevas herram ientas pedagógicas
• Ejercicios "H acerla d ife re n c ié ' en el capitulo 1. Lo alentam os a usar las com putadoras e Internet para
investigar y resolver problem as sociales im portantes. Estos ejercicios están diseñados para aum entar la
conciencia y el análisis en torno a los problem as im portantes a los que se enfrenta el m undo. Esperamos
que usted los aborde con sus propios valores, políticas y creencias. D é un vistazo a los diversos recursos
“H acer la diferencia” que proporcionam os, incluyendo nuestro nuevo C en tro de recursos para hacer la
diferencia en w w w .deitel .cow /M akingA D ifference. en donde obten d rá ideas adicionales que ral vez.
desee investigar más a fondo.
•
Núm eros d e página d e los térm inos clave en los resúm enes d e los capítulos. En los térm in o s clave que
aparecen en los resúm enes de los capítulos 1 a 18, incluim os el núm ero de página en d o n d e se define el
térm ino.
Gráfico de dependencias
El gráfico de la figura 5 m uestra la organización m odular del libro y las dependencias entre los capítulos para
ayudar a los profesores a planear su program a de estudios. Cómo programar en Internet y World W ide 5/e es un
libro apropiado para una variedad de cursos d e program ación de nivel in tro d u cto rio e interm edio, en especial
de program ación del lado del cliente y del lado del servidor. Los capítulos 1 al 18 están en el libro impreso; los
capítulos 19 a 29 y algunos apéndices se encuentran en inglés en el sitio w eb de este libro.
Le recom endam os estudiar todas las dependencias de u n capítulo antes d e estudiarlo, aunque tam bién es
posible usar o tro orden. Algunas de las dependencias se aplican sólo a secciones de los capítulos, por lo que
aconsejam os a los profesores que exploren el m aterial antes d e diseñar un curso d e estudio. El libro está dise­
ñado para cursos que enseñan program ación W eb sólo del lado del cliente, cursos q u e enseñan program ación
W eb sólo del lado del servidor y cursos que enseñan una com binación de lo anterior. Los lectores interesados en
estudiar las tecnologías del lado del servidor deben saber cóm o crear páginas Web m ediante H T M L 5 y CSS3,
adem ás de la program ación basada en objetos en JavaScript. Los capítulos 15 y 16 pueden enseñarse com o parte
de una unidad del lado del cliente, al principio de una unidad del lado del servidor, o pueden dividirse entre
ambas unidades.
Apéndice en línea de accesibilidad de HTML5
D e conform idad con la Iniciativa de accesibilidad d e W 3 C , sus páginas y aplicaciones W eb deben ser accesibles
de m odo que “las personas con discapacidades puedan percibir, com prender, navegar c intcractuar en W eb,
y que puedan tam bién co n trib u ir con la Web.” 1 En un apéndice en línea, enum eram os las cuestiones de acce­
sibilidad que debe tener en cuenta al diseñar páginas W eb y aplicaciones basadas en W eb. Tam bién proporcio­
nam os recursos que m uestran cóm o usar H T M L 5 , CSS3, JavaScript y diversas técnicas de diseño para crear
páginas y aplicaciones W eb accesibles. Según sea apropiado, enlazamos la inform ación en este apéndice de
vuelta con los capítulos y secciones apropiadas, para q u e pueda ver cóm o es posible m ejorar las aplicaciones para
aum entar el nivel de accesibilidad en Web.
1. h ttp : //tw *w .w 3 .o rg / W A I/ i n t r o / a c c e s s ib il1t y . php.
Apéndice en linea de accesibilidad de HTML5
Introducción
ducoón a las computadoras e Internet
xxv
Introducción al desarrollo del
lado del servidor
17 Servidores W eb (Apache e IIS)
Introducción a HTM L5 y CSS3
18 Base de datos: SQ L. M ySQ l.
LIN Q y Java Dfl
*-2 htroducción a HTM15: Parte I
1
3 Introducción a HTML5: Parte 2
► I9 P H P ’
I
4 Introducción a las hojas de estilo en
aseada (Cascading Styfe Sheets™. C SS): Parte l
f
— 5 Introducción a las hojas de estilo en cascada
(Cascading Styfe Sheets™. C SS): Parte 2
V
Server-Side Development
w ith A S P .N E T and C#2
20 W eb App Development -*
with ASP.NTT in C I
'
Fundamentos de programación
en JavaScript
6 JavaScript: introducción a las secuencias
de comandos
21 W eb App Development
with ASP.N ET in C#: A Deeper look
I
22 Web Se unces in C«
f
N
7 JavaScript: instrucciones de control I
»
8 JavaScript: instrucciones de control II
T
y
Server-Side Development
w ith A S P .N E T and V B 3
23 W eb App Development
w ith ASP.NET in Visual Basic
9 JavaScript: fundones
T
10 JavaScript: arreglos
*- 24 W eb App Development
w ith ASP.NET in V B : A Deeper Look
»
i
i I JavaScnpt: objetos
25 Web Services in Visual Basic
T
-1 2 Modelo de objetos de docim ento (D O M ):
objetos y colecciones
Server-Side Development w ith
JavaServer Faces and Java4
26 JavaServer™ Faces Web Apps: Part i -•
13 Manejo de objetos de JavaScnpt:
un análisis más detallado
- 27 JavaServer™ Faces W eb Apps: Part 2
14 HTM15: Irtroducción a canvas
1
28 W eb Services in Java
Fundamentos de Ajax
► ló X M l
léAplicaconesennquecidasde Internet
habilitadas para Ajax con XML y JSON
W ebSockets and W eb W orkers
29 HTML5 WebSockets * id W eb W orkers
1. E3capitulo 19 (en el sitio W eb) asume sólo que usted está lamilianzado con los Andamentos de programación que
se presentan en los capítulos 6 al 13.
2. Los capítulos de C# requieren conocimiento de C l y d e las bibliotecas de clases de Microsoft .N ET.
3. Los capítulos de Visual Basic requeren conocimiento de Visual Basic y de las bibliotecas de dasesde Microsoft .N ET.
4 Los capítulos de Java requeren conocimiento de Java y de las bibliotecas de clases de Java.
Figura 5 | Gráfico de dependencias de capítulos de Cómo programar en Internet y World Wide Web. quinta edición.
xxvi
Prefacio
Apéndice de geolocalización en HTML5 en línea
La API de geolocalización de H T M L 5 le perm ite crear aplicaciones W eb que recopilen inform ación sobre la
ubicación (por ejemplo, las coordenadas de latirud y longitud) m ediante el uso de tecnologías com o GPS,
direcciones IP, conexiones W i-F¡ o conexiones a torres celulares. Esta tecnología es soportada por los siete nave­
gadores de escritorio y móviles que utilizamos para probar el código de todo el libro.
La especificación de la API de geolocalización lista varios casos de uso,* incluyendo:
•
buscar puntos de interés en el área del usuario
•
anotación de contenido con inform ación sobre b ubicación
•
m ostrar b posición del usuario en un mapa
•
proveer navegación por rutas
•
alertar al usuario cuando haya puntos de interés cercanos
• proveer inform ación local actualizada
•
etiquetar ubicaciones en actualizaciones de estado en sitios de redes sociales
Por ejem plo, podría crear una aplicación Web móvil basada en la ubicación que utilice b inform ación d e ubica­
ción del GPS de u n sm artphone para rastrear la ru ta de un corredor en un mapa, calcular la distancia recorrida
y b velocidad prom edio. D e m anera similar, podría crear una aplicación que devuelva una lista de negocios
cercanos. En este apéndice en línea, crearemos una aplicación móvil basada en b ubicación.
Métodos de enseñanza
Cómo programar en Internet y World W ide Web, quinta edición contiene cientos de ejem plos funcionales com ple­
tos en toda una variedad de marcado, estilos, secuencias d e com andos y lenguajes de program ación. Hacem os
énfasis en la claridad y nos concentram os en b creación de software bien diseñado.
Som breo d e sin ta xis. Para m ejorar b le g ib ilid a d , som bream os b sintaxis del código así com o b m ayoría de los
entornos de desarrollo integrados y los editores de código colorean b sintaxis del código. N uestras convenciones
de som breo de sintaxis son:
lo s co m en tarlo s ap arecen a s i
l a s p a la b r a s c la v e a p a re c e n a s i
l a s c o n sta n te s y l o s v a lo re s l i t e r a l e s aparecen a s i
el r e s t o del código aparece en negro
Resaltado d e código. C olocam os rectángulos grises alrededor de los segmentos de código cbve.
Uso d e Juentes pa ra d a r énfasis. C olocam os los térm inos cb v e y b referencia a b página del índice para cada
ocurrencia d e definición en texto en n e g rita para facilitar su localización. Enfatizamos los com ponentes en
pantalla en la fuente H elvética en negrita (por ejem plo, el m enú Archivo) y el texto del program a en b fuente
Lucida (por ejem plo. 1nt co n teo » 5).
Acceso W eb. Todos los ejemplos de código fuente se pueden descargar de:
www.deitel.com/books/1w3htpS
vww.pearsonenespaftol.com/deitel
O bjetivos. Las citas de apertura van seguidas de una lista de objetivos del capítulo.
2.
h ttp ://« w w v .w 3.org/T R /geo lo cation -A P I/#usecases_sect1on .
Métodos de enseñanza x x v ii
Ilustraciones/figuras. Incluim os una gran cantidad de tablas, dibujos lineales, docum entos, secuencias de
com andos, program as y salidas de program a.
Tips d e program ación. Incluim os tips de program ación para ayudarle a enfocarse en los aspectos im portantes
del desarrollo de software. Estos tips y prácticas representan lo m ejor q u e hem os podido recabar a lo largo de
siete décadas com binadas de experiencia en la program ación y la enseñanza.
Buenas prácticas de programación
Las Buenas prácticas d e program ación llaman ¡a atención hacia técnicas que le ayudarán a producir progra­
mas más claros, comprensiblesy fáciles de mantener.
,
A
jr
Errores com unes de programación
Al poner atención en estos Errores co m u n es d e program ación se reduce ¡a probabilidad de que usted pueda
cometerlos.
T ip s para prevenir errores
Estos tips contienen sugerencias para exponer los erroresy eliminarlos de sus programas; muchos de ellos descri­
ben aspectos de programación que evitan que ¡os errores entren siquiera a losprogamas
T ip s de rendimiento
Estos tips resaltan ¡as oportunidades para hacer que sus progamas se ejecuten más rápido, o para minimizar
la cantidad de memoria que ocupan.
TT
T ip s de portabilidad
Los T ip s de p o rtab ilid a d le ayudan a escribir código que pueda ejecutarse en una variedad de plataformas.
tara?
O bservaciones de ingeniería de softw are
luis O bservaciones de ingeniería de softw are resaltan los asuntos de arquitecturay diserio, lo cual afecta
la construcción de los sistemas de software, especialmente los de gan escala.
Viñetas d e resum en. Presentamos un resum en detallado del capítulo, estilo lista con viñetas, sección por sec­
ción, para una revisión rápida de los puntos clave. Para facilitar la referencia, incluim os e l núm ero d e página de
cada ocurrencia de definición de los térm inos clave en el texto.
Ejercicios d e autoevaluación y respuestas. Se incluyen ejercicios extensos de autoevaluación y sus respuestas
para que los lectores practiquen por su cuenta.
Ejercicios. Los ejercicios de los capítulos incluyen:
•
•
•
•
•
recordatorio sim ple de Li term inología y los conceptos im portantes
¿cuál es el error en este código?
escritura de instrucciones individuales
escritura d e funciones y secuencias de com andos com pletas
proyectos im portantes
índice. Incluim os un índice extenso. Las ocurrencias de definición de los térm inos clave se resaltan con un
núm ero de página en n eg rita.
x x v iü Prefacio
Recursos para el profesor
Los siguientes suplem entos están disponibles en inglés sólo para profesores a través del C en tro de recursos de
Pearson
.p e a rs o n e n e s p a ñ o l. ccxn/deitel):
• D iapositivas d e P ow erP oint*que contienen todo el código y las figuras del texto, adem ás d e elem entos
en viñetas que sintetizan los puntos clave.
• M a n u a l d e soluciones con soluciones para la gran mayoría de los ejercicios de final de capítulo. Revise
el C cnrro de recursos para el profesor si desea determ inar cuáles ejercicios tienen soluciones.
H acceso está lim ita d o e strictam en te a profesores u n iv e rsita rio s q u e im p a rta n clases co n base en el lib ro .
I-os p ro feso res só lo p u e d e n o b te n e r acceso a trav és d e sus re p re se n ta n te s d e P earso n . Si no es un m iem bro
docente registrado, póngase en contacto con su representante de Pearson o visite twwv.p earsonh1ghered.com /
e d u c a to r / r e p lo c a t o r /.
N o se p ro v een soluciones p a ra los ejercicios d e “proyectos” . Revise nuestro C en tro de recursos de pro­
yectos de program ación en d o n d e encontrará m uchos ejercicios adicionales y posibles proyectos (www. d e i t e l .
com /P rogram m ingP rojects/).
Reconocimientos
Agradecemos a Barbara D eitel las extensas horas que dedicó a este proyecto. Som os afortunados al haber traba­
jado con el equipo de editores tan profesionales de Pearson. Apreciamos la orientación, inteligencia y energía de
M ichael H irsch, editor en jefe de C iencias com putacionales. C arole Snyder reclutó a los revisores del libro y se
hizo cargo del proceso de rev isión. Bob Engelhardt se hizo cargo de la producción del libro.
Revisores
Q uerem os agradecer los esfuerzos de nuestros revisores de la cuarta y q u in ta edición. Revisaron a conciencia
el texto y los program as, proporcionando innum erables sugerencias para m ejorar la presentación: T im o th y
Boronczyk (consultor), R oland Boum an (M ySQ L AB), C h ris Bowen (M icrosoft), Peter B randano (K oolC o n n e c t Technologies, Inc.), M att C h o tin (Adobe), C hris C o rn u tt (PH PD cvcloper.org), Phil C o sta (A do­
be), U m achirra D am odaran (Sun M icrosystem s), Vadiraj D eshpandc (Sun M icrosystems), Justin E rcnkrantz
(The A pache Software F o undation), C h risto p h er Finke (N etscape), Jesse Jam es G arrett (Adaptive Path), M ike
H arsh (M icrosoft), C hris H eilm ann (M ozilla), Kevin H enrikson (Z im bra.com ), T im H euer (M icrosoft),
M olly E. H olrzschlag (W 3 C ), R alph H oopcr (U nivcrsity o f Alabam a, Tuscaloosa), C h ris H o rto n (U niversity
o f Alabama), John H rvatin (M icrosoft), Johnvey H w ang (Splunk, Inc.), Joe K rom cr (New' Pcrspective y el
G ru p o d e usuarios d e A dobe Flash de P ittsburgh), Jennifer K yrnin (G uía de diseño W eb en A bout.com ),
E ric Lawrence (M icrosoft). Pete LePagc (M icrosoft), Dr. Roy Levow (Florida A tlantic U niversity), Billy B.
L. Lim (Illinois State U niversity), Shobana M ahadevan (Sun M icrosystem s), Patrick M incault (P rogram ador
d e Flash independiente), A nand N arayanasw am y (M icrosoft), John Pcterson (Insync y V .I.O ., Inc.), Jennifer
Powers (U niversity o f Albany), Ignacio Ricci (Ignacioricci.com ), Jake R u tter (onerutter.com ), R obin Schum achcr (M ySQ L AB), José A ntonio G onzález Seco (Parlam ento d e A ndalucía), D r. G eorgc Scmeczko (Royal
& SunA lliance Insurance C añada), Steven Shaffer (Penn State U niversity), M ichael S m ith (W 3 C ), Karen Tegtm eyer (M odel Technologies, Inc.), Paul Vencill (M IT R E ), R aym ond W cn (M icrosoft), Eric M . W endelin
(Auto-crol Technology C orporación), R aym ond F. W ism an (In d ian a U niversity), Keith W ood (H yro, L td.) y
D aniel Z appala (Brigham Young U niversity).
Acerca de los autores x x i x
A m edida que lea el libro, sinceram ente apreciaremos sus com entarios, críticas, correcciones y sugerencias
para mejorarlo. D irija su correspondencia a:
d e i t e l S d e i t e l . com
Le responderem os oportunam ente. Esperam os q u e disfrute rrabajando con Cómo programar en Internety World
Wide Web, quinta edición.
Paul Harvey y Abbey Deitel
Acerca de los autores
fe u l J . D eitel, C E O y D irector Técnico de D eitel &t Associates, Inc., es egresado del M IT, en donde estudió
Tecnología de la Información. A través de D eitel & Associates, Inc., ha im partido cientos de cursos sobre
Java, C++, C , C #, Visual Basic y program ación en Internet a d ien tes d e la industria, incluyendo: C isco, IBM,
Siemens, Sun M icrosystems, D ell, Lucent Technologies, Fidclity, NASA en el C entro Espacial Kennedy, el N a ­
tional Severe Storm Laboratory, W h ite Sands Missile Range. Rogue Wave Software, Boeing, SunG ard H igher
Education, Stratus, C am bridge Technology Partners, O n e Wave, H yperion Software, Adra Systems. Entergy.
CahlcDara Systems, N orte! N etw orks, Puma, iR obot, Invensys y m uchos más. Él y su coautor, el Dr. Harvey
M. D eitel, son autores de los libros de program ación más vendidos en d m undo.
D r. H arv ey M . D eitel, Presidente y C onsejero de Estrategia de D eitel & Associates, Inc., tiene 50 años de
experiencia en el cam po de la com putación. El Dr. D eitel o b tu v o una licenciatura y una m aestría por el M IT y
un doctorado por La Universidad de Boston. Tiene m uchos años de experiencia com o profesor universitario, La
cual in d u y e un puesto vitalicio y el haber sido presidente del departam ento de Ciencias de la com putación en
el Boston College antes de fundar, con su hijo Paul J. D eitel, D eitel & Associates, Inc. Él y Paul son coautores
de varias docenas de libros y paquetes de video LiveLcssons, y piensan escribir m uchos más. Los textos de los
D eitel se han ganado el reconocim iento internacional y han sido traducidos al japonés, alemán, ruso, chino,
español, coreano, francés, polaco, italiano, portugués, griego, u rd ú y turco. El Dr. D eitel ha im partido cientos
de sem inarios profesionales de program ación para grandes empresas, instituciones académicas, organizaciones
gubernam entales y diversos sectores del ejército.
A bbey D eitel. presidenta de D eitel & Associates, Inc., es graduada de b Carnegie M ellon U niversitys
Tepper School o f M anagem ent, de d o n d e recibió una licenciatura en A dm inistración industrial. Abbey ha es­
tado adm inistrando b s operaciones comerciales de D eitel & Associates, Inc. d u ran te 14 años. H a contribuido
en numerosas publicaciones de D eitel 8¿ Associates, adem ás de ser coaurora de iPhone fo r Programmers: A n
App-Driven Approach y Androidfor Programmers: An App-Driven Approach.
Capacitación corporativa de Deitel & Associates, Inc.
D eitel & Associates, Inc., es una empresa reconocida a nivel m undial, dedicada al entrenam iento corporativo y
b creación de contenido. La empresa proporciona cursos im partidos por profesores en b s iastalaciones de sus
clientes en todo el m undo, sobre b m ayoría de los lenguajes y plataform as de program ación, com o Java™, C++,
Visual C + +*, C , Visual C # ", Visual Basic*, XML*. Python*, tecnología de objetos, program ación en Internet y
Web, desarrollo de aplicaciones para Android™ c ¡Phone*, y una lista cada vez m ayor de cursos adicionales de
program ación y desarrollo de software. Los fundadores de Deitel & Associates, Inc. son Paul J. D eitel y el Dr.
Harvey M. Deitel. Sus clientes incluyen m uchas de b s empresas más grandes del m undo, agencias gubernam en­
tales, sectores del ejército e instituciones académicas. A lo b rg o de su sociedad editorial de 36 años con Prcnticc
xxx
Prefacio
Hall/Pearson, D citcl & Associates, Inc. ha publicado libros de texto de vanguardia sobre program ación, libros
profesionales y cursos de video Livel^essons. Puede contactarse con D citcl & Associates, Inc. y con los aurores
por medio de correo electrónico:
d e f te lO d e it e l .con
Para conocer más acerca d e la em presa, sus publicaciones y su currículum m undial de la Serie de C apaci­
tación C orporativa Dive Into *, visite:
w w w .deitel.co*/tra1n1ng/
Suscríbase al boletín de correo electrónico DeiteT Ruzz O nline en:
w w w .d e 1 te l.c o m /n e w sle tte r/su b sc rib e .h tn il
Y únase a las com unidades de los autores en Facebook (****. f acebook. com /D eitel Fan) y Twitter (<3dei t e l ) .
Q uienes deseen com prar libros de D citcl y cursos de capacitación UveLessons en video pueden hacerlo a
través d e www. d e i t e l . com. Las empresas, el gobierno, las instituciones m ilitares y académicas que deseen reali­
zar pedidos en masa deben hacerlo directam ente con Pearson.
Acerca de la portada: Arte fractal
La portada de este libro presenta un fractal: una figura geom étrica que puede generarse d e un patrón que se
repite en form a recursiva. Para m odificar la figura se aplica el patrón a cada segm ento d e b figura original.
A unque estas figuras se estudiaron antes del siglo xx, fue el m atem ádeo Benoit M andelbrot quien introdujo el
térm ino “fractal" en b década de 1970, ju n to con los detalles específicos sobre la form a com o se crea un fractal
y sus aplicaciones prácticas. Esta geom etría proporciona modelos m atem áticos para m uchas form as complejas
que se encuentran en la naturaleza, com o m ontañas, nubes y costas. Los fraciales tam bién pueden usarse para
com prender sistemas o patrones que aparecen en b naturaleza (por ejem plo, los ecosistemas), en el cuerpo h u ­
m ano (en los pliegues del cerebro) o en el universo (com o las agrupaciones de gabxias). N o rodos los fractalcs
se asemejan a los objetos en b naturaleza. El dibujo de fractalcs se ha convertido en una form a d e arte popubr.
H ablarem os sobre b recursividad en b sección 9.9.
Antes de
empezar
Antes de com enzar a usar este libro asegúrese de tener un navegador W eb reciente; luego siga estas instrucciones
para descargar los ejemplos.
Cómo obtener el código fuente
'Io d o s los ejem plos para Cómo programar en Internet y W orld W ide Web, quinta edición están disponibles, en
inglés, en
www.deitel.com/books/1w3htp5/
(Los ejem plos de loscapírulos 1 a 18, en español, los encontrará el sitio web de este libro en www. pearsonenes-
pafiol.com /de1 t e 7).
Sí no se ha registrado aún en nuestro sitio W eb. vaya a vwwv.dei t e l .com y haga clic en el vínculo ñegister
(Registro) debajo de nuestro logo en la esquina superior izquierda de la página. Llene los cam pos con sus daros.
No hay cargo por registrarse; tam poco com partirem os su inform ación con terceros. Le enviarem os sólo correos
electrónicos relacionados con la adm inistración de su cuenta, a menos que se registre por separado para nuestro
boletín de correo electrónico gratuito Deitel* Buzz O nline en w w w .d e ite l.c o m /n e w s le tte r/s u b s c rib e .h tm l.
Después de registrarse en el sitio, recibirá un correo electrónico de confirm ación con su código de verificación.
Haga clic en el vinculo del correo electrónico de confirmación para completar su registro. C onfigure su cliente de
correo electrónico para que el correo d e confirm ación no se filtre com o correo basura y de esta m anera recibir
correos de d e i t e l . com.
A continuación, vaya a www .d e i t e l .com e inicie sesión usando el vínculo Login debajo de nuestro logo, en
b esquina superior izquierda de la página. Vaya a vwwv .d e i t e l . com /books/iw 3htpS /. E ncontrará el vínculo para
descargar los ejem plos bajo el encabezado Download C ode Examples and Other Premium Contení for Registered
Users (Descargar ejemplos de código y contenido Prem ium adicional para usuarios registrados). A note b u b i­
cación en donde eligió guardar el archivo Z IP en su com putadora. Extraiga los archivos de ejem plo a su disco
duro m ediante el uso de un program a extractor de archivos ZIP. Si trabaja en un bboratorio de com putadoras,
pregunte a su profesor en dónde puede guardar el código de ejemplo.
Navegadores Web utilizados en este libro
Probam os to d o el código en las versiones m ás actuales d e siete navegadores populares: cinco para dispositivos
de e sc rito rio (C h ro m e, In te r n e t E xplorer, F irefox, O p e ra , S afari) y dos para dispositivos m ó v iles (iP h o n e /
¡Pad y A ndroid). H T M L 5 y C SS3 están en evolución, por lo que no se han apro b ad o aún los estándares
finales. Los proveedores d e navegadores están im plcm cntando, d e m anera selectiva, características q u e tienen
una b uena probabilidad de estandarizarse. A lgunos proveedores tienen mayores niveles d e cum p lim ien to
x x x i i Antes de em pezar
que o tro s con respecto a las características. C o n cada nueva versión de los navegadores, la tendencia h a sido
a u m en tar d e m anera considerable el grado de funcionalidad im plem entado. El sitio de p ru eb a d e H T M L 5
(h tm l5 te st.c o m ) m ide qué tan bien soporta cada navegador los estándares y especificaciones pendientes.
Puede ver los resultados de las pruebas y las características soportadas p o r cada navegador. T am bién puede
revisar sitios com o h t t p : / / c a n i u s e .c o m / , en donde o b ten d rá una lista de las características cubiertas por
cada navegador. No todos los docum entos en este libro se desplegarán correctam ente en todos los navega­
dores. En vez de elegir sólo capacidades q u e existan de m anera universal, dem ostram os las características
nuevas y em ocionantes en el navegador que m aneje m ejor esas funcionalidades. A m edida que lea este libro,
ejecute cada ejem plo en varios navegadores W eb para q u e pueda verlo e in teractu ar con él de la m anera que
se planeó originalm ente. Y recuerde que rodo está cam biando con rapidez, así que tal vez un navegador que
no soportara cierta característica al m om ento d e escribir este libro podría soportarla al m om ento en que usted
lo vaya a leer.
Vínculos para descargar navegadores Web
Puede descargar los navegadores W eb de las siguientes ubicaciones:
•
Google C hrom e: http://vrtvw .google.com /chrom e
•
Mozilla Firefox: h ttp ://w w w .m o z 1 1 1 a .o rg /f1 re fo x /n e w /
•
M icrosoft Internet Explorer (sólo W indow s): h ttp ://w v rtv .m ic ro so ft.c o m /1 e
•
Apple Safari: h ttp ://w v rtv .a p p le .c o m /sa fa r1 /
•
O pera: h ttp ://w v rtv .o p era.co m /
Le recom endam os que instale todos los navegadores disponibles para su plataforma.
Software para los capítulos de A SP.N ET con C# y V isual Basic
Los capítulos de A SR N E T con C # (capítulos 20 al 22) y Visual Basic (capítulos 23 al 25) (todos en inglés en
el sitio web) y los de servicios W eb requieren Visual Web D evelopcr 2 0 1 0 Express y SQ L Server 2008 Express.
Puede descargar estas herram ientas desde vrtrtv.m icrosoft. com /express. D ebe seguir las instrucciones de insta­
lación predeterm inadas para cada herram ienta.
Software para los capítulos sobre JavaServer Faces y Java Web Services
Al principio del capítulo 26 (en inglés, en el sitio web) hablaremos sobre el softw are requerido para los capítulos
de JavaServer Faces y Java Web Sen-ices (capítulos 26 a 28).
A hora está listo para com enzar sus estudios d e program ación W eb con Cómo programar en Internet y World
W ide Web. quinta edición. ¡Esperamos que disfrute el libro! Si tiene alguna pregunta, siéntase libre de enviarnos
un correo electrónico a d e 1 te l® d e 1 te l. com. I>c responderem os oportunam ente.
Introducción a las computadoras
e Internet
La gente usa Internet y la Web
para crear cosas que no han
construido, escrito, dibujado o
comunicado en ningún otro lado.
—Tim fkrnm-Lcc
Qué maravilloso es que nadie
necesite esperar un solo momento
para empezara mejorar el mundo.
—Anne Frank
E l hombre sigue siendo la
computadora más extraordinaria
de todas.
—John F. Kennedy
Objetivos
En este capitulo aprenderá a:
■ Discernir lo esencial del
hardware de com putadoras,
software e Internet.
■ Familiarizarse con la evolución
de Internet y de la World W ide
W eb.
■ Reconocer la manera en que
HTML5. CSS3 y JavaScript
están mejorando el desarrollo
de aplicaciones Web.
■ Familiarizarse con la jerarquía
de datos.
■ Distinguir los diversos tipos de
lenguajes de programación.
■ Familiarizarse con los conceptos
de la tecnología de objetos.
■ Construir aplicaciones de
Internet, después de ver
interesantes y divertidas
demostraciones.
Plan general
2
Capítulo I
Introducción a las computadoras e Internet
.1 Introducción
1.10 W»b 2.0: a socializar
.2 Internet en la industria y la investigación
1.11 Jerarquía de datos
3 HTML5.CSS3. JavaScript. Canvas yjQuery
4 Demostraciones
1.12 Sistemas operativos
1.12.1 Sistemas operativos de escritorio
y de Notebook
5 Evolución de Internet y de la World Wide Web
1.12.2
Sistemas operativos móviles
6 Fundamentos de la Web
1.13 Tipos de lenguajes de programación
7 Arquitectura de aplicaciones multinivel
1.14 Tecnología de objetos
8 Comparación entre las secuencias de comandos
del lado del cliente y del lado del servidor
1.15 Mantenerse actualizado con las tecnologías
de la información
9 Consorcio World Wide W eb (W 3C)
\
Ejercicios de autoevaluación | Respuestas a los ejercicios de autoevaluación | Ejercicios
l.l
Introducción
Bienvenido al em ocionante y, rápidam ente, cam biante m undo de la program ación en Internet y en la Web. H ay
más de dos m il millones de usuarios de Internet en todo el m undo; esto equivale aproxim adam ente al 3 0 % de la
población de la T ierra.1E n la actualidad hay en uso más de mil millones de com putadoras de propósito general,
adem ás de o tro s miles de millones de com putadoras incrustadas que se utilizan en teléfonos celulares, teléfonos
inteligentes (sm artphones), com putadoras tipo tablet, electrodom ésticos, autom óviles y demás; y m uchos de
estos dispositivos están conectados a Internet. D e acuerdo con un estudio realizado por el G ru p o de soluciones
de negocios de Internet de Cisco, había 12.5 mil millones de dispositivos habilitados para Internet en 2010 y
se pronostica que esa cifra llegará a 25 mil millones para 2015, y a 50 mil millones para 2 020.1 Las tecnologías
de program ación en Internet y en la W eb que aprenderá a usar en este libro están diseñadas para ser portables, lo
que le perm itirá diseñar páginas W eb y aplicaciones que se ejecuten a través d e un enorm e rango de dispositivos
habilitados para Internet.
Empezará por aprender sobre las tecnologías de programación del lado d el cliente que se utilizan para crear
páginas W eb y aplicaciones que se ejecutan en el cliente (es decir, en el navegador del dispositivo del usuario).
Usará el Lenguaje de marcado de hipertexto 5 (H T M L 5) y las H ojas de estilo en cascada 3 (CSS3) (las versiones
más recientes de las tecnologías H T M L y CSS) para agregar características y efectos poderosos, dinám icos y diver­
tidos a las páginas y aplicaciones W eb, com o audio, video, anim ación, dibujos, m anipulación de imágenes, diseño
de páginas para varios tam años de pantalla, acceso al alm acenam iento en la Web y m ucho más.
Aprenderá sobre JavaScript: el lenguaje preferido para im plem entar el lado del cliente de las aplicaciones
basadas en Internet (en la sección 1.3 hablaremos sobre JavaScript con más detalle). I>os capítulos 6 al 13 pre­
sentan una extensa cobertura de JavaScript y sus herram ientas. Tam bién aprenderá sobre jQ uery. la biblioteca de
JavaScript que está cam biando, espectacularm ente, el m undo del desarrollo Web. A lo largo del libro tam bién
veremos un énfasis sobre el desarrollo con Ajax, que nos ayudará a crear aplicaciones más útiles y con un m ejor
desem peño.
E n capítulos posteriores aprenderá sobre la programación del lado del clientr. las aplicaciones que responden
a las solicitudes de los navegadores W eb del lado del cliente, com o buscar en Internet, revisar el saldo de su
1. w y w . 1 n t e r n e t w j r l d s t a t s . c o m / s t a t s . h t m .
2. nww.dSCO.com/web/about/ac79/doCS/1nnov/IoT_IBSG_04llFINAL.pdf.
1.2
Internet en la industria y la investigación
3
cuenta de banco, ordenar un libro por Amazon, ofertar en u n a subasta d e eBay y pedir boletos para un co n ­
cierto. Presentaremos m aterial condensado y popular sobre cuatro lenguajes de program ación en Internet/W eb
para crear el lado del servidor de las aplicaciones diente/servidor basadas en Internet y en la W eb. Los capítulos
19 al 22 y 23 al 28 presentan tres populares tecnologías del lado del servidor: PHP, ASP.NET (tanto en C #
com o en Visual Basic) y JavaServer Faces.
Asegúrese de leer d prefacio y la sección antes d e em pezar para tener una idea d e lo q u e se cubre en el libro
y cóm o configurar su com putadora para ejecutar los cientos d e ejemplos d e código. El código está disponible
en www. d e l te 1 .com /books/iw 3htpS y en w tw t.p e a rs o n h ig h e re d .c o n /d e ite l. Use el código fuente que in­
cluim os para ejecutar cada programa y secuencias de comandos (script) a m edida que los vaya estudiando. Pruebe
cada ejem plo en varios navegadores. Si le interesan los sm artphoncs y las com putadoras tipo tablct, asegúrese
de ejecutar los ejem plos en sus navegadores en dispositivos ¡Phone, iPad . A ndroid, los sm artphone, las tablet,
y otros. Las tecnologías cubiertas en este libro y el soporte en buscadores están evolucionado rápidam ente. No
todas ¡as características de todas las páginas que vamos a crear se desplegarán correctamente en todos los navegadores.
Los siete navegadores que usaremos son gratuitos.
la ley de M oore
Es com ún que piense que la m ayoría de los productos y servicios costarán u n poco m ás cada año. Sin embargo,
en los cam pos de las com putadoras y las com unicaciones ha ocurrido lo contrario, en especial con relación a
loe costos del hardw are q u e da soporte a estas tecnologías. Los costos del hardware han dism inuido con rapidez
durante varias décadas. A proxim adam ente cada uno o dos años, las capacidades de las com putadoras se duplican
sin que el precio se incremente. E sta notable observación se conoce en el ám bito co m ú n com o la Ley de M oore,
y debe su nom bre a la persona que identificó esta tendencia: G o rd o n M oore, cofúndador d e Intel — uno de los
principales fabricantes de procesadores para las com putadoras y los sistemas incrustados de la actualidad— . La
Le>' de M oore y las observaciones relacionadas son especialmente ciertas en cuanto a la cantidad d e m em oria
que tienen las com putadoras para los programas, la cantidad de alm acenam iento secundario (com o el alm ace­
nam iento en disco) que tienen para guardar los program as y datos durante periodos extensos, y las velocidades
de sus procesadores — las velocidades con que las com putadoras ejecutan sus program as (es decir, realizan su
trabajo)— . Se ha producido un crecim iento similar e n el campo de las com unicaciones, en donde los costos
se han desplom ado a m edida que la enorm e dem anda por el ancho d e banda de las com unicaciones (es decir,
la capacidad de transm isión d e inform ación) atrae una com petencia intensa. N o conocem os o tro s cam pos de
trabajo en los que la tecnología m ejore con tanta rapidez y los costos dism inuyan de u n a m anera tan drástica.
Dicha m ejora colosal está fom entando sin duda la Revolución de ¡a información.
1.2
Internet en la industria y la investigación
Estam os viviendo una época em ocionante en el cam po de la com putación. M uchas de las empresas más influ­
yentes y exitosas de Las últim as dos décadas están relacionadas con la tecnología: Apple, IBM, H ew lett Packard,
Dell, Intel, M otorola, Cisco, M icrosoft, Google, Amazon, Facebook, Twitter, G roupon, Foursquare, Yahoo!,
eBay, y muchas más. Estas com pañías son im portantes em pleadores de personas que estudian ciencias co m p u ­
ta d o nales, sistemas d e inform ación o disciplinas relacionadas. C uando escribim os este libro, A pple era la e m ­
presa más valiosa del m undo.
En el pasado, la mayoría de las aplicaciones de com putadora se ejecutaban en equipos que no estaban
conectados entre sí, m ientras que en la acrualidad es posible escribir aplicaciones de Internet para com unicarse
entre com putadoras en todo el m undo.
Las figuras 1.1a 1.4 proporcionan unos cuantos ejemplos de la forma en que se utilizan las computadoras e Inter­
net en la industria y la investigación. La figura 1.1 lista dos ejemplos de cóm o se utilizan las computadoras e Internet
para mejorar los servicios médicos.
4
Capítulo I
Nombre
Introducción a las computadoras e Internet
Descripción
Registros de salud
electrónicos
Podrían incluir el historial médico de un padenre, prescripciones, vacunas, resultados
de laboratorio, alergias, información de seguros y demás. Al poner esa información a
disposición de los proveedores de servicios médicos a través de una red segura logramos
mejorar el cuidado de los pacientes, se reduce la probabilidad de error y, en general, aumenta
b eficiencia del sistema de servicios médicos.
Proyecto Genoma
Humano
£1 Proyecto Genoma Humano se fundó para identificar y analizar los más de 20000 genes
en el ADN humano. El proyecto utilizó programas de computadora para analizar datos
genéticos complejos, determinar las secuencias de los miles de millones de pares base
químicos que conforman d ADN humano y almacenar b información en bases de datos
disponibles a través de Internet para los investigadores en muchos campos.
Figura I . I | Las computadoras c Internet en los servicios médicos.
La figura 1.2 proporciona un ejem plo de las em ocionantes form as en que se utilizan las com putadoras
e Internet para hacer el bien social. En los ejercicios que se encuentran al final de este capítulo ten d rá que
proponer otros proyectos en los que se utilicen las com putadoras e Internet para “hacer la diferencia".
Nombre
Descripción
AMBER” Alert
El sistema de alerta AMBER (Niños norteamericanos extraviados: transmisión de respuesta
a emergencias) se utiliza para buscar niños secuestrados. Las autoridades notifican a los
funcionarios de transporte estatal y a las transmisoras de TV y radio, quienes a su vez transmiten
alertas en TV, radio, señales de tráfico enmpulanzadas, Internet y dispositivos inalámbricos.
AM BER Alert se asoció hace pooo con Facebook, cuyos usuarias pueden “dar Like" a las páginas
de AM BER Alert por ubicación para recibir alertas en sus fuentes de noticias.
World
Community Grid
IVrsonas de todo el mundo pueden donar su poder de procesamiento de cómputo que no
utilicen, mediante b instalación de un programa de software seguro gratuito que permite a
Wirid Community Grid (mmw . worl dcommuní t y g r l d . o r g ) aprovechar b capacidad que
no se uriiioc. Este poder de cómputo, al cual se accede a través de Internet, se utiliza en lugar
de costosas supo-computadoras para realizar proyectos científicos de investigación que están
haciendo b diferencia, ya sea proporcionar agua potable a países del tercer mundo, combatir el
cáncer, cultivar arroz más nutritivo para repones que combaten d hambre y otras cosas más.
One Laptop Per
Child (O LPQ
One Laptop Per Child (o n e .1 a p to p .o rg ) proporciona, a niños pobres en todo d
mundo, bptops económicas de bajo consumo de energía y habilitadas para Internet;
con esto es posible fomentar d aprendizaje y reducir b división digital.
Figura 1.2 ¡ Proyectos que utilizan computadoras e Internet para el bien social.
Nosotros dependemos de las computadoras y de Internet para comunicar, navegar, coLaborar y más. La figura
1.3 muestra algunos ejemplos de cóm o es que las computadoras e Internet proveen b infraestructura para estas tareas.
1.2
Nombre
Internet en la industria y la investigación
5
Descripción
Computación
«n la nube
La c o m p u ta c ió n en la n u b e nos permite usar software, hardware c información almacenada
en la “nube” (es decir, se accede a computadoras remotas vía Internet y está disponible bajo
demanda) en vez de tener que almacenarla en nuestra computadora personal. Amazon
es uno de los principales proveedores de servicios públicos de computación en La nube.
Puede rentar capacidad de almacenamiento adicional mediante d Amazon Simple Storagc
Service (Amazon S3) o aumentar las capacidades de procesamiento mediante EC2 de
Amazon (Nube de cómputo clástica de Amazon). Estos servicios, que le permiten aumentar
o disminuir los recursos para satisfacer sus necesidades en un momento dado, son por lo
general más efectivos en costos que comprar hardware costoso para asegurarse de ccncr el
suficiente almacenamiento y poder de procesamiento para satisfacer sus necesidades en sus
niveles pico. Las aplicaciones de negocios (como el software CRM) son a menudo costosas,
requieren de cierto nivel de hardware considerable para ejecutarse y de un personal de
soporte experimentado para asegurar que se ejecuten de manera apropiada y segura. Al usar
los servicios de computación en la nube traspasamos b carga de tener que manejar estas
aplicaciones de nuestra empresa al proveedor de servicios, con lo cual ahorramos dinero.
GPS
Los dispositivos del Sistema de posicionamicnro global (GPS) usan una red de satélites para
recuperar información con base en la ubicación. Varios satélites envían señales con etiqueta
de fecha y hora al dispositivo GPS, d cual calcula la distancia hada cada satélite con base
en el tiempo en d que b señal salió d d satélite y el tiempo en el que llegó. E so información
se utiliza para determinar la ubicación exacta d d dispositivo. Los dispositivos GPS pueden
proporcionar indicaciones paso a paso y ayudarle a encontrar negocios cercanos (restaurantes,
gasolincrías, etc.) con facilidad, además de algunas puntos de interés. El sistema GPS se
utiliza en numerosos servicios de Internet basados en b ubicación, como las aplicaciones
chcck'in en linca, para que usted pueda encontrar a sus amigos (por ejemplo, Foursquarc y
lacebook), en aplicaciones para hacer ejercicio como RunKccper, que rastrean el tiempo, b
distancia y b velocidad promedio de su rutina de trotar en exteriores, aplicaciones de citas
que le ayudan a buscar una pareja cercana y aplicaciones que actualizan en forma dinámica
bs condiciones cambiantes del tráfico.
Robots
Los robots pueden usarse para tarcas cotidianas (como b aspiradora Roomba de iRobot),
para entretenimiento (como bs mascotas roboticas), combate militar, expediciones en b
profundidad dd océano y exploración espacial (como el Rover de b NASA en Marte) y
demás. RoboEarth (vww*. ro b o e a rth . org) es una “World Wide Web para robots", ya que
permite a los robots aprender unos de otros mediante b compartición de información, con lo
cual mejoran sus habilidades de realizar tarcas, navegar, reconocer objetos y otras cosas más.
Correo electrónico,
mensajería
instantánea, chat
de video y FTP
Los servidores basados en Internet soportan todo tipo de mensajería en línea. Los mensajes
de corroo dectrónico pasan por un servidor de correo que también almacena esos mensajes.
Las aplicaciones de mensajería instantánea fl.M) y chat de video tales como AIM, Skypc,
YSihoo! Mcssengcr y otras más le permiten comunicarse con terceras personas en tiempo
real, mediante el envío de mensajes y video a través de los servidores. FTP (protocolo de
transferencia de archivos) le permite intercambiar archivos entre múltiples computadoras
(por ejemplo, una computadora cliente que está en su escritorio y un servidor de archivos)
a través de Internet, mediante el uso de los protocolos TCP/IP para transferir datos.
Figura 1.3 | Ejempl s de infraestructura de computadoras e Internet.
La figura 1.4 lista algunas de b s em ocionantes formas en que se utilizan b s com putadoras e Internet en el
entretenim iento.
6
Capítulo I
Introducción a las computadoras e Internet
Nombre
Descripción
iTuncs y la App
Store
íl'uncs es b tienda de medios de Apple, en donde puede comprar y descargar música, películas,
programas de televisión, c-hoolcs, tonos de celular y apps (para iPhonc, ilbd y iPad) sobre la
Internet. El servicio iCbud de Apple le permite almacenar sus compras de medbs “en b nube"
y utilizarlos desde cualquier dispositivo con iOS (el sistema operativo móvil de Apple). En
junio de 2011 Apple anunció, en su Conferencia mundial de desarrolladores (WWDC), que
se habían descargado 15 mil millones de canciones a través de iTuncs. lo cual convirtió a Apple
en d principal vendedor de música, liara julio de 2011 sr habían descargado 15 mil mitones
de aplicaciones de b App Store (www. appl e . com /pr/1 i brary/2011/07/07A pples-A ppStore-Dotwiloads-Top-15-Bi 11 io n . html).
TV por Interna
Los dispositivos de TV por Interna (como Apple TV y GoogleTV) le permiten acceder
a una enorme cantidad de contenido bajo demanda, como juegos, noticias, pdícubs.
programas de tdevisión. etcétera.
Programación
de juegos
Se espera que los ingresos mundiales por juegos de video lleguen a $65 mil
millones en 2011 (uk. reuters.com /article/2011/06/06/us-videogam esfactboxidUKTRE75552I20110606). El desarrollo de los juegos más sofisticados puede costar
hasta $100 millones. C alicfDuty2: Modem Warfareáe Acdvisbn, que salió a b venta en
2009, obtuvo $3 10 milbnes en sólo un día en Norteamérica y el Reino Unido (news. c n e t .
com/8301-13772 3-10396593-52.html?tag=mncol ;txt)¡ Losjuegos sociales m linca, que
permiten a usuarios en todo el mundo competir entre sí a través de Interna, están creciendo
con rapidez. Zynga (creador de juegos en línea populares, como Fitrmville y Mafia Wari) se
Sindó en 2007 y ya tiene más de 265 millones de usuarios al mes. Para dar cabida al aumento
en tráfico. Zynga agregará 1000 servidores cada semana (techcrunch. COm/2010/09/22/
zyngamoves-l-petabyte-of-data-da11y-adds-1000-servers-a-week/).
Figura 1.4 | Ejemplos de computadoras e Internet en el entretenimiento.
1.3
H TM L5, CSS3, JavaScript, Canvas y jQ uery
En este libro aprenderá sobre las versiones más recientes de varias tecnologías clave de desarrollo d e aplicaciones
Web del b d o del cliente. Esta sección le m ostrará una breve descripción general de cada una:
H TM L5
Los capítulos 2 y 3 introducen el H T M L (Lenguaje de marcado de hipertexto): un tipo especial de lenguaje de
com putadora que se conoce com o lenguaje de marcado y está discriado para especificar tanto el contenido com o b
estructura de páginas W eb (también conocidas com o docum entos) d e una manera portable. H T M L 5, que se en­
cuentra en desarrollo, es la versión emergente de H TM L. Este lenguaje nos permite crear contenido que se despliega
de manera apropiada a través de todo el extraordinario rango de dispositivos conectados a Internet: smartphones,
computadoras tipo tablct, com putadoras tipo notebook, com putadoras de escritorio, dispositivos de propósito es­
pecial com o pantallas gigantes en auditorios d e conciertos y estadios deportivos, y m uchos más.
En esta sección conocerá los fundam entos de H T M L 5 y las técnicas más sofisticadas tales com o: creación de
tablas, creación de formularios para recolectar la entrada del usuario y el uso de nuevas características en H T M L 5,
incluyendo los elementos de estructura de página que nos perm iten dar significado a las partes de una página (por
ejemplo: encabezados, áreas de navegación, pies de página, secciones, figuras, captura de figuras, y más).
13
HTML5. CSS3, JavaScript. C anvas y jQ uery
7
Hay una versión “más estricta" de H T M L , conocida com o X H TM L (Lenguaje de marcado de hipertexto
ectemible). E ste lenguaje se basa en X M L (Lenguaje de marcado extensible, que presentam os en el capítulo 15)
y se utiliza con frecuencia. M uchas de las tecnologías del Lado del servidor que veremos más adelante en el libro
producen páginas W eb com o docum entos X H T M L de m anera predeterm inada, aunque la tendencia se inclina
sin duda a H T M L 5.
H ojas de estilo en cascada (C SS)
A unque H T M L 5 ofrece herram ientas para controlar la presentación d e un docum ento, es mejor no mezclar ¡a
presentación con el contenido. H T M L 5 debería usarse sólo para especificar la estructura y el contenido d e un
docum ento.
Los capítulos 4 y 5 usan las hojas d e estilo e n cascad a (CSS) para especificar la presentación o el estilo de
los elem entos en una página W eb (fuentes, espaciado, tam años, colores, posicionam icnto). La tecnología CSS
se diseñó para aplicar estilo a las páginas W eb portables en form a independiente a su contenido y estructura. Al
separar el estilo d e las páginas d e su contenido y estructura, es posible cam biar con facilidad su apariencia visual
en un sitio Web completo, o en una parte de u n sitio W eb, con sólo intercam biar una hoja de estilo por otra.
CSS3 es la versión actual de CSS y se encuentra en desarrollo. En el capítulo 5 introducim os m uchas nuevas
características en CSS3.
JavaScript
JavaScript es u n lenguaje que nos ayuda a crear páginas W eb dinámicas (es decir, páginas q u e pueden m odifi­
carse “al instante” en respuesta a ciertos eventos, com o la entrada del usuario, cam bios en el tiem po, etcétera) y
aplicaciones de com putadora. N os perm ite realizar la program ación del lado del cliente de las aplicaciones Web.
Además, ahora existen varios proyectos dedicados a JavaScript del lado del servidor, incluyendo C om m onjS
(www.commonjs.org), N ode.js (n o d e js .o r g ) y Jaxcr ( ja x e r.o r g ).
JavaScript fue creado por Netscape, la empresa que construyó el prim er navegador W eb de gran populari­
dad. Tanto Netscape com o M icrosoft han sido instrum entos en la estandarización de JavaScript por medio de
ECM A International (form alm ente conocida com o la Asociación de fabricantes europeos de com putadoras)
com o ECM A Script. La versión más reciente del estándar, EC M A Scripr 5, corresponde a la versión de JavaScript
que vamos a usar en este libro.
Los capítulos del libro sobre JavaScript son más que una simple introducción al lenguaje. También presentan los
fündamcnros de la programación de computadoras, incluyendo cstrucniras de control, funciones, arreglos, rceursividad, cadenas y objetos. Aprenderá que JavaScript es un lenguaje portable de secuencias de comandos (scripr) y que los
programas escritos en JavaScript pueden ejecutarse en navegadores W eb a través de una extensa gama de dispositivos.
la s navegadores Web y su p o rta b ilid a d
Asegurar una apariencia visual consistente en los navegadores del lado del d ie n te es u n o de los mayores desafíos
al desarrollar aplicaciones basadas en W eb. En la actualidad no existe un estándar al que deban adherirse los
proveedores de software en cuanto a la creación de navegadores W eb. A unque la m ayoría com parten un con­
junto com ún de características, cada uno podría desplegar las páginas en form a distinta. Los navegadores están
disponibles en m uchas versiones y en m uchas plataform as diferentes (M icrosoft W indow s, Apple M acintosh,
lin u x , U N IX , e tc ) . Ixis proveedores agregan características a cada nueva versión que, algunas veces, producen
problemas de incom patibilidad entre plataformas. Es difícil desarrollar páginas W eb q u e se desplieguen correc­
tam ente en todas las versiones de cada navegador.
Todos los ejemplos de código en el libro se probaron en los cinco navegadores de escritorio más populares y
en los dos navegadores móviles más conocidos (figura 1.5). El soporte de las características de H T M L 5 , CSS3
y JavaScript varía según el navegador. El sido W eb H TM L5 Test (h t t p : / / h t m l 5 te st.c o m ) asigna una p u n tu a­
ción a cada navegador con base en el nivel de soporte para las características más recientes de estos estándares en
Capítulo I
Introducción a las computadoras e Internet
evolución. La figura 1.5 lista los cinco navegadores de escritorio que usam os por orden inverso a sus puntuaciones
en la prueba de H T M L 5, del más al menos com padble al m om ento de escribir este libro. Se espera que Internet
Explorer 10 (IE10) tenga una clasificación de compatibilidad m ucho m ayor que IE9. También puede revisar sitios
com o h ttp ://c a n iu s e .c o m , en d o n d e obtendrá una lista de las características cubiertas por cada navegador.
T ip d e portabilidad l . l
En la Web hay muthof navegadores distintos, incluyendo muchas versiones antiguas con menos capacidades,
por lo que es difícilpara los autoresy desarrolladores de aplicaciones Web crear soluciones universales. El W3C
está trabajando en la búsqueda de una plataforma universal del lado del cliente (h ttp : //m u . w3. org/2006/
webapl/adnin/cbarter) .
Navegador
Participación aproximada en el
mercado al mes de agosto de
2011 (http://gs.statcounter.com)
hitregadores ele escritorio
Participación en el mercado
Googic Chromc 13
17%
330
Mozilla Fia-fox 6
Apple Safari 5.1
27%
7%
298
Opera 11.5
2%
293
286
Internet Expbrcr 9
40%
141
Navegadores móviles
Participación en el mercado
de dispositivos móviles
¡Phone
Android
15% (de navegadores móviles)
18% (de navegadores móviles)
ftjntos obtenidos de los 450
de html5tesLcom
217
184
Figura 1.5 | Puntuaciones de la prueba de HTML5 para los navegadores utilizados para probar los ejemplos.
jQ u e ry
En la actualidad, jQ u ery (jQ u e ry .o rg ) es la más popular de cientos d e bibliotecas de JavaScript} Simplifica la
program ación en JavaScript al facilitar la m anipulación de los elem entos de una página W eb e interactuar con
los servidores de u n a form a portable a través de varios navegadores Web. Provee una biblioteca de controles per­
sonalizados de interfaz gráfica de usuario (G U I) (más allá de b s controles básicos de G U I que ofrece H T M L 5)
que puede usar para m ejorar la apariencia visual de sus páginas Web.
Cómo valid a r sit código de H T M L 5 , CSS3 y JavaScript
C o m o veremos m ás adelante, es com ún que b s program as de JavaScript tengan partes de H T M L 5 y CSS3. Se
debe usar una sintaxis apropiada de H T M L 5 , CSS3 y JavaScript para asegurar q u e b s navegadores procesen sus
docum entos en form a correcta, la figura 1.6 m uestra b s validadores q u e usam os para validar el código en este
libro. Elim inam os b s errores de validación en donde fue posible.
3. •’mm.act 1vo1nc.com/b1og/?008/ll/03/jquery-emerges-as-most-po pul a r-j avascrl p tl 1brary-for-web development/.
1.4
Tecnología
Demostraciones
9
URL del validador
HTML5
h ttp ://v alid ato r.w 3.o rg /
h ttp ://h tm l5.v alid ato r.n u /
CSS3
h ttp : / / jig s a w .w 3 .o r g / c s s v alid ato r/
JavaScript
h t t p ://www. ja v a s c r i p t l i n t . co«/
http://w w w .jslint.com /
Figura 1.6 | Validadores de HTML5. CSS3 y JavaScript.
1.4
Demostraciones
Explore las páginas W eb d e la figura 1.7 para darse una idea de algunas de las cosas que podrá crear m ediante
las tecnologías que aprenderá a usar en este libro, incluyendo H T M L 5 , CSS3, JavaScript, canvas y jQucry.
M uchos de estos sitios ofrecen vínculos al código fuente correspondiente, o tam bién puede ver el código fuente
de la página en su navegador.
URL
h t t p s : / / d e v e lo p e r .n o z i ll a .o r g / e n l»S/demos/
Descripción
El DcmoS tu dio de Morilla contiene numerosas demostraciones de
HTML5, canvas, CSS3 y JavaScript que utilizan audio, video, animación
y otras cosas.
h ttp : //js -fire w o rk s.a p p sp o t.c o m /
Introduzca su nombre o mensaje y esta animación de JavaScript lo escribirá
mediante un efecto de fuegos artificiales sobre el horizonte de Londres.
h ttp : / / 9 e le m e n ts .c o n / io / p r o je c ts /
Usa el demento canvas de HTM L5 y elementos de audio para crear efectos
interesantes, y enlaza twects que incluyan las palabras “HTML5" y “love”
(haga clic en cualquier parte de la pantalla para ver d siguiente tweet).
h tm lS /can v as/
h ttp ://tw w r.z a c h s tro n a u t.C o m /l a b /
tex t-shadow -box / t e x t - s hado*»box.htm l
h ttp : //c lu b lin e .c o n /la b /h tm lS /
sphere/
Demostración animada del efecto de sombreado de texto de CSS3. Use el
ratón para hacer brillar una luz sobre d texto y cambiar en forma dinámica
la dirección y d tamaño de la sombra.
Usa un demento canvas de HTML5 para crear una esfera que gira y cambia
de dirección a medida que movemos d cursor del ratón.
h t t p : / / s p i e lz e u g z .d e /h tn l5/
liq u id -p articles.h tn l
La demo Liquid Particles usa un elemento canvas de HTML5. Mueva d
ratón alrededor de b pantalla y lo seguirán las “panículas" (puntos o letras).
h ttp://iw w n .p au lb ru n t.C O .u k /b ert/
Bert's B reakdow n es u n divertido videojuego creado m ediante un elem ento
canvas d e 1TTML5-
http://tw w H .openrise.com /lab/
Aplicación q u e usa d elem ento canvas y le perm ite dibujar flores en b página,
ajustar sus colores y cam biar las form as d e los pétalos, entre otras cosas.
FlowerPower/
Figura 1.7 | Demostraciones de HTML5. CSS3. JavaScript, canvas y jQuery (parte l de 2).
10
Capítulo I
Introducción a las computadoras e Internet
URL
Descripción
h t t p : / / a 1 te re d q u a l 1a . con/
canvasm ol/
Usa el demento can vas para mostrar una molécula en 3D que puede verse
desde cualquier ángulo deseado (de 0 a 360 grados).
h ttp ://p asjan s-o n l1n e.p l/
El juego de Solitario creado mediante HTML5.
h t t p ://a n d re w -h o y e r. com/
ex p e r l nent s / c l o t h /
Usa el demento canvas para simular el movimiento de una pieza de ropa.
Haga clic y arrastre con d ratón para mover la tda.
h t t p : / / * * * . paúl r haye s . con/
ex p e r l raent s/cu be - 3d/
Esta demostración de CSS3 1c permite usar d ratón para inclinar y girar d
cubo en 3D. Incluye un tutorial.
http:/A*rw.ef fectganes.cora/demos/
Uha cascada animada provee una excelente demostración d d uso dd color
en d elemento canvas de HTML5.
c a n v a s c y c le /
h ttp : // m a c e k .g 1 th u b .c o n /g o o g le _
pacman/
H juego PAC-MAN" de Google (un Doodlc de Google) creado en HTML5.
h t t p : / / * * * . b e n jo ff e .c o m /c o d e /
g a m e s / to r u s /
Un juego en 3D similar a Tetris\ creado con JavaScript y canvas.
http://code.alneros.com /codee x a m p l e s / w a t e r - e f f e c t- c a n v a s /
Usa canvas y JavaScript para crear un efecto de ondas de agua. Coloque d
cursor sobre d canvas para ver el efecto. El sitio incluye un tutorial.
ht t p :/ / j que r yu1. com/ demo s/
Numerosas demostraciones de jQuery, incluyendo animaciones,
transiciones, color, interacciones y demás.
h ttp : / / ! ab.5m ashup.1t/fl1p/
Demuestra un cuadro flexible mediante d uso de jQuery.
http://tutor1alzine.com /20l0/Q 9/
html5-canvas-sl1deshow-jquery/
Presentación creada con el elemento canvas de HTML5 y jQuery (incluye
^ tutorial)
http://css-tr1cks.com /exam ples/
Ci re u la te /
Aprenda a crear un efecto de ciclos de animaciones mediante jQuery.
h ttp ://d e n o . tu to rla lz ln e .
com/2010/02/photo-shoot-cssjquery/deoo htnl
Usa jQuery y CSS para crear un efecto de sesión fotográfica, que le permite
^
‘
, •
c
ct n
• i\
enfocarse en un área de la página y tomar una fotografía (incluye un tutonal).
Figura 1.7 | Demostraciones de HTML5. CSS3. JavaScript, canvas y jQuery (parte 2 de 2).
1.5
Evolución de Internet y de la W orld W ide W eb
Internet (una red global de com putadoras) se hizo posible gracias a la convergencia de ¡as tecnologías de la compu­
tación y ¡as comunicaciones. A finales de la década de 1960. ARPA (la Agencia de proyectos de investigación avan­
zados) extendió los planos para conectar en red los principales sistemas de cóm puto de alrededor de una docena de
universidades c instituciones de investigación patrocinadas por la ARPA. Se iban a conectar con líneas de com uni­
cación que operaban a 56 Kbps (es decir, 56 0 0 0 bits por segundo, en esc entonces una velocidad sorprendente);
esto fue en una época en la que la m ayoría de las personas (de las pocas que tenían los recursos) se conectaban por
líneas telefónicas a las com putadoras, a una velocidad de 110 bits por segundo. Un bit (abreviación de “dígito
binario”) es el elemento de datos más pequeño en una com putadora; puede asumir el valor 0 o 1.
H ubo una gran expectación. Los investigadores en H arvard hablaban sobre com unicarse con b poderosa
com putadora Univae en b Universidad de U tah para m anejar los cálculos intensivos rebeionados con su inves-
1.5
Evolución de Internet y de la World W ide Web
11
ligación de gráficos de com putadora. Surgieron m uchas otras posibilidades intrigantes. La investigación acadé­
m ica estaba a punto d e d ar un gigantesco paso hacia delante. La ARPA procedió a ¡m plem entar la A RPA N ET,
que evcntualm cnre se convirtió en la In te rn e t que conocem os.
Las cosas resultaron distintas d e lo que se había planeado en un principio. En vez de perm itir que los inves­
tigadores com partieran sus com putadoras unos con otros, pro n to se volvió claro q u e el prim er beneficio clave
de A R PA N ET era la capacidad de com unicarse con rapidez y facilidad m ediante correo electrónico. Esto es
cierto incluso en la Internet de b actualidad, ya que facilita las com unicaciones de todo tipo entre los usuarios
a nivel m undial.
C onm utación de paquetes
Uno de los principales objetivos de A RPA N ET fue perm itir que múltiples usuarios enviaran y recibieran in fo r­
mación al m ism o tiem po y a través de las mismas rutas de com unicación (por ejem plo, las líneas telefónicas).
La red operaba m ediante una técnica conocida com o c o n m u ta c ió n d e p a q u e te s , en donde los datos digitales
se enviaban en pequeños grupos Ibm ados paquetes. É stos contenían inform ación d e dirección, control de errores
y secuencia. La inform ación de b dirección perm itía enrular los paquetes hacia sus desdnos. La inform ación
de secuencia ayudaba a volver a cnsam bbr los paquetes, ya que, debido a los com plejos m ecanism os de enrucamiento, podrían llegar desordenados: de su orden original para su presentación al receptor. Los paquetes de
distintos emisores se entrem ezclaban en b s m ism as líneas para usar con eficiencia el ancho de banda disponible.
Esta técnica de conm utación de paquetes redujo d e m anera considerable los costos de transm isión, en com pa­
ración con el cosro de b s líneas de com unicaciones dedicadas.
La red se diseñó para operar sin un control centralizado. Si falb b a una parte de b red, el resto d e b s porcio­
nes funcionales podrían seguir enrutando paquetes de los emisores a los receptores a través de rutas alternativas
que m ejoraron b confiahilidad.
T C P /IP
FJ protocolo (conjunto de reglas) para com unicarse a través de A R PA N ET se conoció com o T C P : P ro to co lo
de c o n tro l de tra n sm isió n . T C P aseguraba que los mensajes se enrutartan en form a correcta del em isor hacia
d receptor; y que llegarían intactos.
A m edida que evolucionó Internet, organizaciones de rodo el m u n d o estaban im plem cntando sus propias
redes ta n to para com unicaciones intra organización (dentro de la organización) com o inter organización (en­
tre organizaciones). Apareció una extensa variedad de hardw are y softw are d e red. U n desafío fue lograr que
estas d istin tas redes se com unicaran. La ARPA lo logró oon el desarrollo d e IP : P ro to c o lo d e I n te rn e t, con
lo q u e verdaderam ente creó una red d e redes, la arquitectura actual de Internet. El c o n ju n to com binado de
protocolos se conoce ahora com únm ente com o T C P /IP . C a d a co m p u tad o ra en In tern et tiene una d irecció n
IP única. EJ estándar IP actual. Protocolo de Internet versión 4 (IPv4), ha estado en uso desde 1984 y pronto
se agotarán las posibles direcciones. El Protocolo de Internet de próxim a generación, IP v 6 , apenas está e m ­
pezando a desplegarse. C uenta con una seguridad m ejorada y un nuevo esquem a de dircccionam iento, con lo
que expande enorm em ente el núm ero de direcciones IP disponibles, para no quedarnos sin direcciones IP en
un futuro próxim o.
C recim iento explosivo
En un principio, el uso de Internet se lim itó a b s universidades y b s instituciones de investigación; después el
ejército em pezó a usarla de m anera intensiva. C o n el tiem po, el gobierno decidió perm itir el acceso a Internet
para fines comerciales. Las com unidades de investigación y m ilitares estaban preocupadas de que los tiem pos de
respuesta se volvieran m uy lentos a m edida que Internet se saturaba de usuarios.
12
Capitulo I
Introducción a las computadoras e Internet
Y de hecho, ocurrió lo opuesto. Las empresas se dieron cuenta de que podían optim izar sus operaciones
adem ás d e ofrecer nuevos y mejores servicios a sus clientes, por lo que em pezaron a invertir enorm es cantidades
de dinero para desarrollar y m ejorar Internet. E sto generó una feroz com petencia entre las operadoras d e com u­
nicaciones y los proveedores d e hardw are y software para satisfacer la dem anda. El resultado es que el a n c h o d e
b a n d a (la capacidad d e transportar inform ación) en Internet está aum entando con rapidez, a m edida q u e los
oostos se reducen en form a dram ática.
W orld W ide Web, H T M L , H T T P
La W o rld W id e W eb perm ite a los usuarios d e co m p u tad o ra ejecutar aplicaciones basadas en W eb, adem ás de
localizar y ver d o cu m en to s basados en m ultim ed ia sobre casi cualquier tem a en Internet. La W eb es una crea­
ción relativam ente reciente. E n 1989, T im B ern ers-L ee de C E R N (la O rganización europea de investigación
nuclear) em pezó a desarrollar una tecnología para co m p artir inform ación a través de docum entos de texto
con hipervíneulos. A esta invención Berners-Lee la llam ó L en g u aje d e m a rc a d o d e h ip e rte x to (H T M L ).
T am bién escribió protocolos de com unicación para form ar la espina dorsal d e su nuevo sistem a d e infor­
m ación, al cual llam ó W orld W ide Web. E n especial escribió el IV otocolo d e tra n sfe re n c ia d e h ip e rte x to
(H T T P ): un protocolo de com unicaciones utilizado para enviar inform ación a través de la Web. El U R L
(L o calizad o r u n ifo rm e d e re c u rso s) especifica la dirección (ubicación) de la página W eb q u e se visualiza en
la v en tan a del navegador. C ad a página W eb en In tern et se asocia con un U R L único. Por lo general los U RL
em piezan con h t t p : / / .
H TTPS
Los U RL de sitios W eb que m anejan inform ación privada, com o núm eros de tarjetas de crédito, a m enudo
em piezan con h t t p s : / / , la abreviación de P ro to c o lo seg u ro d e tran sferen cia d e h ip e rte x to (H T T PS). Este
protocolo es el estándar f>ara transferir datos cifrados en Web. C o m b in a H T T P con los esquemas criptográficos
C apa de conexión segura (SSL) y el más reciente Seguridad de la capa de transporte (TLS) para asegurar las
com unicaciones y la inform ación de identificación a través de la W eb. A unque hay m uchos beneficios en cuanto
al uso de H T T P S , existen unas cuantas desventajas, siendo las más notables algunas cuestiones de rendim iento,
debido a que el cifrado y el descifrado consum en una cantidad considerable de recursos de procesam iento de
la com putadora.
M osaic, Netscape, surgim iento de Web 2 .0
El uso de la W eb explotó con la disponibilidad en 1993 del navegador Mosaic, el cual incluía una interfaz
gráfica am igable para el usuario. M arc Andreesscn, cuyo equipo en el C en tro N acional de Aplicaciones de
Supercom putación (N C SA ) desarrolló Mosaic, fue el fundador d e Netscape, la em presa que m uchas personas
consideran fue la m echa q u e encendió la explosiva econom ía de In tern et a finales de la década d e 1990. Pero la
caída económ ica del “punto com" trajo consigo tiem pos difíciles en la prim era década de este siglo. El resurgi­
m iento q u e empezó alrededor de 2004 se denom ina W eb 2 .0 . Google es considerada por m uchos com o la em ­
presa insignia de W eb 2.0. Algunas orras em presas con características de W eb 2.0 son: YouTubc (com partición
de videos), Facebook (redes sociales). Tw itter (m icroblogs), G ro u p o n (comercio social), Foursquare (registro
móvil). Salesforce (software de negocios que se ofrece en form a de servicios en linca “en la nube"), Craigslist
(en su mayoría, listados clasificados gratuitos), Flickr (com partición de fotos), Slcypc (telefonía, videollamadas
y conferencias por Internet, ahora propiedad de M icrosoft) y W ildpedia (una enciclopedia en línea gratuita).
1.6
Fundamentos de la Web
E n esta sección hablaremos sobre los fundam entos de las interacciones basadas en W eb entre un navegador Web
cliente y un servidor Web. E n su form a más sim ple, una página Web es un docum ento de H T M L (Lenguaje de
1.6
Fundamentos de la Web
13
marcado de hipertexco) (con la extensión .htm l o .htm) que describe a un navegador Web su contenido y su
estructura.
H ipervíneulos
rV>r lo general, los docum entos de H T M L contienen h ip e rv ín e u lo s que, al hacer clic en ellos, cargan un
docum ento W eb especificado. Es posible crear hipervíneulos con imágenes y texto. Al colocar el puntero del
ratón sobre un hipervínculo, el puntero d e flecha predeterm inado se convierte en una m ano con el d ed o índice
apuntando hacia arriba. C o n frecuencia el texto con hipervínculo aparece subrayado y en u n color distinto al
del texto regular en una página W eb.
Los hipervíneulos. que en un principio se usaban com o herram ienta de publicación para la investigación
científica, se utilizan am pliam ente para hacer referencia a fuentes o sitios que tienen más inform ación sobre un
tema específico. Las rutas establecidas m ediante hipervíneulos crean el efecto d e “Web".
C uando el usuario hace clic en un hipervínculo, un se rv id o r W eb localiza la página solicitada y la envía al
navegador W eb del usuario. D e m anera similar, el usuario puede escribir la dirección de una página Web en el
campo de dirección del navegador y presionar Intro para ver la página especificada.
Los hipervíneulos pueden hacer referencia a otras páginas W eb, direcciones de correo electrónico, archivos
y más. Si el URL de u n hipervínculo es d e la form a ma11t o : direcciónCorreo, al hacer clic en el víncixlo se cargará
el program a de correo electrónico predeterm inado y se abrirá una v en tan a d e m en saje dirigida a la dirección
de correo electrónico especificada. Si u n hipcrvínoilo hace referencia a un archivo que el navegador no pueda
mostrar, éste se prepara para d escarg ar el archivo y por lo general pide inform ación al usuario sobre la ubica­
ción e n donde se va a guardar el archivo. Al descargar un archivo, se copia en la com putadora del usuario. Los
programas, d o aim cn to s, imágenes, archivos de sonido y de video son todos ejem plos de archivos dcscargablcs.
URJyURL
Los URI (Identificadores uniformes de recursos) identifican recursos en Internet. Los URI que em piezan con
h t t p : / / se llam an URL (Locabzadores uniformes de recursos). C o m ú n m en te los U RL hacen referencia a archivos,
directorios o código del lado del servidor que realiza tareas tales com o búsquedas en bases de datos, búsquedas
en Internet y procesam iento de aplicaciones de negocios. Si conoce el U RL de un recurso disponible en forma
pública en cualquier parte de la W eb, puede introducir ese U RL en el cam po de dirección de u n navegador W eb
y éste podrá acceder a ese recurso.
Partes de un URL
Un URL contiene información que dirige a un navegador hacia el recurso que el usuario desea utilizar. Los servi­
dores Web ponen dichos recursos a disposición de los dientes Web. Los servidores W eb populares son: el servidor
H T T P Apache y Microsoft Internet Inform ation Services (IIS).
Ahora examinemos los com ponentes del URL
h ttp ://w w w .d e lte l. co*/b o o k s/d o w n lo ad s. h t» l
El texto h t t p : / / indica que debem os usar el Protocolo de transferencia de hipertexto (H T T P ) para o b ten er
el recurso. A continuación en el U RL tenem os el n o m b re d e h o st com pleto del servidor (por ejem plo, wvw.
d e i t e l . com): el nom bre de la com putadora servidor W eb en d o n d e reside el recurso. Esta com putadora se
define oomo h o s t ya que aloja y m antiene los recursos. El nom bre de host
d e i t e l .com se traduce en una
d irección IP (P ro to co lo d e In tern e t): un valor num érico que identifica en form a única al servidor en Internet.
Un serv id o r del S istem a de n o m b re s d e d o m in io (D N S) de Internet m antiene u n a base de datos de nom bres
de hosts y sus correspondientes direcciones IP, y realiza las traducciones de m anera autom ática.
14
Capítulo I
Introducción a las computadoras e Internet
El resto del U RL (/b o o k s/d o w n lo ad s.h tm l) especifica la ubicación del recurso (/books) y el nom bre
(dow nloads.htm l) en el servidor Web. La ubicación podría representar un directorio en el sistem a d e archivos
del servidor W eb. Sin em bargo y por cuestiones de seguridad, la ubicación es casi siem pre un directorio virtu a l El
servidor W eb traduce el directorio virtual en una ubicación real en el servidor, con lo cual se oculta la verdadera
ubicación del recurso.
R ealizar una so licitu d y recibir una respuesta
C uando un navegador W eb recibe el U RL de una página W eb, usa H T T P para solicitar la página Web que se
encuentra en esa dirección. La figura 1.8 muestra cóm o un navegador W eb envía una solicinid a un servidor Web.
»)
U s o lo t u d s t
envía dd diente
VVfcb al servidor VArb
Servtdor Web
b ) Después de
veotxrla
s * a tu d .d
serMdor Web
U n ta d leojrso
en su sistema
O enteW eb
►
Internet
Figura 1.8 | Un cliente solicitando un recurso de un servidor Web.
En la figura 1.8, el navegador Web envía una solicitud H T T P al servidor La solicitud (en su form a más simple) es
CET /b o o k s/d o w n lo ad s.h tm l HTTP/1.1
La palabra G E T es un m é to d o de H T T P que indica q u e el cliente desea o b ten er u n recurso del servidor. El
resto de la solicitud proporciona el nom bre de b ru ta del recurso (por ejem plo, un docum ento de H T M L 5 )
adem ás del nom bre del protocolo y el núm ero de versión (HTTP/l. l). La solicinid del cliente tam bién contiene
ciertos encabezados requeridos y opcionales.
C ualquier servidor que entienda H T T P (versión 1.1) podrá traducir b solicitud y responder en form a
apropiada. La figura 1.9 m uestra al servidor Web respondiendo a una solicitud.
SeivwfcH Web
0 senador
responde a la
o líd tu d con d
contenido dd
recurso
Cliente W rb
Internet
Figura 1.9 | Un cliente que recibe una respuesta del servidor Web
1.6
Fundamentos de la Web
15
El servidor envía prim ero una línea de texto que indica la versión de H T I'P , seguida de un código num érico
y una frase para describir el estado de b transacción. Por ejemplo,
HTTP/l.1 200 0K
indica que b transacción fue exitosa, m ientras que
HTTP/l.1 404 Not found
inform a al cliente que el servidor Web no pudo localizar el recurso solicitado. En b página www.w3. o rg /P r o to C o ls /r f c 2 6 l 6 /r f c 2 6 l6 - se c l0 .h tm l encontrará una lista com pleta de códigos num éricos que indican el estada
de una transacción de H T T P.
Encabezados H TTP
A continuación, el servidor envía uno o más en cab ezad o s H T T P , que proporcionan inform ación adicional
sobre los datos que se enviarán. En este caso, el servidor va a enviar un docum ento de texto d e H T M L 5 , por lo
que u n encabezado H T T P para este ejemplo sería:
C o n te n t-ty p e : te x t/h tm l
La información proporcionada en este encabezado especifica el tipo de Extensiones m ultipropósito d e correo In ­
ternet (M IM E ) del contenido que el servidor va a transmitir al navegador. El estándar M IM E especifica formatos de
datos que los programas pueden usar para interpretar los datos en forma correcta. Por ejemplo, el tipo M IM E t e x t /
p la in indica que el contenido se muestra de manera directa. D e manera similar, el tipo M IM E 1mage/jpeg indica
que el contenido es una imagen JPEG. C uando el navegador recibe este tipo MI ME, trata de mostrar b imagen.
El encabezado o conjunto de encabezados va seguido de una línea en blanco, que indica al navegador cliente
que el servidor terminó de enviar encabezados H TTP. I\>r último, el servidor envía el contenido del docum ento
solicitado (dow nloads.htm l). D ejpués el navegador del b d o del diente despliega (o visualiza) el docum ento, para lo
cual tal vez se necesiten solicitudes H T T P adicionales para obtener b hoja CSS y las imágenes asociadas.
Solicitudes ge t y pos t de H T T P
Los dos tipos más com unes d e so licitu d e s H T T P (tam bién conocidas com o m é to d o s d e so licitu d ) son g e t y
p o st. Por lo general, una solicitud g e t obtiene (o recupera) inform ación d e un servidor, com o un docum ento
H T M L , una imagen o resultados d e búsqueda con base en un térm ino de búsqueda enviado por el usuario. Por
lo general, una solicitud p o s t publica (o envía) datos cn /a un servidor. Por lo general, el uso de una solicitud
post es para enviar formas de datos o docum entos a un servidor.
Una solicitud H T T P solicita un post data a un m anejador de form ularios del lado del servidor que procesa b s
datos. IV>r ejem pb, cuando un usuarb realiza una búsqueda o participa en una encuesta basada en Web, el servidor
Wrb recibe b información especificada en d fn rm u b rb H T M L como parte de La solicitud. Las solicitudes g e t y post
pueden usarse para enviar datos a un servidor Web, peto cada tipo de solicitud envb b información de manera distinta.
Una solicitud g e t adjunta datos al URL; por ejem plo, m m w .g o o g le.co m /search ?q = d eitel. En este caso,
se a rc h es el nom bre del m anejador de form ularios del lado del servidor de Google, q es d nom bre de una va­
riable en el form ulario de búsqueda de Google y d e i t e l es el térm ino a buscar. El carácter ? en el URL anterior
separa la cadena d e c o n su lta del resto del U RL en una solicitud. Se pasa un par nombre/valor al servidor, con
el nombre y el valor separados por un signo de igual (=). Si se envía más de u n p»ar nombre/valor, cada par va
separado por un signo A . El servidor usa b s datos que se pasan en una cadena de consulta para recuperar un re­
curso apropiado del servidor. D espués el servidor envía una respuesta al cliente. Es posible iniciar una solicitud
16
Capítulo I
Introducción a las computadoras e Internet
g e t m ediante el envío d e un form ulario de H T M L con el atrib u to method establecido en " g e t H, o escribir el
URL (que tal vez contenga una cadena de consulta) directam ente en b barra de dirección del navegador. En los
capítulos 2 y 3 veremos los íb rm u b rio s de H T M L .
U na solicitud p o s t envía los datos del form ulario com o parte del mensaje de H T T P y no com o parte del
URL. Por lo general una solicitud g e t lim ita b cadena de consulta (es decir, to d o lo que está a la derecha del ca­
rácter ?) a un núm ero específico de caracteres, por lo q u e con frecuencia es necesario enviar grandes cantidades
de inform ación m ediante el m étodo p o st. Este m étodo tam bién se prefiere algunas veces debido a que oculta
los datos enviados del usuario, al incrustarlos en un mensaje de H T T P. Si un form ulario envía varios valores de
entrada ocultos ju n to con datos enviados por el usuario, el m étodo p o s t podría generar un URL com o www.
m otorbusqueda. com /buscar. Los datos del form ubrio llegarían de todas form as ai servidor y se procesarían de
una manera similar a una solicitud g e t, pero el usuario no vería exactam ente b inform ación que se envía.
Observación de ingeniería de softw are l.l
Los datos enviados en una solicitud post noforman parte del URI., por lo que el usuario no puede verlos de
manera predeterminada Sin embargo, hay herramientas disponibles que exponen estos datos, por ¡o que no
debe suponer que estdn seguros sólo porque estd usando una solicitud post.
Caché d e l lado d el cliente
Es com ún que los navegadores coloquen en b caché (guarden en disco) las páginas Web vistas recientem ente
para volver a cargarlas con rapidez. Si n o hay cam bios entre b versión alm acenada en b caché y b versión ac­
tual en b W eb, esto agilizará b experiencia de navegación del usuario. U na respuesta de H T L P puede indicar
la longitud d e tiem po que el contenido perm anece “actualizado". Si no ha pasado esta cantidad de tiem po, el
navegador no necesita enviar una solicitud al servidor y carga el docum ento de la caché. De m anera sim ibr,
tam bién existe b respuesta H T T P “sin modificación" para indicar que el contenido del archivo no ha cam biado
desde la últim a vez que se solicitó (esta inform ación se envía en b solicitud). Por lo general, los navegadores no
cofocan en b caché b respuesta del servidor a una solicitud p o s t, ya que b siguiente solicitud p o s t tal vez
no devuelva el m ism o resultado. Por ejem plo, en una encuesta m uchos usuarios podrían visitar la m ism a página
W eb y responder a una pregunta. Después, los resultados de la encuesta podrían m ostrarse al usuario. C ada
nueva respuesta modificaría los resultados de b encuesta.
1.7
Arquitectura de aplicaciones multinivel
C o n frecuencia las aplicaciones basadas en W eb son aplicaciones m u ltin iv e l (tam bién conocidas com o a p li­
caciones d e n niveles), b s cuales dividen b funcionalidad en niveles (es decir, agolpam ientos lógicos de fun­
cionalidad). A unque los niveles pueden estar en la m ism a com putadora, lo co m ú n es que los niveles de bs
aplicaciones basadas en W eb residan en com putadoras separadas. La figura 1.10 presenta b estructura básica de
una aplicación b asad a en W eb d e tres niveles.
El nivel inferior (tam bién conocido com o nivel de datos o de inform ación) m antiene los datos de la aplica­
ción. Este nivel por lo general alm acena los datos en un sistem a de adm inistración de bases de datos relaciona!
(RD BM S). En el capítulo 18 veremos los sistemas R D B M S. Por ejem plo, Amazon podría tener una base de
datos de inform ación d e inventario q u e contenga b s descripciones d e los productos, sus precios y cantidades
en existencia. O tra base de datos podría contener b inform ación d e los clientes, com o nom bres de usuario,
direcciones de facturación y núm eros de tarjetas de crédito. Estas bases de datos pueden residir en una o más
com putadoras, que en conjunto constituyen los datos de b aplicación.
El nivel in te rm e d io ¡m plcm cnta b lógica de negocios, b lógica de c o n tro b d o r y b lógica de presentación
para c o n tro b r b s interacciones entre los clientes de b aplicación y sus datos. El nivel interm edio actúa com o
un interm ediario entre los datos en el nivel de inform ación y los clientes d e la aplicación. La lógica d e c o n tro ­
la d o r del nivel interm edio procesa b s solicitudes d e los clientes (com o b s solicitudes para ver un catálogo de
1.8
Comparación entre las secuencias de comandos del lado del cliente y del lado del servidor
Nvel superior
Nivel intermedio
f*vel inferior
también c o n o c í* como
nivel de interfaz de usuano o
también conocido como
rtvel de lógica de negocios
también conocido como
nivel de datos o
nivel cliente
Navegador
17
nivel de información
«g>na V * b
Servidor Web
Base de datos
Figura 1. 10 | Arquitectura de tres niveles.
productos) y recupera los datos de la base d e datos. Después, la lógica d e p re se n ta c ió n del nivel interm edio
procesa los datos del nivel d e inform ación y presenta el co n ten id o al d ie n te . Por lo general, las aplicaciones
Web presentan los daros a los d ien tes com o docum cnros H T M L .
La lógica d e neg o cio s en el nivel interm edio im plem enta las reglas d e n eg o cio s y se asegura de q u e los
datos sean confiables antes de que la aplicación actualice una base de datos o presente los ciatos a los usuarios.
Las reglas de negocios dieran la form a en que los d ien tes acceden a los datos y cóm o es que las aplicaciones
procesan los datos. Por ejem plo, una regla de negocios en el nivel interm edio d e la aplicación basada en Web
de una tienda m inorista podría asegurar que todas las cantidades de b s productos sean siem pre positivas. Una
solicirud de un d ie n te para ver una cantidad negativa en b base de daros d e inform ación d e productos d d nivel
inferior sería rechazada por b lógica de negocios del nivel interm edio.
El nivel su p e rio r, o nivel cliente, es b interfaz de usuario de b aplicación; recopila b entrada y m uestra b
salida. Los usuarios interactúan de m anera directa con la aplicación a través de b interfaz de usuario, que por
lo general es un navegador W eb o un dispositivo móvil. En respuesta a b s acciones del usuario (com o hacer d ic
en un hipervínculo), el nivel d ien te interactúa con el nivel interm edio para realizar solicitudes y recuperar datos
del nivel de inform ación. Después el nivel d ie n te m uestra al usuario los datos recuperados.
1.8
Comparación entre las secuencias de comandos del lado
del cliente y del lado del servidor
Con JavaScript es posible usar secuencias de com andos del lado del d ie n te para validar b entrada del usuario,
interactuar con el navegador, m ejorar las páginas W eb y agregar com unicación diente/servidor entre un nave­
gador y un servidor Web.
Las secuencias de com andos del lado del cliente tienen sus limitaciones, com o b dependencia de navegadores:
d navegador o host d e secuencias d e com andos (acripting host) debe soportar el lenguaje de secuencias de co­
mandos y sus capacidades. Las secuencias de com andos están restringidas en cuanto al acceso arbitrario del hardware
y del sistema de archivos local por cuestiones de seguridad. O tra de b s cuestiones es que el cliente puede ver bs
secuencias de com andos del b d o del dicn te si usa Lacapacidad de ver el código fuente del navegador. lat información
confidencial, com o b s contraseñas y otros datos identificados com o personales, no deben estar en el cliente. Toda
b validación de datos del b d o del cliente debe reflejarse en el servidor. Además, el colocar en el cliente ciertas ope­
raciones en JavaScript, puede propiciar que b s aplicaciones Web queden abiertas a ciertos problemas de seguridad.
18
Capitulo I
Introducción a las computadoras e Internet
Los program adores tienen más flexibilidad con las secuencias de com andos d e l la d o d e l se rv id o r, que a
m enudo generan respuestas personalizadas para los clientes. Por ejem plo, un cliente podría conectarse al servi­
d o r W eb de una aerolínea y solicitar una lista de vuelos de B oston a San Francisco entre el 19 de abril y el 5 de
mayo. El servidor consulta la base de datos, genera en form a dinám ica un docum ento d e H T M L que contiene
b lista de los vuelos y envía ese docum ento al cliente. Esta tecnología perm ite a los clientes obtener, de la base
de datos, b inform ación m is actualizada sobre los vuelos, al conectarse al servidor Web de una aerolínea.
Los lenguajes de secuencias de com andos del lado del servidor tienen un rango más am plio de capacidades
program ables que sus contrapartes del lado del cliente. Las secuencias de com andos del lado del servidor tam ­
bién tienen acceso al software del b d o del servidor que extiende la funcionalidad de éste; los servidores W eb de
M icrosoft usan extensiones ISAPI (In te rfa z de p ro g ra m a c ió n d e ap licacio n es d e serv id o r d e In te rn e t) y los
servidores H T T P Apache usan m ó d u lo s. Los com ponentes y los módulos varían desde el soporte de lenguajes
de program ación hasta el corneo del núm ero de ocurrencias d e páginas Web. En los siguientes capítulos habla­
remos sobre algunos de estos com ponentes y módulos.
1.9
Consorcio World W ide Web (W 3 C )
En octubre de 1994,T im Bcrneis-I.ee fundó una organización: el C onsorcio W orld W id e W eb (W 3 Q , dedicado
a desarrollar tecnología no propietaria e interoperable para W orld W ide Web. U no de los principales objetivos del
W 3 C es hacer que b Web sea accesibles nivel universal, sin im portar la discapacidad, el lenguaje o b cultura. La
página de inicio del W 3C (wiwi.w3.org) ofrece m uchos recursos sobre Inrernct y las tecnologías Web.
El W 3 C tam bién es u n a organización de estándares. Las tecnologías W eb estandarizadas por el W 3C se
conocen com o R ecom endaciones. Las más actuales y próxim as del W 3 C incluyen el Lenguaje de m arcado de
hipertexto 5 (H T M L 5 ), las H ojas de estilo en cascada 3 (C SS3) y el Lenguaje de marcado cxtensible (XML).
U na recom endación no es u n producto de software real, sino un docum ento que especifica el papel q u e desem ­
peña una tecnología, las reglas de sintaxis y otras cosas más.
1.10
Web 2.0: a socializar
E n 2003 hubo un cam bio considerable en cuanto a b form a en que b s personas y b s empresas usaban la Web y
dcsarrolbban aplicaciones basadas en Web. D ale D o u g h c rty de CyRcilly M ed ia1 inventó el térm ino W íb 2 .0
en 2003 para describir esta tendencia. Por lo general, b s com pañías W eb 2 .0 usan b W eb com o una p b tafo rm a
para crear sirios cobborativos basados en com unidades (com o sitios de redes sociales, blogs y wikis).
Comparación entre Web 1.0 y Web 2.0
La W íb 1.0 (el estado de b Web durante b década de 1990 y a principios de b década de 2000) se enfocaba en un
número rebúvam ente pequeño de empresas y anunciantes que producían contenido accesible a los usuarios (algunas
personas le Ibm an b “Web de los folletos”). La Web 2.0 involucra a los usuarias; no sólo crean contenido con frecuen­
cia, sino que ayudan a oigan izarlo, compartirlo, volver a mezcbrlo, criticarlo, actualizarlo, etcétera. Una forma de ver
la Web 1.0 es com o una conferencia, un pequeño núm ero de profesores que informan a una gran audiencia de estu­
diantes. En comparación, b Web 2.0 es una conversación, en donde todos tienen b oportunidad de hablar y compartir
opiniones, la s empresas que entienden b Web 2.0 saben que sus productos y servicios son conversaciones también.
Arquitectura de participación
La W eb 2 .0 ofrece nuevas oportunidades adem ás de conectar a b s personas y el contenido en formas únicas.
Abarca una a rq u ite c tu ra de p a rtic ip a c ió n : un diseño que fom enta la interacción del usuario y bs contribucio4. T O'Reilly, “W hat is Web 2.0: Design Pattcrns and Business M odels fbr ihe Next G cncration o f Software". Septiembre de
2005 <h ttp ://« w w » .o r e n iy n e t.c o ti/p u b /a /o r e n iy /t< n /n e w s /2 0 0 5 / 0 9 /30/what- is-web-P0.html?page-l>.
1.10
Web 2 .0 : a socializar
19
nes com unitarias. Usted es el aspecto más im portante de la W eb 2.0; de hecho, es tan im portante que en 2006
la “Persona del año” d e la revista TIM E fue “usted”.5 El artículo reconoció el fenóm eno social de la W eb 2.0: el
cam bio de unos cuantos poderosos a muchos empoderados. Ahora varios blogs populares com piten con los podcidsos m edios tradicionales y m uchas empresas Web 2 .0 están basadas casi por com pleto en contenido generado
por el usuario. Para sitios W eb com o Facebook V lw itte r ''', YouTube, eBay* y W ikipedia*, los usuarios crean el
contenido, m ientras que las empresas proporcionan las plataform as en las cuales se va a introducir, m anipular
y com partir la inform ación. Estas empresas confian en sus usuarios; sin dicha confianza, los usuarios no pueden
realizar contribuciones im portantes en los sitios.
La arquitectura de participación tam bién ha influido en el desarrollo de software. El software de código
fuente abierto está disponible para que todos lo usen y m odifiquen con pocas restricciones o incluso ninguna
(hablarem os más sobre el código fuente abierto en la sección 1.12). M ediante el uso de la in telig en cia colec­
tiva (el concepto por el que un extenso grupo diverso de personas crearán ideas inteligentes), las com unidades
colaboran para desarrollar software q u e m uchas personas consideran m ejor y más robusto q u e el software
propietario. Se están desarrollando Aplicaciones enriquecidas de Internet (RIA) m ediante el uso de tecnologías
(como Ajax, que veremos en capítulos posteriores del libro) que tienen la apariencia visual del software de escrin rio , con lo cual m ejoran la experiencia en general del usuario.
Motores de búsqueda y medios sociales
Los m otores de búsqueda com o Google™, M icrosoft Bing™ y m uchos más, se han vuelto esenciales para escu­
driñar la masiva cantidad de contenido en Web. Los sitios de marcadores sociales com o del.icio.us perm iten a
los usuarios com partir sus sitios favoritos con otros. Los sitios de m edios sociales com o D igg ” perm iten a la
com unidad decidir qué artículos de noticias son los más im portantes. La form a en que buscam os la inform ación
en estos sitios tam bién está cam biando; las personas están e tiq u e ta n d o el contenido W eb por asunto o palabra
clave, de una form a que pueda ayudar a cualquiera a localizar la inform ación con más efectividad.
Web semántica
En el futuro, las com putadoras aprenderán a com prender el significado d e los datos en b Web: ya están apa­
reciendo los inicios d e b W rb sem án tica. Las mejoras continuas en el hardware, software y bs tecnologías de
com unicaciones perm itirán nuevas y em ocionantes tipos de aplicaciones.
En nuestro libro electrónico D ive Into* W eb 2.0 (disponible en h t t p : //www. d e i t e l . com /diveintow eb20/)
cubrim os estos tem as y o tro s más. El libro electrónico resalta b s principales características y tecnologías de b
W eb 2.0 m ediante ejemplos de empresas W eb 2.0 y negocios de Internet W eb 2 .0 popubres, adem ás de
los modelos de m onetización. H ablam os sobre contenido generado por el usuario, blogs, redes de contenido,
redes sociales, servicios basados en b ubicación y otras cosas más. E n los capítulos siguientes conocerá b s tec­
nologías cbve de software para crear aplicaciones basadas en W eb.
Google
En 1996, los candidatos al doctorado de ciencias com putacionales de Stanford, Larry Page y Sergey Brin em pe­
zaron a colaborar en un nuevo m o to r de búsqueda. En 1997. eligieron el nom bre Google: una brom a relacio­
nada con el térm ino m atem ático gúgol, una canridad representada por el núm ero “uno” seguido d e 100 “ceros"
(o 101(MI), un núm ero asom brosam ente extenso, l a habilidad de G oogle de devolver resultados de búsqueda con
extrema precisión le ayudó a convertirse con rapidez en el m o to r de búsqueda más utilizado y en uno de los
s tio s Web más popubres en todo el m undo.
5. L Grossman, “T IM E s Pcrson o f ihc Ycar: You."
a r t l c l e / 0 , 9 1 7 1 .1 5 6 9 5 1 4 . 0 0 .
TIME, Diciembre de 2006 <http://www. t i ñ e .c o n /tin e /m a g a z l ne/
20
Capitulo I
Introducción a las computadoras e Internet
Google co n tin ú a siendo innovador en las tecnologías de búsqueda. Por ejem plo, Google Goggles es una
fascinante aplicación móvil (disponible en A ndtoid y ¡Phone) que nos perm ite realizar una búsqueda en Google
m ediante el uso de una fotografía en vez de introducir texto. Sólo hay que to m a r una fotografía d e un punto
de referencia, libro (portadas o códigos de barras), logotipo, arte o etiqueta de botella de vino; después Google
Goggles escanea la foto y devuelve los resultados de búsqueda. Tam bién puede tom ar una foto de cierto texto
(por ejem plo, el menú de un restaurante o un anuncio) y Google Goggles lo traduce por usted.
Servicios Weby Mashups
E n este libro incluim os un análisis considerable de los servicios Web (capítulos 22, 25 y 28); adem ás presen­
tam os la m etodología de desarrollo de aplicaciones de los mashups, en los que podem os desarrollar poderosas
c intrigantes aplicaciones con rapidez, al com binar servicios W eb com plem entarios (algunas veces gram itos)
y otras formas de fuentes de inform ación (figura 1.11). U no de los prim eros m ashups fue www. housingm aps.
com, que com bina los listados d e bienes raíces proporcionados por tw vw .craig sli s t . o r g con las capacidades de
Google Maps para ofrecer mapas que m uestran las ubicaciones de apartam entos en renta en un área específica.
Fuente de servicios Web
Cómo se utiliza
Google Maps
Servicios de mapas
Facebook
Redes sociales
Fuursquare
Regisuo (chcck-in) móvil
Linkcdln
Redes sociales para negocios
YouTube
Búsqueda de video
Twitter
M ¡croblogs
Groupon
Comercio social
Netflix
Renta de películas
eBay
Subastas en Internet
Wikipedu
Enciclopedia colaborariva
Payftil
Págos
Last.fm
Radio por Internet
Amazon cCommcrce
Comprar libros y otros artículos
Salcsforce.com
Administración de relaciones con los clientes (CRM)
Skypc
Telefonía por Internet
Microsoft Bing
Búsqueda
Fliclcr
Compartición de fotos
Zillow
Precios de bienes raíces
Yahoo Seare h
Búsqueda
WeathcrBug
G im a
Figura 1. 11 | Algunos servicios Web populares que puede usar para crear aplicaciones Web
(www.p ro g ram m ab lew eb .co m /ap is/d 1 recto ry /1 7 so rtsm ash u p s).
1.10
Web 2 .0 : a socializar
21
Los servicios Web, las com putadoras a precios accesibles, el acceso abundante a Internet de alta velocidad,
el softw are d e código fuente abierto y m uchos o tro s elem entos han inspirado nuevos y em ocionantes modelos
de negocios ligeros, q u e las personas pueden iniciar con sólo una pequeña inversión. Algunos tipos de sitios Web
con funcionalidad extensa y robusta que podrían haber requerido cientos de miles, o incluso millones de dólares
para crearse en la década de 1990, ahora pueden crearse por sumas nominales.
A jax
Ajax es una de las principales tecnologías de software d e la W eb 2 .0 (figura 1.12). Ajax ayuda a que las aplica­
ciones basadas en Internet se desem peñen com o aplicaciones de escritorio; una tarea difícil, dado que dichas
aplicaciones sufren de retrasos de transm isión a m edida que los datos van y vienen entre su com putadora y los
servidores en Internet.
Capitule
Cobertura de Ajax
Capítulo 1
Este capítulo introduce Ajax.
Capítulos 2 al 14
Estos capítulos cubren varias tecnologías clave que se utilizan en aplicaciones Web
con Ajax, incluyendo HTML5, CSS3, JavaScript, manejo de eventos con JavaScript,
d M oddo de objetos de documento (DOM ) y la manipulación dinámica de un
documento de HTML5: lo que se conoce como HTM L dinámico.
Capítulo 15
Las aplicaciones Web hacen uso extenso de X.ML para representar datos estructurados.
Este capítulo introduce XML, las tecnologías relacionadas con este lenguaje y
herramientas clave de JavaScript para cargar y manipular documentos de XML
mediante programación.
Capítulo 16
Este capítulo utiliza las tecnologías presentadas en los capítulos 2 al 15 para crear
aplicaciones Web habilitadas para Ajax. Usamos tanto XML como JSON (Notación de
objetos de JavaScript) para enviar/recibir datos entre d cliente y d servidor. El capítulo
empieza con b creación de aplicaciones Ajax básicas mediante JavaScript y el objeto
XMLHttpRequest dd navegador. Después creamos una aplicación Ajax mediante las
bibliotecas jQucry de JavaScript.
Capítulos 21, 24
y 27
Estos capítulos utilizan Ajax en ASP.NET de Microsoft con C# y en ASP.NET
con Visual Basic, y en JavaScrvcr Faces (JSF) respectivamente, para ¡mplcmentar
aplicaciones Ajax que uriliccn esta tecnología para la validación de formularios y
actualizaciones parciales de páginas.
Figura 1.12 | Cobertura de Ajax en Cómo programar en Internet y W orld W ide W eb. quinta edición.
Aplicaciones sociales
D urante los últim os años el núm ero de aplicaciones sociales en la W eb ha crecido de m anera notable. Aun
cuando la industria de la com putación ha m adurado, estos sitios pudieron de todas form as obtener un éxito
fenom enal en un periodo relativam ente corto. La figura 1.13 describe unas cuantas de las aplicaciones sociales
que han im pactado.
22
Capitulo I
Introducción a las computadoras e Internet
Compañía
Descripción
faccbook
lacrbook inició en el año 2004 y ya tiene un valor estimado de S i 00 mil millones. Para
m ero d e 2011, Facebook era d skio más activo en Internet con más de 750 millones d e usu­
arias que invertían 700 mil mJIoncs de m inutos en Facebook cada mes (w w . f a c e b o o k .
C o a i / p r e s s / 1 n f o .p h p ? s t a t 1 s t i c s ) . Según su tasa d e crecimiento actual (cerca del 5%
mensual), en septiembre d e 2012 Facebook llegó a m í millones d e usuarios ¡de los dos mil
millones d e usuarios de Internet! La actividad en este sitio lo hace m uy atractivo para los de­
sarrollad ores de aplicaciones. C ada día, los usuarios de Facebook instalan más de 20 millones
de aplicaciones ( h t t p : / / vmh . f a c e b o o k . c o « / p r e s s / i n f o . p h p ? s t a t i s t i es).
Iw ittc r
I w ittc r (fu n d ad o en 2006) revolucionó los mkroblop- Los usuarios publican “twccts"
— m ensajes de hasta 140 caracteres de lo n g itu d — . Se publican cerca de 140 m illones
d e tw cets a diario. U sted puede seguir los twccts d e am igos, artistas, negocios, represen­
tantes del gobierno (incluyendo a Banack O b a m a , q u ien tiene 10 m illones de seguido­
res), etcétera, o p u ed e seguir tw ccts co n base en d tem a para d ar seguim iento a noticias,
tendencias y m u ch o m ás. Al m o m e n to d e escribir este libro, L ady G aga tenía d m ayor
núm ero d e seguidores (m is d e 13 m illones). 'Iw ittc r se co n v irtió en d p u n to d e origen
para m uchas noticias d e últim a hora en todo d m u n d o .
G ro u p o n
G ro u p o n , un sitio de comercio socuiL fue fundado en 2008. Para agosto de 2011 la com ­
pañía estaba valuada en alrededor de los $25 mil m illones ;oon lo cual se convirtió en la
com pañía con m is rápido crcdm ienro hasta esa fecha! G ro u p o n m uestra ofertas diarias
en cada m ercado para restaurantes, vendedores al detalle, servicios, atracciones y demás.
Las ofertas se activan sólo hasta que se inscribe el m ínim o núm ero de pereonas requeri­
das para com prar d producto o servicio. Si usted se inscribe en una oferta y todavía no
cum ple con d m ín im o , tal ver. se vea tentado a dar aviso a otras personas sobre esa oferta
p o r correo electrónico, Facebook. Iw ittcr, etcétera. Si la oferta no cum ple con d m ínim o
d e ventas, se cancda. U na d e las ofertas de G ro u p o n más exitosas a n iv d nacional a la fe­
cha fiic u n certificado d e $50 dólares en mercancía d e una im portante com pañía de ropa
a só lo $25. Se vendieron m ás d e 6 2 0 0 0 0 cupones e n un solo día ( h u f f i n g t o n p o s t .
c o m / 2 0 1 1 / 0 6 / 3 0 t h e - m o s t - s u c c e s f u l - g r o u p - n - 8 8 7 7 1 1 .h tm l) .
Foursquare
Ibursquarr. creada en 2009. es u n a aplicación para realizar repones {check-ins) móviles, la
cual le perm ite notificar a sus am igos los lugares que visita. Puede descargar la aplicación en
su tdéfbno intdigentc y vincularla con sus cuentas d e 1-acebook y Twirtcr, d e m odo q u e sus
amigos puedan seguirlo desde varias plataformas. Si no tiene un td éfb n o intdigentc, puede
reportarse m ediante un mensaje d e rexto. Foursquarc utiliza d servicio G PS para determ i­
n ar su ubicación exacta. Las empresas usan Foursquarc para enviar ofertas a los usuarios
q u e se encuentren cerca- Foursquarc inició sus operaciones en marzo d e 2009 y ya cuenta
ro n más de 10 millones de usuarios en to d o d m u n d o (fbursquare.com /about).
Skypc
Skypc (fu n d ad o en 2 0 0 3 ) le p erm ite realizar llam adas d e voz y d e video (la m ayoría son
gratuitas) a través de In tern et, m ed ian te el uso d e una tecnología llam ada VoIP(Voz
sobre IP, IP se refiere a “ P rotocolo de Internet"). La co m p añ ía se vendió recientem ente
a M icrosoft p o r $8.5 mil millones.
Figura 1.13 | Aplicaciones sociales (parte I de 2).
I.ll
jerarquía de datos
Compañía
Descripción
YouTubc
YouTubc es un sitio para compartir videos que se fundó en 2005. Antes de que trans­
curriera un año, Googlccompró la compañía por S i.65 mil millones. En la actuali­
dad, YouTubc es responsable dd 8.2% dd tráfico total en Internet (w ww.engadget.
c o m /2 0 ll/0 5 /l7 /s tu d y -f1 n d s -n e tflix -1 s -th e -la rg e s t-s o u rc e -o f-in te rn e t - t r a f f i c - i n / j . Una semana después de la liberación del iPhone3G Sde Apple
—d primer modelo dd iPhone en ofrecer video— las transferencias desde dispositivos
móviles a YouTubc aumentaron un 400% (vnwv. h y p eb o t.c o m /h y p e b o t/2 0 0 9 /0 6 /
y o u tu b e -re p o rts -l7 0 0 -ju m p -in -m o b ile -v 1 d e o .h tm l).
23
Figura 1.13 | Aplicaciones sociales (parte 2 de 2)
I.ll
Jerarquía de datos
Los elem entos de datos que procesan las com putadoras form an una je ra rq u ía de d a to s que se vuelve cada vez
más grande y com pleja en estructura, a m edida q u e progresamos prim ero a birs, luego a caracteres, después a
campos y así en lo sucesivo. La figura 1.14 ilustra una porción de la jerarquía de datos. La figura 1.15 sintetiza
b s niveles de la jerarquía de datos.
S ally
Negro
Ton
Azul
Judy
Verde
Iris
N aranja
Randy
Rojo
Re&St'o
Judy
t
Judy
Campo
t
00000000 01001010
t
Bit
Figura 1.4 | Jerarquía de datos.
A-chivo
Caricfcr Unicode J
24
Capítulo I
Nivel
Introducción a las computadoras e Internet
Descripción
Bies
£1 demento de datos más pequeño en una computadora puede asumir d valor 0 o d valor 1.
A dicho elemento de datos se le denomina bit (abreviación de “dígito binario": un dígito que
puede asumir uno de dos valores). E l notable que las impresionantes funciones que realizan
las computadoras sólo impliquen b s manipulaciones más simples de ceros y unos: examinar
el i*alor de un bit, establecer el valor de un bit e invertir el valor de un bit (de 1 a 0 o de 0 a 1).
Caracteres
Es tedioso para bs personas trabajar con datos en d formato de bajo nivd de los bits. En
cambio, prefieren trabajar con dígitos decimales (0-9), letras (A-Z y a-z) y símbolos especiales
(por ejemplo, $,
% ,& ,* , (, )> -• *, ? y /)• Los dígitos, Ierras y símbolos especules se
conocen como caracteres. El conjunto de caracteres de b computadora es el conjunto de
todos los caracteres que se utilizan para escribir programas y representar elementos de datos.
Las computadoras sólo procesan unos y ceros, por lo que el conjunto de caracteres de una
computadora representa cada carácter como un patrón de unos y ceros. Java usa caracteres
Unicode que están compuestos de dos bytcs. cada uno de los cuales está compuesto a su
vez de ocho bits. Unicode contiene caracteres para muchos de los idiomas en el mundo. En
d apéndice F obtendrá más información sobre Unicode. En el apéndice D obtendrá más
información sobre d conjunto de caracteres ASCII (Código estándar estadounidense para
d intercambio de información): d popular subconjunto de Unicode que representa bs letras
mayúsculas y minúsculas, los dígitos y algunos caracteres especiales comunes.
Campos
Así como los caracteres están compuestos de bits, los campos están compuestos de caracteres o
bytcs. Un campo es un grupo de caracteres o bytcs que transmiten un significado. Por ejemplo,
un campo compuesto de letras mayúsculas y minúsculas se puede usar para representar d
nombre de una persona, y un campo compuesto de dígitos decimales podría representar b
edad de esa persona.
Registros
Se pueden usar varios campos relacionados para componer un registro (d cual se implcmenta
como una clase en Java). Por ejemplo, en un sistema de nómina, el registro de un empleado
podría consistir en los siguientes campos (los posibles tipos para estos campos se muestran
entre paréntesis):
• Número de identificación del empleado (un número entero)
• Nombre (una cadena de caracteres)
• Dirección (una cadena de caracteres)
• Salario por horas (un número con punto decimal)
• Ingresos d d año a la fecha (un número con punto decimal)
• Monto de impuestos retenidos (un número con punto decimal)
Así, un registro es un grupo de campos relacionados. En el ejemplo anterior, todos los campos
pertenecen al mismo empleado. Una compañía podría tener muchos empicados y un registro
de nómina para cada uno.
Archivos
Un archivo es un grupo de registros relacionados. [Nota:dicho en forma más general, un archivo
contiene datos arbitrarios en formaros arbitrarios. En algunos sistemas operarnos, un archivo se ve
tan sólo como una secuencia de bytcs: cualquier organización de esos byics en un archivo, como
cuando se organizan los datos en registros, es una vista creada por d programador de la aplicación).
Es muy común que una organización tenga muchos archivos, algunos de los cuales pueden contener
miles de millones, o induso billones de caracteres de información.
Figura 1.15 | Niveles de la jerarquía de datos (parte I de 2).
1.12
Nivel
Sistemas operativos
25
Descripción
Base de d ato s
U na base de datos es una colección electrónica d e datos, la cual está organizada para facilitar
s i acceso y m an ipulación. Existen varios m odelos de bases d e d a ta s. En este libro presenta­
m os las bases de d ato s relaciónales, en d o n d e los d ato s se alm acenan en tablas simples. U na
tabla incluye registros y (ampos. Por ejem plo, u n a tabla de estudiantes podría in c lu ir el prim er
nom bre, apellido, especialidad, n ú m e ro d e identificación de estudiante y prom edio de califi­
caciones. Los d ato s para cada estudiante form an un registro; las piezas individuales d e infor­
m ación en cada registro son los cam pos. U sted puede buscar, ordenar y m a n ip u la r los datos
con base en su relación co n varias tablas o bases de datos. Por ejem plo, u n a universidad podría
usar d ato s de la base de d ato s de estudiantes en com binación co n las bases de d ato s d e cursos,
alojam iento dentro del cam pus, planes de alim en tació n , etc. En el cap ín ilo 18 verem os las
bases d e daros y las asarem os en los cap ítu lo s de program ación d d lado d d servidor.
Figura 1.15 | Niveles de la jerarquía de datos (parte 2 de 2).
1.12
Sistemas operativos
Los sistem as o p erativ o s son sistem as de softw are que se encargan de hacer más conveniente el uso de las co m p u ­
tadoras para los usuarios, desarrollado res de aplicaciones y adm inistradores de sistemas. Además, proveen servi­
d o s que perm iten a cada aplicación ejecutarse en form a segura, eficiente y concurrente (es decir, en paralelo) con
otras aplicaciones. El software que contiene b s com ponentes básicos del sistem a operativo se d enom ina kem el.
Los sistemas operativos de escritorio populares son: Linux, W indow s 7 y M ac O S X. Los sistemxs operativos
móviles populares que se utilizan en teléfonos inteligentes y tablets son: A ndroid de Google, A pple iOS (para
sus dispositivos iPhone, iPad e iPod Touch), BbckBerry O S y W indow s P h o n e 7.
1.12.1 Sistemas operativos de escritorio y de Notebook
En esta sección hablarem os sobre dos sistemas operativos de escritorio populares: el sistem a operativo pro p ieta­
rio W indow s y el sistem a operativo de código fuente abierto Linux.
Windows: un sistema operativo propietario
A m ediados de la década de 1980. M icrosoft desarrolló el sistem a o p erativ o W in d o w s, el cual consiste en una
interfaz gráfica de usuario creada sobre D O S: un sistema operativo de com putadora personal m uy popular en
la época en q u e para interactuar con él los usuarios tecleaban com andos. W indow s to m ó prestados m uchos
conceptos (com o b s iconos, m enús y ventanas) desarrollados por Xerox PARC y que se hicieron populares
gracias a b s prim eros sistemas operativos A pple M acintosh. W indow s 7 es el sistem a operativo más reciente de
Microsoft; sus características incluyen mejoras en la interfaz de usuario, un arranque más veloz, un m ayor grado
de refinam iento en cuanto a las características de seguridad, so p o rte para pantalla táctil y m ultitáctil, y otras
cosas más. W indow s es un sistem a operativo propietario ; está bajo el control exclusivo de Microsoft. W indow s
es por m ucho el sistem a operativo más utilizado en el m undo.
Linux: un sistema operatii>o de códigofuente abierto
El sistem a operativo Linux es ral vez el más grande éxito del m ovim iento d e código fuente abierto. El código
fuente a b ie rto se desvía del estilo de desarroUo de software propietario, el cual predom inó d u ran te b s prim eros
años del software. C o n el desarrolb de código fuente abierto, individuos y com pañías contribuyen con sus
esfuerzos para desarrollar, m antener y evolucionar el software a cambio del derecho de usarlo para sus propios fines,
por b general sin costo. A m enudo el código fuente abierto es escudriñado p o r una audiencia m ucho mayor que
26
Capitulo I
Introducción a las computadoras e Internet
la del software propietario, de m odo q u e casi siempre los errores se elim inan con más rapidez. El código fuente
abierto tam bién fom enta una m ayor innovación. Las com pañías de sistemas empresariales com o IBM, Oracle y
muchas otras, han realizado inversiones considerables en el desarrollo del código fiiente abierto de Linux.
Algunas organizaciones clave en la com unidad de código fuente abierto son: la fundación Eclipse (el En­
torno integrado de desarrollo Eclipse ayuda a los program adores a desarrollar software de m anera conveniente),
la fundación M 07.illa (creadores del navegador Web Fircfox), la fundación de softw are Apache (creadores del
servidor W eb Apache que se utiliza para desarrollar aplicaciones basadas en la W eb) y SourceForge (quien pro­
porciona las herram ientas para adm inistrar proyectos de código fuente abierto; tiene más d e 3 0 6 0 0 0 de estos
proyectos en desarrollo). Las rápidas mejoras en la com putación y las com unicaciones, la reducción en costos y
el software de código fuente abierto han logrado q u e en la actualidad sea m ucho más fácil y económ ico crear un
negocio basado en software de lo que era hace tan sólo una década. Facebook es un gran ejem plo de ello; este
sitio se inició desde un dorm itorio universitario y se creó con softw are de código fuente abierto.6
El kernel de l i n u x es el núcleo del sistem a operativo de código fuente abierto más popular y lleno d e fun­
cionalidades. que se distribuye en form a gratuita. Es desarrollado por un equipo de voluntarios organizados de
m anera informal; es popular en servidores, com putadoras personales y sistemas incrustados. A diferencia d e los
sistemas operativos propietarios com o M icrosoft W indow s y Apple M ac O S X, el código fuente de Linux (el
código del program a) está disponible al público para que lo exam inen y m odifiquen; adem ás se puede descargar
e instalar sin costo. C om o resultado, los usuarios de Linux se benefician de una com unidad de desarrollado res
que depuran y m ejoran el kernel de m anera continua, con la ausencia de cuotas y restricciones de licencias y
con la habilidad de poder personalizar por com pleto el sistema operativo para cum plir necesidades específicas.
Son varias cuestiones — el p oder de mercado de M icrosoft, e l pequeño núm ero de aplicaciones Linux am i­
gables para los usuarios y la diversidad de distribuciones de Linux, tales com o Red Hat Linux, U b u n tu Linux
y m uchas m ás- que han im pedido que se popularice el uso de Linux en las com putadoras de escritorio. Pero
este sistem a operativo se ha vuelto m uy popular en servidores y en sistem as em bebidos, com o los teléfonos
inteligentes basados en A ndró id de Google.
1.12.2
Sistemas operativos móviles
Dos de los sistemas operativos móviles más populares son: Apple ¡OS y Google A ndroid.
iO Spara iPhone*, iP ad'y iPod Touch'
S tcvejobs y Steve W ozniak fundaron A pple en 1976, que se convirtió rápidam ente en lid e re n la com putación
personal. En 1979, Jobs y varios em pleados de Apple visitaron Xerox PARC (C entro de investigación de Palo
Alto) para aprender sobre la com putadora de escritorio de Xerox que contaba con una interfaz gráfica de usuario
(G U I). Esa G U I sirvió com o inspiración para la com putadora personal A pple Lisa (diseñada para clientes de
negocios) y para la Apple M acintosh en particular, que se lanzó con m uchas fanfarrias en un m em orable a n u n ­
cio del Súper Tazón de 1984. Steve Jobs dejó Apple en 1985 y fundó N eX T Inc.
El lenguaje de program ación O bjective-C , creado por Brad C ox y T om Love en Stepstone a principios de la
década de 1980, agregó capacidades de program ación orientada a objetos (O O P ) al lenguaje de program ación
C E n 1988, N cX T obtuvo la licencia para O bjcctivc-C de StepStonc y desarrolló un com pilador d e O bjectiveC adem ás de varias bibliotecas, lo cual se usó com o b plataform a para b interfaz de usuario del sistem a opera­
tivo N eX T ST E P y para Interface Builder (que se usaba para construir interfaces gráficas d e usuario). El sistem a
operativo Mac O S X d e Apple es descendiente de NeXTSTEP. El sistem a operativo propietario de Apple para el
¡Phone, ¡O S, se deriva del A pple Mac O S X y se utiliza en los dispositivos iPhone, iPad y iPod Touch.
Es posible descargar aplicaciones directam ente a los disposidvos iPhone, iPad o iPod por m edio de la App
Store. Existen más de 4 2 5 0 0 0 aplicaciones en b A pp Store.
6.
d e v e lo p e rs . fa c e b o o k . c o o /o p e n s o u rc e /.
1.13
Tipos de lenguajes de programación
27
Google Android
A n d ro id — el sistem a operativo para dispositivos móviles y teléfonos inteligentes, cuyo crecim iento ha sido el
más rápido hasta ahora— está basado en el kernel d e Linux y en Java. Los program adores experim entados de
Java no rienen problem as para en trar y participar en el desarrollo de aplicaciones para A ndroid. Un beneficio
de desarrollar este tipo de aplicaciones es el grado de apertura de la plataform a. El sistem a operativo es gratuito
y de código fuente abierto.
EJ sistem a operativo A ndroid fiie desarrollado por A ndroid Inc., com pañía que adquirió G oogle en 2005.
En 2007 se form ó la Alianza para los dispositivos móviles abiertos”* (O H A , O p cn H andscr Alliancc™) — un
consorcio d e 34 com pañías en un principio, y d e 84 para el año 2011— , para co n tin u ar con el desarrollo de
Android. Al mes de junio de 2011, ¡se activaban más de 500 000 teléfonos inteligentes con A ndroid a diario!7
Ahora los teléfonos Android se venden más que los ¡Phone en Estados U nidos.4 El sistema operativo A ndroid se
utiliza en varios teléfonos inteligentes (M otorola D roid, H T C EVO™ 4G , .Samsung V ib ra n t" y m uchos más),
dispositivos lectores electrónicos (com o el Nook™ de Barnes and N oble), com putadoras tipo tablet (com o Dell
Streak y Sam sung Galaxy Tab), quioscos con pantallas táctiles dentro de las tiendas, automóviles, robots, repro­
ductores m ultim edia y demás.
Puede descargar aplicaciones de m anera directa a su dispositivo A ndroid, a través del A ndroid M arkct y de
otros mercados de aplicaciones. Al m es de agosto de 2011 había cerca de 2 5 0 0 0 0 aplicaciones en el Android
Market de Google.
1.13
Tipos de lenguajes de programación
Los programadores escriben instrucciones en diversos lenguajes de program ación, algunos de los cuales son com ­
prendidos directam ente por la com putadora y otros requieren pasos interm edios de traducción. Cualquier com pu­
tadora puede entender de manera directa sólo su propio lenguaje m áq u in a, que se define con base en su diseño de
hardware. Los lenguajes m áquina consisten por lo general de números (que en últim a instancia se reducen a ceros
y unos). D ichos lenguajes son complejos para los hum anos.
La program ación en lenguaje m áquina (núm eros q u e las com putadoras pueden entender en form a directa)
resultó demasiado lenta y tediosa para la m ayoría de los program adores. C om o alternativa em pezaron a usar
abreviaciones parecidas al idiom a inglés para representar operaciones elementales. Estas abreviaciones form aron
la base de los lenguajes en sam b lad o res. Se desarrollaron programas traductores conocidos com o en sam b lad o res
para convertir los program as en lenguaje ensam blador a lenguaje m áquina. A unque el código en lenguaje en ­
sam blador es más claro para los hum anos, es im prescindible que para las com putadoras sea traducido al lenguaje
m áquina.
Para agilizar aún más el proceso de program ación, se desarrollaron lenguajes d e a lto nivel en ios que
podían escribirse instrucciones individuales para realizar considerables tareas. Los lenguajes de alto nivel nos
perm iten escribir instrucciones que se ven com o el inglés cotidiano y contienen expresiones m atem áticas d e uso
com ún. Los program as traductores conocidos com o c o m p ila d o re s convierten los program as en lenguaje de alto
nivel a lenguaje m áquina.
El proceso de com pilar un program a extenso en lenguaje de alto nivel a lenguaje m áquina puede requerir
una cantidad de tiem po de cóm puto considerable. E n consecuencia se desarrollaron program as in té rp re te s
para ejecutar de m anera directa los program as en lenguaje de alto nivel, incluyendo JavaScript y P H P ; cada
uno de estos lenguajes d e secuencias d e c o m a n d o s es procesado por intérpretes. La figura 1.16 m uestra varios
lenguajes de program ación populares.
7. n e w s .c n e t.c o m /8 3 0 l-l3 5 0 6 _ 3 - 2 0 0 7 4 9 5 6 -l7 / g o o g 1 e - 5 0 0 0 0 0 -a n d ro 1 d - d e v 1 c e s - a c t1 v a te d -e a c h - d a y /.
8. tn w w .p c w o r1 d .co m /a rt1 c 1 e /l9 6 0 3 5 /a n d ro 1 d _ o u tse lls_ th e _ 1 p h o n e _ n o _ b 1 g _ su rp rise .h tn l.
28
Capítulo I
Introducción a las computadoras e Internet
Tip de portabilidad l . l
Los interpretes tienen una ventaja sobre los compiladores de secuencias de comandos para Internet. Un
programa interpretado puede empezar a ejecutarse tan pronto como se descarga en el equipo cliente, sin tener
que compilarlo antes de poder ejecutarlo. La desventaja es que, por lo general, ¡as secuencias de comandos
interpretadas se ejecutan con mds lentitud que el código compilado.
Lenguaje de
programación
Descripción
C fue implcmenrado en 1972 por Dcnnls Rirdiic en los laboratorios Bell. En un principio se
hbo muy popular como d lenguaje de desarrollo del sistema operativo UNIX. En la actualidad,
la mayoría dd código para los sistemas operativos de propósito general se escribe en C o C++.
C**, una extensión de C, Fue desarrollado por Bjamc Stroustrup a principios de la década de
1980 en los Laboratorios Bell. G* + proporciona varias características que “potcncialrzan" al
lenguaje C, pero lo más importante es que proporciona la capacidades de una programación
orienrada a objetos.
Objcctivc-C
ObjcctivtvC es un lenguaje orientado a objetos basado en C. Se desarrolló a principios de la
década de 1980 y después fue adquirido por la empresa Ncxr, que a su vez fue adquirida por
Apple. Se ha convertido en d lenguaje de programación clave para d sistema operativo Mac OS
X y todos los dispositivos operados por d iOS (como los dispositivos iPod, iPhone e iftid).
Visual Basic
El lenguaje Visual Basic de Microsoft (que se basa en el lenguaje Basic desarrollado en el
Darmouth Collcgc en la década de 1960) se introdujo a principios de la década de 1990 para
simplificar el desarrollo de aplicaciones para Microsoft Windows. Sus versiones más recientes
soportan la programación orienrada a objetos.
Visual O
Los tres principales lenguajes de programación orientados a objetos de Microsoft son Visual
Basic, Visual C++ (basado en C++) y C# (basado en Cf+ y Java; desarrollado para integrar
Internet y la Web en las aplicaciones de computadora).
Java
En 1991, Sun Microsystems fundó un proyecto corporativo de investigación interno dirigido
por James Gosling, que resultó en el lenguaje de programación orientado a objetos y basado
en (%♦, conocido como Java. Un objetivo clave de Java es permitir la escritura de programas
que se ejecuten en una gran variedad de sistemas compuracionalcs y dispositivos controlados
por computadora. A esto se le conoce algunas veces como “escribir una vez, ejecutar en
donde sea". Java se utiliza para desarrollar aplicaciones empresariales a gran escala, mejorar
b funcionalidad de servidores Web (las computadoras que proveen el contenido que vemos
en nuestros navegadores Web), proveer aplicaciones en dispositivos para d consumidor
(smartphones, receptores digitales multimedia y otros más) y para muchos otros propósitos.
Figura 1.16 | Lenguajes de programación populares (parte l de 2).
1.14
Tecnología de objetos
Lenguaje
de
programación
Descripción
PHP
PHP es un lenguaje orientado a objetos de “secuencias de comandos” y “código fílente abierto"
(vea b sección 1.12), d cual recibe soporte por medio de una comunidad de usuarios y
desarrollado res; se utiliza en numerosos sitios Web, incluyendo Wikipcdia y Facebook. PHP es
unaplataforma independientr. existen implemen taciones para la mayoría de indos los principales
sistemas operativos UNIX, Linux, Mac y Windows. PHP también soporta muchas bases de datos,
incluyendo MySQL Otros dos lenguajes populares similares en conceptos a PH P son Perl y
Python. El término “IAMP" describe cuatro tecnologías dave para crear software de código fuente
abierto: Linux (sistema operativo). Apache (servidor Web), MySQL (base de datos) y PHR Perl o
Python (lenguajes de secuencias de comandos dd bdo dd servidor).
Python
Python, otro lenguaje orientado a objetos de secuencias de comandos, se liberó al público
en 1991. Fue desarrollado por Guido van Rnssum del Instituto Nacional de Investigación
para las Matemáticas y Ciencias Compu racionales en Amstcrdam (CWI); la mayor parte
de Python se basa en Modula-3. un lenguaje de programación de sistemas. Python es
“expandible": puede extenderse a través de clases e interfaces de programación.
JavaScript
JavaScript (desarrolbdo por Brendan Eich en Netscape) es d lenguaje de secuencias de comandos
más utilizado en d mundo. Su principal uso es para agregar capacidad de programación a las
páginas Web; por ejemplo, animaciones c intcractividad con el usuario. Se incluye en todos los
prindpalcs navegadores Web.
Ruby on Rails
Ruby fue creado a mediadas de la década de 1990 por Yukihiro Matsumoto; es un lenguaje
de programación orientado a objetos de código fílente abierto, con una sintaxis simple que es
amilar a I^thon. Ruby on Rails combina d lenguaje de secuencias de comandos Ruby con d
marco de trabajo de aplicaciones Web Raik. desarrollado por 37Signak. Su libro. Gftting Real
(gett1ngreal.37s1gnals.com/toc.php), es una lectura obligitoria para los desarrolladotes Web.
Muchos desarro liado res de Ruby on Rails han reportado ganancias de productividad superiores a
bs de otros lenguajes al utilizar aplicaciones Web que trabajan de manera intensiva con bases de
datos. Ruby on Rails se ut3izó para crear b interfaz de usuario dclwittcr.
Seala
Scala (vevw .scala-lang.org/node/273), abreviación en ingjésdc "lenguaje cscabble", fíic
diseñado por Martin Odcrsky, un profesor a i la Écolc Poiytrchniquc Fédéralc de lausannc
(EPFL) en Suba. Se lanzó al público en 2003; utilba los paradigmas de orientación a objetosy de
programaciónfuncional y está diseñado para integrarse con Java. Si programa en Scala, podrá reducir
de manera considerable b cantidad de código en sus aplicaciones. Twirter y Foursquare usan Scala.
29
Figura 1.16 | Lenguajes de programación populares (parte 2 de 2).
1.14
Tecnología de objetos
Crear software en form a rápida, correcta y económ ica sigue siendo un objetivo difícil de alcanzar en una época
en q u e la dem anda de software nuevo y más poderoso va en aum ento. Los oljetos, o dicho en form a más precisa
las clases de las que provienen los objetos, son en esencia com ponentes de softw are reutilizables. Existen objetos
30
Capitulo I
Introducción a las computadoras e Internet
de fecha, hora, audio. video, automóviles, personas, etc. Casi cualquier sustantivo se puede representar de m ane­
ra razonable com o un objeto de software en térm inos de sus atributos (com o el nom bre, color y tam año) y com­
portamientos (por ejem plo, calcular, moverse y comunicarse). Los desarrollado res de software han descubierto
que al usar una m etodología de diseño e im plem entación orientada a objetos y modular, pueden crear grupos de
desarrollo de software más productivos d e lo q u e era posible con las técnicas populares anteriores; por lo general
b s program as orientados a objetos son más fáciles de com prender, corregir y modificar.
El autom óvil como un objeto
Em pecem os con una an ab g ía simple. Suponga q u e desea conducir un autom óvily hacer que vaya mds rápido al
oprim ir el pedal del acelerador. ¿Q ué debe ocurrir para que usted pueda hacer esto? Bueno, antes d e que pueda
conducir un autom óvil, alguien tiene que diseñarlo. Por b general, un autom óvil em pieza en form a de dibujos
de ingeniería, sim ilares a b s píanos de construcción que describen el diseño de una casa. Estos dibujos de inge­
niería incluyen el diseño del pedal del acelerador. El pedal oculta al conductor b s com plejos m ecanism os que se
encargan de que el autom óvil aum ente su vebeidad, de igual form a q u e el pedal del freno oculta b s m ecanism os
que dism inuyen la v eb eid ad del autom óvil y el volante oculta b s m ecanism os que hacen que el autom óvil dé
vuelta. E sto perm ite q u e k s personas con poco o nada d e conocim iento acerca d e cóm o funcionan b s m otores,
b s frenos y b s mecanismos de b dirección puedan conducir un autom óvil con facilidad.
Antes d e poder conducir un autom óvil, éste debe construirse a partir de b s dibujos de ingeniería que b des­
criben. U n autom óvil com pleto tendrá un pedal acelerador real para hacer que aum ente su v eb eid ad , pero aun
así no es suficiente; el autom óvil no acelerará por su propia cuenta (¡esperemos que así sea!), así que el conductor
debe oprimir el pedal del acelerador para aum entar b vebeidad.
Métodosy clases
Ahora vamos a utilizar nuestro ejemplo del automóvil para introducir algunos conceptos cbve de b program ación
orientada a objetos. Para realizar una tarea en u n a aplicación se requiere un m étodo. Ese m étodo a b ja b s instruc­
ciones del program a que se encargan de realizar sus tareas. El m étodo oculta al usuario estas careas, de b misma
b rm a que el pedal del acelerador de un automóvil oculta al conductor b s mecanismos para hacer que el autom óvil
vaya más rápido. En b s lenguajes de program ación orientados a objetos, creamos una unidad de program a llamada
clase pora a b ja r el conjunto de m étodos que realizan las tareas de esa clase. Por cjem p b , una clase que representa
a una cuenta bancarb podría contener un m étodo para depositar dinero en una cuenta, otro para retirar dinero de
una cuenta y un tercero para solicitar el saldo acmal de b cuenta. Una dase es similar en concepto a b s dibujos
de ingeniería de un autom óvil, que contienen el diseño de un pedal acelerador, volante d e dirección, etcétera.
Insta nciamiento
Así com o alguien tiene que construir un autom óvil a p artir d e sus dibujos de ingeniería para q u e alguien pueda
c o n d u c irb después, tam bién es necesario crear un objeto de una clase para que u n program a pueda realizar bs
tareas definidas por b s m étodos de esa dase. Al proceso d e hacer esto se le denom ina instanciamiento. Entonces,
un objeto viene siendo una in stan c ia de su clase.
Reutilización
Así com o b s dibujos de ingeniería d e un autom óvil se pueden reutibzar m uchas veces para construir muchos
autom óviles, tam bién es posible reutilizar una d ase muchas veces para crear m uchos objetos. Al reutilizar b s
ebses existentes para crear nuevas dases y programas, ahorram os tiem po y esfuerzo. La reurilización tam bién
nos ayuda a crear sistemas más confiables y efectivos, debido a que con frecuencia las clases y b s com ponentes
existentes pasan por un extenso proceso de prueba, depuración y optimización del desempeño. D e b m ism a ma­
nera en que la noción de piezas intercambiables fue crucial para b Revolución Industrial, b s clases rcu ti liza bles
son crudales para b revolución de software incitada por b tecnología de objetos.
1.15
Mantenerse actualizado con las tecnologías de la información
31
Observación de ingeniería de softw are 1.2
Ufe un método de construcción en bloques para crear programas. Evite ránventar la rueda: use piezas
existentes siempre que seaposible. Esta reutilizcuión es la clave del beneficio de la programación orientada
a objetos.
Mensajes y llamadas a métodos
Cuando conduce un automóv il, al oprim ir el pedal del acelerador envía un mensaje al automóvil para que realice una
arca: aum entar la velocidad. D e manera similar, es posible enviar mensajes a un objeto. Cada measaje se implcmcnta
tom o llam ada a m étodo, para indicar a un m étodo del objeto que realice su tarea. Por ejemplo, un program a podría
Lunar al m étodo del objeto depositar para aum entar el saldo de una cuenta en un banco en particular.
Atributosy variables de instancia
Además de tener capacidades para realizar tareas, un autom óvil tam bién tiene atributos: color, núm ero de puera s , cantidad de gasolina en el tanque, velocidad acrual y registro del toral de kilóm etros recorridos (es decir,
b lectura de su velocím etro). Al igual que sus capacidades, los atrib u to s del autom óvil se representan com o
parte de su diseño en sus diagramas de ingeniería (que por ejem plo, incluyen un velocímetro y un indicador de
com bustible). AI conducir u n aurom óvil real, estos atributos se llevan junto con d autom óvil. C ada autom óvil
m antiene sus propios atributos. Por ejem plo, cada u n o sabe cuánta gasolina hay en su tanque, pero no cuánta
hay en los tanques d e otros.
De m anera similar, un objeto tiene atributos que lleva consigo a m edida que se utiliza en un programa.
Estos atributos se especifican com o parte d e b clase del objeto. Por ejem plo, un objeto cuenta bancaria tiene un
atributo saldo que representa la cantidad de dinero en la cuenta. C ada objeto cu en ta bancaria conoce el saldo de
b cuenta que representa, pero no los saldos de las otras cuentas en el banco. Los atributos se especifican m ediante
las variables d e in stan cia de b clase.
Encapsulamiento
Las clases e n c a p su la n (envuelven) los atributos y m étodos en objetos; los atributos y m étodos de un objeto
están m uy relacionados. Los objetos se pueden com unicar entre sí, pero por lo general no se les perm ite saber
cóm o están im plcm cntados otros objetos; los detalles de im plem cntación están ocultos dentro de los mism os
objetos. Este o c u lta m ie n to d e in fo rm a c ió n es crucial para b buena ingeniería de software.
Herencia
Es posible crear una nueva dase de objetos con rapidez y de m anera conveniente m ediante b herencia: b nueva
clase absorbe las características de u n a clase existente, con b posibilidad de personalizarlas y agregar característi­
cas únicas propias. En nuestra analogía del autom óvil, sin d u d a un o b jeto de b clase “convertible” es un objeto
de la clase m ás general llamada “autom óvil” pero, de m anera más específica, el techo puede ponerse o quitarse.
1.15
Mantenerse actualizado con las tecnologías de la información
Esto com pleta nuestra introducción a Internet y a b Web. Si surge u n a pregunta a m edida que avance en el
libro, envíe un correo a d e ite l@ d e ite l. com y le responderem os en form a o portuna. Esperamos que disfrute
usar Cómo programar en Internet y World Wide Web, quinta edición. La figura 1.17 m uestra una lista de b s p u b li­
caciones técnicas y comerciales cbve que le ayudarán a perm anecer actualizado con b tecnología, b s noticias y
las tendencias más recientes en cuanto a b tecnología de com putación. Internet y b W eb. ¡Diviértase!
32
Capítulo I
Introducción a las computadoras e Internet
Publicación
URL
ACM TcchNews
te c h n e w s.a c m .o rg /
ACM Transactions on
Acccssiblc Computing
www.1 s . umbe. e d u /ta c c e s s /ln d e x . html
ACMTransactions on Internet
Technology
to 1 t.a c m .o r g /
Bloombcrg BusincssWcck
www.businessweek.com
C N ET
new s.cn et.co m
Communications o f the ACM
cacm .acm .o rg /
Computer World
www. compu te r w o r ld . com
Engadgct
m
eWbek
iwvw.eweek.com
Fast Company
www.fasteompany.com/
Fortune
m o n ey .cn n .co m /m ag az1 n es/fo rtu n e/
IEEE Computer
w w w .com puter.org/porta1/w eb/com puter
IEEE Internet Computing
www. compu t e r . o rg /p o rta l/w e b /1 n te rn e t/H o m e
InfoWorld
vA*w.1nfoworld.com
Mashablc
ma sha b le . com
PCWodd
www.pcworld.com
SD Times
www.sdtimes.com
Slashdot
s la s h d o t.o r g /
Smartcr Technology
www.smartertechnology.com
Technology Review
technologyreview.com
Tcchcrunch
techcrunch.com
www.w1red.com
Wirtd
* . engadget.com
Figura 1.17 | Publicaciones técnicas y comerciales.
Ejercicios de autoevaluación
l.l
Complete la&siguientes oraciones:
a) La compañía que popularizó la computación personal fu e __________ .
b) Las computadoras procesan datos bajo d control de conjuntos de instrucciones conocidas com o___________ de
computadora.
c) E l __________ es un tipo de lenguaje de computadora que utiliza abreviaciones similares al idioma inglés para
bs instrucciones de lenguaje máquina.
d) Los lenguajes d e ____________________ son m is convenientes para que d programador escriba programas con
rapidez y facilidad.
c) El único lenguaje que una computadora puede entender en forma directa es d ___________ de esa computadora.
0 Los programas que traducen programas de un lenguaje de alto nivd a un lenguaje máquina se denominan
g) E l __________ o marcado de contenido, son otra parte clave d d tema colaborativo de la Web 2.0.
Respuestas a los ejercicios de autoevaluación
33
h) Con el desarrollo d e i __________ , los individuos y empresas conrribuyen con sus esfuerzos para desarrollar,
mantener y evolucionar software a cambio del derecho de usar ese software para sus propios fin», por lo general
sin costo.
i) E l___________ fue el predecesor de Internet.
j) La capacidad de transmitir de información de un medio de comunicación como Internet se conoce como
k) El acrónimo de TC P/IP significa
1.2
Complete las siguientes oraciones.
permitealosusuarios de computadoras localizar y ver documentos basados en multimedia sobre
a) L a _________
casi cualquier tema a través de Internet.
b) __________ fundó una organización conocida como Consorcio World Widc Web (W3C). dedicada a desarrollar
tecnologías no propietarias c intcropcrablcs para World Widc Web.
c) L o s___________ son componentes de software rcutilizablcs, que modelan elementos dd mundo real.
d ) __________ es un sistema operativo para smartphones basado en d kcm d de Linux y en Java.
1.3
Complete las siguientes oraciones (con base en la sección 1.14):
a) Los objetos tienen una propiedad que se conoce c o m o _______________ ; y aunque éstos pueden saber cómo
comunicarse con los demás objetos a través de inrcrfaccs bien definidas, por lo general no se les permite saber
cómo están implcmcntados los otros objetos.
b) En los lenguajes de programación orientados a objetos, creamos_______________ para contener el conjunto de
métodos que realizan tareas.
c) El proceso de analizar y diseñar un sistema desde un punto de vista de orientación a objetas se denomina
d) Mediante l a ________________ las nueva» clases de objetos pueden absorber las características de las clases
existentes y luego agregar características únicas propias.
e) El tamaño, forma, color y peso en un objeto se consideran______________ de su clase.
1.4
Indique si cada uno de los siguientes enunciados es verdadero o falso. Si esfalso. explique por qué.
a) HTM L5 ( Lenguaje de marcado de hipertexto 5) es un lenguaje de alto nivel diseñado para especificar d contenido
y b estructura de páginas Web de una manera portable.
b) Al mantener d estilo de las páginas junto con el contenido y su estructura, es posible cambur con facilidad la
aparkncb visual de bs páginas en todo un sitio Web, o en una parte d d sirio Web.
c) Un servidor Web mantiene b base de datos de nombres de hosts y sus correspondientes direcciones IP, y realiza
bs traducciones en forma automática.
1.5
Complete los siguientes cnuncudos:
a) _______________ es una biblioteca de JavaScript que simplifica la programación en JavaScript al facilitar la
manipubción de los dem entas de una página Wd> e intcracruar con los servidores de una manera portable a
través de varios navegadores Web.
b) E l_______________ es el estándar para transferir datos cifrados en Web.
c) _______________ es el identificador de los recursos en Internet.
d) U n a_______________ es un valor numérico que identifica en forma única al servidor en Internet.
c) A menudo los navegadores usan b _______________ para volver a cargar bs páginas Web con rapidez.
f ) El sistema operativo_______________ se utiliza en los dispositivos iPhonc, iPad y iPod Touch.
Respuestas a los ejercicios de autoevaluación
1.1
a) Apple, b) programas, c) Lenguaje ensamblador, d) Alto nivd. c) lenguaje máquinx f ) compiladores, g) Etiquetado.
h) código fuente abierto, i) ARPANET. j) ancho de banda, k) Protocolo de control de transmisión/Pro tocolo de
Internet.
1.2
a) World Widc Web. b) Tira Bcmcrs-Lec. c) Objetos, d) Android.
34
Capítulo I
Introducción a las computadoras c Internet
1.3
a) oculramicnto de información, b) clases, c) análisis y diseño orientado a objetos (ADOO). d) herencia.
c) atributos.
1.4
a) Falso. H TM L es un lenguaje de marcado. b)Falso. Al separar el estilo de b página de su contenido y estructura,
es posible cambiar la apariencia visual de bs páginas en todo un sitio Web o en una parte del mismo, con sólo
intercambiar una hoja de estilo por otra, c) Falso. EJ Servidor de Sistema de Nombres de Dominio (DNS)
mantiene la base de datos de nombres de hosts y sus correspondientes dirección IP, y realiza las traducciones en
forma automática.
1.5
a) jQucry. b) Protocolo seguro de transferencia de hipertexto (H'ITPS). c) URI (Identificad o res uniformes de
recursos), d) Dirección IP (Protocolo de Internet), e) caché. 0
Ejercicios
1.6
Complete bs siguientes oraciones:
a) El proceso de indicar a b computadora cómo resolver un problema se lb m a _______________ .
b) ¿Qué tipo de lenguaje computacional utiliza abreviaturas dd inglés para bs instrucciones de lenguaje máquina?
c) El nivel de lenguaje de computadora más conveniente para que usted pueda escribir programas con rapidez
/facilid ad es_______________ .
d) El único lenguaje que una computadora entiende de manera diroca se conoce como e l_______________ de esa
computadora.
c) La Web 2.0 abarca u n _______________ ; diseño que fomenta la interacción del usuario y las contribuciones de
b comunidad.
0 _______________es d concepto de que un grupo grande y diverso de personas crearán ideas inteligentes.
1.7
Complete las siguientes oraciones:
a ) _______________se utiliza ahora para desarrollar aplicaciones empresariales de gran escala, para mejorar la
funcionalidad de los servidores Web. para proporcionar aplicaciones en dispositivos para d consumidor y muchos
otros fines más.
b) En un principio._______________ se hizo muy popular como lenguaje de desarrollo para el sistema operativo
UNIX.
c) La com pañía_______________ es la que tiene d crecimiento más rápido de la historia en la Web 2.0.
d) El lenguaje de programación_______________ fue desarrollado por Bjame Stroustrup a principios de la década
de 1980 en los Laboratorios Bdl.
1.8
Ind ique si cada uno de los siguientes enunciados es verdadero o falto. Si es falso, explique por qué.
a) los Hojas de estilo en cascada, Cascading Style Sheets™ 3 (CSS3), se utilizan para especificar la presentación o d
estilo de los dentemos en una página Web (por ejemplo: fuentes, espaciado, tamaños, colores, posicionamiento).
b) Asegurar una apariencia visual consistente en los navegadores del lado dd cliente es uno de los grandes desafíos
del desarrollo de aplicaciones Web.
c) Por lo general una solicitud HTTP pon (o sends) envía datos a un servidor.
d) Con frecuencia las secuencias de comandos del lado dd cliente pueden acceder a los servidores de estructura de
directorio de archivos.
1.9
Complete las siguientes oraciones:
a) _______________es el protocolo de Internet de próxima generación que cuenta con seguridad integrada y un
nuevo esquema de direcdonamicnro, con lo que se expande de manera considerable d número de direcciones
disponibles.
b) Por lo general, los documentos de HTM L contienen _______________ que, al hacer clic en dios, cargan un
documento Web especificado.
c) U na_______________ contiene información que dirige a un navegador al recurso que d usuario desea utilizar.
la _______________pone dichos recursos a disposición de los clientes Web.
d) Los dos tipos de requerimiento de HTTP más comunes so n _______________ y _______________ .
Ejercicios
35
c) Las aplicaciones basadas en Web son aplicaciones mulrinivcl. E l_______________ (también conocido como el
nivel de datoso de información) mantiene los datos de la aplicación y por lo general los almacena en un sistema de
administración de bases de daros relaciónales. E l_______________ implementa la lógica de negocios, lógica
de control y lógica de presentación para controlar las interacciones entre la aplicación y los clientes y sus datos.
E l_______________, o nivel cliente es la interfaz de usuario de la aplicación, que recopila la entrada y muestra
la salida.
0 _______________. «d sistema operativo para dispositivos móviles y smartphoncs con m is rápido crecimiento,
se basa en el kcmcl de Linux y en Java.
1.10 ¿Cuál es la relación entre JavaScript y ECMAScrlpt?
1.11 Describa la diferencia entre programación del lado d d cliente y programación del lado del servidor.
1.12
(Internet en la industria y la investigación) Las figuras 1.1 a 1.4 proporcionan ejemplos de cómo se utilizan las
computadoras e Internet en la industria y la investigación. Encuentre tres ejemplos adicionales y describa cómo es
que cada uno de ellos utiliza la Internet y la Web.
1.13 (Computación en la nube) Describa tres beneficios del modelo de computación en nube.
1.14 (Servidos Web) En la figura 1.11 listamos varios servicios Web que podemos usar para crear nuestras propias
aplicaciones Web. Use das servicios Web diferentes (ya sea de la tabla o de los que encuentre en linca) para describir
un tipo de aplicación Web que le gustaría crear. ¿Cómo utilizaría el contenido que proporciona cada uno de los
servicios Web?
1.15 (Aspectos negativos de Internet) A pesar de sus cuantiosos beneficios, la Internet y la Web tienen varias desventajas:
cuestiones de privacidad, robo de identidad, SPAM y malware. Investigue algunos de los aspectos negativos de
Internet. Liste cinco problemas y describa lo que podría hacerse para ayuelar a resolverlos.
1.16 (Web 2.0) En este capítulo hablamos sobre unas cuantas empresas Web 2.0 populares, como Facebook, Twitter,
Groupon, Foursquare, Skype y YouTubc. Identifique otra empresa Web 2.0 y describa por qué encaja en el modelo
de negocios Web 2.0.
1.17 (Un reloj como objeto) Tal vez usted use en su muñeca uno de los tipos de objetos más comunes del mundo:
un reloj. Hable sobre la forma en que cada uno de los siguientes términos y conceptos se aplica a la noción de un
reloj: objeto, atributos, comportamientos, clase, herencia (considere por ejemplo, un reloj despertador), abstracción,
modelado, mensajes, cncapsulamicnro, interfase y oeulramiento de información.
1.18 (Privacidad') Algúnos de ios servicios de correo electrónico en linca guardan toda la correspondencia de corteo
electrónico durante cierto periodo de tiempo. Suponga que un empicado disgustado de uno de estos servicios de
correo electrónico en línea publicara en la Internet todas las correspondencias de correo electrónico de millones
de personas, incluyendo la suya. Analice las consecuencias.
1.19 (Responsabilidad ¿tica y legal del programador) Como programador en la industria, tal vez llegue a desarrollar
software que podría afectar la salud de otras personas, o incluso sus vidas. Suponga que un error de software en uno
de sus programas provocara que un paciente de cáncer recibiera una dosis excesiva durante la terapia de radiación y
resultara gravemente lesionado o muriera. Analice las consecuencias.
1.20 (El “Flash Crasb" de 2010) Un ejemplo de las consecuencias de nuestra excesiva dependencia con respecto a las
computadoras es d denominado “flash aasIT, que ocurrió d 6 de mayo de 2010, cuando d mercado de valores de
Estados Unidos se derrumbó de manera precipitada en cuestión de minutos, al borrarse billones de dólares de inversiones
que se volvieron a recuperar pocos minutos después. Use Internet para investigar las causas de este derrumbe y analice
las consecuencias que genera.
1.21 (Proyectospara hacer la diferencia) La siguiente es una lista de unas cuantas organizaciones mundiales que trabajan
para hacer la diferencia. Visite estos sitios y nuestro Centro de recursos para hacer la diferencia en «***. del te l .com/
makingadifference. Prepare una lista de los primeros 10 proyectos de programación que usted considere podrían
“hacer la diferencia”.
Capitulo I
Introducción a las computadoras e Internet
wvm . 1raag1necup. con/about
La Copa Imagine de Microsoft es una competencia global en la que los estudiantes usan la tecnología para intentar
resolver algunos de los problemas más difíciles del mundo, como la sustentabilidad ambiental, acabar con la
hambruna, la respuesta a emergencias, la alfabetización y combatir el VIH/SIDA. Visite mtw.iniaginecup.com/about
para obtener más información sobre la competencia y para aprender sobre los proyectos desarrollados por los anteriores
ganadores. También encontrará varias ideas de proyectos enviadas por organizaciones de caridad a nivd mundial en
«mw.im aginecup.com/students/imagine-cup-solve-this. Si desea obtener ideas para proyectos de programación
que puedan hacer la diferencia, busque en b Web el tema "hacer la diferencia" y visite los siguientes sitios Web:
wvm. un. o rg /m i11ennl umgoal s
El proyecto Milenio de Naciones Unidas busca soluciones para los principales problemas mundiales, como b
sustentabilidad ambiental, b igualdad de sexos, b salud infantil y materna, b educación universal y otros mis.
vmm. 1bm. com/sna rte r pl an e t /
El sitio Web Smarter Pbnet de IBM* habla sobre cómo es que IBM utiliza b tecnología para resolver problemas
relacionados con los negocios, b computación en b nube, la educación, b sustentabilidad y otros más.
M vm .gatesfoundat1on.org/Pages/hom e.aspx
La Fundación Bill y Mclinda Gates ofrece becas a b s organizaciones que trabajan para mitigar el hambre, b pobreza
y bs enfermedades en los países en desarrollo. En Estados Unidos, b fundación se enfoca en mejorar b educación
pública, en especial pora las personas con bajos recursos.
vm m .nethope.org/
NctHope es una cobboración de organizaciones humanitarias en todo el mundo, que trabajan para resolver los
problemas relacionados con b tecnología, como la conectividad y b respuesta a bs emergencias, entre otros.
Mm. r a l n fo re stfo u n d a t1 o n .o rg /h o m e
La Fundación Rainforcsr trabaja para preservar los bosques tropicales y proteger los derechos de los indígenas que
consideran a estos bosques como su hogar. El sitio incluye una lista de cosas que usted puede hacer para ayudar.
vwm.undp.org/
El Programa de b s Naciones Unidas para el Desarrollo (UNDP) busca soluciones a los desafíos globales, como b
prevención y recuperación en crisis, b energía y el ambiente, b gobemanza democrática y otros más.
wvm.un1do.org
La Organización de bs Naciones Unidas para d Desarrollo Industrial (UNIDO) busca reducir la pobreza, dar a los
países en desarrollo b oportunidad de participar en el comercio global y promover tanto la efíciencu de b energía
como la sustentabilidad.
Mvm.usa1d.gov/
USAID promueve b democracia global, b salud, el crecimiento económico, b prevención de conflictos y b ayuda
humanitaria, entre otras cosas.
nvm.to y o ta . con/ 1 dea s - for-good/
El sitio Web Ideas fbr Good de Toyota describe varias tecnologías de esta empresa que están haciendo b difcrcncb:
entre éstas se incluyen su Sistema avanzado de asistencia de estacionamiento (Advanced Parking Guidancc System),
b tecnología Hybrid Syncrgy Drive*, el Sistema de venribeión operado por energía sobr (Solar Powcrcd Vcnribtion
System), el modelo T.H.U.M.S. (Modelo humano total para b seguridad) y Touch Traccr Dispby. Usted puede
prticipar en el desafío de Ideas for Good; envíe un breve ensayo o un video que describa cómo se pueden usar estas
tecnologías para otros buenos propósitos.
Introducción a HTML5
parte I
Tuvo un maravilloso talento para
empaquetar el pensamiento al
máximo y hacerlo portable.
— H i o i m a R ahingrofi M ar.itiLrr
Los pensamientos elevados deben
tener un lenguaje elevado.
—Aristófanes
Objetivos
En este capitulo aprenderá a:
■ Comprender los componentes
importantes de los documentos
de HTML5.
■ Usar HTML5 para crear páginas
Web.
■ Añadir imágenes a páginas
Web.
■ Crear y usar hipervínculos para
ayudar a los usuarios a navegar
por páginas Web.
m Marcar listas de información.
■ Crear tablas con filas y
columnas de datos.
■ Crear y usar formularios para
obtener la entrada del usuario.
Plan general
38
Capítulo 2
Introducción a HTML5: parte I
2.1
Introducción
2 .8 Caracteres especiales y reglas horizontales
2.2
Edición de HTML5
2.9 Listas
2.3
El primer ejemplo de HTML5
2.10 Tablas
2 .4
Servicio de validación de HTML5 del W3C
2.11 Formularios
2.5
Encabezados
2.12 Vinculación interna
2.6
Vinculación
2.13 Elementos m eta
2.7
Imágenes
2.14 Recursos Web
2.7.1
Atributo alt
2.7.2
Elementos vacíos
2.7.3
Uso de imágenes como hipervínculos
Resumen | Ejercicios de autoevaluación | Respuestas a los ejercicios de autoevaluación | Ejercicios
2.1
Introducción
En este capítulo empezaremos a desatar el poder del desarrollo de aplicaciones basadas en W eb con H T M L 5 . A
diferencia de los lenguajes de programación com o C , C++, C # , Java y Visual Basic, H T M L 5 es un lenguaje d e
m arcad o que especifica la estructura y el contenido de b s docum entos que se visualizan en b s navegadores Web.
Presentaremos algunos fundam entos y luego cubrirem os técnicas más sofisticadas de H T M L 5 , com o:
* 'labias, que son especialmente útiles para estructurar inform ación a partir d e bases de datos (es decir,
software que alm acena conjuntos estructurados de datos)
• F o rm u lario s para recolectar inform ación de b s visitantes de las páginas Web
* V inculación in te rn a para facilitar la navegación por b s páginas
• Elem entos m eta para especificar b inform ación sobre un docum ento
E n el capítulo 3 presentarem os m uchas nuevas características en H T M L 5- En el capítulo 4 habbrcm os sobre
CSS3, u n a tecn o b g ía para especificar b apariencia de las páginas Web.
2.2
Edición de HTML5
Para crear d o c u m e n to s d e H T M L 5 , escribimos texto d e m arcado de H T M L 5 en un editor de texto (com o el
B b c de notas, TextEdit, vi, emacs) y b guardam os con b extensión de nom bre de archivo . html o . htm.
Las com putadoras conocidas com o servidores Web alm acenan docum entos d e H T M L 5. Los clientes (com o
b s navegadores W eb que se ejecutan en su com putadora b e a l o Sm artphonc) solicitan recursos específicos a b s
servidores W eb, com o docum entos de H T M L 5 . Por e je m p b , al escribir v w w .d e ite l .com /books/dow nloads.
htm l en el cam po de dirección d e un navegador Web se solicita el archivo dow nloads. htm l del directorio books
en el servidor Web que se ejecuta en w v m .d eitel .com. En el c a p ítu b 17 habbrem os sobre b s servidores Web.
Por ahora s ó b tiene que c o b c a r b s docum entos de H T M L 5 en su com putadora y para desplegarlos (visualizar­
los) debe a b rirb s en form a local con un navegador Web.
2.3
El primer ejemplo de HTML5
En este c a p ítu b presentarem os las capacidades de marcado de H T M L y proveeremos capturas de pan­
talla q u e m uestran cóm o un navegador despliega (visualiza) el H T M L 5 . Puede descargar b s e je m p b s de
2.3
El primer ejemplo de HTML5
39
w*w. pearsonh1ghered.com/deitel. Los docum entos de H T M L 5 que m ostram os tienen números de linea para
su conveniencia; estos núm eros no form an parte del docum ento. Abra cada d o cu m en to de H T M L 5 en varios
navegadores Web, de m anera que pueda verlos c interactuar con ellos.
La figura 2.1 es un docum ento de H T M L 5 llam ado p r in c ip a l.h tm l, que está guardado en la carpeta
ejemplos/cap02. Este prim er ejem plo m uestra el mensaje Bienvenido a HTML5 en el navegador. A hora anali­
cemos cada línea del docum ento.
1
<!DOCTYPE html>
2
< ! - - Fig. 2.1: p r in c ip a l.h tm l -->
< ! - - Primer ejemplo de HTML5. -->
<hta1>
<head>
< n eta c h a r s e t = “u tf-8 " >
< title> B ie n v en id o < /t1tle >
</head>
<body>
<p>Bienvenido a HTML5</p>
</body>
< /h t« l>
la pestaña —
nuestra el
contenido del
elemento t i t l e
C
' fi»ey//Cyejemplo%/c4p02/pnfKipat.html
Bxm^túdo a HTML?
<2 =
•
•
Figura 2.1 | El primer ejemplo de HTML5.
Declaración de tipo de documento
1.a declaración d e tip o d e d o c u m e n to (DOCTYPE) en la línea 1 es obligatoria en los docum entos de H T M L 5
para que los navegadores desplieguen la página en m o d o e s tá n d a r de acuerdo con las especificaciones de
H T M L y CSS. Algunos navegadores operan en m o d o q u ir k s para m antener com patibilidad hacia atrás con
páginas Web que no están actualizadas con los estándares más recientes. E n o d a docum ento de H T M L 5 que
a ee debe incluir la declaración DOCTYPE.
Líneas en blanco
Incluim os Uneos en blanco (líneas 2 y 10) para facilitar la legibilidad d e nuestros docum entos; el navegador
ignora estas líneas.
Comentarios
Las líneas 3 y 4 son co m en tario s d e H T M L 5- Insertará comentarios en su marcado de H TM L5 para mejorar la
legibilidad y describir el contenido de un docum ento. El navegador ignora los comentarios cuando se despliega
su docum ento. Los com entarios de H T M L 5 empiezan con < !— y term inan con --> . E n nuestros ejemplos in­
cluimos com entarios que especifican el número de figura y el nom bre de archivo, además de indicar el propósito
del ejemplo. C on frecuencia incluiremos com entarios adicionales, en especial para explicar nuevas características.
40
Capítulo 2
Introducción a HTML5: parte I
Elementos html, heady body
£1 marcado d e H T M L 5 contiene texto (e imágenes, gráficos, animaciones, sonidos y videos) que representa el
contenido de un docum ento, además de elem entos que especifican la estructura y el significado de un docum ento.
Algunos elementos im portantes son htjnl (que empieza en la línea 5 y term ina en la línea 14), head (líneas 6 a 9)
y body (líneas 11 a 13). El elemento html encierra la sección d d encabezado (representada por el elem ento head) y
la sección d d cu erp o (representada por el elemento body). La sección del encabezado contiene información sobre
d docum ento de H T M L 5, com o el conjunto de caracteres (UTF-8, el esquem a de codificación de caracteres más
popular para la Web) que utiliza la página (línea 7) (k> que ayuda al navegador a determ inar cóm o va a desplegar el
contenido) y el título ( t i t l e ) (línea 8). La sección del encabezado también puede contener instrucciones especiales
de form ato del docum ento conocidas com o hojas de estilo CSS3 y program as del lado diente conocidos com o
secuencias d e co m an d o s (script) para crear páginas W eb dinámicas (en el capítulo 4 presentarem os las hojas de es­
tilo CSS3 y explicaremos las secuencias de com andos con el lenguaje JavaScript en los capítulos 6 al 13). La sección
del cuerpo contiene el contenido de b página, que el navegador muestra cuando el usuario visita la página Web.
Etiquetas de inicio y de fin
Los docum entos de HTM L5 delimitan h mayoría de los dem entas con una etiqueta de inicio y una etiqueta de fin.
Una etiqueta de ¡n id o consiste en d nombre del elemento entre paréntesis angulares (por ejemplo, chtml > en la línea 5).
Una etiqueta de fin consiste en el nombre del dem ento seguido de una barra diagorud (/) entre paréntesis angulares (por
ejemplo, c/htm l > en la línea 14). También existen los denominados “elementos vacíos", que no tienen etiquetas de fin.
Más adelante veremos que muchas etiquetas de inicio tienen a trib u to s que proporcionan ¡nform adón
adicional sobre un elem ento, el cual utilizan los navegadores para determ inar cóm o procesar ese elem ento. C ada
atributo tiene un n o m b re y un v a lo r separados por un signo de igual («).
Buena práctica de programación 2.1
Aunque los nombres de los elementosy atributos de HTML5 no son susceptibles al uso de mayúsculas
(puede usar letras minúsculasy mayúsculas), es una buena práctica usar sólo letras minúsculas.
Elemento t l t l e
La línea 8 especifica un elem ento t i t l e . A esto se le conoce com o d e m e n to a n id a d o , ya que está encerrado
entre las etiquetas de inicio y de fin del elem ento head. FJ elem ento head tam bién es un elem ento anidado, ya
que está encerrado entre las etiquetas de inicio y de fin del elem ento h tm l. El elem ento t i t i e describe la página
Web. Por lo general, los títulos aparecen en la b a rra d e títu lo en la parte superior de la ventana del navegador,
en la pestaña del navegador en d o n d e se visualiza la página y tam bién com o el texto que identifica a una página
cuando los usuarios agregan esa página a su lista de F a v o r ito s o M arcadores, lo que les perm ite regresar a sus
sitios favoritos. Los m otores de búsqueda usan t i t i e para fines de ¡ndexación y a la hora de m ostrar resultados.
■píxr'
Buena práctica de programación 2.2
d i aplicar sangría a los elementos anidados se enfatiza la estructura de un documento y sepromueve la
legibilidad. Usamos tres espaciospara cada nivel de sanpla.
E n la línea 11 com ienza el elem ento body del docum ento, el cual especifica su contenido y puede incluir texto,
imágenes, sonidos y videos.
Elemento pdrrafo (<p>... </p>)
Algunos elementos, com o el d e m e n to p á rra fo que se indica m ediante las etiquetas <p> y </p> en la línea 12, ayu­
dan a definir b estructura de un docum ento. T odo el texto que se coloca entre bs etiquetas <p> y </p> form a un
2.5
Encabezados
41
párrafo. Cuando un navegador despliega un párrafo, coloca espacio adicionalpor encima y debajo del texto delpármfo.
La línea clave en el program a es la línea 12, que indica al navegador que muestre el mensaje Bienven id o a HTML5.
Etiquetas de fin
Este docum ento term ina con dos etiquetas de fin (líneas 13 y 14) que cierran los elem entos body y htm l. respec­
tivamente. La etiqueta </htm1> inform a al navegador que el marcado de H T M L 5 está com pleto.
Cómo abrir un archivo de H TM L5 en su navegador Web predetenttinado
I^ra abrir un ejemplo de H T M L 5 de este capítulo, abra la carpeta en donde guardó los ejemplos del libro, na­
vegue hasta la carpeta del capítulo 2 y haga doble clic en el archivo para abrirlo en su navegador W eb predeter­
minado. En este p u n to deberá aparecer la ventana de su navegador en form a sim ilar a la captura de pantalla de
ejem plo que se m uestra en la figura 2.1. Ajustam os el tam año d e la ventana del navegador para ahorrar espacio.
2.4
Servicio de validación de HTML5 del W 3C
D ebe usar una sintaxis correcta de H T M L 5 para asegurar que el navegador procese sus docum entos en forma
apropiada. El C onsorcio W orld W idc W eb (W 3C ) ofrece u n servicio d e validación (en v a l i d a t o r .w3 .o rg )
para revisar la sintaxis de un docum ento. Los docum entos pueden validarse de varias formas:
• Proporcionar el U RL de una página W eb en línea
• C argar un archivo en el validador
• Pegar código directam ente en un área de texto sum inistrada en el sitio del validador
‘lodos los ejem plos de H T M L 5 en este libro se validaron m ediante el proceso de cargar un archivo en:
v a l1 d a to r.* 3 .o rg /# v a l1 d a te - b y -u p lo a d
Para usar v a lid a to r .w 3 .o r g /# v a l id a te -b y -u p lo a d , haga clic en el b o tó n Choose File (Examinar) para
seleccionar de su com putadora el archivo que desea validar. A continuación, haga clic en More O ptions (Más
opciones). En la lista desplegablc Document Type ( U p o de documento), seleccione HTMLTS (experimental).
Seleccione la casilla de verificación Verbose Output (Salida detallada) y luego haga clic en el b o tó n Check
(Veri f 1car) para validar su docum ento. Si contiene errores de sintaxis, el servicio de validación m ostrará m en ­
sajes para describir esos errores. C o m o el validador de H T M L 5 aún se considera experim ental, recibirá una
advertencia cada vez que valide un docum ento de H T M L 5 .
Tip para prevenir errores 2.1
La mayoría de los navegadores intentan desplegar los documentos de HTML5 incluso aunque sean inválidos.
Esto puede conducir a resultados inesperados e indeseables. Use un servicio de validación como el MarkUp
Val1dat1on S«rv1ce /Servicio de validación de aarcadoy del W3C para confirmar que un documento
HTML5 tenga la sintaxis correcta.
2.5
Encabezados
Tal vez cierto texto en u n docum ento de H T M L 5 sea más im portante que otro. H T M L 5 ofrece seis elem en to s
de en c a b e z a d o (h l a h6) para especificar la importancia relativa de la inform ación (figura 2.2). El elem ento de
encabezado h l (línea 12) se considera el más significativo y por lo general se despliega e n una fuente más grande
que los otros cinco (líneas 13 a 17). C ada elem ento de encabezado sucesivo (h2, h3, etc.) se despliega por lo
general en una fuente cada vez más pequeña.
42
Capítulo 2
Introducción a HTML5: parte I
Tip de portabilidad 2.1
El tomarte de texto que se utiliza para mostrar cada elemento de encabezado puede variar de un navegador
a otro. En el capitulo 4 usaremos CSS para controlar el tamaño del texto y otras propiedades del mismo.
Observación de apariencia visual 2.1
Al colocar un encabezado en la parte superior de cada página es másfácil para los visitantes comprender
elpropósito de ¡a página. Los encabezados también ayudan a crear un esquema para un documento y son
indexados por los motores de búsqueda.
I
<!DOCTYPE ht*l>
< ! - - F ig . 2 .2 : encabezado.htm l -->
< ! - - Los elem en to s de encabezado h l a h6. -->
<ht«il>
<head>
<meta charset - “u t f - 8 ">
<t1t1e> Encabezados </t1tie>
</head>
<body>
<hl>Encabezado
<h2>Encabezado
<H3>Encabezado
<h4>Encabezado
<hS>Encabezado
<H6>Encabezado
de
de
de
de
de
de
n iv e l
n iv e l
n iv e l
n iv e l
n iv e l
n iv e l
1</H1>
2</h2>
3</h3>
4</h4>
5</hS>
6</h6>
</body>
</htm l>
W
[
to c » b c * d o !
C
*
'
l ) ftW//Cyej«mpios/cap02/eocab«zadoMmJ
>t>oi logtnó&z
titb SU« GíHey C j Impcrtad© de Irtcrtv..
•
E n c a b e z a d o d e n iv e l 1
K n c a b e / a d o d e n iv e l 2
Encabezado de nivel 3
1 n < a b e /a d o d » n h r i 4
EttraWeaét é t a b d 5
K
4o »«••!«
•
Figura 2.2 | Los elementos de encabezado h l a h6.
2.6
Vinculación
Una de las características m is importantes de HTM L5 es el hipervínculo, que hace referencia (o vincula) a otros
recursos, com o los docum entos de H TM L5 y b s imágenes. C uando un usuario haoe clic en un hipervínculo, el nave-
2.6
Vinculación
43
jpdor trata de ejecutar una acción asociada con él (por ejemplo, navegar hada un URL o abrir un correo electrónico de
un cliente). Cualquier ¿míenlo visualizado puede actuar como lúpervinculo. Ibr lo general los navegadores Web subrayan
los hipervínculos de texto y colorean su texto en azul de manera predeterminada, de m odo que los usuarios puedan
distinguir los hipervínculos del texto simple. En la figura 2.3 creamos hipervínculos de texto hacia cuatro sitios Web.
1 < IDOCTYPE html>
2
3 <1— Flg. 2.3 : vinculos.html — >
4 <1— Vínculos hacia otras páginas Web -->
3 <ht«il>
6
<head>
7
<neta charset - “utf-S"»
8
<title>Vínculos</title>
9
</head>
10
11
<body>
12
13
<hl>Estos son mis sitios favoritos:</hl>
<p><strong>Haga clic en un nombre para visitar ese sit1o.</strong></p>
14
13
16
17
18
19
< I— crea cuatro hipervínculos de texto -->
<p><a href = “http://www.facebook.com”>Facebook</a></p>
<p><a href - ,'http://www.twitter.com">Twitter</a></p>
<p><a href - “http://www.fourquare.co«">Foursquare</a></p>
<p><a href = “http://www.google.co«n">Coogle</a></p>
</body>
20
21
</ht»l>
C _ file///CV<jeniOíoVcáp02AirKuloUilnil
sálenlos j
íkeOHw Q
<k
1*
=
E s to s s o n m is s itio s f a v o r i t o s :
lllfi«fccm MI frontil»*|uri tÍMfJf«f SltK».
Farrtef*
lata
fiaoÉ
Figura 2.3 | Vinculación a otras páginas W :b. (El texto ¿ a c u te es el código especial para acentuar letras, como en la
Inea 8 de este código).
En la línea 13 se inrroduce el d e m e n to s tro n g , el cual indica que su contenido tien e alta im portancia. Por
b general los navegadores despliegan dicho texto en una fuente en negrita.
lo s vínculos se crean m ediante el uso del elem ento a (a n d a ). En la línea 16 se define un lúpervinculo hacia
el U RL asignado al atributo h r e f (referencia de hiperrexto), el cual especifica la ubicación de un recurso tal com o
• Una página Web o ubicación dentro de una página Web
• U n archivo
• U na dirección de correo electrónico
44
Capítulo 2
Introducción a HTML5: parte I
El dem en to ancla en la línea 16 vincula el texto Facebook a una página W eb ubicada en h ttp ://w w w . f a c e ­
book . com. El navegador cam bia el color de cualquier vínculo de texto una vez que se haga clic en éste (en cuyo
caso, los vínculos son de color m orado en vez de azul). C uando un U RL no indica u n docum ento específico
en el sitio W eb, el servidor devuelve una página W eb predeterm inada. A esta página se le conoce por lo general
com o Index .h tm l, pero la m ayoría de los servidores Web pueden configurarse para usar cualquier archivo com o
la página W eb predeterm inada para el sitio. Si el servidor Web no puede localizar un docum ento solicitado,
devuelve una indicación de error al navegador Web (lo que se conoce com o error 404) y éste m uestra una página
Web que contiene un mensaje de error.
Observación de ingeniería de softw are 2.1
Aunque no se requiere en HTML5, se recomienda encerrar los valores de los atributos entre comillas sencillas
o dobles.
Crear un hipen>inculo a una dirección de correo electrónico
Las anclas pueden vincular a direcciones de correo electrónico mediante el uso de un URL mal 1t o :. C uando el usuario
hace d ic en este tipo de vínculo con ancla, la mayoría de los navegadores inician el programa de corteo electrónico
predeterminado del usuario (por ejemplo, Mozilla Thunderbird, Microsoft O utlook o Apple Mail) pata que éste
pueda escribir un mensaje de correo electrónico a b dilección vincubda. La figura 2.4 muestra este tipo de anda. Las
líneas 13 y 14 contienen un vínculo de correo electrónico. 1.a forma de un ancb de correo electrónico es <a h r e f =
“mailto:d¡fmTfonG»rrrt»">...</a>. En este caso, creamos un vínculo a b dirección de correo d e ite lO d e ite l .com. La
línea 13 incluye b dirección de correo electrónico com o aparecerá en el mensaje visualizado en el navegador.
1
<!D0CTYPE html>
2
3
4
3
6
7
8
9
10
11
12
13
14
13
26
17
18
<1-- Fig. 2.4: contacto.html — >
<!-- Crear un vinculo a una dirección de correo electrónico. — >
<htnl>
<head>
<meta charset • "utf-8">
<t1tle>Pág1na de contacto</t1tle>
</head>
<body>
<p>
Para escribir a <a href ■ "mailto:de1tel0de1tel.com">
Deitel & Associates, Inc.</a>. haga clic en el vA1acute;nculo y su cliente
de correo predeterminado abrirá un mensaje y lo dirigirAaacute; a nosotros.
</p>
</body>
</html>
P$g*nt d« confíete
C
Sooi ujgtráot
» ^
1»r///C7ejímplos/cap02/cooucto.html
1
o
=
feSkf G*kry CJ I*»portado d«tecm -
Para «cribe a D c íd & Aisoeur«_ 'flc haga clic en el -*w:vio y ro cictirc de correo predetertranado ¿fcnrá un
m n u y y lo dsuva a ooiocrc*
Figura 2 .4 | Crear un vínculo a una dirección de correo electrónico (parte l de 2).
2.7
jj A *
• 'j*
fO
M
N
M
«tM
l
Imágenes
45
W
*
W
t#
o
«
r%
u
« W
S
ih
TW
»—anta »
•A
'a
' 5 H *
\
n a
&
s
- i
i
f
w
i.
»
«
»
;
P
r
visto—
C
W
á
l
M
V
r r
- x,
a n
i
4
h
a
n
a
ro
c
o
a
n
o
in
o
M
irrt vetm* •'•nirei*
h
aM
m
J 9tiuem**0i
•
tontam
v
c
d
t e
_
_
_
_
_
_
_
_:_
_
_
_
_
_
_
_
_
_
_:_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
p
«
«,
i■
^
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
jjfflr_
A
nM
*
S
ti
Figura 2.4 | Ciear un vínculo a una dirección de correo electrónico (parte 2 de 2).
2.7
Imágenes
Ya m ostram os cóm o marcar docum entos que sólo contienen texto, pero las páginas W eb tam bién pueden con­
tener imágenes, anim aciones, gráficos, sonidos e incluso videos. Los formatos de imágenes más popu lares que
utilizan los desarro IIadores W eb en la actualidad son: PN G (Gráficos portables de red) y JPEG (Grupo de expertos
unidos en fotografía). Los usuarios pueden crear imágenes m ediante el uso de software especializado, com o
Adobe P hotoshop Express (www.photoshop.com), G .I.M .P. (www.gimp.org), Inkscape (w w w .inkscape.org) y
m uchos más. Tam bién es posible adquirir imágenes de varios sirios W eb, m uchos d e los cuales ofrecen imágenes
libres de regalías (figura 2.5); lea los térm inos de servicio de cada sitio para determ inar si necesitará permiso
para usar sus imágenes, en especial en aplicaciones comerciales con fines de lucro. La figura 2 .6 dem uestra cóm o
incluir imágenes en páginas Web.
Sitio para compartir imágenes
URL
Flickr*
M y w .fl1 c k r.c o n
Photobucket
FotkT
dcviantART
Pieasa ~
TinyPic*
p h o to b u c k e t.c o n
M yw .fotk1.com
M yw .devlant a r t.c o m
p 1 c a s a . 9 0 0 9 le .c o m
tin y p lc .c o n
ImageShaclc
FrccD igitaIPhotos.nct
M yw .1m ageshack.us
Open Stock Photography
Open Clip Art Library
M y w .o p e n s t o c k p h o t o g r a p h y . o r g
M y w .f r e e d 1 g 1 ta lp h o to s .n e t
M y w .o p e n c 1 1 p a rt.o rg
Figura 2.5 | Sitios populares para compartir imágenes.
46
Capítulo 2
Introducción a HTML5: parte I
1 <!DOCTYPE htn1>
2
3
4
J
e>
<1— Fig. 2 .6 : imagen.html —>
<1— In c lu sió n de imágenes en archivos de HTML5. -->
<ht«il>
<head>
7
o i e t a c h a rs e t = “u t f - S M>
•
<title>Ifrágenes</title>
•
10
11
< /h e a d >
<body>
12
13
14
13
16
17
18
<p>
<img s r c
a lt »
<ing s r c
a lt a
</p>
</body>
</html>
= "cpphtp.png" wldth = “92” height = “ 120"
"Portada del l i b r o C++ How t o Progra«">
« "jh tp .pn g" width - “92" height « "120”
"Portada del l i b r o lava How to Progra«">
la pestaña muestra el contenido del elemento t i t l e
X Akk
févotrto*
0
W p fcS it» Cn>w y •
"l
> ct
*
□
•
*
I
•*
*
»«9* t e -
S a ld a d *
H « n a fn * n U i •
f)
Potete «
«r,iw
Mo-U.
*
| Modopretexte d*n<!.,.do
f» • *%115% *
Figura 2.6 | Inclusión de imágenes en archivos de HTML5.
Las líneas 13 y 14 usan un d e m e n to in g para incluir una imagen en el docum ento. La ubicación del archi­
vo de la im agen se especifica m ediante el a tr ib u to s r c (origen). E sta imagen se encuentra en el mismo directorio
que el docum ento de H T M L 5 , por lo que sólo se requiere su nom bre de archivo. A esto se le conoce com o
ru ta relativa: la imagen se alm acena en form a relativa a la ubicación del docum ento. Los arributos opcionales
w ld th y h e ig h t especifican las dim ensiones de la im agen. Para escalaran* imagen podem os au m en tar o reducir
los valores de b s atributos w ldth y h e ig h t. Si se o m iten estos atributos, el navegador usa b s vabres actuales de
anchura (wi d th ) y altura (h e ig h t). Las imágenes se m iden en píxclcs (“elem entos de imagen"), que representan
puntos de c o b r en la pantalla. Los program as de edición de imágenes m uestran las dim ensiones en píxclcs. La
im agen en la figura 2.6 tiene 92 pixeles de anchura y 120 de altura.
Tip de rendimiento 2.1
Siempre debe incluir ¡os valores de losparámetros wldth y height de una imagen en la etiqueta <1mg>de modo
que. cuando el navegador cargue el archivo de HTM1.5, sepa cuánto espacio de pantalla debeproporcionar y
pueda visualizar ¡apágina enforma correcta, incluso antes de descargar la imagen. Si se incluyen los atributos
trídthy height en una etiqueta <1mg> el navegadorpodrá cargary desplegar ¡aspáginas con mayor rapidez.
2.7
Imágenes
47
Observación de apariencia visual 2.2
Si se introducen nuevas dimensiones para una imagen de modo que cambie su relación altura-anchura, la
apariencia de esa imagen se distorsionará. Para evitar ¡a distorsión, sipor ejemplo su imagen tiene 200póceles de
anchuray 100pócela de altura, cualquier nueva dimensión debe mantener la relación anchura-altura de2:1.
2.7.1 Atributo al t
Son diversas las razones por las que, en ocasiones, u n navegador no puede desplegar una imagen. Tal vez no so­
porte imágenes (com o es el caso d e los navegadores de sólo texto) o es posible que el cliente haya desactivado la
visualización de imágenes para reducir el tiem po de descarga. C ad a elem ento img en un docum ento de H T M L 5
debe tener u n atributo a l t. Si el navegador no puede desplegar una im agen, debe m ostrar el valor del atributo
a l t . La figura 2.6 m uestra cóm o el navegador Internet Explorer despliega un sím bolo X de color rojo y el valor
del atrib u to a l t para indicar que no pudo encontrar la imagen (jh tp .p n g ).
El atrib u to a l t tam bién es im p o rtan te por cuestión d e accesibilidad: el software sintetizador de voz
puede p ronunciar el valor del atrib u to a l t en voz alta, de m odo que un usuario con discapacidad visual pueda
com prender lo q u e el navegador está visualizando. Por esta razón el atrib u to a l t debe describir el co n ten id o
de la im agen.
2.7.2 Elementos vacíos
Algunos elem entos de H T M L 5 (conocidos com o d e m e n ta s vacíos) sólo contienen atributos y no marcan
sexto (es decir, no se coloca texto entre una etiqueta de inicio y o tra de fin). A unque esto no es obligatorio en
H T M L 5, para term inar los elem entos vacíos (com o el elem ento img) podem os usar el carácter de barra d ia ­
gonal ( / ) dentro del paréntesis angular derecho de cierre (>) de la etiq u eta de inicio. Por ejem plo, las líneas 15
y 16 podrían escribirse así:
<1ng s r c - "jhtp.png" width - "92" h eig h t - "120"
a l t - "Portada del l i b r o lava How to Program"/>
2.7.3 Uso de imágenes como hipervínculos
Al usar imágenes com o hipervínculos podem os crear páginas Web gráficas que vinculen a otros recursos. En
la figura 2 .7 creamos cinco hipervínculos de im agen distintos. A l hacer clic en una im agen en este ejem plo, el
usuario será transportado a la página W eb correspondiente, uno de los otros ejemplos en este capítulo.
I
<!DOCTYPE html>
< ! - - Fig. 2 .7 : nav.html —>
< ! - - Imágenes como anclas de vínculos. -->
chtml >
<head>
<meta c h a rs e t = "u tf-8">
< title > B a rra de navegaciAoacute;n</title>
</head>
Figura 2 .7 | Imágenes como anclas de vínculos (parte I de 2).
48
Capítulo 2
11
12
13
14
15
16
<body>
<p>
Introducción a HTML5: parte I
<a h r e f = " v incu1os.html"»
<1ng s r c - " b o to n e s/v ín c u lo s.jp g " wldth - “65"
helght = "SO" a l t « "V8lacute;nculos"»
</a>
17
IS
14
20
21
<a h r e f . “l i s t a . h t a l " »
<1mg s r c ■ " b o t o n e s / l i s t a . j p g ” wldth » "65"
helght = "SO" a l t = " L is ta de funciones"»
</a>
22
23
24
25
26
27
28
24
30
31
32
33
34
35
36
37
38
39
<a h r e f ■ "contacto.htm l"»
<1«g s r c = " b o to n e s/c o n tac to .jp g " width = "65"
height = "50" a l t = "Contacto"»
</a>
<a h r e f ■ " ta b la l.h tm l" »
<1mg s r c = " b o to n e s / ta b la .jp g ” width = "65"
height = "50" a l t = "P toacute;gina de ta b la s"»
</a>
<a h r e f « “fo rm u la rio .h t« l" »
<i«g s r c = "boto n es/fo rm u lario .jp g " width = “65"
height = " 5 0 " a l t ■ "Formulario de retroalim entación"»
</a>
</p>
</body>
</html>
j
,
E««f d t
C
* \
___________________________________________________________________
D fBe///C/íjcmplos/cap02/n*v^tml
S4>01 u>?V'óo\
Wtfc Shct G*1t* i o
5
Importodo de InUtr..-
Figura 2.7 | Imágenes como anclas de vínculos (parte 2 de 2).
Las líneas 13 a 16 crean un h ip e rv ín e u lo de im ag en , para lo cual anidan un elem ento img en u n elem ento
ancla. El valor del atributo s rc del elem ento img especifica q u e esta imagen ( v in c u lo s .jp g ) reside en u n direc­
torio llamado b o to n es. El directorio b o to n es y el docum ento de H T M L 5 se encuentran en el mismo directorio.
Tam bién es posible hacer referencia a las imágenes de o tro s docum entos W eb si configuram os el atrib u to s r c
con el nom bre y la ubicación de la imagen. Si hace referencia a una imagen en otro sitio Web, el navegador tiene
que solicitar el recurso de im agen del servidor de ese sitio. [Nota:$\ usted hospeda una página W eb disponible al
público que utilice una im agen de o tro sitio, debe obtener perm iso para usar esa im agen y hospedar una copia
de la m ism a en su propio sitio Web. EJ propietario de la imagen podría solicitar que usted reconozca su obra.] Al
hacer clic en el hipervíneulo de una im agen el usuario se tran sp o rta a la página W eb especificada por el atrib u to
h r e f del elem ento ancla circundante. Al colocar el ratón sobre un vínculo de cualquier tipo, aparece el U RL al
que apunta ese vínculo en b barra de estado en b parte inferior de b ventana del navegador.
2.8
2.8
Caracteres especiales y reglas horizontales
49
Caracteres especiales y reglas horizontales
Al marcar texto, puede ser difícil incrustar ciertos caracteres o sím bolos directam ente en un docum ento de
H T M L 5. Algunos teclados no tienen estos sím bolos (com o ©) o su presencia en el marcado puede provocar
errores de sintaxis (com o con <). Por ejemplo, el marcado:
<p>si x < 10 e n to n c e s in c re m e n ta r x en l</p>
produce un error de sintaxis ya que usa el carácter m enor q u e (<), que está reservado para las etiquetas de inicio y
de fin tales com o <p> y </p>. H T M L 5 cuenta con referencias a entidades de caracteres (de la form a & código;)
para representar caracteres especiales (figura 2.8). Podríamos corregir la línea anterior si escribiéramos lo siguiente:
<p>si x A lt; 10 e n to n c e s in c re m e n ta r x en 1</P>
ya que utiliza la referencia a entidad d e carácter Al t; para representar el sím bolo m enor q u e (<). [Nota: antes
de H T M L 5 , se requería la referencia a entidad de carácter Aamp; para m ostrar el sím bolo Aen una página Web,
pero ya no es así.]
Símbolo
Descripción
Referencia a entidad de carácter
Entidades de caracteres de H TM L5
ampersand
Aamp:
apóstrofo
to p o s;
>
mayor que
>
<
menor que
A lt;
com illa
Aquot
Otras entidades de caracteres comunes
Anbsp;
espacio sin separación
copyright
Acopy:
guión largo
A ndash;
guión corto
Andash;
14
fracción 1/4
AfraC14;
Vi
fracción 1/2
& fra c l2 ;
Yk
fracción 3/4
A fra c 34;
puntos suspensivos
A h ellip ;
marca registrada
Areg:
sección
Asect;
marca registrada
Atrade;
iO
—
Figura 2.8 | Algunas referencias a entidades de caracteres de HTML.
La figura 2.9 dem uestra cóm o usar caracteres especiales en un docum ento de H T M L 5 . Si desea ver una
Esta com pleta de entidades de caracteres, consulte
www.w3.org/TR/REC-html40/s g m l/e n tltle s .h tm l
50
1
Capítulo 2
Introducción a HTML5: parte I
<!DOCTYPE h t*l>
2
3
4
3
6
7
8
9
10
11
12
13
14
13
18
17
18
19
20
21
22
<!— Fig. 2 .9 : contacto2.htm l -->
<1-- In se rció n de c a r a c te r e s e s p e c i a l e s . -->
<htai1>
<head>
« t e t a c h a rs e t » "u tf-8">
<title>PAaacute;gina de c o n ta c to < /t1 tle >
</head>
<body>
<p>
<a h r e f » “n a 1 1 t o : d e i t e l $ d e i t e l .com”>EnvAiacute ;e un correo a
D eitel Aamp; A s so c ia te s, Inc.</a>.
</p>
<hr> <1-- i n s e r t a una r e g la h o riz o n ta l -->
< ! - - los c a r a c te r e s e sp e c ia le s se introducen -->
< !— usando la forma Acode; —>
<p>Toda l a informaciAoacute;n en e s te s i t i o es <strong>Acopy;
D eitel A A ssociates, Inc. 2 0 1 2 .</strong> </p>
23
24
23
26
27
28
29
30
31
32
33
34
< !— para subrayar te x to use e l elemento <del> —>
< ! — para u sa r subíndices en e l te x to use el elemento <sub> -->
<1— para u sa r su p e rin d ic es en el te x to use el elemento <sup>
< ! - - e s to s elementos e stá n anidados d entro de o t r o s elementos -->
<p><del>Puede descargar 3 .1 4 x 10<sup>2</sup>
c a r a c te r e s de informadAoacute;n de e s t e s i t i o . < / d e l >
El primer elemento en l a s e r i e es x<sub>l</sub>.</p>
<p>Nota: Alt; Afracl4; de la informaciAoacute;n
que se p re se n ta aquAlacute; se a c t u a l i z a a d ia rio .< /p >
</body>
</html>
Pi9¡n* ót corteo
J
C
2
)
5<t»oi tw 9 4 f .^ t
*
2 W * S ü 6 S 6 i* « ry
Q l n p c i U d c d d lrio m ..
Todi la información « ts ic «bo es t Deitel
Po rrir
ó r+ ra t f r* •
E
f*le///Cyejem plos/C3p02/cortUcto2.htm l
) ■*s i 0f rn rn ctfrri é
Associates. lac. 2012.
r wá * rm a ? * n ó ?
rife
vbc
E l y trtz tn firmcoto en U lene es x¡
Noca < V; de U wfonna^oo que se pcesenui aq» se anuahra a «iano
Figura 2.9 | Inserción de caracteres especiales.
El párrafo en las líneas 12 a 15 perm ite al usuario hacer clic en el vínculo para enviar un correo electrónico
a D eitel & Associates, Inc. En este caso, representam os el carácter A con la referencia a b entidad de carácter
Aamp; para m ostrar que de todas formas funciona, aun cuando no se requiera en H T M L 5 .
2.9
Listas
51
Además de los caracteres especiales, este docum ento introduce una regla h o riz o n ta l, la cual se indica m e­
diante la etiqueta <hr> en la línea 17- La m ayoría de los navegadores despliegan una regla horizontal com o una
línea horizontal con espacio adicional p o r encim a y por debajo de ella. C o m o profesional verá m ucho código
antiguo, lo que se conoce com o código heredado. El elem ento de regla horizontal debe considerarse elemento
heredado, por lo que es preferible evitar su uso. C o m o aprenderá más adelante, podem os usar CSS para agregar
regias horizontales y otros elem entos de form ato a los docum entos.
Las líneas 21 y 22 contienen o tro s caracteres especiales, que pueden expresarse com o referencias a en ti­
dades de caracteres (se codifican m ediante el uso de abreviaciones de palabras com o © para copyright)
o referencias a caracteres n u m érico s: valores decimales o hcxadccim alcs (hex) que representan caracteres
especiales. Por ejem plo, el carácter & se representa en notación decimal y hcxadecim.il com o & y *#x26;,
respectivamente. Los núm eros hexadecimaies son núm eros en base 16: los dígitos en un núm ero hexadecimal
tienen valores de 0 a 15 (un total de 16 valores distintos). Las letras A a b F representan los dígitos hexaded males correspondientes a los valores decimales 10 al 15- Por ende, en notación hexadecim al podem os tener
núm eros com o el 876 que consistan únicam ente de dígitos similares a los decimales, números com o D A 19F
que consistan de dígitos y letras, y núm eros com o D C B que consistan sólo de letras. En el apéndice E , Sistemas
numéricos, veremos los núm eros hcxadccimalcs con detalle. Este apéndice está disponible en línea en viwu.
d e i t e l . com/books/1w3htp5/.
En las líneas 28 a 30 introducim os cuatro elem entos nuevos. La m ayoría de los navegadores despliegan el
elem ento d e l com o texto subrayado. C o n este form ato, los usuarios pueden indicar revisiones de docum entos.
Para poner texto en su p e rín d ic e (colocar el texto encim a de la línea base y en un tam año d e fuente reducido)
o su b ín d ic e (colocar el texto debajo de la línea base y en un tam año de fuente reducido) use el elem ento sup o
sub, respectivamente. Tam bién usamos la referencia a la en tid ad de carácter A lt; para un signo m enor que y
& fra c l4 ; para la fracción 1/4 (línea 31).
2.9
Listas
Ahora le mostraremos cóm o usar listas en una página W eb para organizar contenido cuya naniralcza sea similar. La
figura 2.10 muestra texto en una lista desordenada (es decir, una simple lista con viñetas que no ordena sus clcmen» s por leua o núm ero). El elemento de lista desordenada ul (líneas 16 a 22) crea una lista en donde cada elemento
comienza con un sím bolo de viñeta (por lo general un circulo relleno). Cada entrada en una lista desordenada es un
dem ento 11 (d e m e n to de lista) (líneas 18 a 21). La mayoría de los navegadores W eb despliegan cada elemento
11 en una nueva línea con un símbolo de viñeta y con sangría a partir del principio de la línea.
I <!D0CTYPE htn1>
2
3 < ! - - Flg. 2.10: v1nculos2.html —>
4 < ! - - L is ta desordenada que contiene h ip erv ín cu lo s. -->
5 <ht*l >
<head>
6
«meta c h a rset = "utf-S">
7
8
<t1 tie>V41 acu t e ;neul os</t1 t i e>
</head>
9
10
<body>
II
12
<hl>Estos son mis s i t i o s fav oritos< /hl>
13
<p><strong>Haga c l i c en un nombre para i r a e sa página</strong></p>
Figura 2 .1 0 | Lista desordenada que contiene hipervínculos (parte I de 2).
52
14
15
16
17
18
19
20
21
22
23
24
Capitulo 2
Introducción a HTML5: parte I
<1 — c r e a r una l i s t a desordenada -->
<ul>
< !— l a l i s t a contiene cuatro elementos de l i s t a -->
<li><a h r e f = ‘,http://www.youtube.com">YouTube</a></li>
<li><a h r e f = Mhttp://wiiw».*»1k1ped1a.org,,>Wlkiped1a</a></l1>
<H><a h r e f ■ "h t t p ://*»»**• amaz on. co«»” >Amazon </a> </l 1>
<li><a h r e f = "http://www.linkedin.co«T>LlnkedIn</a></H>
< /u l>
</body>
</html>
j
£ vmcMioi
C
*
ü
f» ie//A y € í« 4 n p ío s/cap 0 2 A íin cu !o s2 .h tm J
64*94ixózx
tiri.S /-
Sl<8 Q é ü é £ 3 Imperta de dé ZnUm
*
Estos son mis sitios fav o rito s
H a g a clic en mn n o m b re p a ra ir a ova pagina
•
VoqTnbc
•
Anvt^on
•
L r i i f din
J
•
F igura 2 .1 0
Lista desordenada que contiene hipervinculos (parte 2 de 2).
listas anidadas
Las lisias pueden estar anidadas para representar relaciones jerárquicas, com o en u n esquem a multinivel. La
figura 2.11 dem uestra el uso de las listas a n id a d a s y las listas o rd en ad as. El elem ento de lista ordenada ol crea
una lista en la que cada elem ento empieza con un núm ero.
En m uchos navegadores, se colocan viñetas antes de los elem entos en la lista desordenada m ás externa
(líneas 15 a 55). A hora bien, en m uchos navegadores se colocan viñetas circulares sin relleno antes de los ele­
m entos de la lista anidada que está dentro de la lista desordenada de la línea 15. U n navegador W eb aplica
sangría a cada lista anidada para indicar una relación jerárquica. La prim era lista ordenada (líneas 29 a 33)
incluye dos elem entos. Los elem entos en una lista ordenada se enum eran com o 1., 2., 3. y así en lo sucesivo.
Las listas ordenadas anidadas se enum eran de la m ism a forma. A unque no se dem uestra en este ejem plo, por
lo general se colocan viñetas cuadradas antes de los elem entos subsiguientes de las listas desordenadas anidadas.
Los estilos de las viñetas pueden variar según el navegador.
1
<! DOCTYPE htftl>
2
3
< !— Fig. 2.11: I1 sta .h tm l —>
4
<1— L i s t a s a n id a d a s y l i s t a s d e so rd e n a d a s. -->
5
6
<ht«l>
<head>
Figura 2 .1 1 | Listas anidadas y listas desordenadas (parte l de 3).
2.9
7
8
9
10
11
12
13
14
15
16
17
18
19
Listas
«ateta ch a rset = ‘‘u tf - S ”»
< rltle> lista s< /title >
</head>
<body>
<hl>Las mejores c a r a c te r & ia c u te ; s tlc a s de In tern et< /h l>
< 1-- c r e a r una l i s t a desordenada -->
<ul>
<H>Puede conocer nuevas personas de pa&iacute ;ses de todo
el mundo.</l1>
<11>
Tiene acceso a lo s nuevos medios a medida que se hacen piuacute;bllcos:
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
43
46
47
48
49
50
51
32
53
54
55
56
37
<1— e sto empieza una l i s t a desordenada anidada, que usa una —>
<! — v iñ e ta d i s t i n t a . La U s t a termina a l
-->
<1— c e r r a r la e t i q u e t a <ul>. -->
<ul>
<H>Nuevos juegos</!1>
<!1>Nuevas a p lic a c io n e s
< 1 -- U s t a ordenada anidada —>
<ol>
<H>Por negocios</l1>
<H>Por placer< /l1>
</ol>
V 11 > < I-- termina elemento 11 que i n i c i ó en l a lin e a 27 y que llama
a nuevas a p licacio n es —>
<H>Not1cias la s 24 horas</l1>
<H>Motores de búsqueda</11>
<H>Compras</11>
<H>Programación
<!-*- o t r a l i s t a ordenada anidada -->
<ol>
<11>XML</11>
<l1>3ava</H>
<11 >HTWL5</11 >
<H>3avaScr1pt</l1>
<H>Nuevos lenguajes</l1>
</ol>
</H> <!--term 1na elemento 11, llamado programación, que I n i c i ó en l a
l i n e a 38 -->
</ul> <1-- term ina l a l i s t a anidada de l a lin e a 24 -->
</l1>
<H>vínculos</l1>
<H>Mantenerse en co n ta cto con v ie jo s amigos</l1>
<11>Es l a te c n o lo g 4ia c u te;a del futuro</l1>
</ul> < !— termina la l i s t a desordenada de l a lin e a 15 -->
</body>
</html>
Figura 2 .1 1 | Listas anidadas y listas desordenadas (parte 2 de 3)
53
54
Capitulo 2
Introducción a HTML5: parte I
,
/
D
---------------------------------------•.... • =
C
f'te///Yye'jemj>ios/cap02/i«st«r«tml
S « td sw gtñdM
_________________
=
Web Sitce 6e*ery C ) Im p e rtid o be irtt m ..
4
L a s m e jo r e s c a r a c t e r í s t ic a s d e I n t e r n e t
• Pucdr ccoocct neva» períoca» de paivrs de todo d auodo
• T*t* ncc«o a lo* corvo» n*do* a roecMa que se hacen pubkos
o Nuevo» juego»
o Nuevas apfcacáoaes
0
o
°
o
1 Por argoctot
2 Por placer
Sotoáa» b s 24 boca»
Molotes de b ésq u d i
Compras
Ptnw.MWA-i.Nn
1 XML
2 Java
3 KTML5
4
J a v a S c i^ r t
5 Nuevos lenguajes
• Vinculo»
• Mantenerse en contacto con \iejo» acoges
• E» la trcook>p* dd fuhoo
|
Figura 2.11 | Listas anidadas y listas desordenadas (parte 3 de 3).
2.10
Tablas
Las tablas se utilizan con frecuencia para organizar datos en filas y columnas. N uestro prim er ejem plo (figura
2.12) crea una rabia con seis filas y dos colum nas para m ostrar la inform ación de precios d e varias finitas. Las
rabias se definen m ediante cl elem ento t a b l e (líneas 13 a 58). I-a linca 13 especifica la etiqueta de inicio del
elem ento c a b le . El atrib u to b o rd e r con el valor “l ” especifica que el navegador debe colocar bordes alrededor
de la tabla y alrededor de sus celdas. Éste es un atrib u to de herencia que se debe evitar. C uando hablem os de
CSS3, en cl capítulo 4 , utilizarem os la propiedad b o rd e r de CSS, que es la form a preferida para dar form ato a
los bordes de un elem ento ta b le .
El elem ento c a p tio n (líneas 17 y 18) especifica el título de una tabla. Por lo general, en este elem ento el
texto se despliega por encim a de la rabia. Además es una buena práctica incluir una descripción general de la in­
form ación de la tabla en el a trib u to s u m a ry del elem ento ta b l e: una de las m uchas características de H T M L 5
que hacen a las páginas Web más accesibles para los usuarios con discapacidades. Los dispositivos de voz usan
este atributo para que la tabla sea m ás accesible a los usuarios con discapacídad visual.
1
<!D0CTYPE htnl>
2
3
4
5
6
7
<!— Fig. 2.12: t a b la l.h tm l —>
< ! - - Creación de una ta b la básica. — >
<ht«l>
<head>
o te t a c h a r s e t » “u tf-8 " >
Figura 2 .1 2 | Creación de una ta b la b á sica (p a rte 1 de 3 ).
2.10
•
<t1tle>Una t a b l a de H7WL5 sim ple< /t1tle>
9
</head>
10
11
<body>
12
< ! — l a e t i q u e t a <table> abre una t a b l a —>
13
< table border * “1">
14
13
< I— l a e t i q u e t a <capt1on> s i n t e t i z a e l contenido de —>
16
<1— l a t a b l a ( e s t o ayuda a l a s personas con dlscapacldad v i s u a l ) -->
17
<capt1onxstrong>Tab1a de f r u t a s ( l e r a columna) y
18
sus p recios (2da co lu m n a)< /stro n g x /c a p tio n >
19
20
< !— l a sección <thead> aparece primero en la t a b l a -->
21
< 1— da formato a l área del encabezado de l a ta b la —>
22
<thead>
23
< t r > < ! - - <tr> i n s e r t a una f i l a en l a t a b l a -->
24
<th>Fruta</th> <!— I n s e r t a una celd a de encabezado -->
23
<th>Precio</th>
26
< /tr>
27
</thead>
28
29
< !— la sección <tfoot> aparece al últim o en l a t a b l a —>
30
< ! — da formato al pie de l a ta b la -->
31
<tfoot>
32
<tr>
33
<th>Total</th>
34
<th>$3.75</th>
33
< /tr>
36
< /tfo ot>
37
38
<1— todo el contenido de l a t a b l a e s t á encerrado —>
39
< ! — dentro del elemento <tbody> —>
40
<tbody>
41
<tr>
42
<td>Manzana</td> < !- - I n s e r t a una celda de datos -->
43
<td>$0.25</td>
44
< /tr>
43
<tr>
46
<td>Naranja</td>
47
<td>$0.S0</td>
48
</tr>
49
<tr>
30
<td>PlAaacute;tano</td>
31
<td>$1.00</td>
32
</tr>
33
<tr>
34
<td>Pi Ant11d e ;a</td>
33
<td>$2.00</td>
36
< /tr>
37
</tbody>
38
</table>
59
</body>
60 </h tul >
Figura 2 .1 2 | Creación de una tabla básica (parte 2 de 3)
Tablas
55
56
Capitulo 2
Introducción a HTML5: parte I
t>sj !*bUó*KTMLi btD, K ^
C
Wey/AyejempíoVcapOi
[ *) S « t U ^+ndC I
=
V ite SU# C#li«#r
Tahla d* fritas
Titulo de la tabla
(lora columna) y
precio* (2da
')
Encabezado de la tabla
F rita [Pt k »
so
25
SO 50
Cuerpo de la tabla
jm u n o
Borde de la tabla
SI 00
S2 00
Re de la tabla-
[T o o l
S.V"?
Figura 2.12 j Creación de una tabla básica (parte 3 de 3).
Una tabla tien e tres secciones d istin tas: e n c a b e z a d o , c u e rp o y p ie . La sección d e encabezado (o celda
de encabezado) se define m ed ian te un e lem en to th e a d (líneas 2 2 a 27), la cual c o n tie n e in fo rm ació n sobre
el encabezado ral com o los n o m b res de las co lu m n as. C ad a elem en to t r (líneas 23 a 26) define u n a sola
fila d e la ta b la . Las columnas en b sección th e a d se definen co n elem en to s th . La m ayoría d e los navega­
d o re s centran el texto con form ato de los elem en to s th (colum na de encabezado d e la tabla) y lo m u estran
en negrita. Los elem entos d e encabezado d e la tabla (líneas 24 y 25) están anidados d e n tro d e los elem en to s
de fila d e la tabla.
La sección del cuerpo, o c u e rp o d e la ta b la , con tien e los datos prim arios de ésta. El cuerpo d e la tabla
Orneas 40 a 57) se define en un elem ento tbody. E n el cuerpo d e la tabla, cada elem ento t r especifica una fila.
Las celdas d e d a to s contienen piezas individuales de datos y se definen con elem entos td (d a to s d e tabla)
en cada fila.
La sección t f o o t (líneas 31 a 36) se define con un elem ento t f o o t (pie de tab b ). Por lo com ún, el texto
que se coloca en el pie incluye resultados de edículos y notas a l pie. Aquí introdujim os el to tal d d cálculo en forma
manual. En capítulos posteriores le m ostrarem os cóm o realizar dichos cálculos en form a dinám ica. Al igual que
otras secciones, b sección t f o o t puede contener filas de ta b b y cada fib puede contener celdas. C o m o en la
sección th ead , las celdas en la sección del pie se crean m ediante el uso de elem entos th en vez de los elem entos
td que se usan en el cuerpo de la ta b b . Antes de H T M L 5 era obligatorio q u e la sección t f o o t apareciera sobre
la sección tbody de b ta b b . A partir de H T M L 5 , b sección t f o o t puede estar encima o debajo de b sección
tbody en el código.
E n este ejem plo sólo especificamos los datos de la tabla y no su formato. C o m o puede ver, en el form ato
predeterm inado del navegador cada colum na es tan ancha com o su elem ento m ás grande; adem ás la tabla en
sí no es visualm ente atractiva. E n el capítulo 4 usaremos CSS para especificar los form atos de los elem entos de
H T M L 5.
Uso de ro t/sp a n y c o ls p a n con tablas
E n b figura 2 .1 2 exploramos b estructura de una ta b b básica. La figura 2.13 presenta o tro ejemplo de tabla e
introduce nuevos atributos que le perm itirán crear tablas más complejas.
La ta b b empieza en la línea 14. E l tam año de bis celdas de la tabla se ajusta a los datos que contienen, pero
podem os controlar el form ato de una ta b b m ediante el uso de CSS3. Es posible crear celdas que se apliquen
a más de una fib o colum na m ediante el uso de los atrib u to s rowspan y col span. Los valores que se asignan a
2.10
Tablas
57
estos atributos especifican el núm ero de filas o colum nas q u e ocupa u n a celda. El elem ento th d e las Eneas 22 a
25 usa el atrib u to rowspan - ‘2* para q u e la celda q u e contiene la im agen del camello pueda usar dos celdas
adyacentes en sentido vertical (por ende, la celda abarca dos filas). El elem ento th en las líneas 28 a 31 asa
el atrib u to co lsp an = “4" para aum entar la anchura de b celda del encabezado (que con tien e Comparación de
cam élidos y Fecha aproxim ada: 10/2011) de m odo que abarque cuatro celdas.
La linca 29 introduce el elem ento b r, que la mayoría de los navegadores despliegan com o un salto d e línea.
C ualquier m arcado o texto que siga después de un elem ento br se despliega en la siguiente Enea, que en este
caso aparece dentro del m ism o espacio de cuatro columnas. A l igual que el elem ento img, b r es u n ejemplo de
un elemento vacio. Al igual q u e el elem ento hr, b r se considera un elem ento d e form ato heredado cuyo aso
debemos evitar; en general, hay que especificar el form ato m ediante el uso de CSS.
1 < IDOCTYPE h t* l>
2
3
4
3
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
< ! - - F1g. 2 .1 3 : ta b la 2 .h tm l -->
< ! — T abla de HTML5 co m p leja. —>
<h tml >
<head>
o»eta c h a rset a “u t f - 8 M>
< t itle > T a b l a s < / t i t l e >
</head>
< body>
<hl>Ejemplo de tabla: combinado de f i l a s y columnas</hl>
< tab le border » “1">
<caption>Una t a b l a de muestra mAaacute;s compleja</caption>
<thead>
<1— lo s elem entos rowspan yco lsp an combinan e l número
-->
<1— e s p e c if ic a d o de c e ld a s en s e n tid o v e r t i c a l u h o r iz o n ta l
—>
< tr>
21
< |—
combina dos f i l a s -->
22
23
24
23
26
27
28
29
30
31
32
33
34
33
36
37
38
39
<th rowspan - “2">
<1mg s r c = "camello.png” width - “205"
height - "167" a l t - "Imagen de un camello con una jo rob a” »
</th>
< ! — combina c u a tr o colum nas — >
<th colspan » "4">
<strong>Comparación de caméI1dos</strong><br>
Fecha aproximada: 1 0 / 2 0 1 1
</th>
< /tr>
<tr>
<th># jorobas</th>
<th>Región indAiacute;gena</th>
<th>Escupe?</th>
<th>Produce lana?</th>
</tr>
</thead>
Figura 2 .1 3 | Tabla de HTML5 compleja (parte I de 2).
58
40
41
42
43
44
43
46
47
48
49
50
31
32
33
34
33
56
37
58
Capítulo 2
Introducción a HTML5: parte I
<tbody>
<tr>
<th>Camellos (b a c tr ia n o s )< / th >
<td>2</td>
<td>AfMca/Asia</td>
<td>Sí</td>
<td>SAiacute;</td>
</tr>
<tr>
<th>Llamas</th>
<td>l</td>
<td>MontaAntilde;as de lo s Andes</td>
<td>S&1acute;</td>
<td>SAiacute:</td>
</tr>
</tbody>
</table>
</body>
</ht«l>
C
Ü fi»e//A:/eye*npios/CAp02/tat>ia2.Mml
5-tioi tu j« n ¿ c «
Sbc« OHUr,
*£?
=
2D Im portado d< In u m .
Ejemplo ile tabla: esparcido de filas y columnas
Loa tabla de moetoa mas compfep
,Vv
UL
II y.
■ ¿oroba»
Camellas (bactnaaos)
Liamas
\rv,-.-> V *
1
Prod.ce la.a ’
Regio o iidigeaa
i
y i
Compareció. de camélidos
F « b a aproximada: 4 2011
Si
Si
Mootates de ios Andes Si
Si
Figura 2.13 | Tabla de HTML5 compleja (parte 2 de 2).
2.11
Formularios
Al navegar en sitios W eb, a m enudo los usuarios necesitan proveer inform ación tal com o consultas d e búsqueda,
direcciones de correo electrónico y códigos postales. H T M L 5 ofrece u n mecanismo conocido com o fo rm u la rio
para recolectar daros de un usuario.
Los datos que in tro d u cen los usuarios en u n a página W eb se envían por lo general a un servidor Web que
provee el acceso a los recursos de un sitio (com o d o cu m en to s de H T M L 5 . im ágenes, anim aciones, videos).
E stos recursos se en cu en tran en la m ism a m áquina q u e el servidor W eb o en una m áquina a la que el servi­
2.11
Formularios
59
d o r Web tiene acceso por m edio de In tern et. C uando un navegador solicita una página Web o un archivo
localizado en el servidor disponible en form a pública, el servidor procesa la solicitud y devuelve el recurso
solicitado. U na solicitud contiene el nombre y la ruta del recurso deseado, ju n to con el protocolo (m éto d o de
com unicación). Los docum entos d e H T M L 5 se solicitan y transfieren a través del Protocolo d e transferencia
de hipertexto (H T T P ).
La figura 2.14 es u n form ulario sim ple q u e envía los datos al servidor Web para su procesam iento. Por lo
general el servidor devuelve u n a página W eb que regresa al navegador Web; con frecuencia esta página indica
a los datos del form ulario se procesaron en form a correcta o no. [Nota: este ejem plo dem uestra sólo la fun­
cionalidad del lado diente. Si envía este form ulario (al hacer clic en Enviar), el navegador sólo m ostrará w*m .
d e 1 te l.c o m (el sitio especificado en el elem ento a c tlo n del form ulario) ya que aún no hem os especificado
cóm o procesar los datos del form ulario en el servidor. En capítulos posteriores presentarem os la programación
del lado del servidor (por ejem plo, en PH P, ASP. N ET' y JavaServer Haces) necesaria para procesar la inform ación
que se introduce en un formulario.)
I
<!DOCTYPE html>
2
3 <1— F1g. 2.14: formular1o.html —>
4 <1-- Formulario con un campo de te x t o y campos o c u lto s . -->
3 <html >
6
<head>
7
<«*eta c h a rset = " u t f - 8 ”>
8
< t1tle>Form ular1os</t1tle>
9
</head>
10
11
<body>
12
<hl>Formulario de retroal1mentación</hl>
13
14
<p>Llene e s te form ularlo para ayudarnos
15
a mejorar nuestro s i t i o . < / p >
16
17
<1-- e s t a e ti q u e ta empieza e l form ulario, in d ic a el -->
18
<1— método de enviar información y l a ubicación —>
19
< 1-- de l a secuencia de comandos de procesamiento del form ulario —>
20
<for«i nethod * “post" a c tlo n a “http://M M .de1te1.com ">
< ! - - l a s entradas o c u lta s contienen información —>
21
22
< 1— no v isu a l que también se en v ia rá -->
23
<1nput type = “hidden" ñame = “d e s t i n a t a r i o "
24
valué a " d e 1 tel0 d e 1te l.co m ”>
23
<Input type = "hidden" ñame a "asunto"
26
valué a "Formularlo de retroal1mentac1ón”>
27
<1nput type = "hidden" ñame = " r e d l r l g l r "
28
valué = " p r i n c i p a l . html">
29
30
<1— <1nput type = “te x t"> i n s e r t a un campo de te x to -->
31
<pxlabel>Nombre:
32
<1nput ñame a "nombre" type a “te x t" s l z e a "25"
33
maxlength - “ 30">
34
< /labelx/p>
33
Figura 2 .1 4 | Formulario con un campo de texto y campos ocultos (parte l de 2).
60
36
37
38
39
40
41
42
43
44
43
Capítulo 2
Introducción a HTML5: parte I
<p>
< 1-- lo s t i p o s de en trad a “ submit" y “ re s e t" in s e r ta n —>
< ! - - botones para enviar y b o rra r el contenido -->
< ! - - del form ulario, respectivamente -->
<1nput type = “submit" v alu é = “Enviar"»
<input type = “r e s e t " valué = "Borrar"»
</p>
</for«t>
</body>
</html»
j
[Xj fomutlfiOS
Ú rilc//Ayejempto5/cap02/formu anotan!
lugtrtáM
III
C
«s
4-
* V
A«t> >’*• ZéUry O ImpctUJc ó*
F o rm u la rio de re tro a lim e n ta c ió n
Lien* este fcravabnc para avudornot a mejccar nuestro wbo
Nombre
Eim« .|
1
Bon»
Figura 2 .14 | Formulario con un campo de texto y campos ocultos (parte 2 de 2).
A trib u to m eth o d d e l elem ento form
El form ulario se define en las líneas 20 a 43 m ediante u n elem ento form. El atrib u to method (línea 20) especifica
la form a en que se envían los datos del form ulario al servidor W eb. Si usam os method ■ post* se adjuntan
los datos del form ulario a la solicitud del navegador, que con tien e el protocolo (H T T P ) y el U RL del recurso
solicitado. Este m étodo de pasar datos al servidor es transparente, el usuario no ve los datos después de enviar
el formulario. El otro valor posible, method - 'g e t', ad ju n ta los datos del form ulario directam ente al final del
URL de la secuencia de com andos, en donde puede verse en el cam po Dirección del navegador. En el capítulo
17 veremos con detalle los m étodos post y get para enviar los datos del formulario.
A trib u to a c tio n d e l elem ento form
El atrib u to a c tio n en el elem ento form d e la línea 20 especifica el U RL de una secuencia de comandos en el
servidor Web que se invocará para procesar los datos del form ulario. C o m o todavía no hem os introducido la
program ación del lado del servidor, por ahora estableceremos este atributo en h ttp ://v * v w .d e ite l .com.
Las lincas 24 a 43 definen elem entos 1nput que especifican los datos que se van a proporcionar a la secuen­
cia de com andos que procesará el form ulario (tam bién se conoce com o manejador del Formulario). Existen
varios tipos d e elem entos d e entrada. U n tipo de en trad a se determ ina m ediante su atributo type. Este atrib u to
usa una entrada t e x t , una entrada subm it, una entrada r e s e t y tres entradas hidden.
E ntradas ocultas
Los form ularios pueden contener com ponentes visuales y no visuales. Los componentes visuales son los boto­
nes que pueden presionarse y o tro s com ponentes d e la interfaz gráfica de usuario con los que interactúan los
2.11
Formularios
61
usuarios. Los componentes no visuales, conocidos com o entradas ocultas (h id den) (líneas 23 a 28), almacenan
cualquier dato q u e especifiquemos, com o direcciones de correo electrónico y nom bres de archivos de d o cu m en ­
tas de H T M L 5 que actúan com o vínculos.
Los tres elementos in p u t ocultos en las líneas 23 a 28 tienen el atributo ty p e de h id d en , lo cual nos perm ite
enviar datos delformulario que no sean introducidos por el usuario. Las entradas ocultas son una dirección de correo
electrónico a la que se enviarán los datos, la línea del asunto del corroo electrónico y un URL que el navegador
abrirá después de enviar el formulario. Los otros dos atributos i nput son nane. que identifica el elem ento i nput
y valué, que provee el valor que se enviará al (o publicará en el) servidor Web. El servidor usa el atributo ñame
para obtener el v alu é correspondiente del form ulario.
Elemento input te x t
I a entrada t e x t en las líneas 32 y 33 inserta un campo de texto en el form ulario. Los usuarios pueden escribir
datos en cam pos de texto. El elem ento la b e l (líneas 3 1 a 34) provee a los usuarios inform ación sobre el p ro ­
pósito del elem ento in p u t. El atributo slz e del elem ento in p u t especifica el núm ero d e caracteres visibles en
el cam po de texto. El atributo opcional naxlength lim ita el núm ero de caracteres introducidos en el campo de
texto; en este caso, el usuario no puede escribir más de 30 caracteres.
Elementos Input: submlt y r e s e t
D os elem entos in p u t en las líneas 4 0 y 41 crean dos botones. El elem ento in p u t submlt es u n b o tó n . C uando
se presiona el b o tó n subm it, los datos del form ulario se envían a la ubicación especificada en el atrib u to a c tio n del formulario. El atrib u to valué establece el texto que se m uestra en el b o tó n . El elem ento in p u t r e s e t
perm ite a u n usuario restablecer todos los elem entos del form ulario a sus valores predeterm inados. El atributo
v a lu é del elem ento in p u t r e s e t establece el texto m ostrado en el b o tó n (el valor predeterm inado es Reset si
om itim os el atrib u to valu é).
Elementos de form ulario adicionales
En el ejemplo anterior vim os los elem entos básicos de los formularios de H T M L 5- Ahora presentarem os los
elem entos y atrib u to s para crear form ularios más complejos. La figura 2.15 contiene u n form ulario que solicita
retroalim entación al usuario con respecto a un sitio Web.
El elemento te x ta r e a (líneas 31 y 32) inserta un área de texto m ultiiínea en el form ulario. El núm ero de filas
ae especifica con el atributo rowsy el número de colum nas (caracteres por línea) con el atributo col s. En este ejem ­
plo, el elem ento te x ta r e a es de cuatro filas de alto y 36 caracteres de ancho. Para m ostrar texto predeterminado en
d elem ento te x ta r e a , coloque el texto entre las etiquetas < te x ta re a > y < /te x ta re a > . Podemos especificar texto
predeterm inado en otros tipos de i n p u t, com o los cam pos de texto, usado en el atributo v alu é.
I
< !DOCTYPE h tn l>
< ! - - Fig. 2.15: formular1o2.html —>
<1 — Formulario que usa una variedad de componentes. -->
< htnl>
<head>
«neta c h a rs e t = "utf-S"»
<t1t1e>Más fo rm u la rio s< /t1tle >
</head>
Figura 2 .1 5 | Formulario que usa una variedad de componentes (parte I de 4).
62
11
12
13
14
13
16
17
18
19
20
21
22
23
24
23
26
27
28
29
30
31
32
33
34
33
36
37
38
39
40
41
42
43
44
43
46
47
48
49
30
51
32
33
34
33
36
37
38
59
60
61
62
63
Capitulo 2
Introducción a HTML5: parte I
<body>
<hl>Formulario de retroalim entaciAoacute; n</hl>
<p>Llene e s te form ulario para ayudarnos
a mejorar nuestro s itio .< / p >
<form nethod = "post" a c tio n = "http://www.de1tel.com">
<input type = "hldden" ñame = " d e s tin a ta r io "
valué « "d eltelCdeitel.com">
<1nput type = "hldden" ñame = "asunto"
valué * "Formulario de retroallm en tad & oacute;n">
<1nput type = "hldden" ñame = " r e d i r i g l r "
v a l ú e s "p rin cip a l .html ">
< p x la b e l> Nombre:
<1nput ñame * "nombre" type * " t e x t" s i z e = “25">
< /labelx/p >
< 1-- < textarea> crea un cuadro de t e x t o m u l tllin e a -->
< p x l abel> Comentad os :<br>
< te x ta re a ñame = "comentarios”
rows = "4" c o is = "36">Escr1ba aquAiacute; los comentad o s .< /te x ta re a >
</l abel ></p>
< ! - - <input type ■ “password"> i n s e r t a un -->
< 1-- cuadro de te x to que aparece enmascarado con —>
< ! - - c a r a c te r e s de a s t e r i s c o s -->
<pxlabel>D irecciA oacute;n de correo electrA oacute;nico:
<1nput ñame - "email" type » "password" s i z e ■ " 2 5 " >
</label></p>
<p>
<strong>Cosas que le g u s ta ro n :< /stro n g x b r>
<1abe1>DiseAnt1lde;o del s i t i o
<1nput ñame s "cosasgustaron" type
valué ■ "Diseno"></label»
<label»VAiacute;nculos
<1nput ñame s "cosasgustaron" type
valué = "V 1n cu lo s"x /lab el>
<label>Fac1lidad de uso
<1nput ñame = "cosasgustaron" type
valué . " F á c i l i d a d " x / l a b e l >
<1abel>ImAaacute;genes
<1nput ñame = "cosasgustaron" type
valué » "Im agenes"x/label>
<label>CAoacute;digo fuente
<1nput ñame ■ "cosasgustaron" type
valué = "C od ig o"x /label>
</p>
< !-< !--
= "checkbox"
= "checkbox"
= "checkbox"
■ "checkbox"
■ "checkbox"
c in p u t type - “radio"» c re a un botón de —>
opción. La d if e r e n c ia e n tr e botones de opción -->
Figura 2 .1 5 | Fonmulario que usa una variedad de componentes (parte 2 de 4).
2.11
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
III
112
113
114
115
Formularios
< !— y c a s i l l a s de v e r if i c a c ió n es que só lo puede s e le c c io n a rse -<1— un botón de opción en un grupo. —>
<P>
<strong>CAoacute;mo llegAoacute; a n u e stro s1tio:</strong><br>
<label>Motor de bAuacuteisqueda
<1nput ñame = "com osltlo” type = “ radio"
valué ■ "motor búsqueda" c h e c k e d x / la b e l»
<labe1>VAiacute;nculos desde o tr o s i t i o
<1nput ñame = "comosltlo" type = "radio"
valué - “v 1 n c u lo " x / la b e l>
< la b e l> S itio Web Deitel.com
<1nput ñame = “comosltlo" type = " r a d io ”
valué = " d e i t e l .co m " x /la b e l>
<labe!»Referencia en un l i b r o
<1nput ñame = "comosltlo" type = "radio"
valué = " H b r o " x / l a b e l >
<1abe1 >0tro
<1nput ñame = "comosltlo" type = "radio"
valué - " o t r o " x / l a b e l >
</p>
<p>
<labe1>Ca1ifique nuestro s i t i o :
< ! — l a e t i q u e t a < select> presenta una l i s t a -->
< ! - - desplegable con opciones Indicadas por la s -->
< ! - - e ti q u e ta s <opt1on> —>
< se le c t ñame » " c a lif ic a c ió n " »
<option selected>Sorprendente</opt1on>
<op 11on >10 </op 11o n>
<op 11on >9</op 1 1on >
<opt1on>8< /opt1on>
<opt1on>7</option>
<option>6</opt1on>
<opt1on>5</opt1on>
<opt1on>4</opt1on>
<opt1on>3</opt1on>
<opt1on>2</opt1on>
<opt1on>l</opt1on>
<opt1on>Malo</opt1on>
< /select>
</label>
</p>
<p>
cinput type ■ "submlt" valué ■ "Enviar"»
<1nput type = " r e s e t" valué = “Borrar"»
</p>
</fom>
</body>
</html»
Figura 2 .1 5 | Formulario que usa una variedad de componentes (parte 3 de 4)
63
64
Capítulo 2
Introducción a HTML5: parte I
M«s«svn*jnci
■\
♦- • c
Mc.i',v .cc^ ::vlu^::. 'Z'ivu x o2.fitir
l
&<K1
J *cfc S"*C€C»»«% Zj
lt«T- .
F o r m u la r io ele re tro a llm e n ta c ió n
Lime ett* ^ u i i a k p « a j'.odanoi a n*?»orar m u r e abo
Nc«brc
CMDMBN
( f e r i e * M r.i i s a r a u r . ' . i i u i
D m cck * á» c o t a o e k c frw c o
(•»« q«a Urntami;
rWiW.<M«te R Vfcnáo.
F*-*US.V
Cm » llvfo a M auro lio».
Mote* <Sr b u t* » * fa •
(b ~ ) | te »
*fcvlr o o a u fe
S * * W a 6 D r4 * tíc « n
Rrfnnwurn « U t a
Oro
10
I
7
«
£
4
3
3
1
Figura 2.15 | Formulario que usa una variedad de componentes (parte 4 de 4).
El elemento in p u t password de la línea 39 inserta un cuadro de contraseña con el atributo s iz e especificado
(núm ero máximo de caracteres mostrados). Un cuadro de contraseña permite a los usuarios introducir información
confidencial, com o los núm eros de tarjetas de crédito y las contraseñas, al “enmascarar" la información introduci­
da con asteriscos (*). El valor real introducido es el que se envía al servidor W eb y no los caracteres que lo enmascaran.
Las lineas45 a 59 introducen el elem ento in p u t checkbox. Los elem entos checkbox perm iten a los usuarios
seleccionar una opción. C uando un usuario selecciona un elem ento checkbox, aparece una marca de verificación
en esc elem ento. De lo contrario, el elem ento checkbox perm anece vado. C ad a elem ento in p u t checkbox crea
un nuevo checkbox. Es posible usar estos elem entos en form a individual o en grupos. A los elem entos checkbox
que pertenecen a un grupo se les asigna el m ism o nom bre (en este caso, “c o s a s g u s ta ro n ”).
Error común de programación 2 .I
jF
J
L"
Cuando suformulario tenga varios elementos checkbox con el mismo nombre, asegúrese de que tengan distintos
valores en su elemento valué, o de lo contrario las secuencias de comandos del servidor Web no
podrán diferenciarlos.
Después de los elementos checkbox le presentaremos dos formas adicionales para perm itir al usuario selec­
cionar opciones. En este ejemplo introdujim os dos nuevos tipos de elementos in p u t. El prim ero es cl b o tó n d e
o pción (líneas 69 a 83) y se especifica con el tipo ra d io . Los botones de opción son similares a las casillas de veri­
ficación (checkbox), excepto que sólo es posible seleccionar un b o tó n de opción en un grupo de botones de opción
en un m om ento dado. 'Iodos los botones ra d io en un grupo tienen los mismos atributos ñame y se diferencian
2.12
Vinculación interna
65
según sus distintos atributos v a lu é . El atributo checked (línea 71) indica cuál b o tó n de opción se selecciona en
un principio, en caso de que se seleccione uno. El atrib u to checked tam bién se aplica a las casillas de verificación
(elementos checkbox).
Error común de programación 2.2
Si no se establecen los atributos ñame d t los botones radio en un grupo con el mismo nombre seproduee un
error lógico, debido a que el usuario podrá seleccionar todos los botones de opción {radio) al mismo tiempo
El elem ento s e l e c t (líneas 92 a 105) proporciona una lista desplegable de la que el usuario puede seleccio­
nar un elemento. El atrib u to ñame identifica la lista desplegable. Los elem entos optlon (líneas 93 a 104) agregan
elem entos a b lista desplegable. El atrib u to sel ected del elem ento o p tio n especifica cuál elem ento se m ostrará
a l principio com o el elem ento seleccionado en el elem ento s e l e c t . Si no se marca un elem ento o p tlo n com o
s e le c te d , el navegador selecciona el prim er elem ento o p tlo n de m anera predeterm inada.
2.12
Vinculación interna
En una sección anterior del capítulo vimos cóm o crear un hipervínculo de una página Web a otra. La figura 2.16
introduce b vinculación interna: un mecanismo que perm ite al usuario saltar entre ubicaciones del mismo docu­
m ento. La vincubción interna es útil para docum entos extensos que contienen muchas secciones. Al hacer clic en
un vínculo interno el usuario puede encontrar una sección sin tener que desplazarse por todo el docum ento.
1 <!DOCTYPE html>
2
3
4
3
6
7
8
9
10
11
12
13
< 1-- Fig. 2.16: 1nterna.htm l
—>
<1— Vinculación in te r n a —>
<html>
<head>
<»*eta c h a rs e t ■ Mutf-S">
<title>V & iacute;neulos i n t e r n o s < / t i t l e >
</head>
<body>
<1— el a t r i b u t o id crea un d e stin o de h ip erv ín cu lo In te rn o -->
<hl id = Mc a r a c t e r i s t i c a s ”>Las mejores c a r a c te r A ia c u te ; s tic a s de In te rn e t< /h l>
■4
13
16
17
18
19
20
21
22
23
24
23
26
27
28
29
< ! — l a d ire c c ió n de un vinculo in te rn o es “# id " -->
<p><a h r e f ■ "#1n secto s”> I r a <em>Insectos favori tos</e*i></ax/p>
<ul>
<H>Puede conocer personas de pa& iacute;ses
de todo e l mundo.</H>
<H>Tiene
acceso a los medios a medida que se vuelven p4uacute;blicos:
<ul>
<11>Nuevos juegos</H>
<H>Nuevas a p lic ac io n e s
<ul>
<li>Por negocios</li>
<li>Por placer</l1>
</ul>
< /li>
Figura 2 .1 6 | Hipervínculos internos para facilitar la navegación en las páginas (parte I de 3).
66
30
31
32
33
34
35
36
37
38
3»
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
Capitulo 2
Introducción a HTML5: parte I
<H >N oticias de todo el mundo</H>
<H>Motores de bAuacute;squeda</li>
<H>Compras</li>
<H>ProgramaciAoacute ;n
<ul>
<11>HTML5</11>
<H>3ava</l i>
<l1>Dyna»ic HTWL</11>
<H>Secuencias de comandos</l i>
<H>Nuevos lenguajes</H >
< /ul>
< /li>
</ul>
</H>
<H>VAiacute;nculos</l1>
<li>Mantenerse en contacto con v ie jo s amigos</l1>
<li>Es l a tecnologAiacute;a del fu tu r o < / li>
</ul>
< !— el a t r i b u t o id crea un d e s tin o de h ip e rv ín e u lo in te r n o -->
<hl id = "insecto»">Mis 3 in s e c to s fa v o rito s< /h l>
<p>
<1— h ip e rv ín eu lo in te r n o a l a s c a r a c t e r í s t i c a s —>
<a h r e f ■ “# c a r a c t e r 1 s t i c a s " > I r a <e«i>CaracterAiacute;sticas favoritas</em></a>
</p>
<ol>
<H>LuciAeacute; rnaga</H>
<H>Hormiga ro ja< /l1>
<H>Abejorro</li>
</ol>
</body>
</html>
a) Navegador antes de que el usuario haga clic en el vinculo interno
f Lj VWkuíoi
4"
C
^
_______________
Ü rile//Av'e3empios/cap02/i«efna.htmiainsecto$
U toi
Web S¡K t Otte*. £ ) Impertido de W-em .
L a s m e j o r e s c a r a c t e r í s t ic a s d e I n t e r n e t
I
.
• Puede conocer penonas de pose* de todo d mondo
• Time acceso a tos medios a xnecbda qoe se vw M o pubkor
o Nuevos juegos
o Ntie\as a p k m o e s
•
P o i DCfOCIOt
• Por placer
o Notorias de todo el nygid^
* Motores de búsqueda
o Compras
Figura 2 .1 6 | Hipervínculos internos para facilitar la navegación en las páginas (parte 2 de 3).
2.13
b) N í*g ad o r después de
*
.
I ¡j V.ncJct »^!e<nc:
C
ir
[ *)
Elementos meta
67
el usuario haga dtc en el vínculo interno
i • «na» #
* \
•
!iley//Yyejemplos/cap02/intefnd.html«irwectos
:
=
u^iidot |; W«6Sfe#G*B*y C)
■ Secuencias ó t comandos
• Nuevo* lenguaje*
m
• Vmoioi
• Mantener se a i cooUKto ccc viejos anacos
• Es U tecnología dd jurqro
M is 3 insecto s f a v o r ito s
|f % 1
ffT- *
9 fjy\i
Luciérnaga
2 Hcnxaca roja
3 Abejorro
\ s
5
Figura 2.16 | Hipervínculos internos para facilitar la nawgación en las páginas (parte 3 de 3).
La linca 13 contiene una etiqueta con el atrib u to i d (se estableció en “c a r a c t e r í s t i c a s ”) para un h ip e rvínculo in te rn o . Para vincular a una etiqueta con este atributo dentro de la m ism a página, el atrib u to h r e f de
un elem ento ancla incluye el valor del atrib u to id , al cual se antepone un signo de garó (com o en f c a r a c t e r i s t i c a s ) . La línea 55 contiene un hipervíneulo con el id c a r a c t e r í s t i c a s com o su destino. Al hacer clic en
este hipervíneulo en un navegador W eb, se desplaza la ventana del navegador hasta la etiqueta h l en la línea 13.
Tal vez tenga que ajustar el tam año de su navegador al de una pequeña ventana y desplazarse hacia abajo antes
de hacer clic en el vínculo para ver cóm o el navegador se desplaza hasta el elem ento h l.
Un hipervíneulo tam bién puede hacer referencia a u n vínculo in tern o en otro docum ento, especificando el
nom bre del docum ento seguido del signo de gato y del valor de id , com o en:
h r e f • “nom bredearchivo.htm l 9i(T
I b r ejem plo, para vincular a una etiqueta con el atrib u to id U s t a l i b r o s en li b r o s .h t m l , se asigna a
h re f el valor “1 1 b r o s .h tm l# lis ta H b r o $ " . Puede enviar el navegador a un vínculo interno en otro sitio W eb
á adjunta el signo de gato y el valor de id de u n elem ento a cualquier U R L, com o en:
h r e f « "W ?/./nom brearchivo.htm l#í<f'
2.13
Elementos meta
Para catalogar los sirios W eb. los m otores de búsqueda siguen vínculos de una página del sirio a o tra (lo que
se conoce co m ú n m en te com o spideringo crawling) y guardan la inform ación d e identificación y clasificación
para cada página. Una form a en que los m otores de búsqueda catalogan páginas es leyendo el contenido en los
elem entos n e ta de cada página, los cuales especifican inform ación sobre un docum ento. Usar el elem ento meta
es u n o de los m uchos m étodos d e la o p tim iza ció n d e m o to res d e b ú sq u e d a (SEO ): el proceso de diseñar y
optim izar su sitio W eb para m axim izar la posibilidad de encontrarlo y m ejorar su clasificación en resultados de
m otores de búsqueda orgánicos (no rem unerados).
Dos atributos im portantes del elem ento m eta son ñame, que identifica el tipo d e elem ento meta, y c o n te n t,
que proporciona la inform ación que utilizan los m otores de búsqueda para catalogar páginas. La figura 2.17
introduce el elem ento meta.
68
Capítulo 2
Introducción a HTML5: parte I
1 <!DOCTYPE htn1>
2
3
4
3
6
7
8
< 1 -- F ig . 2 .1 7 : m eta.htm l -->
<1— lo s elem entos meta p ro p o rcio n an p a la b r a s c la v e y la d e s c r ip c ió n de una p á g in a . -->
<html>
<head>
<»eta c h a rs e t = Hu tf-8">
<t1tle> B ienvenido< /t1tle>
9
10
< !— la s e t i q u e t a s <meta> proveen a lo s m otores de búsqueda -->
11
< !— l a in fo rm ació n que se usa p a ra c a ta l o g a r un s i t i o
12
13
14
15
16
17
18
19
20
21
-->
o i e t a ñame = “keywords” c o n te n t = "página Web, d1se&nt1lde;o,
WTMLS. t u t o r í a ! , p e rso n a l, ayuda, 81acute;nd 1ce, form ularlo,
c o n ta c to , re tro alim e n ta c i& o a c u te ;n , l i s t a , v ü a c u t e ¡ n c u l o s , d e ite l" >
<meta ñame ■ " d e sc rip tio n " co n te n t ■ "Este s i t i o Web l e ayudará
a aprender l o s fundamentos de HTMLS y el diseAnt1lde;o de pág1nas Web
por medio del uso de ejemplos I n t e r a c tiv o s y
c a p a d tac1ón.">
</head>
<body>
<hl>Bienven1do a n u e stro s i t i o web</hl>
22
23
24
23
26
27
28
29
30
31
32
33
<p>Dise&ntilde¡amos e s t e s i t i o para enseA ntilde;ar sobre la s m aravillas
de <strong><em>HTWL5</em></strong>. <em>HTML5</e*> está
mejor equipado que <em>H7WL</em> para re p r e s e n ta r datos
complejos en I n t e r n e t . <e«>HTMLS</em> aprovecha l a e s t r i c t a
s i n t a x i s de XMi para asegurar que esté bien formado. Pronto
conocerá muchas de las ex c elen tes c a r a c te r & ia c u te ; s tic a s de
<em>HTML5.</em></p>
<p>01viértase con e l sitio< /p >
</body>
</html>
(
J R 0-crvtJMJe
I
I
*
-fr C f i } íile7/A y«jw pios/C 3p02/m eu.htm i
u¡ *«•©*lo$4t««JCi I*)
S
Sbc$Gálkiy Q brpcAéáoM1
B ie n v e n id o a n u e s t r o sitio W e b
Disertamos este sido para enseñar sobre tas m*avaas de H TM LS HTML5 está mejor eqwpado que HTML pora
representar datos complejos en Internet HTMLS aprovecha la estncta sintaxis de XML pora asegurar que este bien
fcraado Ptooto conocerá muchas de las excelentes coractensbcas de HTML5
Drvsértase con el «bo
Figura 2.17 | Los elementos meta proveen palabras clave y una descripción de la página.
Las líneas 12 a 14 dem uestran el uso de un elem ento m eta llamado “ keywords". EJ atrib u to c o n te n t de
dicho elem ento m eta proporciona a los m otores de búsqueda una lista de palabras q u e describen la página. Estas
palabras se com paran con utilizadas en las solicitudes de búsqueda. En consecuencia, al incluir elem entos meta
y su inform ación en c o n te n t podem os atraer más visitantes a nuestro sitio.
2.14
Recursos Web
69
Las líneas 15 a 18 dem uestran el uso d e un elem ento n e ta llamado " d e s c rl p tio n ”. El atrib u to c o n te n t
de dicho elem ento m eta proporciona una descripción de tres a cuatro líneas de un sitio, escrita en form a de
enunciados. Los m otores de búsqueda tam bién usan esta descripción para catalogar nuestro sitio y algunas veces
m uestran esta inform ación com o parte de los resultados de búsqueda.
^
Observación de ingeniería de softw are 2.2
Los elementos meta no son visiblespara los usuarios. Deben colocarse dentro de la sección head de nuestro
documento de HTML5; de lo contrario ¡os motores de búsqueda tu>¡os leerán.
2.14
Recursos Web
w#*.d e i t e l . com/html5
Visite nuestro C entro de recursos de H T M L 5 en línea, en d o n d e encontrará vínculos categori/ados para m udios recursos en su mayoría gratuitos sobre H T M L 5 , com o: introducciones, tutoriales, dem ostraciones, videos,
docum entación, libros, blogs, foros, capítulos de muestra y más.
Resumen
Sección 2 1 Introducción
• H TM L5 es un lenguaje de marcado que especifica b estructura y d contenido de los documentos que se visualizan en
los navegadores Web.
Sección 2 2 Edición de H TM L5
• lo s computadoras Ibmadas servidores Web almacenan documentos de HTML5.
• Los clientes (por ejemplo, los navegadores Web que se ejecutan en su computadora local o smartphonc) solicitan recur­
sos específicos (pág. 38) tales como los documentos de HTM L5 a los servidores Web.
Sección 2 3 E l prim er ejemplo de H TM L5
■ La decbración dd tipo de documento (DOCTYPE; pág. 39) es obligatoria en los documentos de HTML5 para que los
navegadores desplieguen b página en modo estándar (pág. 39).
• Los comentarios de HTML5 (pág. 39) siempre empiezan con <1 — (pág. 39) y terminan con --» (pág. 39). El navegador
ignora todo d texto dentro de un comentario.
• El elemento html (pág. 40) encierra b sección dd encabezado (representada por el elemento head; pág. 40) y la sección
d d cuerpo (representada por el demento body; pág. 40).
• La sección de encabezado contiene informaaón sobre d documento ele HTM L5, como su título (pág. 40). También puede
oontcncr instrucciones especiales de formato de documentos conocidas como hojas de estilo (pág. 40) y programas del lado
d d cliente llamados secuencias de comandos (pág. 40) para crear páginas Web dinámicas.
• La sección d d cuerpo contiene d contenido de b página, que d navegador visualiza cuando el usuario visitab página Web.
• Los documentos de HTML5 ddimitan un demento con etiquetas de inicio y de fin. Una etiqueta de inicio (pág. 40)
consiste en d nombre dd elemento entre paréntesis angulares (por ejemplo, <htnl>). Una etiqueta de fin (pág. 40) consiste
en el nombre dd elemento al que se anrepone una barra diagonal (/) entre paréntesis angulares (por ejemplo, </htnl>).
■ El elemento t i t le nombra una página Web. El título aparece por lo general en b barra coloreada (conocida como barra
de título; pág. 40) en la parte superior de b ventana dd navegador y también aparece como d texto que identifica a una
página cuando los usuarios agregan esa página a su lista de Favoritos o Marcadores.
• £1 elemento de párrafo (pág. 40), que se denota mediante <p> y </p>, ayuda a definir b estructura de un documento.
Todo el texto que se coloca entre bs etiquetas <p> y </p> forma un párrafo.
70
Capítulo 2
Introducción a HTML5: parte I
Sección 2 .4 Servicio de validación de H TM L5 del W 3C
9 Debe usar una sintaxis correcta de HTML5 para asegurar que los navegadores procesen sus documentos en forma
correcta.
• El Consorcio World Wide Web (W3) ofrece un servicio de validación (va11dator.w3.org; pdg. 41) para verificar la
sintaxis de un documento.
Sección 2 .5 Encabezados
• HTM L cuenta con seis elementos de encabezado (hl a h6; pág. 41) para especificar la importancia relativa de la infor­
mación. El demento de encabezado hl se considera d más importante y se despliega en una fuente más grande que
los otros cinco. Cada demento de encabezado sucesivo (h2, h3. etc.) se despliega en una fuente cada vez más pequeña.
Sección 2 .6 Vinculación
9 Los hipcrvinculos (pág. 42) hacen referencia (o vinculan) a otros recursos, como documentos de HTML5 c imágenes.
• Por lo general, d elemento strong (pág. 43) provoca que d navegador despliegue texto en una fuente en negrita.
• Rara crear vínculos se utiliza d demento a (ancla) (pág. 43). El atributo h ref (“referencia de hipertexto") (pág. 43) es­
pecifica la ubicación de un recurso vinculado, como una página Web. un archivo o una dirección de correo dcctrónico.
• Las anclas pueden vinculara una dirección de correo dcctrónico mediante el uso de un U R L n allto : (pág. 44). Cuando
alguien hace clic en este tipo de vínculo anclado, la mayoría de los navegadores abren el programa de correo dcctrónico
predeterminado para iniciar un mensaje de correo dcctrónico dirigido a la dirección vinculada.
Sección 2 .7 Imágenes
• El atributo src (pág. 46) d d elemento ing (pág. 46) especifica la ubicación de una imagen.
• Cada elemento irag en un documento de HTML5 debe tener un atributo a l t (pág. 47). Si un navegador no puede
desplegar una imagen, muestra d valor d d atributo a lt.
• H atributo al 11c ayuda a crear páginas Web accesibles (pág. 47) para usuarios con discapacidadcs, en especial los que
tienen discapacidad visual y utilizan navegadores de sólo texto.
• Los elementos vacíos de HTM L5 (como 1mg; pág. 47) contienen sólo atributos, no marcan texto y no tienen una eti­
queta de cierre.
Sección 2 .8 Caracteres especialesy reglas Isorizontales
• HTML5 cuenta con referencias a entidades de caracteres en la forma 8¿código; (pág. 49) para representar caracteres.
• La mayoría de los navegadores despliegan una regla horizontal (pág. 51) que se indica mediante la etiqueta <hr> (un
demento vacio), como una linca horizontal con una línea en blanco por encima y por debajo de día.
• Los caracteres especiales también pueden expresarse como referencias a caracteres numéricos (pág. 5 1): valores decimales
o hcxadecimalcs (hex; pág. 51).
9 La mayoría de los navegadores despliegan d elemento del (pág. 51) como texto subrayado. Con este formato los usua­
rios pueden indicar revisiones de documentos.
Sección 2 .9 Listas
9 El elemento de lista desordenada ul (pág. 51) crea una lista en la que cada elemento empieza con un símbolo de viñeta
(conocido como árculo relleno). Cada entrada en una lista desordenada es un demento 11 (elemento de lista) (pág. 5 1).
la mayoría de los navegadores Web despliegan estos elementos en una nueva línea con un símbolo de viñeta con sangría
desde d inicio de la línea.
9 Las listas pueden estar anidadas para representar relaciones jerárquicas de los datos.
9 El elemento de lista ordenada oí (pág. 52) crea una lista en la que cada elemento empieza con un número.
Resumen
71
• Las tablas se usan con frecuencia para organizar datos en filas y columnas. Las tablas se definen con d demento tab le
•
•
•
•
•
•
•
(pág-54).
^ B B L
■" ••
*' f
^ ^
/
EJ dem ento captlon (pág. 54) especifica el título de una tabla. La mayoría de los navegadores despliegan el texto
dentro de la etiqueta <capt1on> por encima de la tabb. Es una buena práctica incluir una descripción general de b
información de b tabb en el atributo sunraary del elemento table: una de las muchas características de IITML5 que
hacen a las páginas Web más accesibles para los usuarios con disca paridades. Los dispositivos de voz usan este atributo
para hacer b tabb más accesible a los usuarios con discapacidadcs visuales.
Una tabb tiene tres secciones distintas: encabezado, cuerpo y pie (pág. 56). La sección (o celda) de encabezado se de­
fine con un elemento thead (pág. 56), el cual contiene información sobre el encabezado tal como los nombres de las
columnas.
Cada elemento t r (pág. 56) define una fib individual en b tabb (pág. 56). Las columnas en b sección de encabezado
se definen con elementos th (pág. 56).
El cuerpo de b tabb, que se define en un demento tbody (pág. 56), contiene los datos principales de b tabb.
La sección dd pie se define con un demento tfo o t (pág. 56). Por lo general, d rexto que se coloca en d pie incluye
resultados de cálculos y notas al pie.
Podemos crear celdas de datos más grandes mediante d uso de los atributos ronspan (pág. 57) y col span (pág. 57). Los
valores asignados a estos atributos especifican d número de filas o columnas ocupadas por una celda.
El demento br (pág. 57) provoca que la mayoría de los navegadores desplieguen un salto de línea (pág. 57). Cualquier
marcado o texto que siga después de un elemento br se despliega en b siguiente línea.
Sección Z I 1 Formularios
• HTML5 cuenta con formularios (pág. 58) para recolectar información de un usuario.
• Los formubrios pueden contener componentes visuales y no visuales. Los componentes visuales son los botones que
pueden presionarse y otros componentes de b interfaz gráfica de usuario con los que inceracrúan los usuarios. Los
componentes no visuales, conocidos como entradas ocultas (pág. 61), almacenan los datos que usted especifique, como
direcciones de correo dectrónico y nombres de archivos de documentos de HTML que actúen como vínculos.
• Un formulario se define mediante un elemento forra (pág. 60).
• Los componentes no visuales, conocidos como entradas hldden (pág. 61), almacenan cualquier dato que especifiquemos.
• El atributo method (pág. 60) específica cómo se envían los datos d d formubrio al servidor Web.
• El atributo actlon (pág. 60) en d elemento form especifica d URL de la secuencia de comandos en el servidor Web que
se invocará para procesar los datos dd formubrio.
• La entrada tex t (pág. 61) inserta un campo de texto en d formulario. Los usuarios pueden escribir datos en los campos
de texto.
• El atributo slze d d demento i nput (pág. 61) especifica d número de caracteres visibles en d campo de texto. EJ atribu­
lo opcional raaxlength (pág. 61) limita d número de caracteres que se pueden introducir en d campo de texto.
• lnpuc submit (pág. 61) es un botón que. cuando se presiona, envía al usuario a b ubicación especificada en d atributo
dd formubrio. El elemento Input re se t establece d texto que se muestra en d botón (d valor predeterminado es Reset
si omitimos d atributo valué).
• El elemento tex tarea (pág. 61) inserta un área de texto multilínea en un formubrio. El número de filas se especifica
mediante el atributo roms (pág. 61) y d número de columnas (caracteres por línea) mediante d atributo cois (pág. 61).
• La entrada password (pág. 64) inserta un cuadro de contraseña con d tamaño (slze) especificado (número máximo de
caracteres permitidos).
• Un cuadro de contraseña nos permite introducir información confidencial, como los números de tarjetas de crédito y
contraseñas, al "enmascarar" la información introducida con asteriscos (‘ ). Por lo general los asteriscos son d carácter
de enmascaramiento que se utiliza para los cuadros de contraseña. El valor real introducido se envía al servidor Web, no
los caracteres que enmascaran b entrada.
Capítulo 2
72
•
•
•
Introducción a HTML5: parte I
Las casillas de verificación (checkbox)(pág. 64) permiten a los usuarios seleccionar de entre un conjunro de opciones.
Cuando un usuario selecciona un elemento checkbox, aparece una marca de verificación en esc elemento. De lo con­
trario el elemento checkbox permanece vado. Estos elementos pueden usarse en forma individual o en grupos. Los
elementos checkbox que forman parte del mismo grupo tienen el mismo nombre (ñame).
Los bocones de opción (radio) (pág. 64) son similares a las casillas de verificación, excepto que sólo podemos seleccionar
un botón de opción en un grupo en un momento dado. Todos los botones de opción en un grupo tienen el mismo
atributo nana y se distinguen con base en sus distintos atributos valué.
El demento se le c t (pág. 65) provee una lista dcsplcgable de la que d usuario puede seleccionar un demento. El atribu­
to ñame identifica a la lista dcsplcgable. El elemento optlon agrega elementos a la lista dcsplcgable.
Sección 2 .1 2 Vinculación interna
•
•
La vinculación interna (pág. 67) es un mecanismo que permite al usuario saltar entre distintas ubicaciones en el mismo
documento.
fora vincular a una etiqueta con su atributo dentro de la misma página Web, d atributo href de un demento ancla
incluye d valor dd atributo Id y le antepone el signo de gato (como en ¿ c a ra c te rístic a s).
Sección 2.13 Elementos mota
•
Rira catalogarlos sirios, los morores de búsqueda siguen los vínculos de una página a otra (loque se conoce comúnmente
como tpideringo crawlin¿)y guardan la información de idcnrificadón y clasificación para cada página.
• I h a forma en que los motores de búsqueda catalogan páginas es leyendo el contenido de los elementos meta en cada
página (pág. 67), los cuales especifican información sobre un documento.
• Dos atributas importantes del elemento neta son ñame (pág. 67). que identifica d tipo de demento neta, y content
(pág. 67), que proporciona la información que utilizan los motores de búsqueda para catalogar páginas.
•
El a trib u to c o n te n t del elem ento meta keywords proporciona a los m otores d e búsqueda u n a lista de palabras que des­
criben la página. Estas palabras se co m p aran con las palabras en las solicitudes d e búsqueda.
•
El atributo content d d elemento meta descrlptlon proporciona una descripción de tres a cuatro lincas de un sitio,
escrita en forma de enunciados. Los motores de búsqueda también usan esta descripción para catalogar nuestro sitio y
algunas veces muestran esta información como parte de los resultados de búsqueda.
Ejercicios de autoevaluación
2.1
Indique si cada uno de los siguientes enunciados es verdadero o falso. Si es falso, explique por qué.
a) Una lista ordenada no puede anidarse dentro de una lista desordenada.
b) El elem ento b r representa un salto de linca.
c) Los hipervíneulos se denotan mediante dememos Unk.
d) La anchura de todas las cddas de datos en una cabla debe ser igual.
c) Estamos limitados a un máximo de cinco vínculos internos por página.
2.2
Complete las siguientes oraciones:
a)
EJ e le m e n to ____________ insería una regla horizontal.
b) ftira marcar un supcríndicc se utiliza d elemento____
y para marcar un subíndice se utiliza d elemento
c) El elem ento d e encabezado m enos im p o rtan te e s _____
y d elemento de encabezado más importante es
d) Elelem ento___________ marca una lista desordenada.
c)
El e le m e n to ____________ m arca un párrafo.
Ei atributo___________en un elemento Input inserta un botón que, cuando se presiona, restablece el
contenido dd formulario.
g) El dem en to __________ marca una fila de una tabla.
h) Los___________ se usan por lo general como caracteres de enmascarado en un cuadro de contraseña.
0
Respuestas a los ejercicios de autoevaluación
73
Respuestas a los ejercicios de autoevaluación
2.1
2.2
a) Falso. Una lista ordenada puede anidarse dentro de una lista desordenada y viceversa, b) Verdadero, c) Falso. Los
hipervínculos se denotan mediante elementos a. d) Falso. Puede especificar la anchura de cualquier columna,
ya sea en píseles o como un porcentaje de la anchura de la tabla, e) Falso. Puede tener un número ilimitado de
vínculos internos.
a) hr. b) sup, sub. c) H6. hl. d )u l. e) p. f) typ« ■ “reset", g) tr. h) Asteriscos.
Ejercicios
2.3
Use HTM L5 para crear un documento que contenga cl siguiente texto:
Cóno program ar en I n t e r n e t y World Wide Web: q u in ta e d ic ió n
Bienvenido a l mundo de l a program ación en I n t e r n e t . Henos c u b ie r to
muchos temas r e la c io n a d o s con I n t e r n e t .
Use h 1 para el titulo (la primera linca de texto), p para cl texto (la segunda y tercer lincas de texto). Inserte una regla horizon­
tal entre cl elemento hl y d elemento p. Abra su nuevo documento en un navegador Web para ver d documento marcado.
2.4
Una imagen llamada deltel.png tiene 200 pixdcs de ancho y 150 píxclcs de alto. Escriba una instrucción de
HTML5 usando los atributos wldth y height d d demento 1mg para realizar cada una de las siguientes transforma­
ciones:
a) Aumentar d tamaño de la imagen en un 100 por ciento.
b) Aumentar d tamaño de la imagen en un 50 por ciento.
c) Cambiar la relación anchura-altura a 2:1 manteniendo d valor de wldth que se obtuvo en d inciso (a).
2.5
Cree un vinculo a cada uno de los siguientes dementóse
a) El archivo Index.h t n l , que se encuentra en d directorio archivos.
b) El archivo Index.htnl, que se encuentra en d directorio texto del directorioa rc h iv o s .
c) El archivo Index.htnl, que se encuentra en d directorio o tro de su directorio padre.
| Sugerencia:.. significa cl directorio padre.]
d) l a dirección de correo electrónico del presidente de Estados Unidos (p res1d en td w h 1teh o u se.g o v ).
e) El archivo llamado REACME en cl directorio pub de ftp.cdron.con. [Sugerencia: use f tp ://.]
2.6
Cree un documento de HTML5 que contenga una lista ordenada de tres elementos: nieve, nieve a base de agua y
yogtut congelado. Cada lista ordenada debe contener una lista desordenada anidada de sus sabores favoritos. Propor­
cione tres sabores en cada lista desordenada.
2.7
Cree un documento de HTM L5 que utilice una imagen como un vinculo de correo electrónico. Use d atributo a l t
para proveer una descripción de la imagen y d vínculo.
2.8
Cree un documento de HTML5 que contenga vínculos a sus cinco sitios Web Favoritos de ofertas diarias (como
Groupon, Living Social, etc.). Su página debe contener d encabezado “Mis sitios Web favoritos de ofertas". Maga
dic en cada uno de estos vínculos para probar su página.
2.9
Cree un documento de HTML5 que contenga una lista desordenada con vínculos a todos los ejemplos que se
presentan en este capitulo. [Sugerencia: coloque rodos los ejemplos dd capítulo en un directorio llamado ejem plos
y después cree vínculos a los archivos en esc directorio.]
2.10 Identifique cada uno de los siguientes objetos de HTML5 como un demento o un atributo:
a) html
b) wldth
c) h r e f
d) br
e)
h3
0 »
g) src
74
2.11
Capítulo 2
Introducción a HTML5: parte I
Indique cuil de los siguienres enunciados es verdadero y cuál es falso. Si es falso, explique por qu¿
a) Un documento de HTML5 válido no puede contener letras mayúsculas en nombres de elementos.
b) Los documentos de HTML5 pueden tenerla extensión de archivo .htm.
c) &less; es la referencia a entidad de carácter pata el carácter menor que (<).
d) En un documento de HTML5 válido. <U> puede anidarse dentro de etiquetas <ol> o <ul>.
2.12 Complete las siguientes oraciones:
a) Los comentarios de HTML5 comienzan con < 1-- y terminan c o n ___________.
b) En HTML5. los valores de los atributos pueden ir encerrados entre
.
c) __________ es b referencia a entidad de carácter para un signo &.
d) El elem ento___________ puede usarse para crear texto en negrita.
2.13 Clasifique cada uno de los siguientes objetos como elemento o atributo:
a) wldth
b) td
c) th
d ) (vane
e) select
0 type
2.14 Cree d marcado de HTML5 que produzca b tabb que se muestra en b figura 2.18. Use etiquetas <e*r» y <strong>
según sea necesario. La imagen (camello. pr*g) se incluye en d directorio de ejemplos d d capitulo 2.
CSeíuo<«J5
C
L¡)
S*C1 tu q tr^ o t
fil«y//vyejemp»os/soiücion«i/cap02/fig02.iammi
J
W tb Sfcct
ry D
o t W cm .
O b je tiv o s
• Podít ere* labias coo fita* y cokuma» de dalos
• Poder concretar ta 'tsuakracicc y fi temíate de tabtas
• Poder ere* y os* íonm¿*sos
Toa, 04 la tabla ¿ 4 mi mtmorux limpiaré if/a t todos los oxpodto tío t oncantiadoz m \ iota
W fe n Shakrspe*e
Figura 2.18 | Tabla de HTML5 para el ejercicio 2.14.
2.15 Escriba un documento de HTM L5 que produzca la tabb que se muestra en b figura 2.19.
2.16 Una universidad local le pidió que creara un documento de HTML5 que permita a los futuros estudiantes universi­
tarios proveer retroalimentación sobre su visita al campus. Su documento de HTML5 debe contener unformubrio
con campos de texto para un nombre y un conro electrónico. Proporcione casillas de verificación que permitan a los
futuros estudiantes indicar lo que les gustó m is sobre el campus. Las casillas de verificación deben incluir campus.
Ejercicios
1f
C
Li Wc/Z/Y
75
C - Ü ...... “
W30*uoon«/c<ip<
E
P á g i n a tic e j e m p l o d e t a b l a
Ertan wutatfa
imilla
¡Efttrn rfcortpo
¡Eorn r i f * r á e UuUi
Figura 2.19 | Tabla de HTML5 para el ejercicio 2.15.
estudiantes, ubicación, ambiente, dormitorios y deportes. Proporcione además botones de opción que pregunten a
ios futuros estudiantes cómo supieron sobre la universidad. Las opciones deben incluir, amigos, televisión, Internet
y otro. Además, proporcione un área de texto para comentarios adicionales, un botón para enviar y un botón para
restablecer. Use post para enviar la información en d formulario a h ttp ://***. d e i t e l .con.
2.17 Cree un documento de HTML5 titulado “Cómo obtener buenas calificaciones'. Use etiquetas <meta> para incluir
una serie de palabras clave que describan su documento.
Introducción a HTML5: parte 2
Laform a siempre sigue a la
Junción.
—Loáis Sullrvin
Escucho y doy m i aportación sólo
si alguien pregunta.
—Bárbara Bush
Objetivos
En este capitulo aprenderá a:
■ Construir un formulario utifoando
los nuevos tipos mput de HTML5.
■ Especificar un elemento mput
en un formulario como el que
debe recibir el enfoque de manera
predeterminada.
■ Usar elementos input con
validación automática.
■ Especificar texto piaceholder
temporal en varios elementos
input
■ Usarelementos input con el
atributo autocomplete para
ayudar a los usuarios a reintroducir
texto que hayan introducido
anteriormente en un formulario.
■ Usar el elemento datalist para
especificar una lista de valores
que pueden introducirse en un
elemento input y para completar
entradas de manera automática, a
medida que el usuario escriba.
■ Usar los nuevos elementos de
estructura de página de HTML5
para deSnear partes de una
página, incluyendo encaberados.
secciones, figuras, artículos, pies
de página y más.
Plan general
3.2
\
3.1 Introducción
3.2 Nuevos tipos input de formularios de HTML5
3.2.1 input tipo color
3.2.2 input tipo date
3.2.3 input tipo datetime
3.2.4 input tipod atetim e-lo cal
3.2.5 input tipo email
3.2.6 in p u t tipo month
3.2.7 in p u t tipo number
3.2.8 input tipo range
3.2.9 input tipo search
3.2.10 input tipo t e l
3.2.11 input tipo time
3.2.12 input tipo url
3.2.13 input tipo week
3.3 Bementos input y d a t a l i s t y el atributo
autocomplete
Nuevos tipos in p u t de formularios de HTML5
3 .4
77
Bementos de estructura de página
3.4.1 Bemento header
3.4.2 Flemento nav
3.4.3 Elemento f ig u r e y elemento
f ig e a p tio n
3.4.4 Elemento a r t i c l e
3.4 5 Elemento summary y elem en to d e t a i l s
3.4-6 Elemento s e c tio n
3.4.7 Elemento as i de
3.4 8 Elemento m eter
3.4 9 Elemento f o o te r
3.4.10 Semántica a nivel de texto: elemento
mark y elemento wbr
3.3.1 Atributo autocomplete del elemento
input
3.3.2 Elemento d a t a l i s t
_______________Resumen | Ejercicios de autoevaluación | Respuestas a ios ejercióos de autoevaluación \ Ejercicios_______________
3.1
Introducción
Ahora continuarem os nuestra presentación de H T M L 5 , para ello hablarem os sobre varias d e las nuevas carace rís ticas:
• N uc\fos tipos de elem entos in p u t para co b res, fechas, tiem pos, direcciones de correo electrónico, n ú ­
meros, rangos de valores enteros, núm eros telefónicos, direcciones URL, consultas de búsqueda, meses
y semanas; b s navegadores que no soportan estos tipos de in p u t sim plem ente b s despliegan com o
elem entos in p u t de texto estándar
• H erram ientas para com pletar en form a autom ática, q u e ayudan a b s usuarios a reintroducir rápidam en­
te el texto que hayan escrito antes en u n form ulario
• Elem entos d a t a l i s t para proporcionar listas de valores perm itidos que un usuario puede introducir en
un elem ento in p u t y para com pletar en form a autom ática esos vabres a m edida que el usuario escriba
• Elem entos de estructura de página que nos perm iten delinear y dar significado a las partes de una pági­
na, com o encabezados, áreas de navegación, pies de página, secciones, artfcu b s, apartados, resúm enes /
detalles, figuras, leyendas de figuras y más.
El soporte de las características que presentarem os en este c a p ítu b varía entre b s navegadores, por b que para
nuestras salidas de eje m p b utilizam os varios navegadores. E n el resto de b s c a p ítu b s hablarem os sobre muchas
más características nuevas de H T M L 5 .
3.2
Nuevos tipos i nput de formularios de HTML5
La figura 3.1 muestra b s nuevos tipos de elem entos in p u t para formularios de H T M L 5- No todos b s navegadores
s i portan estos nuevos tipos de manera universal. En este ejem p b proporcionam os salidas de muestra de varios
navegadores W eb, para que el lector pueda ver cóm o se com portan b s tipos de elementos in p u t en cada uno.
78
1
Capítulo 3
Introducción a HTML5: parte 2
<!DOCTYPE htnl>
2
3
4
3
6
7
8
9
10
11
12
13
14
13
16
17
18
19
20
21
22
23
24
23
26
27
28
29
30
31
32
33
34
33
36
37
38
39
40
41
42
43
44
43
46
47
48
49
30
31
32
33
<! — Fig. 3.1: nuevost1posinputform ularios.htm l -->
<1— Los nuevos tip o s de elementos input de form ularios de HTML5 y sus a t r i b u t o s . -->
<htnl>
<head>
cmeta ch arset= ‘‘u t f - 8 M>
<title>Nuevos t i p o s de input de HTML5</titie>
</head>
<body>
<hl>Demo de nuevos tip o s de input de HTML5</hl>
<p>Este form ulario demuestra lo s nuevos t i p o s de elementos input de HTML5
y lo s a t r i b u t o s p laceh o ld er, required y autofocus.
</p>
«form method = “post" a c tio n = ‘•http://ww w .deitel.com ">
<p>
<label>Color:
<input type = “color" autofocus />
(C¿oacute;digo hexadecimal como #ADD8E6)
</label>
</p>
<P>
<labe1>Fecha:
<input type » "date" />
(aaaa-mm-dd)
</label>
</p>
<p>
<label>Hora y fecha:
<1nput type ■ "datetime" />
(aaaa-irm-ddThh:mm+ff :gg, como 2 7 - 0 1 - 2012T03:15)
</label>
</p>
<p>
<label>Hora y fe ch a -lo c a l:
<1nput type ■ " d a te tim e - lo c a l" />
(aaaa-nm-ddThh:mm, como 2 0 1 2 -0 1 - 27T03:15 )
</label>
</p>
<p>
<label>Email:
«input type ■ "email" p la c eh o ld e r - "nombre0dom1nio.com"
req uired /> Cnombrefldomin1o.com)
</label>
</p>
<p>
<label>Mes:
«input type ■ "month" /> (aaaa-mm)
« / la b e l >
</p>
<p>
Figura 3.1 | Nuevos tipos de entrada y atributos de formularios de HTML5 (parte I de 2).
3.2
Nuevos tipos inp ut de formularios de HTML5
54
<label>Número:
55
<input type = "nunber"
56
min - “0"
57
max . -7"
56
s te p = “1"
59
valué - M4" />
60
</label> (E sc rib a un número e n tr e 0 y 7)
61
</p>
62
<p>
63
<1abel>Rango:
64
0 <input type ■ “ range"
65
min - "0"
66
max » “ 20"
67
valué = “10" /> 20
68
</labe1>
69
</p>
70
<p>
71
<label>Búsqueda:
72
<input type = "search" piaceh older =" c o n su lta de b&uacute¡squeda" />
73
</labe1> (E sc rib a aquí su c o n su lta de búsqueda.)
74
</p>
75
<p>
76
<label>Tel:
77
<input type = " t e l " p iaceholder = “( # # # ) # # # - # # # # ”
78
p a t t e m = “\ ( \ d { 3 } \ ) + \d { 3 )- \d { 4 )" requ ired />
79
( 8 # # ) # # # -# # # #
80
</l abe 1 >
81
</p>
82
<p>
83
<label>Hora:
84
<input type = "time" /> (hh:mm)
85
</label>
86
</p>
87
<p>
88
<label >URL:
89
<input type ■ “u r l"
90
piaceh older = "http://Mmw.nombredominio.com" />
91
( http://www.nombredominio.com)
92
</labe1>
93
</p>
94
<p>
95
<label>Semana:
96
cinput type = “week” />
97
(aaaa-Wnn, t a l como 20 12-W01)
98
</labe1>
99
</p>
100
<p>
101
<input type = "su b n it" valué * "Enviar" />
102
<input type = " r e s e t ” valué = "Borrar" />
103
</p>
104
</fom>
105
</body>
106 </html>
Figura 3.1 | Nuevos tipos de entrada y atributos de formularios de HTML5 (parte 2 de 2).
79
80
3.2.1
Capítulo 3
Introducción a HTML5: parte 2
in p u t t ip o c o lo r
El tip o 1nput c o lo r (figura 3.1 , lincas 20 y 21) perm ite al usuario introducir u n color. Al m o m en to de escribir
este libro, algunos navegadores despliegan el tipo ín p u t c o lo r com o un cam po de texto en d o n d e el usuario
puede introducir un código hcxadccimal o el nom bre de u n color. H ay dos navegadores, C h ro m c y O pera, que
m uestran un selector de color sim ilar al cuadro de diálogo de colores de M icrosoft W indows, que se m uestra en
la figura 3.2. En el futuro, cu an d o haga clic en u n elem ento in p u t c o lo r , es m uy probable que el resto de los
navegadores m uestren u n selector de color tam bién.
Figura 3.2 | Un diálogo para seleccionar colores.
E l atributo autofocus
E l a trib u to a u to fo c u s (figura 3.1 , línea 20) (un atrib u to opcional que puede usarse sólo en un elem ento
in p u t en un form ulario) otorga de m anera autom ática el enfoque al elem ento in p u t, lo que perm ite al usuario
em pezar a escribir en ese elem ento de inm ediato. La figura 3.3 m uestra el uso del elem ento a u to fo c u s en el
elem ento c o lo r (el prim er elem ento in p u t en nuestro form ulario), com o se despliega en O pera. N o necesita
incluir a u to fo c u s en sus formuLirios.
.
íF o ^ r
'
hpci de input... ■ | O
O
•loo! kx•tKHV'VV^pkH.
- —-■ 7*"*?.
..‘.-v
r
..: j , .
k v .^ w
*
.
NuMtTipoUnpKilForrrK*
r.~rr. ■
*| *
r.:
D e m o d e n u e v o s tip o s d e i n p u t d e H T M L 5
Esie f o d e t o n a a k>s m>r%oi tipos de elementos eput de HTML5 y k»s athUaos pbceholder. ie<**ed v
t f dbca
Color 0 • (Codeo bexadecinal cccno «ADDSE6)
Fecha
Hoia y fecha
- (aaaa-tnm-dd)
-
g ÜTC (aaaa-oTO-ddThhmnHr gg. como 2^-01-2012T03 15)
0 * 0
Figura 3.3 | Autofocus en el elemento in p u t color cuando se usa el navegador Opera.
■■
O
3.2
Nuevos tipos in p u t de formularios de HTML5
81
Validación
Tradicionalm ente ha sido difícil validar la entrada del usuario, com o asegurar que se introduzca una dirección
de correo electrónico, URL, fecha u hora en el form ato adecuado. Los nuevos tipos in p u t de H T M L 5 cuentan
con validación automática del lado del d ien te, con lo que se elim ina la necesidad de agregar código com plicado
de JavaScript a nuestras páginas W eb para validar b entrada del usuario; así se reduce b cantidad de datos invá­
lidos que se envían y, en consecuencia, dism inuye d tráfico de Internet entre el servidor y el cliente que se usa
para corregir las entradas inválidas. De todas formas el servidor debe validar toda ¡a entrada del usuario.
C uando un usuario introduce datos en un fb rm u b rio y luego lo envía (en este ejem plo, al hacer d ic en el
botón E nviar), el navegador verifica de inm ediato los elem entos de validación autom ática para asegurar que
b s datos sean correctos. Por ejem plo, si un usuario introduce un valor d e color hexadecimal incorrecto al usar
un navegador q u e despliegue los elem entos c o lo r com o un cam po de texto (por ejem plo. Internet Explorer),
aparecerá una anotación para señalar esc elem ento e indicar que se introdujo un valor incorrecto (figura 3.4).
La figura 3.5 lista cada uno de los nuevos tipos In p u t de H T M L 5 y m uestra ejem plos de los form atos correctos
requeridos para que cada tipo de datos sea válido.
Q
«•
N e w MTML5 I n p u t
C
X
O filey//C/books/2011/IW 3HTP5/examples/ch03/fig03.01/Newf
New H T M L 5 Input Types Demo
^
*
T h s fonn demonstiates tbc oew 1ITML5 mput t\p cs and thc ptocehokki. requ¿red and
amofocus attributes
Color. Jane
Date
(Hcxadccxnal code such as aADDSE6)
I In v a lid v a lu é . |
:
(vyyy-nxn-dd»
Figura 3.4 | Validación de un elemento input color. (Actualmente ya no existe esta funcionalidad en Chiome).
bpo de input
Formato
color
Date
Datetime
d a te tim e-lo c al
Month
Number
email
url
time
week
Código hexadecimal
aaaa-mm-dd
aaaa-mm-dd
aaaa-mm-ddThhtmn
aaaa-mm
Cualquier valor numérico
nombreddominio.com
h t t p ://v tm . nombre domi ni o . com
hh: mm
aaaa-Wnn
F igura 3 .5 | Tipos de in p u t con validación automática
82
Capitulo 3
Introducción a HTML5: parte 2
Si desea pasar por aleo la validación, puede agregar el a trib u to fo rm n o v a lld a te al tipo in p u t subm it en
la línea 101:
< in p u t ty p e ■ “su b m it" v a lu é ■ "Enviar” fo rm n o v a lid a te />
3.2.2
Input tipo date
El tip o In p u t d a te (líneas 26 y 27) perm ite al usuario introducir una fecha en la form a aaaa-nm -dd. Firefox e
Internet Explorer m uestran un cam po d e texto en d o n d e el usuario puede introducir una fecha tal com o 201201-27. C h ro m e y Safari m uestran un c o n tro l s p in n e r (un campo de texto con una flecha arriba-abajo [ -j] del
lado derecho) que perm ite al usuario seleccionar una fecha al hacer clic en la flecha hacia arriba o hacia abajo.
La fecha inicial es la fecha actual. O pera m uestra un calendario del cual podem os elegir u n a fecha. En el futuro,
a ta n d o el usuario haga clic en u n elem enro in p u t d a te , es probable que b s navegadores m uestren un control
de fecha sim ilar al de M icrosoft W indow s com o se m uestra en la figura 3.6.
•í
C h c c i t « 0 *1 »
1 x p (I
-
U u ia l
O ctot» 07.2011
«
Cctobtf. 2011
Sun
¿5
M e o Tuc vVed T h u
¿fe
2
3
9
16
23
30
10
17
24
31
I
•
Fn
S *t
¿7
¿9
¿9
10
1
4
5
6 C ID 8
11
12
U
14 15
18
19 20
21 22
25
26 27
2* 29
1
2
I
4
5
I Tcd*y. 10/7/2011
Figura 3.6 | Un control selector de fecha.
3.2.3
input tipo datetime
El tipo Input datetim e (líneas 32 y 33) perm ite al usuario introducir una fecha (año, mes, día), un valor de
tiem po (hora, m inuto, segundo, fracción de segundo) y la zona horaria establecida en U T C (T iem po universal
coordinado o Tiem po universal, coordinado). E n la actualidad la mayoría de b s navegadores despliegan d a te t i me com o un cam po de texto; C h ro m e despliega un control arriba-abajo y O pera despliega u n control de fecha
y hora. Para obtener más inform ación sobre el tip o in p u t d a te tim e , visite:
tm (»w .w 3.org/T R /htm l5/states-of-the-type-attribute. html#
d a te -a n d -tim e - s ta te
3.2.4
input tipo datetime-local
El tipo input d a te tim e -lo c a l (líneas 38 y 39) perm ite al usuario introducir la fecha y b hora en un ¡olo
control. Los datos se introducen com o año, mes, día, hora, m inuto, segundo y fracción de segundo. Internet
E xpbrcr, Firefox y Safari m uestran un cam po de texto. O pera m uestra un conrrol de fecha y hora. Para obtener
más inform ación sobre el tipo in p u t d a te tim e - lo c a l, visite:
mw. w 3 .o r g / T R / h tm l5 / s ta te s - o f - th e - ty p e - a ttr ib u te . html#
lo c a l- d a te - a n d - tim e - s t a te
3.2
3.2.5
Nuevos tipos in p u t de formularios de HTML5
83
in p u t tip o em ail
El tip o in p u t e o a il (líneas 44 y 45) perm ite al usuario introducir una dirección de correo electrónico o una
Bsta de direcciones de correo electrónico separadas por com as (si se especifica el atrib u to muí t i p l e). A ctualm en­
te todos los navegadores m uestran un cam po de texto. Si cl usuario introduce una dirección de correo inválida
(es decir, si el texto introducido no tiene el form ato correcto) y hace clic en el b o tó n E nviar, se despliega una
anotación que pide al usuario que introduzca una dirección de correo electrónico y a p u n ta a ese elem ento in p u t
(figura 3.7). H T M L 5 no verifica si en realidad existe una dirección de correo electrónico introducida por cl
usuario; tan sólo valida que la dirección esté en cl form ato correcto.
i
*• -♦ O -
•
<rxxxtxt8A'Bm*.tamj
| f *oW m
a * a
F igura 3 .7 | Validación de una dirección de correo electrónico en Opera.
E l atributo placeholder
El a trib u to p la c e h o ld e r (líneas 44, 72 y 77) perm ite colocar texto tem poral en un cam po de texto. Por lo
general, el texto de un p la c e h o ld e r es de color g i¡ claroy proporciona un ejemplo del texto y/o el form ato de
r x t o que el usuario debe in tro d u cir (figura 3.8). C uando se coloca el enfoque en el cam po de texto (es decir,
que cl cursor se encuentre en cl campo de texto), desaparece cl texto del p la c e h o ld e r: no se “envía” cuando cl
usuario hace clic en el b otón E n v iar (a menos que el usuario escriba el mismo texto).
a) Campo de texto
con el texto del
p lac « to ld a r de
U op». J
|ÜNuMtfipo« de «nput ~
¿ ¿ ¿ ¿ II
color gris
Etiud ncmlHt^Joínnio com
0
b) El texto del
placeholder
V
m L$ l
e f i r ^ tipOl ty W L ttr
í | • E w * <o*Gc<
•A
•
(nofbbfrtfdoam» com)
A
l* . °
LM o p )
V*
| 0 Nueve* tipo* de mput... ■
desaparece cuando
+
el campo de texto
obtiene el enfoque
Ex tu i 1
0
*
O
O-
•lCt-1
{nombrr 3 do«n**3 com)
O
F igura 3 .8 | El texto del p la c e h o ld e r desaparece cuando el elemento In p u t obtiene el enfoque.
H T M L 5 s o p o r ta d texto del p la c e h o ld e r sólo paraseis tipos in p u t: t e x t , se a rc h , u r l , t e l , em ail y p assword. C o m o tal vez cl navegador del usuario no soporte cl texto d e p la c e h o l d er, agregamos texto descriptivo
a la derecha de cada elem ento i nput.
84
Capitulo 3
Introducción a HTML5: parte 2
E l atributo required
£1 a trib u to re q u ire d (lincas 45 y 78) obliga al usuario a introducir un valor antes de enviar el formulario.
Puede agregar este atrib u to a cualquiera de los tipos 1nput. En este ejem plo, el usuario debe introducir una
dirección d e correo electrónico y un núm ero telefónico para poder enviar el form ulario. Por ejem plo, si el usua­
rio no inrroduce una dirección de correo electrónico y hace clic en el b o tó n E nviar, aparecerá una anotación
señalando el elem ento vacío y pedirá al usuario que introduzca la inform ación (figura 3-9).
J
□
N u * v o í t ^ o j d e m p u t ... * |
•lo c a l
O
lo < 8 lh c s O fjrfT > p4cv'(8{03 b g 0 3.0 1/N o € v o sT ^© ilr> p u iE © rfn ü l ★
• f
. ••■■ ■mm■■■^ ■■
■»■■■■* ■■ •• * ■ > ^■ ■■■ i ■■m ^ ^ m& %■ ■^ ■ ■■—■■■■ »■■■■■ ■
^
m*m»
Demo de nuevos tipos de input de HTML5
Este fc-nnulano óctnuesoa los nuevos tipos de elementos mput de HTML5 y los atributos pLKebolder. requared y
aotofoais
Color B • (Código bexadecsnol como “ADD8E6)
Fecha
- (
ád)
Hora v fecha.
Hota y fecha-local
£ UTC (aaaa-m m -ddThkm m -ff g t como 2 7 -0 1 -.0 1 2 T 0 3 1 5 )
•
H laaaa-mm-dcíThhmm. como 2012 -0 1 -2 “T 03:15)
(nombre 'a d o nan» com)
Me* I e »,# campo 9 9 ntceaano
i
0
Figura 3.9 | Demostración del atributo req u i red en Opera.
3 .2 .6
in p u t tip o month
El tip o In p u t n onth (línea 50) perm ite al usuario in tro d u cir un año y mes en el form ato aaaa-mm. com o 201201. Si el usuario introduce los datos en un form ato incorrecto (por ejem plo, Enero 2012) y envía el form ulario,
aparecerá una anotación señalando que se introdujo un valor incorrecto.
3 .2 .7
in p u t tipo number
El tip o In p u t number (líneas 55 a 59) perm ite al usuario introducir un valor num érico; por lo general los na­
vegadores móviles m uestran un teclado num érico para este tip o d e elem ento In p u t. Internet Explorer, Firefox
y Safari m uestran u n cam po de texto en donde el usuario puede introducir un núm ero. C h ro m e y O pera des­
pliegan un control spinner para ajustar el núm ero. El atrib u to m1n establece el núm ero m ínim o válido, en este
caso “0”. El atributo max establece el núm ero m áxim o válido, que fijamos en “7”. El atrib u to s te p determ ina el
increm ento con el que aum entarán los núm eros. Por ejem plo, establecimos el valor de s te p en “l", por lo que
el núm ero en el control spinner aum enta o dism inuye por uno cada vez q u e se hace clic en la flecha hacia arriba
o hacia abajo del control spinner, respectivamente. El atrib u to v a l ue establece el valor inicial m ostrado en el
form ulario (figura 3-10). El control spinner sólo incluye b s núm eros válidos. Si el usuario intenta introducir un
v a b r inválido al escribir en el cam po de texto, aparecerá una anotación que señalará el elem ento i n p u t number
y pedirá al usuario que introduzca un valor válido.
3.2
Nuevos tipos in p u t de formularios de HTML5
85
ÉÉf t s J
|D Nwtvo»t.poi ck «pu> . . « j O ____________________________________________ o
4-
«♦
O
M am
□
f
m ic<*
c
*
4
N
t
t
t
*
Y
A
{ | -
Bine * c a n Gó«
4J ^ (Ewriba tu msaflo entxc 0 y 7)
*
O
----- j<
-
Figura 3.10 | El tipo in p u t number con un atributo v a lu é de 4. como se despliega en Opera.
¡
1L3 Nuevo» t*pot de «nput - •
O
>
_________________________
• Local
locatofO . fjcmploi
*
! * | * ftuu» ton Ge.
*
Número
£ * (Escriba ud numero « tte 0 y 7)
Pof t#Of «tcr&a un rxmwo tguaf o jq
m*%of qu#7
*
S
q
o
í 111 iiwfli 11,11
“ -
^
Figura 3 .1 1 | Opera verificando que un número sea correcto.
3 .2 .8
In p u t tipo range
El tip o in p u t ran g e (líneas 64 a 67) aparece com o control deslizante en C hrom e, Safari y O pera (figura 3.12).
ftiede establecer el mínim o y el máximo, además de especificar un valor. En nuestro ejemplo, el atributo mi n es "0’,
el atributo max es ’20' y el atributo v a lu é es '10’, por lo que el control deslizante aparece cerca del centro del rango
cuando se despliega el docum ento. El tipo in p u t range se valida automáticamente de manera intrínseca cuando el
navegador lo despliega com o control deslizante, ya que d usuario no puede mover el control deslizante fuera de los
límites del valor mínimo o máximo. U n elem ento in p u t range es más útil si el usuario puede ver cóm o cambia el
valor actual mientras arrastra el indicador: esto puede lograrse con JavaScript, com o aprenderem os más adelante.
|
1*01 do oiput .. • ■ - ]>
*-■+ O »N
9 Locot v<oa«d»t'vyVm|.»M.<»eO?/r^>3.0j *
«Sumo. «*6o.
¡B (Escriba m nummo rrtxt 0 y ?)
Por favor eecffca un numtco
Figura 3 .1 2 | Control deslizante range con un atributo valué de 10. como se despliega en Opera.
3.2 .9
in p u t tipo s e a rc h
El tip o in p u t s e a rc h (línea 72) proporciona un cam po de búsqueda para introducir una consulta. Este ele­
m ento in p u t es equivalente en función a un elem ento in p u t de tipo te x t . C uando el usuario empieza a escribir
86
Capítulo 3
Introducción a HTML5: parte 2
en el campo de búsqueda, C h ro m e y Safari m uestran una X en b que se puede hacer clic para borrar el cam po
(figura 3.13).
N ocvot fcpot d t input
C
K \
_
J Mc///Y/ejemploVc*p03/1ig03 J>l/Noevü*TipotfnputFormulArii
Sitio* tu p tn d o f
W «b S k é C *lf» y
Búsqueda
Q
Im p tfrtric ó t Vñtrv
•Isa * * aquí su consota de búsqueda )
Figura 3.13 | Introducir una consulta de búsqueda en Chrome.
3.2 .1 0
in p u t tipo t e l
£1 tipo Input t e l (líneas 77 a 79) perm ite al usuario in tro d u cir un núm ero telefónico; por lo general los na­
vegadores móviles m uestran un tecbdo num érico específico para introducir núm eros telefónicos para este tipo
de 1 nput. Al m om ento de escribir este libro, el tipo in p u t t e l se despliega com o u n cam po de texto en todos
los navegadores. La longitud y el form ato de los núm eros telefónicos varía de m anera considerable con base
en b ubicación, lo que com plica en gran medida la validación. H T M L 5 no cuenta con validación autom ática
para el tipo in p u t t e l . Para asegurar q u e el usuario introduzca el núm ero telefónico con el form ato correcto,
agregam os un atrib u to p a tt e r n (línea 79) q u e usa una expresión regular para determ inar si el núm ero tiene el
form ato apropiado:
( 5 5 5 ) S5S-SS55
C uando el usuario introduce un núm ero telefónico en el form ato incorrecto, aparece una anotación que solicita
el form ato apropiado, señalando el elem ento in p u t t e l (figura 3.14). V isite w w w .regexlib.cotn, un m o to r
de búsqueda que le ayudará a encontrar expresiones regulares ya im plem enradas que puede usar para validar
entradas.
/ Li Nuevoi tipo* l e mput 0* * \
C
_ S<bci lo^ertdct
Tet W0-12W56 '
— i—
i—
n
■
■■
fúc'y/Ayejempíos/cap03/fi903.0I/Nuevo$TiposkHXJtf(xmul»rn
-
E
J ] Web SIk* Gefrry Q Impórtale de hlow ..
.............. ..........
Hoii I I Haz co<nct&r e<formato sol otado
Figura 3 .I4 | Validación de un número telefónico que usa el atributo p atte rn en el tipo in p u t t e l.
3 .2 .1 1
in p u t tipo tim e
El tipo input time (línea 84) perm ite al usuario introducir una hora, m in u to , segundos y fracción d e segundo
(figura 3.15). La especificación de H T M L 5 indica que un valor de tiem po debe tener dos dígitos para represen­
tar b hora, seguido de dos puntos (:) y dos dígitos para representar b s m inutos. O pcional mente, tam bién pode­
m os incluir un signo de dos puntos seguido de dos dígitos para representar b s segundos y un p u n to seguido de
uno o más dígitos, para representar una fracción de segundo (se m uestra com o f f en nuestro texto de e je m p b
a b derecha del elem ento in p u t tim e en la figura 3.15).
3.3
Elementos inp ut y d a t a lis t y el atributo autocomplete
O p ff# ¡
' Nm
4-
vm
■o
tip o s d< i n p u t ..
-4
O
Hora 16 16
□
*
O-
87
I c i- M É J l
• j
•lo c ji
t©<ét*©n/Y
f kj03.91 *
:
• &nt<*<onGo<
•
(Muro
*
1*
Figura 3 . 1 5 | Demento input time como se despliega en Opera.
3.2.12
in p u t tipo u r l
El tipo input u r l (lincas 89 a 91) perm ite al usuario introducir un URL. El d e m e n to se despliega com o un
campo de texto y el form ato apropiado es h ttp ://w w w .d e ite l .com. Si el usuario introduce un U R L con un
form ato incorrecto (por ejem plo, w viw .deitel.com o www. d e i t e l com). el U RL no se validará (figura 3.16).
H T M L 5 no verifica si el U RL introducido es válido; en vez d e ello valida que el U RL introducido renga el
form ato correcto.
L# op<«*
_
¡ —tia—
fjN o* 'Ot tipoi d« «nput.. *
4*
«
O
O - ¡ 9 Local
rociíhost-V: 'ejem pb c«03
Hora 16 16 £ (htunm)
figC 3.01
♦
• Butcjf con Go<
•
□
Figura 3 .1 6 | Validación de un URL en Chrome.
3.2.13
in p u t tipo week
El tipo input week perm ite al usuario seleccionar u n año y núm ero de sem ana en e l form ato aaaa-Wnn, en d o n ­
de nn puede estar entre 01 y 53. Por ejem plo, 2012-W01 representa la prim era sem ana d e 2012. Internet Explo­
rer. Firefox y Safari despliegan u n cam po de texto. C h ro m e despliega un control arriba-abajo. O pera despliega
un control de semana con una flecha hacia abajo que al presionarse hace que aparezca un calendario para el mes
actual con los correspondientes números de sem ana listados hacia abajo del lado izquierdo.
3.3
Elementos in p u t y d a ta l i s t y el atributo autocom plete
La figura 3 .1 7 muestra cóm o usar el nuevo atributo au to co m p lete y el elem ento d a ta l i s t.
3.3.1
A trib u to a u to co m p le te del elem ento in p u t
El atributo autocomplete (línea 18) puede usarseen tipos in p u t para llenar de m anera autom ática la inform a­
ción del usuario con base en la entrada anterior, com o nom bre, dirección o correo electrónico. Podem os habili­
tar el atrib u to autocom pl e te para todo u n form ulario o sólo para ciertos elem entos específicos. Por ejem plo, u n
form ulario de p ed id o s en línea p o d ría establecer a u to c o m p le te - "on' en los elem en to s in p u t d e no m b re
88
Capítulo 3
Introducción a HTML5: parte 2
y dirección, y establecer au to co m p lete - “o f f " en los elem entos in p u t de tarjeta de crédito y contraseña, para
fines de seguridad.
Tip para prevenir errores 3.1
E l atributo autocom plete sóloJunciona si especijica un atributo ñame o id para el elemento Input.
1 <!DOCTYPE h t* l>
2
J <1— Fig. 3.20: autocomplete.html —>
4 <1— El nuevo a t r i b u t o autocomplete y el elemento d a t a l i s t de form ularios de htmls. -->
5 <html>
6
<head>
7
<meta charset= "utf-8">
8
< title > E l nuevo a t r i b u t o autocomplete y e l elemento d a t a l i s t de HTML5</title>
9 </head>
10
11 <body>
12
<hl>0emo de autocomplete y d a t a l i s t < / h l >
13
<p>Este formulario demuestra el nuevo a t r i b u t o autocomplete de HTML
14
y el elemento d a t a l i s t .
U
</p>
16
17
<1— a c t i v a r autocomplete —>
18
<form nethod = "post" autoconpl e tc « “on"»
19
<p><label>Primer nombre:
20
<input type ■ “t e x t " 1 d - “primerNombre"
21
p laceho ld er = “Primer nombre"/> (Primer nombre)
22
< /labelx /p >
23
<p><label>Apellido:
24
cinput type = " te x t" i d = "ap ellido"
23
p laceho ld er = "Apellido" /> (A p ellido )
26
< /labelx /p >
27
<pxlabel>Emai 1:
28
<input type = "email" id = "email"
29
p laceho ld er ■ "nombreOdominio.com" /> ( [email protected])
30
< /labelx /p >
31
< p x l a b e l for = "HstaTexto"»Mes de nacimiento:
32
<input type « " t e x t " 1d ■ “lis ta T e x to "
33
p laceho ld er = "Seleccione un m es"11st = "meses" />
34
<data1 i s t id ="meses">
33
<option valué ■ “Enero">
36
coption valué = “Febrero"»
37
<option valué ■"Marzo"»
38
<option valué = “Abril"»
39
<option valué = "Mayo"»
40
-coption valué « “Junio"»
41
<option valué ■ “Ju lio " »
42
<option valué = "Agosto"»
43
<option valué ■ “Septiembre"»
44
coption valué = "Octubre"»
Figura 3 .1 7 | El nuevo atributo autocomplete y el elemento d a t a lis t del formulario de HTML5 (parte l de 3)
3.3
43
46
47
48
49
30
31
32
33
Elementos inp ut y d a t a lis t y el atributo autocomplete
89
coption valué = “Noviembre"»
<option valué ■ “Diciembre"»
</datal1st>
</labelx/p>
<p><1nput type - "submit" valué ■ “Enviar" />
-cinput type = “r e s e t " valué = "Borrar" /></p>
</form>
</body>
</ht*l>
a) Fomularto desplegado
i iki
en firefax antes de que el
. .
..
..
usuaoo mteractue co n él.
t i nuevo «tributo Jutocom pírtc y d cíe...
K
S
9
l
-r
h & Mey//Y:/ej«mpl©s/c*p03d»g03j7/duto<O4nplrteh«ml
C
RJ*Gooye
D cm o de a u to co m p lete y datalist
Este fonnubno demuestxa el nue\-o atnbuto autocomplete de HTML y el elemento dataktt
Pnroa nombre: 'm oer nombre
Apefrdo Apellide
(Pnmer nombre)
(Apeldo)
F.mad nompre? dom*n»o cc
(nombre 2 dominio com)
Mes de nacimiento Seleccione uf m*s
Enviar
b) autocoaplete lie n i
de manera automática
los datos cuando el
usuario regresa a un
lonnulaño enviado antes
y empieza a escnbir en el
elemento input PH «#r
Nombre; al hacer clic en
Jane se inserta el valor
en el elemento in p u t.
Bonar
jj§
El nuevo atributo au to co m p lete
•f*
y
d de... | + j
*5 filt:///Vi/ejfm plos./CipO jrfi^)3j7/éuto<om ptde.htm l
C
RJ *
G oog'*
P
ft
D-
D e m o de au tocom p lete y datalist
Este fotmuUxio detuuestxa el nuevo atxibuto autocomplete de HTML y el elemento datalist
Pnmer nombre J
[_Jan«
A p e ld o Apellido
(Pnmer nombre)
i
Emad nombro2>domm>o com «nombre tfdommio com)
Mes de nacimiento Se accione un mes
Enviar
Bonar
Figura 3 .1 7 | El nuew atributo autocomplete y el elemento d a t a lis t del formulario de HTML5 (parte 2 de 3).
90
Capítulo 3
Introducción a HTML5: parte 2
c) autocowplete con un
d a u 'H stq u e muesca
el valor que se escribió
antes ( Juni o) seguido de
todos los Cementos que
©inciden con lo que el
usuario ha escrito hasta
ese momento: al hacer
d ice n un elemento en
la lista »utoco»pi*t«
se inserta ese valor en el
elemento input.
. . . El nuevo atnbuto autoeomplete y H e le - | +
r t fileWY:/ej«mplo*/c»p03-'f»g03.17/«ulo<omplete.html
R J - Googit
f i n
D-
D em o de autoconiplete y datalist
Este fonnulano demuestra d nuc\*o atributo autocompletc de HTML y el demento datalist
Primer nombre Jane
Apellido Blue
Exnad jane@dom*nio com
lo s valores de
data M s t filtrados
según lo que se ha
escnto hasta ese
momento
C
(Pnmer nombre)
(Apefcdo)
«nombre c idonuroo com)
Mes de nacimiento. J
Figura 3 .1 7 | El nuevo atributo autocomplete y el elemento d a t a lis t del formulario de HTML5 (parte 3 de 3).
3 .3 .2
Elem ento d a t a l i s t
El elem en to da t a l i s t (líneas 32 a 47) provee opciones de entrada para un elem ento in p u t te x t . Al m om ento de
escribir este libro, el soporte de d a ta l i s t varía según el navegador. En este ejemplo usamos un elem ento d a ta l i s t para obtener el mes de nacim iento del usuario. Si usamos O pera, cuando el usuario hace clic en el cam po de
texto aparece una lista desplegable de los meses del año. Si el usuario escribe “M" en el cam po de texto, la lista
de los meses se reduce a Marzo y Mayo. Al usar Firefox, b lista desplegable de meses aparece sólo hasta después de
que el usuario empiece a escribir en el cam po de texto. Si d usuario escribe “M”, aparecerán todos los meses que
contengan la letra ttM" o “m" en b lista desplegable: M arzo, M ayo, Septiem bre, N oviem bre y D iciem bre.
3.4
Elementos de estructura de página
H T M L 5 introduce varios elementos nuevos de estructura de página (figura 3.18) que identifican de manera im­
portante ciertas áreas de b página com o encabezados, pies, artículos, áreas de navegación, apartado, figuras y más.
I
<!DOCTYPE ht«il>
<1— Fig. 3.18: elem entossectlon.htm l -->
<!— Nuevos elementos se c tío n de HTML5. —>
<html>
<head>
<meta c h a rse t« " u tf-8 " >
<title>Nuevos elementos se c tio n de HTML5</t1tle>
</head>
Figura 3 .I 8
| Nuevos elementos de sección de HTML 5 (parte l de 6).
3.4
10
11
12
13
14
Elementos de estructura de página
<body>
<header> < ! - - e l elemento header crea un encabezado para l a página —>
<1mg s r c - " lo g o d e ite l .pog" a l t - "Logo de O e lte l" />
<hl>Bienvenido a D eitel 8uzz 0nl1ne<hl>
I
16
17
< ! — e l elemento time I n s e r t a una
<t1ne> 2012-01-17 </t1i
fecha y/o una hora
-->
L
</header>
<sect1on 1d = "1"> < ! - - Comienza l a sección 1 -->
<nav> < ! - - vínculos de navegación de grupos del elemento nav —>
<h2> Publicaciones recientes</h2>
<ul>
<H><a h r e f o “http://wMw.deite1.com/books/lMBhtpS">
I n t e r n e t & World Wide Web How to Program, 5 / e < / a x / l 1 >
<11><a h r e f = “http://wMw.de1te1.com/books/andro1dfp/">
Android f o r Programmers: An App-Driven Approach</a>
</l1>
<!1><a h r e f = “http://wMw.de1tel.com/books/1phonefp">
iPhone fo r Programmers: An App-Driven Approach</ax/l1>
<H><a h r e f = "http://w w w .de1tel.com /books/jhtp9/">
lava How t o Program, 9/e</a></!1>
<11><a h r e f ■ “http://wMw.de1tel.com/books/cpphtp8/">
C++ How to Program, 8 / e < / a x / l 1 >
<11 >
<a h r e f ■ "http://www.de1tel.com/books/vcsharp20l0htp">
Visual C# 2010 How to Program, 4 / e < / a x / l 1 >
<11 x a h r e f = “http://www.deitel.com/books/vb2010htp">
Visual Basic 2010 How to Program </ax/l1>
</ul>
</nav>
</sect1on>
<sect1on 1d ■ "2"> < ! - - Comienza l a sección 2 -->
<h2>Libros de l a s e r i e CAoacute;mo programar</h2>
<h3xem>Java How to Program, 9/e</e*></h3>
<f1gure> < ! - - el elemento fig u re describe l a imagen -->
<1ng s r c = " J h t p .j p g ” a l t = "lava How to Program. 9/e" />
< ! - - e l elemento fig u re c a p tio n i n s e r t a una leyenda de f ig u r a —>
<f1gcapt1on>Cubierta de <em>Java How to Program, 9/e</em>
.</f1gcapt1on>
< /figure»
1
2
< I—e l elemento a r t i c l e re p re se n ta e l contenido de o t r a fuente -->
< art1cle>
<header»
<hS>De
<em>
<a h r e f = "http://wwM.de1te1.com/books/jhtp9/">
Figura 3 .1 8 | Nuevos elementos de sección de HTML 5 (parte 2 de 6)
91
92
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
Capitulo 3
Introducción a HTM LS: parte 2
Java How t o program, 9/e: </a>
</tn>
</hS>
</header>
<p>CaracterAiacute;sticas:
<ul>
<li>Extensa c o b e rtu ra de lo s fundamentos:
<1— e l elemento mark r e s a l t a te x to -->
<*ark>dos capA iacute;tulos sobre in s tr u c c io n e s de control .< / m a rk x / li>
<li>Enfoque en <*ark>ejemplos del mundo re al .< /« ia rk x /l 1>
<lixmark>Conjunto de e j e r c i c i o s Hacer l a d i f e r e n c i a . < / m a r k x / l i >
<H>IntroducciAoacute;n desde los primeros capA iacute;tulos a la s c la s e s .
o b je to s , mAeacute;todos y cadenas.< /li>
<li>Manejo de excepciones in te g r a d o .< /li>
<1 i>Archivos, f l u j o s y serial1zaciA oacu te;n de o b j e t o s . < / l i >
<li>Secciones modulares opcionales sobre el lenguaje y
caracterAiacute;sticas de la biblioteca de la nueva versiAoacute;n Java SE 7.</li>
<1 i> 0 tro s temas: Recursividad, bAuacute;squeda, ordenamiento,
colecciones genAeacute;ricas, genAeacute;ricos, e s t r u c t u r a s
de d a to s, a p p le ts , multimedia,
m u lti h ilo s , bases de datos/JDBCAtrade;, d e s a r r o l lo de
a p lic a c io n e s Web, s e r v i c i o s Web y un caso de e stu d io
opcional de DiseAntilde;o o rie n tad o a o b je to s con un ATM.</li>
</ul>
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
NO
111
112
113
114
115
< ! - - el elemento summary r e p re s e n ta un resumen para el —>
<1— contenido del elemento d e t a i l s —>
< details>
<summary>Testimonios de l a r e c ie n te ediciAoacute;n</summary>
<ul>
<H>"Se actual i zAoa cute; para r e f l e j a r l o Auacute; ltimo
en tecnologA iacute;as de Java; sus c la r a s
y d e ta lla d a s ex plicacio nes lo hacen
in d isp e n sa b le . Los e j e r c i c i o s de conciencia so cial
[Hacer l a d i f e r e n c i a ] son algo
verdaderamente nuevo y refrescante.**
<strong>Amdash;JosAeacute; Antonio
GonzAaacute;lez Seco, Parlamento de
A nda1ucA iacute;a< /strongx/li>
<1i>"Otorga a lo s nuevos programadores e l b e n e fic io de la
sabidurA iacute;a derivada de muchos aA ntilde;os de e x p e rie n c ia en
el d e s a r r o l l o de s o f tw a r e .”<strong>
ímdash;Edward F. Cehringer, North Carolina
S ta te U n iv e r s 1 ty < / s tr o o g x / li>
<11>“Introduce l a s buenas prA aacute;eticas y metodologAiacute;as
de d ise A n tild e ;o , j u s t o desde el p rin c ip io .
Un excelen te punto de p a r t id a para d e s a r r o l l a r
a p lic a c io n e s Java robustas de a l t a c a lid a d ."
<strong>Amdash;Simón R i t t e r ,
Oracle C o r p o r a tio n < / s tr o n g x / li>
<li>"Un e s t i l o conversacional fA aacute;cil de l e e r .
Los ejemplos de cAoacute;digo c la ro s impulsan a los le c to r e s
Figura 3 .1 8 | Nuevos elementos de sección de HTML 5 (parte 3 de 6).
3.4
116
117
118
119
120
121
122
123
124
123
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
143
146
147
148
149
150
151
152
133
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
Elementos de estructura de página
93
a volverse expertos en Java."
<strong>—Patty K ra ft, San Diego S tate
U niversity</strong> </li>
< l i > ’’Un ex celente l i b r o de te x to con una i n f in i d a d de ejemplos
de diverso s dominios de apiicacionesAmdash;
excelente para un curso o r d in a r io de CS1 o CS2."
<strong>Amdash;William E. Duncan, Louisiana
S ta te U niversity</strong> </li>
</ul>
</d e ta lls >
</p>
</art1cle>
< !— el elemento a s id e r e p re s e n ta e l contenido en una barra l a t e r a l que -->
< l- - e s t á relacionado con el contenido a lred e d o r del elemento -->
<as1de>
Los navegadores no a p lic a n formato al elemento aside.
</as1de>
<h2>Libros de la s e r i e D e ite l Developer</h2>
<h3><em>Android f o r Programmers: An App-Driven Approach
</em></h3>
Haga c l i c <a h r e f ■ " h ttp ://»**«. deitel.com /books/androidfp/"»
aquí</a> para obtener más informaciAoacute;n sobre c4oacute;mo
pedir e ste lib r o .
<h2>Videos LiveLessons</H2>
<h3><em>C# 2010 Fundamentáis LiveLessons</emx/H3>
Haga c l i c <a h r e f ■ "http://»**».deitel.com /Books/LiveLessons/">
aquí</a>para o btener más informaci&oacute:n sobre nu estro s v i ­
deos LiveLessons.
</section>
<section id = “3 " > < ! - - Comienza l a sección 3 —>
<h2>Resultados de n u e s tra encuesta en Facebook</h2>
<p>S1 usted fuera un novato que deseara aprender lava por primera
vez, & iq u e s t; p r e f e r ir & ia c u te ; a un c u rso que e n se & n tild e ;a ra Java
en e l contexto del d e s a r r o llo de a p lic a c io n e s Android? Estos son lo s resu ltad o s
de n u e stra encuesta:</p>
<I — el elemento meter re p re s e n ta una e sc a la dentro de un rango -->
0 <meter min =“0"
max = "54"
valué » " 1 4 - x / « e t e r > 54
<p>De lo s 54 p a r t i c i p a n t e s , 14 (v e r d e ) p re fe rír& ia c u te ;a n
aprender Java en el contexto del d e s a r r o llo de a p lic a c io n e s Android.</p>
</section>
<1— e l elemento f o o te r re p rese n ta un pie de una sección o página, -->
< 1— por lo general contiene información como e l nombre del a u to r , -->
<1— c o p y rig h t, e tc . —>
<footer>
<1— el elemento wbr in d ic a e l lu g a r apropiado en dónde se p a ra r —>
< I — una palabra cuando el te x to se a j u s t e -->
<H6>© 1992-2012 por D eitel & Associ<wbr>ates, Inc.
Figura 3 .1 8 | Nuevos elementos de sección de HTML 5 (parte 4 de 6).
94
69
70
71
72
73
74
73
76
77
78
Capítulo 3
Introducción a HTML5: parte 2
Todos los derechos reservados.<h6>
<1— el elemento address re p re s e n ta l a información de contacto para un —>
< 1-- documento, o para el elemento body o a r t i c l e más cercano — >
<address>
Escriba a <a href ■ m a i lto : d e ite l0 d e 1 te l.c o m >
deitel© deitel.com </a>
</address>
</footer>
</body>
</html>
a) El navegador
Giróm e muestra el
N u f v o f « i a m m o t t« ctic
*
elemento header
yu n elemento «av
(pe contiene una
ista desordenada de
vínculos.
C
L
fiiey//Yyejemplos/cap03/f»g03.18/eiementosSection.ntml
M igeridM
r
(J
A t b S lK t G«»r >
D
f*~)
t& to á o d « l m « m -
e it e l
E:
B i e n v e n i d o a D e ite l B u z z O n l i n e
2012-01-17
P u b lic a c io n e s r e c i e n t e s
• InlrmrT ■
(■U « H \VwV- U V I' Ho« U.
•
<r
An A p p .rW » ^ Apfnoarfi
•
A " App-Driven Approech
• J f i H o t iv P i o a r a . 9 c
• Cr: He» lflPippam h c
• Vm m t C« >010 How te t W — * e
• Venal Basic 2010 How to Pi p c t b
^ El navegador Chrome
muestra el comien/o de
____________
' H u e v o s H * -n * " tc n i* < t«
ir a sección (se ctio n )
cjje contiene un elemento
fig u re y un elemento
C
Ít
*
csbi^b
\
J : filey//Y;/ejemplos/cap03/fig03.18/elementosSection.html
»03su^endos
W eb S*<c G tllc y
•£? =
C U W ip o n rá o ó t fcrtern..
flg u recap tlo n .
L i b r o s d e la s e r i e C ó m o p r o g r a m a r
Java How to Program, 9/t
Cubierta de J a \ a H oh to Program . 9 *
Figura 3 .1 8 | Nuevos elementos de sección de HTML 5 (parte 5 de 6)
[j|
3.4
c) El navegador Chrome
nuestra un elemento
r ;v, Nuevtt
a rtic le q o e contiene un
C
Elementos de estructura de página
95
c* sao* ■V
C¡ f«*ey//Yye*mp»os/cap03/f»g03J 8ye<emeni<>iS«ci>oaMml
elemento header. cierto
]) tfc ÜKCó«Hf»y Cj
E
á* Wfm.
contengo y un elemento
d e ta ll* contraído,
segudo de un elemento
Pe
9t
C n u n tfk a i
a s id *
• Externa cobertsea de b» fundamenten dos capeaos sobre «OTuicienr» de control
• Erfoque ttx tyaapk* dd cnado 11 A
• Cccrxíc* de erxcKK-t H acrr la dÉrrm :ui
•
•
•
•
lnbod*:ck>o desde bs prono* cjprJos a las clases, objetos, métodos v cadenas
Manejo de ncqjcioon rtrpado
Ardaos, flujo» y serakr*.*».'®de cuetos
Srccmrt tmxbúars epoemiet sobre H Imfuajr y cjiaclrmfe:a% dr la tubbcrtrca dr la
nueva vetsioa Jasa SE ?.
• Otros temas RecxauMdad búsqueda otdmanareto. cotecocats fenencas (romeos,
o trucna as dr dalos «pptrt» nrufanedd tnufcfctcv baso dr dalos JDBC™. d o «nodo
df jpkacscmes Web. servicios Web y un caso de r;nxSo opcional de Dtseto <n#m*do
a objetos con un ATM
*
►Tramemos de la ccoente etkioo
Los navrfadove* no apbcao formato al elrtrmto aiadr
d) El navegador Chrome
nuestra el final de la
sección (*e ctlo n )q u e
...............
Hueveaetf'nr*Mc^setU *
C
empezó en la parte (b ).
J: file///yy<jemi>k>s/cao03/ttg03.18/eiem«ntosSeaK)nntml
¿J*
=
Ll Sacs 1^ 9 » Oo« [2 rt*t>SUtGa*a> C j bpenad© *• biart^*
«
L ib ro s de la se rie D eitel D eveloper
A n d ro id fo r Program m ers: A n App-D riven Approach
Ha*a cIk
para obceca mas nfonnacxti sobre com o p ed a este tíbio.
V ideos I.iseL esso n s
4
C'B 2010 Fundamentáis Li\eLe\son\
H ara c k
e) El navegador Chrome
nuestra la última sección
—
—
— ----------------------------------------------i r É r t n a
i 2 S¿.#vowUoic'Hoí tac*. ■ ■
(se ctlo n )q u e contiene
m ¿em ento « e te r.
segudo de un elemento
fo o tar.
para obtener m as m fo n n a o » sobre nuestros videos LfveLessons
C
t.ie///Y,y«jf<mpkw/CAcO3/Tig03.18/ebmenTosSeci>oa.himi
J SrtMH s«3 «r*0 i
I
W«t>
£*
E
G***) C3 Imperado mW nm
#4
R esultados de n u e stra en cu esta en F aceb o o k
Si usted fuera un novato que deseara apreeder lav a por p r o n a vex, kpffíerwia un n a s o que
enseúx a Jasa en d cc«Cexlo d d desan clo de apbcaacoes A d A cv í' Estos son k»s resufcados
d e a s e s ta e n c trs u
O li i
54
De b s 54 p aracp aatri. 14 (verde) prefntm c ajxeodn t o t en el contexto del desanoSe de
a p k o a o o n Android
t 19955915porfttitíl AAiwctMn. lac To4mSo«ItmlM>«>cna4»»
Figura 3 .1 8 | Nuevos elementos de sección de HTML 5 (parte 6 de 6).
r’
96
3.4.1
Capitulo 3
Introducción a HTML5: parte 2
Elemento header
El elem en to head er (líneas 12 a 19) crea un encabezado para esta página que contiene tanto texto com o
gráficos. EJ elem ento head er puede usarse varias veces en una página y puede incluir encabezados d e H T M L
(<hl> a <h6>), navegación, imágenes, logotipos y más. Para ver un ejemplo, revise la parte superior d e la página
principal de su periódico favorito.
E l elemento tim e
E l d e m e n to tim e (línea 17), que n o necesita ir encerrado en un h e a d e r. nos perm ite identificar una fecha
(como en el ejem plo que m ostram os), una hora o ambas.
3.4.2
Elemento nav
El d e m e n to nav (líneas 22 a 42) agrupa vínculos de navegación. En este ejem plo usam os el encabezado
P u b lic a c io n e s r e c i e n t e s y creamos un elem ento ul con siete elem entos l i que vinculan a b s páginas Web
correspondientes para cada libro.
3.4.3
Elemento figure y elemento figeaption
El d e m e n to f ig u r e (líneas 49 a 55) describe una figura (com o una imagen, gráfico o tabla) en d docum ento,
de m odo que pueda moverse a la parte lateral de la página o a o tra página. El elem ento f igu re no incluye estilos,
pero podem os aplicarlos m ediante CSS. EJ d e m e n to f ig e a p tio n (líneas 53 y 54) proporciona una leyenda
para La imagen en d elem ento f ig u r e .
3.4.4
Elemento a r t ic le
El elem ento a r t i c l e (líneas 58 a 127) describe contenido independiente que podría usarse o distribuirse en
o tra parte, com o un artículo de noticias, mensaje en un foro o entrada en un blog. Es posible anidar elem entos
a r t i c l e . Por ejem plo, podría ten er co m en tario s d e los lectores sobre una revista an id ad o s c o m o u n ele­
m en to a r t i c l e dentro del dem en to a r t i c l e de la revista.
3.4.5
Elemento suramary y elemento d eta ll s
El d e m e n to sunmary (línea 92) m uestra una flecha que ap u n ta a la derecha enseguida de un resumen o leyenda
cuando el docum ento se despliega en un navegador (figura 3.19). Al hacer clic en la flecha, ap u n ta hacia abajo
y revela el contenido d d d e m e n to d e t a l l s (Eneas 91 a 125).
3.4.6
Elemento sectlon
El d e m e n to s e c tlo n describe una sección de un docum ento, por lo general con un encabezado para cada sec­
ción; estos elem entos pueden anidarse. Por ejem plo, podría tener un d e m e n to s e c tio n para u n libro y luego
elem entos s e c tio n anidados para el nom bre de cada capítulo del libro. En este ejemplo, dividim os el docu­
m ento en tres elem entos s e c tio n : el prim ero es P u b licacio n es recien tes (líneas 21 a 43). El elem ento s e c tlo n
tam bién puede anidarse en un artículo ( a r t i c l e ) .
3.4.7
Elemento asi de
El d e m e n to a s ld e (Eneas 131 a 133) describe contenido relacionado con el contenido circundante (com o un
elem ento a r t i c l e ) , pero en cierto m odo está separado d d flujo d d texto. Por ejem plo, un d e m e n to a s id e en
una historia de noticias podría in d u ir cierto historial de fondo. U n anuncio im preso podría in d u ir un elem ento
a s id e con testim onios de productos de los usuarios.
3.4
Elementos de estructura de página
97
Nv
C
£
ir7//tVc(err p'OV'apOVT-jD3.18. r e'rcntc-^ct on hírrl
=
•f
►IfikuwitdeUiKiaftr^a
■WWW■■"111 •«'« •
C
t'lr//
_) U+< tfm + c *
-__________ _________________________
p o v 'ta p O
*) * + »c« CMry Q 1
1a /e ’em *m c*S «ctoa Mrr'
E
* W*«-.
*
V 7 ri« u M M n irU i-:i-tfP ^ a
• V *.?«jfeo ;.» < rriW y lo iA « » m tca* to ru » d r :* » . m» d » t * tfcfftaSn
e ^ a n o a r i te lacea D d h p w u H t t * » e ja o n o » ó f « o a t K * t o r a l [Hace» b
(Sfctrarrt) K * «l«o >TT:Uin«r*rr#? t a r t u 9 tdSrw r rf r * — J e t * 4 h o m (.«.« hj I«/
^k* PubüNi* 4+^Biihru
.
' O t t p A fc* itjrsc-i j « c p i c * l t f « d
áe b i4 t« & a u d rm x i i Ar a a * h o t
elo« de « ip m n v i» f e d drsw eS A d e e d h n r » ' - f 4 » i d F G « b n if « r . N o c d
€i»ulw«stau I ah•«*>
•
'Im c-fere U i toeca: jr*c tv :« v m tro ó o k o as 4 * d e r t » w « o d r td r d f n v ' f » U
« ¿c tro te p w íu d r pm bda p«A ó m i c í í b « p fc^io o cs
lobm uti de d u cdiAfcl *
- S w o » R ittíf. O r u l e ( ««pontiM
• T*r»lfc><ocMS%*.»MKÍ*aldirlrfT U» r>ra**>»dr ;od«ocímcntnpátm• fc>*
I r d o m a v o fc fi» e \p ftts n en « > i * - f j m K raft. S a i D í r f e S i i i f l a n m m
• T » r% ¿ d e it? lfc 'o < S rfrU o c o e w u e 6 » (W 4 d e rre rfc * d e < fc v m o t4 o a w « 4 r
ffeaocon — nrAme p a i« o a * o o á n * » drCSUC$2 *—V ü i a F.
Du c i i . L im h iím í V al* t atwrttf>
Figura 3 .1 9 | Demostración de los elementos summar y y d e ta ll.
3 .4 .8
Elemento m e te r
EJ dem ento meter (líneas 155 a 157) despliega una representación visual de una medida dentro de un rango (fi­
gura 3-20). E n este ejemplo mostramos los resultados de una encuesta reciente que hicimos. El atributo min es "0”
y un atributo max es "54"; esto indica el núm ero total de respuestas a nuestra encuesta. El atributo v a lu é es "14" y
representa el núm ero total de personas que respondieron us f a la pregunta de nuestra encuesta.
Nuevw elemento* *«t»e *
j
C
2 filey//Y7ejemplo5/Cdp03/f*903.18/element<>sSectionhtmJ
ü $*** H*9«*»dci
l
Acto $ * e OAiiery C3 Impodtdc de Wem..
R esultados de n u e stra encuesta en F acebook
usted fuera un novato que deseara aprender Java por primera vez cpieíeriria un cuiso que
enseriara Java en el contexto del desarrollo de apS: anones Andrced' Estos son los i espirados
de nuestra encuesta
Si
0|-t----
54
De los 54 participantes. 14 (verde) prciernan aprender Java en el contexto del desabollo de
ap beaciones Android
Figura 3 .2 0 | El navegado* Chrome desplega el elemento meter.
98
Capitulo 3
3.4.9
Introducción a HTML5: parte 2
Elemento footer
£1 e lem en to f o o t e r (líneas 165 a 176) describe u n pie. contenido que por lo general aparece en la parte inferior
del contenido o elem ento s e c tio n . En este ejem plo usamos el elem ento f o o te r para describir el aviso de co­
pyright y la inform ación de contacto. Podem os usar CSS3 para aplicar estilo al elem ento f o o te r y posicionarlo
en la página.
3.4.10
Semántica a nivel de texto: elemento mark y elemento wbr
£1 elem en to mark (líneas 72 a 74) resalta el texto encerrado en el elem ento. £1 d e m e n to wbr (línea 168) indica
el lugar apropiado para dividir una palabra cuando el texto se ajusta en varias líneas. Podríam os usar wbr para
evitar que una palabra se divida en un lugar inapropiado.
Resumen
Sección 3 .2
Nuevos tipos In p u t deform ularios de H TM L5
HTML5 introduce varios nuevos tipos i nput y atributos para formularios. Éstos no son soportados de manera universal
por todos los navegadores todavía.
• H navegador Opera ofrece un soporte robusto de los nuevos tipos Input.
• Proporcionamos resultados de ejemplo de una variedad de navegadores, para que usted pueda ver ladiferencia dd com­
portamiento de los tipos i nput en cada uno.
•
Sección 3.2.1
•
•
•
•
•
•
•
•
In p u t tipos co l or
El tipo input color (pág. 80) permite al usuario introducir un color.
la mayoría de los navegadores despliegan el tipo input color como un campo de texto endonde d usuario puede
introducir un código hexadecimal.
En el futuro, cuando d usuario haga clic sobre un tipo input color, es probable que los navegadores muestren un cuadro
de diálogo en donde el usuario podrá elegir un color.
El atributo autofocus (pág. 80), que puede usarse sólo en un demento i nput de un formulario, coloca d cursor en d
campo de texto después de que se carga d navegador y despliega la página. No necesitamos incluir d elemento autofo­
cus en nuestros formularios.
Los nuevos tipos input de HTM1.5 tienen validación automática dd lado dd cliente, con lo cual se dimina la necesi­
dad de agregar código de JavaScript para validar la enrrada dd usuario y reducir la cantidad de daros incorrectos que se
envían.
Cuando un usuario introduce datos en un formulario y luego lo envía, el navegador verifica de inmediato si los datos
son correctos.
Si desea anular la validación, puede agregar d atributo formnoval idate (pág. 82) al tipo i nput submit.
Mediante el uso de JavaScript es posible personalizar d proceso de validación.
Sección 3.2,2
1nput tipo d a te
• El tipo input d a t e (pág. 82) permite al usuario introducir una fecha en d formato aaaa-mn-dd.
• Firefox e Internet Explorer muestran un campo de texto en donde d usuario puede introducir una fecha, como
2 0 1 2 -0 1 -2 7 .
• Chromc y Safari muestran un control spinner (pág. 82): un campo de texto con una flecha arriba-abajo
( q ) dd lado derecho: esto permite al usuario seleccionar una fecha, haciendo clic en las flechas hacia arriba o hacia
abajo.
• Opera muestra un calendario.
Resumen
Sección 3-2.3
•
99
Input tipo da te tim e
£1 tipo Input datetime (pág. 82) permite al usuario introducir una fecha (año, mes, día), tiempo (hora, minuto, se­
gundo, fracción de segundo) y zona horaria establecida en el U TC (Tiempo universal coordinado o Tiempo universal,
coordinado).
Sección 3.2.4
Input tipo d a te tlm e -lo c a l
• El tipo input datetlme-local (pág. 82) permite al usuario introducir b fecha y hora en un n ¡o control.
• La fecha se introduce como año, mes, día. hora, minuto, segundo y fracción de segundo.
Sección 3.2.5
•
•
•
•
•
•
•
Input tipo ema 11
El tipo Input anal 1 (pág. 83) permite al usuario introducir una dirección de corteo electrónico o una lista de direcciones
separadas por comas.
Si el usuario introduce una dirección de correo inválida (es decir, si d texto introducido no tiene el formato correcto)
y hace clic en ci botón Enviar, se despliega una anotación que pide al usuario que introduzca una dirección de correo
electrónico y apunta a ese elemento Input.
HTM L 5 no valida si en realidad existe una dirección de correo electrónico introducida por el usuario; tan sólo valida
que la dirección esté en d formato cometo.
El atributo placeholder (pág. 83) le permite colocar texto temporal en un campo de texto. Por lo general, d texto de
un placeholder es de color gris claro y proporciona un ejemplo dd texto y d formato de texto que el usuario debe in­
troducir. Cuando se coloca d enfoque en d campo de texto (es decir, que d cursor se encuentre en d campo de texto),
desapareced texto dd placeholder: no se “envía" cuandod usuario hacecliccn cl botón F.nviar (a menos quecl usuario
escriba el mismo texto).
Es conveniente agregar texto descriptivo a la derecha de cada demento Input en caro de que d navegador dd usuario
no soporte el texto de placeholder.
E l atributo required (pág. 84) obliga al usuario a introducir un valor antes de enviar el formulario.
Puede agregar d atributo required a cualquiera de los tipos 1nput. Si el usuario no completa un elemento requerido,
aparecerá una anotación señalando esc elemento vacio y pedirá al usuario que introduzca la información.
Sección 3*2.6
Input tipo month
• El tipo Input nonth (pág. 84) permite al usuario introducir un año y mes en cl formato aaaa-mn, como 2012-01.
• Si d usuario introduce un mes en un formato incorrecto y hace clic en d botón Enviar, aparecerá una anotación para
indicar que se introdujo un valor incorrecto.
Sección 3*2.7
Input tipo number
• El tipo Input number (pág. 84) permite al usuario introducir un valor numérico.
• El arributo «rin establece d número mínimo válido, en este caso “O*.
• E l atributo max establece d número máximo válido, que se estableció en a7~.
• El atributo step determina d incremento que se aplicará a los números. Por ejemplo, si establecemos step en"2", cl
número en d control spinner aumentará o disminuirá por dos cada vez que se haga clic en la flechahada arriba o hacia
abajo de ese control, respectivamente.
• El atributo valué establece d valor inicial que se muestra en cl formulario.
• El control spinner incluye sólo los números válidos. Si d usuario intenta introducir un valor incorrecto al escribirlo
en d campo de texto, aparecerá una anotación que señalará cl demento Input number e instruirá al usuario para que
introduzca un valor válido.
100
Capitulo 3
Sección 3-2.8
Introducción a HTML5: parte 2
In p u t tipo range
• Hl tipo Input range (pág. 85) aparece como control deslizante en Chrome. Safari y Opera.
•
•
•
Podemos establecer el mínimo y máximo, además de especificar un valor.
El control deslizante aparece en el valor dentro dd rango cuando se despliega el documento de HTML5.
£1 tipo input range se valida automáticamente de manera intrínseca cuando d navegador lo despliega como control
deslizante, ya que el usuario no puede mover d control deslizante fuera de los limites dd valor mínimo o máximo.
Sección 3 .2 .9
•
•
In p u t tipo search
£1 tipo input search (pág. 85) proporciona un campo de búsqueda para introducir una consulta y es equivalente en
fundón a un elemento input de tipo text.
Cuando d usuario empieza a escribir en d campo de búsqueda, Chrome y Safari muestran una Xen b que se puede
hacer clic para borrar d campo.
Sección 3.2.10
In p u t tipo te l
• £1 tipo input te l (pág. 86) permite al usuario inrroducir un número telefónico.
• Al momento de escribir este libro, d tipo input t e l se despliega como un campo de tocto en todos los navegadores.
• La longitud y d formato de los números tdefónicos varía de manera considerable con base en la ubicación, debido a
lo cual b validación es un proceso bastante complejo. HTML5 no tiene validación automática pata d tipo input te l.
Rúa asegurar que d usuario introduzca un número rdefónico en un formato apropbdo, puede usar d atributo pattern.
• Cuando d usuario introduce un número rdefónico en d formato incorrecto, aparece una anotación que solicita d for­
mato correcto y apunta al elemento input te l.
Sección 3.2.11
in p u t tipo t i me
• El tipo input tiñ e (pág. 86) permite al usuario introducir una hora, minuto, segundo y fracción de segundo.
Sección 3.2.12
in p u t tipo u rl
• El tipo input u rl (pág. 87) permite al usuario introducir un URL. El demento se despliega como un campo de texto.
Si el usuario introduce un URL con un formato incorrecto, d URL no se validará. HTML5 no verifica si el URL in­
troducido existe en realidad.
Sección 3.2.13
In p u t tipo week
• El tipo input week (pág. 87) permite al usuario sdcccionar un año y número de semana en el formato aaaa-Wnn.
• Opera despliega un conrrol de semana con una flecha hacia abajo que al presionarse hace que aparezca un control de
calendario.
Sección 3.3.1
A tributo autocompl e te del elemento i npu t
• El atributo autocomplete (pág. 87) puede usarse en tipos input para llenar de manera automática la información d d
usuario con base en b entrada anterior.
• Rodemos habilitar d atributo autocomplete para todo un formulario o sólo para ciertos elementos específicos.
Sección3 .3 .2
Elemento d a ta lis t
• El demento d a ta li s t (pág. 90) provee opciones de entrada para un elemento input tex t. El navegador puede usar estas
opciones para mostrar opciones autocomplete al usuario.
Sección 3 .4
Elementos de estructura de página
• HTML5 introduce varios elementos de estructura de página nuevos.
Resumen
Sección 3.4.1
101
Elemento header
• £1 elemento header (pág. 96) crea un encabezado para la página que contiene texto, gráficos o ambas cosas.
• £1 elemento header puede usarse varias veces en una página y con frecuencia incluye encabezados de HTML.
•
£1 elem ento tim e (pág. 9 6 ) n o s perm ite identificar u n a fecha, u n a hora o am bas.
Sección 3 .4 .2
Elemento nav
• El elemento nav (pág. 96) agrupa vínculos de navegación.
Sección 3.4.3
Elemento fig u r e y elemento flg c a p tlo n
• E l elemento figure (pág. 96) describe una imagen en el documento, de modo que pueda moverse a la parte lateral de
h página o a otra página.
•
E l d e m e n to f lg c a p tlo n (pág. 96) proporciona u n a leyenda para la im agen en d d e m e n to f ig u r e .
Sección 3 .4 .4
Elemento a rt1 e le
• El d e m e n to a r t i c l e (pág. 96) describe c o n te n id o in d e p en d ien te del c o n te n id o principal d e la página y podría usarse
o distribuirse en o tra parre, c o m o u n a rtíc u lo de noticias, m ensaje en u n foro o e n rra d a e n u n blog.
• Es posible anidar elementos arti cíe.
Sección 3 .4 .5
•
Elemento sunaa r y y elemento d eta 11 s
E l elem ento s u m a ry (pág. 96) m uestra u n a flecha q u e a p u n ta a b derecha enseguida d e un resum en o leyenda cu an d o d
d o cu m en to se despliega en un navegador. Al h acer clic en la flecha, a p u n ta hacia abajo y revda d co n ten id o d d d e m e n to
d e t a l l s (pág. 96).
Sección 3 .4 .6
Elemento s e c tlo n
•
El elemento section (pág. 96) describe una sección de un documento, por lo general con un encabezado para cada
sección.
•
Es posible a n id a r elem entos s e c t ion.
Sección 3 .4 .7
Elemento a sid e
• E l d e m e n to a s id e (pág. 96) describe c o n te n id o rd acio n ad o co n d co n ten id o circ u n d an te (com o un elem ento a r t i c l e ) ,
pero en cierto m o d o está separado d d flujo del texto.
■ Es posible anidar elementos nav dentro de un elemento aside.
Sección 3 .4 .8
Elemento me te r
• El elem ento m eter (pág. 97) despliega u n a representación visual de u n a m edida d e n tro de un rango. Los a trib u to s útiles
d e m eter son n in , max y v a lu é .
Sección 3 .4 .9
Elemento fo o te r
El demento footer (pág. 98) describe un pie. contenido que por lo general aparece en la parte inferior dd contenido o
elemento sectlon.
■ Podemos usar CSS3 para aplicar estilo al elemento footer y posicionarlo en la página.
•
Sección 3.4.10
•
•
Semántica a nivel de texto: elemento marky elemento wbr
E l d e m e n to nark (pág. 9 8 ) n o s perm ite resaltar texto.
El dem ento Hbr (pág. 9 8 ) indica el lugar apropiado para dividir u n a palabra cu an d o el texto se ajusta en varias líneas.
P odríam os usar wbr para evitar q u e u n a palabra se divida en un lugar inapropiado.
102
Capítulo 3
Introducción a HTML5: parte 2
Ejercicios de autoevaluación
3.1
Complete las siguientes oraciones:
a) FJ tipo in p u t c o lo r permite al usuario introducir un color. Al momento de escribir este libro, la mayoría de los
navegadores despliegan d tipo input c o lo r como un campo de rexto en donde d usuario puede introducir un
b) El atributo___________ nos permite colocar texto temporal en un campo de ta to .
c) Si desea anular la validación, puede agrcgird atributo fbrm novalidate al tipo i n p u t __________ .
d) El atributo__________ obliga al usuario a introducir un valor antes de enviar d formulario.
c) Pbr lo general se muestra d control___________ para d tipo in p u t number c incluye sólo los números válidos.
0 EJ tipo in p u t__________ permite al usuario introducir una hora, minuto, segundo y fracción de segundo.
g) El d em en to __________ proporciona opciones de entrada para un demento in p u t te x t.
h) £1 dem ento__________ describe contenido que está separado dd contenido principal de la página y que posi­
blemente podría utilizarse o distribuirse en otra parte, como un artículo de noticias, mensaje de foro o entrada de
blog.
i) El dem ento ________ describe d t a t o que por lo general aparece en la parte inferior d d contenido o de un
elemento sectio n .
j) El elem ento__________ indica d lugar apropiada para dividir una palabra cuando d texto se ajusta en varias
líneas.
3.2
Indique si cada uno de los siguientes enunciados es verdadero o falso. Si es falso. aplique por qué.
a) Cualquier tipo Input particular de formulario de HTML5 debe desplegarse de manera idéntica en todos los
navegadores compatibles con HTML5.
b) Cuando se coloca d enfoque en d campo de texto (es decir, si el cursor está en d campo de ta to ), se envía d ta to
del atributo p laceh o ld er al servidor.
c) No es necesario incluir el atributo autofocus en sus formularios.
d) Los nuevos tipos input de HTML5 tienen validación automática dd lado dd cliente, con lo cual se dimina la
necesidad de agregar secuencias de comandos (script) complicadas a sus formularios para validar la entrada d d
usuario y se reduce la cantidad de datos inválidos que se envían.
c) El tipo input range se valida automáticamente de manera intrínseca cuando d navegador lo despliega como un
control deslizante, ya que d usuario no puede mover d control fuera de los límites del valor mínimo o máximo.
0 HTML5 cuenta con validación automática para el tipo in p u t t e l .
g) Si el usuario introduce un URL con un formaro inapropiado en un tipo in p u t u r l , no se validará. HTML5 no
valida si d URL introducido a is te e n realidad.
h) El demento nav muestra un menú dcsplcgable de hipervíneulos.
i) El demento header puede usarse sólo una vez en una página.
j) Los elementos nav pueden anidarse en un demento a s i de.
k) Podemos usar d demento brk para evitar dividir palabras en lugares incorrecto.
Respuestas a los ejercicios de autoevaluación
3.1
3.2
a) código hexadecimal. b) p laceholder. c) submit. d )re q u ire d . e )sp in n e r. f)tim e . g) d a t a l i s t . h) a r ­
ric ie . i) fo o ter. j)wbr.
a) Falso. El despliegue de los tipos input puede variar de un navegador a otro, b) Falso. Cuando se coloca d enfoque
en d campo de taco , d texto de pl acebo 1d er desaparece. No se “envía” cuando el usuario hace clic en d botón
Enviar (a menos que el usuario escriba d mismo ta to ), c) Verdadero, d) Verdadero, e) Verdadero. 0 Falso.
La longitud y el formato de los números telefónicos varía de manera considerable con base en la ubicación, por
Ejercicios
103
lo que la validación se vudvc bastante compleja, así que HTML5 no cuenta con validación automática pata d
tipo input t e l. Para asegurar que el usuario introduzca d número en un formato apropiado, usamos d atributo
pattern. g) Verdadero, h) Falso. El elemento nav agrupa vínculos de navegación, i) Falso. FJ elemento header
puede usarse varias veces en una página ya menudo incluye encabezados de HTM L (<hl> a <h6>). j) Verdadero,
k) Falso. Puede usar d elemento wbr para evitar dividir las palabras en lugares incorrectos.
Ejercicios
3.3
3.4
3.5
Complete las siguientes oraciones:
a) El atributo_____________ (que se utiliza en un solo elemento input en un formulario) resalta de manera automá­
tica el elemento input y, si se usa de manera apropiada, coloca d cursor en d campo de texto después de que d
navegador carga y despliega la página.
b) Los nuevos tipos input de HTML5 tienen______________dd lado dd cliente.
c) El tipo input____________ permite al usuario introducir un valor numérico.
d) El tipo inp ut____________ se valida automáticamente de manera intrínseca cuando lo despliega d navegador
como un control deslizante, ya que el usuario no puede mover d control fuera de los límites dd valor mínimo o
máximo.
c) El atributo_____________ puede usarse en los tipos input para completar de manera automática b información
dd usuario con base en datos de entrada anteriores.
0 El demento_____________ proporciona una leyenda para b imagen en el demento figure.
g) El elemento summary muestra una flecha que apunta a b derecha enseguida de un resumen o leyenda cuando el
documento x despliega en un navegador. Al hacer clic en la flecha, ésta apunta hacia abajo y revela el contenido
dd elemento_____________.
h) El elemento mark nos permite_____________ .
Indique si cada uno de los siguientes enunciados es v e r d a d a v ofalso. Si esfalso, explique por qué.
a) Los navegadores que despliegan d tipo i nput color como campo detexto requierenque d usuario introduzca d
nombre de un color.
b) Cuando un usuario introduce datos en un formubrio y luego lo envía (por lo general, al hacer clic en d botón
Enviar), d navegador verifica de inmediato que los daros sean correctos.
c) HTML5 puede validar si b dirección de correo electrónico introducida por el usuario existe en realidad.
d) Puede agregar requi red a cualquiera de los cipos input.
c) Puede habilitar autocowpl ete sólo para ciertos elementos input.
0 El demento time nos permite identificar una fecha, hora o ambas.
g) El elemento caption proporciona una leyenda para b imagen en un demento figure.
h) FJ elemento detai 1s muestra una flecha que apunta a b derecha enseguida de un resumen o leyenda cuando el
documento se despliega en un navcgtdor. Al hacer clic en la flecha, &ta apunta hacia abajo y revela d contenido
del elemento summary.
i) FJ elemento footer describe d contenido que por lo general aparece en b parte inferior dd contenido o del
elemento section.
j) El elemento highlight nos permite resaltar tcxro.
Escriba un demento (o dementos) de HTML5 pana realizar cada una de bs siguientes tarcas:
a) Se pidió a los estudiantes que clasificaran los alimentos en b cafetería, en una escab dd 1 al 10.Use un demento
meter con texto a su izquierda y a su derecha para indicar que b calificación promediofue 7 de 10.
b) Cree un elemento detai 15 que muestre el texto "Resultados de la encuesta*' en d demento summary para b
parte (a). Cuando d usuario haga clic en b flecha enseguida dd texto de suranary. deberá aparecer un párrafo que
explique sobre la encuesta.
c) Cree un demento input text para d primer nombre. El demento deberá recibir d enfoque de manera automá­
tica al momento de desplegar d formubrio en un navegador.
d) Modifique b pane (c) de modo que se elimine d elemento label y use texto en un demento placehol der en d
demento input.
104
Capitulo 3
Introducción a HTML5: parte 2
e) Use un demento data 1i s t para proveer una lista aitoconpl e te para cinco estados.
0 Cree un demento in p u t range que permita al usuario sdeccionar un número dd 1 al 100.
g) Especifique que no debe permitirse el atributo ajto co w p lete en un formubrio. Muestre sólo b etiqueta de
apertura dd formubrio.
h) Use un demento mark para resaltar d segundo cnuncbdo d d siguiente párrafo:
<p>Se piditoacute; a los estudiantes que ca lifica ra n los alimentos en l a cafetería
En una escala del 1 al 10. El resultado promedio fue 7.</p>
3.6
(Formulario de registro Web con encuesta opcional). Cree un formulario de registro de un sitio Web para obtener
el primer nombre, apellido y dirección de correo electrónico do un usuario. Incluya además una pregunta de encuesta
opcional que pida d año en d que se encuentra d usuario en la universidad (por ejemplo, primer año). Coloque b
pregunta de encuesta opcional en el demento d etai 1s que el usuario puede expandir pata ver b pregunta.
3.7
(Creación de un formulario con autocomplote) Cree un formubrio de búsqueda simple; use un elemento input
search en donde d usuario pueda introducir una consulra de búsqueda. Use d navegador Web Fircfox para probar d
formubrio. Escriba Junio y envíe el formubrio. Después escriba una 3 en el demento in p u t para ver las entradas an­
teriores que empiezan con 3; deberá aparecer Junio debajo d d demento input. Escriba J u lio y envíe el formubrio
de nuevo. Ahora escriba una J en d elemento in p u t para ver las entradas anteriores que empiezan con 3: deberán
aparecer Junio y Ju l io debajo del elemento in p u t. Pruebe esto con sus propias consultas de búsqueda también.
3.8
(Creación de unformulario autocoaplete con un elemento d a ta lis t) Cree un demento in p u t a u to c o rp le te
con un demento d atal i s t asoebdo que contenga los d b s de b semana.
3.9
(Disposición de las páginas de nuestro libro en HTML 5: creación de ¡as secciones) Marque d texto dd párrafo
de b sección 3.2.1 de este capítulo como una página Web, usando elementos de estructura de página. El texto se
proporciona en b carpeta textoE Im agencsE jerciclo con los ejemplos de este capítulo. No incluya las figuras en
este ejercicio.
3.10 (Disposición de las páginas de nuestro Ubro en ITTMIS: agregarfiguras) Modifique su solución al ejercicio 3.9
para agregar los gráficos de b sección como figuras. Las imágenes se proporcionan en b carpera textoEImagenesEje r c ic io c o n los ejemplos de este capítulo.
3 .1 1 (Disposición de las páginas de nuestro Ubro en HTML5: agregar un elemento datails) Modifique su solución
al ejercicio 3.10 para agregar b tabb en b figura 3.5. Use b leyenda de b figura como d demento suiw ary y aplique
formato a b tabb como un demento ta b l e de HTML5 dentro d d elemento d e ta ils .
Introducción a las hojas de estilo
en cascada (Cascading Style
Sheets™, CSS): parte I
4
Las modas se desvanecen, el estilo
es eterno.
— Y re * S a in t L a u r m t
Qué liberador es trabajar en ¡os
márgenes, fuera de una percepción
central
— D o n D c L iD o
Objetivos
En este capítulo aprenderá a:
■ Controlar la apariencia de un
sitio Web con hojas de estilo.
■ Usar una hoja de estilo para
proporcionar a todas las
páginas de un sitio Web la
misma apariencia visual.
■ Usar el atributo el ass para
aplicar estilos.
■ Especificar la fuente, tamaño
y color precisos, además de
otras propiedades del texto a
visualizar.
■ Especificar los fondos y colores
de los elementos.
■ Comprender el modelo de cajas
y cómo controlar márgenes,
bordes y relleno.
■ Usar hojas de estilo para
separar la presentación del
contenido.
Capítulo 4
Plan general
106
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte l
4.1 Introducción
4 .9 Dimensiones de los elementos
4 .2 Estilos en linea
4.10 Modelo de cajas y flujo del texto
4 .3 Hojas de estilo incrustadas
4.11 Tipos y consultas de medios
4 .4 Estilos conflictuados
4.12 Menús desplegables
4 .5 Vinculación de hojas de estilo extemas
4.13 (Opcional) Hojas de estilo de usuarios
4 .6 Posicionamiento de los elementos:
posicionamiento absoluto, z-index
4.14 Recursos Web
4 .7 Posicionamiento de los elementos:
posicionamiento relativo, span
4 .8 Fondos
Resumen \ Ejercióos de autoevaluación | Respuestas a los ejercicios de autoevaluación | Ejercicios
4.1
Introducción
En los capítulos 2 y 3 presentam os cl H T M L 5 para m arcar la inform ación a desplegar en un navegador. En este
capítulo y en el siguiente n o s enfocarem os en el form ato y la presentación de la inform ación. Para ello usaremos
u n a tecnología de W 3C conocida com o H ojas d e estilo en cascada 3 (CSS3). la cual nos perm ite especificar la
presentación de los elem entos en una página W eb (com o fuentes, espaciado, tam años, co b res, posición) por se­
parado de Li estructura y el contenido del docum ento (sección d e encabezado, cuerpo del texto, víncubs). I-a se­
p aració n d e la e stru c tu ra y la p re se n ta c ió n simplifica el m antenim iento y la m odificación d e las páginas Web,
en especial en sitios W eb de gran escala. En el c a p ítu b 5 introducirem os muchas nuevas funciones de CSS3.
H T M L 5 se diseñó para especificar el contenido y La estructura de u n docum ento. A unque este lenguaje
tiene ciertos atributos que controlan la presentación, es mejor no mezclar ¡a presentación con el contenido. Si de­
term inam os la presentación de un sitio W eb totalm ente m ediante una hoja de e stib , es posible cam biarla por
una nueva hoja de e s tib para modificar la apariencia de un sirio en su totalidad.
EJ W 3C ofrece un validador de código de CSS3 en jig s a w .w 3 .o r g /c s s - v a lid a to r /. Esta herram ienta
puede ayudarle a asegurarse que su código sea correcto y funcione en b s navegadores com patibles con CSS3.
N osotros ejecutam os este validador en todos b s docum entos de C S S 3 /H T M L 5 de este libro. Para obtener más
inform ación sobre CSS3, visite nuestro C entro de recursos de C SS3 en w w w .deitel .com /css3.
4.2
Estilos en línea
Podem os declarar e stib s en línea para los docum entos en el m arcado de H T M L 5 , en hojas de e s tib incrustadas
o en archivos CSS separados. E n esta sección presentam os b s estilos e n lín e a que declaran el form ato de un ele­
m ento individual m ediante el uso del atrib u to s t y l e de H T M L 5 . Los e stib s en linea prevalecen sobre cualquier
o tro e s tib q u e se aplique m ediante el uso de Las técnicas que veremos más adelante en el c a p ítu b . La figura 4.1
aplica e stib s en línea a b s elem entos p para alterare 1 tam año de la fuente y su co b r.
Observación de ingeniería de softw are 4.1
En realidad los estilos en linea no separan la presentación del contenido. Para aplicar estilos similares a varios
elementos, use hojas de estilo incrustadas u hojas de estilo externas, que presentaremos mds adelante en este
capitulo.
4.2
I
Estilos en línea
107
< IDOCTYPE htnl>
<1— Fig. 4 .1 : enlin ea.htm l -->
< I — Uso de e s t i l o s en l i n e a -->
< h ta l>
<head>
< re ta c h a r s e t = " u t f - 8 ”>
< t i t l e > E s t i l o s en l& ia c u te ;n e a < /tit1 e >
</head>
<body>
<p>Este te x to no ti e n e a p lic a d o ning& uacute;n e s t i l o .< / p >
<1— El a t r i b u t o s t y l e nos permite d e c la r a r —>
<1-- e s t i l o s en l i n e a . Debemos se p a ra r v a r ia s -->
< ! - - propiedades de s t y l e con un punto y coma. -->
<p s t y l e = “ f o n t- s 1 z e : 20pt;*'> E ste te x to ti e n e a p lic a d o e l e s t i l o
<em>f o n t - s i ze</em> , p a ra que s e a de 2 0 p t.
</p>
20
21
22
23
24
23
<p s t y l e = " f o n t - s i z e : 2 0 p t; c o lo r : deepskyb1ue;">
E ste te x t o tie n e a p lic a d o s lo s e s t i l o s <e«> fon t - s i ze</e*t> y
<en>color</em >, p a ra que s e a de
2 0 p t y de c o lo r a z u l c i e l o p ro fu n d o .< /p >
</body>
</htnl>
lotoi «n
^
'■-W m O ik
=
M S ia iith ry [ j ln¡«m Jsí«W in..
Em c WMO 00 v t x
id o nOfUD r & o
Este texto tiene ap lic ad o el estilo fo n t-size . para q u e sea de
20pt.
F.stc texto tiene aplicados los estilos fo n t-size y color, para que
sea d e 20pt y de c o lo r azul cielo profundo.
F ig u ra 4 . 1 | Uso de estilos en linea.
La prim era declaración de esrilo en línea aparece en b línea 16. El atrib u to s t y l e especifica el estilo de u n ele­
m ento. C ad a propiedad de C SS (en este caso, f o n t - s i z e ) va seguida de dos puntos y un valor. En la línea 16
declaramos este elem ento p específico para usar un tam año de fuente de 20 puntos.
La línea 20 especifica b s dos propiedades f o n t - s i z e y color, separadas por un p u n to y coma. En esta línea
establecemos el c o lo r del párrafo a deepskyblue. Pueden usarse códigos hexadecimales en vez d e nom bres de
colores. La figura 4.2 contiene el conjunto de colores estándar de H T M L . E n el apéndice B proporcionam os
una lista más am plia de códigos de color en hexadecimal y los nom bres d e b s co b res. Tam bién encontrará una
lista com pleta de c o b re s estándar y extendidos de H T M L en w yrw .w 3.org/T R /css3-color/.
108
Capítulo 4
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte l
Nombre del color
Valor
Nombre
Aqua
Black
blue
fuchsia
9 cay
green
1 i me
maroon
#00FFFF
#000000
#OOOOFF
#FF0OFF
#808080
#008000
#00FF00
#800000
navy
o liv e
purple
red
silv er
te a l
yellow
white
Fig ura 4 .2
4.3
color
Valor
#000080
#808000
#800080
#FFOOOO
#C0C0C0
#008080
#FFFF00
#FFFFFF
| Los colores estándar de HTML y sus valores RGB en hexadecimal.
Hojas de estilo incrustadas
H ay una segunda técnica para usar hojas de estilo en cascada; hojas d e e stilo incrustadas. Esta técnica nos
perm ite inm utar un docum ento de C SS3 en la sección head de un docum ento. La figura 4 .3 crea una hoja de
estilo incrustada que contiene cuatro estilos.
I
<!D0CTYPE html>
<1-- Fig. 4 .3 : in cru stad a.h tm l —>
< ! - - Hojas de e s t i l o in c ru s ta d a . -->
<html>
<head>
<neta c h a rs e t = *‘u tf-8 " >
< title> H o ja de e s t i l o in c r u s ta d a < / t1 tle >
20
21
22
23
24
23
26
27
28
29
< ! - - e s to empieza la sección de la hoja de e s t i l o -->
< sty le type = “te x t/c ss " >
em
{ fo n t-w e ig h t: bold;
co lo r: black; }
hl
{ fo n t-fa m ily : tahoma, h e l v é t i c a , s a n s - s e r i f ; }
p
{ f o n t-s iz e : 12pt;
font-fam ily: a r i a l , s a n s - s e r i f ; }
.e s p e c ia l { color: p u rp le ;}
< /style>
</head>
<body>
< ! - - e s t e a t r i b u t o a p l i c a l a c la s e de e s t i l o .e s p e c ia l —>
<hl c l a s s ■ “especial"> D eitel & A sso c ia te s, Inc.</hl>
<p>Deitel & A sso c ia tes, Inc. es una empresa dedicada al entrenamiento
c o rp o rativ o y l a creaci4oacute;n de contenido, que se e s p e c i a l i z a en
lenguajes de programación, tecnolog& iacute;a de I n t e r n e t y Web.
d e s a r r o l l o de a p lic a c io n e s para iPhone y Android, y educación
sobre l a tecnolog& iacute;a de lo s objetos.</p>
Figura 4-3 | Hoja de estilo incrustada (parte I de 2).
4.3
Hojas de estilo incrustadas
109
30
<hl>CHentes</hl>
31
<p c l a s s = "especial"» Los c l i e n t e s de l a empresa incluyen muchas
32
<em>compa£ntilde;ías Fortune 1000</en>, agencias gubernamentales,
33
s e c to r e s del e j& e a c u te ; r c ito y organizaciones de negocios.</p>
34
</body>
13 </html>
J
D e ite l & A s s o c ia t e s , In c .
4 Artoofltol toe «ir*<fcOc*lá«i«ffimnaerlocorpOfálTOVlactoaoónót«rlenoo
OjQ ic o s p tc u f c u o o o o x a o ' . ó o p ro g a n v ío flo ic c rv o c o j ite Ito m o t y V M i d e r r o t o o e a g le f to a M t
p a ra iP tx n o y A rtto a d i « lu c a O d ft scfcta U w <ntíog(a <W tos
C lie n te s
LC* c t o t e o d o la c r p i e * * « n ck *w ( M h H co m o ao ra» fo rtu n o 1000 a g o n a « p L t< n » m e rla te k w á of t t
d d oiotalo v cv^m uA oonst do
Figura 4 .3
| Hoja de estilo incrustada (parte 2 de 2).
£7 elemento s ty le y los tipos MIME
EJ elemento s ty l e (líneas 11 a 18) define la hoja de estilo incrustada. Los estilos que se colocan en el elemento head
(c a b e c e ra ) se aplican a los elementos que coincidan en cualquier parte donde aparezcan en el cuerpo (body). El
atributo ty p e del elem ento s t y l e especifica el tipo M IM E (E xtensiones m u ltip ro p ó sito d e correo In tern et)
que describe el contenido de esc elemento. Los docum entos de GSS usan el tipo M IM E t e x t / e s s . A partir de
H T M L 5 , el elemento ty p e predeterm inado para un elem ento s t y l e es “te x t/e s s * , por lo que este atributo ya
no es necesario: lo conservamos aquí porque verá que se utiliza en el código heredado de H T M L . La figura 4.4
lista los tipos M IM E com unes que utilizamos en este libro. Para obtener una lista completa de tipos M1ME, visite:
vww.w3schools.com/med1a/med1a_mimeref.asp
Tipo MIME
Descripción
te x t/e ss
1mage/png
D o cu m en to s de CSS
te x t/
jav ascrlp t
tex t/p lain
1mage/jpeg
text/htm l
Figura 4 .4
Im ágenes P N G
M arcado de JavaScript
Texto simple
Im agen JP E G
M arcado d e H T M L
| Unos cuantos tipos MIME comunes.
El cuerpo de la hoja de estilo (líneas 12 a 27) declara las reglas d e C SS para esa hoja de estilo. Para lograr la
separación entre el código C SS3 y el H T M L 5 al q u e aplica el estilo, usarem os un selector d e CSS para especifi­
car los elem entos a los que se aplicará estilo de acuerdo con una regla. N uestra prim era regla (línea 12) empieza
1 10
Capitulo 4
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte l
con el selector em. que selecciona todos los elem entos en en el docum ento. Un elem ento em indica que debem os
enfatizar su contenido. Por lo general los navegadores despliegan los elementos em en una fuente en cursiva. El
cuerpo de cada regla va encerrado entre llaves ({ y }). Las rcghs de CSS en las hojas de estilo incrustadas utilizan
la misma sintaxis que los estilos en línea; el nom bre de la propiedad va seguido de dos puntos ( : ) y del valor de la
propiedad. Varias propiedades se separan m ediante signos de p u n to y com a (;). La propiedad fo n t-w e ig h t de
la línea 12 especifica el “grosor” del texto. Los valores posibles son bol d, normal (cl predeterm inado), bolder (más
grueso que el texto bold) y l i g h t e r (m enos grueso que el texto normal). El grosor tam bién puede especificarse
con múltiplos de 100, desde 100 hasta 900. El texto que se especifica com o normal es equivalente a 400 y el texto
bol des equivalente a 700. Sin em bargo, muchos sistemas no tienen fuentes que se puedan escalar con este nivel de
precisión, por lo que si utiliza estos valores numéricos tal vez no obtenga cl efecto deseado en pantalla.
En este ejem plo, todos los elem entos em se m ostrarán en fuente color negro y en negrita. Tam bién aplica­
mos estilos a todos los elem entos h l y p (líneas 14 a 16).
Clases de estilos
La línea 17 declara u n selector para una d a s e d e e stilo s llamada e s p e c ia l. A las declaraciones de las clases de
estilos se les antepone u n p u n to (.). Estas declaraciones definen los estilos que pueden aplicarse a cualquier ele­
m ento. En este ejem plo, la clase e s p e c ia l establece c o lo r en p u rp le (m orado). Le m ostrarem os cóm o aplicar
clases de estilos m om entáneos. Tam bién es posible d ed arar selectores id . Si un elem ento en su página tiene un
id , puede dcclirar un selector de la form a ttide lemento para especificar cl estilo de esc elem ento.
Propiedad font-fam ily
La propiedad f o n t- f a m ily (línea 14) especifica cl nom bre de b fuente a usar. N o todos los usuarios tienen las
mismas fuentes instaladas en sus com putadoras, por lo que CSS nos perm ite especificar una lista de fuentes
separadas por com as que pueden usarse para u n e s tib específico. El navegador intentará usar las fuentes en el
orden en el q u e aparezcan en la lista. Es aconsejable term inar una lista d e fuentes con cl nom bre de una fam ilia
de fu e n te s g e n érica en caso de que las otras fuentes no se encuentren instaladas en b com putadora del usuario
(figura 4 .5 ). En este ejem p b , si no se encuentra tahoma en el sistem a, el navegador buscará b fuente h e lv é tic a .
Si tam poco b encuentra, el navegador m ostrará su fuente predeterm inada s a n s - s e r i f .
Familias de fuentes genéricas
Ejemplos
serif
sans-serif
cursive
fantasy
nonospace
tiñes new ronan, Ceorgia
a r ia l. verdana, futura
script
c r itte r
courier. fixedsys
Fig ura 4 .5
| Familias de fuentes genéricas.
Propiedad fo n t-size
La propiedad f o n t - s i z e (línea 15) especifica una fuente de 12 puntos. En la sección 4 .4 presentarem os otras
posibles m ediciones adem ás de p t (punto). T am bién pueden usarse vabres rebtivos, com o xx-smal 1, x-sm all,
small, sm aller, médium, la r g e , la rg e r, x - la r g e y xx-large. En general es preferible usar valores de f o n t - s i z e
relativos en vez de puntos, ya que un autor no sabrá ¡as medidas especificas de ¡a pantalla de cada cliente. Los v a b ­
res rebtivos perm iten una vista más flexible de bs páginas W eb. Por e je m p b , b s usuarios pueden cam biar b s
tam años de b s fuentes que m uestra el navegador para m ejorar b legibilidad.
4.4
Estilos conflictuados
III
Lh usuario podría ver una página W eb en un dispositivo portátil con una pantalla pequeña. Si se especifica un
tamaño de fuente fijo (como 18pt), el navegador no podrá escalar las fuentes. Un tam año de fuente relativo, com o
large o la rg e r, perm ite al navegador determ inar el tamaño actual del texto visualizado. Al usar tam años relativos
también mejora la accesibilidad de las páginas para los usuarios con discapacidades. Por ejem plo, b s usuarios con
discapacidad visual pueden configurar su navegador para usar una fuente predeterm inada más grande, a partir de
b cual se basarán todos b s tamaños relativos. EJ texto especificado por el autor com o más pequeño (smal 1 e r ) que
el texto principal seguirá m ostrándose en u n a fuente con un tam año más pequeño. La accesibilidad es una con­
sideración im portante; en 1998 el Congreso aprobó la Enm ienda de la sección 508 a la Ley de rehabilitación de
1973, la cual estipula que b s sitios W eb de las agencias gubernam entales federales sean accesibles para los u su arb s
d«capacitados. Para obtener más información visite el s itb www.access-board.gov/508.htm.
Cómo aplicar una clase de estilos
La línea 22 usa el atrib u to c l a s s de H T M L 5 en un elem ento hl para aplicar una clase de estibs; en este caso,
la clase llamada e s p e c ia l (que se declara con el selector .e s p e c ia l en la hoja de estilo de la linea 17). C uando
el navegador despliega el elem ento hl, el texto aparece en pantalla con las propiedades tanto de un elem ento hl
(la fuente tahoma, h e lv é t ic a , o s a n s - s e r i f que se define en la línea 14) com o de laclase de e stib s .e s p e c ia l
que se aplica (el c o b r p u rp le que se define en la línea 17). El navegador además sigue aplicando su p ro p b e s tib
predeterm inado al elem ento h l (el encabezado se m uestra en un tam año de fuente más grande). D e manera
similar, el navegador seguirá m ostrando rodos b s elem entos em en cursiva, pero También se m ostrarán en negrita
com o resultado de las líneas 12 y 13.
Las reglas de form ato para am bos elem entos p y la clase .e s p e c ia l se aplican al texto en las líneas 31 a 33.
En m uchos casos, b s e stib s que se aplican a un elem ento (el d e m e n to p a d re o an cestro ) ram bién se aplican
a b s elementos anidados de ese elem ento (d e m e n to s h ijo s o descendientes). El elem ento em anidado en el ele­
m ento p de la línea 32 hered a el estilo del elem ento p (a saber, el tam año de fuente de 12 puntos de la línea 15)
pero retiene su e s tib en cursiva. Así, b s e stib s definidos para el párrafo q u e «o están definidos para el elem ento
em de todas form as se aplican a este elem ento em que está anidado en el elem ento p. Es posible establecer o
heredar m ú ltip le s valores d e u n a p ro p ie d a d en el m ism o e le m e n to , p o r lo q u e el n avegador d e b e re d u ­
cirlos a u n s o b valor para esa propiedad o elem ento antes de desplegarbs en pantalla. E n b siguiente sección
hablaremos sobre b s reglas para resolver estos conflictos.
4.4
Estilos conflictuados
Los e stib s pueden ser definidos por un u su a rio , un a u to r o un agente d e u su ario . U n usuario es la persona que
está viendo su página W eb, usted es el au to r ( b persona que escribe el docum entó) y el agente de usuario es el
program a que se utiliza para desplegar y visualizar el docum ento (por e je m p b , un navegador W eb).
• Los e stib s se a p lic a n en cascada (de aquí viene el térm ino “H ojas de e s tib en cascada”), o fluyen en
conjunto, d e tai form a que b apariencia final de b s elem entos en una página resulta de b com binación
de b s estib s definidos en varias formas.
• Los e stib s definidos por el usuario tienen precedencia sobre b s e stib s definidos por el agente de usuario.
• Los e s tib s definidos por b s autores tienen precedencia sobre b s e stib s definidos por el usuario.
La mayoría de b s estib s definidos para b s elem entos padre tam bién b s h e re d a n b s elem entas hijos (ani­
dados). Esto tiene sentido para b m ayoría de b s e stib s, com o b s propiedades de b s fuentes, pero hay ciertas
propiedades q u e no es conveniente heredar. Por e je m p b , la propiedad background-im age nos perm ite estable­
cer una im agen com o el fondo d e un elem ento. Si al elem ento body se le asigna una im agen de fondo, no es
conveniente que la misma imagen de fondo esté en el fondo de todos b s elem entos en el cuerpo de nuestra p á­
gina. En c a m b b , b propiedad background-im age de todos b s elem entos hijos retiene su valor predeterm inado
1 12
Capítulo 4
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte l
de none (ninguno). En esta sección hablarem os sobre las reglas para resolver conflictos entre los estilos definidos
para los elementos y los estilos heredados de b s elem entos padres y ancestros.
La figura 4.3 co n tien e u n ejem plo de heren cia en d o n d e u n e le m e n to em hijo hereda la p ro p ied ad
fo n t - s i ze de su elem ento p padre. Sin em bargo, en b figura 4 .3 el elem ento em hijo tiene una propiedad col o r
que entra en conflicto con (es decir, tiene un valor d istin to de) la propiedad c o lo r de su elem ento p padre. Las
propiedades definidas para b s elem entos hijos y descendientes tienen una especificidad más alta que b s pro­
piedades definidas para b s elem entos padres y ancestros. Los conflictos se resuelven a favor de b s propiedades
con una especificidad más alta , por b que b s e stib s del hijo tienen precedencia. La figura 4 .6 ilustra ejem p b s
de herencia y especificidad:
1
<!DOCTYPE htnl>
2
3
4
3
6
7
8
9
10
11
12
13
14
13
16
17
18
19
20
21
22
23
24
23
26
27
28
29
30
31
32
33
34
33
36
37
38
39
40
41
<1— Fig 4.6: avanzada.html -->
< ! - - Herencia en hojas de e s t i l o . —>
<ht«il>
<head>
< *eta c h a r s e t = " u t f - 8 M>
<title>MAaacute;s e s t i l o s < / t i t l e >
< sty le type = ,' t e x t / c s s ,,>
body
{ fon t-fam ily : a r i a l , h e lv é tic a , s a n s - s e r i f ; }
a.nodec { te x t-d e c o ra tio n : none; }
a:hover { te x t-d e c o ra tio n : un derllne; }
11 ea
{ font-weight: bold; }
h l , en
{ te x t-d e c o ra tio n : underlln e; }
ul
{ n a r g l n - l e f t : 20px; }
ul ul
{ f o n t- s i z e : .8em; }
</style>
</head>
<body>
<hl>Lista de compras para e l lunes:</hl>
<ul>
<li>Leche</li>
<11>Pan
<ul>
<li>Pan blanco</li>
<li>Pan de centeno</li>
<H>Pan de t r i g o e n te ro < /li>
</ul>
</11>
<li>Zanahoria</li>
<1i>Yogurt</li>
< li> Pizza <e«t>con champi&nti l d e ; ones</en></li>
</ul>
<p><em>Ir a1 a</e«t>
<a c l a s s ■"nodec'' h r e f ■ *'h t t p ://***».d e i t e l .co«i">
Tienda de abarrotes</a>
</p>
</body>
</html>
Figura 4 .6 | Herencia en hojas de estilo (parte l de 2).
4.4
Mn
Estilos conflictuados
113
_______________________
C
=
f‘^y/A^«jwoioí/cap04/fig04_06/avdazd<Jahi!ml
ih
S ic t
¡
Ifcc* GM r-/
C ) I m p i d o de 2r lo
• loche
• Pon
• P«n tf #nCO
• PindlCWlMO
• Pjn dt tr^o trere
• ZanaNyid
• Yogurt
• Pi2ia co/?jC^yrjpjrtones
Vinculo a la tienda de
abarrotes sin decoración
Tienda d e a b an o ces
Mu«Me*
C
■ \ l ■____________________
ih h*ey//Yyeiemok)i'<ap04^ig04j)6/avan2adahtmi
k e t tu fe - J M
|
SKe G*ie-> C j
de N
m
191
=
.
Lista de
• leche
• Pan
• P r WafKO
• Pdfl O#cafrtt*o
• Pjn 5* tnge ereero
G vínculo a la oenda
• Zanahoria
<fc abarrotes aparece
subrayado cuando el
usuario pasa el ratón
xibre él
• Yogurt
• Pizza CQ/2tó#/np/rtOii«*
fra/á
Figura 4.6 | Herencia en hojas de estilo (parte
2
de 2 ).
En la línea 11 se aplica la propiedad te x t- d e c o r a tio n a todos los elem entos a cuyo atrib u to c la s s se
establezca en nodec (línea 37). La propiedad te x t- d e c o r a tio n aplica d eco racio n es al texto en un elem ento.
Los navegadores subrayan el tcxro de un elem ento a (ancla) de m anera predeterm inada. Aquí establecem os b
propiedad te x t- d e c o r a tio n en none para indicar que el navegador «o debe subrayar los hipervíneulos. O tro s
posibles valores para te x t- d e c o r a tio n son: o v e r lin e , lin e - th r o u g h y u n d e rlin e . El .nodec que se adjunta al
elem ento a es un selector de clase más especifica, este estilo en la linca 11 se aplica sólo a los elem entos a (ancb)
que especifican a nodec en su atrib u to c la s s .
^
T ip de portabilidad 4.1
Para asegurar que sus hojas de estilofuncionen en varios navegadores Web, puede probarlos en muchos
navegadores Web diente y usar el valídador de CSS de W3C.
La línea 12 especifica un estilo para hover, q u e es una subclase. Las subclases nos dan acceso a b inform a­
ción que no está d ecb rad a en el docum ento, com o el hecho d e que el ratón esté colocado sobre un elem ento, o
si el usuario ha hecho clic (visitado) antes en un hipervínculo espedfico. La su b clase hover se activa en form a
1 14
Capítulo 4
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte l
dinám ica cuando cl usuario mueve el cursor sobre (es decir, flota sobre) un elem ento. Las subclases se separan
m ediante dos puntos (sin espacios circundantes) del nom bre del elem ento al que se aplican.
Error com ún de program ación 4-1
S incluye un espacio antes o después de los dos puntos que separan a una subclase del nombre del elemento
al que se aplica, evitard que se aplique esa subclase.
La línea 13 Hace que todos los elem entos em que sean hijos de elem entos 11 se m uestren en negrita. En la
salida de la pantalla de la figura 4.6 , I r a l a (que está contenida en un elem ento em en la línea 36) no aparece
en negrita, ya que el elem ento em no está anidado en un elem ento 11, por lo que sólo se aplica el form ato en
negrita. La sintaxis para aplicar reglas a múltiples elem entos es similar. En la línea 14 separam os b s selectores
con una coma para aplicar una regla de e s tib subrayado a todos b s elem entos h l todos b s elem entos em.
En la línea 15 se asigna un margen izquierdo de 20 púceles a todos b s elementos u l. En la sección 4.10 hablare­
mos sobre las propiedades margi n con detalle. U n pixel es una m edición de lo n g itu d relativa: varía en tam año, con
base en la resolución de la pantalla. O tras bngim dcs relam as son: em (que, com o medición, indica la altura de La letra
M mayúscula de la fuente: la medición de fuente que se utiliza con más frecuencia), ex (la a lm ra x d c la fuente; por
b general se establece en la altura de u n a x minúscula) y b s porcentajes (por ejem p b . f o n t - s i z e : 50%). Eira estable­
cer un elemento de m odo que muestre texto al 150 por ciento de su tam año de texto predeterm inado, podría usar:
f o n t- s iz e : l.Sem
o
f o n t - s i z e : 1S0%
Las m ediciones de lo n g itu d absoluta son otras unidades de medición disponibles en CSS; estas unidades no varían
su tamaño con base en el sistema y son: 1n (pulgadas), cm (centímetros), mm (milímetros), p t (puntos: 1 pt ■ 1/72
pulg) y pe (picas; 1 pe = 12 pt). 1.a línea 16 especifica que todas las listas desordenadas anidadas (elementos ul que
son descendientes de elementos u l ) deben tener el tam año de fuente . 8e«n. [Nota: al establecer una propiedad de estilo
que reciba una medición (por ejem p b , f o n t- s iz e , m a rg in -le ft). no son necesarias las unidades si el vabr es cero.]
Buena práctica de program ación 4.1
Sempre que seaposible, use mediciones de longitud relativa. Si usa mediciones de longitud absoluta, tal vez
su documento no pueda ajustar bien su escala en algunos navegadores cliente (como en ¡os smartphones, por
ejemplo).
4.5 Vinculación de hojas de estilo externas
Las hojas de estib son una manera conveniente de crear un docum ento con un tema uniforme. C on las hojas
d e estilo externas (es decir, docum entos separadosc\\sc s ó b contienen reglas de CSS) podem os proporcionar una
apariencia visual uniforme a todo un sirio W eb (o a una parte de éste). También podem os reutilizar la misma hoja
de e s tib externa en varios sirios W eb. Las distintas páginas en un sirio pueden usar la misma hoja de estilo. C uando
se requieran cambios en b s estibs, solam ente necesitamos modificar un s o b archivo CSS para realb ar cambios de
e stib en todas las páginas que utilicen esos estibs. Algunas veces a este concepto se le denom ina sk in n in g . Aunque
las hojas de estilo incrustadas separan el contenido de la presentación, de todas formas siguen estando en u n solo
archivo, y esto evita que un diseñador Web y un autor de contenido trabajen de manera conveniente en paraleb.
Las hojas de e s tib externas resuelven este problem a al apartar cl contenido y el csrib en archivos separados.
4.5
Vinculación de hojas de estilo externas
115
La figura 4.7 presenta una hoja de estilo externa. Las líneas 1 y 2 son comentarios de CSS. Éstos pueden
colocarse en cualquier tipo de código CSS (estilos en línea, hojas de estilo incrustadas y hojas de estilo externas);
siempre em piezan con /* y term inan con */• El navegador ignora el texto entre estos delim itadores. Las reglas
en esta hoja de estilo externa son las m ism as que en la hoja de estilo incrustadas en la figura 4 .6 , líneas 10 a 16.
1
2
3
4
5
6
7
8
9
/ • F1g. 4 .7 : e s t i l o s . c s s */
/* Hoja de e s t i l o externa */
bocfy
{ f o n t- f a n ily : a r i a l ,h e l v é t i c a , s a n s - s e r i f ; }
a.nodec { te x t-d e c o ra t1o n : none; }
a:hover { te x t-d e c o ra tlo n : underlln e; }
11 en
{ font-w eight: bold; }
h l , en { te x t-d e c o ra tio n : und erllne; }
ul
{ n a r g 1 n - le f t: 20px; }
ul ul
{ f o n t-s lz e : .8en; }
Figura 4 .7 | Hoja de estilo externa.
La figura 4 .8 contiene un docum ento de H T M L 5 que hace referencia a la hoja de estilo externa. Las líneas
9 y 10 m uestran un elem ento lin k que usa el atrib u to r e í para especificar u n a relación entre el docum ento
actual y o tro docum ento. A quí declaramos el docum ento vinculado com o una hoja de estilo (s t y l e s h e e t )
para este docum ento. El atributo ty p e especifica el tipo M IM E del docum ento relacionado com o t e x t / e s s . El
atributo h r e f proporciona el U RL del docum ento de la hoja de estilo. Si usamos el no m b re de archivo e s t i ­
lo s . CSS, com o hicim os aquí, indicam os q u e e s t i lo s . c s s está en el m ism o directorio q u e e x te r n a , htm l. Los
resultados de despliegue son iguales que en la figura 4.6.
I
<!DOCTYPE htnl>
2
3
4
3
6
7
< ! — Fig. 4 .8 : externa.htm l —>
< ! — Vinculación de una hoja de e s t i l o s e x te rn a . -->
<h t * l >
<head>
<meta c h a rs e t- " u tf - 8 " >
8
<t1tle>Vinculación de hojas de e s t i l o e x te r n a s < / ti tle >
9
<link re í = ‘' s t y l e s h e e t ” type - “t e x t / e s s ”
10
h r e f = “e s t i l o s . c s s " >
11
</head>
12
<body>
13
<hl>Lista de compras para el <e«i>lunes</em>:</hl>
14
13
<ul>
16
<li>Leche</l1>
17
<H>Pan
18
<ul>
19
<li>Pan blanco</H>
20
<H>Pan de centeno</l1>
21
<li>Pan de t r i g o e n te ro < /li>
22
</ul>
23
< /li>
Figura 4 .8 | Vinculación de una hoja de estilo externa (parte I de 2).
116
24
23
26
27
2»
29
30
31
32
33
34
Capítulo 4
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte l
<11>Zanahor1as</l1>
<11>Yogurt</l 1>
<H>P1zza <em>con champiñones</em></l1>
</ul>
<p><CK>Ir a la</em>
<a c l a s s • "nodec" h r e f - “http://www.de1tel.cofi”>
Tienda de abarrotes</a>
</p>
</body>
</html>
c
• r//'* e*,ímpíov‘CAp<H^*gt>4.07.0S/«rtefndÍ<l^
Umi ».r«n 2
F
=
L is t a de
• P an
• Zjnarxxias
• Y o **:
< t * J a Tienda d e a o a n o le s
Ibc M B Í
iKMc<r«^«ar • V. ___________________________
C
: f's* ///r/**mc*>L'<*>0^^
k n wq g d e<
*
|P1 .
E
W* ü*i»r,r Q¡ W c ^ ifc dm H i t .
• Leche
• P an
• Par Manee
• *V m caWK
• P**4*
• ¿annnon*?
• Yo**:
*■««»*
• * :.u c o n ch a m p a :
T*»rvin drgfvarrnit»*-.
Figura 4 .8 | Vinculación de una hoja de estilo externa (parte 2 de 2).
4.6
Fosicionamiento de los elementos: posicionamiento absoluto,
z -in d e x
Antes de C SS, era difícil controlar el posicionam iento de b s elem entos en docum entos H T M L ; el navegador
determ inaba el posicionam iento. CSS introdujo b propiedad p o s ltlo n y una herram ienta conocida com o
4.6
Posicionamiento de los elementos: posicionamiento absoluto. z - 1 ndex
117
p o sicio n am ien to a b so lu to , que nos da un m ayor control sobre la form a en que se visualizan los elem entos de
los docum entos. La figura 4 .9 dem uestra el posicionam iento absoluto.
I
<! DOCTYPE ht«il>
<!— Fig 4 .9 : posic1onamiento.html -->
<!— Posicionamiento absoluto de lo s elementos. -->
<html>
<head>
20
21
22
23
24
23
26
27
28
29
30
31
32
33
34
33
<meta c h a r s e t - "utf-8">
< title> P osicionam iento a b s o lu to < / title >
< sty le type - “t e x t / c s s ” >
.imagen_fondo
{ p o sitlo n : absoluta;
top: Opx;
l e f t : Opx;
z-index: 1; >
.imagen_prin»erplano
{ p o sitio n : absolute;
top: 2Spx;
l e f t : lOOpx;
z-1ndex: 2; }
.te x to
{ p o sitio n : absolute;
top: 2Spx;
l e f t : lOOpx;
z-index: 3;
f o n t - s l z e : 20pt;
f o n t - f a n ll y : tahona, geneva, s a n s - s e r i f ; }
</style>
</head>
<body>
<p><1ng src - "imagen fondo.png" c la s s • "imagen,fondo"
a l t = "Primera Imagen poslclonada" /></p>
<p><1mg src ■ "imagen, prlmerplano.png" c l a s s ■ “imagen primerplano
a l t a "Segunda Imagen poslclonada" /></p>
<p c l a s s = "texto">Texto posicionado</p>
</body>
</html>
Figura 4-9 | Posicionamiento absoluto de los elementos (parte I de 2)
1 18
Capítulo 4
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte l
—
*
1
Pe*-
C
_________________
fií#:///f/e/empioVCJp04/f^a«,09/poiiooAam»^nloit!ml
4, * t b S k « 5«‘r r .
Figura 4 .9
1
“
«tnr*/1 ■ V
f*
=
£ j Wnpcfladc de bll«m_
| ftasicionamiento absoluto de los elementos (parte 2 de 2).
Por b general, los elem entos se posicionan en la página en el orden en que aparecen en el docum ento
de H T M L 5. Las líneas 10 a 13 definen un estilo llam ado im agen_fondo para el prim er elem ento img (im a­
ge n_fondo .png) en la página. Al especificar la posición (p o s itlo n ) de u n elem ento com o absolura (a b so lu te )
se elim ina ese elem ento del flujo norm al de elem entos en b página, para posicionarse de acuerdo con la distan­
cia desde los márgenes superior (top). izquierdo ( l e f t ) , derecho ( r ig h t) o inferior (bottom ) de su d e m e n to
c o n te n e d o r a nivel d e b lo q u e. Esto significa que se m uestra en su propia línea y tien e un c u a d ro v irtu a l a su
alrededor. Algunos ejemplos de elem entos a nivel de bloque son: s e c t io n , d iv , p y los elem entos de encabezado
(h l a h6). A quí posicionam os el elem ento para que esté a 0 píxeles de distancia de los márgenes to p y l e f t de
su elem ento contenedor. En la línea 27 se aplica este estilo a la imagen, que está contenida en un elem ento p.
La propiedad z -In d e x nos perm ite distribuir en capas ¡os elementos que se traslapan. Los elem entos que
tengan valores mayores de z . Índex se m uestran frente a los elem entos con valores menores de z -in d e x . En este
ejem plo, . im agen_fondo tiene el valor más bajo de z-1 ndex (l). por lo que se m uestra en el fondo. La regla de
CSS de .im agen_pr1m erplano (líneas 14 a 17) concede a b imagen del círculo (im agen_prim erplano. png, en
b s líneas 3 0 y 31) un valor d e z- Índex d e 2, p o r lo q u e aparece fre n te a im agen_fondo. png. El elem en to
p en la línea 33 recibe un z -in d e x de 3 en la línea 21, por lo q u e su contenido (Texto p o sic io n a d o ) aparece
frente a losotros dos. Si no especificamos un z -in d e x o si hay elem entos que tengan el m ism o valor d e z -in d e x ,
los elem entos se colocarán del fondo hacia el prim er p b n o en el o rd en en el que se encuentren en el docum ento.
El valor predeterm inado de z -in d e x es 0.
4.7 Posicionamiento de los elementos: posicionamiento relativo, span
El posicionam iento absoluto no es b única form a de especificar b distribución de una página. La figura 4.10 de­
muestra el posicionam iento rebtivo, en donde los elementos se posicionan en form a relativa a ¡os demás elementos.
Al establecer b propiedad p o s itlo n en r e í a t i ve, com o en laclase su p e r (líneas 15 y 16), el elemento se dis­
tribuye en b página y se desplaza con base en el valor especificado de to p , bottom , l e f t o r i g h t. A diferencia del
posicionam iento absoluto, el posicionam iento rebtivo m antiene los elementos en el flujo general de elementos en
b página, por lo que el posicionam iento es relativo a b s dem ás elementos en el flujo. Recuerde que ex (línea 16)
es b altura x de una fuente, una m edición de b n g itu d relativa que por b general es igual a la altura de una letra
x minúscula. La clase su p er (líneas 15 y 16) presenta el texto al final de b oración com o subíndice y b clase sub
(líneas 17 y 18) presenta el texto com o subíndice en rebeión al otro texto. La cbse des pl i zq (líneas 19 y 20) des­
plaza el texto al final de b oración a b izquierda y b clase d e s p ld e r (líneas 21 y 22) desplaza el texto a b derecha.
4.7
Posicionamiento de los elementos: posicionamiento relativo, span
1 < IDOCTYPE htnl>
2
3 < I— Fig. 4.10: posicionamiento2.html -->
4 <1— Posicionamiento r e l a t i v o de lo s elementos. -->
5 <htm1>
6 <head>
7
o ie ta c h a rs e t ■ " u t f - 8 ’'>
8
< title> P osicionam iento r e l a t i v o < / t i t l e >
9
< sty le type = " te x t/c s s " >
10
p
{ f o n t- s lz e : l.Bem;
11
fon t-fam ily : verdana, a r i a l , s a n s - s e r i f ; }
12
span
{ color: red;
13
f o n t- s lz e : . 6em;
14
height: leai; )
15
.super
{ p o s itio n : r e l a t i v a ;
16
top: -le x ; )
17
.sub
{ p o s itio n : r e l a ti v a ;
18
bo ttoa: -lex; }
19
.d e sp liz q { p o sitio n : r e l a t l v e ;
20
l e f t : -le x ; }
21
.d esp ld er { p o sitio n : r e l a t l v e ;
22
r i g h t : -lex ; }
23
< /style>
24
</head>
23
<body>
26
<p>Fl te x to al f in a l de e s t a oraci4oacute;n
27
<span c l a s s = "super">est& aacute; en superínd1 ce</span>.</p>
28
29
<p>El te x to al f in a l de e s t a oración
30
<span c l a s s = "sub">está en sub&1acute;ndice</span>.</p>
31
32
<p>El te x to al f in a l de e s t a oración
33
<span c l a s s » Md espU zq”>está desplazado a l a izqu1erda</span>.</p>
34
33
<p>El te x to al f in a l de e s t a oració n
36
<span c l a s s ■ " d e sp ld e rM>está desplazado a l a derecha</span>.</p>
37
</body>
38 </h t a l >
I5
\
C
£ f»*ey//Y/€jemp^/cap04/lig04_l0/po»ic»or\dmiento2Mm»
Sfee* tu^erdí»
v
Jü &
td Sfcct Gébtry Q Wvc«*úe á» W*»n_
El texto al final de esta oración
El texto
al final de esta oración
El texto al final de esta oración • ita
c.
a ia irquMUt».
El texto al final de esta oración MCi d tm h iJd o a la darocha.
Figura 4 .1 0 | Posicionamiento relativo de los elementos.
=
119
120
Capítulo 4
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte l
E lem entos en línea y a n iv e l de bloque
E n la linca 27 presentam os el elem ento span. Las líneas 12 a 14 definen la regla de CSS para todos b s elem entos
span en este ejem p b . La altura (h e ig h t) d e span determ ina cuánto esp acio vertical va a ocupar. El v a b r de
f o n t - s i z e determ ina el tam año del texto dentro del elem ento span.
El elem ento span es un elem en to d e a g ru p a c ió n ; de m anera predeterm inada no aplica ningún form ato a
su contenido. Su principal propósito es aplicar reglas de CSS o atrib u to s id a una sección de texto. El elem ento
span es u n elem en to d e nivel e n línea: no cambia el flujo de b s elem entos en el docum ento. Algunos ejem p b s
de elem entos en línea son: span, img, a, em y strong. El elem ento d iv tam bién es u n elem ento de agrupación,
s ó b que es un elem ento a nivel d e b b q u e . En b sección 4 .1 0 h abbrem os con más detalle sobre b s elem entos
en línea y a nivel de b b q u e .
4.8
Fondos
CSS ofrece control sobre b s fondos de b s elem entos a nivel de b b q u e . CSS puede establecer u n c o b r de fondo
o agregar imágenes de fondo a b s elem entos de H T M L 5 . La figura 4.11 agrega un b g o tip o corporativo a la es­
quina inferior derecha del docum ento. Este b g o perm anece fijo en b esquina, aun cuando el usuario se despbce
para arriba o para abajo por b pantalla.
La propiedad background- 1mage
La propiedad background-image (línea 10) especifica cl URL d e la imagen lo g o , png en el form ato u r l ( ubicaciónArchivo). Tam bién podem os establecer b propiedad background-color (línea 14) en caso de no encontrar
b imagen (y para llenar áreas que b imagen no cubre).
1
<!D0CTYPE html>
2
3
<1— F ig . 4.11: fondo.htm l —>
< ! - - A gregar im ágenes de fondo y s a n g ría —>
4
3 <html>
6
<head>
7
<meta c h a r s e t = "utf-8">
•
<t1tle>Imágenes de fondo</t1tle>
9
< s ty le type - Mtex t/c ss" >
10
body { background-Image: u r l ( l o g o . p n g ) ;
11
background-pos 1t1on: bottom r lg h t;
12
background-repeat: no-repeat;
13
background-attachment: fixed;
14
background-color: U g h tG re y ; }
13
P { f o n t- s i z e : 18pt;
16
color: DarkBlue;
17
tex t-1 n d e n t: lem;
18
fo n t-fa m 1 ly : a r i a l , s a n s - s e r l f ; )
19
.d a rk { font-weight: bold; }
20
< /style>
21
</head>
22 <body>
23
<p>
24
Este ejemplo usa lo s e s t i l o s background-image,
23
background-position y background-attachment
26
para co lo c ar el logo tipo de <span c l a s s = ‘'dark">Deitel
Figura 4 .1 1 | Agregar imágenes de fondo y sangría (parte I de 2).
4.8
27
28
29
30
31
32
33
34
Fondos
121
& A sso c iate s, Inc.</span> en l a esquina i n f e r i o r
derecha de l a página. Observe que el logo
permanece en l a posición c o r r e c ta cuando ajustamos
e l tamaño de l a ventana del navegador. El c o lo r de
background-color lle n a lo s espacios donde no hay imagen.
</p>
</body>
</ht«l>
O
_j f>te//A/f}Wip*ov/wpíM/fi9 0 4 . 1 1 /loocio Mmi
U m u ip a e i
A iD U a ^ t r .
J h sa u u
F
í
=
¡mam ,
Este ejemplo usa los estilos background-image.
background-position y background-attachment para colocar el
logotipo de Deitel & A sso c ia te s. Inc. en la esquina Infenor
derecha de la página. Observe que el logo permanece en la
posición correcta cuando ajustamos el tamaño de la ventana
del navegador. El color de background-color llena los
espacios donde no hay imagen
D eÍteI
* A \so< i a i i > I n c .
F igura 4 . H
| Agregar imágenes de fondo y sangría (parte 2 de 2).
L a p ro p ied a d background-position
La propiedad background-position (línea 11) coloca la im agen en la página. Las palabras clave to p , bottom .
c e n te r. l e f t y r i g h t se usan por separado o en com binación para el posicionam iento vertical y horizontal. Es
posible colocar una imagen m ediante el aso de longitudes, especificando la longitud horizontal seguida de la
longitud vertical. Por ejem plo, para posicionar la im agen de m odo que quede centrada en form a horizontal (posicionada al 50 por ciento de la distancia a lo largo de la pantalla) y 30 pixeles a partir de la parte superior, use
background-position: 50X 30px;
La p ro p ied a d background-repeat
La propiedad background-repeat (línea 12) controla la form a de colocar las imágenes de fondo en mosaico,
en d o n d e se colocan múltiples copias de b im agen una al lado de o tra para llenar el fondo. A quí establecemos
b s mosaicos a no- r e p e a t para m ostrar sólo una copia de la im agen de fondo. O tro s valores incluyen r e p e a t (el
predeterm inado) para colocar b imagen en mosaicos verticales y horizontales, r e p e a t- x para colocar b imagen
sólo en mosaicos horizontales o r e p e a t- y para colocar b imagen sólo en mosaicos verticales.
l a p ro p ied a d background-attachaent:f1xed
La siguiente configuración de propiedad, background-attachnent:f1xed (línea 13). fija b im agen en la po­
sición especificada por background-position. Al desplazar b ventana del navegador b im agen no se moverá
122
Capítulo 4
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte l
de su posición. El valor predeterm inado s c r o l l mueve b imagen a m edida que el usuario se desplaza por
el docum ento.
Lmpropiedad text-in d en t
La línea 17 usa la propiedad te x t - i n d e n t para aplicar sangría en la prim era línea de texto en el elem ento por
una cantidad especificada, en este caso lem. Podríam os usar esta propiedad para crear una página Web que se
asemeje más a una novela, en donde se aplica sangría a b prim era línea de todos b s párrafos.
La propiedad fo n t-sty le
H ay o tra propiedad d e CSS que aplica form ato al texto: f o n t - s t y l e . Esta propiedad le perm ite establecer el
texto en none. i t a l i c u o b liq u e (esta últim a opción es sim plem ente más sesgada que i t a l i c — el navegador
recurrirá a i t a l i c si el sistem a o b fuente no soportan texto oblique).
4.9
Dimensiones de los elementos
Adem ás de posicionar elem entos, b s reglas de CSS pueden especificar b s dimensiones actuales de cada elem ento
de página. La figura 4.12 dem uestra cóm o establecer b s dim ensiones de b s elem entos.
1
<!DOCTYPE h t* l>
2
3
4
< ! - - F ig . 4 .1 2 : a n c h u ra .h tm l -->
< ! - - D im ensiones de lo s elem en to s y a lin e a c ió n d e l t e x t o . -->
3 <html>
6
<head>
7
<reta c h a r s e t = Mu tf-8 " >
•
<title>Dimensiones del c u a d ro < /title >
9
< sty le type = "te x t/c ss" >
10
p { background-color: LightSkyBlue;
11
nargin-bottom: .Sen;
12
font-fam ily: a r i a l , h e l v é t i c a , s a n s - s e r i f ; }
13
</style>
14 </head>
13 <body>
16
<p s t y l e s "width: 20%;' >Éste es un
17
t e x t o que va d en tro de un cuadro, e l cual
18
se e s t i r a a lo largo del vein te por c ie n to
19
de l a anchura de l a p a n t a l l a . </p>
20
21
<p s t y l e = "width: 80%; t e x t - a l i g n : center;">
22
Éste es un te x to CENTRADO que va dentro de un cuadro,
23
e l cual se e s t i r a a l o larg o del ochenta por c ie n to
24
de l a anchura de l a p a n ta lla .< /p >
23
26
<p s t y l e = "width: 20%; heigh t: ISOpx; overflow: s c r o l l ;">
27
Este cuadro solamente t i e n e el v e in te por ciento
28
de l a anchura y una a l t u r a f i j a .
29
¿Qué hacemos s i se desborda? Aiexcl¡Ajustamos la
30
propiedad overflow a sc ro ll!< /p >
31
</body>
32 </h tml >
Figura 4 .1 2 | Dimensiones de los elementos y alineación del texto (parte l de ?).
4.10
Modelo de cajas y flujo del texto
123
U»« »MOC¿WiAOO&X* 3ir«0* J\[u»JOSCuTMtt»!
Figura 4.12 | Dimensiones de los elementos y alineación del texto (parte 2 de 2).
Especificar la anchura (w idth)y altura (helght) de un elemento
El estilo en linca de la linca 16 ¡lustra cóm o establecer la anchura (w idth) de un elem ento en la pantalla; aquí
indicam os que el elem ento p debe ocupar el 20 por ciento de la anchura de la pantalla. Si no se especifica, la an­
chura se ajustará al tam año d e la ventana del navegador. La altura d e un elem ento puede establecerse de m anera
similar, usando la propiedad b e ig h t. Los valores wi d th y h e ig h t tam bién pueden especificarse com o longitudes
relativas o absolutas. I\>r ejem plo,
w id th : 10e«i
establece la anchura del elem ento a 10 veces el tam año de la fuente. Esto funciona sólo para los elem entos a
nivel de bloque.
La propiedad text-align
La mayoría de los elem entos se alinean a la izquierda de m anera predeterm inada, pero esta alineación puede
alterarse. La línea 21 establece el texto en el elem ento com o alineado al centro (c e n te r); otros valores para la
propiedad t e x t - a l 1gn son l e f t y r ig h t.
La propiedad ove r fio * y las barras de desplazamiento
En el tercer elem ento p, especificamos una anchura en porccnrajc y una altura
blecer ambas dim ensiones de un elem ento es q u e su contenido puede exceder
caso el elem ento sim plem ente se hace lo bastante grande com o para que quepa
en la linca 26 establecemos la propiedad o v erflo w en s c r o l l , una opción que
á el texto se desborda de los límites.
4 .10
en píxclcs. Un problem a al esta­
los lím ites establecidos, en cuyo
todo el contenido. Sin em bargo,
agrega barras de desplazam iento
Modelo de cajas y flujo del texto
Todos los elem entos de H T M L 5 a nivel de bloque tienen una caja virtual que está dibujada a su alrededor, con
base en lo que se conoce com o el m o d elo d e cajas. C uando el navegador despliega un elem ento usando el m o ­
delo de cajas, el contenido está rodeado de relleno, un b o rd e y u n m argen (figura 4.13).
124
Capítulo 4
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte l
Conténtelo
Relleno
Borde
Margen
Figura 4 . 1 3 | El modelo de cajas para los elementos a nivel de bloque.
CSS conrrola d borde mediante el uso de tres propiedades: border-wi dth, border-col o r y b o r d e r-s ty le .
En la figura 4.14 ilustramos estas propiedades.
1
2
3
4
3
6
7
8
9
10
II
12
13
14
13
16
17
18
19
20
21
22
23
24
23
26
27
28
29
30
31
32
33
34
33
36
37
38
<!DOCTYPE h t*l>
<1-- Fig. 4.14: bordes.html —>
< ! - - Bordes de lo s elementos a nivel de bloque. -->
<ht«il>
<head>
<»eta c h a r s e t = "utf-8">
< t1tle> B o rd ers< /t1tle>
< sty le type ■. "text/css">
d lv
{ te x t - a l i g n : ce n ter;
wldth: S0%;
p o sitlo n : r e l a tl v e ;
l e f t : 2S%;
border-width: 6px; }
•th lc k { border-width: thlck; }
.médium { border-wldth: aedlun; }
.th1n
{ border-width: th1n; }
.SOlid { b o rd e r-sty le : s o lld ; >
.double { b o rd e r-s ty le : double; )
.groove { b o rd e r-s ty le : groove; }
•ridge { b o rd e r-s ty le : ridge; }
.d o tte d { b o rd e r-s ty le : d o tted; }
. i n s e t { b o rd e r-sty le : In s e t; }
. o u t s e t { b o rd e r-s ty le : o u ts e t; }
.dashed { b o rd e r-sty le : dashed; }
.re d
{ border-color: red; }
.blue
{ border-color: blue; >
</style>
</bead>
<body>
<d1v c l a s s ■ Msol1d">Borde sAoacute;11do</d1v><hr>
<d1v c l a s s = "double">Doble borde</d1v><hr>
<d1v c l a s s = "groove”>Borde ranurado</d1v><hr>
<d1v c l a s s » “ridge ">Borde rugoso</d1v><hr>
<d1v c l a s s = “dotted">Borde punteado</d1v><hr>
<d1v c l a s s ■ " 1 n s e t’‘>Borde 1ncrustado</d1v><hr>
<d1v c l a s s = “ th lc k dashed">Borde grueso 1ntermitente</d1v><hr>
<d1v c l a s s = "th1n red sol1d">Borde sAoacute:1 i do rojo delgado</d1v><hr>
Figura 4 .1 4 | Bordes de los elementos a nivel de bloque (parte l de 2).
4.10
39
40
41
Modelo de cajas y flujo del texto
125
<d1v c l a s s = "medí un blue outset">Borde s a l i e n t e azul mediano</d1v>
</body>
</ht»il>
C
H^tndoi
M«7//Y'ycj<fnpioi/<apW/t<g04.14/b<yo«Wml
!■ *
=
_*) WtfeSki G#JIffr C Impoitjdo dt lnt#o\
o c t de >Otdc
]
Dobk borde
Borde r arando
B orde rugoso
Borde potreado
3 o r d ; ab am iad o
Borde p u n o «aeralente
B orde \o W o ro jo delgado
B orde saberte arul m ed aco
F igura 4 .1 4 | Bordes de los elementos a nivel de bloque (parte 2 de 2).
La propiedad b o rd e r-w id th puede establecerse en cualquier longitud de CSS válida (por ejem plo, em, ex,
px) o en el valor predefinido de th1n, médium, o t1 c k . La propiedad b o rd e r-c o lo r establece el color. [Nota:
esta propiedad tiene distintos significados para los diferentes estilos de bordes; por ejem plo, algunos m uestran
el color del b o rd een varias sombras.] Las opciones d e b o r d e r - s ty le son none, h id d en , d o tte d , d ashed, so l id ,
double, groove, rid g e , i n s e t y o u ts e t. Los bordes groove y rid g e tienen efectos opuestos, al igual q u e i n s e t
y o u ts e t. Si el b o r d e r - s ty le se establece en none, no se despliega ningún borde. Es posible establecer cada
propiedad de borde para u n lado individual de la caja (por e je m p b . b o r d e r - t o p - s t y l e o b o r d e r - l e f t - c o l o r ) .
Elem entos flo ta n tes
Ya vim os con el posicionam iento absoluto que es posible q u itar elem entos del flujo norm al de texto. La técnica
de elem entos flotantes nos perm ite mover u n elem ento hacia un lado d e la pantalla, m ientras que el resto del
contenido en el docum ento fluye alrededor ác I elem ento flotante. 1.a figura 4 .1 5 dem uestra cóm o pueden usarse
b s elem entos flotantes y el modelo de cajas para controlar la distribución de una página com pleta.
Si analizam os el código d e H T M L 5 . podrem os ver que la estructura general de este d o cu m en to consiste
en un encabezado (header) y dos secciones ( s e c tio n ) principales. C ada sección contiene un subencabczado h l
y un párrafo de texto.
Los elementos a nivel de bloque (como b s elementos s e c ti on) se despliegan con un salto de linea antes y después
de su contenido, de m odo que el elemento head er y los dos elementos s e c tio n se desplieguen en sentido vertical,
uno encima del otro. A falta de nuestros estilos, b s elementos h lq u e representan a nuestros subcncabczados también
x apilarían en sentido vertical encima del texto en las etiquetas p. Sin embargo, en la línea 24 establecemos la pro­
piedad f l o a t en r i g h t en la clase f l o ta n t e , que se aplica a b s encabezados h l. Esto ocasiona que cada elem ento h l
flote hacia el lado derecho de su elem ento contenedor, mientras que el párrafo de texto fluirá a su alrededor.
126
Capítulo 4
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte l
1
<!DOCTYPE html»
2
3
4
3
6
7
8
9
10
11
12
13
14
13
16
17
18
19
20
21
22
23
24
23
26
27
28
29
30
31
32
33
34
33
36
37
38
39
40
41
42
43
44
43
46
47
48
49
30
31
32
<!— Fig. 4.15: f l o l t a n t e .h t m l -->
< ! - - Elementos f l o t a n t e s . -->
<html»
<head>
<meta c h a r s e t
* " u tf-8 " »
< title » T e x to que flu y e alred edo r de elementos f l o t a n t e s < / t 1 t l e >
< style type ,,t e x t / c s s ,,>
header
{ background-color: SkyBlue;
t e x t - a l l g n : center;
fon t-fam ily : a r l a ! , h e l v é tic a , s a n s - s e r i f ;
padding: .2em; }
P
{ tex t-alig n : ju s tlfy ;
fo nt-fam ily : verdana, geneva, s a n s - s e r i f ;
nargin: .Se*; )
hl
{ margin-top: Opx; }
. f l o t a n t e { background-color: LightCrey;
f o n t- s iz e : l.S e * ;
font-fam ily: a r i a l , h e lv é ti c a , s a n s - s e r i f ;
padding: .2em;
n a r g i n - l e f t : .Sen;
nargin-bottom: .Sen;
f l o a t : r ig h t;
t e x t - a l i g n : r ig h t;
width: 50%; }
s e c tio n { border: lpx sol id skyBlue; }
</style>
</head>
<body>
< h e a d e rx in g src = " d e ite l .png” a l t = "D eitel" /></header>
<section>
<hl c l a s s = "flotante"> C apacitaci& oacute;n c o rp o ra tiv a y creación de
contenido</hl>
<p>Deite1 & A sso c ia tes. Inc. e s una empresa reconocida a n iv e l mundial,
dedicada al entrenamiento c o rp o rativ o y l a creación de contenido.
Se e s p e c i a l i z a en lenguajes de programación, tecnolog& iacute;a de
Internet/Web, d e s a r r o l l o de a p lic ac io n e s para iPhone y Android, y educación
sobre tecno1ogía de o b je to s . La empresa o fre ce cursos sobre
Java, C++, C#, Visual Basic, C, programación en I n t e r n e t y Web,
Tecnologí de ob jeto s y d e s a r r o llo de a p lic a c io n e s para iPhone y
Android.</p>
</section»
<sect1on>
<hl c l a s s ■ " flo ta n te " » L ib ro s y videos sobre programación</hI>
<p>A lo la rg o de su sociedad
e d i t o r i a l con Pearson, D eitel & A ssociates,
Inc. p u b lic a l i b r o s de te x to de vanguardia sobre programación,
lib r o s p ro fe sio n a le s y cursos de video LiveLessons en DVD y
basados en Web.</p>
< /section»
</body>
</html»
Figura 4 .1 5
Elementos flotantes (parte I de 2).
4.11
Tipos y consultas de medios
127
i
j
' T o lo qu«
C
áWctfedc
* \
^3 fiiey/Aye^empioVcapCM/fig04J5/flot¿nte.html
S*t»oi l ü ^ . á o i
2
* « * & « • G *3«y
C j V npCíU do U > * « n _
D e it e l
Oeitei & Associates, inc. es una C a p a cita ció n corporativa y
empresa reconocida a nivel
,
r
9
mundial.
dedicada
ai
crea ció n de co ntenid o
entrenamiento corporativo y la
creación de contenido.
Se
especializa en lenguajes de programación, tecnología de Internet/Web.
desarrollo de aplicaciones para ¡Phone y Android. y educación sobre
tecnología de objetos. La empresa ofrece cursos sobre Java, 0 + , Cs.
Visual Basic, C, programación en Internet y Web. Tecnologí de objetos y
desarrollo de aplicaciones para iPhone y Android.
A lo largo de su sociedad editorial
L ib ro s y Videos sobre
con Pearson. Deitel & Associates,
9
Inc. publica libros de texto de
program ación
vanguardia sobre programación,
libros profesionales y cursos de
video LiveLessons en DVD y basados en Web.
F igura 4 .1 5 | Elementos ftotantes (parte 2 de 2).
lasp ro p ied a d es m a r g i n y p a d d i n g
La línea 16 asigna un margen de . 5em a todos los elem entos de párrafo (p). La p ro p ie d a d n a rg in establece
el espacio entre el exterior del borde de un elem ento y el resto del contenido en la página. La línea 21 asigna
.2em de relleno a b s elem entos h l dotantes. La p ro p ie d a d padding determ ina la distancia entre el contenido
d entro de un elem ento y el interior de su borde. Los m árgenes de b s lados individuales de u n elem ento pueden
especificarse (líneas 17, 22 y 23) m ediante el uso de las propiedades m a rg in -to p , n a r g i n - r l g h t, n a r g i n - l e f t
y ■ a rg in -b o tto a i. Es posible especificar el relleno de la misma forma, usando las propiedades padd1ng-top,
p a d d in g -rig h t. p a d d in g - le f t y padding-bottoci. Para ver b s efectos de b s márgenes y del relleno, intente
c o b c a r las propiedades de margen y relleno dentro de com entarios y observe la diferencia.
En la línea 27 asignam os un borde a las cajas s e c tio n usando una declaración abreviada d e las propiedades
de borde, q u e nos perm iten definir las tres propiedades de borde en una línea. La sintaxis de esta abreviación es:
b o rd e r: anchura estilo color
Nuestro borde tiene 1 píxcl de grosor, es sólido ( s o lid ) y del m ism o c o b r que la propiedad backgroundc o lo r del encabezado (h ead er) (línea 10). Esto perm ite al borde mezclarse con el elem ento h ead er y hace que
la página aparezca oomo u n a caja con una línea que divide sus secciones.
4 .1 1
Tipos y consultas de medios
Los tipos d e m edios de CSS nos permiten decidir la apariencia de una página, dependiendo del tipo de medios
que se utilicen para mostrar la página. El más com ún para una página W eb es el tipo d e m edios screen , que es una
pantalla de com putadora estándar. Los otros tipos de medios en CSS son: handheld, b r a i l l e , speech y p r i n t. El
medio handheld está diseñado para dispositivos móviles de Internet com o los smartphones, mientras que b r a i l l e
es para Las máquinas que pueden leer o im primir páginas Web en braille. El estib speech nos permite ofrecer a un
128
Capítulo 4
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte l
navegador Web con síntesis de voz m is información sobre cl contenido de una página. El tipo de m edias p ri n t afecta
la apariencia de una página Web cuando se imprime. Para una lista completa de los tipos de medios de CSS, vea
h ttp ://***». w3. org/TR/REC-CSS2/media. html#med1 a-types
lo s tipos de m edios nos perm iten decidir la form a en que se va a presentar u n a página en cualquiera de esos
medios, sin que los demás se vean afectados. La figura 4.16 proporciona un e je m p b sim ple y clásico en el que
se aplica un conjunto de e stib s cuando vemos el docum ento en todos ¡os medios (incluyendo pantallas) excepto ¡a
impresora, y o tro al m om ento de im prim ir el docum ento. Para ver la diferencia, exam ine las capturas de pantalla
debajo del párrafo o use la función V is ta p r e v ia de Im p resió n en su navegador, si cu en ta con ella.
1 <!DOCTYPE html>
2
3
4
3
6
7
<!— F1g. 4 .1 6 : t1posmed1os.html -->
< !- - Tipos de medios de CSS. —>
<html>
<head>
< reta c h a rs e t = "utf-8">
8
< title > T ip o s de medios</t1tle>
9
< sty le type = “te x t/c s s " >
10
0media a l l
■I
{
12
13
14
13
16
17
18
19
{ background-color: SteelBlue; }
{ fo n t-fam lly : v e rd a n a , h e lv é tic a , s a n s - s e r l f ;
c o lo r: PaleCreen; }
p
{ f o n t- s iz e : 12pt;
c o lo r: whlte;
fo n t-fa m lly : a r l a l , s a n s - s e r l f ; }
} / * F1n de l a d e c laració n i n e d i a a l l . */
«media p r l n t
20
{
21
22
23
24
23
26
27
28
29
30
31
32
33
34
33
36
37
38
39
40
41
42
body
hl
body
hl
P
{ background-color: whlte; }
{ c o lo r: SeaGreen; }
{ f o n t- s iz e : 14pt;
c o lo r: SteelBlue;
fo n t-fam lly : “ times new román", tim es, s e r l f ; }
} / * F1n de l a declaració n Anedia p r l n t . * /
< /style>
</head>
<body>
<hl>Ejemplo de tip o s de medios de CSS</hl>
<p>
Este ejemplo usa tip o s de medios de CSS para v a r i a r l a forma en que
aparece l a página impresa y cómo aparece en c u a lq u ie r o tr o medio.
Este te x to aparece con una fuente en l a p a n ta l la y con una
fuente d i s t i n t a en papel o en v i s t a previa de im presiíoacute;n. Para ver
l a d if e r e n c ia en I n t e r n e t Explorer, vaya al menú Imprimir
y seleccione V ista previa de impresión. En F ire fo x , s e le c c io n e V ista
p re lim in a r del menú Imprimir.
</p>
</body>
</html>
Figura 4 .1 6 | Tipos de medios de CSS (parte l de 2).
4.11
Tipos y consultas de medios
129
a) El color <te fondo aparece en la pantalla.
] T * x * a * m etbo*
<*4
...
L + I
A W//tU+*n>itm/u$0UfMJVtpem*4+ÜM
Ejemplo de tipos de medios de CSS
Este ejemplo usa &pos de medios de CSS pata vanar la loma en que aparece tí página impresa y cómo
aparece en cuatquer otro medio Este ledo aparece con nía fuerte en la partata ycon una tuerte distinta en
papel o en vista previa de impresión Para ver la (Herencia en Irteme! Explorer, vaya al menú Imprimir y
seleccione Vista previa de impresión En Fircfox seleccione Vista prefeminar def menú Imprimir
b) B color de fondo se establece en blanco para e! tipo de medios prl n t.
T.poi de
bsst
M of>N fcrtfcu
Con*9yrjr pégm*~
H <
1
(k
1
► H
Uc«W | A ju st* i la p* 9-r>» •
rifo»4r rí4di
file
i
¿«t»
^
Y
tip o * «401
Ejemplo de tipos de medios de CSS
Este ejemplo usa tipos de medios de CSS para sanar la forma en que aparece la página
impresa y cómo aparece en cualquier otro tardío Este texto aparece con una fuente en la
pantalla y con una fuente di sonta en papel o en vista previa de impresión Para \e r la
diferencia en Internet Explorer, raya al menú Im pnnir y seleccione Vista previa de
impresión. En Firefox. seleccione Vista preliminar del menú Imprime
Fig ura 4 .1 6 | Tipos de medios de CSS (parte 2 de 2).
E n la línea 10 com enzam os u n bloque de estilos que se aplican a todos los tipos de medios; se declaran
m ediante ®med i a a l 1 y se encierran entre llaves ({ y >). En las lincas 10 a 18 definim os algunos estilos para todos
los tipos de medios. Las líneas 19 a 26 establecen los estilos que se van a aplicar sólo al m om ento de im prim ir
la página.
Los estilos que aplicam os para todos los tipos de m edios se ven bien en una pantalla pero no se verían así
en una página impresa. Un fondo a colores usaría mucha tinta y una impresora en blanco y negro podría im prim ir
una página difícil de leer, debido a que no hay suficiente contraste entre los colores.
Observación de apariencia visual 4.1
Las pág nos con colores defondo oscurosy tocto claro usan mucha tinta y pueden ser dijiciles de leer si se
imprimen, en especial si se usa una impresora en blanco y negro. Use el tipo de medios print para evitar esto.
Observación de apariencia visual 4.2
En general, ¡asfoentes uzns-serifte ven mejor en una pantalla, mientras que lasfoentes serifte ven mejor en
papel El tipo de medios print permite que la página Web muestre unafoente sans-serifen una pantalla y
cambie a unafoente serifal momento de imprimirla.
130
Capítulo 4
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte l
I*ara resolver estos problemas, aplicamos estilos específicos al tipo de m edios p ri n t. C am biam os la propie­
dad b a ck g ro u n d -c o lo r del elem ento body, la propiedad c o lo r d e La etiqueta h l y las propiedades f o n t - s i z e ,
c o lo r y f o n t- f a m ily de la etiqueta p de m odo que se adapten m ejor al im p rim ir^ ver la página en papel. O b ­
serve que la m ayoría de estos estilos entran en conflicto con b s declaraciones en la sección para todos los tipos
de medios. C om o el tipo d e m edio p r i n t tiene mayor especificidad que el tipo de medio a l l , kxs e stib s de p r i n t
redefinen a b s e stib s del tipo de m edio a l 1 cuando se im prim e b página. La propiedad f o n t- f a m ily de h l no
se redefine en b sección p r i n t, por b que retiene su v a b r anterior al m om ento de im prim ir b página.
Consultas de medios
Las co n su ltas d e m ed io s (que cubrirem os con detalle en la sección 5.17) nos perm iten aplicar form ato al con­
tenido para dispositivos de salida específicos. Las consultas de m edios incluyen u n tipo de m edio y expresiones
que com prueban las fu n cio n es d e m ed io s del dispositivo de salida. Algunas de las funciones de m edios más
com unes son:
•
w idth: b anchura de la parte de la p an ralb en ia q u e se despliega el docum ento, incluyendo barras de
desplazam iento
• h e lg h t: b altura de la parte de b pantalla en b que se despliega el docum ento, incluyendo barras de
dcspbzam icnto
• d ev ic e-w id th : b anchura de b p an talb del dispositivo de salida
• dev1 c e -h e lg h t: la altura de b p a n ta lb del dispositivo de salida
• o rie n ta t1 o n :s ¡ h e ig h t es m ayor que w id th , o r i e n t a t l o n es p o r t r a i t , y s iw id th es m ayor que h e ig h t,
o r i e n t a t i o n es lan d scap e
• a s p e c t - r a ti o : b relación entre w idth y h e ig h t,
• d e v lc e - a s p e c t - r a t io : U relación entre d e v ic e -w id th y d e v ic e -h e ig h t
Para una lista com pleta de funciones de m e d b s y más inform ación sobre b s consultas de medios, vea
h ttp ://w w w .w 3 .o rg /T R /c ss3 -in e d 1 a q u e rie s/
4.12
Menús desplegables
Los m enús desplegables son una buena form a de ofrecer v ín c u b s de navegación sin usar m ucho espacio en
pantalla. En esta sección volveremos a analizar b subclase :h o v e r y presentarem os b propiedad d i sp l ay para
crear un m enú dcsplcgable sim ple m ediante el uso de CSS3 y H T M L 5.
Y» vim os cóm o usar b subclase :h o v e r para cam biar el e s tib de un v ín c u b al pasar el ratón sobre éste.
A hora usaremos esta función de una form a más avanzada para hacer que aparezca un m enú cuando el ratón
pase sobre un b o tó n de menú. O tra propiedad im portante es d ls p la y , b cual nos perm ite decidir si se va a
desplegar o no un elem ento en la página. Los v ab res posibles son: b lock, i n l i n e y none. Los v ab res block c
in l i n e m uestran el elem ento com o u n elem ento de b b q u e o en línea, m ientras q u e none evita que se despliegue
el elem ento en pantalb. El código para el m enú desplegable se m uestra en la figura 4.17.
1
<IDOCTYPE h t* l>
2
3
4
< 1-- Fig. 4.17: desplegab1e.html —>
< !-- Menú desplegable de CSS. -->
Figura 4 .1 7
| Menú desplegable de CSS (parte I de 3)
4.12
3
6
7
8
9
10
11
12
13
14
13
16
17
18
19
20
21
22
23
24
23
26
27
28
29
30
31
32
33
34
33
36
37
38
39
40
41
42
43
Menús desplegables
<html>
<head>
<fleta c h a r s e t = "utf-8">
< t1 tle >
Menú desplegable
< /t1 tle >
< sty le type = Mte x t / c s s ”>
body
{ fon t-fam ily : a r i a l , s a n s - s e r i f }
nav
{ font-weight: bold;
color: whlte;
border: 2px s o l l d RoyalBlue;
te x t - a l l g n : ce n ter;
w1 d t h : 10e«i;
background-color: RoyalBlue; }
nav ul
{ display: none;
U s t - s t y l e : none;
nargln: 0;
padding: 0; }
nav:hovcr ul
{ d isp la y : block; }
nav ul 11
{ border-top: 2px s o l l d RoyalBlue;
background-color: whlte;
wldth: lOeti;
color: black; }
nav ul 11:hover { background-color: PowderBlue; }
a
{ te x t-d e c o ra tlo n : none; }
</style>
</head>
<body>
<nav>MenAuacute;
<ul>
< H x a h re f
M# M> In 1c 1o < /a x /l1>
<11 x a h re f
M#">Noticias</a></l1>
< H x a h re f
"i" >Art Al a c u t e ;cu l o s < / a x / l 1 >
< H x a h re f
“# " >Blog</a></11>
< H x a h re f
“#">Contacto</a></l1>
</ul>
</nav>
</body>
</ht»l>
a) Un menú contraído
j Q «-««nú
C 'Jl f»ie///Y;/ejemp*oVcap04/fig04_l7/deiplegat)le.Mml
5**01!U9«odo«
$i¿c«
Ci Cmpcita^c á*In#»n-.
Figura 4 . 17 | Menú desplegable de CSS (parte 2 de 3).
is
131
132
Capítulo 4
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte l
b) Aparece un menú
E M«*uduplrjítl»
desplegable al colocar
el cursor del ratón
C
sobre Menú.
file-7//Yyejemplovcap04/fig04.17/<Jespiegab(e.ntmi
V*>cs «uq«r>doí
| j W*t¡ 9 * 1 M W iy
C ) lm p c * * d o 4* Ifltcm
M enú
In ic io
u
N oticias
A rtícu lo s
B lo q
C ontacto
c) Al colocar el cursor
J Ww-Vdr^Ugít-i#
del ratón sobre un
vín ciio del menú se
«salta ese vínculo.
C
j Wey//Y;/ejempk>vcjp04/fig<MJ7/(J«plegat>4e.html
S.t.o»
¡I
\
A'e6 S(KC
□ fcnpcrtKíe
Pi
u?
5
Wtm..
Menú
m id o
N oticias
A rtic u lo »^
B lo g 0
C o ntacto
1r
Nml
Figura 4.17 | Menú desplegable de CSS (parte 3 de 3).
Las lincas 33 a 41 crean un elem ento nav que contiene el texto Menú y una lista desordenada ( u l ) de cinco
vínculos que deben aparecer en el m enú desplegable: I n ic i o , N o ticias, A rtícu lo s, Blog y Contacto. En un
principio. Menú es el único texto visible en b página. Al pasar el cursor del ratón sobre el elem ento nav, aparecen
los cinco vínculos debajo del menú.
La funcionalidad del m enú desplegable se encuentra en el código de CSS3. D os líneas definen b funcio­
nalidad desplegable. La línea 19 establece d isp la y en none para una lista desordenada (u l) que está anidada en
u n elem ento nav. Esto indica al navegador q u e no despliegue el contenido d e u l. La línea 23, que es sim ilar a
la línea 19, selecciona sólo los elem entos u l anidados en un elem ento nav que tiene en esc m om ento al ratón
sobre él. Al establecer d is p la y en b lo ck especificamos que cuando el ratón esté sobre el elem ento nav. b lista
u l se m ostrará com o elem ento a nivel de bloque.
El estilo en la línea 28 se aplica sólo a un elem ento l i que sea hijo de u n elem ento ul en un elem ento nav,
y sólo cuando ese 11 tenga el cursor del ratón encima. E ste estilo cam bia b propiedad b a c k g ro u n d -c o lo r de b
opción del m enú que esté resaltada en ese m om ento. El resto del código CSS sim plem ente agrega estilo a b s
com ponentes del m enú.
Este m enú desplegable es sólo un ejem plo de form ato más avanzado de CSS. H ay m uchos recursos adicio­
nales en línea para mentís de navegación y listas de CSS.
4.13
(Opcional) Hojas de estilo de usuarios
Los usuarios pueden definir sus propias h o jas d e estilo d e u su a rio s para aplicar form ato a las páginas con base
en sus preferencias. Por e je m p b , b s personas con dscapacidad visual tal vez deseen aum entar el tam añ o del
4 .13
(O pcional) Hojas de estilo de usuarios
133
texto de la página. Hay que tener cuidado de no rtdefinir de manera inadvertida ¡as preferencias de usuario con los
estilos definidos. En esta sección hablaremos sobre los posibles conflictos entre los estilos d e a u to r y los estilos
de u su a rio . Para los fines de esta sección, dem ostrarem os los conceptos en Internet Explorer 9.
La figura 4 .1 8 contiene un estilo de autor. La propiedad f o n t - s i z e se establece en 9 p t para todas las e ti­
quetas <p> a las que se aplique la dase nota.
I
<! DOCTYPE ht«tl>
2
3
4
3
6
7
8
9
10
11
<1— Fig. 4.18: usuario, a b s o lu to .h tn l —>
< ! - - Medición p t para el tamaño del te x to . -->
<ht*l>
<head>
o * eta c h a r s e t » " u tf-8 " >
< t 1 tl e > E s tilo s de u s u a r io < / titl e >
< sty le type = " te x t/c s s" >
.nota { f o n t-s iz e : 9pt; }
< /style>
12
</head>
13
14
15
16
17
<body>
<p>Gracias por v i s i t a r mis i t i o .
Espero que lo d i s f r u t e .
</p><p c l a s s * “nota">Nota: Este s i t i o se moverá
p ronto. V is it e con frecuencia para ver si hay actu aliz a c io n e s.< /p >
</body>
A
*
VA*3wplo%\<M)4\f^W.irs4m^ P • C X j J FdrkH<Uuuone
..1
•
Gracias por visitar mi sitio. Espero que lo disfrute.
N«tt E n »
wbo 38 o te v ff* p ro n to V iuto c o n
fttcutncu para v r t u h a \ Ktuikisocori
•
Figura 4 .1 8
| Medición pt para el tamaño deltexto.
Las hojas de estilo de usuario son hojas de estilo externas. La figura 4 .1 9 m uestra una hoja de estilo de
usuario que establece la propiedad f o n t - s i z e del elem ento body en 20p t, la propiedad c o lo r en yello w y
b ack g ro u n d -co lo r en navy. El valor d e f o n t - s i ze especificado en la hoja de estilo de usuario entra en conflicto
con el de la línea 10 de la figura 4.18.
1 / • Fig. 4.19: e s t i l o s u s u a r i o . c s s * /
2 / • Una hoja de e s t i l o s de u su a rio * /
3 body
{ f o n t-s iz e : 20pt;
4
co lo r: yellow;
3
background-color: Navy; }
Figura 4 .1 9
| Una hoja de estilos de
usuario.
Agregar una hoja ele estilo de usuario
Las hojas de e s tib de usuario no están vinculadas a un docum ento, sino q u e se establecen en las opciones del
navegador. Para agregar una hoja de e stib s de usuario en 1E9, seleccione la opción Opciones de I n t e r n e t . . .
13 4
Capítulo 4
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte l
que se encuentra en el m enú H erram ientas . E n el cuadro de diálogo Opciones de I n t e r n e t (figura 4.20) que
aparezca, haga clic en A c c e sib ilid a d ..., seleccione la casilla de verificación Formatear lo s documentos con
m1 hoja de e s t i l o s y escriba La ubicación d e la hoja de estilos de usuario. IE9 aplicará la hoja de estilos de
usuario a cualquier docum ento que cargue. Para agregar una hoja de estilos de usuario en Firefox, busque su
perfil de Firefox m ediante las instrucciones en w w w .m o zilla .o rg /su p p o rt/firefo x /p ro fi l e f l o c a t e y colo­
que una hoja de estilos llamada userC on tent.ess en el subdirectorio chrome. Para obtener inform ación sobre
a5m o agregar una hoja de estilos de usuario en C hrom e, vea vnw.google.com/support/forum/p/Chrome/thr
ead?tid-lfa0dd079dbdc2ff& hl-en.
Opoooei de internet
Opoonet
!
ir
Conten»*
F jra a o cx-ita*»*: d * c i a r a s rr o o a í . «< rfca caco S recoar. en
tro bnta nócpmírolr
J [tMv predetnrnnaÓÉ Utapé^mbterco
HattfM de
arene «•ctv.cn krpyain, hrton4. cootar», con*»©**»
e r^ortvooon de Comimos web.
f Eren*é futen* deetpbr&oón* ur
ttarenar...
P
-estato
Corro* :*t opoones
predetenrenod» de bu»vd*
CtfTde « forvMen g.©(os pógn»
*eb x rrueafranen bs peeteAes
Apénenos
Colores
Ccr¿Qj*xn
Cordgj'joon
Acce*W.ded
Id o n es
C*ntr los cckfts
en cognac *et>
Cmt» ios cízkx de fcior.te cspeofejdos en p ig ra wcd
! Orw!» lo» ton«Vn de fuerte* espeofeodos en p ig ra *tí*
Mofede esdoc dd uooaro
/ Formeeror bv docunmt» conn hop de ntta»
Ho^ede eittoe:
Y•
Lxrr*
L
Figura 4 -2 0 | Hoja de estilos de usuario en Internet Explorer 9.
La página W eb d e la figura 4.18 aparece en la figura 4 .2 1 . en d o n d e se aplica la hoja de estilos de usuario
de la figura 4.19.
Definición de f o n t - s l z e en una hoja de estilos de usuario
En el ejemplo anterior, si el usuario define f o n t - s l z e en una hoja de estilos de usuario, el estilo de autor tiene
m ayor precedencia y redefine el estilo de usuario. La fuente de 9pt que se especifica en la hoja de e stib s de autor
redefine a la fuente d e 20pt que se especifica en la hoja d e estilos d e usuario. Esta p eq u eñ a fuente p u ed e
4 .13
(O pcional) Hojas de estilo de usuarios
u
135
___ a o
..I
G racias po r visitar mi sitio. Espero que lo disfrute.
N « i Km am» i r noven p»wno Vnat c«n M -m tvu pao m n htv «rvsafeancnei
Figura 4 . 2 1 | Hoja de estilos de usuario aplicada con la medición pt.
dificultar la legibilidad de las páginas, en especial para individuos con áscapacidad visual Para evitar este pro­
blema podem os usar mediciones relativas (com o em o ex) en vez de medidas absolutas com o p t. La figura 4.22
cam bia la propiedad f o n t - s i z e para usar una m edición relativa (linea 10) que no redefine el estilo de usuario
establecido en la figura 4.19. En cam bio, el tam año de fuente que se m uestra es relativo al que se especifica
en la hoja de estilos de usuario. En este caso, el texto encerrado en la etiqueta <p> se m uestra com o 2 0 p t y las
etiquetas <p> a las que se aplica la d ase n o te se m uestran en 15pt. (.7 5 por 20pt).
I
<!DOCTYPE htn1>
2
3
4
3
6
7
5
<! — F ig . 4 .2 2 : u s u a r io _ r e la t iv o .h t m l — >
< ! - - M edición em p ara e l tamaño d e l te x to .
< ht*l>
<head>
<i»eta c h a rs e t n "u tf-8 ">
< t i t l e » E s t i l o s de u s u a rio < /t1 tle >
9
10
< s ty le type ■ " t e x t / c s s ’'>
.n o ta { f o n t - s iz e : .7Seai; }
11
</style>
12
13
14
13
16
17
-->
</head>
<body>
<p>Cracias por v i s i t a r mi s i t i o Web.Espero
que lo d i s f r u t e .
</p><p c l a s s = M
nota">Nota: Este s i t i o se moverá
pronto. V is i te con frecuencia para ver si hay actual izaciones.</p>
</body>
. i .•
. ■■g c r t u o t c i p «
u w w j * p ■c
x jj
; . ‘ i t l c : d«
x .él
•
Gracia* por visitar mi sitio Web. Espero que lo disfrute.
N ota. l i t e s a o m n o v e n p ro n to W n te c o n fre c u e n c ia p a ra ve* s i hiy ac tu o k c acio n e i
m
Figura 4 .2 2 | Medición em para el tamaño del texto.
La figura 4 .2 3 m uestra la página Web de la figura 4.22 en Internet Explorer, aplicando la hoja de estilos
de usuario de la figura 4.19. O bserve que la segunda línea de texto que se m uestra es más grande que la misma
lineade texto en la figura 4.21.
136
Capítulo 4
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte I
M1J
- u
té
Gracias po r visitar mi sitio W eb. Espero que lo disfrute.
Nota: Este sitio se moverá pronto. Visite con frecuencia para ver si hay
actualizaciones.
Figura 4-23 | Hoja de estilos de usuario aplicada con la medición em.
4.14
Recursos Web
http://«w #r .d el t e l . com/css3
El C entro de recursos de CSS3 de D eitel contiene vínculos a sitios con parte de la m ejor inform ación sobre
CSS3 en Web. A hí encontrará vínculos clasificados a tutoriales, referencias, ejemplos de código, dem ostracio­
nes, videos y más. Revise la sección de dem ostraciones para que vea ejem plos más avanzados de diseños, mentís
y o tro s com ponentes de páginas Web.
Resumen
Sección 4.1 Introducción
• La tecnología Hojas de estilo en cascada (3Cascading Style Shccts™3) (CSS3; pág. 106) nos permite especificar la
presentación de los dementos en una página Web (por ejemplo, fuentes, espaciado, tamaños, colores, posicionamiento)
por separado de la estructura y d contenido dd documento (encabezados de secciones, texto d d cuerpo, vínculos, etc.).
• Esta separación de estructura y presentación (pág. 106) simplifica el mantenimiento y la modificación de las páginas
Web, en especial en sitios Web de gran tamaño.
Sección 4JI Estilos en línea
• Un estilo en línea (pág. 106) nos permite declarar un estilo para un elemento individual mediante d uso d d atributo
s ty le (pág. 106) en la etiqueta de inicio del elemento.
• Cada propiedad de CSS (como fo n t-size, pág. 107) va seguida de dos puntos y dd valor dd atributo. Podemos separar
varias declaraciones de propiedades mediante punto y coma.
• La propiedad color (pág. 107) establece el color dd texto. Podemos usar códigos en hcxadecimal o nombres de cobres.
Sección 4 3 Hojas de estilo incrustadas
• Las hojas de estilo incrustadas (pág. 108) nos permiten incrustar un documento de CSS3 completo en la sección de
encabezado de un documento de HTML5.
• Los estilos que se colocan en un elemento sty le usan selectores (pág. 109) para aplicar dementos de estilo en todo el
cuerpo dd documento.
• Un elemento em indica que hay que enfatizar su contenido. Por lo general los navegadores despliegan los dementos e«
en una fuente en cursiva.
Resumen
137
• FJ atributo typ# dd demento style especifica d tipo MIME (d formato de codificación específico, pág. 109) de b hoja
de estilas. Los hojas de estilo usan ttxt/css.
• El cuerpo de cada regb (pág. 109) en una hoja de estilos empieza y termina con una Uave ({ y }).
• La propiedad font-welght (pág. 110) especifica el “grosor" del texto. Los valores posibles son: bold, normal
(el predeterminado), bolder (mis grueso que d texto bolder) y Hghter (mis ligero que d texto normal).
• El grosor también puede especificarsecon múltiplos de 100, desde 100 hasta 900. FJ texto que se especifica como nornal
es equivalente a 400 y el texto bold es equivalente a 700.
• A bs declaraciones de bs clases de estilo se les antepone un punto y se aplican a elementos de b clase específica.
El atributo class (pág. 111) aplica una clase de estilo a un demento.
• Las regias de CSS en una hoja de estilos usan d mismo formato que los estilos en línea.
• EJ atributo background-color especifica d color de fondo dd demento.
• La propiedad fon t-f añil y (pág. 110) nombra una fuente específica que debe mostrarse. Las familias de fuentes genéricas
permiten a los autores especificar un tipo de fuente en vez de una fuente específica, en caso de que un navegador no
soporte esa fílente.
• La propiedad font-slze (pág. 110) especifica d tamaño que se utiliza para desplegar b fílente.
• Hay que terminar una lista de fuentes con d nombre de una familia de fuentes genéricas (pág. 110) en caso de que bs
otras fuentes no estén instaladas en b computadora dd usuario.
• En muchos casos, los estilos que se aplican a un elemento (el elemento padre o ancestro, pág. 111) también se aplican
a los elementos anidados de ese demento (elementos hijos o descendientes, pág. 111).
Sección 4.4 Estilos conflictuados
• Los estilos pueden ser definidos por un usuario, un autor o un agente de usuario. Un usuario (pág. 111) es la persona
que está viendo su página Web, usted es d autor (pág. 111) (b persona que escribe d documento) y d agente de usuario
(pág. 111) es el programa que se utiliza para desplegar y mostrar el documento (por ejemplo, un navegador Web).
• Los estilos fluyen en cascada (de aquí que se use el término “Hojas de estilo en cascada", pág. 111) o juntos, de tal forma
que b apariencia final de los elementos en una página resulta de b combinación de los estilos definidos en varias formas.
• la mayoría de los estilos se heredan de las elementos padres (pág. 111). Los estilos que se definen para los hijos (pág.
111) tienen una mayor especificidad (pág. 112) y tienen precedencia sobre los estilos del padre.
• Las subclases (pág. 113) otorgan acceso al autor a la información que no está declarada en d documento, como d hecho
de que d ratón esté colocado sobre un elemento o si d usuario hizo dic antes (visitó) en un hipervínculo específico. La
subclase hover (pág. 114) se activa cuando el usuario mueve d cursor sobre un elemento.
• La propiedad text-decoration (pág. 113) aplica bs decoraciones al rcxro en un elemento, como ur>derl1ne, overl Ine
y 11ne-through.
• fóra aplicar reglas a varios elementos, separe los elementos con comas en la hoja de estilos.
• Para aplicar reglas sólo a cierto tipo de demento que sea hijo de otro tipo, separe los nombres de los dementos con
espacios.
• Un pixcl es una medición de longitud rdariva (pág. 114): su tamaño varía con base en la resolución de b pantalla. Otras
longitudes rebtivas son en (pág. 114). ex (pág. 114) y los porcentajes.
• Las otras unidades de medición disponibles en CSS son mediciones de longitud absolutas (pág. 114); es decir, unidades
que no varíen su tamaño. Estas unidades pueden ser 1n (pulgadas), cm(centímetros, pág. 114), nm(milímetros,
pág. 114), pt (puntos: lpt = 1/721 n, pág. 1 14) o pe (picas; lpc - 12pt).
Sección 4.5 Vinculación de hojas de estilo externas
•
Con tan hojas de estilo externas (es decir, documentos separados que sólo contienen reglas de CSS; pág. 114), es posible
proporcionar una apariencia visual uniforme a todo un sitio Web completo (o a una parte del mismo).
• Si necesitamos cambiar estilos, sólo es necesario modificar un archivo de CSS para realizar cambios de estilo en todas las
páginas que usen esos estilos. A esto se le conoce algunas veces como “skinning" (pág. 114).
138
Capítulo 4
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte I
•
Las comentarías de C SS (pág. 115) pueden colocarse en cualquier tipo de código CSS (como estilos en línea, hojas de
estilo incrustadas y hojas de estilo externas) y siempre empiezan con /* y terminan con */.
•
El atriburo reí de un vinculo (pág. 115) especifica una rrlación entre dos documcnros (pág. 115). Rara las hojas de
estilo, d atributo re í declara d documento vinculado como sty lesh eet (pág. 115) para d documento. El atributo
type especifica d tipo MIME dd documento relacionado como te x t/e ss. El atributo h ref proporciona d URL para d
documento que contiene la hoja de estilos.
Sección 4 .6 Posiciotiam ien to de elementas: posicionamiento absoluto, z-Yndex
•
•
La propiedad positlon de CSS (pág. 116) permite d posicionamiento absoluto (pág. 117), que proporciona un mayor
control sobre la posición de los elementos en una página. Al especificar la propiedad positlon de un elemento como
absolute ¿src se dimina del Rujo normal de elementos en la página y se posiciona de acuerdo con la distancia a partir
dd margen superior (top), izquierdo (le ft), derecho (rig h t) o inferior (botton) de su elemento padre.
La propiedad z-index (pág. 118) permite a un dcsarrollador colocar en capas los elementos que se traslapan. I-os
elementos con valores mayores de z-index se muestran frente a los elementos con valores menores de z-index.
Sección 4 .7 Posicionamiento de los elemetitos: posicionamiento relativo, span
•
A diferencia dd posicionamiento absoluto, el posicionamiento relativo mantiene los dementos en el flujo general en la
página y los desplaza con base en d valor especificado de top. l e f t, rig h t o botton.
• El elemento span (pág. 120) es un demento de agrupación (pág. 120); no aplica ningún formato inherente a su
con tenido. Su principal propósito es aplicar reglas de CSS o atributos id a una sección de texto.
• span es un elemento de nivd en lin o (pág. 120); aplica formato al texto sin cambiar d flujo del documento. Algunos
ejemplos de documentos en lin o son: span, img, a, e«i y strong.
• El elemenro div también es un demento de agrupación, pero es un elemento a nivel de bloque. Esto significa que se
muestra en su propia lin o y tiene una caja virtual a sii alrededor. Algunos ejemplos de elementos a nivd de bloque (pág.
120) son: d1v (pág. 120), p y los elementos de encabezado (hl a h6).
Sección 4.8 Fondos
• La propiedad background-1 mage especifica el URL de la imagen, en d formato urM.ubicMiónArchivo'). 1.a propiedad
background-positlon (pág. 121) coloca la imagen en la página asando los valores top, bottom, e tn te r, l e f t y rig h t
de manera individual o en combinación para el posicionamiento vertical y horizontal. Tambión es posible posicionar
mediante el uso de longitudes.
• La propiedad background-repeat (pág. 121) controla la fotma de colocar en mosaico la imagen de fondo (pág. 121).
Si se establece d mosaico a no-repeat. se muestra una copia de la imagen de fondo en b pantalla. La propiedad
background-repeat puede establecerse en repeat (el valor predeterminado) pata colocar en mosaico vertical y horizontal
b imagen, en repeat-x para colocar b imagen sólo en mosaico horizontal o en repeat-y para colocar b imagen sólo
en mosaico vertical.
• La opción flxed de background-attachment (pág. 121) fija b imagen en la posición especificada por backgroundposltlon. Si se desplaza b ventana dd navegador no se moverá la imagen de su posición establecida. £1 valor
predeterminado es se rol 1 y mueve b imagen a medida que d usuario desplaza b ventana.
• La propiedad te x t- i ndent (pág. 122) aplica sangría a b primera línea de texto en d demento con base en b cantidad
• La propiedad font-style (pág. 122) nos permite establecer d texto en none. Ita llc u obllque.
Sección 4.9 Dimensiones de los elementos
•
•
•
Es posible establecer las dimensiones de un elemento mediante CSS. usando bs propiedades height y wi dth (pág. 123).
H texto en un demento puede centrarse mediante te x t-a llg n (pág. 123): otros valores para b propiedad te x t-a llg n
son le f t y right.
Un problema al establecer b s dimensiones tanto vertical como horizontal de un demento es que d contenido dentro
de esc demento podrb exceder algunas veces los límites establecidos, en cuyo caso el demento aumentará hasta
ajustarse al contenido, ftidcmos establecer b propiedad overflo** (pág. 123) para desplazar, esta opción agrega barras
de dcspbzamicnro si el texto se desborda de los límites establecidos.
Resumen
139
Sección 4.10 Modelo de cajasy flu jo del texto
• Todos los elementos de HTML5 a nivel de bloque tienen una a ja virtual dibujada a su alrededor, con base en lo que se
conoce como el modelo de cajas (pág. 123).
• Cuando d navegador despliega elementos mediante d uso d d moddo de cajas, d contenido de cadademento va
rodeado de relleno (pág. 123), un borde (pág. 123) y un margen (pág. 123).
• La propiedad borde r-wl dth (pág. 124) puede establecerse en cualquiera de bs longitudes de CSS o en d valor predefinido
de th1 n, nediun o thi ele.
• Los estilos disponibles para border-style (pág. 124) son: none. hidden, dotted. dashed, sol id, double, groove, ridge,
in set y outset.
• La propiedad border-color (pág. 124) establece el color que se utiliza para d borde.
• El atributo class permite asignar más de una clase a un elemento, separando cada nombre de clase dd sigutenre con
un espacio.
• Por lo general los navegadores co lo an el texto y los ciernen ros en b pantalla en d orden en que aparecen en d documento.
Es posible quitar elementos dd flujo normal de texto. La técnica de flotación nos permite mover un demento hacia un
bdo de b pantalb; as(, d resto dd contenido d d documento fluirá alrededor d d elemento flotante.
• CSS utiliza un moddo de a ja s para desplegar dementos en b pantalb. El contenido de cada demento va rodado de
relleno, un borde y márgenes. Los propiedades de esta caja se ajustan con facilidad.
• La propiedad nargin (pág. 127) determina b distancia entre el borde exterior dd borde d d elemento y cualquier
demento adyacente.
• Es posible especificar márgenes para cada uno de los bdos de un demento mediante d uso de margin-top, raargin­
ri ght, m argin-left y raargin-bottom.
• La propiedad padding (pág. 127) determina b distancia entre d contenido dentro de un demento y b orilb interior dd
borde. También puede establecerse d relleno para cada bdo de b caja mediante el uso de padding-top, padding-right.
padding-left y paddi ng-bottora.
Sección 4.11 Tipos de medios y consultas de medios
• Los tipos de medios de CSS (pág. 127) nos permiren decidir cuál será la apariencia de una página, dependiendo de! ripo
de medios que se utilicen p r a visualizarla. El que se utiliza con más frecuencia p r a una página Web es d ripo de medios
scr««n (pág. 127), que viene siendo una pntalla de computadora estándar.
• Un bloque de estilos que se aplica a todos los tipos de medios se declara mediante «media a ll y va encerrado entre llaves,
ftira crear un bloque de estilos que se apliquen a un solo tipo de medios como p rin t, use «media p rin t y encierre las
reglas de esrilo entre llaves.
• Otros tipos de medios en CSS 2 son: handheld, b ra llle , aural y p rin t. El medio handheld (pág. 127) está diseñado
p r a dispositivos móviles de Interna, mientras que b r a llle (pág. 127) es p r a máquinas que puedan leer o imprimir
páginas Weben braille. EJ estilo aural (pág. 127) p rm itc a l programador proporcionara! navegador Web con c a p e idad
de síntesis de voz más información sobre d contenido de la página Web. El ripo de medios p rin t (pág. 127) afecta la
a p rie n c » de una página Web cuando se va a imprimir.
• las consultas de medios (pág. 130) nos prm iten aplicar formato al contenido p r a dispositivos de salida específicos.
Las consultas de medios incluyen un tipo de medios y expresiones que comprueban las características de medios de los
dispositivos (pág. 130).
Sección 4.12 Menús desplegables
• La subclase :hover se utiliza para aplicar estilos a un demento cuando se coloca d ratón sobre ¿1.
• La propiedad d1 splay (pág. 130) nos permite decidir si un elemento debe mostrarse como block o como 1nllne,
o si no debe desplegarse en p n talla (none).
Sección 4.13 (Opcional) Hojas de estilo de usuarios
• Los usuarios pueden definir sus propias hojas de estilo de usuario (pág. 132) p r a dar formato a las páginas con base en
sus preferencias.
140
Capitulo 4
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte I
•
Las mediciones de los tamaños de fuentes absolutos redefinen lashojas deestilo deusuario,mientrasque los tamaños
de fuentes rdarivos ceden ante un estilo definido por el usuario.
• Si el usuario define ci tamaño de fuente en una hoja de estilosdeusuario, d estilo deautor (pág.133) tiene mayor
precedencia y redefine el estilo de usuario.
Ejercicios de autoevaluación
4.1
Suponga que el tam año de la fuente base en un sistem a es de 12 puntos.
a)
b)
c)
d)
c)
4.2
¿Qué tan grande es una fuente de 36 puntos en cm?
¿Qué tan grande es una fuente de 9 puntos en em?
¿Qué tan grande es una fuente de 24 puntos en picas?
¿Qué tan grande es una fuente de 12 puntos en pulgadas?
¿Qué tan grande es una fuente de 1 pulgada en picas?
Complete las siguientes oraciones:
a) Mediante el demento_____________ es posible usar hojas de estilo externas en sus páginas.
b) Para aplicar una regla de CSS a más de un elemento a la vez, separe los nombres de los elementos con un(a)
c) Los píxdes son una unidad de medición de longitud_____________.
d) La subclase_____________ se activa cuando d usuario mueve d cursor dd ratón sobre el elemento especificado.
c) Al establecer la propiedad____________ en scroll se proporciona un mecanismo para crear contenido desplazablc
sin comprometer las dimensiones de un elemento.
0 _____________ es un demento en línea genérico que no aplica formato inherente y
es un elemento
genérico a nivel de bloque que no aplica formato inherente.
g) Al establecer la propiedad background- repeat en_____________ se coloca en mosaico vertical la imagen especifica­
da por backgrouod-Image.
h) Para comenzar un bloquede estilos que se aplique sólo al tipo de medio prlnt, usamos la declaración_____________
prlnt seguida de una llave de apertura ({).
i) La propiedad_____________ nos permite aplicar sangría a la primera linca de texto en un demento.
j) Los tres componentes dd modelo de cajas son____________ , ______________y _____________ .
Respuestas a los ejercicios de autoevaluación
4.1
4 .2
a) 3 «ns. b) 0.75 ens. c) 2 picas, d) 1/6 pulgada, e) 6 picas.
a) vinculo). b)coma. c) relativo, d) rhover. e)overflow. f)span,d1v. g) repeat-y. h)«fcted1a. i) text-1ndent.
j) relleno, borde, margen.
Ejercicios
4.3
4.4
4 .5
4.6
Escriba una regla de CSS que haga todo el texto 1.5 veces más grande que b fuente base dd sistema y coloree el texto
en rojo.
Escriba una rcgb de CSS que coloque una imagen de fondo en b mitad inferior de b página, en mosaico horizontal.
La imagen deberá permanecer en su lugar cuando el usuario se dcspbcc hacia arriba o hacia abajo.
Escriba una regla de CSS que proporcione a todos los elementos hl y hj? un relleno de 0.5 etts, un estilo de borde
dashed y un margen de 0.5 ens.
Escriba una rcgb de CSS que cambie el color de todos los elementos que contengan d atributo class • “verdeMover " a verde y los desplace 25 píxdes hacia abajo y 15 píxclcs a b derecha.
Ejercicios
4.7
4.8
4.9
141
Haga una plantilla de diseño que contenga un elemento header y dos párrafos. Use flo a t para alinear los dos pá­
rrafos como columnas, uno al lado del otro. Asigne un borde y/o un color de fondo al elemento header y a los dos
párrafos, para que pueda ver en dónde están.
Agregue una hoja de estilo incrustada al documento de HTML5 de la figura 2.3. La hoja de estilo debe contener una
regla para mostrar los elementos hl en color azul. Además cree una regla que muestre todos los vínculos en azul sin
subrayarlos. Cuando cl ratón pase sobre un vínculo, cambie d color de fondo de ese vínculo a amarillo.
Cree un botón de navegación mediante un demento div con un vínculo en su interior. Asígnde un borde, fondo y
color de texto, y haga que cambien cuando d usuario pase d ratón sobre d botón. Use una hoja de estilo externa.
Asegúrese de que su hoja de estilos se valide en h ttp ://j1 g san .w 3 .o rg /css-v al1 d ato r/. Tenga en cuenta que algu­
nas advertencias tal vez no puedan evitarse, pero su CSS no debera tener errores.
5
A rte es cuando ¡as cosas parecen
redondas.
— M an rice D e n i a
En cuestión de estilo, nadar con la
corriente; en cuestión de principios,
plantarse como una roca.
— T ilo m as J d f c r i o n
Todo lo que vemos es una sombra
proyectada por aquello que no
vemos.
— M a rtin L u t h e r K m g . J r.
Objetivos
En este capítulo aprenderá a:
■ Agregar sombras de texto y
efectos de trazo de texto.
■ Crear esquinas redondeadas.
■ Agregar sombras a elementos.
■ Crear gradientes lineales y
radiales, además de reflexiones.
■ Crear animaciones, transiciones
y transformaciones.
■ Usar múltiples imágenes de
fondo y bordes de imágenes.
■ Crear un diseño de varias
columnas.
■ Usar el diseño de modelo de
cajas flexible y los selectores
:nth-child.
■ Usar la regla e f o n t- f a c e para
especificar las fuentes de una
página Web.
■ Usar colores RGBA y HSLA.
■ Usar prefijos de proveedor.
■ Usar consultas de medios para
personalizar el contenido y
adaptarlo a diversos tamaños
de pantalla.
Introducción a las hojas de
estilo en cascada (Cascading
Style Sheets™, CSS): parte 2
Plan general
5.1
\
Introducción
5.1 Introducción
5.12 Animación: selectores
5.2 Sombras de texto
5.13 Transiciones y transformaciones
5.3 Esquinas redondeadas
5.4 Color
5.5 Sombras de cajas
5.6 Gradientes lineales: introducción a los prefijos
de proveedor
5.7 Gradientes radiales
5.8 (Opcional: WebKit solamente) Trazo de texto
5.9 Múltiples imágenes de fondo
5.10 (Opcional: WebKit solamente) Reflejos
5.11 Bordes de imágenes
143
5.13.1 Las propiedades tra n s í t1on y
transform
5.13.2 Inclinación
5.13.3 Transiciones entre imágenes
5.14 Descarga de fuentes Web y la regla
fifo n t-fa ce
5.15 Módulo de diseño de caja flexible y selectores
:n th - c h ild
5.16 Diseño multicolumna
5.17 Consultas de medios
5.18 Recursos Web
Resumen | ejercicios de autoevaluación | Respuestas a los ejercicios de autoevaluación | Ejercicios
5.1
Introducción
En el capítulo anterior presentam os las hcrram icntxs “tradicionales” de CSS. En este capítulo presentarem os
muchas características nuevas en CSS3 (vea los objetivos).
Estas herram ientas se están integrando en los navegadores, lo que produce un desarrollo W eb más econó­
mico y veloz, adem ás de una m ejora en el rendim iento del lado cliente. Esto reduce La necesidad de bibliotecas
de JavaScript y paquetes de grábeos sofisticados com o Adobe Photoshop, Adobe Illustrator, C orel PaintShop
IVo y G im p para crear efectos interesantes.
CSS3 aún se encuentra en desarrollo. Nosotros m ostrarem os m uchas herram ientas clave de C S S 3 que se
encuentran en el proyecto de norm a, así com o algunas herram ientas no estándar que tal vez se agreguen en un
m om ento dado.
5.2
Sombras de texto
La propiedad tex t-sh ad o w de C SS3 facilita la acción de agregar un efecto de so m b ra d e te x to a cualquier irxto
(figura 5.1). Primero agregam os una propiedad te x t-sh a d o w a nuestros estilos (línea 12). La propiedad tiene
cuatro valores: -4px, 4px, 6px y DlnGrey, los cuales representan:
• El desplazam iento horizontal de la som bra: el núm ero de píxclcs que aparecerá el elem ento t e x t - shadow
a la izquierda o a la derecha del texto. En este ejem plo, el desplazam iento horizontal de la som bra es -4px.
U n valor negativo mueve el elem ento te x t-sh a d o w a la izquierda : u n valor positivo lo mueve a la derecha.
• El desplazam iento vertical de b sombra: el núm ero de píxclcs que se dcspbzará el elem ento te x t - s h a dow hacia arriba o hacia abajo del texto. En este ejem plo, el desplazam iento vertical d e b som bra es 4px.
U n valor negativo mueve b som bra hacia arriba, m ientras que un valor positivo b mueve hacia abajo.
• El rad io d e d esen fo q u e: el desenfoque (en píxclcs) de b som bra. U n radio de desenfoque de Opx
produciría una som bra con un borde nítido (sin desenfoque). Entre m ayor sea el valor, mayor será el
desenfoque de b s orillas. N osotros usamos un radio de desenfoque de 6px.
• El c o lo r: determ ina el color del elem ento tex t-sh ad o w . N osotros usam os dim grey.
144
Capítulo 5
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte 2
1
<!DOCTYPE html>
2
3
4
3
6
7
•
f
10
< ! - - Fig. 5.1: sombratexto.html -->
< ! - - Sombra de te x to en CSS3. -->
<html>
<head>
<meta c h a r s e t » " u t f - S ”>
<titie>Sombra de t e x t o < / t i t l e >
<style type « Mt« x t/css">
hl
11
í
12
13
«4
15
text-shadow: -*px 4px 6px dingrey: / * agrega sombra * /
f o n t- s iz e : 400%; / * aumenta el tamaño de l a fuente * /
}
</style>
16
</head>
17
18
If
20
<body>
<hl>Sombra de texto</hl>
</body>
</html>
J
____________________________
Som era J« u « tc
*
C
^
Jj ble7//X/ejemp)oV<*p05/íig05_01/somi>íatexto.htmJ
l j S*»o»Kp^endc» Q
^
^
=
S*<eG^lery O lmp©»udo d e Intem „
*
tex t-sh ad o w ____
ooior dimgrey
Sombra de texto
.
Figura 5.1 | Sombra de texto en CSS3.
5.3
Esquinas redondeadas
La propiedad border-radius nos permire agregar esquinas redondeadas a un elem ento (figura 5.2). En este ejem­
plo creamos dos rectángulos con bordes sólidos color Navy. Para cl prim er rectángulo, establecemos b propiedad
b o rd e r-ra d iu s en 15px (linea 17). Esto agrega esquinas ligeramente redondeadas al rectángulo. Para el segundo
rectángulo, aum entam os el valor de b o rd e r-ra d iu s a 50px (línea 27) y los bdos izquierdo y derecho se vuelven
completam ente redondos. Cualquier valor de b o rd e r-ra d iu s mayor que b mitad d e b longitud del b d o más corto
produce un extremo totalmente redondo. También pódeme» especificar el radio de cada esquina con b o rd e r-to p le f t- r a d i u s ,b o r d e r - to p - r ig h t - r a d iu s ,b o r d e r - b o t to m - le f t- r a d i u s y b o rd e r-b o tto m -rig h t-ra d iu s .
1
<!DOCTYPE ht«l>
2
3
4
3
6
7
<1— Fig. 5.2: esquinasredondeadas.html —>
< ! — Uso de bo rd er-rad iu s para agregar esquinas redondeadas a dos elementos. -->
<ht*il>
<head>
<meta c h a rs e t = “ u tf-8 " >
Figura 5 .2 | Uso de b o rd er-rad iu s para agregar esquinas redondeadas a dos elementos (parte I de 2).
5.4
8
9
10
{
12
13
14
13
16
17
18
19
20
}
#redonda2
21
{
37
145
<title> E squinas redondeadas</t1tle>
< sty le type = " t e x t / c s s ”>
d1v
11
22
23
24
23
26
27
28
29
30
31
32
33
34
33
36
Color
border:
3px sol id navy;
padding: Spx 20px;
background: lightcyan;
Mldth: 200px;
t e x t - a l i g n : center;
b o rd e r-ra d iu s: ISpx; / • agrega esquinas redondeadas */
nargin-bottom: 20px;
border:
3px sol id navy;
padding: Spx 20px;
background: lightcyan;
wi d t h : 200px;
t e x t - a l i g n : center;
b o rd e r-ra d iu s: SOpx; / * aumenta b o rd e r-ra d iu s
*/
>
</style>
</head>
<body>
<div>La propiedad b o rd er-ra d iu s agrega esquinas redondeadas
a un elemento.</div>
<div id = Mredonda2">Al aumentar el v a lo r de b o rd e r-ra d iu s se redondean
aún
más l a s esquinas del elemento.</d1v>
</body>
</ht*l>
1111 fu
j
í
redondcrtts
C
J (ile-y//X7íj«rtiploi/c^p05/(»g0S.02/«quinásfeaondeidas html
£ j S* 0 4 KU9 ^ d e «
........
* \
C
Sl*c# G *U ry
—
O
.
E
>Tipc»tad« d e H « c n .
— ...
-
. .. .
La ptopxedad bocdet :adna
i p t p k tiq im as ft&fkdea&u a
un dementó
Ai aumentar d \-éo f de tordnradni se redondean aro mas las
esquinas dd demento
(
Figura 5 .2 | Uso de bo rd er-rad iu s para agregar esquinas redondeadas a dos elementos (parte 2 de 2).
5.4
Color
CSS3 nos permite expresar el color de varias formas, además de los nombres de colores estándar (como Aqua) o
valores RGB hexadecimaies (como #00FFFF para Aqua). R G B (rojo, verde, azul-) o RG BA (rojo, verde, azul, alfa)
nos dan un mayor control sobre los colores exactos en nuestras páginas Web. El valor de cada color (rojo, verde y
azul) puede variar enrreOy255.Elvalor¿$&(que representa la o p a c id a d ) puede ser cualquier valor en el rango de 0.0
(transparencia toral) hasta 1.0 (opacidad toral). Porejcmplo.sicstablececlcolorbackgrounddc la siguiente forma:
146
Capítulo 5
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte 2
background: rgba(255, 0 . 0 . 0 .5 )
el color resultante sería un rojo m edio opaco. Al usar colores RGBA obtenem os m uchas más opciones que si
usam os los nom bres de colores de H T M L existentes; hay cerca de 140 nom bres de colores de H T M L , mientras
que hay 1 6 7 7 7 2 1 6 colores RGB distintos (256 x 256 x 256) y diversas opacidades de cada uno.
CSS3 tam bién nos perm ite expresar color m ediante valores H S L (tin te , sa tu ra c ió n , clarid ad ) o H SLA
(tin te, satu ració n , claridad, alfa). El tinte es un color o som bra que se expresa com o un valor de 0 a 359 para
representar los grados en una rueda de colores (una rueda tiene 360 grados). Los colores en la rueda progresan
en el orden de los colores del arcoíris: rojo, naranja, am arillo, verde, azul. índigo y violeta. El valor de rojo, que
está al principio de la rueda, es 0. Los tintes verdes tienen valores cercanos a 120 y los tintes azules tienen valo­
res cercanos a 240. Un valor de tin te d e 359, que está justo a La izquierda de 0 en b rueda, produciría un tin te
tojo. La saturación (intensidad del tinte) se expresa com o un porcentaje, en d o n d e 100* es saturación total (el
color com pleto) y 0X es gris. La claridad (intensidad de luz o lum inancia del tinte) tam bién se expresa com o un
porcentaje. U na claridad de 50% es el tin te actual. Si reduce b cantidad de luz a 0%, el color aparece totalm ente
oscuro (negro). Si aumenta b cantidad d e luz a 100X, el color aparece totalm ente claro (blanco). Por ejemplo,
si desea usar un valor h s la para o b ten er el m ism o color rojo que en nuestro ejem plo de u n valor rg b a. debe
establecer b propiedad background así:
background: h s la ( 0 , 100X, S0X, 0 .5 ) ;
El color resultante sería un rojo medio opaco. U na herram ienta cxcclcncc que nos perm ite elegir colores d e una
rueda para encontrar los valores RGB y H SL correspondientes está en:
h ttp ://d w y w .w o rk w 1 th c o lo r.c o a /h sl-c o lo r-sc h e m e r-0 l.h t®
5.5
Sombras de cajas
Podem os aplicar som bra a cualquier elem ento a nivel de bloque en CSS3. La figura 5.3 nos m uestra cóm o
crear una so m b ra de caja. El estilo d iv en las líneas 10 a 19 indica que los elem entos d1v son cajas de 200px
por 200px con un fondo color Plum (líneas 12 a 14). A continuación, agregamos la propiedad box-shadow con
cuatro valores (línea 15):
•
Desplazam iento horizontal d e la som bra (25px): el núm ero de píxclcs que aparecerá el elem ento boxshadow a la izquierda o a la derecha de la caja. U n valor positivo desplaza el elem ento box-shadow a la
derecha.
•
Desplazam iento vertical de b som bra (25px): el núm ero de píxclcs que se desplazará el elem ento boxshadow arriba o debajo de b caja. U n valor positivo mueve el elem ento box-shadow hacia abajo.
• Radio d e desenfoque: un radio de desenfoque d e Opx produciría u n a som bra con un borde nítido (sin
desenfoque). E ntre m ayor sea el valor, más desenfocados estarán los bordes de b som bra. N osotros usa­
mos un radio de desenfoque de lOpx.
• Color: el color del elem ento box-shadow (en este caso, dlm grey).
E n las líneas 20 a 26 cream os un estilo que se aplica sólo al segundo d1v, q u e cambia el desplazam iento h o ­
rizontal de box-shadow a -25px y el desplazam iento vertical a -25px (línea 25) para m ostrar los efectos de usar
valores negativos. Un valor de desplazam iento horizontal negativo mueve el elem ento box-shadow a b izquierda.
U n desplazam iento vertical negativo mueve b som bra itocia arriba.
5.5
1
Sombras de cajas
147
<! DOCTYPE ht«il>
2
3
< 1-- F1g. 5.3; som b racaja.h tm l -->
4
5
<l— C re a c ió n de e f e c t o s de sombra de t e x t o . -->
<h t»l >
6
<head>
7
<*eta charset = Mu tf-8">
8
<title>Sombra de c a j a < / t i t l e >
<style type = " te x t/c ss " >
9
10
div
11
{
12
13
14
13
16
17
flo a t: le ft;
nargin-right: 120px;
margin-top: 40px;
18
19
width: 200px ;
height: 200px;
background-color:
plun;
box-shadow: 25px 2Spx SOpx dimgrey;
}
20
# c a ja 2
21
í
22
23
24
23
26
}
27
h2
28
29
{
30
}
31
32
33
34
33
36
37
width: 200px ;
height: 200px;
background-color:
plum;
box-shadow: -2Spx -2Spx SOpx dimgrey;
text-align: center;
</style>
</head>
<body>
<d1vxh2>Sombra de c a ja i n f e r i o r y derecha< /h2x/div>
<div id - ,‘c a ja 2 Mxh2>Sombra de c a ja s u p e rio r e iz q u ie rd a < /h 2 x /d iv >
</body>
</html>
_______________________________
/ Q Somtfi CkC#>8
* \ ________________________________________________
C
¡j
ü jQ tn v c s
fi*ey//X/ejempios/cap05/fig05.03/somt>r^j^.Mmi
(
Weto S k t Gatlcry Q
I n 'f o tttd o de k i t r n
S o m b ra de c a ja
in fe rio r vW d e re c h a
Figura 5 .3 | Creación de efectos de sombra de texto.
S o m b ra de c a ja
s u p e r io r e
izq u ierd a
f*
£
E
S
Ü
148
5.6
Capitulo 5
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte 2
Gradientes lineales: introducción a los prefijos de proveedor
Los g rad ien tes lineales son un tipo de im agen que cam bia en form a gradual de un color al siguiente en sentido
horizontal, vertical o diagonal. Es posible realizar transiciones entre tantos colores com o desee, adem ás de espe­
cificar los puntos en los cuales hay q u e cam biar de color, conocidos com o c o lo r - s to p , los cuales se representan
en píxcles o porcentajes a lo largo de la Unta de gradiente el ángulo en el cual se extiende el gradiente. Podemos
usar gradientes en cualquier propiedad que acepte una imagen.
Creación de gradientes lineales
E n la figura 5.4 creamos rres gradientes lineales ( vertical horizontal y diagonal) en rectángulos separados. Al
estudiar este ejemplo notará que la propiedad background de cada uno de los tres estilos de gradiente lineal (ver­
tical. horizontal y diagonal) se define varias veces en cada estilo: una para los navegadores basados en W ebKit,
otra para M ozilla Firefox y una más en la que se usa la sintaxis estándar de C SS3 para gradientes lineales. E sto
ocurre con frecuencia al trabajar con CSS3, ya que m uchas de sus funciones aún no están term inadas. M ientras
tanto, m uchos de los navegadores se adelantaron y em pezaron a im plem entar estas funciones para que usted
pueda usarlas ahora. Más adelante en esta sección hablarem os sobre los prefijos de proveedor que nos perm iten
usar m uchas de las funciones en evolución de CSS3.
1
2
<!DOCTYPE h t* l>
3
4
3
6
7
<1— Fig. 5.4: g ra d ien te1 1n e al.h tm l -->
< 1 - - G radientes l i n e a l e s en C S S 3 . — >
<ht«il>
<head>
<meta c h a r s e t ■ “u tf-8 " >
8
< t1 tle > G ra d ie n te 1 i n e a l < / t i t l e >
9
10
< sty le type = "text/css">
d1v
••
(
12
13
14
15
16
17
18
19
20
21
width: 200px;
h elg ht: 200px;
border: 3px solid navy;
padding: Spx 20px;
t e x t - a l i g n : center;
background: -w eb k 1 t-g ra d ie n t(
linear, center top, center bottoai,
c o l o r - s t o p (15%, Whlte), color-stop(S0% ,
c o l o r - s t o p (75%, navy) ) ;
1 ightsteelblue) ,
background: - * o z - l1 n e a r - g r a d 1 e n t(
22
top center, whlte 15%, 1 Ightsteelblue 50%,navy 7S% );
23
background: 1 1 n e a r-g ra d 1 e n t(
24
23
top, Whlte 15%, 1 Ightsteelblue 50%,navy 75%
f lo a t: left;
26
27
»arg1n-r1ght: ISpx;
}
28
íh o r i z o n t a l
29
{
30
31
width: 200px;
helght: 200px;
Figura 5 .4 | Gradientes lineales en CSS3 (parte I de 2).
);
5.6
32
33
34
33
36
37
38
39
40
41
42
43
44
45
46
47
48
49
30
31
32
53
34
33
36
37
38
39
60
61
62
63
64
63
66
67
68
Gradientes lineales: introducción a los prefijos de proveedor
border: 3px sol 1d orange;
paddlng: Spx 20px;
t e x t - a l i g n : center;
background: -webki t- g r a d i e n t(
l i n e a r , l e f t top, r l g h t top,
c o lo r-sto p (1 5 X , w h l t e ) , color-stop(SOX, yello w ),
colo r-sto p(7S X , orange) );
background: -■ o z -l1 n e a r-g ra d 1 e n t(
l e f t , whlte 15*, yellow 50%, orange 75* );
background: 11near-grad1entC
l e f t , whlte 15 *, yellow 50 *, orange 75* );
n a r g 1 n - r 1 g h t: ISpx;
}
«diagonal
{
w ld th : 200px;
helgh t: 200px;
border: 3px sol1d purple;
paddlng: 5px 20px;
t e x t - a l i g n : center;
background: -webk1t-grad1ent(
l i n e a r , l e f t top, r l g h t b o tto a ,
c o lo r-sto p C IS *, w h l t e ) , c o l o r - s t o p ( 5 0 * . p lu n ),
c o lo r - s t o p ( 7 S * , p u rp le ) );
background: - a o z - H n e a r - g ra d 1 e n t(
top l e f t , white 1S*. p lu a 5 0 * . p u rple 7 5 * ) ;
background: I 1 n e a r -g ra d 1 e n t(
13Sdeg, w hlte 1 5 * . plum 5 0 * . purple 75* );
}
< /style>
</head>
<body>
<d1v><h2>Gradiente l i n e a l v e r tic a l< / h 2 x / d 1 v >
<d1v 1d « “h o r1zo n tal"x h 2> G rad ien te l i n e a l h o r iz o n ta l< / h 2 x / d 1 v>
<d1v 1d « "diagonal "><h2>Grad1ente lin e a l di agonal < /h2x/d1v>
</body>
< /h ta l>
—
/ i*
I
uneü
C
D $-*■« i ^ . d c i
■
______________________
Mry//Xyejefnoiovcap05/f«g05.04/grad»«me<ift<aiiitmi
□ W*
M M —
f*
Ú8l)8f> O lir^ortJdc d« |n«*m_
G ra d ie n te lin eal
v e rtic a l
G ra d ie n te lineal
h o riz o n tal
Figura 5 .4 | Gradientes lineales en CSS3 (parte 2 de 2).
G ra d ie n te lineal
d iag o n al
5
149
150
Capitulo 5
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte 2
Gradiente lineal vertical de WebKit
El cuerpo del ejem plo contiene tres elem entos d iv . EJ prim ero tiene un gradiente lineal vertical de arriba hacia
abajo. Vamos a crear un gradiente de fondo, por lo que em pezam os con la propiedad background. La sintaxis de
gradiente lineal para WebKit (líneas 17 a 20) difiere un poco de la de Firefbx (líneas 21 y 22). Para los navega­
dores de W ebK it usamos - w e b k it- g r a d ie n t. D espués especificamos el tipo de gradiente (1 in e a r ) y b dirección
del gradiente lineal, de c e n te r to p hasta c e n te r bottom (línea 18). E sto crea u n gradiente q u e cambia colores
en form a gradual de la parte superior hasta la parte inferior. A co n tin u ació n especificamos el c o l o r - s t o p
(topes de color) para cl gradiente lineal (lincas 19 y 20). D entro de cada c o lo r - s to p hay dos valores: el prim ero
es la ubicación del tope (por ejemplo 15%, que es 15% hacia abajo desde la parte superior de la caja) y el segundo
es el color (por ejem plo, w h ite). C am biam os d e White en b parte superior a l i g h t s t e e l b l u e en el centro y
luego a navy en b parte inferior. Podemos asar tantos c o lo r - s to p com o queram os.
Gradiente lineal vertical de M ozilla
Para los navegadores M ozilla usam os -moz-1 in e a r - g r a d ie n t (línea 21). En b línea 22 especificamos el valor
de g r a d i e n t - l i n e (to p c e n te r) , que es la dirección del gradiente. D espués de g ra d ie n t-1 1 n e especificamos
cada c o lo r y c o lo r - s t o p (línea 22).
Gradiente lineal vertical estándar
La sintaxis estándar d e CSS3 para gradientes lineales tam bién es un poco d istin ta. P rim ero especificamos
1 in e a r - g r a d ie n t (línea 23). E n la línea 24 incluim os los valores para el gradiente. Em pezam os con la dirección
del gradiente (top), seguida de cada c o lo r y c o lo r - s to p (línea 22).
Gradiente lineal horizontal
E n las líneas 28 a 44 cream os un rectángulo con un gradiente horizontal (izquierda a derecha) que cambia en
form a gradual d e w h ite a yel low y luego a oran g e. Para W ebKit, la dirección del gradiente es de 1 e f t to p a
r i g h t to p (línea 36), seguido de los elem entos c o lo r y c o lo r - s to p (líneas 37 y 38). Para M ozilb especificamos
g r a d i e n t - l i n e ( l e f t ) , seguido de los elem entos c o lo r y c o lo r - s to p (línea 40). La sintaxis estándar de CSS3
em pieza con b dirección ( l e f t ) para indicar q u e el gradiente cam bia de izquierda a derecha, seguido de los
elem entos c o lo r y c o lo r - s to p (líneas 42 y 43). La dirección tam bién puede especificarse en grados, en donde
0 grados es directo hacia arriba y los grados positivos progresan en sentido de bs manecillas del reloj. Para un
gradiente de izquierda a derecha hay que especificar 90deg. Para un gradiente de arriba hacia abajo hay que
especificar Odeg.
Gradiente lineal diagonal
E n el tercer rectángulo cream os un gradiente lineal diagonal que cam bia en form a gradual d e w h ite a plum y
luego a p u rp le (líneas 45 a 60). Para W ebKit, b dirección del gradiente es de l e f t to p a r i g h t bottom (línea
53), seguida de los elem entos c o lo r y c o lo r - s to p (líneas 54 y 55). Pira M o zilb especificamos g r a d i e n t - l i n e
(to p l e f t ) , seguida de b s elem entos c o lo r y c o lo r - s t o p (linca 57). La sintaxis estándar d e C S S 3 empieza con
b dirección (135deg) para indicar que cl gradiente cam bia a un á n g u b de 45 grados, seguido de b s elem entos
c o lo r y c o lo r - s to p (línea 59).
Prefijos de proveedor
En este e je m p b (figura 5.4), b s líneas 17 a 24, 35 a 42 y 52 a 59 definen tres versiones del e s tib background
para definir los gradientes lineales. Las versiones en las líneas 17. 35 y 5 2 , adem ás d e las líneas 2 1 , 39 y 56
5.7
Gradientes radiales
151
contienen los prefijos -w e b k it- y -moz-, respectivamente. É stos son prefijos de p ro v eed o r (figura 5-5) y se
utilizan para propiedades q u e aún se están term inan d o en la especificación d e CSS pero que ya se han implcm entado en varios navegadores.
Prefijo de proveedor
-« S -moz-o -webki t -
Navegadores
Internet Explorer
Navegadores basados en Morilla, incluyendo Firefox
Opera y Opera Mobilc
Navegadores basados en WebKit, incluyendo Google Chrome,
Safari (y Safari en el iPhone) y Android
Figura 5 .5 | Prefijos de proveedor.
Iz)s prefijos no están disponibles para todos los navegadores ni para todas las propiedades. Por ejem plo, al
m om ento de escribir este libro los gradientes lineales se habían im plem entado sólo en navegadores basados en
W ebKit y en M ozilla Firefox. Si elim inam os las versiones con prefijos de los estilos d e gradientes lineales en este
ejemplo, los gradientes no aparecerán cuando La página se despliegue en un navegador basado en W ebK it o en
Firefox. Si usted ejecuta este program a en navegadores q u e aún no soporten los gradientes, éstos no aparecerán.
Es una buena costum bre incluir los m últiples prefijos cuando estén disponibles, de m odo que sus páginas se
desplieguen de m anera correcta en los diversos navegadores. A m edida que se term inen las funciones de CSS3 y
se incorporen por com pleto en los navegadores, los prefijos serán innecesarios. Por ejem plo, no usam os ningún
prefijo para el ejem plo de box-shadow (figura 5.3) porque está im plem entado en su totalidad en los navegadores
basados en W ebKit, en Firefox, O pera e Internet Explorer. M uchas de las nuevas funciones de CSS3 aún no se
han im plem entado en Internet Exploren esperam os que esto cambie con IE 10.
Al usar prefijos de proveedor en los estilos, siempre debem os colocarlos antes de b versión sin prefijos
(como en las líneas 17 a 22 d e la figura 5.4). La últim a versión del estilo que soporta un navegador específico
tiene precedencia y el navegador la usará. Así, al listar b versión estándar sin prefijo al últim o, el navegador b
usará en lugar de utilizar b versión con prefijo cuando se soporte la estándar. Para ahorrar espacio en el resto
de este capítulo, no incluirem os todos los prefijos de proveedor en todos los ejemplos. Algunas herram ientas en
línea que pueden ayudarnos a agregar los prefijos de proveedor apropiados a nuestro código son:
h t t p :/ / p r e f i xmycss. con/
h ttp : //c ss p re fix e r.a p p sp o t.c o m /
Tam bién hay varios sitios q u e listan b s funciones de C SS3 y H T M L 5 soportadas en cada u n o de los p rin ­
cipales navegadores, incluyendo:
h t t p : / / c a n i u s e . com/
h ttp ://f in d m e b y 1 p .c o m /litm u s /
5.7
Gradientes radiales
Los g rad ien tes ra d ia le sso n similares a los lineales, sólo que el color cam bia en form a gradual d e u n punto in ­
terno (el inicio) hacia u n c í r a í lo exterior {c\fin a l) (figura 5.6). E n este ejem plo, la p ro p ie d a d r a d i a l -g ra d ie n t
(líneas l ú a 18) tiene tres valores. El prim ero es b posición del inicio del gradiente radial; en este caso, el centro
152
Capitulo 5
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte 2
(c e n te r ) del rectángulo. O tros posibles valores para la posición son: to p . botto® , l e f t y r i g h t . El segundo
valor es el color inicial (y ello w ) y el tercero es el colorfin a l (red). El efecto resultantees una caja con un centro
am arillo que cam bia en form a gradual a rojo en u n círculo alrededor de la posición inicial. En este caso observe
que, adem ás de los prefijos de proveedor, la sintaxis del gradiente es idéntica para los navegadores W ebKit,
Mozilla y el r a d i a l - g r a d i e n t estándar de CSS3.
1 <!DOCTYPE ht®l>
2
3
4
3
6
7
•
9
10
11
12
13
14
13
16
17
18
19
20
21
22
23
24
23
Fig. 5 . 6 : g r a d i e n t e r a d i a l . ht»l
< ! - - G radientes r a d i a l e s en CSS3. —>
<htnl>
<1--
<head>
<meta c h a r s e t ■ " u t f - 8 ”>
< title > G ra d ie n te r a d i a l < / t i t l e >
< sty le type = “t e x t / e s s ”»
div
{
width: 200px;
height: 200px;
paddlng: Spx;
t e x t - a l i g n : ce n ter;
background: - w e b k 1 t- r a d ia l- g r a d 1 e n t(c e n te r . yellow, red );
background: -m o z -ra d ia l-g ra d ie n tC ce n te r, yellow, red );
background: r a d 1 a l - g r a d i e n t ( c e n t e r ,yellow.
red );
)
</style>
</head>
<body>
<d1vxh2>Gradiente radial</h2></d1v>
</body>
</html>
lw » H i
/ Q O n ü .o v , ,*dul
C
ü file7//X7«)wplos/cdp05/f»g05.06/grddien!erAdidl.html
$¿t*c«W
9«
r.d
o
t
El gradiente radial
empieza con
y ello w en el
centro y después
cambia a red
n \
W
tbS
b
c
#
G radiente radial
en un círculo, a
medida que avanza
naoa los bordes de
la caja
Figura 5 .6 | Gadientes radiales en CSS3.
Q l»wp«it#do d*
,
M
5
5.8
5.8
(Opcional: W ebKit solamente) Trazo de texto
153
(Opcional: W ebKit solamente) Trazo de texto
La p ro p ie d ad -webkl t - t e x t - s t r o k e es una propiedad no estándar para navegadores basados en W ebKit, la
cual nos perm ite agregar un contorno (trazo de texto) alrededor del texto. C uatro de los siete navegadores que
utilizamos en este libro se basan en W ebKit: Safari y C h ro m e en equipos de escritorio y los navegadores móviles
en ¡OS y A ndroid. En la actualidad, la especificación C SS3 está en evolución y no es probable que esta propie­
dad aparezca com o p arte del estándar a corto plazo. Sin em bargo, ya que W ebK it tiende a estar en la delantera,
es posible que esta función se agregue después.
La línea 12 en la figura 5.7 establece el color del texto de h l a LlghtCyan. Agregamos u n elem ento — web k i t - t e x t - s t r o k e con dos valores (línea 13): el grosor del contorno (2px) y el color del trazo de texto (black).
Aquí usam os el valor de 500% para f o n t - s l z e , de m odo q u e se pueda ver m ejor el co n to rn o . Este efecto no
estándar puede im plem entarse para un trazo de un solo pixel (con un poco más de esfuerzo) si usam os sólo
CSS3, com o se m uestra en h ttp :/ /c s s - t r ic k s .c o m /7 4 0 5 - a d d i n g - s t r o k e - t o - w e b - te x t/.
1
<!D0CTYPE html>
2
3
4
3
< ! - - F1g. 5.7: tr a z o te x to .h tm l -->
<1— T razo de te x to en CSS3. —>
<html >
6
7
8
9
10
<head>
<*eta charset ■ “u tf-8">
<t1tle>Trazo de te x to < / t1 tle >
< style type ■ * 'te x t/ c s s M>
hl
11
{
12
c o lo r : U g h tcy a n ;
-w e b k lt-te x t-stro k e : 2px black; / * p r e f i j o de p ro v eed o r
f o n t - s lz e : 500%; / * aum enta e l tamaflo de l a fu e n te •/
13
14
15
)
16
17
18
19
</style>
</head>
<body>
20
21
</body>
</html>
<hl>Trazo de texto</hl>
[> T.KCMMM
C
v_
D IMe///Xy«jemp*o»/c*p05/fig05.07/tr«zotextoiwni
S*o* tug«rtot
^
£¡
=
tfi'rt SAcetMtc'y Q Impertió
c o l o r es
1 ighteyan
tex t-stro k e
es 2px b lack
Figura 5 .7 | Un elemento te x t-s tro k e desplegado en Chrome.
5.9
Múltiples imágenes de fondo
CSS3 nos perm ite agregar m ú ltip le s im ág en es d e fo n d o a un elem ento (figura 5.8). El estilo en las líneas 10 a
16 empieza p o r agregar dos elem entos background-im ages: lo g o .p n g y océano, png (línea 12). A continuación
154
Capitulo 5
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte 2
especificamos la colocación de cada im agen m ediante el uso de la propiedad background-position (linea 13).
La lista de valores separados por comas coincide con el orden de la lista de imágenes separadas por comas en la
propiedad background-image. El prim er valor (bottom r i g h t ) coloca la prim era im agen logo, png en la esqui­
na inferior derecha del fondo en el border-box. El últim o valor (100% c e n te r ) centra to d a la segunda imagen
(océano. png) en el elem ento content-box de m odo que aparezca detrás del contenido y se estire para Uenar el
elem ento content-box. La propiedad b a c k g ro u n d -o rig in (linca 14) determ ina en d ó n d e se debe colocar cada
imagen m ediante el uso del modelo de cajas que describim os en la figura 4.13. La prim era imagen (logo.png)
es el elem ento border-box más exterior y la segunda im agen (ocean. png) está en el elem ento content-box más
interno.
1
<!D0CTYPE html»
2
3
4
5
6
7
8
•
10
11
<!— Fig. 5.8: m ultiplesfondos.htm l —>
< 1 -- M últiples Imágenes de fondo en C SS3 . -->
<htm1>
<head>
<meta c h a rs e t = Mu tf-8 " >
<t1tle>M últ1ples fondos</t1tle>
< style type = "text/css">
d1v.fondo
{
12
13
14
13
16
17
}
d1v.contenido
!•
{
background-1mage: u r l ( l o g o . p n g ) , u r l(o c é a n o .p n g );
background-position: bottom r i g h t . 100% ce n ter;
background-orlgln: border-box, content-box;
background-repeat: n o -re p e a t, repeat;
19
20
21
22
23
24
23
26
27
28
29
30
31
32
33
34
33
36
37
38
39
40
padding: lOpx ISpx;
color: trfilte;
f o n t-s lz e : 150%;
}
</style>
</head>
<body>
<d1v c l a s s = "fondo"»
<d1v c l a s s = "contenido"»
<p»De1tel & A sso c ia te s, Inc. e s una empresa reconocida a n iv e l mundial,
dedicada a l entrenam iento c o rp o ra tiv o y l a creación de contenido.
La empresa o fre ce cursos Impartidos por i n s t r u c t o r e s en lo s s i t i o s de lo s
c l i e n t e s en todo e l mundo sobre len gu ajes de programaci«oacute;n yo tr o s temas
de software como C-m-, Visual C++<sup»®</sup>, C, Java™,
C#<sup>®</sup>, Visual Bas1c<sup>Areg;</sup>,
0bject1ve-C<sup>Areg;</sup>, XML<sup>Areg;</sup>.
Python<sup>®</sup», Ja v a S c rip t, tecno lo g& iacu te¡a de o b je to s ,
programación en I n t e r n e t y Web, y d e s a r r o llo de a p lic ac io n e s
para Android y iPhone.</p>
</d1v»</d1v>
</body>
</html»
Figura 5 .8 | Múltiples imágenes de fondo en CSS3 (parte I de 2)
5.10
M utoptcs
C
Vt.os
"003
*
(Opcional: W ebKit solamente) Reflejos
y
ü Íiley//xye)«fnpios/cap05/r»g05.08/müliiplesfofxk)shimí
vVtb Stet Gal«ry C j knpotUáe oc tecn u .
D citcl & A ssociates. Inc. es una em presa reconocida a nivel
mundial, dedicarla al entrenam iento corporativo y la creación
de contenido. L a em presa ofrece cursos im partidos por
instructores en los sitios de los d ie n te s en todo cl m undo
sobre lenguajes de program ación y otros tem as de softw are
com o
155
Visual C++®, C. Java™ . C#®, Visual Basic*-',
O bjccfivc-C ^.X M L ® , Python'*’, JavaScript, tecnología de
objetos, program ación en Internet y W eb, y desarrollo de
aplicaciones p ara A ndroid y íPhone.
.
^ ^
ü segura imagen
(océano, png) se
centra detrás del
contenido y se estira
según sea necesario
para llenar el fondo
la primera imagen
(logo.png) se
— coloca a la derecha
infenorsin «petición
Figura 5 .8 | Múltiples imágenes de fondo en CSS3 (parte 2 de 2).
5.10
(Opcional: W ebKit solamente) Reflejos
La figura 5-9 m uestra cóm o agregar un reflejo sim ple de una imagen m ediante el uso de la p ro p ie d a d -w e b k ltb o x - r e f le c t (líneas 13 a 1 7 y 20 a 23). Al igual que — w e b k it- te x t- s tr o k e .é s ta e s una propiedad no estándar
que sólo está disponible en navegadores basados en W ebK it por ahora, pero es u n efecto elegante que queríam os
mostrarle.
El prim er valor de la propiedad — w e b k it- b o x - r e f le c t es la dirección del reflejo; en este caso, below (lí­
nea 13) o r i g h t (línea 20). El valor de la dirección puede ser above, below, l e f t o r i g h t. El segundo valor es
cl o f f s e t (desplazam iento), q u e determ ina cl espacio entre la imagen y su reflejo.En este ejem plo cl valor de
O ffs e t es Spx, por lo que hay un pequeño espacio entre la im agen y su reflejo. D e m anera opcional podem os
especificar un gradiente para aplicarlo al reflejo. El gradiente en las líneas 14 a 16 provoca que el reflejo inferior
se desvanezca de arriba hacia abajo. El gradiente en las líneas 21 a 23 provoca q u e el reflejo derecho se desvanez­
ca de izquierda a derecha. Los efectos de reflejo que se m uestran aquí pueden lograrse m ediante el uso de CSS3
puro, sólo que se requiere m ucho más código. Para ver un ejem plo, visite h ttp ://v w v w .x h tm l-la b .c o m /c ss/
c r e a te r e f le c ti o n - e f f e c t - u s 1 n g - c s s 3 .
1 < IDOCTYPE htnl>
2
3 < ! - - Fig. S.9: r e f le jo .h tm l -->
4 <1— R eflejo s en CSS3. -->
3 <html>
6
<head>
7
c r e ta c h a r s e t ■ *'utf-8">
8
9
< t1 tle > R e f le jo < / title >
c s t y l e type = “t e x t /c s s " >
Figura 5 .9 | Reflejos en CSS3 (parte I de 2)
156
Capítulo 5
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte 2
0
1
img { n a r g in - r ig h t: 30px; }
img.below
2
{
3
4
3
6
-w e b k it-b o x -re fle c t: below Spx
-w ebkit-gradiente
l i n e a r , l e f t to p , l e f t bottom,
f r o m (tr a n s p a r e n t), t o ( w h i t e ) ) ;
7
8
9
20
21
22
23
24
23
26
27
28
29
30
31
32
33
)
im g.right
{
-w e b k it-b o x -re fle c t: r i g h t 5px
-w ebk it-grad 1ent(
l i n e a r , r i g h t top, l e f t top,
f r o m (tr a n s p a r e n t), to (» » h ite));
}
</style>
</head>
<body>
<img c l a s s = ubeloNNs r c = "jhtp.png" width = “ 138" h e ig h t = "180"
a l t - "Portada del l i b r o lava How to Progra*">
<img c l a s s = " r i g h t" s r c = "jhtp.png" width = "138" h e ig h t = "180"
a l t = "Portada del l i b r o lav a How to Program">
</body>
</html>
C*: Pc-kio
C
| *)
-■ ¿ m m
*'
2 file7//Xyejemo!os/cap05/fig05.09/reflejohtmjpB #
iuQ tuáC '. Q VJtk Sí<c Gofkr> Q
E
de !nt€in ..
teflejo vertical
Figura 5 .9 | Reflejos en CSS3 (parte 2 de 2).
5.11
Bordes de imágenes
La propiedad border-1mage usa imágenes para colocar un borde alrededor de cualquier elem ento a nivel de
bloque (figura 5.10). En la línea 12 establecemos la propiedad border-width de un elem ento d iv en 30px,
5.11
Bordes de imágenes
157
que es el grosor del borde que colocamos alrededor del elem ento. A continuación especificamos u n a anchura
(w idth) de 234px, que es la anchura de todo el borde rectangular (línea 13).
Estirar el borde de una imagen
En este ejem plo creamos dos estilos de bordes de imágenes. En el prim ero (lincas 16 a 22) estiram os (y por ende,
distorsionam os) los Lados de la imagen para ajustarla alrededor del elem ento, dejando las esquinas de la imagen
del borde sin cambios (no se estiran). La propiedad b o rd er-im ag e tiene seis valores (líneas 18 a 21):
• b o rd e r-im a g e -so u rc e : el U RL de la imagen a usar en el borde (en este caso, u r l (b o rd e , png)).
1 < IDOCTYPE html»
2
3 <1— F ig . 5.10: bordeim agen.htm l -->
4 < !— E s t i r a r y r e p e t i r una imagen p a ra c r e a r un b o rd e . -->
3 <htal>
6
<head>
7
<meta c h a rs e t = “u tf-8">
•
<t1tle>Borde de imagen</t1tle>
9
< sty le type ■ " t e x t / c **">
10
d1v
U
{
12
13
14
•5
16
«7
18
19
20
21
22
23
24
23
26
27
28
29
30
31
32
33
34
33
36
37
38
border-width: 30px;
width: 234px;
padding: 20px 20px;
}
#stretch
{
-webk1t-border-1nage: u rl(b o rd e .p n g ) 80 80 80 80 s tr e tc h ;
-moz-border-image: url (borde.png) 80 80 80 80 s tr e tc h ;
-o-border-1mage: u r l(b o r d e .p n g ) 80 80 80 80 s tr e tc h ;
border-image: u r l(b o rd e .p n g ) 80 80 80 80 s tr e tc h ;
)
«repeat
{
-w ebkit-border-inage: u rl(b o rd e .p n g ) 34* 34% repeat;
-moz-border-image: u r l(b o rd e .p n g ) 34% 34% repeat;
-o-border-image: u r l(b o r d e .p n g ) 34% 34% repeat;
border-im age: u r l(b o rd e .p n g ) 34% 34% repeat;
}
</style>
</head>
<body>
<h2>Bordes de imagen</h2>
<1«g src ■ “borde.png" a l t ■ "Imagen u t i l i z a d a para demostrar l o s bordes"»
<p><d1v 1d ■ "stretch">Se e s t i r a el borde de l a imagen</d1v></p>
<p><d1v 1d = “repeat">Se r e p i t e el borde de l a 1magen</divx/p>
</body>
</htrnl»
Figura 5 .I 0 | Estirar y repetir una imagen para crear un borde (parte I de 2).
158
Capítulo 5
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte 2
C
5
S 't'os s u je ta o s
fil«-//Ay«j<mplos/cíp05/tio05.10/bortJeimjg«n.himl
S *< « O trtcri
^
%
=
1 Im p o rt»o e <J« lr tttr ,
B o rd e s d e im a g e n
hugen original
utilizada para crear
el boide de imagen
la s esquinas déla
imagen permanecen
sin cambios pero se
estiran los cuatro
lados de la imagen
la s esquinas de la
imagen permanecen
repiten los cuatro
lados de la imagen
Figura 5.10 j Estirar y repetir una imagen para crear un borde (parte 7 de ?).
•
b o rd e r- 1 m a g o -slic e : se expresa con cuatro valores separados por espacios en píxeles (en este caso,
80 80 80 80). Estos valores son los desplazamientos internos desde los lados superior, derecho, inferior
e izquierdo de la imagen. Como nuestra imagen original es cuadrada, usamos el mismo valor para
cada uno. E l elemento border-im age-sUce divide la imagen en nueve regiones: cuatro esquinas,
cuatro lados y una parte media, que es transparente a menos que se especifique lo contrario. Estas re­
giones pueden traslaparse. Si usa valores mayores que el tamaño actual de la imagen, los valores
de border-image-si i ce se interpretarán como 10056. N o es posible usar valores negativos. Podríamos
expresar b o rd er-im ag e-slice en dos valores (80 80), en cuyo caso el primer valor representaría
los lados superior e inferior, y el segundo valor representaría los lados izquierdo y derecho. Los valo­
res de border-image-si ic e también pueden expresarse en porcentajes, lo cual demostraremos en la
segunda parte de este ejemplo.
• b o rd e r-im a g e -re p e a t: especifica la forma en que se ajustará la escala de imagen del borde y si se va a
colocar en mosaico (repetida). Al indicar stretch sólo una vez, creamos un borde que estirará las regio­
nes superior, derecha, inferior e izquierda para ajustarse al área. Podemos especificar dos valores para la
propiedad border-Image-repeat. Por ejemplo, si especificamos stretch repeat, se estirarían las regio­
nes superior c inferior del borde de imagen y se repetirían las regiones derecha c izquierda del borde (es
5.12
Animación: selectores
159
decir, se colocarían en mosaico) para ajustarse al área. O tros valores posibles para la propiedad b o rd e rIm a g e -re p e a t son round y space. Si especificamos round, las regiones se repiten usando sólo mosaicos
com pletos y se ajusta la escala de la imagen del borde para llenar el área. Si especificamos space, las
regiones se repiten para llenar el área usando sólo mosaicos com pletos y cualquier espacio sobrante se
distribuye de m anera uniform e alrededor de los mosaicos.
Repetición de un borde de imagen
En Las líneas 23 a 29 creamos u n borde de imagen al repetir b s regiones para aju starb s al espacio. La propiedad
bo rd er-im ag e incluye tres valores:
• b o rd er-1 m ag e-so u rce: el U RL de b imagen a u sa re n el borde [de nuevo, u r l (b o rd e , p n g )).
■ b o rd e r-im a g e -s l Ice: en este caso proporcionam os dos valores expresados en porcentajes (34 * 34*) para
b s regiones superior/inferior e izquierda/derecha, respectivam ente.
• b o rd e r-lm a g e -re p e a t: el valor re p e a t especifica q u e los mosaicos deben repetirse para ajustarse al área
m ediante el uso de mosaicos parciales para llenar el espacio sobrante.
Rira obtener inform ación adicional sobre b propiedad b o rd er-lm ag e, visite
http://www.w3.Org/TR/2002/liO-C5s3-border-20021107/#the-border-image-ur1:
5.12
Animación: selectores
En la figura 5.11 creamos u n a animación sim ple de una im agen que se mueve en un patrón de diam antes a
medida que cam bia su opacidad.
I
<!D0CTYPE htnl>
< ! - - Flg. 5.11: animacion.html —>
<1— Animación en CSS3. —>
<ht*l>
<head>
<»eta c h a rs e t = "utf-S"»
<t1tle>Animación</t1tle>
< style type - Mte x t/c s s " >
1ng
p o sitio n : r e la ti v e ;
-webk1t-an1mat1on: nov1ng1mage l i n e a r lOs l s 2 a l t é r n a t e ;
-moz-an1mat1on: novlnglmage l i n e a r lOs l s 2 a l t é r n a t e ;
a n ln a tlo n : novlnglmage l i n e a r lOs l s 2 a l t é r n a t e ;
)
0)-webkit-keyfranes movlnglmage
{
0*
{ o p a d ty : 0; l e f t : 50px; top: Opx;}
Figura 5 .11 | Animación en CSS3. Las lineas punteadas muestran la oita del diamante que sigue la imagen (parte l de 2).
160
Capítulo 5
25%
50%
75%
100%
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
3»
40
41
42
43
45
46
47
48
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte 2
{opacity:
{opacity:
{opacity:
{opacity:
1;
0;
1;
0;
le ft:
le ft:
le ft:
le ft:
Opx; top: SOpx;}
SOpx; top: lOOpx;}
lOOpx; top: SOpx;}
SOpx; top: Opx;}
>
C-noz-keyf raines movíngimage
{
0%
25%
50%
75%
100%
{opacity:
{opacity:
{opacity:
{opacity:
{opacity:
0;
1;
0;
1;
0;
le ft:
le ft:
le ft:
le ft:
left:
SOpx; top: Opx;}
Opx; top: SOpx;}
SOpx; top: lOOpx;}
lOOpx; top: SOpx;}
SOpx; top: Opx;}
}
Okeyfri
s movlngimage
{
0%
25%
50%
75%
100%
{opacity: 0;
{opacity: 1;
{opacity: 0;
{opacity: 1;
{opacity: O;
left:
left:
le ft:
left:
left:
SOpx; top: Opx;}
Opx; top: SOpx;}
SOpx; top: lOOpx;}
lOOpx; top: SOpx;}
SOpx; top: Opx;}
}
</style>
</head>
<body>
<1ng src * "jhtp.pn g" width > "138" h e lg h t = “ISO1
a l t = "Portada del l i b r o Java How to Progra*">
<d1v></d1v>
</body>
</html>
la animación empieza y
termina en la parte superior
del dam ante. y la imagen se
mueve en duecdón contraria
a las maneollas del reloj en
un principio. Cuando la
animación llega a la parte
ajpenor del diamante, imoerte
su dirección y continúa en
sentido de las manecillas del
reloj. La ammaoón termina
cuando la imagen llega a la
parte sipenor del damante
por segunda vez.
Java
K
\
✓
\
/
>
\
/
/
>
/
s
\
\
\
\
s
\
s
\
\
\
\
'
N.
V
N
\
\
N
\
/
V /
v
N
\
/
/
/
/
/
/
/
/
/
/
/
/
/
/
/
/
/
Figura 5 .1 1 | Animación en CSS3. las lineas punteadas muestran la ruta del diamante que sigue la imagen (parte 2 de 2).
5.12
Animación: selectores
161
P ropiedad a n i m a t i o n
La p ro p ie d a d a n im a tio n (líneas 13 a 15) nos perm ite representar varias propiedades de anim ación en notación
abreviada en vez de especificarlas por separado, com o en:
anim ation-nam e: movinglmage;
a n im a tio n - tim in g - f u n c tio n : l i n e a r ;
a n im a tio n -d u ra tio n : lO s;
a n im a tio n -d e la y : l s ;
a n im a ti o n - it e r a ti o n - c o u n t: 2;
a n im a tio n - d ir e c tio n : a l t é r n a t e ;
En la notación abreviada. los valores se listan en el siguiente orden:
• an im atio n -n an e: representa el nom bre de la anim ación (imagenMovimiento). Este nom bre asocia la
anim ación con los cuadros clave q u e definen diversas propiedades del elem ento que se va a anim ar en
distintas etapas de la anim ación. En breve hablaremos sobre los cuadros clave.
• a n im a tio n - tin ln g - f u n c tio n (líneas 13 a 15): determ ina cóm o progresa la anim ación en un ciclo de
su duración. Los valores posibles son: l i n e a r , e a se , e a s e - in , e a s e - o u t, e a s e - in - o u t, c u b ic - b e z ie r .
El valor l i n e a r , que usam os en este ejem plo, especifica que la anim ación debe moverse a la misma
velocidad de principio a fin. El valor predeterm inado (ease) empieza con lentitud, aum enta la velo­
cidad y d esp u és te rm in a c o n le n titu d . El valor e a s e - i n em p ieza con le n titu d y lu eg o a u m e n ta
b v elo cid ad , m ientras que el valor e a s e - o u t em pieza con m is rapidez y luego reduce la velocidad.
El valor e a s e - in - o u t empieza y term ina con lentitud. Por últim o, el valor c u b ic -b e 2 i e r nos perm ite
personalizar la (unción de sincronización con cuatro valores entre 0 y l.c o m o c u b i c - b e z i e r ( l , 0 ,0 ,1 ).
• anination-duration: especifica el tiem po en segundos (s) o milisegundos (ms) que tarda b anim ación
en com pletar una iteración (en este caso, lOs). La duración predeterm inada es 0.
• anination-delay: especificad núm ero de segundos (en este caso, l s ) o m ilisegundos después de que se
carga la página y antes de que inicie b anim ación. El valor predeterm inado es 0. Si a n im a tio n -d e la y es
negativo, com o -3 s , la anim ación empezará tres segundos después de entrado su ciclo.
• a n im a tio n -1 te ra tio n - c o u n t: especifica el núm ero de veces q u e se ejecutará b anim ación. El valor pre­
determ inado es 1. Puede usar el valor i n f i n i t e para repetir b anim ación en form a conrinua.
• animation-direction: especifica la dirección en b que se ejecutará b anim ación. El valor a l t é r n a t e
que se usa aquí especifica q u e b anim ación se ejecutará en direcciones alternantes; en este caso, en senti­
do contrario a b s m anccilbs del reloj (según lo definido con nuestros cuadros dave) y luego en sentido
de las manecillas del reloj. El valor predeterm inado normal ejecuta la anim ación en b m ism a dirección
para cada cido.
No es posible usar la propiedad an im atio n abreviada con la propiedad animatlon-play-state: debe
especificarse por separado. Si no incluye a n im a tio n - p la y - s ta te , q u e especifica si la anim ación está en pausa
(paused) o en ejecución (runningX se aplica el valor predeterm inado de running.
La regla Q k e y fr a m e s y los selectores
Para el elem ento que se va a animar, la regia Okey frames (líneas 17, 25 y 33) define b s propiedades del elem en­
to que cam biarán d u ra n te la anim ación, b s valores a los q u e cam biarán esas propiedades y cu án d o lo harán.
162
Capitulo 5
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte 2
La regla Okeyframes va seguida del nom bre de la anim ación (imagenMovimi e n to ) a la que se aplican los cuadros
clave. Las reglas de CSS consisten en u n o o más selectores seguidos de un b lo q u e de d e c la ra c io n e s encerrado
entre llaves ({}). Los selectores nos perm iten aplicar estilos a los elem entos d e un tip o o atrib u to específico.
U n bloque de declaraciones consiste en una o más declaraciones, cada una de las cuales incluye el nom bre de
la propiedad seguido de dos puntos ( :) , un valor y u n signo de p u n to y com a (;). Podemos incluir m últiples
declaraciones en un bloque de declaraciones. Por ejem plo, considere la línea 19:
0% { o p a d ty : 0; l e f t : SOpx; to p Opx;}.
El selector 0% va seguido de un bloque de declaraciones con tres declaraciones: o p a c ity , l e f t y r ig h t.
E n este ejem plo, la regla Okeyframes incluye cinco selectores para representar los puntos en el tiem po para
nuestra anim ación. Recuerde que nuestra anim ación tardará 10 segundos (lOs en las líneas 13 a 15) para com ­
pletarse. En esc contexto, 0% indica el com ienzo de un solo ciclo de anim ación, 25% represenra 2.5 segundos
después de iniciada la anim ación, 50% representa 5 segundos después de iniciada la anim ación, 75% representa
7.5 segundos después de iniciada la anim ación y 100% representa el final de un solo ciclo d e anim ación. Es posi­
ble descom poner la anim ación en cantos puntos com o desee. En cada punto especificamos la opacidad (o p a c ity )
de b imagen y su posición en píxcles a partir de b izquierda ( l e f t ) y d e b región superior (top). C om enzam os
y term inam os b anim ación en el m ism o p u n to ( le f t : SOpx; to p : Opx;) para crear un patrón de diam ante, a lo
largo del cual se mueve b imagen.
5.13
Transiciones y transformaciones
C o n b s tra n sic io n e s de C SS3 es posible cam biar el estilo d e un elem enro después de una duración especificada;
por ejem plo, podem os variar Li opacidad de u n elem ento desde opaco hasta transparente en el transcurso de
un segundo. Las tran sfo rm acio n es de CSS3 nos perm iten mover, girar, escalar c inclinar elementos. Además
podem os hacer que las transiciones y b s transform aciones ocurran al m ism o tiem po, para hacer cosas com o
aum entar el tam año de los objetos y cam biar su color a b vez. Observe que b s transiciones son sim ibres en
concepto a b s anim aciones (sección 5.12), pero b s transiciones nos perm iten especificar sólo los valores inicial
y final de bs propiedades de CSS que se van a modificar. Los kcyframes (cuadros dave) de una anim ación nos
perm iten co n rro b r los csrados interm edios a lo b rg o de b duración de una anim ación.
5.13.1 Las propiedades tra n sitio n y transforra
La figura 5.12 usa las p ro p ie d a d e s t r a n s i t i o n y tra n sfo rm para ajustar b escab de una imagen y g ira rb 360
grados cuando el cursor pasa sobre clb. Com enzam os por definir la propiedad t r a n s i t i o n (línea 16). Para cada
propiedad que vaya a cam biar, la propiedad de transición especifica la duración de ese cam bio. En este caso in­
dicam os que una transform ación (tra n sfo rm , que veremos en breve) tardará cuatro segundos, pero podríam os
especificar una lista separada por comas de nom bres de propiedades q u e cam biarán y las duraciones individuales
sobre b s que cam biará cada propiedad. Por ejemplo:
t r a n s i t i o n : tra n sfo rm 4 s , o p a c ity 2s;
indica que tra n s fo rm rarda cuatro segundos en aplicarse y o p a c ity cam bia a lo brgo d e dos segundos; así, la
transform ación continuará durante otros dos segundos después de que o p a d t y cam bie por com pleto. En este
ejem plo definim os tra n s fo rm sólo cuando el usuario pasa el ratón sobre b imagen.
5.13
I
Transiciones y transformaciones
163
<! DOCTYPE ht«il>
<1-- Fig. 5.12: tra n s1c io n e s.h tm l -->
< 1-- T ransiciones en CSS3. —>
<h ta l >
<head>
-ateta c h a rs e t • '‘u tf-8">
< title > T ra n si c io n e s< /ti tle>
< sty le type = " te x t/c s s" >
1ng
{
margin: 80p x ;
- w e b k it- tr a n s í tion: -w ebklt-transform 4s;
- n o z - tr a n s itio n : -moz-transform 4s;
- o - tr a n s it 1 o n : -o -tra n sfo rm 4s;
t r a n s i t i o n : transform 4s;
}
1ng:hover
20
21
22
23
24
23
26
27
23
29
30
31
-webklt-transform : r o ta te (3 6 0 d e g ) s c a l e ( 2 , 2);
-moz-transform: r o ta te (3 6 0 d e g ) s c a l e ( 2 , 2);
- o -tr a n s fo r m : r o ta te (3 6 0 d e g ) s c a l e ( 2 , 2 );
transform: r o ta te (3 6 0 d e g ) s c a l e ( 2 , 2 );
>
< /style>
</head>
<body>
<1mg src = "cpphtp.png" wldth - M76M h e ig h t * “lOO"
a l t = "Portada del l i b r o C++ Ho*» to Progra«r>
</body>
</htnl>
b)
c)
d)
F igura 5 .1 2 | Transiciones de una imagen en el transcurso de cuatro segundos y además se aplican transforma­
ciones r o t a t e y scale.
La subclase :hover (lincas 18 a 24) anteriorm ente sólo funcionaba para elem entos de ancla, pero ahora
funciona con cuaUjuitr elem ento. En este ejem plo usamos : hover para com enzar el giro y el ajuste de escala de
h imagen. La propiedad transform (línea 23) especifica que la imagen girará 360 grados (360deg) y aum entará
su escala al doble de su anchura y altura originales al pasar el ratón sobre la imagen. La propiedad transform
usa funciones de transform ación com o r o t a t e y s c a le para realizar las transform aciones. La función de
164
Capítulo 5
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte 2
transform ación r o t a t e recibe el núm ero de grados. Los valores negativos hacen que el elem ento gire a la iz­
quierda. Un valor de 720deg provocaría que el elem ento girara dos veces en sentido de las manecillas del reloj.
La función de transform ación se a le especifica cóm o aum entar La escala de la anchura y la altura. El valor 1
representa la anchura o altura original, por b que v ab res mayores de 1 aum entan el tam año y v ab res menores
que 1 reducen el tam año. En el siguiente sitio encontrará una lista com pleta de funciones de transform ación
d e CSS3:
www.w3.org/TR/css3-2d-transforms/#transfonn-funct1ons
5.13.2 Inclinación
Las transform aciones de CSS3 tam bién nos perm iten in c lin a r b s elem entos a nivel de b b q u e , para distorsion a rb s a un á n g u b horizontal (skewX) o vertical (skewY). En el siguiente e je m p b usamos las propiedades a n im ation y tra n s fo rm para inclinar un elem ento (un rcctán g u b y texto) 45 grados en sentido horizontal (figura
5.13). Prim ero cream os un rectán g u b con un fondo L ightG reen, u n borde OarkGreen y esquinas redondeadas.
La propiedad an lm atio n (líneas 21 a 23) especifica que el elem ento se inclinará en u n in te rv a b de tres segun­
dos (3s) con una duración infinita ( i n f i n i t e ) . El cuarto v a b r ( l i n e a r ) es la propiedad a n im a tio n -tim in g fu n c tlo n .
1
<!DOCTYPE html>
2
3
4
3
6
7
8
9
<1— F1g. 5 . 1 3 : 1 n c l i n a r . h t m l — >
< ! - - E le m e n to s de i n c l i n a c i ó n y de t r a n s f o r m a c i ó n e n CSS3. -->
<html>
<head>
o te ta c h a rs e t = “Utf-8">
< t i t l e > I n c l i n a r (sk e w )< /t1 tle >
< sty le type = " te x to / c s s " >
10
11
12
13
14
13
16
17
18
19
20
21
22
23
24
23
26
27
28
29
30
31
32
.skew .te x tb o x
(
n a r g 1 n - le f t: 7Spx;
background: lig h tg re e n ;
helgh t: lOOpx;
wldth: 200px;
paddlng: 2Spx 0;
te x t- a llg n : cen ter;
f o n t-s lz e : 250%;
border: 3px s o l l d OarkGreen;
border-rad1us:l5px;
-w eb k lt-an ln atio n : skew 3s I n f i n i t e l i n e a r ;
-aoz-an1nat1on: skew 3s i n f i n i t e l i n e a r ;
an ln atlon : skew 3 s i n f i n i t e l i n e a r ;
}
O-webkit-keyframes skew
{
skewX(Odeg); >
25% { -webkit-transform: skewX(4Sdeg) ; }
50% { -webkit-transform: skewX(O); )
75% { -webkit-transform : sk ew X (-4S d cg ) ; }
to { -w ebkit-transform : skewX(O); }
from { - w e b k it - t r a n s f o r m :
}
Figura 5 .1 3 | Dementas de inclinación y de transformación en CSS3 (parte I de 2).
5.13
33
54
33
36
37
38
39
40
41
42
43
44
43
46
47
48
49
30
51
32
33
34
33
56
Transiciones y transformaciones
165
«-moz-keyframes skew
{
from { -webkit-transform: skewX(Odeg); )
2 5 * { -webkit-transform: skewX(45deg); }
50 * { -w ebkit-transform : skewX(O); }
75 * { -w ebkit-transform : skewX(-4Sdeg); }
to { -webkit-transform : skewX(O); }
}
®-keyframes skew
{
from { -webkit-transform: skewX(Odeg); }
2 5 * { -w ebkit-transform : skewX(4Sdeg); }
50 * { -w ebkit-transform : skewX(O); )
75 * { -w ebkit-transform : skewX(-4Sdeg); }
to { -w ebkit-transform : skewX(O); }
>
< /style>
</head>
<body>
<d1v c l a s s - "box
skew">
<d1v c l a s s ="te x tb o x "> In clin ar texto</d1v>
</d1v>
</body>
</html>
a) Elemento d i v con bordes en posición
inclinada a la izqiierda.
b) Elemento d iv c o n bordes
«n posición centrada.
c) Elemento d iv c o n boidesen posción
rtán ad a a la derecha.
Inclinar
texto
A fir A a a r
A zrA ?
Figura 5.13 | Elementos de inclinación y de transformación en CSS3 (parte 2 de 2).
A continuación usamos la regla @keyframes y selectores para especificar el ángulo de la transformación skew en
distintos intervalos (lincas 25 a 48). Al desplegar la página, el elem ento no está indinado (Odeg; líneas 2 7 ,3 5 y 43).
Después la transformación indina el elemento 45 grados (4Sdeg) a la derecha (líneas 28, 36 y 44), regresa a Odeg
(líneas 2 9 ,3 7 y 45). luego se inclina a la izquierda 45deg (líneas 3 0 ,3 8 y 46) y regresa a Odeg (líneas 3 1 ,3 9 y 47).
5.13.3 T ra n sicio n e s entre im ágenes
Tam bién podem os usar la propiedad t r a n s l t i o n para crear el herm oso efecto visual de fusionar una imagen
en o tra (figura 5.14). La propiedad t r a n s l t i o n incluye tres valores. IYimero especificamos que la transición
ocurrirá en b opacidad ( o p a d t y ) de b imagen. El segundo valor (4s) es t r a n s l t i o n - d u r a t i o n . El tercer valor
(ea se -1 n -o u t) es tra n s1t1 o n -ti» 1 n g -fu n c t1o n . Después definimos ¡hover con u n valor de o p a d t y deO, de
m odo que cuando colocam os el cursor sobre b imagen superior, su opacidad se vuelve to talm en te transparente
166
Capítulo 5
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte 2
y revela la im agen de fondo que está justo detrás de ella (líneas 22 y 23). E n las líneas 28 y 29 agregamos las
imágenes inferior y superior, colocando una justo detrás de la otra.
1
2
3
4
3
<IDOCTYPE h t* l>
<1-- Fig. 5.14: fusionarimagenes.html —>
<1-- Fusionar una imagen en o t r a mediante CSS3. -->
<html>
<head>
6
7
<meta c h a r s e t « “u tf-8 " >
<title>FusiA oacute;n de im ágenes</title>
< sty le type ■ "text/css*'>
aportada
8
9
10
11
{
12
13
14
13
16
17
18
19
20
p o s itio n : r e l a t i v e ;
margin: 0 auto;
}
aportada ing
{
p o s itio n : absolute;
le ft: 0;
- w e b k it- tr a n s itio n : opacity 4s e a s e -in -o u t;
t r a n s í t i o n : o p a c ity 4s e a s e - in - o u t;
21
22
23
24
23
26
27
28
29
30
31
32
}
aportada 1ng.top:hover
{ opac1ty:0; }
</style>
</head>
<body>
<d1v id= "portada"»
<1ng c l a s s = “bottom" s r c ="jhtp.p ng " a l t = "Portada de lava 9e">
<1»g c l a s s * "top" s r c - “jhtpS.png" a l t = "Portada de lav a 8e">
</d1v>
</body>
</html>
a)
b)
c)
Figura 5 .1 4 | Fusionar una imagen en otra mediante CSS3.
5.14
Descarga de fuentes Web y la regla @ fo n t-fa ce
M ediante el uso de la regla © fo n t-fa c e es posible especificar fuentes para una página W eb, incluso aunque no
estén instaladas en el sistem a del usuario. Podemos usar fuente.s descargables para ayudar a asegurar una aparicn-
5.14
Descarga de fuentes Web y la regla @font-face
167
d a uniform e entre los sitios cliente. En la figura 5.15 usamos la fuente W eb d e G oogle llam ada “C allig raffittf.
E ncontrará num erosas fuentes Web gratuitas de código fuente abierto en h t t p : / / * wh. g o o g le . com /w ebfonts.
Asegúrese de que las fuentes que obtenga de otras partes no tengan impedimentos legales.
I
<!DOCTYPE ht«il>
< 1-- F1g. 5.15: fu e n te s in c ru s ta d a s.h tm l -->
<1— In c ru sta c ió n de fu entes para u s a r en páginas Web. -->
<htal>
<head>
<»eta c h a rs e t ■ *'utf-8”>
< title > F u e n te s i n c r u s t a d a s < / t i t l e >
<link h re f = *h t t p : / / f o n t s . g o o g l e a p i s . c o * / c s s ? f a n i l y = C a l l i g r a f f i t t i '
r e í = ' s t y l e s h e e t ' type = ’te x t / c s s * >
< s ty le type = " te x t/ e s s " »
body
{
fon t-fam ily : " C a l l i g r a f f i t t i " ;
f o n t- s iz e : 48px;
text-shadow: 3px 3px 3px OitCrey;
}
20
21
22
23
24
23
< /style>
</head>
<body>
<div>
< b > In cru stan d o l a fu e n te Web de Google “C a l l i g r a f f i t t i ”</b>
</di v>
</body>
</h t» l >
a
i
■
C
VtMH
12) W e///X /rje a ip lo s/c d p 0 3 /f« g 0 5 _ 1 5 /fu e n ?« in c ru st*(U s.h tm l
síke 6 #lery □
p i «£»
9t
Figura 5 .15 | Incrustación de fuentes para usar en páginas Web.
Para obtener la fuente Calligraffitti de Google, vaya a h ttp ://v * * v . g o o g le. com /w ebfonts y use cl cuadro
de búsqueda en el sitio para buscar la fuente : “Calligraffittin. Podrá encontrarla m ediante el cuadro de búsqueda
en el sitio. A continuación, haga clic en Q uick-use para o b ten er el vínculo (1 ink) a la hoja de estilos que con­
tiene la regla ® fo n t-f ace. C oloque esc elem ento l i n k en la sección de encabezado de su docum ento (líneas 9 y
10). La hoja de estilos de CSS referen ciada contiene b s siguientes reglas de CSS:
168
Capítulo 5
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte 2
©media sc re e n {
© font-face {
fon t-fam ily : ' C a T H g r a f f l t t l ' ¡
f o n t - s t y l e : normal;
font-we1ght: normal;
src : l o c a l ( * C a l U g r a f f l t i ' ) i
u r l ( ‘h ttp : //th e m e s .g o o g 1 e u s e rc o n te n t.c o m /s ta tic /fo n ts /
c a l i Igraff1tt1/vl/vLVNZY-z6SrVulR7lWdvyKIZAuOcNtpCWuPSaIROIeS
.w o ff*) fo rm a t( * w f f ) ;
}
>
La regla ©media s c re e n especifica que la fuente se utilizará al desplegar el docum ento en una pantalla de
com putadora (com o vimos en la sección 4.11). La regla © fo n t-fa c e incluye fo n t-f a m ily ( C a l U g r a f f i t t l ) ,
f o n t - s t y l e (norm al) y fo n t-w eig h t(n o rm al). Puede incluir varias fuentes con diversos estilos y pesos. La regla
O fo n t-fa c e tam bién incluye la ubicación de la fuente.
5.15
Módulo de diseño de caja flexible y selectores :n th - c h i1 d
El m ó d u lo d e d iseñ o d e caja flexible (M D C F ) facilita b s procesos de alinear el contenido de las cajas, cam biar
su tam año, cam biar su orden en form a dinám ica y d istrib u ir el contenido en cualquier dirección. En el e je m p b
de la figura 5.16 creamos elem entos di v flexibles para cuatro d e nuestros tips de program ación. Al pasar el ratón
sobre uno de b s elem entos d1 v éste se expande, el texto cam bia de negro a blanco, cam bia el c o b r de fondo y
tam bién la distribución del texto.
Las líneas 48 a 66 definen un elem ento d iv al que aplicam os la clase flex b o x de C SS. Ese elem ento d iv
contiene otros cuatro d iv . La propiedad d is p la y de la clase fle x b o x se establece en el nuevo valor de CSS3
box (líneas 16 y 17). La p ro p ie d a d b o x -o r1 e n t especifica la orientación del diseño de la caja (líneas 18 y 19).
E l v a b r predeterm inado es h o r iz o n ta l (que de todas form as especificamos). T am bién podem os usar v e r t i c a l .
Para b s elem entos d1v anidados especificamos una transición t r a n s i t l o n e a s e -o u t de un segundo (líneas
23 y 24). Esto tendrá efecto cuando se aplique el e s tib de la subclase : hover (líneas 3 8 y 39) a u n o de estos
elem entos d iv para ex p an d irb .
I
<!DOCTYPE ht«il>
<!— Fig. 5.16: mdcf.html -->
<1-- Módulo de diserto de c a ja f l e x i b l e . -->
<html>
<head>
<meta c h a r s e t = " u tf- 8 " >
< title> M o d elo de d is e & n tild e ;o de c a ja f l e x i b l e < / t 1 t l e >
< H nk h r e f » , h tt p :/ /f o n ts .g o o g l e a p is .c o n / c s s ? f a m n y = f lo s a r io ‘
re í = ' s t y l e s h e e t ' ty p e = ‘t e x t / c s s ‘>
< s ty le ty p e = " te x t/c s s " >
. f 1exbox
{
width: 600px;
h e l g h t : 420px;
Figura 5 .1 6 j Módulo de diseño de caja flexible (parte I de 3)
5.15
16
17
18
19
}
21
. flexbox
22
{
63
64
63
66
67
68
169
display: -webkit-box;
d isp la y : box;
-w eb kit-bo x-o rient: h o riz o n ta l;
box-or1ent: h o riz o n ta l;
20
23
24
23
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
43
46
47
48
49
30
31
32
33
34
33
56
57
38
59
60
61
62
Módulo de diseño de caja flexible y selectores :nth-child
> d1v
-w ebk1t-trans1t1on: l s ease-out;
t r a n s i t i o n : l s e a se-o u t;
-w eb k lt-b o rd er-rad iu s: lOpx;
b o rd e r-ra d lu s: lOpx;
border: 2px s o l i d black;
width: 120px;
nargln: lOpx -lOpx lOpx Opx;
padding: 20px 20px 20px 20px;
box-shadow: lOpx lOpx lOpx dingrey;
}
.flexbox
.flexbox
.flexbox
.flexbox
> d iv :n th -c h ild (l){
> d 1 v : n th -c h 1 ld (2 ){
> d 1 v : n th -c h 1 ld (3 ){
> d i v : n t h - c h i l d (4 ) {
background-color:
background-color:
background-color:
background-color:
lig h tg re y ;
H g htgrey ;
H ghtgrey;
H ghtgrey;
}
}
}
>
.flexbox > d1v:hover {
width: 200px; c o lo r: white; font-we1ght: bold; }
.flexbox > d i v : n t h - c h 1 l d (l ): h o v e r { background-color: royalblue; )
.flexbox > d 1 v :n th -c h 1 ld (2 ): h o v e r { background-color: crlmson; }
.flexbox > d iv : n th - c h il d (3 ): h o v e r { background-color: criason; )
.flexbox > d 1 v : n th -c h 1 ld (4 ): h o v c r { background-color: darkgreen; }
p ( height: 2S0px; overflow: hidden; fo nt-fam ily : "Rosario" )
< /style>
</head>
<body>
<d1v c l a s s ■ "flexbox"»
<div»<1mg src - "CPP.png" a l t = "Icono de buena práct1ca de programació n">
<p»Las buenas práeticas de programación indican l a s técnicas que
l e ayudarán a producir programas más c la r o s ,
comprensibles y f& a a c u te ;c ile s de mantener.</p»</div»
<d1v»<i«ig s r c ■ "EPT.png" al t ■ "Icono de t1p para p re v e n ir erro re s" »
<p»Los t i p s para p re v e n ir e r r o r e s contienen sugerencias para exponer e r r o r e s
y e lim in a rlo s de sus programas; muchos describen aspectos de
programación que e v ita n que lo s e r r o r e s entren s iq u ie r a
a los programas.</p»</div»
<div»<1mg src = “CPE.png" al t = "Icono de e r r o r conún de programación">
<p»Los e r r o r e s comunes de programación se& ntilde;alan lo s e r r o r e s que cometen
lo s e s tu d ia n te s con frecuencia. Estos e r r o r e s comunes de programación reducen
l a pro bab ilid ad de que usted cometa los mismos errores.< /p»< /div»
<d1v><1mg s r c = "SEO.png" a l t - “Icono de observadA oacute;n de 1ngeniería
de software"»<p»Las observaciones
de 1ngeniería de software resaltan los asuntos de a rq u itec tu ra y diseño
que a fe c ta n en la construcción de sistemas de software,
en e sp e cia l los sistem as de gran escala.</p»</d1v>
</di v>
</body»
</html»
Figura 5 .1 6 | Módulo de diseño de caja flexible (parle 2 de 3).
170
Capítulo 5
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte 2
a) Cada elemento d1v anidado tiene un color de fondo cilio y texto negro al principio. Parte del texto
está oculto.
/ MoOF»* dn***cc*c* ■
C
^ file///Xye>en>ploi/capOS/f*gOS.16/rnócfhtmi
íuge**»C4
I
« r t U t í G # k r, Q
F 'Cj =
\m p & U ó z ó t H U m
T#
U s buenas
prácticas de
programación
indican las
técnicas que fe
ayudarán a
producir
programas más
daros.
co m p re n d e s y
fáciles de
m antener.
lo s tips para
prevenir errores
contienen
sugerencias para
exponer errores
y elim inarlos de
sus program as;
muchos
describen
aspectos de
programación
que evitan que
_____________________
Los errores
comunes de
programación
seAalan los
errores que
cometen los
estudiantes con
frecuenoa. Estos
errores comunes
de programación
reducen la
probabilidad de
• •i* •■•*•4
Las
observaciones de
ingeniería (Je
software resaltan
sos asuntos de
arquitectura y
d*seAo que
afectan en la
construcción de
sistem as de
software, en
espeoal los
4m —
b) Ganda el ratón pasa sebre : n th -ch ild (2). la caja flexible se expande, el cokx de background-
color cambia a Crfnson. el texto oculto se revela y el texw cambia a una fuente en negrita de cok* *»h1 te
C ^ *iir///X/*)cmolos/cao05/fig05.16/nw
t t c » íU9»f4d«
Q Wffe S*c« 6*t«ry Q
Las buenas
prácticas de
programación
indican las
técnicas que fe
ayudarán a
producir
programas más
daros.
com prensibles y
fáo les de
mantener.
titm i
lmp>srt«{k d# b*«m
l o s tips para p rr w n ir
e rro re s contienen
su g eren cias para eip o n er
e rro re s y elim in arlo s de
s u s program as: m uchos
d escrib en aspectos de
program ación que evitan
que lo s e rro re s entren
siq u iera a lo s program as.
Los errores
comunes de
programación
seftalan tos
erro res que
com eten los
estudiantes con
frecuencia. Estos
errores comunes
de programación
reducen (a
probabilidad de
Las
observaciones ae
ingeniería de
software resaltan
lo s asuntos de
arquitectura y
diseco que
afectan en la
construcción de
sistem as de
softw are, en
especial los
•i.
Figura 5 .1 6
<át
Módulo de diseño de caja flexible (parte 3 de 3).
Selectores :n th -ch 1 ld
E n CSS3 podem os usar selectores para seleccionar con facilidad los elem entos a los que se aplicará estilo con
base en sus atributos. Por ejem plo, podría seleccionar una de cada dos filas en una tabla y cam biar el color de
5.16
Diseño multicolumna
171
fondo a azul, p ata facilitar la lectura de la tabla. Tam bién podem os usar selectores para habilitar o deshabilitar
elem entos de entrada. En las líneas 33 a 36 usam os selectores :n t h - c h ild para seleccionar cada uno de los
cuatro elem entos div en el flexbox d iv ai que se va a aplicar un estilo. EJ estilo en la línea 33 usa d iv :n th c h l l d ( l ) para seleccionar el elem ento di v que es el primer hijo de su padre y aplica el color background-color
LightBl ue. D e m anera similar, div: nth-chi I d (2 ) selecciona el elem ento div q u e es el segundo hijo de su p a­
dre, d i v : n t h - c h i l d (3 ) seleccio n ad tercer hijo d e su padre y di v : n th - c h 1 ld (4 ) selecciona el auirto hijo de su
padre; cada uno aplica u n background-color especificado.
A continuación, b s líneas 38 a 43 definen los estilos que se aplicarán a los elem entos d iv anidados cuando
el ratón pase sobre ellos. EJ estilo en las líneas 38 y 39 establece b s propiedades w idth (200px), c o lo r (w h ite )y
fo n t-w e ig h t (bold). Luego usamos selectores : n th -c h i Id para especificar un nuevo color d e fondo para cada
elem ento di v anidado (líneas 40 a 43).
Ib r últim o, aplicamos estilo al elem ento p: el texto d en tro de cada d iv (linca 44). Especificamos una alrura
de párrafo de 250px y el valor de o v erflo w com o hldden, para ocultar el texto que no se ajuste a b alrura de
párrafo especificada. En la salida observe que el texto en el segundo elem ento hijo (los T ips para prevenir errores),
d texto o v e r f l ow está oculto. Al pasar el ratón sobre el elem ento, se reveb todo el texto. Tam bién especificamos
b focntc de Google “ R o sa rio ”, que incrustam os en nuestra hoja de esrilo (lincas 9 y 10).
Los selectores son un tem a extenso. En capítulos posteriores dem ostrarem os funciones adicionales de los
selectores de CSS3. Para aprender más sobre sus poderosas capacidades, visite:
http://w w w .w 3.org/TR /css3-selectors/
5.16
Diseño multicolumna
CSS3 nos perm ite crear diseños m ulticolum na oon facilidad. En la figura 5.17 creamos un diseño de tres co­
lum nas al establecer b propiedad column-count en 3 (líneas 15 a 18) y b propiedad colum -gap (el espacio
entre colum nas) en 30px (líneas 20 a 23). Después agregamos una línea negra delgada entre cada colum na m e­
diante el uso de b propiedad coliw m -rule (líneas 25 a 28). C uando ejecute este ejemplo, pruebe a cam biar el
tam año de b ventana de su navegador. O bservará que la anchura de bs colum nas cambia para ajustarse al diseño
de tres colum nas en el navegador. En b sección 5.17 le m ostrarem os cóm o usar consultas de m edios para m o ­
dificar este ejem plo d e m odo que el núm ero de colum nas varíe en form a dinám ica, con base en el tam año de b
p an talb del dispositivo o la ventana del navegador, lo cual nos perm itirá personalizar el diseño para dispositivos
enm o sm artphoncs, rablcts, notcboolcs, equipos de escritorio y más.
I
<!DOCTYPE htnl>
2
3 < ! - - Fig. 5.17: mult1columna.html -->
4 < ! - - Texto multicolumna en CSS3. —>
3 <ht«l>
6
<head>
7
<meta c h arset » **Utf-8">
8
< t1tle> V arias columnas</t1tle>
9
< sty le type = " t e x t / e s s ">
10
p
11
{ margin:0.9em Oem; >
12
.multicolumna
13
í
Figura 5 .1 7 | Texto multicolumna en CSS3 (parte I de 3).
17 2
Capítulo 5
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte 2
/ • e s ta b le c e r el número de columnas en 3 * /
-webk1t-column-count: 3;
-moz-column-count: 3;
-o-column-count: 3;
column-count: 3;
/ * e s ta b le c e r el espacio e n tr e columnas en 30px */
-webk1t-column-gap: 30px;
-noz-column-gap: 30px;
-o-column-gap: 30px;
column-gap: 30px;
/* agregar una l i n e a negra delpx e n tr e cada columna * /
-webklt-column-rule: lpx o u ts e t black;
-aoz-column-rule: lpx o u t s e t black;
-o-column-rule: lpx o u ts e t black;
column-rule: lpx o u ts e t black;
}
</style>
</hea<b
<body>
<header>
<hl>Comput a d o ra s , h a r t a r e y software<hl/>
</header>
<d1v c l a s s = "muí t i columna"»
<p>Una computadora es un d i s p o s i t i v o que puede r e a l i z a r cálculos y tomar
d e cisio n es l& oacute;gicas con mucha más rapidez que los humanos.
Muchas de l a s computadoras personales de l a a c tu a lid a d pueden r e a l i z a r m iles
de m illones de
cálculos en un segundo—más de lo que un humano puede r e a l i z a r
durante toda su vida. Las supercomputadoras ya se encuentran re a liz a n d o miles
de b ill o n e s ( t r i l l o n e s ) de in s tru c c io n e s por segundo. Para poner
esto en perspectiva, una computadora de un tri11ón de instrucciones por segundo
puede r e a l i z a r en un segundo más de 100,000
c& aacute¡lculos para cada persona en e l p la n e ta . Y—estos
"l& iacu te;m ites su p e rio res" aumentan con rapidez.</p>
<p>Las computadoras procesan datos bajo e l c o n tro l de conjuntos de
in s tru c c io n e s llamadas programas de computadora. Estos programas guían
a l a computadora por conjuntos ordenados de acciones e s p e c ific a d a s por
personas llamadas programadores de computadora. Los programas que se ejecutan en una
computadora se conocen como software. En e s t e l i b r o usted
aprenderá sobre l a metodología de programación clave de
l a a c tu a lid a d que
mejora l a productividad del programador, con l o cual se reducen lo s co sto s de
d e s a r r o llo de
software—programación o rie n ta d a a objetos.</p>
<p>Una computadora c o n s is te de d iv ersos d i s p o s i t i v o s conocidos comohardware
(p o r ejemplo: el te c la d o , p a n t a l l a , rat& oacute;n, d isc o s duros, memoria, DVD
y unidades de procesamiento). Los costos de l a s computadoras disminuyen en forma
dramática, debido a los rápidos desarrollos en las tecnologías de
hardware y software. Las computadoras que podrían haber llenado salones
extensos y c o s ta r millones de dólares hace unas décadas ahora se
inscriben en chips de s i l i c i o más chicos que una u&nt1lde;a, que cuestan
ta l vez unos cuantos dólares. Por ironía, el s i l i c i o es uno de los
m a te ria le s más abundantes&<ndash;es un in g re d ie n te en l a arena
o r d in a r i a . La tecnologí a de chips de si l i c i o ha hecho l a computación
tan económica
que hay n*aacute;s de mil millones de computadoras de propíoacute;sito general en uso
en todo el rrundo, y se espera que esta c i f r a se duplique en los próximos
Figura 5 . 17 | Texto multicolumna en CSS3 (parte 2 de 3)
5.17
67
68
69
70
71
72
73
74
73
76
77
78
79
80
81
82
Consultas de medios
173
a&nilde;os.</p>
<p>Los chips de computadora (m icroprocesadores) controlan innumerables d is p o s it iv o s .
Estos sistem as in c ru sta d o s incluyen frenos antlbloqueo en lo s au to s,
sistemas de navegación, electrodomésticos i n t e l i g e n t e s , sistemas de
seguridad en el hogar, teléfonos c e l u l a r e s y Smartphones, robots, i n t e r ­
secciones
de tr& a a c u te ;fle o i n t e l i g e n t e s , sistemas para e v i t a r c o lis io n e s , controladores de
videojuegos y más. La Inmensa mayorAiacute;a de los microprocesadores que
se producen cada a & n tild e;o se in c ru sta n en d i s p o s i t i v o s que no son computadoras
de propósito general.</p>
<footer>
<e«t>Acopy: 2012 por Pearson Education, Inc.
Todos lo s derechos reservados.</e«t>
</footer>
</d1v>
</body>
</html>
Q
V M » C6 u r r «
C
S
*
»
&
»
i+ymóot
B
_________________________________________________________________________________________________
f'*r///X/it)c<np»O5/cap057f»gD5.l7/rmilt<olum»MWml
Púr =
ii.bS
v.«G
íi^ Qlap
n
aid
id
+
1
n
e
a
m
C om putadoras, h ard w are y s o f t w a r e
t'ru computadora et un (to p o ro qoe
puede t'dvM cafcifc» y toen* «toouonrt
topeAScctk mucha mas i ap«to; qjr tos
bananos M th n de bt computado*a»
personales de U actxuklfe! pordw rafear
niie» de ntfiemes de cafados en un ttfuodo
—xcak de to que m batano puede sef e a
citante toda ra ’-vii Las
tupercomputadoras st ir encueraan
refeaodo tatos de bfeoes imicro:) de
■tsaurooor* pot \r(und; Paa pemee no
en per speema. um computadora de un
tNk*¡ de nstnsccKori pee tepad) puede
rtfe a en un softndo teas de ICO.000 de
cafado» paa cada penena en d planeta Y
—füoi ’hxutci superiores aumentan con
rapidez
Las coopoadccas procesan ditos bajo d
coouoi de conjuros de msturckrot
Lañáis: pcocraais de computadora Es oí
proparuw r* n a to cotoputadova por
CMjMM ordenados de
eipecdicadu pe* per senas Im naiis
s»0 e¿ente en b s e c a o c d u n i La
p r o p a a a d c r r s «to c o m p u ta d o ra Los
pvcpm nA s q a r s e ejecuta» en
tai
co m p u tad o ra s e conoces» c o b o s o f tw a e
e s te
Ufcrou ste d a p r e n d a a
te c o o to p a d r chips «5r t&oc* h a h e c h o to
En
so b re to
c o m p u ta » * * ta c e c o n o m í a que h r , más d e
w á a ilo n e » d e ccnfB A adoras d e p t o p o it o
y se
m e to d o to p a d e p r o p a s a d o * c li s e d e to
f e u r u f en a to r u to d o e l a u n d o .
a c tu ih d a d que tro je ra to p r o rf e u v x ia d ó ri
e s p e ra que esta c i t a le t i n q u e «o lo t
p o p a u d - r . c o n to cual s e r e d a r e n tos
p rc a im o s a m o ld e .o s
cenaos d e d e s a n c l o d e « c f t a a * —
p r o p a m o o n c ro m a d a a o b jeto s
t oa ce m p a ta d la córrase de d o m o s
Aspóse* o* c cocedor como h a . K a e pet
ejemplo el teclado p an agí ratee, d ieos
d ao s, arro o m . DVD y o n d a to de
proce saaiefco) Los costos de bs
computadora» donannen enferma
di amanea debido a tos riptttos d esaló lo s
en tos eecnotopas de h a d a s e y scttr.-ae
Las computadora que podnan haber
leñado jalone: extensos y c o sta d o n e s de
dolar» hacer unas décadas abeva se
au criben en chps de f e t o mas d a ro s que
«na uña. que cuntan u l \* i unos cuantos
dólves Por lo n a . d tto io es ano de tos
auírnato» mas abcndaite»— t t un
Los chq?s de computadora
•na.*r uptoceiadcees) cofAobn « B u n n a U n
d ap o o aro i Esaos sestemue mcrustados
■vkr.en hm c* antfcfcxpro en los autos,
trgftna; de n i\« a c * » . etortrodccnesnro:
r tr to n tf n . m in a u de sepaxiad ca el
hc<* tefc&oos cefcñae; r S m a q u e e ;
robots, ntm ecciooes de tm&ro ntripentev
interna* p ata estar cdksmes.
ccrtxobdores de vxtoofaegos y ma? La
«mema m aycm de tos níaupeornado*es
qoe se predicen coda «5o se m n u a a i en
AspoM*cs que no sea computadora» de
preposao pmeral
C 2022 par P¿¿r:oK E ducaran tnc
Teda: /oí óertebai 'icmurfoi
Figura 5 .1 7 | Texto multicolumna en CSS3 (parte 3 de 3).
5 .17
Consultas de medios
C on los tipos de medios de CSS (sección 4 .1 1) es posible variar el estilo con base en el tipo d e dispositivo en el
que se vaya a presentar la página. Los clásicos ejem plos son estilos y tam años de fuentes variables, dependien­
do de si se va a im prim ir una página o a m ostrar en u n a pantalla. Por lo general los usuarios prefieren fuentes
sans-serif en las pantallas y fuentes serif en papel. C o n las consultas de medios de CSS3, podem os determ inar los
atributos m ás finos de los m edios en los que el usuario está viendo la página, com o la longitud y anchura del área
visible en la pantalla, para personalizar m ejor su presentación.
17 4
Capitulo 5
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte 2
E n la sección 5.16 creamos una página con un diseño m ulticolum na que incluía tres colum nas de texto
y u n a linea negra delgada entre cada colum na. Sin im portar cóm o ajustáram os el tam año de la ventana del
navegador, cl texto seguía desplegándose en tres colum nas, incluso aunque éstas tuvieran que ser demasiado
estrechas. En la figura 5.18 m odificam os ese ejem plo m ulticolum na para alterar los núm eros d e colum nas y las
líneas entre éstas, con base en el tam año de pantalla del dispositivo en el que se esté viendo la página.
La regla Qaedla
La regla ©media se usa para determ inar el tip o y tamaño de dispositivo en el que se va a desplegar la página.
C uando el navegador exam ina la regla, el resultado es verdadero o fabo. Los estilos d e la regla se aplican sólo si
el resultado es verdadero. Primero usam os la regla Omedi a para determ inar si la página se va a desplegar en u n
dispositivo portátil (com o un sm artphone) con un valor de m ax-width d e 480px, o un dispositivo con una pan­
talla q u e tenga un valor de m ax-device-w idth d c 4 8 0 p x ,o en una pantalla que tenga un valor d e m ax-width de
480px (líneas 13 a 15). Si esto es verdadero, establecemos el valor de colum n-count en 1; la página se desplegará
en una sola colum na en dispositivos portátiles com o el iPhone, o en ventanas de navegador cuyo tam año se haya
ajustado a 480px o menos (lincas 17 a 19).
1
<!DOCTYPE htal>
2
3
4
3
6
<1-- Fig. 5.18: consultasmedios.html -->
<1-- Uso de c o n su lta s de medios para v o lv e r a d a r formato a una página
an chura del d i s p o s i t i v o . -->
<html>
conbase en la
<head>
7
•
9
10
11
12
13
14
15
<reta c h a r s e t « ,,u tf-8">
< t1tle>C onsultas de m edios< /title>
< sty le type = " te x t/e s s " »
p
{ margin: 0.9em Oeai; }
/ • e s t i l o s para smartphones con anchuras de p a n ta ll a de 480px o menos */
©redia handheld and (max-width: 480p x ),
screen and (max-device-width: 480px),
screen and (max-width: 480px)
16
(
17
18
19
d iv {
-webkit-column-count: 1;
column-count: 1; )
20
}
21
22
23
/ • e s t i l o s para d is p o s iti v o s con anchuras de p a n t a l l a de 481px a 1024px •/
Omedia only screen and (min-width: 481px) and
(max-width: 1024px)
24
{
23
26
27
28
29
30
31
32
d iv {
-webkit-column-count: 2;
column-count: 2;
-webkit-colurn-gap: 30px;
column-gap: 30px;
-webkit-column-rule: lpx o u ts e t black;
column-rule: lpx o u t s e t black; }
}
Figura 5 .1 8 | Uso de consultas de medios para volver a dar formato a una página con base en la anchura del
dispositivo (parte I de 4).
5.17
33
34
33
36
37
38
39
40
41
42
43
44
43
46
47
48
49
30
51
32
53
34
33
36
57
38
39
60
61
62
63
64
63
66
67
68
69
70
71
72
73
74
73
76
77
78
79
80
81
82
83
84
83
Consultas de medios
175
/ * e s t i l o s para d is p o s iti v o s con anchuras de p a n t a l l a de 1025px o mayor • /
©media only screen and (m1n-w1dth: 102Spx)
{
d iv {
-webklt-column-count: 3;
column-count: 3;
-webkit-coluim-gap: 30px;
column-gap: 30px;
-w ebk it-colun n-ru le: lpx o u t s e t black;
column-rule: lpx o u t s e t black; }
>
</style>
</head>
<body>
<header>
<hl>Computadoras, hardware y software</hl>
</header>
<div>
<p>Una computadora es un d is p o s i tiv o que puede r e a l i z a r c& aac u te¡lc u lo s y tomar
d e c isio n e s l& oacute;gicas con mucha más rapidez que lo s humanos.
Muchas de las computadoras p erson ales de l a a c tu a lid a d pueden r e a l i z a r miles
de millones de
cíaacute;lculos en un segundoSmdash;más de lo que un humano puede r e a liz a r
durante toda su vida. Las supercomputadoras ya se encuentran re alizan d o miles
de b il lo n e s ( t r i l l o n e s ) de in stru c c io n e s por segundo. Para poner
esto en perspectiva, una computadora de un trillón de instrucciones por segundo
puede r e a l i z a r en un segundo más de 100,000
c& aacute;lculos para cada persona en el p la n e ta . Ytadash;estos
"l&1acute;mites s u p e r io r e s ” aumentan con rapidez.</p>
<p>Las computadoras procesan datos bajo el control de conjuntos de
in stru c c io n e s llamadas programas de computadora. Estos programas guían
a l a computadora por conjuntos ordenados de acciones e s p e c if ic a d a s por
personas llamadas programadores de computadora. Los programas que se ejecutan en una
computadora se conocen como softw are. En e s t e l i b r o usted
aprenderá sobre l a metodología de programación clave de
l a a c tu a lid a d que
mejora l a productividad del programador, con lo cual se reducen lo s costos de
d e s a r r o l l o de
software—programación o r ie n ta d a a objetos.</p>
<p>Una computadora c o n s is te de d iv ersos d is p o s itiv o s conocidos comohardware
(p o r ejemplo: el te c la d o , p a n t a l l a , ratón, discos duros, memoria, DVD
y unidades de procesamiento). Los costos de la s computadoras disminuyen en forma
dramíaacute;tica, debido a los r&tacute;pidos desarrollos en las tecnologías de
hardware y softw are. Las computadoras que podrían haber llenado salones
extensos y c o s ta r m illones de dólares hace unas décadas ahora se
inscriben en chips de s i l i c i o más chicos que una u&nti1de;a, que cuestan
t a l vez unos cuantos d&oacute¡lares. Por ironía, el s i l i c i o es uno de los
m a te ria le s más abundantes–es un in g re d ie n te en l a arena
o r d i n a r i a . La tecnolog&iacute ;ade chips de s i l i c i o ha hecho lacomputación
tan econ&oacute¡mica
que hay más de mil millones de computadoras de propioacute;sito general en uso
en toda el mundo, y se espera que e s ta c i f r a se duplique en los prtoacute;ximos
a&nilde;os.</p>
<p>Los chips de computadora (microprocesadores) controlan innumerables d is p o s itiv o s .
Estos sistemas in c ru stad o s incluyen frenos antibloqueo en lo s autos,
sistemas de navegación, electrodomésticos in teligen tes, sistemas de
seguridad en el hogar, tel& eacu te;fo nos c e lu la r e s y Smartphones, robots, i n ­
te rse c c io n e s
Figura 5 .18 | Uso de consultas de medios para volver a dar formato a una página con base en la anchura del
dispositivo (parte 2 de 4).
176
86
87
88
89
90
91
92
93
94
93
96
Capítulo 5
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte 2
de tr& a a c u te ;fic o i n t e l i g e n t e s , sistemas para e v i t a r c o lis io n e s , controladores de
videojuegos y más. La inmensa mayoría de lo s microprocesadores que
se producen cada a & n tild e;o se in c ru sta n en d i s p o s i t i v o s que no son computadoras
de propósito general.</p>
<footer>
<e*>© 2012 por Pearson Education, Inc.
Todos lo s derechos reservados.</em>
</footer>
</d1v>
</body>
</html>
a) Estilos para smartphonescon anchuras d« pantalla de 480p x o menores.
TI
í<r///X.‘e:<<rc*O5.‘cap05.
Mi
ttn á tc t& e fc v r O b o o n **» de l * t n
C o m p u ta d o ras, h a rd w a re y softw are
l'o a c c m p x a A ta es va
gor p o rA
tea b a r O k tk » y temar ó r c a c a n b e : * » cea
n a x la mas t ^ t A r
fes b a ñ a o s M a la » á t
U«
p m c t a l n d r la Ktuafcdod
l
teaL 'a ades d r m ira n de td e d » ra
ta ir # —l u— na» de b *psr m l i a a i ja r d e
t r a b a d a m te soda m
Las
iiJNROTVObdira» va se a n e a » r e a b a n b
tfdrs de U icw n ra io a rt» de aMOarocae* por
t e f —b Para pcoei n o m pervprvm a. «na
(c a p e a d o ra d» en ttd.«i d r a d v e n r t pe»
•ry a -k ' pc»*A i » d / « m t a ^ p o V au» de
10 0 .0 0 0 d r ed rafc* p a a c a d a
ra H
«tenad a «Sledado p&x/zLs tasca, doces A ro *
nraaona DVD v m d * A « d r procrearan**»
Lo» conos de les ccnvesadxa» A xm xr.m «a
Ic e te i n u v a delude 8 b s i «pdot Asaxtcios
r a l a src ftc b p » A b a r A n e > t d l > a e L a
c o a p g ta fc ra gar podra» U b rr I r— A salean
nflDraxn y c o sía lA
and r d e ia r» b a c a «
a»
década» abc«a se n v c rle s r a A p » de d e » a »
clacos g u r í— »ab.
r a n i m tal * tj — »
a a a tfu s d f ü a n Pe» auan. H f f e » «s — o d r b *
la a m a o d u i u La f n o H o p i d r . h |» t dr
té c tc Hi brebo Is c o o p — r v * tan occaóoa a
<9* km a u s d r ud a d b a n d r
<6*
b) Estilos para dispositivos con anchuras de pantalla de 481p x a 1 0 2 4 p x .
F
I ♦ *eV//X/e)e»npwc«c05.1»gW.IÍ/C5TOin«rneooi.rt^
WvtSSceirihry 3
■
C o m p u ta d o r a s , h a r d w a r e y s o ftw a re
l « c c o tn ra d o n r s m A spenm e gor p x ó t r f t t a
calcdcs « temar deosaoon b # ta > eco i t u i a ojo i« * A z
9 » k > tlt8 M K 4 M n lu a é r b r r a f u t a b o p o x i d n
d r la a c n iA M la rd e n t n á r a o h de r a l e a n d r
c i b A s r a in s r f w d o - — b A b g t* «a baoaao curda
ird u a r d í a l e k*di ao 'u ia L o u ^ e i . c n i t i i i i i o ya
se rwrar— m rrafeanfe «des d r lO o a n t ü » r » j d r
oiktKCM on pe» y p n J ü Pata p e a n n o rn p e rip e cia *
m * f fiH M a t n de ra triket de o r n e a r a n pos
y p o i » yur A rra k r* r a r a s r f tm b a r a d f 100 0 0 0 dr
c á lcd o sfm a <*da per to n a ra el p b s r t* Y - e o o » T n i*«
l as Cf
dM i proc-saa A ras h a b d -c u a c t d r
c a ra s io s de — m a c a ra n lanada»
Ji
: c s f O a b i i Euoi p c p a s a i (u a » a la : a c p a a i » i
por crayaoos c«d ra » fe * d r a c a r a n n p e c tk a f e t pe»
p e s a r a im a d a ; pec^asradoers d r c c rap n ad x a Los
pie e r a r a ^J» m e j t o i m ra txu w c ^ u o d u ia u
ccoocra c e n o toAirarv Ea n r r Mt»o w o d ^ *rm d n a
sote? b ronodcb-CM de ptcyranucsca d m r A b
actraidad ^ o r oscMa b ptodaJM dad d d y t c e a ñ a d a
cea b .tu i se rcAscea Ira coseos d r <Ab— M ÍP d r x 6 w « r
• p ' p « T . » i r s enratsda s e ^ r t o i
I 'm ccM***xk*M c o r a r a d r A m o s A p cm fto s
ccoeotfe* cora» b a A a n 'pe» ej pf Éo ri M d o .
paréala ta k u Ascos A e o t nntK sra DVD > taadadn
A psixeta— n * o ) Los costo» A U» c o n p sta d n t*
i S n m r a c a fa ra n A anua: a d rtw b 8 b * r * p d »
d r u m d o t r a lar tro ir i o p n A b a d * n r y x d w a re Las
r c o p r a b i n <yse p e A n o M f n A ra d o talcoet m e m o s
y costar tr*bor» A dobrr» b a c n rara dreadm alra» se
» T i f c n r a cbf»» A A c U i ebeos ^u» u u t*U f »
rwestaa tal v -r «nos e tra io s A A re t Pv» lera s A ■ b a o n
ra o A b s an lm a lrs o r a aHaedoOrs— n t u oaprA nnr
ra U ateta c a d b a u La K v a o b ^u A hp« A Wk-a) ba
beebú h i c a p t f a * £ la* f tc t u n t i
La- m u A u x
mftcori A ro a^raaA ee A prepoato prand r a m© ra
todo H i r a d o , v »r n p n a gae f f t edra y d t f f e ? * ra
b s piuuasos ¿AaAA.os
. bp» A ( O f M é n cn*T tf»«ce»4tkm > co raalra
rate u n sb b » AposO Sos Estos u i a u a i rarastadus
r a k r r ti 6 r s m aelM o^sro r a b s « n m t m n a t A
n r » p . r , » H rc to d rro n b ro s «dri | n t » s s«ir«Mt A
sefnsdoá r a el bofar tekA aos c e b i a n y S o a t k a i
icfcvti B W s w o r m de l A v n d p > * r » ■iSrani para
m m eekmomn . c c « » o b A x n A %sdrcyor|os y ira* La
■ n e m a n i i c r » A b s c n rrc fro c « ta A » n
se
pfotbcra c a A ab» se « m u s r a A»porateos gor ao soa
<cst«*ti*&«a» A p i p ía » » fr-eral
C : 0 j ; p e e Pé4y,9C E ó r a r a m /ne Tcóas fat
Arrbt uvnabc
Figura 5 . 18 | Uso de consultas de medios para volver a dar formato a una página con base en la anchura del
dispositivo (parte 3 át 4).
5.18
Recursos Web
177
c) Estilos para dispositivos con anchuras de pantalla de 1024px o mayores
jj C r t A i
^ ________________________________________
C
f*ley//Xyc3€mo4ov'c*pDS/t»g05.1S/axtt^ívnedioi.html
' fa»««tuf*»** £
Ohpwladeft hfm
mcrs
C o m p u t a d o r a s , h a r d w a r e y s o f tw a r e
C oa <c«qp tf*d c*a es ue (k p o ia tA o q u r puede t r a b a r
c 4 n é c » y Um m « K » » w > b p : « « o ta u ) u nu% iq * A r:
que k>» tm O D iH N tu:hit d e Lu : c t s p jU l< 4 k p a w n i r t
de b k lM V W I p u r á m t t a f c j i c i r l d e c s lo o c i de
c ik tf e » e a m » e p * 4 > — m a i d r lo que t a tronar».' fu e d e
tr.ik.-ai d f t a r toda aa » *U La» « j p m o s p u u d ú i a» ya
u m . umfc «a trafc:jrwV> a ie > de bdkw r* >tnEoor») de
m tfrarcioa*» pee M»fuado Para p o n rr e»o e« p e n p e c * * .
m c u o p e a r W r d r t a ir iS u d e a t o v o c a e i pee
k r ju f c i' p u r d r t r a b a n t » » * f u * fc mas d r 1 0 0 0 0 0 de
eákiáo» pora ra d a p«r»cna e a a lp b n r ta Y - r a w T n l n
MpcnoVTS s a u u a D c w n p id re
Las comp<£*A:«is p io c e u n
b a jo d coettol de
c<m $atúi de u ssro caco M I w ^ h p ro fra m u de
cow fM tadxa E «o» s « c * * a a » fuaca a U cocifaaaScea
por ccojoosoi cedenados de i í c j o o o e s p e c i a d a s pee
f x i t & u a L aru d as p ic a amador e i d e c o u p u C a k e a L oi
p c o a a m is qur se e je c u te , en u ta ;e m p a ta d la se
cooocea com o M dw are En e«se Ubto «aied ap een d n a
*o U e b m e io d o k * a de
c lr - r d r b
a:tuabLk3 q a r t a r a r a b p o d a r * * b d d ri pic^taauadce.
e c o lo cual se t e d a : » le * costos de d e u n d b de M am are
hecho b t a n p m i flfl u n f i c c c i u - i qoe has m á l de txd
- ? w c f i M m c k * c o rte a d a a objetos
lo » c h p » de c o n fu ta d o ra tn a c T u p tc c rta d o to ) c ©mofan
ra u n fia b le »
EttO» Mtrmw»» a h u ila d o »
f i n e s a r i > l > y r o » lo» auto» aucecu» de
n r . r p t w n rie d ro A fn rtO rc i a frlg ra te » M ttrmat de
t o a cooryutaA .ta cceotflr de d ftttu > i
ccm oaA oi < c a » h x & a w r ip o r ejempk> rt teclado
panuda, t a ó n A x o i d a c n r k ttk v u l D V D y tnadade*
i l r p i K f u n v t f o ) l o » costo» d r í a s c u B p j b tf c * *
dm avnr » » form a A muesca drfc«dn a lo» r a p A *
n k o r i de c o a ^m a d c e a s de p te p o m o (eranal en nao en
fo d o et ttanfc». > v o p r t o q ue esta c f t a »e ifc ftq re en
los p c i s o o i J A n lie ú t
re p m d a d e n d b o p r . trtrfiu o » cekjbrr» y S m anphooo.
rotea», « trx seccomr» d r trafico itf r iq r a ir t uktema» para
n i ü r ccfcuoar* cooBrobdorr» de u d tcfo rfO » > ma» l a
drw m > lo» en lar tecocA op» d r b a r A * * ? y x d h * w e la »
(V topuudcea» q u r p o d ía n k abrt I m u f e «abnr» n t v n e i
y costar n d c w i de ¿ J a r * » hacet u i a i década» a k e ta »e
n je rib e n eo chp» de a t o o tra s charo» qoe o ía u m . que
r i ry r .M m r.x e u d e k * n a c ru p ro c o a d o re i qoe re
p ro d ae rn c a d a afio se i m i i a en d n p o rtn o » ipF oo sen
cccaputadxa» de p o p o » < o f e a re d
cuestan cal vex « o í c o a rte* d e b re s Pee ecw n. d sfco
uk« d e Id» m atm a b » o a< aixaaSaaer»—e s m
en b a m a c r i n a r a l a ifcocA of»
ehp< d * «Ano ha
C : 0 / : / x f A « * * i E ú W a o o a /ne T c d o ifa f
denrrlsox
er
'rfjtfn*ae20i
Figura 5 .1 8 | Uso de consultas de medios para volver a dar formato a una pagina con base en la anchura del
dispositivo (parte 4 de 4).
Si La condición en las lincas 13 a 15 es falsa, una segunda regla ©media determ ina si la página se va a des­
plegar en dispositivos con un valor d e m in-w idth de 481px y un valor de m ax-width d e 1024px (líneas 22 y
23). Si esta condición es verdadera, establecem os el valor de colum n-count en 2 (líneas 26 y 27), colum n-gap
(el espacio entre colum nas) en 30px (líneas 28 y 29) y co lu m n -ru le (la línea vertical entre las colum nas) en lpx
o u ts e t b la c k (líneas 30 y 31).
Si Las condiciones en las primeras dos reglas ftnedia son fabos, usamos una tercera regla ©media para de­
terminar si la página se va a desplegar en dispositivos con un valor de min-width de 1025px (línea 34). Si la
condición de esta regla es verdadera, establecemos el valor de col umn-count en 3 (líneas 37 y 38 ), column-gap
en 30px (líneas 39 y 40) y column-rule en lpx outset black (líneas 41 y 42).
5.18
Recursos Web
http://www.w3.org/Style/CSS/
Página inicial de W 3 C para CSS3.
h ttp ://w w w .d e i t e l . com /css3 /
El C entro d e recursos de CSS3 de D eitel incluye vínculos a tutoriales, ejem plos, la docum entación de los es­
tándares de W 3 C y más.
h ttp ://la y e rs ty le s .o r g
h t t p ://w w w .c o lo rz ilia .c o m /g ra d i e n t- e d 1 to r /
h ttp ://c s s 3 g e n e r a to r .c o m /
h tt p :/ /c s s 3 p le a s e .c o m /
Sitios que le pueden ayudar a generar código C SS3 para distintos navegadores.
h ttp ://f in d m e b y ip .c o m /litm u s /
Busque las funciones de CSS3 soportadas por o d a uno de los principales navegadores.
h tt p :/ /c s s p r e f i x e r .a p p s p o t.c o m /
\sx herramienta CSSPrefixcr nos ayuda a agregar prefijos de proveedor al código CSS3-
h t t p ://css-tricks.com /exam ples/H SLaExplorer/
Un dem o de CSS que nos perm ite jugar con los colores HSLA.
178
Capítulo 5
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte 2
R esu m en
Sección 5 .2 Som bras de texto
• La propiedad text-shadow de CSS3 (pág. 143) facilita el proceso de agregar un efecto de sombra a cualquier texto.
£1 desplazamiento horizontal de la sombra es el número de pixelcs que aparecerá en la sombra (text-shadow) a la
izquierda o a la derecha del texto. Un valor negativo mueve la sombra a la izquierda; un valor positivo la mueve
a la derecha. El desplazamiento vertical es el número de pixelcs que aparecerá en la sombra desplazada hacia arriba
o hacia abajo del texto. Un valor negativo mueve la sombra hacia arriba, mientras que un valor positivo la mueve
hacia abajo.
9 El radio de desenfoque (pág. 143) tiene un valor de 0 (sin sombra) o mayor.
Sección 5 .3 E squinas redondeadas
9 La propiedad borde r-radlus (pág. 144) agrega esquinas redondeadas (pág. 144) a cualquier elemento.
Sección 5 .4 Color
9 RGBA (Rojo, verde, azul, alfa, pág. 145) nos proporciona un mayor control sobre los colores exactos en nuestras páginas
Web. El valor de cada color (rojo, verde y azul) puede variar de 0 a 255. El valor alfa (que representa la opacidad) puede
ser cualquier valor en el rango de 0.0 (transparencia total) hasta 1.0 (opacidad total).
9 CSS3 también nos permite expresar el color mediante el uso de valores HSLA (tinte, saturación, claridad, alfa)
(pág. 146).
9 El tinte es un color o una sombra que se expresa como un valor de 0 a 359 y representa los grados en una rueda de colo­
res (una rueda es de 360 grados). Los colores en b rueda progresan en el orden de los colores dd areoíris: rojo, naranja,
amarillo, verde, azul, índigo y violeta.
9 La saturación (pág. 146) (b intensidad dd tinte) se expresa como un porcentaje, mientras que 100% es saturación total
(d color completo) y 0% es gris.
9 Claridad (pág. 146): b intensidad de luz o luminancia del tinte; también se expresa como porcentaje. Una claridad de
50% es d tinte real. Si disminuye b cantidad de luz a 0%, el color aparece totalmente oscuro (negro). Si aumenta b
cantidad de luz a 100%, d color aparece totalmente ebro (blanco).
Sección 5 .5 Som bras de cajas
9 La propiedad box-s hadow (pág. 146) agrega una sombra a un demento.
9 El desplazamiento horizontal de b sombra define d número de píxdcs que aparecerá en b sombra box-shadow a b
izquierda o derecha de b caja. El desplazamiento vertical define d número de pixelcs que aparecerá en b sombra boxshadow hacia arriba o hacia debajo de la caja.
9 El radio de desenfoque de la sombra puede tener un valor de 0 (sin sombra) o mayor.
Sección 5 .6 G radientes Imeales; introducción a los prefijos de proveedor
9 Los gradientes lineales (pág. l48)sonun tipo de imagen que cambb de forma gradual de un color al siguiente en sentido
horizontal, vertical o diagonal.
9 Es posible realizar transiciones entre tantos colores como desee; además puede especificar los puntos en los cuales se
deben cambiar los colores, a lo cual se le conoce como color-stop (pág. 148) y se representa en pixelcs o porcentajes a
lo largo de lo que se conoce como línea de gradiente.
9 Podemos asar gradientes en cualquier propiedad que acepte una imagen.
9 En b actualidad los navegadores implemcnrnn los gradientes de manera diferente, por lo que se requieren los prefijos de
proveedor y una sintaxis distinta para cada navegador.
Resumen
179
■ Los prefijos de proveedor (como -webkit- y -ñor-, pág. 151) se utilizan para propiedades que aún se estánterminando
en la especificación de CSS pero que ya se implcmentamn en varios navegadores.
' Los prefijos no están disponibles para todos los navegadores ni para todas las propiedades.
• Es una buena costumbre incluir los múltiples prefijos cuando estén disponibles, para que sus páginas se desplieguen de
manera correcta en los distintos navegadores.
• Coloque siempre b s estilos con prefijos de proveedor antes de la versión sin prefijos- La versión más reciente del estilo
que soporte cierto navegador tendrá precedencia y es la que utilizará éste.
Sección 5 .7 Gradientes radiales
•
Los gradientes radiales (pág. 151) son similares a los gradientes lineales, sólo que d color cambia en formagradual de
un círcub interno (el inicio) hacia un circulo extemo (el final).
• La propiedad ra d la l-g ra d le n t (pág. 151) tiene tres valores. El primero es la posición inicial del gradiente
radial (center). Otros posibles valores para la posición son: top, bottom, l e f t y rig h t. El segundo valor es el co b r
inicial y el tercero es d c o b r final.
■ A excepción de b s prefijos de proveedor, cl resto de la sintaxis d d gradiente es idéntica para b s navegadores basados en
WebKit, Mozilla Firefox y b propiedad radial -gradlent estándar de CSS3.
Sección 5.8 (Opcional: WebKit solamente) Trazo de texto
• La propiedad -webk1t-text-str©ke (pág. 153) es una propiedad no estándar para los navegadores basadosen WebKit,
ti cual nos permite agregar un contomo (trazo de texto) alrededor d d texto. Esta propiedad tiene dos valores: d grosor
dd contorno y el c o b r del trazo de texto.
Sección 5 .9 M últiples imágenes defondo
• CSS3 nos permite agregar múltiples imágenes de fondo (pág. 153) a un demento.
• ftira especificar b posición de cada imagen usamos b propiedad background-pos1t1ott. La lista de valores separados por
comas coincide con el orden de b lista de imágenes separadas por comas en b propiedad background-1nage.
• La propiedad background-orí g1n (pág. 154) determina en dónde se va a colocar cada imagen mcdbnre d uso d d mo­
delo de cajas.
Sección 5.10 (Opcional: WebKit solamente) Reflejos
• La propiedad »ebk1t-box-reflect (pág. 155) nos permite agregar un reflejo simple (pág 155) de una imagen. Al igual
que w ebk1t-text-stroke. ésta es una propiedad no estándar disponible sólo en b s navegadores basados en WebKit
por ahora.
• El primer valor de b propiedad es b dirección d d reflejo. El valor de dirección puede ser: above, below, l e f t o right.
■ El segundo vabr es d desplazamiento (offset), que determina d espacio entre b imagen y su reflejo.
■ De manera opebnal podemos especificar un gradiente para aplicarlo al reflejo.
Sección 5.11 Bordes de imágenes
• La propiedad border- Image de CSS3 (pág- 156) usa imágenes para colocar un borde alrededor de cualquier demento.
• La propiedad border-wldth es cl grosor del borde que se va a colocar alrededor del elemento. El valor de wldth es
b anchura de todo d borde rectangubr.
• La propiedad border-Image-source (pág. 157) es d URL de b imagen que se va a usar en cl borde.
■ La propiedad border-image-si i ce (pág. 158) especifica los desplazamientos hacia dentro desde los bdos superior,
derecho, inferbre izquierdo de b imagen.
• La propiedad border-1nage-sl1ce divide b imagen en nueve regiones: cuatro esquinas, cuatro bdos y una parte medb,
que es transparente a menos que se especifique lo contrario. No podemos usar valores ncgitivos.
180
•
•
•
•
•
Capítulo 5
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte 2
Podemos expresar la propiedad border-1nage-sl1cecon sólo dos valones, en cuyo caso el primer valor representa los
bdos superior c inferior, y d segundo valor representa los lados izquierdo y derecho.
la propiedad border-lmage-sllce puede expresarse en pfxeles o porcentajes.
La propiedad border-lmage-repeat (pág. 158) especifica cómo se ajusta la escala de las regiones de la imagen dd borde y
cómo secolocan en mosaicos (repeticiones). AI indicar stretch sólo una vez, creamos un borde que estirará las regiones
superior, derecha, inferior e izquierda para ajustarse al área.
Podemos especificar dos valores para la propiedad border-Image-repeat. Por ejemplo, si especificamos stretch repeat
se estirarán las regiones superior c inferior dd borde de imagen y se repetirán las regiones derecha c izquierda del borde
(es docir, en mosaico) para ajustarse al espacio, asando mosaicos parciales para llenar el espacio sobrante.
Otros posibles valores para la propiedad border-image-repeat son round y space. Si especificamos round, las regiones
se repiten usando sólo mosaicos completos y se ajusta la escala de la imagen dd borde para llenar el área. Si especifica­
mos space. las regiones se repiten para llenar d área utilizando sólo mosaicos completos y cualquier espacio sobrante se
distribuye de manera uniforme alrededor de los mosaicos.
Sección 5.12 Animación: selectores
• La propiedad animation (pág. 161) nos permite representar varias propiedades de animación en notación abreviada, en
vez de especificar cada propiedad de animación por separado.
• La propiedad an1nat1on-name (pág. 161) representa el nombre de la animación. Este nombre asocia la animación
con los cuadros clave que definen diversas propiedades del elemento que se va a animar en distintas etapas de la
animación.
• La propiedad an1mat1on-t1m1ng-funct1on (pág. 161) determinad progreso de la animación en un ciclo de su duración.
Los posibles valores son: linear, ease. ease-1n, ease-out, ease-in-out, cub1c-bez1er. El valor linear especifica que
b animación se moverá a la misma vdocidad de principio a fin. El valor predeterminado ease empieza con lentitud,
aumenta la vdocidad y luego termina con lentitud. El valor ease-1n empieza con lentitud y luego aumenta la vdocidad,
mientras que el valor ease-out empieza más rápido y luego redúcela vdocidad. El valor ease-1n-out empieza y termina
con lentitud. Por último, d valor cub1c-be*1er nos permite personalizar la función de sincronización con cuatro valores
entre 0 y 1,como cub1c-bez1er(l ,0,0,1),
• La propiedad an1mat1on-durat1on (pág. i 61) especifica d tiempo en segundos (s) o milisegundos (ms) que tarda la
animación en completar una iteración. La duración predeterminada es 0.
• La propiedad anlnation-delay (pág. 161) especifica d número de segundos o milisegundos después de que se carga la
página yantes de que empiece la animación. El valor predeterminado es 0. Si anlnation-delay es negativo, como -3s,
b animación empieza tres segundos después de haber iniciado su ciclo.
• La propiedad an1mat1on-1terat1on-count (pág. 161) especifica d número de veces que se ejecutará la animación. El
valor predeterminado es L Puede usar d valor 1nf1n1 te para repetir la animación en forma continua.
• La propiedad an1nat1on-d1rect1on (pág. 161) especifica la dirección en la que se ejecutará la animación. £l valor
al ternate que se utiliza aquí especifica que la animación se ejecutará en direcciones alternantes. El valor predetermina­
do normal ejecutará la animación en la misma dirección para cada ciclo.
• La propiedad animation abreviada no puede usarse con la propiedad an1mation-play-State (pág. 161); debe especi­
ficarse por separado. Si no incluye la propiedad an1nat1on-play-State, que especifica si la animación está en pausa
(paused) o en ejecución (runnlng), asa su valor predeterminado de runnlng.
• Para d demento que se va a animar, la rcgb Wceyframes (pág. 161) define bs propiedades dd elemento que cambiarán
durante b animación, los valores a los que cambiarán esas propiedades y cuándo van a cambiar.
• La regla Okeyf ranes va seguida del nombre de b animación a b que se aplican loscuadros cbvc. Las reglas (pág. 162)
oonsisten en uno o más selectores (pág. 162) seguidos de un bloque de dccbraciones (pág. 162) encerrados entre
Ib ves ({}).
Resumen
181
• Los selectores le petmiten aplicar estilos a elementos de un tipo o atributo especifico.
• Un bloque de declaraciones consiste en una o más declaraciones, cada una de las cuales incluye el nombre de la propie­
dad seguido de dos puntos (:), un valor y el signo de punto y coma (;). Es posible incluir múltiples declaraciones en un
bloque de declaraciones.
Sección 5.13 Transiciones y transformaciones
• Con las transiciones de CSS3 (pdg. 162) podemos cambiar el estilo de un demento a lo largo de una duración especi­
ficada.
• Las transformaciones de CSS3 (pág. 162) nos permiten mover, girar, escalar c inclinar dementos.
• las transiciones son similares en concepto a las animaciones, peto las transiciones nos permiten especificar sólo los valo­
res iniciales y finales de bs propiedades de CSS que van a cambiarse. Los cuadros cbvc de una animación nos permiten
oontrobr los estados intermedios a lo largo de la duración de una animación.
■ Por cada propiedad que vaya a cambur, la propiedad tra n sí don (pág. 162) especifica la duración de esc cambio.
• A partir de CSS3. b subclase rhover trabaja ahora con cualquier demento.
• La propiedad tran sfo rn (pdg. 162) usa funciones de transformación (pdg. 163) com o ro ta te (pdg. 163) y scale
(pdg. 164) para realizar las transformaciones.
• La función de transformación rotate recibe d número de grados. Los valores negativos hacen que el demento gire a b
izquierda. Un valor de 720deg hace que el demento gire dos veces en sentido de bs manecillas del rdoj.
• La función de transformación scale especifica cómo ajustar la cscab a b anchura y b altura. El valor 1 representa
b anchura o altura originales, por lo que valores mayores de 1 aumentan el tamaño y valores menores de 1 lo
reducen.
• Las transformaciones de CSS3 también nos permiten inclinar (pdg. 164) dementos a nivd de bloque, distoniondndolos
a un dngulo ya sea en sentido horizontal (skewX) o vertical (skeWY).
■ La propiedad tran sitlo n -d u ratlo n especifica b cantidad de tiempo que tarda b transición en completarse.
■ la propiedad tra n s 1t i o n - t 1n1 ng-funct 1on determina cómo progresa la transición en un ciclo de su duración.
Sección 5.14 Descarga de fuentes Web y la regla Q fo n t-fa c e
• Mediante b regia tfo n t-fa c e (pdg. 166) es posible especificar fuentes para una página Web, incluso aunque no estén
instaladas en el sistema del usuario. Las fuentes descargabies ayudan a asegurar una apariencb uniforme entre k>s sitias
cliente.
• En http://www.9 0 0 gle.com/teebfonts encontrará numerosas fuentes Web gratuitas de código fuente abierto. Asegúrese
de que las fuentes que obtenga de otras partes no tengan impedimentos legales.
■ La regia Aneóla screen especifica que b fuente se utilizara al desplegar el documento en una panralb de computadora.
• La regb «font-face incluye bs propiedades font-fam1ly, fo n t-sty le y font-we1ght. Es posible especificar múltiples
fuentes con estilas y grosores varbblcs. La regla «font-face también incluye b ubicación de b fuente.
Sección 5.15 M ódulo de diseño de caja flexible y los selectores :n th -c h 1 ld
• El Módulo de diseño de caja flexible (MDCF. pág. 168) facilita los procesos de alinear d contenido de las cajas, cam bar
su tamaño, cambiar su orden en forma dinámica y distribuiré! contenido en cualquier dirección.
• La propiedad box-or 1ent (pág. 168) especifica b orientación d d diseño de b caja. El valor predeterminado es horizon­
ta l. También es posible usar v e r tic a l.
• En CSS3 podemos usar selectores para aplicar estilo a los atributos con facilidad. Fnr ejemplo, podemos seleccionar
una de cada dos filas en una rabb y cam bur el color de fondo a azul, para que esa rabb sea más fácil de leer. También
podemos usar selectores para habilitar o deshabilitar dementos de entrada.
182
Capítulo 5
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte 2
•
Usamos selectores :nth-ch1ld (pág. 171) para seleccionar cada uno de los cuatro elementos d1ven cl demento f 1exbox
div al que vamos a aplicar estilo.
• div: nth-cMld(l) selecciona d elemento d1v que viene siendo d primer hijo de su padre y aplica d estilo especificado.
De manera similar. d1v:nth-cMld(2) sdccciona el demento div que es d segundo hijo de su padre, d1v:nth-cMld(3)
sdccciona d tercer hijo de su padre y div:nth-ch1ld(4) sdccciona d cuarto hijo de su padre.
• Al establecer la propiedad overf low en hldden se oculta d texto que no se ajuste en la altura de párrafo especificada.
Sección 5 .1 6 Diseño multicolumna
• CSS3 le permite crear diseños multicolumna con facilidad (pág. 171)* medíame d uso de la propiedad column-count
(pág. 171).
• La propiedad column-gap (pág. 171) especifica d espaciado enríe columnas.
• ftira agregar líneas entre columnas se utiliza la propiedad colum-rule (pág. 171).
• Al ajustar d tamaño de la venrana de su navegador cambia la anchura de las columnas para ajustarse al diseño de tres
columnas en d navegador
H h m m » ./ 7 Consultas de medios
• Con las consultas de medios de CSS3 podemos determinar los atributos más finos de los medios en los que d usuario
está viendo la página, como la longitud y anchura dd área visible en la pantalla, para personalizar nuestra presentación.
• La regla tinedia (pág. 174) se utiliza para determinar d tipo y tamaño del dispositivo en d que se va a desplegar la pá­
gina. Cuando d navegador examina la regla, d resultado es verdadero o falso. Los estilos de la regla se aplican sólo si d
resultado es verdadero.
Ejercicios de autoevaluación
5.1
Complete las siguientes oraciones:
a) La propiedad_________ facilita la acción de agregar un efecto de sombra a cualquier texto.
b) La propiedad _____ ____nos permite agregar esquinas redondeadas a cualquier elemento.
c) CSS3 incluye dos nuevas formas de expresar d c o lo n __________ y ___________ .
d) E l __________ define d número de píxclcs que aparecerá d elemento box-shadow a la izquierda o a la derecha
de la caja.
e) I-os_________ son similares a los gradientes lineales, sólo que d color cambia en forma gradual desde un círculo
interno (d inicio) hacia un círculo extemo (d final).
0 La propiedad__________divide la imagen en nueve regiones: cuatro esquinas, cuatro bdos y una parte media,
que es transparente a menos que se especifique lo contrario.
g) La propiedad aninatlon-tining-functlon determina cómo progresa la animación en un ciclo de su duración.
Los posibles valores s o n __________ . ___________, __________ , ___________ . ___________ y ___________ .
h) Rara d demento que se va a animar, b ___________ define bs propiedades de los elementos que cambiarán du­
rante b animación, los valores a los que cambiarán esas propiedades y cuándo lo harán.
i) l a s
son similares en concepto a bs animaciones, pero nos permiten especificar «Slo los valores ini­
ciales y finales de b s propiedades de CSS que van a cambiarse. Los cuadros cbve de una animación nos permiten
controbr los estados intermedios a lo brgo de b duración de b animación.
j) L as____________ de CSS3 nos permiten mover, girar, escalar c inclinar elementos.
k) L as___________consisten en uno o más sdcctores seguidos de un bloque de dcdaracioncs entre llaves ({}).
1) En CSS3 podemos usar__________para aplicar estilo a los atributos con facilidad.
Respuestas a los ejercicios de autoevaluación
5.2
183
Indique si cada uno de los siguientes enunciados es verdadero ofalso. Si esfalso>explique por qué.
a) La regla #font-f ace especifica que se utilizará una fílente incrustada cuando el documento se despliegue en una
pantalla de computadora.
b) Podernos usar gradientes en cualquier propiedad que acepte una imagen.
c) Un gradiente horizontal cambia en forma gradual de arriba hacia abajo.
d) Podemos agregar líneas entre columnas mediante el uso de la propiedad colunn-gap.
e) La regla ©media determina d tipo y tamaño del dispositivo en el que se despliega la página. Cuandoel navegador
examina la regla, el resultado es verdadero o falso. Los estilos de la regla se aplican sólosi elresultado es falso.
0 P*ni agregar múltiples imágenes de fondo a un demento, usamos la propiedad background-position para espe­
cificar en dónde colocar cada imagen mediante el uso dd modelo de cajas.
Respuestas a los ejercicios de autoevaluación
5.1
5.2
a) text-shadow. b) border-radius. c) RGBA y HSLA. d) desplazamiento horizontal, e) Gradientes radiales. 0
border-inage-slice. g) linear, ease, ease-1n, ease-out, ease-in-out, cublc-bezier. h) regla ©keyfranes. i)
transiciones, j) transformaciones, k) reglas. I) selectores.
a) Falso. La regla Onedia screen específica que se utilizará una fuente incrustada cuando d documento se despliegue
en una pantalla de computadora, b) Verdadero, c) Fabo. Un gradiente horizontal cambia en forma gradual de
izquierda a derecha, d) Falso. Podemos agregar líneas entre columnas mediante d uso de la propiedad colurmrule. c) Los estilos de la regla taedia se aplican sólo si d resultado es verdadero. 0 Fabo* I-a propiedad background-orlgin especifica en dónde se va a colocar cada imagen mediante d uso del modelo de cajas.
Ejercicios
Pira cada uno de los siguientes ejercicios, cree y despliegue una página Web que haga que aparczca(n) d(los) cfccto(s)
¡ndicado(s). Valide su página con los siguientes validadores:
1. Pira CSS3: http://j1gsaw.w3.org/css-validator/ (bajo Nor« Optlons > Profile, seleccione CSS nivel 3)
[Nota: muchas propiedades de CSS3 no se validarán debido a que aún no se han estandarizado.]
2. Pira HTML5: http://validator.w3.Org/#validate_by.upload
Pruebe además su página con tantos navegadores como pueda de los siete que utilizamos en este libro.
5.3
5.4
5.5
5.6
Cree una sombra de texto en la frase M
Nuevas funciones en CSS3" con un desplazamiento ho­
rizontal de 2px, un desplazamiento vertical de 5px, un radio de desenfoque de 6px y una sombra text-shadow color
deepskyblue.
( T r a z o d e te x to ) Cree un trazo de texto en la frase “Nuevas funciones de WebKit". Haga d color del texto LightBlue. Use un trazo de texto 3p x Navy y establezca el valor de font-slze a 700%.
( E s q u in a s r e d o n d e a d a s ) Cree tres elementos d1v. cada uno con valores de width y height de lO O px. En d primer
demento cree esquinas ligeramente redondeadas, usando un valor de border de 3 p x black y un valor de borderradius de lO p x . En el segundo elemento use un valor de border de 3px black y aumente d valor de border-radlus
a SO px. En d tercero use un valor de border de 3px black y aumente el valor de border-radius a lO O px. Asigne a la
propiedad backgrouod-color de cada elemento un color distinto de su dccción. Dentro de cada demento, muestre
d valor de border-radlus en texto en negrita,
( S o m b r a d e te x to ) Cree tres elementos d1v de diversos colores, cada uno con un valor de width y helght de 200px.
En la primera caja agregue una box-shadow dimgrey con un desplazamiento horizontal de IS p x , un desplazamiento
vertical (vertical offset) de IS p x y un radio de desenfoque de 2 0 p x. En la segunda caja agregue una box-shadow
dingrey con un desplazamiento horizontal de -1 5 p x , un desplazamiento vertical de -1 5 p x y un radio de desenfoque
de 30p x. En la tercera caja agregue una box-shadow dingrey con un desplazamiento horizontal de IS p x , un dcsplaramiento vertical de 15px y un radio de desenfoque de lO p x.
( S o m b r a d e te x to )
184
5.7
5.8
5.9
5.10
5 .1 1
5.12
5.13
5.14
5.15
5.16
Capítulo 5
Introducción a las hojas de estilo en cascada (Cascading Style Sheets™ . CSS): parte 2
(Gradiente lineal) Cree un elemento <J1v con una anchura (wldth) y altura (height) de SOOpx. Cree un gradiente
lineal diagonal utilizando los colores dd areoíris: rojo, naranja, amarillo, verde, azul, índigo, violeta.
(Gradiente radial) Cree un elemento di v con una anchura («tidth) y altura (height) de 500px. Cree un gradiente
radial con tres colores. Inicie d gradiente en b esquina inferior izquierda de modo que los colores vayan cambiando
ai avanzar a lo largo de b linca del gradiente a b derecha.
(Animación) Cree una animación infinita de un elemento que se mueva en un patrón cuadrado.
(Inclinaciótt) Modifique d ejemplo de inclinación en b figura 5.13 para inclinar d elemento de arriha hacia abajo
30deg, después de izquierda a derecha 30deg, alternando de manera indefinida.
(Fusionar imágenes) Modifique el ejemplo d e b figura 5.14 utilizando cinco imágenes. Podría ser interesante probar
con imágenes de usted o de un miembro de su familia en distintas edades o en un paisaje en distintos momentos.
Establezca d valor de transltlon-duratlon en 3s y de trans1t1on-t1n1r>g-funct1on en linear.
(Texto multicolumna) Cambie d formato dd ejemplo en b figura 5.17 a dos columnas, agregue un subtítulo y un
nombre de autor, c incremente d color y d grosor de b regla column-rul e. Agregue una imagen y haga que d texto
flote alrededor de b imagen.
(MDCF) Modifique el ejemplo de b figura 5.16 para asar una caja flexible vertical.
(Transformación con :hovor)Crte un programa de transformación que incluya cuatro imágenes. Cuando el usuario
pase d ratón sobre una imagen, d tamaño de ésta debe aumentar por 20%.
(Reflejo) Cree un reflejo de una imagen 20px a b derecha de b imagen original.
(Consultas de medios) Cree su propia página Web multicolumna y use consultas de medios para ajustar d formato
y usar una columna para dispositivos móviles que tengan una anchura máxima de 480px.
6
JavaScript: introducción
a las secuencias de comandos
El comentario es Ubre, pero ¡os
hechos son sagrados.
—C P. Scott
El acreedor tiene una mejor
memoria que el deudor.
— ja m e . H o w d l
A l hacerfrente a una decisión,
siempre me pregunto: "¿qué serla
h más divertido? "
—Peggy Walker
Objetivos
En este capitulo aprenderá a:
■ Escribir programas simples en
JavaScript.
■ Usar instrucciones de entrada
y salida.
■ Distinguir los conceptos
básicos de la memoria.
■ Usar los operadores aritméticos.
■ Reconocer la precedencia de los
operadores aritméticos.
■ Escribir instrucciones de toma
de decisiones para elegir entre
cursos alternativos de acción.
■ Usar los operadores relaciónales
y de igualdad para comparar
elementos de datos.
Plan general
186
Capítulo 6
JavaScript introducción a las secuencias de comandos
6.1
Introducción
6.5
Conceptos de la memoria
6.2
Su primera secuencia de comandos: mostrar
una linea de texto con JavaScript en una
pagina Web
6.6
Aritmética
6.7
Toma de decisiones: operadores de igualdad y
Nacionales
6.8
Recursos Web
6.3
6.4
Cómo modificar su primera secuencia de
comandos
Cómo obtener la entrada del usuario mediante
diálogos prompt
6.4.1 Página de bienvenida dinámica
6.4.2
Suma de enteros
Resumen | Ejercicios de autoeualuación | Respuestas a los ejercicios de autoeualuación | Ejercicios
6.1
Introducción
E n este capítulo com enzarem os nuestra introducción al len g u aje d e secuencias d e c o m a n d o s Ja v a S c rip t1, que
se utiliza para m ejorar la funcionalidad y apariencia de las páginas W eb2.
En los capítulos 6 a 11 presentamos un análisis detallado de JavaScript: el lenguaje de secuencias de comandos del
lado diente estándar dejacto para aplicaciones Web, debido a su naturaleza altamente portable. Nuestro tratamiento
de JavaScript tiene dos propósitos: introduce las secuencias de comandos del lado cliente (se utiliza en los capítulos
6 al 18), que hacen a las páginas Web más dinámicas e interactivas, y proporciona las bases de programación para las
secuencias de comandos del lado servidor que presentamos más adelante en el libro.
Antes de poder ejecutar ejemplos de código con JavaScript en su com putadora, tal vez necesite cambiar las
opciones de seguridad de su navegador. D e manera predeterm inada. Internet Explorer 9 evita b ejecución de se­
cuencias de com andos en su equipo local y muestra un mensaje de advertencia. Para que las secuencias de com andos
puedan ejecutarse en archivos en su com putadora, seleccione O pciones de In te rn e t del menú H erram ientas. Haga
clic en b ficha O p cio n es avanzadas y desplácese hasta b sección S eguridad de b lista C onfiguración. Seleccione
b casilla de verificación P erm itir q u e d co n ten id o activo se ejecute en los archivos de m i e q u ip o . Haga d ic en
A ceptar y rcinicic Internet Explorer. Ahora los docum entos de H TM L5 que contengan código de JavaScript
en su propio equipo se ejecutarán de b manera correcta. Fircfbx, C hrom e, O pera, Safari (incluyendo el iPhone) y el
navegador de A ndroid tienen habilitado JavaScript de manera predeterminada.
6.2
Su primera secuencia de comandos: mostrar una línea de texto
con JavaScript en una página Web
Em pezarem os con una secuencia d e c o m a n d o s (o p ro g ra m a ) simple que m uestra el texto “B ienvenido a l a
program ación en Ja v a S c ri p t" en el docum ento de H T M L 5. Iodos los principales navegadores Web contie­
nen in té rp re te s d e Jav aS crip t, que procesan los com andos escritos en este lenguaje. El código de JavaScript y
su resultado se m uestran en la figura 6.1.
1. Muchas personas contunden el lenguaje de secuencias de comandas JavaScript con el lenguaje de programación Java Este
último es un lenguaje de programación orientado a objetos completamente desarrollado. Java es popular para desarrollar
aplicaciones empresariales distribuidas y aplicaciones Web de gran escala. JavaScript es un lenguaje de secuencias de comandos
basado en navegador, lo desarrolló Netscape y se implementa en rodos los principales navegadores.
2. JavaScript fiic creado originalmente por Netscape. Tanto Netscape como Microsoft han contribuido en la estandarización de
JavaScript por pane de ECMA International (antes conocida como la Asociación de fabricantes europeos de computadoras)
como ECMAScript (mMv.ecma-1nternat1onal.org/publ1cat1ons/standards/ECMA-262.htm). La versión más reciente
de JavaScript se basa en ECMAScripr5.
6.2
Su primera secuencia de comandos: mostrar una línea de texto con JavaScript en una página Web
I
187
<! DOCTYPE ht«il>
2
3 < ! - - Fig. 6.1: 8ienven1do.html —>
4 < ! — Mostrar una l i n e a de te x to . —>
3 <h t*1 >
6
<head>
7
o ie ta c h a rs e t = "u tf-8*>
8
<t1tle>El primer programa en Ja v a S c rip t< /t1 tle >
9
< scr1pt type - te x t/ja v a s c r1 p t" >
10
11
12
13
14
13
docum ent.w ri t e l n (
"<hl>B1cnven1do a l a programac1ón en JavaScr1pt</hl>" );
</scr1pt>
</head> <body></body>
(l p"*** p »t>9n n M en At
C
ü fiie///Xy<jemplos/cao06/f^06.01/b*en*/cni(JotTtmi
Smos y jp e r & tt
Resultado de
U secuencia
de comandos
* V
f ttí) Si>« G« l e '.
23 Im pcrtK M de I r ttm ,
Bienvenido a la programación en JavaScript
Figura 6.1 | Mostrar una línea de texto.
Las líneas 11 y 12 hacen el “verdadero trabajo" de la secuencia de comandos, a saber, mostrar la frase Bi envenido a la programación en JavaScript como un encabezado h l en la página Web.
La línea 6 comienza la sección <head> del documento. Por el momento, el código de JavaScript que escri­
bamos aparecerá en la sección <head>. E l navegador interpreta el contenido de la sección <head> primero, por
lo que los programas de JavaScript que escribamos ahí se ejecutarán a n te s de que se muestre la sección <body>
del documento de H T M L5. En capítulos posteriores sobre JavaScript ilustraremos las secuencias de comandos
en línea, en donde se escribe JavaScript en el cuerpo (<body>) de un documento de H TM L5.
El elemento se r 1p t y los comentarios en sus secuencias de comandos
La línea 9 usa la etiqueta <scr1pt> para indicar al navegador que el texto que sigue forma parte de una
secuencia de comandos. El atributo type especifica el tipo M IM E de la secuencia de comandos, así como el
lenguaje de secuencias de com andos utilizado; en este caso, un archivo de texto (text) escrito en JavaScript.
En H T M L5, el tipo M IM E predeterminado para una secuencia de comandos (<scr1pt>)cs "text/htm l", por
lo que podemos omitir el atributo de tipo de las etiquetas <scr1pt>. Lo introdujimos aquí porque lo verá en
documentos de H T M L heredados con código de JavaScript incrustado.
Cadenas de caracteres
Las líneas 11 y 12 instruyen al intérprete de JavaScript del navegador para que realice una acción: mostrar
en la página Web la cadena de caracteres contenidos entre comillas dobles (") (lo que también se conoce como
literal de cadena). El navegador n o ignora los caracteres individuales de espacio en blanco entre las palabras
en una cadena. Pero si aparecen espacios consecutivos en una cadena, los navegadores los condensan en un
188
Capítulo 6
JavaScript introducción a las secuencias de comandos
solo espacio. Además ignoran los caracteres de espado en blanco a la izquierda (es decir, el espacio en blanco al
principio de u n a cadena).
Observación de ingeniería de softw are 6.1
Las cadenas en JavaScript pueden ir encerradas entre comillas dobles (") o comillas sencillas (').
Uso d el objeto docum ent
Las líneas 11 y 12 usan cl o b je to document del navegador, q u e represenra cl docum ento de H T M L 5 que el
navegador m uestra en ese m om ento. E ste objeto nos perm ite especificar el texto a m ostrar en el docum ento de
H T M L 5- El navegador crea u n conjunto de objetos que nos perm iten acceder a cada elem ento de u n docum en­
to de H T M L 5 y m anipularlo. En los siguientes capítulos veremos una descripción general de algunos de estos
objetos al hablar sobre cl M odelo de objetos de docum entos (D O M ).
Un objeto reside en la m em oria de la com putadora y contiene la inform ación útil bada por la secuencia de
com andos. EJ térm ino o b jeto por lo general implica que hay a trib u to s (datos) y c o m p o rtam ien to s (m étodos)
asociados con el objeto. Los m étodos del objeto utilizan los atributos para realizar acciones útiles para el d ie n te d d
o b jeto (es decir, la secuencia de com andos que Uama a los m étodos). U n método puede requerir información adi­
cional (argum entos) para realizar sus acciones; esta información se encierra entre paréntesis después del nom bre
del m étodo en la secuencia d e com andos. En las líneas 11 y 12 llamamos al m éto d o w r lte ln del objeto document
para escribir una línea de marcado de H T M L 5 en cl docum ento de H T M L 5. I>os paréntesis que van después del
nom bre del m étodo w r ite l n contienen ese argum ento que requiere el m étodo (en este caso, la cadena de H T M L 5
que el navegador va a m ostrar). El m étodo wri t e ! n instruye al navegador para que escriba la cadena del argum ento
en la página W eb para desplegarla. Si la cadena contiene elem entos de H T M L 5, el navegador interpreta estos ele­
mentos y los despliega en pantalla. En este ejemplo, el navegador muestra la frase B ienvenido a l a program ación
en J a v a S c rip t com o un encabezado de H T M L 5 de nivel h l, ya que la frase va encerrada en un elemento h l.
Instrucciones
Los elem entos de código en las líneas 11 y 12 (incluyendo document .w ri t e l n), su argum ento entre paréntesis
(la cadena) y el p u n to y co m a (}) se conocen en conju n to com o una in stru c c ió n . C ada instrucción term ina
con un p unto y com a (lo q u e tam bién se conoce com o te rm in a d o rd e in stru c c ió n ); aunque esta práctica no es
requerida por JavaScript, se recom ienda com o una form a de evitar problem as sutiles. La línea 14 indica cl final
de la secuencia de com andos. En la línea 15 las etiquetas <body> y </body> especifican que este docum ento de
H T M L 5 tiene un cuerpo vacío.
Buena práctica de programación 6.1
Hay que terminar cada instrucción con un punto y coma. Esta notación aclara en dónde termina una instrucáón y en dónde comienza la siguiente.
Error común de programación 6.1
Olvidar la etiqueta </SCript>de terminación puede evitar que el navegador interprete la secuencia
de comandos en forma correcta y que el documento de HTML 5 se cargue de manera apropiada.
Abra el docum ento de H T M L 5 en su navegador. Si la secuencia de com andos no contiene errores de sin­
taxis, se producirá cl resultado que se m uestra en la figura 6.1.
6.3
Cómo modificar su primera secuencia de comandos
189
Error común de programación 6.2
JavaScript es susceptible al uso de mayúsculas. No utilizar ¡as letras mayúsculas y minúsculas correctas produce
un error de sintaxis. Éste ocurre cuando el intérprete de la secuencia de comandos no puede reconocer una ins­
trucción. Par lo general el intérprete emite un mensaje de error para ayudarnos a localizary corregir ¡a instruc­
ción incorrecta. Los errores de sintaxis son violaciones de las reglas del lenguaje deprogramación. lil intérprete nos
notifica sobre un error de sintaxis cuando trata de ejecutar la instrucción que contiene el error. Cada navegador
tiene su propiaforma de mostrar ¡os errores de JavaScript. Por ejemplo, fírrjóx tiene la Consola de errores (estd
en su menú Desarrollador Web)y Chrome tiene la consola de JavaScript (en su menú Herramientas). Para ver
los erroresde secuencias de comandos en !E9, seleccione O p c i o n e s do I n t o m o t . del menú H e r r a m i e n t a s . En el
cuadro de didlogo que aparezca, seleccione laficha O p c i o n e s a v a n z a d a s y haga clic en ¡a casilla de verificación
M o s t r a r u n a n o t i f i c a c i ó n s o b r e c a d a e r r o r d e s c r l p t bajo la categoría E x a m i n a r .
T ip para prevenir errores 6.1
t
!«
Cuando el intérprete reporta un error de sintaxis, algunas veces el error no estd en la linea indicada por el men­
saje de error. Primero verifique la linea en la que se reportó el error. Si esa linea no contiene errores, retóse varias
de ¡as lineas anteriores en ¡a secuencia de comandos.
Utta nota sobre document-wrlteln
En este ejemplo mostramos un elemento h l de H T M L 5 en el navegador Web mediante el uso de document. wrl t e l n
para escribir el elemento en la página Web. Para simplificar bis cosas, en los capítulos 6 al 9 seguiremos haciendo
esto para enfocarnos en presentar los conceptos de programación fundamentales de JavaScript. ft>r lo general para mos­
trar contenido se modifica un ciernen to existente en una página Web; empezaremos a usar esta técnica en el capítulo 10.
Utta nota sobre incrustar código de JavaScript en documentos de H TM L5
En la sección 4.5 hablamos sobre los beneficios de colocar el código de CSS3 en hojas de estilos externas y vincularlas
a sus docum entos de H T M L 5. Por razones similares, el código de JavaScript se coloca por lo general en un archivo
reparado y luego se incluye en el docum ento de H T M I.5 que usa la secuencia de comandos. Esto mejora la capacidad
de reutilizar el código, ya que puede incluirse en cualquier docum ento de H T M L 5; éste es el caso con las diversas
bibliotecas de JavaScript que se utilizan en d desarrollo Web profesional en la actualidad. Empezaremos a separar el
código de CSS3 y de JavaScript en archivos individuales a partir del capítulo 10.
6.3
Cómo modificar su primera secuencia de comandos
Esta sección co n tin ú a nuestra introducción a la program ación en JavaScript con dos ejemplos que m odifican el
ejemplo de la figura 6.1.
Mostrar una Unea de texto coloreado
Una secuencia de comandos puede mostrar Bienvenido a l a programación en JavaScript de muchas formas.
La figura 6.2 muestra el texto en color magenta mediante el uso de la propiedad color de CSS. La mayor parte de
este ejemplo es idéntica a la figura 6.1, por lo que nos concentraremos sólo en las líneas 11 a 13 de bt figura 6.2, que
muestran una línea de texto en d documento. I a primera instrucción usa el método w r lte de document para mostrar
n ía cadena. A diferencia de wr1 t e l n, wri t e no coloca el cursor de salida en el docum ento de H T M L 5 al principio de
h siguiente línea después de escribir su argumento. [Nota: d cursor de salida mantiene el registro de la posición en la
que aparecerá el siguiente catácrcr en el marcado del docum ento, no la posición en donde aparecerá el siguiente carácter
en la página Web que despliegue el navegador]. El siguiente carácter escrito en el docum ento aparece justo después del
19 0
I
Capítulo 6
JavaScript introducción a las secuencias de comandos
<!D0CTYPE html>
<!— Fig. 6 .2 : bienvenido2.html —>
< ! - - Imprimir una l i n e a con v a r ia s In s tr u c c io n e s . -->
<html>
<head>
<meta c h a r s e t ■ "utf-8">
<t1tle>Im prim ír una l&1acute;nea con v a r ia s 1n stru cc1o n es< /t1tle>
<scr1pt>
document.wrlteC "<H1 s t y l e ■ 'c o lo r: magenta'»" );
document.writ e ( "Bienvenido a l a programaclón " +
"en 3avaScr1pt</hl>" );
</scr1pt>
</hea d> <body ></body >
</html>
C
Q)
magenta
¿ j filr///Xycjcm olos/cap06/fi906.0?/bienvcnido2 htmi
=
u^ende* ü Wtb $* e Gilkry Q topo**)* de Intem..
• . .
..
• •
m i ’in e m u o
a
■la
99
ju n a r a m a c m n
f
o __ 9
v n
Figura 6 .2 | Imprimir una línea con instrucciones separadas.
último carácter escrito con w rlte. Así, cuando se ejecutan las lincas 12 y 13, el primer carácter escrito (“W") aparece
justo después del últim o carácter mostrado con wr 1t e (el carácter > dentro de la com illa doble derecha en la línea 11).
Cada instrucción w rlte o w rlte ln continúa escribiendo caracteres en donde se detuvo la última instrucción w rite
o wr1 t e l n. Así, después de una instrucción wr1 t e l n, la siguiente salida aparece al principio de la siguiente linca. Por
ende, las dos insmiccioncs en las líneas 11 a 13 resultan en una línea de rcxto de H TM L5. Recuerde que en JavaScript
las instrucciones se separan mediante signos de punto y coma (;). IY>r lo tanto, las líneas 12 y 13 sólo representan una
instrucción completa. JavaScript permite dividir instrucciones extensas en varias líneas. En la línea 12, el operador +
(conocido com o “operador de concatenación" aran d o se usa de esta forma) une dos cadenas; en breve lo explicaremos
con más detalle.
Error común de programación 6.3
Dividir una instrucción de JavaScript en medio de una cadena es un error de sintaxis.
m
La discusión anterior no tiene nada que ver con el verdadero despliegue del texto de H T M L 5- Recuerde q u e el
navegador no crea una nueva línea de texto a menos que b ventana sea demasiado estrecha para el texto que se
va a desplegar o si el navegador encuentra un elem ento de H T M L 5 que inicie de m anera explícita una nueva
línea; por ejem plo, <p> para iniciar u n nuevo párrafo.
Error común de programación 6.4
jr
‘
Muchas personas confunden la escritura de texto de HTML5 con el despliegue de texto de HTML"). A l escribir
texto de HTML5 se crea el HTML5 que el navegador desplegará para presentarlo al usuario.
6.3
Cómo modificar su primera secuencia de comandos
19 1
A n id a r m arcas de com illas
Recuerde que podem os delim itar una cadena m ediante caracteres de comilla sencilla ( ') o doble ( ”). D entro de
una cadena no podem os anidar comillas del m ism o tipo, pero sí del otro tipo. Una cadena delimitada por comillas
dobles puede contener comillas sencillas. D e manera similar, una cadena delimitada por comillas sencillas puede
contener comillas dobles anidadas. La línea 11 anida comillas sencillas dentro de una cadena entre comillas dobles
para encerrar entre comillas el valor del atributo s t y l e en el elemento hL
M ostrar texto en u n diálogo de alerta
Las primeras dos secuencias de com andos en este capítulo m uestran texto en el docum ento de H T M L 5. Algunas
veces es útil m ostrar inform ación en ventanas conocidas com o diálogos (o cuadros d e diálogo) que “aparecen"
en la pantalla para llamar la atención del usuario. Por lo general los diálogos m uestran mensajes im portantes a los
usuarios que navegan por la página W eb. JavaScript nos permite m ostrar con facilidad un cuadro de diálogo que
contiene un mensaje. La secuencia de com andos en la figura 6 .3 muestra B ienvenido a l a program ación en
J a v a S c rip t com o tres líneas en un diálogo predefinido, conocido com o diálogo a l e r t .
I
< !DOCTYPE ht«il>
2
3
4
3
6
7
8
9
10
11
12
13
14
13
16
17
18
< ! - - Fig. 6 .3 : bienvenido3.html —>
< ! — Diálogo de a l e r t a que muestra v a r ia s l i n e a s . —>
<ht»l>
<head>
<neta c h a rs e t = " u t f - 8 M>
< title> Im p rim ir v a ria s 1íneas
<scr1pt>
en un cuadro de di& aacute;logo< /t1tle>
w in d o w .alert( "Bienvenido a \ n l a programadón\nen Jav aS cript" );
</scr1pt>
</bead>
<body>
<p>Recargue l a página para e j e c u t a r
</body>
</html>
de nuevo e s t a
secuencia de comandos.</p>
Barra de título
A! hacerclic en el betón
Aceptar seCierra el ddlogo
la
enJevafcret
rscr del ratón
Figura 6 .3 | Diálogo de alerta que muestra varias lineas.
E l o b jeto wlndow
La finca 11 en la secuencia de com andos usa el objeto wlndow del navegador para m ostrar u n diálogo d e alerta.
El argum ento para el m étodo a l e r t del objeto wlndow es la cadena a m ostrar. Al ejecutar la instrucción anterior
se m uestra el diálogo que aparece en la figura 6.3. La barra de título de este diálogo d e C h ro m e contiene la
cadena A le rta de Jav aS crip t para indicar q u e el navegador va a presentar un m ensaje al usuario. El diálogo
a te n ta con un b o tó n Aceptar que perm ite al usuario descartar (es decir, cerrar) el diálogo al hacer d ic en
él. Para cerrar el diálogo, p o sid o n e el cursor del ratón (tam bién conocido com o puntero del ratón) sobre el
19 2
Capítulo 6
JavaScript introducción a las secuencias de comandos
botón A cep tar y haga clic en el ratón, o puede o p rim ir la tecla Intro. EJ contenido del diálogo varía según el
navegador. l\ie d e actualizar la página para ejecutar la secuencia de com andos o tra vez.
Secuencias de escape
El diálogo a l e r t en este ejem plo contiene tres líneas de texto simple. N orm alm ente un diálogo m uestra los
caracteres de una cadena justo com o aparecen. Sin em bargo, el diálogo no m uestra los caracteres \n (línea 11).
La b arra d iag o n al in v ersa ( \) en una cadena es un carácter de escape. Indica que se va a usar u n carácter
“especial” en la cadena. C uando se encuentra una diagonal invertida en una cadena, cl siguiente carácter se
com bina oon esa barra inversa para form ar una secuencia d e escape. La secuencia de escape \n es el carácter d e
n u ev a línea, el cual hace que el c u rso r (el indicador de la posición actual en la pantalla) se mueva al principio
de b siguiente línea en el diálogo. E n la figura 6.4 se m uestran algunas otras secuencias d e escape com unes de
JavaScript. Las secuencias d e escape \ n y \ t en la tabla n o afectan cl despliegue de H T M L5 a menos que se en­
cuentren en un e lem en to p re (este elem ento m uestra el texto entre sus etiquetas en una fuente d e anchura fija,
justo com o aparece el form ato entre bs etiquetas, incluyendo los caracteres de espacio en b b n c o a b izquierda
y los caracteres de espacio en b b n co consecutivos).
Secuencia de escape
Descripción
V*
Nueva linea: coloca cl cursor de la pantalla al principio de la siguiente línea.
\t
Tabulador horizontal: mueve el cursor de la pantalla al siguiente tope de tabulador.
W
Barra diagonal inversa: se usa para representar un carácter de barra diagonal inversa en
una cadena.
V
Camilla doble se usa para representar un carácter de comilla doble en una cadena
contenida entrecomillas dobles. Por ejemplo, «rindo*. a l€ r t( " \Mentre comillas
dobles Y*“) ; muestra “entre comillas dobles” en un diálogo a le r t.
V
Comilla sencilla: se usa para representar un carácter de comilla sencilla en una cadena.
Por ejemplo, «rindo*. a le r t ( 'V e n tre c o m illa s sen clllasV ’) : muestra #entre
comillas sencillas* en un diálogo a le rt.
Figura 6.4 | Algunas secuencias d« escape comunes.
6.4
Cómo obtener la entrada del usuario mediante diálogos prompt
Las secuencias d e com andos nos d a n la habilidad de generar parte de. o todo cl contenido d e una página W eb al
m om ento de m ostrarla al usuario. U na secuencia de com andos puede adaptar el contenido con base en la entra­
da del usuario o de otras variables, com o la hora del día o cl tipo de navegador utilizado por cl cliente. Se dice
que dichas páginas W eb son dinámicas en vez de estáticas, ya q u e su contenido tien e b Habilidad de cambiar.
Las siguientes dos subsecciones utilizan secuencias de com andos para dem ostrar b s páginas W eb dinám icas.
6.4.1
Página de bienvenida dinámica
N uestra siguiente secuencia de com andos crea una página de bienvenida dinám ica que obtiene el nom bre de
usuario y luego lo m uestra en la página. La secuencia de com andos usa o tro cuadro de diálogo predefinido del
objeto window (un diálogo p ro n p t), el cual perm ite al usuario introducir un valor que b secuencia de com an­
dos puede utilizar. La secuencia de com andos p id e al usuario que escriba un nom bre y luego lo m uestra en el
6.4
Cómo obtener la entrada del usuario mediante diálogos prompt
193
docum ento de H T M L 5 . La figura 6.5 presenta la secuencia de com andos y el resultado de ejemplo. E n capí­
tulos posteriores obtendrem os entradas m ediante com ponentes d e G U I en form ularios de H T M L 5 , com o se
introdujo en los capítulos 2 y 3.
1 <! DOCTYPE ht«il>
2
3 <1— Fig. 6.S: bienvenido4.html -->
4 <1-- Cuadro ind icad or u t i l i z a d o en una p a n ta lla de bienvenida -->
3 <hutl>
6
<head>
7
<»eta c h a rset = "utf-8">
8
<title>U so de cuadros prompt y a l e r t < / t i t l e >
9
< script>
10
11
v a r nombre; / / cadena in tro d u c id a por e l usuario
12
13
/ / l e e e l nombre del cuadro prompt como una cadena
14
nombre » window.prompt( "Escriba su nombre" );
15
16
17
18
19
20
21
document.writ e l n ( "<hl>Hola " ♦ nombre ♦
", bienvenido a l a programadAoacute;n en 3avaScr1pt</hI>" );
</scr1pt>
</head><body></body>
</ht*l>
C
—
JavaS cript
Dd
A ccpU c
al
Cyiceir
..
¡ Uio df ca8^o»p»om^> * ,
C
l
21 S«t#oi lu ^ ex iet
1 rile///X7cj«fnploVcap06/fig06.0S/bi«nvcm do4iitm l
s
m
P® &
=
[2 W t b t t u f e l f f y Q I m p e l o (JeWiffri.
H o la J i m , b i e n v e n i d o a la p r o g r a m a c i ó n en J a v a S c r i p t
Figura 6 .5 | Cuadro de mensaje utilizado en una pantalla de bienvenida.
Declaraciones, palabras clavey variables
La linca 11 es una declaración q u e contiene la p alab ra clave v a r d e JavaScript. Las palabras clave son palabras
que tienen un significado especial en JavaScript. La palabra clave v a r ai principio d e la instrucción indica que
la palabra nombre es una variable. Ésta es una ubicación en la m em oria de la com putadora en d o n d e puede
almacenarse u n valor para q u e lo utilice una secuencia de com andos. Todas las variables tienen un nombre y un
valor, y deben declararse con una instrucción v a r antes de usarlas en una secuencia de com andos.
Capítulo 6
19 4
JavaScript introducción a las secuencias de comandos
Identificadores y susceptibilidad a l uso de mayúsculas
El nom bre d e una variable puede ser cualquier id e n tific a d o r válido. U n ¡dentifkador es una serie d e caracte­
res com puesta por letras, dígitos, guiones bajos (_) y signos de dólar ($) que tío com ienza con un dígito y no
es una palabra reseñada de JavaScript. [Nota: en la figura 7.2 encontrará una lista com pleta de palabras clave
reservadas]. Los identificadores no pueden contener espacios. Algunos identificadores válidos son: Bienveni­
do, Svalor, _valor, m_campoEntradal y boton7. El nom bre 7boton no es un identificador válido puesto que
empieza con un dígito; el nom bre campo en trad a tam poco es válido porque con tien e un espacio. Recuerde
que JavaScript es susceptible al uso d e m ayúsculas; las letras mayúsculas y minúsculas se consideran distintos
caracteres, por lo que nombre, Nombre y NOMBRE son distintos identificadores.
Buena práctica de programación 6.2
B egr nombres de variables significativos ayuda a que una secuencia de comandos se "autodocumente"
(es deár, que seafdcil de entender con sólo leer la secuencia de comandos)
Buena práctica de programación 6.3
Jbr convención, los identificadores de nombres de variables comienzan con la primera letra en minúscula. Cada
palabra subsiguiente debe empezar con ¡a primera letra en mayúscula. Por ejemplo, el identificador p r t c l o A r t l c u l o tiene una A mayúscula en su segunda palabra. A r t i c u l o .
f
*
Error común de programación 6.5
Dividir una instrucción a la mitad de un identificador es un error de sintaxis.
Las declaraciones term inan con u n punto y coma y pueden dividirse en varias líneas, con cada variable en la de­
claración separada por una coma-, a esto se le conoce com o lista de nom bres de variables sep arad a p o r com as.
Es posible declarar varias variables en una o en m últiples declaraciones.
Comentarios de JavaScript
Es conveniente indicar el propósito de cada variable en b secuencia de comandos; para ello se coloca un comentario
de JavaScript al inicio de cada línea en b declaración. En b línea 11, un com entario de una sola línea que comienza
con los caracteres / / establece el propósito de b variable en b secuencia de comandos. Esta forma de comentario
se conoce como comentario de una sob línea ya que termina al final de b línea en b que aparece. Un comentario / /
puede comenzar en cualquier posición de una línea de código de JavaScript y continúa hasta el final de esa línea. Los
comentarios no hacen que el navegador realice ninguna acción al m om ento de interpretar b secuencia de comandos;
por el contrario, el intérprete de JavaScript ignora los comentarios.
Buena práctica de programación 6.4
Aunque no es obligatorio, a conveniente declarar cada variable en una linea separada. Esto permite insertar con
facilidad un comentario al lado de cada declaración. Éste es un estándar de codificación profesional muy popular.
Comentarios de múltiples lineas
Tam bién podem os escribir c o m e n ta rio s d e m ú ltip le s líneas, fo r ejem plo,
/ * Este es un comentario
de m ú ltip le s lín e a s . Puede
d i v i d i r s e en v a ria s lin e a s • /
6.4
Cómo obtener la entrada del usuario mediante diálogos prompt
195
es u n co m en tario de m últiples líneas q u e se distribuye en varias líneas. D ich o s co m en tario s com ienzan
con el d e lim itad o r /* y term in an con el d elím itad o r * /. El in térp rete ignora todo el tex to en tre los d elim i­
tadores del com entario.
JavaScript adoptó los com entarios delimitados con /* y * / del lenguaje de program ación C , y los com entarios
de una sola línea que se delimitan oon / / del lenguaje de program ación C+ ♦. Por lo general, los programadores de
JavaScript prefieren los com entarios de una sola linca estilo C++ a los com entarios estilo C . En este libro usaremos
com entarios de una sola línea estilo C++.
El método prompt del objeto wlndo*
La línea 13 es un com entario que indica el propósito de la instrucción en la siguiente línea. La línea 14 llama
al m étodo prompt del objeto window, el cual m uestra el diálogo de la figura 6.6. E ste diálogo perm ite al usuario
escribir una cadena que representa su nom bre.
escribe el usuario en
el di logo de alerta
valor que escribió se devuelve al programa
como ina cadena
Figura 6.6 | Diálogo de indicador mostrado por el método prompt del objeto window.
El argum ento para prom pt especifica u n mensaje que indica al usuario lo que debe escribir en el cam po de
Kxto. E ste m ensaje se conoce com o indicador debido a que indica al usuario que realice una acción específica.
Un segundo argum ento opcional, separado del prim ero p o r una com a, puede especificar la cadena predeterm i­
nada a m ostrar en el campo de texto; nuestro código no proporciona un segundo argum ento. En este caso la
mayoría de los navegadores dejan cl cam po de texto vacío e Internet Explorer m uestra cl valor predeterm inado
undefined. El usuario escribe los caracteres en cl cam po de texto y luego hace clic en cl b o tó n A cep tar para
enviar la cadena a b secuencia de com andos. Por lo general recibim os b entrada del usuario por m edio d e un
com ponente de G U I, com o el diálogo prompt en esta secuencia de com andos, o por m edio de u n com ponente
de G U I d e form ubrio de H T M L 5 , com o veremos en capítulos posteriores.
El usuario puede escribir cualquier cosa en el cam po de texto del diálogo prompt. Para esta secuencia de
com andos, lo que el usuario escriba se considera com o el nom bre. Si el usuario hace clic en el b o tó n C a n c e la r
no se enviará ningún valor a b secuencia d e com andos. En su defecto, el diálogo prom pt envía el valor n u il:
una p a b b ra clave d e JavaScript para indicar q u e una variable no tiene valor. H ay que tener en cuenta que nuil
no es una literal de cadena sino un térm ino predefinido que indica b ausencia de valor. Sin em bargo, al escribir
un valor nuil en el docum ento se m uestra b p a b b ra nu il en b página Web.
O perador de asignación
La instrucción en la línea 14 asigna el valor devuelto por el m étodo prompt del objeto wlndow (una cadena que
aonticne los caracteres escritos por el usuario; o el valor predeterm inado o nul 1 si el usuario hace clic en el b o tó n
C an c elar) a b variable nombre m ediante cl aso del a p e ra d o r d e asig n ació n *. La instrucción se lee así: “nombre
19 6
Capítulo 6
JavaScript introducción a las secuencias de comandos
recibe el valor desuello por window.prompt("Escriba su nombre")”. El o p erad o r» se conoce com o o p e ra d o r
b in a rio ya que cieñe dos o p eran d o s: nombre y el resultado de la expresión wi ndow.prompt("Escriba su nom­
b r e " ). Toda esa instrucción se conoce com o asig n ació n , ya que asigna un valor a una variable. La expresión a
la derecha del operador de asignación siem pre se es-alúa primero.
Buena práctica de programación 6.5
Coloque un espacio en cada lado de un operador binario. Esteformato hace que el operador sobresalga y
mejora ¡a legibilidad de ¡a secuencia de comandos.
Concatenación de cadenas
Las líneas 16 y 17 usan document.writeln para m ostrar el nuevo mensaje de bienvenida. La expresión dentro
de b s paréntesis usa el operador + para "sum ar” una cadena (la literal ” <hl>Hola, " ), la variable nombre ( b cade­
na que el usuario in trodujo en b línea 14) y o tra cadena (la literal " , bienvenido a l a programaciSoacute ;n
en DavaScript<hl>"X JavaScript tiene una versión del operador + para co n caten ació n de cad en as, el cual
perm ite com binar una cadena y un v a b r de otro tipo de datos (incluyendo o tra cadena). El resultado de esta
operación es una nueva cadena (por lo general más larga). Si suponem os que nombre con tien e la literal de cade­
na " Jim", la expresión se evalúa de la siguiente manera: JavaScript determ ina que b s dos operandos del prim er
operador + ( b cadena "<hl>Hola , " y el v a b r d e b variable nombre) son am bos cadenas, entonces b s concate­
n a en una sola cadena. A continuación, JavaScript determ ina que b s dos operandos del segundo operador + (el
resultado d e b prim era operación de concatenación, b cadena "<hl>Hola, Jim" y la cadena " , bienvenido a
l a programad Aoacute ;n en Ja v a S c rip t< /h l> " ) son am bos cadena y se concatenan. El navegador despliega
esta cadena com o parte del docum ento d e H T M L 5 . O bserve q u e el espacio entre Hola, y Jim es parte de la
cadena "<hl>Hola, ".
Com o veremos más ad eb n te, el operador + que se utiliza para concatenación de cadenas puede convertir
otros tipos de variables en cadenas si es necesario. C om o b concatenación de cadenas ocurre entre dos cadenas,
JavaScript debe convertir otros tipos de variables en cadenas antes de poder condnuar con b operación. Por ejemp b ,s i una variable llamada edad tiene un v a b r entero igual a 21, entonces b expresión "mi edad e s " ♦ edad
se evalúa com o b cadena "mi edad es 21". JavaScript convierte el v a b r de edad en u n a cadena y la concatena
con b literal de cadena existente "mi edad es".
Una vez que el navegador interpreta b sección <head> del docum ento d e H T M L 5 (que contiene el código
de JavaScript), interpreta el elem ento <body> del docum ento de H T M L 5 (que está vacío; línea 20) y despliega
el H T M L 5 . La página de H T M L 5 no se despliega sino hasta que se cierra el indicador, ya que éste detiene
la ejecución en el elem ento head, antes de procesar e l elem ento body. Si recarga b página después de introducir
un nom bre, el navegador ejecutará b secuencia de com andos de nuevo y usted podrá cam biar el nom bre.
6 .4 .2
Sum a de enteros
N uestra siguiente secuencia de com andos ilustra o tro uso de b s d iá b g o s prom pt para obtener la entrada del
usuario. La figura 6.7 introduce dos enteros (núm eros enteros com o 7, —1 1 ,0 y 31914) escritos p o r un usuario
m ediante el tecbdo, cakrub b sum a de b s v abres y m uestra el resultado.
Las líneas 11 a 15 d ecb ra n b s variables primerNumero, segundoNumero, numerol, numero2, y suma. Los co­
m entarios de una s o b línea indican el propósito de cada una de estas variables. La línea 18 emplea u n d iá b g o
prompt para que el usuario pueda in tro d u cir una cadena q u e representa el prim ero de b s dos enteros que se van
asu m a. La secuencia de com andos asigna el prim er v a b r introducido por el usuario a b variable primerNumero.
6.4
Cómo obtener la entrada del usuario mediante diálogos prompt
197
La línea 21 m uestra un diálogo prompt para o b ten er el segundo núm ero a sum ar y asigna este valor a la variable
segundoNumero.
I
<!DOCTYPE htm1>
<1— Fig. 6 .7 : suma.html -->
< 1-- Secuencia de comandos de suma. -->
<html>
<head>
<meta c h a rs e t » "utf-8">
<title>Un programa de suma</title>
< script>
var
var
var
var
var
primerNumero; / / primera cadena in tro d u c id a por e l usuario
segundoNumero; / / segunda cadena in tro d u c id a por el usuario
numerol; / / primer número a sumar
numero2; / / segundo número a sumar
suma; / / suma de numerol y numero2
/ / le e e l primer número del u su a rio como una cadena
primerNumero = window.prompt( "Escriba el primer entero" );
20
21
/ / l e e e l segundo número del usuario como una cadena
segundoNumero - window.prompt( "Escriba el segundo entero" ) ;
22
23
24
23
26
27
28
29
30
31
32
33
34
/ / c o n v ie rte lo s números de cadenas a en teros
numerol - parselntC primerNumero );
numero2 = parselntC segundoNumero );
suma = numerol + numero2; / / suma lo s números
/ / muestra lo s resu ltad o s
docum ent.w riteln( "<hl>La suma es tt + suma + "</hl>" );
</scr1pt>
</head> <body></body>
</ht«l>
CKr*M t f p n m tr eme»o
4S
i
Figura 6 .7 | Secuencia de comandos de suma (parte l de 2)
19 8
Capítulo 6
JavaScript introducción a las secuencias de comandos
OC
P O*
C
Me//
X
npíos/cap06/í.gC^
5 S#tci sugerido» Q V\«b Sbc«6*§*y
3 |
-
L a s u m a es 117
Fig ura 6 .7 | Secuencia de comandos de suma (parte 2 de 2).
C om o en el ejem plo anterior, el usuario puede escribir cualquier cosa en el diálogo prompt. Para esta
secuencia de com andos, si el usuario escribe un valor que no sea entero o hace clic en el b o tó n Cancelar se
producirá un error lógico y la sum a d e los dos valores aparecerá en el docum ento de H T M L 5 com o NaN (lo que
significa no es u n número). U n error lógico es provocado por código con una sintaxis correcta que produce un
resultado incorrecto. En el capítulo 11 hablarem os sobre el objeto Number y sus m étodos que pueden determ inar
á un valor es un núm ero.
Recuerde que un diálogo prompt devuelve a la secuencia de com andos el valor escrito por el usuario en
form a de cadena. Las líneas 2 4 y 25 convierten las dos cadenas introducidas por el usuario en valores enteros
que pueden usarse en un cálculo. La función p a r s e l n t convierte su argum ento tipo cadena en un entero. La
línea 24 asigna a la variable numerol el entero que devuelve la función p a rs e ln t. D e m anera similar, la línea 25
asigna un valor entero a la variable numero2. N os referimos a p a r s e ln t com o una función y no com o un m éto­
do debido a q u e no anteponem os a la llamada d e la función el nom bre de un objeto (com o document o window)
y un p unto (.). El térm ino m étodo significa que la función pertenece a un objeto específico. Por ejem plo, el
m étodo w r i t e l n pertenece al objeto document y el m étodo prompt pertenece al objeto window.
La linca 27 calcula la sum a de las variables numerol y numero2 m ediante el uso del operador de suma +;
adem ás asigna el resultado a b variable suma m ediante el uso del operador de asignación =. C abe m encionar
que el operador + puede realizar tanto operaciones de sum a com o concatenación de cadenas. En este caso el
operador + realiza una sum a, ya que ambos operandos contienen enteros. Después d e que la línea 27 realiza este
cálculo, b línea 3 0 asa document .w rite l n para m ostrar el resultado de b sum a en la página Web.
Error común de programación 6.6
Confundir ti operador ♦ utilizado para concatenación de cadenas con d operador ♦ que se utiliza para sumas
produce a menudo multados no deseados. Por ejemplo, si ¡a variable entera y tiene el valor 5. la expresión y ♦ 2
- " +y * 2 resulta en "y * 2 = 52" y no en "y * 2 = 7" .ya queprimero se concatetia el valor de y (es deár, 5)
con la cadena "y ♦ 2 = "y luego se coruatena el valor 2 con ¡a nueva cadena más larga "y* 2 - 5 La expresión
"y * 2 - " + (y * 2) produce la cadena "y + 2 * 7 " debido a que losparéntesis aseguran que se calculey ♦ 2.
Validación de JavaScript
C om o vim os en el prefacio, para validar nuestro código usamos herram ientas de validación de H T M L 5 , CSS3
y JavaScript. E n general, los navegadores son m uy tolerantes y no m uestran los mensajes de error al usuario.
C om o program ador, usted debe probar de m anera exhaustiva sus páginas Web y validarlas. Las herram ientas de
validación reportan dos tipos de mensajes: errores y advertencias. Por lo general debe resolver los errores; d e lo
contrario tal vez sus páginas Web no se desplieguen o ejecuten en form a correcta.
Las páginas con advertencias com únm ente se despliegan y ejecutan en form a correcta, sin embargo, algunas
organizaciones tienen protocolos estrictos para indicar que todas b s páginas deben estar libres ta n to de adver­
tencias com o de errores antes de poder publicarlas en un sitio W eb de producción.
6.5
Conceptos de la memoria
199
Si valida este ejemplo en w w w .ja v a s c rip tlin t.c o m , las líneas 24 y 25 producen el siguiente mensaje de
advertencia:
p a r s e l n t m issin g ra d ix p aram eter
La función p a r s e l n t tiene un segundo parám etro opcional conocido com o raíz o base ( nulix ), que especifica
d sistem a num érico base q u e se utiliza para analizar el núm ero (por e je m p b , 8 para octal, 10 para decim al
y 16 para hcxadecimal). El valor predeterm inado es base 10, pero podem os especificar cualquier base desde
2 hasta 32. Por e je m p b , la siguiente instrucción indica que debem os considerar a primerNumero com o un
entero decimal (base 10):
numerol = p a r s e l n t ( primerNumero, 10 ) ;
Esto evita que b s núm eros en otros form atos com o octal (base 8) se conviertan a v ab res incorrectos.
6.5
Conceptos de la memoria
Los nom bres de variables com o num erol, numero2 y suma en realidad corresponden a u b icacio n es en la m em o ­
ria de la com putadora. C ada variable tiene u n n o m b re, un tip o y un valor.
En la secuencia de com andos de sum a de la figura 6 .7 , cuando se ejecuta la línea 24 b cadena prim e rNume­
ro (que el usuario introdujo anteriorm ente en un d iá b g o prompt) se convierte en un entero y se c o b c a en una
ubicación de Li m em oria a la que el intérprete asignó el nom bre num erol. Suponga que el usuario introdujo b
cadena 45 com o el v a b r para primerNumero. La secuencia de com andos convierte primerNumero en un entero
y b com putadora c o b c a el v a b r entero 45 en b ubicación num erol, com o se m uestra e n b figura 6.8. Cada
vez que se co b c a un v a b r en una ubicación de b m em oria, el valor sustituye al v a b r anterior que estaba en esa
ubicación. EJ valor anterior se pierde.
numerol
45
Figura 6.8 | Ubicación de la memoria que muestra el nombre y el valor de la variable numerol.
Suponga que el usuario introduce 72 com o el segundo entero. Al ejecutar b línea 25. b secuencia d e com andos
convierte segundoNumero en un entero y c o b c a ese v a b r entero 72 en la ubicación numero2; entonces b m em o ­
ria aparece com o se m uestra en b figura 6.9.
nurrwrol
45
numero2
72
Figura 6.9 | Las ubicaciones de la memoria después de introducir valores para las variables numero I y numero2.
Una vez que la secuencia de com andos obtiene v ab res para numerol y numero2, sum a esos v ab res y co b ca
b sum a en b variable suma. La instrucción
200
Capitulo 6
JavaScript introducción a las secuencias de comandos
suma • num erol + numero2
realiza la sum a y tam bién sustituye el valor anterior de suma. D espués de calcular la suma, la m em oria aparece
com o se m uestra en la figura 6.10. Observe que los valores de num erol y numero2 aparecen justo com o estaban
antes de usarlos en el cálculo de suma. E stos valores se usaron pero no se destruyeron cuando la com putadora
realizó el cálculo; al leer un valor de una ubicación d e la m em oria cl proceso es no destructivo.
num eral
45
numera?
72
suma
117
Figura 6.10 | Las ubicaciones de la memoria después de calcular la suma de numero I y numero2.
Tipos de datos en JavaScript
A diferencia de sus lenguajes antecesores C , C+» y Java. JavaScript no requiere que las variables tengan un tipo
declarado antes de poder usarlas en una secuencia de comandos. Una variable en JavaScript puede contener u n valor
de cualquier tipo de datos; en m uchoscasosJavaScript realiza conversiones de manera autom ática entre valores de
distintos tipos por usted. Debido a esto. JavaScript se considera un lenguaje d é b ilm e n te tipificado. Si se declara
una variable en JavaScripr pero no se le asigna un valor, esa variable tiene u n valor indefinido. Por lo general,
intentar usar cl valor de dicha variable es u n error lógico.
Al declarar las variables, no recibirán un valor sino hasta que usted lo especifique. Al asignar el valor nu 11 a una
variable indicamos que no contiene un valor.
6.6
Aritmética
M uchas secuencias de com andos realizan cálculos aritm éticos. La figura 6.11 sintetiza los o p erad o res a ritm é ti­
cos. Observe el uso de varios sím bolos especiales que no se utilizan en álgebra. El asterisco (*) indica m ultiplica­
ción; cl sig n o d e p o rc e n ta je (%) es el o p e ra d o r d e residuo, que veremos en breve. Los operadores aritm éticos
de la figura 6.11 son operadores binarios, ya que cada u n o opera sobre dos operandos. Por ejem plo, la expresión
suma + v a lo r contiene el operador binario ♦ y los dos operandos suma y v a lo r.
Operación
en JavaScript
Operador
aritmético
Expresión
algebraica
Expresión
en JavaScript
Suma
♦
/♦ 7
f ♦ 7
Resta
-
p -c
P -c
Multiplicación
•
bm
b • m
División
/
xfy o j o x+ y
x / y
Residuo
X
r mod s
r% s
Figura 6.11 | Operadores aritméticos.
6.6
Aritmética
201
Operador residuo, %
JavaScript cuenta con el operador residuo X, que produce el residuo después de la división, l a expresión xXy
produce el residuo después de dividir x entre y. Así. 17X5 produce 2 (es decir, 17 dividido entre 5 es 3, con
un residuo de 2) y 7.4X3.1 produce 1.2. En capítulos posteriores consideraremos algunas aplicaciones del
operador residuo, como determinar si un número es múltiplo de otro. N o existe un operador aritmético para la
exponenciación en JavaScript (en el capítulo 8 veremos cómo realizar la exponcnciación en JavaScript mediante
d método pow del objeto Math).
En JavaScript, las expresiones aritméticas deben escribirse en forma de línea recta para facilitar la introduc­
ción de secuencias de comandos en la computadora. Por ende, expresiones como "a dividida entre b" deben
escribirse como a / b de modo que todas las constantes, variables y operadores aparezcan en linea recta. Por lo
general, la siguiente notación algebraica no es aceptable para las computadoras:
a
b
Los paréntesis se usan para agrupar expresiones de la misma forma que en las expresiones algebraicas. Por ejem­
plo, para multiplicar a por la cantidad b+c escribimos:
a * (b + c ) .
Precedencia de operadores
JavaScript aplica los operadores en las expresiones aritméticas en una secuencia precisa, la cual se determina
mediante las siguientes reglas de p recedencia de o p e ra d o re s, que por lo general son iguales que las que se
siguen en álgebra:
1. Las operaciones de multiplicación, división y residuo se aplican primero. Si una expresión contiene varias
operaciones de multiplicación, división y residuo, los operadores se aplican de izquierda a derecha. Se
dice que las operaciones de multiplicación, división y residuo tienen el mismo nivel de precedencia.
2. Las operaciones de suma y resta se aplican después. Si una expresión contiene varias operaciones de suma
y resta, los operadores se aplican de izquierda a derecha. Las operaciones de suma y resta tienen el mismo
nivel de precedencia.
Gracias a las reglas de precedencia de los operadores, JavaScript puede aplicar los operadores en el orden correc­
to. Cuando decimos que los operadores se aplican de izquierda a derecha, nos referimos a su asociatividad: el
orden en el que se evalúan los operadores de igual prioridad. Después veremos que algunos operadores se asocian
de derecha a izquierda. La figura 6.12 sintetiza las reglas de precedencia de operadores. La tabla en la figura 6.12
se expandirá a medida que introduzcamos operadores adicionales de JavaScript. En el apéndice C se incluye una
tabla de precedencia completa.
Opcrador(cs)
Operación(es)
Orden de evaluación (precedencia)
• ,/o %
Multiplicación
División
Residuo
Se evalúa primero. Si hay varias de esas op­
eraciones, se evalúan de izquierda a derecha.
♦ O-
Suma
Resta
Se evalúa al último. Si hay varias de esas op­
eraciones, se evalúan de izquierda a derecha.
Figura 6.12 | Precedencia de los operadores aritméticos.
202
Capítulo 6
JavaScript introducción a las secuencias de comandos
C onsiderarem os varias expresiones algebraicas. C ad a ejemplo lista una expresión algebraica y la expresión
equivalente en JavaScript.
El siguiente es un ejemplo de una media aritm ética (prom edio) de cinco térm inos:
.■ i
Algebra:
*e
m = a * b * c * d- ----
JavaScript:
n = ( a
+ b + C+ d + e ) / 5 ;
Se requieren paréntesis para agrupar los operadores de sum a, ya que la división tiene m ayor precedencia
que la suma. H ay que dividir la cantidad completa (a+b+x+d+e) entre 5. Si se o m iten los paréntesis por error,
obtendrem os a+b+c+d+e/5, lo o jal se evalúa com o
a+b+c+d+-
y no se obten d ría la respuesta.
El siguiente ejemplo es la ecuación de una línea recta:
Algebra:
y = mx * b
JavaScript:
y = ni * x + b;
N o se requieren paréntesis. El operador d e m ultiplicación se aplica prim ero, ya que la m ultiplicación tie­
ne m ayor precedencia que la suma. La asignación ocurre al últim o ya que tien e una m enor precedencia que
la m ultiplicación y la suma.
Al igual que en álgebra, es aceptable usar paréntesis innecesarios en una expresión para hacerla más clara.
A éstos tam bién se les llam a parén tesis re d u n d a n te s. Por ejem plo, para representar el siguiente polinom io de
segundo grado podríam os aplicar paréntesis así:
y = ( a * x * x ) + ( b * x ) + c ;
6.7
Toma de decisiones: operadores de igualdad y relaciónales
En esta sección introducimos una verdón de la instrucción 1f de JavaScript, la cual permite que una secuencia de co­
mandas tome una decisión con base en La verdad o falsedad de una condición. Si se cumple la condición (es decir, si es
verdadera) se ejecuta b instrucción en el cuerpo de b instrucción i f . Si no se cum ple b condición (es decir, si es falsa),
no se ejecuta b instrucción del cuerpo de b instrucción 1f. En breve veremos un ejemplo.
Las condiciones en Las instrucciones 1 f pueden formarse m ediante el uso de los o p e ra d o re s de ig u a ld a d
y los a p e ra d o re s relaciónales que se sintetizan en la figura 6.13. Todos b s operadores rebcionales tienen el
mismo nivel d e precedencia y se asocian de izquierda a derecha. Ambos operadores de igualdad tienen el m ism o
nivel d e precedencia, que es más bajo q u e b precedencia de b s operadores rebcionales. Los operadores de igual­
dad tam bién se asocian de izquierda a derecha. C ada com paración produce un v a b r tr u e o f a l se.
Error común d€ programación 6.7
Confi/ndir el operador de igualdad — con el operador de asignación ■ es un error lógica El operador de igualdad
debe leerse como "es igual a”y el operador de asignación debe leerse como "obtiene" o “Wcibe el valor de". Algunas
personas prefieren leer el operador de igualdad como “doble igual" o migual igual".
6.7
Toma de decisiones: operadores de igualdad y relaciónales
Operador de
igualdad o relacional
de JavaScript
Condición de ejemplo
de JavaScript
Significado de la
condición de
JavaScript
_
x = y
x es igual a y
!-
x I» y
x n o es igual a y
>
>
x > y
x es m ayor q u e y
<
<
x < y
X es m en o r q u e y
fe
>=
x
3
<=
x <= y
Operador de igualdad
o relacional algebraico
estándar
203
O peradores de igualdad
0
Operadores relaciónales
>= y
X es m ayor o igual que
y
x es m e n o r o igual q u e y
Figura 6 .1 3 | Operadores de igualdad y relaciónales.
La secuencia de com andos en la figura 6.14 utiliza cuatro instrucciones 1 f para m ostrar un saludo d e ­
pendiente del tiem po en una página de bienvenida. La secuencia d e com andos o b tien e la hora local de la
com putadora del usuario y la convierte de un form ato de reloj de 24 horas (0-23) a un form ato de reloj d e 12
horas (0-11). Al usar este valor, la secuencia de com andos m uestra un saludo apropiado para la hora actual del
día. La secuencia y la salida de ejem plo se m uestran en la figura 6.14. Las líneas 11 a 13 declaran las variables
utilizadas en la secuencia d e com andos. C abe m encionar adem ás que JavaScript nos perm ite asignar un valor
a una variable al m om ento d e declararla.
Creación y uso de un nuevo objeto Date
l a línea 12 asigna a la variable a h o ra un nuevo objeto Date, el cual contiene inform ación sobre La hora local
actual. En b sección 6.2 presentam os el objeto document, que encapsub los datos pertenecientes a la página
W eb actual. A quí usamos el objeto Date integrado de JavaScript para adquirir b hora local actual. Para crear un
nuevo objeto usamos el operador new seguido del tipo del objeto (en este caso, Date) y un par d e paréntesis. En
algunos objetos es necesario colocar argum entos en los paréntesis para especificar los detalles sobre el o b jeto que
se va a crear. En este caso dejam os los paréntesis vacíos para crear un o b jeto Date predeterminado que contiene
I
<!DOCTYPE ht«l>
2
3
4
3
6
7
8
9
<1— Fig. 6.14: bienvenidoS.html —>
< 1-- Uso de operadores de igualdad y r e la c ió n a le s . -->
<html>
<head>
<»eta c h a rs e t = "utf-8">
<title>Uso de operadores r e la c io n a le s < / t 1 tle >
< script>
10
11
12
13
14
13
16
var nombre; / / cadena in tro d u c id a por e l usuario
var ahora » new DateO ;
I I fecha y hora a c tu a le s
var hora = ahora.getH oursO ; / / hora actu al (0 - 2 3 )
/ / le e e l nombre del cuadro in d ic a d o r como una cadena
nombre = window.prompt( "Escriba su nombre" );
Figura 6 .1 4 | Uso de operadores de igualdad y relaciónales (parte I de 2).
204
Capitulo 6
JavaScript introducción a las secuencias de comandos
17
18
19
20
21
22
23
/ / determina s i l a hora es PM
1 f ( hora >- 12 )
24
{
23
26
27
28
29
30
31
32
33
34
33
36
37
38
39
40
41
42
/ / determina si es de mañana
1 f ( hora < 12 )
docum ent.w rite( "<hl>Buenos d&1acute;as, " ) ;
/ / c o n v ie rte a r e l o j de 12 horas
hora ■ hora - 12;
/ / determina si e s antes de la s
6 PH
i f ( hora < 6 )
document.writ e ( "<hl>Buenas ta r d e s , " );
/ / determina si e s después de l a s 6 PM
i f ( hora >- 6 )
document.writ e ( "<hl>Buenas noches, " );
} / / end i f
document.writelnC nombre ♦
", bienvenido a l a progranac1ón en 3avaScript</hl>" );
</scr1pt>
</head><bodyx/body>
</htm l>
9 » * * *
A O i]
.
------ “ M
mtmt* •
C C Nc/Z/X/e«eroc 1 4 / t » t w * n * ^ l 2
n y a ti 'J
VL*««to*, £j orx&ztae —
f 2 »*•••
EftCtlb* io nombra
f*4____________________________
^
Cmcctof
2
2
Buenos d ía s . J i m , bien v en id o a la
p r o g r a m a c ió n en J a v a S c r i p t
F ig u ra 6 . 14 | Uso de operadores de igualdad y relaciónales (parte 2 de 2).
inform ación sobre b fecha y hora actuales. Después de ejecutar la línea 12, b variable ahora hace referencia
al nuevo objero Date. N o tuvim os que usar el operador new a ta n d o usamos los objetos document y window
debido a que el navegador siem pre crea estos objetos. La línea 13 establece la variable hora en un entero igual a
la hora actual (en form ato de reloj de 24 horas) devuelto por el m étodo getHours del objeto Date. El capítulo
11 presenta u n análisis más d e ta lb d o de los atribu to s y m étodos del objeto Date y de los objetos en general. La
secuencia de com andos usa wi ndow. prompt para que el usuario pueda introducir el nom bre que se va a m ostrar
com o parte del saludo (línea 16).
Torna de decisiones con la instrucción 1f
Para m ostrar el saludo correcto dependiendo d e b hora, la secuencia d e com andos debe determ inar si el usuario
está visitando la página d u ran te b m añana, rarde o noche, la prim era instrucción 1 f (líneas 19 y 20) com para
el valor de la variable hora con 12. Si hora es m enor que 12, entonces el usuario está visitando b página durante
6.7
Toma de decisiones: operadores de igualdad y relaciónales
205
la m añana y la instrucción en la línea 20 produce la cadena "Buenos di as". Si no se cum ple esta condición, no
se ejecuta la línea 20. La línea 23 determ ina si h o ra es m ayor o igual que 12. Si es así, entonces el usuario está
visitando la página ya sea en la tarde o en la noche. Se ejecutan las líneas 24 a 35 para determ inar el saludo apro­
piado. Si h o ra es m enor q u e 12, entonces el intérprete de Java no ejecuta estas líneas y co n tin ú a hasta la línea 37.
Bloques y tom a de decisiones con instrucciones 1f anidadas
La llave { en la línea 24 com ienza un b lo q u e de instrucciones (líneas 24 a 35) que se ejecutan en conjunto si
hora es m ayor o igual a 12. La línea 26 resta 12 a ho ra, con lo cual convierte la hora actual de u n form ato de
reloj de 24 horas (0 a 23) en un form ato de reloj d e 12 horas (0 a 11). La instrucción i f (línea 29) determ ina
si h o ra es ahora m enor que 6. D e ser así, entonces la hora es entre m ediodía y las 6 PM , por lo que la línea 30
produce el inicio de u n elem ento h l de H T M L 5 ("<hl>Buenas t a r d e s ,"). Si h o ra es m ayor o igual a 6, la
hora está entre 6 PM y m edianoche, por lo q u e la secuencia de com andos produce el saludo "Buenas noches"
(líneas 33 y 34). La llave } en b línea 35 term ina el bloque de instrucciones asociadas con Li instrucción i f en
b línea 23. C abe m encionar que las instrucciones i f pueden an id arse: es posible colocar una instrucción i f
dentro de otra. Las instrucciones i f que determ inan si el usuario está visitando la página en b tarde o en b noche
(líneas 29 a 30 y líneas 33 a 34) se ejecutan sólo si la secuencia de com andos ya estableció que h o ra es m ayor
o igual a 12 (línea 23). Si b secuencia d e com andos ya determ inó que b hora actual del día es en b m añana,
no se llevan a cabo estas com paraciones adicionales. En el capítulo 7 veremos los bloques y b s instrucciones
i f anidadas. Por últim o, bs líneas 37 y 38 producen el resto del elem ento h l de H T M L 5 ( b parte restante del
saludo), que no depende de b hora del d ía
Buena práctica de programación 6.6
Incluya comentarios después de la llave de cierre de ¡as instrucciones de control (como las instrucáones 1f)
para indicar en dónde terminan esas instrucciones, como en la linea 35 de la figura 6.14.
Observe b sangría de b s instrucciones i f en roda la secuencia de com andos. D icha sangría m ejora b
legibilidad de b secuencia de com andos.
Buena práctica de programación 6.7
Aplique sangría a la instrucción en el cuerpo de una instrucción 1f para hacer que el cuerpo de la instrucción
resaltey mejorar la legibilidad de la secuencia de comandos.
La instrucción vacia
Observe que no hay p unto y com a ( ; ) al final de b prim era línea de cada instrucción i f . Si se incluyera el punto
y com a se produciría un error lógico en tiem po de ejecución. Por ejemplo, b instrucción
i f (h o r a < 12) ;
document .w r it e ( "<hl>Buenos d & ia c u te ;a s , " ) ;
sería interpretada por JavaScript en form a errónea com o
i f (h o r a < 12)
document.write("<hl>Buenos d& iacutc;as, ");
206
Capitulo 6
JavaScript introducción a las secuencias de comandos
en donde d punto y coma por sí solo en b línea (lo que se conoce com o instrucción vacía) es b instrucción que
se ejecutará si b condición en b instrucción 1f es verdadera. C uando se ejecuta b instrucción vacía no se realiza ningu­
na tarca en b secuencia de comandos. Ésta continúa entonces con b siguiente instrucción, que se ejecutará sin importar
que b condición sea verdadera o falsa. En este ejemplo, "<hl>Buenos d & ia c u te ;a s, " se imprimiría sin importar b
hora del día.
Tip para prevenir errores 6.2
Una instrucción extensa puede esparcirse en varias lineas. Si una sola instrucción debe dividirse en varias Uneos,
dija puntos de división que tengan sentido, como después de una coma en una lista separada por comas o después
de un operador en una expresión extensa. Si divide una instrucción entre dos o más Uneos, aplique sangría a
todas las Uneos subsiguientes.
Validación de la secuencia de comandos de este ejemplo
Si valida este ejem plo con w w w .ja v a sc rip t1 in t.c o m , aparecerá el siguiente m ensaje de advertencia para bs
instrucciones i f en bs lincas 19, 29 y 33:
block statement without cu rly braces
Ya vim os que el cuerpo de una instrucción i f puede contener varias instrucciones en un bloque que está deli­
m itado por Ibves (líneas 23 a 35). Las Ibves n o se requieren para una instrucción i f con un cuerpo de u n a sola
instrucción, com o b s d e las líneas 19, 29 y 33- M uchos program adores consideran una buena práctica encerrar
el cuerpo de todas b s instrucciones i f entre Ibves; de hecho, m uchas organizaciones lo exigen. Por esta razxSn, d
validador em ite el mensaje de advertencia anterior. Podem os elim inar los mensajes de advertencia de este ejem ­
p b si encerram os b s cuerpos de las instrucciones 1 f entre Ibves. Por e je m p b , el i f en b s líneas 19 y 20 puede
escribirse com o:
I f ( hora < 12 )
{
document.wr1te("<hl>Buenos d41acute;as, ");
}
Los operadores s tr lc t equals ( = ) y s t r l c t does not equal (l==)
Como mencionamos en b sección 6.5, JavaScript puede realizar conversiones entre tipos por usted. Esto induye
casos en b s que vamos a comparar vabres. Por ejempb, la comparación "75" = 75 produce el vabr true ya
que JavaScript convierte la cadena ”75" en d número 75 antes de realizar b comparación de igualdad (■■). Para
evitar conversiones implícitas en bs comparaciones, lo cual puede producir resultados inesperados, JavaScript
cuenta con b s operadores s t r l c t e q u a ls ( = ) y s t r l c t d o es n o t equal ( ! = = ) . La comparación "75" = =
75 produce el valor fal se debido a que un operando es una cadena y el otro es un número. De manera similar,
75" I— 75 produce true debido a que b s tipos dd operando no son iguales, por b cual b s vabres no son igua­
les. Si no usa estos operadores al comparar vabres con n u il, 0, true, fa l se o b cadena vacía (""), el validador
de JavaScript de javascr1ptl1nt.com muestra advertencias de conversiones potenciales implícitas.
labia de precedencia de operadores
La ta b b en b figura 6.15 m uestra b precedencb de b s operadores introducidos en este capítub. Los operadores se
m uestran de arriba h a c b abajo en orden descendente de precedencia. Cabe señalar que todos estos operadores
se asnebn de izquierda a derecha, con b excepción del operador de asignación (=). La suma es asociativa a b izquierda,
por b que una expresión com o x + y + z se evalúa como si se hubiera escrito como (x + y)+z. El operador de
6.8
Recursos Web
207
asignación (-) se asocia de derecha a izquierda, por lo que una expresión com o x ■ y - 0 se evalúa como si se hubiera es­
crito como x ■ (y - 0 ), que primero asigna el valor 0 a la variable y y luego asigna el resultado de esa asignación (0) a x.
Buena práctica de programación 6.8
Consulte la tabla de precedencia de operadora a l escribir expresiona que contengan muchos operadora. Confirme
que ¡as operaciones se realicen en el orden en elque usted espera. Si no estd seguro d d orden de evaluación, useparéntais para forzar el orden, justo como lo haría en las expresiones algebraicas. Asegúresede tener en cuenta que algunos
operadora, como d de asignación (-X se asocian de derecha a izquierda en vez de hacerlo de izquierda a derecha.
Operadores
Asociatividad
Tipo
* / %
bquierda a derecha
multiplicativo
+ -
izquierda a derecha
aditivo
<<=>>=
izquierda a derecha
relaciona!
“
izquierda a derecha
Igualdad
derecha a bquierda
Asignación
I» — - 1=
-
Figura 6.15 | Precedencia y asociatividad de los operadores vistos hasta ahora.
6.8
Recursos Web
www.deitel.com/javascript
El C entro d e recursos de JavaScript de D eitel contiene vínculos a algunos de los mejores recursos de JavaScript
en Web. Ahí encontrará vínculos clasificados a: herram ientas, generadores de código, foros, libros, bibliotecas,
marcos de trabajo sobre JavaScript y más. Revise además los tutoriales para todos los niveles de habilidades,
desde principiantes hasta avanzados.
Resumen
Sección 6.1
Introducción
JavaScript (pág. 186) se utiliza para mejorar la funcionalidad y apariencia de las páginas Web.
Sección 6.2
Su primera secuencia de comandos: mostrar una linea de texto conJavaScript en una página Web
• A menudo, las secuencias de comandos de JavaScript aparecen en la sección <head> dd documento de HTML5.
• El navegador interpreta primero d contenido de la sección <head>.
• la etiqueta <script> indica al navegador que d texto que le sigue es parte de una secuencia de comandos (pág. 186). El
atributo type (pág. 187) especifica el tipo MIME dd lenguaje de secuencias de comandos que se utiliza en la secuencia
de comandos; por ejemplo, text/JavaScript.
• Una cadena de caracteres (pág. 187) puede encerrarse entre comillas dobles (“) (pág. 187).
• Algunas veces a una cadena (pág. 187) se denomina cadena de caracteres, mensaje o literal de cadena.
• El objeto documnt dd navegador (pág. 188) representa el documento de HTML5 que d navegador muesua en ese
momento. El objeto document nos permite especificar el texto de HTML5 que se va a mostrar en d documento.
• El navegador crea un conjunto completo de objetos que nos permiten acceder a todos los dementos de un documento
de HTML5 y manipularlos.
208
Capítulo 6
JavaScript: introducción
«¡•5
a las secuencias de comandos
•
Un objeto (pág. 188) reside en la memoria de la computadora y contiene la información utilizada por la secuencia de
comandos. El témiino objeto por lo general implica que hay atributos (daros) (pág. 188) y comportamientos (métodos)
(pág. 188) asociados con e sc objeto. Los métodos del objeto usan los datos de los atributos para reaIr/ar acciones titiles
para el cliente del objeto (es decir, la secuencia de comandos que llama a los métodos).
• El método wri teln del objeto document (pág. 188) escribe una línea de texto de HTML5 en un documento.
• Gada instrucción termina con un punto y coma (lo que también se conoce como terminador de instrucción; pág. 188),
aunque JavaScript no requiere esta práctica.
• JavaScript es susceptible al uso de mayúsculas. Si no se utilizan las letras mayúsculas y minúsculas apropiadas se
genera un error de sintaxis.
Sección 6.3
Cómo modificar su primera secuencia de comandos
• Algunas veces es conveniente mostrar información en ventanas conocidas como diálogos (o cuadros de diálogo,
pág. 191) que 'aparecen'* en la panralla para llamar la atención del usuario. Por lo general los diálogos muestran mensajes
importantes al usuario que navega por la página Web.
• El objeto wi ndow del navegador (pág. 191) usa el método alert (pág. 191) para mostrar un diálogo de alerta.
• La secuencia de escape \n es el carácter de nueva línea (pág. 192). Hace que el cursor en d documento de HTML5
se mueva al principio de la siguiente línea.
Sección 6.4
Cómo obtener la entrada del usuario mediante diálogos prompt
• Las palabras c U y c (pág. 193) son palabras con un significado especial en JavaScript.
• La palabra clave var (pág. 193) al principio de la instrucción indica que la palabra nombre es una variable. Una variable
(pág. 193) es una ubicación en la memoria de la computadora en donde puede guardarse un valor para que lo use una
secuencia de comandos. Todas las variables tienen un nombre y un valor, y deben declararse con una instrucción var
antes de usarse en una secuencia de comandos.
• El nombre de una variable puede ser cualquier idcntificador válido que consista de letras, dígitos, guiones bajos (_J y
signos de dólar ($) que no empiece con un dígito y no sea una palabra clave reservada de JavaScript
• Las declaraciones terminan con un punto y coma y pueden dividirse en varias lincas con cada variable en la declaración
separada por una coma; a esto se le conoce como lista de nombres de variables separadas por comas. Es pasible declarar
varias variables en una declaración o en múltiples declaraciones.
• Es conveniente indicar cl propósito de una variable en la secuencia de comandos, para ello se coloca un comentario de
JavaScript al final de la declaración de la variable. Un comentario de una sola Urica (pág. 194) comienza con los caracte­
res // y termina al final de la linca. Los comentarios no hacen que d navegador realice ninguna acción al interpretar la
socucncia de comandos; en cambio, d intérprete de JavaScript ignora los comentarios.
• los comentarios multilínca comienzan con cl ddimirador /• y terminan con cl ddimirador */. Hl intérprete ignora todo
d texto entre los ddimiradores dd comentario.
• El método pronpt dd objeto wlndow muestra un diálogo en donde d usuario puede escribir un valor. El primer argu­
mento es un mensaje (conocido como indicador) que indica al usuario que realice cierta acción específica. Un segundo
argumento opcional, que se separa dd primero mediante una coma, puede especificar La cadena predeterminada que se
va a mostrar en d campo de texto.
• Una variable recibe un valor a través de una asignación (pág. 196), mediante el uso dd operador de asignación ■. Al
operador • se le conoce como operador binario (pág. 196), ya que tiene dos operandos (pág. 196).
• JavaScript tiene una versión dd operador ♦para concatenación de cadenas (pág. 196) que permite concatenar una cade­
na y un valor de otro tipo de datos (incluyendo otra cadena).
Sección 6.5
Conceptos de la memoria
• Toda variable tiene un nombre, un tipo y un valor.
• Al colocar un valor en una ubicación de la memoria, d valor sustituye al valor anterior en esa ubicación. Al leer un valor
de una ubicación de la memoria, d proceso es no destructivo.
Ejercicios de autoevaluación
209
■ JavaScript no requiere que las variables tengan un tipo declarado antes de poder usarlas en una secuencia de comandos.
Una variable en JavaScript puede contener un valor de cualquier tipo de dato* y, en muchos casos, JavaScript realiza
conversiones automáticas entre los valores de distintos tipos por usted. Por esta razón, a JavaScript se le conoce como un
lenguaje débilmente tipificado (pig. 200).
• Cuando se declara una variable en JavaScript pero no recibe un valor, tiene un valor indefinido (pág. 200). Si intentamos
usar el valor de dicha variable, por lo general se produce un error lógico.
• Al declarar variables no se Ies asignan valores predeterminados, a menos que lo especifiquemos. Para indicar que una
variable no contiene un valor, podemos asignarle el valor nuil.
Sección 6 .6
Aritm ética
Los operadores aritméticos básicos (♦, *, / y X; pág. 200) son binarios, ya que cada uno opera sobre dos operandos.
• Pueden usarse paréntesis para agrupar expresiones de la misma forma que en expresiones algebraicas.
■ JavaScript aplica los operadores en las expresiones aritméticas en una secuencia precisa determinada por las siguientes
reglas de precedencia de operadores (pág. 201).
■ Cuando decimos que los operadores se aplican de izquierda a derecha, nos referimos a la asociatividad de los operadores
(pág. 201). Algunos operadores se asocian de derecha a izquierda.
•
Sección 6 .7
Tonta de decisiones: operadores de igualdad y relaciónales
La instrucción i f de JavaScript (pág. 202) permite que una secuencia de comandos tome una decisión con base en
la verdad o falsedad de una condición. Si se cumple b condición (es docir, que sea verdadera; pág. 202), se ejecuta la
instrucción en el cuerpo de b instrucción if. Si no se cumple b condición (es decir, que sea falsa), no se ejecuta b con­
dición en el cuerpo de b instrucción 1f.
• Las condiciones en bs instrucciones i f pueden formarse mediante el uso de los operadores de igualdad (pág. 202) y los
operadores relaciónales (pág. 202).
•
Ejercicios de autoevaluación
6.1
Complete bs siguientes oraciones:
a) _____________ comienza un comentario de una sola línea.
b) Toda instrucción de JavaScript debe terminar con un(a)_____________ .
c) la instrucción
se utiliza para tomar decisiones.
d) El objero_____________ muestra diálogos alert y pronpt.
e) Las palabras_____________ están reservadas para uso de JavaScript.
0 Los métodos___________y
del objeto___________ escriben tacto de HTM L5 en un documento
de HTML5.
6.2
Indique si cada uno de los siguientes enunciados es verdadero ofalso. Si esfabo, explique por qué.
a) Los comentarios hacen que b computadora imprima el texto después de los caracteres // en la pantalla al mo­
mento de ejecutar b secuencia de comandos.
b) JavaScript considera que bs variables nuñero y NuMeRo son idénticas.
c) El operador residuo (X) puede usarse sólo con operandos numéricos.
d) Los operadores aritméticos • , / , % , + y tienen todos d mismo nivel de precedencb.
e) El método parselnt convierte un entero en una cadena.
6.3
Escriba instrucciones de JavaScript para realizar cada una de bs siguientes tareas:
a) Declare bs variables c, estaEsUnaVarloble, q76354 y nunero.
b) Muestre un diálogo que pida al usuario que escriba un entero. Muestre un valor predeterminado de 0 en el
diálogo.
c) Convierta una cadena en un entero y almacene d valor convertido en b variable edad. Suponga que b cadena se
almacena en valorCadena.
2 10
Capítulo 6
«¡•5
JavaScript: introducción
a las secuencias de comandos
d) Si la variable mjnero no es igual a 7, muestre "La variable numero no es igual a 7" en un diálogo de mensaje,
c) Produzca una línea de texto de HTML5 que muestre el mensaje “Esto es JavaScript” en el documento de
HTML5.
6.4
Identifique y corrija los errores en cada una de las siguientes instrucciones:
a) i f
(c < 7 ) ;
window.alertC'c es menor que 7");
b) 1f (c -> 7)
«*1ndow.alert("c es igual o mayor que 7");
6.5
Escriba una instrucción (o comentario) para realizar cada una de las siguientes tarcas:
a) Indique que una secuencia de comandos calculará d producto de tres enteros [Sugerencia: use texto que ayude a
documentar una secuencia de comandos].
b) Declare las variables x, y. z y resultado.
c) Declare las variables xVal, yVal y zVal.
d) Pida al usuario que introduzca el primer valor, lea d valor del usuario y almacénelo en la variable xVal.
e) Pida al usuario que introduzca el segundo valor, lea d valor dd usuario y almacénelo en la variable yVal.
0 Pida al usuario que introduzca el tetcer valor, lea d valor dd usuario y almacénelo en la variable zVal.
g) Convierta la cadena xVal en un entero y almacene d resultado en la variable x.
h) Convierta la cadena yVal en un entero y almacene d resultado en b variable y.
i) Convierta b cadena zVal en un entero y almacene d resultado en b variable z.
j) Calcule d producto de los tres enteros contenidos en bs variables x, y y z, y asigne d resultado a b variable
resultado.
le) Escriba una línea de texto de HTMI-5 que contenga b cadena "El producto es" seguida del valor de b varia­
ble resultado.
6.6
Use las instrucciones que escribió en d ejercicio 6.5 para escribir una secuencia de comandos completa que calcule e
imprima el producto de tres enteros.
Respuestas a los ejercicios de autoevaluación
6.1
a) //. b) Punto y coma (;). c)1f. d)w1ndow. c) Cbve. 0 «*r1te, writeln, docunent.
6.2
a) Falso. Los comentarios no provocan que se realice ninguna acción al ejecutar b secuencia de comandos. Se utili­
zan para documentar secuencias de comandos y mejorar su legibilidad, b) Falso. JavaScript es susceptible al uso
de mayúsculas, por lo que estas variables son distintas, c) Verdadero, d) Falso. Los operadores *, / y X están en
d mismo nivel de precedencia; los operadores + y - están en un nivd menor de precedencia, e) Falso. Ia>función
parselnt convierte una cadena en un valor entero.
6.3
a) var c. estaEsUnaVariable. q76354, numero;
b) valué - window.promptC “Escriba un entero", ”0“ ) ;
c) var edad - parselnt( valorCadena ) :
d ) i f (nu nero I - 7 )
«rlndon.alertC "La variable numero no es igual a 7“ );
e) docunent.wr1teln( "Esto es JavaScript" );
6.4
a) Error no debe haber un punto y coma después dd paréntesis derecho de b condición en b instrucción if.
Corrección: elimine d punto y coma después del paréntesis derecho. [Nota: d resultado de este error es que b
instrucción de salida se ejecuta sin importar que b condición en b instrucción if sea verdadera o no. El punto y
coma después del paréntesis derecho se considera una instrucción vacía: una ¡nstmcción que no hace nada],
b) Error: d operador rdacional -> es incorrecto.
Corrección: cambie -> por >-.
Respuestas a los ejercicios de autoevaluación
6.5
a)
b)
c)
d)
e)
/ / C a l c u la e l pro d u cto de t r e s e n t e r o s
v a r x , y , z . re s u lta d o ;
v a r x v a l. yVal, zV al;
xVal - w in d o w .p ro n p t( " E s c rib a e l p r i o e r a r t e r o : " . " 0 " );
yVal - w 1ndow .pronpt( " E s c rib a e l segundo e n t e r o : ” . " 0 " );
0 zVal - »*1ndow.pronpt(
g) x - p a r s e l n t ( xVal ) ;
h) y - p a r s e l n t ( yVal ) ;
" E s c rib a e l t e r c e r e n t e r o : " . "0"};
i) z • p a r s e l n t ( zVal ) ;
j) r e s u l t a d o - x * y * z ;
le) docum ent.w rit e l n ( "<hi - í l p ro d u c to e s " ♦ r e s u l t a d o ♦ ”< /hl>' );
6 .6
La secuencia es la siguiente:
1
2
< IDOCTYPE h te l>
3
<1-- E j e r c i c i o 6.6: producto.html -->
4
<htal>
3
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<fcead>
<ueta charset - "utf-*">
<title>Soluc1&oacute:n 6</title>
<script>
<1 —
/ / Calcula e l producto de t r e s enteros
var x, y , z , r e s u lt a d o ;
v a r xVal, yV al. z V al;
xVal
yVal
zVal
« w i n d o w . prompt( " E s c r ib a e l p r i u e r e n t e r o : " ) ;
- window.prompt( " E s c r ib a e l segundo e n t e r o : " ) ;
- window.prompt( " E s c r ib a e l t e r c e r e n t e r o : " ) ;
x - p a r s e l n t ( xVal ) ;
y - p a r s e l n t ( yVal ) ;
z - p a r s e l n t ( zVal ) ;
21
22
23
24
25
26
27
r e s u l t a d o - x • y • z;
d o c u n e n t .w r it e l n ( "<hl>El p ro d u c to e s " ♦ r e s u l t a d o ♦ "<í»l>" )
/ / -->
</script>
</head><body></body>
< / h t* l>
—
- pf.'*
21 1
2 12
Capítulo 6
«¡•5
JavaScript: introducción
a las secuencias de comandos
U=» 1a - ü m
Q S c * a t* n t
C
S ite s
*
^
fiie y//X ye je m p lo s^
=
sugendot _ WebSUt«G«lle«y
El producto es 60
Ejercicios
6.7 Complete bs siguientes oraciones:
a) _____________ se utilizan para documentar una secuencia de comandos y mejorar su legibilidad.
b) Un diálogo capaz de recibir entrada dd usuario se muestra con d método_____________ del objeto_____________ .
c) Un» instrucción de JavaScript que toma una decisión es b instrucción_____________.
d) Por lo general los cálculos se realizan mediante los operadores_____________.
c) El método_____________del objeto_____________ muestra un diálogo con un mensaje para d usuario.
6.8 Escriba instrucciones de JavaScript que realicen cada una de bs siguientes tartas:
a) Muestre el mensaje “Escriba dos números" usando el objeto window.
b) Asigne el producto de bs variables b y c a b variable a.
c) Indique que una sccucncb de comandos va a realizar un cálculo de nómina de ejemplo.
6.9 Indique si cada uno de los siguientes enunciados es verdadero ofalso. Si esfalso, explique por qu¿
a) Los operadores de JavaScript se evalúan de izquierda a derecha.
b) Los siguientes son nombres de variables válidos: ..guión bajo_. «928134, t5, j 7, sus ventas!. el_total_de_
su_Jcuenta, a, b$, c, z, z2.
c) Una expresión aritmética válida de JavaScript sin paréntesis se evalúa de izquierda a derecha.
d) Los siguientes son nombres de variables inválidos: 3g, 87, 67h2,h22, 2h.
6.10 Complete las siguientes oraciones:
a) ¿Qué operaciones aritméticas tienen b misma precedencb que b multiplicación?_____________.
b) Cuando hay paréntesis anidados, ¿cuáles se evalúan primero?_____________ .
c) Una ubicación en b memoria de b computadora que puede contener distintos valores en distintos momentos
durante b ejecución de una sccucncb de comandos se lbma_____________.
6.11 ¿Qué aparece en d diálogo de alerta cuando se ejecuta cada una de bs siguientes instrucciones de JavaScript? Asuma
que x - 2 y y - 3.
a) window.alarte "x - “ + x ) ;
b) window.alart( "Elvalor de x ♦ x as " ♦( x ♦ x ) );
c) window.alartC “x
);
d) window.alerte ( x+ y ) 4 " . " ♦ ( y ♦ x ) );
6.12 ¿Cuál de bs siguientes instrucciones de JavaScript contiene variables cuyos valores se modifican?
a ) p * i + j + k + 7;
b) window.alerte "variables cuyos valores se destruyen” );
c) window.alert ( "a - 5" ) ;
d) cadenaVal • window.prompteMEscriba una cadena:" );
6.13 Dada = a x ' * 7, ¿cuáles de bs siguientes instrucciones de JavaScript son correctas para esta ecuación?
a ) y - a * x » x * x + 7;
b) y • a • x • x • ex ♦ 7);
c) y - ea * x) * x * C* + 7);
d) y - Ca * x) * x * x ♦ 7;
Ejercicios
213
c ) y - a * ( x # x * x ) ^ 7;
0 y - a * x * (x * x ♦ 7 );
6.14 Indique d orden de evaluación de los operadores en cada una de las siguientes instrucciones de JavaScript, y muestre
d valor de x después de ejecutar cada instrucción.
a) x - 7 + 3 * 6 / 2 - l ;
b ) x - 2 % 2 + 2* 2 - 2 / 2 ;
c) x -
( 3 • 9 • ( 3 ♦ ( 9 * 3 / ( 3 )
) ) );
6.15 Escriba una secuencia de comandos que muestre los números dd I al 4 en b misma linca, con cada par de números
adyacentes separados por un espacio. Escriba la secuencia de comandos usando los siguientes métodos:
a) Use una instrucción docunent .wri teln.
b) Use cuatro instrucciones docunant .wM t«.
6.16 Escriba una secuencia de comandos que pida al usuario que escriba dos números, obtenga los dos números dd
usuario y produzca texto que muestre la suma, producto, diferencia y cociente. Use las técnicas que se muestran en
b figura 6.7.
6.17 Escriba una secuencia de comandos que pida al usuario que introduzca dos enteros, obtenga los números dd usuario
y produzca texto que muestre d número más grande seguido de las palabras "es mayor que" en un diálogo de alerta.
Si los números son iguales, imprima texto de HTM I.5 que muestre el mensaje "Estos números son iguales". Use
bs técnicas mostradas en la figura 6.14.
6.18 Escriba una secuencia de comandos que reciba tres enteros dd usuario y muestre la suma, promedio, producto,
menor y mayor de los números en un diálogo a le r t.
6.19 Escriba una secuencia de comandos que obtenga d d usuario d radio de un círculo y produzca texto de HTM L5 que
muestre d diámetro, b circunferencia y d área de esc circulo. Use d valor constante 3.14159 para t i . Use bs técnicas de
GUI que se muestran en b figura 6.7. [Nota: también puedeusarlaconstantepredefinidaHath.PI parad valor de x. Esta
constante es más precisa que d valor 3.14159. El objeto Math está definido por JavaScript y provee muchas herramientas
matemáticas comunes]. Use las siguientes fórmulas (r es el radio): diámetro = 2r, árcunjerencia = 2nr, área = nr*.
6.20 Escriba una secuencia de comandos que lea cinco enteros, determine y produzca marcado que muestre los enteros
menor y mayor en d grupo. Use sólo las técnicas de secuencias de comandos que aprendió en este capítulo.
6 .2 1 Escriba una secuencia de comandos que lea un entero, determine y produzca texto de HTM L5 que muestre si es par
o impar. (Sugerencia: use el operador residuo. Un número par es un múltiplo de 2. Cualquier múltiplo de 2 deja
un residuo de cero al dividirse entre 2].
6.22 Escriba una secuencia de comandos que lea dos enteros, determine y produzca texto de HTML5 que muestre si el
primero es múltiplo d d segundo. [Sugerencia: use el operador residuo].
6.23 Escriba una secuencia de comandos que reciba tres números, detetmine y produzca marcado que muestre b cantidad
de números negativos, positivos y ceros introducidos.
6.24 Escriba una secuencb de comandos que calcule los cuadrados y cubos de los números dd 0 al 5 y produzca texto de
H TM L5 que muestre los valores resultantes en un formato de tabb de HTML5, como se muestra a continuación.
[Nota: esta secuencb de comandos no requiere entrada del usuario].
número
cuadrado
cubo
0
0
0
1
1
1
2
4
8
3
9
27
4
16
64
5
25
125
JavaScript:
instrucciones de control I
Desplacémonos un lugar.
—Lcwii Carro ü
la rueda se convirtió a i un circulo
completo.
— W iO ia m S h a k r i p r a r r
¡Cuántas manzanas tuvieron que
caer en ¡a cabeza de Newton antes
de que a i tendiera el suceso!
— R oben Fkmi
Objetivos
En este capitulo aprenderá a:
■ Reconocer las técnicas básicas
de solución de problemas.
■ Desarrollar algoritmos a través
del proceso del refinamiento
arriba-abajo, paso a paso.
■ Utilizar las instrucciones de
selección i f e i f . . .e ls e
para elegir entre acciones
alternativas.
■ Usar la instrucción de
repetición w h ile para
ejecutar intrucciones en
una secuencia de comandos
en forma repetida.
■ Implemertar la repetición
controlada por contador y
la repetición controlada
por centinela.
■ Usar los operadores de
incremento, decremento
y asignación.
7.4
Plan general
7.1 Introducción
\
7.2 Algoritmos
7.3 Pseudocódigo
7.4 Instrucciones de control
7.5 Instrucción de selección i f
7.6 Instrucción de selección i f . . .e l s e
7.7 Instrucción de repetición w h ile
Instrucciones de control
215
7.9 Formulación de algoritmos: repetición
controlada por centinela
7.10 Formulación de algoritmos: instrucciones de
control anidadas
7 .1 1 Operadores de asignación
7 .12 Operadores de incremento y decremento
7.13 Recursos Web
7.8 formulación de algoritmos: repetición
controlada por contador
Resumen | Ejercicios de autoevaluación | Respuestas a los ejercicios de autoevaluación | Ejercicios
7.1
Introducción
Antes de escribir una secuencia de com andos para resolver un problem a, debem os conocerlo a profundidad
y tener una m etodología cuidadosam ente planeada para resolverlo. Al escribir una secuencia d e com andos, es
igual de esencial com prender los tipos de bloques de construcción disponibles y em plear principios reconocidos
de construcción de programas. En éste y en el siguiente capítulo hablaremos sobre estas cuestiones a m edida que
presentemos la teoría y los principios de la programación estructuraría.
7.2
Algoritmos
C ualquier problem a com putable puede resolverse m ediante la ejecución de una serie d e acciones en u n orden
específico. A un p ro c e d im ie n to para resolver un problem a en térm inos de
1.
2.
las acciones a ejecutar y
el o rd e n en el que se van a ejecutar esas acciones
se le conoce com o a lg o ritm o . Es im portante especificar de m anera correcta el o rd en en el q u e se van a ejecutar
las acciones; a esto se le conoce com o c o n tro l d e l p ro g ra m a . En éste y en el siguiente capítulo investigaremos
las herram ientas de control de programas de JavaScript.
7.3
Pseudocódigo
El p seu d o có d ig o es un lenguaje inform al que nos ayuda a desarrollar algoritm os. El pseudocódigo q u e presen­
taremos aquí es útil para desarrollar algoritm os que se convertirán en porciones estructuradas de programas de
JavaScript. El pseudocódigo es similar al inglés cotidiano; es conveniente y am igable con el usuario, aunque en
realidad no sea un lenguaje de program ación de com putadoras.
Observación de ingeniería de software 7.1
A menudo elpseudocódigo se utiliza para "idear" una secuencia de comaruíos duraiue elproceso de diseño.
Si se prepara con cuidado puede convertirsefácilm ente a JavaScript.
7.4
Instrucciones de control
fo r lo general, las instrucciones en una secuencia de com andos se ejecutan una tras o tra en el orden en el que
se escribieron. A este proceso se le conoce com o ejecu ció n secuencia!. Varias de las instrucciones de JavaScript
216
Capitulo 7
JavaScript: instrucciones de control I
que veremos pro nto nos perm iten especificar que la siguiente instrucción a ejecutar no necesariamente tiene que
ser la siguiente en la secuencia. A esto se le conoce com o tran sferen cia d e co n tro l.
D urante la década de 1960. se hizo evidente que el uso indiscrim inado de las transferencias de control era
el origen d e muchas d e las dificultades que experim entaban los grupos de desarrollo de software. A quien se
señaló com o culpable fue a la in stru c c ió n g o to , la cual perm ite al program ador especificar la transferencia de
control a uno de los m uchos posibles destinos dentro de un programa. La investigación dem ostró que podían
escribirse program as sin instrucciones g o to . 1.a noción de lo que conocem os com o p ro g ra m a c ió n e stru c tu ra d a
se hizo casi un sinónim o de b “elim in ació n del goto". JavaScript no tiene una instrucción goto . Los program as
estructurados son más claros, fáciles de depurar y modificar, y es más probable que sean libres de errores en
prim era instancia.
1.a investigación d eterm in ó q u e todos los program as podían escribirse en térm in o s d e tres e s tru c tu ra s
d e c o n tr o l solam ente: la e s tru c tu ra d e se c u e n c ia , la d e se le c c ió n y la de re p e tic ió n . La estru ctu ra de
secuencia está integrada en JavaScript: a m enos q u e se le in d iq u e lo co n trario , la co m p u tad o ra ejecuta las
instrucciones una después de o tra, en el orden en q u e estén escritas (es decir, en secuencia). El segm ento
del diagram a de flujo de la figura 7.1 ilustra u n a estru ctu ra de secuencia típica, en la q u e se realizan dos
cálculos en orden.
to ta l - to ta l ♦ ca lific a c ió n ;
c o n t a d o r - c o n t a d o r ♦ 1;
Figura 7.1 | Diagrama de flujo de la estructura de secuencia de JavaScript.
Un d ia g ra m a d e flu jo es la representación gráfica d e un algoritm o o d e una parte del m ism o. Los dia­
gram as de flujo se dibujan usando ciertos sím bolos d e propósito especial, com o rectángulos, rom bos, óvalos
y círculos pequeños; estos sím bolos se conectan m ediante líneas d e flujo, que indican el orden en el q u e se
ejecutan las acciones del algoritm o.
Al igual q u e el pscudocódigo, los diagram as de flujo se utilizan con frecuencia para desarrollar y representar
algoritm os, au n q u e m uchos program adores prefieren el pseudocódigo. Los diagram as de flujo m uestran con
claridad cóm o operan las estructuras de control; con este fin b s utilizaremos en este libro.
C onsidere el segm enro del diagram a de flujo para la estructura de secuencia en la figura 7-1. Por cuestión
de sim pleza, usam os el sím b o lo d e re c tá n g u lo (o sím b o lo d e a c c ió n ) para indicar cualquier tipo de acción,
incluyendo un cálculo o una operación de entrada/salida. Las líneas de flujo en ia figura indican el orden en el
q u e se realizan las acciones: la prim era acción sum a c a l i f i c a c i ó n a t o t a l y luego la segunda acción sum a
1 a c o n ta d o r. JavaScript nos perm ite tener todas las acciones que deseem os en una estru ctu ra de secuencia.
C om o p ro n to veremos, en d o n d e pueda colocarse una sola acción es posible colocar varias acciones en se­
cuencia.
E n un diagram a de flujo que representa a un algoritm o completo, b s sím b o lo s d e óvalo que contienen bs
palabras “Inicio" y “Fin" representan el inicio y el fin del algoritm o, respectivamente. En un diagram a de flujo
que m uestra s ó b u n a parte de un algoritm o, com o en b figura 7 .1 . b s sím bolos de ó v a b se o m iten y en su lugar
se utilizan sím b o lo s d e círcu lo s p eq u eñ o s, tam bién conocidos com o sím b o lo s co n ecto res.
7.4
Instrucciones de control
217
Quizás el sím bolo más im portante en un diagram a de flujo sea el sím b o lo d e ro m b o , tam bién conocido
com o sím b o lo d e d e c isió n , el cual indica que se va a tom ar una decisión. En la siguiente sección hablarem os
«obre el sím bolo de rombo.
JavaScript cuenta con tres tipos d e estructuras de selección; en éste y en el siguiente capítulo hablarem os
sobre cada una de ellas. La instrucción d e selección i f ejecuta (selecciona) u n a acción si una condición es verda­
dera, u o m ite la acción si la condición es falsa. La instrucción de selección i f . . . e l se ejecuta una acción si una
condición es verdadera y ejecuta una acción diferente si la condición es falsa. La instrucción de selección swi tch
(capítulo 8) ejecuta una de muchas acciones diferentes, dependiendo del valor de una expresión.
1 f es una in stru c c ió n de selección sim ple, ya que selecciona o ignora una sola acción (o, com o pronto
veremos, un solo grupo de acciones). i f . . . e l s e se conoce com o in stru cció n d e selección d oble, ya que se­
lecciona entre dos acciones distintas (o grupos de acciones), swi tc h es una e stru c tu ra d e selección m ú ltip le , ya
que selecciona entre muchas acciones (o grupos de acciones) diferentes.
JavaScript cuenta con cuatro instrucciones de repetición: w h ile , do. .w h ile , f o r y f o r . ,1n (en el capítulo
8 veremos do. .w h ile y fo r; en el capítulo 10 veremos f o r . .in ). C ad a u n a de las palabras i f , e l s e , sw itch ,
w h ile. do. f o r e in es una p ala b ra clave de JavaScript. Estas palabras están reservadas por el lenguaje para
¡mplcmcnrar diversas funciones, com o las estructuras de control de JavaScript. Además de las palabras clave,
JavaScript tiene otras palabras cuyo uso está reservado para este lenguaje, com o los valores n u il, tr u e y f a l s e ,
además d e palabras que están reservadas para un posible uso en el futuro. En la figura 7.2 se m uestra una lista
com pleta de palabras reservadas de JavaScript.
Error común de programación 7.1
Usar una palabra clave como idenúfieador (por ejemplo, para nombres de variables) es un error de sintaxis.
Palabras clave reservadas para JavaScript
break
case
catch
continué
d e f a u lt
d e le te
do
e ls e
false
fln ally
for
functlon
1f
1n
In sta n c eo f
new
n uil
r e tu rn
switch
th 1 s
throw
tr u e
try
ty peo f
var
vold
while
wlth
Palabras clave reservadaspara JavaScript, pero que no utilizan
c la s s
const
enum
export
extends
implements
Import
I n te r f a c e
let
package
p rív a te
protected
public
sta tic
super
y ie ld
Figura 7.2 | Palabras clave reservadas para JavaScript.
C om o hem os visto, JavaScript sólo tiene ocho instrucciones de control: secuencia, tres tipos de selección y
cuatro tipos de repetición. U na secuencia de com andos se form a m ediante b com binación de instrucciones de
218
Capítulo 7
JavaScript: instrucciones de control I
control según sea necesario para im plem entar el algoritmo de la secuencia de com andos. Cada instrucción de con­
trol se dibuja en el diagrama con dos sím bolos de círculos pequeños, uno en el punto de entrada a la instrucción de
control y el otro en el punto de salida.
Las in stru ccio n es de c o n tro l d e u n a sola e n tr a d a /u n a so la salid a facilitan la creación de secuencias de
com andos; sólo tenem os que conectar el p u n to de salida de una al p u n to de entrada de la siguiente. Este proceso
es sim ilar a la fbrm a en que u n niño apila bloques de construcción, por lo cual le llamamos a p ila m ic n to d e ins­
tru ccio n es d e c o n tro l. E n breve aprenderem os que sólo hay una m anera alternativa de conectar las instruccio­
nes de control: el a n id a m ie n to d e in stru ccio n es d e c o n tro l. Por lo tanto, los algoritm os en JavaScript se crean
a partir de sólo ocho tipos distintos de instrucciones de control, que solam ente se com binan de dos formas.
7.5
Instrucción de selección i f
U na instrucción de selección se utiliza para elegir entre c u n o s alternativos de acción en una secuencia de co­
mandos. Por ejem plo, suponga que el grado para aprobar u n exam en es 60 (de 100). Entonces, la instrucción
de pscudocódigo
Si la calificación del estudiante es mayor o igual a 60
Im prim ir "Aprobado"
determ ina si la condición “la calificación del estudiante es m ayor o igual a 60" es verdadera o falsa. En caso de
que sea verdadera, se im prim e “A probado” y se “ejecuta" en o rd en b siguiente instrucción (recuerde que el pseudocódigo no es un verdadero lenguaje de program ación). Si b condición esfalsa, se ignora b instrucción Imprimir
y se ejecuta en orden b siguiente.
Observe que b segunda línea de esta instrucción de selección tiene sangría. D ich a sangría es opcional pero
se recom ienda am pliam ente, ya que enfatiza b estructura inherente de los program as estructurados. El intérpre­
te de JavaScript ignora los caracteres de espacio en blanco: se utilizan espacios, tabubdores y saltos de línea para
sangría y espaciado vertical.
Buena práctica de programación 7.1
A I aplicar las convenciones de sangría razonables de manera consistente, mejora la legibilidad de las secuencias
de comandos. Usamos tres espaciospor sangría.
La instrucción anterior S i en pscudocódigo puede escribirse en JavaScript de b siguiente manera:
I f ( c a lI f lc a c io n E s tu d ia n te >■ 60 )
document.wHtelnC "<p>Aprobado</p>" );
El código en JavaScript corresponde en gran m edida con el pseudocódigo. Esta sim ilitud es una de bs
razones que hace del pseudocódigo u n a herram ienta d e desarrollo de program as tan útiL La instrucción en el
cuerpo de í f im prim e b cadena de caracteres “Aprobado" en el docum ento de H T M L 5.
El diagram a de flujo de b figura 7.3 ilustra b instrucción i f de selección simple. Este diagram a d e flujo
contiene lo que tal vez sea el sím bolo más im portante de u n diagram a de flujo: el símbolo de rombo (o símbolo
de decisión), el cual indica que se va a tom ar una decisión. Este sím bolo contiene una expresión, com o una con­
dición, que puede ser \c rd a d e ra o falsa. El sím bolo de decisión tien e dos líneas de flujo que salen de él. U na
indica la ru ta a seg u ir en la secuencia d e c o m a n d o s c u a n d o la expresión en el sím b o lo sea verdadera ; la
o tra indica b ruta a seguir en la secuencia de com andos cuando b expresión sea falsa. Es posible tom ar una
decisión en cualquier expresión que se evalúe en un valor de tipo booleano de JavaScript (es decir, cualquier
expresión que se evalúe com o tr u e o f a ls e ; a esto tam bién se le conoce com o ex p resió n booleana).
7.6
Instrucción de selección i f . . .e ls e
219
Figura 7.3 | Diagrama de flujo de la instrucción i f de selección simple.
O bservación d e ingeniería de softw are 7.2
En JavaScript, cualquier valor numérico distinto de cero en una condición se evalúa como true, y Ose evalúa
como false. Pora ¡as cadenas, cualquier cadena que contenga uno o más caracteres se evalúa como t r u e y la
cadena vacia (la cadena que no contiene caracteres, representada como "")se evalúa como false. Además, una
variable que se declara con v a r y que no se le ha asignado ningún valor se evalúa como f a I s e .
"Icnga en cuenta q u e i f es una instrucción d e co n tro l de una en rrad a/u n a salida. P ro n to aprenderem os
que los diagram as de flujo para el resto de las instrucciones de co n tro l tam bién co n tien en (adem ás d e sím ­
bolos de círculos pequeños y líneas de flujo) sólo sím bolos de rectángulos, para indicar las acciones a realizar,
adem ás de sím bolos d e rom bos para indicar las decisiones a tom ar. E ste tipo d e diagram a d e flujo enfatiza el
m o d e lo d e p ro g ra m a c ió n d e a c c ió n /d e c isió n . M ás adelante hablarem os so b re la variedad de form as en que
pueden escribirse dichas acciones y decisiones.
7.6
Instrucción de selección i f . . . el se
La instrucción d e selección i f ejecuta una acción indicada sólo cuando la condición se evalúa com o tr u e ; de
lo contrario se o m ite b acción. Además nos perm ite especificar que se ejecutará una acción diferente cuando b
condición es t r u e que a ta n d o es f a l se. Por e je m p b , b instrucción de pscudocódigo
5 la calificación del estudiante es mayor o igual a 60
Im prim ir "Aprobado”
De lo contrario
Im prim ir "Reprobado”
im prim e Aprobado si la calificación del estudiante es m ayor o igual a 6 0 , y Reprobado si la calificación del
estudiante es m enor a 60. En cualquier caso, después de b im presión se ejecuta b siguiente instrucción en pscu­
docódigo en la secuencia (es decir, la siguiente después de to d a la instrucción i f . . . e l se). C abe m encionar que
tam bién se aplica sangría a b parte de la instrucción correspondiente al cuerpo del E l se.
Buena práctica d e program ación 7.2
Utilice sangria en ambas instrucciones del cuerpo de una instrucción
1 f. . . e l s e
220
Capítulo 7
JavaScript: instrucciones de control I
La instrucción If...Else anterior en el pseudocódigo puede escribirse en JavaScript de la siguiente m anera:
1 f ( c a lIf ic a c io n E s tu d ia n te >- 60 )
docum ent.w riteln( "<p>Aprobado</p>" ) ;
el se
document.writelnC "<p>Reprobado</p>” ) ;
El diagram a de Hujo en la figura 7-4 ilustra el flujo de control de la instrucción de selección i f . . . e l se. U na
vez más, observe que los únicos sím bolos en el diagram a de flujo adem ás de los círculos pequeños y las flechas
son b s rectángulos para las acciones y un rom bo para una decisión.
J
Figura 7.4 | Diagrama de flujo de la instrucción i f . . . e l s e de selección doble.
Operador condicional (? :)
JavaScript cuenta con el o p e ra d o r c o n d ic io n a l (? :), que está m uy relacionado con la instrucción i f . . .e ls e .
Éste es el único o p e ra d o r te m a r io en JavaScript (utiliza tres operandos). En conjunto, b s operandos y el sím b o b 7: form an una expresión c o n d ic io n a l. El prim er operando es una expresión boolcana, el segundo es el
v a b r d e la expresión condicional si la expresión boolcana se evalúa com o tr u e y el tercer operando es el v a b r de
la expresión condicional si la expresión booleana se evalúa com o fa l se. Por e je m p b , la instrucción
d o c u *e n t.v *rite ln ( c a lif ic a c io n E s tu d ia n te >= 60 7 “Aprobado" : “Reprobado" );
contiene una expresión condicional que se evalúa com o La cadena "Aprobado" si la condición c a l i f i c a c i o ­
n E s tu d ia n te >= 60 es verdadera, y se evalúa com o la cadena "Reprobado” si la condición es falsa. Por b tanto,
esta instrucción con el operador condicional realiza en esencia la m ism a operación que la instrucción i f .
e l se antes mostrada.
Instrucciones i f . . . e l se anidadas
Las in stru c c io n e s i f . . . e l se a n id a d a s evalúan varios casos colocando instrucciones i f . . . e l se dentro de otras
instrucciones i f . . . e l s e . Por eje m p b , la siguiente instrucción en pseudocódigo indica que la secuencia de
com andos debe im p rim ir A para las calificaciones d e exámenes mayores o iguales a 9 0 , B si están en el rango
d e 80 a 89, C si están en el rango d e 70 a 79. D para las calificaciones que oscilan entre 60 y 69 y F para todas
las dem ás calificaciones:
7.6
Instrucción de selección i f . . .e ls e
221
¡a calificación del estudiante es mayor o igual a 90
Im prim ir “A"
de lo contrario
S i ¡a calificación del estudiante es mayor o igual a 80
Im prim ir "B "
de lo contrario
S i ¡a calificación del estudiante es mayor o igual a 70
Im prim ir "C"
de ¡o contrario
S i ¡a calificación del estudiante es mayor o igual a 60
Im prim ir aD "
de ¡o contrario
Im prim ir "F"
S
Este pseudocódigo puede escribirse en JavaScript com o
1 f ( ca l1fic ac 1 o n E stu d ia n te >- 90 )
document.writelnC "A" );
e l se
1 f ( c a lif ic a c ió n E s tu d ia n te >- 80 )
document.writelnC "B" );
e l se
1 f C cal1f1cac1onEstud1ante >= 70 )
do cum ent.w riteln( "C" ) ;
e l se
1 f ( c a l I f i c a d o n E s t u d l a n t e >» 60 )
document.writelnC "D" );
e l se
document.writelnC "FM );
Si b variable cal if lc a c io n E s tu d ia n te es mayor o igual a 90, las cuatro condiciones serán verdaderas pero
sólo se ejecutará document.wr1teIn después de la primera prueba. Después de que se ejecute document. wr1 te ln.se evita b parte el se de b instrucción 1 f . . .el se exterior.
Buena práctica de programación 7.3
Si hay varios niveles de sangría en cada nivel debe aplicarse sangría con la misma cantidad de espacio.
la mayoría de los programadores prefieren escribir b instrucción 1 f anterior en su forma equivalente:
1 f C c a l i f i c a c i ó n >• 90 )
e ls e
e ls e
e ls e
e ls e
document.wr1teln(
1 f ( c a l i f i c a c i ó n » 80
document.writelnC
1f ( c a l i f i c a c i ó n >= 70
document.writelnC
1f C c a l i f i c a c i ó n >= 60
document.writelnC
document.writelnC
"A" );
)
"B* );
)
"C" );
)
"0" );
”F" ) ;
La segunda form a es más p o p u b r ya que evita usar m ucha sangría hacia b derecha en el código. Dicha
sangría a m enudo deja poco espacio en una línea de código, forzando a que b s líneas se dividan y se reduzca b
legibilidad de b secuencia de com andos.
222
Capítulo 7
JavaScript: instrucciones de control I
Problema d el e l se suelto
Es im portante tener en cuenta que el intérprete de JavaScript siem pre asocia un e l se con el i f anterior, a menos
que se le indique o tra cosa m ediante la colocación de llaves ({}). El siguiente código ilustra el problema del
el se suelto. Por ejem plo,
1f ( x > 5 )
if ( y > 5 )
do cum ent.w riteln( "p>x e y son > 5</p>" );
e l se
docu m ent.w riteln ( ”<p>x es <= 5</p>" ) ;
parece indicar con su sangría que si x es mayor que 5, b estructura i f en su cuerpo determina si y es también
mayor que 5. De ser así, el cuerpo de b estructura i f anidada produce como resultado b cadena *'x y y son >
5". De lo contrario, parece ser que si x no es mayor que 5, b instrucción el se que es parte de b estructura i f . . .
el se produce como resultado la cadena "x es <= 5".
¡Cuidado! La instrucción i f anidada anterior no se ejecuta com o parece ser. El intérprete en realidad la
interpreta así:
if ( x > S )
if ( y > S )
docum ent.w riteln ( "<p>x e y son > S</p>" );
e l se
do cum ent.w riteln( "<p>x es <= 5</p>" );
en d o n d e el cuerpo de b prim era instrucción i f es una instrucción i f . . . el se anidada. Ésta evalúa si x es m a­
yor q u e 5. D e ser así, la ejecución continúa evaluando si y es tam bién m ayor que 5. Si b segunda condición es
verdadera, se m uestra la cadena apropiada (”x e y son > 5"). Sin em bargo, si la segunda condición es falsa se
m uestra b cadena "x es <= S”, aun cuando sabem os que x es m ayor que 5.
Para forzar a que b primera instrucción i f anidada se ejecute com o se ten ía pensado originalm ente, debe
escribirse de b siguiente manera:
If ( x > S )
{
if ( y > 5 )
do cum ent.w riteln( "<p>x e y son > S</p>" );
}
el se
do cum ent.w riteln( "<p>x es <= S</p>" );
Las Ibves ({}) indican al intérprete de JavaScript que la segunda instrucción i f se encuentra en el cuerpo de la
prim era y que el e l s e está asociado con la primera instrucción i f.
Bloques
La instrucción i f espera sólo una instrucción en su cuerpo. Para incluir varias instrucciones en el cuerpo de i f ,
enciérrelas entre Ibves ({ y }). E sto tam bién puede hacerse en la sección e l s e de una instrucción i f . . .e l s e . A
un conjunto de instrucciones contenidas dentro de un par de Uaves se le llama bloque.
Observación de ingeniería de softw are 7.3
Un bloque puede colocarse en cualquier parte de una secuencia de comandos en donde pueda colocarse una
sola instrucaón.
7.7
Instrucción de repetición *h11e
223
Observación de ingeniería de software 7.4
A diferencia de ¡as instrucciones individuales, un bloque no termina con un punto y coma. Sin embargo, cada
instrucción dentro de las ¡¡aves de un bloque debe terminar con un punto y coma.
El siguiente ejemplo incluye un bloque en la parte e l se de una instrucción i f . . .else:
1 f ( c a l i f i c a c i ó n >» 60 )
docum ent.w riteln( "p>Aprobado</p>" );
e l se
{
document.wr1teln( "<p>Reprobado</p>" );
document.wr1teln( "<p>Debe to n a r e s t e c u rso o t r a vez.</p>" );
}
En este caso, si cal 1 f i cacion es m enor que 60. el programa ejecuta ambas instrucciones en d cuerpo del el se e imprime
Reprobado.
Debe to n a r e s te curso o t r a vez.
Observe las Ibves que rodean a las dos instrucciones en la cláu su b e l se . Estas Ibves son im portantes. Sin ellas,
k instrucción
document.wr1teln( "<p>Debe to n a r e s t e curso o t r a vez.</p>M );
estaría fuera del cuerpo de b parte e l se de b instrucción i f y se ejecu tará sin importar que b calificación fuera
m enor a 60.
Los errores de sintaxis (por ejem plo, cuando se o m ite una Ibve en un bloque d e b secuencia d e com andos)
los atrapa el intérprete cuando intenta interpretar el código q u e contiene el error en cuestión. E stos errores evi­
tan que el navegador ejecute el código. A unque m uchos navegadores notifican a los usuarios sobre b s errores,
esa inform ación no es de m ucha utilidad. Por eso es im p o rtan te q u e valide sus secuencias de com andos de
JavaScript y b s pruebe en form a exhaustiva. U n e rro r lógico (com o cuando se o m ite n ambas llaves en u n b b que de la secuencia de com andos) tiene su efecto en tiem po de ejecución. U n erro r lógico fatal hace que una
secuencia de com andos falle y term ine antes de riempo. Un e rro r lógico n o fatal perm ite que una secuencia de
com andos siga ejecutándose, pero produce resultados incorrectos.
Observación de ingeniería de software 7.5
Ip H P
7.7
Asi como un bloquepuede colocarse en cualquier parte en dondepueda colocarse una sola instrucción individual
también es posible no tener instrucción alguna (la instrucción vacia) en esos lugares. La instrucción vacia se
representa colocando un punto y coma (;) en donde normalmente iria una instrucción.
Instrucción de repetición whi 1e
U na estructura de repetición (tam bién conocida com o d e lo ) le perm ite especificar q u e una secuencia de com an­
dos debe repetir una acción m ientras cierta condición sea verdadera. La instrucción en pseudocódigo
Mientras existan más artículos en m i lista de compras
Comprar el siguiente artículo y quitarlo de m i lista
describe b repetición que ocurre durante una salida de compras. 1o condición “existan más artícu b s en m i lista de
compras” puede ser verdadera o falsa. Si es verdadera, entonces se realiza la acción “C o m p rar el siguiente
224
Capitulo 7
JavaScript: instrucciones de control I
artículo y quitarlo de m i lista”. E sta acción se realizará en form a repetida m ientras la condición sea verdadera. La
instrucción (o instrucciones) contenida en la instrucción de repetición Mientras constituye su cuerpo. El cuerpo
de u n ciclo com o la estructura Mientras puede ser una sola instrucción o un bloque. En algún m om ento, la
condición será falsa (cuando el últim o artículo de la lista de com pras sea adquirido y elim inado de la lista). En
este punto la repetición term inará y se “ejecutará" la prim era instrucción en pseudocódigo que esté después de
la instrucción de repetición.
Error com ún de programación 7.2
S el cuerpo de una instrucción wh1 le nunca hace que ¡a condición sea verdadera, ocurre un error lógico.
Ibr lo general dicha estructura de repetición nunca terminará: a este error te le conoce como ciclo infinito.
Muchos navegadores muestran un diálogo que permite al usuario terminar una secuencia de comandos que
contiene un ciclo infinito.
C om o e je m p b de u n a instrucción w h ile , considere el segm ento de u n a secuencia de com andos diseñado
para encontrar la prim era potencia de 2 que sea m ayor a 1000. La variable p ro d u c to com ienza con el v a b r 2.
La instrucción es así:
var producto = 2;
while ( producto <- 1000 )
producto » 2 * producto;
C uando la instrucción while term ina de ejecutarse, p ro d u c to contiene el resultado 1024. El diagrama de
flujo de la figura 7.5 ¡lustra el flujo de control de la instrucción de repetición whi le anterior. Una vez más, ob­
serve que (además de c írc u b s pequeños y flechas) el diagram a de flujo con tien e sólo un sím b o b de rectángulo
y un sím b o b de rom bo.
pro d u cto < - 1000
vetdader
p ro d u cto - 2 * producto
Figura 7.5 | Diagrama de flujo de la instrucción de repetición while.
C uando b secuencia de com andos entra a while, p ro d u c to es 2. La secuencia de com andos m ultiplica
repetidas veces b variable p ro d u cto por 2, por lo que p ro d u c to recibe b s vabres 4, 8, 16, 32, 6 4 , 128, 256,
512 y 1024 sucesivamente. C uando p ro d u cto se vuelve 1024, b condición p ro d u cto < - 1000 en b while
se vuelve f a ls e . E sto term ina b repetición, con 1024 com o el v a b r final de p ro d u cto . La ejecución continúa
con b siguiente instrucción después de while. [Nota: si la condición de una instrucción whi l e es fal se en un
p rin c ip b , b o las instrucciones del cuerpo nanease ejecutarán).
El diagram a d e flujo m uestra la repetición con eb rid ad . La línea de flujo que emerge del re c tá n g u b regresa
a b decisión, que b secuencia de com andos evalúa cada vez que itera por el ciclo hasta que. en un m om ento
dado, b decisión se vuelve falsa. En este p u n to , while sale y el co n tro l pasa a b siguiente instrucción en b se­
cuencia de com andos.
7.8
7.8
Formulación de algoritmos: repetición controlada por contador
225
Formulación de algoritmos: repetición controlada por contador
Para ilustrar cóm o desarrollar algoritm os, resolveremos diversas variaciones de u n problem a para obtener el
prom edio de una clase. C onsidere cl siguiente enunciado del problema:
A una clase de diez estudiantes se les aplicó un examen. Las calificaciones (enteros en e l rango de 0 a 100) de este
acamen están disponibles para usted. Determ ine e l promedio de la clase para este examen.
El prom edio de la d ase es igual a la sum a d e las calificaciones, dividida entre el núm ero de estudiantes (10 en
este caso). EJ algoritm o para resolver este problem a en una com putadora debe recibir com o en trad a cada una de
las calificaciones, realizar el cálculo para prom ediar y m ostrar el resultado.
Em plearem os pseudocódigo para enlistar las acciones a ejecutar y especificar el orden en q u e deben ejecu­
tarse. Usaremos una rep etició n c o n tro la d a p o r c o n ta d o r para introducir Las calificaciones, una por una. Esta
técnica utiliza una variable llamada c o n ta d o r para controlar el núm ero de veces que debe ejecutarse un co n ­
junto de instrucciones. En este ejemplo, la repetición term ina cuando el contador excede a 10. En esta sección
presentam os un algoritm o de pseudocódigo (figura 7 .6 ) y la secuencia de com andos correspondiente (figura
7.7). E n b siguiente sección m ostrarem os cóm o desarrollar algoritm os en pseudocódigo. Por lo general, a b
repetición controlada por contador se le llam a rep etició n d efin id a, ya que el núm ero de repeticiones se conoce
antes de que el ciclo com ience a ejecutarse.
1
2
3
4
3
6
7
A sign ar a to ta l e l valor de cero
A signar a l contador de calificaciones e l vtilor de uno
M ien tras que e l contador de calificaciones sea m enor o ig u a l a diez
R ecib ir como entrada la siguiente calificación
Sum ar ¡a ca lifica ción a l to ta l
Sum ar uno a l contador de calificaciones
8
9
10
A sign ar a l prom edio de la clase e l to ta l d i vidido entre diez
Im p rim ir e lprom edio de la clase
Figura 7.6 | /Algoritmo en pseudocódigo que utiliza la repetición controlada por contador para resolver el problema
del promedio de una clase.
I
< 1D0CTYPE ht«l>
2
3
4
3
6
< !— Fig. 7.7: promedio.html —>
< !— Repetición c o ntro lada por contador para c a l c u l a r el promedio de una c la s e . -->
<ht»l>
<hcad>
7
<*eta ch a rse t = "u tf-S "»
8
<t1tle>Programa del promedio de una c l a s e < / t i t l e >
9
10
11
< script>
12
13
14
var
var
var
var
t o t a l ; / / suma de c a l if i c a c i o n e s
con tad o rC alificacio n es; / / número de c a l i f i c a c i o n e s in tro d u c id a s
c a l i f i c a c i ó n ; / / c a l i f i c a c i ó n e s c r i t a por el u su a rio (como una cadena)
v a lo rC a lific a c io n ; / / va lo r de l a c a l i f i c a c i ó n (c o n v e rtid o en e n te ro )
Figura 7.7 | Repetición controlada por contador para calcular el promedio de una clase (parte I de 2).
226
13
16
17
18
If
Capitulo 7
JavaScript: instrucciones de control I
var promedio; / / promedio de todas l a s c a l i f i c a c i o n e s
/ / Fase de i n i c ia U z a c i ó n
t o t a l - 0; / / b o rra r el t o t a l
c o n tad o rC alificacio n es « 1; / / p re p a ra r para i t e r a r
20
21
22
23
24
23
26
27
28
29
30
31
32
33
34
33
36
37
38
3f
40
41
42
43
44
43
46
47
/ / Fase de procesamiento
while ( c o n ta d o rC alific a cio n es <= 10 ) / / i t e r a r 10 veces
{
/ / p e d ir l a en trad a y l e e r l a c a l i f i c a c i ó n del usuario
c a l i f i c a c i ó n » window.prompt( "Escriba l a c a l i f i c a c i ó n e n te r a : " , "O" );
/ / c o n v e r tir c a l i f i c a c i ó n de cadena en e n te ro
v a lo rC a lific a c io n - parselntC c a l i f i c a c i ó n ) ;
/ / sumar v a lo r C a lif ic a c io n al t o t a l
t o t a l - t o t a l + v a lo rC a lific a c io n ;
/ / agregar 1 al con tadorC alificacio nes
c o n ta d o rC alificacio n es « c o n ta d o rC alific a cio n es + 1;
} / / f i n de while
/ / Fase de terminación
promedio ■ t o t a l / 10;
/ / c a l c u l a r el promedio
/ / m ostrar el promedio de l a s c a l i f i c a c i o n e s de los exámenes
docum ent.w riteln(
"<hl>El promedio de l a c la s e es " + promedio + “</hl>" );
</scr1pt>
</headxbodyx/body>
</html>
a) Este düogo se muestra 10 veces,
la entrada del usuario es lOO. 88.
93. 5 5 .6 8 .7 7 .8 3 .9 5 . 73 y 62. El
usuario irtroduce cada calificación y
presiona A c e p t a r .
ücnb* I*
ente*
1
□
b) El pío med o de la clase apaece
«n una página Web
dd promedie
C
l
CjacM
V,---
fiIry//X/€yefnpk)5/cap07/fig07_07/pfomedio.html M
-
Sdioi lo g fr.d e i
^
b * k « G«»«ry D
\ n ^ t ú o de Irta m .
E l p r o m e d i o d e la clase es 79.4
Figura 7.7 | Repetición controlada por contador para calcular el promedio de una clase (parte 2 de 2).
7.8
Formulación de algoritmos: repetición controlada por contador
227
Variables utilizadas en el algoritmo
Observe las referencias en el algoritmo a un total y un contador. U n total es una variable en la que una secuencia de
oamandos acum ula la sum a de una serie de valores. U n contador es una variable que una secuencia de com andos
utiliza para contar; en este caso, para contar el número de calificaciones introducidas. Por lo general, las variables
que almacenan totales deben inic¡alizarse en cero antes de poder usarlas en una secuencia de comandos.
Las líneas 11 a 15 declaran las variables t o t a l , c o n ta d o rC a lific a c io n e s , c a lif ic a c ió n , v a lo rC a lific a c io n ,
promedio. La variable c a lif ic a c ió n almacena h cadena que el usuario introduce en el diálogo prompt. La variable
v a lo r C a lific a c io n almacena el valor entero de la c a lif ic a c ió n que el usuario introduce en el diálogo prompt.
hticialización de variables
Las líneas 18 y 19 son asignaciones que inicializan t o t a l en O y c o n ta d o rC a lif ic a c io n e s en 1. C ab e m encio­
nar que las variables t o t a l y c o n ta d o rC a li f ic a c io n e s se inicializan antes de usarse en un cálculo.
Error común d e programación 7.3
S no te inicializa una variable que se utilizará en un cálculo se genera un error lógico, el cualproduce e l valor
NaNf'No es un número”).
Ijt instrucción de repetición w h ile
La línea 22 indica que w h ile seguirá iterando m ientras el valor de contadorC al if i c a c i o n e s sea m enor o igual
a 10. La linca 26 corresponde a la instrucción en pseudocódigo “Recibir como entrada la siguiente calificación”. \¿x
instrucción m uestra un diálogo prompt con el indicador " E s c rib a l a c a l i f i c a c i ó n e n t e r a ; " en la pantalla.
Una vez que el usuario introduce h c a l i f i c a c i ó n , la línea 29 la convierte de cadena a entero. Debemos
convertir la cadena a un entero en este ejemplo; de lo contrario, la operación d e sum a en la línea 32 será una
concatenación de cadenas.
A continuación, la secuencia de com andos actualiza el t o t a l con el nuevo v alo rC al if ic a c io n introducido
por el usuario. La línea 32 sum a v a lo r C a lif ic a c io n al valor anterior de t o t a l y asigna el resultado a t o t a l .
Esta instrucción parece algo extraña, ya que no sigue las reglas del álgebra. Tenga en a te n ta que la precedencia de
operadores en JavaScript evalúa la operación de sum a (+) antes que la operación de asignación (=). El valor de esta
expresión del lado derecho del operador de asignación siempre reemplaza el valor de la variable del lado izquierdo.
Ahora la secuencia de com andos está lista para increm entar la variable c o n ta d o rC a li f ic a c io n e s para
indicar que se procesó una calificación y para leer la siguiente calificación del usuario. La línea 35 sum a 1 a
contadorC al i f ic a c io n e s , por lo q u e en cierto m om ento la condición en w hil e se volverá f a l se y term inará
el ciclo. D espués de ejecutarse esta instrucción, la scatcncia de com andos continúa con u n a evaluación de la
condición en la instrucción whi le en la línea 22. Si la condición sigue siendo tr u e , se repiten las instrucciones
en las líneas 26 a 35. De lo contrario la secuencia de comandos continúa la ejecución con la primera instrucción en
secuencia después del cuerpo del ciclo (es decir, la linca 39).
Calculo y visualizad ón de los resultados
La línea 39 asigna los resultados del cálculo del prom edio a la variable prom edio. Las líneas 42 y 43 escriben una
línea de texto de H T M L 5 en el docum ento para m ostrar la cadena "El prom edio de l a c la s e es "seg u id a
del valor de la variable prom edio, com o un elem ento <hl>.
Prueba del programa
Abra el docum ento de H T M L 5 en u n navegador Web para ejecutar la secuencia de com andos. Esta secuencia
analiza la entrada del usuario com o un entero. En la ejeaició n de ejem plo de la figura 7 .7 , la sum a de los valores
228
Capitulo 7
JavaScript: instrucciones de control I
introducidos (100. 88. 93, 55, 68. 77, 83, 95, 73 and 62) es 794. A unque la secuencia d e com andos considera
que todas las entradas son enteros, el cálculo del prom edio en la secuencia de com andos no produce un entero.
Por el contrario, el cálculo produce un núm ero d e p u n to B o tan te (es decir, un núm ero que contiene un p u n to
decim al). El prom edio de los 10 enteros introducidos por el usuario en este ejem plo es 79.4. Si su secuencia de
com andos requiere que el usuario introduzca núm eros de punto flotante, puede convertir la en trad a del usuario
de cadenas a núm eros m ediante la función p a r s e F lo a t de JavaScript, que introducirem os en la sección 9.2.
Observación de ingeniería de softw are 7.6
S la cadena que sepasa a p a r s e ln t contiene un valor numérico de punto flotante, p a r s e ln t sólo trunca la
parte de punto flotante. Por ejemplo, la cadena “2 7 . 95" produce el entero 27, y la cadena “-1 2 3 .4 5 “produce
el entero -123. Si ¡a cadena que te pasa a p a r s e ln t comienza con un valor numérico, p a r s e ln t devuelve Han
(no es un número). Si necesita saber ti p a r s e ln t devolvió NaN, JavaScript cuenta con ¡aJunción 1sNaN que
determina si su argumento tiene el valor NaNy, de ser asi, devuelve tru e ; de lo contrario devuelve fa Ise.
Números de punto flotante
En realidadJavaScript representa a todos ¡os números en ¡a memoria como números de punto flotante. A m enudo este
tipo de núm eros se desarrollan a través de la división, com o se m uestra en este ejem plo. Al dividir 10 entre 3,
el resultado es 3.3333333, en donde la secuencia de núm eros 3 se repite de m anera indefinida. 1.a com putadora
asigna sólo una cantidad fija de espacio para oontener ese valor, por b q u e el v a b r de punto flotante alm acenado
s ó b puede ser una aproxim ación. A unque b s núm eros de p u n to flotante no siem pre son 100 por ciento pre­
cisos, tienen num erosas aplicaciones. Por e je m p b , al hablar de una tem peratura corporal “norm al” de 98.6, no
necesitamos una precisión con un extenso núm ero de dígitos. C uando vemos la tem peratura en un term óm etro
y la interpretam os com o 9 8 .6 , tal vez en realidad sea de 98.5999473210643. El caso aquí es que pocas aplicacio­
nes requieren v abres d e p unto flotante d e una precisión tan alta, por b que llamar a este núm ero sim plem ente
com o 98.6 está bien para m uchas aplicaciones.
Una observación sobre la entrada a través de diálogos prom pt
En este eje m p b usamos d iáb g o s prompt para o b ten er la entrada del usuario. Por b general d ich a entrada se
realiza m ediante elem entos de form ulario en un docum ento de H T M L 5 , pero esto requiere técnicas adicionales
de secuencias de com andos que presentarem os a p a rtir del c a p ítu b 9. Por ahora seguiremos usando d iáb g o s
prompt.
7.9
Formulación de algoritmos: repetición controlada por centinela
Generalicemos el problem a del prom edio de una clase. C onsidere el siguiente problem a:
Desarrollar una secuencia de comandos que calcule el promedio de una clasey procese un número arbitrario
de calificaciones cada vez que se ejecute.
E n el prim er eje m p b del prom edio de una clase, se conocía el núm ero de calificaciones (10) de antem a­
no. En este e je m p b no se indica cuántas calificaciones introducirá el usuario. La secuencia de com andos debe
procesar un núm ero arbitrario de calificaciones. ¿Cómo puede la secuencia determ inar cuándo term inar de
introducir calificaciones? ¿C óm o sabrá cuándo calcular y m ostrar el prom edio de b clase?
Una m anera de resolver este problem a es utilizar un v a b r especial denom inado v alo r c e n tin e la (tam bién
Ibm ado valor d e señal, valor d e p ru e b a o valor de b a n d e ra ) para indicar el fin de la introducción de datos.
El usuario escribe calificaciones hasta que se haya introducido el núm ero correcto de ellas. Después, el usuario
7.9
Formulación de algoritmos: repetición controlada por centinela
229
escribe el valor centinela para indicar que se in tro d u jo la últim a calificación. A la repetición controlada por
centinela a m enudo se le llam a re p etició n in d e fin id a , ya que el núm ero de repeticiones no se conoce antes de
que com ience b ejecución del ciclo.
Sin duda, debe elegirse u n valor cen tin eb de tal form a q u e no pueda confundirse con un valor de entrada
perm itido. -1 es un valor centinela aceptable para este problema, puesto q u e norm alm ente las calificaciones
de un examen son enteros no negativos del 0 al 100. Por lo tan to , una ejecución d e b secuencia d e com andos
para prom ediar una clase podría procesar una cadena de entradas com o 9 5 , 96, 7 5 , 74, 89 y - 1 . La secuencia
entonces calcularía e im prim iría el prom edio de la d ase para las calificaciones 9 5 ,9 6 , 75, 74 y 89 (-1 es el valor
centineb, por lo q u e no debe entrar en el cálculo del prom edio).
Desarrollo del algoritmo en pseudocódigo cotí el método de refittamiento de arriba a abajo, paso a paso:
la cima y el prim er refinamiento
Desarro Ib rem os b secuencia de com andos para prom ediar clases con una técnica llamada refin am ien to d e
a rrib a a ab ajo , paso a paso, b cual es esencial para el desarrollo de program as bien estructurados. Com enzam os
con una representación en pseudocódigo de b cim a:
Determinar el promedio de ¡a clase para el examen
La cim a es una sola instrucción que transm ite el propósito general d e b secuencia de com andos. C om o tal,
es en efecto b representación completa de un programa. Por desgracia, b cim a pocas veces transm ite los detalles
suficientes com o para escribir el algoritm o en JavaScript. Por lo tanto, debemos com enzar un proceso de refi­
nam iento. Primero dividiremos b cim a en una serie de tareas más pequeñas y b s enlistaremos en el o rd en en el
que se necesitan realizar, lo que arroja com o resultado el siguiente p rim e r refinam iento:
Iniáalizar variables
Introducir, sumary contar tas calificaciones del examen
Calcular e imprimir el promedio de ¡a dase
Aquí sólo se utiliza b estructura de secuencia; los pasos listados deben ejecutarse en orden, uno tras otro.
Observación de ingeniería de software 7.7
Cada refinamiento, asi como la cima ensi.es una especificación completa del algoritmo; sólo varia el nivel de!
detalle.
Cómo proceder a l segundo refittamiento
Para avanzar al siguiente nivel de refinam iento (es decir, el seg u n d o refin am ien to ), nos com prom etem os a usar
variables específicas. Necesitamos el toral actual de los núm eros, una cuenta de cuántos núm eros se han proce­
sado, una variable para recibir la representación en cadena de cada calificación a m edida que el usuario las vaya
introduciendo, una variable para alm acenar el valor d e esa calificación después de convertirla en entero y una
variable para alm acenar el prom edio calcubdo. La instrucción en pseudocódigo
Iniáalizar ¡as variables
puede mejorarse com o sigue:
Iniáalizar total en cero
Iniáalizar contadorCalificaáones en cero
230
Capítulo 7
JavaScript: instrucciones de control I
Sólo las variables total y contadorCalificaciones necesitan inicializarse antes de poder utilizarse; las variables
promedio, calificadort y valorCalificadon (para el prom edio calculado, la entrada del usuario y la representación
entera de la calificación, respectivamente) no necesitan inicializarse, ya que sus valores se determ inarán a m edida
que se calculen o introduzcan.
La instrucción en pseudocódigo
Jntrodudr, sumary contar ¡as calificadones del examen
requiere una estructura de repetición que introduzca cada calificación en forma sucesiva. N o .sabemos de antem ano
cuántas calificaciones van a procesarse, por lo que utilizaremos la repetición controladapor centinela. El usuario introduce
las calificaciones correctas, una a la vez. Después de introducir la última calificación, el usuario introduce el valor cen­
tinela. La secuencia evalúa el valor centinela después de que el usuario introduce cada calificación y termina el ciclo al
encontrarse con el valor centinela. Entonces, el segundo refinamiento de la instrucción anterior en pseudocódigo sería
Redbir como entrada la primera calificadón (puede ser el centinela)
Mientras el usuario no haya introducido aún el centinela
Sum ar esta calificadón a l total actual
Sum ar uno a l contador de calificadones
Redbir como entrada ¡a siguiente calificadón (puede ser el centinela)
E n pseudocódigo no utilizam os llaves alrededor del pseudocódigo que form a el cuerpo de b estructura Mientras.
Sim plem ente aplicam os sangría al pseudocódigo bajo el Mientras para m ostrar q u e pertenece a esta instrucción.
D e nuevo, el pseudocódigo es tan sólo una herram ienta inform al de desarrollo.
La instrucción en pseudocódigo
Calcular e im prim ir elpromedio de ¡a clase
puede mejorarse de b siguiente manera;
Si el contador no es igual a cero
Asignar a l promedio el total dividido entre el contador
Im prim ir el promedio
De ¡o contrario
Im prim ir "No se introdujeron calificadones"
D ebem os evaluar b posibilidad d e una d iv isió n en tre cero: un error lógico que, si no se detecta, haría que
la secuencia d e com andos produjera resultados inválidos. El segundo refinam iento com pleto del algoritm o en
pseudocódigo para el problem a del prom edio de una cbse se m uestra en b figura 7.8.
Tip para prevenir errores 7.1
Al realizar una división entre una expresión cuyo valor pudiera ser cero, debe evaluar explícitamente esta posi­
bilidad y manejarla de manera apropiada en su secuencia de comandos (como imprimir un mensaje de error),
en vez de permitir que ocurra la división entre cero.
Observación de Ingeniería de Software 7.8
Muchos algoritmos pueden dividirse lógicamente en tresfases: ¡a de inicialización, en donde se iniáalizan
lis variables, la de procesamiento en donde se introducen los valores de los datosy se ajustan las variables
delprograma según sea necesario, y la de terminación, que calcub e imprime los resultados.
7.9
Formulación de algoritmos: repetición controlada por centinela
2 3 1
E l segundo refinamiento completo
El algoritm o en pseudocódigo d e b figura 7.8 resuelve el problem a más general del prom edio de una dase. Este
algoritm o se desarrolló después de sólo dos refinaciones. Algunas veces son necesarias más refinaciones.
1
2
Inia ah zar total en cero
¡metalizar contadorCalificaciones en cero
3
4
Recibir como entrada ¡a primera calificación (puede ser el centinela)
3
6
7
8
9
10
11
12
13
14
13
Mientras el usuario no haya introducido aún el centinela
Sumar esta calificación al total actual
Sumar uno al contador de calificaciones
Recibir como entrada ¡a siguiente calificación(puede ser el centinela)
Si d contador no es igual a cero
Asignar alpromedio el total dividido entre el contador
Imprimir elpromedio
De lo contrario
Imprimir "No se introdujeron calificaciones"
Figura 7.8 | Repetición controlada por centinela para resolver el problema del promedio de una clase.
Observación de ingeniería de software 7.9
Termine elproceso de refinamiento de arriba a abajo, paso a paso, cuando haya especificado el algoritmo en
pseudocódigo con el detalle suficiente como para poder convertirlo en JavaScript. Asi, la implementación
enJavaScript serápor lo general un proceso simpley directo.
Observación de ingeniería de Software 7.10
la experiencia ha demostrado que la parte mds difícil de solucionar un problema en una computadora es
desarrollar el algoritmo para la solución.
arai
Observación de ingeniería de Software 7.11
Muchos programadores experimentados escriben secuencias de comandos sin siquiera usar herramientas de
desarrollo de secuencias de comandos como el pseudocódigo. En su opinión, su meta final es resolver elproblema
en u/u computadora y elpseudocódigo simplemente retarda la producción de los resultados finales. Aunque este
método pudierafuncionar para problemas sencillosy conocidos, tiende a ocasionar graves erroresy retrasos en
proyectos grandesy complejos.
Implementación de la repetición controlada por centinela para calcular el promedio de una clase
La figura 7 .9 muestra b secuencia de JavaScript y una ejecución de ejemplo. A unque cada calificación es un
entero, es probable que el cálculo del prom edio produzca u n núm ero con un p u n to decim al (un núm ero real).
En este ejem plo vemos que las estructuras de control pueden apilarse una encim a d e b o tra (en secuencia),
así com o un niño apila bloques de construcción. Justo después d e w h ile (líneas 29 a 43) va una instrucción
i f . . .e l se (fincas 4 6 a 55) en secuencia. G ran parte del código en esta secuencia de com andos es idéntico al
código de b figura 7.7, por b que en este eje m p b nos concentrarem os en b s nuevas características.
232
Capítulo 7
1
<!DOCTYPE html>
JavaScript: instrucciones de control I
2
3
4
3
6
7
8
9
10
11
12
13
14
13
16
17
18
19
<1— Fig. 7 .9 : promed1o2.html -->
< ! - - Repetición c o ntro lada por c e n tin e la para c a l c u l a r e l promedio de una c l a s e . -->
<html>
<head>
<meta c h a r s e t * "u tf-8">
<title>Programa del promedio de una c la se: r e p e tic ió n controlada por c e n t i n e l a < / t i t l e >
<scr1pt>
var
var
var
var
var
t o t a l ; / / suma de c a l i f i c a c i o n e s
con tado rC alificaclo nes; / / número de c a l i f i c a c i o n e s in troducidas
c a l i f i c a c i ó n ; / / c a l i f i c a c i ó n e s c r i t a por e l u su a rio (como cadena)
v a lo rC a lific a c io n ; / / v a l o r de l a c a l i f i c a c i ó n (c o n v e rtid o a e n te ro )
promedio; / / promedio de todas l a s c a l i f i c a c i o n e s
/ / Fase de i n i c i a l l z a c i ó n
t o t a l ■ 0; / / b o rra r t o t a l
c o n tad o rC alificaclo n es = 0; / / p re p a ra r para i t e r a r
20
21
22
23
24
23
26
27
28
29
30
31
32
33
34
33
/ / Fase de procesamiento
/ / p e d ir l a en trad a y l e e r l a c a l i f i c a c i ó n del usuario
c a l i f i c a c i ó n = window.prompt(
"Escriba l a c a l i f i c a c i ó n e n te r a . -1 para s a l i r : " , "O" );
/ / c o n v e r tir c a l i f i c a c i ó n de cadena en en te ro
v a lo r C a lif ic a c io n = p a r s e l n t ( c a l i f i c a c i ó n ) ;
while ( v a lo rC a lific a c io n I» - 1 )
{
/ / sumar v a lo rC a lific a c io n al t o ta l
t o t a l - t o t a l + v a lo rC a lific a c io n ;
I I sumar 1 a co ntado rC alificaeio nes
c o n ta d o rC alificaclo n es ■ c o n ta d o rC alific a c io n es +
1;
36
37
38
39
40
41
42
43
44
43
46
47
48
49
30
31
32
33
/ / p e d ir l a e n tra d a y l e e r c a l i f i c a c i ó n del usuario
c a l i f i c a c i ó n = window.prompt(
"Escriba l a c a l i f i c a c i ó n e n te r a . -1 para s a l i r : " , "0" );
/ / c o n v e r t ir c a l i f i c a c i ó n de cadena en e n te ro
v a lo rC a lific a c io n = p a r s e l n t ( c a l i f i c a c i ó n ) ;
} / / f i n de while
/ / Fase de terminación
i f ( c o n ta d o rC alificaclo n es I» 0 )
{
promedio = t o t a l / con tad o rC alificaclo n es;
/ / muestra el promedio de l a s c a l i f i c a c i o n e s de los exámenes
document.wr1teln(
”<hl>E1 promedio de l a c la s e es " + promedio + "«/hl»" );
} / / f i n de i f
Figura 7.9 | Repetición controlada por centinela para calcular el promedio de una clase (parte l de 2).
7.9
Formulación de algoritmos: repetición controlada por centinela
233
e ls e
document.writelnC “<p>No se in tro d u jero n c a lific a c io n e s< /p > " );
34
33
36
37
36
39
</scr1pt>
</head> <bodyx/body>
</ht»l>
fete dálogo se muestra cuatro veces, la entrada
del usuario e s 9 7 .8 8 .7 2 y - I .
r
¿Knt» U
«i
-I p»'# i*l»r
..
Programa¿d p«om#<j*cC ■ \
C
!_ SdKrt w j m í w
>
|
rjrm p io j/c a p O 7/f 19O7 .0 9 / p ro m c d io 2 iitm l
|•o t « ' mtüm
|■
E
r t r c Si«ce Ge-lev, C j Im portado á t Inftm ...
El p ro m e d io de la clase es 85.66666666666667
Figura 7.9 | Repetición controlada por centinela para calcular el promedio de una clase (parte 7 de 2).
La linca 19 inicializa c o n ta d o rC a li f ic a c io n e s en 0, ya que aún n o se han introducido calificaciones. Re­
cuerde que la secuencia de com andos usa la repetición controlada por centinela. Para m antener un registro preciso
del núm ero de calificaciones introducidas, la secuencia de com andos increm enta c o n ta d o rC a li f ic a c io n e s
sólo después de procesar un valor de calificación válido.
Comparación entre la lógica de la secuencia de comatulas para la repetición controlada por centinela y la
repetición controlada por contador
Observe la diferencia en la lógica para b repetición controlada por c e n tin e b en com paración con b repetición
controlada p o r contador en b figura 7.7. E n la repetición controlada por contador, leemos un valor del usuario
durante cada iteración del cuerpo de b instrucción w h ile para el núm ero especificado de iteraciones. En la re­
petición co n tro b d a por cen tin eb , leemos un valor (líneas 23 y 24) y lo convertim os en entero (línea 27) antes
de q u e la secuencia d e com andos Uegue a wh11e. La secuencia d e com andos usa este valor para determ inar si el
flujo de control del program a debe entrar al cuerpo de b instrucción w h ile. Si b condición d e w h ile es f a l s e
(es decir, el usuario introdujo el valor centineb com o b prim era calificación), la secuencia de com andos ignora
d cuerpo de b instrucción w h ile (es decir, no se introdujeron calificaciones). Si b condición es tr u e , el cuerpo
comienza a ejecutarse y procesa el valor introducido por el usuario (es decir, sum a el valor al t o t a l en b línea 32).
Después de procesar el valor, b secuencia de com andos increm enta c o n ta d o r C a lif ic a c io n e s en 1 (línea
35), recibe com o enrrada b siguiente c a l i f i c a c i ó n del usuario (lincas 38 y 39) y la convierte en un entero
(linca 42) antes de que term ine el cuerpo d e b instrucción w h ile. C uando b secuencia de com andos se acerca
a la Ibve derecha d e cierre (}) del cuerpo en la línea 4 3 . b ejecución continúa con b siguiente evaluación de
b condición d e w hil e (línea 29), utilizando el nuevo valor que acaba de introducir el usuario para determ inar
si el cuerpo de b instrucción whi le debe ejecutarse o tra vez. C abe m encionar que el siguiente valor siem pre lo
introduce el usuario justo antes d e que la secuencia de com andos evalúe la condición d e b instrucción w hile.
Capítulo 7
234
JavaScript: instrucciones de control I
Este orden nos perm ite determ inar si el valor q u e acaba de introducir el usuario es el valor centinela antes de
procesarlo (es decir, q u e lo sum e al to t a l) . Si el valor introducido es el valor centinela, whi l e term ina y b se­
cuencia de com andos no sum a el valor al t o t a l .
O bserve el bloque en el ciclo w h ile de la figura 7 .9 (líneas 30 a 43). Sin lasllaves, lasúltimas tres ins­
trucciones en el cuerpo del ciclo quedarían fu e ra de éste, provocando que elcódigo se interpretara d e manera
incorrecta, com o se indica a continuación:
while ( v a lo r C a lif ic a c io n I - - 1 )
/ / sumar c a l i f i c a c i ó n a l t o ta l
t o t a l - t o t a l + v a lo rC a lific a c io n ;
/ / sumar 1 a l contador
c o n ta d o rC alific a c io n es = c o n ta d o rC alific a c io n es + 1;
/ / p e d ir entrada y l e e r c a l i f i c a c i ó n del usuario
c a l i f i c a c i ó n = window.prompt(
H Escriba l a c a l i f i c a c i ó n e n te ra . -1 para s a l i r : " , "0" );
/ / c o n v e r tir c a l i f i c a c i ó n de cadena a e n te ro
v a lo r C a lif ic a c io n » p a r s e ln t ( c a l i f i c a c i ó n ) ;
Esta interpretación ocasionaría un ciclo infinito en la secuencia d e com andos si el usuario no introduce el centi­
nela -1 com o el prim er valor introducido en las líneas 23 y 24 (es decir, antes de la instrucción whil e).
7.10
Formulación de algoritmos: instrucciones de control anidadas
A hora resolvamos o tro problem a com pleto. Form ularem os una vez m is el algoritm o utilizando pseudocódigo y
el refinam iento de arriba a abajo, paso a paso, y después escribirem os la secuencia de com andos correspondiente.
C onsidere el siguiente enunciado de un problema:
Una universidadofrece un amo que prepara a los estudiantes para el examen estatal de certificación d d estado como
corredores de bienes raíces. El año pasado, diez de bs estudiantes que completaron este amo tomaron el examen.
Como es de esperarse, la universidad desea saber qué tan bien se desempeñaron sus estudiantes en el examen. A usted
te leba pedido que escriba una secuencia de comandos para sintetizar ¡os resultados. Se le dw una lista de estos 10
estudiantes. Junto a cada nombre hay un 1 escrito si el estudiante aprobó el examen, o un 2 si b reprobó.
Su secuencia de comandos debe analizar bs resultados del examen de b siguiente manera:
1. Introducir cada resultado de b prueba (es decir, un I o un 2). Mostrar el mensaje "Escriba el resultado" en
b pantalb, cada vez que b secuencia de comandos solicite otro m ultado de b prueba.
2. Contar el número de resultados de b prueba, de cada tipo.
3. Mostrar un m um en de bs resultados de b prueba, indicando el número de estudiantes que aprobaron y el
número de estudiantes que reprobaron.
4. Si más de ocho estudiantes aprobaron el examen, imprim ir el mensaje “Roño para el instructor “
Después de leer el enunciado del program a cuidadosam ente, hacemos las siguientes observaciones:
1. La secuencia de com andos debe procesar los resultados de la prueba para 10 estudiantes. Se utilizará
un ciclo controlado por contador.
2. C ada resultado de la prueba tiene u n valor num érico, ya sea 1 o 2. C ada vez que la secuencia de
com andos lee un resultado de la prueba, debe determ inar si el núm ero es 1 o 2. N osotros evaluamos
un 1 en nuestro algoritm o. Si el núm ero no es 1, suponem os que es un 2.
7.10
Formulación de algoritmos: instrucciones de control anidadas
235
3 . Se utilizan dos contadores para llevar el registro de los resultados del examen: uno para contar el
núm ero d e estudiantes que aprobaron y uno para contar el núm ero de estudiantes que reprobaron.
Una vez que la secuencia de com andos ha procesado todos los resultados, debe decidir si más de ocho estu ­
diantes aprobaron el examen. Veamos ahora el refinam iento de arriba a abajo, paso a paso. C om encem os con la
representación del pseudocódigo de la cima:
A nalizar los resultados del examen y decidir si debe pagarse un bono o no
Una vez más, es im portante enfatizar que la cim a es una representación com pleta de la secuencia d e com an­
dos, pero es probable que se necesiten varios refinam ientos antes de que el pseudocódigo pueda evolucionar de
m anera natural en JavaScript. N uestro prim er refinam iento es:
¡niciabzar variables
Introducir ¡as 10 calificaciones del examen y contar los aprobados y reprobados
Im prim ir un resumen de ¡os resultados del examen y decidir si debe pagarse un bono
Aquí tam bién, aun cuando tenem os una representación de toda la secuencia de com andos, es necesario refi­
nada. Ahora nos com prom etem os con variables específicas. Se necesitan contadores para registrar los aprobados
y reprobados; utilizarem os un contador para controlar el proceso d e los ciclos y necesitaremos una variable para
guardar b entrada del usuario. La instrucción en pseudocódigo
Iniciabzar variables
puede refinarsc de b siguiente manera:
Iniciabzar aprobados en cero
Iniciabzar reprobados en cero
Iniciabzar estudiante en uno
Observe que sólo se i n id al izan los contadores para el núm ero d e aprobados, el núm ero de reprobados y el n ú ­
mero de estudiantes. La instrucción en pseudocódigo
Introducir las 10 cabficaáones del examen y contar ¡os aprobados y reprobados
requiere u n ciclo en el que se introduzca de m anera sucesiva el resultado de cada examen. A quí sabem os de an te­
m ano que hay precisam ente 10 resultados del examen, por lo que es apropiado utilizar la repetición controlada
por contador. D en tro del ciclo (es decir, anidado dentro del ciclo), una estructura de selección doble determ i­
nará si cada rcsulrado del exam en es aprobado o reprobado, c increm entará el contador apropiado. Entonces, el
refinamiento de b instrucción anterior en pseudocódigo es
Mientras el contador de estudiantes sea menor o igual a 10
Recibir como entrada el siguiente resultado del examen
S i el estudiante aprobó
Sumar uno a aprobados
De lo contrario
Sumar uno a reprobados
Sumar uno a l contador de estudiantes
Nademos usar líneas en blanco para aislar la estructura de control Si...D e lo contrario, lo cual m ejora b
legibilidad de b secuencia de com andos. La instrucción en pseudocódigo
Im prim ir un resumen de los resultados de los exámenes y decidir si debe pagarse un bono
236
Capitulo 7
JavaScript: instrucciones de control I
puede retinarse de la siguiente manera:
I m p r im ir e l n u m e r o d e a p r o b a d o s
I m p r im ir e l n ú m e r o d e re p ro b a d o s
S i m á s d e o c lto e s tu d ia n te s a p r o b a r o n
I m p r im ir "B o n o p a r a e l in s tr u c to r
"
Segundo refinamiento completo en pseudocódigo y conversión a JavaScript
E l segundo refinamiento completo aparece en la figura 7.10. Observe que también se utilizan líneas en blanco
para separar la estructura M ie n tr a s y mejorar b legibilidad del programa.
1
2
3
I n ic ia liz a r a p ro b a d o s e n cero
I n ic ia liz a r re p ro b a d o s e n cero
I n ic ia l) z a r e s tu d ia n te e n u n o
4
3
6
7
8
M ie n tr a s e l c o n ta d o r d e e s tu d ia n te s sea m e n o r o ig u a l a d ie z
R e c ib ir c o m o e n tr a d a e l s ig u ie n te r e s u lta d o d e l e x a m e n
S i e l e s tu d ia n te a p r o b ó
9
10
11
12
S u m a r u n o a a p ro b a d o s
D e lo c o n tr a r io
S u m a r u n o a re p ro b a d o s
S u m a r u n o a l c o n ta d o r d e e s tu d ia n te s
13
14
13
16
17
18
I m p r im ir e l n ú m e r o d e a p ro b a d o s
I m p r im ir e l n ú m e r o d e re p ro b a d o s
S i m á s d e o ch o e s tu d ia n te s a p r o b a r o n
I m p r im ir "B o n o p a r a e l in s tr u c to r "
Figura 7.10 | El pseudocódigo para el problema de los resultados del examen.
Ahora este pseudocódigo está lo bastante refinado como para convertirlo en JavaScript. En la figura 7.11
se muestra el código de JavaScript y dos ejecuciones de ejemplo.
1
<!D0CTYPE html>
2
3
4
3
6
<!— Fig. 7.11: a n a l i s i s .h t m l -->
< ! - - Calculo de lo s re su lta d o s de un examen. -->
<html>
<head>
7
<meta c h a rs e t = “u tf-8 ”>
8
< title> A n& aacute;lisis de lo s resultados de un examen</title>
<script>
9
10
11
12
13
14
13
/ / in ic ia liza r
var aprobados •
var reprobados
var estudiante
var resultado;
v a r ia b le s en d eclaraciones
0; / / número de aprobados
= 0; / / número de reprobados
= 1 ; / / contador de e stu d ia n te s
/ / el re su lta d o de un examen
Figura 7 .1 1 | Cálculo de los resultados de un examen (parte I de 3).
7.10
16
17
18
19
20
21
22
23
24
23
26
27
28
29
30
31
32
33
Formulación de algoritmos: instrucciones de control anidadas
/ / procesar 10 e stu d ia n te s; c i c l o con tro lad o por contador
while ( e s tu d ia n te <- 10 )
{
resultado «* window.prompt( “Escriba el resultado (l=aprobado,2=reprobado)M, “0" );
i f ( re s u lta d o == “ 1" )
aprobados - aprobados + 1;
e ls e
reprobados » reprobados + 1;
e s tu d ia n te - e s tu d ia n t e + 1;
> / / f i n de while
/ / f a s e de terminación
document .wri t e l n ( “ <hl>Resultados del exanen</hl>” );
do cum ent.w riteln( " <p>Aprobados:" + aprobados ♦
"¡ Reprobados: “ + reprobados + M< /p > " );
34
33
36
37
38
39
40
237
i f ( aprobados > 8 )
document.writ e l n ( “ <p>Bono para e l in stru c to r< /p > " );
< /sc rip t>
</head> <bodyx/body>
< /ht*l>
a) Este düogo se muestra 10
veces. La entrada del usuario
es 1.2. I. 1.1. 1 .1 .1.1 y I.
b) Nueve estudantes apro
taron y ir o reprobó, por lo
<^ie se imprime'Bono para
•1 I n s t r u c t o r " .
-------------------------------------------------------------------------------------------------------------A n á fa n ó* le t rctu lU d o t
C
Vf»04
■
file ///X /c jc m p lo s /c ^ p 0 7 /f.9 0 7 .1 1 /o n a li$ ív h tm l
,Vwfc S ( ¡ o f t c r y
Q Im p o n g o 4* H m .
R esultados del exam en
Api epodos 9. Repcobados 1
Booo
c) Fste d iio g o se muestra 10
veces. La entrada del usuario
es 1.2. I. 2 . 2 . I. 2 . 2 . 1 y I.
d sulnxtc*
benb» e<r«ufttdo \l*»pfcO*do2»rfpfobNÍcj
7"
jsü
L
¿ sa fe
Figura 7 .11 | Cálculo de los resultados de un examen (parte 2 de 3)
^
E
238
Capítulo 7
JavaScript: instrucciones de control I
—
;----------------------------------- *—
AnjfcSB *05r&'MtÓO- * \ ^ _
d) Gnco estudiantes aprobaron
y onco reprobaron. por lo que el
instructor no recibe bono.
C
j
3 f¡ley//X/e^tnplos/cap07/fig07,ll/dfWltSíS.html |M
Ubo% iu9«rtdei
.V«t S I** C a te y
O
I n je rta d o
~
=
fa te lL .
R e s u l t a d o s del e x a m e n
Aprobado* 5. Reprobado* 5
Figura 7.11 | Cálculo de los resultados de un examen (parte 3 de 3).
Las líneas 12 a 15 declaran las variables utilizadas para procesar los resultados del examen. Cabe mencionar que
JavaScript perm ite incorporar la óñcialización de variables en las declaraciones (a aprobados se le asigna O, a re p ro ­
bados se le asigna Oy a e s tu d ia n te se le asigna l). Algunas secuencias d e comandos pueden requerir una rcinicialización al principio de cada repetición; por lo general, dicha rcinicialización se realiza en las instruccionesdc asignación.
El procesam iento de los resultados del examen ocurre en la instrucción whl l e de las líneas 18 a 28. Observe
que i f . . . e 1se en las líneas 22 a 25 en el ciclo se evalúa sólo si el resultado del exam en foe 1; asume que todos
los dem ás resultados del examen son 2. Por lo general es necesario validar los valores introducidos por el usuario
(es decir, determ inar si los valores son correctos).
Buena práctica de programación 7.4
Al recibir valores introducidospor el usuario, valide ¡a entrada para asegurar que sea correcta. Si un valor de
entrada es incorrecto, pida al usuario que introduzca el valor de nueva Los controles de autovalidación de
HTML5 pueden ayudarle a verificar elformato de sus datos, pero tal vez necesite pruebas adicionales para
verificar que los valores con un formato apropiado tengan sentido en el contato de su aplicación.
7.11
Operadores de asignación
JavaScript cuenta con varios operadores de asignación adicionales (conocidos com o o p e ra d o re s d e asignación
co m p u esto s) para abreviar las expresiones de asignación. Por ejem plo, la instrucción
c - c + 3;
puede abreviarse con el o p e ra d o r d e asig n ació n d e su m a
C
así
3;
El operador + - sum a el valor de la expresión a la derecha del operador con el valor d e la variable a la izquierda del
operado i; y almacena el resultado en la variable a la izquierda del operador. C ualquier instrucción de la form a
variable - variable operador expresión;
en d o n d e operadores uno de los operadores binarios
lante en el libro), puede escribirse de la siguiente forma:
variable operador= expresión;
o %(o alguno de los otros que veremos más ade­
7.12
Operadores de incremento y decremento
239
Ib r lo tanto, la expresión de asignación c + - 3 sum a 3 a c. La figura 7 .1 2 m uestra los operadores de
asignación aritm éticos com puestos, algunas expresiones de ejemplo en las que se utilizan estos operadores y las
explicaciones de lo que estos operadores hacen.
Operador de
asignación
Valor inicial
déla variable
Expresión de
ejemplo
Explicación
Asignación
+-
C- 3
C
7
c - c + 7
10 a c
-e s
d = 5
d -» 4
d = d - 4
la d
e - 4
e *- 5
e - e * 5
20 a e
/-
f - 6
f /- 3
f - f / 3
2af
%=
g - 12
g SU 9
g * g %9
3 ag
Figura 7.12 | Operadores de asignación aritméticos.
7.12
Operadores de incremento y decremento
JavaScript cuenta con el o p e ra d o r d e in c re m e n to unario (++) y el o p e ra d o r d e d e c rc m e n to uñaría ( - - ) (sinetizados en la figura 7-13). Si una variable c se increm enta en 1, es posible usar el operador de increm ento ++
en lugar de usar la expresión c • c + 1 o c+« L Si un operador de increm ento o decrem ento se coloca antes
de una variable, se le llam a o p e ra d o r d e p re in c re m c n to o p rcd ccrcm en to , respectivamente. Si un operador de
increm ento o decrcm ento se coloca después de una variable, se le llama o p e ra d o r d e p o stin c re m e n to o p o std ecrem ento, respectivamente.
Operador
++
Ejemplo
■M-a
++
---
—b
---
K b~~
Se llama
Explicación
prrincrcmenro
1ncrcmentar a en 1, después utilizar d nuevo valor de
a en b expresión en que esta variable reside.
post incremento
Usar d valor acrual de a en la expresión en b que
esta variable reside, después incrementar a en 1.
prcdccrcmento
Dccremcntar b en 1, después util¡7.ar d nuevo valor de
b en b expresión en que esta variable reside.
postdccrcmcnto
Usar d valor acrual de b en la expresión en b que
esta variable reside, después docrcmeruar b en I .
Figura 7.13 | Operadores de incremento y decrcmento.
Al preincrem entar (o predecrem ontar) una variable, la secuencia d e com andos increm enta (decrem enta)
b variable por 1 y luego usa el nuevo valor de b variable en b expresión en b que aparece. Al postincrem entar
(postdccrem cntar) b variable, b secuencia de com andos usa el valor actual de la variable en b expresión en b
que aparece, después increm enta (decrem enta) b variable por 1.
240
1
Capítulo 7
JavaScript: instrucciones de control I
<!DOCTYPE htnl>
2
<1-- F i g . 7.14: 1ncremento.html —>
< ! — Preincremento y postincrem ento. -->
<html>
<head>
<»eta c h a rs e t » "utf-8">
8
<title> Preincrem ento y p o stin c re m en to < /title>
<scr1pt>
9
3
4
3
6
7
10
11
12
13
v a r c;
C = S;
14
13
16
17
18
19
docum ent.w riteln( <h3>Postincremento</h3>” );
document.writelnC <p>" + c ) ¡ / / imprime 5
/ / imprime 5 y luego incrementa
docum ent.w riteln( “ “ + c++ );
docum ent.w riteln( “ “ + c ♦ “</p> ) ; / / imprime 6
20
C - 5;
21
document.writelnC ,'<h3>Preincremento</h3>" ) ;
document.writelnC •■<p>M ♦ c ); / / imprime 5
/ / incrementa y luego imprime 6
docum ent.w riteln( " “ + ++c );
docum ent.w riteln( *' “ + c + “</p>" ); / / impri e 6
22
23
24
23
26
27
28
29
</script>
</ hea d><body></ body >
</html>
y pottmc
C
L
x ^
L' l¡le7 //X V ejem p lo s/cap 0 7 /fi^
S xio t e«*9 #o 4 o t
[2 W *b SJk * GílWry
PoMincremento
556
Preincremento
566
Figura 7.13 | Preincremento y postincremento.
La secuencia de com andos en la figura 7.14 muestra b diferencia entre las versiones prcincrem cnto y postíncrem ento del operador de increm ento ++. Al postincrem tentar b variable c, ésta se increm enta después de usarb
en la Uamada al m étodo d o cu m en t.w riteln (línea 17). Al preincrementar b variable c, ésta se increm enta antes de
usarb en b llamada al m étodo docum ent.w ri te l n (línea 24). La secuencia de com andos muestra el valor de c antes
y después d e usar el operador ++. El operador de decrcm ento (- -) funciona de m anera sim ibr.
Buena práctica de programación 7.5
cuestión de legibilí(Lid, los operadores únanos deben colocarse enseguida de sus operandos. sin espacios entre
ellos.
Ibr
7.12
Operadores de incremento y decremento
241
Las tres instrucciones de asignación de b figura 7.11 (líneas 23, 25 y 27, respectivamente):
aprobados - aprobados ♦ 1;
reprobados = reprobados + 1;
e s tu d ia n te - e s tu d ia n te + 1;
pueden escribirse en form a más concisa con operadores de asignación com puestos, de b siguiente manera:
aprobados +- 1;
reprobados += 1;
e s tu d ia n te * - 1;
oon operadores de preincrem ento de b siguiente forma:
++aprobados;
♦♦reprobados;
♦ estu d ian te;
o con operadores de postincrem ento de b siguiente forma:
aprobados-H-;
reprobados++;
estud1ante++;
Al increm entar o decrem entar una variable q u e se encuentre en una instrucción p o r sí sola, las formas
preincrem ento y postincrem ento tienen el mismo efecto, al igual que b s form as predecrem ento y postdecrem ento. Solam ente cuando una variable aparece en el contexto de una expresión más grande es cuando los operadores
preincrem ento y postdecrem ento tienen distintos efectos sobre esa variable. Los operadores de predecrem ento
y postdccrcm cnto se com portan de m anera similar.
Error común de programación 7.4
jF
Tratar de usar ei operador de incremento o decremento en una expresión que no sea una expresión del
lado izquierdo (lo que se conoce comúnmente como Ivalue^ es un error de sintaxis. Una expresión del lado
izquierdo es una variable o expresión que puede aparecer en el lado izquierdo de una operación de asignación.
Ibr ejemplo, escribir **(x ♦ 1 ) es un error de sintaxis, ya que (x ♦ l) no es una expresión del lado izquierdo.
La figura 7.15 lista la precedencia y b asociatividad d e los operadores introducidos hasta este punto. Los
operadores se m uestran de arriba a abajo, en orden descendente de precedencia. La segunda colum na describe
h asociatividad de los operadores en cada nivel de precedencia. El operador condicional (?:X los operadores
unarios de increm ento (♦+) y decrcm ento
y los operadores de asignación », + -,
/■ y X- se asocian
de derecha a izquierda. Todos los demás operadores que se m uestran aquí se asocian de izquierda a derecha. La
tercera colum na nom bra los grupos de operadores.
Operador
Asociatividad
Tipo
+♦ —
derecha a izquierda
unario
*
♦
<
/
izquierda a derecha
m ultiplicativo
<a
izquierda a derecha
izquierda a derecha
aditivo
rebeional
Figura 7.15 | Precedencia y asociatividad de los operadores vistos hasta ahora (parte I de 2)
242
Capitulo 7
JavaScript: instrucciones de control I
Operador
s=b
!=
===
1==
?:
=
+ = - = * = / = % =
Asociatividad
Tipo
izquierda a derecha
igualdad
derocha a izquicrd
condicional
derocha a izquierda
asignación
Figura 7.15 | Precedencia y asociatividad de los operadores vistos hasta ahora (parte 2 de 2).
7.13
Recursos Web
w w w .d e ite l.c o m /Ja v a S c rip t/
El C entro d e recursos de JavaScript d e D eitel contiene vínculos a algunos de los mejores recursos de JavaScript
en Web. Ahí encontrará vínculos clasificados a herram ientas, generadores de código, foros, libros, bibliotecas,
marcos de trabajo de JavaScript y más. Revise tam bién los tutoriaies para todos los niveles de experiencia, desde
introductorio hasta avanzado. Asegúrese de visitar los C entros de recursos relacionados sobre H T M L 5 (www.
d e i t e l .com /htm l 5 / ) y C SS3 (w w w .d eite l. co m /css3 /).
Resumen
Sección 7.2 Algoritmos
• Cualquier problema computablc puede resolverse mediante la ejecución de una serie de acciones en un orden especifico.
• Un procedimiento (pág. 215) para resolver un problema en términos de las acciones (pág. 21 5) a ejecutar y d orden en
el que se van a ejecutar las acciones (pág. 215) se llama algoritmo (pág. 215).
• Al proceso de especificar el orden en el que van a ejecutarse las acciones en un programa de computadora se le conoce
como control del programa (pág. 215).
Sección 7 3 Pseudocódigo
• El pseudocódigo (pág. 215) es un lenguaje informal que nos ayuda a desarrollar algoritmos.
• El pseudocódigo cuidadosamente preparado puede convertirse con facilidad en su correspondiente sccucncb de comandos.
Sección 7.4 Instrucciones de control
•
•
•
•
•
•
Por lo general, las instrucciones en una secuencia de comandos se ejecutan, una después de la otra, en el orden en el que
están escritas. A este proceso se le conoce como ejecución sccucncial (pág. 215).
Varias instrucciones de JavaScript nos permiten especificar que la siguiente instrucción a ejecutar no es necesariamente
la siguiente en la secuencia. A esto se le conoce como transferencia de control (pág. 216).
Todas las secuencias de comandos podrían escribirse en términos de sólo tres estructuras de control: la de sccucncb
(pág. 216). la de selección (pág. 216) y la de repetición (pág. 216).
I h diagrama de flujo (pág. 216) es una representación gráfica de un algoritmo o de una parte del mismo. Los diagramas
de (lujo se dibujan medianre el uso de ciertos símbolos de propósito especial, como rectángulos (pág. 216), rombos
(pág. 217). óvalos (pág. 216) y círculos pequeños (pág. 216); estos símbolos se conectan mcdhntc flechas llamadas
líneas de flujo (pág. 216), que indican d orden en el que se ejecutan las acciones d d algoritmo.
JavaScript cuenta con tres estructuras de selección. La instrucción de selección i f (pág. 217) realiza una acción sólo si una
condición es verdadera. 1 f. . .e l se realiza una acción si una condición es verdadera y una acción diferente si la condición es
falsa. La instrucción de selección switch realiza una de muchas acciones distintas, dependiendo dd valor de una expresión.
JavaScript cuenta con cuatro instmeeiones de repetición: wrhile (pág. 217), do. -while, for y fo r. . i n .
Resumen
243
• Las palabras clave (pág. 217) no pueden usarse como idcmificadorcs (por ejemplo, para los nombres de variables).
• Las «mientras de una sola enriada /una sola salida (pág. 218) facilitan la creación de secuencias de comandos, las
instrucciones de control se unen entre sí al conectar el punto de salida de una instrucción de control con d punto de
entrada de la siguiente. A este procedimiento se le conoce como apilamiento de instrucciones de control (pág. 218). Sólo
hay una forma de conectar las instrucciones de control: anidamiento de instrucciones de control (pág. 218).
Sección 7.5 Instrucción de selección 1 f
E l intérprete de JavaScript ignora los caracteres de espacio en blanco: espacios, fabuladores y saltos de línea que se uti­
lizan para sangría y cspacbmicnto vertical. Los programadores insertan caracteres de espacio en bbnco para mejorar la
daridad de las secuencias de comandos.
• Es posible tomar una decisión en cualquier expresión que se evalúe como true o f al se (pág. 218).
• La convención de sangría que sdeccione debe aplicarse con cuidado en todas sus secuencias de comandos. Es difícil leer
secuencias de comandos que no usen convenciones de espactamiento uniforme.
9
Sección 7.6 Instrucción de selección 1 f . . . e l s e
9
9
•
•
•
El operador condicional (?:; pág. 220) está muy relacionado con la instrucción 1f.. .else. El operador ?: es d único
operador temario de JavaScript: recibe tres opaandos. Los opetandos junto con d operador ?: forman una expresión
condicional (pág. 220). El primer operando es una expresión boolcana, d segundo es d valor de la expresión condicio­
nal si la expresión boolcana se evalúa como verdadera y d rocero es el valor de la expresión condicional si la expresión
boolcana se evalúa como falsa.
Las instrucciones i f .. .else anidadas (pág. 220) evalúan casos múltiples al colocar instrucciones i f . . .el se dentro de
orras estructuras if..else.
El intérprete de JavaScript siempre asocia un el se con el 11 anterior* a menos que se le indique lo contrario mediante
b colocación de llaves ({}).
La instrucción de sdccción 1f espera sólo una instrucción en su cuerpo. Rara incluir varías instrucciones en el cuerpo,
encierre bs instrucciones en un bloque (pág. 222) ddimitado por llaves ({ y }).
Un error lógico (pág. 223) tiene su efecto en tiempo de ejecución. Un error lógico fatal (pág. 223) provoca que una
secuencb de comandos falle y termine antes de tiempo. Un error lógico no fatal (pág. 223) permite que una secuencb
de comandos siga ejecutándose, pero ésta produce resultados incorrectas.
Sección 7 .7 Instrucción de repetición while
9
la instrucción de repetición while nos permite especificar que se va a repetir una acción mientras cierta condición siga
siendo verdadera.
Sección 7.8 Formulación de algoritmos: repetición controlada por contador
A la repetición controlada por contador (pág. 225) se le conoce comúnmente como repetición definida, ya que el nú­
mero de repeticiones se conoce desde antes que empiece a ejecutarse el ciclo.
• Las variables sin inieblizar que se utilizan en cálculos matemáticos producen errores lógicos y el valor fiaN (no es un
número).
• JavaScript representa a todos los números como de punto flotante en b memoria. A menudo los números de punco
flotante (pág. 228) se desarrollan por modio de b división. La computadora asigna sólo una cantidad fija de espacio para
guardar dicho valor, por lo que d valor de punto flotante almacenado sólo puede ser una aproximación.
9
Sección 7.9: Formulación de algoritmos: repetición controlada por un cefttinela
En b repetición controbda por un centineb. un valor especial conocido como valor centineb (también ibmado valor de
señal, valor de prueba o valor de bandera, pág. 228) indica d fin de b entrada de datos. A b repetición controbda por
un centineb se le conoce comúnmente como repetición indefinida (pág. 229), debido a que no se conoce de antemano
d número de repeticiones.
• Es necesario degir un valor ccntinda que no pueda confundirse con un valor de entrada aceptable.
9
244
Capítulo 7
JavaScript: instrucciones de control I
• El método de refinamiento de arriba a abajo, paso a paso (pág. 229), es una técnica esencial para el desarrollo de algo­
ritmos bien estructurados. La cima (pág. 229) es una sola instrucción que transmite el propósito general de la secuencia
de comandos. Como tal, la cima es, en efecto, una representación completa de una secuencia de comandos. El proceso de
refinamiento paso a paso divide la cima en una serie de tareas más pequeóas. Termine el proceso de refinamiento arribaabajo, paso a paso cuando se especifique el algoritmo de pseudocódigo con ef suficiente detalle para que usted pueda
convertir d pseudocódigo en JavaScript.
Sección 7.10 Formulación de algoritmos: instrucciones de control anidadas
•
Es posible anidar las instrucciones de control para realizar tareas mis complejas.
Sección 7 .11 Operadores de asignación
• JavaScript cuenta con los operadores de asignación aritméticos
comunes de expresiones.
/- y
(pág. 238), que abrevian ciertos tipos
Sección 7.12 Operadores de incremento y decremento
•
El operador de incremento ♦+ (pág. 239) y d operador de decrcmento -- (pág. 239) incrementan o dccremen tan una
variable por 1. respectivamente. Si el operador está antes de la variable, ésta se incrementa o dccremenea por I y luego
se usa en su expresión. Si el operador va después de la variable, ésta se utiliza en su expresión y luego se incrementa o
dccrcmcnta por 1.
Ejercicios de autoevaluación
7.1
Complete los siguientes enunciados:
a) Todas las secuencias de comandos pueden escribirse en términos de tres tipos de estructuras de control:
-------------. ------------ y ------------- •
b) La instrucción de selección doble____________ se utiliza para ejecutar una acción cuando una condición es ver­
dadera, y otra acdón cuando esa condición es falsa.
c) Al proceso de repetir un conjunto de instrucciones un número específico de veces se le llama repetición
^
•
d) Cuando no s e sabe de anremano cuántas veces se repetirá un conjunto de instrucciones, se puede usar un valor
_____________(o un_____________ , _____________ o _____________ ) para terminar la repetición.
7.2
7.3
7.4
7.5
Escriba cuatro instrucciones de JavaScript que sumen i , cada una. a la variable x, que contiene un número.
Escriba instrucciones en JavaScript para realizar cada una de las siguientes tareas:
a) Asignar la suma de x y y a z, c incrementar el valor de x en 1 después dd cálculo. Usar sólo una instrucción.
b) Evaluar si d valor de b variable cuenta es mayor que 10. De ser así, imprimir "Cuenta es nayor que 10".
c) Decremcntar b variable x en 1, luego rcstarb a la variable total. Usar sólo una instrucción.
d) Calcubr d residuo después de dividir q entre divisor y asignar d resultado a q. Escriba esta instrucción de dos
maneras distintas.
Escriba una instrucción en JavaScript para realizar cada una de bs siguientes tareas:
a) Declarar las variables suma y x.
b) Asignar l a b variable x.
c) Asignar 0a b variable suma.
d) Sumar b variable x a suma y asignar d resultado a b variable suma,
c) Imprimir “La suma es: seguido del valor de b variable suma.
Combine bs instrucciones que escribió en d ejercicio 7.4 para formar una secuencia de comandos que calcule e im­
prima b suma de los enteros del 1 al 10. Use b instrucción whlle para iterar a través debs instrucciones de cálculo
c incremento. El ciclo debe terminar cuando el valor de x se vudva 11.
Respuestas a los ejercicios de autoevaluación
7.6
245
Determine d valor de cada variable después de realizar d cálculo. Suponga que, cuando se empieza a ejecutar cada
instrucción, todas las variables tienen el valor entero 5.
a) producto * b ) c o c i e n te / • +xx;
7.7
Identifique y corrija los erroresen cada uno de los siguientes segmentos de código:
a) mH11« ( c <- S ) {
p ro d u c to * - c;
++c:
b ) 1 f ( genero — 1 )
d o c u m e n t . w r l t e l n ( “M u j e r " ) ;
else;
docum ent.w rlteln(
7.8
“Hombre" ) ;
¿Qué está mal en b .siguiente instrucción de repetición
while ( 7 >- 0 )
su m a
z
le?
;
Respuestas a los ejercicios de autoevaluación
7.1
7.2
a) Secuencia, selección y repetición. b ) 1 f ...e l s e . c) controlada por contador (o definida). d)centinela, de señal,
de bandera o de prueba.
x - x ♦ 1;
x *m 1;
♦+x;
x* * ;
7.3
a) z • x+* ♦ y;
7.4
b) 1f ( cuenta > 10 )
document.wr1teln( "Cuenta es mayor que 10“ ) ;
c) t o t a l - - —x:
d) q %» d iv iso r;
q ■ q X divisor;
a) var suma, x;
b) x - 1;
c) suna - 0 ;
d) suna
x; o suma - suma ♦ x;
e) document.wr1teln( “La suma es:
♦ suma );
Esta es b solución:
7.5
1
< IOOCTYPE html»
2
3
4
3
6
7
8
9
10
II
12
13
14
<1— E j e r c i d o 7 . 5 : e J 0 7 _ 0 S .h t n l —>
< h ta l>
< » e t* c K a r s e t - “u l f - a " »
< t 1 t l o S w a r l o s e n t e r o s del 1 al l 0 < / t 1 t l e >
< scr1pt>
v a r suna; / / almacena el t o t a l
v a r x; / / v a r i a b l e c o n ta d o r de c o n tro l
x - l;
suma - 0 ;
246
Capítulo 7
JavaScript instrucciones de control I
15
w h ile ( x < - 10 )
i*
(
17
sima 4- x;
18
4*x;
19
} / / fin de while
20
d o c u m e n t.w r 1 te ln ( "La suma es: “ ♦ suma ) ;
21
22
23
</script»
</head><body></body>
< / h te l>
4-
C
©filey//C:/books/2011/IW3HTP5/examples/ch08/ex08_05/'ft ^
The sum is- 55
7.6
a ) pro d u cto - 2 5 , x - 6;
b ) c o c i e n t e - 0 . 8 3 3 3 3 3 . . x - 6;
7.7
a) £m>n falta la llave derecha de cierre d d cuerpo de la instrucción while.
Corrección: Agregar una llave derecha de cierre después de la instrucción +4c;.
b) E rror El ; después de el se produce un error lógico. La segunda instrucción de salida siempre se ejecutará.
Corrección: Quitar el punto y coma después de el se.
El valor de la variable r nunca se cambia en d cuerpo de la ¡nsrrucción while. Por lo tanto, si la condición de con­
tinuación de ciclo ( 7 >- 0 ) es verdadera, se crea un áclo infinito. Para evitar que ocurra un cido infinito, 7 debe
docremenearse de manera que en un momento dado se vudva menor que 0.
7.8
Ejercicios
7.9
Identifique y corrija los errores en cada uno de los siguientes segmentos de código. [Notas puede haber más de un
error en cada fragmento; a menos que haya declaraciones presentes, suponga que todas las variables están declaradas
e inieblizadas correctamente].
a ) 1 f ( edad » 6 5 ) ;
do cu m en t.w r1te 1n ( "Edad e s a a y o r o Ig u al que 6 5 " ) ;
el s e
d o c u m e n t.w r1 te ln ( "Edad es « m o r que 6S ) “ ;
b) v a r x • 1, to ta l;
while ( x <m 1 0 )
(
to ta l ♦« x;
♦♦x;
}
c) v a r x • 1;
v a r t o t a l - 0;
while ( x <- 100 )
to tal
♦♦x;
d) v a r y - 5;
x;
while ( y > 0 )
{
d o c u m e n t.w r1 te ln ( y ) ;
44y;
Ejercicios
7.10
247
Si n e jecu tarla, d e te r m in e lo q u e im p rim e esta secu en cia d e c o m a n d o s :
1 <! DOCTYPE h t a l >
2
3 <1— E j e r c i c i o 7 . 1 0 : e j 0 7 _ 1 0 . h t n l — >
4 <hta1>
5
4
7
8
<head>
< M ta c h a r s e t - " u t f - 8 “>
< t i t l a > S e c u e n c i a de comandos « i s t e r i o s a < / t i t l a >
<scr1pt>
f
10
11
12
13
14
13
v a r y;
v a r x - 1;
v a r t o t a l - 0;
w h ila ( x < - 10 )
{
16
17
18
I»
20
21
22
23
24
25
y • x * x;
docum ent.w ritelnC "<p»“ ♦ y ♦ “</P>" ) :
t o t a l ♦ - y;
♦♦x;
) / / f i n de w hile
d o c u n e n t.w r ite ln C ”<p>El t o t a l a s “ + t o t a l ♦ "</p>" ) ;
< /script>
</h«ad><body></body>
26 </htm
l>
Pira los ejercicios 7.11 a 7.14 realice cada uno de ios siguientes pasos:
a) Lea el enunciado del problema.
b) Formule el algpritmo usando pseudocódigo y el refinamiento arriba-abajo, paso a paso.
c) Defina el algoriemo en JavaScript.
d) Pruebe, depure y ejecute d JavaScript.
c) Procese u ts conjuntos completos de datos.
7.11 Los conductores se preocupan acerca del kilometraje de sus automóviles. Un conductor ha llevado d control de va­
rios rea bastee im icntos de gasolina, registrando los kilómetros conducidos y los litros usados en cada viaje. Desarrolle
una secuencia de onmandns que reciba como entrada los kilómetros conducidas y los litros usados por cada viaje. 1.a
secuencia de comandos debe calcular y producir texto de HTML5 que muestre d número de kilómetros por litro
obtenidos en cada viaje, y debe imprimir d total de kilómetros por litro obtenidos en todos los rea bastee im icntos
hasta este punto. Use diálogos prompt para obtener los datos del usuario.
7.12 Desarrolle una secuencia de comandos que determine si alguno de los clientes de una tienda de departamentos se ha
excedido del limite de crédito en una cuenta. Pira cada cliente se tienen los siguientes datos:
a) £1 número de cuenta.
b) El saldo al inicio del mes.
c) El total de todos los artículos cargados por d cliente en el mes.
d) El total de todos los créditos aplicados a la cuenta dd cliente en el mes.
e) £1 límite de crédito permitido.
La secuencia de comandos debe recibir como entrada cada uno de estos datos desde un diálogo pronpt como
entero, debe calcular d nuevo saldo (= saldo inicial ♦ cargos - créditos), mostrar d nuevo balance y determinar si éste
excede d límite de crédito d d cliente. Para los clientes cuyo límite de crédito sea excedido, la secuencia de comandos
debe producir texto de H TM L5 que muestre d mensaje “Se excedió d límite de su crédito”.
7.13 Una empresa grande paga a sus vendedores mediante comisiones. Los vendedores reciben $200 por semana, más el
9 por ciento de sus ventas brutas durante esa semana. Por ejemplo, un vendedor que vende $5000 de mercancía en
248
Capitulo 7
JavaScript: instrucciones de control I
una sanana, recibe $200 más el 9 por ciento de 5000, o un total de $650. Usted acaba de recibir una lista de los
artículos vendidos por cada vendedor. Los valores de estos artículos son los siguientes:
A r tic u lo
V alor
1
2 3 9 .9 9
2
1 2 9 .7 5
3
9 9 .9 5
4
3 5 0 .8 9
Desarrolle una secuencia de comandos que reciba como entrada los artículos vendidos por un vendedor durante la
última semana, que calcule los ingresos de ese vendedor y produzca texto de HTML5 para mostrar los ingresos de
esc vendedor.
7.14 Desarrolle una secuencia de comandos que determine el sueldo bruto para cada uno de tres empleados. La empresa
paga la “cuota normal* en las primeras 40 horas de trabajo de cada empleado, y paga “cuota y media” en todas bs
horas trabajadas que excedan de 40. Usted recibe una lista de los empleados de b empresa, el número de horas que
trabajó cada uno b semana pasada y b tarifa por horas de cada empleado. Su programa debe recibir como entrada
esta información para cada empleado, determinar d suddo bruto de cada uno y producir texto de HTML5 que
muestre esc sueldo bruto. Utilice diálogos pronpt pata introducir los datos.
7.15 El proceso de encontrar el valor rm is g ra n d e (es dedr, d máximo de un grupo de valores) se utiliza con frecuencia en
aplicaciones de computadora. Por ejemplo, tina seareoda de datos para determinare! ganador do un concurso de ventas
recibe como entrada el número de unidades vendidas por cada vendedor. El que haya vendido más unidades es d que
gana d concurso. Escriba un algoritmo en pseudocódigo y después una secuencia de comandos que recibacomo entrada
una serie de 10 números de un solo dígito como caracteres, determine d mayor de los números y produzca un mensaje
que muestre cl número más grande. Su secuencia de comandos debe utilizar bs siguientes tres variables:
a) contador: un contador para contar hasta 10 (es decir, para llevar el registro de cuántos números se han introdu­
cido, y para dacrminar que se hayan procesado los 10 números).
b) numero: d entero más reciente introducido por d usuario.
c) nayor: d número más grande encontrado hasta ahora.
7.16 Escriba una secuencia de comandos que utilice ciclos para imprimir b siguiente tabb de valores. Muestre los resul­
tados en una tabb de HTML5. Use CSS para centrar los datos en cada columna.
0 SoKkio*416
C
L';
■^
íiieZ/ZX/ejemplos/cap-
SitKH ugtnóc*
> 10* VIOO'N
W *
Gfttor, O
or>8 . 1 6 .ht'
Bü ¿
■
im p o iU d c <J«
1000‘N
10
100 j
1000
7
*
i
20
200
2000
50
500
3000
i
10
400
4000
5
50
500
5000
6
60
600
6000
7.17 Utilbando una metodología simibr a b del ejercicio 7.15, encuentre los dos valores más grandes de los 10 que se
introdujeron. [A'ota: puede introducir cada número sólo una vez].
7.18 Sin ejecutar b siguiente secuencia de comandos, determine lo que imprime:
1 <ID0CTYPE hta1>
2
3 < 1 - - E j e r c i c i o 7 .1 8 : e j 0 8 _ 1 8 . h t n l - - >
4 <html>
5
<h«ad>
Ejercicios
A
7
8
249
<aeta charset - '‘u tf-8“>
<title>S«cu«ncia de comandos mist«riosa</titl*>
<scr1pt>
9
10
var f i l a - 10;
11
var colunna;
12
13
while ( f i l a >- 1 )
14
í
13
colunna - 1;
I*
doc»wtent.wr1teln("<p>" );
17
18
while ( columna <• 10 )
If
{
20
document.writ e ( f i l a * 2 — 1
21
♦♦coltwma;
22
} // end while
23
24
--fila ;
23
document. wri te l n( “</p>" );
26
> / / end while
27
28
</script>
20
</head»<body></body>
30 </htnl>
7
"<" : ">" );
7.19 (Problema del e ls * suelto) Determine La salida de cada uno de los siguientes segmentos de código, cuando x es 9
y y es 11, y cuando x es 11 y y es 9. Observe que el intóptetc ignora la sangría en una secuencia de comandos. Ade­
más, el intérprete de JavaScript siempre asocia un el se con el 1f anterior, a menos que se le indique de otra forma
mediante la colocación de llaves ({}). A primera vista, tal vez no esté seguro de cuál 1f corresponde a cuál el se. Esta
situación se conoce como el problema del “el se suelto". Hemos diminado b sangría del siguiente código para hacer
d problema más retador. ( Sugerencia: Aplique las convenciones de sangría que ha aprendido],
a) i f ( x < 10 )
I f ( y > 10 )
document.writeln ( "<p>*****</p>- );
el se
document.write ln (
);
document.writeln( "<p>S$SS$</p>“ );
b) i f ( x < 10 )
{
i f ( y > 10 )
document.write1n(
>;
)
el se
{
document.writeln( "<p>#####</p>" );
document.writeln( '<p>S3SSS</p>" );
)
7.20 Un palíndromo es un número o una frase de tcxro que se lee igual al derecho y al revés. Por ejemplo, cada uno de
los siguientes enteros de cinco dígitos es un palíndromo: 12321, 55555, 45554 y 11611. Escriba una secuencia
de comandos que lea un entero de cinco dígitos y determine si es un palíndromo. Si el número no es de cinco
250
Capítulo 7
JavaScript instrucciones de control I
dígitos, muestre un diálogo a le rt que indique el problema al usuario y le permita introducir un nuevo valor después de
cerrar d diálogo a le r t. [Sugerencia: es posible hacer este ejercicio con las técnicas que aprendió en este capitulo.
Tendrá que usar operaciones de división y de residuo para “sdeccionar" cada dígito).
7 .2 1 Escríba una secuencia de comandos que produzca texto de HTM L5 que siga mostrando en la ventana de comandos
los múltiplos del entero 2 (a saber. 2. 4. 8. 16.32.64, etcétera). Su ciclo no debe terminar (es decir, debe crear un ciclo
infinito). ¿Qué ocurre cuando ejecuta este programa?
7.22 Una compañía desea transmitir datos por tdéfono, pero le preocupa que sus teléfonos puedan estar intervenidos.
Todos sus datos se transmiten como enteros de cuatro dígitos. La compañía le ha pedido a usted que escríba una
secuencia de comandos que cifre sus datos, de modo que puedan transmirítsc en forma m is segura. Su secuencia
de comandos debe leer un entero de cuatro dígitos introducido por el usuario en un diálogo pronpt y cifrarlo de b
siguiente manera: reemplace cada dígito con (¡a turna de ese dígito más 7) módulo 10. Después intercambie el primer
dígito con el tercero, c intercambie d segundo dígito con d cuarto. Luego produzca texto de HTML5 que muestre
el entero cifrado.
7.23 Escriba una secuencia de comandos que reciba como entrada un entero cifrado de cuatro dígitos (dd ejercicio 7.22)
y lo descifre para formar d número original.
JavaScript:
instrucciones de control
¿Quién puede controlar su destino?
—W illkim .Shakespeare
No todo lo que puede contarse
cuenta, y no todo lo que cuenta
puede contarse.
—
Albcri Himido
Objetivos
En este capítulo aprenderá a:
■ Reconocer los fundamentos de
la repetición controlada por un
contador.
■ Utilizar las instrucciones de
repetición f o r y d o . . . whi le
para ejecutar instrucciones
de manera repetitiva en un
programa.
■ Realizar la selección múltiple
utilizando la instrucción de
selección sw itch.
■ Utilizar las instrucciones de
control de programa break
y continué.
■ Utilizar los operadores lógicos
para tomar decisiones.
Capítulo 8
252
JavaScript: instrucciones de control II
8.1 Introducción
8 .6 Instrucción de repetición d o . . .while
8.2 Fundamentos de la repetición controlada por
contador
8 .7 Instrucciones break y continué
8 .3 Instrucción de repetición fo r
8 .8 Operadores lógicos
8 .9 Recursos Web
8 .4 Ejemplos sobre el uso de la instrucción fo r
8 .5 Instrucción de selección múltiple sw itch
Resumen \ Ejercicios de autoevaluación | Respuestas a los ejercicios de autoevaluación | Ejercicios
8.1
Introducción
En este capítulo presentarem os el resto de las instrucciones de co n tro l de JavaScript (con b excepción de for...
in , que veremos en el capítulo 10). En capítulos posteriores veremos que b s instrucciones de control tam bién
son útiles para m an ip u b r objetos.
8.2
Fundamentos de la repetición controlada por contador
La repetición co n tro b d a por contador requiere:
1. El nombre de una variable de control (o contador de ciclo).
2. El valor inicial de b variable de control.
3. El incremento (o decremento) por el cual se m odifica b variable de control cada vez que pasa por el ciclo
(lo que ram bién se conoce com o cada iteración del ciclo).
4 . La c o n d ició n que evalúa el valor fin a l de la variable d e c o n tro l para d e te rm in a r si el ciclo debe contínuar.
Para ver b s cuatro elem entos de b repetición controlada por un contador, considere b secuencia de com an­
dos sim ple de b figura 8.1, que m uestra líneas de texto de H T M L 5 para ilustrar b s siete tam años distintos de
fuente soportados por H T M L 5. I-a dccbración en la línea 11 nombra b variable de control (co n tad o r), reserva
espacio para e lb en m em oria y la establece con un valor inicial de 1. La declaración e inicialización d e c o n ta d o r
tam bién podría haberse realizado m ediante estas instrucciones:
v a r contador; / / d e c la ra r e l contador
contador « 1 ; / / i n i c i a l i z a r contador en 1
Las líneas 15 y 16 en b instrucción w h ile escriben un elem ento párrafo que consiste en la cadena “Tamafto
de fu e n te de HTML5" concatenada con el v a b r d e b variable d e control c o n ta d o r, que representa el tam año de
fuente. U n atributo s ty l e de CSS en linea establece b propiedad f o n t - s i z e al v a b r de c o n ta d o r concatenado
con ex.
la línea 17 en la instrucción w h ile incrementa la variable de control en 1 por cada iteración del c id o (es
decir, cada vez que se ejecuta el cuerpo del ciclo). La condición de continuación de c id o (línea 13) en la instruc­
ción w h ile evalúa si el v a b r d e b variable de control es m enor o igual a 7 (el valor fin a l en el q u e b condición es
tr u e ). C ab e m encionar que el cuerpo de esta instrucción w h ile se ejecuta incluso cuando b variable d e control
es 7. El d d o term ina cuando b variable de control se excede d e 7 (es decir, cuando c o n ta d o r se vuelve 8).
8.3
1
Instrucción de repetición for
253
<IDOCTYPE ht«ll>
2
3
4
3
<1-- F1g. 8 . 1 : Contadorehíle.htm l —>
<1— Repetición controlada por un contador. —>
<ht«l>
6
7
8
9
10
11
12
13
14
13
16
17
18
19
20
21
22
<head>
< » eta c h a rs e t=
"u tf-8">
<t1tle>Repetic1ón c on tro lada por c o n tad o r< /t1tle>
<scr1pt>
v a r contador = 1; / / 1n1cla11zaclón
while ( contador <*» 7) / / condición de r e p e tic ió n
{
do cum ent.w riteln( "<p s t y l e w ' f o n t - s l z e : " +
contador + "ex’>Tana&nt11de;o de fuente de HTML5 " + contador + "ex</p>" );
++contador; / / Incremento
> / / f i n de while
</scr1pt>
</head><bodyx/body>
</h t« l >
l
1
p: «
C
[ j S^os sudado:
filey//X/ejem pÉos/cdp08/f«g08.01/ContaKíorW Tiiiehtm l
P
s
’J W«to Sac« Gtttcry C*J |f*pc«ttdo t e Imcm.
U m h Mn Ii IM J ••
Ticudo te
te ffTMLS 2c*
Tamaño de fuente de HTM L 5 3ex
Tamaño de fuente de H TM L 5 4ex
Tamaño de fuente de HTML5 5ex
•
Tamaño de fuente de HTML5 6cx
Tamaño de fuente de HTML5 7ex
Figura 8.1 | Repetición controlada por un contador.
8.3
Instrucción de repetición fo r
La in stru c c ió n de re p e tic ió n f o r m aneja de form a conveniente todos los detalles de la repetición controlada
por contador. La figura 8.2 ilustra el poder d e la instrucción f o r al reim plem entar la secuencia de la figura 8.1.
Las salidas de estas secuencias de com andos son idénticas.
254
Capítulo 8
JavaScript: instrucciones de control II
1 <!DOCTYPE ht«l>
2
3
4
<1— Fig. 8 .2 : ContadorFor.html —>
<1-- Repetición c o ntro lada por contador con l a In stru c c ió n fo r . -->
3
<html>
6
<head>
7
<*teta cKarset= "utf-8">
•
< t1 tle > R ep e t1 c i& o a c u te ;n c o n tro la d a por c o n ta d o r < /t1 tle >
9
<scr1pt>
10
11
12
13
14
/ / La 1n1c1alizac16n, condición de r e p e tic ió n e
/ / incremento se incluyen en e l encabezado de
/ / l a in s tr u c c ió n fo r .
f o r ( var c o n ta d o r - 1; c o n ta d o r <■ 7; + + contador )
13
d o cu m en t.w riteln C *'<p s t y l e = *f o n t - s i z e : " +
16
c o n ta d o r + " e x ’>Ta«a& nt1lde;o de fu e n te d e
17
18
19
20
HTWLS
" + c o n ta d o r + "ex</p> " ) ;
</scr1pt>
</head><body></body>
</html>
Figura 8.2 | Repetición controlada por contador con la instrucción fo r.
C uando la instrucción f o r comienza a ejecutarse (línea 14), se declara la variable de control c o n ta d o r se
inicializa en L Después se revisa la condición de continuación de ciclo co n tad o r < - 7. La condición contiene el
valorfinal(7) de b variable de control. El valor inicial de c o n ta d o r es 1. Por lo tanto, la condición se cum ple (es de­
cir, es tru e ) y la instrucción del cuerpo (líneas 15 y 16) escribe u n elemento párrafo dentro del elem ento body del
docum ento de H T M L 5. A continuación, la variable c o n ta d o r se increm enta en b expresión + +contador y el
ciclo continúa su ejecución con b prueba de continuación de ciclo. Ahora b variable de control es igual a 2, por lo
que no se excede el valor final y el program a ejecuta la instrucción del cuerpo otra vez (es decir, ejecuta b siguien­
te iteración del ciclo). Este proceso continúa hasta que b variable de control c o n ta d o r se vuelve 8. punto en el cual
falb la prueba de continuación de ciclo y b repetición termina.
EJ program a co n tin ú a ejecutando b prim era instrucción después de f o r (en este caso b secuencia term ina,
ya que el intérprete llega al final de ésta).
La figura 8.3 analiza con más detalle b instrucción f o r de b línea 14 de b figura 8.2. La prim era línea de
f o r (incluyendo b p a b b ra cbvc f o r y todo lo que le sigue entre paréntesis) se conoce com únm ente com o en­
cabezado de la instrucción for. C abe m encionar que esta instm cción “hace todo": especifica cada uno de los
elem entos necesarios para b repetición c o n tro b d a por contador con una variable de control. Recuerde q u e un
bloque es u n grupo de instrucciones encerradas entre Uaves que pueden colocarse en cualquier parte en donde
pueda colocarse una so b instrucción, p o r lo que, si es necesario, puede usar un bloque para colocar varias ins­
trucciones en el cuerpo d e fo r.
Una vista niás detallada del encabezado de ¡a instrucción fo r
La figura 8.3 usa la condición de continuación de ciclo c o n ta d o r <= 7. Si se equivoca y escribe c o n ta d o r
< 7, el ciclo se ejecutará sólo seis veces. Éste es un ejemplo del error lógico com ún conocido com o error por
desplazamiento en uno.
8.3
Palabra clave
f° r
Nombre de la
vaiiable de control
Instrucción de repetición for
255
Valor final de la variable de control
para la cual la condición es ¡rué
for ( var contador- 1; contador<- 7; 4-Kontador)
Valor inicial de la
vaoable de control
Condición de
continuación de ciclo
incremento de la
vaiiable de control
F igura 8 .3 | Componentes del encabezado de la instrucción fo r.
Form ato general de una instrucción fo r
El form ato general de b instrucción f o r es
fo r ( inicialitaciótr. evaJuaciónDeCondnuaciónDeGcla. incremento)
instrucciones
en d o n d e la expresión inicialización nom bra a la variable d e control d e ciclo y proporciona su valor inicial, la
evaluaciónDeContinuaciónDeCiclo es la expresión que evalúa la condición de continuación del ciclo (contiene
el valor final de la variable de control para la cual b condición es tr u e ) e incremento es una expresión que incre­
m enta b variable de control.
Expresiones opcionales en el encabesutdo de una instrucción fo r
Las tres expresiones en el encabezado de b instrucción f o r son opcionales. Si se o m ite la evahtaciónCondiciónGclo, b condición de continuación de ciclo es tr u e y se crea un ciclo infinito. Podríam os o m itir la expresión
inicialización si b variable de control se inici.iliza antes del ciclo. Podríam os o m itir b expresión de incremento
á calculamos el increm ento m ediante instrucciones en el cuerpo del ciclo o si no se necesita. Los dos puntos y
com a en el encabezado son obligatorios.
Expresiones aritm éticas en el encabezado de la instrucción fo r
Las partes d e inicialización, condición de continuación de ciclo e increm ento d e u n a instrucción f o r pueden
contener expresiones aritm éticas. Por eje m p b , suponga que x - 2 y y - 10. Si x y y no se m odifican en el
cuerpo del ciclo, entonces b instrucción
fo r ( v a r
j
•
x;
j
<- 4 •
x
* y;
<-
j
+- 5 )
j + » y / x )
es equivalente a b instrucción
fo r ( v a r
j
-
2;
j
80;
Increm entos negativos
El “increm ento” d e una instrucción f o r puede ser negativo, en cuyo caso es realm ente un decremento y el c ic b
en realidad cuenta en form a regresiva.
La condición de continuación de ciclo es fa 7s e en u n p rin cip io
Si en un principio b condición de continuación del c ic b es f a l se, no se ejecuta el cuerpo de b instrucción f o r .
En vez de e lb , b ejecución continúa con b instrucción que va después de b instrucción fo r.
T ip p a r a p r e v e n i r e r r o r e s 8.1
Aunque d valor de ¡a variable de controlpuede modificarse en el cuerpo de una instrucción for, evite modifi­
carla pues podría conducir a errores sutiles.
256
Capítulo 8
JavaScript: instrucciones de control II
Diagrama de flujo de una instrucción fo r
La instrucción f o r se dibuja en un diagram a de flujo en form a m uy parecida a w h i l e . Por ejem plo, la figura
8.4 m uestra el diagram a de flujo de f o r q u e está en las líneas 14 a 17 d e la figura 8.2. E ste diagram a de flujo
deja en claro que la inicialización sólo ocurre una vez y que el increm ento ocurre después de cada ejecución de la
instrucción body. Tenga en cuenta que, adem ás d e circuios pequeños y flechas, el diagrama de flujo con tien e sólo
símbolos de rectángulo y un símbolo de rombo.
Establecer ualor
mteial de la vaaable
d* control
var contador- 1
r
<
c o n ta d o r < - 7
/
Determinar si,
se llegó al ualor
final de la vanable
de control
h
d o c u n e n t.w rite ln C
“<p s t y l e - ’f o n t - s i 2e: ••
verdadero
♦ c o n tad o r ♦ " e x ’>
T a n a 4 n t ild e : o de f u e n te de
HTML5 “ ♦ c o n tad o r
+ "ex</p>" ) ;
■►♦contador
h a e m m la r
ti variable
& control
Cuerpo del ciclo
(puede tener muchas
instrucciones)
Figura 8 .4 | Diagrama de flujo de la instrucción de repetición for.
8.4
Ejemplos sobre el uso de la instrucción fo r
Los ejem plos en esta sección m uestran m étodos para modificar la variable de control en fo r. En cada caso, escri­
bim os el encabezado fo r apropiado. Observe el cam bio en el operador relacional para los ciclos q u e decrementan
la variable de control.
a) M odificar la variable de control de 1 a 100 en increm entos de 1.
f o r ( v a r 1 - 1 ; 1 <« 100: ++1 )
b) M odificar la variable de control de 100 a 1 en increm entos d e -1 (es decir, decrementos de l).
fo r (
var 1 - 100; 1 >- 1 ; --1 )
c) M odificar la variable de control de 7 a
fo r ( var 1 = 7 ;
1 <=
77 en increm entos d e 7.
77; 1 +» 7 )
d) M odificar la variable de control de 20 a 2 en increm entos de -2.
for ( var 1 - 2 0 ; 1 > - 2 ; i —
7g v
2 )
Error com ún de programación 8.1
Utilizar el operador relacional incorrecto en ¡a condición de continuación de un cido que cuente en forma
regresiva (como usar 1 <• 1 en vez de 1 >- 1 en un ciclo que cuente enforma regresiva basta llegar a l) es un
error lógico.
8.4
Ejemplos sobre el uso de la instrucción for
257
Suma de enteros con una instrucción fo r
La figura 8.5 usa la instrucción f o r para sum ar los enteros pares de 2 a 100. Observe q u e la expresión de in­
crem ento (línea 13) sum a 2 a l a variable de control numero después de que se ejecuta el cuerpo durante cada
iteración del ciclo, el cual term ina cuando numero tenga el valor 102 (que no se agrega a la suma) y la secuencia
de com andos co n tin ú a su ejecución en la línea 16.
I
< IDOCTYPE html>
2
3
4
3
6
7
8
9
10
11
12
13
14
13
16
17
18
19
20
21
8.5: Suma.html — >
<1-- Suma con l a e s t r u c t u r a de r e p e tic ió n
fo r. —>
<ht«l>
<head>
<aeta c h a r s e t = "u tf-8">
<title>Sumar los e n te ro s pares del 2 al 1 0 0 < / tit le >
< script>
<!—
Fig.
var suma - 0;
f o r ( v a r numero - 2; numero <- 100; numero +- 2)
suma +■ numero;
document.writ e l n ( "La suma de lo s e n te ro s pares
"del 2 al 100 es " + suma );
" +
< /script>
</head> <bodyx/body>
</ht*l>
j
¿5 S***» & «ntMOt p a r « c
C
»
V
_T fiWr///XyejemplO5/c¿p08/fi908-0S/Sumji htínl
S 4 * itw e o < to i
ü
W*t>SíceG8tt«f>
D
k r ^ o r u d c d e Im *
p
£
=
a
La suma <SeJos caeros paxes <5H2 al 100 es 2550
Figura 8 . 5 | Suma con la estructura de repetición for.
EJ cuerpo de la instrucción f o r en la figura 8.5 podría fusionarse en la parte d e más a la derecha (increm ento)
del encabezado f o r m ediante el uso de una com a, com o en el siguiente ejemplo:
for ( var numero = 2; numero <= 100; suma +-= numero, numero += 2)
En este caso, b com a representa el operador coma, el cual garantiza que b expresión a su izquierda se evaluará
antes que b expresión a su derecha. D e manera similar, b iniciaiización suma=0 podría fusionarse en b sección
de iniciaiización de b instrucción for.
Buena práctica de programación 8.1
Aunque ¡as instrucciones que van antes de fo r y las que van en el cuerpo de for pueden fusionarse casi siempre
en el encabezado del for, es mejor evitar hacerlo debido a que el programa es mucho mds ehficil de leer.
258
Capitulo 8
JavaScript: instrucciones de control II
Cálculo del interés compuesto con la instrucción fo r
El siguiente ejem plo calcula el interés com puesto (calculado en form a anual) m ediante el uso de la instrucción
fo r. C onsidere el siguiente enunciado del problema:
Una persona inviene S I 000.00 en una cuenta de ahorro que produce e l 5 por ciento de interés. Suponiendo
que todo el interés se deposita en la cuenta, calcule e im prim a el monto de dinero en la cuenta a l fin a l de
cada año, durante 10 años. Use ¡a siguiente fórm ula para determinar los montos:
d - p (l + r)"
eti donde
p e s e 1 m onto que se invirtió originalm ente (es decir, el m onto principal)
re s la tasa de interés anual
n es el núm ero de años
a es la cantidad depositada al final del n-ésimo año.
Este problem a implica el uso de un c id o que realiza los cálculos indicados para cada uno de los 10 años que
el dinero perm anece depositado. La figura 8.6 presenta la solución a este problem a, m ostrando los resultados en
una tabla. Las líneas 9 a 18 definen una hoja de estilo CSS incrustada para aplicar form ato a diversos aspectos
de la tabla. La propiedad de CSS b o r d e r - c o ll apse (linca 11) con el valor c o lla p s e indica que los bordes de
la tabla deben fusionarse de m odo que no baya espacio adicional entre celdas adyacentes o entre las celdas y el
borde d e la tabla. Las ü'neas 13 y 14 especifican el form ato para los elem entos t a b l e , td y th , indicando que
todos deben tener un borde lp x s o l id b la c k y un relleno d e 4px alrededor de su contenido.
1
<!DOCTYPE ht»l>
2
3 <1— Fig. 8 .6 : I n te r e s .h tm l —>
4 < 1 — Cálculo d e l i n t e r é s compuesto con un c i c l o f o r . - - >
3 <ht*tl>
6
<head>
7
<meta c h arset = "u tf-8">
•
<title>C A aacute;laculo del in te r& e a c u te;s compuesto</title>
9
< sty le type ■ " te x t/c s s " >
10
ta b le
{ width: JOOpx;
11
b o rd e r-c o lla p se :c o lla p se;
12
background-color: lig h tb lu e ; }
13
t a b le , t d , th { border: lpx s o l i d black;
14
padding: 4px; }
13
th
{ te x t - a l i g n : l e f t ;
16
color: white;
17
background-color: darkblue; }
18
tr.fila im p a r
{ background-color: whlte; }
19
</style>
20
<script>
21
22
23
24
23
var monto; / / monto actu al de dinero
var p rin c ip a l ■ 1000.00; / / monto p rin c ip a l
var t a s a • 0 .0 5 ; / / ta s a de in te r é s
Figura 8 .6 | Cálculo del interés compuesto con un ciclo fo r (parte I de 2).
8.4
Ejemplos sobre el uso de la instrucción for
259
26
d ocum ent.w riteln( "<table>" ) ; / / comenzar l a ta b la
27
docum ent.w riteln(
28
"<caption>Cálculo del inter& eacu te;s compuesto</caption>" );
29
docum ent.w riteln(
30
"<thea<b<tr><th>AAntÍlde;o</th>" ); / / encabezado de l a columna del año
31
docum ent.w riteln(
32
"<th>Monto en depós1to</th>" ); / / encabezado de l a columna del monto
33
d ocum ent.w riteln( "</tr></thead><tbody>" );
34
35
/ / imprimir una f i l a de l a ta b la para cada año
36
f o r ( v a r anio - 1; anio < - 10; ++anio )
37
{
38
monto ■ p r in c ip a l * Math.powC 1 . 0 + t a s a , anio ) ;
39
40
i f ( anio X 2 !-- 0 )
41do cum ent.w riteln( "< tr c la s s = f ila im p a r ’><td>" + anio +
42
"</td><td>" + m onto.toFixed(2) + "</td></tr>" );
43
el se
44
docum ent.w riteln( "<tr><td>" + anio +
45
"</td><td>" + m onto.toFixed(2) + "< /td > < /tr> H );
46
> / / f i n de f o r
47
48
d ocum ent.w riteln( "</tbody></table>" );
49
50
< /sc rip t>
51
</head><body></body>
52 </ht«l>
[ 5 C íb c u to del w
C
j
o (t
K
f¡Iey//XVe3empio^i > =
sugvttfot
j Web Stct Gebcry
»
______Cairelo áci ptfTcs cotnporsto_______
Aéo
12
Ui
M oato rm deposito
11050 00
1102 50
|?
111376?
5
1276 2S
6
2^to j *
|?
140710
I*
1477.46
|9
1551 33
|l°
I 6 : s 89
Figura 8.6 | Cálculo del interés compuesto con un ciclo f o r (parte 2 de 2).
Visualizadón del comienzo de una ta b la de H TM L5
Las lincas 22 a 24 declaran tres variables c ¡nicializan p r i n c ip a l en 1000.0 y t a s a en .05. La línea 26 escribe
una etiqueta < ta b le> de H T M L 5 y las líneas 27 y 28 escriben el elem ento c a p tio n que sintetiza el contenido
de la tabla. Las líneas 29 y 30 crean la sección de encabezado de la ta b b (<thead>), u n a fib (< tr> ) y u n encabe-
260
Capitulo 8
JavaScript: instrucciones de control II
zado de colum na (<th>) que contiene “Año”. Las líneas 31 y 32 crean u n encabezado de tabla para “Monto en
d e p ó s ito ”, escriben las etiquetas < /tr > y < /th ead > de cierre, y escriben la etiqueta d e apertura para el cuerpo
de la tabla (<body>).
Implementación de los cálculos de intereses
La instrucción f o r (líneas 36 a 46) ejecuta su cuerpo 10 veces, increm entando la variable de control a n io de 1 a
10 (tenga en cuenta que a n io representa a n en el enunciado del problem a). JavaScript no incluye un operador
de exponenciación; com o alternativa usam os d m étodo pow del objeto Math. Math. pow(x, y) calcula el valor de
x elevado a la potencia y. El m étodo Math. pow recibe dos núm eros com o argum entos y devuelve el resultado. La
línea 38 realiza el cálculo usando la fórm ula que se proporciona en el enunciado del problema.
Formato de lasfilas de la ta b la
Las líneas 40 a 45 escriben una línea de m arcado de H T M L 5 q u e crea la siguiente fila en la tabla. Si es una
fila impar, la línea 4 1 indica q u e hay que d ar form ato a la fila con la d ase de estilo f i 1 aimpar de CSS (defini­
da en la línea 18); esto nos perm ite aplicar un color de fondo d istin to para las filas con num eración p ar c
impar, para facilitar la legibilidad d e la tabla. 1.a prim era colum na es el valor de a n io actual. La segunda co­
lu m n a m uestra el valor de monto. La línea 48 escribe las etiquetas < /tb o d y > y < /ta b le > d e cierre después de
que term ina el c id o .
El método to F ixed d e Number
Las líneas 42 y 4 5 introducen el objeto Number y su m éto d o to F lx e d . La variable monto contiene un valor num éri­
co, por lo que JavaScript lo representa com o un objeto Number. El m étodo t o F ix e d de un objeto Number d a form ato
al valor y lo redondea al número especificado de lugares decimales. En la línea 4 5 , m o n to .to F i x e d (2 ) im prim e el
valor del m onto con dos lugares decimales, lo que es apropiado para m ontos en dólares.
Una adx>ertencia sobre la visualización de valores redondeados
Las variables monto, p r i n c ip a l y t a s a representan núm eros en esta secuencia de com andos. Recuerde que
JavaScript representa a todos los núm eros com o de p u n to flotante. Esta característica es conveniente en este
ejem plo, ya que lidiam os con partes fraccionarias de dólares y necesitamos un tipo que perm ita puntos decim a­
les en sus valores.
Por desgracia, los núm eros de punto flotante pueden provocar problemas. H e aq u í un sim ple ejem plo de
lo q u e puede salir mal al usar núm eros de p unto flotante para representar m ontos en dólares que se visualizan
con dos dígitos a la derecha del p unto decimal: dos m ontos en dólares almacenados en la m áquina podrían ser
14.234 (que por lo general se redondearía a 14.23 para m ostrarlo com o m onto en dólares) y 18.673 (que por lo
general se redondearía a 18.67). C uando se sum an estos m ontos, producen la sum a interna de 32.907, q u e por
lo general se redondearía a 32.91 para fines de visualización. Por ende, su resultado impreso podría aparecer así:
14.23
+ 18.67
32.91
pero una persona que sum e los núm eros individuales com o se m uestran, esperaría que la sum a fuera de 32.90.
¡Ya ha sido advertido!
8.5
8.5
Instrucción de selección múltiple switch
261
Instrucción de selección múltiple swi tc h
Yíi vim os antes la instrucción de selección sim ple i f y la instrucción de selección doble i f . . e l se . E n ocasiones
un algoritm o puede contener una serie de decisiones en donde una variable o expresión se evalúe por separado
para cada uno de los valores que pueda asumir, y se pueden elegir acciones diferentes para cada valor. JavaScript
cuenta con la instrucción d e selección m últiple sw itch para m anejar esa to m a de decisiones. La secuencia de
com andos de la figura 8.7 m uestra tres form atos de lista de CSS distintos, q u e se determ inan m ediante el valor
introducido p o r el usuario.
1
<!DOCTYPE html>
2
3
4
3
6
7
8
9
10
11
12
13
14
13
16
17
18
19
20
<! —Fig. 8.7: PruebaSwitch.html —>
< ! —Uso de l a in s tru c c ió n de se le cció n m ú ltip le sw itch. —>
<ht*l>
<head>
<*eta c h arset = "u tf-8">
< t1 tle > A lte rn a r e n tre formatos de l i s t a de HTWL5</t1tle>
< script>
var
var
var
var
var
selección; / / l a se le c c ió n del usuario
e t i q u e t a l n i c i a l ; / / e t i q u e t a de elemento de l i s t a i n i c i a l
e t i q u e t a F i n a l ; / / e t i q u e t a de elemento de l i s t a f in a l
entradaV alida = true; / / t r u e s í l a en trad a es v á lid a ; f a ls e s i no
tip o L ls ta ; / / t i p o de l i s t a como cadena
se le c c ió n - window.prompt( "Seleccione un e s t i l o de l i s t a : \ n " +
"1 (numerada). 2 (con l e t r a s ) . 3 (números romanos)", "1" );
switch ( selección )
21
{
22
23
24
23
26
27
28
29
30
31
32
33
34
33
36
37
38
39
40
41
42
43
case "1":
e t i q u e t a l n i c i a l » ”<ol>";
e tiq u e ta F in a l - "</ol>";
t i p o L i s t a - "<hl>Lista numerada</hl>";
break;
case "2":
e t i q u e t a l n i c i a l = "<ol s t y l e = ' l i s t - s t y l e - t y p e : upper-alpha'>";
e tiq u e ta F in a l - "</ol>";
t i p o L l s t a = "<hl>Lista con letra s< /h l> " ;
break;
case "3":
e t i q u e t a l n i c i a l = "<ol s t y l e = ' l i s t - s t y l e - t y p e : upper-román'>";
e tiq u e ta F in a l - "</ol>";
tip o L ls t a = "<hl>Lista con números romanos</hi>";
break;
d e fau lt:
entradaV alida = false;
break:
> / / f i n de switch
i f ( entradaValida =
{
tr u e )
Figura 8 .7 | Uso de la instrucción de selección múltiple swi tch (parte I de 3).
262
44
45
46
47
48
49
50
51
32
53
54
53
56
Capitulo 8
JavaScript: instrucciones de control II
document.writelnC t i p o L i s t a + e t i q u e t a l n i c i a l );
for
( v a r i - 1; i <- 3; ++i )
document.writelnC "<11>E1emento de l i s t a " ♦ 1 ♦ "</l1>” );
document.writelnC e tiq u e ta F in a l );
} / / f i n de i f
else
document.writelnC "Selecc1*oacute;n 1nvál1da: " + se le c c ió n );
< /script>
</headxbodyx/body>
</html>
r ^•sct'pt
m
í
S^^ciorc u* estilo a* fat K
1 t m m r » d * L 2 (con kt**: X 3
-numero: r©m#no:l
ü
x .c * u .
[_
C « « .
Afccmtr t r t r t foemjros d- X »
C
i fiJe7 //X/€jemplos/c 3 p0 8 /í»9 0 8 . 0 7 /f>ru€OaSwitcKí»iml
s*xnuq*ná0á
Y49bsi<8 G
ááfy 0 kr+Qttsdúd
*&
*
•»
*
-
L is ta n u m e r a d a
l Elemento de Esta 1
•
fV nvrnto d e asta .
3 Elemento de Esta 3
S**9«i0*8y*ttiüoót lu#
1 (n u m * * * * ), 2 (<o* W tm i 3 tn u m tre * ro m trto tl
Cinwi
AJíer^trfrttT
C
«• *
fi*eV//Xycicmplos,'cap08/fio08.07/l>rucbaSwitcn html
S<t*os K»?«n¿ct ¡J] .Vtc Sl<e ú*»fr,
0
l^ipo<tJ<Jc delntcm .
Lista con letras
A Elemento de lista 1
B Elemento de Esta 2
C Elemento de Esta 3
Figura 8 .7 I Uso de la instrucción de selección múltiple sw itch (parte 2 de 3).
r "a
8.5
Instrucción de selección múltiple switch
263
f iavtScnpt
Scfecoonc un eci'c d« fcsta.
(ilOTtfadt). 2 icón Ictrai J (njmcroc romincs*
1
3
í
'
\ «=►?é - — H
J Q A*rmv tnlrv fo*m*o» ó "
l —
-------- --
C
J fiie///xycjemploí/cap08/fi9^.07/Prurt>a5vkitchhtml
p i cj
—
( > 5*¿ot usftm íot IJ Z/ffcSKeG*»rr, CZ biporUdo d*
•
L ista con n ú m e ro s ro m a n o s
if
I Elemento de lnu 1
II Elemento de b u •
III Elemento de fot* }
Figura 8 . 7 | Uso de la instrucción de selección múltiple swi tch (parte 3 de 3).
La linca 1 1 declara b variable s e l e c c i ó n . Esta variable almacena b selección del usuario, que determ ina
el tipo de lista ordenada de H T M L 5 a mostrar. Las lineas 12 y 13 d ecb ran b s variables e t i q u e t a l n i c i a l y
e t i q u e t a F i n a l , que almacenarán b s etiquetas de H T M L 5 que se utilizarán para crear el elem ento de b lista. La
línea 14 declara b variable e n t r a d a V a l i da y b inicializa con t r u e . La secuencia de com andos usa esta variable
para determ inar si el usuario realizó una selección válida (lo que se indica por el valor de t r u e ) . Si una selección
es inválida, b secuencia de com andos establece e n t r a d a V a l i da en f a l s e . La linca 15 d ecb ra b variable t i p o L i s t a , que alm acenará un elem ento h l para indicar el tipo de lista. Este encabezado aparece antes de la lista en
el docum ento de H T M L 5.
Las líneas 17 y 18 piden al usuario que introduzca un 1 para m ostrar una lista n u m erad a, un 2 para m os­
trar una lista con letras y un 3 para m ostrar una lista con núm eros rom anos. Las lincas 20 a 40 definen una
instrucción switch q u e asigna valores a las variables e t i q u e t a l n i c i a l , e t i q u e ta F in a l y t i p o L i s t a con
base en el valor in tro d u cid o por el usuario en el diálogo prompt. C ream os estas diferentes listas m ed ian te la
propiedad l i s t - s t y l e - t y p e de CSS, que nos perm ite establecer el sistem a de num eración para la lista. Los
posibles valores son: decimal (núm eros; el predeterminado), lower-roman (núm eros rom anos en m in ú scu ­
las), upper-roman (núm eros rom anos en m ayúsculas), low er-alpha (letras m inúsculas), upper-alpha (letras
mayúsculas) y o tro s más.
La instrucción switch consiste en una serie de etiquetas case y un caso d e f a u lt opcional (que p o r lo
general se coloca al últim o). C uando el flujo de control llega a swi tch, la secuencia de com andos evalúa b
expresión controladora (en este ejem plo, se le c c ió n ) en los paréntesis que van después de b palabra dave
switch. El valor de esta expresión se com para con el valor en cada una de las etiquetas case, em pezando con b
prim era etiqueta case. Suponga que el usuario introdujo 2. Recuerde que el valor escrito por el usuario en un
diálogo prompt se devuelve com o cadena. Así, b cadena 2 se com para con b cadena en cada case en switch.
Sí ocurre una coincidencia (case " 2 " :), se ejecutan b s instrucciones para ese case. Para b cadena 2 (líneas 28
a 31) establecemos e t i q u e t a l n i c i a l en una criqucra ol de apertura con b propiedad de estilo l i s t - s t y l e type establecida en upper-alpha, establecem os e tiq u e ta F in a l en "</ol>" para indicar el final d e una lista
ordenada y establecemos tip o L is ta en "<hl>Lista con le tr a s < / h l> " . Si no ocurre u n a coincidencia entre el
valor de b expresión controladora y una etiqueta case, se ejecuta el caso d e f a u l t y b variable entradaVal ida
se establece en fa lse .
La in stru cció n break en la línea 31 hace que el c o n tro l d e l pro g ram a c o n tin ú e co n la prim era in s tru c ­
ción después d e sw itc h . Se utiliza b re a k d eb id o a q u e , de o tra m an era, las in stru ccio n es c a s e en sw itc h
264
Capítulo 8
JavaScript: instrucciones de control II
se ejecutarían ju n tas. Si no se usa b re a k en n in g u n a parte e n s w itc h , en to n ces cad a vez q u e o c u rra u n a
coincidencia en la in stru cció n se ejecutarán las in stru ccio n es para ese c a se y para to d as las instrucciones
c a s e restantes.
A continuación, el Hujo de control prosigue con la instrucción i f en la línea 4 2 , que evalúa si la variable
e n tra d a V a lid a es tr u e . D e ser así, las líneas 44 a 49 escriben el t i p o L i s t a , la e t i q u e t a l n i c i a l , tres elem entos
de lista (<11>) y la e tiq u e ta F i n a l. D e lo contrario, la secuencia de com andos escribe texto en el docum ento
H T M L 5 para indicar que se realizó una selección inválida (línea 52).
Diagramas de flu jo de la instrucción sw i tch
C ada c a se puede tener m últiples acciones (instrucciones). La instrucción swi tc h es diferente de otras en cuanto
a que no se requieren llaves alrededor de m últiples acciones en una instrucción c a se de sw itc h . E n la figura 8.8
se muestra el diagrama de flujo de b instrucción sw itch general (es decir, usar un break en cada c a se ) .
i
<
caso a
fc) c
a
s
o
break
\
falso
vedi(VfO
HJto6o(es)<klcasob¡
H
break
caso j ^ £ ^ ^ » jflg»6n(es)delcasozj
H
break
caso b
>
^ falso
| falso
flcdón(ej) default
F
=
F igura 8 .8 | Instrucción de selección múltiple sw itch .
El diagram a de flujo deja en claro que cada instrucción b reak al final de un c a s e hace que el control salga
de la instrucción sw itc h de inm ediato. La instrucción break no se requiere para el últim o c a se en sw itch (ni
para el caso d e f a u l t, cuando aparece al últim o), ya que el control del program a tan sólo continúa con b si­
guiente instrucción después d e b instrucción swi tc h . El hecho de tener varias etiquetas case juntas en una lista
(por ejem plo, c a se 1: c a se 2: sin instrucciones entre ellas) sólo implica que debe ocurrir el mismo conjunto
de acciones para cada uno de estos casos.
8.6
Instrucción de repetición d o . . .w h ile
La in stru c c ió n d e re p e tic ió n d o . . .w h ile es sim ilar a w h ile . E n whi le , la p ru eb a de continuación d e ciclo
ocurre al principio de éste, antes de q u e se ejecute el cuerpo del ciclo. La instrucción do. . .w h ile evalúa la
condición de co n tin u ació n de ciclo después de que se ejecuta el cuerpo del ciclo; p o r lo ta n to , el cuerpo del
ciclo siempre se ejecuta por lo menos una vez. C u an d o term ina un d o . . .w h ile , la ejecución co n tin ú a con la
8.6
Instrucción de repetición do...w hile
265
instrucción después d e la cláusula w h ile . N o es necesario usar llaves en d o . . .w h ile si sólo hay una in stru c­
ción en el cuerpo.
La secuencia de la figura 8.9 asa una instrucción d o . . .w h ile para m ostrar cada u n o de los seis distintos
dpos de encabezado de H T M L 5 (h l a h6). La línea 11 d c e b ra la variable de control c o n ta d o r y la inicializa en
1. Al m om ento d e entrar a b instrucción d o . . .w h ile , b s líneas 14 a 16 escriben una línea de texto de H T M L 5
en el docum ento. £1 valor de b variable de contro l c o n ta d o r se utiliza para crear b s etiquetas inicial y final
del encabezado (por ejem plo, <hl> y < /h l> ) y para crear b línea de texto a m ostrar (por ejem plo, É ste es un
encabezado de n iv e l h l). La línea 17 increm enta el c o n ta d o r antes de que ocurra b prueba de continuación
de ciclo al final del ciclo.
1
<! DOCTYPE ht«il>
2
3
4
5
6
< ! - - Fig. 8.9: PruebaDoWhile.html -->
<1— Uso de la in s tr u c c ió n de r e p e tic ió n d o ...w h i l e .
< ht»l>
<head>
ch a rse t
" u tf-8 " >
7
< n e ta
8
<title>Uso de l a in s tr u c c ió n de r e p e tic ió n do.
< script>
9
10
11
12
w h ile < / title >
v a r contador • 1;
do {
13
•4
13
16
17
18
19
20
=
document.writ e l n ( "<h" + contador ♦ ">Éste es " ♦
"un encabezado de nivel h" + contador ♦ "</h" +
contador + ">" ) ;
++contador;
} while ( contador <= 6 ) ;
</scr1pt>
21
22
23
</head><body></body>
</ht«l>
¡' U»o latnjtrvíoén4t »■ x
C
S4»oi jugerviw
: file7//X^ ejem plos/cap!> 3/fig08.09/Prueba0oW tw leM m l
tYcto Stee G*4«ry Q knpOftaáo o* toe«m.
E s t e es u n e n c a b e z a d o d e nivel h l
E s te es un c n c a h c / a d o d e nivel h2
Este es un encabezado de nivel h3
Et(e
un tacabwado d» un el h4
I Mr r% un r o t l W l j é i d r n rtrl k ?
Int n u (ttibiié* 4m»i«*l W
4
Figura 8 .9 | Uso de la instrucción de repetición d o . . .w h ile .
266
Capítulo 8
JavaScript: instrucciones de control II
Diagrama de flu jo de la instrucción d o . . .w hile
El diagram a de flujo d e do. . .w h ile en la figura 8.10 deja en claro que la prueba de continuación de ciclo no
ocurre sino hasta que se ejecuta la acción por lo menos una vez.
I
ic ip s )
condición
I
verdadero
falso
I
Figura 8.10 | Diagrama de flujo de la instrucción de repetición d o . . .w h ile .
Error común de programación 8.2
Los ciclos infinitos ocurren cuando la condición de continuación de ciclo nunca se vuelve f a l s e en una instruc­
ción whi le. for o do. . . w h i l e . Para evitar esto, asegúrese de que no haya un punto y coma justo después del
encabezado de una irutrucción w h i l e o for. En un cido controlado por contador, asegúrese de que la variable
de control se incremente (o decremerae) en d cuerpo del ciclo. En un ciclo controlado por centinela, habrd que
introducir el valor centinela en un momento dado.
8.7
Instrucciones b reak y c o n t i nue
Además de las instrucciones de selección y repetición. JavaScript cuenta con las instrucciones b reak y c o n tin u é
para alterar el flujo de control. En la sección 8.5 dem ostram os cóm o podem os usar break para terminar la ejecu­
ción de una instrucción sw itch. E n esta sección veremos cóm o usar break en instrucciones de repetición.
Instrucción break
C uando la instrucción break se ejecuta en whi le , fo r, do . . . whi le o sw itc h , provoca La salida inmediata de la
instrucción. La ejecución co n tin ú a con la prim era instrucción q u e va después de la estructura. La figura 8.11
dem uestra la instrucción break en una instrucción de repetición for. D u ran te cada iteración de f o r en las líneas
13 a 19, la secuencia de com andos escribe el valor de c u e n ta en el docum ento de H T M L 5 . C u an d o 1 f en la
línea 15 detecta q u e c u e n ta es 5, se ejecuta break d e la línea 16. Esta instrucción term ina la instrucción f o r
y el program a procede a la línea 21 (la siguiente instrucción en secuencia justo después d e for), en d o n d e la
secuencia de com andos escribe el valor de c u e n ta al m om ento de term in ar el ciclo (es decir, 5). El ciclo ejecuta
la línea 18 sólo cuatro veces.
1<! DOCTYPE htai1>
2
3
4
< 1-- F1g. 8.11: PruebaBreak.html -->
< ! - - Uso de l a In s tru c c ió n break en una In stru c ció n f o r . -->
Figura 8. 11 | Uso de la instrucción break en una instrucción fo r (parte I de 2).
8.7
3
6
7
8
9
10
11
12
13
Instrucciones break y continué
267
<html>
<head>
o *eta c h a r s e t = "utf-8">
< t1 tle >
Uso de l a in stru cci& o acu te;n break en una instru cci& o acu te;n fo r
< /title>
<scr1pt>
for
14
( v a r cuenta =» 1; cuenta <= 10; ++cuenta )
{
13
16
17
18
19
I f ( cuenta = 5 )
break;
document.writ e l n ( cuenta + " " );
} / / f i n de f o r
20
21
22
23
24
23
26
docum ent.w riteln(
"<p>Se interrunpió el
c i c l o en cuenta = " + cuenta + "</p>" );
< /sc rip t>
</head> <bodyx/body>
< /h t*l>
C
S*X>I w jtr & n
t •1c / X/ej c mplo5/cdp08/tf*
WftSfccGliey
=:
m
1234
S* ntfmsnpio d ck lo ra curaca = 5
lí
-Jl
Figura 8.11 | Uso de la instrucción break en una instrucción fo r (parte 2 de 2).
Instrucción co n tin u é
C uando c o n tin u é se ejecuta en w h ile , f o r , d o . . .w h ile o sw itc h , o m ite el resto de las instrucciones en el
cuerpo de ia instrucción y procede con la siguiente iteración del ciclo. En w h ile y d o . . .w h ile , la prueba de
continuación de ciclo se evalúa justo después de que se ejecuta la instrucción c o n tin u é . En f o r , se ejecuta b
expresión de increm ento y después se evalúa b prueba de continuación d e cido. La colocación incorrecta de
c o n tin u é antes del increm ento en un w h ile puede resultar en u n ciclo infinito.
La figura 8.12 usa co n tin u é en una instrucción f o r para om itir b línea 19 si b línea 16 determ ina que el valor
de cuenta es 5. C uando se ejecuta c o n tin u é , b secuencia de com andos om ite el resto del cuerpo de b instrucción
f o r (línea 19). El control del program a continúa con el incremento de La variable de control de f o r (línea 14),
seguido de b prueba de continuación de ciclo para determ inar si éste debe seguir ejecutándose. A unque b reak y
c o n tin u é se ejecutan con rapidez, podem os lograr lo que hacen con b s otras instrucciones de control; m uchos
programadores creen que esto produce un software mejor diseñado.
268
1
Capítulo 8
JavaScript: instrucciones de control II
< ! DOCTYPE h tm l>
2
3
<1—
Fig. 8 .1 2 : PruebaContinue.html -->
4
3
<1—
Uso de la instrucción continué en una instrucción for. — >
<html>
6
<head>
7
<meta ch arset ■ " u tf-8 ”>
8
< t it le >
f
10
Uso de la in s tr u c c i& o a c u te ;n co n tin u é en una in s tr u c c i& o a c u t e ;n fo r
< / t it le >
11
12
< scrip t>
13
14
f o r ( v a r cuenta - 1 ; cu e n ta < - 10; ++cuenta )
13
{
16
if
17
( cu e n ta «
S )
c o n tin u a ; // omite el resto del código del ciclo sólo si cuenta —
5
18
19
d o cu m e n t.w rite ln ( cuenta + " " ) ;
20
} //fin de for
21
d o c u m e n t . w r i t e l n ( "<p>Se u s & o a c u te ; c o n t i n u é p a r a n o i m p r i m i r e l S</p>" ) ;
22
23
24
</scr1pt>
23
26
27
</head><bodyx/body>
</html>
U
¡Ih
oót U
miivcftn ton *
C
[
S *im t v f u t a n
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
»iievr//x y e je m p lo i/c a p 08 / f i r •£ ?
W H > S k e ó * litr ,
=
>
I234678910
Se iso contaiue para do «upemn el 5
Figura 8.12 | Uso c o n tin u é en una instrucción fo r.
8.8
Operadores lógicos
Hasta ahora sólo hem osesnidudo las condiciones simples como cuenta < - 10, t o t a l > lOOOy numero != v a lo rC e n tin e la . Estas condiciones se expresaron en térm inos de los operadores relaciónales >, <, >= y <=, y b s operadores
de igualdad — y I-. Cada expresión evaluó s ó b una condición. Para tom ar una decisión con base en condicbnes
múltiples, ejecutamos estas pruebas en instrucciones separadas o en instrucciones i f o i f e l se anidadas.
JavaScript cuenta con operadores lógicos que podem os usar para form ar condiciones más complejas, al
combinar las condiciones simples. Los operadores lógicos son &ft (A ND lógico), 11 (O R lógico) y ! (N O T
lógico, tam bién conocido com o negación lógica).
8.8
Operadores lógicos
269
Operador M (AND lógico)
Suponga que deseamos asegurar en cierto punto de un programa que dos condiciones sean a m b a s true antes
de elegir cierta ruta de ejecución. En este caso, podemos utilizar el operador lógico &&de la siguiente manera;
i f ( genero
1 &A edad >* 65 )
♦+mujeresMayores;
Esta instrucción i f contiene dos condiciones simples. La condición genero - - 1 podría evaluarse para deter­
minar. por ejemplo, si una persona es mujer. La condición edad >= 65 podría evaluarse para determinar si una
persona es un ciudadano mayor. Así, la instrucción i f considera la condición combinada
(
genero == 1 ) AA ( edad >= 65
)
Esta condición es true si, y sólo si a m b a s condiciones simples son true. Si esta condición combinada es true.
la cuenta de mujeresMayores se incrementa en 1. Si una o ambas condiciones simples son fa lse . el programa
omite cl incremento y procede a la instrucción que va después de la instrucción if . La condición combinada
anterior puede ser más legible si se agregan paréntesis redundantes:
(
genero • • 1 ) A& ( edad >- 65
)
La tabb de b figura 8.13 sintetiza el uso del operador AA. Esta tabb muestra bs cuauo combinaciones posibles
de valores fa lse y true para o p r e s i ó n 1 y e x p r e s ió n 2 . A dichas cablas se les conoce como tablas de verdad. Java­
Script evalúa todas bs expresiones que incluyen operadores rebcionales, de igualdad o lógicos como fa l se o t rué.
expresión l
expresión 2
expresión 1 6 6 e x p re sió n 2
f a ls e
false
false
f a ls e
tr u e
f a ls e
tru e
false
f a ls e
tru e
tr u e
tru e
Figura 8 .1 3 | Tabla de verdad del operador &A (AND condicional).
Operador \ \ (O R lógico)
Ahora veamos el operador | | (O R lógico). Suponga que deseamos asegurar que c u a lq u ie r a o a m b a s condiciones
sean true antes de elegir cierta ruta de ejecución. En este caso usamos el operador 11, como en el siguiente
segmento de un programa:
1f (
promedioSemestre >= 90 || examenFlnal >= 90 )
document.write1n( "La c a l i f i c a c i ó n del e s tu d ia n te es A" );
Esta instrucción rambién contiene dos condiciones simples. La condición promedioSemestre >- 90 se evalúa
para determinar si cl estudiante merece una “A" en cl curso, debido a que tuso un sólido desempeño a lo brgo
del semestre. La condición examenFI nal >= 90 se evalúa para determinar si el estudiante merece una “A" en el
curso debido a un desempeño sobresaliente en el examen final. Después, la instrucción i f considera b condi­
ción combinada
270
Capitulo 8
JavaScript: instrucciones de control II
promedioSemestre »
90 | | examenFinal >■ 90
y otorga una “A" al estudiante si una o ambas de las condiciones simples son true. Observe que la ú n ic a vez que
«o se imprime el mensaje “La c a lific a c ió n del estudiante es A" es cuando a m b a s condiciones simples son
fa lse . La figura 8.14 es una tabla de verdad para el operador O R lógico (| |).
expresión I
expresión2
expresión I 11 expresión2
false
false
f a ls e
false
tru e
tru e
tru e
false
tru e
tru e
tru e
tru e
Figura 8.14 | Tabla de verdad del operador 11 (OR lógico).
E l operador 4A tiene mayor precedencia que el operador 11. Ambos asocian de izquierda a derecha. Una
opresión que contenga los operadores M o 11 se evalúa sólo hasta que se conozca si es verdadera o falsa. Así, la
evaluación de b expresión
genero — 1 AA edad >- 6S
se detiene de inmediato si genero no es igual a 1 (es decir, toda b expresión es fa l se) y continúa si genero es
igual a 1 (es decir, toda b expresión aún podría ser tr u e si b condición edad»6S es tru e). De manera similar,
el operador 11 devuelve de inmediato tru e si el primer operando es tru e . Esta característica de desempeño para
b evaluación de bs expresiones AN D y O R lógicas se conoce como evaluación de corto circuito.
Operador1, (negación lógica)
JavaScript cuenta con el operador ! (negación lógica) para poder “invertir” el significado de una condición (es
decir, un valor tr u e se vuelve fa l se y un valor fa l se se vuelve t rué). A diferencia de los operadores lógicos &&y
11, que combinan dos condiciones (es decir, son operadores b in a r io s ) , el operador de negación lógica sólo tiene
una condición como operando (es decir, es un operador u n a r ió ) . Este operador se coloca antes de una condición
para elegir una ruta de ejecución si b condición original (sin el operador de negación lógica) es fa lse , como en
el siguiente segmento de código:
i f ( ! ( c a l i f i c a c i ó n - ■ v alo rC e n tin ela ) )
do cum ent.w riteln( “La s ig u ie n te c a lific a c i& o a c u te ; n es ", + c a l i f i c a c i ó n );
Los paréntesis alrededor de b condición c a l i f i c a c i ó n = v a lo rC e n tin e la son necesarios, ya que el operador
de negación lógica tiene mayor precedencia que el de igualdad. La figura 8.15 es una tabla de verdad para el
operador de negación lógica.
En la mayoría de los casos, puede evitar el uso de la negación lógica si expresa la condición en forma dis­
tinta, con un operador relacional o de igualdad apropiado. Por ejempb, b instrucción anterior también puede
escribirse de b siguiente manera:
1f
( c a l i f i c a c i ó n I - v a lo rC e n tin e la )
docum ent.writeln("La sig u ie n te c a lific a c i& o a c u te ; n es
c a l i f i c a c i ó n );
8.9
expresión
Recursos Web
271
¡expresión
f a ls e
tr u e
tru e
false
Figura 8.15 | Tabla de verdad del operador!
(negación lógica).
Equivalentes booleanos de valores que no son booleanos
Una característica interesante de JavaScript es que la mayoría de los valores no booleanos pueden convertirse
en un valor boolcano t r u e o f a l s e (si se utilizan en un contexto en el que se necesite un valor booleano). Los
valores numéricos distintos de cero se consideran como true. E l valor numérico cero se considera como fa lse .
Cualquier cadena que contenga caracteres se considera como true. La cadena vacía (es decir, la cadena que no
contiene caracteres) se considera como f a ls e . El valor nu il y las variables que se declararon pero no se iniciafizaron se considera como f a ls e . Todos los objetos (como los objetos document y wlndow del navegador y el
objeto Math de JavaScript) se consideran como true.
Precedencia y asociatividad de los operadores
La figura 8.16 muestra la precedencia y asociatividad de los operadores de JavaScript que presentamos hasta este
punto. I xk operadores se muestran de arriba hacia abajo, en orden descendente de precedencia.
Operador
/
Asoctatividad
Tipo
1
derecha a izquierda
una rio
%
izquierda a derecha
multiplicativo
izquierda a derecha
aditivo
•f
>
>=
izquierda a derecha
ndacional
----
I—
izquierda a derecha
igualdad
&&
izquierda a derecha
AN D lógico
ii
izquierda a derecha
OR lógico
?:
derecha a izquierda
condicional
derecha a izquierda
asignación
<
<■
i-
+«
—
/-
Figura 8.16 | Precedencia y asociatividad de los operadores vistos hasta ahora.
8.9
Recursos Web
www. dei t e l . com/javasc r l p t /
El Centro de recursos de JavaScript de Deitel contiene vínculos a algunos de los mejores recursos de JavaScript
en Web. Ahí encontrará vínculos clasificados a herramientas de JavaScript, generadores de código, foros, libros,
bibliotecas, marcos de trabajo y más. Le recomendamos también los tutorialcs para todos los niveles de expe­
riencia, desde introductorio hasta avanzado. Asegúrese de visitar los Centros de recursos relacionados sobre
H TM L5 (vww.de i t e l .com/HTMLS/)y CSS3 (wvw.de1tel.com/css3/).
272
Capítulo 8
JavaScript: instrucciones de control II
Resumen
Sección 8.2 Fundamentos de la repetición controlada por contador
• La repetición controbda por contador requiere: el nombre de una variable de control, el valor inicul de b variable
de control, d incremento (o decrcmento) en base al cual se modifica la variable de control cada vez que pasa por d ciclo
y b condición que evalúa d valor final de b variable de control para determinar si d ciclo debe continuar.
Sección 8 3 Instruccióti de repetición fo r
•
•
•
•
•
•
•
•
La instrucción for (pág. 253) maneja de manera conveniente todos los detalles de b repetición controbda por contador
con una variable de control.
La primera línea de b instrucción fo r (incluyendo b palabra cbve y todo lo que hay entre paréntesis después de día)
se conoce comúnmente como d encabezado de b instrucción fo r (pág. 254).
Podemos usar un bloque para colocar múltiples instrucciones en el cuerpo de una instrucción for.
La instrucción fo r recibe tres expresiones: una inicbli/ación, una condición y una expresión.
Las tres expresiones en for son opcionales. Los dos puntos y comas en la instrucción fo r son obligatorios.
Las parres de ¡nicialización, condición de continuación de ciclo c incremento de una instrucción fo r pueden contener
expresiones aritméticas.
H “incremento" de una instrucción for puede ser negativo, en cuyo caso se llama decrcmento y d cido cuenta en forma
descendente.
Si en un principio b condición de continuación de ciclo es fa lse , no se ejecuta d cuerpo de b instrucción for. En vez
de dio, b ejecución procede con b instrucción que sigue después de for.
Sección 8.4 Ejemplos sobre el uso de la instrucción fo r
• JavaScript no incluye un operador de exponenciación. En vez de dio usamos d método pon del objeto Math para este fin.
•
•
Math.pow(x, y) calcula d valor de x devado a b potencia y.
Los números de punto flotante pueden causar problemas como resultado de los errares de redondeo.
Rara evitar conversiones implícitas en bs comparaciones, que pueden producir resultados inesperados. JavaScript pro­
porciona los operadores de igualdad estricta (— ) y de desigualdad estricta (!-»).
Sección 8.5 Instrucción de selección m últiple sw i tch
• JavaScript cuenta con la instrucción de selección múltiple switch (pág. 263), en donde una variable o expresión se prue­
ba por separado para cada uno de los valores que puede asumir. Se toman distintas acciones para cada valor
• La propiedad lis t- s ty le - ty p e de CSS (pág. 263) nos permite establecer el sistema de numeración para b lista. Los
valores posibles son: declnal (números: el predeterminado), lower-ronan (números romanos en minúsculas), upperroman (números romanos en mayúsculas), lower-alpha (letras en minúsculas), upper-alpha (letras en mayúsculas)
y más.
• La instrucción swi tch consiste en una serie de etiquetas case y un caso default opcional (que por lo general se coloca al
último, pág. 263). Cuando el flujo de control llega a b instrucción switch, b secuencb de comandos evalúa b expresión
de control en los paréntesis que van después de b palabra cbve switch. El valor de esta expresión se compara con el valor
ai cada una de bs etiquetas case, empezando con b primera etiqueta case (pág. 263). Si b comparación se evalúa como
true. bs instrucciones después de b etiqueta case se ejecutan en orden hasta llegar a una instrucción break.
• La instrucción break se usa como b última en cada case para salir de inmediato de switch.
Resumen
273
• Cada case puede tener múltiples acciones (instrucciones). La instrucción switch es diferente de las otras en cuanto a
que no se requieren llaves alrededor de múltiples acciones en un case de un switch.
■ La instrucción break no se requiere para d último case en switch, ya q u e d control dd programa conrinúa de manera
automática con la siguiente instrucción después de switch.
• Tener varias etiquetas case juntas en una lista (por ejemplo, casel: case 2: sin instrucciones entre ellas) tan sólo sig­
nifica que debe ocurrir d mismo conjunto de acciones para cada case.
Sección 8.6 Instrucción de repetición do . . . wh17 e
• La instrucción do.. -whi le (pág. 264) evalúa la condición de continuación de ciclo detpuit de que se ejecuta el cuerpo
dd ciclo: por lo tanto, d cuerpo d d ciclo siempre te ejecuta por ¡o menot una vez.
Sección 8 7 Instrucciones breaky co n tin u é
• Cuando break se ejecuta en una instrucción de repetición, provoca la salida inmediata de la instrucción. La ejecución
continúa con la primera instrucción después de la de repetición.
• Cuando contl nue se ejecuta en una instrucción de repetición, omite d resto de las instrucciones en d cuerpo del ciclo
y procede con la siguiente iteración dd ciclo. En las instrucciones while y d o .. .while, la prueba de continuación de
ciclo se evalúa justo después de que se ejecuta la instrucción continué. En las instrucciones for, se ejecuta la expresión
de incremento y luego se evalúa la prueba de continuación de ciclo.
Sección 8 8 Operadores lógicos
• JavaScript cuenta con operadores lógicos que pueden usarse para formar condiciones más complejas mediante la com­
binación de condiciones simples. Los operadores lógicos son 44 (ANO lógico: pág. 268), 11 (OR lógico; pág. 268) y I
(N O T lógico, también conocido como negación lógica; pág. 268).
• El operador Aft se utiliza para asegurar que dos condiciones sean ambas true antes de degir cierta ruta de ejecución.
• JavaScript evalúa como fa lse o true todas las expresiones que incluyen operadores relaciónales, operadores de igualdad
y/u operadores lógicos.
• El operador 11 (OR lógico) se usa para asegurar que una o ambas de las dos condiciones sean true antes de elegir cierta
ruta de ejecución.
• El operador &&tiene una mayor precedencia que el operador | | . Ambos operadores se asocian de izquierda a derecha.
• Una expresión que contenga los operadores &&o 11 se evalúa sólo hasta conocer si es verdadera o falsa. A esto se le conoce
como evaluación de corto circuito (pág. 270).
• JavaScript cuenta con d operador I (negación lógica) que nos permite “invertir" el significado de una condición (es
decir, un valor tru e se vudve fal se y un valor fa lse se vuelve true).
• El operador de negación lógica sólo tiene una condición simple como operando (es decir, es un operador unario). El
operador de negación lógica se coloca antes de evaluar una condición a tru e si la condición original (sin d operador de
negación lógica) es false.
• El operador de negación lógica tiene una mayor precedencia que d operador de igualdad.
• la mayoría de los valores no boolcanos pueden convertirse en un valor boolcano tru e o false. I-os valores numéricos
disrínros de cero se consideran como true. El valor numérico cero se considera como fa lse . Cualquier cadena que
contenga caracteres se considera como true. La cadena vacia (es decir, la cadena que no contiene caracteres) se considera
como fa lse . El valor nuil y las variables que se declararon pero no se ¡metalizaron reconsideran como false. Todos los
objetos (por ejemplo, los objetos document y wlndow d d navegador y d objeto Math de JavaScript) se consideran como
true.
274
Capítulo 8
JavaScript instrucciones de control II
Ejercicios de autoevaluación
8.1
8.2
8.3
Indique si cada uno de los siguientes enunciados es vtrdaderoa falso. Si es falso, explique por que.
a) El caso defaul t es requerido en la instrucción de selección switch.
b) La instrucción break es requerida en el último caso de una instrucción de selección switch.
c) La expresión ( x > y & A a < b ) c s verdadera si x > y es verdadera, o si a < b es verdadera.
d) Una opresión que contiene d operador 11 es verdadera si uno o ambos de sus operandos son verdaderos.
Escriba una instrucción o un conjunto de instrucciones en JavaScript para realizar cada una de las siguientes tareas:
a) Sumar los enteros impares entre 1 y 99- Utilice una instrucción for. Suponga que se han declarado las variables
suraay cuenta.
b) Calcular el valor de 2.5 elevado a la potencia de 3. Use d método pow.
c) Imprimir los enteros d d 1 al 20 mediante d uso de un ciclo whi le y la variable contador x. Suponga que la va­
riable x se ha declarado, pero no se ha ¡nkhlizado. Imprima solamente cinco enteros por linca. [Sugerencia: use d
cálculo x X 5. Cuando d valor de esta expresión sea 0. inicie un nuevo párrafo en el documento de HTML5J.
d) Repica el ejercicio 8.2, (c), pero ahora use una instrucción for.
Encuentre el error en cada uno de los siguientes segmentos de código, y explique cómo corregido:
a) x - 1;
w hile ( x <• 10 );
♦♦x;
)
b ) sw itch ( n )
{
case 1:
d o c u n e n t.w rite ln C "El n * u a c u te ; e e r o e s 1" ) :
c a s e 2:
docunent .w r ite ln C "El n lru acu te;eero e s 2" ) ;
break;
default!
d o c u n e n t.w rite ln C "El n * u a c u te ; e e r o no e s 1 ni 2" ) ;
break;
}
c) El siguiente código debe imprimir los valores 1 a 10:
n - 1;
while ( n < 10 )
d o cu m en t.w riteln C n++ ) ;
Respuestas a los ejercicios de autoevaluación
8.1
8 .2
a) Falso. El caso d e f a u l t « o p c io n a l. Si n o se n cc« ira u n a acción predeterm inada, e n to n e n no hay n e c n id a d d e un
caso d e f a u l t. b) Falso. La instrucción b re a k se utiliza para salir d e sw itch . La instrucción b reak n o se requiere
para el ú ltim o caso en sw itch . c) Falso. A m bas expresiones relaciónales deben ser verdaderas para que toda la
expresión sea verdadera c u a n d o se utilice d o p erad o r &&. d) Verdadero.
a) suma • 0;
f o r C cu en ta - 1; cu en ta < - 9 9 ; cu en ta +• 2 )
suma ♦ - c u e n ta ;
b ) Hath.powC 2 .5 . J ) ;
c) x - 1;
d o c u n e n t.w rite ln C
w hile C x < - 20 ) {
);
Ejercicios
275
docum ent.wrlteC x ♦ " 14 ) ;
1 f ( x X S — 0 )
d o c u m e n t.w r ite f "</p><P>*' ) :
++x;
>
d) document-wri te lo ( *’<p>" );
f o r ( x - 1; x < - 20; x++ ) {
d o c u m e n t.w rite ( x ■» ” " ) ;
If ( X X S — 0 }
d o c w ie n t .w r it e ( "</p><p>" ) ;
8.3
)
document-writeln( "</p>" ):
a) E rror El pumo y coma después d d encabezado whll e provoca un ciclo infinito; además falta una llave izquierda.
Corrección: Reemplazar cl punto y coma por una llave izquierda ({), o diminar tanto el ptinro y coma (;) como
la llave derecha (}).
b) Error Falta una instrucción break en las instrucciones d d primer case.
C orrosión: Agregue una instrucción break ai final de las instrucciones para d primer case. Cabe mencionar que
esta omisión no es necesariamente un error, si desea que b instrucción d d case 2: se ejecute siempre que lo haga
la instrucción del case 1:.
c) Error Se está utilizando un operador relacional inadecuado en la condición de continuación de b instrucción de
repetición mhlle.
Corrección: Use <- en vez de <, o cambie cl 10 a 11 .
Ejercicios
8.4
Encuentre d error en cada uno de los siguientes segmentos de código. [Nota: puede haber más de un error].
a) For ( x - 100, x >- 1, ++x )
d o c u m e n t.w ri t e l n ( x ) ;
b) El siguiente código debe imprimirse sin importar si d valor entero es par o impar
smltch ( valo r X 2 )
{
ca s o
0:
d o c u m e n t.w rite ln ( "E ntero p a r" ) ;
c a s e 1:
d o c u m e n t . w r f t e l n C " E n t e r o Impar" ) ;
)
c) El siguiente código debe imprimir los enteros impares del 19 al 1:
f o r ( > ■ 19; x »
1; x
2 )
d o cu m en t.w rfteln ( x );
d) El siguiente código debe imprimir los enteros pares del 2 al 100:
c o n t a d o r . 2;
do {
d o cu m en t.w rfteln ( contador ) ;
c o n t a d o r +m 2 ;
} W hile ( c o n t a d o r < 100 ) ;
8.5
1
¿Qué es lo que hace cl siguiente programa?
<!D0CTYPE h tal>
2
3
4
< ! - - E j e r c i d o 8 .5 : e j 0 8 _ 0 S . h t n l - - >
<hta1»
276
S
*
7
8
Capítulo 8
JavaScript instrucciones de control II
<head>
< M U ch arset - "utf-8">
< t1t1e> *isteri© < /titl« >
< s c r ip t >
*
10
document .ttr1 t e l n (
);
11
12
f o r ( v a r 1 - 1; 1 < - 10; i++ )
13
{
14
d o c u m e n t.w rite 1 n ( " < tr> " ) ;
15
14
17
18
If
20
for (
v a r j - 1; j < • S;
)
d o c u n e n t.w rlte ln C " < td > C + 1 +
" ♦ J ♦ ")</td>" ) ;
d o c u m e n t.w r i te ln f " < / t r > " ) ;
) / / f i n de f o r
21
22
d o c u m e n t- w H te ln ( " « / t a b l a » " ) ;
23
24
25
24
8.6
«/script»
</head><body />
</htw1>
Escriba una secuencia de comandos que encuentre el menor de varios enteros no negativos. Suponga que el primer
valor leído especifica d número de valores que d usuario introducid.
8.7 Escriba una secuencia de comandos que calcule d producto de los enteros impares del 1 al 15 y después imprima
texto de HTML5 que muestre los resultados.
8.8 Modifique d programa de interés compuesto de la figura 8.6, repitiendo sus pasos para las tasas de interés dd 5, 6,
7, 8, 9 y 10 por ciento. Use una instrucción for para variar la rasa de interés. Use una tabla separada para cada tasa.
8.9 Una aplicación interesante de b s computadoras es dibujar gráficos convencionales y de barra (también Ibmados
histogramas). Escriba una secuencia de comandos que lea cinco números entre 1 y 30. Por cada número imprima
texto en HTML5 que muestre una línea que contenga d mismo número de asteriscos adyacentes. Por ejemplo, si su
programa lee d número 7. debe producir texto en HTMLS que muestre *»*••**.
8.10 (Canción “Los Doce Días de N avidad”) Escriba una secuencia de comandos que utilice estructuras de repe­
tición y un switch para imprimir b canción "Los Doce Días de Navidad". Encontrará bs pabbras en el sitio
http://en.wlkipedía.org/wiki/The_Tw«1ve_Days_of_Chr1s tmas.Csong)
8.11 Un vendedor minorista en línea vendecinco productos distintos, cuyos precios de venta son los siguientes: producto
1, $2.98; producto 2, $4.50; producto 3, $9.98; producto 4, $4.49 y producto 5, $6.87. Escriba una sccucncu de
comandos que lea una serie de pares de números, como se muestra a continuación:
a) Número dd producto;
b) Cantidad vendida durante un día.
Su programa debe utilizar una instrucción switch para determinar el precio de venta de cada producto; además debe
calcular y producir HTML5 para mostrar d valor toral de venra de todos los productos vendidos b semana pasada.
Use d cuadro de diálogo d d indicador de comandos para obtener d número de producto y b cantidad requerida
por d usuario. Use un ciclo conrrobdo por ccnrincb para determinar cuándo debe el programa dejar de iterar p r a
mostrar los resultados finales.
8.12 Suponga que i - 1, J • 2. k - 3 y m « 2. ¿Qué es lo que imprime cada una de bs siguientes instrucciones? ¿Son
necesarios los préntcsis en cada caso?
a) docuoent.w riteln( i — 1 ) ;
b) document.writeln( j — 3 ){
c) doctment.write 1n( 1 » l A A j < 4 ) ;
Ejercicios
d)
c)
document . w r 1 t e l n ( m
document . w r 1 t e 1 n ( J
<• 9 9 A* k <m ) ;
>- 1 | | k — m ) ;
0 document.wri te l n( k
♦ m < J || 3 J » k );
g) document.writeln( l( k > m ) );
8.13 Dada la siguiente instrucción switch:
I
switch ( k )
{
case 1:
break:
case 2:
case 3:
♦+k;
break;
case 4:
—k;
break;
default:
k * - 3;
} / / f i n de switch
x • k;
<Qu¿ valores se asignan a x cuando k tiene vaorcs de 1, 2. 3. 4 y 10?
277
9
E pluribus unum.
(Uno compuesto de muchos.)
—Virgilio
Llámame Ismael
— l l e r n u a M c K iU e
Cuando me liantes así, sonríe.
W ktrr
¡Oh! volvió a ¡¡amar ayer,
ofreciéndome volver.
— W i l l i a m S h n k c ip c a n r
Objetivos
En este capítulo aprenderá a:
■ Construir programas en forma
modular a partir de piezas
pequeñas llamadas fundones.
■ Definir nuevas fundones.
■ Pasar información entre
funciones.
■ Utilizar técnicas de simulación
con base en la generación de
números aleatorios.
■ Usar los nuesos elementos
a u d io y v id e o de HTML5.
■ Usar métodos globales
adicionales.
■ Vér cómo la visibilidad de los
identificadores se limita
a regiones especificas de
programas.
JavaScript: funciones
9.2
Módulos de programasen JavaScript
9.1
Introducción
9.5.2 Visualizar imágenes aleatorias
9.2
Módulos de programas en JavaScript
9.5.3
9.3
Definiciones de funciones
9.3.1
La función cuad rad o definida por el
programador
9.3.2 La función máximo definida por el
programador
9.4
9.5
Notas sobre las funciones definidas por el
programador
279
Tirar el dado repetidas veces y mostrar las
estadísticas
9.6
Ejemplo: Juego de probabilidad: introducción a
los elementos a u d io y v id e o de HTML5
9.7
Reglas de alcance
9.8
Funciones globales de JavaScript
9.9
Recursividad
9.10 Comparación entre recursividad e iteración
Generación de números aleatorios
9.5.1
Escalar y desplazar números aleatorios
Resumen | Ejercicios de autoevaluación | Respuestas a los ejercicios de autoevaluación | Ejercicios
9.1
Introducción
La mayoría de los program as de com putadora que resuelven problemas reales son m ucho más grandes que
los que hem os presentado en los prim eros capítulos de este libro. La experiencia ha dem ostrado que la m ejor
m anera d e desarrollar y m antener u n program a extenso es construirlo a p artir de pequeñas piezas sencillas, o
m ódulos. A esta técnica se le llam a divide y vencerás. En este capítulo describirem os m uchas características
clave de JavaScript para facilitar el diseño, la im plem entación, la operación y el m antenim iento de secuencias
de com andos extensas.
C om enzará a usar JavaScript para interactuar de m anera program ática con los elem entos en una página
Web, de m odo que pueda obtener valores de ellos (como los de los formularios de H T M L 5 ) y colocar contenido
en elem entos de páginas W eb. Tam bién hablarem os brevemente sobre las técnicas de sim ulación m ediante b
generación de núm eros aleatorios y dcsarroHaremos una versión d e un juego de dados conocido com o “craps”,
d cual utiliza b mayoría de las técnicas de programación que usted ha aprendido hasta este punto en el libro. En el
juego introducirem os tam bién los nuevos elem entos au d io y v id e o que nos perm iten incrustar audio y video
en b s páginas Web. Además interacruarem os en form a program ática con el elem ento a u d io para reproducir el
audio en respuesta a b interacción de un usuario con el juego.
9.2
Módulos de programas en JavaScript
Las secuencias de com andos que escribim os en JavaScript contienen por lo general una o más piezas, conocidas
com o funciones. Usted com binará las nuevas funciones q u e escriba con las funciones y objetos preem paquetados disponibles en JavaScript. Las funciones prccm paqucradas que pertenecen a objetos de JavaScript (como
Math .pow, que presentam os en el capítulo anterior) se Ibm an m étodos.
JavaScript cuenta con varios objetos que tienen una extensa colección de m étodos para realizar cálculos
m atem áticos com unes, m anipubeiones de cadenas, m anipubeiones de fechas y horas, y m anipubeiones de
colecciones de datos conocidas com o arreglos. Estos objetos (que veremos en los capítulos 10 y 11) facilitan el
trabajo del program ador, ya que proporcionan m uchas de b s herram ientas que necesitaremos con frecuencia.
Usted puede escribir funciones para definir tareas que puedan usarse en m uchos lugares en u n a secuencia de
com andos. A éstas se les conoce com o funciones d e fin id a s p o r el p ro g ra m a d o r. Las instrucciones que definen
b función se escriben sólo una vez y se ocultan de otras funciones.
280
Capítulo 9
JavaScript: funciones
Una función se invoca (para que realice su tarca designada) m ediante una lla m a d a a fu n c ió n . La llamada
a la función especifica el nom bre de la función y provee la inform ación (en form a de arg u m e n to s) que la fun­
ción invocada necesita para realizar su tarea. U na analogía co m ú n para esta estructura es la form a jerárquica de
la adm inistración. U n jefe (la función q u e hace la llam ad a, o in v o ta d o ra ) pide a u n trabajador (la fu n ció n
llam ad a) q u e realice una tarea y devuelva (es decir, reporte de vuelta) los resultados cuando term ine la tarea.
La función jefe no sabe cómo es que ¡afunción trabajador realiza sus tareas designadas. El trabajador puede llamar
a otras funciones trabajador; el jefe no se enterará de esto. Pronto veremos cóm o este ocultamiento de los detalles
de implementación prom ueve la buena ingeniería de software. La figura 9.1 m uestra a la función j e f e com uni­
cándose con varias funciones trabajador de una m anera jerárquica. O bserve que t r a b a j a d o r l tam bién actúa
com o función “jefe" para tr a b a ja d o r4 y tr a b a ja d o r 5 , y tr a b a ja d o r 4 y tr a b a jad o r5 reportan sus acciones de
vuelta a tr a b a ja d o r l .
1
/
trabajador 1
/
trabajador 4
\
trabajador 2
trab ajad o r 3
\
trab ajad o r 5
Figura 9 .1 | Relación jerárquica entre la función jefe y la función trabajador.
Para invocar las funciones, se escribe su nom bre seguido de un paréntesis izquierdo, luego una lista separada
p o r comas de cero o más argum entos y un paréntesis derecho. Por ejem plo, un program ador que desee convertir
u n a cadena alm acenada en la variable v a lo rE n tra d a en un núm ero de p u n to flotante y sum ario a la variable
t o t a l podría escribir b siguiente:
t o t a l 4 - p a rse F lo a tC v a lo rE n tra d a ) ;
Al ejecutarse esta instrucción, la función p a r s e F lo a t de JavaScript convierte la cadena de la variable v a lo rE n ­
tr a d a en un v a b r de punto flotante y sum a esc valor a t o t a l , la variable v a lo rE n tra d a es el argum ento para
la función p a rs e F lo a t. La función p a rs e F lo a t recibe una representación d e cadena de u n núm ero de p u n to
flotante com o argum ento y devuelve el correspondiente v a b r num érico de punto flotante. Los argum entos de
una función pueden ser constantes, variables o expresiones.
Los métodos se llaman de la misma forma pero requieren el nom bre del objeto al que pertenece el m étodo y
un punto antes del nom bre del método. Por ejem p b , ya vimos la sintaxis document. w r ite ln ( "Hola a to d o s ." )
Esta instrucción llama al m étodo w r ite ln del objeto document para im primir el texto.
9.3
Definiciones de funciones
A hora considerarem os cóm o puede escribir sus propias funciones personalizadas y llamarlas en una secuencia
de com andos.
9.3
9.3.1
Definiciones de funciones
281
La función cu ad rad o definida por el programador
C onsidere u n a secuencia de com andos (figura 9-2) que utiliza u n a función cuadrado para calcular los cuadrados
de los enteros del 1 al 10. [Nota: seguiremos m osrrando m uchos ejemplos en d o n d e el elem ento body del d o cu ­
m ento d e H T M L 5 está vacío y el docum ento se crea de m anera directa m ediante JavaScript. E n este capítulo
y en los que vienen tam bién m ostrarem os ejem plos en d o n d e las secuencias de com andos interactúan con los
elem entos en el cuerpo (body) de u n docum ento].
Invocación a la función cuadrado
La instrucción f o r en las lincas 17 a 19 produce texto de H T M L 5 que m uestra los resulrados de elevar al
cuadrado los enteros del 1 al 10. C ada iteración del ciclo calcula el cuadrado del valor actual de La variable de
control x e im prim e el resultado escribiendo una línea en el docum ento de H T M L 5 . La función cuadrado se
invoca (o se llama) en la línea 19 m ediante la expresión c u a d ra d o (x ). C uando el control del program a llega a
esta expresión, el program a llama a la función cuadrado (definida en las líneas 23 a 26). Los paréntesis () en
ia línea 19 representan el o p e ra d o r de llam ad a a la fu n c ió n , que tiene una precedencia alta. E n este punto,
1
<IDOCTYPE ht«il>
2
3
4
3
6
<1-- Fig. 9.2: CuadradoEnt.html —>
< ! - - Función cuadrado d e fin id a por e l programador. -->
<html >
<head>
7
•
9
<*»eta c h a rs e t = "utf-8">
<t1tle>Una funci&oacute¡n cuadrado d e f in id a por el programador</t1tle>
< sty le type - " te x t/ e s s " »
10
p { n a rg ln : 0; }
11
12
13
14
hl>" ) ¡
13
16
17
18
19
</style>
<script>
document. w r i t e l n ( "<hl>Obtener el cuadrado de l o s n&uacu t e ¡meros del 1 al 10</
/ / o bten er e l cuadrado de los números del 1 al 10
f o r ( v a r x = 1; x <= 10; ++x )
document.writ e l n ( "<p>El cuadrado de " + x + " es " +
cuadrado( x ) + "</p>" );
20
21
22
23
/ / El cuerpo de l a s ig u ie n te d e fin ic ió n de l a función cuadrado se e je c u ta
/ / sólo cuando l a función se llama de manera e x p l í c i t a como en l a l í n e a 19
functlon cuadrado( y )
24
{
23
26
27
28
29
r e t u r n y • y;
} / / f i n de la función cuadrado
30
< /sc rip t>
</head><body></body> <I—
«1 elemento body está vacío -->
</ht»l>
Figura 9 .2 | Función cuadrado definida por el programador (parte l de 2).
282
Capítulo 9
JavaScript: funciones
■•mam
Una furoon cuadrado d< * 1
C
(Jj SdiC» u*9«r**x
fiie///X yejem p !o s/c3p 09/fi909.02/C uad fad o £ntm m J
Q
0H U trf
* 6
s
Q ímpetudo tí# ínum .
O b t e n e r el c u a d r a d o d e los n ú m e r o s del 1 al 10
Q cuadrado de I es l
E l cuadrado de 2 es 4
E l cuadrado de 3 es 9
E l cuadrado de 4 es 16
Q cuadrado de 5 es 25
E l cuadrado de 6 es 36
D cuadrado d e 'e s 49
E l cuadrado de $es 64
E l cuadrado de 9 es S 1
E l cuadrado de 10 es 100
Figura 9.2 | Función cuadrado definida por el programador (parte 2 de 2).
el program a realiza una copia del valor d e x (el argum ento) y el co n tro l del program a se transfiere a la prim era
línea de la definición de la función cuadrado (linca 23). La (unción cuadrado recibe una copia del valor de x y
la alm acena en el parámetro y. D espués cuadrado calcula y * y. El resultado se devuelve al p u n to en la línea 19
en d o n d e se invocó a cuadrado. Las líneas 18 y 19 concatenan la cadena "<p>El cuadrado de " .e l valor de x,
la cadena " e s " , el valor devuelto por la función cuadrado y la cadena "< /p> " , y escriben esa línea de texto en
el docum ento de H T M L 5 para crear un nuevo párrafo en la página. Este proceso se repite 10 veces.
D efin ició n de la fu n c ió n cuadrado
La definición de la (unción cuadrado (líneas 23 a 26) muestra que cuadrado espera un solo parám etro y. La función
cuadrado usa este nom bre en su cuerpo para manipular el valor que se pasa a cuadrado de la llamada a la función en
la línea 1 9 .1a instrucción r e tu r n en cuadrado pasa el resultado del cálculo y * y de vuelta a b función que hace la
llamada. La palabra clave v a r de JavaScript no se utiliza para declarar parámetros de (unciones (línea 25).
Flujo de control en una secuencia de conuttulos que contiene fu n cio n es
E n este ejem plo, la función cuadrado sigue el resto de la secuencia de com andos. C uando la instrucción f o r
term ina, el control del program a no fluye de m anera secuencial hacia la función cuadrado. U na función debe
llamarse d e m anera explícita para que se ejecute el código en su cuerpo. Así, cuando term ina la instrucción f o r
en este ejem plo, la secuencia de com andos term ina.
Form ato general de ¡a definición de utui fu n c ió n
El form ato general de la definición de una función es
fu n c tlo n nombre-fúnción{ i¡ta-parámetros)
{
declaraciones e instrucciones
}
El nom bre de la función ( nombre-función) es cualquier idcntificador válido. La lista de parám etros (lista-pará­
metros) es una lista separada por comas que contiene los nom bres de los parám etros recibidos por la función
9.3
Definiciones de funciones
283
cuando se llam a (recuerde que los argum entos en la llamada a la función se asignan a los parám etros correspon­
dientes en la definición de b función). D ebe haber u n argum ento en b llamada a b función para cada parám e­
tro en su definición. Si una función no recibe valores, b lista de parámetros está varia (es decir, cl nom bre de b
función va seguido de un conjunto v ado de paréntesis). Las declaraciones e instrucciones entre b s Uaves form an
el cu erp o d e la fu n ció n .
Error común de programación 9.1
Olvidar devolver un valor ele unafundón que se supone debe devolver un valor es un error lógico.
Regresar el control del programa desde ¡a definición de una Junción
H ay tres form as de devolver cl control en el p u n to en cl que se invocó a una función. Si la función no devuelve
un resultado, el control regresa cuando el program a llega a la llave derecha de term in ad ó n de la función (}) o
ejecuta b instrucción
re tu m ;
S la función regresa un resultado, b instrucción
r e t u m eepresión',
devuelve el valor d e la expresión al que hizo b llamada. C uando se ejecuta una instrucción r e tu rn , el control
regresa de inm ediato al punto en el que se invocó a la función.
9.3.2
La fu n c ió n máximo definida por el pro g ram ad o r
l a secuencia en nuestro siguiente ejemplo (figura 9.3) usa una función definida por cl program ador Ibm ada
máximo para determ inar y devolver el m ayor de tres valores de p u n to flotante.
I
<! DOCTYPE html>
2
3
4
3
6
7
8
»
10
11
12
13
14
13
16
17
18
19
20
<1— F1g. 9.3: maximo.html -->
<1 — Función máximo d e f in id a por e l program ador. -->
<htal>
<head>
<»eta c h a rs e t = "u tf-8">
<t1tle>Máximo de t r e s v a l o r e s < / t i t l e >
< sty le type - " te x t/c ss" >
p { nargin: 0; }
</style>
< script>
var e n tr a d a l - window.prompt( "Escriba
var entrada2 = window.prompt( "Escríba
var entrada3 - window.prompt( "Escríba
el primer número", "0" );
el segundo número", "0" );
el t e r c e r número", "0" );
var v a l o r l = p a r s e F lo a t( e n tr a d a l );
var va1or2 - p a r s e F lo a t( entrada2 );
v a r v a lo r3 - parseFloatC en trada3 );
Figura 9 .3 | Función máximo definida por el programador (parte I de 2).
284
Capítulo 9
JavaScript: funciones
21
22
var valorMax = maximoC v a l o r l , v a lo r2 , v alo r3 ) ;
23
24
23
26
27
document.writelnC "<p>Pri«»er número: " + v a l o r l + "</p>" +
"<p>Segundo n&uacute¡mero: ” + v alor2 + "</P>" +
"<p>Tercer n&uacute ¡mero: " + v a lo r3 + ''</p>" +
M<p>El máximo es: " + valorMax + ”</p>" );
28
29
30
31
32
33
34
33
36
37
/ / d e fin ic ió n de l a función máximo ( s e llama desde la l i n e a 22)
function maximoC x, y, z )
{
r e t u m Math.max( x, Math.max( y, z ) );
} / / f i n de l a función máximo
< /script>
</ hea d> <body ></body >
</html>
17 ;**a$cnpt
Etc nfca d legundc num ere
C f■***QueMtip*j»necíe*cueOroi d^ioge
.
y
I
<>««>
;»«»Scnpt
Is o ib * ci Urcer numero
5061
que eite pA^ne cree cuedro* de d»*l©qc
[2) l«U»imo de D tt vdofti
r
C
X^
2 fi*cy//Xyejcmploí/c^p09/ft909.03/mAximo.htmipi ^7
Q Sd»» w ^ e n d c t
Q Web Sfcce GaOer, Q
ím portedc de Intem ,
P irn ct oxneto 299 S
Segundo nuottío 35 "6
Tetcei et*n«o 906.1
E l n a ia o e i 35*6
Figura 9 .3 | Función máximo definida por el programador (parte 2 de 2)
9.4
Notas sobre las funciones definidas por el programador
285
EJ usuario introduce los tres valores de p unto flotante m ediante diálogos prom pt (líneas 14 a 16). Las líneas
18 a 20 usan la función p a r s e F lo a t para convertir las cadenas introducidas por el usuario en valores d e punto
flotante. La instrucción en la línea 22 pasa los tres valores d e p u n to flotante a la función máximo (definida en las
líneas 30 a 33). La función entonces determ ina el valor más grande y devuelve esc valor a la línea 22, usando la
instrucción r e tu r n (línea 32). E l valor devuelto se asigna a b variable valorM ax. Las líneas 24 a 2 7 m uestran
b s tres valores de p unto flotante introducidos por el usuario y el valorM ax calculado.
La prim era línea de b definición d e la función indica que ésta se lb m a máximo y recibe los parám etros x, y
y z. Además, el cuerpo de b función contiene la instrucción que devuelve el m ayor de los tres valores de p u n to
flotante, usando dos Ibm adas al m étodo max del ob jeto Math. Prim ero, el m étodo Math.max se invoca con los
valores de b s variables x y z para determ inar el m ayor de los dos valores. A continuación, el valor de b variable
x y el resultado de la prim era lb m ad a a Math.max se pasan al m étodo Math. max. Por últim o, el resultado d e b
segunda lbm ada a Math.max se devuelve al punto en el que se invocó a máximo (línea 22).
9.4
Notas sobre las funciones definidas por el programador
'Todas b s variables declaradas con la p ab b ra cbve v a r en las definiciones de funciones son variab les locales;
esto significa que pueden utilizarse sólo en b función en b que están definidas. Los parám etros de una función
tam bién se consideran variables locales.
H ay varias ratones para b m odularización de u n program a con funciones. La m etodología divide y ven­
cerás hace más m anejable el desarrollo de los programas. O tra razón es la iru tiliz a c ió n d e l softw are (es decir,
usar b s funciones existentes com o bloques de construcción para crear nuevos programas). Al asignar nom bres y
definiciones d e funciones en form a correcta es posible crear porciones considerables de los program as a partir de
funciones estandarizadas, en vez de tener que crear código personalizado. Por ejem plo, no tuvim os que definir
cóm o convertir cadenas en enteros y núm eros de p u n to flotante; JavaScript ya cuenta con b función p a r s e ln t
para convertir una cadena en un entero y b función p a r s e F lo a t para convertir una cadena en un núm ero de
punto flotante. U na tercera razón es para evitar repetir código en u n programa.
Observación de ingeniería de softw are 9.1
Si ¡a tarea de unafunción nop uede expresarse de manera concisa, tal vez esté realizando muchas tareas diferentes.
Por lo general es mejor dividirla en variasfuñe iones más pequeñas.
Error común de programación 9.2
Redefinir elparámetro de unafunción como una variable local en lafunción es un error lógico.
Buena práctica de programación 9.1
No use el mismo nombre para un argumento que sepasa a unafunción y elparámetro correspondiente en ¡a
definición. AI usar nombres distintos evitamos la ambigüedad.
áí
Observación de ingeniería de softw are 9.2
Para promover la reutilización de software, toda función debe ¡imitarse a realizar una sola tarea bien definida:
y su nombre debe describir esa tarea de matura efectiva. Dichasfunciones hacen que losprogramas sean más
fáciles de escribir, depurar, mantener y modificar.
286
Capitulo 9
9.5
JavaScript: funciones
Generación de números aleatorios
A hora darem os un breve (y esperam os que divertido) paseo por una popular aplicación de program ación, rela­
cionada con la sim ulación y los juegos. En ésta y en b siguiente sección desarroIbrem os un program a de juego
estructurado de m anera cuidadosa, que incluye varias funciones. El program a utiliza la m ayoría de las instruc­
ciones de control que ya estudiam os.
H ay algo en el am biente d e un casino d e apuestas que anim a a b s personas, desde b s elegantes mesas de
caoba y fieltro para tirar dados, hasta las m áquinas tragam onedas. Es el d e m e n to d e azar, b posibilidad de que
la suerte convierta u n bolsillo lleno de dinero en una m o n tañ a d e riquezas. El elem ento de azar puede introdu­
cirse m ediante el m é to d o random del objeto Math.
C onsidere b siguiente instrucción:
v ar v a l o r A l e a t o r i o * M ath .ran d o m ();
El m étodo random genera un valor de p u n to flotante de 0 . 0 a 1.0, pero sin llegar a 1.0. Si en verdad random
produce valores al azar, entonces to d o valor en esc rango tiene b misma o p o rtu n id a d (o p ro b a b ilid a d ) d e ser
elegido cada vez que se lb m e a random.
9.5.1
Escalar y desplazar números aleatorios
El rango de valores producidos directam ente por random es a m enudo d istin to de lo que se requiere en una
aplicación en particubr. Por ejem plo, un program a que sim u b el bnzam iento de una m oneda podría requerir
sólo 0 para “águib" y 1 para “s o r . U n program a para sim ular el tiro de un dado de seis b d o s requeriría enteros
aleatorios en el rango de 1 a 6. Un program a que adivine en form a aleatoria el siguiente tipo de nave espacial (de
cuatro posibilidades distintas) que volará a lo brg o del horizonte en un videojuego requeriría núm eros aleatorios
en el rango de 0 a 3 o de 1 a 4.
Para dem ostrar el m étodo random, desarrollaremos u n program a que sim u b 30 tiros de un dado de seis
lados y m uestra el valor d e cada tiro (figura 9.4). Usamos el operador de m ultiplicación (•) con random de la
siguiente m anera (línea 21):
M a t h . f l o o r ( 1 + M ath .ra n d o m () * 6 )
La expresión anterior m ultiplica el resulrado de una llamada a M a th . random () por 6 para producir un valor des­
de 0 . 0 hasta 6 .0 , pero sin llegar a este últim o núm ero. A esto se le conoce com o escalar el rango de los núm eros
aleatorios. A continuación sum am os 1 al resultado para desplazar el rango de núm eros y producir u n núm ero
en el rango de 1.0 a 7 .0 , pero sin llegar a 7 .0 . Para term inar, usamos el m étodo M a th .flo o r para determ inar
el entero más cercano que no sea mayor al valor del argum ento; por ejem plo, M a t h . f l o o r ( 1 . 7 5 ) es 1 y Math.
f l o o r ( 6 . 7 5 ) es 6. La figura 9 .4 confirm a que los resultados están en el rango de 1 a 6. Para agregar espacio entre
los valores m ostrados, im prim im os cada valor com o un elem ento Ti en una lista ordenada. El estilo CSS en la
línea 11 pone un margen d e 10 píxeles a la derecha de cada elem ento l i e indica que deben m ostrarse en línea,
en vez de hacerlo en sentido vertical en la página.
1
<!DOCTYPE h t* l>
2
3
4
3
6
< ! - - Fig. 9.4: EntA leatorio.htm l -->
<1-- Enteros a l e a t o r i o s , desp lazar y e s c a l a r . —>
<htnl>
<head>
Figura 9 .4 | Enteros aleatorios, desplazar y escalar (parte I de 2).
9.5
7
8
9
10
11
12
13
14
15
16
17
18
19
Generación de números aleatorios
<»>eta ch a rset - "utf-S">
< title> D esp la z ar y e s c a l a r en teros a l e a t o r i o s < / t 1 t l e >
< sty le type « " t e x t / c s s ”>
p , ol { margin: 0; }
11
{ display: In lln e ; m argin-right: lOpx; }
< /style>
<scr1pt>
v a r valor;
document.wr1teln( "<p>N&uacute¡meros a le a to r 1 o s < / p x o l> " );
f o r ( v a r 1 - 1; i <- 30; ++1 )
20
{
21
v a lo r - H a t h .f l o o r ( 1 + Math.random() * 6 ) ;
document.writelnC "<li>" + v a lo r ♦ " < / 1 1 > " );
} / / fin del fo r
22
23
24
23
26
27
28
29
287
document.writelnC "</ol>" );
< /sc rip t>
</headxbodyx/body>
</ht«il>
; ll
CVvptaívy «<«Ur
C
f
* \
fiir/ / /X /e x ? m p k )s / c a p 0 9 / » iif8
S<t>oi »t>9tfrd o i
N um flW aleaioooi
3 6 2 2 6
1 6 3 2 2
Web SIkc GeOtr/
3
4
3
4
6
1
6
5
6
2
6
1
4
5
6
2
4
5
6
3
125 DeipUi»* y e u «Ur m*m
=
6-
*
2 Sbci»w9endoi
-f
1
________________________
D f ite / / / x y e jc m o lo s / c « p 0 9 / f í9 p i
C
^
NttmttOft akaiceioi
6 6 3 6 2
5
* \
6
5
1
&
Web Skce
B
•
2
5
5
6
3
3
5
6
3
4
3
2
3
5
4
1
4
2
6
3
Figura 9.4 | Enteros aleatorios, desplazar y escalar (parte 2 de 2).
9.S.2
Visualizar imágenes aleatorias
El contenido Web que varía al azar puede agregar electos dinám icos interesantes a una página. En el siguiente ejem ­
plo crearemos un generad o r d e im ágenes aleatorias: una secuencia de com andos que m uestra cuatro imágenes
de un dado seleccionadas al azar cada vez que el usuario hace clic en un botón llamado T ir a r dados en la página,
l^ra que la secuencia de com andos de la figura 9.5 funcione correctam ente, el directorio que condene el archivo
H ra rD a d o s.h tm l tam bién debe contener las seis imágenes del dado con los nombres de archivos d ad o l.p n g ,
dado2 .png, dadoB. png, dado4. png, d ad o s. png y dado6. png; éstas se incluyen con los ejemplos de este capítulo.
1
<!DOCTYPE html>
2
3
4
5
6
7
<1— F1g. 9 .5 : T1rar0ados.html —>
< ! - - Generación de imágenes a l e a t o r i a s de dados usando Math.random. —>
<html >
<head>
<*eta c h a rs e t = ”u tf-8">
Figura 9 .5 | Generación de imágenes aleatorias de dados usando Math. random (parte I de 3).
288
8
9
10
II
12
13
14
13
16
17
18
■107
20
21
22
23
24
23
26
27
28
29
30
31
32
33
34
33
36
37
38
39
40
41
42
43
44
43
46
47
48
49
30
31
32
33
54
35
56
37
38
39
Capítulo 9
JavaScript: funciones
<tit1e»Imágenes a l e a t o r i a s de d a d o s < /title »
<style type » "te x t/e s s" »
l i { d isp lay : in lin e ; m a r g in - r ig h t: lOpx; }
ul { margin: 0; }
</style>
<scr1pt>
/ / v a ria b le s u t i l i z a d a s para i n t e r a c t u a r con lo s elementos img
var imagenDadol;
var imagenDado2;
var imagenDado3;
var imagenDado4;
/ / r e g i s t r a r componente de escucha del botón y obtener lo s elementos img
function i n i c i a r ( )
{
var boton - document.getElementByldC "botonTIrar" ) ;
boton.addE ventL istener( " c lic k " , tirarD ados, f a l s e );
imagenDadol = document.getElementByldC "dadol" ) ;
imagenDado2 - document.getElementByldC "dado2" ) ;
imagenDado3 = document.getElementByldC "dado3" ) ;
imagenDado4 » document.getElementByldC "dado4" ) ;
} / / f i n de l a función i n i c i a r
/ / t i r a r los dados
fu nctio n tirarOadosC)
{
establecerlmagenC imagenDadol );
establecerImagenC imagenDado2 );
establecerlmagenC imagenDado3 );
establecerlmagenC imagenDado4 );
} / / f i n de l a función tirarD ados
/ / se le c c io n a r e l origen de la imagen de un dado
fu nctio n establecerlmagenC imgDado )
{
var valorOado = Math.floorC 1 + Math.randomC) * 6 ) ;
imgDado.setAttributeC " s rc " , "dado" + valorOado + " .png " ) :
imgDado.setAttributeC " a l t " ,
"imagen de un dado con " + valorDado + " puntoCs)" );
} / / f i n de l a función establecerlmagen
window.addEventlistenerC "load", i n i c i a r , f a l s e );
< /script>
</head>
<body>
<form a c tio n = "#">
<input id = "botonTirar" type = "button" valué = " T ir a r dados"»
</forn>
<ol»
<1 i x i m g id - "dadol" s r c - "blanco.png" a l t - "imagen en blanco"»</H»
<l1»<1mg id ■ "dado2" s r c » "blanco.png" a l t - "imagen en blanco"»</li»
<1 i x i m g id = "dado3" s r c = "blanco.png" a l t = "imagen en blanco"»</H>
Figura 9 .5 | Generación de imágenes aleatorias de dados usando Math. random (parte 2 de 3).
9.5
60
61
62
63
Generación de números aleatorios
289
<11><1«b H - "<Udo4n src - "blanco.png" a l t - "Imagen en b1anco"></11>
</ol>
</body>
</ht»l>
j Lj
Ó€Úi * \
C i fite7//xyejempios/cap09/^l
L!} $*** UjfrtáCi Q VIt
CuiUr,
A H »
' lrr.*9«r<s
5
m
|j
ótú. »
C D íiJe///X/ejefnploVcdp(»/fi
3 V,ébSJ»<«G*K«fy
=
•
s s s s
Figura 9.5 | Generación de imágenes aleatorias de dados usando Math.random (parte 3 de 3).
Interacciones d el usuario m ediante e l m anejo de evetttos
H asta ahora, todas b s interacciones dei usuario con las secuencias de com andos han sido a través de un diálogo
prompt (en donde el usuario escribe un valor de entrada para el program a) o un diálogo a l e r t (en donde se
m uestra un mensaje al usuario y éste puede hacer d ic en A ceptar para cerrar cl diálogo). A unque estos diálogos
son formas válidas de recibir entrada de un usuaria y m ostrar mensajes, son bastante lim itados en cuanto a sus
capacidades. U n diálogo prompt puede obtener del usuario sólo u n valor a la vez; un diálogo de mensaje sólo
puede m ostrar un mensaje.
I¥»r lo general, b s entradas se reciben del usuario m ediante u n elem ento form de H T M L 5 (com o u n o en
donde el usuario introduce su nom bre y b inform ación de su dirección). Es co m ú n q u e los resultados se m ues­
tren al usuario en b página W eb (por ejem plo, b s im ágenes de los dados en este ejem plo). Para em pezar nuestra
introducción a b s interfaces de usuario más elaboradas, este program a usa un elem ento form de H T M L 5 (que
vimos en los capítulos 2 y 3) y un nuevo concepto d e interfaz gráfica de usuario: cl m an ejo de e v e n to s d e G U I.
Éste es nuestro prim er ejem plo en donde se ejecuta código de JavaScript en respuesta a b interacción del usuario
con un elem ento en u n form ubrio (form). E sta interacción produce un evento. Las secuencias de com andos se
utilizan a m enudo para responderá los eventos iniciados por el usuario.
E l elemento body
Antes de hablar sobre el código de b secuencia de com andos, considere el elem ento body (líneas 52 a 62) de este
docum ento. Los elem entos dentro de body se usan m ucho en b secuencia de com andos.
E l elem ento form
l a línea 53 comienza la definición de un elemento form de H T M L 5. El estándar de H TM L5 requiere que todo
elemento form contenga un atributo a c tlo n , pero com o este form ubrio no publica su información en un servidor
Web. se utiliza b cadena "#" para perm itir que este docum ento se valide. El sím bolo i en sí representa a b página
actual.
E l elem ento Input b u tto n y la program ación controlada p o r eventos
La línea 54 define un elem ento Input b u tto n con el id " botonT irar" que contiene el valor Ti ra r dados, el cual
ar muestra en el elemento button. C om o podem os ver, b secuencb de com andos de este ejemplo maneja el evento
c l i c k del elem ento button, que ocurre cuando cl usuario hace clic en el botón (button). En este ejem plo, al hacer
clic en cl botón se hace una Ibm ada a b función t i rarOados, que veremos en breve.
Capitulo 9
290
JavaScript: funciones
lisie estilo de program ación se conoce com o programación controlada p o r eventos: el usuario interactúa con un elem en to en la página W eb, la secuencia de com andos recibe la notificación del evento y lo
procesa. La interacción del usuario con la G U I “con tro la” el program a. El clic en el elem ento b u tto n se
conoce com o el evento. La función q u e se llam a cu a n d o ocurre u n evento se conoce com o manejador del
evento. C uando ocurre un evento de G U I en un elem ento form , el navegador llam a a la función d e m anejo
d e eventos especificada. A ntes de p oder procesar un evento, cada elem ento debe saber cuál es la función de
m anejo d e eventos a la que se llam ará cu an d o ocurra un evento en particular. La m ayoría de los elem entos
de H T M L 5 tienen varios tipos distintos de eventos. E n el capítulo 13 hablarem os detalladam ente sobre el
m odelo de eventos.
Los elementos img
Los cuatro elem entos img (líneas $7 a 60) m ostrarán los cuatro dados seleccionados al azar. Sus atrib u to s id
(dadol, dado2, dadoB y dado4, respectivamente) pueden usarse para aplicar csrilos d e CSS y perm itir que el
código de La secuencia de com andos se refiera a este elem ento en el docum ento de H T M L 5 . Puesto que el atri­
b u to id (si se especifica) debe tener un valor único entre todos los atributos id en la página. JavaScript puede
referirse de m anera confiable a cada elem ento individual m ediante su atrib u to id . E n un m om ento veremos
cóm o se hace esto. C ada elem ento img m uestra La im agen bl anco, png (una imagen en blanco) cuando La página
se despliega por prim era vez.
Especificar la función a ¡¡amar cuando el navegador termine de cargar un documento
D e aquí en adelante, m uchos de nuestros c jc m p b s ejecutarán una función de JavaScript cuando el docum ento
term ine de cargarse en la ventana del navegador Web. Esto se logra m ediante el manejo del evento load del
objeto window. Para especificar la función a llamar cuando ocurra un evento, hay que registrar un m anejador
de eventos. En la línea 49 registramos el m anejador de eventos load de vrindow. El m étodo addE ven tL isten er
está disponible para cada nodo del D O M . El m étodo recibe tres argum entos:
• d prim ero es el nom bre del evento para el que estam os registrando un m anejador
•
el segundo es la función que se va a llamar para m anejar el evento
•
el últim o argum ento es por lo general f a ls e ; el valor tr u e está más allá del alcance de este libro
La línea 49 indica que la función i n i c i a r (líneas 21 a 29) deberá ejecutarse tan pro n to com o la página
term ine de cargarse.
Función In icia r
C uando ocurre el evento load dcwindow, la función i n i c i a r registra el m anejador de eventos c ü c k del botón
Ti r a r dado (líneas 23 y 24), el cual instruye al navegador para que escuche los eventos (en especial los eventos
de clic). Si no se especifica un m anejador d e eventos para el b o tó n T ir a r dado, la secuencia de com andos no
responderá cuando el usuario presione el botón. La linea 23 usa el método getElenentByld del objeto docu­
ment: que, dado el id de un elem ento de H T M L 5 com o argum ento, busca el elem ento con el atributo id que
coincida y devuelve un objeto d e JavaScript q u e representa ese elem ento. E ste objeto perm ite a la secuencia
d e com andos ¡ntcractuar en form a program ática con el correspondiente elem ento en la página Web. Por ejem ­
plo, la línea 24 usa el objeto que representa el elem ento button para llamar a la función addEventListener; en
este caso es para indicar q u e se debe llam ar a la función t i rarOados cuando ocurra el evento del clic del botón.
1-as líneas 25 a 28 ob tien en b s objetos que representan a b s cuatro elem entos img en las líneas 57 a 6 0 y b s
asignan a las variables de la secuencia de com andos que se declaran en las líneas 1 5 a 18.
9.5
Generación de números aleatorios
291
Función tira r Dados
EJ usuario hace clic en el b o tó n T ir a r dados para tirar los dados. Este evento invoca a la función tira rO a d o s
(líneas 32 a 38) en la secuencia de com andos. La función tira rO a d o s no recibe argum entos, por lo que tiene
una lista de parám etros vacía. Las líneas 34 a 37 llaman a la función e sta b le c e rlm a g e n (líneas 41 a 47) para
seleccionar y establecer la im agen al azar para un elem ento img especificado.
Función establecerlmagen
La función e s ta b le c e rlm a g e n (líneas 41 a 47) recibe un parám etro (imgDado) que representa el elem ento img
específico en el que se m ostrará una im agen seleccionada al azar. La línea 43 elije u n entero aleatorio del 1 al 6.
La línea 44 dem uestra cóm o acceder al atrib u to s re de un elem ento i mg d e m anera program ática en JavaScript.
Cada objeto de JavaScript q u e representa a un elem ento del docum ento de H T M L 5 tiene un m étodo s e t A ttr i bu t e que nos perm ite cam biar los valores de la m ayoría de los atributos del elem ento de H T M L 5 . En este
caso cam biam os el atrib u to s rc del elem ento img al que se refiere imgDado. El atrib u to s r c especifica la ubica­
ción de la imagen a mostrar. Establecemos el atrib u to s r c en una cadena concatenada que contiene la palabra
"dado", un entero generado al azar del 1 al 6 y la extensión de archivo ".p n g " para com pletar el nom bre de
archivo de la imagen. Así, la secuencia de com andos establece en form a dinám ica el atrib u to s r c del elemento
img al nom bre de los archivos de imagen en el directorio actual.
Seguir tirando los dados
Después el program a espera a que el usuario haga clic en el b o tó n Ti r a r dados otra vez. C ada vez que el usua­
rio lo haga, el program a llam ará a tira rO a d o s , que a su vez llamará repetidas veces a e sta b le c e rlm a g e n para
m ostrar nuevas imágenes de dados.
9.5.3
T ira r el dado repetidas veces y m ostrar las estad ísticas
Para m ostrar que los valores aleatorios q u e representan a los dados ocurren con una probabilidad aproxi­
m adam ente igual, dejarem os q u e el usuario tire 12 dados al m ism o tiem p o y llevarem os las estadísticas que
m uestran el núm ero d e veces que ocurre cada cara, ju n to con el porcentaje de las veces q u e se tira cada cara
(figura 9.6). Este ejem plo es sim ilar al de la figura 9 .5 , por lo que nos enfocarem os sólo en las nuevas carac­
terísticas.
Variables de secuencias de comandos
Las líneas 22 a 28 declaran c inicializan variables con tad o r para llevar la cu en ta del núm ero de veces que aparece
cada uno de los seis dados, ju n to con el núm ero total de dados tirados. G im o estas variables se declaran fuera
de las funciones de la secuencia de com andos, son accesibles para todas las funciones en la secuencia
1
<!DOCTYPE html>
2
3
4
3
6
7
8
9
10
<1— Fig. 9 .6 : TirarDados.html — >
<1— T ir a r 12 dados y mostrar la s fre c u e n c ia s . -->
<html >
<head>
<»eta c h a rset - "utf-8">
<t1tle>Frecuenc1as a l t i r a r lo s d a d o s< /title >
< sty le type • " te x t/c ss" >
ing
{ m argin-right: lOpx; >
Figura 9 .6 | Tirar 12 dados y mostrar las frecuencias (parte I de 4).
292
11
12
13
14
13
16
17
18
19
20
21
22
23
24
23
26
27
28
29
30
31
32
33
34
33
36
37
38
39
40
41
42
43
44
43
46
47
48
49
30
31
52
53
54
33
36
37
38
59
60
61
Capitulo 9
JavaScript: funciones
ta b le
{ width: 200px;
b o rd e r-c o lla p se rc o lla p se ;
background-color: lig h tb lu e ; }
t a b le , t d , th { border: lpx s o l l d black;
paddlng: 4px;
margin-top: 20px; }
th
{ te x t - a l i g n : l e f t ;
color: white;
background-color: darkblue; }
</style>
<script>
v a r f r e c u e n c ia l - O;
v a r frecuencia2 - 0;
var f r e c u e n c ia í = 0;
var frecuen cia4 - 0;
var frecu encias • 0;
var fre cu e n c ia 6 = 0;
var t o t a l Dados - 0;
/ / r e g i s t r a r el manejador de eventos del botón
fun ction i n i c i a r O
{
var boton = document.getElementByldC "botonT irar" ) ;
b o to n .ad d E v e n tH ste n e r( " c lic k " , tirarD ad o s, f a l s e );
} / / f i n de l a función i n i c i a r
/ / t i r a r lo s dados
fu nctio n tirarD ado sQ
{
var cara;
/ / cara que se t i r ó
/ / i t e r a r para t i r a r el dado 12
veces
for ( var i - 1; i <- 12; ++i )
{
cara = M a th .flo o r( 1 + Math.random() * 6 );
sumarTirosC cara ) ; / / incrementa un contador defrecuencia
establecerlm agen( i , c a ra ); / / m ostrar l a imagen del dado apropiado
-M-totalDados; / / incrementar el t o t a l
} / / f i n del c i c l o de t i r a r dados
actu al izarT ablaF recuenciasO ;
} / / f i n de l a función tirarD ados
/ / incrementar e l contador de frecuen cias apropiado
fun ction sumarTirosC c a ra )
{
switch ( cara )
{
case 1:
++frecuencial;
break;
Figura 9 .6 | Tirar 12 dados y mostrar las frecuencias (parte 2 de 4).
9.5
Generación de números aleatorios
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
case 2:
++frecuencia2;
b reak ;
case 3:
++frecuenc1a3;
break;
case 4:
++frecuencia4;
break;
case 5:
++frecuenciaS;
b reak ;
case 6:
-M-frecuencia6;
break;
} / / fin de switch
} / / f i n de l a función sumarTiros
88
/ / a c t u a l i z a r t a b l a de frecu encias en l a página
function actu alizarT ablaF recuenciasC )
{
var divTabla - document.getElementByldC "divTablaFrecuencias" );
89
90
91
92
93
94
93
96
97
98
99
100
101
102
103
104
103
106
107
108
109
110
/ / e s t a b l e c e r o rigen de imagen para un dado
fun ction establecerlmagenC numeroOado, cara )
{
var imgDado ** document.getElementByldC "dado" + numeroDado );
imgDado.setAttributeC "s rc " , "dado" + cara ♦ ".png" );
imgDado.setAttributeC " a l t " , "dado con " ♦ cara + " puntoCs)" );
} / / f i n de l a función establecerlmagen
divTabla.innerHTW. - "<table>" +
"<caption>Frecuencias de t i r o de lo s dados</caption>" +
"<thead><th>Cara</th><th>Frecuencia</th>" +
"< th > P o rc en ta je < /th x /th ea d > " ♦
" < t b o d y x t r x t d > l < / t d x t d > " + f r e c u e n c ia l + " < / td x td > " +
form atoPorcentajeCfrecuencial / to talD ad o s) + "</td></tr>" +
" < t r x t d > 2 < / t d x t d > " +frecu encia2
+ " < / t d x td > " +
formatoPorcentajeCfrecuencia2 / totalD ados)+ " < / t d x / t r > " +
"<tr><td>3</td><td>" + frecuencia3 + " < / t d x t d > " +
formatoPorcentajeCfrecuencia3 / totalD ados) + " < / t d x / t r > " +
" < t r x t d > 4 < / t d x t d > " + frecu e n c ia4 ♦ "</td><td>" ♦
formatoPorcentajeCfrecuencia4 / totalD ados) + " < / t d x / t r > ” +
"<tr><td>S</td><td>" + frecuencia5 + "</td><td>" ♦
formatoPorcentajeCfrecuencia5 / totalD ados) + “< / t d x / t r > " +
"<tr><td>6</td><td>" + fre c u e n c ia 6 + "</td><td>" +
formatoPorcentajeCfrecuencia6 / totalDados) + "</t<b</tr>" +
"< /tb o dy x /tab le> ";
} / / f i n de la función actu alizarT ab laF recuencias
111
112
113
114
/ / a p l i c a r formato al p o rcen taje
fun ction formatoPorcentajeC v a lo r )
{
Figura 9 .6 | Tirar 12 dados y mostrar las frecuencias (parte 3 de 4).
293
294
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
Capítulo 9
JavaScript: funciones
100;
va lo r
r e tu r n
} / / fin
window.ad
< /sc rip t>
</head>
<body>
<p><1ng 1d
"dadol s r c » "blanco.png" a l t
<1ng 1d
"dado2ID s r c ■ "blanco.png" a l t
<1ng id
"dado3 s r c - "blanco.png" a l t
<1ng Id
"dado4 s r c - "blanco.png" a l t
<1ng id
"dadoS•M s r c ■ "blanco.png" a l t
•»dado 6•II
<1ng id
s r c = "blanco.png" a l t
H
M
I
< p x in g id
dado 7 s r c = "blanco.png" a l t
•1
<ing id
dado8" src
"blanco.png" a l t
<1ng 1d
"dado9"
aaooy src
s r c ■ "blanco.png" a l t
••
<ing 1d
"dado10" src - "blanco.png" al
<1ng id
"dado11" src - "blanco.png" al
<ing id
"dado12" src - "blanco.png" al
<forn a c tio n
<input id
</form>
<d1v id - "ddivTabl a F re c u e n c ia s " x /d i v>
</body>
</htnl>
C
S * t ic c l
b
o
m
f a l s e );
Inagen de dado 1">
Inagen de dado 2">
Inagen de dado 3">
Inagen de dado 4">
inagen de dado S">
Inagen de dado 6"></p>
inagen de dado 7">
Inagen de dado 8">
inagen de dado 9">
- "inagen de dado 10">
- "inagen de dado 11">
- "inagen de dado 12"></p>
t
t
t
valué - " T ira r dados">
5 r ilr y / / X 7 e j€ m p (o s / C d p 0 9 / f ig 0 9 .0 6 / r r ^ l
V
P
i
t
f
c
SJ< « G sB m y
b
b
Q
ü
=
Im p e r t id o á t Im a m .
b
b
dado»
Frrojrtkrut de oro de los ciados
Cara Fr*c.««aa Porceatafc
326
1646
325
1641
3
321
1621
4
309
15.61
<
350
17 68
6
349
17.63
1
Figura 9 .6 | Tirar 12 dados y mostrar las frecuencias (parte 4 de 4).
Función tirarO ado
C om o en la figura 9.5 , cuando el usuario presiona el b o tó n T ir a r dados se hace una llamada a la función t i rarDados (líneas 38 a 52). Esta función llama a las funciones sumarTi ros y e sta b l ecer Imagen para cada uno
9.5
Generación de números aleatorios
295
de los doce elem entos img en el docum ento (líneas 123 a 134) y después llam a a la función a c tu a l iz a r T a b la F re c u e n c ia s para m ostrar el núm ero de veces que apareció cada cara del dado y el porcentaje de los dados que
se tiraron en to ta l
Función sumarTiros
La (unción sum arT iros (líneas 55 a 78) contiene una instrucción swi tc h que utiliza el valor de c a r a elegido al
azar com o su expresión de c o n tro l C o n base en el valor d e c a r a , el program a increm enta una de las seis varia­
bles contador d u ran te cada iteración del ciclo. N o se proporciona un caso d e f a u l t en esta instrucción sw itch ,
ya que la instrucción en la línea 45 produce sólo los valores 1, 2, 3, 4, 5 y 6. En este ejem plo, el caso d e f a u lt
nunca se ejecutaría. Después d e que estudiem os los arreglos en el capítulo 10, veremos una form a elegante de
sustituir toda la instrucción sw itch en este program a con una sola línea de código.
Función e s ta b le c e r la agen
l a función e s ta b le c e rlm a g e n (líneas 81 a 86) establece el origen de la imagen y el texto a l t para el elem ento
img especificado.
Fu n d ó n a ctu a l 1zarTab1aFrecuenc1as
La función a c tu a liz a rT a b la F re c u e n c ia s (líneas 89 a 110) crea una tabla y la coloca en el elem ento div en
la línea 138 en el elem ento body del docum ento. La lín ea 91 ob tien e el o b jeto q u e representa a ese elem ento
div y lo asigna a la variable local t a b l aDiv. Las líneas 93 a 109 crean una cadena q u e representa a la tabla y la
asignan a la propiedad innerHTML del objeto tablaD iv, que coloca código de H T M L 5 en el elem ento que
la tabla tablaD iv representa y perm ite q u e el navegador despliegue ese código de H T M L 5 en el elem ento.
C ada vez q u e asignam os m arcado de H T M L a la propiedad innerHTML de un elem ento, el co n ten id o del
elem ento tablaD iv se sustituye por com pleto con el co n ten id o de la cadena.
Función forma toP orcentaje
La función a c tu a liz a rT a b la F re c u e n c ia s llama a la función forma to P o r c e n ta je (líneas 113 a 117) para d ar
form ato a los valores com o porcentajes con dos dígitos a la derecha del p u n to d ecim al La (unción sim plem ente
m ultiplica el valor que recibe por 100 y luego devuelve el valor después de llamar a su m étodo to F ix e d con el
argum ento 2, de m odo que el núm ero tenga dos dígitos de precisión a la derecha del p u n to decimal.
Escalas y desplazam ientos generalizados de los valores aleatorios
Los valores devueltos por random siem pre están en el rango
0 . 0 5 Math. randomO < 1.0 .
A nteriorm ente dem ostram os la instrucción
cara - M a th .flo o r( 1 ♦ Math. randomO * 6 ) ;
que sim ula el tiro de un dado de seis bdos. Esta instrucción siem pre asigna un entero (al azar) a b variable c a ra ,
en el rango 1 S cara <, 6. Observe que la anchura de este rango (es decir, el núm ero de enteros consecutivos en el
rango) es 6 y que el núm ero inicial en el rango es 1. C o n respecto a b instrucción anterior, vemos que la anchura
del rango se determ ina en base al núm ciu utilizado para escalar a random con el operador de m ultiplicación (6
en la instrucción anterior) y q u e el núm ero inicial del rango es igual al núm ero (1 en la instrucción anterior)
que se sum a a Math . randomO * 6. Podem os generalizar este resultado com o
296
Capítulo 9
JavaScript: funciones
c a ra - M a th .flo o r( a ♦ Math.random( ) • b );
en d o n d e a es el valor d e d esp laz am ien to (que es igual al prim er núm ero en el rango deseado de enteros
consecutivos) y b es el factor d e escala (que es igual a b am plitud del rango deseado de enteros consecutivos).
9.6
Ejemplo: Juego de probabilidad; introducción a los elementos
au d io y v id e o de HTML5
Uno de los juegos de azar más p o p u b res es el juego d e dados conocido com o “craps”, el cual se juega en casinos
y callejones por todo el m undo. Las reglas del juego son simples:
Unjugador ora dos dados. Cada dado túne seis caras, las cuales contienen uno, dos. tres, cuatro, ancoy
seispuntos negros, respectivamente. Una vez que los dados dejan de moverse, se calcula la suma de lospun­
tos negros en las dos caras superiores. Si ¡a suma es 7 u 11 en elprimer tiro, eljugador gana. Si la suma a
2 .3 o 12 en elprimer tiro (llamado “crups"). eljugadorpierde (a decir, la "casa"gana). Si la suma es 4, 5,
6 ,8 ,9 o 10 en elprimer tiro, esta suma se convierte en el "punto" ddjugador. Para ganar, eljugador debe
seguir tirando los dados hasta que salga otra vez “su punto" (es decir, que tire ese mismo valor de punto). El
jugadorpierde si tira un 7 antes de llegar a su punto.
La secuencia de com andos en la figura 9 .7 sim ula el juego de craps. C a b e m encionar que el jugador debe tirar
dos dados en el prim er tiro y hacer lo m ism o en rodos los tiros subsiguientes. Al cargar este docum ento puede
hacer clic en el vínculo de b parte superior de la página para ver un docum ento separado (figura 9.8) que con­
tiene un video en el que se explican las reglas básicas del juego (en inglés). Para iniciar un juego, haga clic en el
botón R eproducir. Un mensaje debajo del b otón m uestra el estado del juego después de cada tiro. Si no gana
o pierde en el prim er tiro , haga clic en el b o tó n Ti r a r para tirar de nuevo. [Nota: este ejem plo usa algunas ca­
racterísticas que, al m om ento de escribir este libro, funcionaban sólo en C hrom e, Safari e Internet Explorer 9].
E l elem ento body
Antes de hablar sobre el código de b secuencia de com andos, hablaremos sobre el elem ento body (líneas 150 a
177) de este docum ento. Los elem entos en el cuerpo (body) se utilizan m ucho en esta secuencia de com andos.
I
<!D0CTYPE html >
2
3
4
3
6
7
8
9
10
11
12
13
14
13
16
17
< 1-- Fig. 9.7: Craps.html —>
< 1 -- Simulación del juego de Craps. -->
<htnl>
<head>
<neta c h a rs e t = "u tf-8">
<title>Sim ulaciAoacute;n del juego de C raps< /t1tle>
< s ty le type = " te x t/ e s s " »
p .r o jo { color: red }
img
{ width: S4px; height: 54px; }
div
{ border: Spx rid g e royalblue;
padding: lOpx; width: 120px;
margin-bottom: lOpx; }
.punto { margin: Opx; }
< /style>
<scr1pt>
Figura 9 .7 | Simulación del juego de Craps (parte l de 6).
9.6
18
19
20
Ejemplo: Juego de probabilidad: introducción a los elementos audio y video de HTML5
/ / v a r ia b le s u t i l i z a d a s para r e f e r i r s e a lo s elementos de página
v a r puntoDadolImg; / / se r e f i e r e a l a 1mg de puntos del primer dado
var punto0ado2Img; / / se r e f i e r e a l a img de puntos del segundo dado
var tlroOadolImg; / / se r e f i e r e a l a img de t i r o
del primer dado
var tiroOado2Img; / / se r e f i e r e a l a img de t i r o
del segundo dado
v a r mensajes; / / se r e f i e r e a l p á rra fo "mensajes"
var botonJugar; / / se r e f i e r e al botón lu g ar
var botonTirar; / / se r e f i e r e al botón T ira r
var tiro dad os; / / se r e f i e r e al audio para a r r o j a r los dados
/ / o t r a s v a r ia b le s u t i l i z a d a s en el programa
v a r miPunto; / / punto si no gana/pierde en el primer t i r o
var valorDadol; / / v a lo r del primer dado en el t i r o actu al
var valorDado2; / / v a lo r del segundo dado en el t i r o actu al
/ / i n i c i a un nuevo juego
function I n ic ia rJ u e g o O
{
/ / o b tien e lo s elementos de página con lo s que vamos a I n t e r a c t u a r
tiro d ad o s - document.getElementByldC "tiro d ad o s" );
puntoOadolImg = document.getElementById( "puntoDadol" );
puntoDado2Img - document.getElementById( "puntoDado2" );
tiroOadolImg ■ document.getElementByldC "tlroOadol" );
t1roOado2Img - document.getElementByldC "tiroOado2" );
mensajes = document.getElementByldC "mensajes" );
botonJugar - document.getElementByldC "jugar" );
botonT irar - document.getElementByldC " t i r a r " ) ;
/ / p rep ara l a CUI
b o to n T ira r.d isa b le d ■ tru e ; / / d e s h a b i l i t a r botonTirar
establecerlmagenC puntoDadolImg ) ; / /
r e s t a b l e c e r imagen para nuevo juego
establecerlmagenC puntoDado2Img ) ; / /
r e s t a b l e c e r imagen para nuevo juego
establecerlmagenC tiroOadolImg ); / / r e s t a b l e c e r imagen para nuevo juego
establecerlmagenC tiro0ado2Img ); / / r e s t a b l e c e r imagen para nuevo juego
miPunto » O; / / en e ste momento no hay punto
primerTiroC); / / t i r a r el dado para I n i c i a r el juego
} / / fin de l a función i n i d a r l u e g o
/ / r e a l i z a r el primer t i r o del juego
fun ction primerTiroC)
{
v a r sumaDeDados ■ t i r a r D a d o s O ; / / primer t i r o de lo s dados
/ / determ inar si e l usuario ganó, perdió o debe se g u ir tir a n d o
switch CsumaDeOados)
{
case 7: case 11: / / gana en el primer t i r o
mensajes.InnerHTML "Ha ganado. Haga e l1 c en Reproducir para ju g a r de nuevo.";
break;
Figura 9 .7 | Simulación del juego de Craps (parte 2 de 6).
297
298
69
70
71
72
73
74
73
76
77
78
79
80
81
82
83
84
83
86
87
88
89
90
91
92
93
94
93
96
97
98
99
100
101
102
103
104
IOS
106
107
108
109
110
III
112
113
114
115
116
117
118
119
Capitulo 9
JavaScript: funciones
case 2: case 3: case 12: / / pierde en el primer t i r o
mensajes.innerHTML =
"Lo s i e n t o . Usted p ie rd e . Haga c l i c en Reproducir para ju g a r de nuevo.";
break;
d e fa u lt: / / recordar punto
miPunto = sumaDeDados;
establecerlm agen( puntoDadolImg, valorOadol );
establecerlm agen( puntoDado2Img, valor0ado2 );
mensajes.innerHTML =» "Tire de nuevo";
b o to n T ira r.d is a b le d = fa lse ; / / h a b i l i t a r botonTirar
botonJu gar.disab led - true: / / d e s h a b i l i t a r botonJugar
break;
} / / f i n de switch
} / / f i n de l a función primerTiro
/ / se llama para los t i r o s su b sig u ien tes de los dados
fu nctio n tirarDeNuevoO
{
var sumaDeDados - tir a r O a d o s ü ; / / t i r o su b sig u ie n te de lo s dados
i f (sumaDeDados == mi Punto)
{
mensajes.innerHTML »
"iHa ganado! Haga e l 1 c en Reproducir para ju g a r de nuevo.";
b o to n T ira r.d is a b le d = true; / / d e s h a b i l i t a r botonT irar
boton Ju g ar.d isab led = fa lse ; / / h a b i l i t a r botonJugar
} / / f i n de 1 f
e l s e 1 f (sumaDeDados = 7) / / craps
{
m ensajes.1 nnerHTML =
"Lo s ie n to . Usted p ie rd e . Haga e l 1c en Jugar para ju g a r de nuevo.";
b o to n T ira r.d is a b le d = true; / / d e s h a b i l i t a r botonTirar
bo ton Ju g ar.d isab led ■ f a ls e ; / / h a b i l i t a r botonJugar
} / / f i n de e lse i f
} / / fin de l a función tirarOeNuevo
/ / t i r a r los dados
fu nctio n tlra rD ad o sO
{
t i rodados . p l a y O ; / / reproduce sonido de t i r o de dados
/ / borra la s imágenes a n te rio r e s de los dados mientras se reproduce el sonido de t i r o
valorDadol ■ NaN;
valorDado2 » NaN;
mostrarDados( );
valorDadol ■ M a t h .f lo o r (l + Math. randomO • 6);
valorDado2 = M a t h .f lo o r (l + Math.random() * 6);
r e tu r n valorDadol + valorDado2;
} / / fin de l a función tirarD ados
Figura 9 .7 | Simulación del juego de Craps (parte 3 de 6).
9.6
120
121
122
123
124
125
126
127
124
129
130
131
132
133
134
135
136
137
134
139
140
141
142
143
144
145
146
147
144
149
150
151
152
153
154
155
156
157
154
159
160
161
162
163
164
165
166
167
164
169
170
171
Ejemplo: Juego de probabilidad: introducción a los elementos audio y video de HTML5
/ / m ostrar dados que se t i r a r o n
fun ction mostrarOadosü
{
establecerlmagenC tiroDadolImg. valorOadol );
establecerlmagenC tiro0ado2Img, valorOado2 );
> / / f i n de la función mostrarOados
/ / e s t a b l e c e r origen de imagen para un dado
fun ction establecerlmagenC imgDado. valorOado )
{
i f C is F in ite C valorOado ) )
imgDado.src - "dado" ♦ valorOado + ".png";
e l se
imgDado.src * "blanco.png";
} / / f i n de l a función establecerlmagen
/ / r e g i s t r a r componentes de escucha de eventos
fun ction I n l c i a r O
{
var botonJugar - document.getElementByldC "Jugar" );
botonJugar.addEventListenerC " c lic k " , 1n ic iarJu eg o , f a l s e );
var botonTirar = document.getElementByldC " t i r a r " );
botonTirar.addEventListenerC " c lic k " , tirarOeNuevo, f a l s e );
var sonidoDados - document.getElementByldC "tiro dad os" ) ;
sonidoDados.addEventListenerC "ended", mostrarDados. f a l s e );
} / / f i n de la función i n i c i a r
window.addEventListenerC "load", i n i c i a r , f a l s e ) ;
</scr1pt>
</head>
<body>
<aud1o id - "tiro dado s" preload - "auto">
<source src ■ "h t t p : / / t e s t . d e i t e l . c o B / d 1 c e r o n i n g . m p 3 "
type - "aud1o/mpeg">
<source src - "h ttp : / / t e s t . d e 1 t e l . c o B / d 1 c e r o l l 1 n g .o g g "
type a "aud1o/ogg">
El navegador no soporta l a e tiq u e ta audio</audio>
<p><a h r e f - "ReglasCraps.htm1">Haga c l i c aquí para un video c o rto
que exp lica l a s r e g la s básicas de C rap s< /ax /p >
<div id = "puntoOiv°>
<p c l a s s - "punto">El punto es:</p>
<1mg id = "puntoOadol" s r c - "blanco.png"
a l t = "Dado 1 de v a lo r de punto">
<1ng 1d - "puntoOado2" s r c - "blanco.png"
a l t » "Oado 2 de v a lo r de punto">
</div>
<div c l a s s - "t1roOiv">
<img 1d » "tiroOadol" s r c a "blanco.png"
a l t = "Dado 1 de v a lo r de tiro " >
<img 1d a "tiroDado2" s r c a "blanco.png"
a l t = "Dado 2 de v a lo r de tiro " >
</div>
Figura 9 .7 | Simulación del juego de Craps (parte 4 de 6).
299
300
Capitulo 9
JavaScript: funciones
<for«i a c t i o n <input i d - "Jugar" type - "button" valué - "Jugar">
<input i d = " t i r a r " type = "button" valué = " T ira r" >
< /fo r« >
<p id = "mensajes" c l a s s = "rojo">Haga c l i c en Jugar para i n i c i a r e l juego</p>
</body>
</html>
a) Cana en el primer tiro. En este caso puntoO ivno muestra
ringún dado y el botón T i r a r permanece deshabitado.
£ t m U x * ' * ) ! » ' * **
C
* \___
»<r
knlxeru,u)D X
___
' n^y//Xvr|ctrtxn/c»cO9/^o09.07.ce.lC'»pvMTrr
*>»««MjrOM
b) ftede en el primer tiro. En este caso puntoOi v no muestra
nhfljn dado y el botón T i r a r permanece deshabitado
p*
f:j
5
O ******•*
c
S<«« atqc^ása
•
«a
^
•^///Xy#)«fT<>iovi'cJpOT/T'9Q9 0<.0S,''CiafK.rarrt
Wrt ífcce ¿«fcry C l
H
•'.• S
oc « * r t-
tliál £ÍLMHPgltfPlfcC
El p n c ei
r*»
l 't l r d pem *
c) El pnmer tiro es un 6. por lo que el punto del usuario es 6. El
betón Jugarestá deshabitado y el betón T lra re s tá habitado.
M a c * . •
c
fiey //X y cjo m p o v /C J« D 0 9 /tig 0 9 .D ;.O e/C rap tm ir2
ffc m R rpm ilnr» ( w i
*
d) EJ usuario ganó en un tiro subsiguiente. El botón Ju g a r está
habilitado y e» botón T lra re s tá deshabitado.
Wniatcr.MuBjca • >
C 2 f.Tr///Xy«j«ir<ilOi,‘CJp09^^(».07.0S^/apcWfrí (■ £• =
5
tffté SA cc C a fa n
Sato»
W r t S U « Gtftary
O
W
o M o «f M n .
Huí tfr aaa tun ai «ufe»im :u* r ti4 ca )m
iT t.w I m»— cV Crax><
E lp w o rt
H i fV ttd o Mapa f k n t R f f r o d w r para N p » cV
Figura 9 .7 | Simulación del juego de Craps (parte 5 de 6).
9.6
Ejemplo: Juego de probabilidad: introducción a los elementos audio y video de HTML5
e) El primer oro es un A. por lo q je el punto del usuario es A. El botón
f) El usuario perdió en un tiro subsiguiente. El botón Ju g a resta
Ju g a re stá deshabitado y el betón T I r a r e s t i habilitado.
habitado y el botón T1 r a r e s t i desha bilitado.
301
E S
W
m
ü
tu
flá
d,-c.90*
C
^ru<c>yl&u;c3c
-
2 tile///X/0;*mplO5/cap09/í'9&9.07.Ofi/CrapsfttmI / * £
' H o h iiC ilr,
=
C
»
tito ///X y
k » /c ao09.'T»g09.07 JB&fC fa p sJR m l
*) * t t Sb c« j i l r ,
D it» o O d e l» U l» ru
Q
f*
=
3c H n _
Qrntoit
“
r* ^
L m w m I r tn J p im V lla g a 4 c
> a n r p a i» W * «*■i
Figura 9 .7 | Simulación del juego de Craps (parte 6 de 6).
El elemento audio de H TM L5
la s lincas 151 a 156 definen un d e m e n to a u d io de H T M L 5 . que se usa para incrustar audio en u n a página
Web. Especificam os un id para el d e m e n to d e m o d o que podam os co n tro lar por m edio de programación el
m om ento en que se reproduzca el audio. con base en las interacciones del usuario con el juego. Al establecer
el a tr ib u to p re lo a d en " a u to " indicam os al navegador q u e debería considerar descargar el d i p d e audio. de
m odo que esté listo para reproducirse a ta n d o el juego lo necesite. El navegador p u ed e ignorar este atrib u to
bajo ciertas condiciones; p o r ejem p lo , si el usuario está u san d o u n a conexión a In te rn e t con p o co a n c h o
de banda.
No todos b s navegadores soportan b s mismos form atos de archivos de a u d b , pero la m ayoría soportan
b s form atos M P3, O G G y/o WAV. T odos b s navegadores que probam os en este libro soportan M P3, O G G o
ambos. Por esta razón, en el elem ento a u d io hay dos d e m e n to * so u rc e anidados que especifican las ubicaciones
del clip de audio en b s form atos M P3 y O G G , respectivamente. C ad a elem ento so u rce establece b s atributos
s rc y ty p e . EJ atrib u to s re especifica la ubicación del clip de audio. El atrib u to ty p e establece el tipo M 1M E del
d ip : audio/m peg para el d ip d e M P3 y a u d io /o g g para el d ip O G G (WAV sería audio/x-w av; encontrará en
h'nea b s tipos M IM E para éstos y o tro s form atos). C uando un navegador Web que so p o n a el elem ento au d io
encuentra b s elem entos so u rce, d ije el prim er origen de audio que represente u n o d e b s form atos soportados
por el navegador. Si éste no so p o n a el elem ento audi o, se m ostrará el texto de la línea 156.
Usamos el convertidor de archivos de audio en línea en
media.i o
para co n v en ir nuestro clip d e audio en otros form atos. En W eb hay m uchos otros convertidores de archivos
disponibles en línea y para descargar.
302
Capitulo 9
JavaScript: funciones
El v i turulo a la página Regí asCraps .html
Las lincas 157 y 158 m uestran un vínculo a una página W eb separada en la que usamos un elem ento v id e o de
H T M L 5 para m ostrar un video corto que explica las reglas básicas del juego d e Craps. Al final de esta sección
hablarem os sobre esta página Web.
p untoD ivy tiro O iv
Los elem entos d iv en las líneas 159 a 171 contienen los elem entos img en donde m ostram os im ágenes de un
dado que representa el p unto del usuario y el tiro actual de los dados, respectivamente. C ada elem ento img tiene
un atrib u to id para que podam os interactuar con él por m edio de program ación. Puesto que el atrib u to id (si
se especifica) debe tener un valor único, JavaScript puede referirse de m anera confiable a cualquier elem ento
individual por m edio de su atrib u to i d.
E l elemento form
Las líneas 172 a 175 definen un elem ento form de H T M L 5 que contiene dos elem entos i nput tipo b u tto n . El
evento el ic k de cada elem ento b u tto n indica la acción a realizar cuando el usuario hace clic en el b o tó n corres­
pondiente. En este ejem plo, al hacer clic en el b o tó n Jugar se produce una llamada a la función i n i c i a r Juego
y al hacer clic en el b otón T i r a r se produce una llamada a la función tirarO eN uevo. En un principio el b o tó n
Ti r a r está deshabilitado, lo cual evita que el usuario inicie un evento con este botón.
E l elemento p
la» línea 176 define un elem ento p en el que el juego m uestra los mensajes de estado al usuario.
Las variables de la secuencia de comandos
Las líneas 19 a 31 crean variables que se utilizan en toda la secuencia de com andos. Recuerde que, com o éstas
se declaran fuera de las funciones de la secuencia de com andos, son accesibles para todas las funciones en ésta.
Las variables en las líneas 19 a 26 son usadas para interactuar con varios elementos de b secuencia de comandos. La
variable mi P u n to (línea 2 9 ) a lm acen a el p u n to si el ju g a d o r no g an a o p ierd e en el p rim e r tiro . L as va­
riables v alo rO ad o l y valorD ado2 llevan el registro de los valores de los dados para el tiro acruaL
Función 1n1c1arJuego
El usuario hace clic en el b otón Jugar para iniciar el juego y realizar el prim er tiro de b s dados. Este evento
invoca b función i n iciarJu eg o (líneas 34 a 55). que no recibe argum entos. Las líneas 3 7 a 44 usan e l m étodo
getEl ementByld del objeto document para o b ten er b s elem entos d e página con b s q u e b secuencia de com an­
dos interactúa por m e d b de program ación.
El b o tó n Ti r a r debe habilitarse sólo si el usuario no gana o pierde en el prim er tiro. Por esta razón, b línea
4 7 deshabilita el b o tó n T ir a r estableciendo su p ro p ie d a d d isa b le d en tr u e . C ad a elem ento in p u t tiene una
propiedad d is a b le d .
Las ü'neas 48 a 51 llam an a la función setlm ag e (definida en b s fincas 128 a 134) para m ostrar b imagen
b la n c o .p n g para b s elem entos im gen puntoO iv y t i roDiv. Sustituirem os b la n c o , png con im ágenes de dados
durante el juego, según sea necesario.
Por últim o, b línea 53 establece miPunto en 0 debido a q u e puede haber un v a b r de p u n to sólo después del
prim er tiro de b s dados, y b línea 54 lb m a al m étodo primerTiro (definido en las líneas 58 a 82) para realizar
el prim er tiro de b s dados.
F unción prim erTiro
La función p rim e rT iro (fincas 58 a 82) lb m a a b función t i rarDado (definida en las líneas 106 a 118) para
tirar b s dados y o b ten er su sum a, que está alm acenada en la variable local sumaOeDados. D ebido a que esta
9.6
Ejemplo: Juego de probabilidad: introducción a los elementos audio y video de HTML5
303
variable se define dentro de la función prime rTi ro. puede usarse sólo dentro de esa función. A continuación, la
instrucción switch (líneas 63 a 81) determ ina si el juego se ganó o perdió, o si debe co n tin u ar con o tro tiro. Si
el usuario ganó o perdió, las líneas 66 y 67 o 70 y 71 m uestran un mensaje apropiado en el elem ento párrafo (p)
de mensajes con la propiedad InnerHTWL del objeto. D espués del prim er tiro, si el juego no ha term inado, se
guarda el valor de la variable local sumaDeDados en miPunto (línea 74), se m uestran las im ágenes para b s vabres
de b s dados que se tiraron (líneas 75 y 76) en puntoOiv y aparece el mensaje "Ti re de nuevo" en el elem ento
párrafo (p) d e mensajes. Además, las líneas 78 y 79 habilitan el b o tó n T ir a r y deshabilitan el b o tó n Jugar,
respectivamente. La función prlmerTiro no recibe argum entos, por lo que tiene una lista de parám etros vacía.
Observación de ingeniería de softw are 9.3
Las variables que se declaran dentro del cuerpo de unajunción sólo se conocen en esajunción. Si se usan ¡os
mismos nombres de variables en cualquier otra parte delprograma, serán variables totalmente separadas en
la memoria.
T ip para prevenir errores 9.1
btiáalizar variables cuando se declaran en junciones ayuda a evitar resultados incorrectosy mensajes de adver­
tencia de datos sin inicializar del intérprete.
Función tlrarDeNuevo
El u su arb hace clic en el botón T ir a r para seguir tirando si el juego no se ganó, ni se perdió en el prim er tiro.
Al hacer clic en este botón se hace una lbm ada a b función t1 rarDeNuevo (líneas 85 a 103), que no recibe argu­
mentos. La línea 87 llama a b función tlra rO a d o s y almacena b sum a en form a b e a l en sumaDeDados, después
las líneas 89 a 102 determ inan si el u su a rb ganó o perdió en el tiro actual, muestran un mensaje apropiado
en el elemento párrafo (p) de m en sajes, deshabilitan el botón T1r a r y habilitan el botón Jugar. En cualquier caso, el
u su arb puede ahora hacer clic en Jugar para jugar nuevamente. Si el u su a rb no ganó, ni perdió, el program a
espera a que el u su arb haga clic en el botón T ir a r de nuevo. Cada vez que hace clic en T ir a r se ejecuta b fu n d ó n
t1 rarDeNuevo y ésta a su vez Ibm a a b fundón t1 rarD ados para producir un nuevo v a b r para sumaDeDados.
Función tlrarOados
Definim os una fu n d ó n llamada t i rarDados (lincas 106 a 118) que no recibe argum entos, para tirar b s dados y
calcular su suma. Se define una vez pero se llama desde b s líneas 60 y 87 en el program a. La función devuelve b
sum a d e b s dos dados (línea 117). La línea 108 reproduce el clip de audio declarado en las líneas 151 a 165 m e­
diante una lbm ada a su método play, que reproduce el clip una vez. C o m o pro n to veremos, usam os el evento
ended del elem ento audio que ocurre cuando el d ip term ina de reproducirse, para indicar cuándo m ostrar bs
nuevas imágenes del dado. Las líneas 111 y 112 establecen las variables valorDadol y valorDado2 en NaN, de
m odo que la llamada a mostrarDados (línea 113) pueda m ostrar b imagen blanco, png m ientras se reproduce
el sonido d e b s dados. Las líneas 115 y 116 seleccionan dos v ab res aleatorios en el rango de 1 a 6 y b s asignan
a b s variables de b secuencia de com andos llamadas valorDadol y valorDado2, respectivamente.
Función mostrarOados
La función m ostrarD ados (lincas 121 a 125) se Ibm a a ta n d o el sonido de tirar b s dados term ina de reprodu­
cirse. En este punto, b s líneas 123 y 124 m uestran b s im ágenes de b s dados que representan b s v ab res que se
tiraron en b función tlra rO a d o s .
304
Capítulo 9
JavaScript: funciones
F unción setlm age
La función setlm ag e (líneas 128 a 134) recibe dos argum entos: el elem ento img que m ostrará una imagen y
el valor de un dado para especificar qué im agen de dado m ostrar. Tal vez haya observado que llam am os a esta
función con un argum ento en las líneas 48 a 51 y con dos argum entos en las líneas 75 a 7 6 y 123 a 124. Si lla­
mam os a e s ta b le c e rlm a g e n con sólo un argum ento, el valor del segundo parám etro estará indefinido. En este
caso, m ostram os la imagen b lan co , png (línea 133). La línea 130 usa la función global de JavaScript 1sF1n1te
para determ inar si el parám etro valorD ado contiene un núm ero; si es así. m ostrarem os la im agen del dado que
corresponda a esc núm ero (finca 131). 1.a función i s F i n i t e devuelve tr u e sólo si su argum ento es un núm ero
válido en el rango soportado por JavaScript. Podem os aprender más sobre el rango num érico válido de Java­
Script en la sección 8.5 del estándar de JavaScript:
vww. eema- I n t e r n a t i o n a l . o rg /p u b l i c a t i o n s / f i 1 es/ECMA-ST/Ecma-262. pdf
F unción In ic ia r
La función i n i c i a r (líneas 137 a 145) se llama cuando ocurre el evento lo a d de wi ndow para registrar los ma­
n e ja d o ra de eventos c l i c para los dos elem entos b u tto n d e este ejem plo (líneas 139 a 142) y para el evento
ended del elem ento a u d io (líneas 143 a 144).
M ecanism os de control d el program a
Observe el uso de los diversos mecanismos de control del program a. El program a de C raps usa cinco funcio­
nes: in ic ia r J u e g o , p rim e rT iro , tirarO eN uevo, tlra rD a d o s y e sta b le c e rlm a g e n , adem ás de las iastrucciones
sw itc h e i f . . . e l s e anidadas. Observe además el uso de varias etiquetas c a se en la instrucción sw itch para
ejecutar las mismas instrucciones (líneas 65 y 69). E n los ejercicios al final de este capítulo investigamos las
características adicionales del juego de Craps.
R eg la sC ra p s.h ta ly e l elem ento video de H T M L 5
C uando el usuario hace clic en el hipervínculo en C raps . html (figura 9 .7 . lincas 157 y 158), aparece el archivo
R eg1asC raps.htm l en el navegador. E sta página consiste en un v in c u lo d c v u e lta a C ra p s .h tm l (figura 9.8, línea
11) y un elemento video de H T M L 5 (líneas 12 a 25) que m uestra un video en el que se explican las reglas
básicas para el juego de Craps (en inglés).
1 <!DOCTYPE htnl>
2
3 < ! — Fig. 9 .8 : Reg1asCraps.html -->
4 <1-- Página Web que muestra un video de l a s r e g la s b á sic a s para el juego de dados Craps. —>
3 <html>
6
<head>
7
<meta c h a rs e t - " u t f - 8 ”>
8
< title> R eg las de C ra p s< /title >
9
</head>
10
<body>
11
<p><a h r e f = "Craps.html">Regresar al juego de Craps</a></p>
12
<v1deo controls>
13
<source s r c - "ReglasCraps.np4" type - "video/mp4">
14
<source s r c - "ReglasCraps.wcbm" type ■ "v1deo/wcbm">
13
Un jugador t i r a dos dados. Cada dado tie n e s e is c a ra s quecontienen
16
uno, dos, t r e s , cuatro, cinco y s e i s puntos, respectivamente. Se
Figura 9 .8 | Página Web que muestra un video de las reglas básicas para el juego de dados Craps (parte I de 2).
9.6
17
18
19
20
21
22
23
24
23
26
27
Ejemplo: Juego de probabilidad: introducción a los elementos audio y video de HTML5
305
c a lc u la l a suma de los puntos en la s dos c a ra s s u p e r io r e s . Si la
suma es 7 u 11 en e l primer lanzamiento, el jugador gana. Si l a suma
e s 2, 3 o 12 en el primer lanzamiento ( l o que se llama " c r a p s " ), el jugador
p ie rd e (e s d e c i r , l a "casa" g an a ). Si l a suma es 4, S, 6, 8, 9 o
10 en e l primer lanzamiento, esa suma se c o n v ie rte en el "punto" del jugador.
Para ganar, debe s e g u ir tir a n d o los dados h a s ta que "salg a su
punto" ( e s d e c i r , t i r e su v a lo r de punto ). Si t i r a un 7 a n te s de sacar
e l punto, p ie rd e.
</video>
</body>
</html>
m f c C 'tp t
Sfto»
■
h rtWfckrG#»**-, Cj
óe
-
Basic Rules fo r th e Dice Gome craps
On th* ft»»l ivll >«u m\m witli /my r«>nibin.»tK>n +f dicr tfc*
lo l* l» 7 ( t b c m * n i | n v n ) , ) O u Iom> w i t l i w ) r m u lN iiM M ip • (
«Un* t k M t u t j ü k 2 , 3 o r t i ( a h o w n t n m d ) a o i ) ± uy o c h r r t o l á l ( 4 .
S,fc0,9o* ItV shnwu »n «f * | brcomr» vou# ”po4ot' and ti*
pani# lonlltinn.
Figura 9.8 | Página Web que muestra un video de las reglas básicas para el juego de dados Craps (parte 2 de 2).
El atributo c o n tro l s del elemento vi deo indica que nos gustaría que el reproductor de video en el navega­
dor mosrrara controles para permitir que el usuario controle la reproducción del video (por ejemplo, reproducir
y pausa). Al igual que con el audio, no todos b s navegadores soportan b s mismos formatos de archivos de
video, pero la mayoría soportan b s formatos MP4, O G G y/o WebM. Por esta razón, en el elemento video se
anidan dos elementos source que especifican las ubicaciones de este clip de video de ejempb en formatos M P4
y WebM. El atributo src de cada uno especifica la ubicación del video. El atributo type especifica el tipo MIME
del video: video/mp4 para M P4 y video/webm para WebM (encontrará en línea b s tipos M IM E para éstos y
otros formatos). Cuando un navegador Web que soporta el elemento video encuentre b s elementos source.
306
Capítulo 9
JavaScript: funciones
elegirá el prim er origen de video que represente uno de los form atos soportados por el navegador. Si éste no
soporta el elem ento v id eo , se m ostrará el texto de las líneas 15 a 24.
Utilizamos el convertidor de video que puede descargarse de
vw w .m irovideoconverter.com
para convertir nuestro video d e form ato M P4 a W cbM . Para o b ten er más inform ación sobre los elem entos
a u d io y v id e o de H T M L 5 , visite:
d e v .o p e ra .c o m /a rtic le s /v ie w /e v e ry th in g -y o u -n e e d -to -k n o w -a b o u th tm l5 -v id e o -a n d -a u d io /
9.7
Reglas de alcance
E n los capítulos 6 al 8 usamos idcntificadorcs para los nom bres de variables. Los atrib u to s de las variables inclu­
yen nombre, valor y tipo de datos (por ejem plo, cadena, núm ero o booleano). T am bién usam os identificadores
com o nom bres para las funciones definidas por el usuario. C ad a identificador en un program a tiene tam bién
un alcance.
El alcance de un identificador para una variable o función es la parte del program a en donde se puede hacer
referencia al identificador. Las v ariab les g lo b ales o v ariab les a nivel d e secuencia d e c o m a n d o s que se decla­
ran en el elem ento head pueden usarse en cualquier parte de una secuencia de com andos y se dice que tienen
alcance glo b al. Así, cada fo n d ó n en la(s) sccucncia(s) de com andos de la página pueden usar potencial m ente
las variables.
Los identificadores que se declaran dentro de una función tienen alcance d e fu n c ió n (o local) y pueden
asarse sólo en esa fo n d ó n . El alcance de fo n d ó n empieza con la llave izquierda de apertura ({) de la fo n d ó n
en La que se declara el identificador y term ina en la llave derecha de te rm in a d ó n (}). Las variables locales y los
parám etros de función tienen alcance de función. Si u n a variable local tiene el m ism o nom bre que una variable
global, b variable global está “oculta" del cuerpo de b función.
Buena práctica de program ación 9.2
Evite nombres de variables locales que ocultan los nombres de variables globales. Para ello sólo hay que evitar
usar identificadores duplicados en una secuencia de comandos.
La secuencia de com andos de b figura 9 .9 dem uestra las reglas d e a lcan ce que resuelven conflictos entre las
variables globales y b s variables locales del m ism o nom bre. U na vez más, usamos el evento lo a d de window
(línea 53). que llama a b fo n d ó n i n i c i a r cuando el docum ento de H T M L 5 se ha cargado por com pleto en la
ventana del navegador. En este ejem plo cream os una cadena s a l id a (declarada en la línea 14) q u e se m uestra al
final de b ejecución de la función i n i c i a r .
1
<IDOCTYPE h t*l>
2
3
4
3
6
7
< 1-- Fig. 9 .9 : a1cance.html —>
<1— Ejemplo de alcance. -->
<ht«tl>
<head>
« r e ta c h a rs e t « " u t f - 8 n>
Figura 9 .9 | Ejemplo de alcance (parte l de 3).
9.7
8
9
10
11
12
13
14
15
16
17
18
19
Reglas de alcance
<title>Ejem plo de a lc a n c e < / title >
<sty1e type * " te x t/c s s" >
P
{ margin: Opx; }
p .e s p a c io { margin-top: lOpx; }
< /style>
<scr1pt>
var sa lid a ; / / almacena l a cadena a mostrar
v a r x ■ 1; / / v a r ia b le global
functlon i n 1 c i a r ( )
{
var x - S; / / v a r ia b le lo ca l para l a función i n i c i a r
20
21
s a l i d a = "<p>la x lo c a l en I n i c i a r e s " + x + "</p>";
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
33
54
55
56
37
58
59
funcionAO;
funcionBO;
funcionAO;
funcionBO;
/ / funcionA tie n e la x local
/ / funciona usa l a v a r ia b le global x
/ / funcionA r e i n i c i a l iz a l a x local
/ / l a v a r ia b le global x re tie n e su v a lo r
s a l i d a +« "<p c la s s = 'e s p a c i o ’>la x lo c a l en i n i c i a r es " + x +
" < /p > " ;
document.getElementByldC " re su lta d o s" ).innerHTML = sa lid a ;
} / / f i n de l a función I n i c i a r
function funcionAO
{
var x » 2S; / / se i n l c i a l i z a cada vez que se llama a l a funcionA
s a l i d a *• "<p c l a s s = ’e s p a c io ’>la x lo c a l en l a funcionA e s " + x +
" después de e n t r a r a funcionA</p>";
++x;
s a l i d a +- "<p>la x lo c a l en funcionA es " ♦ x +
" a n te s de s a l i r de func1onA</p>";
> / / f i n de funcionA
functlon funcionBO
{
s a l i d a 4« "<p c la s s = 'c s p a c i o ’>la v a r ia b le global x es " ♦ x ♦
" al e n t r a r a l a funcione";
x *■ 10;
s a l i d a +• "<p>la v a r ia b le global x e s " + x +
" al s a l i r de l a funcionB</p>";
} / / f i n de la funcionB
window.addEventListener( "load", i n i c i a r , f a l s e );
< /sc rip t>
</head>
<body onload = " i n i c i a r O " >
<div 1d ="resultados"></div>
</body>
</ht«l>
Figura 9 .9 | Ejemplo de alcance (parte 2 de 3).
307
308
Capítulo 9
JavaScript: funciones
le a
j
12
^
C l) t»ie///X/ejemplo%/cap09/f>g09.09/akanceiitml
" 54»ot logcndoi
*Y*t) $Jk«
_2DV^pctTadc d* lnl*fn
b x toeoí en
m am
s i
es 5
b x k>cal en iw xxniX es 25 después de «aerar a 6m¿iocA
la x localenfuncionA f i 26 artes dr tab de faonooA
la variable global x es 100 aJ rtserar a la funcic«3
b sanable global x es 1000 al ufar dr b ru n n c c iB
b x local« funcionA es 25 despees dr «aerar a funcionA
U x localrafuncionA es 26 antes d r ufai dr fainonA
b vanablr global x es 1000 al entrar a b fonoooB
b variable global x es 10000 al sak de b ftnbaoB
b x local en e*ciar es 5
Figura 9.9 | Ejemplo de alcance (parte 3 de 3).
La variable global x (línea 15) se declara e inicializa en 1. E sta variable global se oculta en cualquier bloque
(o (unción) que declare a una variable llamada x. I j* función i n i c i a r (líneas 17 a 31) declara una variable local
x (línea 19) y la inicializa en 5. La línea 21 crea un elem ento párrafo que contiene el valor de x com o cadena y
asigna la cadena a la variable global s a l id a (que se m uestra después). E n la salida de ejem plo, esto m uestra que
la variable global x está oculta en i n i c i a r .
La secuencia de com andos define otras dos funciones: funcionA y funcionB, ninguna de las cuales reci­
be argum entos y tam poco devuelven nada. C ada función se llama dos veces desde i n i c i a r (líneas 23 a 26).
La función funcionA define la variable local x (línea 35) y la inicializa con 25. C uando se hace la llamada a
funci onA, el valor de la variable se coloca en un elem enro párrafo y se adjunta a la variable sal ida para m ostrar
que la variable global x está oculta en funcionA; entonces la variable se increm enta y adjunta a sal ida o tra vez,
antes de que la función term ine. C ada vez que se hace una llamada a esta función, se recrea la variable local x
y se inicializa en 25.
La función fu n c io n B no declara variables. Por lo tanto, cuando hace una referencia a la variable x se utiliza
la variable x global. C u an d o se llama a fu n c io n B el valor de la variable global se coloca en un elem ento párrafo
y se adjunta a la variable s a l i d a , luego se m ultiplica por 10 y se adjunta a la variable s a l i da de nuevo antes de
que la función term ine. La siguiente vez que se hace una llamada a fu n cio n B , Li variable global tiene su valor
m odificado (10) que de nuevo se m ultiplica por 10 y se produce 100 com o salida. Por últim o, las líneas 28 y 29
ad ju n tan el valor de la variable local x en i n i c i a r a la variable s a l i d a , para m ostrar que ninguna de las llamadas
a la función modificaron el valor de x en I n i c i a r debido a que todas las funciones se referían a variables en
otros alcances. La línea 30 usa el m étodo g e tE le m e n tB y ld del objeto document para o b ten er el elem ento d i v
r e s u l t a d o s (línea 57). luego asigna el valor de b variable s a l i d a a b propiedad innerHTML del elem ento, que
despliega el H T M L en b variable s a l i d a en la página.
9.8
Funciones globales de JavaScript
JavaScript cuenta con nueve funciones globales estándar. Ya usamos p a r s e l n t , p a r s e F lo a t e i s F i n i t e . Algu­
nas de b s funciones globales se sintetizan en la figura 9.10.
9.9
Recursividad
309
Función global
Descripción
is F in ite
Recibe un arg u m en to n u m érico y devuelve tr u e si d valor d d arg u m en to n o es NaN,
Number.POSITIVE.INFINITY o Number.NECATIVE_INFINITY (valores que n o son núm eros
o q u e son nú m ero s fuera d d rango so p o rta d o p o r JavaScript); d e lo co n trario , la función
d cv u d v e f a ls e .
is N a n
Recibe un arg u m en to n u m érico y devuelve t r u e si d valor d d arg u m en to n o es un
núm ero: d e lo c o n tra río dcvudve f a ls e . La fu n ció n se utiliza c o m ú n m e n te co n d valor
d e re to m o d e p a r s e ln t o p a rs e F lo a t para d eterm in ar si d resultado es un valor n u m é ­
rico correcto.
p a rs e F lo a t
Recibe un arg u m en to de cadena y trata d e c o n v e rtir el principio d e la cad en a en un valor
d e p u n to flotante. Si b conversión n o tien e éxito, b fu n ció n devuelve NaN: d e lo co n tra rio
devuelve d valor co n v ertid o (por ejem plo, p a r s e F lo a t(" a b c l2 3 .4 5 " ) devuelve NaN y
p a r s e F lo a t( “1 2 3 .4 5 ab c“) d cv u d v e d valor 123.45).
p a rs e ln t
Recibe un arg u m en to de cadena y trata d e c o n v e rtir el principio d e b cad en a en
un valor entero. Si b conversión no tiene éxito, b fu n ció n devuelve NaN; d e lo c o n ­
trario devuelve d valor co n v ertid o (por ejem plo, p a r s e ln t( " a b c l2 3 “) devuelve NaN y
p a r s e l n t ( “123abc") devuelve el valor entero 123). Esta fu n ció n recibe un segundo
argum ento o p cio n al d e 2 a 36, p ara especificar b raíz (o base) d d núm ero. Base 2 indica
q u e el p rim er a rg u m e n to d e cadena está en fo rm ato binario, base 8 que está en form ato
octal y base 16 q u e está en form ato hcxadccimal. C o n su lte d apéndice E para m ás in fo r­
m ación sobre los nú m ero s binarios, ocíales y hetadecim ales.
Figura 9 .1 0 | Funciones globales de JavaScript.
la s funciones globales en b figura 9.10 son parte del o b jeto G lobal de JavaScript. El objeto G lobal contiene
» d a s b s variables globales en b secuencia de com andos, todas b s funciones definidas por el usuario en b secuencb
de com andos y todas b s funciones listadas en la figura 9.10. C om o las funciones globales y b s definidas por el
usuario son parte del objeto G lobal, algunos program adores de JavaScript se refieren a ellas com o métodos. Usted
no necesita usar el objeto G lobal de manera indirecta; JavaScript hace referencia a él por usted. Para obtener infor­
mación sobre b s otras funciones globales de JavaScript, vea b sección 15-1.2 de b Especificación de ECM AScript:
w w t . e c m a - i n t e r n a t i o n a l . o r g / p u b l i c a t i o n s / f i l e s / E C M A - S T / E c m a - 2 6 2 .p d f
9.9
Recursividad
Los program as q u e hem os visto hasta ahora están estructurados d e m anera general com o funciones que se
llaman en tre sí d e una m anera disciplinada y jerárquica. U na fu n c ió n recu rsiv a se llam a a si misma, ya sea
de m anera directa o indirecta por m edio de otra función. La re c u rsiv id a d es un tem a im p o rtan te de ciencias
com putacionales. En esta sección presentarem os un ejem plo sim ple de recursividad.
C onsiderarem os prim ero la recursividad en form a conceptual; luego exam inarem os varios program as
que contienen funciones recursivas. Las m etodologías de solución de problem as recursivos tienen varios
elem entos en com ún. Se hace b llam ada a una función recursiva para resolver u n problem a. La fu n ció n en
310
Capitulo 9
JavaScript: funciones
realidad sólo sabe cóm o resolver el caso(s) más sim ple, o caso (s) base. Si se llam a a la función con u n caso
base, ésta devuelve u n resultado. Si se llam a a la fu n ció n con u n problem a m ás com plejo, lo d iv id e en dos
piezas conceptuales: u n a pieza q u e la fu n ció n sabe cóm o procesar (el caso base) y u n a pieza q u e n o sabe
cóm o procesar. Para q u e la recursividad sea viable, esta últim a pieza debe asem ejarse al problem a original
pero a la vez debe ser una versión m ás sim ple o pequeña de éste. C o m o este nuevo problem a se parece al
problem a original, la función invoca (llam a) a u n a copia fresca de si misma para q u e trab aje con el problem a
más pequeño; a esta invocación se le conoce com o lla m a d a re c u rs iv a o el p aso d e re c u rs iv id a d . Este paso
tam bién incluye p o r lo general la palabra clave r e t u r n , ya q u e su resultado se com binará con la parte del
problem a q u e la función sabía cóm o resolver para form ar u n resultado q u e se regresará a la fu n ció n que
hizo la llam ada original.
El paso de recursividad se ejecuta m ientras que la llamada original a la función sigue abierta (es decir, no
ha term inado de ejecutarse). El paso de recursividad puede pro d u cir m uchas llamadas recursivas más. ya que
la función divide cada nuevo subproblcm a en dos piezas conceptuales. Para que la recursividad term ine en un
m om ento dado, cada vez que la función se llama a sí m ism a con una versión m ás simple del problem a original,
¡a secuencia de problemas cada vez ttuls pequeños debe converger en el caso base. En ese p u n to la función reconoce
el caso bise, devuelve un resultado a la copia anterior de la función y se produce una secuencia de instrucciones
r e tu r n hasta que la llamada a La función original devuelve en un m om ento dado el resultado final a La función
que hizo la llamada. E ste proceso suena exótico si se le com para con la solución convencional de problem as que
hem os usado hasta este punto.
C om o ejem plo de estos conceptos en funcionam iento, escribirem os un program a recursivo para realizar
un popular cálculo m atem ático. El factorial de un entero n no negativo, que se escribe com o ti. (y se pronuncia
com o “factorial d e « ”), es el producto d e
» • ( » - 1) • ( » - 2) •
• 1
en donde 1! es igual a 1 y 0! se define com o 1. Por ejem plo. 5! es el producto de 5 • 4 • 3 • 2 • 1, que es igual a 120.
El factorial de un entero (numero en el siguiente ejem plo) m ayor o igual a cero puede calcularse de manera
iterativ a (no recursiva) m ediante una instrucción f o r , com o se indica a continuación:
var f a c t o r i a l - 1;
for
(
var
c o n ta d o r
-
numero;
c o n ta d o r
>•
1;
- - c o n ta d o r
)
f a c t o r i a l *= c o n ta d o r;
Para llegar a una definición recursiva de la función factorial debem os tener en cuenta b siguiente relación:
» !■ » •(« -
1)\
l\>r ejem plo, no hay duda de que 5¡ es igual a 5 * 4!, com o se m uestra en las siguientes ecuaciones:
5! = 5 • 4 • 3 • 2 • 1
5 =5 ( 4 - 3 - 2 - 1)
5 - 5 • (4!)
La evaluación d e 5! procedería com o se m uestra en b figura 9.11. La figura 9.11 (a) m uestra cóm o procede
la sucesión de llamadas recursivas hasta que 1! se evalúa com o 1, con lo cual term in a b recursividad. La figura
9.1 l(b ) m uestra los valores devueltos de cada Ibm ada rccursiva a b función q u e hizo b Ibm ada hasta q u e se
calcula y devuelve el valor final.
9.9
Recursividad
311
Valor firy! = 120
51
51
i
|
5 • 41
I
5 * 41
A
1
i
4 • 31
I
5! = 5 * 24 =se devuelve 120
4! ■ 4 * 6 ■ se devuelve 24
4 * 31
A
|
\
3 * 21
1
31 = 3 * 2 = se devuelve 6
3 * 2!
í
A
2*1!
1
2 * 11
2! =2 * 1 =se devuelve 2
i
A
1
1
a) Secuencia de llamadas recursivas.
se devuelve 1
b) Vak«sdev« tos de cada ltomada mcursM.
Figura 9 . 1 1 | Evaluación recursiva de 5!.
La figura 9.12 usa b recursividad para calcular e im prim ir b s factoriales de b s enteros 0 a 10. La fu n d ó n
recursiva f a c t o r i a l evalúa prim ero (línea 27) si una condición de term inación es true; es decir, si numero es
m enor o igual a 1. En caso de ser así, f a c t o r i a l devuelve 1, ya no es necesario usar más b recursividad y b
función regresa. Si numero es m ayor q u e 1, b línea 30 expresa el problem a com o el producto de numero y el v a b r
devuelto por una llam ada recursiva a f a c t o r i a l para evaluar el factorial de numero - 1. C abe m e n d o n a r que
f a c t o r i a l (numero - 1) es un problem a más simple que el cálcu b original d e f a c t o r i a l (numero).
1
<!DOCTYPE html>
< ! — Fig. 9.12: PruebaFactorial.htm l -->
<1- - Cálculo del f a c t o r i a l con una función re c u rs iv a . -->
<htn1>
<head>
<*eta c h a rset - " u tf-S ”»
<title>Función f a c t o r i a l r e c u r s i v a < / t i t l e >
< sty le type - "tex t/css">
p
{ margin: Opx; }
< /style>
<script>
var s a l i d a - **"; / / almacena l a s a lid a
/ / c a lc u la lo s f a c t o r i a l e s de 0 a 10
function c a l c u l a r F a c t o r i a l e s O
{
Figura 9 .1 2 | Cálculo del factorial con una función recursiva (parte I de 2).
312
Capítulo 9
18
19
JavaScript: funciones
for ( var 1 - 0; 1 <- 10; ++i )
"<p>" + 1 + Ml - " + f a c t o r l a l ( 1 ) + ,,</p>";
salida
20
21
22
23
24
25
document.getElementByldC "re su lta d o s" ).innerHTML = sa lid a ;
} / / f i n de l a función c a lc u la r F a c to r ia le s
/ / D efinición re c u rs iv a de l a función f a c t o r i a l
fun ctlo n f a c t o r i a l ( numero )
26
{
27
28
29
30
31
32
33
34
33
36
37
38
39
1 f ( numero <» 1 )
/ / caso base
r e t u m 1;
el se
re tu rn numero * f a c t o r i a l ( numero - 1 );
} / / f i n de l a función f a c to H a l
40
window.addEventListener( "load", c a l c u l a r F a c t o r i a l e s , f a l s e );
</scr1pt>
</head>
<body>
<hi>Factor1ales de 0 a 10</hl>
<d1v 1d = Hr e s u lta d o s " x / d 1 v >
</body>
</html>
.
Q
.
Q ^wnc»o« focto*i<l *ttunr>
C
f l B
*
j ) fii« y //x /e j*fn p io s /c ¿p ^ &
S*.O t iMOOt dc*
[3 Web %t« G a te r,
E
•
Factoriales de 0 a 10
0! = 1
11 « 1
2'-2
}!= «
4! * 24
51 = 120
6! = *20
? ! • 5040
8! = 40320
9! = 362S80
10’ = 3028800
Figura 9.12 j Cálculo del factorial con una función recursiva (parte 2 de 2).
La función f a c t o r i a l (líneas 25 a 31) recibe com o su argum ento el valor para el cuál se va a calcular el
factorial. C o m o podem os ver en la captura de pantalla de la figura 9.12, b s valores del factorial se vuelven
extensos rápidam ente.
Error com ún de programación 9.3
■ai aL I
Omitir el caso basey escribir el /taso de recursividad de manera incorrecta de modo que no converja en el caso
base son ambos errores que pueden provocar una recursividad infinita, agotando ¡a memoria en un momento
dado. Esta situación es similar alproblema de un ciclo infinito en una solución iterativa (no recursiva).
9.10
Comparación entre recursividad e iteración
313
T ip para prevenir errores 9.2
Internet Explorer muestra un mensaje de error cuando una secuencia de comandos parece entrar en recursividad
infinita. Firefiuc sólo termina la secuencia de comandos después de detectar el problema. Esto permite al usuario
de la página Web recuperarse de una secuencia de comandos que contiene un áclo infinito o recursividad infi­
nita.
9.10
Comparación entre recursividad e iteración
En la sección anterior estudiam os una función que puede im plem entarse con facilidad, ya sea en form a recur­
siva o iterativa. En esta sección com pararem os los dos enfoques y discutirem os por qué podría ser conveniente
elegir una m etodología en vez de la o tra en una situación específica.
Tanto b iteración com o b recursividad se utilizan en una instrucción de control: b iteración usa una ins­
trucción de repetición (por ejem plo, fo r, w h ile o d o . . .w h ile); b recursividad usa u n a instrucción de selección
(por ejem plo, i f , i f . . .e l s e o sw itch ).
Tanto b iteración com o b recursividad im plican repetición: b iteración utiliza de m anera explícita una
instrucción de repetición; b recursividad logra b repetición a través de llamadas a función repetidas.
La iteración y la recursividad im plican una prueba de term inación: b iteración term ina cuando falb b
condición de continuación de ciclo; b recursividad term ina cuando se reconoce un caso base.
La iteración se aproxim a en form a gradual a la term inación, ya sea m ediante b repetición controlada por
contador o m ediante la recursividad: b iteración sigue m odificando un contador hasta que éste asum e un valor
que hace que falle b condición de continuación de ciclo; b recursividad sigue produciendo versiones más sim ­
ples del problem a original hasta llegar al caso base.
Tanto b iteración com o b recursividad pueden ocurrir de m anera infinita: se produce u n ciclo infinito
con b iteración si b prueba de continuación de ciclo nunca se vueh'C falsa; se produce recursividad infinita si
d paso de recursividad no reduce el problem a cada vez m ediante una secuencia que converja en el caso base, o
a el caso base es incorrecto.
Un aspecto negativo d e la recursividad es que b s llamadas a funciones requieren cierta cantidad de tie m ­
po y espacio de m em oria que no se invierten directam ente para ejecutar instrucciones del programa. Esto se
conoce com o sobrecarga de llamada a Junción. Puesto que b recursividad usa llamadas repetidas a funciones,
esta sobrecarga afecta en gran m edida el rendim iento de la operación. E n m uchos casos, es más eficiente usar
instrucciones de repetición en vez de b recursividad. Sin embargo, algunos problem as pueden resolverse con
más elegancia (y facilidad) m ediante b recursividad.
Observación de ingeniería de softw are 9.4
Cualquier problema que pueda resolverse en forma recursiva también podrá resolverse en forma iterativa (sin
recursividad). Por lo general seprefiere una solución recursiva a una iterativa cuando la recursividad refleja con
más naturalidad elproblemay resulta en un programafácil de comprendery de depurar. Otra razón de seleccio­
nar una solución recursiva es que tal vez una solución iterativa no tea clara
T ip de rendimiento 9.1
Evite usar la recursividad en situaciones cruciales para el desempeño, ¡uts llamadas recurtivas requieren tiempo
y consumen memoria adicional
Además del ejem plo de b función del factorial (figura 9 .1 2 ), tam bién incluim os ejercicios de recursividad:
elevar un entero a una potencia entera (ejercicio 9 .2 9 ) y “¿Qué hace b siguiente función?" (ejercicio 9.30).
Ademas, la figura 15-25 usa b recursividad para recorrer un árbol de docum ento XML.
314
Capítulo 9
JavaScript funciones
Resumen
Sección 9.1 Introducción
•
La mejor forma de desarrollar y mantener un programa extenso es construirlo a partir de piezas pequeñas y simples,
o módulos (pág. 279). Esta técnica se conoce como “divide y vencerás* (pág. 279).
Sección 9.2 Módulos de programa n t JavaScript
•
•
•
•
•
•
•
Los programas en JavaScript se escriben mediante la combinación de nuevas funciones (pág. 279) que el programador
escribe, con funciones y objetos up reempaquetados" disponibles en JavaScript.
El término método (pág. 279) implica que la función pertenece a un objeto especifico. Nos referimos a las funciones que
pertenecen a un objeto de JavaScript específico como métodos; todas las demás se conocen como funciones.
JavaScript cuenta con varios objetos que tienen una extensa colección de métodos para realizar cálculos matemáticos
comunes, manipulaciones de cadenas, manipulaciones de fecha y hora, y manipulaciones de colecciones de datos co­
nocidas como arreglos. Estos objetos facilitan nuestro trabajo, ya que proporcionan muchas de las herramientas que los
programadores necesitan con frecuencia.
Podemos definir funciones que realicen tareas específicas y asarlas en muchos puntos en una secuencia de comandos.
Estas funciones se conocen como funciones definidas por d programador (pág. 279). Las instrucciones que definen a la
función se escriben sólo una vez y se ocultan de otras funciones.
Ibra invocar a las funciones (pág. 280) se escribe d nombre de la función, seguido de un paréntesis izquierdo, después
una lista separada por comas de cero o más argumentos, y luego un paréntesis derecho.
Los métodos se llaman de la misma forma que las funciones (pág. 280), sólo que requieren d nombre del objeto al que
pertenece d método y un punto antes del nombre del método.
Los argumentos de las funciones (pág. 280) pueden ser constantes, variables o expresiones.
Sección 9 3 Definiciones deJunciones
• La instrucción return pasa la información dd interior de una función de vudta al punto en d programa en donde se
llamó.
• liia función debe llamarse de manera explícita para que se ejecute el código en su cuerpo.
• El formato de la definición de una función es
function nombre defunción( ista de parámetros)
\
declaraciones e instrucciones
I
• Cada función debe realizar una sola tarca bien definida y d nombre de la función debe expresar esa tarca de manera
efectiva. Esto promueve ia rcutilización de software (pág. 285).
• Existen tres formas de devolver d control al punto en donde se invocó a una función. Si ia función no dcvudvc un resul­
tado, d control regresa cuando el programa llega a la llave derecha de terminación de la función o cuando se ejecuta la
instrucción retu rn ;. Si la función devuelve un resultado, la instrucción return expresión; devuelve d valor de expresión
al que hizo la Ibmada.
Sección 9 .4 Notas sobre ¡asJunciones definidas por el programador
• lodas las variables declaradas con b pabbra cbvc var en definiciones de funciones son variables locales (pág. 285); esto
significa que sólo pueden usarse en la función en b que están definidas.
• Los parámetros de una función (pág. 285) se consideran como variables locales. Cuando se hace la Ibmada a una fun­
ción, los argumentos en b ibmada se asignan a los parámetros correspondientes en b definición de b función.
• El código que se empaqueta como función puede ejecutarse desde varias ubicaciones en un programa mediante una
Ibmada a la función.
Resumen
313
Sección 9.5 Generación de números aleatorios
•
•
•
•
•
■
El método random genera un valor de pumo flotante desde 0.0 hasta 1.0. sin incluir este último.
JavaScript puede ejecutar acciones en respuesta a la interacción del usuario con un elemento en un formulario de
HTML5. Esto se conoce como manejo de eventos de GUI (pág. 290).
El mancjador de eventos cllck de un demento de HTML5 (pdg. 289) indica la acción a realizar cuando d usuario dd
documento de HTML5 haga clic en d demento.
En b programación controlada por eventos (pág. 290), d usuario inreracnia con un elemento, se notifica a la secuencia
de comandos del evento (pág. 290) y la secuencia de comandos procesa el evento, l a interacción dd usuario con la
GUI "controla" el programa. La función que se llama cuando ocurre un evento se conoce como función manejadora de
eventos o manejadorde eventos.
£1 método getElementByld (pág. 290), que recibe un Id como argumento, encuentra d demento de HTML5 con un
atributo Id que coincida y devuelve un objeto de JavaScript que representa esc elemento.
£1 factor de escala (pág. 2%) determina d tamaño dd rango. El valor de desplazamiento (pág. 2%) se agrega al resultado
para determinar en dónde comienza d tango.
Sección 9.6 Ejemplo:Juego de probabilidadintroducción a los elemetitos audio y v i deo de H TM L5
• Un elemento audio de HTML5 (pág. 301) incrusta audio en una página Web. Al establecer d atributo preload
(pág. 301) en “auto" indicamos al navegador que debe considerar descargar d clip de audio, de modo que esté listo
para reproducirse.
• No todos los navegadores soportan los mismos formatos de archivos de audio, pero la mayoría soportan los for­
matos MP3, O GG y/o WAV. Por esta razón, podemos usar elementos source (pág. 301) anidados en el elemento
audio para especificar las ubicaciones de un clip de audio en distintos formatos. Cada elemento source especifica
los atributos src y type. El atributo src especifica la ubicación del clip de audio. El atributo type especifica el tipo
MIME del clip.
• Cuando un navegador Web que soporta d elemento audio encuentra los elementos source, sdccciona el primer origen
de audio que represente uno de los formatos soportados por d navegador.
• Al interacruar con un elemento audio de JavaScript, podemos usar el método play (pág. 303) para reproducir el clip
una vez.
• La función global deJavaScript 1sFinite (pág. 304) devuelve true sólo si su argumento es un número válido en d rango
soportado por JavaScript.
• El demento video de HTM L5 (pág. 304) incrusta un video en una página Web.
•
El a trib u to C o n tro ls d d elem ento v id eo (pág. 305) indica q u e el reproductor d e video en d navegador debe m ostrar
controles q u e perm itan al usuario co n tro lar la reproducción d e video.
• Como con el audio, no todos los navegadores soportan los mismos formatos de archivos de video, pero la mayoría so­
portan los formatos MP4, O G G y/o WcbM. Por esta tazón es posible usar dememos source anidados en d demento
vi deo para especificar las ubicaciones de los formatos múltiples de un clip de video.
Sección 9 .7 Reglas de alcance
Cada identificador en un programa tiene un alcance (pág. 306). El alcance de un identificador para una variable o fun­
dón es la parte del programa en donde se puede hacer referencia al identificador.
• Las variables globales o variables a nivel de secuencia de comandos (es decir, las variables que se dedaran en el demento
head dd documento de HTML5, pág. 306) pueden usarse en cualquier parte de una secuencia de comandos y se dice
que tienen alcance global (pág. 306). Así. cada función en la secuencia de comandos tiene la posibilidad de usar las
variables.
• Los identificadores que se declaran dentro de una función tienen alcance defunción (o local) (pág. 306) y pueden usarse
sólo en esa función. El alcance de una función comienza con la Ibvc izquierda de apertura ({) de la función en b que
•
316
Capítulo 9
JavaScript funciones
se declara d idcntificador y termina en b lbvc derecha de terminación (}) de b función. Las variables locales de una
función y los parámetros de una función tienen alcance de función.
• Si una variable local en una función tiene d mismo nombre que una variable global, b variable global se "oculta* d d
cuerpo de b función.
Sección 9.8 Funciones globales de JavaScript
9 JavaScript cuenta con varias funciones globales como parte de un objeto Global (pág. 309). Este objeto contiene todas
•
bs variables globales en la secuencia de comandos, todas bs funciones definidas por el usuario en b secuencia de coman­
dos y todas bs funciones globales integradas que se listan en b figura 9-10.
No necesita usar el objeto Global de manera directa; JavaScript lo usa por usred.
Sección 9.9 Recursividad
• Ib a función recursiva (pág. 309) se Ibma a sí misma, ya sea de manera directa o indirecta a través de otra función.
• Ib a función «cursiva sabe cómo resolver sólo d caso más simple, o caso base. Si se hace una llamada a b función con
un caso base, dcvudvc un resultado. Si se hace una lbmada a b función con un problema más complejo, sabe cómo
dividir d problema en dos piezas conceptuales: una pieza que b función sepa cómo procesar (d caso base, pág. 310) y
una verdón más simple o pequeña dd problema original.
• La función invoca (llama) a una copia nueva de sí misma para naba jar sobre cl problema más pequeño; esta invocación
se conoce como lbmada recursiva o paso de recursividad (pág. 310).
• El paso de recursividad se ejecuta mientras la lbmada original a b función sigue abierta (es decir, no ha terminado de
ejecutarse).
• Rita que la recursividad termine en un momento dado, cada vez que la función se llama a sí misma con una versión
más simple del problema original, b secuencia de problemas cada vez más pequeños debe converger en d caso base. En
ese punto, b función reconoce d caso base, dcvudvc un resultado a b copia anterior de b función y se lleva a cabo una
secuencia de instrucciones retum hasta que b lbmada a b función original regresa d resultado final al que b lbmó.
Sección 9.10 Comparación entre recursitñdad e iteración
•
Tanto b iteración como b recursividad implican repetición: la iteración usa de manera explícita una instrucción de
repetición; b recursividad logra la repetición por medio de llamadas repetidas a la función.
9 Tanto b iteración como b recursividad implican una prueba de terminación: b iteración termina cuando falb b condi­
ción de continuación de ciclo; b recursividad termina cuando se reconoce un caso base.
• Ambos enfoques se aproximan en forma gradual a b terminación, ya sea mediante b repetición controbda por contador
o mediante b recursividad: b iteración sigue modificando un contador hasta que éste asume un valor que hace que falle
b condición de continuación de ciclo; b recursividad sigue produciendo versiones más simples dd problema original
hasta llegar al caso base.
Ejercicios de autoevaluación
9.1
9.2
Complete b s siguientes oraciones:
a) Los módulos de programa en JavaScript se llam an__________ .
b) Una función se invoca mediante el uso de u n (a )__________ .
c) Una variable que se conoce sólo dentro de b función en b que se define se Ib m a __________ .
d) La instrucción__________ en una función invocada puede usarse para pasar cl valor de una expresión de regreso
a b función que hizo b lbmada.
c) la palabra clave__________ indica cl comienzo de b definición de una función.
Piua d programa de b figura 9.13, indique d alcance (ya sea alcance global o defunción) década uno de los siguien­
tes elementos:
a) la variable x.
b) La varuble y.
Ejercicios de autoevaluación
3 17
c) La función cubo.
d) La función salida.
1
< IDOCTYPE h t»l>
2
3
< 1— E j e r c i c i o 9 . 2 : cubo.html -->
4
< htw l>
5
<head>
6
< M U c h a r s e t - ''uCf-8">
7
< t1fle> A lcance< /titl«>
<scr1pt>
v a r x;
•
9
10
II
ia
functlon s a l i d a ü
{
f o r ( x - 1; x < - 10; x++ )
d o c u m e n t. w r i te ln ( "<p>" ♦ cu b o ( x ) ♦ “ </p>M ) ;
13
14
15
14
}
IT
f u n c t l o n cu b o ( y )
l«
{
19
20
21
22
23
24
25
}
/ / f i n d e l a función s a l i d a
r e t u m y • y • y;
/ / f i n d e l a función cubo
w ind o w .a d d E v en tL isten er( “ l o a d " , s a l i d a , f a l s e ) ;
</script>
</head><body></body>
</h t* l >
Figura 9 .1 3 | Ejercicio de alcance.
9.3
9.4
9.5
Complete las siguientes oraciones:
a) Las funciones definidas por el programador, variables globales y funciones globales de JavaScript son todas partes
del objeto__________ .
b) La función__________ determina si su argumento es un número o no.
c) La fiinción__________ recibe un argumento de cadena y devuelve una cadena en la que rodos los espacios,
puntuación, caracteres de acentuación y cualquier otro carácter que no esté en d conjunto de caracteres ASCII se
codifican en un formato hexadecimal.
d) La función__________ recibe un argumento de cadena que representa d código de JavaScript a ejecutar.
e) La función
recibe una cadena como su argumento y devuelve una cadena en donde se dccodiñcan
todos los caracteres que se codificaron antes con escape.
Complete las siguientes oraciones:
a) E l ___________de un identificador es la parte dd programa en donde puede usarse.
b) Las tro formas de devolver d control de una función invocada al que la llamó so n __________ , ____________y
c) La función___________ se utiliza para producir números aleatorios.
d) Las variables declaradas en un bloque o en la lista de parámetros de una función son de alcance__________ .
Localice el error en cada uno de los siguientes segmentos de programa y explique cómo corregirlo:
a) aethod gO
{
document.writeln( "Dentro del método g" ) ;
}
318
Capítulo 9
JavaScript: funciones
b ) / / E sta fu n c ió n debe d e v o lv e r l a suma de su s argum entos
f u n c tlo n sum a(x, y)
{
v a r r e s u lta d o ;
r e s u lta d o - x ♦ y;
}
c) f u n c tl o n f ( a )
í
d o ci* n en t.w r1 teln ( a ) ;
)
9.6
Escriba un program a de JavaScript com pleto pan» pedir al usuario cJ radio de una esfera y luego llam e a la función
v o lu n e n E sfe ra para calcular y m o stra r el volum en de la esfera. Use la instrucción
volumen - ( 4 .0 / 3 .0 ) • M ath.PI * Math.powC r a d io , 3 >;
para calcular el volum en. El usuario d eb e in tro d u c ir el radio en d d e m e n to In p u t de HTM L del tip o "num ber" en
u n elem ento forr». Proporcione al elem ento In p u t d valor d e 1d "cam poE ntrada". Puede usar este 1d c o n d m étodo
getE lem entB yld d d objeto docunent pura o b te n e r d docum ento a usar en la secuencia de com andos. Para acceder
a la cadena en cam poEntrada, use su propiedad v a lu é c o m o e n cam poE ntrada.valué y luego convierta la cadena en
n ú m ero , u san d o p a rs e F lo a t. Use un elem ento In p u t d e tipo " b u tto n " en d d e m e n to form para que d usuario
pueda iniciar d cálculo. [Nota: en HTML5, los elem entos In p u t d e ripo "num ber" tienen una propiedad llam ada
valueA sN w iberque perm ite a u n a secuencia d e co m an d o s o b te n e r d n ú m e ro d e p u n to florante en el d e m e n to 1 np u t sin te n er q u e co n v ertid o d e u n a cad en a en un n ú m e ro , usando p a rs e F lo a t. Al m o m e n to d e escribir este libro,
valueAsNumber n o se so p o rta en todos los navegadores].
Respuestas a los ejercicios de autoevaluación
9.1
9.2
9.3
9.4
a)
a)
a)
a)
funciones, b) llam ada a función, c) variable local, d) r e tu r n . c) fu n c tlo n .
alcance global, b) alcance d e función, c) alcance global, d) alcance global.
G lo b al. b)1sN an. c) escape. d )e v a 1 . c) u«escape.
alcance, b) r e tu r n ; o r e tu r n ocpretiótr, o e n c o n tra r la llave derecha d e cierre d e u n a función, c) M ath. random.
9.5
d) local.
a) Error: method n o es la palabra clave q u e se utiliza para co m en zar la definición de u n a fu n ció n .
Corrección: cambiar nethod a functlon.
b ) E rror: se supone que b fu n ció n debe devolver un valor, pero n o es así.
C orrección: d im in a r b variable re s u l ta d o y colocar b instrucción
re tu r n x ♦ y;
9.6
1
en b fu n ció n o agregar b siguiente instrucción al final d d cuerpo d e b función:
re tu r n r e s u lta d o ;
c) Error: d p u n to y com a después d d paréntesis derecho q u e encierra b lista de patám etros.
C orrección: d im in e d p u n to y co m a después d d paréntesis derecho d e b lista d e parám etros.
La siguiente solución calcula el volum en de u n a esfera, usando d radio in tro d u cid o p o r d usuario.
<!D0CTYPE h ta l>
2
3
4
5
6
7
8
< 1 - - E j e r c i d o 9 .6 : vo1unen.html - - >
<ht«l>
<h*ad>
< a e ta c h a r s e t = " u tf - « " >
< t 1 t l e > C a ! c u l a r v o l4 u a c u te ; n e n e s de e s f e r a s < / t 1 t l « >
< s c r ip t >
Ejercicios
319
fu n c tio n In lc ia rO
9
10
11
12
13
t
v a r boton - docum ent.getElem entById( " b o to n C a lc u la r" ) ;
b o to n .a d d E v e n tL l s t e n e r ( " c l l c k " , nostrarV olum en. f a l s o ) ;
} / / f i n d e l a función I n i c i a r
14
15
f u n c t i o n mostrarVolumenO
14
IT
15
19
í
v a r campoEntrada - d o cun ent.getE lem entB y Id( "campo»adío" ) ;
v a r r a d i o ■ p a r s e F l o a t ( campoEntrada.valué ) ;
v a r r e s u l t a d o - docum ent.getElementById( " r e s u l t a d o " ) ;
resultado.innerHTML - "El volumen d e l a e s f e r a es: " 4 volum enEsfera( r a d i o ) ;
} / / f i n d e l a función mostrarVolumen
20
21
22
23
24
25
26
27
f u n c t i o n volum enEsferaf r a d i o )
{
r e t u m ( 4 . 0 / 3 . 0 ) * Math.PI * Math.pow( r a d i o . 3 ) ;
} / / f i n d e l a función voluraenEsfera
20
29
30
31
32
33
34
35
36
37
30
39
w indow .addE ventL istener( " lo a d " , i n i c i a r , f a l s e ) ;
</script>
</Head>
<body>
<fona a c t l o n - "» ">
< p x l a bel > Radi o :
<1nput id - "caapoAadio” ty p e - " n u e 6 e r " x / 1 a b e 1 >
<1nput i d - " b o to n C alcu lar" ty p e - "butto n" v a lu é - "Calcular"»</p>
</foru>
<p id - " re s u l ta d o " x /p >
</body>
< /h t« l»
Q Catculdtmg Sphere Vofurr - •
£ ) C aku latm g Sphere V dum
4-
C O
f f le y //C /i ☆
%
c O f¡iey//cy £ íg
Radjus 2 2
£
L
i
i
Sphae volume k 44 6022381005655
Ejercicios
9.7
9.8
Escríba una secuencia de comandos que use un formulario (forra) para obtener d radio de un círculo del usuario y des­
pués llame a la función areaCIrculo para calcular d área dd círculo y mostrar el resultado en un párrafo en la página.
Para obtener d número dd demento forra, use las técnicas que se muestran en d ejercicio de autoevaluación 9.6.
Un estacionamiento cobra una cuota mínima de $2 por estacionarse hasta tres horas. El estacionamiento cobra
$0.50 adicionales por cada hora o fr a c c ió n que excoda las tres horas. El caigo máximo por un periodo de 24 horas
es de $10.00. Suponga que no hay autos que se estacionen por más de 24 horas a la vez. Escriba una secuencia de
comandos que calcule y muestre los cargos de estacionamiento por cada clicnre que haya estacionado su auto en este
bte ayer. Debe usar un elemento forra para recibir dd usuario las horas que se estacionó cada cliente. El programa
debe mostrar d cargo para d cliente actual; además debecalcular y mostrar d total corriente de los recibos de ayer. El
programa debe usar la función calcularCargos para determinar d cargo para cada cliente. Para obtener d número
del demento forra, use las técnicas que se muestran en el ejercicio de autoevaluación 9.6.
320
9.9
Capítulo 9
JavaScript funciones
Escriba una función lbmada d is ta n c ia , que calcule b distancia entredós puntos (xl,yl) y (jc2,y2). Todos los nú­
meros y valores de retomo deben ser valores de punto Botante. Incorpore esta función en una secuencb de comandos
que permita al usuario introducir las coordenadas de los puntos mcdbntc un formubrio de HTM L5. Para obtener
los números del elemento fom , use bs técnicas que se muestran en el ejercicio de autoevaluación 9.6.
9.10 Responda a cada una de bs siguientes preguntas:
a) ¿Qué significa elegir números “al azar"?
b ) ¿Por q u é es útil b función Math. random para simular ¡uegos d e probabilidad?
c) ¿Por qué es a menudo necesario cscabr y/o dcspbzar los valores producidos por Math.randon?
d) ¿Por qué es la simubción com puta rizada de situaciones reales una técnica útil?
9 .1 1 Escriba instrucciones que asignen enteros aleatorios a b variable n en los siguientes rangos
a) 1 s n s 2
b) \ S n S l 0 0
c) Os. n * 9
d) 1000 s n s 1112
e ) —1
0
Sn S
1
-3 S n S l l
9.12 Para cada uno de los siguientes conjuntos de enteros, escriba una sob instrucción que imprima un número al azar
del conjunto:
a) 2 ,4 . 6. 8. 10.
b) 3 .5 .7 , 9.11.
c) 6 ,1 0 ,1 4 , 18,22.
9.13 Escriba una función lbmada potenciaEntera( base, exponente ) que devuelva d valor de basé-*""***
Por ejemplo, p o te n c ia E n te r a ( 3 t 4 ) - 3 # 3 * 3 * 3. Suponga que exponente y b a s e son enteros. La función
p o t e n c i a E n t e r a debería usar una instrucción f o r o w h ile para controlar el cálculo. Incorpore esta función en una
secuencb de comandos que lea valores enteros de un formubrio de HTML5 para b a s e y exponente, y que realice
el cálculo con b función p o te n c ia E n te r a . EJ formubrio de HTML5 deberá consistir de dos campos de texto y un
botón para iniciar d cálculo. EJ usuario debe interactuar con d programa, escribiendo números en ambos campos de
texto y luego haciendo clic en el botón.
9.14 Escriba una función llamada multl pío que determine para un par de enteros si d segundo es múltiplo dd primero. La
fundón debe recibir dos argumentos enteros y devolver true si d segundo es múltiplo del primero, y false en caso
contrario. Incorpore esta fundón en una secuencb de comandos que redba como entrada una serie de pares de enteros
(un par a b va). El formubrio de HTML5 debe consistir en dos campos de texto y un botón para inidar d cálculo. EJ
usuario debe interactuar con d programa escribiendo números en ambos textos y luego haciendo dic en d botón.
9.15 Escriba una secuencb de comandos que reciba enteros (uno a b vez) y los pase a b función e sP a r, que utiliza d
operador módulo para determinar si un entero es pan La función debe recibir un argumento entero y devolver true
si el entero es par, y fa l se en caso contrario. Use los dclos controbdos por centineb y un diálogo prom pt.
9.16 Escriba segmentos de programa que realicen cada una de bs siguientes tartas:
a) Calcule b parte entera dd cociente cuando el entero a se divide entre d entero b.
b) Calcule d residuo entero cuando d entero a se divide entre d entero b.
c ) Use b s piezas de programa q u e se desarrollaron en b s partes (a) y ( b ) para escribir u n a función l b m a d a m o s tr a r01 g1 t o s q u e reciba un entero entre 1 y 99999. para luego im primirlo c o m o u n a serie d e dígitos, de los cuales cada
par se separa m c d b n t e dos espacios. Pbr ejemplo, el entero 4562 debería imprimirse co m o
4
5
6
2
Ejercicios
321
d) Incorpore la función desarrollada en la porte (c) en una secuencia de comandos que recibo un encero de un diá­
logo prompt e invoque nostrarDigi tos para pasar a la función el entero introducido.
9.17 Imple mente las siguientes funciones:
a) La función Celsius devuelve el equivalente en Celsius de una temperatura en Fahrcnhcit, mediante d cálculo
C - 5 .0 / 9 .0 • ( F - 32 ) ;
b) La función fahrenheit devuelve d equivalente en Fahrenhdt de una temperatura en Celsius, mediante d cálculo
F - 9 . 0 / S.O • C ♦ 32;
c) Use estas funciones para escribir una sccucncb de comandos que permita al usuario introducir una temperatura
en Fahrenheit o Celsius y muestre el equivalente en Celsius o Fahrcnhcit.
Su documento de HTML5 debe contener dos botones: uno para iniciar la conversión de Fahrenheit a Celsius y otro pata
inidar la conversión de Celsius a Fahrenhdt.
9.18 Escriba una fundón llamada ninino3 quedevudvael menor de tres números de punto flotante. Usela función Math.
min p ía implcmcntar m1nimo3. Incorpore la función en una sccucncb de comandos que lea rres valores dd usuario
y determine d valor más pequeño.
9.19 Se dice que un entero es prim o si es mayor que 1 y se puede dividir sólo entre 1 y sí mismo. Pbr ejemplo, 2, 3, 5 y 7
son primos p r o 4, 6, 8 y 9 no.
a) Escriba una función que determine si un número es pimo.
b) Use esta fundón en una sccucncb de comandos que determine c imprima todos los números primos entre I y
10,000. ¿Cuántos de estos 10,000 números tiene que probar en realidad antes de asegurarse que haya encontrado
rudos los primos? Muestre los resultados en un elemento <textareas.
c) En un principio podríamos pensar que n ! 2 es d límite superior con d que debemos probar pra verá un número
es primo, pero sólo necesitamos llegar hasta la rafe cuadrada de n . ¿Por qué? Vudva a escribir el programa usando
el método Math. sqrt pra calcular la raíz cuadrada y ejecútelo de las dos formas. Estime la mejora en d rendi­
miento.
9.20 Escriba una función llamada puntosCalldad que reciba d promedio de un estudbntc y dcvudva 4 si d promedio
es de 90 a 100, 3 á es de 80 a 89, 2 si es de 70 a 79 , 1 si es de 60 a 69 y 0 á es menor a 60. Incorpore la función en
una sccucncb de comandos que lea un valor del usuario.
9.21 Escriba una sccucncb de comandos que simule d lanzamiento de monedas. Deje que d programa lance la moneda
cada vez quecl usuario haga clic en d botón Lanzar. Cuente d número de veces qucaprczca cada lado de b moneda.
Muestre los resultados. El programa deberá llamara una función seprada de nombre arrojar, que no reciba argu­
mentos y dcvudva false pra cruz y true pra cara. [N o ta : á d programa simula de manera realista d lanzamiento
de monedas, cada lado de la moneda deberá aprecer aproximadamente la mitad del tiempo).
9.22 Las computadoras desempeñan un p p d cada vez. mayor en la educación. Escriba un programa que ayude a un estu­
díame de primaria pra queaprenda a multiplicar. Use Math. random pra producir dos enteros positivos de un dígito.
Después deberá mostrar una pregunra tal como
¿Cuánto es 6 por 7?
A continuación, d estudbntc escribirá la respuesta en un campo de texto. Su programa deberá verificar la respuesta
del estudiante. Si es correcta, muestre la cadena -Muy bien" y genere una nueva pregunta. Si la respuesta es equi­
vocada. muestre la cadena " no . Intente de nuevo." y deje que d estudbntc intente la misma pregunta otra vez
en forma repetida, hasta que por fin b saque bien. Deberá usarse una función seprada pra generar cada pregunta
nueva. Esta función deberá Ibmarsc una vez cuando b sccucncb de comandos empiece su ejecución y cada vez. que
d usuario responda de manera correcta a la pregunra.
322
Capítulo 9
JavaScript funciones
9.23 £1 uso de las computadoras en la educación se conoce como ¡nstruactón asistida por computadora (CAI). Un pro­
blema que se desarrolla en los entornos CAI es la fatiga de los estudianres. Este problema puede eliminare si se varía
el diálogo de la computadora pata mantener la atención del estudiante. Modifique el programa del ejercicio 9.22
para que imprima una variedad de contenido para cada respuesta correcta y cada respuesta incorrecta. El conjunto
de respuestas correctas es el siguiente;
* j y b ie n .
E x c e le n te .
Buen t r a b a j o .
Siga a s i .
El conjunto de respuestas incorrectas es:
No. I n t e n t e de nuevo
Equivocado. T r a t e una vez más.
No se dé p o r vencido.
No. S iga i n t e n t a n d o .
Use la generación de números aleatorios para elegir un número dd 1 al 4 que se utilice para seleccionar una respuesta
apropiada a cada cuestión. Use una instrucción switch para emitir las respuestas.
9.24 Los sistemas mis sofisticados de instrucción asistida por computadora monitorran el rendimiento dd estudiante
durante cierto tiempo. La decisión de comenzar un nuevo tema se basa a menudo en el éxito del esrudiantc con los
temas anreriores. Modifique el programa del ejercicio 9.23 para contar d número de rcspucstascorrccrasc incorrectas
que escribió d estudiante. Una vez que d estudiante responda 10 preguntas, usted deberá calcular d porcentaje de
respuestas conectas. Si d porcentaje e s menor dd 75 por ciento, muestre Pida ayuda adicional a su instructor
y reinkie d cuestionario para que otro estudiante pueda intentarlo.
9.25 Escriba una secuencia de comandos que juegue a “adivinar d número' de la siguiente manera: su programa debe
elegir d número a adivinar, para lo cual se selecciona un entero aleatorio en el rango de 1 a 1000. La secuencia de
comandos muestra d indicador Adivine un número entre 1 y 1000 enseguida de un campo de texto. EJ jugador
escribe su primer intento en d campo de texto y hace clic en un botón para enviarlo a la secuencia de comandos. Si
el intento dd jugadores incorrecto, su programa deberá mostrar los mensajes Demasiado alto. Intente de nuevo,
o Demasi ado bajo. Intente de nuevo. para ayudar al jugador a “acercare" a la respuesta conecta y deberá borrar d
campo de texto para que el usuario pueda introducir el siguiente intento. Cuando el usuario introduzca la respuesta
correcta, muestre d mensaje Felicidades. (Adivinó el núneroI y borred campo de texto para que d usuario pue­
da jugar orra vez. (A'ota: b técnica de adivinación que se emplea en este problema es similar a una búsqueda binaria,
que veremos en d capítulo 10. JavaScript: arreglos].
9.26 Modifique el programa del ejercicio 9.25 para que cuente el número de intentos realizados por d jugador. Si el nú­
mero es 10 o menos, mucsric ¡Conoce el secreto o tuvo suertel Si el jugador adivina d número en 10 intentos,
muestre ¡Entonces s1 conoce el secreto! Si el jugador realiza más de 10 intentos, muestre ¡Deberla poder hacerlo
mejor! ¿for qué no debe tomar más de 10 intentos? Bueno, con cada intento correcto, el jugador debería ser capaz,
de diminar b mitad de los números. Ahora muestre por qué es posible adivinar cualquier número entre 1 y 1000 en
10 intentos o menos.
9.27
Los ejercicios 9.22 al 9.24 desarrollaron un programa de instrucción asistida por computadora para ense­
ñar a un estudiante de primaria a multiplicar. Este ejercicio sugiere mejoras a esc programa.
( P r o y e c to )
a) Modifique d programa para que permita al usuario introducir b capacidad de nivd de grado. Un nivd de grado
de 1 significa que usa dígitos de un solo número en los problemas, un nivel de grado de 2 significa que usa nú­
meros de hasta dos dígitos, y así en lo sucesivo.
b) Modifique el programa para permitir al usuario elegir d tipo de problemas aritméticos que desea estudiar. Una
opción de 1 significa sólo problemas de suma, 2 significa sólo problemas de testa, 3 significa sólo problemas de
multiplicación, 4 significa sólo problemas de división y 5 significa entremezclar al azar problemas de todos estos
tipos.
Ejercicios
323
9.28 M odifique d program a d e C raps de b figura 9.7 para p erm itir b s apuestas. Inicialiccla variable saldoB anco en 1000
dólares. Pida al jugador q u e introduzca una a p u e sta . Revise si la a p u e s ta es m e n o r o igual que saldoB anco y, si no
es asi, haga que el usuario vudva a in tro d u c ir la a p u e sta hasta q u e se introduzca u n a válida. D espués d e in tro d u cir
una a p u e s ta válida, ejecute un juegp d e Craps. Si d jugador gana, au m en te d saldoB anco con base en b a p u e sta ,
im prim a d nuevo saldoB anco. revise si saldoB anco es cero y, d e ser así, im prim a d m ensaje ¡Lo s ie n t o . E stá en
b a n c a r r o ta ! . A m ed id a q u e el juego progrese, im prim a varios m ensajes para crear conversación, c o m o ¿Asi que se
va a quedar en b a n c a rro ta ? , ¡ Vanos, a rrié s g u e s e ; o ¡E stá te n ie n d o é x i t o ! . ¡Ahora e s momento de cam biar
sus f ic h a s ¡ . Im plem ento la conversación c o m o u n a fu n ció n separada q u e seleccione al azar b cadena a m ostrar.
9.29 Escriba u n a fu n ció n recursiva Ib m a d a p o te n c ia l base, exponento ) que, c u a n d o se invoque, devudva
base* - * «
por ejemplo, potencian,4 )-3 *3* 3*3. Suponga que expórtente es un entero mayoro igual a 1. El paso de recursi­
vidad utilizaría b siguiente relación:
base'*-~u - base • b a s e '
y b co n d ició n d e term inación o cu rre c u a n d o apórtente es igual a 1, ya q u e
base' - base
Incorpore esta fu n ció n en u n a secuencia de co m an d o s q u e perm ita al usuario in rro d u cir la base y el apórtente.
9.30 ¿Q ué hace b siguiente función?
// El parámetro b debe ser entero
// positivo para evitar recursividad Infinita
function misterioC a. b )
{
13
return a;
if ( b -
e l se
return a ♦ m is te r1 o (a . b - 1 );
}
JavaScript
A sí es, desde ¡a tabla de mi
memoria, borraré todos tos
recuerdos triviales afectuosos.
— W iü U m S h a k r ip c a rr
E l elogio implica de nutriera
invariable una referencia a un
estándar superior.
—A rin ó td a
Con sollozos y Ligrimas sorteó
a ¡os de mayor tamafio...
—Lcwii CorioD
Intentar terminar, nunca
permanecer en la duda;
Nada es tan d ifícil como la
búsqueda de ¡o que será
descubierto.
— Robcrt Hrrrick
Objetivos
En este capítulo aprenderá a:
■ Declarar e inicializar arreglos
y referirse a los elementos
individuales de los arreglos.
■ Almacenar listas y tablas
de valores en arreglos.
■ Pasar arreglos a funciones.
■ Buscar y ordenar arreglos.
■ Declarar y manipular arreglos
multidimensionales.
Plan general
10.2
\
Arreglos
10.1
Introducción
10.6
Referencias y parámetros de referencia
10 .2
Arreglos
10.7
Paso de arreglos a funciones
10.3
Declaración y asignación de arreglos
10.8
10 .4
Ejemplos del uso de arreglos
Ordenamiento de arreglos mediante el
método s o r t de Array
10.9
Búsqueda en arreglos con el método
indexOf de Array
10.4.1 Citación, inicialización y aumento del
tamaño de arreglos
10.4.2 Inicialización de arreglos con listas inicializadoras
10.10
325
Arreglos multidimensionales
10.4.3 Suma de los elementos de un arreglo con
f o r y f o r . . .1n
10.4.4 Uso de los elementos de un aneglo como
contadores
10.5
Generador de imágenes al azar mediante el
uso de aneglos
Resumen | Ejercicios de autoevaluación \ Respuestas a los ejercicios de autoevaluación \ Ejercicios
10.1
Introducción
Los arreglos son estructuras de datos que consisten en elementos de datos relacionadas. Los arreglos de JavaScript son
entidades “dinámicas” en cuanto a que pueden cam b u r su tam año después de crearlos. Muchas de las técnicas que se
«¿muestran en este cap ítu b se usan con frecuencia en los capítulos 12 y 13. en las secciones en donde presentamos
las coleccbnes que le perm iten manipular en forma dinámica todos b s elementos de un docum ento de H TM L5-
10.2
Arreglos
Un arreglo es un grupo de ubicaciones de m em oria; todas tienen cl mismo nom bre y por b general son del mismo
tipo (aunque este atributo no es obligatorio en JavaScript). Para referirnos a una ubicación o elem ento en particular
en el arreg b . especificamos el nom bre del arreg b y el número de posición del elem ento específico en ese arreglo.
La figura 10.1 muestra un arreg b de vabres enteros llamado c. Este arreg b contiene 12 elementos. Podemos
referirnos a cualquiera de estos elementos si indicamos el nom bre del arregb seguido del número de posición de I ele­
mento entre corchetes ([ ] ). El prim er elemento en cada uno es cl elemento cero. Así, el prim er elemento del a n e g b c
se conoce com o c [0 ], el segundo como c [1 ], el séptim o com o c[6 ] y, en general, el r'-ésimo elemento se conoce
como c [i -1 ]. Los nombres de b s arregbs siguen las mismas co m e n c io n e que otros identificadores.
El núm ero de posición entre corchetes se llama índice y debe ser un entero o una expresión entera. Si un
program a usa una expresión com o índice, entonces ésta se evalúa para determ inar cl v a b r del índice. Por ejem ­
p b , si la variable a es igual a S y b es igual a 6, entonces la instrucción
c [a + b ] += 12;
sum a 2 al valor del elem ento c [11] del arreg b . Es posible usar un nom bre de arreg b indexado del lado izquier­
do de una asignación para colocar un nuevo v a b r en un elem ento del arregb. Tam bién puede usarse del lado
derecho de una asignación para asignar su valor a o tra variable.
Exam inem os el arreg b c en la figura 10.1 con más detalle. El nombre del arre g b es c. Su longitud es 12
y podem os obtenerla m ediante la propiedad length del arreg b . com o en:
c .le n g th
326
Capítulo 10
JavaScript; arreglos
i
El nombre dd Arreglo e sc
0]
-45
c[ 1 ]
6
2]
0
c[ 3 ]
72
Nomb'e de un elemento------- ♦ c t 4 ]
indviduil delarregx)
C[ 5 ]
1543
c[ 6 ]
0
C[ 7 ]
62
C[ 8 ]
-3
C[ 9 ]
1
C [ 10 ]
6453
c [ 11 ]
78
Número de posción del
elemento dentro del arrezo c
c[
c[
-89
Valor del elemento
c í a ] desarreglo
Figura 10.1 | Arreglo con 12 elementos.
Los 12 elementos del arreglo se denominan como c[0 ], c [ l] , c [ 2 ] ,.... c [11]. E l valor de c[0] es -45, el d c c [l]
es 6, el de c[2] es 0, el de c [7] es 62 y el valor d e c [ ll] es 78. La siguiente instrucción calcula la suma de los valores
contenidos en los primeros tres elementos del arreglo c y almacena el resultado en b variable suma:
suma ■ c[ 0 ] + c[ 1 ] ♦ c[ 2 ];
Los corchetes que encierran el índice de un arreglo son un operador de JavaScript. Los soportes tienen
el mismo nivel de precedencia que los paréntesis. La figura 10.2 muestra la precedencia y asociatividad de los
operadores introducidos hasta ahora en el texto. Se muestran de arriba hacia ahajo en orden decreciente de
Operadores
Asociatividad
Tipo
O [] -
izquierda a derecha
más alta
++ - - !
derecha a izquierda
unario
* / *
izquierda a derecha
multiplicativo
+ -
izquierda a derecha
aditivo
<<=>>=
izquierda a derecha
relacional
=
izquierda a derecha
igualdad
&&
izquierda a derecha
AND lógico
II
izquierda a derecha
O R lógico
7:
derecha a izquierda
condicional
derecha a izquierda
asignación
I-
Figura 10 .2 | Precedencia y asociatividad de los operadores vistos hasta ahora.
1
10.4
10.3
Ejemplos del uso de arreglos
327
Declaración y asignación de arreglos
Los arreglos ocupan espacio en memoria. En realidad, un arreglo en JavaScript es un o b jeto Array. Utilizamos el
o p erad o r new para crear un arreglo y especificar el núm ero de los elementos en el mismo. El operador new crea
un objeto a medida que se ejecuta la secuencia de com andos, obteniendo suficiente m e m o ra para alm acenar un
objeto del tipo especificado a la derecha de new. Para asignar 12 elementos para el arreglo entero c, use una expre­
sión new com o la siguiente:
v a r c - new A rray ( 12 ) ;
La instrucción anterior tam bién puede realizarse en dos pasos, com o se indica a continuación:
v a r c ; / / d e c la ra una v a r i a b le que va a c o n te n e r e l a r r e g lo
c = new ArrayC 12 ) ; / / a s ig n a e l a r r e g lo
C uando se crean los arreglos, los elem entos no se inicializan: tienen el valor u n d efin ed .
10.4
Ejemplos del uso de arreglos
En esta sección presentarem os varios ejemplos de cóm o crear y m anipular arreglos.
10.4.1
C reació n , in ic ia liza c ió n y aum ento del tam añ o de arreglos
Nuestro siguiente ejem plo (figuras 10.3 y 10.4) usa el operador new para asignar un arreglo de cinco elementos
y un arreglo vacío. La secuencia de com andos dem uestra la inicialización de un arreglo de elementos existentes y
tam bién m uestra que un arreglo puede crecer en form a dinám ica para alojar nuevos elem entos. Los valores del
arreglo se m uestran en tablas de H T M L 5-
D ocum ento de H T M L 5 pa ra m ostrar resultados
En la figura 10.3 encontram os el docum ento de H T M L 5 donde mostramos los resultados. Observará que colocamos
d código de estilos de CSS y JavaScript en archivos separados. La línea 9 vincula el archivo de CSS e s t i l o t a b l a .
c s s con este docum ento, com o se muestra en el capítulo 4 (no hay nuevos conceptos en el archivo CSS que usamos
en este capítulo, por lo que no lo mostraremos en el texto). La línea 10 demuestra cóm o vincular a este docum ento
una secuencia de com andos almacenada en un archivo separado. Para ello, use el a trib u to s r c del elemento s e r i p t
y especifique la ubicación del archivo de JavaScript (que se nombra con la extensión de no m b re de a rd iiv o . js ) . El
cuerpo (body) de este docum ento contiene dos elementos d iv en donde mostraremos el contenido de dos arreglos.
Cuando el docum ento termina de cargarse, se hace una llamada a la función 1ni c i a r de JavaScript (figura 10.4).
Observación de ingeniería de softw are 10.1
Se comidera buena práctica colocar sus secuencias de comandos de JavaScript en archivos separados, de modo
que puedan reutilitane en varias papuas Web.
1 <!DOCTYPE ht*il>
2
3
< !— F ig . 1 0 .3 : In ic A rre g lo .h tm l —>
4
< !- - P á g i n a Web p a r a m o s t r a r l o s r e s u l t a d o s de i n i c i a l i z a r a r r e g l o s . -->
5
< h tm l>
6
<head>
Figura 10 .3 | Página Web para mostrar los resultados de inicializar arreglos (parte I de 2).
328
Capítulo 10
JavaScript; arreglos
7
<*teta charset - "utf-8">
8
< t1 tle > In 1 c 1 a l1 z a r un a r re g l< x / t 1 tle >
f
10
11
< H n k reí - "stylesheet" type - "text/css” href - ,,est1lotabla.css,,>
<scr1pt src = "InlcArreglo.js"x/scr1pt>
</head>
<body>
<d1v 1d - " s a H d a l " x/ d 1 v >
<d1v Id = "sal 1da2"x/d1v>
</body>
12
13
14
13
16
</html>
/p
1-.RT®
im o jlc jr
C
S xio t
jc rt^c
___________
file///Xyejemplo^P ■';{ z=
»
r t r t SW e G*««ry
Arreglo n i:
M ic o
V alor
0
0
I
1
3
3
4
4
Arreglo n2:
laA ce
V alor
0
0
1
1
•
1
3
3
4
4
•
1
Figura 10.3 | Página W eb para mostrar los resultados de inicializar arreglos (parte 2 de 2).
Secuencia de comandos que crea, inicia liza y muestra el contenido de arreglos
La figura 10.4 presenta ia secuencia de com andos utilizada por el docum ento en la figura 10.3. La función
i n i c i a r (líneas 3 a 24) se invoca al m om ento en que ocurre el evento lo a d de window.
1
2
3
/ / F ig. 10.4: I n ic A r r e g lo .js
/ / C re a r dos a r r e g l o s , 1 n i c 1 a l 1 z a r sus elem entos y m o s tr a r lo s
function 1n1c1ar()
4
{
Figura 1 0 .4 | Crear dos arreglos, inicializar sus elementos y mostrarlos (parte Id e 2 ).
10.4
Ejemplos del uso de arreglos
3
6
7
v ar n i - new ArrayC 5 ) ; / / a s ig n a r un a r r e g lo decinco elementos
v ar n2 = new A r r a y C ) ; / / a s ig n a r el a r r e g lo vacio
8
9
/ / a s ig n a r v a lo re s a cada elemento del a r r e g lo ni
v ar lo n g itu d *» n l.le n g th ; / / obtener la lon gitu d del
10
11
fo r ( v ar i = 0 ; i < n l . l e n g t h ;
12
{
13
n l [ i ] « 1;
14
} / / f i n de f o r
329
a r r e g lo una vez antes del c ic lo
++i )
15
16
17
/ / c r e a r e i n i c i a l i z a r cinco elementos en el a r re g lo n2
fo r ( i - 0 ; i < 5; ++i )
l«
í
19
20
21
22
23
24
23
26
27
28
29
30
31
32
33
34
33
36
37
38
39
40
41
42
43
44
43
46
n 2 [ i ) - 1;
} / / f i n de fo r
imprimirArregloC "A rreg lo n l : ' \
imprimirArregloC "A rreg lo n 2 :" ,
} / / f i n de l a función i n i c i a r
n i, document.getElementById(
n2, d o c u m e n t . g e t E l e m e n t B y l d C
"salidal" )
"salida2" )
);
);
/ / imprime el encabezado seguido de una t a b l a de dos columnas
/ / que contienen los Indices y elementos de "elArreglo"
fu nctio n i m p r i m i r A r r e g l o C e n c a b e z a d o . e l A r r e g l o , s a l i d a )
{
var c o n t e n i d o = "<h2>" + e n c a b e z a d o + " < / H 2 > < t a b l e > " +
"<thead><th>Indice</th><th>V alor</th></theadxtbody>";
/ / imprime el Indice y el v a lo r de cada elemento del a r r e g lo
var l o n g i t u d = e l A r r e g l o . l e n g t h ; / / obtiene la longitud del a rreg lo una vez antes del c ic lo
fo r C v a r i » 0 ; i < l o n g i t u d ; ++i )
{
co ntenido +- "<tr><td>" ♦ i + " < / t d x t d > " + e lA r r e g lo f i ] ♦
"< /td x /tr> ";
) //
f i n de f o r
contenido +- " < / t b o d y x / t a b l e > " ;
s a l i d a . i n n e r H T M L = c o n t e n i d o ; / / coloca l a t a b l a en el elemento s a lid a
) / / f i n de l a función imprimirArreglo
window.addEventListenerC " lo a d " , i n i c i a r ,
false ) ;
Figura 1 0 .4 | Crear dos arreglos, ¡nicializar sus elementos y mostrarlos (parte 2 de 2).
La línea 5 crea el arreglo n i con cinco elem entos. La línea 6 crea el arreglo n2 com o u n arreglo vacio. Las
líneas 9 a 14 usan una instrucción f o r para inicializar los elem entos de n i en sus valores d e índice (0 a 4). C o n
los arreglos usamos el corneo basado en cero, de m odo que el ciclo pueda acceder a todos los elem entos del
arreglo. La línea 9 usa la expresión n i .le n g th para determ inar la longitud del arreglo. Los arreglos de JavaScript
pueden cam biar su tam año en form a dinám ica, por lo que es im portante o b ten er la longitud de un arreglo una
vez antes de un ciclo que procese ese arreglo, en caso de q u e la secuencia de com andos cam bie la longitud del
arreglo. En este ejem plo, la longitud del arreglo es 5, por lo que el ciclo seguirá ejecutándose m ientras el valor
de Li variable d e control i sea m enor que 5. Este proceso se conoce com o iterar a través de los elem entos del
330
Capítulo 10
JavaScript; arreglos
arreglo. Para un arreglo de cinco elem entos los valores de índice son 0 a 4, por lo que al usar el operador “m e­
nor que” (<) garantizam os que el ciclo no intentará acceder a un elem ento más allá del final del arreglo. Por lo
general se utiliza el conreo basado en cero para iterar a través de los arreglos.
Aum entar el tamaño de un arreglo en form a dittdmica
Las líneas 17 a 20 usan una instrucción f o r para agregar cinco elem entos al arreglo n2 e inicializan cada ele­
m ento con su valor de índice (0 a 4). El arreglo au m en ta su tam año en form a dinám ica para alojar o d a valor,
a m edida que se asigna a cada elem ento del arreglo.
Observación de ingeniería de software 10.2
ftvaScript reasigna automáticamente un arreglo cuando se asigna un palor a un demento que estáfuera de ¡os
limites d d arreglo. Las elementos entre d último elemento del arreglo origitudy d nuevo elemento son undeflned.
Las líneas 22 y 23 invocan a la función im prim i r A r re g lo (que se define en las líneas 28 a 44) para m os­
trar el contenido de cada arreglo en una tabla de H T M L 5 en el correspondiente elem ento d iv . La función
im prim i rAr re g lo recibe tres argum entos: una cadena q u e se va a im prim ir com o elem ento h2 an tes de la tabla
de H T M L 5 q u e m uestra el co n ten id o del arreglo, el arreglo a im prim ir y el elem ento d iv en el q u e se colocará
la tabla. Las líneas 36 a 40 usan una instrucción f o r para definir cada fila de la tabla.
Tip para prevenir errores 10.1
Al acceder a los elementos de un arreglo, ¡os valores de Índice nunca deben ser inferiores a Oy deben ser menores
id número de elementos en d arreglo (es decir, uno menos que el tamaño del arreglo), a menos que intente au­
mentar el tamaño delarreglo de manera explícita mediante ¡a asignación de un valor a un elemento no existente.
Uso de una Usta inicializadora
Si b s v abres de b s elem entos de u n a rre g b se conocen de antem ano, pueden asignarse e inicializarse en la
declaración del arregb. Existen dos form as en b s que pueden especificarse b s vabres iniciales. La instrucción
var n - [ 10, 20, 30, 40, 50 ] ;
usa una lista in icia lizad o ra separada por comas y encerrada entre corchetes ([ y ]) para crear un arre g b de
cinco elem entos con b s índices 0, 1, 2, 3 y 4. El tam año del arreg b se determ ina m ediante el núm ero de valo­
res en la lista inicializadora. La declaración anterior no requiere q u e el operador new cree el objeto A rray: esta
funcionalidad la proporciona el intérprete de JavaScript al encontrar la d ccb ració n d e un a rre g b que incluya
una lista inicializadora. La instrucción
var n - new A rray ( 10, 20, 30, 4 0 , 50 ) ;
crea tam bién u n a rre g b de cinco elem entos con b s índices 0, 1, 2, 3 y 4. En « t e caso, b s v ab res ¡niciaks de b s
elem entos del arreg b se «pecifican com o argum entos en b s p a ré n t« is que siguen de new A rray. El tam año del
a rre g b se determ ina m ediante el núm ero de vabres entre paréntesis. Tam bién « posible reservar un « p a c ió en
un a rre g b para «pccificar un v a b r más tarde, m ediante el uso de una com a com o m arcad o r d e p o sició n en la
lista inicializadora. Por e je m p b , la instrucción
v a r n ■ [ 10, 20,
, 40, 50 ];
crea un arreg b de cinco elem entos en donde el tercer elem ento
(n
[ 2 3 ) tiene el v a b r
u n d e fin e d
10.4
Ejemplos del uso de arreglos
331
10.4.2 Inicialización de arreglos con listas inicializadoras
£1 ejem plo en las figuras 10.5 y 10.6 crea tres objetos A rray para dem ostrar la inicialización de arreglos con
listas inicializadoras. La figura 10.5 es casi idéntica a la figura 10.3, sólo que proporciona tres elem entos d iv en
su elem ento body para m ostrar los arreglos de este ejem plo.
I
<! DOCTYPE ht«il>
< ! — Fig. 1 0 .5 : In1cA rreglo2.htm l — >
<1 — P á g i n a Web p a r a m o s t r a r l o s r e s u l t a d o s de i n i c i a l I z a r a r r e g l o s . - - >
<ht*l >
<head>
•aneta c h a rs e t * " u t f - 8 " >
< t 1 t l e > I n i c i a l i z a r un a r r e g l o < / t 1 t l e >
<11 nk reí - " s t y l e s h e e t " type - " t e x t / e s s ” h r e f - ,,e s t 1 l o t a b l a . c s s ,’>
< scr1pt src «* " I n 1 c A r r e g l o 2 . j s " x / s c r 1 p t >
</head>
<body>
<d1v 1d = " s a l1 d a l" x / d 1 v >
<d1v 1d « " s a l1 d a 2 " x /d 1 v >
<d1v 1d - " s a l1 d a 3 " x /d 1 v >
</body>
< /h t« l>
C
■y*
ie ///X ; A $ O T p lo v f*
T raducir
\* >
E
1
El a rre g lo colores contiene
V a fe *
0
o »
1
mxtcrt*
•
KXATÍk'
I3
DC^O
El a rre g lo c n tc ro sl contiene
1 lo.ftx
V a b r
0
*
t
4
•
6
3
8
F.l a rre g lo cnteros2 contiene
I
la d e t
V a fe »
0
*
1
tta X u P M
i
j
1
tffc V fv ttd
I
8
Figura 10.5 | ftigina Web para mostrar los resultados de inicializar arreglos.
Capítulo 10
332
JavaScript; arreglos
La función I n i c i a r en la figura 10.6 dem uestra las listas inicializadoras de arreglos (líneas 7 a 9) y m uestra
cada arreglo en una tabla de H T M L 5 , usando la m ism a función imprimi rArreglo que la figura 10.4. C abe
m encionar que, cuando se m uestra el arreglo ente ros 2 en la página W eb, los elem entos con los índices 1 y 2
(los elem entos segundo y tercero del arreglo) aparecen en la página W eb com o undefined. Éstos son los dos
elem entos para los cuales no sum inistram os valores en la línea 9.
1
2
3
/ / Fig. 10.6: I n ic A r re g lo 2 .js
/ / I n i c i a l i z a c i ó n de a r re g lo s con l i s t a s i n i c i a l i z a d o r a s .
fun ctlo n i n i c i a r O
4
{
/ / La l i s t a i n i c i a l i z a d o r a e s p e c if i c a el número de elementos y
/ / un v a lo r para cada elemento.
var colores = new ArrayC "cyan", "magenta" ." a m a rillo " , "negro" );
var e n t e r o s l « [ 2, 4 , 6, 8 ];
var enteros2 • [ 2 , , , 8 ];
3
6
7
8
9
10
11
12
13
14
13
16
17
18
19
20
im prim irArreglo( "El a r r e g l o
document.getElementByldC
imprim irA rreglo( "El a r r e g l o
document.getElementByldC
imprimirArregloC "El a r r e g l o
document.getElementByldC
} / / fin de la función i n i c i a r
c o lo re s con tiene", c o lo re s ,
" s a l i d a l " ) );
e n t e r o s l c o n tie n e" , e n t e r o s l ,
" s a lid a 2 " ) ) ;
e n te ro s2 c o n tie n e " , e n te ro s 2 ,
"salidaB" ) );
21
/ / imprimir el encabezado seguido de una t a b l a de doscolumnas
/ / que contiene Ín d ic es y elementos de "elArreglo"
fu nctio n imprimirArregloC encabezado, e lA rreg lo , s a l i d a )
22
{
23
24
23
26
27
v a r contenido - "<H2>" ♦ encabezado + "</H2><table>" ♦
"<thead><th>Index</th><th>Value</th></thead><tbody>";
/ / imprime e l In d ic e y el v a lo r de cada elemento del a rre g lo
var longitud - elArreglo.length; / / obtiene l a longitud del arreglo una vez después del c ic lo
28
29
30
31
32
33
34
33
36
37
38
39
f o r C v a r i « 0 ; i < longitud; ++i )
{
contenido += "<tr><td>" + i + "</td><td>" + e lA rre g lo [ i ] +
"</td></tr>";
} / / fin de for
contenido ♦« "</tbody></table>";
salida.innerHTML = contenido; / / colocar la ta b la en el elemento s a lid a
) / / fin de l a función imprimirArreglo
window.addEventListenerC "load", i n i c i a r , f a l s e );
Figura 10.6 | Inicíalización de arreglos con listas inicializadoras.
10.4.3 Sum a de los elem entos de un arreglo con f o r y f o r . . . i n
El ejem plo en las figuras 10.7 y 10.8 sum a los elem entos de un arreglo y m uestra los resultados. EJ docum ento
de la figura 10.7 m uestra los resultados de la secuencia de com andos en la figura 10.8.
10.4
1
Ejemplos del uso de arreglos
333
<! DOCTYPE ht«ll>
2
3 < 1 -- Fig. 10.7: SumaArreg1o.html —>
4 < ! — Documento de HTML5 que muestra la suma de los elementos de un a r r e g l o . -->
3 <httíl>
6
<head>
<neta c h a r s e t - "utf-8**>
7
8
<title>Suma de lo s elementos de un a r r e g lo < / t1 tle >
9
< s c r ip t s r c = "SumaArreglo. j s " x / s c r i p t >
10
</head>
11
<body>
12
<d1v
13
14
</body>
</html>
Id - ” sal1da"x/d1v>
Figura 10.7 | Documento de HTML5 que muestra la suma de los elementos de un arreglo.
La secuencia d e com andos en b figura 10.8 sum a los valores contenidos en e l A rre g lo , el arreglo entero de
10 elem entos que se declara, asigna e inicializa en b línea 5. La instrucción en la línea 14 y en el cuerpo d e b
prim era instrucción f o r calcula el toral.
1 / / Fig. 10.8: SumaArreglo.js
2 / / Suma de lo s elementos de un a r r e g lo con fo r y f o r . . . i n
3 function 1 n 1 c 1 a r()
4 {
5
var elA rreglo = [ 1 , 2 , 3, 4, S, 6, 7, 8 , 9 , 10 ];
6
var t o t a l 1 = 0, t o t a l 2 - 0;
7
8
/ / i t e r a a tr a v é s de lo s elementos del a r r e g l o en orden y suma
9
/ / e l v a lo r de cada elemento a t o t a l l
10
var longitud = elArreglo.length; / / obtener la longitud del a rreg lo una vez antes del c ic lo
11
12
«3
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
for ( var 1 = 0; 1 < elA rreglo. length; -m-1 )
{
t o t a l l += e lA r r e g lo [ 1 ];
} / / f i n de fo r
var resu ltad o s = "<p>Total usando &1acute;nd1ces: " + t o t a l l + "</p>";
/ / i t e r a a tra v é s de los elementos del a r r e g l o usando una in stru c c ió n
/ / f o r . . . 1 n para sumar el v a lo r de cada elemento a t o t a l 2
for ( var elemento in elA rreg lo )
{
t o t a l 2 +■ e lA rre g lo [ elemento ] ¡
} / / f i n de f o r
re su lta d o s += "<p>Total usando f o r . . . i n : " +to ta 1 2
+ "</p>";
document.getElementByldC " s a lid a " ).innerHTML - resultados;
} / / fin de l a función i n i c i a r
window.addEventListener( "load", i n i c i a r , f a ls e );
Figura 1 0 .8 | Suma de los elementos de un arreglo con fo r y f o r .. . in (parte I de 2).
334
Capítulo 10
JavaScript; arreglos
1a
Q;
Sum a
de los
■
i0
\ =
C D file / / / X ;/ f«
Q
Sitio» « j g e n d o i
□ Web Slice Galleiy
=
»
T otal usando mdices: 55
T otal usando for
in 55
Figura 10 . 8 | Suma de los elementos de un arreglo con f o r y f o r . . . 1 n (parte 2 de 2).
La instrucción de repetición f o r .
. .
in
E n este ejemplo introducim os la instrucción f o r . . . i n de JavaScript, la cual perm ite que una secuencia de
com andos realice una tarea para cada elem ento en un arreglo (o, com o veremos en los capítulos 12 y 13, para
cada elem ento en una colección). Las líneas 21 a 24 m uestran la sintaxis de una instrucción f o r . . . in. D entro
de los paréntesis declaramos la variable elemento que se utiliza para seleccionar cada elem ento en el objeto a
la derecha d e La palabra clave in (elA rreglo en este caso). C uando usamos f o r . . . in, JavaScript determ ina de
m anera autom ática el núm ero de elem entos en el arreglo. A m edida que el intérprete de JavaScript itera sobre
los elem entos d e elArreglo, a la variable elemento se le asigna un v a b r que puede usarse com o índice para
elA rreglo. En el caso de un arreg b , el v a b r asignado es u n índice en el rango de 0 hasta el A rreglo, length,
sin incluir este últim o vabr. C ada v a b r se sum a a t o t a l 2 para pro d u cir la sum a de b s elem entos en el arreg b .
Tip para prevenir errores 10.2
Al iterar a través de todos los elementos de un arreglo, use una instrucción fo r ...in para asegurarse de ma­
nipular sólo los elementos existentes. La instrucción fo r . . . In omite los elementos indefinidos en el arreglo.
10.4*4 U so de los elem en to s de un arreglo com o contadores
E n la sección 9 .5 .3 indicam os que existe una m anera m ás elegante de im plcm entar el e je m p b de tiro de dados
que presentam os en esa sección. El eje m p b perm itía al usuario tirar 12 dados al m ism o tiem po y m antener las
estadísticas del núm ero de veces junto con el porcentaje del tiem po que se tiraba cada una de las caras. E n las fi­
guras 10.9 y 10.10 se m uestra una versión de este e je m p b con un arregb. D ividim os el e je m p b en tres archivos:
e s t i l o . c s s contiene b s e stib s (no se m uestra aquí). Ti rarO ad o s.h tm l (figura 10.9) con tien e el docum ento de
H T M L 5 y Ti rarO ados. j s (figura 10.10) contiene el código de JavaScript.
1
<IDOCTYPE ht«l>
2
3
4
<!— Fig. 10.9: TirarDados.html —>
<!— Documento de HTML5 para el ejemplo de t i r o de dados. -->
3
6
<html>
<head>
<meta charset - "u tf-8 ">
7
8
»
< title> F re c u e n cias de t i r o de d a d o < /title >
<link reí - " s ty le s h e e t" type - " te x t/ e s s " href - " e s t i l o . c s s " >
Figura 1 0 .9 | Documento de HTML5 para el ejempb de tiro de dados (parte I de 2).
10.4
20
21
22
23
24
23
26
27
28
29
30
Ejemplos del uso de arreglos
335
< scr1pt src - "Tirar-Dados. j s " x / s c r i p t >
</head>
<body>
<p><1mg 1d = "dadol" s r c = "blanco.png" a l t = "imagen dado 1">
<1mg 1d - "dado2" s r c = "blanco.png" a l t ­ "Imagen dado 2">
<img 1d = "dado3" s r c = "blanco.png" a n = "Imagen dado 3">
<1mg 1d = "dado4" s r c = "blanco.png" a l t - "Imagen dado 4">
<1mg id - "dadoS" s r c - "blanco.png" a l t - "Imagen dado 5">
<1nq 1d - "dado6" s r c - "blanco.png" a l t - "Imagen dado 6"></p>
<p><1n0 1d - "dado7" s r c • "blanco.png" a l t ­ "Imagen dado 7">
<1*10 1d - "dado8" s r c a "blanco.png" a n « "Imagen dado 8">
<1«i0 id - ”dado9" s r c = "blanco.png" a l t « "Imagen dado 9">
<1«>0 1d = "dadolO1' src = "blanco.png' " a l t => "Imagen dado 10">
<1«!0 id - " d a d o ir " s r c - "blanco.png' • a l t - . "Imagen dado 11">
<1r0 1d - "dado 12' ’ src - "blanco.png' * a l t - . "Imagen dado 12"></|
<form a c tlo n • “#">
<Input 1d - "botonTIrar" type - "button" valué - " T ira r dados"»
< /fo rr>
<d1v 1d
</body>
</html>
ti
d1 vTabl aFrecuencI a s " x / d 1 v >
l_3 N M K Í M (Je
C
(J )
sug«f>doi
d* d9
\
S
I m um
r.iey//xy«j«mp*oVcípl0/»igl0.09-^i
|W e f c S k e GtMcry Q
5
I m p o ^ d o d e Intcm .
Fvrcun>:ut de tío de dado
C ir a FrK iM K Ú P o fffitjjp
1
149
16 34
I
::i
14 50
1
249
16 34
1
251
1647
i
280
1837
1
274
P 98
Figura 1 0 .9 | Documento de HTML5 para el ejemplo de tiro de dados (parte 2 de 2).
En la figura 10.10, las lincas 3 a 5 declaran Ixs variables globales de la secuencia de com andos. El arreglo
fre c u e n c ia (línea 3) contiene siete elem entos que representan b s contadores que utilizam os en esta secuencia
de com andos. Ignoram os el elem ento 0 del arreg b y usamos s ó b b s elem entos que corresponden a b s v ab res
en b s lados de un dado (b s elem entos con b s índices 1 a 6). La variable t o t a l Dados rastrea el núm ero total de
Capítulo 10
336
JavaScript; arreglos
dados que se tiraron. El arreglo imagenesDado contiene 12 elem entos q u e hacen referencia a los 12 elem entos
img en el docum ento de H T M L (figura 10.9).
1 / / Fig. 10.10: T1rarD ados.js
2 / / Resumen de l a s frecuencias de t i r o de dado con un a rre g lo en vez de una in stru c c ió n switch
3 var fre c u e n c ia « [ , 0, 0, 0 , 0 , 0 . 0 ] ¡ / / fre c u e n c ia [0 ] sin i n i c i a l i z a r
4 var totalDados - 0;
3 var imagenesDado = new A rra y (1 2): / / a rre g lo para almacenar elementos img
6
7
•
9
10
11
12
/ / obtener elementos img de dado
function i n l c l a r O
{
v a r boton = document.getElementByldf "botonTirar" );
b o to n .a d d E v e n tH ste n e r( " c lic k " , tira rO ad o s, f a l s e );
var longitud - imagenesDado.length; / / obtener longitud del a rreg lo una vez antes del c ic lo
13
14
f o r ( var i = 0 ; i < longitud; ++i )
13
{
16imagenesDado[ 1 ] ■ document.getElementById( "dado" + (1 + 1) );
•7
} / / f i n de f o r
18 } / / f i n de l a función i n i c i a r
19
20
21
/ / t i r a r los dados
fu nction tira rD ad o sO
22
{
23
24
23
26
27
2B
29
30
31
32
33
34
33
36
37
38
39
40
41
42
43
44
43
46
47
48
49
v a r cara; / / c a ra que se t i r ó
v a r long itud - imagenesDado.length;
f o r ( v a r 1 - 0; 1 < longitud; ++i )
{
cara = M a th .flo o r( 1 + Math.randomO * 6 );
calcularT irosC cara ); II incrementar un contador defrecuencia
e sta b lecerlm ag en ( 1, cara ); / / m ostrar imagen de dado apropiada
++totalDados; / / incrementar t o t a l
} / / f i n de fo r
a c tu aliz a rT a b laF re c u en c iasQ ;
) / / f i n de l a función tirarOados
/ / incrementar contador de fre cu en cia apropiado
fu nction calcularT irosC cara )
{
++frecuencia[ c a ra ]; / / increm entar contador apropiado
} / / fin de l a función c a lcu la rT iro s
/ / e s ta b le c e r e l origen de l a imagen para un
fun ction estab lecerlm agen ( numeroDado, cara
{
imagenesDado[ numeroDado ] .se tA ttrib u te C
1magenesDado[ numeroDado ] .se tA ttrib u te C
"dado con " + c a ra ♦ " p u n to (s )" );
} / / fin de l a función establecerlmagen
Figura
1 0 .1 0
dado
)
" s rc " , "dado" + cara + ".png" );
"alt",
| fesumen de las frecuencias de tiro de dado con un arreglo en vez de una instrucción swi tch (parte I de 2).
10.5
50
51
52
33
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
Generador de imágenes al azar mediante el uso de arreglos
337
/ / a c t u a l i z a r l a ta b la de fre cu e n c ia s en la página
fu nctio n a c tu a liz a rT a b la F re c u e n c ia sO
{
var resu ltad o s = "<table><caption>Frecuencias de t i r o de dado</captioo>" +
"<thead><th>Cara</th><th>Frecuencia</th>" +
"<th>Porcentaje</th></thead> <tbody>";
var lon gitu d • fre c u e n c ia .le n g th ;
/ / c r e a r f i l a s de ta b la para frecuencias
for ( var i = 1; i < longitud; ++i )
{
re s u lta d o s +- " < trx td > l< /td > < td > " ♦ fr e c u e n c ia ! 1 ) ♦ "</td><td>" +
fo rm a to P o rc ie n to (fre c u e n c ia [ i ] / totalD ados) + " < / t d x / t r > " ;
} / / f i n de fo r
re su lta d o s += " < /tb o d y x /ta b le > " ;
document.getElementByldC "divTablaFrecuencias" ).innerHTML = resultados;
} / / f i n de la función ac tu aliz a rT a b laF re c u e n c ias
/ / formato de porcentaje
fu nctio n form atoPorciento( v a l o r )
{
v a lo r *« 100;
r e tu r n v a l o r . t o F i x e d ( 2 ) ;
} / / f i n de la función formatoPorciento
window.addEventListener( "load", i n i c i a r , f a ls e );
Figura 10.10 | tesumen de las frecuencias de tiro de dado con un arreglo en \ez de una instrucción sw itch (parte? de 2).
C uando el docum ento term ina de cargarse, la función i n i c i a r de la secuencia de com andos (líneas 8 a
18) se invoca para registrar el m anejador de eventos del b o tó n y o b ten er los elem entos img, para luego alm a­
cenarlos en el arreglo global imagenesDado y usarlos en el resto d e la secuencia de com andos. C ada vez que
d usuario hace d ic en el b otón T i r a r dados, se invoca la función t i rarD ados (líneas 21 a 35) para tirar 12
dados y actualizar b s resultados en la página.
La instrucción sw itc h en la figura 9 .6 se sustituye por la línea 40 en la función c a lc u la r T ir o s . Esta línea
usa el v a b r aleatorio d e c a ra (calculado en la línea 28) com o índice para el arreg b fre c u e n c i a, para determ inar
qué elem ento se va a increm entar durante cada iteración del cicb . Puesto que el cálculo del núm ero aleatorio en
b línea 28 produce núm eros del 1 al 6 ( b s v ab res para un dado de seis lados), el arreglo fre c u e n c ia debe tener
siete elem entos (vabres de índice de 0 a 6). Además, las líneas 60 a 64 de este program a generan las filas de b
tabla que se escribieron una línea a b vez en la figura 9.6. Podemos iterar por el a rre g b fre c u e n c ia para ayudar
a producir b salida, por lo que no tenem os que enum erar cada fila de b ta b b de H T M L 5 com o en b figura 9.6.
10.5
Generador de imágenes al azar mediante el uso de arreglos
En el c a p ítu b 9 cream os un generador de imágenes al azar en el que había que nom brar b s archivos de im á­
genes con b p a b b ra dado seguida de u n núm ero del 1 al 6 y de b extensión de archivo.png (com o d a d o l.
png). E n el siguiente e je m p b (figuras 10.11 y 10.12) crearemos un generador d e imágenes al azar m ás elegante
que no requiere que b s nom bres de archivos de imágenes contengan enteros en secuencia. Esta versión usa un
338
Capítulo 10
JavaScript; arreglos
arreglo llamado im ágenes para alm acenar los nom bres de los archivos de imágenes com o cadenas. C ad a vez que
hacemos clic en la imagen en el docum ento (figura 10.11), la secuencia de com andos genera un entero al azar y lo
utiliza com o índice para el arreglo i magenes. La secuencia de com andos acmaliza el atributo s re del elem ento img
con el nom bre del archivo de imagen en la posición seleccionada al azar en el arreglo imágenes. Además, actuali­
zamos el atributo a l t con una descripción apropiada de b imagen del arreglo d e s c ri pciones.
1
<!D0CTYPE html>
2
3
4
3
6
7
•
9
10
11
12
13
14
<1— Fig. 10.11: ImagenAleatoria.html —>
< ! - - Documento de HTML5 que muestra imágenes seleccionadas al a z a r. -->
<html>
<head>
<meta c h a r s e t ■ " u t f - 8 ”>
<title>Generador de imiaacute;genes al a z a r < / t i t l e >
< s c rip t src = "Im agenA leatoria.js"> < /script>
</head>
<body>
<img 1d = "imagen" src ■ "ECP.png" al t ® "Error común de progr
</body>
</html>
Generador de .m ujene; .
C
IA k * UM pr*áot
f*
*
tile .///X /e j« m p lo j/c a p lO /f*
ü
W
o
f
c
S
h
c
t
=
G
•
Gencr*l<y ó t « m alcríe i
C
S ifiC t t u g e n d : t
1ón">
*
tiley/7X/e>emploVcapl<Vf«
|v
■
Figura 10.11 | Documento de HTML5 que muestra imágenes seleccionadas al azar.
La secuencia de com andos (figura 10.12) decb ra el arreglo im ágenes en b línea 4 y lo inicializa con los
nom bres de siete archivos de imágenes: los archivos contienen nuestros iconos d e insectos que asociamos con
nuestros tips de program ación. Las líneas 5 a 8 crean un arreglo separado lb m ad o d e s c rip c io n e s , el cual con­
dene el texto a l t para b s imágenes correspondientes en el arreglo im ágenes. C uando el usuario hace clic en el
elem ento img en el docum ento, se invoca b función e le g i rlmagen (lincas 12 a 17) para elegir un in d i ce entero
aleatorio de 0 a 6 y m ostrar la im agen asociada. La línea 15 usa esc Ín d ic e para o b ten er un v a b r del arreg b
im ágenes, le agrega " .p n g " y luego establece el atrib u to s rc del elem ento img al nuevo nom bre de archivo de
imagen. D e m anera similar, la línea 16 usa el Ín d ic e para obtener el texto correspondiente del arre g b d e s c r i pc io n e s y asigna ese texto al atributo a l t del elem ento img.
1 / / Fig. 10.12: Im agenA leatoria2.js
2 / / Selección de imágenes a l a z a r usando a rre g lo s
3 v a r imglcono;
4 var imágenes - [ "ECP", ’TPE", "BPP", "GUI", "REND", "PORT", "OIS" ];
Figura 10.12 | Selección de imágenes al azar usando arreglos (parte l de ?).
10.6
3
6
7
8
Referencias y parámetros de referencia
339
v a r d e sc rip c io n e s » [ “Error com&uacutc;n de prograMc1Aoacute;n",
“T1p para p re v e n ir e r r o r e s " , "Buena práct1ca de programadAoacute;n " ,
"0bservaci4oacute;n de a p a r ie n c ia v is u a l " , "T1p de rendimiento", "T1p de p o r ta b ilid a d " ,
"0bservaci4oacute;n de 1ngen1er*1acute;a de software" ];
9
10
11
12
13
14
13
16
17
18
19
20
/ / e l e g i r una imagen al azar y su descripción correspondiente, después m odificar
/ / e l elemento img en el cuerpo del documento
fun ctio n e le g i rlmagenO
{
var Indice - M a th .flo o r( Math.random() • 7 );
im g lc o n o .s e tA ttrib u te ( " s r c " , imágenes[ Índice ] + ".png" ) ;
im glcono.setA ttributeC " a l t " , descripciones!! Índice ] );
> / / f i n de l a función elegírlm agen
/ / r e g i s t r a el manejador de eventos de c l i c de imglcono
fu nctio n i n i c i a r ( )
21
{
22
23
24
25
26
imglcono » document.getElementByldC "imagen" );
imglcono.addEventListener( " c lic k " , elegirlmagen, f a l s e ):
} / / fin de l a función I n i c i a r
window.addEventLlstener( "load", i n i c i a r , f a l s e );
Figura 10.12 | Selección de imágenes al azar usando arreglos (parte 2 de 2).
10.6
Referencias y parámetros de referencia
Dos form as de pasar argum entos a las funciones (o m étodos) en m uchos lenguajes de program ación son: paso
p o r valo r y paso p o r referencia. C uando se pasa u n argum ento a una función por valor, se crea u n a copia del
valor de ese argum ento y se pasa a la función que se llamó. En JavaScript, los núm eros, valores booleanos y
cadenas se pasan a las funciones por valor.
C on el paso por referencia, el que hace la llamada concede a la función que invocó el acceso a sus datos
y le perm ite q u e modifique b s datos, si así lo desea. Para llevar a cabo este procedim iento se pasa a la función
invocada la dirección en m e m o ria e n donde residen los datos. El paso por referencia es capaz de mejorar el
rendimiento, ya que puede elim inar b sobrecarga de tener que copiar grandes cantidades de datos, pero puede
debilitar la seguridad puesto que b función invocada puede acceder a b s datos del que hizo b lbm ada. En
JavaScript, todos b s objetos (y p o r ende, todos b s arregbs) se pasan a b s funciones por referencia.
T ip para prevenir errores 10.3
Con elpaso por valor, los cambios en la copia del valor recibido por ¡afunción imocada no surten efecto sobre
d valor de la variable original en lafunción que hizo ¡a llamada. Esto evita bs efectos secundarios accidentales
que entorpecen d desarrolb de sistemas de software correctosy confiables.
Observación de ingeniería de softw are 10.3
Cuando se devuelve información de unafunción por medio de una instrucción retum , bs números y vabres
booleanos se devuelven por vabr (es decir, se devuelve una copia) y bs objetos se devuelven por referencia (es
decir, se devuelve una referencia al objeto). Cuando un objeto se pasa por referencia, no es necesario devolver
ese objeto debido a que b Junción opera sobre el objeto original en b memoria.
Capítulo 10
340
JavaScript; arreglos
En realidad el nom bre de un arreglo es una referencia a un objeto que contiene los elementos del arreglo y la
variable 1 ength. Para pasar una referencia a un objeto hacia una función, sólo hay que especificar el nom bre de refe­
rencia en la llamada a la función. FJ nom bre de referencia es el identificador que el program a utiliza para manipular
d objeto. Al mencionar la referencia por el nom bre de su parám etro en cl cuerpo de la función invocada, en realidad
hacemos referencia al objeto original en m em oria y la función invocada accede a este objeto de manera directa.
10.7
Paso de arreglos a funciones
Para pasar un argum ento tip o arreglo a una función, hay que especificar cl nom bre del arreglo (una referencia a
éste) sin llaves. Por ejemplo, si cl arreglo tem p e ra tu rasP o rH o ra se declara com o
v a r temperaturasPorHora » new A rray( 24 ) ;
entonces la llamada a la función
rnodificarA rreglo( temperaturasPorHora );
pasa el arreg b temperaturasPorHora a la función modificarArreglo. C o m o indicam os en la sección 10.2,
todo objeto arreglo en JavaScript conoce su propio tam año (por m edio del atrib u to 1 ength). Asf, cuando pasa­
m os un objeto arreg b a una función, no pasamos el tam año del arreg b p o r separado com o un argum ento. La
figura 10.4 dem ostró este concepto.
Aunque b s arregbs enteros se pasan por referencia, b s elementos numMcos y booléanos indi viduales de un arre­
glóse pasan por valor, en form a idéntica a com o se pasan las variables numéricas y boolcanas simples. Dichas piezas
simples e individuales de datos se conocen com o escalares o can tid ad es e sc a la ra . Los objetos a b s que se hace
referencia m ediante elementas de arregbs individuales se siguen pasando por referencia Para pasar el elem ento de
un arreg b a una función, use cl nom bre indexado del elemento com o un argum ento en la llamada a la función.
Para q u e una función reciba un arreg b a través de b llamada, la lista d e parám etros de esa función debe
especificar u n parám etro que haga referencia al arreglo en el cuerpo de la función. JavaScript no cu en ta con una
sintaxis especial para este fin; sim plem ente requiere que se especifique cl identificador para cl arre g b en b lista
de parámetros. Por eje m p b , cl encabezado de función para modif ic a rA rre g lo podría escribirse así;
fun ctlon modificarArregloC b )
para indicar que modi f ic a r A r r e g lo espera recibir un parám etro llam ado b. Los arreg b s se pasan por referencia
y, por lo tanto, cuando la función invocada usa el no m b re de arreglo b, se refiere al a rre g b en sí en la función
que hizo b lb m ad a (cl arreg b tem p eratu rasP o rH o ra en b llamada anterior). La secuencia d e com andos en bs
figuras 10.13 y 10.14 dem uestra b diferencia entre pasar un arreg b com pleto y pasar el elem ento de un arregb.
El cuerpo (body) del docum ento de la figura 10.13 contiene b s elem entos p que utiliza b secuencia de com an­
dos en b figura 10.14 para m ostrar b s resultados.
1
<!DOCTYPE html>
2
3
4
3
<!— Fig. 10.13: PasoArreglo.html —>
<1-- Documento de HTML que demuestra e l paso de a r r e g lo s y -->
< ! - - elementos in d iv id u a le s de a r r e g lo s a funciones. -->
6
<html>
Figura 10.13 | Documento de HTML que demuestra el paso de arreglos y elementos individuales de arreglos
a funciones (parte I de 2).
10.7
7
8
9
10
II
12
13
14
15
16
17
18
19
20
21
22
Paso de arreglos a funciones
341
<head>
<meta c h a rs e t « "utf-8">
< title > A rre g lo s como argum entos</title>
< link r e í = " s ty le s h e e t" type = " te x t/ e s s " h r e f = " e s t i l o . c s s
< s c rip t src - " P a s o A r r e g lo .j s " x / s c r ip t >
</head>
<body>
<h2>Efectos de pasar un a r r e g lo completo por referencia</h2>
<p 1d = " a r r e g lo O r ig in a l" x / p >
<p id = "arregloModif1cado"></p>
<h2>Efectos de pasar e l elemento de un a rre g lo por valor</h2>
<p i d = "elementoOriginal"></p>
<p id = "enModi ficarE l e » e n to "x /p >
<p i d - "elementoModif1cado"x/p>
</body>
</htal>
r __________________
1%ArtqK'. cono argurw ■ >
C
!)
S*t4H (u ^srtd o t
>n - a I M
fi!e 7 //X /e j€ fn p lo s/c a p l0 /fig !0 .1 3 -1 4 /P a so A n é g lo i> im l
^ VY«b S t*« G*«#/y
O
=
V ^pcrtJdc & IrU m
Efectos de p a s a r un a r r e g lo com pleto p o r re fere n c ia
Ancgk> ottocud 1 2 3 4 5
Anrgk> mo<ü6c«do 2 4 6 8 10
Efectos de p a s a r el elem ento de un a r r e g l o p o r valor
a{3] artftt mod*fc«EkcDfnto S
Valor « modd:^rEVtn«tfo 16
a(3] despuei d- tikxkv-aElaagtio S
figura 10 . 13 |
fcgrr
Documento de HTML que demuestra el paso de arreglos y elementos individuales de arreglos
a funciones (parte 2 de 2).
Observación de ingeniería de softw are 10.4
JavaScript no verifica el número de argumentos o el tipo de argumentos que sepasan aúna Junción. Esposible
pasar cualquier cantidad de valores a unaJunción.
C uando se carga el docum ento de la figura 10.13. se invoca la función i n i c i a r (figura 10.14, líneas 3 a
20). I j is líneas 8 y 9 invocan a i irpr imi r A r r e g l o para m ostrar el contenido del arreglo a antes de que se m odifi­
que. La función i m p r i m i r A r r e g l o (líneas 2 3 a 26) recibe u n a cadena a m ostrar, el arreglo a m o stra r y el ele­
m ento en d o n d e va a colocar el contenido. La línea 2 5 usa el m étodo j o i n de A r r a y para crear una cadena que
contiene todos b s elem entos en e l A r r e g l o . El m étodo j o i n recibe com o argum ento u n a cadena que contiene
el se p arad o r que debe usarse para separar b s elem entos del arreg b en la cadena devuelta. Si no se especifica el
argum ento, se usa b cadena vacía com o separador.
La línea 10 invoca a m o d i f i c a r A r r e g l o (líneas 2 9 a 35 ) y le pasa el arre g b a. La función m ultiplica cada
elem ento por 2. Para ilustrar que se modificaron b s elem entos del arreg b a, las líneas 11 y 12 invocan a im­
p r i m í r A r r e g l o de nuevo para m ostrar el contenido del arreglo a después de m odificarb. C o m o se m uestra en
b captura d e p an talb de la figura 10.13. no cabe duda q u e modi f i c a r A r r e g l o modifica b s elem entos de a.
Capítulo 10
342
•
2
3
4
3
JavaScript; arreglos
/ / Fifl- 10.14: PasoA rreglo.js
/ / Paso de a r r e g lo s y elementos In d iv id u ale s de a r r e g lo s a funciones.
fun ctlo n 1 n 1 c 1 a r ()
{
var a = [ 1, 2 , 3, 4, S ]•
6
7
8
*
10
11
12
/ / pasar todo un a rreg lo
1mpr1m1rArregío( "Arreglo o r i g i n a l : ", a,
document.getElementByldC "arre g lo O rlg ln al" ) );
m odif1carA rreglo( a );
/ / el a r r e g lo a pasado por r e f e r e n c ia
imprimirArregloC "Arreglo modificado: ", a,
document.getElementByldC "arregloModlflcado" ) );
13
14
15
16
17
18
If
20
/ / pasar un elemento Individual del a rre g lo
document.getElementByldC "elementoOrlglnal" ).1nnerHTML =
" a [ 3 ] a n te s de «iod1 flcarElemento: " + a [ 3 ];
modif1carElemento( a [ 3 ] ); / / elemento del a r r e g l o a [ 3 ] pasado por v a lo r
document.getElementByldC "elenentoModlflcado" ).1nnerHTML =
" a [ 3 ] después de modificarElemento: " ♦ a [ 3 ];
} / / fin de la función 1 n 1 c 1 a r()
21
22
23
24
23
26
27
28
2f
30
31
32
33
34
33
36
37
38
/ / Imprime encabezado seguido del contenido de "elArreglo"
fun ctlo n ImprimírArregloC encabezado, e lA rreg lo , s a l i d a )
{
salida.innerHTML <* encabezado + e lA rreg lo .jo ln C " " );
> / / fin de l a función 1mpr1m1rArreglo
/ / función que modifica lo s elementos de un a r r e g lo
fun ctlo n modificarArregloC elA rreglo )
{
f o r C var j 1n elA rreglo )
{
el A rreg lo [ j ] * = 2 ;
} / / fin e fo r
} / / fin de l a función modificarArreglo
/ / función que modifica e l v a lo r que se pasó
fu nctlon modificarElementoC e )
39
{
40
41
42
43
44
43
e * - 2; / / e s c a l a e l elemento e só lo m ientras dure la función
document.getElementByldC "enModificarElemento" ) . InnerHTML =
"Valor en modlflcarElemento: " + e;
> / / fin de l a función modificarElemento
wlndow.addEventListenerC "load", i n i c i a r , f a l s e );
Figura 10.14 | Paso de anreglos y elementos individuales de arreglos a funciones.
Las líneas 15 y 16 m uestran el valor de a [3] an tes de la llam ada a modi f lc a r E l emento. La línea 17
invoca a m o d lflc arE le m e n to (líneas 38 a 43) y le pasan a [ 3 ] com o argum ento. R ecuerde q u e a [ 3 ] es en
realidad un valor entero en el arreglo y que ta n to los valores n um éricos com o los booleanos se pasan siem pre
a las funciones por valor. Por lo tan to , se pasa u n a copia de a [3 ). L a función m odif ic a rE le m e n to m ultiplica
su argum ento por 2, alm acena el resultado en su parám etro e y luego m uestra el valor d e e. Un parám etro
10.8
Ordenamiento de arreglos mediante el método sort de Array
343
es una variable local en una (unción, p o r lo que cuando ésta term ina, la variable local ya no es accesible.
Así, cu an d o se regresa el co n tro l a I n i c i a r , la instrucción en las líneas 18 y 19 m uestra el valor original sin
m odificar d e a [3 ].
10.8
Ordenamiento de arreglos mediante el método s o r t de A rra y
O rd e n a r datos (poner b s datos en cierto orden específico, com o ascendente o descendente) es una de las (un­
ciones de cóm puto más im portantes. El objeto Array en JavaScript tiene un m étodo s o r t integrado para o rd e­
nar arregbs. El e je m p b de las figuras 10.15 y 10.16 dem uestra el m étodo s o r t del objeto Array. Los v ab res sin
ordenar y ordenados se m uestran en b s elem entos de párrafo de la figura 10.15 (líneas 14 y 15).
I
<!DOCTYPE html>
<1— Flg. 10.15: 0rdenar.htm l —>
< ! — Documento de HTML5 que muestra lo s resu ltad o s de ordenar un a r r e g lo . -->
<html>
<head>
< *eta c h a rs e t = "utf-8">
<t1tle>El método s o r t de A rray< /t1tle>
<11nk re í - " s ty le s h e e t" type - " t e x t / e s s " h r e f - " e s t i l o . c s s ”>
< scr1pt src = "Ordenar.j s " x / s c r 1 p t >
</head>
<body>
<hl>0rdenar un arreglo</hl>
<p 1d = " a rre g lo O r1 g in a l" x /p >
<p 1d » "arregloOrdenado"x/p>
</body>
< /ht*l>
Elméfcrfo’x>nd<Aff*,
C
S4.03
*\
ü fiW //X 7eje m p lo i/c4p l0/f» g l0.1S -|P l *£?
9 k t G«l«r>
E
£ ] Vnpc***© o W r * .
O r d e n a r un arreglo
Elaafntos óe datos en d oeden c iia n i 10 1 9 2 8 3 * 4 6 5
EktD«*új de ditos en orden ascendente 1 2 3 4 5 6 7 8 9 1 0
Fgura 10.15 | Documento de HTML5 que muestra los resultados de ordenar un arreglo.
De m anera predeterm inada, el m étodo s o r t de A rray (sin argum entos) usa com paraciones de cadenas para
determ inar el orden de b s elem entos del arreglo. Las cadenas se com paran m ediante b s v ab res A SCII de sus
caracteres [nota: en el c a p ítu b 11 veremos con m ás detalle la com paración de cadenas]. En esta secuencia de
com andos (figura 10.16) nos gustaría ordenar u n arreg b de enteros.
El m étodo s o r t (línea 9) recibe com o argum ento el nom bre de u n a (u n c ió n c o m p a ra d o ra que compara
sus dos argum entos y devuelve una de las siguientes opciones:
• un v a b r negativo si el prim er argum ento es menor que el segundo argum ento,
344
1
2
3
Capítulo 10
JavaScript; arreglos
/ / F1g. 10.16: O rd e n ar.js
/ / Ordenar un a r r e g l o mediante s o r t .
function 1 n 1 c 1 a r ()
4
{
3
var a - [ 10, 1, 9, 2 . 8. 3, 7, 4. 6, 5 ];
6
7
8
•
10
11
12
13
14
13
16
17
18
19
20
21
ImprimírArreglo( "Elementos de datos en el orden o r ig in a l : ", a,
document.getElementByldC "arreg lo O rlg ln al" ) );
a .s o rtC compararEnteros ); / / ordenar e l a r re g lo
1mpr1mirArreglo( "Elementos de datos en orden ascendente: ", a,
document.getElementByldC "arregloOrdenado" ) );
} / / fin de l a función I n i c i a r
/ / Imprimir el encabezado seguido del contenido deelA rreglo
fu nctio n imprlmirArregloC encabezado, e lA rreg lo , s a l i d a
)
{
salida.InnerHTML = encabezado + e lA rreg lo .jo in C " " );
} / / fin de l a función imprimirArreglo
/ / función de comparación para u sar con s o r t
fu nctio n compararEnterosC val o r í , v a lo r2 )
{
22
23
24
23
26
r e t u r n p arselntC v a l o r l ) - p a rse ln tC v alo r2 );
> / / fin de l a función compararEnteros
window.addEventListenerC "load", i n i c i a r , f a l s e );
Figura 10.16 | Ordenar un arreglo mediante sort.
•
•
cero si los argum entos son iguales, o
un valor positivo si el prim er argum ento es mayor que el segundo argum ento.
Este ejem plo usa la función com paradora compararEnteros (que se define en las lineas 21 a 24). C alcula la
diferencia entre los valores enteros de sus dos argum entos (p a r s e l n t asegura que los argum entos se m anejen de
form a correcta com o enteros).
La línea 9 invoca el m étodo s o r t del objeto a tipo Array y pasa ia función compararEnteros com o un
argum ento. A continuación el m étodo s o r t utiliza compararEnteros para com parar b s elem entos del arreg b
a y determ inar la form a en que quedarán ordenados.
Observación de ingeniería de softw are 10.5
En JavaScript lasJunciones se consideran como datos. Por lo tanto, pueden asignarse a variables, almacenarse
en arreglos y pasarse a otrasJuncionesjusto igual que cualquier otro tipo de datos.
10.9
Búsqueda en arreglos con el método in d exO f de A rra y
Al trabajar con datos alm acenados en arreglos, a m enudo es necesario determ inar si u n arreg b contiene u n v a b r
que coincide con cierto valor clave. El proceso d e localizar el v a b r d e un elem ento específico en un arre g b se
conoce com o búsqueda. El objeto A rray en JavaScript tiene b s m étodos integrados indexO f y la s tln d e x O f
para buscar en arregbs. El m étodo i ndexOf busca la prim era ocurrencia del v a b r clave especificado y el m étodo
la s tln d e x O f busca la últim a ocurrencia del valor clave especificado. Si el v a b r clave se encuentra en el arregb,
cada m étodo devuelve el índice de ese vab r; de b contrario se devuelve -1 . El e je m p b en las figuras 10.17 y
10.9
Búsqueda en arreglos con el método ¡ndexOf de Array
345
10.18 dem uestra el m étodo i ndexOf. El usuario introduce la clave de búsqueda entera en el elem ento In p u t
numero del elem ento form (figura 10.17, línea 14) y después presiona el elem ento b u tto n (líneas 15 y 16) para
invocar a la función b o to n P resio n ad o de la secuencia d e com andos, que realiza La búsqueda y m uestra los re­
sultados en el párrafo en b línea 17-
I
<!DOCTYPE html>
<1— Fig. 10.17: buscar.html —>
<1— Documento de HTML5 para buscar en un a r r e g l o mediante indexOf. —>
<html>
<head>
<meta c h a rset
< t1 tle > B u sc ar
<scr1pt s r c </head>
<body>
<form a c tio n
- Mutf-S">
en un a r r e g l o < / t1 t le >
" b u s c a r . j s ”x / s c r 1 p t >
- “#">
< p > < lab e l> In tro d u zca l a c la v e de bA uacute;squeda e n te r a :
<1nput id = "valEntrada" type ■ ”num ber"x/label>
<1nput id - "botonBuscar" type - "button" valué - "Buscar">
</p>
<p 1d « " re s u lta d o " x / p >
</form>
20
</body>
</html>
B
-k««
nu
ninrqtc
C
\
liie-y//Xj'ej<mploí/capl0/f^jl0.17-18/bu«ar
.‘V =
Iitfrodaicab clave de buvqoídj entóta 15
No
te e n c o rn ó
d 'i l o t
/ L Ba:Cí»Onunjrrt^fc
C
*\
l! ft»e///Xyej€mplos/C3pl0/figl0.17-18/buscdf n t^ i £y E
/} S¿«oi is jQ v tá tt
| *] Wcto S K i G tfk iy
£ ] ‘. m p c x u d c do 1
figura 10 .17 | Documento de HTML5 para buscar en un arreglo mediante 1ndexOf.
La secuencia de com andos de b figura 10.18 crea u n arreglo que contiene 100 elem entos (línea 3) y después
inicializa los elem entos de ese arreglo con los enteros pares de 0 a 198 (líneas 6 a 9). C uando el usuario presiona
d b o tó n (b u tto n ) en la figura 10.17. b función b o to n P resio n ad o (líneas 12 a 32) realiza b búsqueda y muestra
b s resultados. La línea 15 obtiene el elem ento in p u t numero val E n trad a, que contiene el v a b r cbve especifica­
do por el usuario, y b línea 18 obtiene el párrafo en d o n d e b secuencia de com andos m uestra los resultados. A
continuación obtenem os el v a b r entero introducido por el usuario (línea 21). C ada elem ento in p u t tiene una
p ro p ie d a d v a lu é que puede usarse para obtener o establecer el v a b r de esc elem ento. Por últim o, la línea 22
346
Capítulo 10
JavaScript: arreglos
realiza la búsqueda m edíam e una llam ada al m étodo indexO f sobre el arreglo a, y las líneas 24 a 31 m uestran
b s resultados.
1 / / Fig. 10.18: b u s c a r .js
2 / / Buscar en un a r r e g l o mediante indexOf.
3 var a » new A rray( 100 ) ; / / c r e a r un a rr e g lo
4
5 / / l l e n a r el a r r e g lo con v a lo re s e n te ro s pares de 0 a 198
6 for ( var 1 = 0 ; i < a .le n g th ; ++i )
7 {
8
a t 1 ] - 2 * i;
9 > / / f i n de fo r
10
11 / / l a función se invoca cuando se presiona el botón "Buscar"
12 fu nctlo n botonPresionadoO
13 {
14
/ / o btener e l campo de te x to de entrada
13
v a r valEntrada - document.getElementByldC "valEntrada" );
16
17
/ / obtener e l p á rra fo de re s u lta d o
18
v a r r e s u lta d o = document.getElementByldC "re su lta d o " );
19
20
/ / obtener l a clave de búsqueda del campo de te x to de entrada y luego r e a l i z a r l a búsqueda
21
v a r claveBusqueda = parselntC val Entrada.valúe );
22
v a r elemento ■ a.indexOfC claveBusqueda );
23
24
i f C elemento 1= -1 )
23
{
26
resultado.innerHTML » "Se encontró el v a lo r en el elemento " ♦ elemento;
27
> / / f i n de i f
28
el se
29
{
30
resultado.innerHTML - "No se encontró el valor";
31
} / / fin de e ls e
32 } / / fin de l a función botonPresionado
33
34 / / r e g i s t r a el manejador de eventos de c l i c de botonBuscar
33 fun ctlo n in ic ia r C )
36 {
37
v a r botonBuscar = document.getElementByldC "botonBuscar" );
38
botonBuscar.addEventListenerC " c lic k " , botonPresionado, f a l s e );
39 } / / fin de l a función i n i c i a r
40
41 window.addEventListenerC "load", i n i c i a r , f a l s e );
Figura 10.18 | Buscar en un arreglo mediante i ndexOf.
Segundo argumento opcional para IndexOf y la stln d e x O f
Es posible pasar un segundo argum ento opcional a los m étodos indexO f y la s tln d e x O f, que representa el
índice a partir del cual debe em pezar la búsqueda. D e m anera predeterm inada, el valor de este argum ento es
0 y los m é to d o s buscan en to d o el arreglo. Si el a rg u m e n to es m ayor o igual q u e la lo n g itu d (le n g th ) del
arreglo, los m étodos sólo devuelven -1. Si el valor del argum ento es negativo, se utiliza com o desplazam iento a
10.10
Arreglos multidimensionales
347
partir del final del arreglo. Por e je m p b . el a rre g b de 100 elem entos de la figura 10.18 tiene índices de 0 a 99.
Si pasam os -1 0 com o el segundo argum ento, la búsqueda em pezará a partir del índice 89. Si un segundo argu­
mento negativo produce un v a b r de índice m enor que 0 com o el punto inicial, se buscará en todo el arreglo.
10.10
Arreglos multidimensionales
Los a rre g b s m ultidim ensionales con dos índices se utilizan con frecuencia para representar tablas de valores
que consisten en inform ación distribuida en filas y co lu m n as. Para identificar a u n elem ento específico de una
tabla debem os especificar b s dos índices; p o r convención, cl prim ero identifica la fila del elem ento y cl segundo
identifica la colum na. Los arreg b s que requieren dos índices para identificar u n elem ento específico se conocen
com o arreg lo s b id im en sio n ales.
Los arreg b s m ultidim ensionales pueden tener más de dos dim ensiones. JavaScript no cuenta con soporte
para arregbs m tiltidim casionalcs en form a directa, pero sí nos perm ite especificar arreg b s cuyos elem entos sean
tam bién arreglos, con lo cual se o b tien e cl m ism o efecto. C u an d o un arreglo con tien e arreglos u n id im e n ­
sionales com o elem entos, podem os im aginar estos arreg b s unidim ensionales com o las filas de una ta b b y bs
posiciones en estos arregbs com o colum nas. La figura 10.19 ¡lastra u n arre g b bidim ensional llamado a que
contiene tres filas y cuatro colum nas (es decir, u n arreg b de tres por cuatro; tres a rre g b s unidim ensionales, cada
uno con cuatro elem entos). En general, un arreg b con m filas y ti colum nas se denom ina arreg lo d e m p o r n.
C ada elem ento en el arreglo a se identifica en la figura 10.19 m ediante u n nom bre de elem ento de la forma
a [ f i la ] [colum na]. El nom bre del a rre g b es a; f i l a y columna son b s índices que identifican en form a única
a la fila y colum na, respectivam ente, de cada elem ento en a. En todos b s nom bres de b s elem entos de la fib
0, el prim er índice es 0; todos b s nom bres de b s elem entos en la colum na 3 tienen un segundo índice de 3.
Columna 0
Columna l
Columna ?
Columna 3
fitaO * [ 0 H 0 1
a C O ltlJ
«[ 0 ] [ 2 ]
a[ 0 ] [ 3 1
fital a [ l H 0 ]
a[ 1 ] [ 1 ]
a[ 1 ] [ 2 J
a[ 1 ] [ 3 ]
RU2 a [ 2 ] [ 0 ]
a[ 2 ] [ 1 ]
a[ 2 ] [ 2 ]
a[ 2 l t 3 ]
Subíndice de columna
Subíndice de fila
Nombie del arreglo
Figura 1 0 .1 9 | Arreglo bidimensional con tres filas y cuatro columnas.
Arreglos de arreglos unidim ensionales
Los a rre g b s m ultidim ensionales pueden inicializarse en declaraciones com o un arreg b u n id im en sio n al El
arreg b b con dos filas y dos colum nas podría declararse e inicializarse con b instrucción
v a r b - [ [ 1, 2 ] , [ 3. 4 ] ] ;
Los vabres se agrupan por fila en corchetes. El arreg b [1 , 2] inicializa el elem ento b [0 ] y el arregb [3, 4]
inicializa cl elem ento b [ l ] . Así, 1 y 2 inicializan b[0] [0] y b [0 ] [1 ], respectivam ente. D e m anera sim ibr, 3 y 4
inicializan b [ l ] [0] y b Cl] [1 ], respectivamente. El intérprete determ ina cl núm ero de fibs al contar el núm ero
348
Capítulo 10
JavaScript; arreglos
de listas subinicializadoras: arreglos anidados dentro del arreglo más externo. El intérprete determ ina el núm ero de
colum nas en cada fila al contar el núm ero de valores en el subarreglo que inicializa esa fila.
Arreglos bidimensionales con fila s de distintas longitudes
Las filas de un arreglo bidim cnsional pueden variar en longitud. La declaración
v a r b - [ [ 1, 2 ] ,
[ 3. 4. S ] ];
crea el arreglo b en d o n d e la fila 0 contiene dos elem entos (1 y 2) y la fila1 contiene tres elem entos (3, 4 y 5).
Creación de arreglos bidimensionales con new
Un arreglo m ultidim ensional en donde cada fila tenga un núm ero diferente de colum nas puede asignarse en
form a dinám ica, com o se m uestra a continuación:
v a r b:
b ■ new A rray ( 2 );
/ / asigna dos f i l a s
b ( 0 ] = new Array( 5 ); / /
asigna columnas para l a f i l a 0
b [ l ] - new ArrayC 3 ); / /
asigna columnas para l a f i l a 1
El código anterior crea un arreglo bidim cnsional con dos filas. La fila 0 tiene cinco colum nas y la fila 1 tiene
tres columnas.
Ejemplo de arreglo bidim ensiottai’ mostrar los valores de los elementos
El ejem plo en las figuras 10.20 y 10.21 inicializa dos arreglos bidim ensionales en las declaraciones y usa ciclos
f o r . . . in anidados para reco rrer los a rre g lo s (es decir, m anipular cada elem ento del arreglo). C u an d o se carga
el docum ento de la figura 10.20, la función I n i c i a r de la secuencia d e com andos m uestra los resultados de
inicializar los arreglos.
I
<!DOCTYPE ht«il>
<1— Fig, 10.20: InicA rreglo3.htm l —>
<1-- Documento de HTML5 que muestra la i n i c i a l i z a c i ó n de un a r r e g l o m ultidim ensional. -->
<html>
<head>
«ateta c h a r s e t = "utf-8'*>
< title > A rre g lo s m u ltid im en sion ales< /t1tle>
<l1nk r e í - " s ty le s h e e t" type - " te x t/ e s s " h r e f - " e s t1 lo .c s s " >
<scr1pt s r c - " I n 1 c A r r e g lo 3 .j s " x / s c r 1 p t>
</head>
<body>
<h2>Valores en a r r e g l o l por fila</h2>
<div id - "salidal"></div>
<h2>Valores en a rre g lo 2 por fila</h2>
<d1v id - "sal1 d a 2"x /d 1v >
</body>
</html>
Figura 10 J O | Documento de HTML5 que muestra la inicialización de un arreglo multidimensional (parte I de 2)
10.10
Arreglos multidimensionales
349
[‘ ¿rrtqtotrr+Jt*%mti\fQr> *
C
ü f»le///X 7 ej«m p lo s/cap l0 /f»g l0 ^ 2 0 -2 1 /ln f»
U í^ ó c k .
J J \U b She* 6 é U t y
5
C ] V n p « « u *e 4 * W i m -
V alores en a r r e g l o ! p o r fila
1 2
3
4 5 6
V a lo re s en a r r e g lo 2 p o r fila
1 2
3
4
5 6
Figura 10.20 | Documento de HTML5 que muestra la inicialización de un arreglo multidimensional (parte 2 de 2).
La función i n i c i a r de la secuencia de com andos declara e iniciaüza dos arreglos (figura 10.21, líneas 5 a 9).
La declaración de a r r e g l o l (líneas 5 y 6) proporciona seis iniculúadores en dos sublistas. La prim era sublista inicializa la fila 0 del arreglo con los valores 1, 2 y 3; la segunda sublista inictalúa la fila 1 del arreglo con los valores 4,
5 y 6. La declaración de a rre g !o 2 (lincas 7 a 9) proporciona seis inicializadores en tres sublistas. La sublista para la
fila 0 ¡metaliza de manera explícita la fila para que tenga dos elementos con los valores 1 y 2, respectivamente.
La sublista para la fila 1 inicial iza la fila para que tenga un elem ento, con el valor 3- La sublista para la fila 2 inicialú a la tercera fila con los valores 4, 5 y 6.
• / / Fio. 10.21: In 1c A rre g lo 3 .js
2 / / I n i c i a l i z a c i ó n de a rre g lo s m ultidim ensionales.
3 functlon i n i c i a r ( )
4 {
3
var a r r e g l o l - [ [ 1, 2, 3 ] , / / f i l a 0
6
[ 4. 5. 6 ] ] ; / / f i l a 1
7
var a rre g lo 2 « [ [ 1. 2 ] , / / f i l a 0
5
[ 3 ], / / fila 1
9
[ 4. 5. 6 ] ] ; / / f i l a 2
10
11
imprimirArregloC "Valores en a r r e g l o l por f i l a " , a r r e g l o l ,
12
document.getElementByldC " s a l i d a l " ) );
13
imprimirArregloC "Valores en arreg1o2 por f i l a " , a rre g lo 2 ,
14
document.getElementByldC Hs a l i d a 2" ) );
13 > / / f i n de l a función i n i c i a r
16
17 / / mostrar el contenido del a r re g lo
18 fun ctlo n imprimirArregloC encabezado, elA rreg lo , s a lid a )
19 {
20
var re su lta d o s 21
22
/ / i t e r a a tra v é s del conjunto de a r r e g lo s unidimensionales
23
fo r C v a r f i l a in elA rreglo )
24
{
23
re s u lta d o s +- "<ol>";
26
fig ura 10.21 | Inicialización de arreglos multidimensionales (parte I de 2).
350
27
28
29
30
31
32
33
34
35
36
37
38
39
Capítulo 10
JavaScript; arreglos
/ / i t e r a a tr a v é s de lo s elementos de cada a r r e g lo unidimensional
f o r ( var columna in el A rre g lo [ f i l a ] )
{
r e s u lta d o s +- *'<11>" + e lA rre g lo [ f i l a ] [ columna ] +
} / / fin de f o r in te rn o
"</l1>";
r e s u lta d o s +» "</ol>"; / / fin de l i s t a ordenada
} I I fin de fo r externo
salida.innerHTML = resultados;
} / / fin de l a función imprimirArreglo
window.addEventLlstener( "load", i n i c i a r , f a l s e ):
Figura 10 J2\ | Iniciaiización de arreglos multidimensionales (parte 2 de 2).
1.a función i n i c i a r invoca a im p rim irA rre g lo dos vcccs (lincas 11 a 14) para m ostrar los elem entos de
cada arreglo en la página Web. La función imprimi rA rre g lo (líneas 18 a 37) recibe un encabezado de cadena
a im prim ir antes del arreglo, el arreglo a im prim ir (e lA rre g lo ) y el elem ento en el que se va a m ostrar el arre­
glo. l a función usa una instrucción f o r . . . 1n anidada (líneas 23 y 24) para im prim ir cada fila de u n arreglo
bidim ensional com o una lista ordenada. M ediante el uso de CSS establecemos la propiedad di spl ay d e cada
elem ento de la lista a i n l i n e , de m odo que los elem entos de la lista aparezcan sin num eración de izquierda
a derecha en la página, en vez de aparecer num erados y en una lista vertical (la opción predeterm inada). La
instrucción f o r . . . 1 n externa itera sobre las filas del arreglo. La instrucción f o r . . . in interna itera sobre las co­
lum nas de la fila actual que se está procesando. La instrucción f o r . . . i n anidada en este e je m p b podría haberse
escrito con instrucciones f o r , de La siguiente manera:
var numeroOeFilas • e lA r r e g lo .le n g th ;
f o r ( var f i l a = 0; f i l a < numeroOeFilas; + + fila )
{
r e s u lta d o s
"<ol>"; / / i n i c i a r l i s t a ordenada
v a r numeroOeColumnas - e lA rre g lo [ f i l a ] . length;
f o r ( var columna = 0; j < numeroDeColumnas; + jj )
{
re su lta d o s +« "<li>" ♦ e lA rre g lo t f i l a ] [ columna ] + "</l1>";
> / / f i n de f o r in te rn o
r e s u lta d o s +- "</ol>"; / / fin de l i s t a ordenada
} / / f i n de fo r externo
Justo antes de la instrucción fo r exterbt; la expresión elArreglo. length determina el número de filas en el
arreglo. Justo antes de la instrucción fo r interna, la expresión el Arreglo [ f i l a ] .length determina el núm ero de co­
lumnas en la fila aaual del arregb. Esto permite que el cido determine, para cada fila, el número exacto de columnas.
Mattipulaciones comunes de arreglos m uíti di mensionales con instrucciones fo r y f o r . . . i n
M uchas m anipulaciones com unes de arregbs usan instrucciones de repetición f o r o f o r . . . i n. Por e je m p b , la
siguiente instrucción f o r establece todos b s elem entos en la fila 2 del arreg b a en la figura 10.19 a cero:
10.10
Arreglos multidimensionales
351
var colum nas - a [ 2 ] .l e n g t h ;
for ( var c o l • 0; co l < colum nas; -m-coI )
{
a [ 2 ] [ co l ] - 0 ;
}
Especificamos la fila 2; por lo ranto, sabem os que el prim er índice siem pre es 2. El c id o f o r varía sólo el
segundo índice (es decir, el índice de colum na). La instrucción f o r anterior es equivalente a las siguientes ins­
trucciones de asignación:
a [ 2 ] [ 0 ] . 0 ;
a[ 2 ] [ 1 ] - o¡
a [ 2 [ [ 2 ] - 0;
a [ 2 ] [ 3 ] - 0;
La siguiente instrucción f o r . . .i n tam bién es equivalente a la instrucción f o r anterior:
for ( var c o l in a [ 2 ] )
{
a [ 2 ] [ co l ] - 0;
}
I ja siguiente instrucción f o r anidada determ ina el total de todos b s elem entos en el arreglo a:
var t o t a l - 0;
var f i l a s - a .le n g th ;
for ( var f i l a - 0 ; f i l a < f i l a s ; - n - f ila )
{
var colum nas - a [ f i l a ] . le n g th ;
for ( var co l = 0; col < colum nas; ++col )
{
t o t a l += a [ f i l a ] [ co l ] ;
}
}
La instrucción f o r calcula el total de b s elementos del arreg b , una fila a b vez. La instrucción f o r externa
empieza por establecer el índice de f i l a en 0, de m odo que es posible calcular el total de b s elem entos de la fila 0
m ediante la instrucción f o r interna. Después la instrucción f o r externa incrementa f i l a en 1, por b que ahora
puede calcularse el total de b s elementos de la fila l . A continuación la instrucción f o r externa incrementa f i l a
en 2, por b que ahora puede calcularse el total de b s elementos de la fila 2. El resultado puede mostrarse cuando
termina la instrucción f o r anidada. La instrucción f o r anterior es equivalente a la siguiente instrucción f o r . . . in:
var t o t a l - 0;
for ( var f i l a in a )
(
for ( var co l in a [ f i l a ] )
{
t o t a l += a [ f i l a ] [ col ] ;
}
>
352
C ap itu ló lo
JavaScript: arreglos
Resumen
Sección 10.1
Introducción
• L/>s arreglos (pág, 325) son estructuras de datos que consisten en elementos de datos relacionados (algunas veces se
conocen como colecciones de elementos de datos).
• Los arreglos de JavaScript son entidades “dinámicas” en cuanto a que pueden cambiar su tamaño después de crearse.
Sección 10*2 Arreglos
• Lh arreglo es un grupo de ubicaciones de memoria, en donde tocias tienen d mismo nombre y por lo general son dd
mismo tipo (aunque este atributo no es obligatorio en JavaScript).
• Cada ubicación individual se conoce como elemento (pág. 325). Para hacer referencia a cualquiera de estos elementos
hay que proporcionar el nombre dd arreglo, seguido dd número de posición (un entero que por lo general se conoce
como el índice, pág. 325) dd elemento en corchetes ([)).
• El primer demento de cada arreglo es el elemento cero (pág. 325). En general, el /-¿simo elemento dd arreglo c se
conoce como c[1 -1]. Los nombres de los arreglos (pág. 325) siguen las mismas convenciones que otros identificadores.
• El nombre de un arreglo indexado puede usarse del lado izquierdo de una asignación para colocar un nuevo valor
(pág. 326) en un elemento del arreglo. También puede usarse del lado derecho de una operación de asignación para
asignar su valor a otra variable.
• lodo arreglo en JavaScript conoce su propia longitud (pág. 325)* que almacena en su atributo 1ength.
Sección 10.3
Declaración y asignación de arreglos
• En JavaScript los arreglos se representan mediante objetos Array (pág. 327).
• Los arreglos x crean con el operador new (pág. 327).
Sección 10.4
Ejemplos del uso de arreglos
• fóra vincular un archivo de JavaScript a un documento de HTM L, use d atributo src del elemento s c rip t (pág. 327)
para especificar la ubicación d d archivo de JavaScript.
• El conreo basado en cero se utiliza por lo general para iterar a través de arreglos.
• JavaScript reasigna un arreglo de manera automática cuando se asigna un valor a un elemento que se encuentra fuera de
los límites del arreglo original. Los elementos entre el último elemento d d arreglo original y d nuevo elemento tienen
salo res indefinidos.
• Los arreglos pueden crearse mediante d uso de una lista inicializadora separada por comas (pág. 330) encerrada entre
corchetes ([ y ]). £1 tamaño dd arreglo se determina mediante d número de valores en la lista inicializadora.
• Los valores iniciales de un arreglo también pueden especificarse como argumentos en los paréntesis que van después de
ne« Array. El tamaño d d arreglo se determina mediante d número de valores entre paréntesis.
• La instrucción for...1n de JavaScript (pág. 334) permite a una secuencia realizar una tarea para cada demento en un
arreglo. Este proceso se conoce como iterar sobre los elementos de un arreglo.
Sección 10.5
Generador de imágenes a l azar mediante el uso de arreglos
• Creamos un generador de imágenes al azar más degante que d dd capítulo 9, ya que no requiere que los nombres de
archivos de tas imágenes sean enteros, mediante d uso dd arreglo Imágenes para almacenar los nombres de los archivos
de imágenes como cadenas y accediendo al arreglo mediante un índice distribuido al azar.
Sección 10.6
Referencias y parámetros de referencia
• Dos formas de pasar argumentos a bs funciones (o métodos) en muchos lenguajes de programación son: paso por valor
y paso por referencía (pág. 339).
Resumen
353
• Cuando un argumento se pasa a una función por valor, se crea una copia del valor del argumenro y se pasa a la función
invocada.
• En JavaScript los números, valores booleanos y cadenas se pasan a las funciones por valor.
• Con cl paso por referencia, la función que hace la llamada concede a la función invocada el acceso a sus datos y le per­
mite modificarlos si así lo desea. EJ paso por referencia puede mejorar cl rendimiento debido a que es posible eliminar
la sobrecarga de copiar grandes cantidades de datos, pero puede debilitar la seguridad debido a que la función invocada
puede acceder a los datos de la función que hizo la llamada.
• En JavaScript, todos los objetos (y por ende, rodos los arreglos) se pa.«n a las funciones por referencia.
• El nombre de un arreglo es en realidad una referencia a un objeto que contiene los elementos dd arreglo yb variable
length, que indica cl número de elementos en d arreglo.
Sección 10.7% Paso de arreglos a Junciones
• Rúa pasar un argumento ripo arreglo a una función, hay que especificar d nombre dd arreglo (una referencia al arreglo)
sin llaves.
• Aunque los arreglos completos se pasan por referencia, los elementos numéricos y booleanos individuales de un arreglo
se pasan por valor, justo igual que como se pasan bs variables numéricas y booleanas simples. Dichas piezas simples e
individuales de datos se conocen como escalares o cantidades escabies (pág. 340). Para pasar d elemento de un arreglo
a una función, use d nombre indexado dd elemento como un argumento en b lbmada a b función.
• El método joln (pág. 341) recibe como argumento una cadena que contiene d separador (pág. 341) que debe usarse
para separar los elementos dd arreglo en b cadena que se devuelve. Si no se especifica d argumenro, se utiliza b cadena
vacb como el separador.
Sección 10.8
Ordenamiento de arreglos con el método s o r t de A rray
• El ordenamiento de datos (poner datos en un orden especifico, como ascendente o descendente, pág. 343) o una de bs
funciones de cómputo más importantes.
• El objeto Array en JavaScript tiene un método integrado Ibmado sort (pág. 343) para ordenar arreglos.
• De manera predeterminada, el método sort de Array (sin argumentos) usa las comparaciones de cadena para determi­
nar d orden de los elementos del arreglo.
• El método sort recibe como argumento opcional d nombre de una función (que se conoce como función compaiadora,
pág. 343) que compara sus dos argumentos y dcvudvc un valor negativo, cero o un valor positivo, si d primer argumen­
to es menor, igual o mayor que cl segundo, respectivamente.
• Las funciones en JavaScript se consideran como datos. Pór lo tanto, pueden asignarse a variables, almacenarse en arreglos
y pasarse a funciones justo igual que otros tipos de daros.
Sección 10.9
Búsqueda en arreglos cott el método IndexOfde Array
• El método IndexOf (pág. 344) de Array busca b primera ocurrencia de un valor y, si lo encuentra, dcvudvc d índice dd
arreglo de ese valor; en caso contrario devuelve-1. El método lastlndexOf busca b última ocurrencia.
Secciótt 10.10 Arreglos multidimensionales
• Rara identificar un demento específico de un arreglo muitidimensional bidimensional, debemos especificar los dos
índices; por convención, d primero identifica b fila dd elemento (pág. 347) y d segundo b columna dd elemento
(pág. 3 ^
• En general, un arreglo con m filas y n columnas se conoce como arreglo de m por n (pág. 347).
• Para acceder a cualquier demento en un arreglo bidimensional (pág. 347) se usa d nombre de un demento de b forma
a[f11a] [columna]; a es d nombre dd arreglo, f ila y columna son las índices que identifican de manera única a b fila y
columna, respectivamente, de cada elemento en a.
• Los arreglos multidimensionales se mantienen como arreglos de arreglos.
354
C ap itu ló lo
JavaScript: arreglos
Ejercicios de autoevaluación
10.1 Complete las siguientes oraciones:
a) Es posible almacenar listas y tablas de valores en_____________.
b) El número que se utiliza para referirse a un elemento específico de un arreglo se conoce como su_____________ .
c) El proceso de poner en orden los elementos de un arreglo se conoce como_____________el arreglo.
d) Al proceso de determinar si un arreglo contiene cierto valor clave se le conoce como_____________ d arreglo.
c) Un aneglo que utiliza dos índices se conoce como arreglo_____________ .
10.2 Indique si cada uno de los siguientes enunciados es verdadero ofalso. Si esfalso, explique por qué.
a) Un arreglo puede almacenar muchos tipos diferentes de valores.
b) ft>r lo general d índice de un arreglo debe ser un valor de punto flotante.
c) Un demento individual de un arreglo que se pasa a una función y se modifica en ésta debe contener el valor
modificado cuando la función invocada complete su ejecución.
10.3 Escriba instrucciones de JavaScript (con respecto al arreglo fracciones) para realizar cada una de las siguientes tarcas:
a) Declarar un arreglo con 10 elementos e ¡niciaiizar los dementes del arreglo en 0.
b) Hacer referencia al demento 3 del arreglo.
c) Hacer referencia al demento 4 del arreglo.
d) Asignar d valor 1.667 al elemento 9 dd arreglo.
e) Asignar d valor 3 .3 3 3 al elemento de menor numeración dd arreglo.
0 Sumar todos los elementos dd arreglo mediante una instrucción fo r.. .in. Definirla variable x como variable de
control para el ciclo.
10.4 Escribir instrucciones de JavaScript (con respecto al arreglo tabl a) para realizar cada una de las siguientes tareas:
a) Declarar y crear el arreglo con tres filas y tres columnas.
b) Almacenar el número total de elementos enlavariable total Elementos.
c) Usar una instrucción fo r.. .in para inicialbar cada elemento dd arreglo con la suma de sus índices de fila y de
columna. Suponga que las variables x y y se declaran como variables de control.
10.5 Encuentre d o los errores en cada uno de los siguientes segmentos de programa y corríjalos.
a) var b - new Arrayí 10 );
var longitud • b.length;
for ( var i - 0; i <- longitud; ♦-►i )
{
bC 1 J - i :
)
b) v a r i - [ [ 1. 2 ] , [ 3, 4 ] ] ;
«C 1, 1 1 - 5 ;
Respuestas a los ejercicios de autoevaluación
10.1 a) arreglos, b) índice, c) ordenamiento, d) búsqueda, e) bidimcnsional.
10.2 a) Verdadero, b) Falso. El índice de un arreglo debe ser un entero o una expresión entera, c) Falso. Los dementos
individuales de un tipo de datos primitivo se pasan por valor. Si se pasa una referencia a un arreglo, entonces las mo­
dificaciones a los dementos del arreglo se reflejan en el elemento original dd arreglo. Además, d elemento individual
de un tipo de objeto que se pasa a una función se pasa por referencia, y los cambios en d objeto se reflejarán en d
demento dd arreglo original.
10.3 a) var fracciones • [ 0, 0. 0, 0, 0. 0, 0, 0, 0, 0 ] ;
b) fracciones[ 3 ]
c) fracciónese 4 ]
Ejercicios
355
d ) f r a c c 1 o n e s [ 9 ] - 1 .6 6 7 ;
e ) f r a c d o n e s t 6 J - 3 .3 3 3 ;
0
var total - 0;
for ( v a r x 1n f r a c c i o n e s )
i
t o t a l +- f r a c c i ó n e s e x ] ;
)
10.4 a ) var t a b l a - n w ArrayC ñau ArrayC 3 ) . now ArrayC 1 ) .
n«M ArrayC 3 ) ) ;
b) v a r to t a lE l e n e n to s - t a b l a . l e n g t h • ta b laC 0 ] . le n g th ;
c ) for C var x 1n t a b l a )
{
for C var y 1n ta b le C x ] )
{
tablaC x ] [ y ] ■ x « y;
)
}
10.5 a) E rror se hace referencia al elemento de un arreglo friera de los límites del arreglo (b [10J) [Nota: en realidad éste
es un error lógico y no sintáctico]. Corrección: cambie d operador <- a <. b) Error, d indexado de arreglos se
realiza de manera incorrecta. Corrección: cambie la instrucción a aC liei] - 5;.
Ejercicios
10.6 Complete las siguientes oraciones:
a) JavaScript almacena listas de valores e n ___________.
b) Los nombres de los cuatro elementos dd arreglo p so n __________ . __________ , ___________y ___________ .
c) En un arreglo bidimensional. por convención d primer índice identifica el __________ de un demento y el
segundo índico identifica d __________ de un elemento.
d) Un arreglo de m por n contiene__________ filas,____________ columnas y ___________ elementos.
e) El nombre de un elemento en la fila 3 y la columna 5 dd arreglo d e s ___________.
10.7 Indique si cada uno de los siguientes enunciados es verdadero o /alto. Si es falso, explique por qué.
a) Para hacer referencia a una ubicación o demento específico en un arreglo, especificamos d nombre del arreglo y
el valor del elemento.
b) La declaración de una variable reserva espacio para un arreglo.
c) Para indicar que deben reservarse 100 ubicaciones para d arreglo entero p. d programador debe escribir la si­
guiente declaración:
P t 100 ];
d) Un programa de JavaScript que inicializa los elementos de un arreglo de 15 dementos en cero debe contener
cuando menos una instrucción for.
c) Un programa de JavaScript que calcula el total de los demenros de un arreglo bidimensional debe contener ins­
trucciones fo r anidadas.
10.8 Escriba instrucciones de JavaScript para realizar cada una de las siguientes tareas:
a) Mostrar d valor d d séptimo demento dd arreglo f .
b) Inicialbar cada uno de los cinco dementos del arreglo unidimensional g e n i.
c) Calcular el total de los elementos d d arreglo c, que contiene 100 elementos numéricos.
d) Copiar el arreglo a de 11 dementos en la primera porción d d arreglo b, que contiene 34 elementos.
e) Determinar e imprimir d valor más pequeño y d más grande contenido en d arreglo wde 99 dementos de punto
flotante.
C ap itu ló lo
356
JavaScript: arreglos
10.9 Considere un arreglo de dos por tres que almacena enteros.
a) Escriba una instmarión para declarar y crear d arreglo t.
b) ¿Cuántas filas tiene t?
c) ¿Cuántas columnas tiene t?
d) ¿Cuántos elementos tiene t?
e)
0
Escriba
Escriba
los nombres de todos los elementos en la fila 1 de t.
los nombres de todos los elementos en la tercera columna de t.
g)
Escriba
una sola instrucción para establecer el demento de t en la fib 1 y b columna 2encero.
h)
Escriba
una serie de instrucciones para inieblizar cada elemento de t en cero.
i)
j)
Escriba
Escriba
una instrucción for anidada para inicializar cada demento de t en cero.
una serie de instrucciones para determinar c imprimir d valor más pequeño end arreglo t.
k)
Escriba
una instrucción sin repetición para mostrar los elementos de b primerafib de t.
I)
Escriba una serie de instrucciones para imprimir el arreglo t en un formato tabular ordenado. Liste los índices de
columnas como encabezados a lo brgo de b parte superior y liste los índices de fib en b parte izquierda de cada
fib.
10.10 Use un arreglo unidimensional para resolver el siguiente problema: una empresa paga a su personal de ven ras con base
en comisiones. El personal de ventas recibe $200 por semana más d 9 por ciento de sus ventas brutas para esa semana.
Por ejemplo, un vendedor con ventas brutas de $5000 en una semana recibe $200 más el 9 por ciento de $5000. o un
total de $650. Escriba una secuencb de comandos (usando un arreglo de contadores) que obtener bs ventas brutas
para cada empleado por medio de un formubrio de HTML5 y determine cuántos vendedores obtuvieron sabrios en
cada uno de los siguientes rangos (supong3 que el salario de cada vendedor se trunca a un monto entero):
a) $200 a 299
b) $300 a 399
c) $400 a 499
d) $500 a 599
c) $600 a 699
0 $700 a 799
g) S800a 899
h) $900 a 999
O $1000 y más
10.11 Escriba instrucciones que realicen b s siguientes operaciones para un arreglo unidimensional:
a) Establecer los 10 demenros dd arreglo cuentas en ceros.
b) Sumar 1 a cada uno de los 15 dementos del arreglo bono.
c) Mostrar los cinco valores d d arreglo «eJoresPuntuaciones, separado por espacios.
10.12 Use un arreglo unidimensional para resolver d siguiente problema: recibir 10 números de entrada, cada uno de los cuales
debe estar entre 10 y 100. A medida que se ingrese cada número, imprímalo sólo si no es un duplicado de un número que
ya se haya recibido de enriada. Prepárese para d “peor caso”, en donde los 10 números sean diferentes. Use d arreglo más
pequeño posible para resolver este problema
10.13 Etiquete los elementos d d arreglo bidimensional de tres por an co Ibmado ventas para indicar el orden en el que se
deben establecer en cero mediante el siguiente segmento de programa:
for C var f i l a in ventas )
{
for ( var col in ventas! fila ] )
{
ventas! f i l a ] [ col ) • 0;
)
)
Ejercicios
357
10.14 Escríba una secuencia de comandos para simular el tiro dedos dados. La secuencia debe usar Math.random para tirar
el primer dado y usar esa función de nuevo para tirar el segundo dado. Después deberá calcularse la suma de los dos
valores [n o ta : como cada dado puede mostrar un valor entero de 1 a 6, la suma de los valores variará de 2 a 12, en
donde 7 será la suma más frecuente y tanto 2 como 12 serán las sumas menos frecuentes. La figura 10.22 muestra
las 36 combinaciones posibles de los dos dados. Su programa deberá tirar los dados 36.000 veces. Use un arreglo
bidimenskmal para calcular d número de veces que aparezca cada posible suma. Muestre los resultados en una tabla
de HTML5. Determine además si los totales son razonables (por ejemplo, hay seis formas de tirar un 7 por lo que
cerca de 1/6 parte de rodos los tiros deberán ser 7).
0
1
2
3 4
5
2
I
6
7
0
1
2
3
0
3
4
K
4
5
7
5
6
Figura 10.22 j Las 36 combinaciones posibles de los dos dados.
10.15 (Grdficot d e tortuga ) £1 lenguaje Logo, que es popular entre usuarios de computadora de corta edad, hizo famoso
el concepto de los g d fic o s d e to r tu g a . Imagine una tortuga mecánica que camina alrededor dd cuarto bajo d control
de un programa de JavaScript. La tortuga sostiene una pluma en una de dos posiciones, arriba o abajo. Cuando la
pluma está abajo, la tortuga traza figuras a medida que se desplaza; cuando b pluma está arriba b tortuga se mueve
libremente sin escribir nada. En este problema usted simubrá b operación de b tortuga y creará un bloc de dibujo
computarizado.
Use un arreglo de 20 por 20 Ibmado p1so que esté inicblizado en ceros. Lea los comandos de un arreglo que los
contenga. Rastree la posición actual de b tortuga en todo momento y si b pluma está arriba o abajo en un momento
dado. Suponga que la tortuga siempre empieza a i b posición (0, 0) del piso, con su pluma arriba. El conjunto de
comandos de tortuga que deberá procesar su secuencia de comandos se encuentra en b figura 10.23.
Comando
Sgnificado
1
Pluma arriba
2
Pluma abajo
3
Girar a la derecha
4
Girara b izquierda
5,10
Avanzar 10 espacios (o un número distinto de 10)
6
Imprimir d arreglo de 20 por 20
9
Fin de datos (ccnrineb)
Figura 1 0 .2 3 | Comandos de gráficos de tortuga.
358
C ap itu ló lo
JavaScript: arreglos
Suponga que b tortuga está en alguna parre cerra del centro del piso. £1 siguiente “programa*' dibuja c imprime un cuadra­
do de 12 por 12 y después deja la pluma en b posición arriba:
2
5.12
3
5.12
3
5.12
3
5.12
1
6
9
A medida que la tortuga se desplace con b pluma abajo, establezca los elementos apropiados d d arreglo pl so en L Al pro­
porcionar d comando 6 (imprimir), muestre un asterisco o cualquier otro carácter de su elección cada vez que haya un 1 en
d arreglo. Siempre que haya un cero, muestre un espacio en bbnco. Escriba una sccucncb de comandos para implementar
las herramientas de gráficos de tormga aquí descritas. Escriba varios programas de gráficos de rormga para dibujar figuras
interesantes. Agregue otros comandos para aumentar d poder de su lenguaje de gráficos de tortuga.
10.16 (La criba de Eratóstenes) Un número primo es cualquier entero mayor que 1. divisible sólo por sí mismo y por d
número 1. La Criba de Eratóstenes es un método para encontrar números primos. Opera de b siguiente manera:
a) Cree un arreglo con todos los dementos inicializados en 1 (true). Los elementos del arreglo con índices primos
permanecerán como 1. Cualquier otro elemento d d arreglo cvcntualmcntc cambiara a 0.
b) Establezca los primeros dos dementas en cero, ya que 0 y 1 no son primos. Empezando con d índice 2 dd arregb, cada
vez que cnaicnrre un demento dd arreglo cujo valor sea 1, itere a través dd resto dd arreglo y asigne cero a todo demen­
to cuyo índice sea múltiplo dd índice dd elemento que tiene d vabr 1. Para d índice 2 dd arreglo, rodos los dementos
más allá dd demento 2 en el arreglo que sean múltiplos de 2 se establcccran en cero (bs índices 4.6, 8, 10, etcétera); para
d índice 3 dd arregb. nodos los dementos más allá dd elemento 3 en d arreglo que sean múltiplos de 3 se establecerán
en cero (los índices 6.9, 12, 15. etcétera): y así en lo sucesivo.
Cuando este proceso termine, los dementos dd arreglo que aún sean 1 indicarán que d índice es un número primo. En­
tonces podrá imprimir estos índices. Escriba una sccucncb de comandos que utilice un arreglo de 1000 dementos para
determinar e imprimir los números primos entre 1 y 999. Ignore el demento 0 d d arreglo.
10.17 (Simulación: La tortuga y la liebre) En este problema, usted recreará uno de los momentos realmente grandiosos
en b historia, a saber b clásica carrera de b tortuga y b liebre. Utilizará b generación de números aleatorios para
desarrollar una simubción de este memorable suceso.
Nuestros competidores empezaran la carrera en b posición 1 de 70 posiciones. Cada posición representa a una
posible posición a to brgp dd curso de b carrera. La línea de meta se encuentra en b posición 70. El primer compe­
tidor en llegar a b posición 70 o más alb recibirá una cubeta llena con zanahorias y lechuga frescas. El recorrido se
abre paso hasta b cima de una resbalosa montaña, por lo que en ocasiones los compcridorcs pierden terreno.
Un rdoj hace tictac una vez por segundo. Con cada tic d d reloj, su sccucncb de comandas debe ajustar la posi­
ción de los animales de acuerdo con bs reglas en b figura 10.24.
Animal
Tipo de movimiento
Porcentaje del tiempo
Movimiento actual
lórtuga
feso pesado rápido
50%
3 posiciones a b derecha
Resbalón
20%
6 posiciones a b izquierda
ib so pesado lento
30%
1 posición a b derecha
Figura 10 .2 4 | Reglas para ajustar la posición de la tortuga y la liebre (parte I de 2).
Ejercicios
Animal
Tipo de movimiento
Porcentaje del tiempo
Movimiento actual
liebre
Dormir
20%
Ningún movimiento
Gran salto
20%
9 posiciones a la derecha
Gran resbalón
10%
Pequeño salto
30%
12 posiciones a la
izquierda
Pequeño resbalón
20%
1 posición a b derecha
359
2 posiciones a b izquierda
Figura 10.24 | Reglas para ajustar la posición de la tortuga y la liebre (parte 2 de 2).
Use variables para llevar el registro de bs posiciones de los animales (los números son del 1 al 70). Empiece con cada
animal en b posición I (la “puerta de inicio"). Si un animal se resbala hacia la izquierda antes de b posición 1, regírselo a
h posición 1.
Genere los porcentajes en b figura 10.24 produciendo un entero aleatorio i en el rango 1 S i s 10. Rara b tortu­
ga, realice un “paso pesado rápido” cuando 1 < » í 5. un “resbalón” cuando 6 S / S 7 o un “paso pesado lento" cuando
8 S i s 10. Utilice una técnica similar para mover a b liebre.
Empiece b carrera imprimiendo d mensaje
PUMIII
Y ARRANCAN!II
Luego, para cada tic dd reloj (es decir, cada repetición de un ciclo) imprima una línea de 70 posiciones, mostrando
b letra T en b posición de b tortuga y b letra Hen b posición de b liebre. En ocasiones los competidores se encontrarán
en b misma posición. En este caso, b tortuga muerde a b liebre y su secuencia de comandos debe imprimir 0UCH111 empe­
zando en esa posición. Todas las posiciones de impresión distintas de b T, b Ho d mensaje OUCHI 11 (en caso de un empate)
deben estar en blanco.
Después de imprimir cada línea, compruebe si uno de los animales ha lleudo o se ha pasado de la posición 70. De ser
así, imprima quién fue d ganador y termine la simulación. Si b tortuga gana, imprima LA TORTUCA GANA! I ! YAYI II Si la
liebre gana, imprima La 1lebre gana. Que nal. Si ambos animales ganan en d mismo tic dd reloj, tal vez quiera favorecer
a b tortuga (b más débil) o tal vez quiera imprimir Es un empate. Si ninguno de los dos animales gana, ejecute d ciclo
de nuevo para simubrd siguiente tic dd reloj. Cuando esté listo para ejecutar su secuencia de comandos, reúna a un grupo de
aficionados para que vean b carrera. ¡Se sorprenderá al ver lo parricipativa que puede ser su audiencia!
Más addanrc en d libro presentaremos una variedad de herramientas de HTM L dinámico, como gráficos, imágenes,
animación y sonido. Cuando esrudie esas herramientas, ral vez pueda disfrutar mejorando su simubción de la rorruga y b
liebre.
JavaScript: objetos
M i objetivo, es sublime,
¡o lograré con el tiempo.
— W . S . G ü b c rt
¿Es éste un mundo en el cual
se deben ocultar ¡as virtudes?
— W illiim S h a k e sp ea re
Objetivos
En este capítulo aprenderá a:
■ Familiarizarse con terminología
y los conceptos de la
programación basada en
objetos.
■ Discernir los conceptos
de encapsulamiento y
ocultamiento de datos.
■ Distinguir el valor de la
orientación a objetos.
■ Utilizar los métodos de
los objetos Math. S trin g .
Date. Boolean y Number de
JavaScript.
■ Usar el almacenamiento Web
de HTML5 para crear una
aplicación Web que almacene
los datos del usuario en forma
local.
■ Representar objetos
simplemente mediante el uso
deJSON .
Plan general
11.2
Objeto Math
11.1 Introducción
11.4
Objeto Date
11.2
Objeto Math
11.5
Objetos Boolean y Number
11.3
Objeto String
11.6
Objeto document
11.7
Búsquedas favoritas en Twitter: almace­
namiento W eb de HTML5
11.8
Uso de ]S0N para representar objetos
11.3.1 Fundamentos de caracteres y cadenas
11.3.2 Métodos del objeto String
11.3.3 Métodos de procesamiento de caracteres
361
11.3.4 Métodos de búsqueda
11.3.5 División de cadenas y obtención
de subeadenas
Resumen | Ejercicios de autoevaluación \ Respuestas a los ejercicios de autoevaluación \ Ejercicios
\
Sección especial: proyectos desafiantes de manipulación de cadenas
11.1
Introducción
Este capítulo presenta un tratamiento más formal de los objetos. En el capítulo 1 presentamos una breve introduc­
ción a los conceptos de programación orientada a objetos. Este capítulo presenta una descripción general (y sirve
como referencia) de varias objetos integrados de JavaScript y demuestra muchas de sus capacidades. Usamos las nue­
vas capacidades de almacenamiento Web de H TM L5 para crear una aplicación que almacena tas búsquedas favoritas
de Twitter en la computadora, para acceder a ellas posteriormente. También proveeremos una breve introducción a
JSON, un medio para crear objetos de JavaScript; por lo general para transferir datos sobre Internet entre programas
del bdo cliente y del bdo servidor (una técnica que veremos en el capítulo 16). En capítulos subsiguientes sobre el
Modelo de objetos de documentos y los eventos de JavaScript, trabajaremos con muchos objetos que propor­
ciona el navegador y permiten a bs secuencbs de comandos manipular los elementos de un documento de H TM L5.
11.2
Objeto Math
Los métodos del objeto Math nos permiten realizar muchos cálculos matemáticos comunes en forma convenienr . Como vimos antes, para Ibmar a los métodos de un objeto se escribe el nombre del objeto seguido de un
punto ( .) y del nombre del método. En los paréntesis que siguen del nombre del método van los argumentos
del mismo. Por ejemplo, para calcular b raíz cuadrada de 900 podríamos escribir
v a r r e s u lta d o - M a th .s q r tf 900 ) ;
que primero llama al método Math .sq rt para calcular b raíz cuadrada del número contenido en los paréntesis
(900) y después asigna el resultado a la variable. El número 900 es el argumento del método Math. sqrt. La
instrucción anterior regresará 30. En b figura 11.1 se resumen algunos métodos del objeto Math.
Observación de ingeniería de softw are l l . l
Im d ifr r e n d a e n tr e in v o c a r u n a fu n d ó n in d e p e n d ie n te e in v o c a r u n n t/to d o d e u n o b je to es q u e se re q u ie re n e l
n o m b re d e u n o b je to y u n p u n to p a ra lla m a r a u n a fu n c ió n in d e p e n d ie n te .
EJ objeto Math define varias propiedades que representan constantes matemáticas de uso común. Éstas se
sintetizan en la figura 11.2 [ n o ta : por convención, los nombres de las constantes se escriben sólo en mayúsculas
para rcsalrar en un programa].
362
Capítulo 11
JavaScript: objetos
Método
Descripción
Ejemplos
absC x J
Valor absoluto d e x.
a b s ( 7 .2 J e s 7.2
a b s ( 0 ) es 0
a b s ( -S .6 ) e s S .6
c e ilf x )
R edondea x al en tero m ás pequeño no m en o r d e x .
c e 1 l( 9 .2 J e s 10
C «1l( - 9 .* J e s -9 .0
cos( x J
C o sen o trigonom étrico d e x (x en radianes).
cos( 0 J c s l
exp( x )
M étodo exponencial e*.
ex p ( 1 J CS 2.71828
e x p ( 2 J e s 7. 38906
flo o r( x )
R edondea x al en tero m ás grande n o m ayor q u e x.
f lo o r ( 9 .2 ) es 9
f l o o r ( - 9 .8 ) es 10.0
1og( x )
L ogaritm o natural d e x (base e).
1og( 2.718282 J c s l
lo g ( 7.389056 J CS 2
«ax( x, y )
Hl valor m ás g ran d e entre x y y.
max( 2 .3 . 12.7 J e s 12.7
max( - 2 .3 , - 1 2 ,7 J e s -2 .3
«*in( x, y )
El valor m ás p eq u eñ o entre x y y.
n 1 n ( 2 .3 , 1 2 .7 J e s 2 . 3
«Hn( - 2 .3 , -1 2 ,7 J e s - 1 2 .7
pow( x. y )
x elevada a la potencia y (x*).
pow( 2 .7 J e s 128
pow( 9 ,.5 J e s 3 .0
roundC x )
R edondea x al entero m ás cercano.
ro u n d í 9 .7 5 J es 10
ro u n d ( 9 .2 5 J e s 9
s in ( x )
S eno trigonom étrico de x (x en radianes).
se n ( 0 JesO
sq rtC x )
Raíz cuadrada d e x .
s q r t ( 900 J e s 30
s q r t ( 9 J es 1
ta n ( x )
T angente trigonom étrica de x (x en radianes).
t a n ( 0 JesO
Figura 1 l . l I M étodos del o b jeto M ath.
Constante
Descripción
Valor
M ath .E
Base d e u n logaritm o n atu ral (<■).
C erca d e 2.718
M ath.L N 2
L ogaritm o n atu ral d e 2.
C aca de 0.693
M ath .L N 10
Logaritm o n atu ral d e 10.
C erca d e 2.302
M a th . L0C2E
Logaritm o base 2 d e e.
C a c a d e 1.442
M a th . L0C10E
L ogaritm o base 10 de e.
C a c a d e 0.434
M a th .P I
ji ,
el rad io d e la circunferencia de un
círculo co n respecto a su diám etro.
Cerca de 3.1415926535 89793
M ath.S Q R T l 2
Raíz cuadrada de 0.5.
C a c a d e 0.707
M ath.SQRT2
Raíz cuadrada d e 2.0.
C a c a d e 1.414
fig u ra 11.2 | Propiedades del o b jeto M ath.
113
11.3
Objeto String
363
Objeto S t r in g
En esta sección presentarem os las herram ientas de procesam iento de cadenas y caracteres de JavaScript. Las
técnicas que describirem os aquí son apropiadas para procesar nom bres, direcciones, núm eros telefónicos y otros
datos basados en texto.
11.3.1
Fundam entos de caracteres y cadenas
Los caracteres son los bloqu