From a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:46:50 +0100 Subject: unslug es: move --- .../generador_de_historias_absurdas/index.html | 147 ------- .../first_steps/matem\303\241ticas/index.html" | 443 --------------------- .../learn/javascript/first_steps/math/index.html | 443 +++++++++++++++++++++ .../index.html | 122 ------ .../qu\303\251_es_javascript/index.html" | 436 -------------------- .../first_steps/silly_story_generator/index.html | 147 +++++++ .../test_your_skills_colon__strings/index.html | 122 ++++++ .../first_steps/what_is_javascript/index.html | 436 ++++++++++++++++++++ 8 files changed, 1148 insertions(+), 1148 deletions(-) delete mode 100644 files/es/learn/javascript/first_steps/generador_de_historias_absurdas/index.html delete mode 100644 "files/es/learn/javascript/first_steps/matem\303\241ticas/index.html" create mode 100644 files/es/learn/javascript/first_steps/math/index.html delete mode 100644 files/es/learn/javascript/first_steps/prueba_tus_habilidades_colon__strings/index.html delete mode 100644 "files/es/learn/javascript/first_steps/qu\303\251_es_javascript/index.html" create mode 100644 files/es/learn/javascript/first_steps/silly_story_generator/index.html create mode 100644 files/es/learn/javascript/first_steps/test_your_skills_colon__strings/index.html create mode 100644 files/es/learn/javascript/first_steps/what_is_javascript/index.html (limited to 'files/es/learn/javascript/first_steps') 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 deleted file mode 100644 index 58bb8e688a..0000000000 --- a/files/es/learn/javascript/first_steps/generador_de_historias_absurdas/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -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 ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
- -

- -

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!

- - - - - - - - - - - - -
Prerrequisitos:Antes de intentar esta evaluación, deberías haber revisado todos los artículos de este módulo.
Objetivo:Probar la comprensión de los fundamentos de JavaScript, como variables, números, operadores, cadenas y matrices
- -

Punto de partida

- -

Para iniciar esta evaluación, debe:

- - - -
-

Nota: Alternativamente, puede usar un sitio como JSBin o Thimble 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 <script> dentro de la página HTML.

-
- -

Resumen del proyecto

- -

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:

- - - -

La siguiente captura de pantalla muestra un ejemplo de lo que debería producir el programa terminado:

- -

- -

Para darle más idea, eche un vistazo al ejemplo final (¡no mire el código fuente!)

- -

Etapas para completar

- -

En las siguientes secciones se describe lo que hay que hacer.

- -

Configuración básica:

- -
    -
  1. Crear un nuevo archivo llamado main.js, en el mismo directorio que tu archivo index.html.
    2. -
  2. Aplicar el archivo JavaScript externo a tu HTML insertando un elemento {{htmlelement("script")}} en tu HTML haciendo referencia a main.js. Póngalo justo antes de la etiquette de cierra </body>.
    3. -
- -

Variables y funciones iniciales:

- -
    -
  1. 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" (customName), el botón "Generate random story" (randomize), y el elemento {{htmlelement("p")}} al fondo del cuerpo HTML en el que la historia será copiada en (story), respectivamente. Además, obtendrás una funcion llamada randomValueFromArray() que toma un array, y devuelve uno de los items guardados dentro del array al azar.
    2. -
  2. 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 main.js: -
      -
    1. Almacena la primera, la más larga, cadena de texto dentro de una variable llamada storyText.
      2. -
    2. Almacena el primer conjunto de tres cadenas dentro de un array llamado insertX.
      3. -
    3. Almacena el segundo conjunto de tres cadenas dentro de un array llamado insertY.
      4. -
    4. Almacena el tercer conjunto de tres cadenas dentro de un array llamado insertZ.
      5. -
    -
    3. -
- -

Colocar el controlador de evento y la función incompleta:

- -
    -
  1. Ahora regresa al archivo de texto sin procesar.
    2. -
  2. Copia el código encontrado bajo el encabezado "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" y pégalo al fondo de tu archivo main.js . Esto: -
      -
    • Añade un detector de eventos a la variable randomize, de manera que cuando al botón que esta representa se le haya dado un click, la función result() funcione.
      • -
    • Añade una definición de la función parcialmente completada result() 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.
      • -
    -
    3. -
- -

Completando la función result():

- -
    -
  1. Crear una nueva variable llamada newStory, y establezca su valor igual a storyText. 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 storyText, solo podríamos generar una nueva historia una vez.
    2. -
  2. Crear tres nuevas variables llamadas xItem, yItem, y zItem, y tienes que igualar cada variable llamando a randomValueFromArray() 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  insertX escribiendo randomValueFromArray(insertX).
    3. -
  3. A continuación, queremos reemplazar los tres marcadores de posición en la cadena newStory — :insertx:, :inserty:, y :insertz: — con las cadenas almacenadas en xItem, yItem, y zItem. 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 newStory de modo que cada vez que se llame, newStory 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.
    4. -
  4. Dentro del primer bloque if, agregue otra llamada al método de reemplazo de cadena para reemplazar el nombre 'Bob' que se encuentra en la cadena newStory con la variable de name. En este bloque estamos diciendo "Si se ingresó un valor en la entrada de texto customName  reemplace a Bob en la historia con ese nombre personalizado."
    5. -
  5. Dentro del segundo bloque if, se esta verificando si se ha seleccionado el botón de opción uk  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: -
      -
    1. Busque las fórmulas para convertir libras a stone, and Fahrenheit en grados centígrados.
      2. -
    2. Dentro de la línea que define la variable de weight, reemplace 300 con un cálculo que convierta 300 libras en stones. Concatenar 'stone' al final del resultado de la llamada Math.round().
      3. -
    3. Al lado de la línea que define la variable de temperature, reemplace 94 con un cálculo que convierta 94 Fahrenheit en centígrados. Concatenar 'centigrade' al final del resultado de la llamada Math.round().
      4. -
    4. 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 temperature, y  '300 libras' con el contenido de la variable de weight.
      5. -
    -
    6. -
  6. Finalmente, en la penúltima línea de la función, haga que la propiedad textContent de la variable de la story (que hace referencia al párrafo) sea igual a newStory.
    7. -
- -

Claves y pistas

- - - -

Evaluación o ayuda adicional

- -

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 discussion thread for this exercise, o en el canal de IRC #mdn en Mozilla IRC. Pruebe el ejercicio primero: ¡no se gana nada haciendo trampa!

- -

{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}

- -

En este módulo

- - diff --git "a/files/es/learn/javascript/first_steps/matem\303\241ticas/index.html" "b/files/es/learn/javascript/first_steps/matem\303\241ticas/index.html" deleted file mode 100644 index d9117ed211..0000000000 --- "a/files/es/learn/javascript/first_steps/matem\303\241ticas/index.html" +++ /dev/null @@ -1,443 +0,0 @@ ---- -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 ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}
- -

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.

- - - - - - - - - - - - -
Prerequisitos:Conocimientos básicos de ordenadores, comprensión básica de  HTML y CSS, comprensión básica de lo que es JavaScript.
Objetivo:Familiarizarse con las matemáticas básicas de JavaScript.
- -

Todos aman las matemáticas

- -

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.

- -

En este artículo se trata solo aquella parte básica que necesitas conocer por ahora.

- -

Tipos de números

- -

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:

- - - -

¡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:

- - - -

Antes de que comiences a preouparte de que tu cerebro se derrita, ¡detente un momento! 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.

- -

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.

- -
-

Nota: 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.

-
- -

Para mí, todo son números.

- -

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 consola JavaScript de tus herramientas para desarrolladores, o utiliza la sencilla consola integrada que verás abajo si lo prefieres.

- -

Abrir en una ventana nueva

- -
    -
  1. 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: - 
    var myInt = 5;
-var myFloat = 6.667;
-myInt;
-myFloat;
    -
    2. -
  2. 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.
    3. -
  3. 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: - 
    typeof myInt;
-typeof myFloat;
    - Obtendrás "number" 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 !
    4. -
- -

Operadores Aritméticos

- -

Los operadores aritméticos son operadores básicos que usamos para hacer sumas:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperadorNombrePropósitoEjemplo
+AdiciónSuma dos números juntos.6 + 9
-RestaResta el numero de la derecha del de la izquierda.20 - 15
*MultiplicaciónMultiplica dos números juntos.3 * 7
/DivisiónDivide el número de la izquierda por el de la derecha.10 / 5
%Sobrante (también llamado módulo) -

Retorna el restante después de dividir el número de la izquierda en porciones enteras del de la derecha.

- 		8 % 3 (retorna 2, como tres está dos veces en 8, quedando 2 restantes.)
- -
-

Nota: A veces verás números involucrados en sumas referidas como {{Glossary("Operand", "operands")}}.

-
- -

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 consola JavaScript de tus herramientas para desarrolladores, o usa la sencilla consola incorporada que se vio anteriormente, si lo prefieres, para familiarizarte con la sintaxis.

- -
    -
  1. Primero, trata entrando un ejemplo simple por tu cuenta, como - 
    10 + 7
-9 * 8
-60 % 3
    -
    2. -
  2. 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: - 
    var num1 = 10;
-var num2 = 50;
-9 * num1;
-num2 / num1;
    -
    3. -
  3. Por último, trate entrando algunas expresiones complejas, como: - 
    5 + 10 * 3;
-num2 % 9 * num1;
-num2 + num1 / 8 + 2;
    -
    4. -
- -

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é.

- -

Precedencia de Operadores

- -

Veamos el último ejemplo de arriba, asumiendo que num2 tiene el valor 50 y num1 tiene el valor 10 (como se indicó anteriormente):

- -
num2 + num1 / 8 + 2;
- -

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".

- -

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".

- -

Esto es debido a la precedencia de operadores — 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).

- -

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:

- -
(num2 + num1) / (8 + 2);
- -

Pruébalo y verás.

- -
-

Nota: Una completa lista de todos los operadores de JavaScript y sus precedencias pueden encontrarse en Expresiones y operadores.

-
- -

Operadores de incremento y decremento

- -

Algunas veces necesitarás repetidamente sumar o restar uno de/a una variable numérica. Esto puede hacerse convenientemente usando los operadores de incremento (++) y decremento (--). Usamos ++ en nuestro juego "Adivina el número" en nuestro artículo Un primer acercamiento a JavaScript, cuando agregamos 1 a nuestra variable guessCount para mantener una pista de cuantas respuestas le quedan al usuario por turno.

- -
guessCount++;
- -
-

Nota: Son muy comunmente usadas en ciclos, 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..

-
- -

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:

- -
3++;
- -

Asì, puedes solo incrementar una variable existente. Prueba esto:

- -
var num1 = 4;
-num1++;
- -

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:

- -
num1;
- -

Lo mismo funciona con -- : intenta lo siguiente:

- -
var num2 = 6;
-num2--;
-num2;
- -
-

Nota: 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 ++num1 y--num2.

-
- -

Operadores de asignación

- -

Los operadores de asignación son operadores que asignan un valor a una variable. Ya usamos el más básico, =, muchas veces — simplemente asigna a la variable de la izquierda, el valor de la derecha:

- -
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
- -

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.:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperadorNombrePropósito_Ejemplo__Atajo_de__
+=Adición asignaciónSuma el valor de la derecha al valor de la variable de la  izquierda y returna el nuevo valorx = 3;
- x += 4;		x = 3;
- x = x + 4;
-=Resta asignación -

Resta el valor de la derecha, del valor de la variable de la izquierda y retorna el nuevo valor.

- 		x = 6;
- x -= 3;		x = 6;
- x = x - 3;
*=Multiplicación asignación -

Multiplica el valor de la variable en la izquierda por el valor en la derecha y retorna el nuevo valor.

- 		x = 2;
- x *= 3;		x = 2;
- x = x * 3;
/=División asignación -

Divide el valor de la variable en la izquierda por el valor de la derecha y retorna el nuevo valor.

- 		x = 10;
- x /= 5;		x = 10;
- x = x / 5;
- -

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.

- -

Ten en cuenta que puedes usar otras variables en el lado derecho de cada expresión, por ejemplo:

- -
var x = 3; // x contiene el valor 3
-var y = 4; // y contiene el valor 4
-x *= y; // x ahora contiene el valor 12
- -
-

Nota: Hay una cantidad de otros operadores de asignación disponibles, pero estos son los básicos que debes aprender por ahora.

-
- -

Aprendizaje activo: dimensionando una caja canvas

- -

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.

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 520)}}

- -

Abrir en una nueva ventana

- -

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:

- - - -

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..

- -

Operadores de comparación

- -

A veces querremos ejecutar pruebas de verdadero/falso, y luego actuaremos de acuerdo con el resultado de esa prueba. Para ello, utilizamos operadores de comparación.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperadorNombrePropósitoEjemplo
===Igual estrictoComprueba si los valores izquierdo y derecho son idénticos entre sí5 === 2 + 4
!==Igual no-estrictoComprueba si los valores izquierdo y derecho no son idénticos entre sí5 !== 2 + 3
<Menor queComprueba si el valor izquierdo es menor que el derecho.10 < 6
>Mayor queComprueba si el valor izquierdo es mayor que el derecho.10 > 20
<=Menor o igual aComprueba si el valor izquierdo es menor o igual que el derecho.3 <= 2
>=Mayor o igual aComprueba si el valor izquierdo es mayor o igual que el derecho..5 >= 4
- -
-

Nota: 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.

-
- -

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.:

- - - -

Veremos cómo codificar dicha lógica cuando veamos declaraciones condicionales en un artículo futuro. Por ahora, veamos un ejemplo rápido:

- -
<button>Iniciar máquina</button>
-<p>La máquina se detuvo.</p>
-
- -
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.';
-  }
-}
- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}

- -

Abrir en una nueva ventana

- -

Puede ver el operador de igualdad utilizado justo dentro de la función updateBtn(). 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.

- -
-

Nota: Un control de este tipo que intercambia entre dos estados generalmente se conoce como conmutador. Conmuta entre un estado y otro — Luces on, luces off, etc.

-
- -

Pon a 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 ¡Pon a prueba tus habilidades!: Matemáticas.

- -

Resumen

- -

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.

- -

En el siguiente artículo, exploraremos el texto y cómo JavaScript nos permite manipularlo.

- -
-

Nota: 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 Numero y fechas y Expresiones y operadores.

-
- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}

- -

En este módulo

- - diff --git a/files/es/learn/javascript/first_steps/math/index.html b/files/es/learn/javascript/first_steps/math/index.html new file mode 100644 index 0000000000..d9117ed211 --- /dev/null +++ b/files/es/learn/javascript/first_steps/math/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 +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}
+ +

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.

+ + + + + + + + + + + + +
Prerequisitos:Conocimientos básicos de ordenadores, comprensión básica de  HTML y CSS, comprensión básica de lo que es JavaScript.
Objetivo:Familiarizarse con las matemáticas básicas de JavaScript.
+ +

Todos aman las matemáticas

+ +

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.

+ +

En este artículo se trata solo aquella parte básica que necesitas conocer por ahora.

+ +

Tipos de números

+ +

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:

+ + + +

¡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:

+ + + +

Antes de que comiences a preouparte de que tu cerebro se derrita, ¡detente un momento! 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.

+ +

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.

+ +
+

Nota: 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.

+
+ +

Para mí, todo son números.

+ +

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 consola JavaScript de tus herramientas para desarrolladores, o utiliza la sencilla consola integrada que verás abajo si lo prefieres.

+ +

Abrir en una ventana nueva

+ +
    +
  1. 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: + 
    var myInt = 5;
+var myFloat = 6.667;
+myInt;
+myFloat;
    +
    2. +
  2. 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.
    3. +
  3. 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: + 
    typeof myInt;
+typeof myFloat;
    + Obtendrás "number" 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 !
    4. +
+ +

Operadores Aritméticos

+ +

Los operadores aritméticos son operadores básicos que usamos para hacer sumas:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperadorNombrePropósitoEjemplo
+AdiciónSuma dos números juntos.6 + 9
-RestaResta el numero de la derecha del de la izquierda.20 - 15
*MultiplicaciónMultiplica dos números juntos.3 * 7
/DivisiónDivide el número de la izquierda por el de la derecha.10 / 5
%Sobrante (también llamado módulo) +

Retorna el restante después de dividir el número de la izquierda en porciones enteras del de la derecha.

+ 		8 % 3 (retorna 2, como tres está dos veces en 8, quedando 2 restantes.)
+ +
+

Nota: A veces verás números involucrados en sumas referidas como {{Glossary("Operand", "operands")}}.

+
+ +

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 consola JavaScript de tus herramientas para desarrolladores, o usa la sencilla consola incorporada que se vio anteriormente, si lo prefieres, para familiarizarte con la sintaxis.

+ +
    +
  1. Primero, trata entrando un ejemplo simple por tu cuenta, como + 
    10 + 7
+9 * 8
+60 % 3
    +
    2. +
  2. 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: + 
    var num1 = 10;
+var num2 = 50;
+9 * num1;
+num2 / num1;
    +
    3. +
  3. Por último, trate entrando algunas expresiones complejas, como: + 
    5 + 10 * 3;
+num2 % 9 * num1;
+num2 + num1 / 8 + 2;
    +
    4. +
+ +

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é.

+ +

Precedencia de Operadores

+ +

Veamos el último ejemplo de arriba, asumiendo que num2 tiene el valor 50 y num1 tiene el valor 10 (como se indicó anteriormente):

+ +
num2 + num1 / 8 + 2;
+ +

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".

+ +

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".

+ +

Esto es debido a la precedencia de operadores — 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).

+ +

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:

+ +
(num2 + num1) / (8 + 2);
+ +

Pruébalo y verás.

+ +
+

Nota: Una completa lista de todos los operadores de JavaScript y sus precedencias pueden encontrarse en Expresiones y operadores.

+
+ +

Operadores de incremento y decremento

+ +

Algunas veces necesitarás repetidamente sumar o restar uno de/a una variable numérica. Esto puede hacerse convenientemente usando los operadores de incremento (++) y decremento (--). Usamos ++ en nuestro juego "Adivina el número" en nuestro artículo Un primer acercamiento a JavaScript, cuando agregamos 1 a nuestra variable guessCount para mantener una pista de cuantas respuestas le quedan al usuario por turno.

+ +
guessCount++;
+ +
+

Nota: Son muy comunmente usadas en ciclos, 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..

+
+ +

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:

+ +
3++;
+ +

Asì, puedes solo incrementar una variable existente. Prueba esto:

+ +
var num1 = 4;
+num1++;
+ +

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:

+ +
num1;
+ +

Lo mismo funciona con -- : intenta lo siguiente:

+ +
var num2 = 6;
+num2--;
+num2;
+ +
+

Nota: 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 ++num1 y--num2.

+
+ +

Operadores de asignación

+ +

Los operadores de asignación son operadores que asignan un valor a una variable. Ya usamos el más básico, =, muchas veces — simplemente asigna a la variable de la izquierda, el valor de la derecha:

+ +
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
+ +

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.:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperadorNombrePropósito_Ejemplo__Atajo_de__
+=Adición asignaciónSuma el valor de la derecha al valor de la variable de la  izquierda y returna el nuevo valorx = 3;
+ x += 4;		x = 3;
+ x = x + 4;
-=Resta asignación +

Resta el valor de la derecha, del valor de la variable de la izquierda y retorna el nuevo valor.

+ 		x = 6;
+ x -= 3;		x = 6;
+ x = x - 3;
*=Multiplicación asignación +

Multiplica el valor de la variable en la izquierda por el valor en la derecha y retorna el nuevo valor.

+ 		x = 2;
+ x *= 3;		x = 2;
+ x = x * 3;
/=División asignación +

Divide el valor de la variable en la izquierda por el valor de la derecha y retorna el nuevo valor.

+ 		x = 10;
+ x /= 5;		x = 10;
+ x = x / 5;
+ +

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.

+ +

Ten en cuenta que puedes usar otras variables en el lado derecho de cada expresión, por ejemplo:

+ +
var x = 3; // x contiene el valor 3
+var y = 4; // y contiene el valor 4
+x *= y; // x ahora contiene el valor 12
+ +
+

Nota: Hay una cantidad de otros operadores de asignación disponibles, pero estos son los básicos que debes aprender por ahora.

+
+ +

Aprendizaje activo: dimensionando una caja canvas

+ +

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.

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 520)}}

+ +

Abrir en una nueva ventana

+ +

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:

+ + + +

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..

+ +

Operadores de comparación

+ +

A veces querremos ejecutar pruebas de verdadero/falso, y luego actuaremos de acuerdo con el resultado de esa prueba. Para ello, utilizamos operadores de comparación.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperadorNombrePropósitoEjemplo
===Igual estrictoComprueba si los valores izquierdo y derecho son idénticos entre sí5 === 2 + 4
!==Igual no-estrictoComprueba si los valores izquierdo y derecho no son idénticos entre sí5 !== 2 + 3
<Menor queComprueba si el valor izquierdo es menor que el derecho.10 < 6
>Mayor queComprueba si el valor izquierdo es mayor que el derecho.10 > 20
<=Menor o igual aComprueba si el valor izquierdo es menor o igual que el derecho.3 <= 2
>=Mayor o igual aComprueba si el valor izquierdo es mayor o igual que el derecho..5 >= 4
+ +
+

Nota: 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.

+
+ +

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.:

+ + + +

Veremos cómo codificar dicha lógica cuando veamos declaraciones condicionales en un artículo futuro. Por ahora, veamos un ejemplo rápido:

+ +
<button>Iniciar máquina</button>
+<p>La máquina se detuvo.</p>
+
+ +
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.';
+  }
+}
+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}

+ +

Abrir en una nueva ventana

+ +

Puede ver el operador de igualdad utilizado justo dentro de la función updateBtn(). 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.

+ +
+

Nota: Un control de este tipo que intercambia entre dos estados generalmente se conoce como conmutador. Conmuta entre un estado y otro — Luces on, luces off, etc.

+
+ +

Pon a 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 ¡Pon a prueba tus habilidades!: Matemáticas.

+ +

Resumen

+ +

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.

+ +

En el siguiente artículo, exploraremos el texto y cómo JavaScript nos permite manipularlo.

+ +
+

Nota: 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 Numero y fechas y Expresiones y operadores.

+
+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}

+ +

En este módulo

+ + 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 deleted file mode 100644 index f919ac1ee3..0000000000 --- a/files/es/learn/javascript/first_steps/prueba_tus_habilidades_colon__strings/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -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' ---- -
{{learnsidebar}}
- -

El objetivo de esta prueba de habilidad es evaluar si has entendido nuestros artículos Manejo de texto — cadenas en JavaScript y Métodos de cadena útiles.

- -
-

Nota: 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 CodePen, jsFiddle, o Glitch para trabajar en las tareas.
-
- 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.

-
- -
-

Nota: 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).

-
- -

Cadenas 1

- -

En nuestra primera tarea de cadenas, comenzaremos con algo pequeño. Ya tienes la mitad de una cita famosa dentro de una variable llamada quoteStart; nos gustaría que:

- -
    -
  1. Busques la otra mitad de la cita y la agregues al ejemplo dentro de una variable llamada quoteEnd.
    2. -
  2. Concatenes las dos cadenas para hacer una sola cadena que contenga la cita completa. Guardes el resultado dentro de una variable llamada finalQuote.
    3. -
- -

Verás que obtienes un error en este punto. ¿Puedes solucionar el problema con quoteStart para que la cita completa se muestre correctamente?

- -

Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings1.html", '100%', 400)}}

- -
-

Descarga el punto de partida de esta tarea para trabajar en tu propio editor o en un editor en línea.

-
- -

Cadenas 2

- -

En esta tarea, se te proporcionan dos variables, quote y substring, que contienen dos cadenas. Nos gustaría que:

- -
    -
  1. Recuperes la longitud de la cita y la guardes en una variable llamada quoteLength.
    2. -
  2. Busques la posición del índice donde aparece substring en quote, y almacenes ese valor en una variable llamada index.
    3. -
  3. 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 revisedQuote.
    4. -
- -

Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings2.html", '100%', 400)}}

- -
-

Descarga el punto de partida de esta tarea para trabajar en tu propio editor o en un editor en línea.

-
- -

Cadenas 3

- -

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í:

- -
    -
  1. 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 fixedQuote.
    2. -
  2. En fixedQuote, reemplaza "huevos verdes con jamón" con otro alimento que realmente no te guste.
    3. -
  3. 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 finalQuote.
    4. -
- -

Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings3.html", '100%', 400)}}

- -
-

Descarga el punto de partida de esta tarea para trabajar en tu propio editor o en un editor en línea.

-
- -

Cadenas 4

- -

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 (*)). Queremos que cambies el valor de la cadena de la siguiente manera:

- -
    -
  1. Cámbiala de un literal de cadena normal a una plantilla literal.
    2. -
  2. Reemplaza los cuatro asteriscos con cuatro marcadores de posición en la plantilla literal. Estos deben ser: -
      -
    1. El nombre del teorema.
      2. -
    2. Los dos valores numéricos que tenemos.
      3. -
    3. 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.
      4. -
    -
    3. -
- -

Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings4.html", '100%', 400)}}

- -
-

Descarga el punto de partida de esta tarea para trabajar en tu propio editor o en un editor en línea.

-
- -

Evaluación o ayuda adicional

- -

Puedes practicar estos ejemplos en los editores interactivos anteriores.

- -

Si deseas que se evalúe tu trabajo o estás atascado y deseas pedir ayuda:

- -
    -
  1. Coloca tu trabajo en un editor que se pueda compartir en línea, como CodePen, jsFiddle o Glitch. Puedes escribir el código tú mismo o utilizar los archivos de punto de partida vinculados en las secciones anteriores.
    2. -
  2. Escribe una publicación solicitando evaluación y/o ayuda en la categoría de aprendizaje del foro de discusión de MDN. Tu publicación debe incluir: -
      -
    • Un título descriptivo como "Se busca evaluación para la prueba de habilidad de Cadenas 1".
      • -
    • 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.
      • -
    • 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.
      • -
    • Un enlace a la página de la tarea o evaluación real, para que podamos encontrar la pregunta con la que deseas ayuda.
      • -
    -
    3. -
diff --git "a/files/es/learn/javascript/first_steps/qu\303\251_es_javascript/index.html" "b/files/es/learn/javascript/first_steps/qu\303\251_es_javascript/index.html" deleted file mode 100644 index bd845c8681..0000000000 --- "a/files/es/learn/javascript/first_steps/qu\303\251_es_javascript/index.html" +++ /dev/null @@ -1,436 +0,0 @@ ---- -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 ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}
- -

¡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.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática, conocimientos básicos de HTML y CSS.
Objetivo:Familiarizarte con lo que es JavaScript, lo que puede hacer y cómo encaja en un sitio web.
- -

Una definición de alto nivel

- -

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 (HTML y CSS) hemos cubierto con mucho más detalle en otras partes del Área de aprendizaje.

- -

- - - -

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>Player 1: Chris</p>
- -

- -

Luego, podemos agregar algo de CSS a la mezcla para que se vea bien:

- -
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;
-}
- -

- -

Y finalmente, podemos agregar algo de JavaScript para implementar un comportamiento dinámico:

- -
const para = document.querySelector('p');
-
-para.addEventListener('click', updateName);
-
-function updateName() {
-  let name = prompt('Enter a new name');
-  para.textContent = 'Player 1: ' + name;
-}
-
- -

{{ EmbedLiveSample('A_high-level_definition', '100%', 80, "", "", "hide-codepen-jsfiddle") }}

- -

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 código fuente o ejecútalo en vivo)!

- -

JavaScript puede hacer mucho más que eso — exploremos qué con más detalle.

- -

Entonces, ¿qué puede hacer realmente?

- -

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:

- - - -

Sin embargo, lo que aún es más emocionante es la funcionalidad construida sobre el lenguaje JavaScript de lado del cliente. Las denominadas interfaces de programación de aplicaciones (API) te proporcionan superpoderes adicionales para utilizar en tu código JavaScript.

- -

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 luego júntalos para hacer una estantería.

- -

Generalmente se dividen en dos categorías.

- -

- -

Las APIs del navegador están integradas en tu navegador web y pueden exponer datos del entorno informático circundante o realizar tareas complejas y útiles. Por ejemplo:

- - - -
-

Nota: 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 pruebas en varios navegadores 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).

-
- -

Las APIs de terceros 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:

- - - -
-

Nota: estas APIs son avanzadas y no cubriremos ninguna de ellas en este módulo. Puedes obtener más información sobre estas en nuestro módulo de APIs web de lado del cliente.

-
- -

¡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!

- -

¿Qué está haciendo JavaScript en tu página?

- -

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.

- -

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 Cómo funciona CSS). 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).

- -

- -

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 Estrategias de carga de scripts.

- -

Seguridad del navegador

- -

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.

- -
-

Nota: 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.

-
- -

Orden de ejecución de JavaScript

- -

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:

- -
const para = document.querySelector('p');
-
-para.addEventListener('click', updateName);
-
-function updateName() {
-  let name = prompt('Enter a new name');
-  para.textContent = 'Player 1: ' + name;
-}
- -

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 updateName() (líneas 5-8) se ejecuta. El bloque de código updateName() (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.

- -

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 consola del desarrollador del navegador — TypeError: para is undefined. Esto significa que el objeto para aún no existe, por lo que no podemos agregarle un detector de eventos.

- -
-

Nota: 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.

-
- -

Código interpretado versus compilado

- -

Es posible que escuches los términos interpretados y compilados 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í.

- -

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.

- -

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 compilación en tiempo real 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.

- -

Ambos tipos de lenguaje tienen ventajas, pero no las abordaremos ahora.

- -

Código de lado del servidor versus de lado del cliente

- -

También puedes escuchar los términos código de lado del servidor y de lado del cliente, 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 JavaScript de lado del cliente.

- -

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 Sitios web dinámicos — Programación de lado del servidor.

- -

Código dinámico versus estático

- -

La palabra dinámico 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.

- -

Una página web sin contenido que se actualiza dinámicamente se denomina estática — simplemente muestra el mismo contenido todo el tiempo.

- -

¿Cómo agregas JavaScript a tu página?

- -

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.

- -

JavaScript interno

- -
    -
  1. En primer lugar, haz una copia local de nuestro archivo de ejemplo apply-javascript.html. Guárdalo en un directorio en algún lugar accesible.
    2. -
  2. 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.
    3. -
  3. A continuación, ve a tu editor de texto y agrega lo siguiente en tu head, justo antes de tu etiqueta de cierre </head>: - 
    <script>
-
-  // JavaScript va aquí
-
-</script>
    -
    4. -
  4. 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í": - 
    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);
-  }
-});
    -
    5. -
  5. 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.
    6. -
- -
-

Nota: 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 .html? ¿Agregaste tu elemento {{htmlelement("script")}} justo antes de la etiqueta </head>? ¿Ingresaste el JavaScript exactamente como se muestra? 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.

-
- -
-

Nota: Puedes ver esta versión en GitHub como apply-javascript-internal.html o (verla en vivo también).

-
- -

JavaScript externo

- -

Esto funciona muy bien, pero ¿y si quisiéramos poner nuestro JavaScript en un archivo externo? Exploremos esto ahora.

- -
    -
  1. Primero, crea un nuevo archivo en el mismo directorio que tu archivo HTML del ejemplo. Como nombre ponle script.js; asegúrate de que el nombre tenga la extensión .js, ya que así es como se reconoce como JavaScript.
    2. -
  2. Reemplaza tu elemento {{htmlelement("script")}} actual con lo siguiente: - 
    <script src="script.js" defer></script>
    -
    3. -
  3. Dentro de script.js, agrega el siguiente script: - 
    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);
-}
    -
    4. -
  4. 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.
    5. -
- -
-

Nota: Puedes ver esta versión en GitHub como apply-javascript-external.html y script.js (verla en vivo también).

-
- -

Controladores de JavaScript en línea

- -

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:

- -
-
function createParagraph() {
-  let para = document.createElement('p');
-  para.textContent = 'You clicked the button!';
-  document.body.appendChild(para);
-}
- -
<button onclick="createParagraph()">Click me!</button>
-
- -

Puedes probar esta versión de nuestra demostración a continuación.

- -

{{ EmbedLiveSample('inline_js_example', '100%', 150, "", "", "hide-codepen-jsfiddle") }}

- -

Esta demostración tiene exactamente la misma funcionalidad que en las dos secciones anteriores, excepto que el elemento {{htmlelement("button")}} incluye un controlador onclick en línea para que la función se ejecute cuando se presiona el botón .

- -

Sin embargo, no hagas esto. Es una mala práctica contaminar tu HTML con JavaScript, y es ineficiente; tendrías que incluir el atributo onclick="createParagraph()" en cada botón al que desees que se aplique JavaScript.

- -

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í:

- -
const buttons = document.querySelectorAll('button');
-
-for(let i = 0; i < buttons.length ; i++) {
-  buttons[i].addEventListener('click', createParagraph);
-}
- -

Esto puede ser un poco más largo que el atributo onclick, 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.

- -
-

Nota: Intenta editar tu versión de apply-javascript.html 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?

-
- -

Estrategias para la carga de scripts

- -

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 Modelo de objetos del documento), tu código no funcionará si el JavaScript se carga y procesa antes que el HTML que estás intentando haga algo.

- -

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.

- -

En el ejemplo interno, puedes ver esta estructura alrededor del código:

- -
document.addEventListener("DOMContentLoaded", function() {
-  ...
-});
- -

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 (aprenderás sobre los eventos más adelante en el curso).

- -

En el ejemplo externo, usamos una función de JavaScript más moderno para resolver el problema, el atributo defer, que le dice al navegador que continúe descargando el contenido HTML una vez que se ha alcanzado la etiqueta del elemento <script>.

- -
<script src="script.js" defer></script>
- -

En este caso, tanto el script como el HTML se cargarán simultáneamente y el código funcionará.

- -
-

Nota: En el caso externo, no necesitamos usar el evento DOMContentLoaded porque el atributo defer nos resolvió el problema. No usamos la solución defer para el ejemplo interno de JavaScript porque defer solo funciona para scripts externos.

-
- -

Una solución pasada de moda a este problema solía ser colocar tu elemento script justo en la parte inferior del cuerpo (por ejemplo, justo antes de la etiqueta </body>), 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.

- -

async y defer

- -

En realidad, hay dos modernas características que podemos usar para evitar el problema del bloqueo de script: async y defer (que vimos anteriormente). Veamos la diferencia entre estas dos.

- -

Los scripts cargados con el atributo async (ve más abajo) descargarán el script sin bloquear el renderizado de la página y lo ejecutará tan pronto como el script se termine de descargar. No tienes garantía de que los scripts se ejecuten en un orden específico, solo que no detendrán la visualización del resto de la página. Es mejor usar async cuando los scripts de la página se ejecutan de forma independiente y no dependen de ningún otro script de la página.

- -

Por ejemplo, si tienes los siguientes elementos script:

- -
<script async src="js/vendor/jquery.js"></script>
-
-<script async src="js/script2.js"></script>
-
-<script async src="js/script3.js"></script>
- -

No puedes confiar en el orden en que se cargarán los scripts. jquery.js se puede cargar antes o después de script2.js y script3.js y si este es el caso, cualquier función en esos scripts dependiendo de jquery producirá un error porque jquery no se definirá en el momento en que se ejecute el script.

- -

async se debe usar cuando tienes un montón de scripts 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 script.

- -

Los scripts cargados con el atributo defer (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 script y el contenido:

- -
<script defer src="js/vendor/jquery.js"></script>
-
-<script defer src="js/script2.js"></script>
-
-<script defer src="js/script3.js"></script>
- -

Todos los scripts con el atributo defer se cargarán en el orden en que aparecen en la página. Entonces, en el segundo ejemplo, podemos estar seguros de que jquery.js se cargará antes que script2.js y script3.js y que script2.js se cargará antes de script3.js. No se ejecutarán hasta que se haya cargado todo el contenido de la página, lo cual es útil si tus scripts dependen de que el DOM esté en su lugar (por ejemplo, modifican uno o más elementos de la página).

- -

Para resumir:

- - - -

Comentarios

- -

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:

- - - -

Entonces, por ejemplo, podríamos anotar el JavaScript de nuestra última demostración con comentarios como este:

- -
// 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);
-}
- -
-

Nota: 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).

-
- -

Resumen

- -

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.

- -

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, nos sumergiremos directamente en lo práctico, lo que te permitirá comenzar directamente y crear tus propios ejemplos de JavaScript.

- - - -

{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}

- -

En este modulo

- - diff --git a/files/es/learn/javascript/first_steps/silly_story_generator/index.html b/files/es/learn/javascript/first_steps/silly_story_generator/index.html new file mode 100644 index 0000000000..58bb8e688a --- /dev/null +++ b/files/es/learn/javascript/first_steps/silly_story_generator/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 +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
+ +

+ +

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!

+ + + + + + + + + + + + +
Prerrequisitos:Antes de intentar esta evaluación, deberías haber revisado todos los artículos de este módulo.
Objetivo:Probar la comprensión de los fundamentos de JavaScript, como variables, números, operadores, cadenas y matrices
+ +

Punto de partida

+ +

Para iniciar esta evaluación, debe:

+ + + +
+

Nota: Alternativamente, puede usar un sitio como JSBin o Thimble 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 <script> dentro de la página HTML.

+
+ +

Resumen del proyecto

+ +

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:

+ + + +

La siguiente captura de pantalla muestra un ejemplo de lo que debería producir el programa terminado:

+ +

+ +

Para darle más idea, eche un vistazo al ejemplo final (¡no mire el código fuente!)

+ +

Etapas para completar

+ +

En las siguientes secciones se describe lo que hay que hacer.

+ +

Configuración básica:

+ +
    +
  1. Crear un nuevo archivo llamado main.js, en el mismo directorio que tu archivo index.html.
    2. +
  2. Aplicar el archivo JavaScript externo a tu HTML insertando un elemento {{htmlelement("script")}} en tu HTML haciendo referencia a main.js. Póngalo justo antes de la etiquette de cierra </body>.
    3. +
+ +

Variables y funciones iniciales:

+ +
    +
  1. 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" (customName), el botón "Generate random story" (randomize), y el elemento {{htmlelement("p")}} al fondo del cuerpo HTML en el que la historia será copiada en (story), respectivamente. Además, obtendrás una funcion llamada randomValueFromArray() que toma un array, y devuelve uno de los items guardados dentro del array al azar.
    2. +
  2. 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 main.js: +
      +
    1. Almacena la primera, la más larga, cadena de texto dentro de una variable llamada storyText.
      2. +
    2. Almacena el primer conjunto de tres cadenas dentro de un array llamado insertX.
      3. +
    3. Almacena el segundo conjunto de tres cadenas dentro de un array llamado insertY.
      4. +
    4. Almacena el tercer conjunto de tres cadenas dentro de un array llamado insertZ.
      5. +
    +
    3. +
+ +

Colocar el controlador de evento y la función incompleta:

+ +
    +
  1. Ahora regresa al archivo de texto sin procesar.
    2. +
  2. Copia el código encontrado bajo el encabezado "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" y pégalo al fondo de tu archivo main.js . Esto: +
      +
    • Añade un detector de eventos a la variable randomize, de manera que cuando al botón que esta representa se le haya dado un click, la función result() funcione.
      • +
    • Añade una definición de la función parcialmente completada result() 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.
      • +
    +
    3. +
+ +

Completando la función result():

+ +
    +
  1. Crear una nueva variable llamada newStory, y establezca su valor igual a storyText. 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 storyText, solo podríamos generar una nueva historia una vez.
    2. +
  2. Crear tres nuevas variables llamadas xItem, yItem, y zItem, y tienes que igualar cada variable llamando a randomValueFromArray() 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  insertX escribiendo randomValueFromArray(insertX).
    3. +
  3. A continuación, queremos reemplazar los tres marcadores de posición en la cadena newStory — :insertx:, :inserty:, y :insertz: — con las cadenas almacenadas en xItem, yItem, y zItem. 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 newStory de modo que cada vez que se llame, newStory 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.
    4. +
  4. Dentro del primer bloque if, agregue otra llamada al método de reemplazo de cadena para reemplazar el nombre 'Bob' que se encuentra en la cadena newStory con la variable de name. En este bloque estamos diciendo "Si se ingresó un valor en la entrada de texto customName  reemplace a Bob en la historia con ese nombre personalizado."
    5. +
  5. Dentro del segundo bloque if, se esta verificando si se ha seleccionado el botón de opción uk  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: +
      +
    1. Busque las fórmulas para convertir libras a stone, and Fahrenheit en grados centígrados.
      2. +
    2. Dentro de la línea que define la variable de weight, reemplace 300 con un cálculo que convierta 300 libras en stones. Concatenar 'stone' al final del resultado de la llamada Math.round().
      3. +
    3. Al lado de la línea que define la variable de temperature, reemplace 94 con un cálculo que convierta 94 Fahrenheit en centígrados. Concatenar 'centigrade' al final del resultado de la llamada Math.round().
      4. +
    4. 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 temperature, y  '300 libras' con el contenido de la variable de weight.
      5. +
    +
    6. +
  6. Finalmente, en la penúltima línea de la función, haga que la propiedad textContent de la variable de la story (que hace referencia al párrafo) sea igual a newStory.
    7. +
+ +

Claves y pistas

+ + + +

Evaluación o ayuda adicional

+ +

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 discussion thread for this exercise, o en el canal de IRC #mdn en Mozilla IRC. Pruebe el ejercicio primero: ¡no se gana nada haciendo trampa!

+ +

{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/javascript/first_steps/test_your_skills_colon__strings/index.html b/files/es/learn/javascript/first_steps/test_your_skills_colon__strings/index.html new file mode 100644 index 0000000000..f919ac1ee3 --- /dev/null +++ b/files/es/learn/javascript/first_steps/test_your_skills_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' +--- +
{{learnsidebar}}
+ +

El objetivo de esta prueba de habilidad es evaluar si has entendido nuestros artículos Manejo de texto — cadenas en JavaScript y Métodos de cadena útiles.

+ +
+

Nota: 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 CodePen, jsFiddle, o Glitch para trabajar en las tareas.
+
+ 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.

+
+ +
+

Nota: 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).

+
+ +

Cadenas 1

+ +

En nuestra primera tarea de cadenas, comenzaremos con algo pequeño. Ya tienes la mitad de una cita famosa dentro de una variable llamada quoteStart; nos gustaría que:

+ +
    +
  1. Busques la otra mitad de la cita y la agregues al ejemplo dentro de una variable llamada quoteEnd.
    2. +
  2. Concatenes las dos cadenas para hacer una sola cadena que contenga la cita completa. Guardes el resultado dentro de una variable llamada finalQuote.
    3. +
+ +

Verás que obtienes un error en este punto. ¿Puedes solucionar el problema con quoteStart para que la cita completa se muestre correctamente?

+ +

Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings1.html", '100%', 400)}}

+ +
+

Descarga el punto de partida de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Cadenas 2

+ +

En esta tarea, se te proporcionan dos variables, quote y substring, que contienen dos cadenas. Nos gustaría que:

+ +
    +
  1. Recuperes la longitud de la cita y la guardes en una variable llamada quoteLength.
    2. +
  2. Busques la posición del índice donde aparece substring en quote, y almacenes ese valor en una variable llamada index.
    3. +
  3. 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 revisedQuote.
    4. +
+ +

Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings2.html", '100%', 400)}}

+ +
+

Descarga el punto de partida de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Cadenas 3

+ +

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í:

+ +
    +
  1. 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 fixedQuote.
    2. +
  2. En fixedQuote, reemplaza "huevos verdes con jamón" con otro alimento que realmente no te guste.
    3. +
  3. 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 finalQuote.
    4. +
+ +

Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings3.html", '100%', 400)}}

+ +
+

Descarga el punto de partida de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Cadenas 4

+ +

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 (*)). Queremos que cambies el valor de la cadena de la siguiente manera:

+ +
    +
  1. Cámbiala de un literal de cadena normal a una plantilla literal.
    2. +
  2. Reemplaza los cuatro asteriscos con cuatro marcadores de posición en la plantilla literal. Estos deben ser: +
      +
    1. El nombre del teorema.
      2. +
    2. Los dos valores numéricos que tenemos.
      3. +
    3. 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.
      4. +
    +
    3. +
+ +

Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings4.html", '100%', 400)}}

+ +
+

Descarga el punto de partida de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Evaluación o ayuda adicional

+ +

Puedes practicar estos ejemplos en los editores interactivos anteriores.

+ +

Si deseas que se evalúe tu trabajo o estás atascado y deseas pedir ayuda:

+ +
    +
  1. Coloca tu trabajo en un editor que se pueda compartir en línea, como CodePen, jsFiddle o Glitch. Puedes escribir el código tú mismo o utilizar los archivos de punto de partida vinculados en las secciones anteriores.
    2. +
  2. Escribe una publicación solicitando evaluación y/o ayuda en la categoría de aprendizaje del foro de discusión de MDN. Tu publicación debe incluir: +
      +
    • Un título descriptivo como "Se busca evaluación para la prueba de habilidad de Cadenas 1".
      • +
    • 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.
      • +
    • 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.
      • +
    • Un enlace a la página de la tarea o evaluación real, para que podamos encontrar la pregunta con la que deseas ayuda.
      • +
    +
    3. +
diff --git a/files/es/learn/javascript/first_steps/what_is_javascript/index.html b/files/es/learn/javascript/first_steps/what_is_javascript/index.html new file mode 100644 index 0000000000..bd845c8681 --- /dev/null +++ b/files/es/learn/javascript/first_steps/what_is_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 +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}
+ +

¡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.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, conocimientos básicos de HTML y CSS.
Objetivo:Familiarizarte con lo que es JavaScript, lo que puede hacer y cómo encaja en un sitio web.
+ +

Una definición de alto nivel

+ +

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 (HTML y CSS) hemos cubierto con mucho más detalle en otras partes del Área de aprendizaje.

+ +

+ + + +

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>Player 1: Chris</p>
+ +

+ +

Luego, podemos agregar algo de CSS a la mezcla para que se vea bien:

+ +
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;
+}
+ +

+ +

Y finalmente, podemos agregar algo de JavaScript para implementar un comportamiento dinámico:

+ +
const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+
+ +

{{ EmbedLiveSample('A_high-level_definition', '100%', 80, "", "", "hide-codepen-jsfiddle") }}

+ +

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 código fuente o ejecútalo en vivo)!

+ +

JavaScript puede hacer mucho más que eso — exploremos qué con más detalle.

+ +

Entonces, ¿qué puede hacer realmente?

+ +

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:

+ + + +

Sin embargo, lo que aún es más emocionante es la funcionalidad construida sobre el lenguaje JavaScript de lado del cliente. Las denominadas interfaces de programación de aplicaciones (API) te proporcionan superpoderes adicionales para utilizar en tu código JavaScript.

+ +

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 luego júntalos para hacer una estantería.

+ +

Generalmente se dividen en dos categorías.

+ +

+ +

Las APIs del navegador están integradas en tu navegador web y pueden exponer datos del entorno informático circundante o realizar tareas complejas y útiles. Por ejemplo:

+ + + +
+

Nota: 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 pruebas en varios navegadores 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).

+
+ +

Las APIs de terceros 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:

+ + + +
+

Nota: estas APIs son avanzadas y no cubriremos ninguna de ellas en este módulo. Puedes obtener más información sobre estas en nuestro módulo de APIs web de lado del cliente.

+
+ +

¡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!

+ +

¿Qué está haciendo JavaScript en tu página?

+ +

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.

+ +

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 Cómo funciona CSS). 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).

+ +

+ +

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 Estrategias de carga de scripts.

+ +

Seguridad del navegador

+ +

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.

+ +
+

Nota: 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.

+
+ +

Orden de ejecución de JavaScript

+ +

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:

+ +
const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+ +

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 updateName() (líneas 5-8) se ejecuta. El bloque de código updateName() (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.

+ +

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 consola del desarrollador del navegador — TypeError: para is undefined. Esto significa que el objeto para aún no existe, por lo que no podemos agregarle un detector de eventos.

+ +
+

Nota: 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.

+
+ +

Código interpretado versus compilado

+ +

Es posible que escuches los términos interpretados y compilados 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í.

+ +

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.

+ +

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 compilación en tiempo real 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.

+ +

Ambos tipos de lenguaje tienen ventajas, pero no las abordaremos ahora.

+ +

Código de lado del servidor versus de lado del cliente

+ +

También puedes escuchar los términos código de lado del servidor y de lado del cliente, 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 JavaScript de lado del cliente.

+ +

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 Sitios web dinámicos — Programación de lado del servidor.

+ +

Código dinámico versus estático

+ +

La palabra dinámico 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.

+ +

Una página web sin contenido que se actualiza dinámicamente se denomina estática — simplemente muestra el mismo contenido todo el tiempo.

+ +

¿Cómo agregas JavaScript a tu página?

+ +

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.

+ +

JavaScript interno

+ +
    +
  1. En primer lugar, haz una copia local de nuestro archivo de ejemplo apply-javascript.html. Guárdalo en un directorio en algún lugar accesible.
    2. +
  2. 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.
    3. +
  3. A continuación, ve a tu editor de texto y agrega lo siguiente en tu head, justo antes de tu etiqueta de cierre </head>: + 
    <script>
+
+  // JavaScript va aquí
+
+</script>
    +
    4. +
  4. 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í": + 
    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);
+  }
+});
    +
    5. +
  5. 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.
    6. +
+ +
+

Nota: 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 .html? ¿Agregaste tu elemento {{htmlelement("script")}} justo antes de la etiqueta </head>? ¿Ingresaste el JavaScript exactamente como se muestra? 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.

+
+ +
+

Nota: Puedes ver esta versión en GitHub como apply-javascript-internal.html o (verla en vivo también).

+
+ +

JavaScript externo

+ +

Esto funciona muy bien, pero ¿y si quisiéramos poner nuestro JavaScript en un archivo externo? Exploremos esto ahora.

+ +
    +
  1. Primero, crea un nuevo archivo en el mismo directorio que tu archivo HTML del ejemplo. Como nombre ponle script.js; asegúrate de que el nombre tenga la extensión .js, ya que así es como se reconoce como JavaScript.
    2. +
  2. Reemplaza tu elemento {{htmlelement("script")}} actual con lo siguiente: + 
    <script src="script.js" defer></script>
    +
    3. +
  3. Dentro de script.js, agrega el siguiente script: + 
    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);
+}
    +
    4. +
  4. 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.
    5. +
+ +
+

Nota: Puedes ver esta versión en GitHub como apply-javascript-external.html y script.js (verla en vivo también).

+
+ +

Controladores de JavaScript en línea

+ +

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:

+ +
+
function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+ +
<button onclick="createParagraph()">Click me!</button>
+
+ +

Puedes probar esta versión de nuestra demostración a continuación.

+ +

{{ EmbedLiveSample('inline_js_example', '100%', 150, "", "", "hide-codepen-jsfiddle") }}

+ +

Esta demostración tiene exactamente la misma funcionalidad que en las dos secciones anteriores, excepto que el elemento {{htmlelement("button")}} incluye un controlador onclick en línea para que la función se ejecute cuando se presiona el botón .

+ +

Sin embargo, no hagas esto. Es una mala práctica contaminar tu HTML con JavaScript, y es ineficiente; tendrías que incluir el atributo onclick="createParagraph()" en cada botón al que desees que se aplique JavaScript.

+ +

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í:

+ +
const buttons = document.querySelectorAll('button');
+
+for(let i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
+ +

Esto puede ser un poco más largo que el atributo onclick, 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.

+ +
+

Nota: Intenta editar tu versión de apply-javascript.html 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?

+
+ +

Estrategias para la carga de scripts

+ +

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 Modelo de objetos del documento), tu código no funcionará si el JavaScript se carga y procesa antes que el HTML que estás intentando haga algo.

+ +

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.

+ +

En el ejemplo interno, puedes ver esta estructura alrededor del código:

+ +
document.addEventListener("DOMContentLoaded", function() {
+  ...
+});
+ +

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 (aprenderás sobre los eventos más adelante en el curso).

+ +

En el ejemplo externo, usamos una función de JavaScript más moderno para resolver el problema, el atributo defer, que le dice al navegador que continúe descargando el contenido HTML una vez que se ha alcanzado la etiqueta del elemento <script>.

+ +
<script src="script.js" defer></script>
+ +

En este caso, tanto el script como el HTML se cargarán simultáneamente y el código funcionará.

+ +
+

Nota: En el caso externo, no necesitamos usar el evento DOMContentLoaded porque el atributo defer nos resolvió el problema. No usamos la solución defer para el ejemplo interno de JavaScript porque defer solo funciona para scripts externos.

+
+ +

Una solución pasada de moda a este problema solía ser colocar tu elemento script justo en la parte inferior del cuerpo (por ejemplo, justo antes de la etiqueta </body>), 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.

+ +

async y defer

+ +

En realidad, hay dos modernas características que podemos usar para evitar el problema del bloqueo de script: async y defer (que vimos anteriormente). Veamos la diferencia entre estas dos.

+ +

Los scripts cargados con el atributo async (ve más abajo) descargarán el script sin bloquear el renderizado de la página y lo ejecutará tan pronto como el script se termine de descargar. No tienes garantía de que los scripts se ejecuten en un orden específico, solo que no detendrán la visualización del resto de la página. Es mejor usar async cuando los scripts de la página se ejecutan de forma independiente y no dependen de ningún otro script de la página.

+ +

Por ejemplo, si tienes los siguientes elementos script:

+ +
<script async src="js/vendor/jquery.js"></script>
+
+<script async src="js/script2.js"></script>
+
+<script async src="js/script3.js"></script>
+ +

No puedes confiar en el orden en que se cargarán los scripts. jquery.js se puede cargar antes o después de script2.js y script3.js y si este es el caso, cualquier función en esos scripts dependiendo de jquery producirá un error porque jquery no se definirá en el momento en que se ejecute el script.

+ +

async se debe usar cuando tienes un montón de scripts 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 script.

+ +

Los scripts cargados con el atributo defer (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 script y el contenido:

+ +
<script defer src="js/vendor/jquery.js"></script>
+
+<script defer src="js/script2.js"></script>
+
+<script defer src="js/script3.js"></script>
+ +

Todos los scripts con el atributo defer se cargarán en el orden en que aparecen en la página. Entonces, en el segundo ejemplo, podemos estar seguros de que jquery.js se cargará antes que script2.js y script3.js y que script2.js se cargará antes de script3.js. No se ejecutarán hasta que se haya cargado todo el contenido de la página, lo cual es útil si tus scripts dependen de que el DOM esté en su lugar (por ejemplo, modifican uno o más elementos de la página).

+ +

Para resumir:

+ + + +

Comentarios

+ +

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:

+ + + +

Entonces, por ejemplo, podríamos anotar el JavaScript de nuestra última demostración con comentarios como este:

+ +
// 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);
+}
+ +
+

Nota: 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).

+
+ +

Resumen

+ +

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.

+ +

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, nos sumergiremos directamente en lo práctico, lo que te permitirá comenzar directamente y crear tus propios ejemplos de JavaScript.

+ + + +

{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}

+ +

En este modulo

+ + -- cgit v1.2.3-54-g00ecf