Condicionales
Para establecer bifurcaciones en nuestro programa si se cumple o no una condición usamos el comando IF.
Condición simple:
if (condición) {
comandos si la condición es verdadera
}
Condición compleja:
if (condición) {
comandos si la condición es verdadera
} else {
comandos si la condición es falsa
}
También podemos usar el operador condicional ?
resultado = (condición) ? (Valor si la condición es verdadera):(Valor si la condición es falsa);
Ejemplo :
r = (a>=b) ? “ A mayor o Igual a b” : “A es menor que b2”;
Veamos un ejemplo:
<!DOCTYPE html>
<html>
<script>
function miFuncion() {
var edad = document.getElementById("edad").checked;
var sexo = document.getElementById("sexo").checked;
if (edad==true){
document.getElementById("demo1").innerHTML = "Usted es mayor de edad " ;
}else{
document.getElementById("demo1").innerHTML = "Usted es menor de edad " ;
}
if (sexo==true){
document.getElementById("demo2").innerHTML = "Usted es Hombre " ;
}else{
document.getElementById("demo2").innerHTML = "Usted es Mujer " ;
}
// Ahora mas compleja
if (edad == true && sexo==true) {
document.getElementById("demo3").innerHTML = "Usted es Hombre y es mayor de edad" ;
}else{
if(edad==false && sexo == true){
document.getElementById("demo3").innerHTML = "Usted es Hombre y es menor de edad" ;
}else{
if(edad==false && sexo == false){
document.getElementById("demo3").innerHTML = "Usted es Mujer y es menor de edad" ;
}else{
document.getElementById("demo3").innerHTML = "Usted es Mujer y es mayor de edad" ;
}
}
}
}
</script>
<body>
<input type="checkbox" id="edad" > Es usted mayor de edad<br>
<input type="checkbox" id="sexo" > Es usted hombre<br>
<p>Haga Click en el boton para ejecutar.</p>
<button onclick="miFuncion()">Pruebalo</button>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
</body>
</html>
El comando SWITCH nos permite evaluar múltiples casos de una condición:
switch (condicion) {
case valor 1:
comando1;
break; // salta al siguiente comando si no se coloca continua con el siguiente caso
case valor 2:
comando 2;
break; // salta al siguiente comando si no se coloca continua con el siguiente caso
case valor 3:
comando 3;
break; // salta al siguiente comando si no se coloca continua con el siguiente caso
case valor N:
comando N;
break; // salta al siguiente comando si no se coloca continua con el siguiente caso
default:
Comandos que se ejecutan si ningún caso se cumple
}
Veamos un Ejemplo:
<!DOCTYPE html>
<html>
<script>
function miFuncion() {
var dia;
// La funcion new Date().getDay() nos devuelve el dia de la semana segun la fecha actual
switch (new Date().getDay()) {
case 0:
dia = "Domingo";
break;
case 1:
dia = "Lunes";
break;
case 2:
dia = "Martes";
break;
case 3:
dia = "Miercoles";
break;
case 4:
dia = "Jueves";
break;
case 5:
dia = "Viernes";
break;
case 6:
dia = "Sabado";
}
document.getElementById("demo1").innerHTML = dia ;
}
</script>
<body>
¿Que dia es hoy?
<p>Haga Click en el boton para ejecutar.</p>
<button onclick="miFuncion();">Pruebalo</button>
<p id="demo1"></p>
</body>
</html>
Ciclos
Los ciclos nos permiten ejecutar una acción un determinado numero de veces o mientras se cumpla una condición o hasta que se cumpla una condición. Son muy poderosos y de mucha utilidad simplificando rutinas repetitivas.
Repetir un numero de veces
Ciclo FOR:
for (Valor inicial de la variable de control ; Condición para terminar el ciclo; forma en que se incrementa o decrementa la variable de control) {
Comandos que se Repiten
}
Veamos un ejemplo:
<!DOCTYPE html>
<html>
<script>
function miFuncion() {
var i=0, texto="";
for (i=0;i<10;i++){
texto = texto + i + " ";
document.getElementById("demo1").innerHTML = texto ;
}
texto="";
for (i=1;i<=10;i++){
texto = texto + i + " ";
document.getElementById("demo2").innerHTML = texto ;
}
texto="";
for (i=10;i>0;i--){
texto = texto + i + " ";
document.getElementById("demo3").innerHTML = texto ;
}
texto="";
for (i=1;i<=10;i=i+2){
texto = texto + i + " ";
document.getElementById("demo4").innerHTML = texto ;
}
texto="";
for (i=0;i<=10;i=i+2){
texto = texto + i + " ";
document.getElementById("demo5").innerHTML = texto ;
}
}
</script>
<body>
<p>Haga Click en el boton para ejecutar.</p>
<button onclick="miFuncion()">Pruebalo</button>
<br>
<h2>Del 0 al 9 </h2>
<p id="demo1"></p>
<h2>Del 1 al 10 </h2>
<p id="demo2"></p>
<h2>Del 10 al 1 </h2>
<p id="demo3"></p>
<h2>Los impares</h2>
<p id="demo4"></p>
<h2>Los pares</h2>
<p id="demo5"></p>
</body>
</html>
Repetir mientras se cumpla una condición
Ciclo While se repite mientras una condición sea verdadera.
while (condición) {
Comandos
}
Veamos un Ejemplo:
<!DOCTYPE html>
<html>
<script> function miFuncion() {
var i=0, texto="";
while (i<=10){
i++; // forma corta de escribir i=i+1
texto = texto + "i = " + i + "<br>"
document.getElementById("demo1").innerHTML = texto ;
}
}
</script>
<body>
<p>Haga Click en el boton para ejecutar.</p>
<button onclick="miFuncion()">Pruebalo</button>
<br>
<p id="demo1"></p>
</body>
</html>
Repetir una vez y mientras se cumpla una condición
Ciclo Do - While se repite por lo menos una vez y mientras una condición sea verdadera.
Do {
comandos
} while (condición);
Veamos un ejemplo:
<!DOCTYPE html>
<html>
<script>
function miFuncion() {
var i=1, texto="";
var n=document.getElementById("numero").value;
do {
if (i==1){
texto = "1 vez <br>" ;
}else {
texto = texto + i + " veces <br>";
}
document.getElementById("demo1").innerHTML = texto ;
i++;
}while (i<=n);
}
</script>
<body>
Indica cuantas veces quieres
<input type="text" id="numero" value = "0">
<p>Haga Click en el boton para ejecutar.</p>
<button onclick="miFuncion()">Pruebalo</button>
<br>
<p id="demo1"></p>
</body>
</html>
No hay comentarios.:
Publicar un comentario