TALLER |
|
En este capítulo vamos a repasar más tipos de valores y operadores, los valores booleanos los cuales son de gran utilidad a la hora de programar, estos son los valores que pueden tener solo dos posibilidades, verdadero o falso, on u off, etc, veremos los operadores de comparación, los cuales, a partir de dos valores nos devolverán un valor booleano, también usaremos el operador ternario o condicional y los operadores lógicos and, or y not.
Pero vale ya de explicaciones y vayamos al lío
Valores booleanos El valor booleano o como también se puede llamar valor de tipo lógico, en programación se les llama a aquellos que pueden representar valores de lógica binaria, para que lo entendamos solo dos valores, “sí” o “no”, “dentro” o "fuera”, “encendido” o “apagado”, que en JavaScript estos dos valores serán true (verdadero) y false (falso). Así de primeras no os dirá mucho esta definición si sois nuevos en estos temas, pero son muy utilizadas en programación a la hora de hacer declaraciones condicionales, como por ejemplo con las instrucciones if y else, así como comparar valores y conseguir otros en función de los resultados, pero hoy no vamos a llegar a ver cómo, pero es algo del estilo de esto. Si lo que pregunto es = verdad - Entonces Salto Si lo que pregunto es = falso - Entonces Corro miPregunta = true miPregunta = false Este tipo de declaraciones las repasaremos un poco más adelante, solo necesitamos por ahora saber que existen. Operadores de comparación Con los operadores de comparación se pueden crear valores booleanos a partir de dos valores, esto sucede cuando los utilizamos en declaraciones lógicas con la intención de determinar una “igualdad” o “no igualdad”, una comparación entre dos elementos ya sea de valor o de tipo… con la intención de que nos devuelva un resultado de verdadero (true) o falso (false), para adoptar una acción en función del resultado. Operador Significado == Es igual que === Es igual en valor e igual tipo != No es igual !== No es igual valor o no igual tipo > Mayor que < Menor que >= Mayor o igual que <= Menor o igual que ? Operador ternario La sintaxis de los operadores de comparación es: Valor operador de comparación valor esto dará un valor booleano 12 == 12 esto da true (verdadero) En las líneas de código que vemos más abajo hay un ejemplo, para que lo pongáis en vuestro editor de texto plano, por si queréis probar los distintos operadores. <!-- NeCLO tu tranquilo, empeoramos cada día --> <html> <head> <meta charset="utf-8"> <title>Ejemplo de JavaScript 1</title> </head> <body> <h2>Ejemplo de operadores de comparación</h2> <p>Los valores y las variables que vamos a usar para comparar son:<br> var a = 10<br> var b = 5<br> var c = 5<br><br> </p> <script> var a = 10; var b = 5; var c = 5; document.write("a == b da como resultado ");document.write(a == b);document.write("<br>"); //ejemplo operador "igual que" dos valores numéricos document.write('5 == "5" da como resultado ');document.write(5 == "5");document.write("<br>"); //ejemplo "igual que" con valor numérico y de cadena document.write('5 === "5" da como resultado ');document.write(5 === "5");document.write("<br>"); //ejemplo "igual en valor e igual en tipo que" con un valor numérico y de cadena document.write("a != b da como resultado ");document.write(a != b);document.write("<br>"); //ejemplo operador "no es igual" document.write('5 != "5" da como resultado ');document.write(5 != "5");document.write("<br>"); //ejemplo operador "no es igual" document.write('5 !== "5" da como resultado ');document.write(5 !== "5");document.write("<br>"); //ejemplo operador "no es igual valor ni igual tipo" con un valor numérico y de cadena document.write("a < b da como resultado ");document.write(a < b);document.write("<br>"); //ejemplo "menor que" document.write("a > b da como resultado ");document.write(a > b);document.write("<br>"); //ejemplo "mayor que" document.write("a >= c da como resultado ");document.write(a >= c);document.write("<br>"); //ejemplo "mayor o igual que" document.write("b <= c da como resultado ");document.write(b <= c);document.write("<br>"); //ejemplo "menor o igual que" </script> </body> </html> Ahora vamos a explicarlos uno por uno los operadores de comparación y de paso hacemos unos ejercicios para comprobar si lo entendemos. Para el ejemplo asignaremos estos valores a las variables: var a = 10; var b = 5; var c = 5; El operador == sirve para comparar dos valores, su significado es “igual que”, por lo tanto cuando se utiliza para comparar dos valores si estos son iguales nos responderá con el valor booleano true (verdadero) o de lo contrario con un false (falso) para indicar que son distintos, la expresión en este último caso se lee así: 12 es igual a 8 eso es false (falso), como 12 y 8 evidentemente no son iguales, esa expresión nos devolvería un valor booleano de false (falso). Ejercicios: piensa el resultado antes de pulsar ¿Si a=10 y b=5 la expresión a==b dará como resultado?
¿Si b=5 y c=5 la expresión b==c dará como resultado?
¿Si b=5 la expresión b==5 dará como resultado?
¿Si b=5 la expresión b==”5”dará como resultado?
Nota
En JavaScript solo hay un valor que no es igual a sí mismo o dicho de otro modo que al compararlo consigo mismo, no da true (verdadero), ese valor es NaN. El operador === sirve para comparar dos valores, su significado “igual en valor e igual tipo” la diferencia con el anterior es que compara el valor y de qué tipo veamos dos ejemplos rápidos. Una variable x se le puede asignar un valor numérico como por ejemplo 4 si comparamos este valor numérico con un valor de cadena “4” (recordar lo que vimos en el anterior capítulo sobre los valores de cadena y que van entre comillas) aunque en este caso ambos valores son 4, el tipo varía, uno es un valor numérico y el otro es un valor de cadena. Ejercicios: piensa el resultado antes de pulsar ¿Si b = 5 y c = 5 la expresión b===c dará como resultado?
¿Si b = 5 la expresión b===5 dará como resultado?
¿Tenemos la expresión “5”===5 dará como resultado?
El operador != sirve para comparar dos valores, su significado es “No es igual” por lo tanto si cogemos un valor cualquiera como 12 y con este operador lo comparamos con un 8, la expresión quedaría: 12 != 8, la expresión se lee 12 no es igual a 8 y nos devolvería el valor booleano true(verdadero).
Ejercicios: piensa el resultado antes de pulsar ¿Si a = 10 y b=5 la expresión a != b dará como resultado?
¿Si b=5 y c=5 la expresión b != c dará como resultado?
¿Si comparamos 5 y “5” la expresión 5!=”5” dará como resultado?
El operador !== sirve para comparar dos valores, su significado es “No es igual valor o no es igual tipo” en el ejemplo anterior el último resultado da como falso la comparación de 5 y”5” porque los considera iguales pero el operador !== compara de la siguiente manera:
5 tiene el valor 5 y es de tipo numérico “5” tiene el valor 5 y es de tipo cadena Por lo tanto, tienen el mismo valor pero son de distinto tipo en la expresión 5 !== “5” devolvería true Porque 5 numérico !== (no es igual en valor o en tipo) a “5” cadena esto es true (verdadero) Siendo de igual valor son de distinto tipo Ejercicios: piensa el resultado antes de pulsar ¿Si a=10 entonces a !== 10 dará como resultado?
¿Si a = 10 entonces a !== ”10” dará como resultado?
El operador >= y <= sirven para comparar dos valores y sus significados respectivamente son “mayor o igual que” y “menor o igual que” esto se puede representar de la siguiente manera:
10 >= 10 esto lanza el valor true y se lee 10 es mayor o igual a 10 esto es true verdadero. En los cuatro últimos operadores hemos visto cómo se comportan con valores numéricos, pero ¿Cómo funcionan con las cadenas? Con las cadenas la sintaxis sería la misma, y la forma en que devuelven los valores booleanos sería un sistema alfabético, pero, veamos a que queremos decir, por ejemplo: “a” > “b” esto es false, esto se lee “a” es mayor que “b” esto es falso. “b” > “a” esto es true, “b” es mayor que “a” esto es verdadero Por lo tanto, “a” es menor que “b” esto es porque en JavaScript se usa un sistema alfabético, asignando a la primera letra que es la a, el valor 1, a la b el valor 2 y así sucesivamente. Además de esta forma en que interpreta las cadenas hay que tener en cuenta si son mayúsculas o minúsculas y cómo lo interpreta, JavaScript hemos dicho que sigue un orden alfabético para los valores de cadenas si bien una letra mayúscula siempre tendrá un valor menor que una minúscula, veamos que queremos decir con un ejemplo: La letra minúscula con menor valor es la a porque es la primera del alfabeto y la letra mayúscula con mayor valor es la Z, entonces veamos cómo queda la comparación. “a” > ”Z” es true, “a” minúscula es mayor que “Z” mayúscula esto es true verdadero. Al comparar cadenas con números por ejemplo al comparar “3” y “25”, igual el resultado nos confunde, porque “3” > “25” es true, “3” mayor que “25” es true verdadero, y lo primero que se nos pasa por la cabeza es que 3 es menor que 25 entonces porque devuelve este valor, esto sucede de esta manera porque se asignan valores a partir de un orden alfabético, por lo que si el primer número es 3 es mayor que el primer número de 25 que es 2, entonces alfabéticamente 25 irá antes que 3 y por lo tanto tendrá un valor menor. Ejercicios: piensa el resultado antes de pulsar ¿Si a=10 y b=5 entonces a > 5 dará como resultado?
¿Si b=5 y c=5 entonces b > c dará como resultado?
¿Si b=5 entonces b >= 5 dará como resultado?
¿Si a=10 y c=5 entonces a <= c dará como resultado?
El operador ?, conocido como el operador ternario, es un operador que asigna un valor a una variable en función de una condición
La sintaxis de este operador es: nombre de la variable = (condición) ? valor1 : valor2; <!DOCTYPE html> <html> <head> <meta charset= "utf-8"> </head> <body> <p>¿Cuántos kilómetros hace desde que cambiaste el aceite a tu coche? <br> Introduce en el recuadro los kilómetros que lleva tu coche desde que lo cambiaste por última vez y haz click con el ratón en el botón enter</p> <input id="kilometros" value=" " /> <button onclick="nombredelafuncion()">Enter</button> <p id="ejemplo17"></p> <script> function nombredelafuncion() { var kilometros, aceite; kilometros = document.getElementById("kilometros").value; aceite = (kilometros < 15000) ? "Aún no tienes que ":"Pásate por tu taller más cercano lo antes posible a "; document.getElementById("ejemplo17").innerHTML = aceite + " cambiar el aceite"; } </script> </body> </html> ¿Cuántos kilómetros hace desde que cambiaste el aceite a tu coche?
En el ejemplo hemos creado la variable kilómetros, aceite; cuando los kilómetros son <15000 devolverá el valor Aún no tienes que cambiar el aceite, si los kilómetros son >= 15000 este devolverá el valor Pásate por tu taller más cercano lo antes posible a cambiar el aceite.
Hasta ahora hemos visto como con operadores de comparación y distintos tipos de valores como son los numéricos y las cadenas, estas operaciones nos devolvían valores booleanos, pero, a llegado el momento de ver qué tipo de operaciones nos permite realizar JavaScript con estos valores booleanos. Operadores lógicos Cómo acabamos de decir vamos a ver cómo operar con valores booleanos y para esto JavaScript nos arma con los operadores lógicos, en JavaScript existen tres operadores lógicos, and, or y not y son estos los que debemos emplear para “razonar” con booleanos. && es el operador lógico and (y) El operador lógico &&, (and o y) en lógica sería una “y”, este operador en lógica sería como decir: Si voy al cine me lo paso bien y como palomitas. Es una declaración del tipo si me lo paso bien y como palomitas es verdad que he ido al cine . Dentro de los distintos operadores es un operador binario, que recordemos que significa que usa dos valores como los anteriores operadores de comparación, este operador lanzará un resultado true (verdadero) solo cuando los dos valores con los que opera sean verdaderos, si alguno no fuese verdadero el resultado que dará será false (falso). A B resultado Donde 1 = true y 0 = false 1 1 1 1 0 0 0 1 0 0 0 0 <!DOCTYPE html> <html> <head> <meta charset = "utf8"> </head> <body> <h2>Operador AND</h2> <p>El operador AND que en JavaScript es && nos lanzará un valor true (verdadero) siempre que los dos valores que comparemos sean verdaderos, de lo contrario nos devolverá un false (falso).</p> <p id="ejemplo18"></p> <script> var a = 10; var b = 5; var c = 5; document.getElementById("ejemplo18").innerHTML = (b < 10 && a > b) + "<br>" + (a <= 10 && b > a); </script> </body> </html>
|| es el operador lógico or (o)
El operador lógico || (or u o), este operador en lógica booleana es como decir: “Tiene agua o refrescos” esta oración es verdadera siempre que alguno de los enunciados sea verdadero, tiene agua o tiene refrescos o las dos. Por lo que este operador devolverá true (verdadero) siempre que al menos uno de los valores con los que opere sea verdadero. A B resultado Donde 1 = true y 0 = false 1 1 1 1 0 1 0 1 1 0 0 0 <!DOCTYPE html> <html> <head> <meta charset = "utf8"> </head> <body> <h2>Operador OR</h2> <p>El operador OR que en JavaScript es || nos lanzará un valor true (verdadero) siempre que al menos uno o los dos, de los valores que comparemos sean verdaderos, de lo contrario nos devolverá un false (falso).</p> <p id="ejemplo19"></p> <script> var a = 10; var b = 5; var c = 5; document.getElementById("ejemplo19").innerHTML = (b < 10 || a > b) + "<br>" + (a <= 10 || b > a); </script> </body> </html>
! es el operador lógico not (no)
Este operador es unario lo que indica que da un resultado a partir de un solo valor, este lo que hace es negar el valor con el que opera, lanzando su negación, por lo tanto si se opera con !true nos dará false y si opera con ¡false devolverá true, también se puede entender como que lanza el valor contrario, si la operación que estamos ejecutando es verdadera lanzara un falso y si es falsa lanzará verdadera. A !A Donde 1 = true y 0 = false 1 0 0 1 <!DOCTYPE html> <html> <head> <meta charset = "utf8"> </head> <body> <h2>Operador NOT</h2> <p>El operador NOT que en JavaScript es ! nos lanzará un valor true (verdadero) cuando el sea false (falso) y cuando sea true (verdadero) nos devolverá un false (falso).</p> <p id="ejemplo20"></p> <script> var a = 2 + 2; var b = 5; var c = 5; document.getElementById("ejemplo20").innerHTML = ! ( a == 4 ) + "<br>" + ! ( a == b ); </script> </body> </html>
Hasta aquí hemos llegado en este capítulo, volveremos en el próximo con más operadores e intentaremos dejar todos los valores y operadores claros antes de comenzar con las expresiones, declaraciones las funciones y demás, todo lo que realmente es “sal” y la “pimienta” del asunto :-)
Manuel Castelló (kasmangou)
Temas relacionados: Programación, kasmangou, JavaScript, Taller Reconocimientos y más información sobre la obra gráfica ADVERTENCIA: En este foro, no se admitirán por ninguna razón el lenguaje soez y las descalificaciones de ningún tipo. Se valorará ante todo la buena educación y el rigor sobre el tema a tratar, así que nos enorgullece reconocer que rechazaremos cualquier comentario fuera de lugar.
0 Comentarios
Deja una respuesta. |