Esta posibilidad de hacer pequeños programas que se ejecutan en el navegador, evitan intercambios innecesarios entre el cliente y el servidor (navegador y sitio web).
Suponemos que conoce las marcas para la creación de formularios en una página web:
form <FORM> ... </FORM> text <INPUT TYPE="text"> password <INPUT TYPE="password"> textarea <TEXTAREA> ... </TEXTAREA> button <INPUT TYPE="button"> submit <INPUT TYPE="submit"> reset <INPUT TYPE="reset"> checkbox <INPUT TYPE="checkbox"> radio <INPUT TYPE="radio"> select <SELECT> ... </SELECT> hidden <INPUT TYPE="hidden">
El navegador crea un objeto por cada control visual que aparece dentro de la página. Nosotros podemos acceder posteriormente desde JavaScript a dichos objetos.
El objeto principal es el FORM que contendrá todos los otros objetos: TEXT (editor de líneas), TEXTAREA (editor de varias líneas), etc.
Nuestra actividad en JavaScript es procesar los eventos que generan estos controles (un evento es una acción que se dispara, por ejemplo si se presiona un botón).
Vamos a hacer en problema muy sencillo empleando el lenguaje JavaScript; dispondremos un botón y cada vez que se presione, mostraremos un contador:
<html>
<head>
</head>
<body>
<script language="JavaScript">
var contador=0;
function incrementar()
{
contador++;
alert('El contador ahora vale :' + contador);
}
</script>
<form>
<input type="button" onClick="incrementar()" value="incrementar">
</form>
</body>
</html>
A los eventos de los objetos HTML se les asocia una función, dicha función se ejecuta cuando se dispara el evento respectivo. En este caso cada vez que presionamos el botón, se llama a la función incrementar, en la misma incrementamos la variable contador en uno. Hay que tener en cuenta que a la variable contador la definimos fuera de la función para que no se inicialice cada vez que se dispara el evento.La función alert crea una ventana que puede mostrar un mensaje.
PROBLEMA
Crear un formulario con tres botones con las leyendas "1", "2" y "3". Mostrar un mensaje indicando qué botón se presionó.
No hay comentarios:
Publicar un comentario
Nota: solo los miembros de este blog pueden publicar comentarios.