Anda di halaman 1dari 27

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011

Hojas de Estilo en Cascada (CSS)


Finalidad del uso de CSS La razn principal por la que se usa CSS en el diseo de sitios web, es para separar lo que es el contenido de una pgina (texto, imgenes, etc.), de los detalles estticos, es decir, de formatos de fuente, colores, alineaciones, etc. Qu nos posibilita esta separacin? Poder tener un sitio con muchas pginas que luzcan similares y a la vez lograr un mantenimiento ms gil y sencillo, debido a que un nico archivo de estilo puede ser reutilizado en muchas pginas. Incorporacin de estilos en archivos HTML

HTML Una pgina web elemental, tiene al menos ciertas Etiquetas (o tags) que permiten ir dibujando lo que se desea ver en la pgina. Estas etiquetas pertenecen al lenguaje HTML. CSS permite personalizar stas etiquetas, cambindole alguna propiedad, como por ejemplo fondo, borde, fuente, color, etc. Toda pgina sencilla en HTML debe contener al menos las siguientes etiquetas: <html> <head> <title>Mi primer pagina</title> </head> <body> </body> </html> <html> y </html>: tienen la funcin de indicar donde inicia y finaliza una pgina
Prof. Myriam Ruiz Pg. 1

Tc c S

< ody>y < ody> Es donde realmente dibujaremos nuestra pgina. Todo lo que escribamos ah se mostrar en lo que es la pgina en s. Tres formas de agregar CSS en un archivo HTML 1. Dentro de una etiqueta Esto se aplicar solo a la etiqueta en la que se realice. Empie a por style= y dentro van todas las propiedades CSS. <h1 style= "color:blue; background-color:#669999 ">Bienvenidos< h1> 2. Dentro del mismo html Se escribe entre las etiquetas de head, y contiene cada etiqueta (pero sin <> , seguido de llaves, entre las cuales se modificarn las propiedades.
<head> <style type="text/css"> H1 { Color:blue; Background-color:lightyellow; } </style> </head>
 
2 e e SS y J v Sc

  

 

73 !(

( 33 % (

'%'

< le> y <


'%'

0& 3 '3 %'

( % 1$ 3 ( 4 0$ 3 02 1 !( 0! ( 0) $ ( '%& %$ ! # ! ( 0 0& 0 5$ $ ( 0% %! 6 '2 %3 0'( & $

    
e e c c

"

"

< e
 8

>y< e

"

e e e e se e s c es TML, c s los es los y ee e s los sc s le> e c e el ttulo que te la pgina en la parte superior de la ventana del navegador.

>

 

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011

3. En un archi o externo Las propiedades estticas de CSS estarn en un archivo separado del HTML. Deber invocarse el archivo CSS mediante la etiqueta Lin .

<head> <li el </head>

t lesheet t

e="text/ ss"href="miestil . ss">

Rel: indica que se relacionar el HTML con una hoja de estilo (stylesheet). Type: Le indica al navegador que se trata de un archivo de texto, ms especficamente de CSS. Href: Indica la ubicacin y nombre del archivo de estilos, con su extensin (.css). Ubicacin del CSS

 Si el archivo .css est ubicado en la misma carpeta que el archivo .htm, colocaremos solo el nombre completo del archivo css.  Si desde donde tenemos el html hubiera que ingresar a una carpeta, en href pondremos:No breCarpeta/miestilo.css  Si el archivo css estuviera un nivel ms arriba que el html, se debe indicar que para encontrarlo se sube un nivel con puntos: ../miestilo.css
Tipo de elementos que podemos personalizar mediante estilos 1. Etiquetas: nombrando la etiqueta sin <>, entre llaves { } se personaliza Ejemplo: En el archivo HTML ponemos: <p> Este es un prrafo</p> En el archivo de estilo ponemos:
P{
E

l r: reen; font famil :verdana; text ali n: enter; text decoration: nderline;

Prof. Myriam Ruiz

Pg. 3

Tcnico Superior en Informtica Aplicada

Es decir, decimos que los prrafos tendrn: Color de fuente verde, fuente de tipo verdana, texto alineado al centro y subrayado . Luce as:

2. Id: Cuando queremos hacer referencia a un nico elemento html, podemos ponerle un Id (identificador), con el cual poder luego nombrar ese elemento en el archivo CSS. Esto lo usamos cuando queremos que algn tipo de etiqueta est personalizada (ej.: alguna de las h1, o de las p), pero no todas. Ejemplo: En el HTML ponemos <h1 id="titulo"> Bienvenidos</h1> En el estilo ponemos #titulo { Background:cyan; color: lue; order-color:green; order-style:dotted; order-width:3 x; // Para que un borde se vea debe tenerestilo y grosor Observe que el nombre de una Id en el CSS va antecedida del s mbolo #

Pg.4

Apunte de CSS y avaScript

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011

3. Clases: Cuando queremos utilizar en muchas etiquetas la misma configuracin CSS, podemos crear una clase, que podr ser invocada en etiquetas diferentes. Para insertar una clase se usa la palabra class y para modificarla en el CSS se usa un punto . delante del nombre de clase. Ejemplo En el HTML ponemos: <table> <tr> <td class="celdai">Dato 1</td> <td class="celdap">Dato 2</td> <td class="celdai">Dato 3</td> <td class="celdap">Dato 4</td> </tr> </table> En el CSS ponemos: .celdai { bac ground-color:#CCFF66;} .celdap { bac ground-color:#CC99FF;}
G G

Prof. Myriam Ruiz

Pg. 5

Tcnico Superior en Informtica Aplicada

Etiquetas que vamos a modificar mediante C Etiquetas HTML de Texto

<pre></pre>: Texto pre-formateado (toma todos los espaciados y saltos de lnea que escribamos en el archivo HTML) <h1></h1>: Ttulo ms grande <h6></h6>: Ttulo ms pequeo Enlaces <ahref= URL ></a>: Hipervnculo <ahref= mailto:EMAIL ></a>: Hipervnculo mailto (para envo de correo) <aname= name ></a>: Indica una marca donde ira un hipervnculo <ahref= #name ></a>: Enlaza hacia algn lugar dentro del mismo sitio Formato y presentacin <p></p>: Nuevo prrafo <br>: Inserta un interlineado suave. Salto de lnea <ol></ol>: Lista ordenada <li></li>: Entrada en una lista <ul></ul>: Lista con vietas sin ordenar <div>: Para dar formato a porciones grandes del documento html, incluyendo hojas de estilo Elementos Grficos <imgsrc= name >: Incorpora una imagen <hr>: Linea horizontal Tablas <table></table>: Crea tabla <tr></tr>: Crea filas en una tabla <td></td>: Crea columna en una fila
Pg.6 Apunte de CSS y avaScript

II

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011

<th></th>: Encabezado de tabla, texto normal, negrita y centrado <tdcolspan=#>: Expansin de una celda, en nmero de columnas <tdrowspan=#>: Expansin de una celda, en nmero de celdas <tdnowrap>: Texto continuo dentro de una celda Formularios <form></form>: Formulario <select name= name ></select>: Mendesplegable <option></option>: Opcin del men desplegable <textarea name= name cols=40 rows=8></textarea> Crea una caja de texto, columnas es el ancho y las lineas la altura (cols y rows) <input type= chec box name= name > : Creaun chec box. <input type= radio name= name value= x > : Creabotn de radio. <inputtype=textname= name size=20> : Crea una opcin de texto para entrada de informacin <input type= submit value= name >: Creabotn de envo <input type= image border=0 name= name src= name.gif > : Creabotn de envo con imagen <inputtype= reset >: Crea botn de limpieza (reset).
P P

Maquetacin de una pgina Web: Las divisiones de la pgina en encabezado, men, contenido y pie, que antes se acostumbraban hacer con tablas, hoy en da se acostumbra hacerlas con la etiqueta Div y CSS. Esto se debe a que es ms fcil modificar la estructura de muchas pginas mediante la modificacin de su hoja de estilos, que tener que modificar varias tablas en las distintas pginas de nuestro sitio.

Prof. Myriam Ruiz

Pg. 7

Tcnico Superior en Informtica Aplicada

TABLA DE PROPIEDADES CSS


Fuente <Font>

Atributo
font-family font-style font-weight

Que hace
Elije el ti o de fuente que usar ambia el formato Grosor de la letra

Valores
arial ; sans-serif ; helvetica ; verdana normal ; italic ; oblique ; normal ; bold ; bolder ; lighter ; 100..500..900 ; xx-small ; x-small ; small ; medium ; large ; x-large ; xx-large ;

font-size

Tamao de la letra

. Texto <Text>

Atributo
word-spacing letter-spacing text-decoration

Que hace
Espaciado entre Palabras Espaciado entre letras Subrayado

Valores
normal y unidades de medida SS ; normal y unidades de medida SS ; none ; [ underline ; overline ; line through ] ; baseline ; sub ; super ; top ; text -top ; middle ; capitalize ; uppercase ; lowercase ; none; left ; right ; center ; justify ; normal y unidades de medida SS ; nombre o valor RGB

vertical-align

Alineacin del texto vertical

text-transform

Transformar a letra capital , mayusc., minus. Alineacin del texto Altura de la linea olor de fuente

text-align line-height color .

Fondo <Background>

Atributo
background-color background-image: url(imagen.ext) backgroundattachment

Que hace
olor de fondo Imagen de fondo

Valores
color, nombre o valor RGB nombre de la imagen con path relativo o absoluto scroll ; fixed

Que el fondo de mueva con el texto o quede fijo

Pg.8

Apunte de CSS y avaScript

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011


background-position Posicin del fondo top ; center ; bottom ; left ; right ; unidades de medida SS ; repeat-x; repeat-y ; repeat; no-repeat

background-repeat . Clasificacin

Si se repite el fondo

Atributo
display white-space

Que hace
Indica como mostrar un objeto Indica cmo tratar los espacios en blanco Tipo de Vieta

Valores
block ; inline ; list-item ; none normal ; pre ; nowrap ;

list-style-type

disc ; circle ; square ; decimal ; lower-roman ; upper-roman ; lower-alpha ; URL - nombre de la imagen inside ; outside ;

list-style-image list-style-position

Imagen para vieta

Marco <Box>

Atributo
margin-top margin-right margin-bottom margin-left padding-top padding-right padding-bottom padding-left border-top-width

Que hace
Margen superior Margen derecho Margen inferior Margen izquierdo Espacio interno superior Espacio interno derecho Espacio interno inferior Espacio interno izquierdo Anchura de borde superior

Valores
unidades de medida unidades de medida unidades de medida unidades de medida unidades de medida unidades de medida unidades de medida unidades de medida SS ; SS ; SS ; SS ; SS ; SS ; SS ; SS ;

thin ; medium ; thick ; unidades de medida SS ; thin ; medium ; thick ; unidades de medida SS ; thin ; medium ; thick ; unidades de medida SS ;

border-right-width

Anchura de borde derecho

border-bottom-width

Anchura de borde inferior

Prof. Myriam Ruiz

Pg. 9

Tcnico Superior en Informtica Aplicada


border-left-width Anchura de borde izquierdo thin ; medium ; thick ; unidades de medida SS ; thin ; medium ; thick ; unidades de medida SS ; color, nombre o valor RGB ; none ; dotted ; dashed ; solid ; double ; groove ; ridge ; none ; dotted ; dashed ; solid ; double ; groove ; ridge ; none ; dotted ; dashed ; solid ; double ; groove ; ridge ; none ; dotted ; dashed ; solid ; double ; groove ; ridge ; none ; dotted ; dashed ; solid ; double ; groove ; ridge ; auto ; unidades de medida SS ; auto ; unidades de medida SS ; left ; right ; none ; left ; right ; none ; both ;

border-width

Anchura de todos los bordes

border-color border-style

olor de borde Estilo de la linea del borde (punteado, solido, doble, etc) Borde Superior

border-top

border-right

BordeDerecho

border-bottom

Borde Inferior

border-left

BordeIzquierdo

width height float clear

Anchura de un objeto Altura de un objeto Flotar o posicionarse Indica interrumpir el esquema de los objetos que flotan

Ejemplos
Creacin de Hipervnculos y A pginas externas: <ahref="http://www.lagaceta.com.ar/">LaGaceta</a> y A pginas dentro de nuestro sitio, dentro de la misma carpeta desde donde parte el hipervnculo: <a href="interactivo.htm">Interactivos</a> y A pginas dentro de nuestro sitio, dentro de una carpeta en un nivel ms abajo que desde donde parte el hipervnculo: <ahref="textos/programa.htm">Programa</a>

Pg.10

Apunte de CSS y avaScript

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011

y A pginas dentro de nuestro sitio, por encima del nivel desde donde parte el hipervnculo: <a href="../lin s.htm">Lin s</a> Men con CSS En el HTML ponemos: <ahref="http:\\www.lagaceta.com.ar">LaGaceta</a> <ahref="http:\\www.infobae.com">Infobae</a> <ahref="http:\\www.lanacion.com.ar">LaNacion</a> En el archivo de estilo ponemos: a{ bac ground-color:#CCCCCC; display:bloc ; width:80px; text-align:center; border-bottom:2px solid; text-decoration:none; padding:3px; } a:hover { bac ground-color:#FFFF66; border-top:3px solid blue; border-left:3px solid blue; border-bottom:0px; width:77px; } a:visited, a:lin { color:#006600;}
T T T T S S

Prof. Myriam Ruiz

Pg. 11

Tcnico Superior en Informtica Aplicada

Explicacin 1. Se cambia las propiedades de los hipervnculos para que de entrada todos tengan:  un fondo de color bac ground-color  un ancho para el fondo display:bloc y width  un borde border  una alineacin text-align  y no tengan subrayado: text-decoration:none 2. Tenemos que configurar un elemento del hipervnculo que nos permita que al acercar el mouse a un lin (a:hover) suceda lo siguiente:  su color de fondo cambie bac ground-color  Se agregue un borde superior y uno a la izquierda, y se saque el borde inferior, para dar la sensacin de que se lo est presionando bordertop y border-left  Ajustar el ancho del hipervnculo, para que sea igual a los que no estamos por presionar, teniendo en cuenta que hemo s agregado un borde izquierdo width 3. Se establece que el color de los hipervnculos sin visitar y no visitados tendrn el mismo color a:lin , a:visited { color:#006600;}
` Y X W V

Pg.12

Apunte de CSS y avaScript

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011

Maquetacin de una pgina Web: 1. Realizar en un archivo HTML, las delimitaciones de la pgina en, por ejemplo, encabezado, men, contenido y pie, mediante la utilizacin de la etiqueta Div: <html> <body> <div id="contenedor"> <div id="cabecera"> Encabezado</div> <div id="menu">Lateral Izquierdo</div> <div id="contenido">Lateral derecho</div> <div id="pie">Pie</div> </div> </body> <html> 2. En la hoja de estilos realizar las siguientes configuraciones: I. Con el selector universal *, indicamos que todos los mrgenes y el espacio que se deja entre el contenido de una etiqueta y su borde valdrn cero. * { margin:0; padding:0; } II. Aqu definimos el ancho (width), la altura (height, medida en em, que equivale a la altura de la letra m de la fuente que usemos por defecto) y color de fondo, del div que contiene al resto de los div. #contenedor { width:100%; height:38em; bac ground-color:#FF0000; }
a

Prof. Myriam Ruiz

Pg. 13

Tcnico Superior en Informtica Aplicada

III. Definimos color de fondo y altura del encabezado #cabecera { bac ground-color:#CCCC99; height:3em; } IV. Indicamos que el men flotar hacia la izquierda (float:left) , tendr un ancho, un color de fondo y una altura #menu { float:left; width:15%; bac ground-color:#CC99CC; height:32em; } V. Luego, sin sacar el flotado, indicaremos que el contenido se acomode ocupando el 100% del espacio que quede a continuacin del men, tenga un color de fondo y una altura idntica al div del men. #contenido { width:100%; bac ground-color:#FFFF99; height:32em;} VI. Por ltimo, mediante clear:left, haremos que el pie no intente ubicarse al costado del contenido, sino que se ubique debajo, rompiendo el flotamiento a la izquierda que vena aplicndose. #pie { clear:left; bac ground-color:#66FFFF; height:3em; }
Pg.14 Apunte de CSS y avaScript

c c c c

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011

Al final queda una delimitacin como la siguiente:

Formulario <HTML><HEAD> <TITLE>Formulario</TITLE></HEAD> <BODY> <FORM ACTION="mailto:pepe@yahoo.com.ar" METHOD="POST"> Nombre: <INPUT type="text" name="nombre" value="Ana" size="20" maxlength="20"><br> Email: <INPUT type="text" name="mail" value="pepe@argentina.com" size="20" maxlength="25"><br> Club: <select name="club"> <option value="River">River</option> <option value="Boca">Boca</option> <option value="Indep">Independiente</option> <option value="Racing">Racing</option> </select><br> Edad: <input type="radio" name="edad" value="18-20"> De 18 a 20 <input type="radio" name="edad" value="21-24"> De 21 a 24 <input type="radio" name="edad" value="25mas"> De 25 en adelante<br>

Prof. Myriam Ruiz

Pg. 15

Tcnico Superior en Informtica Aplicada

Que hace falta?: <input type="chec box" name="apu">Apuntes <input type="chec box" name="ejplos">Ejemplos <input type="chec box" name="ejcios">Ejercicios<br> Mensaje:<br> <TEXTAREA name="msg" cols="20" rows="10"></TEXTAREA><br> <INPUT type="submit" value="Enviar"> <INPUT type="reset" name="borrar" value="Borrar"> </FORM></BODY></HTML> Se obtiene lo siguiente:
e e e

CSS en Formulario form { border: 10px solid #666699; bac ground-color:#ccc; padding:10px; width:400px;} input {
Pg.16 Apunte de CSS y avaScript

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011

bac ground-color:#CC99FF;} select { bac ground:#f00; color:#000; border:dotted 3px #fff;} .botones { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px; bac ground-color: #333333; color: #FFFFFF; margin-right: 6px; }
f f f

Prof. Myriam Ruiz

Pg. 17

Tcnico Superior en Informtica Aplicada

JavaScri t
Cuadros de dilogo 1. Mtodo alert(): Sirve solo para mostrar mensajes
i
Valor por defecto Apunte de CSS y JavaScript

alert( Te to +variable Por ejemplo:


g g h g

\n Produce un salto de Lnea


g s

alert( Bienvenido!\nEsta Web est dedicada a JavaScript. )

2. Mtodo prompt() del objeto window: muestra una caja de te to en la que el usuario puede escribir. Tambin muestra dos botones, Aceptar y Cancelar. Ejemplo: variable =prompt( Su color favorito es: , Azul )
q qq q p

Este cuadro de dilogo permite capturar datos introducidos por el usuario y realizar una accin en base a ellos. Por ejemplo, podemos pedirle al usuario que introduzca su nombre, y despus mostrarlo: < TML>< EAD> <TITLE>Ejemplo 2.2: pgina que pide el nombre< TITLE> < EAD> <B DY> <SCRIPT type= te t/javaScript > nombre = prompt( Introduzca su nombre: , )
Pg.18

qq q

p q

t r

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011

document.write( < 2>Bienvenido, + nombre + </H2>") </SCRIPT> <P>Aqu va el resto de la pgina...</P> Concatenacin </B DY> de te to con </HTML> variable Aparece el cuadro de dilogo:
y u u v u x w

Y luego se escribe en la pgina:

Funciones de conversin de tipos Todo lo que se ingresa a travs de prompt se considera texto, por lo tanto, antes de poder hacer operaciones matemticas deber transformarse a nmero entero o con decimales: parseInt(valor): convierte te to a nmero entero parseFloat(valor): convierte te to a nmero real o con decimal. Ejemplo: num=prompt("Ingrese un nmero",""); num=parseInt(num); // ahora la variable si contiene un nmero
x

Prof. Myriam Ruiz

Pg. 19

Tcnico Superior en Informtica Aplicada

3. Mtodo confirm() del objeto window:Mostrar un cuadro de dilogo con el mensaje de texto que le pasemos como parmetro, y dos botones, Aceptar y Cancelar: rpta=confirm("Desea volver al inicio de la pgina?")

Este mtodo devuelve verdadero (true) si se pulsa Aceptar y fals o (false) si se pulsa Cancelar, lo cual puede asignarse a una variable y luego analizarlo mediante la estructura condicional if.

Estructuras de control y if - Sintaxis if (condicin) {Acciones a realizar en caso positivo} else {Acciones a realizar en caso negativo} Ejemplo if Sencillo <script type="text/javascript"> conf = confirm("Desea Seguir?") if (conf) { document.write("Presion Aceptar"); } else { document.write("Presion Cancelar"); } </script>
Pg.20 Apunte de CSS y avaScript

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011

Ejemplo ifanidado: Ingresar 3 nmeros y determinar cul es mayor vara,b,c; a=parseInt(prompt("ingrese A:","")); b=parseInt(prompt("ingrese B:","")); c=parseInt(prompt("ingrese C:","")); if (a>b) { if (a>c) { document.write("a es el mayor"); } } else { if (b>c){ document.write("b es el mayor"); } else { document.write("c es el mayor"); } }

y switch Se utiliza cuando una variable puede tomar ms de 2 valores switch (expresin) { case valor1: Tarea1; Brea ; case valor2: Tarea2; Brea ; Default: Tarea; }

Prof. Myriam Ruiz

Pg. 21

Tcnico Superior en Informtica Aplicada

Ejemplo: Switch (dia_de_la_semana) { case 1: document.write("Es Lunes") brea case 2: document.write("Es Martes") brea case 3: document.write("Es Mircoles") brea case 4: document.write("Es ueves") brea case 5: document.write("Es viernes") brea case 6: case 7: document.write("Es fin de semana") brea default: document.write("Ese da no existe") }

y for Se utiliza cuando debemos hacer una misma tarea un nmero de veces que conocemos de antemano for (inicializar contador; final de repeticin ; como cambia el contador ) { Tareas a realizar } Ejemplo: mostrar los distintos tamaos de encabezados h for (i=1;i<6;i++){ document.write("<H" + i +">Encabezado "+ i+ "</H" + i + "<br>");
Pg.22 Apunte de CSS y avaScript

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011

y while Se utiliza cuando debemos hacer una misma tarea un nmero de veces que no conocemos de antemano

while (condicin){ tarea a ejecutar } y do while do { tareas } while (condicin) Ejemplo: varnum; do { num=prompt("Ingrese un nmero","") } while (isNaN(num))

isNaN: es una funcin que devuelve verdadero si lo que recibe como parmetro no es no un nmero.
Pg. 23

Prof. Myriam Ruiz

Tcnico Superior en Informtica Aplicada

Arreglos (Array) Cuando tenemos que ingresar muchos valores y conservarlos en memoria, no es til usar variables de memorias aisladas y con nombres diferentes, es mejor crear un nico nombre de variable de tipo arreglo, y diferenciar los datos por la posicin que ocupan en el arreglo. Creacin (declaracin) de Arraysjavascript

1. Si no tenemos determinada la cantidad de componentes que tendr, se declara as: varmiArray = new Array(); Tenga en cuenta de respetar las minsculas y maysculas como aparecen. 2. Tambin podemos crear el array avascript especificando el nmero de componentes que va a tener. varmiArray = new Array(10); 3. Si sabemos los datos que contendr el arreglo, podemos declararlo as: varmiArray = new Array("Lunes","Martes","Miercoles","Jueves","viernes"); Cargar datos en un arreglo Escribir el nombre del arreglo, seguido de corchetes que contengan el ndice de la posicin donde queremos guardar el dato. Ejemplo: varaColores = new Array(); acolores[0] = "Rojo"; acolores[1] = "Verde"; acolores[2] = "Azul"; Lo ms prctico para cargar un arreglo de muchas componentes es utilizar la estructura for.
Pg.24 Apunte de CSS y avaScript

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011

Ejemplo: Ingresar 3 nmeros y calcular su promedio varnum = new Array(3) ; // Primero ingresar los nmeros en el arreglo for (i=0;i<3;i++){ num[i] = prompt("Ingrese el nmero " + i, ""); } suma=0; // Segundo, leer el arreglo e ir sumando sus elementos for (i=0;i<3;i++){ suma = suma + num[i];} Promedio = suma/3; alert("Promedio= "+ Promedio); Observe: Todo recorrido que se haga con for para leer o escribir en un arreglo, debe comenzar con un contador en cero. Funciones y Cmo se escribe una funcin functionnombrefuncion (){ instrucciones de la funcin... return variable;} Veamos un ejemplo de funcin para escribir en la pgina un mensaje de bienvenida dentro de etiquetas <H1> para que quede ms resaltado. functionescribirBienvenida(){ document.write("<H1>Hola a todos</H1>") } y Cmo llamar a una funcin NombreDeLaFuncion()

Prof. Myriam Ruiz

Pg. 25

Tcnico Superior en Informtica Aplicada

Ejemplocompleto: <html><head><title>Ejemplo JavaScript</title> <script type="text/javascript"> function Cuadrado (valor){ return valor*valor; } </script></head> <body> <script type="text/javascript"> num = parseInt(prompt("Ingrese un nmero", "")); cuad = Cuadrado(num); alert ("Su cuadrado es= " + cuad); </script></body></html> y Invocar elementos por su name Insertamos una imagen (img) en el body, le damos un nombre (name) y debajo insertamos un botn y programamos en su evento onClic para que llame a una funcin que cambiar el path o ubicacin (src) de la imagen mostrada (con lo que mostrar otra imagen). <html><head> <script type="text/javascript"> function Cambiar() { document.imagen.src="foto2.jpg" } </script> <title>JavaScript: invocandoelementos</title> Cuando se produzca el evento </head> clic llamar a la funcin <body> <imgname="imagen" src="foto1.jpg"> <input type="button" value="OtraImagen" onClic ="Cambiar()"> </body></html>
Botn

Pg.26

Apunte de CSS y JavaScript

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011

Indice
Formas de Insertar un Estilo 2 3 Insertar un archivo CCS (Lin ) Personalizar etiqueta .. 3 Personalizar Id ..4 Personalizar Clase (class) ..5 Breve detalle de etiquetas HTML 6 Para qu sirve la maquetacin CSS 7 Tabla de Propiedades CSS 8 Creacin de Hipervnculos (<a>) .. 10 Men con CSS . 11 Maquetacin con CCS (Titulo, men, contenido y pie). . 13 Formulario (form) 15 CSS en formulario . 16 alert y prompt . 18 confirm . 20 If (Si) 20 switch (Segn) . 21 for (Hacer) . 22 While (Mientras) . .. 23 Arreglo (Array) . 24 Crear Funciones . . 25 Invocar elementos por su name .. 26

Prof. Myriam Ruiz

Pg. 27