Los formularios son elementos típicos de las páginas WEB dinámicas. Por ejemplo pueden servir para hacer el pedido en una WEB que suministre material on line. Vamos hacer formularios representativos de los 3 tipos de estructuras de programación.
1.- ESTRUCTURA LINEAL : INTRODUCIMOS 2 NÚMEROS Y HALLAMOS SU PRODUCTO.
CÓDIGO
<html>
<head>
<script>
var k = {
nombre:"MULTIPLICANDO",
n1: 1,
n2: 1, DEFINIENDO LAS VARIABLES
resultado : function (){
var r = this.n1 * this.n2;
return r;
} CREANDO LA FUNCIÓN
};
function f(){
k.n1 = document.getElementById("n1").value;
k.n2 = document.getElementById("n2").value;
document.getElementById("resultado").innerHTML = k.resultado();
}
</script>
</head>
<h1> <span style=color:green> SUMANDO DOS NUMEROS</span> </h1>
<body>
NUMERO 1: <input type="text" id="n1"/><br/>
NUMERO 2: <input type="text" id="n2"/><br/> DEFINIENDO LOS OBJETOS QUE NOS DARAN LOS DATOS PARA EJECUTAR EL PROGRAMA
<input type="button" onclick="f()"/><br/> ESTABLECIENDO UN EVENTO
Su producto es: <span id="resultado"> </span>
</body>
</html>
El resultado es:
El resultado es:
FORMULARIO 1
HACER UN FORMULARIO QUE INTRODUCIENDO TU NOMBRE Y APELLIDOS DE LUGAR A UN MENSAJE QUE PONGA BIENVENIDO "NOMBRE APELLIDO". RECUERDE QUE PARA DEFINIR STRINGS HAY QUE PONER "".
2.- ESTURCUTAS RAMIFICADAS: CONDICIONALES
Vamos a compara dos números y escribir el mayor de ambos. El código del programa usará la sentencia if (condicional) { sentencia}
<!DOCTYPE html>
<html>
<head>
<script>
var k = {
nombre:"Sumando",
n1: 1, Definiendo e inicializando variables
n2: 1,
resultado : function (){
if (this.n1>this.n2){
var r = this.n1;
return r; Definiendo la primera condición
}
if (this.n2>this.n1){
var r=this.n2;
return r; Definiendo la segunda condición
}
if (this.n1=this.n2){
var r="Son iguales";
return r; Definiendo la tercera condición
}}
};
function f(){
//window.alert(k.peso);
k.n1 = document.getElementById("n1").value; Estableciendo los valores de k.n2 = document.getElementById("n2").value; de salida.
document.getElementById("resultado").innerHTML = k.resultado();
}
</script>
</head>
<h1> <span style=color:green> COMPARANDO DOS NÚMEROS</span> </h1>
<body>
NUMERO 1: <input type="text" id="n1"/><br/> Configurando los objetos
NUMERO 2: <input type="text" id="n2"/><br/>
<input type="button" onclick="f()"/><br/> Estableciendo los eventos.
EL MAYOR ES: <span id="resultado"> </span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
var k = {
nombre:"Sumando",
n1: 1, Definiendo e inicializando variables
n2: 1,
resultado : function (){
if (this.n1>this.n2){
var r = this.n1;
return r; Definiendo la primera condición
}
if (this.n2>this.n1){
var r=this.n2;
return r; Definiendo la segunda condición
}
if (this.n1=this.n2){
var r="Son iguales";
return r; Definiendo la tercera condición
}}
};
function f(){
//window.alert(k.peso);
k.n1 = document.getElementById("n1").value; Estableciendo los valores de k.n2 = document.getElementById("n2").value; de salida.
document.getElementById("resultado").innerHTML = k.resultado();
}
</script>
</head>
<h1> <span style=color:green> COMPARANDO DOS NÚMEROS</span> </h1>
<body>
NUMERO 1: <input type="text" id="n1"/><br/> Configurando los objetos
NUMERO 2: <input type="text" id="n2"/><br/>
<input type="button" onclick="f()"/><br/> Estableciendo los eventos.
EL MAYOR ES: <span id="resultado"> </span>
</body>
</html>
El resultado se puede ver en el siguiente video
Formulario 2
3.- BUCLES
Un bucle muy sencillo es contar los 5 primeros números con un for.
<html>
<head>
<title>bucle</title>
</head>
<body>
<h1> <span style=color:green> LOS 5 PRIMEROS NUMEROS</span></h1>
<script type="text/javascript">
var i=0;
for (i=0;i<=5;i++) { Contador de 1 a 5
document.write(+ i);
document.write("<br />"); Imprime el valor del contador
}
</script>
</body>
</html>
No hay comentarios:
Publicar un comentario