JavaScript Tutorial => Empezando 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

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.

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.