diff options
Diffstat (limited to 'files/es/learn/javascript/first_steps')
13 files changed, 4314 insertions, 0 deletions
diff --git a/files/es/learn/javascript/first_steps/a_first_splash/index.html b/files/es/learn/javascript/first_steps/a_first_splash/index.html new file mode 100644 index 0000000000..1d2f5e2be0 --- /dev/null +++ b/files/es/learn/javascript/first_steps/a_first_splash/index.html @@ -0,0 +1,613 @@ +--- +title: Un primer acercamiento a JavaScript +slug: Learn/JavaScript/First_steps/A_first_splash +tags: + - Aprender + - Artículo + - CodingScripting + - Condicionales + - Funciones + - JavaScript + - Novato + - Objetos + - Operadores + - Variables + - eventos + - 'l10n:priority' +translation_of: Learn/JavaScript/First_steps/A_first_splash +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">Ahora que has aprendido algo sobre la teoría de JavaScript y lo que puedes hacer con ella, te daremos un curso intensivo sobre las características básicas de JavaScript a través de un tutorial completamente práctico. Aquí crearás un sencillo juego de "Adivina el número", paso a paso.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Conocimientos básicos de informática, comprensión básica de HTML y CSS, comprensión de lo que es JavaScript.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Tener un poco de experiencia escribiendo algo de JavaScript, y conseguir al menos una comprensión básica de lo que implica escribir un programa JavaScript.</td> + </tr> + </tbody> +</table> + +<p>No esperes entender todo el código inmediatamente — por ahora sólo queremos presentarte los conceptos de alto nivel, y darte una idea de como funciona JavaScript (y otros lenguajes de programación). ¡Más adelante vas a volver a ver estas características con mucho más detalle!</p> + +<div class="note"> +<p><strong>Nota</strong>: Muchas de las características que vas a ver en JavaScript son las mismas que en otros lenguajes de programación — funciones, bucles, etc. La sintaxis del código es diferente, pero los conceptos siguen siendo básicamente los mismos. La sintaxis del código es diferente, pero los conceptos siguen siendo básicamente los mismos.</p> +</div> + +<h2 id="Pensando_como_un_programador">Pensando como un programador</h2> + +<p>Una de las cosas más difíciles de aprender en programación no es la sintaxis que necesita aprender, sino cómo aplicarla para resolver problemas del mundo real. Debes comenzar a pensar como un programador — esto generalmente implica mirar descripciones de lo que necesita hacer tu programa, determinar qué características de código necesitas para alcanzar esas cosas y cómo hacer que funcionen juntas.</p> + +<p>Esto implica una combinación de trabajo duro, experiencia con la sintaxis de programación y práctica — más un poquito de creatividad. Mientras más programes, más habilidoso serás haciéndolo. No te podemos prometer que vas a desarrollar un "cerebro de programador" en cinco minutos, pero, a lo largo de este curso, te vamos a dar muchas oportunidades de practicar el pensar como un programador.</p> + +<p>Teniendo esto en mente, veamos el ejemplo que vamos a construir en este artículo, y revisemos el proceso general de seccionarlo y dividirlo en tareas tangibles.</p> + +<h2 id="Ejemplo_—_Juego_adivina_el_número">Ejemplo — Juego adivina el número</h2> + +<p>En este artículo vamos a mostrarte cómo construir el juego que puedes ver abajo:</p> + +<div class="hidden"> +<h6 id="Top_hidden_code">Top hidden code</h6> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>Juego adivina el número</title> + <style> + html { + font-family: sans-serif; + } + + body { + width: 50%; + max-width: 800px; + min-width: 480px; + margin: 0 auto; + } + + .lastResult { + color: white; + padding: 3px; + } + </style> +</head> + +<body> + <h1>Juego adivina el número</h1> + <p>Hemos seleccionado un número aleatorio entre 1 y 100. Fíjate si lo puedes adivinar en 10 turnos o menos. Vamos a decirte si tu número es más alto o más bajo.</p> + <div class="form"> <label for="guessField">Adivina el numero: </label><input type="text" id="guessField" class="guessField"> <input type="submit" value="Enviar respuesta" class="guessSubmit"> </div> + <div class="resultParas"> + <p class="guesses"></p> + <p class="lastResult"></p> + <p class="lowOrHi"></p> + </div> +<script> + // Tu código JavaScript va aquí + let randomNumber = Math.floor(Math.random() * 100) + 1; + const guesses = document.querySelector('.guesses'); + const lastResult = document.querySelector('.lastResult'); + const lowOrHi = document.querySelector('.lowOrHi'); + const guessSubmit = document.querySelector('.guessSubmit'); + const guessField = document.querySelector('.guessField'); + let guessCount = 1; + let resetButton; + + function checkGuess() { + let userGuess = Number(guessField.value); + if (guessCount === 1) { + guesses.textContent = 'Intentos anteriores: '; + } + + guesses.textContent += userGuess + ' '; + + if (userGuess === randomNumber) { + lastResult.textContent = '¡Felicidades! ¡Lo adivinaste!'; + lastResult.style.backgroundColor = 'green'; + lowOrHi.textContent = ''; + setGameOver(); + } else if (guessCount === 10) { + lastResult.textContent = '!!!Fin del juego!!!'; + lowOrHi.textContent = ''; + setGameOver(); + } else { + lastResult.textContent = '¡Incorrecto!'; + lastResult.style.backgroundColor = 'red'; + if(userGuess < randomNumber) { + lowOrHi.textContent = '¡El número es muy bajo!' ; + } else if(userGuess > randomNumber) { + lowOrHi.textContent = '¡El número es muy grande!'; + } + } + + guessCount++; + guessField.value = ''; + } + + guessSubmit.addEventListener('click', checkGuess); + + function setGameOver() { + guessField.disabled = true; + guessSubmit.disabled = true; + resetButton = document.createElement('button'); + resetButton.textContent = 'Iniciar nuevo juego'; + document.body.append(resetButton); + resetButton.addEventListener('click', resetGame); + } + + function resetGame() { + guessCount = 1; + const resetParas = document.querySelectorAll('.resultParas p'); + for(let i = 0 ; i < resetParas.length ; i++) { + resetParas[i].textContent = ''; + } + + resetButton.parentNode.removeChild(resetButton); + guessField.disabled = false; + guessSubmit.disabled = false; + guessField.value = ''; + guessField.focus(); + lastResult.style.backgroundColor = 'white'; + randomNumber = Math.floor(Math.random() * 100) + 1; + } +</script> + +</body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>Juega un poco — familiarízate con el juego antes de continuar.</p> + +<p>Imaginemos que tu jefe te ha dado el siguiente resumen para crear este juego:</p> + +<blockquote> +<p>Quiero que crees un sencillo juego del tipo "adivina el número". Se debe elegir un número aleatorio entre 1 y 100, luego desafiar al jugador a adivinar el número en 10 intentos. Después de cada intento, debería decirle al jugador si ha acertado o no — y si está equivocado, debería decirle si se ha quedado corto o se ha pasado. También debería decir los números que ya se probaron anteriormente. El juego terminará una vez que el jugador acierte o cuando se acaben los intentos. Cuando el juego termina, se le debe dar al jugador la opción de volver a jugar.</p> +</blockquote> + +<p>Al observar este resumen, lo primero que podemos hacer es comenzar a desglosar el proyecto en tareas simples y realizables, con la mayor mentalidad de programador posible:</p> + +<ol> + <li>Generar un número aleatorio entre 1 y 100.</li> + <li>Registrar el número del intento en el que el jugador se encuentre. Empezando en 1.</li> + <li>Darle al jugador una forma de adivinar cuál es el número.</li> + <li>Una vez que se ha introducido en número, registrarlo en alguna parte para que el jugador pueda ver sus intentos previos.</li> + <li>A continuación, comprobar si el número es correcto.</li> + <li>Si es correcto: + <ol> + <li>Mostrar un mensaje de felicitaciones.</li> + <li>Hacer que el jugador no pueda introducir más intentos (esto arruinaría el juego).</li> + <li>Mostrar un control que permita al jugador volver a empezar el juego.</li> + </ol> + </li> + <li>Si es incorrecto y al jugador todavía le quedan intentos: + <ol> + <li>Decirle al jugador que ha fallado.</li> + <li>Dejar que el jugador lo intente de nuevo.</li> + <li>Incrementa el número de intentos en 1.</li> + </ol> + </li> + <li>Si el jugador falla y no le quedan turnos: + <ol> + <li>Decirle al jugador que el juego se ha terminado.</li> + <li>Hacer que el jugador no pueda introducir más intentos (esto arruinaría el juego).</li> + <li>Mostrar un control que permita al jugador volver a empezar el juego.</li> + </ol> + </li> + <li>Una vez que el juego se reinicia, asegúrate de que la lógica del juego y la IU (interfaz de usuario) se restablezcan por completo, luego vuelve al paso 1.</li> +</ol> + +<p>Veamos cómo podemos trasformar estos pasos en código, construyendo el ejemplo y explorando las características de JavaScript a medida que avanzamos.</p> + +<h3 id="Configuración_inicial">Configuración inicial</h3> + +<p>Para empezar este tutorial, quisiéramos que hicieras una copia local del archivo <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">number-guess-guess-game-start.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">en vivo aquí</a>). Ábrelo en tu editor de texto y en tu navegador web. De momento, puedes ver un sencillo encabezado, un párrafo de instrucciones y un espacio para introducir un intento de número, pero no hará nada por ahora.</p> + +<p>El lugar donde agregaremos todo nuestro código es dentro del elemento {{htmlelement("script")}} en la parte inferior del HTML:</p> + +<pre class="brush: html notranslate"><script> + + // Tu JavaScript va aquí + +</script> +</pre> + +<h3 id="Añadiendo_variables_para_guardar_los_datos">Añadiendo variables para guardar los datos</h3> + +<p>Empecemos. En primer lugar, agrega las siguientes líneas dentro de tu elemento {{htmlelement("script")}}:</p> + +<pre class="brush: js notranslate">let randomNumber = Math.floor(Math.random() * 100) + 1; + +const guesses = document.querySelector('.guesses'); +const lastResult = document.querySelector('.lastResult'); +const lowOrHi = document.querySelector('.lowOrHi'); + +const guessSubmit = document.querySelector('.guessSubmit'); +const guessField = document.querySelector('.guessField'); + +let guessCount = 1; +let resetButton;</pre> + +<p>Esta sección del código establece las variables y constantes que necesitamos para almacenar los datos que nuestro programa utilizará. Las variables básicamente son contenedores de valores (como números o cadenas de texto). Creas una variable con la palabra clave <code>let</code> (o <code>var</code>) seguida de un nombre para tu variable (leerás más sobre la diferencia entre las palabras clave en el <a href="/es/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let">siguiente artículo</a>). Las constantes se utilizan para almacenar valores que no deseas modificar y se crean con la palabra clave <code>const</code>. En este caso, estamos usando constantes para almacenar referencias a partes de nuestra interfaz de usuario; el texto dentro de algunas de ellas puede cambiar, pero los elementos HTML a los que se hace referencia permanecer iguales.</p> + +<p>Puedes asignar un valor a tu variable o constante con un signo igual (<code>=</code>) seguido del valor que deseas darle.</p> + +<p>En nuestro ejemplo:</p> + +<ul> + <li>A la primera variable — <code>randomNumber</code> — se le asigna un número al azar entre 1 y 100, calculado usando un algoritmo matemático.</li> + <li>Las primeras tres constantes sirven cada una para almacenar una referencia a los párrafos de resultados en nuestro HTML, y se usarán para insertar valores en los párrafos más adelante en el código (observa cómo están dentro de un elemento <code><div></code>, el cual se utiliza para seleccionar los tres más adelante para restablecerlos a sus valores originales, cuando reiniciamos el juego): + <pre class="brush: html notranslate"><div class="resultParas"> + <p class="guesses"></p> + <p class="lastResult"></p> + <p class="lowOrHi"></p> +</div> +</pre> + </li> + <li>Las siguientes dos constantes almacenan referencias a la entrada de texto y al botón "Enviar" del formulario, y se utilizan para controlar las respuestas del jugador más adelante. + <pre class="brush: html notranslate"><label for="guessField">Adivina el número: </label><input type="text" id="guessField" class="guessField"> +<input type="submit" value="Enviar respuesta" class="guessSubmit"></pre> + </li> + <li>Nuestras dos variables finales almacenan un conteo de intentos desde 1 (que se usa para tener un registro de cuántos intentos ha hecho el jugador), y una referencia al botón de reinicio que aún no existe (pero que lo hará más adelante).</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Aprenderás mucho más sobre las variables/constantes más adelante en el curso, comenzando con el <a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/variables">artículo siguiente</a>.</p> +</div> + +<h3 id="Funciones">Funciones</h3> + +<p>A continuación, agrega lo siguiente debajo de tu código JavaScript anterior:</p> + +<pre class="brush: js notranslate">function checkGuess() { + alert('Soy un marcador de posición'); +}</pre> + +<p>Las funciones son bloques de código reutilizable que puedes escribir una vez y ejecutar una y otra vez, ahorrando la necesidad de repetir el código todo el tiempo. Son realmente útiles. Hay varias maneras de definir funciones, pero por ahora nos concentraremos en un tipo simple. Aquí hemos definido una función usando la palabra clave <code>function</code>, seguida de un nombre, con paréntesis después de él. Después de eso ponemos dos llaves (<code>{ }</code>). Dentro de las llaves se encuentra todo el código que queremos ejecutar cuando llamamos a la función.</p> + +<p>Cuando queramos ejecutar el código, escribimos el nombre de la función seguido de los paréntesis.</p> + +<p>Probémoslo ahora. Guarda tu código y actualiza la página en tu navegador. Luego, ingresa a la <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">consola JavaScript de las herramientas para desarrolladores</a> e ingresa la siguiente línea:</p> + +<pre class="brush: js notranslate">checkGuess();</pre> + +<p>Después de presionar<kbd>Retorno</kbd>/<kbd>Intro</kbd>, debería aparecer una alerta que dice "<samp>Soy un marcador de posición</samp>"; hemos definido una función en nuestro código que crea una alerta cada vez que la llamamos.</p> + +<div class="note"> +<p><strong>Nota</strong>: Aprenderás mucho más sobre las <a href="/es/docs/Learn/JavaScript/Building_blocks/Functions">funciones más adelante</a> en el curso.</p> +</div> + +<h3 id="Operadores">Operadores</h3> + +<p>Los operadores de JavaScript nos permiten realizar pruebas, hacer cálculos matemáticos, unir cadenas y otras cosas similares.</p> + +<p>Si aún no lo has hecho, guarda tu código, actualiza la página en tu navegador y abre la <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">consola JavaScript de las herramientas para desarrolladores</a>. Luego, podemos intentar escribir los ejemplos que se muestran a continuación — escribe cada una de las columnas de "Ejemplo" exactamente como se muestra, presionando <kbd>Retorno</kbd>/<kbd>Intro</kbd> después de cada una, y ve los resultados que devuelven.</p> + +<p>Primero veamos los operadores aritméticos, por ejemplo:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Operador</th> + <th scope="col">Descripción</th> + <th scope="col">Ejemplo</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>+</code></td> + <td>Suma</td> + <td><code>6 + 9</code></td> + </tr> + <tr> + <td><code>-</code></td> + <td>Resta</td> + <td><code>20 - 15</code></td> + </tr> + <tr> + <td><code>*</code></td> + <td>Multiplicación</td> + <td><code>3 * 7</code></td> + </tr> + <tr> + <td><code>/</code></td> + <td>División</td> + <td><code>10 / 5</code></td> + </tr> + </tbody> +</table> + +<p>También puedes usar el operador <code>+</code> para unir cadenas de texto (en programación, esto se llama <em>concatenación</em>). Intenta ingresar las siguientes líneas, una por una:</p> + +<pre class="brush: js notranslate">let name = 'Bingo'; +name; +let hello = ' dice hola!'; +hello; +let greeting = '¡' + name + hello; +greeting;</pre> + +<p>También disponemos de algunos atajos de operadores, llamados <a href="/es/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">operadores de asignación</a> mejorada. Por ejemplo, si quieres simplemente agregar una nueva cadena de texto a una existente y devolver el resultado, puedes hacer esto:</p> + +<pre class="brush: js notranslate">name += ' dice hola!';</pre> + +<p>Esto es equivalente a</p> + +<pre class="brush: js notranslate">name = name + ' dice hola!';</pre> + +<p>Cuando ejecutamos pruebas de verdadero/falso (por ejemplo, dentro de condicionales — consulta {{anch("Conditionals", "abajo")}}) usamos <a href="/es/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">operadores de comparación</a>. Por ejemplo:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Operador</th> + <th scope="col">Descripción</th> + <th scope="col">Ejemplo</th> + </tr> + <tr> + <td><code>===</code></td> + <td>Igualdad estricta (¿es exactamente lo mismo?)</td> + <td> + <pre class="brush: js notranslate"> +5 === 2 + 4 // false +'Chris' === 'Bob' // false +5 === 2 + 3 // true +2 === '2' // false; número versus cadena +</pre> + </td> + </tr> + <tr> + <td><code>!==</code></td> + <td>No igual (¿no es lo mismo?)</td> + <td> + <pre class="brush: js notranslate"> +5 !== 2 + 4 // true +'Chris' !== 'Bob' // true +5 !== 2 + 3 // false +2 !== '2' // true; número versus cadena +</pre> + </td> + </tr> + <tr> + <td><code><</code></td> + <td>Menor que</td> + <td> + <pre class="brush: js notranslate"> +6 < 10 // true +20 < 10 // false</pre> + </td> + </tr> + <tr> + <td><code>></code></td> + <td>Mayor que</td> + <td> + <pre class="brush: js notranslate"> +6 > 10 // false +20 > 10 // true</pre> + </td> + </tr> + </thead> +</table> + +<h3 id="Condicionales">Condicionales</h3> + +<p>Volviendo a nuestra función <code>checkGuess()</code>, creo que es seguro decir que no queremos que simplemente muestre un mensaje de marcador de posición. Queremos que compruebe si la respuesta del jugador es correcta o no, y que responda de manera apropiada.</p> + +<p>En este punto, reemplaza su función <code>checkGuess()</code> actual con esta versión:</p> + +<pre class="brush: js notranslate">function checkGuess() { + let userGuess = Number(guessField.value); + if (guessCount === 1) { + guesses.textContent = 'Intentos anteriores: '; + } + guesses.textContent += userGuess + ' '; + + if (userGuess === randomNumber) { + lastResult.textContent = '¡Felicidades! ¡Lo adivinaste!'; + lastResult.style.backgroundColor = 'green'; + lowOrHi.textContent = ''; + setGameOver(); + } else if (guessCount === 10) { + lastResult.textContent = '!!!Fin del juego!!!'; + setGameOver(); + } else { + lastResult.textContent = '¡Incorrecto!'; + lastResult.style.backgroundColor = 'red'; + if(userGuess < randomNumber) { + lowOrHi.textContent = '¡El número es muy bajo!'; + } else if(userGuess > randomNumber) { + lowOrHi.textContent = '¡El número es muy grande!'; + } + } + + guessCount++; + guessField.value = ''; + guessField.focus(); +}</pre> + +<p>Esto es un montón de código — ¡uf! Repasemos cada sección y expliquemos lo qué hace.</p> + +<ul> + <li>La primera línea (línea 2 arriba) declara una variable llamada <code>userGuess</code> y establece su valor al valor actual ingresado dentro del campo de texto. También ejecutamos este valor a través del constructor <code>Number()</code> integrado, solo para asegurarnos de que el valor definitivamente sea un número.</li> + <li>A continuación, encontramos nuestro primer bloque de código condicional (líneas 3-5 arriba). Un bloque de código condicional te permite ejecutar código de manera selectiva, dependiendo de si una determinada condición es verdadera o no. Se parece un poco a una función, pero no lo es. La forma más simple de bloque condicional comienza con la palabra clave <code>if</code>, luego algunos paréntesis, luego unas llaves. Dentro del paréntesis incluimos una prueba. Si la prueba devuelve <code>true</code>, ejecutamos el código dentro de las llaves. Si no, no lo hacemos y pasamos al siguiente segmento del código. En este caso, la prueba está verificando si la variable <code>guessCount</code> es igual a <code>1</code> (es decir, si este es el primer intento del jugador o no): + <pre class="brush: js notranslate">guessCount === 1</pre> + Si es así, hacemos que el contenido del texto del párrafo de intentos sea igual a "<samp>Intentos previos: </samp>". Si no, no lo hacemos.</li> + <li>La línea 6 agrega el valor actual de <code>userGuess</code> al final del párrafo <code>guesses</code>, más un espacio en blanco para que haya un espacio entre cada intento mostrado.</li> + <li>El siguiente bloque (líneas 8-24 arriba) realiza algunas comprobaciones: + <ul> + <li>El primer <code>if(){ }</code> verifica si la respuesta del jugador es igual al <code>randomNumber</code> establecido al comienzo de nuestro JavaScript. Si es así, el jugador ha adivinado correctamente y ha ganado el juego, por lo tanto mostramos al jugador un mensaje de felicitación con un bonito color verde, borramos el contenido del cuadro de información de intentos <em>Low/High</em> y ejecutamos una función llamada <code>setGameOver()</code>, que examinaremos más adelante.</li> + <li>Ahora hemos encadenado otra prueba al final de la última usando una estructura <code>else if(){ }</code>. Esta comprueba si este intento es el último turno del jugador. Si es así, el programa hace lo mismo que en el bloque anterior, salvo por un mensaje de fin de juego en lugar de un mensaje de felicitación.</li> + <li>El bloque final encadenado al final de este código (el <code>else { }</code>) contiene código que solo se ejecuta si ninguna de las otras dos pruebas devuelve <code>true</code> (es decir, el jugador no acertó, pero todavía le quedan intentos). En este caso le decimos que es incorrecto, luego realizamos otra prueba condicional para verificar si el intento fue más alto o más bajo que la respuesta, mostrando un mensaje adicional según corresponda para decirle si tiene que ir más alto o bajo.</li> + </ul> + </li> + <li>Las últimas tres líneas de la función (líneas 26 a 28 arriba) nos preparan para el siguiente intento. Agregamos 1 a la variable <code>guessCount</code> para que el jugador use su turno (<code>++</code> es una operación de incremento — incrementar en 1), y vaciamos el valor del campo de texto. y enfocándolo de nuevo, listo para ingresar el próximo intento.</li> +</ul> + +<h3 id="Eventos">Eventos</h3> + +<p>A estas alturas, hemos implementado correctamente la función <code>checkGuess()</code>, pero no hará nada porque aún no la hemos llamado. Lo ideal, sería llamarla cuando se presiona el botón "Enviar respuesta", y para hacerlo necesitamos usar un <strong>evento</strong>. Los eventos son cosas que suceden en el navegador — se hace clic en un botón, se carga una página, se reproduce un video, etc. — en respuesta a lo cual podemos ejecutar bloques de código. Las construcciones que escuchan el evento que ocurre se denominan <strong>escuchas de eventos</strong>, y los bloques de código que se ejecutan en respuesta a la activación del evento se denominan <strong>controladores de eventos</strong>.</p> + +<p>Agrega la siguiente línea debajo de tu función <code>checkGuess()</code>:</p> + +<pre class="brush: js notranslate">guessSubmit.addEventListener('click', checkGuess);</pre> + +<p>Aquí estamos agregando un escucha de eventos al botón <code>guessSubmit</code>. Este es un método toma dos valores de entrada (llamados <em>argumentos</em>) — el tipo de evento que queremos escuchar (en este caso, <code>click</code>) como una cadena, y el código que queremos ejecutar cuando ocurra el evento (en este caso la función <code>checkGuess()</code>). Ten en cuenta que no es necesario especificar los paréntesis al escribirlo dentro de {{domxref("EventTarget.addEventListener", "addEventListener()")}}.</p> + +<p>Intenta guardar y actualizar tu código ahora, y tu ejemplo debería funcionar — hasta cierto punto. El único problema ahora es que si adivinas la respuesta correcta o agotas los intentos, el juego se interrumpirá porque aún no hemos definido la función <code>setGameOver()</code> que se supone se debe ejecutar una vez que el juego se acabó. Ahora, agreguemos nuestro código faltante y completemos la funcionalidad de ejemplo.</p> + +<h3 id="Finalizando_la_funcionalidad_del_juego">Finalizando la funcionalidad del juego</h3> + +<p>Agreguemos la función <code>setGameOver()</code> al final de nuestro código y luego repasémoslo. Agrega esto ahora, debajo del resto de su JavaScript:</p> + +<pre class="brush: js notranslate">function setGameOver() { + guessField.disabled = true; + guessSubmit.disabled = true; + resetButton = document.createElement('button'); + resetButton.textContent = 'Iniciar nuevo juego'; + document.body.append(resetButton); + resetButton.addEventListener('click', resetGame); +}</pre> + +<ul> + <li>Las dos primeras líneas deshabilitan el campo de texto y el botón fijando sus propiedades <code>disabled</code> en <code>true</code>. Esto es necesario, porque si no lo hiciéramos, el jugador podría seguir enviando más intentos aunque el juego hubiera terminado, lo cual estropearía las cosas.</li> + <li>Las siguientes tres líneas generan un nuevo elemento {{htmlelement("button")}}, establecen su etiqueta de texto en "Iniciar nuevo juego" y lo añaden al final de nuestro HTML existente.</li> + <li>La última línea establece un escucha de eventos en nuestro nuevo botón para que cuando se haga clic en él, se ejecute una función llamada <code>resetGame()</code>.</li> +</ul> + +<p>¡Ahora también necesitamos definir esta función! Agrega el siguiente código, nuevamente al final de tu JavaScript:</p> + +<pre class="brush: js notranslate">function resetGame() { + guessCount = 1; + + const resetParas = document.querySelectorAll('.resultParas p'); + for (let i = 0 ; i < resetParas.length ; i++) { + resetParas[i].textContent = ''; + } + + resetButton.parentNode.removeChild(resetButton); + + guessField.disabled = false; + guessSubmit.disabled = false; + guessField.value = ''; + guessField.focus(); + + lastResult.style.backgroundColor = 'white'; + + randomNumber = Math.floor(Math.random() * 100) + 1; +}</pre> + +<p>Este bloque de código bastante largo restablece completamente todo a cómo estaba al comienzo del juego, para que el jugador pueda intentarlo de nuevo. Eso:</p> + +<ul> + <li>Vuelve a poner <code>guessCount</code> en 1.</li> + <li>Vacía todo el texto de los párrafos de información. Seleccionamos todos los párrafos dentro de <code><div class="resultParas"></div></code>, luego recorremos cada uno, configurando su <code>textContent</code> en <code>''</code> (una cadena vacía).</li> + <li>Elimina de nuestro código el botón de reinicio.</li> + <li>Habilita los elementos del formulario, vacía y enfoca el campo de texto, listo para ingresar un nuevo intento.</li> + <li>Elimina el color de fondo del párrafo <code>lastResult</code>.</li> + <li>Genera un nuevo número al azar ¡para que no vuelvas a adivinar el mismo número!.</li> +</ul> + +<p><strong>En este punto, deberías tener un juego completamente funcional (simple) — ¡Felicidades!</strong></p> + +<p>Todo lo que resta por hacer en este artículo es hablar sobre algunas otras importantes características del código que ya has visto, aunque es posible que no te hayas dado cuenta.</p> + +<h3 id="Bucles">Bucles</h3> + +<p>Una parte del código anterior que debemos examinar detalladamente es el bucle <a href="/es/docs/Web/JavaScript/Reference/Statements/for">for</a>. Los bucles son un muy importante concepto en programación, estos te permiten seguir ejecutando un fragmento de código una y otra vez, hasta que se cumpla una determinada condición.</p> + +<p>Para empezar, de nuevo ve a tu <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">consola JavaScript de las herramientas para desarrolladores del navegador</a> e introduce lo siguiente:</p> + +<pre class="brush: js notranslate">for (let i = 1 ; i < 21 ; i++) { console.log(i) }</pre> + +<p>¿Que sucedió? Los números <samp>1</samp> a <samp>20</samp> se imprimieron en tu consola. Esto se debió al bucle. Un bucle <code>for</code> toma tres valores (argumentos) de entrada:</p> + +<ol> + <li><strong>Un valor inicial</strong>: En este caso, comenzamos a contar en 1, pero este podría ser cualquier número que desees. También puedes reemplazar la letra <code>i</code> con cualquier nombre que desees, pero por convención se usa <code>i</code> porque es corto y fácil de recordar.</li> + <li><strong>Una condición de salida</strong>: Aquí hemos especificado <code>i < 21</code> — el ciclo continuará hasta que <code>i</code> no sea menor que 21. Cuando <code>i</code> llegue a 21, el bucle ya no se ejecutará.</li> + <li><strong>Un incremento</strong>: Hemos especificado <code>i++</code>, que significa "agrega 1 a i". El ciclo se ejecutará una vez por cada valor de <code>i</code>, hasta que <code>i</code> alcance un valor de 21 (como se explicó anteriormente). En este caso, simplemente imprimimos el valor de <code>i</code> en la consola en cada iteración usando {{domxref("console.log", "console.log()")}}.</li> +</ol> + +<p>Ahora veamos el ciclo en nuestro juego de adivinan el número — lo siguiente está dentro de la función <code>resetGame()</code>:</p> + +<pre class="brush: js notranslate">const resetParas = document.querySelectorAll('.resultParas p'); +for (let i = 0 ; i < resetParas.length ; i++) { + resetParas[i].textContent = ''; +}</pre> + +<p>Este código crea una variable que contiene una lista de todos los párrafos dentro de <code><div class="resultParas"></code> usando el método {{domxref("document.querySelectorAll", "querySelectorAll()")}}, luego recorre cada uno de ellos, eliminando el texto contenido a su paso.</p> + +<h3 id="Una_pequeña_explicación_sobre_objetos.">Una pequeña explicación sobre objetos.</h3> + +<p>Agreguemos una mejora final más antes de entrar en esta explicación. Agrega la siguiente línea justo debajo de la línea <code>let resetButton;</code> cerca de la parte superior de tu JavaScript, luego guarda tu archivo:</p> + +<pre class="brush: js notranslate">guessField.focus();</pre> + +<p>Esta línea usa el método {{domxref("HTMLElement.focus", "focus()")}} para colocar automáticamente el cursor en el campo de texto {{htmlelement("input")}} tan pronto como se cargue la página, lo cual significa que el jugador puede comenzar a escribir su primer intento inmediatamente, sin tener que hacer clic primero en el campo del formulario. Es solo una pequeña adición, pero mejora la experiencia del jugador — brindando al usuario una buena pista visual de lo que tiene que hacer para jugar.</p> + +<p>Analicemos lo que está sucediendo aquí con un poco más de detalle. En JavaScript, todo es un objeto. Un objeto es una colección de funciones relacionadas almacenadas en un solo grupo. Puedes crear tus propios objetos, pero eso es bastante avanzado y no lo cubriremos hasta mucho más adelante en el curso. Por ahora, analizaremos brevemente los objetos integrados que contiene tu navegador, los cuales te permiten hacer muchas cosas útiles.</p> + +<p>En este caso particular, primero creamos una constante <code>guessField</code> que almacena una referencia al campo de texto del formulario en nuestro HTML — la siguiente línea se puede encontrar entre nuestras declaraciones cerca de la parte superior del código:</p> + +<pre class="brush: js notranslate">const guessField = document.querySelector('.guessField');</pre> + +<p>Para obtener esta referencia, usamos el método {{domxref("document.querySelector", "querySelector()")}} del objeto {{domxref("document")}}. <code>querySelector()</code> toma un parámetro — un <a href="/es/docs/Learn/CSS/Introduction_to_CSS/Selectors">selector CSS</a> que selecciona el elemento del que deseas una referencia.</p> + +<p>Debido a que <code>guessField</code> ahora contiene una referencia a un elemento {{htmlelement("input")}}, ahora tiene acceso a varias propiedades (básicamente variables almacenadas dentro de los objetos, algunas de las cuales no les puedes cambiar sus valores) y métodos (básicamente funciones almacenadas dentro de objetos). Un método disponible para elementos <code>input</code> es <code>focus()</code>, por lo que ahora podemos usar esta línea para enfocar el campo de texto:</p> + +<pre class="brush: js notranslate">guessField.focus();</pre> + +<p>Las variables que no contienen referencias a elementos de formulario no dispondrán de método <code>focus()</code>. Por ejemplo, la constante <code>guessCount</code> contiene una referencia a un elemento {{htmlelement("p")}} y la variable <code>guessCount</code> contiene un número.</p> + +<h3 id="Jugando_con_los_objetos_del_navegador">Jugando con los objetos del navegador</h3> + +<p>Juguemos un poco con algunos objetos del navegador.</p> + +<ol> + <li>En primer lugar, abre tu programa en un navegador.</li> + <li>A continuación, abre las <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">herramientas de desarrollo del navegador</a> y asegúrate de que la pestaña de la consola JavaScript esté abierta.</li> + <li>Escribe <code>guessField</code> y la consola te mostrará que la variable contiene un elemento {{htmlelement("input")}}. También notarás que la consola te ayuda completando automáticamente los nombres de los objetos que existen dentro del entorno de ejecución, ¡incluidas tus variables!</li> + <li>Ahora escribe lo siguiente: + <pre class="brush: js notranslate">guessField.value = 'Hola';</pre> + La propiedad <code>value</code> representa el valor actual ingresado en el campo de texto. Verás que al ingresar este comando, ¡hemos cambiado este valor!</li> + <li>Ahora intenta escribir <code>guesses</code> en la consola y presiona Intro. La consola te muestra que la variable contiene un elemento {{htmlelement("p")}}.</li> + <li>Ahora intenta ingresar la siguiente línea: + <pre class="brush: js notranslate">guesses.value</pre> + El navegador devuelve <code>undefined</code>, porque los párrafos no tienen la propiedad <code>value</code>.</li> + <li>Para cambiar el texto dentro de un párrafo, necesitas la propiedad {{domxref("Node.textContent", "textContent")}} en su lugar. Prueba esto: + <pre class="brush: js notranslate">guesses.textContent = '¿Dónde está mi párrafo?';</pre> + </li> + <li>Ahora, solo por diversión. Intenta ingresar las siguientes líneas, una por una: + <pre class="brush: js notranslate">guesses.style.backgroundColor = 'yellow'; +guesses.style.fontSize = '200%'; +guesses.style.padding = '10px'; +guesses.style.boxShadow = '3px 3px 6px black';</pre> + Cada elemento de una página tiene una propiedad <code>style</code>, que a su vez contiene un objeto cuyas propiedades contienen todos los estilos CSS en línea aplicados a ese elemento. Esto nos permite establecer dinámicamente nuevos estilos CSS en elementos utilizando JavaScript.</li> +</ol> + +<h2 id="Terminamos_por_ahora...">Terminamos por ahora...</h2> + +<p>Así que eso es todo para construir el ejemplo. Llegaste al final, ¡bien hecho! Prueba tu código final, o <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">juega con nuestra versión final aquí</a>. Si no puedes hacer que el ejemplo funcione, compáralo con el <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">código fuente</a>.</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="En_este_modulo">En este modulo</h2> + +<ul> + <li><a href="/es/docs/Learn/JavaScript/First_steps/What_is_JavaScript">¿Qué es JavaScript?</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/A_first_splash">Primer contacto con JavaScript</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/What_went_wrong">¿Qué salió mal? Solución de problemas de JavaScript</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Variables">Almacenamiento de la información que necesita — Variables</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Math">Matemáticas básicas en JavaScript — números y operadores</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Strings">Manejo de texto — cadenas en JavaScript</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Useful_string_methods">Métodos de cadena útiles</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Arrays">Arreglos</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Silly_story_generator">Evaluación: Generador de historias tontas</a></li> +</ul> diff --git a/files/es/learn/javascript/first_steps/arrays/index.html b/files/es/learn/javascript/first_steps/arrays/index.html new file mode 100644 index 0000000000..cea00871a7 --- /dev/null +++ b/files/es/learn/javascript/first_steps/arrays/index.html @@ -0,0 +1,665 @@ +--- +title: Arrays +slug: Learn/JavaScript/First_steps/Arrays +translation_of: Learn/JavaScript/First_steps/Arrays +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}</div> + +<h2 id="Arreglos_o_Matrices">Arreglos o Matrices</h2> + +<p class="summary">En este último artículo de este módulo, veremos las matrices — una manera ordenada de almacenar una lista de elementos de datos bajo un solo nombre de variable. Aquí vemos por qué esto es útil, luego exploramos cómo crear una matriz, recuperar, agregar y eliminar elementos almacenados en una matriz, y más.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Conocimientos básicos de informática, una comprensión básica de HTML y CSS, una idea de lo que es JavaScript.</td> + </tr> + <tr> + <th scope="row">Objectivo:</th> + <td>Para entender qué son las matrices y cómo manipularlas en JavaScript.</td> + </tr> + </tbody> +</table> + +<h2 id="¿Qué_es_una_matriz">¿Qué es una matriz?</h2> + +<p>Las matrices se describen como "objetos tipo lista"; básicamente son objetos individuales que contienen múltiples valores almacenados en una lista. Los objetos de matriz pueden almacenarse en variables y tratarse de la misma manera que cualquier otro tipo de valor, la diferencia es que podemos acceder individualmente a cada valor dentro de la lista y hacer cosas útiles y eficientes con la lista, como recorrerlo con un bucle y hacer una misma cosa a cada valor. Tal vez tenemos una serie de productos y sus precios almacenados en una matriz, y queremos recorrerlos e imprimirlos en una factura, sumando todos los precios e imprimiendo el total en la parte inferior.</p> + +<p>Si no tuvieramos matrices, tendríamos que almacenar cada elemento en una variable separada, luego llamar al código que hace la impresión y agregarlo por separado para cada artículo. Esto sería mucho más largo de escribir, menos eficiente y más propenso a errores. si tuviéramos 10 elementos para agregar a la factura, ya sería suficientemente malo, pero ¿ qué pasa con 100 o 1000 artículos? Volveremos a este ejemplo más adelante en el artículo.</p> + +<p>Como en artículos anteriores, aprendamos sobre los aspectos básicos reales de las matrices ingresando algunos ejemplos en una consola de JavaScript. A continuación proporcionamos uno (también puedes <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">abrir en consola</a> en una pestaña o ventana separadas, o usar la <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">consola de desarrollador de navegador</a>, si lo prefieres).</p> + +<div class="hidden"> +<h6 id="Hidden_code">Hidden code</h6> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>JavaScript console</title> + <style> + * { + box-sizing: border-box; + } + + html { + background-color: #0C323D; + color: #809089; + font-family: monospace; + } + + body { + max-width: 700px; + } + + p { + margin: 0; + width: 1%; + padding: 0 1%; + font-size: 16px; + line-height: 1.5; + float: left; + } + + .input p { + margin-right: 1%; + } + + .output p { + width: 100%; + } + + .input input { + width: 96%; + float: left; + border: none; + font-size: 16px; + line-height: 1.5; + font-family: monospace; + padding: 0; + background: #0C323D; + color: #809089; + } + + div { + clear: both; + } + + </style> + </head> + <body> + + + </body> + + <script> + var geval = eval; + function createInput() { + var inputDiv = document.createElement('div'); + var inputPara = document.createElement('p'); + var inputForm = document.createElement('input'); + + inputDiv.setAttribute('class','input'); + inputPara.textContent = '>'; + inputDiv.appendChild(inputPara); + inputDiv.appendChild(inputForm); + document.body.appendChild(inputDiv); + + if(document.querySelectorAll('div').length > 1) { + inputForm.focus(); + } + + inputForm.addEventListener('change', executeCode); + } + + function executeCode(e) { + try { + var result = geval(e.target.value); + } catch(e) { + var result = 'error — ' + e.message; + } + + var outputDiv = document.createElement('div'); + var outputPara = document.createElement('p'); + + outputDiv.setAttribute('class','output'); + outputPara.textContent = 'Result: ' + result; + outputDiv.appendChild(outputPara); + document.body.appendChild(outputDiv); + + e.target.disabled = true; + e.target.parentNode.style.opacity = '0.5'; + + createInput() + } + + createInput(); + + </script> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Creando_una_matriz">Creando una matriz</h3> + +<p>Las matrices se construyen con corchetes, que contiene una lista de elementos separdos por comas.</p> + +<ol> + <li>Digamos que queríamos almacenar una lista de compras en una matriz — haríamos algo como lo siguiente. Ingresa las siguientes líneas en la consola: + <pre class="brush: js">let shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles']; +shopping;</pre> + </li> + <li>En este caso, cada elemento de la matriz es una cadena, pero ten en cuenta que puedes almacenar cualquier elemento en una matriz — cadena, número, objeto, otra variable, incluso otra matriz. También puedes mezclar y combinar tipos de elementos — no todos tienen que ser números, cadenas, etc. Prueba estos: + <pre class="brush: js">let sequence = [1, 1, 2, 3, 5, 8, 13]; +let random = ['tree', 795, [0, 1, 2]];</pre> + </li> + <li>Intenta creando un par de matrices por tu cuenta, antes de continuar.</li> +</ol> + +<h3 id="Accediendo_y_modificando_elementos_de_la_matriz">Accediendo y modificando elementos de la matriz</h3> + +<p>Puedes entonces acceder a elementos individuales en la matriz mediante la notación de corchetes, del mismo modo que <a href="/en-US/Learn/JavaScript/First_steps/Useful_string_methods#Retrieving_a_specific_string_character">accediste a las letras de una cadena</a>.</p> + +<ol> + <li>Ingresa lo siguiente en tu consola: + <pre class="brush: js">shopping[0]; +// returns "bread"</pre> + </li> + <li>también puedes modificar un elemento en una matriz simplemente dando a un item de la matriz un nuevo valor. Prueba esto: + <pre class="brush: js">shopping[0] = 'tahini'; +shopping; +// shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ]</pre> + + <div class="note"><strong>Nota</strong>: Lo dijimos antes, pero solo como recordatorio — ¡ las computadoras comienzan a contar desde 0!</div> + </li> + <li>Ten en cuenta que una matriz dentro de otra matriz se llama matriz multidimensional. Puedes acceder a los elementos de una matriz que estén dentro de otra, encadenando dos pares de corchetes. Por ejemplo, para acceder a uno de los elementos dentro de la matriz, que a su vez, es el tercer elemento dentro de la matriz <code>random</code> (ver sección anterior), podríamos hacer algo como esto: + <pre class="brush: js">random[2][2];</pre> + </li> + <li>Intenta seguir jugando y haciendo algunas modificaciones más a tus ejemplos de matriz antes de continuar.</li> +</ol> + +<h3 id="Encontrar_la_longitud_de_una_matriz">Encontrar la longitud de una matriz</h3> + +<p>Puedes averiguar la longitud de una matriz (cuántos elementos contiene) exactamente de la misma manera que determinas la longitud (en caracteres) de una cadena— utilizando la propiedad {{jsxref("Array.prototype.length","length")}}. Prueba lo siguiente:</p> + +<pre class="brush: js">sequence.length; +// should return 7</pre> + +<p>Esto tiene otros usos, pero se usa más comunmente para indicarle a un ciclo que continúe hasta que haya recorrido todos los elementos de la matriz. Así por ejemplo:</p> + +<pre class="brush: js">let sequence = [1, 1, 2, 3, 5, 8, 13]; +for (var i = 0; i < sequence.length; i++) { + console.log(sequence[i]); +}</pre> + +<p>Aprenderás acerca de bucles correctamente en un artículo futuro, pero brevemente, éste código dice:</p> + +<ol> + <li>Comienza el bucle en el elemento de la posición 0 en la matriz.</li> + <li>Detén el bucle en el número de item igual a la longitud de la matriz. Esto funcionará para una matriz de cualquier longitid, pero en este caso el ciclo se detendrá en el elemento número 7 (esto es bueno, ya que el último elemento — que queremos que recorra el bucle — es 6.</li> + <li>Para cada elemento, imprime en la consola del navegador con <code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code>.</li> +</ol> + +<h2 id="Alguno_métodos_de_matriz_útiles">Alguno métodos de matriz útiles</h2> + +<p>En esta sección veremos algunos métodos bastante útiles relacionados con matrices que nos permiten dividir cadenas en elementos de matriz y viceversa, y agregar nuevos elementos en matrices.</p> + +<h3 id="Conversión_entre_matrices_y_cadenas">Conversión entre matrices y cadenas</h3> + +<p>A menudo se te presentarán algunos datos brutos contenidos en una cadena larga y grande, y es posible que desees separar los elementos útiles de una forma más conveniente y luego hacerle cosas, como mostrarlos en una tabla de datos. Para hacer esto, podemos usar el método {{jsxref("String.prototype.split()","split()")}}. En su forma más simple, esto toma un único parámetro, el caracter que quieres separar de la cadena, y devuelve las subcadenas entre el separador como elementos en una matriz.</p> + +<div class="note"> +<p><strong>Nota</strong>: Bien, esto es técnicamente un método de cadena, no un método de matriz, pero lo hemos incluido con las matrices, ya que va bien aquí.</p> +</div> + +<ol> + <li>Vamos a jugar con esto, para ver como funciona. Primero, crea una cadena en tu consola: + <pre class="brush: js">let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';</pre> + </li> + <li>Ahora dividámoslo en cada coma: + <pre class="brush: js">let myArray = myData.split(','); +myArray;</pre> + </li> + <li>Finalmente, intenta encontrar la longitud de tu nueva matriz y recuperar algunos elementos de ella: + <pre class="brush: js">myArray.length; +myArray[0]; // the first item in the array +myArray[1]; // the second item in the array +myArray[myArray.length-1]; // the last item in the array</pre> + </li> + <li>También puedes ir en la dirección opuesta usando el método {{jsxref("Array.prototype.join()","join()")}}. Prueba lo siguiente: + <pre class="brush: js">let myNewString = myArray.join(','); +myNewString;</pre> + </li> + <li>Otra forma de convertir una matriz en cadena es usar el método {{jsxref("Array.prototype.toString()","toString()")}}. <code>toString()</code> es posiblemente más simple que <code>join()</code> ya que no toma un parámetro, pero es más limitado. Con <code>join()</code> puedes especificar diferentes separadores (intenta ejecutar el Paso 4 con un caracter diferente a la coma). + <pre class="brush: js">let dogNames = ['Rocket','Flash','Bella','Slugger']; +dogNames.toString(); //Rocket,Flash,Bella,Slugger</pre> + </li> +</ol> + +<h3 id="Agregar_y_eliminar_elementos_de_la_matriz">Agregar y eliminar elementos de la matriz</h3> + +<p>Todavia no hemos cubierto la posibilidad de agregar y eliminar elementos de la matriz — echemos un vistazo a esto ahora. Usaremos la matriz <code>myArray</code> con la que terminamos en la última sección. Si todavía no has seguido esa sección, primero crea la matriz en tu consola:</p> + +<pre class="brush: js">let myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];</pre> + +<p>Antes que nada, para añdir o eliminar un elemento al final de una matriz podemos usar {{jsxref("Array.prototype.push()","push()")}} y {{jsxref("Array.prototype.pop()","pop()")}} respectivamente.</p> + +<ol> + <li>primero usemos <code>push()</code> — nota que necesitas incluir uno o más elementos que desees agregas al final de tu matriz. Prueba esto: + + <pre class="brush: js">myArray.push('Cardiff'); +myArray; +myArray.push('Bradford', 'Brighton'); +myArray; +</pre> + </li> + <li>La nueva longitud de la matriz se devuelve cuando finaliza la llamada al método. Si quisieras almacenar la nueva longitud de matriz en una variable, podrías hacer algo como esto: + <pre class="brush: js">let newLength = myArray.push('Bristol'); +myArray; +newLength;</pre> + </li> + <li>Eliminar el último elemento de una matriz es tan simple como ejecutar <code>pop()</code> en ella. Prueba esto: + <pre class="brush: js">myArray.pop();</pre> + </li> + <li>El elemento que sé eliminó se devuelve cuando se completa la llamada al método. Para guardar este elemento en una variable, puedes hacer lo siguiente: + <pre class="brush: js">let removedItem = myArray.pop(); +myArray; +removedItem;</pre> + </li> +</ol> + +<p>{{jsxref("Array.prototype.unshift()","unshift()")}} y {{jsxref("Array.prototype.shift()","shift()")}} funcionan exactamente igual de <code>push()</code> y <code>pop()</code>, respectivamente, excepto que funcionan al principio de la matriz, no al final.</p> + +<ol> + <li>Primero <code>unshift()</code> — prueba el siguiente comando: + + <pre class="brush: js">myArray.unshift('Edinburgh'); +myArray;</pre> + </li> + <li>Ahora <code>shift()</code>; prueba estos! + <pre class="brush: js">let removedItem = myArray.shift(); +myArray; +removedItem;</pre> + </li> +</ol> + +<h2 id="Aprendizaje_activo_¡Imprimiendo_esos_productos!">Aprendizaje activo: ¡Imprimiendo esos productos!</h2> + +<p>Volvamos al ejemplo que describimos anteriormente — imprima los nombres de los productos y los precios en una factura, luego, sume los precios e imprímelos en la parte inferior. En el ejemplo editable a continuación, hay comentarios que contienen números — cada uno de estos marca un lugar donde debe agregar algo al código. Ellos son los siguientes:</p> + +<ol> + <li>Debajo de <code>// number 1</code> hay un número de cadena, cada una de las cuales contiene un nombre de producto y un precio separados por dos puntos. Nos gustaría que conviertas esto en una matriz y lo almacenamos en una matriz llamda <code>products</code>.</li> + <li>En la misma línea que el comentario <code>// number 2</code> es el comienzo de un ciclo for. En esta línea, actualmente tenemos <code>i <= 0</code>, que es una prueba condicional que hace que el bucle que el <a href="/en-US/Learn/JavaScript/First_steps/A_first_splash#Loops">bucle for</a> se detenga inmediatamente, porque dice "detener cuando <code>i</code> es menor o igual 0", y <code>i</code> comienza en 0. Nos gustaría que reemplazaras esto con una prueba condicional que detenga el ciclo cuando <code>i</code> no sea inferior a la longitud la matriz <code>products</code> .</li> + <li>justo debajo del comentario <code>// number 3</code> queremos que escriba una línea de código que divide el elemento actual de la matriz (<code>nombre:precio</code>) en dos elementos separados, uno que contiene solo el nombre y otros que contienen solo el precio. Si no está seguro de cómo hacerlo, consulte el artículo <a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Métodos de cadenas útiles</a> para obtener ayuda o, mejor aún, consulte la sección {{anch("Converting between strings and arrays")}} de este artículo.</li> + <li>Como parte de la línea de código anterior, también querras convertir el precio de una cadena a un número. Si no pudes recordar como hacerlo, consulta el <a href="/en-US/Learn/JavaScript/First_steps/Strings#Numbers_versus_strings">primer artículo de cadenas</a>.</li> + <li>Hay una variable llamada <code>total</code> que se crea y se le da un valor de 0 en la parte superior del código. Dentro del ciclo (debajo de <code>// number 4</code>) queremos que agregues una línea que añade el precio actual del artículo a ese total en cada iteración del ciclo, de modo que al final del código el total correcto se imprima en la factura. Es posible que necesites un <a href="/en-US/Learn/JavaScript/First_steps/Math#Assignment_operators">operador de asignación</a> para hacer esto.</li> + <li>Queremos que cambies la línea justo de bajo <code>// number 5</code> para que la variable <code>itemText</code> se iguale a "nombre de elemnto actual — $precio de elemento actual", por ejemplo "Zapatos — $23.99" en cada caso, por lo que la ionformación correcta artículo está impreso en la factura. Esto es simplemente una concatenación de cadenas, lo que debería ser familiar para ti.</li> +</ol> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 150px;"> + +<ul> + +</ul> + +<p></p> + +</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: 410px;width: 95%"> +var list = document.querySelector('.output ul'); +var totalBox = document.querySelector('.output p'); +var total = 0; +list.innerHTML = ''; +totalBox.textContent = ''; +// number 1 + 'Underpants:6.99' + 'Socks:5.99' + 'T-shirt:14.99' + 'Trousers:31.99' + 'Shoes:23.99'; + +for (var i = 0; i <= 0; i++) { // number 2 + // number 3 + + // number 4 + + // number 5 + itemText = 0; + + var listItem = document.createElement('li'); + listItem.textContent = itemText; + list.appendChild(listItem); +} + +totalBox.textContent = 'Total: $' + total.toFixed(2); +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +</pre> + +<pre class="brush: js">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 list = document.querySelector(\'.output ul\');\nvar totalBox = document.querySelector(\'.output p\');\nvar total = 0;\nlist.innerHTML = \'\';\ntotalBox.textContent = \'\';\n\nvar products = [\'Underpants:6.99\',\n \'Socks:5.99\',\n \'T-shirt:14.99\',\n \'Trousers:31.99\',\n \'Shoes:23.99\'];\n\nfor(var i = 0; i < products.length; i++) {\n var subArray = products[i].split(\':\');\n var name = subArray[0];\n var price = Number(subArray[1]);\n total += price;\n itemText = name + \' — $\' + price;\n\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n}\n\ntotalBox.textContent = \'Total: $\' + total.toFixed(2);'; +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(); +};</pre> + +<pre class="brush: css">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-color: #f5f9fa; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', '100%', 730, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Aprendizaje_Activo_Top_5_búsquedas">Aprendizaje Activo: Top 5 búsquedas</h2> + +<p>Un buen uso para los métodos de matriz como {{jsxref("Array.prototype.push()","push()")}} y {{jsxref("Array.prototype.pop()","pop()")}} es cuando estás manteniendo un registro de elementos actualmente activos en una aplicación web. En una escena animada por ejemplo, es posible que tengas una matriz de objetos que representan los gráficos de fondo que se muestran actualmente, y es posible que sólo desees que se muestren 50 a la vez, por razones de rendimiento o desorden. A medida que se crean y agregan nuevos objetos a la matriz, se puede eliminar los más antiguos de la matriz para mantener el número deseado.</p> + +<p>En este ejemplo vamos a mostrar un uso mucho más simple — aquí te daremos un sitio de búsqueda falso, con un cuadro de búsqueda. La idea es que cuando los términos se ingresan en un cuadro de búsqueda, se muetren el top 5 de términos de búsqueda previos en la lista. Cuando el número de términos supera el 5, el último término comienza a borrarse cada vez que agregas un nuevo término a la parte superior, por lo que siempre se muestran los 5 términos anteriores.</p> + +<div class="note"> +<p><strong>Nota</strong>: En una aplicación de búsqueda real, probablemente puedas hacer clic en los términos de búsqueda anteriores para volver a los términos de búsqueda anteriores y ¡se motrarán los resultados de búsqueda reales! Solamente lo mantendremos simple por ahora.</p> +</div> + +<p>Para completar la aplicación necesitamos:</p> + +<ol> + <li>Agregar una línea debajo del comentario <code>// number 1</code> que agrega el valor actual ingresado en la entrada de la búsqueda al inicio de la matriz. Esto se puede recuperar usando <code>searchInput.value</code>.</li> + <li>Agrega una línea debajo del comentario <code>// number 2</code> que elimina el valor actualmente al final de la matriz.</li> +</ol> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code 2</h6> + +<pre class="brush: html"><h2>Live output</h2> +<div class="output" style="min-height: 150px;"> + +<input type="text"><button>Search</button> + +<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: 370px; width: 95%"> +var list = document.querySelector('.output ul'); +var searchInput = document.querySelector('.output input'); +var searchBtn = document.querySelector('.output button'); + +list.innerHTML = ''; + +var myHistory = []; + +searchBtn.onclick = function() { + // we will only allow a term to be entered if the search input isn't empty + if (searchInput.value !== '') { + // number 1 + + // empty the list so that we don't display duplicate entries + // the display is regenerated every time a search term is entered. + list.innerHTML = ''; + + // loop through the array, and display all the search terms in the list + for (var i = 0; i < myHistory.length; i++) { + itemText = myHistory[i]; + var listItem = document.createElement('li'); + listItem.textContent = itemText; + list.appendChild(listItem); + } + + // If the array length is 5 or more, remove the oldest search term + if (myHistory.length >= 5) { + // number 2 + + } + + // empty the search input and focus it, ready for the next term to be entered + searchInput.value = ''; + searchInput.focus(); + } +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css">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; +}</pre> + +<pre class="brush: js">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 list = document.querySelector(\'.output ul\');\nvar searchInput = document.querySelector(\'.output input\');\nvar searchBtn = document.querySelector(\'.output button\');\n\nlist.innerHTML = \'\';\n\nvar myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== \'\') {\n myHistory.unshift(searchInput.value);\n\n list.innerHTML = \'\';\n\n for(var i = 0; i < myHistory.length; i++) {\n itemText = myHistory[i];\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n }\n\n if(myHistory.length >= 5) {\n myHistory.pop();\n }\n\n searchInput.value = \'\';\n searchInput.focus();\n }\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(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', '100%', 700, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Conclusión">Conclusión</h2> + +<p>Después de leer este artículo, estamos seguros de que estaras de acuerdo en que las matrices parecen bastante útiles; las verás aparecer en todas partes en JavaScript, a menudo en asociación con bucles para hacer una misma cosa con cada elemento de la matriz. Te enseñaremos todos los aspectos básicos útiles que hay que conocer sobre los bucles en el siguiente módulo, pero por ahora debes darte un aplauso y tomarte un merecido descanso; ¡has trabajado en todos los artículos de este módulo!</p> + +<p>Lo único que queda por hacer es trabajar a través de la evaluación de este módulo, que te pondrá a prueba tu comprensión de los de los artículos anteriores.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a> — an advanced level guide to arrays and their cousins, typed arrays.</li> + <li>{{jsxref("Array")}} — the <code>Array</code> object reference page — for a detailed reference guide to the features discussed in this page, and many more.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Qu%C3%A9_es_JavaScript">¿Qué es JavaScript?</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/A_first_splash">Un primer acercamiento a JavaScript</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/What_went_wrong">¿Qué salió mal? Troubleshooting JavaScript</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Variables">Guardando la información que necesitas— Variables</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Matem%C3%A1ticas">Matemáticas básicas en JavaScript — números y operadores</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Strings">Manejo de texto — cadenas en JavaScript</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Useful_string_methods">Métodos útiles para el manejo de cadenas</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Arrays">Arreglos</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Silly_story_generator" rel="nofollow">Evaluaciones: Generador de historias absurdas</a></li> +</ul> diff --git a/files/es/learn/javascript/first_steps/generador_de_historias_absurdas/index.html b/files/es/learn/javascript/first_steps/generador_de_historias_absurdas/index.html new file mode 100644 index 0000000000..58bb8e688a --- /dev/null +++ b/files/es/learn/javascript/first_steps/generador_de_historias_absurdas/index.html @@ -0,0 +1,147 @@ +--- +title: Generador de historias absurdas +slug: Learn/JavaScript/First_steps/Generador_de_historias_absurdas +tags: + - Arreglos + - Cadenas + - JavaScript + - Numeros + - Principiante +translation_of: Learn/JavaScript/First_steps/Silly_story_generator +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary"></p> + +<p class="summary">En esta evaluación, deberás tomar parte del conocimiento que has aprendido en los artículos de este módulo y aplicarlo a la creación de una aplicación divertida que genere historias aleatorias. ¡Que te diviertas!</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Antes de intentar esta evaluación, deberías haber revisado todos los artículos de este módulo.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Probar la comprensión de los fundamentos de JavaScript, como variables, números, operadores, cadenas y matrices</td> + </tr> + </tbody> +</table> + +<h2 id="Punto_de_partida">Punto de partida</h2> + +<p>Para iniciar esta evaluación, debe:</p> + +<ul> + <li>Vaya y <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html">tome el archivo HTML</a> para el ejemplo y guarde una copia local de este como <code>index.html</code> en un directorio nuevo en algún lugar de su computadora. Esto también tiene el CSS para estilizar el ejemplo que contiene.</li> + <li>Vaya a la <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt">página que contiene el texto sin procesar</a> y manténgalo abierto en una pestaña separada del navegador en algún lugar. Lo necesitarás más tarde.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Alternativamente, puede usar un sitio como <a class="external external-icon" href="http://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> para hacer su evaluación. Puede pegar el HTML, CSS y JavaScript en uno de estos editores en línea. Si el editor en línea que está utilizando no tiene un panel de JavaScript separado, no dude en colocarlo en línea en un elemento <code><script></code> dentro de la página HTML.</p> +</div> + +<h2 id="Resumen_del_proyecto">Resumen del proyecto</h2> + +<p>Se le han proporcionado algunos HTML / CSS en bruto y algunas cadenas de texto y funciones de JavaScript; necesita escribir el JavaScript necesario para convertir esto en un programa de trabajo, que hace lo siguiente:</p> + +<ul> + <li>Genera una historia tonta cuando se presiona el botón "Generar historia aleatoria".</li> + <li>Reemplaza el nombre predeterminado "Bob" en la historia con un nombre personalizado, solo si se ingresa un nombre personalizado en el campo de texto "Ingresar nombre personalizado" antes de presionar el botón Generar.</li> + <li>Convierte las cantidades y unidades de peso y temperatura predeterminadas de los EE. UU. En la historia en equivalentes del Reino Unido del botón de opción del Reino Unido, antes de presionar el botón de generar.</li> + <li>Generará otra historia tonta al azar si presionas el botón otra vez (y otra vez ...)</li> +</ul> + +<p>La siguiente captura de pantalla muestra un ejemplo de lo que debería producir el programa terminado:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16178/Screen_Shot_2018-09-19_at_10.01.38_AM.png" style="border-style: solid; border-width: 1px; display: block; height: 404px; margin: 0px auto; width: 500px;"></p> + +<p>Para darle más idea, eche un vistazo al ejemplo final (¡no mire el código fuente!)</p> + +<h2 id="Etapas_para_completar">Etapas para completar</h2> + +<p>En las siguientes secciones se describe lo que hay que hacer.</p> + +<p>Configuración básica:</p> + +<ol> + <li>Crear un nuevo archivo llamado <code>main.js</code>, en el mismo directorio que tu archivo <code>index.html</code>.</li> + <li>Aplicar el archivo JavaScript externo a tu HTML insertando un elemento {{htmlelement("script")}} en tu HTML haciendo referencia a <code>main.js</code>. Póngalo justo antes de la etiquette de cierra <code></body></code>.</li> +</ol> + +<p>Variables y funciones iniciales:</p> + +<ol> + <li>en el archivo de texto sin procesar, copia todo el código bajo el encabezado "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" y pégalo en la parte superior del archivo main.js. Esto te dará tres variables que almacenan las referencias al campo de texto "Enter custom name" (<code>customName</code>), el botón "Generate random story" (<code>randomize</code>), y el elemento {{htmlelement("p")}} al fondo del cuerpo HTML en el que la historia será copiada en (<code>story</code>), respectivamente. Además, obtendrás una funcion llamada <code>randomValueFromArray()</code> que toma un array, y devuelve uno de los items guardados dentro del array al azar.</li> + <li>Ahora observa la segunda sección del archivo de texto sin procesar — "2. RAW TEXT STRINGS". Esta contiene cadenas de texto que actuarán como entrada en nuestro programa. Nos gustaría que mantengas estas variables internas dentro del archivo <code>main.js</code>: + <ol> + <li>Almacena la primera, la más larga, cadena de texto dentro de una variable llamada <code>storyText</code>.</li> + <li>Almacena el primer conjunto de tres cadenas dentro de un array llamado <code>insertX</code>.</li> + <li>Almacena el segundo conjunto de tres cadenas dentro de un array llamado <code>insertY</code>.</li> + <li>Almacena el tercer conjunto de tres cadenas dentro de un array llamado <code>insertZ</code>.</li> + </ol> + </li> +</ol> + +<p>Colocar el controlador de evento y la función incompleta:</p> + +<ol> + <li>Ahora regresa al archivo de texto sin procesar.</li> + <li>Copia el código encontrado bajo el encabezado "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" y pégalo al fondo de tu archivo <code>main.js</code> . Esto: + <ul> + <li>Añade un detector de eventos a la variable <code>randomize</code>, de manera que cuando al botón que esta representa se le haya dado un click, la función <code>result()</code> funcione.</li> + <li>Añade una definición de la función parcialmente completada <code>result()</code> a tu código. Por el resto de la evaluación, deberás llenar en líneas dentro de esta función para completarla y hacer que trabaje adecuadamente.</li> + </ul> + </li> +</ol> + +<p>Completando la función <code>result()</code>:</p> + +<ol> + <li>Crear una nueva variable llamada <code>newStory</code>, y establezca su valor igual a <code>storyText</code>. Esto es necesario para que podamos crear una nueva historia aleatoria cada vez que se presiona el botón y se ejecuta la función. Si hiciéramos cambios directamente en <code>storyText</code>, solo podríamos generar una nueva historia una vez.</li> + <li>Crear tres nuevas variables llamadas <code>xItem</code>, <code>yItem</code>, y <code>zItem</code>, y tienes que igualar cada variable llamando a <code>randomValueFromArray()</code> en sus tres matrices (el resultado en cada caso será un elemento aleatorio de cada matriz en la que se llama). Por ejemplo, puede llamar a la función y hacer que devuelva una cadena aleatoria de <code>insertX</code> escribiendo <code>randomValueFromArray(insertX)</code>.</li> + <li>A continuación, queremos reemplazar los tres marcadores de posición en la cadena <code>newStory</code> — <code>:insertx:</code>, <code>:inserty:</code>, y <code>:insertz:</code> — con las cadenas almacenadas en <code>xItem</code>, <code>yItem</code>, y <code>zItem</code>. Hay un método de string en particular que lo ayudará aquí: en cada caso, haga que la llamada al método sea igual a <code>newStory</code> de modo que cada vez que se llame, <code>newStory</code> se iguale a sí mismo, pero con sustituciones. Entonces, cada vez que se presiona el botón, estos marcadores de posición se reemplazan con una cadena absurda aleatoria. Como sugerencia adicional, el método en cuestión solo reemplaza la primera instancia de la subcadena que encuentra, por lo que es posible que deba realizar una de las llamadas dos veces.</li> + <li>Dentro del primer bloque <code>if</code>, agregue otra llamada al método de reemplazo de cadena para reemplazar el nombre 'Bob' que se encuentra en la cadena <code>newStory</code> con la variable de <code>name</code>. En este bloque estamos diciendo "Si se ingresó un valor en la entrada de texto <code>customName</code> reemplace a Bob en la historia con ese nombre personalizado."</li> + <li>Dentro del segundo bloque <code>if</code>, se esta verificando si se ha seleccionado el botón de opción <code>uk</code> Si es así, queremos convertir los valores de peso y temperatura en la historia de libras and Fahrenheit a stones and grados centígrados. Lo que debe hacer es lo siguiente: + <ol> + <li>Busque las fórmulas para convertir libras a stone, and Fahrenheit en grados centígrados.</li> + <li>Dentro de la línea que define la variable de <code>weight</code>, reemplace 300 con un cálculo que convierta 300 libras en stones. Concatenar <code>'stone'</code> al final del resultado de la llamada <code>Math.round()</code>.</li> + <li>Al lado de la línea que define la variable de <code>temperature</code>, reemplace 94 con un cálculo que convierta 94 Fahrenheit en centígrados. Concatenar <code>'centigrade'</code> al final del resultado de la llamada <code>Math.round()</code>.</li> + <li>Justo debajo de las dos definiciones de variables, agregue dos líneas de reemplazo de cadena más que reemplacen '94 fahrenheit 'con el contenido de la variable de <code>temperature</code>, y '300 libras' con el contenido de la variable de <code>weight</code>.</li> + </ol> + </li> + <li>Finalmente, en la penúltima línea de la función, haga que la propiedad <code>textContent</code> de la variable de la <code>story</code> (que hace referencia al párrafo) sea igual a <code>newStory</code>.</li> +</ol> + +<h2 id="Claves_y_pistas">Claves y pistas</h2> + +<ul> + <li>No necesitas modificar el HTML, salvo para incrustar el JavaScript a tu HTML.</li> + <li>Si no estás seguro si el JavaScript está siendo aplicado adecuadamente a tu HTML, intenta remover temporalmente todo el codigo del archivo JavaScript, agregar una instruccion simple que sabes que tendrá un efecto obvio, luego guarda y actualiza. El siguiente ejemplo cambia el fondo de {{htmlelement("html")}} - así la ventana se verá completamente roja si el JavaScript está siendo aplicado adecuadamente.: + <pre class="brush: js notranslate">document.querySelector('html').style.backgroundColor = 'red';</pre> + </li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round">Math.round()</a> es un método JavaScript integrado que simplemente redondea el resultado de un cálculo al número entero más cercano.</li> + <li>Hay tres casos de cadenas que deben reemplazarse. Puede repetir el método <code>replace()</code> varias veces o puede utilizar expresiones regulares. Por ejemplo, <code>let text = 'I am the biggest lover, I love my love'; text.replace(/love/g,'like');</code> Reemplazará todas las instancias de 'love' a 'like'. Recuerde, las cuerdas son inmutables.</li> +</ul> + +<h2 id="Evaluación_o_ayuda_adicional">Evaluación o ayuda adicional</h2> + +<p>Si está siguiendo esta evaluación como parte de un curso organizado, debería poder entregar su trabajo a su profesor/mentor para que lo califique. Si está aprendiendo por ti mismo, puede obtener la guía de calificación con bastante facilidad preguntando en el hilo de <a href="https://discourse.mozilla.org/t/silly-story-generator-assessment/24686">discussion thread for this exercise</a>, o en el canal de IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Pruebe el ejercicio primero: ¡no se gana nada haciendo trampa!</p> + +<p>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Qu%C3%A9_es_JavaScript">¿Qué es JavaScript?</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/A_first_splash">Un primer acercamiento a JavaScript</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Corrigiendo JavaScript</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Variables">Almacenando la información que necesitas - Variables</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Matem%C3%A1ticas">Matemáticas básicas en JavaScript — números y operadores</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Strings">Manejando el texto - cadenas en JavaScript</a></li> + <li><a href="/es/docs/Glossary/Arreglos">Métodos útiles con cadenas</a></li> + <li><a href="/es/docs/Glossary/Arreglos">Arreglos (matrices)</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Evaluación: Generador de hisorias alocadas</a></li> +</ul> diff --git a/files/es/learn/javascript/first_steps/index.html b/files/es/learn/javascript/first_steps/index.html new file mode 100644 index 0000000000..9a1211fc54 --- /dev/null +++ b/files/es/learn/javascript/first_steps/index.html @@ -0,0 +1,88 @@ +--- +title: Primeros pasos con JavaScript +slug: Learn/JavaScript/First_steps +tags: + - Arrays + - Arreglos + - Artículo + - Cadenas + - CodingScripting + - Evaluación + - Guide + - Guía + - JavaScript + - Landing + - Matemáticas + - Numeros + - Operadores + - Principiante + - Rangos + - Series + - TopicStub + - Variables + - 'l10n:priority' + - modulo +translation_of: Learn/JavaScript/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">En nuestro primer módulo de JavaScript, primero respondemos algunas preguntas fundamentales como "¿qué es JavaScript?", "¿cómo se ve?" y "¿qué puede hacer?", antes de pasar avanzar en la guía por tu primera experiencia práctica de escribir JavaScript. Después de eso, explicaremos en detalle algunos bloques de construcción clave, tal como variables, cadenas, números y arreglos.</p> + +<div class="in-page-callout webdev"> +<h3 id="¿Quieres_transformarte_en_un_desarrollador_de_la_interfaz_de_usuario_web">¿Quieres transformarte en un desarrollador de la interfaz de usuario web?</h3> + +<p>Se elaboró un curso que incluye toda la información esencial que necesitas para alcanzar tu objetivo.</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Empieza aquí</a></p> +</div> + +<h2 id="Prerrequisitos">Prerrequisitos</h2> + +<p>Antes de comenzar este módulo, no necesitas ningún conocimiento previo de JavaScript, pero debes estar familiarizado con HTML y CSS. Es recomendable trabajar con los siguientes módulos antes de comenzar con JavaScript:</p> + +<ul> + <li>{{web.link("/es/docs/Learn/Getting_started_with_the_web", "Introducción a la Web")}} (que incluye una {{web.link("/es/docs/Learn/Getting_started_with_the_web/JavaScript_basics", "introducción básica a JavaScript")}}).</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML", "Introducción a HTML")}}</li> + <li>{{web.link("/es/docs/Learn/CSS/Introduction_to_CSS", "Introducción a CSS")}}.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Si estás trabajando en una computadora, tableta u otro dispositivo en el que no puedes crear tus propios archivos, puedes probar (la mayoría de) los ejemplos de código en un programa de codificación en línea como <a href="http://jsbin.com/">JSBin</a> o <a href="https://glitch.com/">Glitch</a>.</p> +</div> + +<h2 id="Guías">Guías</h2> + +<dl> + <dt>{{web.link("/es/docs/Learn/JavaScript/First_steps/Que_es_JavaScript", "¿Qué es JavaScript?")}}</dt> + <dd>¡Bienvenido al curso de JavaScript para principiantes de MDN!, En este primer artículo, analizaremos JavaScript desde un alto nivel, respondiendo preguntas como "¿qué es?", y "¿qué hace?", asegurándote de que te sientas cómodo con la intención de JavaScript.</dd> + <dt>{{web.link("/es/docs/Learn/JavaScript/First_steps/A_first_splash", "Una primera introducción a JavaScript")}}</dt> + <dd>Ahora que has aprendido algo sobre la teoría de JavaScript y lo que puedes hacer con él, te daremos un curso intensivo sobre las características básicas de JavaScript a través de un tutorial completamente práctico. Aquí, te llevaremos paso a paso en la creación de un sencillo juego de "Adivina el número".</dd> + <dt>{{web.link("/es/docs/Learn/JavaScript/First_steps/What_went_wrong", "¿Qué salió mal? — Solución de problemas de JavaScript")}}</dt> + <dd>Cuando construiste el juego "Adivina el número" en el artículo anterior, es posible que hayas descubierto que no funcionó. Tranquilo — este artículo tiene como objetivo evitar tu calvicie prematura al jalarte los pelos por este tipo de problemas proporcionándote algunos sencillos consejos sobre cómo encontrar y corregir errores en los programas JavaScript.</dd> + <dt>{{web.link("/es/docs/Learn/JavaScript/First_steps/Variables", "Almacenar la información que necesitas — Variables")}}</dt> + <dd>Después de leer los últimos artículos, deberías saber qué es JavaScript, qué puede hacer por ti, cómo usarlo junto con otras tecnologías web y cómo se ven sus características principales desde un alto nivel. En este artículo llegaremos a los conceptos básicos reales, y veremos cómo trabajar con los bloques de construcción más básicos de JavaScript — Variables.</dd> + <dt>{{web.link("/es/docs/Learn/JavaScript/First_steps/Math", "Matemáticas básicas en JavaScript — números y operadores")}}</dt> + <dd>En este punto del curso, explicaremos las matemáticas en JavaScript — cómo podemos combinar operadores y otras características para manipular con éxito los números para cumplir nuestras ofertas.</dd> + <dt>{{web.link("/es/docs/Learn/JavaScript/First_steps/Strings", "Manejo de texto — cadenas en JavaScript")}}</dt> + <dd>A continuación, centraremos nuestra atención en las cadenas (<code>strings</code>) — así es como se llaman los fragmentos de texto en programación. En este artículo, veremos todas las cosas comunes que realmente debes saber sobre las cadenas al aprender JavaScript, como crear cadenas, escapar las comillas en una cadena y unirlas.</dd> + <dt>{{web.link("/es/docs/Learn/JavaScript/First_steps/Useful_string_methods", "Útiles métodos de cadena")}}</dt> + <dd>Ahora que hemos visto los conceptos básicos de las cadenas, avancemos un poco y comencemos a pensar en las operaciones útiles que podemos hacer en las cadenas con métodos integrados, como encontrar la longitud del texto en una cadena, unir y dividir cadenas, sustituir un caracter por otro en una cadena, y más.</dd> + <dt>{{web.link("/es/docs/Learn/JavaScript/First_steps/Arrays", "Arreglos")}}</dt> + <dd>En el artículo final de este módulo, veremos los arreglos — una forma ordenada de almacenar una lista de elementos de datos con un solo nombre de variable. Aquí vemos por qué esto es útil, luego exploramos cómo crear un arreglo, recuperar, agregar y eliminar elementos almacenados en un arreglo, y más.</dd> +</dl> + +<h2 id="Evaluaciones">Evaluaciones</h2> + +<p>La siguiente evaluación pondrá a prueba tu comprensión de los conceptos básicos de JavaScript cubiertos en las guías anteriores.</p> + +<dl> + <dt>{{web.link("/es/docs/Learn/JavaScript/First_steps/Silly_story_generator", "Generador de historias absurdas")}}</dt> + <dd>En esta evaluación, se te asignará la tarea de tomar algunos de los conocimientos adquiridos en los artículos de este módulo y aplicarlos para crear una divertida aplicación que genere historias absurdas al azar. ¡Que te diviertas!</dd> +</dl> + +<h2 id="Ve_también">Ve también</h2> + +<dl> + <dt><a href="https://learnjavascript.online/">Aprende JavaScript</a></dt> + <dd>Un excelente recurso para los aspirantes a desarrolladores web — aprende JavaScript en un entorno interactivo, con lecciones breves y pruebas interactivas, guiado por una evaluación automatizada. Las primeras 40 lecciones son gratuitas y el curso completo está disponible por un pequeño pago único.</dd> +</dl> diff --git a/files/es/learn/javascript/first_steps/matemáticas/index.html b/files/es/learn/javascript/first_steps/matemáticas/index.html new file mode 100644 index 0000000000..d9117ed211 --- /dev/null +++ b/files/es/learn/javascript/first_steps/matemáticas/index.html @@ -0,0 +1,443 @@ +--- +title: Matemáticas básicas en JavaScript — números y operadores +slug: Learn/JavaScript/First_steps/Matemáticas +tags: + - Aprender + - Artículo + - Guía + - JavaScript + - Matemáticas + - Math + - Novato + - Operadores + - Principiante + - incremento + - 'l10n:priority' + - modulo +translation_of: Learn/JavaScript/First_steps/Math +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">En este punto del curso, hablaremos de matemáticas en JavaScript — cómo podemos usar {{Glossary("Operator","operadores")}} y otras características para manipular con éxito números y conseguir lo que nos hayamos propuesto.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisitos:</th> + <td>Conocimientos básicos de ordenadores, comprensión básica de HTML y CSS, comprensión básica de lo que es JavaScript.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Familiarizarse con las matemáticas básicas de JavaScript.</td> + </tr> + </tbody> +</table> + +<h2 id="Todos_aman_las_matemáticas">Todos aman las matemáticas</h2> + +<p>Vale, tal vez no. A algunos nos gustan, otros las odiamos desde que aprendimos en la escuela las tablas de multipicar y las divisiones complicadas, y algunos estamos a mitad entre ambas posturas. Pero ninguno podemos negar que las matemáticas son una parte fundamental de la vida que nos afecta. Y esto es especialmente cierto cuando aprendemos JavaScript (o cualquier otro lenguaje similar) — en la medida en que ello pasa por procesar números, calcular nuevos valores, etc., no te puede sorprender comprobar que JavaScript dispone de un completo conjunto de funciones matemáticas.</p> + +<p>En este artículo se trata solo aquella parte básica que necesitas conocer por ahora.</p> + +<h3 id="Tipos_de_números">Tipos de números</h3> + +<p>En programación, incluso el simple sistema numérico decimal que todos conocemos tan bien, es más complicado de lo que podrías pensar. Usamos diferentes términos para describir diferentes tipos de números decimales, por ejemplo:</p> + +<ul> + <li><strong>Enteros son números sin parte decimal</strong>, e.g. 10, 400 o -5.</li> + <li><strong>Números con coma flotante </strong>(floats): tienen punto decimal y parte decimal, por ejemplo,12.5 y 56.7786543.</li> + <li><strong>Doubles</strong>: son un tipo específico de números de coma flotante que tienen una mayor precisión que los numeros de coma flotante comunes (lo que significa que son más precisos en cuanto a la cantidad de decimales que poseen).</li> +</ul> + +<p>¡Incluso tenemos distintos tipos de sistemas numéricos! El decimal es base 10 (quiere decir que utiliza 0-9 en cada columna), pero también tenemos cosas como:</p> + +<ul> + <li><strong>Binario</strong> — El lenguaje de computadora de nivel más bajo; 0s y 1s.</li> + <li><strong>Octal</strong> — De base 8, utiliza de 0–7 en cada columna.</li> + <li><strong>Hexadecimal</strong> — De base 16, utiliza de 0–9 y luego de a–f en cada columna. Puedes haber encontrado estos números antes, cuando colocabas <a href="/es/Learn/CSS/Introduction_to_CSS/Values_and_units#Hexadecimal_values">colores en CSS</a>.</li> +</ul> + +<p><strong>Antes de que comiences a preouparte de que tu cerebro se derrita, ¡detente un momento!</strong> Para empezar, sólo vamos a apegarnos a los números decimales durante todo este curso; pocas veces te verás en la necesidad de comenzar a pensar sobre los otros tipos, si es que lo haces.</p> + +<p>La segunda parte de las buenas noticias es que, a diferencia de otros lenguajes de programación, JavaScript sólo tiene un tipo de dato para los números, adivinaste, {{jsxref("Number")}}. Esto significa que, sin importar el tipo de número con el que estés lidiando en Javascript, los manejas siempre de la misma manera.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: En realidad, JavaScript tiene un segundo tipo de número, {{Glossary("BigInt")}}, que se utiliza para números enteros muy, muy grandes. Pero para los propósitos de este curso, solo nos preocuparemos por los valores numéricos.</p> +</div> + +<h3 id="Para_mí_todo_son_números.">Para mí, todo son números.</h3> + +<p>Juguemos un poco con algunos números para ponernos al día con la sintaxis básica que necesitamos. Coloca los comandos listados abajo en la <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">consola JavaScript de tus herramientas para desarrolladores</a>, o utiliza la sencilla consola integrada que verás abajo si lo prefieres.</p> + +<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/">Abrir en una ventana nueva</a></strong></p> + +<ol> + <li>Primero que todo, declara un par de variables e inicializalas con un entero y un flotante, respectivamente, luego escribe los nombres de esas variables para chequear que todo esté en orden: + <pre class="brush: js notranslate">var myInt = 5; +var myFloat = 6.667; +myInt; +myFloat;</pre> + </li> + <li>Los valores numéricos están escritos sin comillas - Trata de declarar e inicializar un par de variables más que contengan números antes de continuar.</li> + <li>Ahora chequea que nuestras variables originales sean del mismo tipo. Hay un operador llamado {{jsxref("Operators/typeof", "typeof")}} en JavaScript hace esto. Digita las dos lineas siguientes: + <pre class="brush: js notranslate">typeof myInt; +typeof myFloat;</pre> + Obtendrás <code>"number"</code> en ambos casos — esto hace las cosas mucho más fáciles que si diferentes números tuvieran difetentes tipos, y tuvimos que lidiar con ellos de diferentes maneras. Uf !</li> +</ol> + +<h2 id="Operadores_Aritméticos">Operadores Aritméticos</h2> + +<p>Los operadores aritméticos son operadores básicos que usamos para hacer sumas:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Operador</th> + <th scope="col">Nombre</th> + <th scope="col">Propósito</th> + <th scope="col">Ejemplo</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>+</code></td> + <td>Adición</td> + <td>Suma dos números juntos.</td> + <td><code>6 + 9</code></td> + </tr> + <tr> + <td><code>-</code></td> + <td>Resta</td> + <td>Resta el numero de la derecha del de la izquierda.</td> + <td><code>20 - 15</code></td> + </tr> + <tr> + <td><code>*</code></td> + <td>Multiplicación</td> + <td>Multiplica dos números juntos.</td> + <td><code>3 * 7</code></td> + </tr> + <tr> + <td><code>/</code></td> + <td>División</td> + <td>Divide el número de la izquierda por el de la derecha.</td> + <td><code>10 / 5</code></td> + </tr> + <tr> + <td><code>%</code></td> + <td>Sobrante (también llamado módulo)</td> + <td> + <p>Retorna el restante después de dividir el número de la izquierda en porciones enteras del de la derecha.</p> + </td> + <td><code>8 % 3</code> (retorna 2, como tres está dos veces en 8, quedando 2 restantes.)</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota</strong>: A veces verás números involucrados en sumas referidas como {{Glossary("Operand", "operands")}}.</p> +</div> + +<p>Probablemente no necesitemos enseñarte matemáticas básicas, pero nos gustaría probar tu entendimiento de la sintaxis involucrada. Intenta entrar los ejemplos de abajo en tu <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">consola JavaScript de tus herramientas para desarrolladores</a>, o usa la sencilla consola incorporada que se vio anteriormente, si lo prefieres, para familiarizarte con la sintaxis.</p> + +<ol> + <li>Primero, trata entrando un ejemplo simple por tu cuenta, como + <pre class="brush: js notranslate">10 + 7 +9 * 8 +60 % 3</pre> + </li> + <li>Puedes tratar declarando e inicializando algunos números en variables, y probar usándolos en la suma - Las variables se comportarán exactamente como los valores que tienen para los fines de la suma. Por ejemplo: + <pre class="brush: js notranslate">var num1 = 10; +var num2 = 50; +9 * num1; +num2 / num1;</pre> + </li> + <li>Por último, trate entrando algunas expresiones complejas, como: + <pre class="brush: js notranslate">5 + 10 * 3; +num2 % 9 * num1; +num2 + num1 / 8 + 2;</pre> + </li> +</ol> + +<p>Es posible que parte de este último conjunto de sumas no te dé el resultado que esperabas; La siguiente sección bien podría dar la respuesta del por qué.</p> + +<h3 id="Precedencia_de_Operadores">Precedencia de Operadores</h3> + +<p>Veamos el último ejemplo de arriba, asumiendo que num2 tiene el valor 50 y num1 tiene el valor 10 (como se indicó anteriormente):</p> + +<pre class="brush: js notranslate">num2 + num1 / 8 + 2;</pre> + +<p>Como un ser humano, puedes leer esto como "50 más 10 es igual a 60", luego "8 más 2 es igual a 10", y finalmente "60 dividido por 10 es igual a 6".</p> + +<p>Pero el navegador hace "10 dividido por 8 es igual a 1.25", luego "50 más 1.25 más 2 es igual a 53.25".</p> + +<p>Esto es debido a la <strong>precedencia de operadores</strong> — algunos operadores son aplicados antes de otros cuando se calcula el resultado de una suma (referida como una expresión, en programación). La precedencia de operadores en JavaScript es la misma que en las matemáticas de la escuela — La multiplicación y la división se resuelven siempre primero, luego la suma y resta (la suma siempre se evalua de izquierda a derecha).</p> + +<p>Si quieres alterar la precedencia de operación, puedes colocar paréntesis alrededor de las partes que quieras explícitamente evaluar primero. Para obtener un resultado de 6, podríamos hacer esto:</p> + +<pre class="brush: js notranslate">(num2 + num1) / (8 + 2);</pre> + +<p>Pruébalo y verás.</p> + +<div class="note"> +<p><strong>Nota</strong>: Una completa lista de todos los operadores de JavaScript y sus precedencias pueden encontrarse en <a href="/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence">Expresiones y operadores</a>.</p> +</div> + +<h2 id="Operadores_de_incremento_y_decremento">Operadores de incremento y decremento</h2> + +<p>Algunas veces necesitarás repetidamente sumar o restar uno de/a una variable numérica. Esto puede hacerse convenientemente usando los operadores de incremento (<code>++</code>) y decremento (<code>--</code>). Usamos <code>++</code> en nuestro juego "Adivina el número" en nuestro artículo <a href="/es/docs/Learn/JavaScript/First_steps/A_first_splash">Un primer acercamiento a JavaScrip</a><a href="/es/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">t</a>, cuando agregamos 1 a nuestra variable <code>guessCount</code> para mantener una pista de cuantas respuestas le quedan al usuario por turno.</p> + +<pre class="brush: js notranslate">guessCount++;</pre> + +<div class="note"> +<p><strong>Nota</strong>: Son muy comunmente usadas en <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">ciclos</a>, que aprenderás más adelante en el curso. Por ejemplo, Digamos que quieras recorrer una lista de precios, y agregar impuestos a cada uno. Usaría un ciclo para recorrer cada valor y realizar el cálculo necesario para agregar el impuesto a las ventas en cada caso. El incrementador es usado para mover al próximo valor cuando es necesario. Damos un simple ejemplo En realidad, proporcionamos un ejemplo simple que muestra cómo se hace esto: ¡pruébalo en vivo y mira el código fuente para ver si puedes detectar los incrementadores! Veremos los ciclos en detalle más adelante en el curso..</p> +</div> + +<p>Trata jugando con eso en tu consola. Para empezar, nota que no puedes aplicar esto directamente a un número, sin operar en él mismo. Lo siguiente retorna un error:</p> + +<pre class="brush: js notranslate">3++;</pre> + +<p>Asì, puedes solo incrementar una variable existente. Prueba esto:</p> + +<pre class="brush: js notranslate">var num1 = 4; +num1++;</pre> + +<p>Ok, la extrañeza número 2! Cuando hagas esto, verás que se devuelve un valor de 4; esto se debe a que el navegador devuelve el valor actual y luego incrementa la variable. Puedes ver que se ha incrementado si devuelves el valor variable nuevamente:</p> + +<pre class="brush: js notranslate">num1;</pre> + +<p>Lo mismo funciona con <code>--</code> : intenta lo siguiente:</p> + +<pre class="brush: js notranslate">var num2 = 6; +num2--; +num2;</pre> + +<div class="note"> +<p><strong>Nota</strong>: Puedes hacer que el navegador lo haga al revés: aumentar / disminuir la variable y luego devolver el valor, colocando el operador al comienzo de la variable en lugar del final. Prueba los ejemplos anteriores otra vez, pero esta vez usa <code>++num1</code> y<code>--num2</code>.</p> +</div> + +<h2 id="Operadores_de_asignación">Operadores de asignación</h2> + +<p>Los operadores de asignación son operadores que asignan un valor a una variable. Ya usamos el más básico, <code>=</code>, muchas veces — simplemente asigna a la variable de la izquierda, el valor de la derecha:</p> + +<pre class="brush: js notranslate">var x = 3; // x contiene el valor 3 +var y = 4; // y contiene el valor 4 +x = y; // x ahora contiene el mismo valor de y... 4</pre> + +<p>Pero hay algunos tipos más complejos, que proporcionan atajos útiles para mantener tu código más ordenado y más eficiente. Los más comunes se enumeran a continuación.:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Operador</th> + <th scope="col">Nombre</th> + <th scope="col">Propósito</th> + <th scope="col">_Ejemplo</th> + <th scope="col">__Atajo_de__</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>+=</code></td> + <td>Adición asignación</td> + <td>Suma el valor de la derecha al valor de la variable de la izquierda y returna el nuevo valor</td> + <td><code>x = 3;<br> + x += 4;</code></td> + <td><code>x = 3;<br> + x = x + 4;</code></td> + </tr> + <tr> + <td><code>-=</code></td> + <td>Resta asignación</td> + <td> + <p>Resta el valor de la derecha, del valor de la variable de la izquierda y retorna el nuevo valor.</p> + </td> + <td><code>x = 6;<br> + x -= 3;</code></td> + <td><code>x = 6;<br> + x = x - 3;</code></td> + </tr> + <tr> + <td><code>*=</code></td> + <td>Multiplicación asignación</td> + <td> + <p>Multiplica el valor de la variable en la izquierda por el valor en la derecha y retorna el nuevo valor.</p> + </td> + <td><code>x = 2;<br> + x *= 3;</code></td> + <td><code>x = 2;<br> + x = x * 3;</code></td> + </tr> + <tr> + <td><code>/=</code></td> + <td>División asignación</td> + <td> + <p>Divide el valor de la variable en la izquierda por el valor de la derecha y retorna el nuevo valor.</p> + </td> + <td><code>x = 10;<br> + x /= 5;</code></td> + <td><code>x = 10;<br> + x = x / 5;</code></td> + </tr> + </tbody> +</table> + +<p>Intenta digitar algunos de estos ejemplos en tu consola, para darte una idea de cómo funcionan. Mira si puedes preguntar los valores que tenían antes de ingresarlos en la segunda línea, en cada caso.</p> + +<p>Ten en cuenta que puedes usar otras variables en el lado derecho de cada expresión, por ejemplo:</p> + +<pre class="brush: js notranslate">var x = 3; // x contiene el valor 3 +var y = 4; // y contiene el valor 4 +x *= y; // x ahora contiene el valor 12</pre> + +<div class="note"> +<p><strong>Nota</strong>: Hay una cantidad de <a href="/es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">otros operadores de asignación disponibles</a>, pero estos son los básicos que debes aprender por ahora.</p> +</div> + +<h2 id="Aprendizaje_activo_dimensionando_una_caja_canvas">Aprendizaje activo: dimensionando una caja canvas</h2> + +<p>En este ejercicio vamos a hacer que completes algunos números y operadores para manipular el tamaño de una caja. El cuadro se dibuja utilizando una API de navegador llamada {{domxref("Canvas API", "", "", "true")}}. No hay necesidad de preocuparse por cómo funciona esto, solo concentrarse en las matemáticas por ahora. El ancho y el alto del cuadro (en píxeles) están definidos por las variables x e y, a las que inicialmente se les asigna un valor de 50.</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 520)}}</p> + +<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html">Abrir en una nueva ventana</a></strong></p> + +<p>En el cuadro de código editable anterior, hay dos líneas marcadas claramente con un comentario que nos gustaría que actualices para hacer que el cuadro crezca/se reduzca a ciertos tamaños, utilizando ciertos operadores y/o valores en cada caso. Intenta lo siguiente:</p> + +<ul> + <li>Cambia la línea que calcula x, para que el recuadro tenga un ancho de 50px, y que el 50 se calcule utilizando los números 43 y 7, y un operador aritmético.</li> + <li>Cambia la línea que calcula y, para que la casilla tenga 75px de altura y que el 75 se calcule utilizando los números 25 y 3, y un operador aritmético.</li> + <li>Cambia la línea que calcula x, para que el recuadro tenga un ancho de 250px, y que el 250 se calcule utilizando dos números y el operador del resto (módulo).</li> + <li>Cambia la línea que calcula y, para que el cuadro tenga 150px de altura, y que el 150 se calcule utilizando tres números, y los operadores de resta y división.</li> + <li>Cambia la línea que calcula x, para que el cuadro tenga 200px de ancho y que el 200 se calcule utilizando el número 4 y un operador de asignación.</li> + <li>Cambia la línea que calcula y, para que el cuadro tenga 200px de altura y que el 200 se calcule utilizando los números 50 y 3, el operador de multiplicación y el operador de asignación de suma.</li> +</ul> + +<p>No te preocupes si arruinas totalmente el código. Siempre puedes presionar el botón Restablecer para que las cosas vuelvan a funcionar. Después de haber respondido correctamente a todas las preguntas anteriores, siéntete libre de jugar con el código un poco más, o establece desafíos para tus amigos/compañeros de clase..</p> + +<h2 id="Operadores_de_comparación">Operadores de comparación</h2> + +<p>A veces querremos ejecutar pruebas de verdadero/falso, y luego actuaremos de acuerdo con el resultado de esa prueba. Para ello, utilizamos <strong>operadores de comparación</strong>.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Operador</th> + <th scope="col">Nombre</th> + <th scope="col">Propósito</th> + <th scope="col">Ejemplo</th> + </tr> + <tr> + <td><code>===</code></td> + <td>Igual estricto</td> + <td>Comprueba si los valores izquierdo y derecho son idénticos entre sí</td> + <td><code>5 === 2 + 4</code></td> + </tr> + <tr> + <td><code>!==</code></td> + <td>Igual no-estricto</td> + <td>Comprueba si los valores izquierdo y derecho <strong>no</strong> son idénticos entre sí</td> + <td><code>5 !== 2 + 3</code></td> + </tr> + <tr> + <td><code><</code></td> + <td>Menor que</td> + <td>Comprueba si el valor izquierdo es menor que el derecho.</td> + <td><code>10 < 6</code></td> + </tr> + <tr> + <td><code>></code></td> + <td>Mayor que</td> + <td>Comprueba si el valor izquierdo es mayor que el derecho.</td> + <td><code>10 > 20</code></td> + </tr> + <tr> + <td><=</td> + <td>Menor o igual a</td> + <td>Comprueba si el valor izquierdo es menor o igual que el derecho.</td> + <td><code>3 <= 2</code></td> + </tr> + <tr> + <td>>=</td> + <td>Mayor o igual a</td> + <td>Comprueba si el valor izquierdo es mayor o igual que el derecho..</td> + <td><code>5 >= 4</code></td> + </tr> + </thead> +</table> + +<div class="note"> +<p><strong>Nota</strong>: Es posible que algunas personas utilicen == y != en sus pruebas de igualdad y no igualdad. Estos son operadores válidos en JavaScript, pero difieren de === /! ==: la prueba anterior indica si los valores son iguales. pero el tipo de datos puede ser diferente, mientras que las últimas versiones estrictas prueban si el valor y el tipo de datos son los mismos. Las versiones estrictas tienden a reducir el número de errores que no se detectan, por lo que te recomendamos que los utilices.</p> +</div> + +<p>Si intentas ingresar algunos de estos valores en una consola, verás que todos devuelven valores verdaderos/falsos, esos booleanos que mencionamos en el artículo anterior. Son muy útiles ya que nos permiten tomar decisiones en nuestro código; se usan cada vez que queremos hacer una elección de algún tipo, por ejemplo.:</p> + +<ul> + <li>Mostrar la etiqueta de texto correcta en un botón dependiendo de si una función está activada o desactivada.</li> + <li>Mostrar un mensaje sobre un juego si ha terminado, o un mensaje de victoria si el juego ha sido ganado.</li> + <li>Mostrando el saludo estacional correcto dependiendo de la temporada de vacaciones.</li> + <li>Acercar o alejar un mapa según el nivel de zoom seleccionado.</li> +</ul> + +<p>Veremos cómo codificar dicha lógica cuando veamos declaraciones condicionales en un artículo futuro. Por ahora, veamos un ejemplo rápido:</p> + +<pre class="brush: html notranslate"><button>Iniciar máquina</button> +<p>La máquina se detuvo.</p> +</pre> + +<pre class="brush: js notranslate">var btn = document.querySelector('button'); +var txt = document.querySelector('p'); + +btn.addEventListener('click', updateBtn); + +function updateBtn() { + if (btn.textContent === 'Iniciar máquina') { + btn.textContent = 'Detener máquina'; + txt.textContent = 'La máquina se inició!'; + } else { + btn.textContent = 'Iniciar máquina'; + txt.textContent = 'La máquina se detuvo.'; + } +}</pre> + +<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}</p> + +<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html">Abrir en una nueva ventana</a></strong></p> + +<p>Puede ver el operador de igualdad utilizado justo dentro de la función <code>updateBtn().</code> En este caso, no estamos probando si dos expresiones matemáticas tienen el mismo valor (estamos comprobando si el contenido de texto de un botón contiene una cadena determinada), pero sigue siendo el mismo principio. Si el botón está actualmente diciendo "Iniciar máquina" cuando se presiona, cambiamos su etiqueta a "Detener máquina" y actualizamos la etiqueta según corresponda. Si el botón está actualmente diciendo "Detener máquina" cuando se presiona, volvemos a cambiar la pantalla.</p> + +<div class="note"> +<p><strong>Nota</strong>: Un control de este tipo que intercambia entre dos estados generalmente se conoce como <strong>conmutador</strong>. Conmuta entre un estado y otro — Luces on, luces off, etc.</p> +</div> + +<h2 id="Pon_a_prueba_tus_habilidades">Pon a prueba tus habilidades</h2> + +<p>Llegaste al final de este artículo, pero ¿puédes recordar la información más importante? Puedes encontrar algunas pruebas para verificar que has comprendido esta información antes de seguir avanzando — Ve <a href="/es/docs/Learn/JavaScript/First_steps/Test_your_skills:_Math">¡Pon a prueba tus habilidades!: Matemáticas</a>.</p> + +<h2 id="Resumen">Resumen</h2> + +<p>En este artículo hemos cubierto la información fundamental que necesitas saber sobre los números en JavaScript, por ahora. Verás los números usados una y otra vez, a lo largo de tu aprendizaje de JavaScript, por lo que es una buena idea hacer esto ahora. Si eres una de esas personas que no disfruta de las matemáticas, puedes sentirte cómodo por el hecho de que este capítulo fue bastante breve.</p> + +<p>En el siguiente artículo, exploraremos el texto y cómo JavaScript nos permite manipularlo.</p> + +<div class="note"> +<p><strong>Nota</strong>: Si disfrutas de las matemáticas y quieres leer más sobre cómo se implementa en JavaScript, puedes encontrar muchos más detalles en la sección principal de JavaScript de MDN. Los mejores lugares para iniciar con artículos sobre <a href="/es/docs/Web/JavaScript/Guide/Numbers_and_dates">Numero y fechas</a> y <a href="/es/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expresiones y operadores</a>.</p> +</div> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li><a href="/es/docs/Learn/JavaScript/First_steps/What_is_JavaScript">¿Qué es JavaScript?</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/A_first_splash">Un primer acercamiento a JavaScript</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/What_went_wrong">¿Qué salió mal? Corrigiendo JavaScript</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Variables">Guardando la información que necesitas— Variables</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Matem%C3%A1ticas">Matemáticas básicas en JavaScript — números y operadores</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Strings">Manejo de texto — cadenas en JavaScript</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Useful_string_methods">Métodos útiles para el manejo de cadenas</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Arrays">Arreglos</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Silly_story_generator" rel="nofollow">Evaluaciones: Generador de historias absurdas</a></li> +</ul> diff --git a/files/es/learn/javascript/first_steps/prueba_tus_habilidades_colon__strings/index.html b/files/es/learn/javascript/first_steps/prueba_tus_habilidades_colon__strings/index.html new file mode 100644 index 0000000000..f919ac1ee3 --- /dev/null +++ b/files/es/learn/javascript/first_steps/prueba_tus_habilidades_colon__strings/index.html @@ -0,0 +1,122 @@ +--- +title: 'Prueba tus habilidades: Strings' +slug: 'Learn/JavaScript/First_steps/Prueba_tus_habilidades:_Strings' +tags: + - Cadenas + - JavaScript + - Novato + - Principiante + - Prueba tus habilidades + - aprende + - strings +translation_of: 'Learn/JavaScript/First_steps/Test_your_skills:_Strings' +--- +<div>{{learnsidebar}}</div> + +<p>El objetivo de esta prueba de habilidad es evaluar si has entendido nuestros artículos <a href="/es/docs/Learn/JavaScript/First_steps/Strings">Manejo de texto — cadenas en JavaScript</a> y <a href="/es/docs/Learn/JavaScript/First_steps/Useful_string_methods">Métodos de cadena útiles</a>.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Puedes probar las soluciones en los editores interactivos a continuación, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, o <a href="https://glitch.com/">Glitch</a> para trabajar en las tareas.<br> + <br> + Si te quedas atascado, pídenos ayuda — consulta la sección {{anch("Evaluación o ayuda adicional")}} en la parte inferior de esta página.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: En los siguientes ejemplos, si hay un error en tu código, se mostrará en el panel de resultados de la página, para ayudarte a intentar averiguar la respuesta (o en la consola JavaScript del navegador, en el caso de la versión descargable).</p> +</div> + +<h2 id="Cadenas_1">Cadenas 1</h2> + +<p>En nuestra primera tarea de cadenas, comenzaremos con algo pequeño. Ya tienes la mitad de una cita famosa dentro de una variable llamada <code>quoteStart</code>; nos gustaría que:</p> + +<ol> + <li>Busques la otra mitad de la cita y la agregues al ejemplo dentro de una variable llamada <code>quoteEnd</code>.</li> + <li>Concatenes las dos cadenas para hacer una sola cadena que contenga la cita completa. Guardes el resultado dentro de una variable llamada <code>finalQuote</code>.</li> +</ol> + +<p>Verás que obtienes un error en este punto. ¿Puedes solucionar el problema con <code>quoteStart</code> para que la cita completa se muestre correctamente?</p> + +<p>Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings1.html", '100%', 400)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/strings/strings1-download.html">Descarga el punto de partida de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p> +</div> + +<h2 id="Cadenas_2">Cadenas 2</h2> + +<p>En esta tarea, se te proporcionan dos variables, <code>quote</code> y <code>substring</code>, que contienen dos cadenas. Nos gustaría que:</p> + +<ol> + <li>Recuperes la longitud de la cita y la guardes en una variable llamada <code>quoteLength</code>.</li> + <li>Busques la posición del índice donde aparece <code>substring</code> en <code>quote</code>, y almacenes ese valor en una variable llamada <code>index</code>.</li> + <li>Uses una combinación de las variables que tienes y las propiedades/métodos de cadena disponibles para recortar la cita original a "No me gustan los huevos verdes y el jamón", y la guardes en una variable llamada <code>revisedQuote</code>.</li> +</ol> + +<p>Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings2.html", '100%', 400)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/strings/strings2-download.html">Descarga el punto de partida de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p> +</div> + +<h2 id="Cadenas_3">Cadenas 3</h2> + +<p>En la siguiente tarea de cadenas, se te da la misma cita con la que terminaste en la tarea anterior, ¡pero está algo rota! Queremos que la arregles y actualices, así:</p> + +<ol> + <li>Cambia la letra mayúscula para corregir con mayúscula inicial la oración (todo en minúsculas, excepto la primera letra mayúscula). Almacena la nueva cita en una variable llamada <code>fixedQuote</code>.</li> + <li>En <code>fixedQuote</code>, reemplaza "huevos verdes con jamón" con otro alimento que realmente no te guste.</li> + <li>Hay una pequeña solución más por hacer: agrega un punto al final de la cita y guarda la versión final en una variable llamada <code>finalQuote</code>.</li> +</ol> + +<p>Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings3.html", '100%', 400)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/strings/strings3-download.html">Descarga el punto de partida de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p> +</div> + +<h2 id="Cadenas_4">Cadenas 4</h2> + +<p>En la tarea de cadena final, te hemos dado el nombre de un teorema, dos valores numéricos y una cadena incompleta (los bits que se deben agregar están marcados con asteriscos (<code>*</code>)). Queremos que cambies el valor de la cadena de la siguiente manera:</p> + +<ol> + <li>Cámbiala de un literal de cadena normal a una plantilla literal.</li> + <li>Reemplaza los cuatro asteriscos con cuatro marcadores de posición en la plantilla literal. Estos deben ser: + <ol> + <li>El nombre del teorema.</li> + <li>Los dos valores numéricos que tenemos.</li> + <li>La longitud de la hipotenusa de un triángulo rectángulo, dado que las longitudes de los otros dos lados son iguales a los dos valores que tenemos. Deberás buscar cómo calcular esto a partir de lo que tienes. Haz el cálculo dentro del marcador de posición.</li> + </ol> + </li> +</ol> + +<p>Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings4.html", '100%', 400)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/strings/strings4-download.html">Descarga el punto de partida de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p> +</div> + +<h2 id="Evaluación_o_ayuda_adicional">Evaluación o ayuda adicional</h2> + +<p>Puedes practicar estos ejemplos en los editores interactivos anteriores.</p> + +<p>Si deseas que se evalúe tu trabajo o estás atascado y deseas pedir ayuda:</p> + +<ol> + <li>Coloca tu trabajo en un editor que se pueda compartir en línea, como <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> o <a href="https://glitch.com/">Glitch</a>. Puedes escribir el código tú mismo o utilizar los archivos de punto de partida vinculados en las secciones anteriores.</li> + <li>Escribe una publicación solicitando evaluación y/o ayuda en la <a href="https://discourse.mozilla.org/c/mdn/learn">categoría de aprendizaje del foro de discusión de MDN</a>. Tu publicación debe incluir: + <ul> + <li>Un título descriptivo como "Se busca evaluación para la prueba de habilidad de Cadenas 1".</li> + <li>Detalles de lo que ya has probado y lo que te gustaría que hiciéramos, p. ej. si estás atascado y necesitas ayuda, o quiere una evaluación.</li> + <li>Un enlace al ejemplo que deseas evaluar o con el que necesitas ayuda, en un editor que se pueda compartir en línea (como se mencionó en el paso 1 anterior). Esta es una buena práctica para entrar — es muy difícil ayudar a alguien con un problema de codificación si no puedes ver su código.</li> + <li>Un enlace a la página de la tarea o evaluación real, para que podamos encontrar la pregunta con la que deseas ayuda.</li> + </ul> + </li> +</ol> diff --git a/files/es/learn/javascript/first_steps/qué_es_javascript/index.html b/files/es/learn/javascript/first_steps/qué_es_javascript/index.html new file mode 100644 index 0000000000..bd845c8681 --- /dev/null +++ b/files/es/learn/javascript/first_steps/qué_es_javascript/index.html @@ -0,0 +1,436 @@ +--- +title: ¿Qué es JavaScript? +slug: Learn/JavaScript/First_steps/Qué_es_JavaScript +tags: + - APIs + - Aprender + - Artículo + - Añadir JavaScript + - Curso + - Dinámico + - En línea + - Gestores de JavaScript en linea + - JavaScript + - Navegador + - Núcleo + - Principiante + - comentários + - externo +translation_of: Learn/JavaScript/First_steps/What_is_JavaScript +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">¡Bienvenido al curso de JavaScript para principiantes de MDN! En este artículo veremos JavaScript desde un alto nivel, respondiendo preguntas como "¿Qué es?" y "¿Qué puedes hacer con él?", y asegúrate de estar cómodo con el propósito de JavaScript.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Conocimientos básicos de informática, conocimientos básicos de HTML y CSS.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Familiarizarte con lo que es JavaScript, lo que puede hacer y cómo encaja en un sitio web.</td> + </tr> + </tbody> +</table> + +<h2 id="Una_definición_de_alto_nivel">Una definición de alto nivel</h2> + +<p>JavaScript es un lenguaje de programación o de secuencias de comandos que te permite implementar funciones complejas en páginas web, cada vez que una página web hace algo más que sentarse allí y mostrar información estática para que la veas, muestra oportunas actualizaciones de contenido, mapas interactivos, animación de Gráficos 2D/3D, desplazamiento de máquinas reproductoras de vídeo, etc., puedes apostar que probablemente JavaScript está involucrado. Es la tercera capa del pastel de las tecnologías web estándar, dos de las cuales (<a href="/es/docs/Learn/HTML">HTML</a> y <a href="/es/docs/Learn/CSS">CSS</a>) hemos cubierto con mucho más detalle en otras partes del Área de aprendizaje.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>{{Glossary("HTML")}} es el lenguaje de marcado que usamos para estructurar y dar significado a nuestro contenido web, por ejemplo, definiendo párrafos, encabezados y tablas de datos, o insertando imágenes y videos en la página.</li> + <li>{{Glossary("CSS")}} es un lenguaje de reglas de estilo que usamos para aplicar estilo a nuestro contenido HTML, por ejemplo, establecer colores de fondo y tipos de letra, y distribuir nuestro contenido en múltiples columnas.</li> + <li>{{Glossary("JavaScript")}} es un lenguaje de secuencias de comandos que te permite crear contenido de actualización dinámica, controlar multimedia, animar imágenes y prácticamente todo lo demás. (Está bien, no todo, pero es sorprendente lo que puedes lograr con unas pocas líneas de código JavaScript).</li> +</ul> + +<p>Las tres capas se superponen muy bien. Tomemos una etiqueta de texto simple como ejemplo. Podemos marcarla usando HTML para darle estructura y propósito:</p> + +<pre class="brush: html notranslate"><p>Player 1: Chris</p></pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13422/just-html.png" style="height: 28px; width: 108px;"></p> + +<p>Luego, podemos agregar algo de CSS a la mezcla para que se vea bien:</p> + +<pre class="brush: css notranslate">p { + font-family: 'helvetica neue', helvetica, sans-serif; + letter-spacing: 1px; + text-transform: uppercase; + text-align: center; + border: 2px solid rgba(0,0,200,0.6); + background: rgba(0,0,200,0.3); + color: rgba(0,0,200,0.6); + box-shadow: 1px 1px 2px rgba(0,0,200,0.4); + border-radius: 10px; + padding: 3px 10px; + display: inline-block; + cursor: pointer; +}</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13424/html-and-css.png" style="height: 48px; width: 187px;"></p> + +<p>Y finalmente, podemos agregar algo de JavaScript para implementar un comportamiento dinámico:</p> + +<pre class="brush: js notranslate">const para = document.querySelector('p'); + +para.addEventListener('click', updateName); + +function updateName() { + let name = prompt('Enter a new name'); + para.textContent = 'Player 1: ' + name; +} +</pre> + +<p>{{ EmbedLiveSample('A_high-level_definition', '100%', 80, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>Intenta hacer clic en esta última versión de la etiqueta de texto para ver qué sucede (ten en cuenta también que puedes encontrar esta demostración en GitHub — ¡consulta el <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">código fuente</a> o <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">ejecútalo en vivo</a>)!</p> + +<p>JavaScript puede hacer mucho más que eso — exploremos qué con más detalle.</p> + +<h2 id="Entonces_¿qué_puede_hacer_realmente">Entonces, ¿qué puede hacer realmente?</h2> + +<p>El núcleo del lenguaje JavaScript de lado del cliente consta de algunas características de programación comunes que te permiten hacer cosas como:</p> + +<ul> + <li>Almacenar valores útiles dentro de variables. En el ejemplo anterior, por ejemplo, pedimos que ingreses un nuevo nombre y luego almacenamos ese nombre en una variable llamada <code>name</code>.</li> + <li>Operaciones sobre fragmentos de texto (conocidas como "cadenas" (<code>strings</code>) en programación). En el ejemplo anterior, tomamos la cadena "<code>Player1</code>:" y la unimos a la variable <code>name</code> para crear la etiqueta de texto completa, p. ej. ''<code>Player1: Chris</code>".</li> + <li>Y ejecuta código en respuesta a ciertos eventos que ocurren en una página web. Usamos un evento {{Event("click")}} en nuestro ejemplo anterior para detectar cuándo se hace clic en el botón y luego ejecutar el código que actualiza la etiqueta de texto.</li> + <li>¡Y mucho más!</li> +</ul> + +<p>Sin embargo, lo que aún es más emocionante es la funcionalidad construida sobre el lenguaje JavaScript de lado del cliente. Las denominadas <strong>interfaces de programación de aplicaciones</strong> (<strong>API</strong>) te proporcionan superpoderes adicionales para utilizar en tu código JavaScript.</p> + +<p>Las API son conjuntos de bloques de construcción de código listos para usar que permiten a un desarrollador implementar programas que de otro modo serían difíciles o imposibles de implementar. Hacen lo mismo para la programación que los kits de muebles prefabricados para la construcción de viviendas — es mucho más fácil tomar paneles precortados y atornillarlos para hacer una estantería que elaborar el diseño tú mismo, que ir y encontrar la madera correcta, cortar todos los paneles del tamaño y la forma correctos, buscar los tornillos del tamaño correcto y <em>luego</em> júntalos para hacer una estantería.</p> + +<p>Generalmente se dividen en dos categorías.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p> + +<p>Las <strong>APIs del navegador</strong> están integradas en tu navegador web y pueden exponer datos del entorno informático circundante o realizar tareas complejas y útiles. Por ejemplo:</p> + +<ul> + <li>La {{domxref("Document_Object_Model", " API del DOM (<code>Document Object Model</code>)")}} te permite manipular HTML y CSS, crear, eliminar y cambiar el HTML, aplicar dinámicamente nuevos estilos a tu página, etc. Cada vez que ves aparecer una ventana emergente en una página, o se muestra algún nuevo contenido (como vimos anteriormente en nuestra sencilla demostración), por ejemplo, ese es el DOM en acción.</li> + <li>La {{domxref("Geolocalization", "API de Geolocalización")}} recupera información geográfica. Así es como <a href="https://www.google.com/maps">Google Maps</a> puede encontrar tu ubicación y trazarla en un mapa.</li> + <li>Las APIs {{domxref("Canvas_API", "Canvas")}} y {{domxref("WebGL_API", "WebGL")}} te permiten crear gráficos animados en 2D y 3D. Las personas están haciendo cosas increíbles con estas tecnologías web — consulta <a href="https://www.chromeexperiments.com">Experimentos de Chrome</a> y <a href="http://webglsamples.org/">webglsamples</a>.</li> + <li><a href="https://developer.mozilla.org/es/Apps/Fundamentals/Audio_and_video_delivery">APIs de audio y video</a> como {{domxref("HTMLMediaElement")}} y {{domxref("WebRTC API", "WebRTC")}} te permiten hacer cosas realmente interesantes con multimedia, como reproducir audio y video directamente en una página web, o tomar video de tu cámara web y mostrarlo en la computadora de otra persona (prueba nuestra sencilla <a href="http://chrisdavidmills.github.io/snapshot/">demostración instantánea</a> para hacerte una idea).</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Muchas de las demostraciones anteriores no funcionarán en un navegador antiguo — al experimentar, es una buena idea utilizar un navegador moderno como Firefox, Chrome, Edge u Opera para ejecutar tu código. Deberás considerar las <a href="/es/docs/Learn/Tools_and_testing/Cross_browser_testing">pruebas en varios navegadores</a> con más detalle cuando estés más cerca de entregar el código de producción (es decir, código real que usarán los clientes reales).</p> +</div> + +<p>Las <strong>APIs de terceros</strong> no están integradas en el navegador de forma predeterminada y, por lo general, debes obtener su código e información de algún lugar de la Web. Por ejemplo:</p> + +<ul> + <li>La <a href="https://dev.twitter.com/overview/documentation">API de Twitter</a> te permite hacer cosas como mostrar tus últimos tweets en tu sitio web.</li> + <li>La <a href="https://developers.google.com/maps/">API de Google Maps</a> y la <a href="https://wiki.openstreetmap.org/wiki/API">API de OpenStreetMap</a> te permiten insertar mapas personalizados en tu sitio web y otras funciones similares.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: estas APIs son avanzadas y no cubriremos ninguna de ellas en este módulo. Puedes obtener más información sobre estas en nuestro <a href="/es/docs/Learn/JavaScript/Client-side_web_APIs">módulo de APIs web de lado del cliente</a>.</p> +</div> + +<p>¡También hay mucho más disponible! Sin embargo, no te emociones demasiado todavía. No podrás crear el próximo Facebook, Google Maps o Instagram después de estudiar JavaScript durante 24 horas — hay muchos conceptos básicos que cubrir primero. Y es por eso que estás aquí — ¡sigamos adelante!</p> + +<h2 id="¿Qué_está_haciendo_JavaScript_en_tu_página">¿Qué está haciendo JavaScript en tu página?</h2> + +<p>Aquí, de hecho, comenzaremos a ver algo de código y, mientras lo hacemos, exploraremos lo que realmente sucede cuando ejecutas JavaScript en tu página.</p> + +<p>Recapitulemos brevemente sobre la historia de lo que sucede cuando cargas una página web en un navegador (de lo que hablamos por primera vez en nuestro artículo <a href="/es/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">Cómo funciona CSS</a>). Cuando cargas una página web en tu navegador, estás ejecutando tu código (HTML, CSS y JavaScript) dentro de un entorno de ejecución (la pestaña del navegador). Esto es como una fábrica que toma materias primas (el código) y genera un producto (la página web).</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p> + +<p>Un uso muy común de JavaScript es modificar dinámicamente HTML y CSS para actualizar una interfaz de usuario, a través de la API del modelo de objetos del documento (como se mencionó anteriormente). Ten en cuenta que el código de tus documentos web generalmente se cargan y ejecutan en el orden en que aparece en la página. Si JavaScript se carga e intenta ejecutarse antes de que se hayan cargado el HTML y el CSS al que afecta, pueden producirse errores. Aprenderás formas de evitar esto más adelante en el artículo, en la sección <a href="/es/docs/Learn/JavaScript/First_steps/What_is_JavaScript#Script_loading_strategies">Estrategias de carga de scripts</a>.</p> + +<h3 id="Seguridad_del_navegador">Seguridad del navegador</h3> + +<p>Cada pestaña del navegador tiene su propio depósito separado para ejecutar código (estos depósitos se denominan "entornos de ejecución" en términos técnicos) — esto significa que, en la mayoría de los casos, el código de cada pestaña se ejecuta de forma completamente independiente y el código de una pestaña no puede afectar el código en otra pestaña, o en otro sitio web. Esta es una buena medida de seguridad — si este no fuera el caso, los piratas podrían comenzar a escribir código para robar información de otros sitios web y otras cosas muy malas.</p> + +<div class="note"> +<p><strong>Nota</strong>: Existen formas de enviar código y datos entre diferentes sitios web/pestañas de manera segura, pero estas son técnicas avanzadas que no cubriremos en este curso.</p> +</div> + +<h3 id="Orden_de_ejecución_de_JavaScript">Orden de ejecución de JavaScript</h3> + +<p>Cuando el navegador encuentra un bloque de JavaScript, generalmente lo ejecuta en orden, de arriba a abajo. Esto significa que debes tener cuidado con el orden en el que colocas las cosas. Por ejemplo, volvamos al bloque de JavaScript que vimos en nuestro primer ejemplo:</p> + +<pre class="brush: js notranslate">const para = document.querySelector('p'); + +para.addEventListener('click', updateName); + +function updateName() { + let name = prompt('Enter a new name'); + para.textContent = 'Player 1: ' + name; +}</pre> + +<p>Aquí seleccionamos un párrafo de texto (línea 1), luego adjuntamos un detector de eventos (línea 3) de modo que cuando se hace clic en el párrafo, el bloque de código <code>updateName()</code> (líneas 5-8) se ejecuta. El bloque de código <code>updateName()</code> (estos tipos de bloques de código reutilizables se denominan "funciones") pide al usuario un nuevo nombre y luego inserta ese nombre en el párrafo para actualizar la pantalla.</p> + +<p>Si cambiaras el orden de las dos primeras líneas de código, ya no funcionaría — en su lugar, obtendrías un error en la <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">consola del desarrollador del navegador</a> — <code>TypeError: para is undefined</code>. Esto significa que el objeto <code>para</code> aún no existe, por lo que no podemos agregarle un detector de eventos.</p> + +<div class="note"> +<p><strong>Nota</strong>: Este es un error muy común; debes tener cuidado de que los objetos a los que se hace referencia en tu código existan antes de intentar hacer algo con ellos.</p> +</div> + +<h3 id="Código_interpretado_versus_compilado">Código interpretado versus compilado</h3> + +<p>Es posible que escuches los términos <strong>interpretados</strong> y <strong>compilados</strong> en el contexto de la programación. En los lenguajes interpretados, el código se ejecuta de arriba a abajo y el resultado de ejecutar el código se devuelve inmediatamente. No tienes que transformar el código en una forma diferente antes de que el navegador lo ejecute. El código se recibe en su forma de texto amigable para el programador y se procesa directamente desde allí.</p> + +<p>Los lenguajes compilados, por otro lado, se transforman (compilan) a código máquina antes de que sean ejecutados por la computadora. Por ejemplo, C/C++ se compila a código máquina que luego ejecuta la computadora. El programa se ejecuta desde un formato binario, que se generó a partir del código fuente del programa original.</p> + +<p>JavaScript es un lenguaje de programación interpretado ligero. El navegador web recibe el código JavaScript en su forma de texto original y ejecuta el script a partir de ahí. Desde un punto de vista técnico, la mayoría de los intérpretes de JavaScript modernos utilizan una técnica llamada <strong>compilación en tiempo real</strong> para mejorar el rendimiento; el código fuente de JavaScript se compila en un formato binario más rápido mientras se usa el script, de modo que se pueda ejecutar lo más rápido posible. Sin embargo, JavaScript todavía se considera un lenguaje interpretado, ya que la compilación se maneja en el entorno de ejecución, en lugar de antes.</p> + +<p>Ambos tipos de lenguaje tienen ventajas, pero no las abordaremos ahora.</p> + +<h3 id="Código_de_lado_del_servidor_versus_de_lado_del_cliente">Código de lado del servidor versus de lado del cliente</h3> + +<p>También puedes escuchar los términos código <strong>de lado del servidor</strong> y <strong>de lado del cliente</strong>, especialmente en el contexto del desarrollo web. El código de lado del cliente es un código que se ejecuta en la computadora del usuario — cuando se ve una página web, el código de lado del cliente de la página se descarga, luego se ejecuta y se muestra en el navegador. En este módulo estamos hablando explícitamente de <strong>JavaScript de lado del cliente</strong>.</p> + +<p>El código de lado del servidor, por otro lado, se ejecuta en el servidor, luego sus resultados se descargan y se muestran en el navegador. Ejemplos de lenguajes web populares de lado del servidor incluyen a ¡PHP, Python, Ruby, ASP.NET y... JavaScript! JavaScript también se puede utilizar como lenguaje de lado del servidor, por ejemplo, en el popular entorno Node.js — puedes obtener más información sobre JavaScript de lado del servidor en nuestro tema <a href="/es/docs/Learn/Server-side">Sitios web dinámicos — Programación de lado del servidor</a>.</p> + +<h3 id="Código_dinámico_versus_estático">Código dinámico versus estático</h3> + +<p>La palabra <strong>dinámico</strong> se usa para describir tanto a JavaScript de lado del cliente como a los lenguajes de lado del servidor — se refiere a la capacidad de actualizar la visualización de una página web/aplicación para mostrar diferentes cosas en diferentes circunstancias, generando contenido nuevo según sea necesario. El código de lado del servidor genera dinámicamente nuevo contenido en el servidor, p. ej. extraer datos de una base de datos, mientras que JavaScript de lado del cliente genera dinámicamente nuevo contenido dentro del navegador del cliente, p. ej. creando una nueva tabla HTML, llenándola con los datos solicitados al servidor y luego mostrando la tabla en una página web que se muestra al usuario. El significado es ligeramente diferente en los dos contextos, pero relacionado, y ambos enfoques (de lado del servidor y de lado del cliente) generalmente funcionan juntos.</p> + +<p>Una página web sin contenido que se actualiza dinámicamente se denomina <strong>estática</strong> — simplemente muestra el mismo contenido todo el tiempo.</p> + +<h2 id="¿Cómo_agregas_JavaScript_a_tu_página">¿Cómo agregas JavaScript a tu página?</h2> + +<p>JavaScript se aplica a tu página HTML de manera similar a CSS. Mientras que CSS usa elementos {{htmlelement("link")}} para aplicar hojas de estilo externas y elementos {{htmlelement("style")}} para aplicar hojas de estilo internas a HTML, JavaScript solo necesita un amigo en el mundo de HTML: el elemento {htmlelement("script")}}. Aprendamos cómo funciona esto.</p> + +<h3 id="JavaScript_interno">JavaScript interno</h3> + +<ol> + <li>En primer lugar, haz una copia local de nuestro archivo de ejemplo <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a>. Guárdalo en un directorio en algún lugar accesible.</li> + <li>Abre el archivo en tu navegador web y en tu editor de texto. Verás que el HTML crea una página web simple que contiene un botón en el que se puede hacer clic.</li> + <li>A continuación, ve a tu editor de texto y agrega lo siguiente en tu <code>head</code>, justo antes de tu etiqueta de cierre <code></head></code>: + <pre class="brush: html notranslate"><script> + + // JavaScript va aquí + +</script></pre> + </li> + <li>Ahora agregaremos algo de JavaScript dentro de nuestro elemento {{htmlelement("script")}} para que la página haga algo más interesante — agrega el siguiente código justo debajo de la línea "// El código JavaScript va aquí": + <pre class="brush: js notranslate">document.addEventListener("DOMContentLoaded", function() { + function createParagraph() { + let para = document.createElement('p'); + para.textContent = 'You clicked the button!'; + document.body.appendChild(para); + } + + const buttons = document.querySelectorAll('button'); + + for(let i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); + } +});</pre> + </li> + <li>Guarda tu archivo y actualiza el navegador — ahora deberías ver que cuando haces clic en el botón, se genera un nuevo párrafo y se coloca debajo.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Si tu ejemplo no parece funcionar, sigue los pasos nuevamente y verifica que hiciste todo bien. ¿Guardaste tu copia local del código de inicio como un archivo <code>.html</code>? ¿Agregaste tu elemento {{htmlelement("script")}} justo antes de la etiqueta <code></head></code>? ¿Ingresaste el JavaScript exactamente como se muestra? <strong>JavaScript distingue entre mayúsculas y minúsculas y es muy exigente, por lo que debes ingresar la sintaxis exactamente como se muestra; de lo contrario, es posible que no funcione.</strong></p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Puedes ver esta versión en GitHub como <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> o (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">verla en vivo también</a>).</p> +</div> + +<h3 id="JavaScript_externo">JavaScript externo</h3> + +<p>Esto funciona muy bien, pero ¿y si quisiéramos poner nuestro JavaScript en un archivo externo? Exploremos esto ahora.</p> + +<ol> + <li>Primero, crea un nuevo archivo en el mismo directorio que tu archivo HTML del ejemplo. Como nombre ponle <code>script.js</code>; asegúrate de que el nombre tenga la extensión <code>.js</code>, ya que así es como se reconoce como JavaScript.</li> + <li>Reemplaza tu elemento {{htmlelement("script")}} actual con lo siguiente: + <pre class="brush: html notranslate"><script src="script.js" defer></script></pre> + </li> + <li>Dentro de <code>script.js</code>, agrega el siguiente script: + <pre class="brush: js notranslate">function createParagraph() { + let para = document.createElement('p'); + para.textContent = 'You clicked the button!'; + document.body.appendChild(para); +} + +const buttons = document.querySelectorAll('button'); + +for(let i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); +}</pre> + </li> + <li>Guarda y actualiza tu navegador, ¡y deberías ver lo mismo! Funciona igual, pero ahora tenemos nuestro JavaScript en un archivo externo. Por lo general, esto es bueno en términos de organización de tu código y para hacerlo reutilizable en varios archivos HTML. Además, el HTML es más fácil de leer sin grandes trozos de script en él.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Puedes ver esta versión en GitHub como <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> y <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">verla en vivo también</a>).</p> +</div> + +<h3 id="Controladores_de_JavaScript_en_línea">Controladores de JavaScript en línea</h3> + +<p>Ten en cuenta que a veces te encontrarás con fragmentos de código JavaScript real dentro de HTML. Podría verse algo similar a esto:</p> + +<div id="inline_js_example"> +<pre class="brush: js example-bad notranslate">function createParagraph() { + let para = document.createElement('p'); + para.textContent = 'You clicked the button!'; + document.body.appendChild(para); +}</pre> + +<pre class="brush: html example-bad notranslate"><button onclick="createParagraph()">Click me!</button></pre> +</div> + +<p>Puedes probar esta versión de nuestra demostración a continuación.</p> + +<p>{{ EmbedLiveSample('inline_js_example', '100%', 150, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>Esta demostración tiene exactamente la misma funcionalidad que en las dos secciones anteriores, excepto que el elemento {{htmlelement("button")}} incluye un controlador <code>onclick</code> en línea para que la función se ejecute cuando se presiona el botón .</p> + +<p><strong>Sin embargo, no hagas esto</strong>. Es una mala práctica contaminar tu HTML con JavaScript, y es ineficiente; tendrías que incluir el atributo <code>onclick="createParagraph()"</code> en cada botón al que desees que se aplique JavaScript.</p> + +<p>El uso de una construcción de JavaScript pura te permite seleccionar todos los botones usando una instrucción. El código que usamos anteriormente para cumplir este propósito se ve así:</p> + +<pre class="brush: js notranslate">const buttons = document.querySelectorAll('button'); + +for(let i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); +}</pre> + +<p>Esto puede ser un poco más largo que el atributo <code>onclick</code>, pero funcionará para todos los botones, sin importar cuántos haya en la página, ni cuántos se agreguen o eliminen. No es necesario cambiar el JavaScript.</p> + +<div class="note"> +<p><strong>Nota</strong>: Intenta editar tu versión de <code>apply-javascript.html</code> y agrega algunos botones más en el archivo. Cuando la vuelvas a cargar, deberías encontrar que todos los botones al hacer clic crearán un párrafo. Limpio, ¿eh?</p> +</div> + +<h3 id="Estrategias_para_la_carga_de_scripts">Estrategias para la carga de scripts</h3> + +<p>Hay una serie de problemas relacionados con la carga de los scripts en el momento adecuado. ¡Nada es tan simple como parece! Un problema común es que todo el HTML de una página se carga en el orden en que aparece. Si estás utilizando JavaScript para manipular elementos en la página (o exactamente, el <a href="/es/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model">Modelo de objetos del documento</a>), tu código no funcionará si el JavaScript se carga y procesa antes que el HTML que estás intentando haga algo.</p> + +<p>En los ejemplos de código anteriores, en los ejemplos internos y externos, JavaScript se carga y se ejecuta en el encabezado del documento, antes de analizar el cuerpo HTML. Esto podría causar un error, por lo que hemos utilizado algunas construcciones para solucionarlo.</p> + +<p>En el ejemplo interno, puedes ver esta estructura alrededor del código:</p> + +<pre class="brush: js notranslate">document.addEventListener("DOMContentLoaded", function() { + ... +});</pre> + +<p>Este es un detector de eventos, que escucha el evento "DOMContentLoaded" del navegador, lo cual significa que el cuerpo HTML está completamente cargado y analizado. El JavaScript dentro de este bloque no se ejecutará hasta que se active ese evento, por lo que se evita el error (<a href="/es/docs/Learn/JavaScript/Building_blocks/Events">aprenderás sobre los eventos</a> más adelante en el curso).</p> + +<p>En el ejemplo externo, usamos una función de JavaScript más moderno para resolver el problema, el atributo <code>defer</code>, que le dice al navegador que continúe descargando el contenido HTML una vez que se ha alcanzado la etiqueta del elemento <code><script></code>.</p> + +<pre class="brush: js notranslate"><script src="script.js" defer></script></pre> + +<p>En este caso, tanto el script como el HTML se cargarán simultáneamente y el código funcionará.</p> + +<div class="note"> +<p><strong>Nota</strong>: En el caso externo, no necesitamos usar el evento <code>DOMContentLoaded</code> porque el atributo <code>defer</code> nos resolvió el problema. No usamos la solución <code>defer</code> para el ejemplo interno de JavaScript porque <code>defer</code> solo funciona para scripts externos.</p> +</div> + +<p>Una solución pasada de moda a este problema solía ser colocar tu elemento <code>script</code> justo en la parte inferior del cuerpo (por ejemplo, justo antes de la etiqueta <code></body></code>), para que se cargara después de haber procesado todo el HTML. El problema con esta solución es que la carga/procesamiento del script está completamente bloqueado hasta que se haya cargado el DOM HTML. En sitios muy grandes con mucho JavaScript, esto puede causar un importante problema de rendimiento y ralentizar tu sitio.</p> + +<h4 id="async_y_defer"><code>async</code> y <code>defer</code></h4> + +<p>En realidad, hay dos modernas características que podemos usar para evitar el problema del bloqueo de <code>script</code>: <code>async</code> y <code>defer</code> (que vimos anteriormente). Veamos la diferencia entre estas dos.</p> + +<p>Los scripts cargados con el atributo <code>async</code> (ve más abajo) descargarán el <code>script</code> sin bloquear el renderizado de la página y lo ejecutará tan pronto como el <code>script</code> se termine de descargar. No tienes garantía de que los <code>script</code>s se ejecuten en un orden específico, solo que no detendrán la visualización del resto de la página. Es mejor usar <code>async</code> cuando los <code>script</code>s de la página se ejecutan de forma independiente y no dependen de ningún otro <code>script</code> de la página.</p> + +<p>Por ejemplo, si tienes los siguientes elementos <code>script</code>:</p> + +<pre class="brush: html notranslate"><script async src="js/vendor/jquery.js"></script> + +<script async src="js/script2.js"></script> + +<script async src="js/script3.js"></script></pre> + +<p>No puedes confiar en el orden en que se cargarán los <code>script</code>s. <code>jquery.js</code> se puede cargar antes o después de <code>script2.js</code> y <code>script3.js</code> y si este es el caso, cualquier función en esos <code>script</code>s dependiendo de <code>jquery</code> producirá un error porque <code>jquery</code> no se definirá en el momento en que se ejecute el <code>script</code>.</p> + +<p><code>async</code> se debe usar cuando tienes un montón de <code>script</code>s en segundo plano para cargar, y solo deseas ponerlos en su lugar lo antes posible. Por ejemplo, tal vez tengas algunos archivos de datos del juego para cargar, que serán necesarios cuando el juego realmente comience, pero por ahora solo deseas continuar mostrando la introducción del juego, los títulos y el lobby, sin que se bloqueen al cargar el <code>script</code>.</p> + +<p>Los <code>script</code>s cargados con el atributo <code>defer</code> (ve a continuación) se ejecutarán en el orden en que aparecen en la página y los ejecutará tan pronto como se descarguen el <code>script</code> y el contenido:</p> + +<pre class="brush: html notranslate"><script defer src="js/vendor/jquery.js"></script> + +<script defer src="js/script2.js"></script> + +<script defer src="js/script3.js"></script></pre> + +<p>Todos los <code>script</code>s con el atributo <code>defer</code> se cargarán en el orden en que aparecen en la página. Entonces, en el segundo ejemplo, podemos estar seguros de que <code>jquery.js</code> se cargará antes que <code>script2.js</code> y <code>script3.js</code> y que <code>script2.js</code> se cargará antes de <code>script3.js</code>. No se ejecutarán hasta que se haya cargado todo el contenido de la página, lo cual es útil si tus <code>script</code>s dependen de que el DOM esté en su lugar (por ejemplo, modifican uno o más elementos de la página).</p> + +<p>Para resumir:</p> + +<ul> + <li><code>async</code> y <code>defer</code> indican al navegador que descargue los <code>script</code>s en un hilo separado, mientras que el resto de la página (el DOM, etc.) se descarga, por lo que los <code>script</code>s no bloquean la carga de la página.</li> + <li>Si tus <code>script</code>s se deben ejecutar inmediatamente y no tienen ninguna dependencia, utiliza <code>async</code>.</li> + <li>Si tus <code>script</code>s necesitan esperar a ser procesados y dependen de otros <code>script</code>s y/o del DOM en su lugar, cárgalos usando <code>defer</code>y coloca tus elementos <code><script></code> correspondientes en el orden que desees que el navegador los ejecute.</li> +</ul> + +<h2 id="Comentarios">Comentarios</h2> + +<p>Al igual que con HTML y CSS, es posible escribir comentarios en tu código JavaScript que el navegador ignorará y que existen simplemente para proporcionar instrucciones a tus compañeros desarrolladores sobre cómo funciona el código (y a ti, si regresas a tu código después de seis meses y no puedes recordar lo que hiciste). Los comentarios son muy útiles y deberías utilizarlos con frecuencia, especialmente para aplicaciones grandes. Hay dos tipos:</p> + +<ul> + <li>Un comentario de una sola línea se escribe después de una doble barra inclinada (//), p. ej. + <pre class="brush: js notranslate">// soy un comentario</pre> + </li> + <li>Se escribe un comentario de varias líneas entre las cadenas /* y */, p. ej. + <pre class="brush: js notranslate">/* + Yo también soy + un comentario +*/</pre> + </li> +</ul> + +<p>Entonces, por ejemplo, podríamos anotar el JavaScript de nuestra última demostración con comentarios como este:</p> + +<pre class="brush: js notranslate">// Función: crea un nuevo párrafo y lo agrega al final del cuerpo HTML. + +function createParagraph() { + let para = document.createElement('p'); + para.textContent = 'You clicked the button!'; + document.body.appendChild(para); +} + +/* + 1. Obtiene referencias de todos los botones de la página en un formato de arreglo. + 2. Recorre todos los botones y agrega un detector de eventos 'click' a cada uno. + + Cuando se presione cualquier botón, se ejecutará la función createParagraph(). +*/ + +const buttons = document.querySelectorAll('button'); + +for (let i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); +}</pre> + +<div class="note"> +<p><strong>Nota</strong>: En general, más comentarios suelen ser mejor que menos, pero debes tener cuidado si agregas muchos comentarios para explicar qué son las variables (los nombres de tus variables tal vez deberían ser más intuitivos), o para explicar operaciones muy simples (tal vez tu código sea demasiado complicado).</p> +</div> + +<h2 id="Resumen">Resumen</h2> + +<p>Así que ahí tienes, tu primer paso en el mundo de JavaScript. Comenzamos solo con teoría, para comenzar a acostumbrarte a por qué usarías JavaScript y qué tipo de cosas puedes hacer con él. En el camino, viste algunos ejemplos de código y aprendiste cómo encaja JavaScript con el resto del código en tu sitio web, entre otras cosas.</p> + +<p>JavaScript puede parecer un poco abrumador en este momento, pero no te preocupes — en este curso, te guiaremos en pasos simples que tendrán sentido en el futuro. En el próximo artículo, <a href="/es/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">nos sumergiremos directamente en lo práctico</a>, lo que te permitirá comenzar directamente y crear tus propios ejemplos de JavaScript.</p> + +<ul> +</ul> + +<p>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="En_este_modulo">En este modulo</h2> + +<ul> + <li><a href="/es/docs/Learn/JavaScript/First_steps/What_is_JavaScript">¿Qué es JavaScript?</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/A_first_splash">Primer contacto con JavaScript</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/What_went_wrong">¿Qué salió mal? Solución de problemas de JavaScript</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Variables">Almacenamiento de la información que necesita — Variables</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Math">Matemáticas básicas en JavaScript — números y operadores</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Strings">Manejo de texto — cadenas en JavaScript</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Useful_string_methods">Métodos de cadena útiles</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Arrays">Arreglos</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Silly_story_generator">Evaluación: Generador de historias tontas</a></li> +</ul> diff --git a/files/es/learn/javascript/first_steps/strings/index.html b/files/es/learn/javascript/first_steps/strings/index.html new file mode 100644 index 0000000000..e86560ae54 --- /dev/null +++ b/files/es/learn/javascript/first_steps/strings/index.html @@ -0,0 +1,299 @@ +--- +title: Manejar texto — cadenas en JavaScript +slug: Learn/JavaScript/First_steps/Strings +tags: + - Artículo + - Cadenas + - Comillas + - Guía + - JavaScript + - Novato + - Principiante + - Union + - Unir + - concatenación + - 'l10n:priority' + - strings +translation_of: Learn/JavaScript/First_steps/Strings +--- +<p id="Manejo_de_texto_—_cadenas_en_JavaScript">{{LearnSidebar}}</p> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary"><span id="result_box" lang="es"><span>A continuación, centraremos nuestra atención en las </span></span>cadenas<span lang="es"><span> de caracteres (<code>string</code>s)</span></span><span lang="es"><span>: así es como se llaman los fragmentos de texto en programación.</span> <span>En este artículo veremos todas las cosas comunes que realmente deberías saber sobre </span></span>cadenas<span lang="es"><span> de caracteres al aprender JavaScript, como crear cadenas, comillas en cadenas y unir cadenas.</span></span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisitos:</th> + <td>Conocimientos básicos de informática, una comprensión básica de HTML y CSS y de lo que es JavaScript.</td> + </tr> + <tr> + <th scope="row">Objectivo:</th> + <td><span id="result_box" lang="es"><span>Familiarizarte con los aspectos básicos de las </span></span>cadenas<span lang="es"><span> de caracteres en JavaScript.</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="El_poder_de_las_palabras"><span class="short_text" id="result_box" lang="es"><span>El poder de las palabras</span></span></h2> + +<p>Las palabras son muy importantes para los humanos — son una parte fundamental de nuestra comunicación. Dado que la Web es un medio en gran parte basado en texto diseñado para permitir a los humanos comunicarse y compartir información, es útil para nosotros tener control sobre las palabras que aparecen en él. {{glossary("HTML")}} proporciona estructura y significado a nuestro texto, {{glossary("CSS")}} nos permite personalizarlo con precisión, y JavaScript contiene una serie de funciones para manipular cadenas, crear mensajes personalizados de bienvenida, mostrar las etiquetas de texto adecuadas cuando sea necesario, organizar los términos en el orden deseado y mucho más.</p> + +<p>Casi todos los programas que hemos mostrado hasta ahora en el curso han involucrado alguna manipulación de cadenas.</p> + +<h2 id="Cadenas_—_las_bases">Cadenas — las bases</h2> + +<p>A primera vista, las cadenas se tratan de forma similar a los números, pero cuando profundizas empiezas a ver diferencias notables. Comencemos ingresando algunas líneas de texto básicas en la consola para familiarizarnos. Te proveeremos de una aquí abajo (también puedes <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">abrir la consola</a> en una pestaña o ventana separada, o usar la <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">consola de desarrollo del navegador</a> si así lo prefieres).</p> + +<div class="hidden"> +<h6 id="Hidden_code">Hidden code</h6> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Consola JavaScript</title> + <style> + * { + box-sizing: border-box; + } + + html { + background-color: #0C323D; + color: #809089; + font-family: monospace; + } + + body { + max-width: 700px; + } + + p { + margin: 0; + width: 1%; + padding: 0 1%; + font-size: 16px; + line-height: 1.5; + float: left; + } + + .input p { + margin-right: 1%; + } + + .output p { + width: 100%; + } + + .input input { + width: 96%; + float: left; + border: none; + font-size: 16px; + line-height: 1.5; + font-family: monospace; + padding: 0; + background: #0C323D; + color: #809089; + } + + div { + clear: both; + } + + </style> + </head> + <body> + + + </body> + + <script> + var geval = eval; + function createInput() { + var inputDiv = document.createElement('div'); + var inputPara = document.createElement('p'); + var inputForm = document.createElement('input'); + + inputDiv.setAttribute('class','input'); + inputPara.textContent = '>'; + inputDiv.appendChild(inputPara); + inputDiv.appendChild(inputForm); + document.body.appendChild(inputDiv); + + if(document.querySelectorAll('div').length > 1) { + inputForm.focus(); + } + + inputForm.addEventListener('change', executeCode); + } + + function executeCode(e) { + try { + var result = geval(e.target.value); + } catch(e) { + var result = 'error — ' + e.message; + } + + var outputDiv = document.createElement('div'); + var outputPara = document.createElement('p'); + + outputDiv.setAttribute('class','output'); + outputPara.textContent = 'Resultado: ' + result; + outputDiv.appendChild(outputPara); + document.body.appendChild(outputDiv); + + e.target.disabled = true; + e.target.parentNode.style.opacity = '0.5'; + + createInput() + } + + createInput(); + + </script> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Creando_una_cadena">Creando una cadena</h3> + +<ol> + <li>Para comenzar, ingresa las siguientes líneas: + <pre class="brush: js notranslate">var string = 'La revolución no será televisada.'; +string;</pre> + Al igual que con los números, declaramos una variable, iniciandola con el valor de una cadena, y luego retornamos dicho valor. La única diferencia es que al escribir una cadena, necesitas envolverla con comillas.</li> + <li>Si no lo haces, u olvidas una de las comillas, obtendrás un error. Intenta ingresando las siguientes líneas: + <pre class="brush: js example-bad notranslate">var malString = Esto es una prueba; +var malString = 'Esto es una prueba; +var malString = Esto es una prueba';</pre> + Estas líneas no funcionan porque el texto sin comillas alrededor es tomado como nombre de una variable, propiedad, palabra reservada, o algo similar. Si el navegador no las encuentra, entonces se recibe un error( ej. "missing ; before statement"). Si el navegador puede ver dónde comienza una cadena, pero no dónde termine, como se indica en la segunda oración, devuelve error (con "unterminated string literal"). Si tu programa devuelve estos errores, revisa desde el inicio que todas tus cadenas posean sus comillas.</li> + <li>Lo siguiente funcionará si previamente definiste la variable <code>string</code> — inténtalo: + <pre class="brush: js notranslate">var maltring = string; +malString;</pre> + <code>malString</code> ahora tiene el mismo valor que <code>string</code>.</li> +</ol> + +<h3 id="Comillas_simples_vs._comillas_dobles">Comillas simples vs. comillas dobles</h3> + +<ol> + <li>En JavaScript, puedes escoger entre comillas simple y dobles para envolver tus cadenas. Ambas funcionarán correctamente: + <pre class="brush: js notranslate">var simp = 'Comillas simples.'; +var dobl = "Comillas dobles."; +simp; +dobl;</pre> + </li> + <li>Hay muy poca diferencia entre las dos, y la que utilices dependerá de tus preferencias personales. Sin embargo, deberías de elegir una y mantenerla; usar diferentes tipos de comillas en el código podría llegar a ser confuso, especialmente si utilizas diferentes comillas en la misma cadena. El siguiente ejemplo devolverá un error: + <pre class="brush: js example-bad notranslate">var badQuotes = 'What on earth?";</pre> + </li> + <li>El navegador pensará que la cadena no se ha cerrado correctamente, porque el otro tipo de cita que no estás usando, puede aparecer en la cadena. Por ejemplo, en estos dos casos su uso es correcto: + <pre class="brush: js notranslate">var sglDbl = 'Would you eat a "fish supper"?'; +var dblSgl = "I'm feeling blue."; +sglDbl; +dblSgl;</pre> + </li> + <li>Sin embargo, no puedes usar el mismo tipo de comillas en el interior de una cadena que ya las tiene en los extremos. Lo siguiente devuelve error, porque confunde al navegador respecto de dónde termina la cadena: + <pre class="brush: js example-bad notranslate">var bigmouth = 'I've got no right to take my place...';</pre> + Lo que nos lleva directamente al siguiente tema.</li> +</ol> + +<h3 id="Escapando_caracteres_en_una_cadena">Escapando caracteres en una cadena</h3> + +<p>Para solucionar nuestro problema anterior, necesitamos "escapar" el asunto de las comillas. Escapar caracteres significa que les hacemos algo para asegurarnos que sean reconocidos como texto, y no parte del código. En JavaScript, colocamos una barra invertida justo antes del caracter. Intenta ésto:</p> + +<pre class="brush: js notranslate">var bigmouth = 'I\'ve got no right to take my place...'; +bigmouth;</pre> + +<p>Ahora funciona correctamente. Puedes escapar otros caracteres de la misma forma, ej. <code>\"</code>, y hay varios códigos más. Ve a <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/String#Escape_notation">Notación de Escape</a> para más detalles.</p> + +<h2 id="Concatenando_cadenas">Concatenando cadenas</h2> + +<ol> + <li>Concatenar es una elegante palabra de la programación que significa: "unir". Para unir cadenas en JavaScript el símbolo de más (+), el mismo operador que usamos para sumar números, pero en este contexto hace algo diferente. Vamos a probar un ejemplo en nuestra consola. + <pre class="brush: js notranslate">var one = 'Hello, '; +var two = 'how are you?'; +var joined = one + two; +joined;</pre> + El resultado de este código es una variable llamada <code>joined</code>, que contiene el valor: "Hello, how are you?" ("Hola, cómo estas?").</li> + <li>En la última instancia del código, unimos dos strings, pero lo puedes hacer con cuantas desees, mientras que incluyas el símbolo de <code>+</code> entre ellas. Prueba esto: + <pre class="brush: js notranslate">var multiple = one + one + one + one + two; +multiple;</pre> + </li> + <li>También puedes usar una combinación de variables y strings reales. Prueba esto: + <pre class="brush: js notranslate">var response = one + 'I am fine — ' + two; +response;</pre> + </li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Cuando ingresas una string real en tu código, entre comillas simples o dobles, se llama <strong>string literal</strong>.</p> +</div> + +<h3 id="La_concatenación_en_contexto">La concatenación en contexto</h3> + +<p>Vamos a revisar la concatenación que usamos en la siguiente acción — veamos este ejemplo ya citado previamente en el curso:</p> + +<pre class="brush: html notranslate"><button>Press me</button></pre> + +<pre class="brush: js notranslate">var button = document.querySelector('button'); + +button.onclick = function() { + var name = prompt('What is your name?'); + alert('Hello ' + name + ', nice to see you!'); +}</pre> + +<p>{{ EmbedLiveSample('Concatenation_in_context', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>Aquí estamos usando una función {{domxref("Window.prompt()", "Window.prompt()")}} en la línea 4, que le pide al usuario la respuesta a una pregunta, através de un cuadro emergente (también llamado popup) y luego, almacenará el dato dentro de una variable dada — en este caso llamada <code>name (nombre)</code>. Luego, en la línea 5, usamos una función {{domxref("Window.alert()", "Window.alert()")}} para mostrar otra ventana emergente que contiene una cadena que hemos unido de la concatenación de dos string literales y la variable <code>name (</code>nombre). </p> + +<h3 id="Números_versus_cadenas">Números versus cadenas</h3> + +<ol> + <li>Entonces, ¿qué sucede cuando intentamos agregar (o concatenar) un string y un número? Vamos a probar en la consola: + <pre class="brush: js notranslate">'Front ' + 242; +</pre> + Podrías esperar que diera un error, pero funciona a la perfección. Tratar de representar un string como un número no tiene sentido, pero representar un número como string si que lo tiene, así que el navegador convierte el número en una string y las muestra juntas. </li> + <li>Incluso puedes hacer esto con dos números — puedes forar un número para que se convierta en una string envolviéndolo entre comillas. Prueba lo siguiente (estamos utilizando el operador <code>typeof</code> para verificar si la variable es un número o una cadena): + <pre class="brush: js notranslate">var myDate = '19' + '67'; +typeof myDate;</pre> + </li> + <li>Si tienes una variable numérica, que deseas convertir en una string, pero no cambiar de otra forma, o una variable string, que deseas convertir a número, pero no cambiarla de otra forma, puedes usar las siguientes construcciones: + <ul> + <li>El objecto {{jsxref("Number")}} convertirá cualquier cosa que se le pase en un número, si puede. Intenta lo siguiente: + <pre class="brush: js notranslate">var myString = '123'; +var myNum = Number(myString); +typeof myNum;</pre> + </li> + <li>Por otra parte, cada número tiene un método llamado <code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Number/toString">toString()</a></code> que convertirá el equivalente en una string. Prueba esto: + <pre class="brush: js notranslate">var myNum = 123; +var myString = myNum.toString(); +typeof myString;</pre> + </li> + </ul> + Estas construcciones pueden ser muy útiles en ciertas situaciones. Por ejemplo, si un usuario introduce un número en un campo de texto de un formulario, será un string. Sin embargo, si quieres añadir ese número a algo, lo necesitas convertir a número, así que puedes usar esta construcción para hacerlo. Hicimos exactamente esto en el ejercicio de ejemplo: Juego adivina el número en la línea 54 (<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L54">Juego Adivina el número, en la línea 54</a>).</li> +</ol> + +<h2 id="Prueba_tus_habilidades_2">Prueba tus habilidades</h2> + +<p id="Prueba_tus_habilidades">Llegaste al final de este artículo, pero ¿puédes recordar la información más importante? Puedes encontrar algunas pruebas para verificar que has comprendido esta información antes de seguir avanzando — Ve <a href="/es/docs/Learn/JavaScript/First_steps/Test_your_skills:_Strings">Prueba tus habilidades: Strings</a>. Ten en cuenta que esto requiere conocimiento del próximo artículo, por lo que podrías leerlo antes.</p> + +<h2 id="Conclusión">Conclusión</h2> + +<p>Esto es lo básico que debes saber sobre las cadenas o <code>string</code>s en JavaScript. En el siguiente artículo desarrollaremos más sobre esto, observando métodos de construcción de strings disponibles en JavaScript y cómo podemos usarlos para manipular nuestras cadenas de la forma que queremos. </p> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li><a href="/es/docs/Learn/JavaScript/First_steps/What_is_JavaScript">¿Qué es JavaScript?</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/A_first_splash">Un primer acercamiento a JavaScript</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/What_went_wrong">¿Qué salió mal? Corrigiendo JavaScript</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Variables">Guardando la información que necesitas— Variables</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Math">Matemáticas básicas en JavaScript — números y operadores</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Strings">Manejo de texto — cadenas en JavaScript</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Useful_string_methods">Métodos útiles para el manejo de cadenas</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Arrays">Arreglos</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Silly_story_generator" rel="nofollow">Evaluaciones: Generador de historias absurdas</a></li> +</ul> diff --git a/files/es/learn/javascript/first_steps/test_your_skills_colon__math/index.html b/files/es/learn/javascript/first_steps/test_your_skills_colon__math/index.html new file mode 100644 index 0000000000..e02f502bce --- /dev/null +++ b/files/es/learn/javascript/first_steps/test_your_skills_colon__math/index.html @@ -0,0 +1,91 @@ +--- +title: 'Comprueba tus habilidades: Matematicas.' +slug: 'Learn/JavaScript/First_steps/Test_your_skills:_Math' +tags: + - JavaScript + - Matemática + - Principiante + - Prueba tus habilidades + - aprende +translation_of: 'Learn/JavaScript/First_steps/Test_your_skills:_Math' +--- +<div>{{learnsidebar}}</div> + +<p>El objetivo de esta prueba de habilidad es conocer si has entendido nuestra clase sobre el articulo <a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Matematica basica en JavaScript — números y operadores</a>.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Puedes probar soluciones en los editores interactivos a continuación, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, o <a href="https://glitch.com/">Glitch</a> para trabajar en las tareas.</p> + +<p>Si se queda atascado, pídanos ayuda; consulte la sección {{anch ("Evaluación o ayuda adicional")}} en la parte inferior de esta página.</p> + +<p><strong>Nota</strong>: En los ejemplos a continuación, si hay un error en su código, se mostrará en el panel de resultados de la página, para ayudarlo a tratar de averiguar la respuesta (o en la consola JavaScript del navegador, en el caso de la versión descargable).</p> +</div> + +<h2 id="Math_1">Math 1</h2> + +<p>Iniciemos poniendo a prueba sus conocimientos acerca de los operadores matemáticos básicos. Usted tendrá que crear 4 valores númericos, unir los 2 primeros, hacer una resta del cuarto con el tercero y multiplicar los resultados secundarios juntos para obtener un resultado final de 48. Y finalmente, necesita ejecutar una prueba para comprobar si el resultado es un numero par.</p> + +<p>Asi que intente realizar la actualización del código descrito abajo para crear el ejemplo terminado, siguendo estos pasos:</p> + +<ol> + <li>Crea cuatro variables que contengan numeros. Llama a las variables razonablemente.</li> + <li>Agrega las dos primeras variables juntas y guarda el resultado en otra variable.</li> + <li>Subtract the fourth variable from the third and store the result in another variable.</li> + <li>Multiply the results from the last two steps together, storing the result in a variable called <code>finalResult</code>. The product should be 48. If it isn't, you'll have to adjust some of the initial input values.</li> + <li>Finally, write a calculation that checks whether <code>finalResult</code> is an even number. Store the result in a variable called <code>evenOddResult</code>.</li> +</ol> + +<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/math/math1.html", '100%', 400)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/math/math1-download.html">Download the starting point for this task</a> to work in your own editor or in an online editor.</p> +</div> + +<h2 id="Math_2">Math 2</h2> + +<p>In the second task you are already provided with two calculations, with the results stored in the variables <code>result</code> and <code>result2</code>. But these results aren't what we want; you'll need to take the calculations and change them to give us what we want.</p> + +<p>What do we want? After multiplying the two results together and formatting the result to 2 decimal places, the final result should be 10.42.</p> + +<p>Try updating the live code below to recreate the finished example, following these steps:</p> + +<ol> + <li>Write a calculation that multiples <code>result</code> and <code>result2</code> together and assigns the result back to <code>result</code>. This will require assignment shorthand.</li> + <li>Write a line of code that takes result and formats it to 2 decimal places, storing the result of this in a variable called <code>finalResult</code>.</li> + <li>Check the data type of <code>finalResult</code> using <code>typeof</code>; you'll probably see that it is actually of <code>string</code> type! Write a line of code that converts it to a <code>number</code> type, storing the result in a variable called <code>finalNumber</code>.</li> + <li>The value of <code>finalNumber</code> needs to be <code>10.42</code>. Go back and update the original calculations you were provided with so that they give this final result. Don't update the numbers or the operators.</li> +</ol> + +<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/math/math2.html", '100%', 400)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/math/math2-download.html">Download the starting point for this task</a> to work in your own editor or in an online editor.</p> +</div> + +<h2 id="Math_3">Math 3</h2> + +<p>In the final task for this article, we want you to write some tests. You've got three groups, each consisting of a statement and two variables. For each one, write a test that proves or disproves the statement made. Store the results of those tests in variables called <code>weightComparison</code>, <code>heightComparison</code>, and <code>pwdMatch</code>, respectively.</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/math/math3.html", '100%', 400)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/math/math3-download.html">Download the starting point for this task</a> to work in your own editor or in an online editor.</p> +</div> + +<h2 id="Assessment_or_further_help">Assessment or further help</h2> + +<p>You can practice these examples in the Interactive Editors above.</p> + +<p>If you would like your work assessed, or are stuck and want to ask for help:</p> + +<ol> + <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. You can write the code yourself, or use the starting point files linked to in the above sections.</li> + <li>Write a post asking for assessment and/or help at the <a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a>. Your post should include: + <ul> + <li>A descriptive title such as "Assessment wanted for Math 1 skill test".</li> + <li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li> + <li>A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li> + <li>A link to the actual task or assessment page, so we can find the question you want help with.</li> + </ul> + </li> +</ol> diff --git a/files/es/learn/javascript/first_steps/test_your_skills_colon__variables/index.html b/files/es/learn/javascript/first_steps/test_your_skills_colon__variables/index.html new file mode 100644 index 0000000000..c242ff5ccc --- /dev/null +++ b/files/es/learn/javascript/first_steps/test_your_skills_colon__variables/index.html @@ -0,0 +1,84 @@ +--- +title: '¡Pon a prueba tus habilidades!: Variables' +slug: 'Learn/JavaScript/First_steps/Test_your_skills:_variables' +tags: + - JavaScript + - Principiante + - Tus habilidades con texto + - Variables + - aprende +translation_of: 'Learn/JavaScript/First_steps/Test_your_skills:_variables' +--- +<div>{{learnsidebar}}</div> + +<p>El objetivo de esta prueba de habilidad es evaluar si has entendido nuestro artículo <a href="/es/docs/Learn/JavaScript/First_steps/Variables">Almacenando la información que necesitas — Variables</a>.</p> + +<div class="blockIndicator"> +<p><strong>Nota</strong>: Puedes probar las soluciones en los editores interactivos a continuación, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, o <a href="https://glitch.com/">Glitch</a> para trabajar en las tareas.<br> + <br> + Si te atascas, pídenos ayuda; consulta la sección {{anch('Evaluación o ayuda adicional')}} en la parte inferior de esta página.</p> +</div> + +<div class="blockIndicator"> +<p><strong>Nota</strong>: En los siguientes ejemplos, si hay un error en tu código, se mostrará en el panel de resultados de la página, para ayudarte a intentar averiguar la respuesta (o en la consola JavaScript del navegador, en el caso de la versión descargable).</p> +</div> + +<h2 id="Variables_1">Variables 1</h2> + +<p>En esta tarea queremos que:</p> + +<ul> + <li>Declares una variable llamada <code>myName</code>.</li> + <li>Inicies <code>myName</code> con un valor adecuado, en una línea separada (puedes usar tu nombre real o algo más).</li> + <li>Declares una variable llamada <code>myAge</code> la inicies con un valor, en la misma línea.</li> +</ul> + +<p>Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:</p> + +<p>{{EmbedGHLiveSample('learning-area/javascript/introduction-to-js-1/tasks/variables/variables1.html', '100%', 400)}}</p> + +<div class="blockIndicator"> +<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/variables/variables1-download.html">Descarga el punto de partida de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p> +</div> + +<h2 id="Variables_2">Variables 2</h2> + +<p>En esta tarea, debes agregar una nueva línea para corregir el valor almacenado en la variable <code>myName</code> existente a tu propio nombre.</p> + +<p>Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:</p> + +<p>{{EmbedGHLiveSample('learning-area/javascript/introduction-to-js-1/tasks/variables/variables2.html', '100%', 400)}}</p> + +<div class="blockIndicator"> +<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/variables/variables2-download.html">Descarga el punto de partida de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p> +</div> + +<h2 id="Variables_3">Variables 3</h2> + +<p>La tarea final por ahora — en este caso, se te proporciona un código existente, que tiene dos errores presentes. El panel de resultados debería mostrar el nombre <code>Chris</code> y una declaración sobre la edad que tendrá Chris dentro de 20 años. ¿Cómo puedes solucionar el problema y corregir la salida?</p> + +<p>Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:</p> + +<p>{{EmbedGHLiveSample('learning-area/javascript/introduction-to-js-1/tasks/variables/variables3.html', '100%', 400)}}</p> + +<div class="blockIndicator"> +<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/variables/variables3-download.html">Descarga el punto de partida de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p> +</div> + +<h2 id="Evaluación_o_ayuda_adicional">Evaluación o ayuda adicional</h2> + +<p>Puedes practicar estos ejemplos en los editores interactivos anteriores.</p> + +<p>Si deseas que se evalúe tu trabajo o estás atascado y deseas pedir ayuda:</p> + +<ol> + <li>Coloca tu trabajo en un editor que se pueda compartir en línea, como <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> o <a href="https://glitch.com/">Glitch</a>. Puedes escribir el código tú mismo o utilizar los archivos de punto de partida vinculados en las secciones anteriores.</li> + <li>Escribe una publicación solicitando evaluación y/o ayuda en la <a href="https://discourse.mozilla.org/c/mdn/learn">categoría de aprendizaje del foro de discusión de MDN</a>. Tu publicación debe incluir: + <ul> + <li>Un título descriptivo como Evaluación deseada para la prueba de habilidad de Variables 1.</li> + <li>Detalles de lo que ya has probado y lo que te gustaría que hiciéramos, p. ej. si estás atascado y necesitas ayuda, o quieres una evaluación.</li> + <li>Un enlace al ejemplo que deseas evaluar o con el que necesitas ayuda, en un editor que se pueda compartir en línea (como se mencionó en el paso 1 anterior). Esta es una buena práctica para empezar — es muy difícil ayudar a alguien con un problema de codificación si no puedes ver su código.</li> + <li>Un enlace a la página de la tarea o evaluación real, para que podamos encontrar la pregunta con la que deseas ayuda.</li> + </ul> + </li> +</ol> diff --git a/files/es/learn/javascript/first_steps/useful_string_methods/index.html b/files/es/learn/javascript/first_steps/useful_string_methods/index.html new file mode 100644 index 0000000000..09c6cfea08 --- /dev/null +++ b/files/es/learn/javascript/first_steps/useful_string_methods/index.html @@ -0,0 +1,718 @@ +--- +title: Métodos útiles con cadenas +slug: Learn/JavaScript/First_steps/Useful_string_methods +tags: + - Artículo + - Cadenas + - JavaScript + - Métodos + - Principiante +translation_of: Learn/JavaScript/First_steps/Useful_string_methods +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">Ahora que hemos analizado los conceptos básicos de las cadenas, aumentemos la velocidad y comencemos a pensar qué operaciones útiles podemos hacer en cadenas con métodos integados, como encontrar la longitud de una cadena de texto, unir y dividir cadenas, sustituyendo un caracter de una cadena por otro, y más.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisitos:</th> + <td>Conocimientos básicos de informática, una comprensión básica de HTML y CSS, una comprensión de lo que es JavaScript.</td> + </tr> + <tr> + <th scope="row">Objectivo:</th> + <td>Comprender que las cadenas son objetos y aprender a usar algunos de los métodos básicos disponibles en esos objetos para manipular cadenas.</td> + </tr> + </tbody> +</table> + +<h2 id="Cadenas_como_objetos">Cadenas como objetos</h2> + +<p id="Useful_string_methods">Ya lo dijimos antes, y lo diremos de nuevo — <em>todo</em> es un objeto en JavaScript. Cuando creas una cadena, por ejemplo, usando:</p> + +<pre class="brush: js notranslate">let string = 'This is my string';</pre> + +<p>Tu variable se convierte en una instancia del objeto cadena y, como resultado, tiene una gran cantidad de propiedades y métodos disponibles. Puedes ver esto si vas a la página de objeto {{jsxref("String")}} y miras la lista al costado de la página.</p> + +<p><strong>Ahora, antes de que tu cerebro comience a derretirse, ¡no te preocupes!</strong> Realmente no necesitas saber acerca de la mayoría de estos principios en tu viaje de aprendizaje. Pero hay algunos que posiblemente utilizarás con bastante frecuencia así como veremos aquí. </p> + +<p>Ingresemos algunos ejemplos en una nueva consola. A continuación, proporcionamos uno (también puedes <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">abrir esta consola</a> en una ventana o pestaña por separado, o si prefieres usar la <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">consola de desarrolladores del navegador</a>).</p> + +<div class="hidden"> +<h6 id="Hidden_code">Hidden code</h6> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>JavaScript console</title> + <style> + * { + box-sizing: border-box; + } + + html { + background-color: #0C323D; + color: #809089; + font-family: monospace; + } + + body { + max-width: 700px; + } + + p { + margin: 0; + width: 1%; + padding: 0 1%; + font-size: 16px; + line-height: 1.5; + float: left; + } + + .input p { + margin-right: 1%; + } + + .output p { + width: 100%; + } + + .input input { + width: 96%; + float: left; + border: none; + font-size: 16px; + line-height: 1.5; + font-family: monospace; + padding: 0; + background: #0C323D; + color: #809089; + } + + div { + clear: both; + } + + </style> + </head> + <body> + + + </body> + + <script> + var geval = eval; + function createInput() { + var inputDiv = document.createElement('div'); + var inputPara = document.createElement('p'); + var inputForm = document.createElement('input'); + + inputDiv.setAttribute('class', 'input'); + inputPara.textContent = '>'; + inputDiv.appendChild(inputPara); + inputDiv.appendChild(inputForm); + document.body.appendChild(inputDiv); + + inputForm.addEventListener('change', executeCode); + } + + function executeCode(e) { + try { + var result = geval(e.target.value); + } catch(e) { + var result = 'error — ' + e.message; + } + + var outputDiv = document.createElement('div'); + var outputPara = document.createElement('p'); + + outputDiv.setAttribute('class','output'); + outputPara.textContent = 'Result: ' + result; + outputDiv.appendChild(outputPara); + document.body.appendChild(outputDiv); + + e.target.disabled = true; + e.target.parentNode.style.opacity = '0.5'; + + createInput() + } + + createInput(); + + </script> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Encontrar_la_longitud_de_un_cadena">Encontrar la longitud de un cadena</h3> + +<p>Esto es fácil — simplemente usa la propiedad {{jsxref("String.prototype.length", "length")}} . Intenta ingresar las siguientes líneas:</p> + +<pre class="brush: js notranslate">let browserType = 'mozilla'; +browserType.length;</pre> + +<p>Esto debería devolver el número 7, porque "mozilla" tiene 7 caracteres. Esto es útil por muchas razones; por ejemplo, es posible que quieras buscar las longitudes de una serie de nombres para que puedas mostrarlos en orden de su longitud, o dejar que un usuario sepa que un nombre ingresado en un campo de formulario es demasiado largo o si tiene una longitud determinada.</p> + +<h3 id="Extrayendo_un_específico_caracter_de_la_cadena">Extrayendo un específico caracter de la cadena</h3> + +<p>En una nota relacionada, puedes devolver cualquier carácter de una cadena usando la <strong>notación de corchetes</strong> — esto significa que incluyes corchetes (<code>[]</code>) al final del nombre de tu variable. Dentro de los corchetes, incluye el número del caracter que deseas extraer, así que, por ejemplo, para extraer la primera letra harías esto:</p> + +<pre class="brush: js notranslate">browserType[0];</pre> + +<p>¡ Las computadoras cuentan desde 0, no desde 1! Para extraer el último caracter de <em>cualquier</em> cadena, podríamos usar la siguiente línea, combinando esta técnica con la propiedad <code>length</code> que vimos arriba:</p> + +<pre class="brush: js notranslate">browserType[browserType.length-1];</pre> + +<p>El largo de "mozilla" es 7, pero es porque el contador comienza en 0, la posición del caracter es 6, por lo tanto, necesitamos <code>length-1</code>. Puedes usar esto para, por ejemplo, encontrar la primera letra de una serie de cadenas y ordenarlas alfabéticamente.</p> + +<h3 id="Encontrar_una_subcadena_dentro_de_una_cadena_y_extraerla">Encontrar una subcadena dentro de una cadena y extraerla</h3> + +<ol> + <li>Algunas veces querrás encontrar si hay una cadena más pequeña dentro de una más grande (generalmente decimos <em>si una subcadena está presente dentro de una cadena</em>). Esto se puede hacer utilizando el método {{jsxref("String.prototype.indexOf()", "indexOf()")}}, que toma un único <a href="https://developer.mozilla.org/en-US/docs/Glossary/Parameter">parámetro</a> — la subcadena que deseas buscar. Intenta esto: + + <pre class="brush: js notranslate">browserType.indexOf('zilla');</pre> + Esto nos dá un resultado de 2, porque la subcadena "zilla" comienza en la posición 2 (0, 1, 2 — por tanto 3 caracteres en total) dentro de "mozilla". Tal código podría usarse para filtrar cadena. Por ejemplo, podemos tener una lista de direcciones web y solo queremos imprimir las que contienen "mozilla".</li> +</ol> + +<ol start="2"> + <li>Esto se puede hacer de otra manera, que posiblemente sea aún más efectiva. Intenta lo siguiente: + <pre class="brush: js notranslate">browserType.indexOf('vanilla');</pre> + Esto debería darte un resultado de <code>-1</code> — Esto se devuelve cuando la subcadena, en este caso 'vanilla', no es encontrada en la cadena principal.<br> + <br> + Puedes usar esto para encontrar todas las instancias de las cadenas que <strong>no</strong> contengan la subcadena 'mozilla', o <strong>hacerlo,</strong> si usas el operador de negación, como se muestra a continuación. Podrías hacer algo como esto: + + <pre class="brush: js notranslate">if(browserType.indexOf('mozilla') !== -1) { + // do stuff with the string +}</pre> + </li> + <li>Cuando sabes donde comienza una subcadena dentro de una cadena, y sabes hasta cuál caracter deseas que termine, puede usarse {{jsxref("String.prototype.slice()", "slice()")}} para extraerla. Prueba lo siguiente: + <pre class="brush: js notranslate">browserType.slice(0,3);</pre> + Esto devuelve "moz" — El primer parámetro es la posición del caracter en la que comenzar a extraer, y el segundo parámetro es la posición del caracter posterior al último a ser extraído. Por lo tanto, el corte ocurre desde la primera posición en adelante, pero excluyendo la última posición. En este ejemplo, dado que el índice inicial es 0, el segundo parámetro es igual a la longitud de la cadena que se devuelve.<br> + </li> + <li>Además, si sabes que deseas extraer todos los caracteres restantes de una cadena después de cierto caracter, ¡no necesitas incluir el segundo parámetro! En cambio, solo necesitas incluir la posición del caracter desde donde deseas extraer los caracteres restante en la cadena. Prueba lo siguiente: + <pre class="brush: js notranslate">browserType.slice(2);</pre> + Esto devuelve "zilla" — debido a que la posición del caracter de 2 es la letra z, y como no incluiste un segundo parámetro, la subcadena que que se devolvío fué el resto de los caracteres de la cadena. </li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: El segundo parámetro de <code>slice()</code> es opcional: si no lo incluyes, el corte termina al final de la cadena original. Hay otras opciones también; estudia la página {{jsxref("String.prototype.slice()", "slice()")}} para ver que mas puedes averiguar.</p> +</div> + +<h3 id="Cambiando_todo_a_mayúscula_o_minúscula">Cambiando todo a mayúscula o minúscula</h3> + +<p>Los métodos de cadena {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} y {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} toman una cadena y convierten todos sus caracteres a mayúscula o minúscula, respectivamente. Esto puede ser útil, por ejemplo, si deseas normalizar todos los datos ingresados por el usuario antes de almacenarlos en una base de datos.</p> + +<p>Intentemos ingresar las siguentes líneas para ver que sucede:</p> + +<pre class="brush: js notranslate">let radData = 'My NaMe Is MuD'; +radData.toLowerCase(); +radData.toUpperCase();</pre> + +<h3 id="Actualizando_partes_de_una_cadena">Actualizando partes de una cadena</h3> + +<p>En una cadena puedes reemplazar una subcadena por otra usando el método {{jsxref("String.prototype.replace()", "replace()")}}. Esto funciona de manera muy simple a un nivel básico, aunque hay algunas cosas avanzadas que puedes hacer con él en lo que todavía no entraremos.</p> + +<p>Toma dos parámetros — la cadena que deseas reemplazar, y la cadena con la que deseas reemplazarla. Prueba este ejemplo:</p> + +<pre class="brush: js notranslate">browserType.replace('moz','van');</pre> + +<p>Ten en cuenta que para obtener realmente el valor actualizado reflejado en la variable <code>browserType</code> en un programa real, debes establecer que el valor de la variable sea el resultado de la operación; No solo actualiza el valor de la subcadena automáticamente. Así que tendrías que escribir esto: <code>browserType = browserType.replace('moz','van');</code></p> + +<h2 id="Ejemplos_de_aprendizaje_activo">Ejemplos de aprendizaje activo</h2> + +<p>En esta sección, conseguiremos que intentes escribir algún código de manipulación de cadenas. En cada ejercicio a continuación, tenemos una matríz de cadenas y un bucle que procesa cada valor en la matríz y lo muestra en una lista con viñetas. No es necesario que comprendas matrices y bucles en este mismo momento — estos se explicarán en futuros artículos. Todo lo que necesitas hacer en cada caso es escribir el código que dará de salida a las cadenas en el formato que las queremos.</p> + +<p>Cada ejemplo viene con un botón de "Reset" , Que puedes utilizar para reestablecer el código si cometes un error y no puedes hacerlo funcionar nuevamente, y un botón "Show solution" que puedes presionar para ver una posible respuesta si te encuentras realmente atorado.</p> + +<h3 id="Filtrado_de_mensajes_de_saludo">Filtrado de mensajes de saludo</h3> + +<p>En el primer ejercicio, comenzamos de manera simple — tenemos una matríz de mensajes de tarjetas de felicitación, pero queremos ordenarlos para que aparezcan solo los mensajes de Navidad. Queremos que completes un test condicional dentro de la estructura <code>if( ... )</code>, para comprobar cada cadena y solo imprimirla en la lista si es un mensaje de Navidad.</p> + +<ol> + <li>Primero piensa en cómo puedes probar si el mensaje en cada caso es un mensaje de Navidad. ¿Qué cadena está presente en todos esos mensajes, y qué método podrías usar para comprobar si está presente?</li> + <li>A continuación, deberá escribir un test condicional de la forma <em>operand1 operator operand2</em>. ¿Es lo que está a la izquierda igual a lo que está a la derecha? O en este caso, ¿el método llamado a la izquierda devuelve el resultado a la derecha?</li> + <li>Sugerencia: En este caso, probablemente sea más útil comprobar si la llamada al método <em>no es</em> igual a un determinado resultado.</li> +</ol> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 125px;"> + +<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: 290px; width: 95%"> +var list = document.querySelector('.output ul'); +list.innerHTML = ''; +var greetings = ['Happy Birthday!', + 'Merry Christmas my love', + 'A happy Christmas to all the family', + 'You\'re all I want for Christmas', + 'Get well soon']; + +for (var i = 0; i < greetings.length; i++) { + var input = greetings[i]; + // Your conditional test needs to go inside the parentheses + // in the line below, replacing what's currently there + if (greetings[i]) { + var result = input; + var listItem = document.createElement('li'); + listItem.textContent = result; + list.appendChild(listItem); + } +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +</pre> + +<pre class="brush: css notranslate">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; +}</pre> + +<pre class="brush: js notranslate">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 list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar greetings = [\'Happy Birthday!\',\n \'Merry Christmas my love\',\n \'A happy Christmas to all the family\',\n \'You\\\'re all I want for Christmas\',\n \'Get well soon\'];\n\nfor(var i = 0; i < greetings.length; i++) {\n var input = greetings[i];\n if(greetings[i].indexOf(\'Christmas\') !== -1) {\n var result = input;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n }\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(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', '100%', 590, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Corrección_de_mayúscula">Corrección de mayúscula</h3> + +<p>En este ejercicio tenemos los nombres de las ciudades del Reino Unido, Pero las mayúsculas estan completamente desordenadas. Queremos que los cambies para que estén en minúscula, a excepción de la primera letra. Una buena manera de hacerlo es:</p> + +<ol> + <li>Convierte la totalidad de la cadena contenida en la variable <code>input</code> a minúsculas y guárdalas en una nueva variable.</li> + <li>Toma la primera letra de la cadena en esta nueva variable y guárdala en otra variable.</li> + <li>Usando esta última variable como una subcadena, reemplaza la primera letra de la cadena en minúscula con la subcadena en mayúscula. Almacena el resultado de este procedimiento de reemplazo en otra nueva variable.</li> + <li>Cambia el valor de la variable <code>result</code> a igual al resultado final. en vez de <code>input</code>.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Una pista — los parámetros de los métodos de cadena no tienen que ser literales de cadenas; también pueden ser variables, o incluso variables con un método invocados en ellas.</p> +</div> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code 2</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 125px;"> + +<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: 250px; width: 95%"> +var list = document.querySelector('.output ul'); +list.innerHTML = ''; +var cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL']; +for(var i = 0; i < cities.length; i++) { + var input = cities[i]; + // write your code just below here + + var result = input; + var listItem = document.createElement('li'); + listItem.textContent = result; + list.appendChild(listItem); +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +</pre> + +<pre class="brush: css notranslate">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; +}</pre> + +<pre class="brush: js notranslate">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 list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];\n\nfor(var i = 0; i < cities.length; i++) {\n var input = cities[i];\n var lower = input.toLowerCase();\n var firstLetter = lower.slice(0,1);\n var capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());\n var result = capitalized;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n\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(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', '100%', 550, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Creando_nuevas_cadenas_de_partes_viejas">Creando nuevas cadenas de partes viejas</h3> + +<p>En este último ejercicio, la matríz contiene un conjunto de cadenas que contienen información sobre estaciones de tren en el Norte de Inglaterra. Las cadenas son elementos de datos que contienen el código de estación de tres letras, seguidos de más datos legibles por máquina, seguidos de un punto y coma, seguidos por el nombre de la estación legible por humanos. Por ejemplo:</p> + +<pre class="notranslate">MAN675847583748sjt567654;Manchester Piccadilly</pre> + +<p>Queremos extraer el código y el nombre de la estación, y juntarlos en una cadena con la siguiente estructura:</p> + +<pre class="notranslate">MAN: Manchester Piccadilly</pre> + +<p>Recomendamos hacerlo así:</p> + +<ol> + <li>Extrae las tres letras del código de estación y almacénalo en una nueva variable.</li> + <li>Encuentra el número de índice de caracter del punto y coma.</li> + <li>Extrae el nombre de la estación legible por humanos utilizando el número de índice de caracter del punto y coma a modo de referencia y guardalo en una nueva variable.</li> + <li>Concatenar las dos nuevas variables y un literal de cadena para hacer la cadena final.</li> + <li>Cambia el valor de la variable de <code>result</code> a igual a la cadena final, no a <code>input</code>.</li> +</ol> + +<div class="hidden"> +<h6 id="Playable_code_3">Playable code 3</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 125px;"> + +<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: 285px; width: 95%"> +var list = document.querySelector('.output ul'); +list.innerHTML = ''; +var stations = ['MAN675847583748sjt567654;Manchester Piccadilly', + 'GNF576746573fhdg4737dh4;Greenfield', + 'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street', + 'SYB4f65hf75f736463;Stalybridge', + 'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield']; + +for (var i = 0; i < stations.length; i++) { + var input = stations[i]; + // write your code just below here + + var result = input; + var listItem = document.createElement('li'); + listItem.textContent = result; + list.appendChild(listItem); +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +</pre> + +<pre class="brush: css notranslate">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; +} +</pre> + +<pre class="brush: js notranslate">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 list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',\n \'GNF576746573fhdg4737dh4;Greenfield\',\n \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',\n \'SYB4f65hf75f736463;Stalybridge\',\n \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];\n\nfor(var i = 0; i < stations.length; i++) {\n var input = stations[i];\n var code = input.slice(0,3);\n var semiC = input.indexOf(\';\');\n var name = input.slice(semiC + 1);\n var result = code + \': \' + name;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\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(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', '100%', 585, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Conclusión">Conclusión</h2> + +<p>No puedes negar el hecho de que ser capaz de manejar palablas y oraciones en la programación es muy importante — especialmente en JavaScript, ya que los sitios web tratan sobre la comunicación con las personas. Este artículo te ha proporcionado los conceptos básicos que necesitas saber sobre la manipulación de cadenas por ahora. Esto debería servirte bien a medida que abordas temas más complejos en el futuro. A continuación, vamos a ver el último tipo importante de datos en el que necesitamos enfocarnos en el corto plazo — matrices.</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Qu%C3%A9_es_JavaScript">¿Qué es JavaScript?</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/A_first_splash">Un primer acercamiento a JavaScript</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/What_went_wrong">¿Qué salió mal? Corrigiendo JavaScript</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Variables">Guardando la información que necesitas— Variables</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Matem%C3%A1ticas">Matemáticas básicas en JavaScript — números y operadores</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Strings">Manejo de texto — cadenas en JavaScript</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Useful_string_methods">Métodos útiles para el manejo de cadenas</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Arrays">Arreglos</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Silly_story_generator" rel="nofollow">Evaluaciones: Generador de historias absurdas</a></li> +</ul> diff --git a/files/es/learn/javascript/first_steps/variables/index.html b/files/es/learn/javascript/first_steps/variables/index.html new file mode 100644 index 0000000000..728ad187aa --- /dev/null +++ b/files/es/learn/javascript/first_steps/variables/index.html @@ -0,0 +1,340 @@ +--- +title: Almacenando la información que necesitas - Variables +slug: Learn/JavaScript/First_steps/Variables +tags: + - Arreglos + - Booleanos + - Booleans + - JavaScript + - Numeros + - Objetos + - Variables + - cadenas de texto + - 'l10n:priority' + - strings +translation_of: Learn/JavaScript/First_steps/Variables +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">Después de leer los últimos artículos, deberías saber qué es JavaScript, qué puede hacer por ti, cómo usarlo junto con otras tecnologías web y cómo se ven sus características principales desde un alto nivel. En este artículo, llegaremos a los conceptos básicos reales, y veremos cómo trabajar con los bloques de construcción más básicos de JavaScript — Variables.</p> + +<table class="learn-box"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Conocimientos básicos de informática, comprensión básica de HTML y CSS, comprensión de lo que es JavaScript.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Familiarizarte con los conceptos básicos de las variables de JavaScript.</td> + </tr> + </tbody> +</table> + +<h2 id="Herramientas_que_necesitas">Herramientas que necesitas</h2> + +<p>A lo largo de este artículo, se te pedirá que escribas líneas de código para probar tu comprensión del contenido. Si estás utilizando un navegador de escritorio, el mejor lugar para escribir tu código de ejemplo es la consola JavaScript de tu navegador (consulta <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">¿Qué son las herramientas para el desarrollador del navegador?</a> para obtener más información sobre cómo acceder a esta herramienta).</p> + +<h2 id="¿Qué_es_una_variable">¿Qué es una variable?</h2> + +<p>Una variable es un contenedor para un valor, como un número que podríamos usar en una suma, o una cadena que podríamos usar como parte de una oración. Pero una cosa especial acerca de las variables es que los valores que contienen pueden cambiar. Veamos un sencillo ejemplo:</p> + +<pre class="brush: html notranslate"><button>Presióname</button></pre> + +<pre class="brush: js notranslate">const button = document.querySelector('button'); + +button.onclick = function() { + let name = prompt('¿Cuál es tu nombre?'); + alert('¡Hola ' + name + ', encantado de verte!'); +}</pre> + +<p>{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>En este ejemplo, al presionar el botón se ejecutan un par de líneas de código. La primera línea muestra un cuadro en la pantalla que pide al lector que ingrese su nombre y luego almacena el valor en una variable. La segunda línea muestra un mensaje de bienvenida que incluye su nombre, tomado del valor de la variable.</p> + +<p>Para entender por qué esto es tan útil, pensemos en cómo escribiríamos este ejemplo sin usar una variable. Terminaría luciendo algo como esto:</p> + +<pre class="example-bad notranslate">let name = prompt('¿Cuál es tu nombre?'); + +if (name === 'Adam') { + alert('¡Hola Adam, encantado de verte!'); +} else if (name === 'Alan') { + alert('¡Hola Alan, encantado de verte!'); +} else if (name === 'Bella') { + alert('¡Hola Bella, encantado de verte!'); +} else if (name === 'Bianca') { + alert('¡Hola Bianca, encantado de verte!'); +} else if (name === 'Chris') { + alert('¡Hola Chris, encantado de verte!'); +} + +// ... y así sucesivamente ...</pre> + +<p>Es posible que (¡todavía!) no comprendas completamente la sintaxis que estamos usando, Pero deberías poder hacerte una idea — si no tuviéramos variables disponibles, tendríamos que implementar un bloque de código gigante que verificara cuál era el nombre ingresado, y luego muestra el mensaje apropiado para cualquier nombre. Obviamente, esto realmente es ineficiente (el código es mucho más grande, incluso para solo cinco opciones), y simplemente no funcionaría — no podrías almacenar todas las opciones posibles.</p> + +<p>Las variables simplemente tienen sentido y, a medida que aprendas más sobre JavaScript, comenzarán a convertirse en una segunda naturaleza.</p> + +<p>Otra cosa especial acerca de las variables es que pueden contener casi cualquier cosa, no solo cadenas y números. Las variables también pueden contener datos complejos e incluso funciones completas para hacer cosas asombrosas. Aprenderás más sobre esto a medida que avances.</p> + +<div class="note"> +<p><strong>Nota</strong>: Decimos que las variables contienen valores. Ésta es una importante distinción que debemos reconocer. Las variables no son los valores en sí mismos; son contenedores de valores. Puedes pensar en ellas como pequeñas cajas de cartón en las que puedes guardar cosas.</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13506/boxes.png" style="display: block; height: 436px; margin: 0px auto; width: 1052px;"></p> + +<h2 id="Declarar_una_variable">Declarar una variable</h2> + +<p>Para usar una variable, primero debes crearla — precisamente, a esto lo llamamos declarar la variable. Para hacerlo, escribimos la palabra clave <code>var</code> o <code>let</code> seguida del nombre con el que deseas llamar a tu variable:</p> + +<pre class="brush: js notranslate">let myName; +let myAge;</pre> + +<p>Aquí estamos creando dos variables llamadas <code>myName</code> y <code>myAge</code>. Intenta escribir estas líneas en la consola de tu navegador web. Después de eso, intenta crear una variable (o dos) eligiendo tú su nombre.</p> + +<div class="note"> +<p><strong>Nota</strong>: En JavaScript, todas las instrucciones en el código deben terminar con un punto y coma (<code>;</code>) — tu código puede funcionar correctamente para líneas individuales, pero probablemente no lo hará cuando estés escribiendo varias líneas de código juntas. Trata de adquirir el hábito de incluirlo.</p> +</div> + +<p>Puedes probar si estos valores existen ahora en el entorno de ejecución escribiendo solo el nombre de la variable, p. ej.</p> + +<pre class="brush: js notranslate">myName; +myAge;</pre> + +<p>Actualmente no tienen ningún valor; son contenedores vacíos. Cuando ingreses los nombres de las variables, deberías obtener devuelto un valor <code>undefined</code>. Si no existen, recibirás un mensaje de error; intenta escribir</p> + +<pre class="brush: js notranslate">scoobyDoo;</pre> + +<div class="note"> +<p><strong>Nota</strong>: No confundas una variable que existe pero no tiene un valor definido, con una variable que no existe en absoluto — son cosas muy diferentes. En la analogía de cajas que viste arriba, no existir significaría que no hay una caja (variable) para guardar un valor. Ningún valor definido significaría que HAY una caja, pero no tiene ningún valor dentro de ella.</p> +</div> + +<h2 id="Iniciar_una_variable">Iniciar una variable</h2> + +<p>Una vez que hayas declarado una variable, la puedes iniciar con un valor. Para ello, escribe el nombre de la variable, seguido de un signo igual (<code>=</code>), seguido del valor que deseas darle. Por ejemplo:</p> + +<pre class="brush: js notranslate">myName = 'Chris'; +myAge = 37;</pre> + +<p>Intenta volver a la consola ahora y escribe estas líneas. Deberías ver el valor que le has asignado a la variable devuelto en la consola para confirmarlo, en cada caso. Nuevamente, puedes devolver los valores de tus variables simplemente escribiendo su nombre en la consola; inténtalo nuevamente:</p> + +<pre class="brush: js notranslate">myName; +myAge;</pre> + +<p>Puedes declarar e iniciar una variable al mismo tiempo, así:</p> + +<pre class="brush: js notranslate">let myDog = 'Rover';</pre> + +<p>Esto probablemente es lo que harás la mayor parte del tiempo, ya que es más rápido que realizar las dos acciones en dos líneas separadas.</p> + +<h2 id="Diferencia_entre_var_y_let">Diferencia entre <code>var</code> y <code>let</code></h2> + +<p>En este punto, puedes estar pensando "¿por qué necesitamos dos palabras clave para definir variables? ¿Por qué <code>var</code> <em>y</em> <code>let</code>?".</p> + +<p>Las razones son algo históricas. Cuando se creó JavaScript por primera vez, solo existía <code>var</code>. Esto básicamente funciona bien en la mayoría de los casos, pero tiene algunos problemas en la forma en que trabaja — su diseño a veces puede ser confuso o francamente molesto. Entonces, se creó <code>let</code> en versiones modernas de JavaScript, una nueva palabra clave para crear variables que funciona de manera algo diferente a <code>var</code>, solucionando sus problemas en el proceso.</p> + +<p>A continuación se explican un par de diferencias simples. No abordaremos todas las diferencias ahora, pero comenzarás a descubrirlas a medida que aprendas más sobre JavaScript (si realmente deseas leer sobre ellas ahora, no dudes en consultar {{jsxref("Sentencias/let", "let")}} en nuestra página de referencia.</p> + +<p>Para empezar, si escribes un programa JavaScript de varias líneas que declara e inicia una variable, puedes declarar una variable con <code>var</code> después de iniciarla y seguirá funcionando. Por ejemplo:</p> + +<pre class="brush: js notranslate">myName = 'Chris'; + +function logName() { + console.log(myName); +} + +logName(); + +var myName;</pre> + +<div class="note"> +<p><strong>Nota</strong>: Esto no funcionará al escribir líneas individuales en una consola de JavaScript, solo cuando se ejecutan varias líneas de JavaScript en un documento web.</p> +</div> + +<p>Esto funciona debido a la <strong>elevación</strong> — lee {{jsxref("Sentencias/var", "Elevación de variables", "#Elevación_de_variables")}} para obtener más detalles sobre el tema.</p> + +<p>La elevación (<code>hoisting</code>) ya no funciona con <code>let</code>. Si cambiamos <code>var</code> a <code>let</code> en el ejemplo anterior, fallaría con un error. Esto es bueno — declarar una variable después de iniciarla resulta en un código confuso y más difícil de entender.</p> + +<p>En segundo lugar, cuando usas <code>var</code>, puedes declarar la misma variable tantas veces como desees, pero con <code>let</code> no puedes. Lo siguiente funcionaría:</p> + +<pre class="brush: js notranslate">var myName = 'Chris'; +var myName = 'Bob';</pre> + +<p>Pero lo siguiente arrojaría un error en la segunda línea:</p> + +<pre class="brush: js notranslate">let myName = 'Chris'; +let myName = 'Bob';</pre> + +<p>Tendrías que hacer esto en su lugar:</p> + +<pre class="brush: js notranslate">let myName = 'Chris'; +myName = 'Bob';</pre> + +<p>Nuevamente, esta es una sensata decisión del lenguaje. No hay razón para volver a declarar las variables — solo hace que las cosas sean más confusas.</p> + +<p>Por estas y otras razones, se recomienda utilizar <code>let</code> tanto como sea posible en tu código, en lugar de <code>var</code>. No hay ninguna razón para usar <code>var</code>, a menos que necesites admitir versiones antiguas de Internet Explorer con tu código (no es compatible con <code>let</code> hasta la versión 11; Edge el moderno navegador de Windows admite <code>let</code> perfectamente).</p> + +<h2 id="Actualizar_una_variable">Actualizar una variable</h2> + +<p>Una vez que una variable se ha iniciado con un valor, puedes cambiar (o actualizar) ese valor simplemente dándole un valor diferente. Intenta ingresar las siguientes líneas en tu consola:</p> + +<pre class="brush: js notranslate">myName = 'Bob'; +myAge = 40;</pre> + +<h3 id="Un_consejo_sobre_las_reglas_de_nomenclatura_de_variables">Un consejo sobre las reglas de nomenclatura de variables</h3> + +<p>Puedes llamar a una variable prácticamente como quieras, pero existen limitaciones. En general, debes limitarte a usar caracteres latinos (0-9, a-z, A-Z) y el caracter de subrayado.</p> + +<ul> + <li>No debes usar otros caracteres porque pueden causar errores o ser difíciles de entender para una audiencia internacional.</li> + <li>No use guiones bajos al comienzo de los nombres de las variables — esto se usa en ciertas construcciones de JavaScript para significar cosas específicas, por lo que puede resultar confuso.</li> + <li>No uses números al comienzo de las variables. Esto no está permitido y provoca un error.</li> + <li>Una convención segura a seguir es la llamada <a href="https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms">"minúscula mayúsculas intercaladas"</a>, en la que se juntan varias palabras con minúsculas para la primera palabra completa y luego en mayúsculas las primeras letras de las siguientes palabras. Así lo hemos estado haciendo en nuestros nombres de variables en el artículo hasta ahora.</li> + <li>Haz que los nombres de las variables sean intuitivos, para que describan los datos que contienen. No uses solo letras/números o frases grandes y largas.</li> + <li>Las variables distinguen entre mayúsculas y minúsculas — por lo tanto <code>myage</code> es una variable diferente de <code>myAge</code>.</li> + <li>Un último punto: también debes evitar el uso de palabras reservadas de JavaScript como nombres de variables — con esto, nos referimos a las palabras que componen la sintaxis real de JavaScript. Por lo tanto, no puedes usar palabras como <code>var</code>, <code>function</code>, <code>let</code> y <code>for</code> como nombres de variables. Los navegadores las reconocen como elementos de código diferentes, por lo que obtendrás errores.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Puedes encontrar una lista bastante completa de palabras clave reservadas que debes evitar en {{jsxref("Gramática_léxica", "Gramática léxica — Palabras clave", "#Palabras_clave")}}.</p> +</div> + +<p>Ejemplos de buenos nombres:</p> + +<pre class="example-good notranslate">age +myAge +init +initialColor +finalOutputValue +audio1 +audio2</pre> + +<p>Ejemplos de nombres incorrectos:</p> + +<pre class="example-bad notranslate">1 +a +_12 +myage +MYAGE +var +Document +skjfndskjfnbdskjfb +thisisareallylongstupidvariablenameman</pre> + +<p>Ahora, intenta crear algunas variables más, con la guía anterior en mente.</p> + +<h2 id="Tipo_de_las_variables">Tipo de las variables</h2> + +<p>Hay algunos tipos de datos diferentes que podemos almacenar en variables. En esta sección, los describiremos brevemente, luego, en artículos futuros, aprenderás más detalles.</p> + +<p>Hasta ahora hemos analizado los dos primeros, pero hay otros.</p> + +<h3 id="Números">Números</h3> + +<p>Puedes almacenar números en variables, ya sea números enteros como 30 (también llamados enteros — "<code>integer</code>") o números decimales como 2.456 (también llamados números flotantes o de coma flotante — "<code>number</code>"). No es necesario declarar el tipo de las variables en JavaScript, a diferencia de otros lenguajes de programación. Cuando le das a una variable un valor numérico, no incluye comillas:</p> + +<pre class="brush: js notranslate">let myAge = 17;</pre> + +<h3 id="Cadenas_de_caracteres_Strings">Cadenas de caracteres (<code>String</code>s)</h3> + +<p>Las <code>string</code>s (cadenas) son piezas de texto. Cuando le das a una variable un valor de cadena, debes encerrarlo entre comillas simples o dobles; de lo contrario, JavaScript intenta interpretarlo como otro nombre de variable.</p> + +<pre class="brush: js notranslate">let dolphinGoodbye = 'Hasta luego y gracias por todos los peces';</pre> + +<h3 id="Booleanos">Booleanos</h3> + +<p>Los booleanos son valores verdadero/falso — pueden tener dos valores, <code>true</code> o <code>false</code>. Estos, generalmente se utilizan para probar una condición, después de lo cual se ejecuta el código según corresponda. Así, por ejemplo, un caso simple sería:</p> + +<pre class="brush: js notranslate">let iAmAlive = true;</pre> + +<p>Mientras que en realidad se usaría más así:</p> + +<pre class="brush: js notranslate">let test = 6 < 3;</pre> + +<p>Aquí se está usando el operador "menor que" (<code><</code>) para probar si 6 es menor que 3. Como era de esperar, devuelve <code>false</code>, ¡porque 6 no es menor que 3! Aprenderás mucho más sobre estos operadores más adelante en el curso.</p> + +<h3 id="Arreglos">Arreglos</h3> + +<p>Un arreglo es un objeto único que contiene múltiples valores encerrados entre corchetes y separados por comas. Intenta ingresar las siguientes líneas en tu consola:</p> + +<pre class="brush: js notranslate">let myNameArray = ['Chris', 'Bob', 'Jim']; +let myNumberArray = [10, 15, 40];</pre> + +<p>Una vez que se definen estos arreglos, puedes acceder a cada valor por su ubicación dentro del arreglo. Prueba estas líneas:</p> + +<pre class="brush: js notranslate">myNameArray[0]; // debería devolver 'Chris' +myNumberArray[2]; // debe devolver 40</pre> + +<p>Los corchetes especifican un valor de índice correspondiente a la posición del valor que deseas devolver. Posiblemente hayas notado que los arreglos en JavaScript tienen índice cero: el primer elemento está en el índice 0.</p> + +<p>Aprenderás mucho más sobre los arreglos en <a href="/es/docs/Learn/JavaScript/First_steps/Arrays">un futuro artículo</a>.</p> + +<h3 id="Objetos">Objetos</h3> + +<p>En programación, un objeto es una estructura de código que modela un objeto de la vida real. Puedes tener un objeto simple que represente una caja y contenga información sobre su ancho, largo y alto, o podrías tener un objeto que represente a una persona y contenga datos sobre su nombre, estatura, peso, qué idioma habla, cómo saludarlo, y más.</p> + +<p>Intenta ingresar la siguiente línea en tu consola:</p> + +<pre class="brush: js notranslate">let dog = { name : 'Spot', breed : 'Dalmatian' };</pre> + +<p>Para recuperar la información almacenada en el objeto, puedes utilizar la siguiente sintaxis:</p> + +<pre class="brush: js notranslate">dog.name</pre> + +<p>Por ahora, no veremos más objetos. Puedes obtener más información sobre ellos en <a href="/es/docs/Learn/JavaScript/Objects">un futuro módulo</a>.</p> + +<h2 id="Tipado_dinámico">Tipado dinámico</h2> + +<p>JavaScript es un "lenguaje tipado dinámicamente", lo cual significa que, a diferencia de otros lenguajes, no es necesario especificar qué tipo de datos contendrá una variable (números, cadenas, arreglos, etc.).</p> + +<p>Por ejemplo, si declaras una variable y le das un valor entre comillas, el navegador trata a la variable como una cadena (<code>string</code>):</p> + +<pre class="brush: js notranslate">let myString = 'Hello';</pre> + +<p>Incluso si el valor contiene números, sigue siendo una cadena, así que ten cuidado:</p> + +<pre class="brush: js notranslate">let myNumber = '500'; // Vaya, esto sigue siendo una cadena +typeof myNumber; +myNumber = 500; // mucho mejor — ahora este es un número +typeof myNumber;</pre> + +<p>Intenta ingresar las cuatro líneas anteriores en tu consola una por una y ve cuáles son los resultados. Notarás que estamos usando un operador especial llamado {{jsxref("Operadores/typeof", "typeof")}} — esto devuelve el tipo de datos de la variable que escribes después. La primera vez que se llama, debe devolver <code>string</code>, ya que en ese punto la variable <code>myNumber</code> contiene una cadena, <code>'500'</code>. Échale un vistazo y ve qué devuelve la segunda vez que lo llamas.</p> + +<h2 id="Constantes_en_JavaScript">Constantes en JavaScript</h2> + +<p>Muchos lenguajes de programación tienen el concepto de una <em>constante</em> — un valor que, una vez declarado no se puede cambiar. Hay muchas razones por las que querrías hacer esto, desde la seguridad (si un script de un tercero cambia dichos valores, podría causar problemas) hasta la depuración y la comprensión del código (es más difícil cambiar accidentalmente valores que no se deben cambiar y estropear cosas claras).</p> + +<p>En los primeros días de JavaScript, las constantes no existían. En JavaScript moderno, tenemos la palabra clave <code>const</code>, que nos permite almacenar valores que nunca se pueden cambiar:</p> + +<pre class="brush: js notranslate">const daysInWeek = 7<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number">; +const hoursInDay = 24;</span></span></span></span></pre> + +<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number"><code>const</code> funciona exactamente de la misma manera que <code>let</code>, excepto que a <code>const</code> no le puedes dar un nuevo valor. En el siguiente ejemplo, la segunda línea arrojará un error:</span></span></span></span></p> + +<pre class="brush: js notranslate">const daysInWeek = 7<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number">; +daysInWeek = 8;</span></span></span></span></pre> + +<h2 id="¡Pon_a_prueba_tus_habilidades!">¡Pon a prueba tus habilidades!</h2> + +<p>Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Puedes encontrar más pruebas para verificar que has retenido esta información antes de continuar — consulta <a href="/es/docs/Learn/JavaScript/First_steps/Test_your_skills:_variables">Pon a prueba tus habilidades: variables</a>.</p> + +<h2 id="Resumen">Resumen</h2> + +<p>A estas alturas, deberías saber bastante sobre las variables de JavaScript y cómo crearlas. En el próximo artículo, nos centraremos en los números con más detalle, y veremos cómo hacer matemáticas básicas en JavaScript.</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Maths", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li><a href="/es/docs/Learn/JavaScript/First_steps/What_is_JavaScript">¿Qué es JavaScript?</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/A_first_splash">Un primer acercamiento a JavaScript</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/What_went_wrong">¿Qué salió mal? Solución de problemas de JavaScript</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Variables">Almacenar la información que necesitas — Variables</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Math">Matemáticas básicas en JavaScript — números y operadores</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Strings">Manejo de texto — cadenas en JavaScript</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Useful_string_methods">Útiles métodos de cadena</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Arrays">Arreglos</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Silly_story_generator">Evaluación: Generador de historias absurdas</a></li> +</ul> diff --git a/files/es/learn/javascript/first_steps/what_went_wrong/index.html b/files/es/learn/javascript/first_steps/what_went_wrong/index.html new file mode 100644 index 0000000000..af36c20852 --- /dev/null +++ b/files/es/learn/javascript/first_steps/what_went_wrong/index.html @@ -0,0 +1,268 @@ +--- +title: ¿Qué ha salido mal? Corrigiendo JavaScript +slug: Learn/JavaScript/First_steps/What_went_wrong +tags: + - Aprender + - Artículo + - CodingScripting + - Debugging + - Depurando + - Error + - Herramientas de Desarrollador + - JavaScript + - Novato + - Principiante + - Tutorial + - console.log + - depurar + - 'l10n:priority' +translation_of: Learn/JavaScript/First_steps/What_went_wrong +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">Cuando construiste el juego "Adivina el número" en el artículo anterior, es posible que hayas descubierto que no funcionó. Tranquilo — este artículo tiene como objetivo evitar que te rasques la cabeza por este tipo de problemas brindándote algunos consejos sobre cómo encontrar y corregir errores en programas JavaScript.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Conocimientos básicos de informática, comprensión básica de HTML y CSS, comprensión de lo que es JavaScript.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Para ganar habilidad y confianza para comenzar a solucionar problemas en tu propio código.</td> + </tr> + </tbody> +</table> + +<h2 id="Tipos_de_errores">Tipos de errores</h2> + +<p>En general, cuando haces algo mal en el código, hay dos tipos principales de errores con los que te encontrarás:</p> + +<ul> + <li><strong>Errores de sintaxis</strong>: estos son errores de ortografía en tu código que provocan que tu programa no se ejecute en absoluto, o que deje de funcionar a mitad del camino — por lo general, también te proporcionarán algunos mensajes de error. Normalmente no es tan difícil corregirlos, ¡siempre y cuando estés familiarizado con las herramientas adecuadas y sepas qué significan los mensajes de error!</li> + <li><strong>Errores lógicos</strong>: Estos son errores en los que la sintaxis realmente es correcta pero el código no hace lo que pretendías, lo cual significa que el programa se ejecuta pero da resultados incorrectos. A menudo, estos son más difíciles de arreglar que los errores sintácticos, ya que generalmente no hay un mensaje de error que te pueda orientar hacia la fuente del error.</li> +</ul> + +<p>Bueno, tampoco es <em>así de simple</em> — a medida que profundices hay algunas otras diferencias. Pero las clasificaciones anteriores funcionarán en esta temprana etapa de tu carrera. Veremos ambos tipos en el futuro.</p> + +<h2 id="Un_ejemplo_erróneo">Un ejemplo erróneo</h2> + +<p>Para empezar, regresemos a nuestro juego de adivinan el número — excepto que esta vez vamos a explorar una versión que tiene algunos errores insertados deliberadamente. Ve a GitHub y haz una copia local de <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">number-game-errors.html</a> (puedes verlo <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">en vivo aquí</a>).</p> + +<ol> + <li>Para comenzar, abre la copia local dentro de tu editor de texto favorito y tu navegador.</li> + <li>Intenta jugarlo — notarás que cuando presionas el botón "Enviar respuesta", ¡no funciona!</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: ¡Posiblemente tengas tu propia versión del ejemplo del juego que no funciona, y quizás la quieras arreglar! Aún así nos gustaría que en el artículo trabajes con nuestra versión, para que puedas aprender las técnicas que estamos enseñando. Después puedes tratar de arreglar tu ejemplo.</p> +</div> + +<p>En este punto, consultemos la consola del desarrollador para ver si podemos ver algún informe de error de sintaxis y luego tratar de solucionarlo. Abajo aprenderás cómo.</p> + +<h2 id="Solucionar_errores_de_sintaxis">Solucionar errores de sintaxis</h2> + +<p>Anteriormente en este curso, hicimos que escribieras algunos comandos JavaScript simples en la <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">consola JavaScript de las herramientas para desarrolladores</a> (si no recuerdas cómo abrirla en tu navegador, sigue el enlace anterior para descubrirlo). Lo más útil es que la consola te brinda mensajes de error cada vez que ocurre algún error de sintaxis dentro del JavaScript que alimenta al motor JavaScript del navegador. Ahora vayamos a cazar.</p> + +<ol> + <li>Ve a la pestaña dónde tienes abierto <code>number-game-errors.html</code> y abre tu consola JavaScript. Deberías ver un mensaje de error con las siguientes líneas: <img alt="" src="https://mdn.mozillademos.org/files/13496/not-a-function.png" style="display: block; margin: 0 auto;"></li> + <li>Este es un error bastante fácil de rastrear, y el navegador le brinda varios bits de información útil para ayudarte (la captura de pantalla anterior es de Firefox, pero otros navegadores proporcionan información similar). De izquierda a derecha, tenemos: + <ul> + <li>Una "x" roja para indicar que se trata de un error.</li> + <li>Un mensaje de error para indicar qué salió mal: "TypeError: guessSubmit.addeventListener no es una función"</li> + <li>Un enlace a "Más información" que te lleva a una página de MDN dónde explica detalladamente qué significa este error.</li> + <li>El nombre del archivo JavaScript, que enlaza con la pestaña "Depurador" de las herramientas para desarrolladores. Si sigues este enlace, verás la línea exacta donde se resalta el error.</li> + <li>El número de línea donde está el error y el número de carácter en esa línea donde se detectó el error por primera vez. En este caso, tenemos la línea 86, carácter número 3.</li> + </ul> + </li> + <li>Si miramos la línea 86 en nuestro editor de código, encontraremos esta línea: + <pre class="brush: js notranslate">guessSubmit.addeventListener('click', checkGuess);</pre> + </li> + <li>El mensaje de error dice "<code>guessSubmit.addeventListener no es una función</code>", lo cual significa que el intérprete de JavaScript no reconoce la función que estamos llamando. A menudo, este mensaje de error en realidad significa que hemos escrito algo mal. Si no estás seguro de la ortografía correcta de una parte de la sintaxis, a menudo es bueno buscar la función en MDN. La mejor manera de hacer esto es, en tu navegador favorito, buscar "mdn <em>nombre-de-característica</em>". Aquí hay un atajo para ahorrarte algo de tiempo en esta instancia: <code><a href="/es/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>.</li> + <li>Entonces, al mirar esta página, ¡el error parece ser que hemos escrito mal el nombre de la función!. Recuerda que JavaScript distingue entre mayúsculas y minúsculas, por lo que cualquier pequeña diferencia en la ortografía o en mayúsculas provocará un error. Cambiar <code>addeventListener</code> a <code>addEventListener</code> debería solucionar este problema. Hazlo ahora.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Échale un vistazo a nuestra página de referencia <a href="/es/docs/Web/JavaScript/Reference/Errors/Not_a_function">TypeError: "x" no es una función</a> para obtener más detalles sobre este error.</p> +</div> + +<h3 id="Errores_sintácticos_segunda_ronda">Errores sintácticos, segunda ronda</h3> + +<ol> + <li>Guarda tu página y refréscala, ahora deberías ver que el error ha desaparecido.</li> + <li>Ahora, si intentas ingresar un número y presionas el botón "Enviar respuesta", verás... ¡otro error! <img alt="" src="https://mdn.mozillademos.org/files/13498/variable-is-null.png" style="display: block; margin: 0 auto;"></li> + <li>Esta vez, el error que se informa es "<code>TypeError: lowOrHi es nulo</code>", en la línea 78. + <div class="note"><strong>Nota</strong>: <code><a href="/es/docs/Glossary/Null">Null</a></code> es un valor especial que significa "nada" o "sin valor". Por lo tanto, <code>lowOrHi</code> ha sido declarado e iniciado, pero no con algún valor significativo — no tiene tipo ni valor.</div> + + <div class="note"><strong>Nota</strong>: Este error no apareció tan pronto como se cargó la página porque este error ocurrió dentro de una función (dentro del bloque <code>checkGuess() {...}</code>). Como pronto aprenderás con más detalle en nuestro <a href="/es/docs/Learn/JavaScript/Building_blocks/Functions">artículo de funciones</a>, el código dentro de las funciones se ejecuta en un ámbito separado que el código fuera de las funciones. En este caso, el código no se ejecutó y el error no se lanzó hasta que la función <code>checkGuess()</code> se ejecutó en la línea 86.</div> + </li> + <li>Échale un vistazo a la línea 78 y verás el siguiente código: + <pre class="brush: js notranslate">lowOrHi.textContent = '¡El número es muy grande!';</pre> + </li> + <li>Esta línea está intentando establecer la propiedad <code>textContent</code> de la constante <code>lowOrHi</code> en una cadena de texto, pero no funciona porque <code>lowOrHi</code> no contiene lo que es supone. Veamos por qué es así — intenta buscar otras instancias de <code>lowOrHi</code> en el código. La primera instancia que encontrarás en JavaScript está en la línea 48: + <pre class="brush: js notranslate">const lowOrHi = document.querySelector('lowOrHi');</pre> + </li> + <li>En este punto, estamos intentando hacer que la variable contenga una referencia a un elemento en el HTML del documento. Comprobemos si el valor es <code>null</code> después de ejecutar esta línea. Agrega el siguiente código en la línea 49: + <pre class="brush: js notranslate">console.log(lowOrHi);</pre> + + <div class="note"> + <p><strong>Nota</strong>: <code><a href="/es/docs/Web/API/Console/log">console.log()</a></code> es una función de depuración realmente útil que imprime un valor en la consola. Por lo tanto, imprimirá el valor de <code>lowOrHi</code> en la consola tan pronto como intentemos configurarlo en la línea 48.</p> + </div> + </li> + <li>Guarda y refresca, y ahora deberías ver el resultado de <code>console.log()</code> en tu consola. <img alt="" src="https://mdn.mozillademos.org/files/13494/console-log-output.png" style="display: block; margin: 0 auto;">Efectivamente, el valor de <code>lowOrHi</code>es <code>null</code> en este punto, así que definitivamente hay un problema con la línea 48.</li> + <li>Pensemos en cuál podría ser el problema. La línea 48 está utilizando un método <code><a href="/es/docs/Web/API/Document/querySelector">document.querySelector()</a></code> para obtener una referencia a un elemento seleccionándolo con un selector CSS. Buscando más adelante en nuestro archivo, podemos encontrar el párrafo en cuestión: + <pre class="brush: js notranslate"><p class="lowOrHi"></p></pre> + </li> + <li>Entonces necesitamos un selector de clase aquí, que comienza con un punto (<code>.</code>), pero el selector que se pasa al método <code>querySelector()</code> en la línea 48 no tiene punto. ¡Este podría ser el problema! Intenta cambiar <code>lowOrHi</code> a <code>.lowOrHi</code> en la línea 48.</li> + <li>Ahora guarda y refresca nuevamente, y tu declaración <code>console.log()</code> debería devolver el elemento <code><p></code> que queremos. ¡Uf! ¡Otro error solucionado! Ahora puedes eliminar tu línea <code>console.log()</code>, o mantenerla como referencia más adelante — tu elección.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Consulta nuestra página de referencia <a href="/es/docs/Web/JavaScript/Reference/Errors/Unexpected_type">TypeError: "x" (no) es "y"</a> para obtener más detalles sobre este error.</p> +</div> + +<h3 id="Errores_sintácticos_tercera_ronda">Errores sintácticos, tercera ronda</h3> + +<ol> + <li>Ahora, si intentas jugar de nuevo, deberías tener más éxito — el juego debería funcionar absolutamente bien, hasta que termines el juego, ya sea adivinando el número correcto o porque agotaste los intentos.</li> + <li>En ese momento, el juego vuelve a fallar y lanza el mismo error que obtuvimos al principio: "<code>TypeError: resetButton.addeventListener no es una función</code>". Sin embargo, esta vez aparece como procedente de la línea 94.</li> + <li>Mirando la línea número 94, es fácil ver que hemos cometido el mismo error aquí. Nuevamente, solo necesitamos cambiar <code>addeventListener</code> a <code>.addEventListener</code>. Hazlo ahora.</li> +</ol> + +<h2 id="Un_error_de_lógica">Un error de lógica</h2> + +<p>En este punto, el juego debería trabajar bien, sin embargo, después de jugar varias veces, sin duda notarás que el número "aleatorio" que debes adivinar siempre es 1. ¡Definitivamente no es exactamente como queremos que se desarrolle el juego!</p> + +<p>Obviamente hay un problema en la lógica del juego en alguna parte — el juego no devuelve un error; simplemente no está jugando bien.</p> + +<ol> + <li>Busca la variable <code>randomNumber</code> y las líneas donde se establece primero el número aleatorio. La instancia que almacena el número aleatorio que queremos adivinar al comienzo del juego debe estar alrededor de la línea número 44: + + <pre class="brush: js notranslate">let randomNumber = Math.floor(Math.random()) + 1;</pre> + Y la que genera el número aleatorio antes de cada juego subsiguiente está alrededor de la línea 113:</li> + <li> + <pre class="brush: js notranslate">randomNumber = Math.floor(Math.random()) + 1;</pre> + </li> + <li>Para comprobar si estas líneas son realmente el problema, volvamos a echar mano de nuestra amiga <code>console.log()</code> — inserta la siguiente línea directamente debajo de cada una de las dos líneas anteriores: + <pre class="brush: js notranslate">console.log(randomNumber);</pre> + </li> + <li>Guarda y refresca, luego juega un par de veces — verás que <code>randomNumber</code> es igual a 1 en cada punto en el que se registra en la consola.</li> +</ol> + +<h3 id="Desentrañando_la_lógica">Desentrañando la lógica</h3> + +<p>Para solucionar esto, consideremos cómo está funcionando esta línea. Primero, invocamos a <code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a></code>, que genera un número decimal aleatorio entre 0 y 1, p. ej. 0.5675493843.</p> + +<pre class="brush: js notranslate">Math.random()</pre> + +<p>A continuación, pasamos el resultado de invocar a <code>Math.random()</code> a <code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a></code>, que redondea el número pasado al número entero más cercano. Luego agregamos 1 a ese resultado:</p> + +<pre class="notranslate">Math.floor(Math.random()) + 1</pre> + +<p>Redondear un número decimal aleatorio entre 0 y 1 siempre devolverá 0, por lo que agregarle 1 siempre devolverá 1. Necesitamos multiplicar el número aleatorio por 100 antes de redondearlo hacia abajo. Lo siguiente nos daría un número aleatorio entre 0 y 99:</p> + +<pre class="brush: js notranslate">Math.floor(Math.random()*100);</pre> + +<p>De ahí que queramos sumar 1, para darnos un número aleatorio entre 1 y 100:</p> + +<pre class="brush: js notranslate">Math.floor(Math.random()*100) + 1;</pre> + +<p>Intenta actualizar ambas líneas de esta manera, luego guarda y refresca — ¡el juego ahora debería trabajar como pretendemos!</p> + +<h2 id="Otros_errores_comunes">Otros errores comunes</h2> + +<p>Hay otros errores comunes que encontrarás en tu código. Esta sección destaca la mayoría de ellos.</p> + +<h3 id="SyntaxError_falta_antes_de_la_declaración">SyntaxError: <code>falta ; antes de la declaración</code></h3> + +<p>Este error generalmente significa que has omitido un punto y coma al final de una de sus líneas de código, pero a veces puede ser más críptico. Por ejemplo, si cambiamos esta línea dentro de la función <code>checkGuess()</code>:</p> + +<pre class="brush: js notranslate">var userGuess = Number(guessField.value);</pre> + +<p>a</p> + +<pre class="brush: js notranslate">var userGuess === Number(guessField.value);</pre> + +<p>Lanza este error porque cree que estás intentando hacer algo diferente. Debes asegurarte de no confundir el operador de asignación (<code>=</code>), que establece una variable para que sea igual a un valor — con el operador de igualdad estricta (<code>===</code>), que prueba si un valor es igual a otro y devuelve un resultado <code>true</code>/<code>false</code>.</p> + +<div class="note"> +<p><strong>Nota</strong>: Ve más detalles sobre este error en nuestra página de referencia <a href="/es/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement">SyntaxError: falta ; antes de la declaración</a>.</p> +</div> + +<h3 id="El_programa_siempre_dice_que_has_ganado_independientemente_de_lo_que_hayas_ingresado">El programa siempre dice que has ganado, independientemente de lo que hayas ingresado</h3> + +<p>Este podría ser otro síntoma de confusión entre la asignación y los operadores de igualdad estricta. Por ejemplo, si cambiamos esta línea dentro de <code>checkGuess()</code>:</p> + +<pre class="brush: js notranslate">if (userGuess === randomNumber) {</pre> + +<p>a</p> + +<pre class="brush: js notranslate">if (userGuess = randomNumber) {</pre> + +<p>la prueba siempre devolvería <code>true</code>, haciendo que el programa informe que se ganó el juego. ¡Ten cuidado!</p> + +<h3 id="SyntaxError_falta_después_de_la_lista_de_argumentos">SyntaxError: <code>falta ) después de la lista de argumentos</code></h3> + +<p>Este es bastante simple — generalmente significa que olvidaste colocar el paréntesis de cierre al final de una llamada a una función/método.</p> + +<div class="note"> +<p><strong>Nota</strong>: Ve más detalles sobre este error en nuestra página de referencia <a href="/es/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list">SyntaxError: falta ) después de la lista de argumentos</a>.</p> +</div> + +<h3 id="SyntaxError_falta_después_de_la_propiedad_id">SyntaxError: <code>falta : después de la propiedad id</code></h3> + +<p>Este error generalmente se relaciona con un objeto JavaScript formado incorrectamente, pero en este caso logramos obtenerlo cambiando</p> + +<pre class="brush: js notranslate">function checkGuess() {</pre> + +<p>a</p> + +<pre class="brush: js notranslate">function checkGuess( {</pre> + +<p>Esto ha hecho que el navegador piense que estamos tratando de pasar el contenido de la función a la función como un argumento. ¡Cuidado con esos paréntesis!</p> + +<h3 id="SyntaxError_falta_después_del_cuerpo_de_la_función">SyntaxError: <code>falta } después del cuerpo de la función</code></h3> + +<p>Esto es fácil — generalmente significa que has omitido una de tus llaves de una función o estructura condicional. Obtuvimos este error al eliminar una de las llaves de cierre cerca de la parte inferior de la función <code>checkGuess()</code>.</p> + +<h3 id="SyntaxError_esperaba_expresión_obtuve_string_o_SyntaxError_Cadena_literal_sin_terminar">SyntaxError: <code>esperaba expresión, obtuve '<em>string</em>'</code> o SyntaxError: <code>Cadena literal sin terminar</code></h3> + +<p>Estos errores generalmente significan que has omitido las comillas de apertura o cierre de un valor de cadena. En el primer error anterior, <em>string</em> se reemplazaría con los caracteres inesperados que encontró el navegador en lugar de una comilla al comienzo de una cadena. El segundo error significa que la cadena no se ha terminado con comillas.</p> + +<p>Para todos estos errores, piensa en cómo abordamos los ejemplos que vimos en el tutorial. Cuando surge un error, mira el número de línea que te dan, ve a esa línea y revísala para detectar lo que está mal. Ten en cuenta que el error no necesariamente estará en esa línea, y también que el error podría no ser causado por el mismo problema que mencionamos anteriormente.</p> + +<div class="note"> +<p><strong>Nota</strong>: Obtén más detalles sobre estos errores en nuestras páginas de referencia <a href="/es/docs/Web/JavaScript/Reference/Errors/Unexpected_token">SyntaxError: símbolo inesperado</a> y <a href="/es/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal">SyntaxError: cadena literal sin terminar</a>.</p> +</div> + +<h2 id="Resumen">Resumen</h2> + +<p>Ahí lo tienes, los conceptos básicos para descubrir errores en programas sencillos de JavaScript. No siempre será tan sencillo averiguar qué está mal en tu código, pero al menos esto te ahorrará algunas horas de sueño y te permitirá progresar un poco más rápido cuando las cosas no salgan bien, especialmente en las primeras etapas de tu viaje de aprendizaje.</p> + +<h2 id="Ve_también">Ve también</h2> + +<div> +<ul> + <li>Hay muchos otros tipos de errores que no se enumeran aquí; estamos compilando una referencia que explica lo que significan en detalle; consulta la <a href="/es/docs/Web/JavaScript/Reference/Errors">referencia de error de JavaScript</a>.</li> + <li>Si encuentras algún error en tu código que no estás seguro de cómo solucionarlo después de leer este artículo, ¡puedes obtener ayuda! Solicita ayuda en la <a href="https://discourse.mozilla.org/c/mdn/learn">categoría de aprendizaje del foro de discusión de MDN</a>, o en la <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">sala de MDN Web Docs</a> en <a class="external external-icon" href="https://wiki.mozilla.org/Matrix">Matrix</a>. Dinos cuál es tu error e intentaremos ayudarte. Una copia de tu código también sería útil.</li> +</ul> +</div> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="En_este_modulo">En este modulo</h2> + +<ul> + <li><a href="/es/docs/Learn/JavaScript/First_steps/What_is_JavaScript">¿Qué es JavaScript?</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/A_first_splash">Primer contacto con JavaScript</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/What_went_wrong">¿Qué salió mal? Solución de problemas de JavaScript</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Variables">Almacenamiento de la información que necesita — Variables</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Math">Matemáticas básicas en JavaScript — números y operadores</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Strings">Manejo de texto — cadenas en JavaScript</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Useful_string_methods">Métodos de cadena útiles</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Arrays">Arreglos</a></li> + <li><a href="/es/docs/Learn/JavaScript/First_steps/Silly_story_generator">Evaluación: Generador de historias absurdas</a></li> +</ul> |