Tópicos

 Avanzados  de  Programación  

Tópicos  Avanzados  
de  programación    
 
 tipos y tamaños de letra, con imágenes impactantes, animaciones sorprendentes, formularios interactivos, etc.

Tópicos  
Qué se necesita para crearAuna
vanzados  
página d e  Programación  
web
Una de las características de este lenguaje más importantes para el programador es que no es necesario ningún
programa especial para crear una página Web. Gracias a ello se ha conseguido que se puedan crear páginas con
cualquier ordenador y sistema operativo. El código HTML, como hemos adelantado en el párrafo anterior, no es
más que texto y por tanto lo único necesario para escribirlo es un editor de texto como el que acompañan a todos
Qué se necesita para crear una página web
los sistemas operativos: edit™ en MS-DOS, block de notas en Windows,vi™en UNIX, etc. Por supuesto estos no
son los únicos editores de texto que pueden ser usados, sino cualquier otro. También se puede usar procesadores
de texto, que son editores con capacidades añadidas, compo pueden ser Microsoft Word™ o WordPerfect™ pero
hay que tener cuidado porque en ocasiones hacen traducciones automáticas del código HTML que no siempre son
Una de las características de este lenguaje más importantes para el programador es
deseadas. En estos dos últimos casos, también hay que tener en cuenta que deberemos guardar el archivo en modo
que no es necesario ningún programa especial para crear una página Web. Gracias
texto.

a ello se ha Figura
conseguido que de
1.2. Un editor setexto
puedan
simple,crear páginas
como el con de
block de notas cualquier
Windows, ordenador
es todo lo y
sistema operativo.
necesario para crear una página Web

Una vez hemos escrito el código deberemos guardar el archivo (con formato de texto) con la extensión .html ( o
.htm en MS-DOS, Windows 3.1 o cualquier otro sistema que sólo acepte tres letras en la extensión. Los siguientes
son nombres válidos de archivos que contengan código HTML: index.html, index.htm,principal.html,
 Tópicos  Avanzados  de  Programación  

Las bases de HTML

Las órdenes de este lenguaje estarán formadas por unos comandos llamados
etiquetas que pueden tener o bien la siguiente estructura:

<NOMBRE_ETIQUETA>

•  bien esta otra:

<NOMBRE_ETIQUETA> TEXTO </NOMBRE ETIQUETA>

Como vemos, la primera estructura está formada por una única instrucción y la
segunda por dos: una que marca el inicio de la etiqueta y otra que marca el final, con
texto entre ambas.
 <hr>

Así de sencillo. Como vemos, el nombre de la etiqueta va delimitado por los símbolos menor que (<) y mayor
Tópicos  Avanzados  de  Programación  
que (>), todas las instrucciones de HTML deben ir encerradas entre estos dos símbolos.

Pero las etiquetas no se limitan a indicar ordenes tan sencillas, estas órdenes tienen en ocasiones parámetros.
Por ejemplo, para indicarle al navegador que queremos que pinte una línea
Por ejemplo la etiqueta <hr> tal y como lo hemos hecho anteriormente daría lugar a la línea que vemos en la
figura 1.5, es decir le dice al navegador que dibuje una línea horizontal en la pantalla. Esta línea tiene un grosor
horizontal debemos escribir:
predeterminado y un ancho variable en función del tamaño de la ventana del navegador.

Figura 1.5. Uso básico de una etiqueta HTML sin ningún tipo de parámetros. Ejemplo
<hr> usando la etiqueta <hr> para crear una línea horizontal.

Sin embargo hay muchas formas de pintar una línea y sería deseable poder elegir detalles tales como la anchura y
Sin embargo hay
el grosor que va a muchas formas
tener dicha línea. de pintar
Para especificar este tipo deuna línea
detalles y sería
se crearon deseable
los atributos poder elegir
de las etiquetas.
detallesEste
tales
nuevo como
elemento sela anchura
introduce y el grosor
en una etiqueta que
de la siguiente va a tener dicha línea. Para especificar
manera:

este tipo de detalles se crearon los atributos de las etiquetas. Este nuevo elemento se
<etiqueta atributo="valor">
introduce en una etiqueta de la siguiente manera:
Es decir, en primer lugar ponemos el nombre de la etiqueta, después el nombre del atributo seguido por un signo
<etiqueta atributo="valor">
igual y posteriormente el valor que queramos darle a ese atributo encerrado entre comillas una etiqueta puede
tener tantos atributos como se deseen y en ocasiones son necesarios para que la etiqueta tenga algún significado.

En nuestro ejemplo de la línea horizontal existe un atributo llamado SIZE, que significa tamaño en inglés, que
permite controlar el grosor de la línea que será dibujada en pantalla. Veamos un ejemplo, en la figura 1.6 podemos
ver la línea horizontal con diferentes grosores.
 Tópicos   Aalvanzados  
Introducción lenguaje HTML de  Programación  

En nuestro ejemplo de la línea horizontal existe un atributo llamado SIZE, que

significa tamaño en inglés, que permite controlar el grosor de la línea que será
Figura 1.6. Las etiquetas tienen atributos para cambiar aspectos del efecto que producen.
dibujadaEnen pantalla.
este Veamos
ejemplo vemos como se un
puedeejemplo,
cambiar elen la de
grosor figura podemos
una línea ver SIZE.
con el atributo la línea horizontal
con diferentes grosores.

El valor que toma el atributo size determina el número de puntos de pantalla o pixeles que debe ocupar, en grosor,
<hr size=5>
la línea. En posteriores capítulos estudiaremos en detalle la etiqueta <hr> y todos sus atributos.

En la figura 1.6 vemos que el valor numérico que le damos al atributo size no va entrecomillado, por ejemplo
en <hr size=5>. En HTML no es necesario entrecomillar los valores de los atributos cuando están formados
 Tópicos  Avanzados  de  Programación  

Estructura de una página

En primer lugar deberemos especificar que el archivo de texto que estamos
escribiendo es un documento HTML, para ello usamos las instrucciones de inicio y fin
de la etiqueta <html> al principio y al final de la página respectivamente:

<html>
Código de la página
</html>

El código de la página esta formado a su vez por dos grandes bloques, la cabecera y el
cuerpo.
La cabecera de la página está delimitada por las instrucciones de inicio y fin de la
etiqueta head. Estas instrucciones deben estar dentro de la etiqueta HTML de la
siguiente manera:

<html>
<head>
Elementos de la cabecera
</head>
... Resto de código de la página ...
</html>
 Tópicos  Avanzados  de  Programación  

En la cabecera de la página se introduce toda aquella información que afectará a

toda la página. En un principio esta información se limitará al título. Este título se
indicará con la etiqueta title usando la siguiente sintaxis:
<html>
<head>
<title>Mi primera página WEB</title>
</head>
</html>
el cuerpo es el siguiente gran bloque de nuestro documento HTML, éste quedará
delimitado por la etiqueta body. En su interior introduciremos todos aquellos elementos
de los que queremos que conste nuestra página como pueden ser testo, imágenes,
tablas, etc. Conociendo la etiqueta body podemos ampliar el ejemplo anterior para que
incluya texto.
<html>
<head>
<title>Mi primera página WEB</title>
</head>
<body>
Hola a todos, como han deducido por el titulo
esta es la primera pagina web que hago, espero
que les Guste.
</body>
</html>
 Tópicos  Avanzados  de  Programación  

Lista de tags básicos de HTML:

http://www.uv.es/cerveron/paginasweb/notashtml.html

<html>
<head>
Practica:
<title>Topicos Avanzados de Programacion</title>
Crear un archivo HTML que tenga como titulo “curso de
</head>
<body>
programacion” y en el cuerpo de la pagina muestre su
Hola a todos: <br>
nombre y numero de control
Nombre: Efrain Padilla Ayala <br>
Num. de Control: 90829034
</body>
</html>
Tópicos  Avanzados  de  Programación  
 Tópicos  Avanzados  de  Programación  

Eventos
Los eventos son ampliamente utilizados en documentos HTML como una
forma de asociar tags HTML a scripts. Dicho de manera simple, los scripts
son programas del lado cliente que llevan a cabo una acción y los eventos
son aquellas cosas que ocurren que hacen que se ejecuten los scripts (por
ejemplo, el puntero del mouse pasando sobre un elemento, la página
terminado de cargar su contenido, etc.).

La sintaxis usada para definir un evento es muy similar a la sintaxis de un

atributo. En este ejemplo mostramos el

tag HTML a, con el atributo "href" y los eventos "onmouseover" y

"onmouseout".
 Tópicos  Avanzados  de  Programación  

Código

<a onmouseover="comenzar_funcion()" onmouseout="detener_funcion()"

href="reference.html">Referencia</a>

Nota que las funciones "comenzar_funcion()" y "detener_funcion()" deben ser

escritas en algún lenguage del lado cliente, el cual no será tratado en este
sitio. Para leer más acerca de los scripts del lado cliente refiérete a este
documento acerca del lenguaje JavaScript.

La disponibilidad de eventos depende del tag utilizado, lo que significa que no

todos los eventos pueden ser utilizados en todos los elementos. Para ver qué
eventos están disponibles para un elemento específico mira la descripción del
elemento en esta
 Tópicos  Avanzados  de  Programación  

Eventos en HTML
Los eventos son una característica de los documentos HTML (presente en
otros lenguajes de programación también) que permite a los autores agregar
interactividad entre el sitio web y el visitante, al ejecutar programas del lado
cliente cuando el visitante (u otro programa) realiza una acción.

Por ejemplo, el autor puede hacer que un párrafo cambie de color de su texto
cuando el visitante pose el puntero del mouse sobre el mismo.

Así como los atributos, los eventos pueden ser definidos fácilmente en el tag
de apertura del elemento, con el mismo formato:

<nombretag evento="codigo">
 Tópicos  Avanzados  de  Programación  

El contenido del evento es el código que se ejecutará, y debe ser creado

utilizando un lenguaje del lado cliente (por ejemplo, JavaScript) que debe ser
soportado por el navegador para que funcione.

En el ejemplo siguiente, definimos un párrafo que cambia el color de su texto a

rojo cuando el mouse pasa por encima, y lo devuelve a negro cuando se retira.

Código

<p onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">

Este es un texto que cambia de color.</p>
 Tópicos  Avanzados  de  Programación  

Lista de eventos
onload: el evento "onload" es lanzado cuando el agente de usuario termina de cargar una página o
todos los marcos en un ser de marcos. Este evento es exclusivo de los elementos HTML body y
HTML framset.
onunload: el evento "onunload" es disparado cuando el agente de usuario retira el documento de
una ventana o marco. este evento es exclusivo de los elementos HTML body y HTML framset.
onclick: el evento "onclick" ocurre cuando se realiza un click sobre el elemento.
ondblclick: el evento "ondblclick" es ejecutado cuando se hace un doble click sobre el elemento.
onmousedown: el evento "onmousedown" es lanzado cuando el botón del mouse es presionado
sobre el elemento (independientemente de que sea soltado o no).
onmouseup: el evento "onmouseup" es disparado cuando el botón del mouse se suelta sobre el
elemento.
onmouseover: el evento "onmouseover" ocurre cuando el mouse es puesto sobre el elemento.
onmousemove: el evento "onmousemove" es ejecutado cuando el mouse es movido mientras está
sobre el elemento.
onmouseout: el evento "onmouseout" es lanzado cuando el mouse se quita de encima de un
documento.
onfocus: el envento "onfocus" es disparado cuando un elemento recibe el enfoque, bien sea a través
del mouse o por navegación tabulada. Este evento es exclusivo de aquellos elementos que pueden
recibir el enfoque: HTML a, HTML area, HTML label, HTML input, HTML select, HTML textarea, y
HTML button.
 Tópicos  Avanzados  de  Programación  

onblur: el evento "onblur" ocurre cuando el elemento pierde el enfoque bien sea a través del mouse
o por navegación tabulada. Este evento es exclusivo de aquellos elementos que pueden recibir el
enfoque.
onkeypress: el evento "onkeypress" es ejecutado cuando una tecla es presionada y luego soltada
mientras el elemento tiene el enfoque. Este evento es exclusivo de aquellos elementos que pueden
recibir el enfoque.
onkeydown: el evento "onkeydown" es lanzado cuando una tecla es presionada
(independientemente de que sea solatada o no) mientras el elemento tiene el enfoque. Este evento
es exclusivo de aquellos elementos que pueden recibir el enfoque.
onkeyup: el evento "onkeyup" es disparado cuando una tecla es solatada mientras el elemento tiene
el enfoque. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque.
onsubmit: el evento "onsubmit" ocurre cuando el formulario es enviado. Este evento es exclusivo del
elemento HTML form.
onreset: el evento "onreset" es ejecutado cuando el formulario es reestablecido a sus valores por
defecto. Este evento es exclusivo del elemento HTML form.
onselect: el evento "onselect" es lanzado cuando un usuario selcciona texto en un campo de texto.
Este evento es exclusivo de los elementos HTML input y HTML textarea.
onchange: el evento "onchange" es disparado cuando un control pierde el enfoque y su valor ha sido
modificado desde que recibió el enfoque por última vez. Este evento es exclusivo de los elementos
HTML input, HTML select y HTML textarea.
 Tópicos  Avanzados  de  Programación  

Introducción a JavaScript
 Tópicos  Avanzados  de  Programación  

¿Qué es JavaScript?

JavaScript es un lenguaje de scripts desarrollado por Netscape para

incrementar las funcionalidades del lenguaje HTML. Sus características
más importantes son:

JavaScript es un lenguaje interpretado, es decir, no require compilación. El

navegador del usuario se encarga de interpretar las sentencias JavaScript
contenidas en una página HTML y ejecutarlas adecuadamente.

JavaScript es un lenguaje orientado a eventos. Cuando un usuario pincha

sobre un enlace o mueve el puntero sobre una imagen se produce un
evento. Mediante JavaScript se pueden desarrollar scripts que ejecuten
acciones en respuesta a estos eventos.

JavaScript es un lenguaje orientado a objetos. El modelo de objetos de

JavaScript está reducido y simplificado, pero incluye los elementos
necesarios para que los scripts puedan acceder a la información de una
página y puedan actuar sobre la interfaz del navegador.
 Tópicos  Avanzados  de  Programación  

Lo que JavaScript puede hacer

JavaScript le permite crear una interfaz de usuario activa, lo que ofrece

retroalimentación a los visitantes según navegan por sus paginas.

Puede utilizar JavaScript para asegurarse de que los formularios

introducen información valida en los formularios, lo que le ahorrará tiempo
de trabajo y dinero.

Si sus formularios requieren cálculos, puede realizarlos con JavaScript en

el computador del usuario, sin necesidad de ningún proceso del lado del
servidor.

Los programas que se ejecutan en el computador del usuario se conocen

como programas del lado del cliente; los programas que se ejecutan en el
servidor se conocen como programas del lado del servidor.
 Tópicos  Avanzados  de  Programación  

Lo que JavaScript NO puede hacer

JavaScript le permite es un lenguaje del lado del cliente; es decir, esta

diseñado para desempeñar su trabajo en su computador (el de usted), no
en el servidor.

Por ello, JavaScript sufre algunas limitaciones inherentes, la mayoría de

ellas por razones de seguridad:

Ø  JavaScript no permite leer o escribir archivos en las maquinas cliente.

Ø  JavaScript no permite la lectura o escritura de archivos en las maquinas

del servidor.

Ø  JavaScript no puede cerrar una ventana que no ha abierto

 Tópicos  Avanzados  de  Programación  

¿Cómo introducir JavaScript en el código HTML?

Básicamente existen dos formas de introducir un script de JavaScript en una

página HTML:

Embebido en el código HTML, entre las etiquetas o tags <script> y </script>.

El siguiente código muestra un ejemplo de código JavaScript embebido en el
HTML de una página.
 Tópicos  Avanzados  de  Programación  

El guion se puede colocar en uno de los dos sitios posibles de la pagina

HTML:

Entre las etiquetas <head> y </head>, o entre las etiquetas <body> y </body>

<HTML>
<HEAD>
<TITLE>Introducción a JavaScript</TITLE>
</HEAD>
<BODY>
<h1>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
document.write(’¡ Hola Mundo !’)
</SCRIPT>
</h1>
</BODY>
</HTML>
 Tópicos  Avanzados  de  Programación  

Como se observa, el código JavaScript figura entre las marcas de comentario

HTML <!-- y -->, para que los navegadores antiguos (que no soportan las
etiquetas script) no muestren el código fuente en la página. Además, delante
de la marca de cierre de comentario HTML se insertan los caracteres //, que en
JavaScript significan ignorar el resto de la línea, para que el intérprete
JavaScript no dé error por la línea --> de comentario HTML.

<HTML>
<HEAD>
<TITLE>Introducción a JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function saludo() {
window.alert('¡Bienvenido a JavaScript!')
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="saludo()">
</BODY>
</HTML>
 Tópicos  Avanzados  de  Programación  

Como archivo .js que se carga con la página HTML. Para ello, debe
indicarse en las tags anteriores el nombre y ubicación del archivo .js que
contiene el script JavaScript, como en este ejemplo:

<HTML>
<HEAD>
<TITLE>Tutorial de JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="codigo.js”></SCRIPT>
</HEAD>
<BODY>

</BODY>
</HTML>
 Tópicos  Avanzados  de  Programación  

Comentarios en JavaScript

Los comentarios se utilizan en todos los lenguajes de programación para

añadir explicaciones al código. Cuando el intérprete de comandos (o
compilador, según el caso) encuentra estas líneas, las ignora. En JavaScript
se utiliza el formato de comentarios propio de C/C++. Así, si es para
comentar una línea:

// comentario de una línea

Si el comentario ocupa varias líneas, se usan los carácteres /* (inicio de

comentario) y */ (fin de comentario):

/* comentario de varias
líneas */

Los bloques de código que integran una unidad son encerrados entre los
caracteres { y } (por ejemplo, el código de una función, o las sentencias
incluidas dentro de un bucle). Por otra parte, JavaScript hace diferencia
entre mayúsculas y minúsculas para los nombres de variables y funciones.
 Tópicos  Avanzados  de  Programación  

Escritura de cadenas de texto en la página

Las cadenas de texto en JavaScript pueden ir entre comillas dobles o

simples indistintamente. Lo único que hay que tener en cuenta es utilizar
el mismo tipo de comillas en la apertura y cierre de la cadena de texto.

Por ejemplo, para escribir la palabra Texto en una página, podemos utilizar
indistintamente

document.write("Texto")

O Bien

document.write('Texto')
Tópicos  Avanzados  de  Programación  
 Tópicos  Avanzados  de  Programación  

Ejemplo:

<HTML>
<HEAD>
<TITLE>Ejemplo 2.1: escritura de cadenas de texto</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write('<IMG SRC="imagen.gif">')
document.write("<BR><H1>Bienvenido a JavaScript</H1>")
//-->
</SCRIPT>
</BODY>
</HTML>
 Tópicos  Avanzados  de  Programación  

Ejercicio usando un archivo externo:

Realiza un programa que muestre un aviso (alert) al cargarse la
pagina (evento onload), llamando a una funcion grabada en un
archivo externo (.js)
<HTML>
<head>
<title>USANDO ARCHIVO FUENTE</title>
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT" SRC="FUNCIONES.JS"></SCRIPT>
</head>
<body onload="mensaje('Bienvenido a mi pagina')">
<h1 align="center">Hola Mundo!!</h1>
<hr>
</body
</HTML>

function mensaje(texto)
{
alert(texto)
}
 Tópicos  Avanzados  de  Programación  

Etiqueta Button.
Investiga en internet la etiqueta button para conocer su sintaxis,
propiedades y eventos relacionados.

Posteriormente crea un programa que muestre un boton en pantalla

con la leyenda “pruebame” y que al dar clic en el se abra una ventana
con un mensaje (alert)
 Tópicos  Avanzados  de  Programación  

Código:

<html>
<head>
<title>PRACTICA DE BOTONES USANDO JS</title>
<script language="Javascript" type="text/Javascript" src="funciones.js"></script>
</head>

<body>

<input type="button" name="btn1" value="Pruebame!" onClick="mensaje('bien

hecho!!')" style="font-size:14pt" align="center"></input>
<br>

</body>
</html>
 Tópicos  Avanzados  de  Programación  

Práctica :

Realiza un programa en html con javascript que despliegue una

pagina donde se muestren 3 botones, los cuales muestren en una
ventana de alerta su nombre, numero de control y la escuela al hacer
clic en cada uno de ellos respectivamente.
 Tópicos  Avanzados  de  Programación  

Como avisar al usuario.

Puede crear una ventana de alerta que se abrirá y dará a los usuarios la
información imprescindible sobre su pagina.

Basta con colocar el texto que debe aparecer en la ventana dentro del
método alert() y entre comillas.

<html>
<head>
<title>mi página JavaScript</title>
<script language="JavaScript">
<!--
alert(“Bienvenido a mi página JavaScript!”)
//-->
</script>
</head>
<body>
<noscript>
<h2>Esta página requiere JavaScript.</h2>
</noscript>
</body>
</html>
 Tópicos  Avanzados  de  Programación  
Confirmación de la elección del usuario
Al tiempo que es útil proporcionar información al usuario, en ocasiones
también necesitara obtener información a cambio. El siguiente guion
muestra como averiguar si el usuario acepta o rechaza una pregunta.
<html>
<head>
<title>Mi página JavaScript</title>
<script language="JavaScript">
<!—
if (confirm(“Esta seguro de querer continuar?”)) {
alert(“Ha respondido que SI”)
}
else {
alert(“Ha respondido que NO”)
}
//-->
</script>
</head>
<body>
<noscript>
<h2>Esta página requiere JavaScript.</h2>
</noscript>
</body>
</html>
 Tópicos  Avanzados  de  Programación  
Como interrogar al usuario
En ocasiones, en lugar de formular una simple pregunta del tipo SI/NO, necesita
una respuesta mas específica. Al método Prompt() se le pasan dos fragmentos de
información (parámetros), la pregunta que se le formulara al usuario y la respuesta
predeterminada.

<html>
<head>
<title>Mi página JavaScript</title>
<script language="JavaScript">
<--
resp = prompt(“Esta seguro de querer hacer esto?”, “”)
if (resp) {
alert(“Ha respondido: ”+resp)
}
else {
alert(“Ha rehusado contestar”)
}
//-->
</script>
</head>
<body>
<noscript>
<h2>Esta página requiere JavaScript.</h2>
</noscript>
</body>
</html>
 Tópicos  Avanzados  de  Programación  

Uso de condicionales mutinivel.

En ocasiones necesitara mas de dos opciones en una prueba condicional.

Aunque es posible recurrir a varios niveles de if anidados, es mucho mas
sencillo utilizar una sentencia switch/case.

Switch (valor) {
Case “opción 1”:
//instrucciones
break
Case “opción 2”:
//instrucciones
break
Case “opción 3”:
//instrucciones
break
}
Tópicos  Avanzados  de  Programación  
 Tópicos  Avanzados  de  Programación  

Ejercicio 1:

Realizar un programa que muestre un botón para cada marca

automotriz (ford, vokswagen, seat, honda, toyota), y que al hacer clic
sobre el botón, muestre el nombre de un auto de esa marca.

Esto deberá hacerlo utilizando la estructura switch/case

Ejercicio 2:

Realizar un programa que contenga una caja de texto y un botón, el

objetivo es que al hacer clic en el botón, el programa deberá mostrar en
un alert el texto introducido en la caja de texto.

Muestra…  
 Tópicos  Avanzados  de  Programación  

Manipulación de errores

Es bueno pensar que la mayoría de los visitantes a su sitio no tienen

experiencia en computación o sistemas, por lo que, deberá ofrecer mensajes
de error significativos, en lugar de los mensajes técnicos que la mayoría de
los navegadores devuelven, si la fuente del error es lo que el usuario ha
hecho.

Para esto utilizaremos los comandos try/throw/catch

Tópicos  Avanzados  de  Programación  
 Tópicos  Avanzados  de  Programación  

Creación de imágenes de sustitución

Tenemos dos imágenes, la primera, o imagen original, se carga y se
visualiza con el resto de la pagina.

Cuando el usuario mueve el ratón sobre la imagen original, el navegador la

cambia rápidamente por la segunda, o imagen de sustitución, creando la
ilusión de movimiento o animación.
 Tópicos  Avanzados  de  Programación  

Ejercicio 3:

Realice un programa que muestre una pagina con 3 imágenes, las

cuales sean sustituidas por otras al pasar el mouse sobre ellas.
 Tópicos  Avanzados  de  Programación  

Bucles: for
For (i=0; i<5; i++)
{
sentencias
}

Esta línea inicia el bucle. La variable i se utiliza para denominar a la

variable que será empleada como contador.

Primero, i se establece a cero. Un punto y coma señala que hay otra

sentencia en la misma línea.

La sentencia se lee así; “si i es menor que 5, entonces añadir 1 al valor de

i”
 Tópicos  Avanzados  de  Programación  

Ejemplo para insertar una tabla con “n” numero de filas y 3 columnas

<HTML>
<HEAD>
<TITLE>creando una tabla usando bucles</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
ans=prompt("de cuantas filas quieres la tabla?","")
document.write("<table border='1' cellspacing='4' cellpadding='4'>")
document.write("<tr bgcolor='#cccccc'><th>NOMBRE<\/th><th>ESCUELA<\/th><th>MATRICULA<\/th><\/tr>")
for (i=1; i<=ans; i++)
{
document.write("<tr bgcolor='#cccccc'><td>fila "+i+"<\/td><td>fila "+i+"<\/td><td>fila "+i+"<\/td><\/tr>")
}
//-->
</SCRIPT>
</BODY>
</HTML>