Javascript, parte 1: Introducción

A partir de esta publicación aprenderemos el lenguaje de programación Javascript. Pero antes que sigas leyendo, permitime responderte algunas preguntas.

¿Necesito saber programar?

No. La idea es arrancar desde 0 (cero) o tal vez -1. Veremos conceptos muy básicos de la programación y que existen en todos los lenguajes explicado para cualquier persona que quiera aprender a desarrollar.

¿Necesito saber algo?

De preferencia un poco de HTML y CSS. No es que tengas que ser un/a experto/a en esto, porque veremos cosas muy básicas de estos lenguajes, pero sí es recomendable.

¿Cual será el recorrido?

A lo largo de estas publicaciones aprenderemos a programar con Javascript, veremos características del lenguaje para finalmente introducirnos en la creación de aplicaciones más ricas con tecnologías como Express y React.

Un poco de historia

Javascript fue inventado en el año 1995 por Brendan Eich. Tiene la particularidad de ser un lenguaje que corre en el navegador del usuario en lugar del servidor (aunque también existe la posibilidad de esto último)

Imaginate que toda interacción de un sitio con el usuario se resuelve con este lenguaje. Por ejemplo: un formulario, es muy común que al rellenar uno nos olvidemos de completar algún campo obligatorio o que esta información sea incorrecta. En sus inicio el envío de información al servidor era muy lento, por eso la idea de crear un lenguaje que pudiese resolverse en la máquina del usuario.

Escribiendo el código

Para empezar a escribir el código vamos a necesitar un editor. Algunos ejemplos pueden ser notepad++ o Visual studio code. En mi caso yo usaré este último.

Vamos a crear un directorio en alguna parte de nuestra compu con algún nombre, por ejemplo: «Ejemplo Javascript» y vamos a cargarla con el visual studio de la siguiente manera:

File / Add Folder to Workspace / La ruta de nuestro proyecto

Y por último vamos a incluir esa carpeta.

Una vez dentro vamos a crear un archivo .html con cualquier nombre, por ejemplo: «index.html»

Y el siguiente código:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo Javascript</title>
</head>
<body>
    <!-- Acá adentro vamos a ingresar código Javascript -->
</body>
</html>

Etiqueta <script>

Para ingresar código Javascript tenemos dos posibilidades. La primera será utilizar la etiqueta de apertura y cierre <script> de la siguiente manera:

Reemplazamos:

<!-- Acá adentro vamos a ingresar código Javascript -->

Por:

<script>
        alert('Hola mundo');
</script>

Si ahora abrimos un navegador y ejecutamos el archivo .html que acabamos de crear deberíamos ver algo como esto:

Aunque esto último dependerá del navegador y versión que tengas.

Ahora, lo importante es entender qué fue lo que hicimos: cuando nosotros programamos, lo que estamos haciendo es darle instrucciones a algo llamado intérprete. No todos los lenguajes de programación son interpretados, algunos son compilados. Pero por si alguien te pregunta en el caso de Javascript es un lenguaje interpretado.

El método alert (más adelante veremos qué es un método) le indica al navegador que debe visualizarse esa ventana donde se podrá mostrarle un mensaje al usuario. Y el motivo de por qué se escribe con comillas es porque en Javascript el texto debe indicarse de esa manera para que no entre en conflicto con otro tipo de cosas como instrucciones.

Y el caracter «;» (punto y coma) no es obligatorio, aunque sí es una buena práctica escribirlo para indicar que finaliza una instrucción.

Archivos .js

El el código Javascript puede escribirse dentro del documento html, pero lo más recomendable es que éste se haga dentro de otro archivo con extensión .js.

Para eso vamos a crear dentro de nuestro proyecto un archivo con algún nombre, por ejemplo: «scripts.js» Y vamos a hacer algunos cambios.

Vamos a reemplazar:

<script>
        alert('Hola mundo');
</script>

Por:

<script src="scripts.js"></script>

Y dentro de ese archivo: scripts.js, vamos a incluir el código:

alert("Hola mundo");

En este último caso, vimos que la etiqueta <script> tiene un atributo llamado scr, el cual nos permite acceder al código dentro de otro archivo.

Si el archivo scripts.js estuviese dentro de un carpeta entonces deberíamos cambiar:

<script src="scripts.js"></script>

Por:

<script src="nombre_de_la_carpeta/scripts.js"></script>

En la próxima publicación aprenderemos nuevas características del lenguaje.

¡Saludos!