Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.
En cualquier lenguaje de programación, el código necesita realizar decisiones y llevar a cabo diferentes acciones acordes dependiendo de distintas entradas. Por ejemplo, en un juego, si el el numero de vidas del jugador es 0, entonces se termina el juego. En una aplicación del clima, si se observa en la mañana, se despliega una gráfica del amanecer; muestra estrellas y una luna si es de noche. En este artículo, exploraremos cómo las llamadas declaraciones condicionales funcionan en JavaScript.
Prerequisitos: | Conocimientos básicos de informática, básico entendimiento de HTML y CSS, JavaScript primeros pasos. |
---|---|
Objetivo: | Entender como se usan las extructuras condicionales en JavaScript. |
Puedes hacerlo en una condición..!
Los seres humanos (y otros animales) toman decisiones todo el tiempo que afectan sus vidas, desde la más insignificante ("¿Debería comer una galleta o dos?") hasta la más grande (¿Debería quedarme en mi país y trabajar en la granja de mi padre, o debería mudarme a Estados Unidos y estudiar astrofísica?).
Declaraciones if ... else
Echemos un vistazo a la declaración condicional más común que usarás en JavaScript.
— El humilde if ... else
statement.
Sintaxis if ... else básica.
Una sintaxis básica if...else
luce así. pseudocode:
if (condición) { código a ejecutar si la condición es verdadera } else { ejecuta este otro código si la condición es falsa }
Aquí tenemos:
- La palabra clave
if
seguida de unos paréntesis. - Una condición a probar, puesta dentro de los paréntesis (típicamente "¿es este valor mayor que este otro valor?", o "¿existe este valor?"). Esta condición usará los operadores de comparación que hemos hablado en el módulo anterior y retorna un valor
true
ofalse (verdadero o falso)
. - Un conjunto de llaves, en las cuales tenemos algún código — puede ser cualquier código que deseemos, código que se ejecutará sólamente si la condición retorna
true
. - La palabra clave
else
. - Otro conjunto de llaves, dentro de las cuales tendremos otro código — puede ser cualquier código que deseemos, y sólo se ejecutará si la condición no es
true
.
Este código es fácil de leer — está diciendo "si (if) la condición retorna verdadero (true)
, entonces ejecute el código A, sino (else) ejecute el código B"
Habrás notado que no tienes que incluir else
y el segundo bloque de llaves — La siguiente declaración también es perfectmaente legal.
if (condición) { ejecuta el código de al ser verdadera la condición } ejecuta otro código
Sin embargo, hay que ser cuidadosos — en este caso, el segundo bloque no es controlado por una declaración condicional, así que siempre se ejecutará, sin importar si la condicional devuelve true
o false
. Esto no es necesariemente algo malo, pero puede ser algo que no quieras — a menudo desearás ejecutar un bloque de código u otro, no ambos.
Como punto final, habrán ocaciones donde veas delcaraciones if...else
escritas sin un conjunto de llaves, de esta manera:
if (condición) ejecuta código de ser verdadero (true) else ejecuta este otro código
Este código es perfectamente valido, pero no es recomendado usarlo — es mucho más fácil leer el código y determinar qué sucede haciendo uso de las llaves para delimitar los bloques de código y usar varias líneas y sangrías.
Un ejemplo real
Para comprender mejor la sintaxis, realicemos un ejemplo real. Imagínese a un niño a quien su madre o padre le pide ayuda con una tarea. El padre podría decir: "¡Hola, cariño! Si me ayudas yendo y haciendo las compras, te daré un subsidio adicional para que puedas pagar ese juguete que querías". En JavaScript, podríamos representar esto así:
var compraRealizada = false; if (compraRealizada === true) { var subsidioAdicional = 10; } else { var subsidioAdicional = 5; }
La variable compraRealizada
escrita en este código dará siempre como resultado un retorno de valor false
, lo cuál significa una desilusión para nuestro pobre hijo. Depende de nosotros proporcionar un mecanismo para que el padre cambie el valor de la variable compraRealizada
a true
si el niño realizó la compra.
Nota: Podrás ver una versión más completa de este ejemplo en GitHub (también podrás verlo corriendo en vivo.)
else if
El último ejemplo nos proporcionó dos opciones o resultados, pero ¿qué ocurre si queremos más de dos?
Hay una forma de encadenar opciones / resultados adicionales extras a if...else
— usando else if
. Cada opción extra requiere un bloque adicional para poner en medio de bloque if() { ... }
y else { ... }
— Vea el siguiente ejemplo un poco más complicado, que podría ser parte de una aplicación para un simple pronóstico del tiempo:
<label for="clima">Seleccione el tipo de clima de hoy: </label> <select id="clima"> <option value="">--Haga una elección--</option> <option value="soleado">Soleado</option> <option value="lluvioso">Lluvioso</option> <option value="nevando">Nevando</option> <option value="nublado">Nublado</option> </select> <p></p>
var seleccionar = document.querySelector('select'); var parrafo = document.querySelector('p'); seleccionar.addEventListener('change', establecerClima); function establecerClima() { var eleccion = seleccionar.value; if (eleccion === 'soleado') { parrafo.textContent = 'El día esta agradable y soleado hoy. ¡Use pantalones cortos! Ve a la playa o al parque y come un helado.'; } else if (eleccion === 'lluvioso') { parrafo.textContent = 'Está lloviendo, tome un abrigo para lluvia y un paraguas, y no se quede por fuera mucho tiempo.'; } else if (eleccion === 'nevando') { parrafo.textContent = 'Está nevando ─ ¡está congelando! Lo mejor es quedarse en casa con una taza caliente de chocolate, o hacer un muñeco de nieve.'; } else if (eleccion === 'nublado') { parrafo.textContent = 'No está lloviendo, pero el cielo está gris y nublado; podría llover en cualquier momento, así que lleve un saco solo por si acaso.'; } else { parrafo.textContent = ''; } }
- Aquí tenemos un elemento HTML
<select>
que nos permite realizar varias elecciones sobre el clima, y un parrafo simple. - En el JavaScript, estamos almacenando una referencia para ambos elementos
<select>
y<p>
, y añadiendo un Event Listener o en español un Detector de Eventos al elemento<select>
así cuando su valor cambie se ejecuta la funciónestablecerClima
().
- Cuando la función es ejecutada, primero establecemos la variable
eleccion
con el valor obtenido del elemento<select>.
Luego usamos una declaración condicinal para mostrar distintos textos dentro del párrafo<p>
dependiendo del valor de la variableeleccion
. Note como todas las condicinales son probadas en los bloqueselse if() {...}
, a excepción del primero, el cual es probado en el primer bloqueif() {...}
. - La ultima elección, dentro del bloque
else {...}
, es básicamente el "último recurso" como opción— El código dentro de este bloque se ejecutará si nunguna de las condiciones estrue
. En este caso, sirve para vaciar el contenido del párrafo si nada ha sido seleccionado, por ejemplo, si el usuario decide elegir de nuevo "--Haga una elección--" mostrado al inicio.
Nota: Puedes encontrar este ejemplo en GitHub (También podrás verlo correr en vivo.)
Una nota en los operadores de comparación
Los operadores de comparación son usados para probar las condiciones dentro de nuestra declaración condicional. Vimos estos operadores en el artículo Matématica básica en JavaScript — Números y operadores. Nuestras opciones son:
===
y!==
— prueba si un valor es exactamente igual a otro, o sino es indentico a otro valor.<
y>
— prueba si un valor es menor o mayor que otro.<=
y>=
— prueba si un valor es menor e igual o mayor e igual que otro.
Nota: Revisa el material en los enlaces previos para refrescar la memoria en estos temas.
Queremos hacer una mención especial al probar los valores (true
/false
) , y un patrón común que te encontrarás una y otra vez. Cualquier valor que no sea false
, undefined
, null
, 0
, NaN
, o una cadena vacía string (''
) realmente retorna el valor true
cuando es probada como una declaración condicional, por lo tanto puedes simplemente usar el nombre de una variable para probar si es true
, o si al menos existe (i.e. no está definido.) Por ejemplo:
var queso = 'Cheddar'; if (queso) { console.log('¡Siii! Hay queso para hacer tostadas con queso.'); } else { console.log('No hay tostadas con queso para ti hoy :(.'); }
En el ejemplo anterior la variable queso
contiene el valor 'Cheddar', y como su valor está definido o no es false
, undefined
, null
, 0
, NaN
y (' ')
es considerado como true
lo cual hará mostrar el mensaje dentro del primer bloque de llaves.
Y, devolviéndonos al ejemplo previo del niño haciendo las compras para su padre, lo podrías haber escrito así:
var compraRealizada = false; if (compraRealizada) { //no necesitas especificar explícitamente '=== true' var subsidioAdicional = 10; } else { var subsidioAdicional = 5; }
Anidando if ... else
Está perfectamente permitido poner una declaración if...else
dentro de otra declaración if...else
— para anidarlas. Por ejemplo, podemos actualizar nuestra aplicación del clima para mostrar una serie de opciones dependiendo de cual sea la temperatura:
if (elección === 'soleado') { if (temperatura < 86) { parrafo.textContent = 'Está a ' + temperatura + ' grados afuera — agradable y soleado. Vamos a la playa, o al parque, y comer helado.'; } else if (temperatura >= 86) { parrafo.textContent = 'Está a ' + temperatura + ' grados afuera — ¡QUÉ CALOR! Si deseas salir, asegúrate de aplicarte bloqueador solar.'; } }
Aunque el código funciona en conjunto, cada declaración if...else
funciona complentamente independiente del otro.
Operadores lógicos: AND, OR y NOT
Si quieres probar multiples condiciones sin escribir declaraciones if...else
anidados, los operadores lógicos pueden ayudarte. Cuando se usa en condiciones, los primeros dos hacen lo siguiente:
&&
— AND; le permite encadenar dos o más expresiones para que todas ellas se tengan que evaluar individualmentetrue
para que expresión entera retornetrue
.||
— OR; le permite encadenar dos o más expresiones para que una o más de ellas se tengan que evaluar individualmentetrue
para que expresión entera retornetrue
.
Para poner un ejemplo de AND, el anterior código puede ser reescrito de esta manera:
if (eleccion === 'soleado' && temperatura < 86) { parrafo.textContent = 'Está a ' + temperatura + ' grados afuera — agradable y soleado. Vamos a la playa, o al parque, y comer helado.'; } else if (eleccion === 'soleado' && temperatura >= 86) { parrafo.textContent = 'Está a ' + temperatura + ' grados afuera — ¡QUÉ CALOR! Si deseas salir, asegúrate de aplicarte bloqueador solar.'; }
Así que por ejemplo, el primer bloque solo se ejecutará si la variable eleccion === 'soleado'
y temperatura < 86
devuelven un valor verdadero o true
.
Observemos un ejemplo rápido del operador OR:
if (carritoDeHelados || estadoDeLaCasa === 'en llamas') { console.log('Debes salir de la casa rápidamente.'); } else { console.log('Es mejor que te quedes dentro de casa'); }
El último tipo de operador lógico, NOT, es expresado con el operador !
, puede ser usado para negar una expresión. Vamos a combinarlo con el operador OR en el siguiente ejemplo:
if (!(carritoDeHelados || estadoDeLaCasa === 'en llamas')) { console.log('Es mejor que te quedes dentro de casa'); } else { console.log('Debes salir de la casa rápidamente.'); }
En el anterior ejemplo, si las declaraciones del operador OR retornan un valor true
, el operador NOT negará toda la expresión dentro de los paréntesis, por lo tanto retornará un valor false
.
Puedes combinar los operadores que quieras dentro de las sentencias, en cualquier estructura. El siguiente ejemplo ejecuta el código dentro del condicional solo si ambas sentencias OR devuelven verdadero, lo que significa que la instrucción general AND devolverá verdadero:
if ((x === 5 || y > 3 || z <= 10) && (logueado || nombreUsuario === 'Steve')) { // ejecuta el código }
Un error comun cuando se utiliza el operador OR en las declaraciones condicionales es intentar verificar el valor de la variable una sola vez, y luego darle una lista de valores que podrían retornar verdadero separados por operadores ||. Por ejemplo:
if (x === 5 || 7 || 10 || 20) { // ejecuta mi código }
En este caso la condición if(...)
siempre evaluará a verdadero siendo que 7 (u otro valor que no sea 0) siempre será verdadero. Esta condición lo que realmente está diciendo es que "if x es igual a 5, o 7 es verdadero— lo cual siempre es". ¡Esto no es lógicamente lo que queremos! Para hacer que esto funcione, tenemos que especificar una prueba completa para cada lado del operador OR:
if (x === 5 || x === 7 || x === 10 ||x === 20) { // ejecuta mi código }
Declaraciones con switch
El
condicional if...else
hace un buen trabajo permitiéndonos realizar un buen código, pero esto viene con sus desventajas. Hay variedad de casos donde necesitarás realizar varias elecciones, y cada una requiere una cantidad razonable de código para ser ejecutado y/o sus condicionales son complejas (i.e. operadores lógicos múltiples). Para los casos en los que solo se desea establecer una variable para una determinada opción de valores o imprimir una declaración particular dependiendo de una condición, la sintaxis puede ser un poco engorrosa, especialmente si se tiene una gran cantidad de opciones.
Para estos casos los switch
statements son de gran ayuda — toman una sola expresión / valor como una entrada, y luego pasan a través de una serie de opciones hasta que encuentran una que coincida con ese valor, ejecutando el código correspondiente que va junto con ella. Aquí hay un pseudocódigo más para hacerte una idea:
switch (expresion) { case choice1: ejecuta este código break; case choice2: ejecuta este código break; // Se pueden incluir todos los casos que quieras default: por si acaso, corre este código }
Aquí tenemos:
La palabra clave switch
, seguida por un conjunto de paréntesis.- Una expresión o valor dentro de los paréntesis.
- La palabra clave
case
, seguida de una elección con la expresión / valor que podría ser, seguido de dos puntos. - Algún código a correr si la elección coincide con la expresión.
- Un declaración llamada
break
, seguida de un punto y coma. Si la elección previa coincide con la expresión / valor, el explorador dejará de ejecutar el bloque de código aquí, y continuará a la siguiente línea de código. Si la opción anterior coincide con la expresión / valor, aquí el navegador deja de ejecutar el bloque de código y pasa a cualquier código que aparezca debajo de la declaración deswitch
. - Como muchos otros casos, los que quieras.
- La palabra clave
default
, seguido exactamente del mismo patrón de código que en los casos anteriores , excepto que el valor predeterminado no tiene opciónes después de él, y no es necesario que se usebreak
porque no hay nada que ejecutar después de este bloque de todas formas. Esta es la opción predeterminada o por defecto que se ejecuta si ninguna de las opciones coincide.
Nota: No tiene que incluir la sección default
; se puede omitir con seguridad si no hay posibilidades de que la expresión termine igualando un valor desconocido. Sin embargo, si existe la posibilidad de que esto ocurra, debe incluirlo para evitar casos desconocidos o comportamientos extraños en tu código.
A switch example
Let's have a look at a real example — we'll rewrite our weather forecast application to use a switch statement instead:
<label for="weather">Select the weather type today: </label> <select id="weather"> <option value="">--Make a choice--</option> <option value="sunny">Sunny</option> <option value="rainy">Rainy</option> <option value="snowing">Snowing</option> <option value="overcast">Overcast</option> </select> <p></p>
var select = document.querySelector('select'); var para = document.querySelector('p'); select.addEventListener('change', setWeather); function setWeather() { var choice = select.value; switch (choice) { case 'sunny': para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.'; break; case 'rainy': para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.'; break; case 'snowing': para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.'; break; case 'overcast': para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.'; break; default: para.textContent = ''; } }
Nota: Tambien puedes encontrar este ejemplo en GitHub (tambien puedes verlo en ejecución aquí.)
Ternary operator
There is one final bit of syntax we want to introduce you to before we get you to play with some examples. The ternary or conditional operator is a small bit of syntax that tests a condition and returns one value/expression if it is true
, and another if it is false
— this can be useful in some situations, and can take up a lot less code than an if...else
block if you simply have two choices that are chosen between via a true
/false
condition. The pseudocode looks like this:
( condition ) ? run this code : run this code instead
So let's look at a simple example:
var greeting = ( isBirthday ) ? 'Happy birthday Mrs. Smith — we hope you have a great day!' : 'Good morning Mrs. Smith.';
Here we have a variable called isBirthday
— if this is true
, we give our guest a happy birthday message; if not, we give her the standard daily greeting.
Ternary operator example
You don't just have to set variable values with the ternary operator; you can also run functions, or lines of code — anything you like. The following live example shows a simple theme chooser where the styling for the site is applied using a ternary operator.
<label for="theme">Select theme: </label> <select id="theme"> <option value="white">White</option> <option value="black">Black</option> </select> <h1>This is my website</h1>
var select = document.querySelector('select'); var html = document.querySelector('html'); document.body.style.padding = '10px'; function update(bgColor, textColor) { html.style.backgroundColor = bgColor; html.style.color = textColor; } select.onchange = function() { ( select.value === 'black' ) ? update('black','white') : update('white','black'); }
Here we've got a <select>
element to choose a theme (black or white), plus a simple <h1>
to display a website title. We also have a function called update()
, which takes two colors as parameters (inputs). The website's background color is set to the first provided color, and its text color is set to the second provided color.
Finally, we've also got an onchange event listener that serves to run a function containing a ternary operator. It starts with a test condition — select.value === 'black'
. If this returns true
, we run the update()
function with parameters of black and white, meaning that we end up with background color of black and text color of white. If it returns false
, we run the update()
function with parameters of white and black, meaning that the site color are inverted.
Nota: También puedes encontrar este ejemplo en GitHub (y verlo en ejecución aquí.)
Active learning: A simple calendar
In this example, you are going to help us finish a simple calendar application. In the code you've got:
- A
<select>
element to allow the user to choose between different months. - An
onchange
event handler to detect when the value selected in the<select>
menu is changed. - A function called
createCalendar()
that draws the calendar and displays the correct month in the<h1>
element.
We need you to write a conditional statement inside the onchange
handler function, just below the // ADD CONDITIONAL HERE
comment. It should:
- Look at the selected month (stored in the
choice
variable. This will be the<select>
element value after the value changes, so "January" for example.) - Set a variable called
days
to be equal to the number of days in the selected month. To do this you'll have to look up the number of days in each month of the year. You can ignore leap years for the purposes of this example.
Hints:
- You are advised to use logical OR to group multiple months together into a single condition; many of them share the same number of days.
- Think about which number of days is the most common, and use that as a default value.
If you make a mistake, you can always reset the example with the "Reset" button. If you get really stuck, press "Show solution" to see a solution.
Playable code
<h2>Live output</h2> <div class="output" style="height: 500px;overflow: auto;"> <label for="month">Select month: </label> <select id="month"> <option value="January">January</option> <option value="February">February</option> <option value="March">March</option> <option value="April">April</option> <option value="May">May</option> <option value="June">June</option> <option value="July">July</option> <option value="August">August</option> <option value="September">September</option> <option value="October">October</option> <option value="November">November</option> <option value="December">December</option> </select> <h1></h1> <ul></ul> </div> <h2>Editable code</h2> <p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 400px;width: 95%"> var select = document.querySelector('select'); var list = document.querySelector('ul'); var h1 = document.querySelector('h1'); select.onchange = function() { var choice = select.value; // ADD CONDITIONAL HERE createCalendar(days, choice); } function createCalendar(days, choice) { list.innerHTML = ''; h1.textContent = choice; for (var i = 1; i <= days; i++) { var listItem = document.createElement('li'); listItem.textContent = i; list.appendChild(listItem); } } createCalendar(31,'January'); </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="Reset"> <input id="solution" type="button" value="Show solution"> </div>
.output * { box-sizing: border-box; } .output ul { padding-left: 0; } .output li { display: block; float: left; width: 25%; border: 2px solid white; padding: 5px; height: 40px; background-color: #4A2DB6; color: white; } html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; }
var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; var userEntry = textarea.value; function updateCode() { eval(textarea.value); } reset.addEventListener('click', function() { textarea.value = code; userEntry = textarea.value; solutionEntry = jsSolution; solution.value = 'Show solution'; updateCode(); }); solution.addEventListener('click', function() { if(solution.value === 'Show solution') { textarea.value = solutionEntry; solution.value = 'Hide solution'; } else { textarea.value = userEntry; solution.value = 'Show solution'; } updateCode(); }); var jsSolution = 'var select = document.querySelector(\'select\');\nvar list = document.querySelector(\'ul\');\nvar h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n var choice = select.value;\n var days = 31;\n if(choice === \'February\') {\n days = 28;\n } else if(choice === \'April\' || choice === \'June\' || choice === \'September\'|| choice === \'November\') {\n days = 30;\n }\n\n createCalendar(days, choice);\n}\n\nfunction createCalendar(days, choice) {\n list.innerHTML = \'\';\n h1.textContent = choice;\n for(var i = 1; i <= days; i++) {\n var listItem = document.createElement(\'li\');\n listItem.textContent = i;\n list.appendChild(listItem);\n }\n }\n\ncreateCalendar(31,\'January\');'; var solutionEntry = jsSolution; textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keyCode === 9) { e.preventDefault(); insertAtCaret('\t'); } if (e.keyCode === 27) { textarea.blur(); } }; function insertAtCaret(text) { var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = (textarea.value).substring(0, caretPos); var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); textarea.value = front + text + back; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; } // Update the saved userCode every time the user updates the text area code textarea.onkeyup = function(){ // We only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'Show solution') { userEntry = textarea.value; } else { solutionEntry = textarea.value; } updateCode(); };
Active learning: More color choices!
In this example, you are going to take the ternary operator example we saw earlier and convert the ternary operator into a switch statement that will allow us to apply more choices to the simple website. Look at the <select>
— this time you'll see that it has not two theme options, but five. You need to add a switch statement just underneath the // ADD SWITCH STATEMENT
comment:
- It should accept the
choice
variable as its input expression. - For each case, the choice should equal one of the possible values that can be selected, i.e. white, black, purple, yellow, or psychedelic. Note that the values are case sensitive, and should equal the
<option>
elementvalue
values rather than the visual labels. - For each case, the
update()
function should be run, and be passed two color values, the first one for the background color, and the second one for the text color. Remember that color values are strings, so need to be wrapped in quotes.
If you make a mistake, you can always reset the example with the "Reset" button. If you get really stuck, press "Show solution" to see a solution.
Playable code 2
<h2>Live output</h2> <div class="output" style="height: 300px;"> <label for="theme">Select theme: </label> <select id="theme"> <option value="white">White</option> <option value="black">Black</option> <option value="purple">Purple</option> <option value="yellow">Yellow</option> <option value="psychedelic">Psychedelic</option> </select> <h1>This is my website</h1> </div> <h2>Editable code</h2> <p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 450px;width: 95%"> var select = document.querySelector('select'); var html = document.querySelector('.output'); select.onchange = function() { var choice = select.value; // ADD SWITCH STATEMENT } function update(bgColor, textColor) { html.style.backgroundColor = bgColor; html.style.color = textColor; }</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="Reset"> <input id="solution" type="button" value="Show solution"> </div>
html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; }
var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; var userEntry = textarea.value; function updateCode() { eval(textarea.value); } reset.addEventListener('click', function() { textarea.value = code; userEntry = textarea.value; solutionEntry = jsSolution; solution.value = 'Show solution'; updateCode(); }); solution.addEventListener('click', function() { if(solution.value === 'Show solution') { textarea.value = solutionEntry; solution.value = 'Hide solution'; } else { textarea.value = userEntry; solution.value = 'Show solution'; } updateCode(); }); var jsSolution = 'var select = document.querySelector(\'select\');\nvar html = document.querySelector(\'.output\');\n\nselect.onchange = function() {\n var choice = select.value;\n\n switch(choice) {\n case \'black\':\n update(\'black\',\'white\');\n break;\n case \'white\':\n update(\'white\',\'black\');\n break;\n case \'purple\':\n update(\'purple\',\'white\');\n break;\n case \'yellow\':\n update(\'yellow\',\'darkgray\');\n break;\n case \'psychedelic\':\n update(\'lime\',\'purple\');\n break;\n }\n}\n\nfunction update(bgColor, textColor) {\n html.style.backgroundColor = bgColor;\n html.style.color = textColor;\n}'; var solutionEntry = jsSolution; textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keyCode === 9) { e.preventDefault(); insertAtCaret('\t'); } if (e.keyCode === 27) { textarea.blur(); } }; function insertAtCaret(text) { var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = (textarea.value).substring(0, caretPos); var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); textarea.value = front + text + back; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; } // Update the saved userCode every time the user updates the text area code textarea.onkeyup = function(){ // We only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'Show solution') { userEntry = textarea.value; } else { solutionEntry = textarea.value; } updateCode(); };
Conclusion
And that's all you really need to know about conditional structures in JavaScript right now! I'm sure you'll have understood these concepts and worked through the examples with ease; if there is anything you didn't understand, feel free to read through the article again, or contact us to ask for help.
See also
- Comparison operators
- Conditional statements in detail
- if...else reference
- Conditional (ternary) operator reference