¡Comparte en redes sociales!

Crea tu primer hola mundo con JavaScript

Hoy os traemos algo distinto, vamos a hacer un pequeño “tutorial” para comenzar a programar JavaScript y generar nuestro primer “Hola mundo”. Nosotros nos hemos decantado por Visual Studio Code, para descargarlo, tenemos que dirigirnos a https://code.visualstudio.com/download y allí seleccionaremos nuestro sistema operativo y el sistema de archivos.

Image

Visual Studio Code nos permite el uso de extensiones para facilitarlos el trabajo a la hora de “picar” código y previsualizar páginas. En nuestro caso vamos a instalar 2 extensiones, para ello nos vamos al apartado de extensiones, escribimos el nombre de la extensión y en la parte que nos aparece a la derecha le damos a instalar. La primera de ellas será Prettier. Esta extensión nos formateara nuestro código para que se vea de una forma más limpia y sea más fácil entenderlo. Sirve tanto para JavaScript como para HTML o CSS.

Image

La segunda extensión será Live Server. Con ella podremos visualizar los cambios que desarrollemos de una página web en tiempo real. Live Server nos ejecuta en un explorador el archivo que estemos modificando actualizándolo con cada cambio en el archivo (Recordad marcar el autoguardado). Se instala de la misma forma que el anterior.

Image

Podríamos instalar multitud de extensiones más, pero con estas dos podemos comenzar a programar nuestro Hola Mundo.

Lo siguiente que vamos a hacer es crear una carpeta para guardar nuestro proyecto. En mi caso, he creado la carpeta prueba en el escritorio y la he arrastrado hasta el apartado de Explorador. Una vez tengamos la carpeta creada solo le tenemos que darle a crear archivo y le ponemos el nombre de index.html por ejemplo.

Image

Ahora dentro de nuestro index escribimos html y de las opciones, escogemos html5 para que nos genere el bloque básico de una página web.

Image

Ya, por último, lo que vamos a hacer, es dentro del <body> crear la etiqueta <script> que nos permitirá ejecutar el código JavaScript que escribamos dentro. Te muestro el ejemplo finalizado, hemos cambiado el título de la página, le hemos dado un encabezado y por último generamos nuestro código JavaScript. A la derecha de la imagen podemos ver la vista generada en el navegador, para ello debéis dar botón derecho en el código y clickear en Open with Live Server

Image

Si te gusta el mundo de la programación y quieres destacar del resto de desarrolladores, te recomendamos nuestro Máster en Desarrollo Web Fullstack, donde podrás aprender desde cero y con posibilidad de prácticas en empresas. Aprende con los mejores. Te esperamos!!

Suscríbete a nuestra newsletter para estar al día de todas las novedades

Información básica sobre protección de datos.
Responsable del tratamiento: Mainfor Soluciones Tecnológicas y Formación S.L.U.
Finalidad: Gestionar su suscripción a la newsletter.
Legitimación para el tratamiento: Consentimiento explícito del interesado otorgado al solicitar la inscripción.
Cesión de datos: No se cederán datos a terceros, salvo obligación legal.
Derechos: Podrá ejercitar los derechos de Acceso, Rectificación, Supresión, Oposición, Portabilidad y, en su caso Limitación, como se explica en la información adicional.
Información adicional: Puede consultar la información adicional y detallada sobre Protección de Datos en https://www.mainfor.edu.es/politica-privacidad
Desarrollo Web Fullstack Web Min

Leave a Comment