El uso de Javascript en HTML, CSS y PHP se hace fundamentalmente con el
objetivo de validar los datos ingresados y realizar procesos que solamente se
pueden realizar con JavaScript. 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).
Comandos necesarios que se utilizan en los formularios:
Objeto o Control Comando
form <form> ... </form>
text
<input type="text">
button
<input
type="button">
checkbox <input type="checkbox">
radio
<input
type="radio">
select <select> ... </select>
Dentro del
formulario (FORM) podrá insertar objetos como: TEXT (editor de líneas),
TEXTAREA (editor de varias líneas), etc. Nuestra actividad en JavaScript es
procesar los eventos que generan estos controles.
Ejemplo No. 1:
En formulario
insertar dos botones uno que se llamará incrementar y el otro decrementar.
Luego realice un conteo cada vez que se presione cualquiera de los 2 botones.
<html>
<head>
</head>
<body>
<script
type="text/javascript">
var contador=0;
function incrementar()
{
contador++;
alert('El contador ahora vale :' + contador);
}
function decrementar()
{
contador--;
alert('El contador ahora vale :' + contador);
}
</script>
<form>
<input type="button"
onClick="incrementar()" value="incrementar">
<input type="button"
onClick="decrementar()" value="decrementar">
</form>
</body>
</html>
Ejemplo No. 2:
Crear un
formulario que permita ingresar el nombre y edad de una persona, luego que
muestre los valores ingresados.
<html>
<head></head>
<body>
<script
type="text/javascript">
function mostrar()
{
var
n=document.getElementById('nom').value;
var
e=document.getElementById('ed').value;
alert(n + ' tiene ' + e + ' annios');
}
</script>
<form>
Ingrese su nombre:
<input type="text" id="nom"><p>
Ingrese su edad:
<input type="text" id="ed"><p>
<input
type="button" value="Ver" onClick="mostrar()">
</form>
</body>
</html>
Ejemplo No. 3:
Crear un
formulario que permita obtener la suma de 2 números ingresados.
<html>
<head>
</head>
<body>
<script
type="text/javascript">
function sumar()
{
var c;
c=parseInt(document.getElementById('a').value)+parseInt(document.getElementById('b').value)
;
alert(c);
}
</script>
<form>
Ingrese un numero: <input
type="text" id="a"><p>
Ingrese un numero: <input
type="text" id="b"><p>
<input type="button"
value="Suma" onClick="sumar()">
</form>
</body>
</html>
CONTROL SELECT
Permite seleccionar una opción entre
todas las disponibles. El objetivo de este control es determinar que elemento
está seleccionado y qué valor tiene asociado. Esto lo hacemos cuando ocurre el
evento onChange.
Para determinar la
posición del índice seleccionado en la lista:
document.getElementById('select1').selectedIndex;
Para determinar el string seleccionado:
document.getElementById('select1').options[document.getElementById('select1').selectedIndex].text;
Para acceder al
valor asociado al string:
document.getElementById('select1').options[document.getElementById('select1').selectedIndex].value;
Ejemplo No. 1:
Mostrar el
siguiente formulario:
Cuando seleccione un ítem (un color: rojo, verde, azul) deberá mostrar la posición que ocupa, el texto que tiene y valor asociado en el Select.
<html>
<head>
</head>
<body>
<script
type="text/javascript">
function color()
{
var seleccion=document.getElementById('colores');
document.getElementById('a').value=seleccion.selectedIndex;
document.getElementById('b').value=seleccion.options[seleccion.selectedIndex].text;
document.getElementById('c').value=seleccion.options[seleccion.selectedIndex].value;
}
</script>
<form>
Seleccione el Color...
<select id="colores"
onChange="color()">
<option
value="0xff0000">Rojo</option>
<option
value="0x00ff00">Verde</option>
<option
value="0x0000ff">Azul</option>
</select>
<p>
Posicion del item seleccionado:<input
type="text" id="a"><p>
Texto del item seleccionado:<input
type="text" id="b"><p>
Valor del item seleccionado:<input
type="text" id="c"><p>
</form>
</body>
</html>
Ejemplo No. 2:
Diseñar un
formulario que permita mostrar en 2 select (combos) lo siguiente:
Select: Panes
- con Jamón y Queso Q. 7.50
- con Jamón Q. 5.50
- con Frijoles Q. 4.00
Select: Bebidas
- Café con leche Q. 3.50
- Atol de plátano Q. 4.50
- Jugo de Naranja Q. 5.50
<html>
<head>
</head>
<body>
<script type="text/javascript">
function total()
{
var c1, c2, p1, p2, t;
c1=document.getElementById('P');
p1=parseFloat(c1.options[c1.selectedIndex].value);
c2=document.getElementById('B');
p2=parseFloat(c2.options[c2.selectedIndex].value);
t=p1+p2;
document.getElementById('resultado').value=t.toFixed(2);
}
</script>
<form>
Panes...
<select id="P">
<option value="7.50">con
Jamon y Queso</option>
<option value="5.50">con
Jamon</option>
<option value="4.00">con
Frijoles</option>
</select>
<p>
Bebidas...
<select id="B">
<option value="3.50">Cafe
con leche</option>
<option value="4.50">Atol
de platano</option>
<option value="5.50">Jugo
de naranja</option>
</select>
<p>
<input
type="button" value="Total a pagar"
onClick="total()">
<input
type="text" id="resultado">
</form>
</body>
</html>
EJERCICIO
En Aptana Studio, en
código JavaScript, resuelva cada uno de los siguientes programas, utilizando formularios
y funciones:
1.- Ingrese 3 números. Muestre en un
TEXT el número mayor.
2.- Diseñe un preguntón (examen). Se
debe mostrar una pregunta y seguidamente un objeto SELECT con las respuestas
posibles. Al presionar el botón “Resultado” muestre la cantidad de respuestas
correctas e incorrectas. Se debe mostrar por lo menos 5 preguntas con 3
respuestas cada una.
No hay comentarios:
Publicar un comentario