Apuntes Css y Js

34
Planeamiento y Control de Proyectos – Instituto Nicolás Avellaneda - 2011 Hojas de Estilo en Cascada (CSS) Finalidad del uso de CSS La razón principal por la que se usa CSS en el diseño de sitios web, es para separar lo que es el contenido de una página (texto, imágenes, etc.), de los detalles estéticos, es decir, de formatos de fuente, colores, alineaciones, etc. ¿Qué nos posibilita esta separación? Poder tener un sitio con muchas páginas que luzcan similares y a la vez lograr un mantenimiento más ágil y sencillo, debido a que un único archivo de estilo puede ser reutilizado en muchas páginas. Incorporación de estilos en archivos HTML HTML Una página web elemental, tiene al menos ciertas Etiquetas (o tags) que permiten ir “dibujando” lo que se desea ver en la página. Estas etiquetas pertenecen al lenguaje HTML. CSS permite personalizar éstas etiquetas, cambiándole alguna propiedad, como por ejemplo fondo, borde, fuente, color, etc. Toda página sencilla en HTML debe contener al menos las siguientes etiquetas: <html> Prof. Myriam Ruiz Pág. 1

Transcript of Apuntes Css y Js

Page 1: Apuntes Css y Js

Planeamiento y Control de Proyectos – Instituto Nicolás Avellaneda - 2011

Hojas de Estilo en Cascada (CSS)

Finalidad del uso de CSS

La razón principal por la que se usa CSS en el diseño de sitios web, es para separar lo que es el contenido de una página (texto, imágenes, etc.), de los detalles estéticos, es decir, de formatos de fuente, colores, alineaciones, etc.

¿Qué nos posibilita esta separación? Poder tener un sitio con muchas páginas que luzcan similares y a la vez lograr un mantenimiento más ágil y sencillo, debido a que un único archivo de estilo puede ser reutilizado en muchas páginas.

Incorporación de estilos en archivos HTML

HTML

Una página web elemental, tiene al menos ciertas Etiquetas (o tags) que permiten ir “dibujando” lo que se desea ver en la página. Estas etiquetas pertenecen al lenguaje HTML.

CSS permite personalizar éstas etiquetas, cambiándole alguna propiedad, como por ejemplo fondo, borde, fuente, color, etc.

Toda página 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 función de indicar donde inicia y finaliza una página

Prof. Myriam Ruiz Pág. 1

Page 2: Apuntes Css y Js

Técnico Superior en Informática Aplicada

<head> y </head>: delimitan la zona donde, por lo general, insertaremos elementos adicionales al HTML, como son los estilos y los scripts.

<title> y </title>: encierran el título que tendrá la página en la parte superior de la ventana del navegador.

<body> y </body>: Es donde realmente “dibujaremos” nuestra página. Todo lo que escribamos ahí se mostrará en lo que es la página 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. Empieza 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 modificarán las propiedades.

<head><style type="text/css">

H1 {Color:blue;Background-color:lightyellow; }

</style></head>

Pág.2 Apunte de CSS y JavaScript

Page 3: Apuntes Css y Js

Planeamiento y Control de Proyectos – Instituto Nicolás Avellaneda - 2011

3. En un archivo externo

Las propiedades estéticas de CSS estarán en un archivo separado del HTML. Deberá invocarse el archivo CSS mediante la etiqueta Link.

<head><link rel="stylesheet" type="text/css" href="miestilo.css">

</head>

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, más específicamente de CSS.Href: Indica la ubicación y nombre del archivo de estilos, con su extensión (.css).

Ubicación 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: NombreCarpeta/miestilo.css

Si el archivo css estuviera un nivel más 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 párrafo</p>

En el archivo de estilo ponemos:P {color:green; font-family:verdana; text-align:center; text-decoration:underline;}

Prof. Myriam Ruiz Pág. 3

Page 4: Apuntes Css y Js

Técnico Superior en Informática Aplicada

Es decir, decimos que los párrafos tendrán: 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 algún 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:blue; border-color:green;border-style:dotted; border-width:3px; // Para que un borde se vea } debe tener estilo y grosor

Observe que el nombre de una Id en el CSS va antecedida del símbolo #

Pág.4 Apunte de CSS y JavaScript

Page 5: Apuntes Css y Js

Planeamiento y Control de Proyectos – Instituto Nicolás Avellaneda - 2011

3. Clases : Cuando queremos utilizar en muchas etiquetas la misma configuración 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 {background-color:#CCFF66;}.celdap {background-color:#CC99FF;}

Prof. Myriam Ruiz Pág. 5

Page 6: Apuntes Css y Js

Técnico Superior en Informática Aplicada

Etiquetas que vamos a modificar mediante CSS

Etiquetas HTML de Texto

<pre></pre>: Texto pre-formateado (toma todos los espaciados y saltos de línea que escribamos en el archivo HTML)

<h1></h1>: Título más grande<h6></h6>: Título más pequeño

Enlaces

<a href=”URL”></a>: Hipervínculo<a href=”mailto:EMAIL”></a>: Hipervínculo mailto (para envío de correo)<a name=”name”></a>: Indica una marca donde ira un hipervínculo<a href=”#name”></a>: Enlaza hacia algún lugar dentro del mismo sitio

Formato y presentación

<p></p>: Nuevo párrafo<br>: Inserta un interlineado suave. Salto de línea<ol></ol>: Lista ordenada<li></li>: Entrada en una lista<ul></ul>: Lista con viñetas sin ordenar<div>: Para dar formato a porciones grandes del documento html,

incluyendo hojas de estilo

Elementos Gráficos

<img src=”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

Pág.6 Apunte de CSS y JavaScript

Page 7: Apuntes Css y Js

Planeamiento y Control de Proyectos – Instituto Nicolás Avellaneda - 2011

<th></th>: Encabezado de tabla, texto normal, negrita y centrado<td colspan=#>: Expansión de una celda, en número de columnas<td rowspan=#>: Expansión de una celda, en número de celdas<td nowrap>: Texto continuo dentro de una celda

Formularios

<form></form>: Formulario<select name=”name”></select>: Menú desplegable<option></option>: Opción 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=”checkbox” name=”name”>: Crea un checkbox.<input type=”radio” name=”name” value=”x”>: Crea botón de radio.<input type=text name=”name” size=20>: Crea una opción de texto para

entrada de información<input type=”submit” value=”name”>: Crea botón de envío <input type=”image” border=0 name=”name” src=”name.gif”>: Crea botón de envío con imagen<input type=”reset”>: Crea botón de limpieza (reset).

Maquetación de una página Web:

Las divisiones de la página en encabezado, menú, contenido y pie, que antes se acostumbraban hacer con tablas, hoy en día se acostumbra hacerlas con la etiqueta Div y CSS.

Esto se debe a que es más fácil modificar la estructura de muchas páginas mediante la modificación de su hoja de estilos, que tener que modificar varias tablas en las distintas páginas de nuestro sitio.

Prof. Myriam Ruiz Pág. 7

Page 8: Apuntes Css y Js

Técnico Superior en Informática Aplicada

TABLA DE PROPIEDADES CSS Fuente <Font>

Atributo Que hace Valores

font-family Elije el tipo de fuente que usará arial ; sans-serif ; helvetica ; verdana

font-style Cambia el formato normal ; italic ; oblique ;

font-weight Grosor de la letra normal ; bold ; bolder ; lighter ; 100..500..900 ;

font-size Tamaño de la letra xx-small ; x-small ; small ; medium ; large ; x-large ; xx-large ;

.

Texto <Text>

Atributo Que hace Valores

word-spacing Espaciado entre Palabras normal y unidades de medida CSS ;

letter-spacing Espaciado entre letras normal y unidades de medida CSS ;

text-decoration Subrayado none ; [ underline ; overline ; line -through ] ;

vertical-align Alineación del texto vertical baseline ; sub ; super ; top ; text-top ; middle ;

text-transform Transformar a letra capital, mayusc., minus.

capitalize ; uppercase ; lowercase ; none;

text-align Alineación del texto left ; right ; center ; justify ;

line-height Altura de la linea normal y unidades de medida CSS ;

color Color de fuente nombre o valor RGB

.

Fondo <Background>

Atributo Que hace Valores

background-color Color de fondo color, nombre o valor RGB

background-image: url(“imagen.ext”)

Imagen de fondo nombre de la imagen con path relativo o absoluto

background-attachment

Que el fondo de mueva con el texto o quede fijo

scroll ; fixed

background-position Posición del fondo top ; center ; bottom ; left ; right ; unidades

Pág.8 Apunte de CSS y JavaScript

Page 9: Apuntes Css y Js

Planeamiento y Control de Proyectos – Instituto Nicolás Avellaneda - 2011

de medida CSS ;

background-repeat Si se repite el fondo repeat-x; repeat-y ; repeat; no-repeat

.

Clasificación

Atributo Que hace Valores

display Indica como mostrar un objeto block ; inline ; list-item ; none

white-space Indica cómo tratar los espacios en blanco

normal ; pre ; nowrap ;

list-style-type Tipo de Viñeta disc ; circle ; square ; decimal ; lower-roman ; upper-roman ; lower-alpha ;

list-style-image Imagen para viñeta URL - nombre de la imagen

list-style-position inside ; outside ;

Marco <Box>

Atributo Que hace Valores

margin-top Margen superior unidades de medida CSS ;

margin-right Margen derecho unidades de medida CSS ;

margin-bottom Margen inferior unidades de medida CSS ;

margin-left Margen izquierdo unidades de medida CSS ;

padding-top Espacio interno superior unidades de medida CSS ;

padding-right Espacio interno derecho unidades de medida CSS ;

padding-bottom Espacio interno inferior unidades de medida CSS ;

padding-left Espacio interno izquierdo unidades de medida CSS ;

border-top-width Anchura de borde superior thin ; medium ; thick ; unidades de medida CSS ;

border-right-width Anchura de borde derecho thin ; medium ; thick ; unidades de medida CSS ;

border-bottom-width Anchura de borde inferior thin ; medium ; thick ; unidades de medida CSS ;

border-left-width Anchura de borde izquierdo thin ; medium ; thick ; unidades

Prof. Myriam Ruiz Pág. 9

Page 10: Apuntes Css y Js

Técnico Superior en Informática Aplicada

de medida CSS ;

border-width Anchura de todos los bordes thin ; medium ; thick ; unidades de medida CSS ;

border-color Color de borde color, nombre o valor RGB ;

border-style Estilo de la linea del borde (punteado, solido, doble, etc)

none ; dotted ; dashed ; solid ; double ; groove ; ridge ;

border-top Borde Superior none ; dotted ; dashed ; solid ; double ; groove ; ridge ;

border-right Borde Derecho none ; dotted ; dashed ; solid ; double ; groove ; ridge ;

border-bottom Borde Inferior none ; dotted ; dashed ; solid ; double ; groove ; ridge ;

border-left Borde Izquierdo none ; dotted ; dashed ; solid ; double ; groove ; ridge ;

width Anchura de un objeto auto ; unidades de medida CSS ;

height Altura de un objeto auto ; unidades de medida CSS ;

float Flotar o posicionarse left ; right ; none ;

clear Indica interrumpir el esquema de los objetos que flotan

left ; right ; none ; both ;

EjemplosCreación de Hipervínculos

A páginas externas:<a href="http://www.lagaceta.com.ar/">LaGaceta</a>

A páginas dentro de nuestro sitio, dentro de la misma carpeta desde donde parte el hipervínculo:<a href="interactivo.htm">Interactivos</a>

A páginas dentro de nuestro sitio, dentro de una carpeta en un nivel más abajo que desde donde parte el hipervínculo:<a href="textos/programa.htm">Programa</a>

Pág.10 Apunte de CSS y JavaScript

Page 11: Apuntes Css y Js

Planeamiento y Control de Proyectos – Instituto Nicolás Avellaneda - 2011

A páginas dentro de nuestro sitio, por encima del nivel desde donde parte el hipervínculo:<a href="../links.htm">Links</a>

Menú con CSS

En el HTML ponemos:<a href="http:\\www.lagaceta.com.ar">LaGaceta</a><a href="http:\\www.infobae.com">Infobae</a><a href="http:\\www.lanacion.com.ar">LaNacion</a>

En el archivo de estilo ponemos:a {background-color:#CCCCCC;display:block;width:80px;text-align:center;border-bottom:2px solid;text-decoration:none;padding:3px;}a:hover {background-color:#FFFF66;border-top:3px solid blue;border-left:3px solid blue;border-bottom:0px;width:77px;}

a:visited, a:link {color:#006600;}

Prof. Myriam Ruiz Pág. 11

Page 12: Apuntes Css y Js

Técnico Superior en Informática Aplicada

Explicación

1º. Se cambia las propiedades de los hipervínculos para que de entrada todos tengan: un fondo de color background-color un ancho para el fondo display:block y width un borde border una alineación text-align y no tengan subrayado: text-decoration:none

2º. Tenemos que configurar un elemento del hipervínculo que nos permita que al acercar el mouse a un link (a:hover) suceda lo siguiente: su color de fondo cambie background-color Se agregue un borde superior y uno a la izquierda, y se saque el borde

inferior, para dar la sensación de que se lo está presionando border-top y border-left

Ajustar el ancho del hipervínculo, para que sea igual a los que no estamos por presionar, teniendo en cuenta que hemos agregado un borde izquierdo width

3º. Se establece que el color de los hipervínculos sin visitar y no visitados tendrán el mismo color a:link, a:visited {

color:#006600;}

Pág.12 Apunte de CSS y JavaScript

Page 13: Apuntes Css y Js

Planeamiento y Control de Proyectos – Instituto Nicolás Avellaneda - 2011

Maquetación de una página Web:

1º. Realizar en un archivo HTML, las delimitaciones de la página en, por ejemplo, encabezado, menú, contenido y pie, mediante la utilización 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 márgenes y el espacio que se deja entre el contenido de una etiqueta y su borde valdrán 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; background-color:#FF0000;}

Prof. Myriam Ruiz Pág. 13

Page 14: Apuntes Css y Js

Técnico Superior en Informática Aplicada

III. Definimos color de fondo y altura del encabezado

#cabecera {background-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%; background-color:#CC99CC; height:32em;}

V. Luego, sin sacar el flotado, indicaremos que el contenido se acomode ocupando el 100% del espacio que quede a continuación del menú, tenga un color de fondo y una altura idéntica al div del menú.

#contenido { width:100%; background-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 venía aplicándose.

#pie { clear:left; background-color:#66FFFF; height:3em;}

Pág.14 Apunte de CSS y JavaScript

Page 15: Apuntes Css y Js

Planeamiento y Control de Proyectos – Instituto Nicolás Avellaneda - 2011

Al final queda una delimitación como la siguiente:

Formulario

<HTML><HEAD> <TITLE>Formulario</TITLE></HEAD><BODY> <FORM ACTION="mailto:[email protected]" METHOD="POST">

Nombre:<INPUT type="text" name="nombre" value="Ana" size="20"

maxlength="20"><br> Email: <INPUT type="text" name="mail" value="[email protected]" 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 Pág. 15

Page 16: Apuntes Css y Js

Técnico Superior en Informática Aplicada

Que hace falta?: <input type="checkbox" name="apu">Apuntes<input type="checkbox" name="ejplos">Ejemplos<input type="checkbox" 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:

CSS en Formulario

form {border: 10px solid #666699;background-color:#ccc;padding:10px;width:400px; }

input {background-color:#CC99FF;}

Pág.16 Apunte de CSS y JavaScript

Page 17: Apuntes Css y Js

Planeamiento y Control de Proyectos – Instituto Nicolás Avellaneda - 2011

select {background:#f00;color:#000;border:dotted 3px #fff; }

.botones { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px; background-color: #333333; color: #FFFFFF; margin-right: 6px; }

JavaScript

Prof. Myriam Ruiz Pág. 17

Page 18: Apuntes Css y Js

Técnico Superior en Informática Aplicada

Cuadros de diálogo

1. Método alert(): Sirve solo para mostrar mensajes

alert("Texto"+variable)

Por ejemplo:

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

2. Método prompt() del objeto window: muestra una caja de texto en la que el usuario puede escribir. También muestra dos botones, Aceptar y Cancelar. Ejemplo:

variable = prompt("Su color favorito es: ","Azul")

Este cuadro de diálogo permite capturar datos introducidos por el usuario y realizar una acción en base a ellos. Por ejemplo, podemos pedirle al usuario que introduzca su nombre, y después mostrarlo:

<HTML> <HEAD> <TITLE>Ejemplo 2.2: página que pide el nombre</TITLE> </HEAD> <BODY> <SCRIPT type="text/javaScript"> nombre = prompt("Introduzca su nombre:","") document.write("<H2>Bienvenido, " + nombre + "</H2>") </SCRIPT>

Pág.18 Apunte de CSS y JavaScript

Valor por defecto

\n Produce un salto de Línea

Page 19: Apuntes Css y Js

Planeamiento y Control de Proyectos – Instituto Nicolás Avellaneda - 2011

<P>Aquí va el resto de la página...</P> </BODY> </HTML>

Aparece el cuadro de diálogo:

Y luego se escribe en la página:

Funciones de conversión de tipos

Todo lo que se ingresa a través de prompt se considera texto, por lo tanto, antes de poder hacer operaciones matemáticas deberá transformarse a número entero o con decimales:

parseInt(valor): convierte texto a número enteroparseFloat(valor): convierte texto a número real o con decimal.

Ejemplo:num=prompt("Ingrese un número","");num=parseInt(num); // ahora la variable si contiene un número

3. Método confirm() del objeto window: Mostrará un cuadro de diálogo con el mensaje de texto que le pasemos como parámetro, y dos botones, Aceptar y Cancelar:

Prof. Myriam Ruiz Pág. 19

Concatenación de texto con variable

Page 20: Apuntes Css y Js

Técnico Superior en Informática Aplicada

rpta=confirm("¿Desea volver al inicio de la página?")

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

Estructuras de control

if - Sintaxis

if (condición) { 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>

Ejemplo if anidado: Ingresar 3 números y determinar cuál es mayor

Pág.20 Apunte de CSS y JavaScript

Page 21: Apuntes Css y Js

Planeamiento y Control de Proyectos – Instituto Nicolás Avellaneda - 2011

var a,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");}

}

switch

Se utiliza cuando una variable puede tomar más de 2 valores

switch (expresión) { case valor1:

Tarea1;Break;

case valor2:Tarea2;Break;

Default:Tarea;

}

Ejemplo:Switch (dia_de_la_semana) {

Prof. Myriam Ruiz Pág. 21

Page 22: Apuntes Css y Js

Técnico Superior en Informática Aplicada

case 1: document.write("Es Lunes")

break case 2:

document.write("Es Martes") break

case 3: document.write("Es Miércoles") break case 4: document.write("Es Jueves") break case 5: document.write("Es viernes") break case 6: case 7: document.write("Es fin de semana") break default: document.write("Ese día no existe") }

for

Se utiliza cuando debemos hacer una misma tarea un número de veces que conocemos de antemano

for (inicializar contador; final de repetición ; como cambia el contador ) {Tareas a realizar

}

Ejemplo: mostrar los distintos tamaños de encabezados h

for (i=1;i<6;i++){document.write("<H" + i +">Encabezado "+ i+ "</H" + i + "<br>");

}

Pág.22 Apunte de CSS y JavaScript

Page 23: Apuntes Css y Js

Planeamiento y Control de Proyectos – Instituto Nicolás Avellaneda - 2011

while

Se utiliza cuando debemos hacer una misma tarea un número de veces que no conocemos de antemano

while (condición){tarea a ejecutar

}

do while

do {tareas

} while (condición)

Ejemplo:

var num;do {

num=prompt("Ingrese un número","") } while (isNaN(num))

isNaN: es una función que devuelve verdadero si lo que recibe como parámetro no es no un número.

Arreglos (Array)

Prof. Myriam Ruiz Pág. 23

Page 24: Apuntes Css y Js

Técnico Superior en Informática Aplicada

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 posición que ocupan en el arreglo.

Creación (declaración) de Arrays javascript

1. Si no tenemos determinada la cantidad de componentes que tendrá, se declara así:

var miArray = new Array();

Tenga en cuenta de respetar las minúsculas y mayúsculas como aparecen.

2. También podemos crear el array Javascript especificando el número de componentes que va a tener.

var miArray = new Array(10);

3. Si sabemos los datos que contendrá el arreglo, podemos declararlo así:

var miArray = 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 posición donde queremos guardar el dato.

Ejemplo: var aColores = new Array();acolores[0] = "Rojo";acolores[1] = "Verde";acolores[2] = "Azul";

Lo más práctico para cargar un arreglo de muchas componentes es utilizar la estructura for.Ejemplo: Ingresar 3 números y calcular su promedio

Pág.24 Apunte de CSS y JavaScript

Page 25: Apuntes Css y Js

Planeamiento y Control de Proyectos – Instituto Nicolás Avellaneda - 2011

var num = new Array(3) ;// Primero ingresar los números en el arreglofor (i=0;i<3;i++){

num[i] = prompt("Ingrese el número " + i, "");} suma=0; // Segundo, leer el arreglo e ir sumando sus elementosfor (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

Cómo se escribe una función

function nombrefuncion (){ instrucciones de la función... return variable; }

Veamos un ejemplo de función para escribir en la página un mensaje de bienvenida dentro de etiquetas <H1> para que quede más resaltado.

function escribirBienvenida(){ document.write("<H1>Hola a todos</H1>")}

Cómo llamar a una función

NombreDeLaFuncion()

Ejemplo completo:

Prof. Myriam Ruiz Pág. 25

Page 26: Apuntes Css y Js

Técnico Superior en Informática Aplicada

<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 número", ""));cuad = Cuadrado(num);alert ("Su cuadrado es= " + cuad);

</script> </body></html>

Invocar elementos por su name

Insertamos una imagen (img) en el body, le damos un nombre (name) y debajo insertamos un botón y programamos en su evento onClick para que llame a una función que cambiará el path o ubicación (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: invocando elementos</title></head><body><img name="imagen" src="foto1.jpg"><input type="button" value="Otra Imagen" onClick="Cambiar()"> </body></html>

Indice

Pág.26 Apunte de CSS y JavaScript

Cuando se produzca el evento click llamará a la función

Botón

Page 27: Apuntes Css y Js

Planeamiento y Control de Proyectos – Instituto Nicolás Avellaneda - 2011

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

Prof. Myriam Ruiz Pág. 27