Aplicaciones web php javascript y xhtml con ejemplo

Esta es una vista previa del archivo. Inicie sesión para ver el archivo original

apuntesAplicacionesWeb/AW_Tema1 2.2.pdf
Índice: Tema 2.4 (Parte 2)
2.4 Hojas de estilo en cascada CSS
2.4.1 El lenguaje XHTML
2.4.2 Hojas de estilo CSS
2.4.3 Reglas de estilo
2 4 4 El d l d j2.4.4 El modelo de cajas
2.4.5 Propiedades de los elementos básicos
Índice: Tema 2.4 (Parte 2)
2.4 Hojas de estilo en cascada CSS
2.4.1 El lenguaje XHTML
2.4.2 Hojas de estilo CSS
2.4.3 Reglas de estilo
2 4 4 El d l d j2.4.4 El modelo de cajas
2.4.5 Propiedades de los elementos básicos
2.4.4 EL MODELO DE CAJAS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 El modelo de cajas
 El modelo de cajas o box model es seguramente la característica más importante 
del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las 
páginas web.
 El box model es la característica que hace que todos los elementos incluidos en 
una página HTML se representen mediante cajas rectangulares cuyo aspecto se 
d l é d CSSpuede controlar a través de CSS.
 El diseño de cualquier página XHTML está compuesto por cajas rectangulares. CSS 
i d fi i l l h d d j l i jpermite definir la altura y anchura de cada caja, el margen existente entre cajas y 
el espacio de relleno interior que muestra cada caja.
d á l l f l l l Además, CSS permite controlar la forma en la que se visualizan las cajas: se 
pueden ocultar, desplazar respecto de su posición original y fijarlas en una 
posición específica dentro del documento.
3APLICACIONES WEB
posición específica dentro del documento.
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4.4 EL MODELO DE CAJAS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Elementos del modelo de cajas
 Las cajas de una página se crean automáticamente. Cada vez que se inserta una 
etiqueta o elemento en la página, se crea una nueva caja rectangular que encierra 
los contenidos del elemento.
 El siguiente esquema muestra la creación automática de cajas:
4APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
crea varias caja
Mario99
Texto escrito a máquina
2.4.4 EL MODELO DE CAJAS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Propiedades (1)
 A continuación se muestran las propiedades que controlan cada uno de los 
elementos de la caja relacionados con sus dimensiones:
• Anchura: width: 200px
• Altura: height: 60px
• Margen superior: margin-top: 2em
• Margen derecho: margin-right: 2em
• Margen inferior: margin-bottom: 2em
M i i d i l ft 2• Margen izquierdo: margin-left: 2em
• Margen en general: margin: sup der inf izq (notación {1,4})
 Tomando como referencia el margen (margin), se pueden definir propiedades 
similares para el relleno (padding), la anchura (border-*-width), el estilo 
(border-*-style) y el color (border-*-color) de los bordes
5APLICACIONES WEB
(border style) y el color (border color) de los bordes.
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
Mario99
Texto escrito a máquina
2.4.4 EL MODELO DE CAJAS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Propiedades (2)
 La anchura y altura de la caja de un elemento no solamente se calculan teniendo 
en cuenta sus propiedades width y height.
 El margen, el relleno y los bordes establecidos a un elemento determinan la 
anchura y altura final del elemento. En el siguiente ejemplo se muestran los 
estilos CSS de un elemento <p> cuya anchura de caja en pantalla sería de 480:
p {
width: 300px;
padding-left: 50px;
padding-right: 50px;
margin-left: 30px;
<p>...</p>
margin-right: 30px;
border: 10px solid black;
}
6APLICACIONES WEB
}
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4.4 EL MODELO DE CAJAS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Propiedades (3)
 El fondo puede ser un color simple o una imagen. El fondo solamente se visualiza 
en el área ocupada por el contenido y su relleno (padding), ya que el color de los 
bordes se controla directamente desde los bordes y las zonas de los márgenes 
i t tsiempre son transparentes.
 CSS define cinco propiedades para establecer el fondo de cada elemento:
• Color de fondo: background-color: blue
• Imagen de fondo (idf): background-image: url(images/fondo.gif)g ( ) g g ( g / g )
• Repetición de la idf: background-repeat: repeat (-x, -y, no-)
• Posición de la idf: background-position: left,top,… ó {x% y%}
• Comportamiento de la idf: background-attachment: scroll ó fixed
• Fondo en general: background: blue url() repeat-x fixed
7APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
Mario99
Texto escrito a máquina
sube y baja
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.4 EL MODELO DE CAJAS EJERCICIO  39
 Propiedades (4)
 Utilizar las propiedades básicas de las cajas para dar formato a la siguiente web:
8APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4.4 EL MODELO DE CAJAS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Posicionamiento de las cajas (1)
 El estándar de CSS define cinco modelos diferentes para posicionar una caja 
mediante el atributo position:
• static: Este es el modo de posicionamiento normal (por defecto).
• relative: La caja se coloca con el posicionamiento normal, pero se desplaza según los 
atributos  left, right, top, bottom.
• absolute: La caja se coloca de manera absoluta con respecto a la caja que la contiene 
según los atributos left, right, top, bottom.
• fixed: Es un tipo de posicionamiento absoluto, pero que convierte la caja en un 
elemento inamovible.
• float:  Se trata del modelo más especial de posicionamiento, ya que desplaza las cajas 
todo lo posible hacia la izquierda o hacia la derecha de la línea en la que se encuentran.
9APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4.4 EL MODELO DE CAJAS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Posicionamiento de las cajas (2)
 El static o posicionamiento normal es el modelo que utilizan por defecto los 
navegadores para mostrar los elementos de las páginas.
• Las cajas de los elementos de bloque se muestran una tras otra verticalmente comenzando 
en la parte superior del bloque contenedor y siguiendo el orden en el que aparecen los 
elementos correspondientes en el documento. 
• Las cajas de los elementos de línea se muestran una detrás de otra de forma horizontal 
comenzando desde la posición más a la izquierda de su elemento contenedor.
10APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4.4 EL MODELO DE CAJAS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Posicionamiento de las cajas (3)
 El relative o posicionamiento relativo permite desplazar una caja respecto de 
su posición original establecida mediante el posicionamiento normal.
• Una vez establecido position: relative, la propiedad left desplaza la caja hacia su 
derecha de acuerdo al valor establecido, la propiedad right la desplaza hacia su 
izquierda, la posición top desplaza la caja de forma descendente y la propiedad bottom
desplaza la caja de forma ascendente. Además, los valores negativos tienen el efecto p j , g
inverso, es decir left=-right y  top=-bottom.
• En el posicionamiento relativo, el resto de cajas no modifican su posición original.
11APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
2.4.4 EL MODELO DE CAJAS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Posicionamiento de las cajas (4)
 El absolute o posicionamiento absoluto se emplea para establecer de forma 
precisa la posición en la que se muestra la caja de un elemento. Tiene dos 
diferencias respecto al relativo:
• La caja se coloca de manera absoluta con respecto a la caja que la contiene. Por tanto los 
atributos para posicionarla dependen ahora de la posición de su elemento contenedor.
• Cuando se posiciona una caja de forma absoluta, el resto de elementos ignoran que esa 
caja exista. Por este motivo, en el siguiente ejemplo, la caja 3 deja su lugar original y pasa a 
ocupar el hueco dejado por
la caja 2.
12APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
Mario99
Texto escrito a máquina
2.4.4 EL MODELO DE CAJAS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Posicionamiento de las cajas (5)
 El estándar CSS considera que el fixed o posicionamiento fijo es un caso 
particular del posicionamiento absoluto, ya que sólo se diferencian en el 
comportamiento de las cajas posicionadas.
 La principal característica de una caja posicionada de forma fija es que su posición 
es inamovible dentro de la ventana del navegador. El posicionamiento fijo hace 
l j difi i ió i l i b b j l á ique las cajas no modifiquen su posición ni aunque el usuario suba o baje la página 
en la ventana de su navegador.
Si l á i i li di i d ( j l i ) l Si la página se visualiza en un medio paginado (por ejemplo en una impresora) las 
cajas posicionadas de forma fija se repiten en todas las páginas. Así, esta 
característica puede ser útil para crear encabezados o pies de página en páginascaracterística puede ser útil para crear encabezados o pies de página en páginas 
HTML preparadas para imprimir.
13APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4.4 EL MODELO DE CAJAS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Posicionamiento de las cajas (6)
 El float o posicionamiento flotante es el más difícil de comprender pero al 
mismo tiempo es el más utilizado. Como se verá más adelante, la mayoría de 
estructuras de las páginas web complejas están diseñadas con el posicionamiento 
fl t t C d j i i fl t tflotante. Cuando una caja se posiciona como flotante:
• Se desplaza hasta la zona más a la izquierda (con float:left) o más a la derecha (con 
float:right) de la posición en la que originalmente se encontrabafloat:right) de la posición en la que originalmente se encontraba.
• Deja de pertenecer al flujo normal de la página, lo que significa que el resto de cajas 
ocupan el lugar dejado por la caja flotante.p g j p j
14APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
Mario99
Texto escrito a máquina
2.4.4 EL MODELO DE CAJAS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Posicionamiento de las cajas (7)
 Si existen otras cajas flotantes, al posicionar de forma flotante otra caja, se tiene 
en cuenta el sitio disponible. En el siguiente ejemplo se posicionan de forma 
flotante hacia la izquierda las tres cajas:
• Como la caja 1 ya estaba posicionada lo más a la izquierda posible, la caja 2 sólo puede 
colocarse al lado del borde derecho de la caja 1, que es el sitio más a la izquierda posible 
respecto de la zona en la que se encontrabarespecto de la zona en la que se encontraba.
• Si no existe sitio en la línea actual, la caja flotante baja a la línea inferior hasta que 
encuentra el sitio necesario para mostrarse lo más a la izquierda o lo más a la derecha 
posible en esa nueva línea.
15APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
Mario99
Texto escrito a máquina
Div etiqueta que sirve para acer una caja
a p img title form tiene su propia ca
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
spam format a element a nivel de linea
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
<spam class="mi esti ">
Mario99
Texto escrito a máquina
Arial aaa <spam> aoa norma </p>
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
css <style> .mi esti { color : red }
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
movemes div : mueve td MMMM
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
a tdas 
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
 clear left para pner una caja que no siga
Mario99
Texto escrito a máquina
2.4.4 EL MODELO DE CAJAS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Posicionamiento de las cajas (8)
 Uno de los principales motivos para la creación del posicionamiento flotante fue la 
posibilidad de colocar imágenes alrededor de las cuales fluye el texto. Así:
• Los elementos que se encuentran alrededor de una caja flotante adaptan sus contenidos
para que fluyan alrededor del elemento posicionado.
• Si se desea que el contenido de algún elemento no fluya alrededor de una caja flotante, 
debe utilizarse la propiedad clear que permite modificar el comportamiento por defecto 
del posicionamiento flotante para forzar a que el elemento correspondiente se muestre 
bajo la caja flotante: 
16APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.4 EL MODELO DE CAJAS EJERCICIO  40
 Posicionamiento de las cajas (9)
 Utilizar la propiedad float de las cajas para dar formato a la siguiente web:
17APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
con float y clear
2.4.4 EL MODELO DE CAJAS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Posicionamiento de las cajas (10)
• Con clear:left la caja se posiciona debajo de cualquier caja que flote a la izquierda 
que aparezca antes en el documento.
• Con clear:right la caja se posiciona debajo de cualquier caja que flote a la derecha 
l dque aparezca antes en el documento.
• Con clear:both la caja se posiciona debajo de cualquier caja que flote que aparezca 
antes en el documentoantes en el documento.
• Como se verá más adelante, la propiedad clear es imprescindible cuando se crean las 
estructuras de las páginas web complejas.p g p j
#contenedor {
border: 1px solid #CCC;
background-color: #E0E0E0;
padding: .5em;
}
.anterior{ float: left; }
.siguiente{ float: right; }
18APLICACIONES WEB
.debajo{ clear: both; }
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.4 EL MODELO DE CAJAS EJERCICIO  41
 Posicionamiento de las cajas (11)
 Utilizar la propiedad clear de las cajas para dar formato a la siguiente web:
19APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4.4 EL MODELO DE CAJAS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Visualización (1)
 Además de las propiedades que controlan el posicionamiento de los elementos, 
CSS define otras cuatro propiedades para controlar su visualización: display, 
visibility, overflow y z-index.
 La propiedad displaymodifica la forma en la que se visualiza un elemento.
• El valor blockmuestra un elemento como si fuera de bloque, y el valor inline visualiza 
un elemento en forma de elemento en línea, independientemente del tipo de elemento 
que se trate.
20APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4.4 EL MODELO DE CAJAS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Visualización (2)
• El valor none oculta un elemento y hace que desaparezca de la página. El resto de 
elementos de la página se visualizan como si no existiera el elemento oculto, es decir, 
pueden ocupar el espacio en el que se debería visualizar el elemento.
 Por otra parte, la propiedad visibility permite hacer invisible un elemento, 
lo que significa que el navegador crea la caja del elemento pero no la muestra. En 
este caso, el resto de elementos de la página no modifican su posición, ya queeste caso, el resto de elementos de la página no modifican su posición, ya que 
aunque la caja no se ve, sigue ocupando sitio.
21APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4.4 EL MODELO DE CAJAS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Visualización (3)
 CSS define la propiedad overflow para controlar la forma en la que se visualizan 
los contenidos que sobresalen de sus elementos.
• visible: el contenido no se corta y se muestra sobresaliendo la zona reservada para 
visualizar el elemento. Este es el comportamiento por defecto.
• hidden: el contenido sobrante se oculta y sólo se visualiza la parte
del contenido que 
cabe dentro de la zona reservada para el elemento.
• scroll: solamente se visualiza el contenido que
cabe dentro de la zona reservada para el elementocabe dentro de la zona reservada para el elemento,
pero también se muestran barras de scroll que
permiten visualizar el resto del contenido.
• auto: el comportamiento depende del navegador,
aunque normalmente es el mismo que la propiedad
scroll
22APLICACIONES WEB
scroll.
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4.4 EL MODELO DE CAJAS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Visualización (4)
 Además de posicionar una caja de forma horizontal y vertical, CSS permite 
controlar la posición tridimensional de las cajas posicionadas. De esta forma, es 
posible indicar las cajas que se muestran delante o detrás de otras cajas cuando se 
d l i tproducen solapamientos.
 La posición tridimensional de un elemento se establece sobre un tercer eje 
ll d “Z” l di l i d d U ili dllamado “Z” y se controla mediante la propiedad z-index. Utilizando esta 
propiedad es posible crear páginas complejas con varios niveles o capas.
C á l l l é i á d l i l j Cuanto más alto sea el valor numérico, más cerca del usuario se muestra la caja.
 La propiedad z-index sólo tiene efecto en los
l d l blelementos posicionados, por lo que es obligatorio
que la propiedad z-index vaya acompañada de la
propiedad position.
23APLICACIONES WEB
propiedad position.
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.4 EL MODELO DE CAJAS EJERCICIO  42
 Visualización (5)
 Utilizar la propiedad z-index de las cajas para dar formato a la siguiente web:
24APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4.4 EL MODELO DE CAJAS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Diseño de Layouts (1)
 El diseño de las páginas web habituales se divide en bloques: cabecera, menú, 
contenidos y pie de página.
 Visualmente, los bloques se disponen en varias filas y columnas. Por este motivo, 
hace varios años la estructura de las páginas HTML se definía mediante tablas o 
marcos.
 El desarrollo de CSS ha permitido que se puedan realizar los mismos diseños sin 
utilizar tablas HTML. Las principales ventajas de diseñar la estructura de las 
á i b CSS d bl l i i lpáginas web con CSS en vez de con tablas HTML son el mantenimiento,  la 
accesibilidad, la velocidad de carga y la semántica.
l b d bl h d d l Por estos motivos, la estructura basada en tablas ha dado paso a la estructura 
basada exclusivamente en CSS. Aunque crear la estructura de las páginas sólo con 
CSS presenta en ocasiones retos importantes, en general es más sencilla y flexible.
25APLICACIONES WEB
CSS presenta en ocasiones retos importantes, en general es más sencilla y flexible.
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4.4 EL MODELO DE CAJAS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Diseño de Layouts (2): Centrado horizontal
 El centrado horizontal del diseño de una web se suele utilizar para evitar las 
situaciones siguientes:
• Con resoluciones superiores a 1024 x 768 píxel, las líneas de texto son demasiado largas 
como para leerlas con comodidad.
• Aunque se opte por un diseño de anchura fija, los navegadores alinean por defecto las 
páginas web a la izquierda de la ventana, provocando una sensación de vacío a la derecha.
#contenedor {
width: 300px; (ó 70%)p ; ( )
margin: 0 auto 0 auto;
}
<body>y
<div id="contenedor">
<h1>Lorem ipsum...</h1>
<p>Lorem ...</p>
</div>
26APLICACIONES WEB
/d
</body>
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4.4 EL MODELO DE CAJAS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Diseño de Layouts (3): Centrado vertical
 El centrado vertical del diseño de una web no suele utilizarse dado que el 
contenido de una web suele ser mayor que la altura del navegador:
• A continuación se muestra la forma de centrar una página web respecto de la ventana del 
navegador, es decir, centrarla tanto horizontalmente como verticalmente.
#contenedor {#contenedor {
width: 300px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -100px;
}
27APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.4 EL MODELO DE CAJAS EJERCICIO  43
 Diseño de Layouts (4): Ejemplo de centrado
 Utilizar las propiedades de centrado para dar formato a la siguiente web:
28APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4.4 EL MODELO DE CAJAS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Diseño de Layouts (5): Diseño a dos columnas
 El objetivo de este diseño es definir una estructura de página con cabecera y pie, 
un menú lateral de navegación y una zona de contenidos. La anchura de la página 
se fija en 700px, la del menú en 150px y la de los contenidos en 550px:
• La solución CSS se basa en el uso de la propiedad float para los elementos posicionados 
como el menú y los contenidos, y el uso de la propiedad clear en el pie de página para 
evitar los solapamientos ocasionados por los elementos posicionados con floatevitar los solapamientos ocasionados por los elementos posicionados con float.
29APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4.4 EL MODELO DE CAJAS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Diseño de Layouts (6): Diseño a tres columnas
 Además del diseño a dos columnas, el diseño más utilizado es el de tres columnas 
con cabecera y pie de página.
• En este caso, los contenidos se dividen en dos zonas diferenciadas: zona principal de 
contenidos y zona lateral de contenidos auxiliares.
• La solución CSS emplea la misma estrategia del diseño a dos columnas y se basa en utilizar 
las propiedades float y clear.
30APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.4 EL MODELO DE CAJAS EJERCICIO  44
 Diseño de Layouts (7): Diseño a tres columnas
 Generar un diseño a tres columnas similar al siguiente:
31APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
Índice: Tema 2.4 (Parte 2)
2.4 Hojas de estilo en cascada CSS
2.4.1 El lenguaje XHTML
2.4.2 Hojas de estilo CSS
2.4.3 Reglas de estilo
2 4 4 El d l d j2.4.4 El modelo de cajas
2.4.5 Propiedades de los elementos básicos
2.4.5 PROPIEDADES DE LOS ELEMENTOS BÁSICOS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Propiedades de texto (1)
 CSS define numerosas propiedades para modificar la apariencia del texto:
• Color: color: blue
• Tipo de letra: font-family: Arial
• Tamaño de letra: font-size: 12ptp
• Anchura de letra: font-weight: bold
• Estilo de letra: font-style: italic
• Estilo alternativo de letra: font-variant: small-caps
• Todas las propiedades: font: blue, Arial, 12pt, etc...
• Alineado de texto: text-align: left
• Interlineado: line-height: 6pt
• Decoración de texto: text-decoration: underline
• Transformación de texto: text-transform: uppercase
• Alineación vertical: vertical-aling: top
• Tabulación de texto: text-indent: 12pt
• Espaciado entre letras: letter-spacing: normal
• Espaciado entre palabras: word-spacing: inherit
33APLICACIONES WEB
• Uso de espacios en blanco: white-spacing: nowrap
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.5 PROPIEDADES DE LOS ELEMENTOS BÁSICOS EJERCICIO  45
 Propiedades de texto (2)
 Utilizar las propiedades de texto para generar las reglas con las que dar formato a 
los siguientes párrafos:
34APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.5 PROPIEDADES DE LOS ELEMENTOS BÁSICOS
 Propiedades de enlaces (1)
 Los estilos más sencillos que se pueden aplicar a los enlaces son los que modifican 
su tamaño de letra, su color y la decoración del texto del enlace. Así, se tienen por 
ejemplo las siguientes propiedades para modificar el estilo original de los enlaces:
• Utilizando la propiedad border-bottom es posible añadir
cualquier tipo de subrayado 
para los enlaces de las páginas.
• Utilizando la propiedad background se puede incluir un pequeño icono al lado de un 
enlace para indicar el tipo de contenido que enlaza.
L i d d d fi id CSS it t l l l t d• Las propiedades definidas por CSS permiten mostrar los enlaces con el aspecto de un 
botón, lo que puede ser útil en formularios en los que no se utilizan elementos específicos 
para crear botones.
• CSS también permite aplicar diferentes estilos a un mismo enlace en función de su estado 
mediante el uso de pseudo-clases (botón activado o no).
35APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.5 PROPIEDADES DE LOS ELEMENTOS BÁSICOS EJERCICIO  46
 Propiedades de enlaces (2)
 Utilizar las propiedades de los enlaces para generar las reglas con las que dar 
formato a los siguientes enlaces:
36APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4.5 PROPIEDADES DE LOS ELEMENTOS BÁSICOS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Propiedades de imágenes (1)
 CSS y CSS3 contemplan diversas propiedades que pueden ayudar a mejorar el 
aspecto de las imágenes originales.  Así, se tienen por ejemplo las siguientes:
• Las dimensiones de la imagen en pantalla se pueden modificar a través de su altura y 
anchura:                                                                                                                     
img { width: 100px; }
• Se pueden aplicar las propiedades de los bordes para poner las esquinas redondeadas: 
img { border-radius: 25px; }
• El nivel de transparencia de una imagen se puede controlar a través de la opacidad:• El nivel de transparencia de una imagen se puede controlar a través de la opacidad:      
img { opacity: 0.5; }
• La propiedad  box-shadow de CSS3 permite añadir un efecto de sombra sobre una a p op edad bo s ado de CSS3 pe te a ad u e ecto de so b a sob e u a
imagen:
img { border-radius: 10px 20px 5px red; }
37APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.5 PROPIEDADES DE LOS ELEMENTOS BÁSICOS EJERCICIO  47
 Propiedades de imágenes (2)
 Utilizar las propiedades de imágenes para generar las reglas con las que dar 
formato a la siguiente web:
Original width border shadowopacity
38APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4.5 PROPIEDADES DE LOS ELEMENTOS BÁSICOS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Propiedades de listas (1)
 CSS define numerosas propiedades para modificar la apariencia de las listas:
• Tipo de viñeta: list-style-type: disc
• Posición de la viñeta: list-style-position: inside
• Imagen de la viñeta: list-style-image: <url>
• Estilo global de la lista: list-style: disc, inside, <url>
 Las listas HTML se suelen emplear, además de para su función natural, para la 
creación de menús de navegación verticales y horizontales. Para verlo, supóngase 
la siguiente lista:
<ul>
<li><a href="#">Elemento 1</a></li><li><a href= # >Elemento 1</a></li>
<li><a href="#">Elemento 2</a></li>
<li><a href="#">Elemento 3</a></li>
<li><a href="#">Elemento 4</a></li>
39APLICACIONES WEB
</ul>
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4.5 PROPIEDADES DE LOS ELEMENTOS BÁSICOS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Propiedades de listas (2)
 El proceso de transformación de la lista en un menú vertical requiere de los 
siguientes pasos:
• Definir la anchura del menú.
• Eliminar las viñetas automáticas y todos los márgenes y espaciados aplicados por defecto.
• Añadir un borde al menú de navegación y establecer el color de fondo y los bordes de cada 
elemento del menú.
• Aplicar estilos a los enlaces mostrándolos como un elemento de bloque para que ocupen 
todo el espacio de cada <li> del menú añadir un espacio de relleno y modificar los colorestodo el espacio de cada <li> del menú, añadir un espacio de relleno y modificar los colores 
y la decoración por defecto.
 Los tipos de menús verticales que se pueden definir mediante las propiedades CSS Los tipos de menús verticales que se pueden definir mediante las propiedades CSS 
son innumerables, como se puede observar en la página:
• http://www exploding‐boy com/images/EBmenus/menus html
40APLICACIONES WEB
• http://www.exploding‐boy.com/images/EBmenus/menus.html
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4.5 PROPIEDADES DE LOS ELEMENTOS BÁSICOS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Propiedades de listas (3)
 A partir de un menú vertical sencillo, es posible crear un menú horizontal sencillo 
aplicando las propiedades CSS conocidas hasta el momento.
 El proceso de transformación del menú vertical en un menú horizontal consta de 
los siguientes pasos:
• Eliminar la anchura y el borde de <ul> y aplicar las propiedades float y clear.
• Establecer el valor de la propiedad float de los <li> del menú a left.
• Modificar el padding y los bordes de los enlaces que forman el menú.
• Añadir un borde izquierdo en el elemento <ul> para homogeneizar el aspecto de los 
elementos del menú.
 Algunos ejemplos de menús horizontales pueden encontrarse en la página:
• http://exploding‐boy.com/images/cssmenus/menus.html
41APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.5 PROPIEDADES DE LOS ELEMENTOS BÁSICOS EJERCICIO  48
 Propiedades de listas (4)
 Probar los estilos de las páginas sugeridas para generar diferentes menús 
verticales y horizontales:
42APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.5 PROPIEDADES DE LOS ELEMENTOS BÁSICOS
 Propiedades de listas (5): Menús avanzados
 http://alvit.de/css‐showcase/css‐navigation‐techniques‐showcase.php
43APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4.5 PROPIEDADES DE LOS ELEMENTOS BÁSICOS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Propiedades de tablas (1)
 Cuando se aplican bordes a las celdas de una tabla,
el aspecto por defecto con el que se muestra en un
navegador es el siguiente:
 El estándar CSS define dos modelos diferentes para el tratamiento de los bordes 
de las celdas:
• Fusión de bordes:
border-collapse: collapse
E i d b d• Espaciado entre bordes:
border-spacing: 10px
44APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4.5 PROPIEDADES DE LOS ELEMENTOS BÁSICOS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Propiedades de tablas (2)
 CSS define otras propiedades específicas para el control del aspecto de las tablas:
• Una de ellas es el tratamiento que reciben las celdas vacías de una tabla, que se controla 
mediante la propiedad empty-cells (show, hide). Esta propiedad sólo se aplica 
d l d l d b d d l bl ( ) dcuando el modelo de bordes de la tabla (border-collapse) es de tipo separate.
• Se puede establecer un título para la tabla usando el elemento <caption> dentro de 
<table> La propiedad caption-side (top bottom) permite controlar la posición<table>. La propiedad caption side (top, bottom) permite controlar la posición 
del título de la tabla (que por defecto se muestra encima de la tabla).
.tabla {
width: 250px;
border: 1px solid #000;
border-collapse: separate;
empty-cells: hide;
caption-side: bottom;
}
.tabla th, .tabla td {
border: 1px solid #000;
45APLICACIONES WEB
border: 1px solid #000;
}
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.5 PROPIEDADES DE LOS ELEMENTOS BÁSICOS EJERCICIO  49
 Propiedades de tablas (3)
 Las pseudo‐clases también funcionan con los elementos <tr> de las tablas.
 Por ejemplo, se puede utilizar dicha pseudo‐clase  como selector de las filas, para 
que estas cambien de color al pasar el ratón por encima:
46APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4.5 PROPIEDADES DE LOS ELEMENTOS BÁSICOS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Propiedades de formularios
(1)
 Así como el estilo por defecto de los enlaces se puede modificar para que se 
muestren como botones de formulario, los botones de formulario también se 
pueden modificar para que parezcan enlaces.
.enlace {
border: 0;
padding: 0;
background-color: transparent;
color: blue;
border-bottom: 1px solid blue;
}
<input type="button" value="Boton normal" />
<input class="enlace" type="button" value="Boton como enlace" />
 Añadiendo un pequeño padding a cada elemento <input>, se mejora 
notablemente el aspecto del formulario.
47APLICACIONES WEB
p
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4.5 PROPIEDADES DE LOS ELEMENTOS BÁSICOS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Propiedades de formularios (2)
 Utilizando la propiedad display se pueden convertir los elementos de línea en 
elementos de bloque para conseguir el siguiente aspecto sin insertar <br>:
.btn, label {
display: block;display: block;
margin: 1em 0 0 0;
}
<label for="nombre">Nombre</label>
<input type="text" id="nombre" />
...
48APLICACIONES WEB
<input class="btn" type="submit" value="Darme de alta" />
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4.5 PROPIEDADES DE LOS ELEMENTOS BÁSICOS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Propiedades de formularios (3)
 Insertando cada pareja <label>-<input> dentro de un <div> se pueden 
alinear las etiqueta con los campos del formulario:
div {div {
margin: 0.4em;
}
di l b l {div label {
float: left;
width: 25%;
}
49APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4.5 PROPIEDADES DE LOS ELEMENTOS BÁSICOS
2.4 HOJAS DE ESTILO EN CASCADA CSS
 Propiedades de formularios (4)
 Haciendo flotantes las cajas de los <fieldset> de los formularios pueden 
conseguirse diseños a dos (o más) columnas para simplificar la visualización de 
formularios complejos con decenas de opciones que pueden agruparse:
form fieldset {
float: left;
width: 48%;
}
<form>o
<fieldset>
...
 Finalmente, la pseudo‐clase :focus puede utilizarse como selector en un input
lt l d f l i d l i ti l l t
50APLICACIONES WEB
para resaltar el campo de un formulario cuando el usuario activa el elemento.
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.5 PROPIEDADES DE LOS ELEMENTOS BÁSICOS EJERCICIO  50
 Propiedades de formularios (5)
 Utilizar las propiedades de los formularios para generar las reglas con las que dar 
formato a los siguientes formularios:
51APLICACIONES WEB TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
apuntesAplicacionesWeb/AW_Tema3.3.pdf
Índice: Temas 3.3 y 3.4
3.3 El modelo de objetos del Documento 
3.3.1 Introducción al DOM
3.3.2 Acceso a los nodos
3.3.3 Manipulación de nodos
3 3 4 A l t ib t3.3.4 Acceso a los atributos
3.4 El modelo de objetos del Navegador 
3 4 1 El objeto window3.4.1 El objeto window
3.4.2 Otros objetos de utilidad
Índice: Temas 3.3 y 3.4
3.3 El modelo de objetos del Documento 
3.3.1 Introducción al DOM
3.3.2 Acceso a los nodos
3.3.3 Manipulación de nodos
3 3 4 A l t ib t3.3.4 Acceso a los atributos
3.4 El modelo de objetos del Navegador 
3 4 1 El objeto window3.4.1 El objeto window
3.4.2 Otros objetos de utilidad
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.1 INTRODUCCIÓN AL DOM
 Modelo de Objetos del Documento (1)
 El Modelo de Objetos del Documento (DOM) es un interfaz que permite acceder 
y modificar la estructura y contenido de una página web.
 Especifica cómo se puede acceder desde los lenguajes de script a los distintosEspecifica cómo se puede acceder desde los lenguajes de script a los distintos 
elementos (enlaces, imágenes, formularios, etc…) de una página web y cómo se 
pueden modificar.
 Para lograrlo, se crean una serie de objetos que representan dichos elementos, y 
que guardan entre ellos unas relaciones de parentesco (jerarquía) que refleja la 
estructura lógica de una página HTML.
 Una página se presenta en una ventana que posee un documento el cual a su vez Una página se presenta en una ventana, que posee un documento, el cual a su vez 
puede tener una serie de formularios, que pueden contener elementos como 
botones, cuadros de texto, etc…, a su vez con una serie de propiedades, etc…
3APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.1 INTRODUCCIÓN AL DOM
 Modelo de Objetos del Documento (2)
 A continuación se muestran las clases de objetos del navegador en un diagrama 
que indica sus relaciones de contenido.
4APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.1 INTRODUCCIÓN AL DOM
 Modelo de Objetos del Documento (3)
 Considérese la siguiente página web sencilla:
<!DOCTYPE html>
<html>
<head>
h i /h l h f 8<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Página sencilla</title>
</head>
<body>
<p>Esta página es <strong>muy sencilla</strong></p>
</body></body>
</html>
5APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.1 INTRODUCCIÓN AL DOM
 Modelo de Objetos del Documento (4)
 Antes de poder utilizar las funciones de DOM, los navegadores convierten 
automáticamente la página HTML en una estructura de árbol con nodos.
 Dichas funciones permiten añadir, eliminar, modificar y reemplazar cualquier nodo 
de cualquier documento de forma sencilla y sin necesidad de recargar la página.
6APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
crea un objet de tip Document
Mario99
Texto escrito a máquina
crea un objet de tip Element
son etiquetas p head img..
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
codig pagina anterior esquema :
Mario99
Texto escrito a máquina
el navegador lee y crea este esquema
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
desde js podem acceder aqui para modificar
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
element
Mario99
Texto escrito a máquina
document
Mario99
Texto escrito a máquina
raiz
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
 
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.1 INTRODUCCIÓN AL DOM
 Tipos de nodos
 La especificación completa de DOM define 12 tipos de nodos.
 A continuación se detallan los tipos más importantes de nodos en los que DOM 
transforma los documentos HTML:
• Document Nodo raíz del que derivan todos los demás nodos del árbol.
• DocumentType Es el nodo que contiene la representación del DTD empleado en laDocumentType Es el nodo que contiene la representación del DTD empleado en la 
página (indicado mediante el DOCTYPE).
• Element Representa cada una de las etiquetas HTML. Es el único nodo que 
puede tener tanto nodos hijos como atributos.
• Attr Representa cada uno de los atributos de las etiquetas HTML, es decir, 
d t ib t luno por cada par atributo=valor.
• Text Nodo que contiene el texto encerrado por una etiqueta HTML.
C R l i i l id l á i HTML
7APLICACIONES WEB
• Comment Representa los comentarios incluidos en la página HTML.
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
Mario99
Texto escrito a máquina
cuand cargam una pagina 
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.1 INTRODUCCIÓN AL DOM
 La interfaz NODE (1)
 Una vez que DOM ha creado de forma automática el árbol completo de nodos de 
la página, ya es posible utilizar sus funciones para obtener información sobre los 
nodos o manipular su contenido.
 JavaScript crea el objeto Node para definir las propiedades y
métodos necesarios 
para procesar y manipular los documentos.
 En primer lugar, el objeto Node define las siguientes constantes para la 
identificación de cada uno de los 12 tipos de nodos existentes:
Node.ELEMENT_NODE = 1
Node.ATTRIBUTE_NODE = 2
...
Node.COMMENT_NODE = 8
Node.DOCUMENT_NODE = 9
...
d 12
8APLICACIONES WEB
Node.NOTATION_NODE = 12
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
Mario99
Texto escrito a máquina
 acceder al nodo y modificar que querem
Mario99
Texto escrito a máquina
eliminar un parrafo...
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.1 INTRODUCCIÓN AL DOM
 La interfaz NODE (2)
 Además de estas constantes, Node proporciona las siguientes propiedades y 
métodos:
9APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
Mario99
Texto escrito a máquina
 borra el parrafo body.removeChild(p)
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.1 INTRODUCCIÓN AL DOM
 La interfaz NODE (3)
10APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
Índice: Temas 3.3 y 3.4
3.3 El modelo de objetos del Documento 
3.3.1 Introducción al DOM
3.3.2 Acceso a los nodos
3.3.3 Manipulación de nodos
3 3 4 A l t ib t3.3.4 Acceso a los atributos
3.4 El modelo de objetos del Navegador 
3 4 1 El objeto window3.4.1 El objeto window
3.4.2 Otros objetos de utilidad
Mario99
Texto escrito a máquina
cambiar color...
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.2 ACCESO A LOS NODOS
 Tipos de acceso
 DOM proporciona dos métodos alternativos para acceder a un nodo específico:
• Acceso relativo: También conocido como acceso a través  de nodos padre, consiste en 
acceder al nodo raíz de la página y después a sus nodos hijos y a los nodos hijos de esos 
h í h l d b dhijos y así sucesivamente hasta el nodo buscado.
• Acceso directo: Cuando se quiere acceder a un nodo específico, es mucho más rápido 
acceder directamente a ese nodo a tener que llegar hasta él descendiendo a través deacceder directamente a ese nodo a tener que llegar hasta él descendiendo a través de 
todos sus nodos padre.
 Por último, es importante recordar que el acceso a los nodos, su modificación y su , p q , y
eliminación solamente es posible cuando el árbol DOM ha sido construido 
completamente, es decir, después de que la página HTML se cargue por completo 
(evento onload).
 Más adelante se verá cómo asegurar que un código JavaScript solamente se 
12APLICACIONES WEB
ejecute cuando el navegador ha cargado entera la página HTML.
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
Mario99
Texto escrito a máquina
 cm acceder a los elementos de esquema de las primera pagina de este dcument
Mario99
Texto escrito a máquina
este debem queda
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
document.body.firstChild.lastChild. text para acceder al strong del esquema, en cascada ay que meterse en cada una
Mario99
Texto escrito a máquina
<p id="1 uno" > dand nombre a atributo
es una funcion geElement by ide alg asi
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.2 ACCESO A LOS NODOS
 Acceso relativo (1)
 La operación básica consiste en obtener el objeto que representa el elemento raíz 
de la página, para luego utilizar los diferentes métodos de la interfaz node para 
acceder al nodo deseado. Por ejemplo, se pueden hacer cosas del tipo:
var objeto_html = document.documentElement; // html (elemento raiz)
var objeto_head = objeto_html.firstChild; // head
var objeto_body = objeto_html.lastChild; // body
var objeto_head = objeto_html.childNodes[0]; // alternativa para obtener head
var objeto_body = objeto_html.childNodes[1]; // alternativa para obtener body
D di t bj t ht l hildN d l th // l it d li tvar numeroDescendientes = objeto_html.childNodes.length; // longitud lista
objeto_head.parentNode; // devuelve el objeto_html
objeto_body.parentNode; // devuelve el objeto_html
objeto body.previousSibling; // devuelve el objeto headobjeto_body.previousSibling; // devuelve el objeto_head
objeto_head.nextSibling; // devuelve el objeto_body
objeto_head.ownerDocument; // devuelve el document
document nodeType; // 9 (tipo del nodo document)
13APLICACIONES WEB
document.nodeType; // 9 (tipo del nodo document)
document.documentElement.nodeType; // 1 (tipo del nodo html)
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
Mario99
Texto escrito a máquina
no lo vam a utilizar
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.2 ACCESO A LOS NODOS EJERCICIO  16
 Acceso relativo (2)
 Comprobar el acceso a los diferentes nodos de una página mostrando el 
resultados mediante alertas por pantalla:
14APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.2 ACCESO A LOS NODOS
 Acceso directo (1)
 Cuando se trabaja con una página web real, el árbol DOM tiene miles de nodos de 
todos los tipos. Por este motivo, no es eficiente acceder a un nodo descendiendo 
a través de todos los ascendentes de ese nodo.
 Para solucionar este problema, DOM proporciona una serie de métodos para 
acceder de forma directa a los nodos deseados.
 getElementsByTagName(“etiqueta”)
• Dicha función obtiene todos los elementos de la página cuya etiqueta coincida con la 
especificada como argumento de la función:                                                                              
var parrafos =document.getElementsByTagName("p");
• El resultado se devuelve en un objeto de tipo NodeList, similar a un array de nodos:El resultado se devuelve en un objeto de tipo NodeList, similar a un array de nodos:
var primerParrafo = parrafos[0]; var numeroParrafos = parrafos.length;
• Se puede aplicar de forma recursiva sobre cada uno de los nodos devueltos por la función: 
15APLICACIONES WEB
var enlaces = primerParrafo.getElementsByTagName("a");
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
Mario99
Texto escrito a máquina
este es importante
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
var imagenes =document.getElementsByTagName("img") arai con tda imagen de una pagina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
var imagen1= imagenes[0] ; para ver la primera imagen
Mario99
Texto escrito a máquina
< img name = "image2" >
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.2 ACCESO A LOS NODOS
 Acceso directo (2)
 getElementsByName(“name”)
• Dicha función obtiene todos los elementos de la página cuyo atributo name coincida con 
el especificado como argumento de la función.
<p name="especial">Contenido del párrafo</p>
var parrafoEspecial = document.getElementsByName("especial");
 getElementById(“id”)
• Dicha función obtiene todos el elemento de la página cuya atributo id se especifica como 
argumento de la función:
<div id="cabecera">
var cabecera = document.getElementById("cabecera");
 getAttribute(“atributo”): El acceso a los atributos se verá más adelante.
16APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
<img name = " imagen2 ">
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
imagen2 le pasam est dnd pne especial
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.2 ACCESO A LOS NODOS EJERCICIO  17
 Acceso directo (3)
 Dada la página web ejercicio17.html, obtener: 1) el número de enlaces de la 
página; 2) la dirección a la que enlaza el penúltimo enlace; 3) el número de 
enlaces que enlazan a http://prueba;  4) el número de enlaces del tercer párrafo.
17APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
Mario99
Texto escrito a máquina
meter una funcion que cuand puls el bton aga l de arriba
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
en js
Mario99
Texto escrito
a máquina
acceder y poder modificar 
Mario99
Texto escrito a máquina
examen 
Índice: Temas 3.3 y 3.4
3.3 El modelo de objetos del Documento 
3.3.1 Introducción al DOM
3.3.2 Acceso a los nodos
3.3.3 Manipulación de nodos
3 3 4 A l t ib t3.3.4 Acceso a los atributos
3.4 El modelo de objetos del Navegador 
3 4 1 El objeto window3.4.1 El objeto window
3.4.2 Otros objetos de utilidad
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.3 MANIPULACIÓN DE LOS NODOS
 Creación de nodos (1)
 La interfaz node proporciona métodos para la crear (createNode()) y añadir 
(appendChild()) nuevos nodos al árbol de la página.
 Veámoslo con un ejemplo. Supóngase que se desea añadir de forma dinámica un 
nuevo párrafo (<p>Párrafo 1</p>) a la siguiente página:
<html>
<head><title>Página sencilla</title></head><head><title>Página sencilla</title></head>
<body></body>
</html>
 Para ello, se deben seguir los siguientes pasos:
1. Crear un nodo de tipo elemento (para el párrafo).
2. Crear un nodo de tipo texto (para el contenido).
3. Asociar el nodo texto al nodo párrafo.
ñ di l d á f l d b d
19APLICACIONES WEB
4. Añadir el nodo párrafo al nodo body.
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
cuand pulsa el usuari
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
 en js
Mario99
Texto escrito a máquina
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.3 MANIPULACIÓN DE LOS NODOS
 Creación de nodos (2)
 El código correspondiente sería:
1. var p = document.createElement("p");
2. var texto = document.createTextNode("Párrafo 1");
3. p.appendChild(texto);
4. document.body.appendChild(p);
 Y el resultado:
<html>
<head><title>Página sencilla</title></head>
<body><body>
<p>Párrafo 1</p>
</body>
</html>
20APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
Mario99
Texto escrito a máquina
 cream el nod p en la estructura de esquema
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
este texto es un nodo que detiene el parrafo 1 que está entre parente
Mario99
Texto escrito a máquina
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.3 MANIPULACIÓN DE LOS NODOS
 Creación de nodos (3)
 Además, se puede añadir un segundo párrafo:
1. var p2 = document.createElement("p");
2. var texto = document.createTextNode("Párrafo 2");
3. p2.appendChild(texto);
D á d l i Detrás del primero:
4. document.body.appendChild(p2);
 O delante:
4 var p = document getElementsByTagName("p")[0];4. var p = document.getElementsByTagName("p")[0];
5. document.body.insertBefore(p2,p);
21APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.3 MANIPULACIÓN DE LOS NODOS
 Reemplazo de nodos (1)
 La interfaz node proporciona el método replaceChild() para reemplazar 
cualquier nodo existente originalmente en la página o creado dinámicamente.
 Supongamos que queremos reemplazar el nodo anteriormente añadido (primer 
párrafo de la página) por otro.
 Para ello se deben seguir los siguientes pasos: Para ello, se deben seguir los siguientes pasos:
1. Crear un nodo de tipo elemento (para el párrafo).
2 C d d ti t t ( l t id )2. Crear un nodo de tipo texto (para el contenido).
3. Asociar el nodo texto al nodo párrafo.
4. Acceder al nodo que se pretende reemplazar.
5. Ejecutar desde su nodo padre el reemplazo del nodo antiguo por el nuevo.
22APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.3 MANIPULACIÓN DE LOS NODOS
 Reemplazo de nodos (2)
 El código correspondiente sería:
1. var pnew = document.createElement("p");
2. var texto = document.createTextNode("Párrafo 2");
3. pnew.appendChild(texto);
4. var pold = document.getElementsByTagName("p")[0];
5. pold.parentNode.replaceChild(pnew,pold);
 Y el resultado: Y el resultado:
<html>
<head><title>Página sencilla</title></head>
<body>
<p>Párrafo 2</p>
</body>
23APLICACIONES WEB
</html>
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
Mario99
Texto escrito a máquina
esta particularizad a esa pagina l pdem quitar
Mario99
Texto escrito a máquina
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.3 MANIPULACIÓN DE LOS NODOS
 Eliminación de nodos
 La interfaz node proporciona el método removeChild() para eliminar 
cualquier nodo existente originalmente en la página o creado dinámicamente.
 Supongamos que queremos eliminar el nodo anteriormente añadido (primer 
párrafo de la página). Para ello, se deben seguir los siguientes pasos:
1. Acceder al elemento a eliminar.
2. Eliminarlo desde su elemento padre.
 El código correspondiente sería:
1. var p = document.getElementsByTagName("p")[0];
2. document.body.removeChild(p);
 O, en el caso de que no se conozca su padre:
24APLICACIONES WEB
2. p.parentNode.removeChild(p);
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
Mario99
Texto escrito a máquina
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.3 MANIPULACIÓN DE LOS NODOS EJERCICIO  18
 Ejercicio de manipulación de nodos
 Programar las funciones necesarias para crear nuevos párrafos con el texto 
“Párrafo 1”, crear párrafos delante del primero con el texto“Párrafo 2”, reemplazar 
el primero (por “Párrafo 3”) y eliminar el primero.
25APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
Índice: Temas 3.3 y 3.4
3.3 El modelo de objetos del Documento 
3.3.1 Introducción al DOM
3.3.2 Acceso a los nodos
3.3.3 Manipulación de nodos
3 3 4 A l t ib t3.3.4 Acceso a los atributos
3.4 El modelo de objetos del Navegador 
3 4 1 El objeto window3.4.1 El objeto window
3.4.2 Otros objetos de utilidad
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.4 ACCESO A LOS ATRIBUTOS
 Acceso a los atributos
 Además del tipo de etiqueta HTML y su contenido de texto, DOM permite el 
acceso directo a todos los atributos de cada etiqueta.
 Los atributos de los elementos de la página se transforman automáticamente en 
propiedades de los nodos.
 Para acceder a su valor, simplemente se indica el nombre del atributo HTML 
detrás del nombre del nodo.
 Ejemplo:
<a href="http://www.paginaweb.com">Enlace</a>
var a document getElementsByTagName("a");var a = document.getElementsByTagName("a");
alert(a.href); // muestra http://www.paginaweb.com
a.href = www.otrapaginaweb.com // modifica el enlace
27APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
var parafo= document.getElementbyID("p1")
paraf.size=" 20 px" mdifica el tama
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.4 ACCESO A LOS ATRIBUTOS
 Acceso a las propiedades CSS (1)
 El acceso a las propiedades CSS no es tan directo y sencillo como el acceso a los 
atributos HTML, dado que los estilos CSS se pueden aplicar de varias formas 
diferentes sobre un mismo elemento HTML.
 El acceso a las propiedades CSS establecidas mediante el atributo style se 
realiza a través de la propiedad styledel nodo que representa a ese elemento.
 Ejemplo:
<p id="parrafo1" style="color:#C00">Párrafo</a>
var p = document.getElementById("parrafo1");
var color = p.style.color;
Aunque el funcionamiento es homogéneo entre distintos navegadores, los resultados no son 
exactamente iguales: Firefox y Safari muestran el valor rgb(204, 0, 0) , Internet Explorer 
28APLICACIONES WEB
muestra el valor #c00, etc…
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
Mario99
Texto escrito a máquina
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.4 ACCESO A LOS ATRIBUTOS
 Acceso a las propiedades CSS (2)
 Si el nombre de una propiedad CSS es compuesto, se
accede a su valor 
modificando ligeramente su nombre.
 La transformación del nombre de las propiedades CSS compuestas consiste en 
eliminar todos los guiones medios (‐) y escribir en mayúscula la letra siguiente a 
cada guión medio.
 Ejemplos:
• font-weight se transforma en fontWeight
• border-top-style se transforma en borderTopStyle
 Como la palabra l está reservada por JavaScript no es posible utilizarla para Como la palabra class está reservada por JavaScript, no es posible utilizarla para 
acceder al atributo class del elemento HTML. En su lugar, DOM utiliza el nombre 
className para acceder al atributo class de HTML.
29APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
Mario99
Texto escrito a máquina
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.4 ACCESO A LOS ATRIBUTOS
 Acceso a las propiedades CSS (3)
 Para obtener el valor de las propiedades CSS independientemente de cómo se 
hayan aplicado, es necesario utilizar otras propiedades de JavaScript.
<p id="parrafo1">Párrafo</p> // Código HTML
#parrafo1 { color: #008000; } // Regla CSS
 Si se utiliza un navegador de la familia Internet Explorer, se hace uso de la 
i d dpropiedad currentStyle:
var p = document.getElementById("parrafo1");
var color = p.currentStyle['color'];var color p.currentStyle[ color ];
 Si se utiliza cualquier otro navegador, se puede emplear la función 
getComputedStyle():g p y ()
var p = document.getElementById("parrafo1");
var color = document.defaultView.getComputedStyle(p,''). 
30APLICACIONES WEB
getPropertyValue('color');
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.4 ACCESO A LOS ATRIBUTOS
 Acceso a las propiedades CSS (4)
 La propiedad currentStyle requiere el nombre de las propiedades CSS según el 
formato de JavaScript (sin guiones medios), mientras que la función 
getPropertyValue() exige el uso del nombre original de la propiedad CSS.
 Por este motivo, la creación de aplicaciones compatibles con todos los 
navegadores se puede complicar en exceso.
 Existen funciones compatibles con todos los navegadores, como la función 
getStyle() creada por el programador Robert Nyman y publicada en su blog 
lpersonal:
http://www.robertnyman.com/2006/04/24/get‐the‐rendered‐style‐of‐an‐element/
var parrafo = document.getElementById("parrafo");
var color = getStyle(parrafo, 'color');
31APLICACIONES WEB
g y (p , )
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.4 ACCESO A LOS ATRIBUTOS EJERCICIO  19
 Ejercicio sobre acceso a los atributos
 Dada la página web ejercicio19.html, programar las funciones capaces de mostrar 
y cambiar el color y tamaño de letra de los dos primeros párrafos, y cambiar el 
estilo de la pseudo‐clase  a:hover del enlace del tercero a verde.
32APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3.3 EL MODELO DE OBJETOS DEL DOCUMENTO
3.3.4 ACCESO A LOS ATRIBUTOS EJERCICIO  20
 Generador‐comparador de números aleatorios
 Diseñar una web con la que generar de forma aleatoria dos números entre 0 y 9 a 
través de un botón “generar”, y que obtenga el menor de ellos a través de un 
botón “comparar”.
33APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
exame
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Índice: Temas 3.3 y 3.4
3.3 El modelo de objetos del Documento 
3.3.1 Introducción al DOM
3.3.2 Acceso a los nodos
3.3.3 Manipulación de nodos
3 3 4 A l t ib t3.3.4 Acceso a los atributos
3.4 El modelo de objetos del Navegador 
3 4 1 El objeto window3.4.1 El objeto window
3.4.2 Otros objetos de utilidad
3.4 EL MODELO DE OBJETOS DEL NAVEGADOR
3.4.1 EL OBJETO WINDOW
 Modelo de Objetos del Navegador (1)
 El Modelo de Objetos del Navegador (BOM) es un interfaz a través de la cual es 
posible:
• Crear, mover, redimensionar y cerrar ventanas de navegador.
• Modificar el texto que se muestra en la barra de estado.
• Obtener información sobre el propio navegador.
• Acceder a propiedades de la página.
• Gestión de cookies.
• Y realizar muchas otras manipulaciones no relacionadas con el contenido de la página 
HTML, como:
• Utilización de temporizadores‐
• Etc…
35APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3.4 EL MODELO DE OBJETOS DEL NAVEGADOR
3.4.1 EL OBJETO WINDOW
 Modelo de Objetos del Navegador (2)
 A continuación se muestran las clases de objetos del navegador en un diagrama 
que indica sus relaciones de contenido.
36APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3.4 EL MODELO DE OBJETOS DEL NAVEGADOR
3.4.1 EL OBJETO WINDOW
 El objeto Window
 Se trata del objeto de más alto nivel, y representa la ventana completa del 
navegador. Tiene métodos para:
• Mostrar mensajes al usuario
• Mover, redimensionar y manipular la ventana actual del navegador. 
• Utilizar temporizadores.
• Abrir y cerrar nuevas ventanas de navegador.
 Algunas propiedades del objeto window:
status Barra de estado window.status
name Nombre de la ventana window.name
 Dado que se trata del elemento de mayor nivel, todas sus propiedades y métodos 
pueden ser accedidos sin necesidad de colocar su nombre delante del punto.
37APLICACIONES WEB
p p
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3.4 EL MODELO DE OBJETOS DEL NAVEGADOR
3.4.1 EL OBJETO WINDOW
 Mensajes de JavaScript (1)
 JavaScript tiene tres tipos de cuadros de mensaje con los que interaccionar con el 
usuario mostrando o pidiendo algún tipo de información mediante diferentes 
métodos del objeto window:
alert(mensaje) Muestra un cuadro de mensaje.
window.alert("Hola")
confirm(mensaje) Muestra un cuadro de confirmación. Devuelve true si el 
usuario pulsa el botón Aceptar y false si pulsa Cancelar.
window.confirm("¿Terminar?")
prompt(mensaje,inicial) Para leer un dato. Muestra un cuadro con el mensaje, un 
cuadro de texto (con valor inicial) y botones Aceptar y 
Cancelar. Devuelve el valor introducido.
window.prompt("Introduce tu edad","20")
window.prompt("Introduce tu edad","")
38APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3.4 EL MODELO DE OBJETOS DEL NAVETADOR
3.4.1 EL OBJETO WINDOW EJERCICIO  21
 Mensajes de JavaScript (2)
 Utilizar los métodos anteriores para solicitar y mostrar información mediante 
cuadros de texto: 
39APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3.4 EL MODELO DE OBJETOS DEL NAVEGADOR
3.4.1 EL OBJETO WINDOW
 Manejo de la ventana en JavaScript (1)
 BOM define cuatro métodos para manipular el tamaño y la posición de la ventana:
moveBy(x,y) Desplaza la posición de la ventana x píxeles hacia la 
derecha e y píxeles hacia abajo. Se permiten 
desplazamientos negativos (izquierda y arriba).
window.moveBy(10,10)
moveTo(x,y) Desplaza la esquina superior izquierda a la posición (x, y).
Se permiten desplazamientos negativos. 
window.moveTo(200,100)window.moveTo(200,100)
resizeBy(x,y) Redimensiona la ventana aumentando su anchura y altura 
en x e y respectivamente. Valores negativos reducen.
window.resizeBy(50,-50)
resizeTo(ancho,alto) Establece el tamaño de la ventana.
40APLICACIONES WEB
window.resizeTo(300,200)
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3.4 EL MODELO DE OBJETOS DEL NAVEGADOR
3.4.1 EL OBJETO WINDOW EJERCICIO  22
 Manejo de la ventana en JavaScript (2)
 Desarrollar una página web que contenga seis botones, dos para hacer la ventana 
un poco mayor o menor y cuatro más para desplazar la ventana un poco hacia 
cada dirección.
41APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3.4 EL MODELO DE OBJETOS DEL NAVEGADOR
3.4.1 EL OBJETO WINDOW
 Temporización en JavaScript (1)
 JavaScript proporciona diferentes métodos para
controlar la ejecución de código 
en intervalos específicos de tiempo:
setTimeout(código,x) Evalúa el código después de x milisegundos.
l d f d l óDevuelve un identificador para su cancelación.
id=window.setTimeout(funcion,1000)
clearTimeout(id) Cancela la tarea programada establecida conclearTimeout(id) Cancela la tarea programada establecida con 
setTimeout() identificada con id.
window.clearTimeout(id)
setInterval(código,x) Evalúa el código cada x milisegundos.       
Devuelve un identificador para su cancelación.
id=window.setInterval(funcion,1000)id window.setInterval(funcion,1000)
clearInterval(id) Cancela la tarea periódica establecida con 
setInterval() identificada con id. 
42APLICACIONES WEB
window.clearInterval(id)
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3.4 EL MODELO DE OBJETOS DEL NAVEGADOR
3.4.1 EL OBJETO WINDOW EJERCICIO  23
 Temporización en JavaScript (2)
 Desarrollar una página que contenga tres botones y un segundero:
• El botón Mostrar lanza un mensaje que no aparecerá hasta transcurridos 5 segundos 
desde la pulsación. La aparición de dicho mensaje puede interrumpirse si se pulsa el botón 
l d l d d lOcultar antes de que transcurran los 5 segundos. Hay un segundero que muestra el tiempo 
transcurrido, y éste se puede parar en cualquier momento mediante el botón parar.
43APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3.4 EL MODELO DE OBJETOS DEL NAVEGADOR
3.4.1 EL OBJETO WINDOW EJERCICIO  24
 Temporización en JavaScript (3)
 Desarrollar una página que contenga dos botones, uno para hacer que la ventana 
se balancee lateralmente, y otro para parar dicho balanceo:
• El balanceo consiste en mover la ventana 100 píxeles hacia la derecha de uno en uno cada 
10 milisegundos, repetir el mismo movimiento hacia la izquierda, etc… 
44APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3.4 EL MODELO DE OBJETOS DEL NAVEGADOR
3.4.1 EL OBJETO WINDOW
 Ventanas emergentes (1)
 JavaScript proporciona el método open() del objeto window para abrir 
documentos en nuevas ventanas con unas determinadas características:
open(url,windowName,windowFeatures)
url URL de la página a abrir en la ventana.
windowName Nombre de la ventana.
windowFeatures Características de la ventana.
 La cadena de características contiene, separadas por comas, asignaciones de 
valores a las características (característica=valor) para las que el valor por 
defecto no resulte adecuado.
 La ventana se cierra con el método close():
ventana=window.open("http://www.ucm.es","VentanaUCM","status=1");
45APLICACIONES WEB
ventana.close();
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3.4 EL MODELO DE OBJETOS DEL NAVEGADOR
3.4.1 EL OBJETO WINDOW
 Ventanas emergentes (2)
 Características más usuales:
width Anchura en píxeles.
height Altura en píxeles.
left Desplazamiento desde el marco izquierdo (coordenada x).
top Desplazamiento desde el marco superior (coordenada y).
location Barra de direcciones (valores posibles: yes/1 o no/0).
menubar Barra de menús (valores posibles: yes/1 o no/0).
/ /directories Barra de vínculos (valores posibles: yes/1 o no/0).
toolbar Barra de herramientas (valores posibles: yes/1 o no/0).
scrollbars Barras de desplazamiento (yes/1 no/0 o auto)scrollbars Barras de desplazamiento (yes/1, no/0 o auto).
status Barra de estado (valores posibles: yes/1 o no/0).
resizable Redimensionable (yes/1 o no/0).
46APLICACIONES WEB
resizable Redimensionable (yes/1 o no/0).
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3.4 EL MODELO DE OBJETOS DEL NAVEGADOR
3.4.1 EL OBJETO WINDOW EJERCICIO  25
 Ventanas emergentes (3)
 Desarrollar una página web que cree una nueva ventana en donde se muestre la 
página principal de la Complutense y sólo contenga barras de desplazamiento.
47APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
Índice: Temas 3.3 y 3.4
3.3 El modelo de objetos del Documento 
3.3.1 Introducción al DOM
3.3.2 Acceso a los nodos
3.3.3 Manipulación de nodos
3 3 4 A l t ib t3.3.4 Acceso a los atributos
3.4 El modelo de objetos del Navegador 
3 4 1 El objeto window3.4.1 El objeto window
3.4.2 Otros objetos de utilidad
3.4 EL MODELO DE OBJETOS DEL NAVEGADOR
3.4.2 OTROS OBJETOS DE UTILIDAD
 Los objetos history y location (1)
 El objeto history contiene la lista de las URL de las páginas visitadas. Su 
propiedad length contiene el número de entradas. Algunos de sus métodos son:
• back() Carga la página anterior.
• forward() Carga la página siguiente.
• go(pos) Carga la página en la posición indicada dentro de la lista de historial.
 El objeto location proporciona información de la URL de la página actual. Se 
puede modificar mediante el método assign(). Algunas propiedades son:
• href URL completo.
• hostname Nombre del dominio.
• pathname Ruta al recurso.
• port Puerto de acceso (normalmente 80 pero no se especifica).
49APLICACIONES WEB
• protocol Protocolo (normalmente http:).
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3.4 EL MODELO DE OBJETOS DEL NAVEGADOR
3.4.2 OTROS OBJETOS DE UTILIDAD EJERCICIO  26
 Los objetos history y location (2)
 Probar las propiedades y métodos de los objetos history y location subiendo el 
ejercicio 26 al servidor. 
• Navegar a alguna web desde esta para almacenar algo en el historial y así probar los 
métodos y propiedades del objeto history.
• El botón location lanza una función que muestra todas las propiedades del objeto location
mediante alertas El botón AW GIE carga la web de la asignatura modificando la URL actualmediante alertas. El botón AW‐GIE carga la web de la asignatura modificando la URL actual 
mediante el método assign().
50APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3.4 EL MODELO DE OBJETOS DEL NAVEGADOR
3.4.2 OTROS OBJETOS DE UTILIDAD
 Los objetos navigator y screen (1)
 El objeto navigator contiene información sobre el navegador:
• appName Nombre del navegador.
• appVersion Versión del navegador.
• cookieEnabled Si están habilitadas las cookies.
• platform Plataforma (win, linux, mac, etc…)
• plugins Array con los plugins soportados.
• systemLanguage Lenguaje del sistema.
 El objeto screen contiene información sobre el monitor:
ilWidth A h di ibl l it• availWidth Anchura disponible en el monitor.
• availHeight Altura disponible en el monitor.
51APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3.4 EL MODELO DE OBJETOS DEL NAVEGADOR
3.4.2 OTROS OBJETOS DE UTILIDAD EJERCICIO  27
 Los objetos navigator y screen (2)
 Probar las propiedades y métodos de los objetos  navigator y  screen
mostrando la siguiente información en un párrafo vacío.
• Para mostrar la información correspondiente a cada botón, se puede generar una cadena 
de texto con la misma e incluirla como contenido del párrafo, accesible mediante la 
propiedad innerHTML del mismo.
52APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
apuntesAplicacionesWeb/AW_Tema3.pdf
APLICACIONES WEBAPLICACIONES WEBAPLICACIONES WEBAPLICACIONES WEB
TEMA 3:  PROGRAMACIÓN EN EL LADO DEL CLIENTE
Objetivos
 Introducir lenguaje de programación JavaScript (JS)
 Mostrar el Modelo de Objetos del Documento (DOM)
 Mostrar el modelo de eventos de JS
 Mostrar la utilización de JS para la validación de formularios
Índice: Temas 3.1 y 3.2
3.1 Lenguajes de Script
3.1.1 El lenguaje JavaScript
3.1.2 Primeros pasos con JavaScript
3.2 La sintaxis del lenguaje JavaScript
3.2.1 Variables
3.2.2 Objetos
3 2 3 Instrucciones de control3.2.3 Instrucciones de control
3.2.4 Funciones
Índice: Temas 3.1 y 3.2
3.1 Lenguajes de Script
3.1.1 El lenguaje JavaScript
3.1.2 Primeros pasos con JavaScript
3.2 La sintaxis del lenguaje JavaScript
3.2.1 Variables
3.2.2 Objetos
3 2 3 Instrucciones de control3.2.3 Instrucciones de control
3.2.4 Funciones
3.1 LENGUAJES DE SCRIPT
3.1.1 EL LENGUAJE JAVASCRIPT
 Motivación
 HTML ofrece una funcionalidad básica para la construcción de páginas web.
 Para dotar de un mayor dinamismo a las páginas web se puede complementar 
HTML con otros lenguajes: los lenguajes de Script.
 Los lenguajes de Scripts son lenguajes de programación interpretados con los que 
se pueden crear secuencias de instrucciones (scripts) para insertarlos entre el 
código HTML de las páginas web.
 El código de los scripts se ejecuta a medida que se encuentra durante la 
construcción de la página web.
 Con ese código se pueden dinamizar las páginas, mostrar controles o conectar con 
bases de datos.
 Hay varios lenguajes de script: VBScript, JavaScript, PHP, etc…
4APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3.1 LENGUAJES DE SCRIPT
3.1.1 EL LENGUAJE JAVASCRIPT
 Ejecución de Scripts
 Las secuencias de órdenes que constituyen un script se pueden ejecutar en el 
cliente o en el servidor:
 Programación en el lado del clienteProgramación en el lado del cliente
• La secuencia de órdenes se ejecuta en la máquina cliente, aquella en la que se está usando 
el navegador.g
• Se usa para añadir comportamiento a la página web en la que se encuentra el script.
 P ió l l d d l id Programación en el lado del servidor
• La secuencia de órdenes se ejecuta en el servidor antes de enviar la página web al 
d li tnavegador cliente.
• Se usa para construir dinámicamente la página con posibles accesos a bases de datos que 
determinan el contenido de la página
5APLICACIONES WEB
determinan el contenido de la página.
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3.1 LENGUAJES DE SCRIPT
3.1.1 EL LENGUAJE JAVASCRIPT
 El lenguaje JavaScript
 Aquí nos vamos a ocupar de la programación en el lado del cliente utilizando el 
lenguaje JavaScript.
 Con JavaScript se puede, por ejemplo:Con JavaScript se puede, por ejemplo:
• Dinamizar las páginas con efectos: texto que aparece y desaparece, animaciones, etc…
• Controlar el navegador: crear ventanas emergentes, mostrar mensajes al usuario, etc…Controlar el navegador: crear ventanas emergentes, mostrar mensajes al usuario, etc…
• Validar la información suministrada por el usuario en un formulario.
• Responder a los sucesos generados al interactuar el usuario con el navegador, etc…Responder a los sucesos generados al interactuar el usuario con el navegador, etc…
 Con JavaScript no se puede, por ejemplo:
• Leer o modificar las preferencias del navegador.
• Acceder a los archivos del ordenador del usuario.
6APLICACIONES WEB
• Comunicarse con recursos que no pertenezcan al mismo dominio del script.
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
escribir un archivo
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
base de datos...
3.1 LENGUAJES DE SCRIPT
3.1.1 EL LENGUAJE JAVASCRIPT
 Características (1)
 Sintaxis basada en el lenguaje Java (¡y ahí acaban las similitudes!).
 Es un lenguaje interpretado: no se compila.
 Es un lenguaje débilmente tipado: no se define el tipo de las variables sino que se Es un lenguaje débilmente tipado: no se define el tipo de las variables, sino que se 
deduce por el contexto.
 Distingue las mayúsculas y minúsculas Distingue las mayúsculas y minúsculas.
 No se tienen en cuenta los espacios en blanco y las nuevas líneas, por lo que 
podemos sangrar nuestros scripts para que sean más legiblespodemos sangrar nuestros scripts para que sean más legibles.
 No es necesario terminar cada sentencia con el carácter de punto y coma (;), 
aunque si es recomendableaunque si es recomendable.
 Se pueden incluir comentarios al estilo C/C++ o Java.
7APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
Mario99
Texto escrito a máquina
el navegador tiene un interprete que lee el codig
3.1 LENGUAJES DE SCRIPT
3.1.1 EL LENGUAJE JAVASCRIPT
 Características (2)
 Tiene algunas características de orientación a objetos:
• Elementos que se pueden manipular: ventanas, formularios, elementos de formularios, …
• Cada objeto es de una clase (tipo de objeto): un objeto es un ejemplar de su clase con j ( p j ) j j p
nombre único, que tiene propiedades y métodos.
• Propiedades (atributos): Características de los objetos descritas en sus clases y que 
conforman el contenido de los objetos, siendo valores sencillos u objetos de otras clases.
• Métodos: Acciones que los objetos pueden realizar y que están descritas en las clases en 
forma de funciones. Para que un objeto realice una acción, se le pasa un mensaje al objeto 
con el nombre del método deseado
• Ya están predefinidas muchas clases de objetos con sus propiedades y métodos 
específicos, cuyo acceso se hace uso de la sintaxis de punto: window.status , 
window close()
8APLICACIONES WEB
window.close(). 
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
Mario99
Texto escrito a máquina
 iiiii permite programar funci
3.1 LENGUAJES DE SCRIPT
3.1.1 EL LENGUAJE JAVASCRIPT
 Características (3)
 También se pueden definir funciones propias:
• Bloques de código que se definen como una unidad independiente con nombre, y que se 
invocan colocando su nombre seguido de paréntesis.
• Pueden recibir valores u objetos en forma de argumentos y pueden devolver valores u 
objetos como resultado de su ejecución.
 Se puede responder a eventos:
• Sucesos que se producen en el navegador debidos a la interacción del usuario, tales como 
la pulsación o movimiento del ratón, el envío de los datos de un formulario, etc…
• A cada evento posible se le asocia un manejador de evento, función con el código a 
ejecutar cuando se produce el evento: onClick, onMouseover, onSubmit, ...
• No todos los eventos han de tener asociado un manejador, sino tan sólo aquellos a los que 
d
9APLICACIONES WEB
se quiera responder.
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
Índice: Temas 3.1 y 3.2
3.1 Lenguajes de Script
3.1.1 El lenguaje JavaScript
3.1.2 Primeros pasos con JavaScript
3.2 La sintaxis del lenguaje JavaScript
3.2.1 Variables
3.2.2 Objetos
3 2 3 Instrucciones de control3.2.3 Instrucciones de control
3.2.4 Funciones
3.1 LENGUAJES DE SCRIPT
3.1.2 PRIMEROS PASOS CON JAVASCRIPT
 ¿Dónde colocar scripts en una página HTML?
 En la cabecera de la página (<head>): Se ejecutan al abrir la página.
 En el cuerpo de la página (<body>): Se ejecutan a medida que se encuentran 
durante la construcción de la página web.
 Puede haber múltiples scripts en un archivo HTML.
 ¿Cómo se invocan los scripts en una página HTML?
 Usando la etiqueta  <script>:
• Permite incluir código de script directamente en la página.
• Permite incluir una referencia que apunte a un fichero externo con el código.
 Usando los atributos de etiquetas HTML que soportan scripts: Manejadores de 
eventos, enlaces, etc…
11APLICACIONES WEB TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
Mario99
Texto escrito a máquina
.js
<head>
 <script>
 codigo
 </script>
head>
<body>
 </body>
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
 alert("Mensaje
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99
Texto escrito a máquina
Mario99