Crear un hello world en JavaScript

Autor: | Última modificación: 13 de octubre de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post:

Un hello world es uno de los proyectos más básicos que podemos crear en un editor de código. Por ello, es una gran manera de empezar a escribir en un nuevo lenguaje de programación. En este post, te enseñaremos cómo crear un hello world en JavaScript para el frontend de la web.

Antes de empezar

El primer paso para crear un hello world en JavaScript es crear un archivo index.html en nuestro editor. Allí, podemos insertar un esqueleto muy básico para levantar una aplicación en el navegador. Este se ve como en la imagen siguiente:

Esqueleto HTML para crear un hello world en JavaScript

Como puedes ver, el esqueleto tiene un doctype que define el HTML y un lang para definir el idioma estándar, como puede ser el inglés. Aunque puedes definir el idioma en español, no es lo usual.

Luego, tenemos una cabecera de la web, donde se encuentran las distintos metas. Allí se definen sencillamente la meta de codificación de nuestro archivo (UTF-8), la meta de soporte para navegadores como IE=Edge y la meta de viewport. Este último hace que la web tenga un look and feel de móvil cuando está siendo visualizada en este dispositivo, en vez de verse como un zoom enorme. Estas características son un denominador común en todas las aplicaciones web.

Dentro del elemento header, tenemos también un elemento title, que hemos decidido separar de las metas para poner varias etiquetas script después de este elemento. El elemento title pinta el texto que queremos que se vea en la pestaña de nuestro navegador. Allí podríamos poner, por ejemplo, Hello World KC.

¿Cómo crear un hello world en JavaScript?

Ahora, existen varias formas de crear un hello world en JavaScript para pintarlo en el navegador. La primera manera es usar una etiqueta script, que define que el contenido del código de esta etiqueta es JavaScript. Para conocer otras maneras de declarar lo mismo, te invitamos a leer nuestro post sobre cargar JavaScript en HTML.

Ahora que tenemos esta etiqueta, podemos pintar un simple hello world usando el comando de JavaScript console.log:

<script>

console.log (‘hola mundo!’)

</script>

Ten en cuenta que pintar un console.log dentro de una etiqueta script es muy diferente a simplemente hacerlo dentro del elemento body HTML. Como puedes ver en la imagen siguiente, el mismo editor de texto reconoce los colores del comando solo cuando está dentro de script.

Crear un hello world en JavaScript 1

¿Por qué sucede esto? Pues porque fuera de la etiqueta script, tanto el navegador como el editor esperan que escribamos HTML y no JavaScript. En este sentido, esperan un elemento div o p antes de escribir algo en pantalla.

¿Qué sigue?

Ahora que sabes cómo crear un hello world en JavaScript, ¡ha llegado el momento de seguir aprendiendo sobre este gran lenguaje de programación! Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación íntegra e intensiva donde aprenderás a dominar herramientas y lenguajes como JavaScript, HTML, CSS y JSX. ¡No te lo pierdas y solicita información para descubrir cómo cambiar tu vida!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!