Introducción a Javascript

Ya hemos hablado en el primer capítulo del papel de los lenguajes de script en las páginas web de
cliente: capacitan la ejecución de llamadas a los objetos creados por DOM, y permiten, por tanto, la
creación de páginas ricas en contenido dinámico, que son capaces de responder a las necesidades
actuales de programación, aportando recursos multimedia, estilos dinámicos, capacidad de cálculo,
etc.
También hemos comentado que, dentro de los lenguajes de script más populares, Javascript ocupa un
puesto destacado debido a su portabilidad y a su soporte por parte de los navegadores más populares
del mercado: Internet Explorer, Netscape Navigator y Opera. Esto, unido al hecho de que Javascript
sea también un estándar, hacen de este lenguaje el candidato idóneo para la construcción de páginas
dinámicas de cliente.

Afectan a controles CONTROLES.CSS

• Los botones corporativos serán de color azul.Como podremos encontrarnos con <INPUT
STYLE=”Button”> o bien el tag <BUTTON>, para hacerlo más flexible, como clase.
.BOTON_CORP
{ BORDER-RIGHT: #ffffff 2px outset;
BORDER-TOP: #ffffff 2px outset;
FONT-WEIGHT: bold;
BORDER-LEFT: #5895ff 2px outset;
CURSOR: hand;
COLOR: #003366;
BORDER-BOTTOM: #5895ff 2px outset;
FONT-FAMILY: "Verdana";
BACKGROUND-COLOR: #58d2ff
}
Código fuente 55
Con lo que habrá que modificar la línea de la página original por la que muestra el Código
fuente 56.
<INPUT TYPE=”SUBMIT” CLASS=”BOTON_CORP”> (...)
Código fuente 56


la página principal irá información de copyright que irá cursiva y con un tamaño de 7pt y tipo de letra
Arial”. Con lo cual, si echamos un ojo al código original, veremos que va dentro de un párrafo. Por
tanto, asignaremos al tag <P> del copyright, los datos de estilo que muestra el Código fuente 57.
<P ALIGN=center STYLE=”font-style:italic;font-size:7pt;font-family:Verdana”>
(c) grupo EIDOS. Hoja diseñada por Pepe Hevia
</p>
Código fuente 57
Quedando finalmente la página como ya se mostró en la Figura 26. Por último, especificar como
quedará la estructura del directorio:
C:\ EJERCICIOCSS --- \ejercicio.htm
--- \documento.css
--- \vinculos.css
--- \tablas.css
--- \controles.css
--- \fondo.gif

Afectan a tablas TABLAS.CSS

Las tablas de datos tendrán bordes externos y su texto tiene que estar justificado
TABLE
{ border:1;
text-align:justify;

}
Código fuente 52
• Las tablas tendrán un encabezado centrado y de color amarillo de fondo y la fuente en
negrita y cursiva. En este caso, se define como clase ya que no podemos depender de si el
usuario utiliza el tag <TH> para definir las cabeceras.
.CABECERA
{ text-align:center;
background-color:yellow;
font-weight:bold;
font-style:italic;
}
Código fuente 53
Con lo que habrá que modificar en el código, las líneas que muestra el Código fuente 54.
<TD CLASS=”CABECERA”> Cabecera de la tabla </TD> (...)
<TD CLASS=”CABECERA”> Cabecera de la tabla 2 </TD> (...)
Código fuente 54

Afectan a hipervínculos VINCULOS.CSS

• los hipervínculos deben activarse al ponerse el ratón encima, y no deben tener el
subrayado
A,A:link,A:vlink,A:active
{ color:blue;
font-family:Verdana;
text-decoration:none;
}
A:hover
{ color:red;
font-family:Verdana;
text-decoration:none;
}
Código fuente 51

Aplicando estilos. Análisis de requisitos. (II)

b) Y los que son específicos de la página, que irán o bien como bloque o bien como IN-LINE.
En nuestro caso, que es muy específico, será IN-LINE.
• Al final de la página principal irá información de copyright que irá cursiva y con un
tamaño de 7pt y tipo de letra Arial.
Pues manos a la obra....
Afectan al documento en sí DOCUMENTO.CSS


• Todos los textos que se encuentran cerca de una imagen tendrán que estar alineados al
centro de la altura de dicha imagen
IMG
{ text-align=center;
}
Código fuente 49
• La fuente del documento estará basada en la familia de “Verdana”
• Se dejarán márgenes del 2% respecto a los bordes del documento
• El fondo del documento llevará un fondo corporativo que además se desea que esté fijo en
la pantalla y no se mueva al hacer Scroll del documento (en el caso de que esto sea
posible) y que esté centrado en el fondo del escritorio.
BODY
{ font-family:Verdana;
background-image:url(fondo.gif);
background-position:center;
background-attachment:fixed;
margin:2%;
}
Código fuente 50

Aplicando estilos. Análisis de requisitos.

De los requisitos especificados en el enunciado, podemos deducir que nos encontremos dos maneras
de definir los estilos:
a) los que afectan no a esta página sino a todas: son aquellos que establecen los estilos
“corporativos”. Por tanto, es necesario que los podamos reutilizar. Con lo cual los
definiremos en ficheros independientes a la página, con extensión .CSS. Y además,
intentaremos agrupar los estilos por objetivos y funcionalidades:
Afectan al documento en sí DOCUMENTO.CSS
• Todos los textos que se encuentran cerca de una imagen tendrán que estar alineados al
centro de la altura de dicha imagen
• La fuente del documento estará basada en la familia de “Verdana”
• Se dejarán márgenes del 2% respecto a los bordes del documento
• El fondo del documento llevará un fondo corporativo que además se desea que esté
fijo en la pantalla y no se mueva al hacer Scroll del documento (en el caso de que esto
sea posible).
Afectan a hipervínculos VINCULOS.CSS
• los hipervínculos deben activarse al ponerse el ratón encima y no estarán subrayados
Afectan a tablas TABLAS.CSS
• Las tablas de datos tendrán bordes externos y su texto tiene que estar justificado
• Las tablas tendrán un encabezado centrado y de color amarillo de fondo y la fuente en
negrita y cursiva
Afectan a controles CONTROLES.CSS
• Los botones corporativos serán de color azul