2

Tengo una duda sobre suma en JS. Estoy leyendo sobre "declaraciones" en W3school y un ejercicio de más abajo se describe de la siguiente manera. Entiendo la lógica del ejercicio, pero no comprendo cómo se ejecuta el programa en la salida:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p>A <b>JavaScript program</b> is a list of <b>statements</b> to be executed by a computer.</p>

<p id="demo"></p>

<script>
let x, y, z;  // Statement 1
x = 5;        // Statement 2
y = 6;        // Statement 3
z = x + y;    // Statement 4

document.getElementById("demo").innerHTML =
"The value of z is " + z + ".";  
</script>

</body>
</html>

Mi duda es sobre salida: "The value of z is " + z + "."; ¿Porqué se debe colocar + z + "."?¿qué significa "."?

2
  • 1
    El '+' entre número provoca una suma aritmética. Pero cuando se usa con texto (texto+texto o texto+numero) provoca la concatenación, ejemplo: 300+"hola" + 1 = "300hola1"
    – Yussef
    el 29 sep. 2022 a las 16:34
  • Gracias por tu respuesta, me aclaró mi duda. Estuve metiendole manos al trozo de código que pegué y me quedó claro.
    – Chris
    el 30 sep. 2022 a las 1:55

1 respuesta 1

3

En comentarios esta la explicación del procedimiento pero eso ya lo sabes igual.

Luego te presento 2 opciones de representar el resultado en la vista HTML.

Opcion 1: Tal como lo presentaste tu, .innerHTML obtiene el contenido HTML de la etiqueta <p></p> y mediante "The value of z is " + z + "."; aqui con el operador + concatenas el valor de la variable z y le añades al texto el valor 11 o sea "The value of z is" + aqui la variable que quieres agregar al texto + ".".

Ese punto del final "." es no mas el signo puntuación al final en cualquier oración no tiene nada que ver con la programación solo es texto (Como cuando te decian en la escuela que pusieras un punto final al terminar una oración, tal como yo he puesto un punto al final de todo lo que le escrito).

Opcion 2: Uso Template Literals ahi te dejo el link de la documentación por si quieres revisarlo.

Los literales de plantilla a veces se denominan informalmente cadenas de plantilla, porque se usan más comúnmente para la interpolación de cadenas (para crear cadenas mediante la sustitución de marcadores de posición).

Dos formas en la que podrías concatenar pero la diferencia es la forma en que representas la variable en el texto (+ variable + es igual a ${variable}).

Resultado final: El valor de Z es 11.

HTML

 <p id="demo"></p>
  <p id="demo2"></p>

JS

let x, y, z;  // Declaraciones de variables
    x = 5;        // Ahora la variable x vale 5
    y = 6;        // Ahora la variable y vale 6
    
    z = x + y;    //Aqui la variable va guardar el resultado de la suma de x + y (5 + 6) = 11
    

//1 Opcion
document.getElementById("demo").innerHTML = "The value of z is " + z + "."; 

//2 Opcion
document.getElementById("demo2").innerHTML =`The value of z is ${z}.`; 

Template Literals Otra documentación

introducir la descripción de la imagen aquí

Operador +

introducir la descripción de la imagen aquí

5
  • 2
    excelente explicación! Esperemos que lo entienda el 29 sep. 2022 a las 18:12
  • 2
    Muy buena explicación. el 29 sep. 2022 a las 20:08
  • 1
    Muchas Gracias!!
    – JoseMgz_Ux
    el 29 sep. 2022 a las 20:17
  • 1
    Estuve metiendole manos al trozo de código que pegué y me quedó claro @JoseMgz_Ux Gracias por el consejo de "template literals", muy util.
    – Chris
    el 30 sep. 2022 a las 1:57
  • Ponle el gancho a la respuesta para marcarla como aceptada. Cuando una respuesta que te dan te funciona marcala como aceptada
    – JoseMgz_Ux
    el 30 sep. 2022 a las 3:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.