Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Aprende Web por Anyelguti is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License.

4. Estructuras básicas (V)

4.5 Condicionales II

Operadores Lógicos

Puede ser que queramos que para que se realice una determinada acción con javascript se tenga que cumplir más de una condición a la vez, otras veces puede haber varias condiciones, y queremos que al cumplirse sólo una de ellas, la acción pueda realizarse, para ello están los operadores lógicos.

Al igual que con los operadores condicionales, los valores que devuelven los operadores lógicos son siempre booleanos, es decir, true (verdadero) o false (falso).

Los operadores lógicos son los siguientes:

El operador lógico OR || se escribe mediante dos veces la barra vertical que se encuentra pulsando la tecla Alt Gr y el numero 1 (en la esquina superior izquierda).

Veamos un ejemplo de script en el que usamos los operadores lógicos:

function numero(){
         num = prompt("Escribe un número del 10 al 20");
         num = Number(num);
         if ( num <=10 || num >=20 ) {
             alert("Este número no es valido");
             }
         else {
             alert("El número es correcto");
             }
         }

Para hacer funcionar este script usaremos un párrafo con el atributo onclick llamando a la función:

<p onclick="numero()">Ver el script</p>

Si pulsas en el siguiente párrafo puedes ver el script anterior en marcha:

Ver el script

Anidar estructuras if

A veces las opciones entre las que queremos elegir son más de dos, es decir la estructura if ... else ... se queda pequeña, ya que sólo permite seguir dos opciones. Para ello podemos anidar varias estructuras if mediante el codigo siguiente:

if (condicion) {
    sentencias javascript;
    }
else if (condicion) {
    sentencias javascript;
    }
else if (condicion) {
    sentencias javascript;
    }
.....
else {
    sentencias javascript;
    }

El navegador comprueba si se cumple la primera condición, si no es asi, pasa a comprobar la segunda (en el primer else if), luego a la tercera, y si no se cumple ninguna se ejecutará el código que está en último lugar (en else).

Ejemplo de estructura if

Veremos aquí un ejemplo de estructura if que puede integrarse en una página web, para ello una vez que tenemos creada la página, en la cabecera introduciremos el siguiente código javascript:

<script type="text/javascript">
function datos(){
         var nombre = prompt("¿Cómo te llamas?");
         var edad = prompt("¿Cuántos años tienes");
         texto = document.getElementById("respuesta");
         edad = Number(edad);
         if (edad >0 && edad <=14 ) {
             texto.innerHTML = "Hola " + nombre + ", Todavía eres un niño";
             }
         else if (edad >=15 && edad <=21 ) {
             texto.innerHTML = "Hola " + nombre + ", Aún eres un joven adolescente.";
             }
         else if (edad >=22 && edad <=35 ) {
             texto.innerHTML = "Hola " + nombre + ", Eres una persona joven.";
             }	
         else if (edad >=36 && edad <=55 ) {
             texto.innerHTML = "Hola " + nombre + ", Ya no eres tan joven"; 
             }	
         else if (edad >=56 && edad <=65 ) {
             texto.innerHTML = "Hola " + nombre + ", Eres una persona madura";
             }	
         else if (edad >=66 && edad <=99 ) {
             texto.innerHTML = "Hola " + nombre + ", Ya estás en la tercera edad";
             } 
         else if (edad >=100 && edad <=130 ) {
             texto.innerHTML = "Hola " + nombre + ", Felicidades, has llegado a centenario"; 
             }	
         else { 
             texto.innerHTML = "Hola " + nombre + ", Creo que no me estas diciendo tu verdadera edad"; 
             } 
				 }			 
</script>

En el código HTML, dentro del body debemos insertar las dos etiquetas siguientes, la primera, para activar el código, y la segunda para poder ver la respuesta.

<p onclick="datos()">Pulsa aquí para decirme tu nombre y edad</p>
<p id="respuesta"><p>

Puedes ver este script en la página del siguiente enlace:

Estructura if

En el ejemplo, si escribes diferentes números para la edad (al pulsar sobre el párrafo que lo pregunta), verás que salen diferentes respuestas según el número que hayas puesto.

Aparte de la estructura if hay también otros tipos de estructuras para elegir entre varias condiciones, las cuales las veremos en temas posteriores; aunque la estructura if es la más usada.

En la siguiente página veremos el tipo de estructura en bucle, que permite repetir una acción varias veces.

Bucles

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com