Ventanas y consola

Categories:

Consola

La consola (herramientas de desarrollo) se puede utilizar para interactuar con js directamente (sin necesidad de tener el código en un documento).

Para abrir la consola en chrome tienes que abrir una página web *:

Abrir la consola de JavaScript en chrome
Abrir la consola de JavaScript en chrome

También se puede abrir desde el teclado con CMD + ALT + J (en Mac) en windows sería CTRL + ALT + J (no estoy muy seguro).

* La página about:blank puede ser buena referencia para trabajar con js porque así aseguramos que el documento no tiene hojas de estilo (CSS) ni funcionalidad (JS).

<!--
Contenido de about:blank
-->
<html>
  <head></head>
  <body></body>
</html>

Una vez abierta la consola de JavaScript se visualiza en la parte inferior del documento (se pude visualizar en la parte lateral o en una ventana independiente).

Visualizar la consola en un documento
Visualizar la consola en un documento

 

 

 

El código tecleado en la consola es temporal, si se quieren guardar los cambios hay que guardarlos en un archivo. Lo primero que se va a revisar es cómo enviar mensajes desde el código para que sean visibles en consola.

// Mensajes enviados a la consola desde javascript
// Al utilizar log el contenido se muestra como mensaje 
console.log("El contenido de este mensaje se muestra en la consola")

// Al utilizar warn el contenido se muestra como advertencia 
console.warn("El contenido de este mensaje se muestra en la consola como advertencia")

// Al utilizar error el contenido se muestra como error 
console.error("El contenido de este mensaje se muestra en la consola como error")
Mensaje utilizando log visualizado en la consola
Mensaje utilizando log visualizado en la consola
Mensaje utilizando warn visualizado en la consola
Mensaje utilizando warn visualizado en la consola
Mensaje utilizando error visualizado en la consola
Mensaje utilizando error visualizado en la consola

Nota:

La consola también puede mostrar mensajes de advertencia y error cuando sucedan cosas inesperadas con el código (por ejemplo que no se encuentre algún archivo o que las propiedades del css no sean soportadas / compatibles con el navegador). Estos mensajes no necesariamente tienen relación con el código que escribamos nosotros.

Ventanas emergentes

Este tipo de mensajes aparecen como ventanas flotantes al usuario, ya sea para informar, confirmar o solicitar datos.

alert: Muestra un mensaje

confirm: Muestra el mensaje y da opción de aceptar o cancelar.

prompt: Muestra el mensaje, da opción de aceptar o cancelar y muestra un campo de texto para que el usuario introduzca algún valor.

alert("El contenido de este mensaje se muestra como una ventana flotante")

// Al utilizar warn el contenido se muestra como advertencia 
confirm("El contenido de este mensaje también se muestra como una ventana flotante pero permite aceptar o cancelar")

// Al utilizar error el contenido se muestra como error 
prompt("El contenido de este mensaje también se muestra como una ventana flotante pero permite al usuario incluir un mensaje de texto como respuesta. Este mensaje es válido si acepta.")
Mensaje alert utilizando rockmelt
Mensaje alert utilizando rockmelt
Mensaje de confirmación utilizando rockmelt
Mensaje de confirmación utilizando rockmelt
Mensaje solicitando datos en rockmelt
Mensaje solicitando datos en rockmelt

 

Es recomendable utilizar la consola para mostrar los resultados de las operaciones (console.log) y utilizar prompt para solicitar datos al usuario mientras te familiarices con JavaScript. Una vez familiarizado con JavaScript y que conozcas con el DOM la interacción va a ser a través del documento.