Primeros pasos con JavaScript

Usando consola.log()

Introducción

Todos los navegadores web modernos, NodeJ y casi todos los demás entornos de JavaScript admiten la escritura de mensajes en una consola mediante un conjunto de métodos de registro. El más común de estos métodos es console.log().

En un entorno de navegador, la función console.log() se utiliza predominantemente con fines de depuración.

Empezando

Abra la consola de JavaScript en su navegador, escriba lo siguiente y presione Enter :

console.log("Hello, World!");

Esto registrará lo siguiente en la consola:

Salida de registro de la consola en Google Chrome

En el ejemplo anterior, la función console.log() imprime Hello, World! en la consola y devuelve undefined (que se muestra arriba en la ventana de resultados de la consola). Esto se debe a que console.log() no tiene un valor de retorno explícito.

Variables de registro

console.log() se puede usar para registrar variables de cualquier tipo; no solo cuerdas. Simplemente pase la variable que desea que se muestre en la consola, por ejemplo:

var foo = "bar";
console.log(foo);

Esto registrará lo siguiente en la consola:

console.log() se puede usar con variables

Si desea registrar dos o más valores, simplemente sepárelos con comas. Los espacios se agregarán automáticamente entre cada argumento durante la concatenación:

var thisVar = 'first value';
var thatVar = 'second value';
console.log("thisVar:", thisVar, "and thatVar:", thatVar);

Esto registrará lo siguiente en la consola:

Concatenación de consola

marcadores de posición

Puedes usar console.log() en combinación con marcadores de posición:

var greet = "Hello", who = "World";
console.log("%s, %s!", greet, who);

Esto registrará lo siguiente en la consola:

ingrese la descripción de la imagen aquí

Objetos de registro

A continuación vemos el resultado de registrar un objeto. Esto suele ser útil para registrar respuestas JSON de llamadas API.

console.log({
    'Email': '', 
    'Groups': {},
    'Id': 33,
    'IsHiddenInUI': false,
    'IsSiteAdmin': false,
    'LoginName': 'i:0#.w|virtualdomain\\user2',
    'PrincipalType': 1,
    'Title': 'user2'
});

Esto registrará lo siguiente en la consola:

Objeto registrado en consola

Registro de elementos HTML

Tiene la capacidad de registrar cualquier elemento que exista dentro del DOM. En este caso registramos el elemento del cuerpo:

console.log(document.body);

Esto registrará lo siguiente en la consola:

ingrese la descripción de la imagen aquí

Nota final

Para obtener más información sobre las capacidades de la consola, consulte el tema Consola.

Uso de la API DOM

DOM significa **Documento Oobjeto Mmodelo. Es una representación orientada a objetos de documentos estructurados como XML y HTML.

Establecer la propiedad textContent de un Element es una forma de generar texto en una página web.

Por ejemplo, considere la siguiente etiqueta HTML:

<p id="paragraph"></p>

Para cambiar su propiedad textContent, podemos ejecutar el siguiente JavaScript:

document.getElementById("paragraph").textContent = "Hello, World";

Esto seleccionará el elemento que tiene el id paragraph y establecerá su contenido de texto en “Hello, World”:

<p id="paragraph">Hello, World</p>

(Véase también esta demostración)

También puede usar JavaScript para crear un nuevo elemento HTML mediante programación. Por ejemplo, considere un documento HTML con el siguiente cuerpo:

<body>
   <h1>Adding an element</h1>
</body>

En nuestro JavaScript, creamos una nueva etiqueta <p> con una propiedad textContent y la agregamos al final del cuerpo html:

var element = document.createElement('p');
element.textContent = "Hello, World";
document.body.appendChild(element); //add the newly created element to the DOM

Eso cambiará su cuerpo HTML a lo siguiente:

<body>
   <h1>Adding an element</h1>
   <p>Hello, World</p>
</body>

Tenga en cuenta que para manipular elementos en el DOM usando JavaScript, el código JavaScript debe ejecutarse después de que se haya creado el elemento relevante en el documento. Esto se puede lograr colocando las etiquetas JavaScript <script> después de todo el resto de su contenido <body>. Alternativamente, también puede usar un detector de eventos para escuchar, por ejemplo. evento onload de window, agregar su código a ese detector de eventos retrasará la ejecución de su código hasta que se haya cargado todo el contenido de su página.

Una tercera forma de asegurarse de que todo su DOM se haya cargado es envolver el código de manipulación DOM con una función de tiempo de espera de 0 ms. De esta manera, este código JavaScript se vuelve a poner en cola al final de la cola de ejecución, lo que le da al navegador la oportunidad de terminar de hacer algunas cosas que no son de JavaScript que han estado esperando para terminar antes de atender a esta nueva pieza de JavaScript.

4: https://stackoverflow.com/questions/779379/por-que-es-settimeoutfn-0-a veces-util

Usando ventana.alerta()

El método alerta muestra un cuadro de alerta visual en la pantalla. El parámetro del método de alerta se muestra al usuario en texto sin formato:

window.alert(message);

Debido a que ventana es el objeto global, también puede llamar usando la siguiente forma abreviada:

alert(message);

Entonces, ¿qué hace window.alert()? Bueno, tomemos el siguiente ejemplo:

alert('hello, world');

En Chrome, eso produciría una ventana emergente como esta: alerta

notas

El método alerta es técnicamente una propiedad del objeto ventana, pero dado que todas las propiedades ventana son automáticamente variables globales, podemos usar alerta como una variable global en lugar de como una propiedad de ventana - lo que significa que usted puede usar directamente alert() en lugar de window.alert().

A diferencia del uso de console.log, alert actúa como un mensaje modal, lo que significa que el código que llama a alert se detendrá hasta que se responda el mensaje. Tradicionalmente, esto significa que no se ejecutará ningún otro código JavaScript hasta que se descarte la alerta:

alert('Pause!');
console.log('Alert was dismissed');

Sin embargo, la especificación en realidad permite que otro código activado por eventos continúe ejecutándose aunque todavía se muestre un cuadro de diálogo modal. En tales implementaciones, es posible que se ejecute otro código mientras se muestra el cuadro de diálogo modal.

Puede encontrar más información sobre [el uso del método alert] (https://www.wikiod.com/es/javascript/modales—peticiones#Uso de alerta()) en [indicaciones modales] (http ://stackoverflow.com/documentation/javascript/3196/modals-prompts) tema.

Por lo general, se desaconseja el uso de alertas en favor de otros métodos que no impidan que los usuarios interactúen con la página, con el fin de crear una mejor experiencia de usuario. Sin embargo, puede ser útil para la depuración.

A partir de Chrome 46.0, window.alert() está bloqueado dentro de un <iframe> a menos que su atributo sandbox tenga el valor allow-modal.

Usando ventana.prompt()

Una manera fácil de obtener una entrada de un usuario es usando el método prompt().

Sintaxis 

prompt(text, [default]);
  • texto: el texto que se muestra en el cuadro de aviso.
  • predeterminado: un valor predeterminado para el campo de entrada (opcional).

Ejemplos 

var age = prompt("How old are you?");
console.log(age); // Prints the value inserted by the user

Cuadro de aviso

Si el usuario hace clic en el botón Aceptar, se devuelve el valor de entrada. De lo contrario, el método devuelve null.

El valor de retorno de prompt siempre es una cadena, a menos que el usuario haga clic en Cancelar, en cuyo caso devuelve null. Safari es una excepción porque cuando el usuario hace clic en Cancelar, la función devuelve una cadena vacía. A partir de ahí, puede convertir el valor devuelto a otro tipo, como un entero.

notas

  • Mientras se muestra el cuadro de diálogo, el usuario no puede acceder a otras partes de la página, ya que los cuadros de diálogo son ventanas modales.
  • A partir de Chrome 46.0, este método está bloqueado dentro de un <iframe> a menos que su atributo sandbox tenga el valor allow-modal.

Usando ventana.confirmar()

El método window.confirm() muestra un cuadro de diálogo modal con un mensaje opcional y dos botones, Aceptar y Cancelar.

Ahora, tomemos el siguiente ejemplo:

result = window.confirm(message);

Aquí, mensaje es la cadena opcional que se mostrará en el cuadro de diálogo y resultado es un valor booleano que indica si se seleccionó Aceptar o Cancelar (verdadero significa Aceptar).

window.confirm() generalmente se usa para solicitar la confirmación del usuario antes de realizar una operación peligrosa como eliminar algo en un Panel de control:

if(window.confirm("Are you sure you want to delete this?")) {
    deleteItem(itemId);
}

La salida de ese código se vería así en el navegador:

El Diálogo de Confirmación es muy simple: Mensaje, Aceptar, Cancelar

Si lo necesita para un uso posterior, simplemente puede almacenar el resultado de la interacción del usuario en una variable:

var deleteConfirm = window.confirm("Are you sure you want to delete this?");

notas

  • El argumento es opcional y no es requerido por la especificación.
  • Los cuadros de diálogo son ventanas modales: evitan que el usuario acceda al resto de la interfaz del programa hasta que se cierra el cuadro de diálogo. Por esta razón, no debe abusar de ninguna función que cree un cuadro de diálogo (o ventana modal). E independientemente, hay muy buenas razones para evitar el uso de cuadros de diálogo para la confirmación.
  • A partir de Chrome 46.0, este método está bloqueado dentro de un <iframe> a menos que su atributo sandbox tenga el valor allow-modal.
  • Se acepta comúnmente llamar al método de confirmación con la notación de ventana eliminada ya que el objeto de ventana siempre está implícito. Sin embargo, se recomienda definir explícitamente el objeto de la ventana, ya que el comportamiento esperado puede cambiar debido a la implementación en un nivel de alcance más bajo con métodos con nombres similares.

Uso de la API DOM (con texto gráfico: lienzo, SVG o archivo de imagen)

Usando elementos de lienzo

HTML proporciona el elemento de lienzo para crear imágenes basadas en tramas.

Primero construya un lienzo para contener la información de los píxeles de la imagen.

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 250;

Luego seleccione un contexto para el lienzo, en este caso bidimensional:

var ctx = canvas.getContext('2d');

Luego establezca propiedades relacionadas con el texto:

ctx.font = '30px Cursive';
ctx.fillText("Hello world!", 50, 50);

Luego inserte el elemento canvas en la página para que surta efecto:

document.body.appendChild(canvas);

Usando SVG

SVG es para crear gráficos escalables basados ​​en vectores y se puede usar dentro de HTML.

Primero cree un contenedor de elementos SVG con dimensiones:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.width = 500;
svg.height = 50;

A continuación, cree un elemento de texto con el posicionamiento deseado y las características de fuente:

var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', '0');
text.setAttribute('y', '50');
text.style.fontFamily = 'Times New Roman';
text.style.fontSize = '50';

Luego agregue el texto real para mostrar al elemento text:

text.textContent = 'Hello world!';

Finalmente agregue el elemento texto a nuestro contenedor svg y agregue el elemento contenedor svg al documento HTML:

svg.appendChild(text);
document.body.appendChild(svg);

Archivo de imagen

Si ya tiene un archivo de imagen que contiene el texto deseado y lo tiene colocado en un servidor, puede agregar la URL de la imagen y luego agregar la imagen al documento de la siguiente manera:

var img = new Image();
img.src = 'https://i.ytimg.com/vi/zecueq-mo4M/maxresdefault.jpg';
document.body.appendChild(img);
promesas →