JavaScriptEmpezando con JavaScript

Observaciones

JavaScript (que no debe confundirse con Java ) es un lenguaje dinámico y débil que se usa para las secuencias de comandos del lado del cliente y del lado del servidor.

JavaScript es un lenguaje que distingue entre mayúsculas y minúsculas. Esto significa que el lenguaje considera que las mayúsculas son diferentes de sus equivalentes en minúsculas. Las palabras clave en JavaScript son minúsculas.

JavaScript es una implementación comúnmente referenciada del estándar ECMAScript.

Los temas en esta etiqueta a menudo se refieren al uso de JavaScript en el navegador, a menos que se indique lo contrario. Los archivos JavaScript por sí solos no pueden ejecutarse directamente desde el navegador; Es necesario incrustarlos en un documento HTML. Si tiene algún código JavaScript que le gustaría probar, puede incrustarlo en un contenido de marcador de posición como este y guardar el resultado como example.html :

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test page</title>
  </head>
  <body>
    Inline script (option 1):
    <script>
      // YOUR CODE HERE
    </script>
    External script (option 2):
    <script src="your-code-file.js"></script>
  </body>
</html>

Versiones

Versión Fecha de lanzamiento
1 1997-06-01
2 1998-06-01
3 1998-12-01
E4X 2004-06-01
5 2009-12-01
5.1 2011-06-01
6 2015-06-01
7 2016-06-14
8 2017-06-27

Utilizando console.log ()

Introducción

Todos los navegadores web modernos, NodeJs y casi todos los demás entornos de JavaScript admiten la escritura de mensajes en una consola utilizando 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 principalmente para fines de depuración.


Empezando

Abra la Consola de JavaScript en su navegador, escriba lo siguiente y presione Entrar :

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! a la consola y devuelve undefined (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() puede usarse 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 utilizar 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:

Consola concat


Placeholders

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

introduzca la descripción de la imagen aquí


Registrar objetos

A continuación vemos el resultado de registrar un objeto. Esto suele ser útil para registrar las respuestas JSON de las llamadas a la 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


Registrando elementos HTML

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

console.log(document.body);
 

Esto registrará lo siguiente en la consola:

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

Usando la API DOM

DOM significa D ocumento O bject M odel. Es una representación orientada a objetos de documentos estructurados como XML y HTML .

La configuración de 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 con el paragraph id y establecerá su contenido de texto en "Hola, Mundo":

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

(Ver también esta demo)


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 de 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á tu cuerpo HTML a lo siguiente:

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

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

Una tercera forma de asegurarse de que todo su DOM se ha cargado, es envolver el código de manipulación del DOM con una función de tiempo de espera de 0 ms . De esta manera, este código de 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 están en JavaScript que han estado esperando para finalizar antes de atender esta nueva pieza de JavaScript.

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

Utilizando elementos de lienzo

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

Primero construye un lienzo para contener información de píxeles de imagen.

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

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

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

A continuación, establezca las propiedades relacionadas con el texto:

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

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

document.body.appendChild(canvas);
 

Utilizando SVG

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

Primero crea un contenedor de elementos SVG con dimensiones:

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

Luego construye un elemento de text con las características de fuente y posicionamiento deseadas:

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 de text :

text.textContent = 'Hello world!';
 

Finalmente, agregue el elemento de text 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 coloca 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);
 

Utilizando window.alert ()

El método de alert 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 la window es el objeto global, puede llamar también usar la siguiente forma abreviada:

alert(message);
 

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

alert('hello, world');
 

En Chrome, eso produciría un pop-up como este: alerta

Notas

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

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

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

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

Puede encontrar más información sobre el uso del método de alert en el tema de solicitudes de modales .

El uso de alertas generalmente se desaconseja a favor de otros métodos que no impiden que los usuarios interactúen con la página, para crear una mejor experiencia de usuario. Sin embargo, puede ser útil para la depuración.

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

Utilizando window.confirm ()

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

Ahora, tomemos el siguiente ejemplo:

result = window.confirm(message);
 

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

window.confirm() se usa normalmente 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 su 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: impiden que el usuario acceda al resto de la interfaz del programa hasta que se cierre el cuadro de diálogo. Por este motivo, no debe abusar de ninguna función que cree un cuadro de diálogo (o ventana modal). Y, a pesar de todo, 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 se bloquea dentro de un <iframe> 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 la 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 inferior con métodos con nombres similares.

Utilizando window.prompt ()

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

Sintaxis

prompt(text, [default]);
  • texto : el texto que se muestra en el cuadro de solicitud.
  • 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

Caja de solicitud

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 la prompt siempre es una cadena, a menos que el usuario haga clic en Cancelar , en cuyo caso devuelve un null . Safari es una excepción porque cuando el usuario hace clic en Cancelar, la función devuelve una cadena vacía. Desde allí, puede convertir el valor de retorno a otro tipo, como un entero .

Notas

  • Mientras se muestra el cuadro de solicitud, 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 se bloquea dentro de un <iframe> menos que su atributo sandbox tenga el valor allow-modal.