Uso de Javascript

¡Bienvenido! En esta primera lección veremos cómo preparar el ordenador para poder ejecutar tus primeros programas en Javascript.

No te preocupes al principio si no entiendes el código que veremos en esta lección, simplemente lo vamos a utilizar para comprobar que tu ordenador está preparado para ejecutar Javascript.

Como ejecutar Javascript

El primer paso para poder codear es ver las distintas formas que tenemos de ejecutar el código Javascript.

Ejecutando en consola

:pencil: NOTA los ejemplos están realizados sobre Mozilla Firefox pero es aplicable a los principales navegadores

Es probable que nunca te hayas fijado, o hayas entrado accidentalmente, en esta herramienta que poseen los navegadores ya que no es notable en el uso diario de un navegador, me refiero a inspeccionar(F12) Puedes acceder abriendo una ventana de tu navegador y pulsando la tecla F12 o click der + inspeccionar

Una vez abierto el panel de Inspeccionar, vemos que existen muchas posibilidades, pero por el momento nos vamos a centrar únicamente en la opción de consola que ofrece esta herramienta. Gracias a consola podemos ejercutar y probar nuestro código y ver los resultados para depurarlos y todo directamente desde el navegador.

La consola del navegador también ofrece herramientas de depuración, como puntos de interrupción, seguimiento de llamadas y más. Estas herramientas te permiten inspeccionar el estado de tu código, realizar un seguimiento de las variables y solucionar problemas.

Otras formas de ejecutar Javascript

Además de ejecutar JavaScript en la consola del navegador y mediante la inclusión de código en un archivo HTML, existen otras formas de ejecutar JavaScript en diferentes entornos y contextos. Algunas de estas formas incluyen:

• Node.js: Node.js es un entorno de tiempo de ejecución de JavaScript basado en el motor V8 de Chrome. Permite ejecutar código JavaScript en el servidor o en la línea de comandos, lo que lo hace útil para la creación de aplicaciones del lado del servidor. Puedes ejecutar scripts de JavaScript con Node.js utilizando el comando node seguido del nombre del archivo. Por ejemplo: node mi_script.js.
• Extensiones y complementos del navegador: Algunos navegadores permiten crear extensiones o complementos que pueden ejecutar código JavaScript en el contexto del navegador. Estas extensiones o complementos pueden agregar funcionalidad adicional a los sitios web o modificar su comportamiento. Los desarrolladores pueden escribir código JavaScript para extender las capacidades del navegador.
• Herramientas de automatización de pruebas: Existen herramientas de automatización de pruebas como Selenium o Puppeteer que permiten ejecutar código JavaScript para automatizar pruebas en aplicaciones web. Estas herramientas simulan la interacción de un usuario con la aplicación y pueden ejecutar secuencias de comandos escritas en JavaScript para verificar el funcionamiento correcto de la aplicación.
• Entornos de desarrollo integrados (IDE): Los IDEs populares para desarrollo web, como Visual Studio Code, Atom o WebStorm, tienen soporte para la ejecución de código JavaScript directamente dentro del editor. Esto facilita la prueba y la depuración del código sin la necesidad de abrir un navegador o una consola externa.

Cómo enlazar o agregar código Javascript

Para ejecutar código JS al principio, vamos a hacer uso de HTML. Todo código JS que queramos ejecutar debe estar vinculado a un archivo .html. Será ese archivo .html el que abramos en el navegador.

Vamos a ver las distintas opciones de enlazar nuestro código JavaScript con un HTML.

Vincular un archivo externo

:white_check_mark: RECOMENDADO

La forma más recomendada de agregar código JavaScript a tu página web es vinculando un archivo externo. Esto implica crear un archivo separado con extensión .js que contenga tu código JavaScript y luego enlazarlo en tu archivo HTML.

Para vincular un archivo JavaScript externo, sigue estos pasos:

1. Crea un archivo nuevo con extensión .js, por ejemplo, script.js. Puedes utilizar cualquier editor de texto para crear este archivo.

2. Escribe tu código JavaScript dentro de este archivo. Puedes incluir todas tus funciones, variables y lógica de programación en este archivo. De momento puedes copiar este código en script.js:

   console.log("Hola, mundo!");

3. Crea un archivo .html, llamado por ejemplo index.html. Este ejemplo es la base de cualquier .html:

    <html>
    <head>
        <title>Mi página web</title>
    </head>
    <body>
        <!-- Contenido de tu página -->
    </body>
    </html>

4. Guarda el archivo .js en la misma carpeta o directorio que tu archivo HTML.

5. En tu archivo HTML, dentro de la etiqueta <head> o antes del cierre de la etiqueta <body>, agrega una etiqueta de <script> con el atributo src que apunte al archivo JavaScript externo.

   Ejemplo de enlace de archivo JavaScript en HTML:

   <html>
   <head>
       <title>Mi página web</title>
       <script src="script.js"></script>
   </head>
   <body>
       <!-- Contenido de tu página -->
   </body>
   </html>

Con esto tendríamos ya enlazado nuestro código JS con un HTML, de manera que al abrir en el navegador el HTML se ejecutaría el JS.

Insertar código directamente en HTML

:heavy_exclamation_mark: NO RECOMENDADO ya que es más escalable, fácil de leer y de mantener tener el código Javascript en fichero separado, tal y como hemos visto en el apartado anterior

Si bien se recomienda vincular un archivo externo para el código JavaScript, también es posible insertar el código directamente en el archivo HTML utilizando la etiqueta <script>. Sin embargo, esto no se considera una buena práctica para proyectos más grandes y complejos, ya que puede dificultar el mantenimiento y la legibilidad del código.

Para insertar código JavaScript directamente en HTML, sigue estos pasos:

1. En tu archivo HTML, dentro de la etiqueta <head> o antes del cierre de la etiqueta <body>, agrega una etiqueta de script.

   Ejemplo de inserción de código JavaScript en HTML:

   <html>
   <head>
       <title>Mi página web</title>
       <script>
       console.log("Hola, mundo!");
       </script>
   </head>
   <body>
       <!-- Contenido de tu página -->
   </body>
   </html>

Al insertar el código directamente en el archivo HTML, el código se ejecutará en la ubicación donde se encuentra. Sin embargo, si tienes mucho código JavaScript, puede volverse difícil de mantener y depurar.

Ejemplo de prueba

Vamos a trabajar con el primer método, insertanto JS en un archivo aparte al HTML.

En nuestro proyecto tendremos index.html:

<html>
<head>
    <title>Mi página web</title>
    <script src="script.js"></script>
</head>
<body>
    <!-- Contenido de tu página -->
</body>
</html>

Y script.js:

console.log("Hola, mundo!");

Ahora, dependiendo del editor en el que estemos vamos a abrir/ejecutar el archivo index.html.

En Visual Studio Code por ejemplo se puede hacer con click derecho --> Open with Live Server o Open in Browser.

Una vez hayas conseguido que se abra el navegador con tu index.html verás que no se muestra "nada" en el navegador, simplemente una página en blanco. Esto es porque nuestra página html no tiene nada (ni botones, ni texto...):

A continuación, si clicas la opción de Inspeccionar que hemos mencionado al principio se abrirá tu consola:

Mostrando el mensaje "Hola, mundo!".

Si esto funciona, ya estás listo para ejecutar cualquier programa de JavaScript.