Mostrar Mensaje con JavaScript

En JavaScript, varias maneras de mostrar el mensaje o información que son: por consola, por caja de diálogo, por DOM y por ventana de explorador Web.

Mensaje por la Consola

Se usa la función console.log(), para ver los mensajes.

En el Código 3, en la etiqueta <div> de id="capa_suma", al cargar la página, se muestra el texto 5 + 15. En la etiqueta <button>, invoca la función miFuncion(). Dentro de la función miFuncion(), la variable x se le asigna el valor de 5 y la variable y se le asigna el valor de 15, en la variable sum se suma los valores de x e y que es 20. Con la instrucción console.log() se muestra el valor de sum por pantalla.

Descargar archivo codigo003.html

Copiar enlace:

Pegar enlace en la url del explorador web y descarga el archivo:

Código 3: console.log()

<!DOCTYPE html>
<html>
<head>
   
   <meta charset="UTF-8">
   
   <title> Ejercicio </title>
</head>
<body>
   
   <div id="capa_suma"> 5 + 15 </div>
   
   <button type="button" onclick="miFuncion()"> Sumar </button>
   
   <script>
      // La función que invoca el botón Sumar
      function miFuncion() {
         // Variables
         var x = 5;
         var y = 15;
         // La suma 5 + 15
         var sum = x + y;
         // Imprimir 20
         console.log(sum);
      }
   </script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo003.html

En la Figura 8, se ve la suma 5 + 15 y si se presiona el botón Sumar aparece el resultado que es 20, lo muestra en la pestaña consola.

Figura 8 – Mensaje usando la consola

Código 3: console.log()

En Consola del explorador web se ve el resultado de la suma que es 20.

Mensaje por la Caja de Diálogo

Se usa la función alert(), para ver los mensajes.

En el Código 4, en la etiqueta <div> de id="capa_suma", al cargar la página, se muestra el texto 5 + 15. En la etiqueta <button>, invoca la función miFuncion(). Dentro de la función miFuncion(), la variable x se le asigna el valor de 5 y la variable y se le asigna el valor de 15, en la variable sum se suma los valores de x e y que es 20. Con la función alert() se muestra el valor de sum por pantalla.

Descargar archivo codigo004.html

Código 4: alert()

<!DOCTYPE html>
<html>
<head>
   
   <meta charset="UTF-8">
   
   <title> Ejercicio </title>
</head>
<body>
   
   <div id="capa_suma"> 5 + 15 </div>
   
   <button type="button" onclick="miFuncion()"> Sumar </button>
   
   <script>
       // La función que invoca el botón Sumar
      function miFuncion() {
         // Variable x con su valor
         var x = 5;
         // Variable y con su valor
         var y = 15;
         // La suma 5 + 15
         var sum = x + y;
         // Mensaje
         alert(sum);
      }
   </script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo004.html

En la Figura 9, se ve la suma 5 + 15 y si se presiona el botón Sumar aparece el resultado que es 20, lo muestra con la función alert().

Figura 9 – Mensaje usando la función alert()
Código 4: alert()

Mensaje Manipulando el DOM

Se usa la propiedad innerHTML, se ve los mensajes y se usa la propiedad document.getElementById() para manipular el DOM.

En el Código 5, en la etiqueta <div> de id="capa_suma", al cargar la página, se muestra el texto 5 + 15. En la etiqueta <button>, invoca la función miFuncion(). Dentro de la función miFuncion(), la variable x se le asigna el valor de 5 y la variable y se le asigna el valor de 15, en la variable sum se suma los valores de x e y que es 20. Con la propiedad innerHTML que lo escribe en la capa <div> de id="capa_total".

Descargar archivo codigo005.html

Código 5: innerHTML

<!DOCTYPE html>
<html>
<head>
   
   <meta charset="UTF-8">
   
   <title> Ejercicio </title>
</head>
<body>
   
   <div id="capa_suma"> 5 + 15 </div>
   
   <div id="capa_total"></div>
   
   <button type="button" onclick="miFuncion()"> Sumar </button>
   
   <script>
      // La función que invoca el botón Sumar
      function miFuncion() {
         // Variable x con su valor
         var x = 5;
   // Variable y con su valor
         var y = 15;
         // La suma 5 + 15
         var sum = x + y;
         // Mensaje
         document.getElementById("capa_total").innerHTML = sum;
      }
   </script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo005.html

En la Figura 10, se ve la suma 5 + 15 y si se presiona el botón Sumar aparece el resultado que es 20, lo muestra con la propiedad innerHTML.

Figura 10 – Mensaje usando la propiedad innerHTML
Código 5: innerHTML

Mensaje por la Ventana del Explorador Web

Se usa la propiedad document.write para ver los mensajes.

En el Código 6, las variable nombre, apellido y edad se le asigna sus valores, por la propiedad document.write() muestra por pantalla los valores de las variables.

Descargar archivo codigo006.html

Código 6: document.write

<!DOCTYPE html>
<html>
<head>
   
   <meta charset="UTF-8">
   
   <title> Ejercicio </title>
</head>
<body>
   
   <script>
      // Variables
      var nombre = "Ana";
      var apellido = "Mora";
      var edad = 25;
      // Mensaje
      document.write(nombre + " " + apellido + "<br/>");
      document.write(edad);
   </script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo006.html

En la Figura 11, se ve el nombre Ana Mora y la edad 25, lo muestra con la propiedad document.write.

Figura 10 – Mensaje usando la propiedad innerHTML,
Código 5: innerHTML

Buscar este blog

Conceptos Básicos de JavaScript