Las declaraciones condicionales de varios tipos juegan un papel central en JS++. En este tutorial, veremos la sintaxis básica y algunos usos comunes de tales declaraciones, y también presentaremos dos tipos de expresiones que se usan a menudo en condicionales: operadores de comparación y operadores lógicos.
Nota: Los condicionales, los operadores de comparación y los operadores lógicos de JS++ funcionan de manera similar a sus contrapartes en lenguajes como JavaScript, Java, C++ y C#.
Comencemos por crear una nueva carpeta, asígnele el nombre «Condicionales». Luego cree un nuevo archivo y asígnele el nombre «Conditionals.jspp». Escribe el siguiente código:
external $; string colorString; bool likesRed = true; if (likesRed) { colorString = "red"; } $("#content").text(colorString); $("#content").css("color", colorString);
Guarde Conditionals.jspp en su carpeta Conditionals. Luego cree un segundo archivo llamado «Conditionals.html» y escriba lo siguiente:
<!DOCTYPE html> <title>Conditionals program</title> <body> <p id="content"></p> <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="Conditionals.jspp.js"></script> </body> </html>
Guarde Conditionals.html en su carpeta Conditionals. Compile Conditionals.jspp y luego abra Conditionals.html en un navegador. Si todo ha funcionado, su documento debería mostrar «rojo» en una fuente roja.
«si», «si no», y «si no»
Conditionals.jspp muestra la sintaxis de una declaración simple if
: la palabra clave if
en sí, seguida de un par de paréntesis que contienen una condición para verificar, seguido de un bloque de código entre llaves que se ejecuta si y solo si la condición es verdadera.
Nota: las llaves alrededor del bloque de código son opcionales si el bloque solo contiene una declaración. Sin embargo, para mantener la coherencia y la legibilidad, se recomienda utilizar siempre llaves.
Aunque if
las declaraciones a menudo se usan solas, también se usan comúnmente junto con else
declaraciones. Agreguemos una else
declaración a Conditionals.jspp:
external $; string colorString; bool likesRed = true; if (likesRed) { colorString = "red"; } else { colorString = "blue"; } $("#content").text(colorString); $("#content").css("color", colorString);
Compile este código y luego abra Conditionals.html en un navegador. El resultado es el mismo: el documento aún muestra «rojo» en una fuente roja. La razón es que el código en un else
bloque solo se ejecuta si la condición en la if
declaración asociada es falsa. Para que el código en su else
bloque se ejecute, cambie el valor de likesRed
a false
: Conditionals.html luego mostrará «azul» en una fuente azul.
Tenga en cuenta que la else
declaración no especifica una condición propia; la única condición que se verifica en Conditionals.jspp es likesRed
. Simplemente tenemos un bloque de código que se ejecuta si esa condición es verdadera y otro bloque que se ejecuta si es falsa.
En algunos casos, sin embargo, queremos que la ejecución de nuestro código dependa de más de una condición. Aquí es donde else if
las declaraciones pueden resultar útiles. Una else if
instrucción proporciona una condición propia y un bloque de código asociado. El bloque de código se ejecuta si la condición es verdadera y todas las condiciones anteriores (es decir, aquellas asociadas con declaraciones if
y anteriores else if
) son falsas. Revisemos Conditionals.jspp nuevamente para mostrar el uso de una else if
declaración:
external $; string colorString; bool likesRed = false; bool likesBlue = true; if (likesRed) { colorString = "red"; } else if (likesBlue) { colorString = "blue"; } else { colorString = "green"; } $("#content").text(colorString); $("#content").css("color", colorString);
else if
Aquí se ejecutará el código en el bloque, ya que su likesBlue
condición es verdadera mientras que la likesRed
condición especificada por la if
instrucción anterior es falsa. Sin embargo, si cambiamos el valor de likesBlue
a false, el código del else if
bloque no se ejecutará, pero sí el código del else
bloque. Juega con los valores de likesRed
y likesBlue
para ti mismo para ver qué efecto tienen en la ejecución del condicional.
Operadores de comparación
A menudo, cuando usamos condicionales, es porque queremos que la ejecución de nuestro código dependa del resultado de una comparación de algún tipo. Por ejemplo, supongamos que queremos verificar si el valor de una tempInCelsius
variable es igual a 0, y hacer que se ejecute algún código si lo es. Escribiríamos:
if (tempInCelsius == 0) { // Code to be executed goes here }
Este condicional usa el operador de igualdad “==”. Una comparación de igualdad devuelve verdadero si los valores comparados son iguales y falso en caso contrario.
Nota: el operador de igualdad “==” no es lo mismo que el operador de asignación “=”. ¡Cuidado con esta distinción! Si accidentalmente usa «=» en lugar de «==», introducirá errores en su código que pueden ser difíciles de detectar.
JS++ contiene varios operadores de comparación además de “==”. Para extender el ejemplo de verificación de temperatura, supongamos que no queremos verificar el valor exactotempInCelsius
de, sino en qué rango se encuentra. Nuestro código podría verse así:
if (tempInCelsius > 30) { // Code to execute if temperature is over 30 } else if (tempInCelsius >= 15) { // Code to execute if temperature is between 15 and 30 } else { // Code to execute if temperature is 14 or below }
Este ejemplo utiliza el operador mayor que “>”, que devuelve verdadero si el operando izquierdo es mayor que el derecho, y el operador mayor o igual que “>=”, que devuelve verdadero si el operando izquierdo es mayor o igual al operando derecho. Puede ver la gama completa de operadores de comparación aquí:
Operadores de comparación en JS++
Operadores logicos
A veces queremos que el código se ejecute solo si se cumplen varias condiciones. Para lograr esto, una opción sería usar condicionales anidados , como los siguientes:
external $; string colorString; bool likesRed = true; bool likesBlue = true; if (likesRed) { if (likesBlue) { colorString = "I have a wide taste in colors"; $("#content").text(colorString); } }
Al colocar el likesBlue
condicional dentro del likesRed
condicional de esta manera, nos aseguramos de que el código en el likesBlue
bloque se ejecutará si y solo si ambas condiciones son verdaderas.
Aunque los condicionales anidados se pueden usar para tales propósitos, tienden a dificultar la lectura del código, particularmente cuando los condicionales involucrados son complejos. Una alternativa es utilizar el operador lógico AND “&&”. Reemplacemos nuestro condicional anidado con:
if (likesRed && likesBlue) { colorString = "I have a wide taste in colors"; $("#content").text(colorString); }
Una declaración «&&» toma dos operandos, que normalmente serán expresiones booleanas. Suponiendo que lo sean, la declaración devuelve verdadero si ambos operandos son verdaderos y falso en caso contrario. Por lo tanto, el código anterior tiene el mismo efecto que el condicional anidado anterior: el bloque de código se ejecuta si y solo si ambos likesRed
y likesBlue
son verdaderos. Sin embargo, el condicional «&&» es más fácil de leer que el condicional anidado, por lo que es preferible.
JS++ contiene otros dos operadores lógicos además de «&&»: el operador OR «||» y el operador NOT «!». “||” es un operador binario como “&&”: toma dos operandos. Suponiendo que ambas son expresiones booleanas, la declaración devuelve verdadero si al menos un operando es verdadero y falso en caso contrario. “||” es útil en los casos en los que desea que se ejecute algún código si una condición es verdadera u otra es:
if (likesRed || likesBlue) { colorString = "I like at least one color"; $("#content").text(colorString); }
“!” difiere de “&&” y “||” en que es un operador unario: toma un solo operando. Devuelve verdadero si el operando es falso y falso si el operando es verdadero. Por ejemplo:
if (!likesRed) { colorString = "I do not like red"; $("#content").text(colorString); }
Nota: Aunque los operandos regidos por “&&” y “||” normalmente serán expresiones booleanas, no es necesario que lo sean. Para cubrir los casos en los que los operandos no son booleanos, «&&» y «||» se definen con mayor precisión de la siguiente manera: una declaración «&&» devuelve falso si el operando izquierdo es falso; de lo contrario, devuelve el valor del operando derecho. Un “||” declaración devuelve verdadero si el operando de la izquierda es verdadero; de lo contrario, devuelve el valor del operando derecho.
Cambiar declaraciones
A veces necesita que su programa maneje varias posibilidades diferentes y ejecute código diferente en cada una. Aunque podría lograr esto usando un condicional con varias else if
declaraciones, a menudo es más simple usar una switch
declaración. Una switch
declaración evalúa una expresión y compara su valor con una o más case
expresiones; si una de estas case
expresiones proporciona una coincidencia, se ejecuta algún código asociado.
Tomemos un ejemplo:
external $; string favoriteColor; string colorComment; favoriteColor = "green"; switch (favoriteColor) { case "red": colorComment = "red is fantastic"; break; case "blue": colorComment = "blue is wonderful"; break; case "green": colorComment = "green is magical"; break; case "yellow": colorComment = "yellow is brilliant"; break; default: colorComment = "I have no favorite color"; break; } $("#content").text(colorComment);
En este ejemplo, la switch
instrucción compara el valor de la string favoriteColor
con las diversas case
expresiones enumeradas. Cuando encuentra una coincidencia, ejecuta el código asociado. Dado que el valor de favoriteColor
es «verde», la declaración de cambio ejecuta el código asociado con ese caso: la string colorComment
se establece en » green is magical
«.
¿Cuál es el propósito de las palabras clave break
y default
? La break
palabra clave es muy importante porque es necesaria si desea evitar las llamadas «caídas». Fallthrough ocurre cuando una declaración de cambio ejecuta el código asociado con uno o más casos después del caso coincidente. Por ejemplo, si elimina el break
al final del caso verde, la declaración de cambio pasará a establecerse colorComment
en » yellow is brilliant
«. En algunas situaciones raras, es posible que desee fallas de este tipo; si es así, omitiría intencionalmente break. (También se le aconsejaría que agregue un comentario que indique explícitamente que la falla fue la intención). Sin embargo, por lo general, querrá incluirlo break
al final de cada caso.
El código de la default
cláusula se ejecuta si ninguna de las expresiones de mayúsculas y minúsculas coincide con la expresión original. La default
cláusula es opcional: si no proporciona una, el programa reanuda la ejecución en la primera declaración después de la declaración de cambio.
Publicación traducida automáticamente
Artículo escrito por CharlesKozenyPelling y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA