Javascript: lenguaje interactivo para dinamizar la web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 31
Visitas el mes pasado: 60
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
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:
Nombre | Signo | Descripción | Ejemplo |
---|---|---|---|
AND | && | Devuelve true sólo si las dos condiciones son verdaderas, si no es así
devuelve false |
n1 != n2 && n1 != n3 |
OR | || | Devuelve true si una de las dos condiciones es verdadera, sólo si las dos son falsas
devuelve false |
n1 == n2 || n1 == n3 |
Negación | ! | Cambia el valor del elemento al que se le aplica es decir, si variable vale true ,
!variable valdrá false |
!variable |
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
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
).
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:
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.
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