Curso: JavaScript Essentials I, Modulo I.

Alma María Meza Duré

Fundamentos de JavaScript 1 (JSE):
• Módulo 1
• Sección 2

Configuración del entorno de programación

Temas en esta sección:

1. Herramientas de desarrollo
2. Entorno de desarrollo en línea
3. Entorno de desarrollo local (editor de código, intérprete,
depurador)
Herramientas de
Desarrollo
Como cualquier otra tarea, la programación requiere las
herramientas y el espacio de trabajo adecuados. El desarrollo de
software, en la mayoría de los casos, requiere un editor de código
y un compilador o intérprete de un lenguaje determinado. Este es
un conjunto mínimo, que podemos ampliar según sea necesario
con otras herramientas.

En esta etapa del curso, además del editor e intérprete de código

JavaScript, también podemos utilizar el depurador, que es una
herramienta que nos permite, entre otras cosas, pausar el
programa en el lugar indicado y analizar su estado actual (p. los
valores de las variables indicadas).
Las herramientas en cuestión, por supuesto, deberán
ejecutarse en la computadora. En esta etapa, su rendimiento no
es particularmente importante, y cualquier unidad que pueda
manejar las tareas normales de una oficina será suficiente, por
lo que es muy recomendable trabajar desde una computadora
de escritorio o portátil. No se puede negar que el tamaño del
monitor afectará la comodidad de su trabajo. Cuanto más
grande sea el monitor, más fácil será colocar el editor de
código, el intérprete y otro contenido (por ejemplo, este curso)
uno al lado del otro. En circunstancias normales de trabajo, los
programadores suelen utilizar varios monitores.
No importa el sistema operativo, ya que se puede encontrar la
herramienta adecuada para Windows, macOS y Linux. En este
momento, hay dos opciones. Puede instalar todas las
herramientas necesarias en su máquina y trabajar en el
entorno local. Este es el enfoque preferido, ya que así es como
se ve en proyectos comerciales reales la mayor parte del
tiempo. También puede personalizar todo para satisfacer sus
necesidades.
Otro enfoque es utilizar herramientas en línea. Estos pueden ser
convenientes, ya que no necesita instalar ni configurar nada,
simplemente funcionan. La mayoría te permite almacenar tu
trabajo en la nube para que puedas acceder a él desde diferentes
dispositivos, pero por otro lado, carecen de opciones de
personalización y necesitas tener una conexión constante a
Internet. Todo el código que verás en este curso fue probado
tanto en entornos locales como en línea, por lo que ambas
opciones son válidas. Finalmente, podemos pasar a la elección de
las herramientas.
Entorno de desarrollo
en línea
Los entornos en línea, comúnmente conocidos como patios de recreo
de código, son sitios que actúan como un editor simple y un entorno
de tiempo de ejecución. Todos ellos tienen conjuntos similares de
características. Tienen diferentes interfaces de usuario, pero en
principio se comportan de manera similar. Le permiten escribir
código, ejecutarlo con fines de prueba y, en la mayoría de los casos,
compartirlo con otros usuarios. En el caso de JavaScript, donde la
preparación de un entorno local que funcione completamente se
reduce a instalar un editor de código y ejecutar el navegador, no son
tan importantes como los entornos de desarrollo regulares. Se utilizan
principalmente como plataformas de capacitación y prueba, o lugares
para publicar soluciones de muestra a problemas de programación.
Entre los programadores de JavaScript, los más
populares son los siguientes:

✔ JSFiddle
✔ CódigoPen
✔ JsBinPlunker
Durante el curso utilizaremos un entorno online integrado con la
plataforma de formación. OpenEDG proporciona un entorno simple
para escribir y ejecutar código en varios lenguajes de programación,
incluido JavaScript. Gracias a eso, podrás practicar todo lo que
hablamos de inmediato. Sin embargo, no olvide que esta plataforma
es una solución puramente didáctica y de prueba, y ciertamente no
puede usarse como un entorno de desarrollo completo. Sin embargo,
es ideal para nuestras necesidades, ya que en la mayoría de los casos
podremos olvidarnos del entorno web de los programas escritos en
JavaScript, incluidos los elementos HTML. Esto nos permitirá
centrarnos únicamente en aprender el propio lenguaje JavaScript.
Sin embargo, se recomienda encarecidamente que
también configure su propio entorno de desarrollo local.
No es difícil, como descubrirá de inmediato, y le permitirá
realizar algunos ejercicios de una forma mucho más
parecida a como lo haría durante el desarrollo normal de
software. Si, en la parte posterior del curso, alguno de los
ejercicios debe realizarse en dicho entorno, lo indicaremos
claramente.
Entorno de desarrollo
local
Como escribimos anteriormente, los requisitos de JavaScript para el
entorno de desarrollo son muy modestos. En la mayoría de los casos,
especialmente al comienzo del desarrollo, solo tres elementos son
suficientes: un editor de código, un intérprete (es decir, un entorno de
arranque) y un depurador. Según el nivel de sofisticación, la
complejidad del proyecto escrito o el entorno para el que escribimos
nuestros programas (del lado del cliente, del lado del servidor, móvil),
es posible que también se necesiten otras herramientas.
Estos serán, entre otros:

• Administradores de paquetes: permiten la administración de

bibliotecas (que contienen soluciones listas para usar que
podemos usar en nuestros programas) o componentes del
entorno de desarrollo (por ejemplo, npm o yarn)

• Ejecutores de tareas y paquetes de módulos: utilizados, en

términos simples, para automatizar el proceso de desarrollo de
software y fusionar el código resultante de muchos archivos y
bibliotecas (por ejemplo, Grunt o Webpack)
• Marco de prueba: permite la prueba automática de la corrección
de nuestro programa en busca de posibles errores (por ejemplo,
Mocha, Jasmine o Jest)

• Analizadores de seguridad: como puede adivinar, se utilizan para

controlar la seguridad de nuestra solución (por ejemplo, Snyk,
RetireJS u OWASP Dependency Check)
La apertura de los entornos de desarrollo web es tanto una
bendición como una maldición. Podemos elegir entre cientos
de componentes, a partir de los cuales podemos crear el
entorno más cómodo para nosotros. Sin embargo, su cantidad,
más los cambios dinámicos de herramientas particulares o
incluso las tendencias entre los programadores hacen que sea
difícil mantenerse al día con todo lo que sucede dentro de
estos entornos.
Pero para nosotros, este es un problema para un futuro lejano.

Por ahora, necesitamos el trío mínimo:

1. Un editor de código
2. Un intérprete
3. Un depurador
 Editor de Texto

El código de casi todos los lenguajes de programación se compone de

alguna forma de texto. Entonces, para escribir el código, necesitamos un
editor de texto. Pero debe ser una aplicación que escriba texto sin formato
(no puede ser un editor de texto enriquecido, como MS Word). En otras
palabras, solo un bloc de notas simple que puede escribir archivos .txt es
suficiente para escribir código, aunque es mucho más fácil si usa un editor
de código dedicado. El mercado está repleto de editores de código
profesionales, tanto gratuitos como de pago. Algunos de ellos son
universales, mientras que otros son exclusivos de idiomas específicos.
La principal ventaja de usar un editor de código dedicado es el
resaltado de sintaxis, el autocompletado de texto y la
verificación de errores. Esto mejora la eficiencia del trabajo y la
comprensión del código, y reduce la cantidad de errores y
errores tipográficos. Hay muchos buenos editores de código,
pero puede ser muy difícil seleccionar uno que funcione para
usted.
Aquí hay algunos populares:

Visual Studio Code [Windows, mac OS, Linux]

Potente editor de código gratuito para uso personal y comercial.

Se ha convertido rápidamente en uno de los favoritos cuando se
trata de desarrollo web. Tiene funciones integradas como un
depurador de JavaScript y herramientas para optimizar los
proyectos web. También es altamente personalizable a través
del sistema de extensiones (hay muchas adiciones dedicadas
especialmente al lenguaje JavaScript).
WebStorm[Windows, mac OS, Linux]

Un entorno de desarrollo comercial popular, en el que el editor de

código es solo uno de los elementos más pequeños en un gran
conjunto de herramientas que mejoran el desarrollo de código (por
ejemplo, pruebas de soporte). Destinado a proyectos grandes, puede
resultar demasiado pesado y complejo para programas pequeños.
Aunque está destinado a uso comercial, es posible obtener una
licencia educativa gratuita.
Sublime Text[Windows, mac OS, Linux]

Editor de código rápido y fácil de usar con muchas funciones

avanzadas, como edición de varias líneas, búsqueda rápida y otras.
Hay disponible una versión de prueba, pero para uso a largo plazo, se
debe comprar una licencia para uso privado y comercial.

Notepad++

[ventanas]logotipo Bloc de notas ++Editor de código y texto gratuito y

ligero. El programa es pequeño y rápido, admite docenas de
lenguajes de programación y se puede ampliar con complementos.
Puede ser viejo y feo, pero sigue siendo afilado.
Existen muchos otros editores de código, tanto gratuitos como de
pago, y puedes usar el que prefieras. Muchos desarrolladores usan,
entre otras cosas, editores de consola, incluido el legendario vim.
Los editores de consola no se ejecutan en un entorno gráfico, sino
en una consola de texto. Sin embargo, solo puede buscar tales
soluciones si las tareas que va a hacer resultan ser demasiado
simples y quiere hacer su vida un poco más difícil.
 Interpret
Yaehemos hablado un poco sobre el intérprete y su papel. Funciona como
un entorno de ejecución para nuestro programa. Comprueba si hemos
cometido algún error formal, por ejemplo, cometer un error tipográfico
en el nombre de una función u olvidar cerrar un paréntesis, y luego
ejecuta el programa instrucción por instrucción. La elección del intérprete
de JavaScript dependerá de la plataforma para la que escribamos nuestro
software. Por ejemplo, si queremos escribir una aplicación sencilla del
lado del servidor, casi seguro elegiremos el entorno node.js, que
tendremos que instalar directamente en nuestro sistema operativo. En el
caso del software del lado del cliente, nuestro intérprete será
simplemente el navegador web que ya tiene instalado (porque, ¿de qué
otro modo leería este curso?).
Nuestro curso trata sobre el núcleo de JavaScript, es decir, aquellos
elementos del lenguaje que serán igualmente útiles en soluciones
móviles, del lado del cliente y del lado del servidor. Así podemos
practicarlos en cualquier entorno, utilizando cualquier intérprete. La
forma más fácil de hacer esto es limitarse a un navegador web. Como
decíamos antes, prácticamente todos los navegadores tienen motores
(o intérpretes) de JavaScript integrados, pero recomendamos
encarecidamente utilizar Chrome de Google o FireFox de Mozilla.
Ambos son conocidos por su eficiencia y herramientas avanzadas
integradas para desarrolladores web (ese eres tú). Están disponibles
para Windows, macOS y Linux.
Recuerde actualizar periódicamente su navegador elegido y
utilizar la última versión. Esto es especialmente importante
cuando se trabaja con JavaScript. El lenguaje cambia
constantemente, con nuevas características y mecanismos que
se agregan. Es posible que su navegador favorito, pero algo
anticuado, no admita ciertas características del idioma. Su
navegador ahora es una herramienta, así que trate de
mantenerlo en buen estado actualizándolo regularmente.
 Depura
Losdor
programas de ordenador son bestias complicadas, miles o incluso
millones de líneas de código (pero tranquilos, empezaremos con sólo unas
pocas). Con tal complejidad y tamaño, es imposible producir código sin
errores. Algunos tipos de errores, especialmente los lógicos (formalmente,
el programa está escrito correctamente, pero probablemente inventamos la
solución incorrecta al problema), solo se pueden encontrar mientras el
programa se está ejecutando y, a menudo, solo en circunstancias
especiales. Es realmente difícil averiguar qué está sucediendo exactamente
dentro de un programa que se ejecuta muy rápido y, para esos problemas,
existen depuradores.Un depurador es una herramienta que le permite
ralentizar o incluso detener la ejecución de un programa, ejecutar
instrucciones paso a paso y ver y analizar el estado del programa en un
momento dado.
Afortunadamente, en el momento en que decidimos usar el
navegador web como nuestro entorno de arranque e intérprete de
JavaScript, también obtuvimos un depurador. Todos los
navegadores modernos están equipados con las herramientas de
desarrollo. Durante el funcionamiento normal, son invisibles y
tenemos que habilitarlos en las opciones del navegador (más
sobre esto en el próximo capítulo).Dependiendo del navegador, allí
encontraremos varias herramientas, pero seguramente habrá:
1. El inspector, que nos permitirá, por ejemplo, analizar los
elementos HTML individuales de un sitio web abierto;

2. La consola de JavaScript, que en primer lugar muestra toda la

información sobre los errores y, en segundo lugar, nos permite
ejecutar comandos de JavaScript únicos en el contexto de la
página actual;

3. El depurador, que, entre otras cosas, muestra los valores

actuales de las variables y le permite pausar la ejecución del
código en el lugar indicado y realizar el trabajo paso a paso (es
decir, ejecutar instrucciones individuales del programa).
¿Cómo habilitas las herramientas de desarrollador?

Desafortunadamente, no hay una respuesta única; depende del

navegador que estés utilizando (a veces también de su versión) y del
sistema operativo. Las interfaces del navegador cambian con bastante
frecuencia, por lo que es mejor aprender los atajos correctos en lugar de
buscar la opción correcta en el menú. Pruebe las siguientes
combinaciones de teclas:

Sistemas operativos Windows y Linux, todos los navegadores comunes

excepto Internet Explorer y Edge:
 Sistema operativo Windows, Internet Explorer y Edge:

Sistema operativo macOS, todos los navegadores comunes:

En el próximo capítulo, volveremos a este tema y aprenderemos

algunas cosas más sobre estas útiles herramientas.