Sección 1: JavaScript

Lección 10: JavaScript en nuestro sitio web

¡Bienvenidos! Vamos a tomar un descanso de aprender la sintaxis de JavaScript. En esta ocasión vamos a aprender cómo el JavaScript de nuestros sitios web se ejecuta en los navegadores web. Vamos a utilizar una imagen que ya hemos visto muchas veces en el curso anterior.

En el curso anterior aprendimos cómo el navegador muestra nuestro código en HTML y CSS. Si recordamos, el archivo HTML es enviado al navegador web.

Luego este archivo HTML contiene una etiqueta “link” que permite enlazar al navegador web con un archivo CSS.

¿Y qué hay del archivo JavaScript? ¿Qué sucede con este archivo? Bueno, eso es justo lo que vamos a aprender en esta lección.

Para ello vamos a ingresar a Sublime y crear un nuevo archivo llamado index.html

Vamos a ingresar la palabra “html” y luego presionar la tecla Tab para crear de manera automática la estructura básica de un archivo html.

En el encabezado de este archivo vamos a colocar como título “JavaScript”.

En el cuerpo de este archivo vamos a colocar un encabezado con las palabras “JavaScript en HTML”.

Guardamos los cambios en el archivo y lo abrimos en nuestro navegador web.

Ahora, ¿cómo añadimos JavaScript a este archivo? Recordemos que para añadir CSS usábamos la etiqueta “link”, y dentro de ella teníamos un atributo “href” donde indicábamos la ubicación y el nombre del archivo CSS que deseábamos usar. Bueno, si recordamos lo que vimos al principio del curso anterior, JavaScript, al igual que HTML y CSS, es solo un archivo.

Así que creemos un archivo JavaScript, para aprender cómo funciona. En Sublime Text vamos a crear este nuevo archivo y lo guardaremos con el nombre “script.js” en la misma carpeta del archivo index.html que creamos recientemente.

El js en la extensión del archivo significa JavaScript. Como vemos en la parte inferior derecha, ahora Sublime Text advierte que nuestro archivo es un archivo de JavaScript.

Ahora podemos escribir algo como “4 + 3;” y veremos como Sublime Text resalta en colores nuestro código, indicando que ha reconocido como válida la sintaxis de JavaScript que escribimos.

También podemos escribir una sentencia if como la siguiente:

Ahora añadamos este archivo JavaScript a nuestro archivo HTML. Si logramos añadirlo exitosamente, obtendremos un mensaje de alerta que nos dirá “Sos inteligente”.

¿Cómo añadimos un archivo JavaScript a un archivo HTML? Bueno, existe una etiqueta HTML llamada “script”. Por lo tanto, la etiqueta “link” nos permite incorporar CSS a nuestras páginas HTML, y la etiqueta “script” nos permite incorporar código JavaScript a nuestras páginas HTML.

Lo único que debemos hacer es añadir a nuestra página una etiqueta “script” e indicar en su atributo “type” (tipo) que se tratar de un archivo texto con código JavaScript.

Dentro de las etiquetas “script” de apertura y clausura podemos escribir el código JavaScript que queramos. Por ejemplo podremos imprimir un mensaje de alerta con un saludo.

Acabamos de añadir JavaScript a nuestro HTML. Pero en realidad lo que queremos hacer es añadir a nuestro HTML un archivo que contenga el código JavaScript que deseamos ejecutar.

Tal como lo hicimos con CSS, no necesitábamos tener todo el código de los estilos dentro de nuestros archivos HTML, simplemente creábamos un archivo CSS aparte y lo vinculábamos desde todos los archivos HTML que quería usarlo. Ahora hagamos lo mismo con nuestro archivo de JavaScript.

La manera de hacerlo es a través de la etiqueta “script” y su atributo “src” (source - fuente). Quizás recordemos este atributo de la etiqueta “img” (image - imagen). Por lo tanto, incorporamos el atributo “src” a nuestra etiqueta “script” y le asignamos el valor “script.js”. Recordemos que, en este ejemplo, tanto “index.html” como “script.js” se encuentran guardados en la misma carpeta.

Si guardamos nuestro archivo “index.html” y recargamos la página en nuestro navegador vemos que obtendremos el mensaje de alerta “Sos inteligente”.

¿Qué sucede si tenemos más de un archivo JavaScript? Recuerden que ya nos topamos con una situación así en el curso anterior, cuando incorporamos Bootstrap a nuestras páginas web. En ese caso incorporamos tres etiquetas “script” para indicar la incorporación de tres archivos JavaScript necesarios para el uso de Bootstrap.

De esta misma manera, nosotros podríamos tener por ejemplo un archivo “script2.js” y otro archivo “script3.js”. Todos estos archivos se ejecutarán uno a uno en el orden que los hayamos incorporado en nuestro archivo HTML.

Bueno, por ahora eliminemos la segunda y tercera etiqueta “script” que acabamos de incorporar.

Veamos una última cosa en esta lección. ¿Cómo podemos mostrar mensajes en la consola? Sería bueno que en lugar de ventanas de diálogo de alerta, usemos la consola para mostrar mensajes.

En JavaScript podemos usar “console.log” y luego entre paréntesis colocar el mensaje que deseamos imprimir en la consola, por ejemplo: console.log(“Hola”);

Reemplacemos el mensaje de alerta por la impresión en consola en nuestro archivo “script.js”.

Guardemos el archivo JavaScript y recarguemos la página “index.html” en nuestro navegador web.

Ahora probemos agregar muchos mensajes más. Con lo cual veremos que es mucho más cómodo imprimir estos mensajes en la consola, en lugar de estar mostrando ventanas de alerta que se abrirán una y otra vez.

Eso fue todo por esta lección.

Nos vemos en la siguiente.

¡Adios!