034.1 Lección 1

Certificación:

Conceptos básicos de desarrollo web

Versión:

1.0

Tema:

034 Programación JavaScript

Objetivo:

034.1 Ejecución y sintaxis de JavaScript

Lección:

1 de 1

Introducción

Las páginas web se desarrollan utilizando tres tecnologías estándares: HTML, CSS y JavaScript. JavaScript es un lenguaje de programación que permite al navegador actualizar dinámicamente el contenido del sitio web. El código Javascript generalmente lo ejecuta el mismo navegador que se usa para ver una página web. Esto significa que, al igual que CSS y HTML, el comportamiento exacto de cualquier código que escriba puede diferir entre los navegadores. Pero la mayoría de los navegadores habituales se adhieren a la especificación ECMAScript. Este es un estándar que unifica el uso de JavaScript en la web y será la base de la lección, junto con la especificación HTML5, que determina lo necesario para que un navegador ejecute el Código Javascript en una página web.

Ejecutar JavaScript en el navegador

Para ejecutar JavaScript, el navegador necesita obtener el código directamente, como parte del HTML que forma la página web, o como una URL que indica una ubicación para que se ejecute un script.

El siguiente ejemplo muestra cómo incluir código directamente en el archivo HTML:

<html>
  <head>
  </head>
  <body>
    <h1>Website Headline</h1>
    <p>Content</p>

    <script>
      console.log('test');
    </script>

  </body>
</html>

El código se coloca entre las etiquetas <script> y </script>. Todo lo incluido en estas etiquetas será ejecutado por el navegador directamente al cargar la página.

La posición del elemento <script> dentro de la página dicta cuándo se ejecutará. Un documento HTML se analiza de arriba a abajo, y el navegador decide cuándo mostrar los elementos en la pantalla. En el ejemplo que se acaba de mostrar, las etiquetas <h1> y <p> del sitio web se analizan, y probablemente se muestran, antes de que se ejecute el script. Si el código JavaScript dentro de la etiqueta <script> tardara mucho en ejecutarse, la página aún se mostraría sin ningún problema. Sin embargo, si el script se hubiera colocado antes de las otras etiquetas, el visitante de la página web tendría que esperar hasta que el script termine de ejecutarse para ver su contenido. Por esta razón, las etiquetas <script> generalmente se colocan en uno de dos lugares:

Al final del cuerpo HTML, de modo que el script sea lo último que se ejecute. Haga esto cuando el código agregue algo a la página que no sería útil sin el contenido. Un ejemplo sería agregar funcionalidad a un botón, ya que el botón debe existir para que la funcionalidad tenga sentido.
Dentro del elemento <head> del HTML. Esto asegura que la secuencia de comandos se ejecute antes de que se analice el cuerpo HTML. Si desea cambiar el comportamiento de carga de la página, o tiene algo que debe ejecutarse mientras la página aún no está completamente cargada, puede poner el script aquí. Además, si tiene varios scripts que dependen de otro en particular, puede poner ese script compartido en el encabezado para asegurarse de que se ejecute antes que otros.

Por una variedad de razones, incluida la capacidad de administración, es útil colocar el código JavaScript en archivos separados que existen fuera del código HTML. Los archivos JavaScript externos se incluyen mediante una etiqueta <script> con un atributo src, de la siguiente manera:

<html>
  <head>
    <script src="/button-interaction.js"></script>
  </head>
  <body>
  </body>
</html>

La etiqueta src le especifica al navegador la ubicación de la fuente, es decir, el archivo que contiene el código JavaScript. La ubicación puede ser un archivo en el mismo servidor, como en el ejemplo anterior, o cualquier URL accesible desde la web como https://www.lpi.org/example.js. El valor del atributo src sigue la misma convención que la importación de archivos CSS o de imágenes, ya que puede ser relativo o absoluto. Al encontrar una etiqueta script con el atributo src, el navegador intentará obtener el archivo fuente mediante una solicitud HTTP GET, por lo que los archivos externos deben ser accesibles.

Cuando utiliza el atributo src, cualquier código o texto que se coloque entre las etiquetas <script>…</script> se ignora, de acuerdo con la especificación HTML.

<html>
  <head>
    <script src="/button-interaction.js">
      console.log("test"); // <-- This is ignored
    </script>
  </head>
  <body>
  </body>
</html>

Hay otros atributos que puede agregar a la etiqueta script para especificar con más detalle cómo el navegador debe obtener los archivos y cómo debe manejarlos después. La siguiente lista detalla los atributos más importantes:

async

Puede usarse en etiquetas script e indica al navegador que cargue el script en segundo plano, para no bloquear el proceso de carga de la página. La carga de la página seguirá siendo interrumpida después de que el navegador obtenga el script, porque el navegador tiene que analizarlo, lo que se hace inmediatamente una vez que el script se ha recuperado por completo. Este atributo es booleano, por lo que escribir la etiqueta como <script async src="/script.js"></script> es suficiente y no es necesario proporcionar ningún valor.

defer

Similar a async, esto le indica al navegador que no bloquee el proceso de carga de la página mientras obtiene el script. En lugar de eso, el navegador aplazará el análisis del script. El navegador esperará hasta que se haya analizado todo el documento HTML y solo entonces analizará el script, antes de anunciar que el documento se ha cargado por completo. Al igual que async, defer es un atributo booleano y se usa de la misma manera. Dado que defer implica async, no es útil especificar ambas etiquetas juntas.

Note

Cuando una página se analiza por completo, el navegador indica que está lista para mostrarse activando un evento DOMContentLoaded, cuando el visitante podrá ver el documento. Por lo tanto, el JavaScript incluido en un evento <head> siempre tiene la oportunidad de actuar en la página antes de que se muestre, incluso si incluye el atributo defer.

type

Denota qué tipo de script debe esperar el navegador dentro de la etiqueta. El valor predeterminado es JavaScript (type="application/javascript"), por lo que este atributo no es necesario cuando se incluye código JavaScript o se apunta a un recurso JavaScript con la etiqueta src. Generalmente, se pueden especificar todos los tipos MIME, pero el navegador solo ejecutará los scripts que se denotan como JavaScript. Hay dos casos de uso realistas para este atributo: indicarle al navegador que no ejecute el script configurando type en un valor arbitrario como template u other, o decirle al navegador que el script es un módulo ES6. No cubrimos los módulos ES6 en esta lección.

Warning

Cuando varios scripts tienen el atributo async, se ejecutarán en el orden en que terminan de descargarse, no en el orden de las etiquetas script en el documento. El atributo defer, por otro lado, mantiene el orden de las etiquetas script.

Consola del navegador

Aunque normalmente se ejecuta como parte de un sitio web, hay otra forma de ejecutar JavaScript: a través de la consola del navegador. Todos los navegadores de escritorio modernos proporcionan un menú a través del cual puede ejecutar código JavaScript en el motor JavaScript de éstos. Esto generalmente se hace para probar código nuevo o para depurar sitios web existentes.

Hay varias formas de acceder a la consola del navegador, en dependencia de éste. La forma más sencilla es mediante atajos de teclado. Los siguientes son los atajos de teclado para algunos de los navegadores actualmente en uso:

Chrome: Ctrl+Shift+J (Cmd+Option+J en Mac)
Firefox: Ctrl+Shift+K (Cmd+Option+K en Mac)
Safari: Ctrl+Shift+? (Cmd+Option+? en Mac)

También puede hacer clic derecho en una página web y seleccionar la opción “Inspeccionar” o “Inspeccionar elemento” para abrir el inspector, que es otra herramienta del navegador. Cuando se abra el inspector, aparecerá un nuevo panel. En este panel, puede seleccionar la pestaña “Consola”, que abrirá la consola del navegador.

Una vez que abra la consola, puede ejecutar JavaScript en la página escribiendo el código directamente en el campo de entrada. El resultado de cualquier código ejecutado se mostrará en una línea separada.

Declaraciones de JavaScript

Ahora que sabemos cómo comenzar a ejecutar un script, cubriremos los conceptos básicos de cómo se ejecuta realmente un script. Un script JavaScript es una colección de sentencias y bloques. Una declaración de ejemplo es console.log('test'). Esta instrucción le indica al navegador que envíe la palabra test a la consola.

Cada declaración en JavaScript termina con un punto y coma (;). Esto indica al navegador que la declaración está lista y que se puede iniciar una nueva. Considere el siguiente script:

var message = "test"; console.log(message);

Hemos escrito dos declaraciones. Cada declaración termina con un punto y coma o con el final de la secuencia de comandos. Por motivos de legibilidad, podemos poner las declaraciones en líneas separadas. De esta forma, el script también podría escribirse como:

var message = "test";
console.log(message);

Esto es posible porque se ignoran todos los espacios en blanco entre declaraciones, como un espacio, una nueva línea o un tab. Los espacios en blanco también se pueden colocar entre palabras claves individuales dentro de declaraciones, pero esto se explicará con más detalle en una próxima lección. Las declaraciones también pueden estar vacías o compuestas solo de espacios en blanco.

Si una declaración no es válida porque no ha sido terminada con un punto y coma, ECMAScript intenta insertar automáticamente los puntos y comas adecuados, basándose en un conjunto complejo de reglas. La regla más importante es: si una declaración no válida se compone de dos declaraciones válidas separadas por una nueva línea, inserte un punto y coma en la nueva línea. Por ejemplo, el siguiente código no forma una declaración válida:

console.log("hello")
console.log("world")

Pero un navegador moderno lo ejecutará automáticamente como si estuviera escrito con el punto y coma adecuado:

console.log("hello");
console.log("world");

Por tanto, es posible omitir el punto y coma en determinados casos. Sin embargo, como las reglas para la inserción automática de punto y coma son complejas, le recomendamos que siempre termine correctamente sus declaraciones para evitar errores no deseados.

Comentarios de JavaScript

Los scripts grandes pueden volverse bastante complicados. Es posible que desee comentar sobre lo que está escribiendo, para que el script sea más fácil de leer para otras personas o para usted mismo en el futuro. Alternativamente, es posible que desee incluir metainformación en el script, como información de derechos de autor o sobre cuándo se escribió el script y por qué.

Para que sea posible incluir dicha metainformación, JavaScript admite comentarios. Un desarrollador puede incluir caracteres especiales en un script que denoten ciertas partes del mismo como un comentario, que se omitirá en la ejecución. La siguiente es una versión muy comentada del script que vimos anteriormente.

/*
 This script was written by the author of this lesson in May, 2020.
 It has exactly the same effect as the previous script, but includes comments.
*/

// First, we define a message.
var message = "test";

console.log(message); // Then, we output the message to the console.

Los comentarios no son declaraciones y no es necesario terminar con un punto y coma. Hay dos formas de escribir comentarios en JavaScript:

Multi-line comment

Use /* and */ to signal the start and end of a multi-line comment. Everything after /*, until the first occurrence of */ is ignored. This kind of comment is generally used to span multiple lines, but it can also be used for single lines, or even within a line, like so:

console.log(/* what we want to log: */ "hello world")

Debido a que el objetivo de los comentarios generalmente es aumentar la legibilidad de un script, debe evitar usar este estilo de comentario dentro de una línea.

Comentario de una sola línea

Use // (dos barras diagonales) para comentar una línea. Todo lo que sigue a la barra doble en la misma línea se ignora. En el ejemplo mostrado anteriormente, este patrón se usa primero para comentar una línea completa. Después de la instrucción console.log(message);, se usa para escribir un comentario en el resto de la línea.

En general, los comentarios de una sola línea deben usarse para líneas simples y los comentarios de varias líneas cuando el comentario sea relativamente extenso, incluso si es posible usarlos de otras formas. Deben evitarse los comentarios dentro de una declaración.

Los comentarios también se pueden utilizar para eliminar temporalmente líneas de código real, de la siguiente manera:

// We temporarily want to use a different message
// var message = "test";
var message = "something else";

Ejercicios guiados

Cree una variable llamada ColorName y asígnele el valor RED.

¿Cuáles de los siguientes scripts son válidos?

console.log("hello") console.log("world");

console.log("hello"); console.log("world");

// console.log("hello") console.log("world");

console.log("hello"); console.log("world") //;

console.log("hello"); /* console.log("world") */

Ejercicios de exploración

¿Cuántas declaraciones de JavaScript se pueden escribir en una sola línea sin usar un punto y coma?
Cree dos variables llamadas x y y, luego imprima su suma en la consola.

Resumen

En esta lección, aprendimos diferentes formas de ejecutar JavaScript y cómo modificar el comportamiento de carga del script. También aprendimos los conceptos básicos de composición y comentarios de scripts, y hemos aprendido a usar el comando console.log().

HTML utilizado en esta lección:

<script>: La etiqueta script puede usarse para incluir JavaScript directamente o especificando un archivo con el atributo src. Modifica cómo se carga el script con los atributos async y defer.

Conceptos de JavaScript presentados en esta lección:

;: Se utiliza un punto y coma para separar declaraciones. El punto y coma a veces se puede omitir, pero no se recomienda.
//, /*…*/: Los comentarios se pueden utilizar para agregar comentarios o metainformación en un script, o para evitar que se ejecuten declaraciones.
console.log("text"): El comando console.log() se puede usar para enviar texto a la consola del navegador.

Respuestas a los ejercicios guiados

Cree una variable llamada ColorName y asígnele el valor RED.
```
var ColorName = "RED";
```

¿Cuáles de los siguientes scripts son válidos?

console.log("hello") console.log("world");

No válido: El primer comando console.log() no está terminado correctamente y la línea en su conjunto no forma una declaración válida.

console.log("hello"); console.log("world");

Válido: cada declaración se termina correctamente.

// console.log("hello") console.log("world");

Válido: Se ignora todo el código porque es un comentario.

console.log("hello"); console.log("world") //;

No válido: a la última declaración le falta un punto y coma. El punto y coma al final se ignora porque está comentado.

console.log("hello"); /* console.log("world") */

Válido: una declaración válida va seguida de un código comentado, que se ignora.

Respuestas a los ejercicios de exploración

¿Cuántas declaraciones de JavaScript se pueden escribir en una sola línea sin usar un punto y coma?

Si estamos al final de una secuencia de comandos, podemos escribir una declaración y se terminará al final del archivo. De lo contrario, no puede escribir una declaración sin un punto y coma con la sintaxis que aprendió hasta ahora.
Cree dos variables llamadas x e y, luego imprima su suma en la consola.
```
var x = 5;
var y = 10;
console.log(x+y);
```