Fundamentos de JavaScript. Parte 2 Curso de JavaScript de Principiante a Avanzado

Esta es la segunda parte de la serie de publicaciones del blog sobre JavaScript que te llevará de principiante a avanzado. Al final de esta serie, conocerás todos los conceptos básicos que necesitas saber para comenzar a programar en JavaScript. Sin más preámbulos, comencemos con el segundo tutorial.

Conceptos básicos de JavaScript – índice:

1. Conceptos básicos de JavaScript
2. Ejecución línea por línea
3. Dos formas de finalizar instrucciones
4. Comentarios

En esta publicación del blog continuaremos desde donde lo dejamos en la primera publicación del blog. En esta etapa, deberías tener tu navegador Google Chrome abierto y, más específicamente, tener abierta tu consola de JavaScript. Si por alguna razón las cerraste, sería un buen momento para volver a abrirlas. Comencemos a aprender los conceptos básicos de JavaScript.

Si estás en una Mac, el atajo de teclado para abrir la consola es presionar “opción + comando + J”, después de abrir Chrome. Si estás usando un dispositivo Windows, puedes usar el atajo de teclado “Control + Shift + J” para abrir la Consola de JavaScript, una vez que abras Chrome. O también puedes ir al menú en la parte superior y seleccionar Ver -> Desarrollador -> Consola de JavaScript.

Conceptos básicos de JavaScript

JavaScript, como todos los demás lenguajes de programación, es un lenguaje que usas para comunicarte con las computadoras. Al igual que un lenguaje natural tiene gramática y palabras conocidas para formar oraciones adecuadas, los lenguajes de programación también tienen ciertas reglas que debes seguir para comunicarte eficazmente con la computadora.

Por ejemplo, ciertas palabras significan ciertas cosas para el motor de JavaScript que ejecuta nuestro código, como la palabra clave “alert” que usamos en el tutorial anterior, que tenía el significado de mostrar una alerta al usuario con las palabras específicas que pusieron dentro de los paréntesis justo después. En nuestro caso, escribimos “¡Hola, Mundo!” así que obtuvimos una alerta que decía “¡Hola, Mundo!”.

También hay otras palabras clave reservadas en JavaScript de las que debemos estar al tanto para poder comunicarnos eficazmente con la computadora utilizando las palabras y la gramática correctas. Además, al igual que la gramática que tenemos en el lenguaje natural, también hay una gramática en los lenguajes de programación. Esa gramática se llama comúnmente “sintaxis” en los lenguajes de programación y JavaScript no es una excepción a esto. Por eso es una buena idea entender las palabras clave principales y la gramática que tenemos en JavaScript a medida que comenzamos a aprender sobre los conceptos básicos de JavaScript. Veamos algunas de las cosas principales que deberíamos saber sobre JavaScript.

Ejecución línea por línea

Cuando se trata de los conceptos básicos de JavaScript, una de las primeras cosas que debes saber es que el código que escribes se ejecutará línea por línea, de arriba hacia abajo. Este estilo de ejecución de código también se conoce como que JavaScript es un “lenguaje de programación interpretado”.

Por el contrario, algunos lenguajes de programación son “lenguajes de programación compilados”. Algunos ejemplos de lenguajes compilados serían: C, C++, C#, Swift, Java, etc. La principal diferencia es que con los lenguajes de programación compilados, todo el código que escribes será “compilado” y se ejecutará en una sola pieza por la computadora. Por eso también puede ser más difícil comenzar a aprender un lenguaje de programación compilado, ya que puede ser más complicado detectar dónde cometiste un error en tu programa.

Algunos ejemplos de lenguajes de programación interpretados serían JavaScript, Python, Bash y Matlab. Con los lenguajes de programación interpretados, tienes el beneficio inherente de ver en qué línea cometiste el error, por ejemplo, olvidando un punto y coma o no emparejando paréntesis en tu código. Tener esta característica puede no hacer una gran diferencia en ciertas aplicaciones, pero cuando estamos tratando de cargar un sitio web con una conexión a Internet lenta, prefieres que cada línea de JavaScript se ejecute lo más rápido posible.

Dos formas de finalizar instrucciones

Un programa de computadora, al final del día, es un conjunto de instrucciones para la computadora. Pero, ¿dónde termina un programa y dónde comienza la siguiente instrucción? Hay diferentes enfoques para este problema. JavaScript utiliza dos cosas principales, el punto y coma y los corchetes.

Dependiendo del tipo de instrucción que escribamos, generalmente usaremos uno u otro para finalizar o agrupar un conjunto de instrucciones. Usaremos diferentes tipos de paréntesis para diferentes funcionalidades y tipos de datos. Por ejemplo, en el código alert(“¡Hola, Mundo!”); que ejecutamos anteriormente, los paréntesis que rodean el texto “Hola, Mundo” le dicen a la computadora lo que la alerta debe decir, y el punto y coma al final de la instrucción le dice a la computadora que esta instrucción termina aquí, puedes pasar a la siguiente instrucción. Esto es muy similar a cómo usamos un punto “.” para finalizar las oraciones en inglés.

Comentarios

Agregar comentarios al código es una parte esencial de la programación. Puede ser fácil entender qué código escribes mientras lo escribes, pero dependiendo de la complejidad del código, puedes tener muy poca idea seis meses después, cuando vuelvas al código.

Agregar comentarios no solo facilita mucho la comprensión de tu código para tu futuro yo, sino que también facilita mucho que cualquier persona con la que trabajes entienda el código. También puede ayudarte a desarrollar mejor tu comprensión sobre el problema con el que estás trabajando, ya que generalmente es mucho más fácil resolver problemas dividiéndolos en partes más pequeñas. Las partes comentadas de tu código serán ignoradas por el intérprete y no se ejecutarán.

Hay dos formas en que puedes agregar comentarios en JavaScript. La primera es agregar un simple comentario de “una sola línea” con dos barras diagonales hacia adelante así:

// este es un comentario

De esta manera, lo que escribas después de las dos barras diagonales hacia adelante será ignorado en la línea específica en la que pusiste las barras. Puedes repetir esto tantas veces como desees para tener múltiples líneas cubiertas con comentarios así:

// este es un comentario.
// este es otro comentario.
// puedes seguir comentando así.

Otra razón por la que usamos comentarios es para comentar un fragmento de código y experimentar con el código. Por ejemplo, puedes escribir la misma funcionalidad de múltiples maneras y es posible que desees comentar una versión del mismo código para comparar su rendimiento o resultados individuales. Veamos eso con un ejemplo también.

Adelante, copia y pega el siguiente código en tu consola de JavaScript que abriste en Chrome.

// saludar al usuario
alert("¡Hola, Usuario!");
alert("¡Hola, Usuario!");

Si deseas practicar escribiendo todo el código tú mismo, también puedes hacerlo. Una cosa que debes saber sobre escribir múltiples líneas de código en la consola es que para llegar a la siguiente línea sin ejecutarla, puedes presionar “shift + enter” para hacerlo. De lo contrario, después de escribir una sola línea de código, si presionas solo enter, ejecutará esa línea de código. En este ejemplo, esto no es un gran problema y de hecho está bien ejecutarlo línea por línea también, porque tenemos un ejemplo simple que también puede funcionar de esa manera.

Después de copiar y pegar o escribir el código tú mismo, adelante y presiona “enter” para ejecutar el código. El resultado debería darte dos alertas separadas. También, para descartar las alertas, puedes hacer clic en “OK”, en este caso no harán nada porque esta es una alerta simple y no desencadena nada después de mostrar el mensaje que queremos mostrar.

Cuando ejecutamos el código de esta manera, estamos ejecutando la misma funcionalidad dos veces. Pero, ¿qué deberías hacer si quieres ver solo una implementación a la vez? Bueno, sabes exactamente qué hacer en este caso porque ya hablamos de ello. Adelante y comenta una de las líneas después de pegar o escribir el código para que solo se ejecute la segunda implementación de “¡Hola, Usuario!”.

Una vez que completes el desafío, o si te quedas atascado durante el desafío, puedes ver el código de solución al desafío a continuación. Antes de echar un vistazo a la solución, siempre recomiendo encarecidamente intentarlo tú mismo, ya que aprenderás mejor cuando realmente lo practiques. Si completaste el desafío con éxito, deberías estar viendo una pantalla como esta:

Ten en cuenta que cuando comentas una línea de código, se convierte en el mismo color que la línea comentada anterior. Esta diferencia de color aquí no hace realmente una diferencia para la computadora, pero es una característica bastante útil para nosotros cuando estamos escribiendo código. De esta manera, es mucho más fácil si accidentalmente comentas una línea de código, ya que los colores lo harán obvio.

Otra forma de comentar código es utilizando la barra diagonal y el carácter asterisco. De esta manera, podemos crear comentarios de una sola línea o de múltiples líneas en nuestro código.

/* un comentario de una sola línea *//* el comentario comienza cuando ponemos una barra diagonal y un asterisco
y las áreas comentadas terminan
cuando cerramos el comentario con un asterisco y la barra diagonal
así */

Ahora conoces los conceptos básicos de JavaScript. En el próximo tutorial, veremos un concepto extremadamente común en programación llamado “variables” junto con los tipos de datos básicos en JavaScript.