Tópicos Avanzados de programación

Anuncio
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.
Qué se necesita para
crearAuna
página d
web
Tópicos vanzados e Programación 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
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
deseadas. En estos dos últimos casos, también hay que tener en cuenta que deberemos guardar el archivo en modo
texto.
Qué se necesita para crear una página 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 Figura
conseguido
que de
setexto
puedan
páginas
con de
cualquier
y
1.2. Un editor
simple,crear
como el
block de notas
Windows, ordenador
es todo lo
necesario para crear una página Web
sistema operativo.
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
que (>), todas las instrucciones de HTML deben ir encerradas entre estos dos símbolos.
Tópicos Avanzados de Programación Pero las etiquetas no se limitan a indicar ordenes tan sencillas, estas órdenes tienen en ocasiones parámetros.
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
predeterminado y un ancho variable en función del tamaño de la ventana del navegador.
Por ejemplo, para indicarle al navegador que queremos que pinte una línea
horizontal debemos escribir:
<hr>
Figura 1.5. Uso básico de una etiqueta HTML sin ningún tipo de parámetros. Ejemplo
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
formas
de pintar
línea
y sería
deseable
poder elegir
el grosor que
va a muchas
tener dicha línea.
Para especificar
este tipo deuna
detalles
se crearon
los atributos
de las etiquetas.
nuevo como
elemento sela
introduce
en una etiqueta
de la siguiente
manera:
detallesEste
tales
anchura
y el grosor
que
va a tener dicha línea. Para especificar
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
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.
<etiqueta atributo="valor">
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.
Introducción
lenguaje HTML de Programación Tópicos Aalvanzados 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.
Veamos
ejemplo,
la de
figura
podemos
ver SIZE.
la línea horizontal
este
ejemplo vemos
como se un
puede
cambiar elen
grosor
una línea
con el atributo
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,
la línea. En posteriores capítulos estudiaremos en detalle la etiqueta <hr> y todos sus atributos.
<hr size=5>
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>
</head>
Crear un archivo HTML que tenga como titulo “curso de
<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>
Descargar