Bienvenido a JavaScript

Essentials 1

1.0.1 sobre el curso

Este curso ha sido diseñado y desarrollado por OpenEdg JS Institute, e

implementado por la Academia de Netas Cisco.

Este curso es el primero de una serie de 2 platos que lo preparará para el

programador JavaScript de nivel de entrada certificado y los exámenes de
certificación JavaScript de JavaScript Certified JSA.

El objetivo principal del curso es guiarlo de un estado de analfabetismo de

programación completo a un nivel de conocimiento de programación que le
permite diseñar, escribir, depurar y ejecutar programas codificados en el
lenguaje JavaScript, y comprender los conceptos básicos de software Tecnología
de desarrollo.

El curso se centra en los conceptos centrales del lenguaje JavaScript, incluidos

los elementos esenciales de la sintaxis y la semántica de JavaScript, las mejores
prácticas de programación, herramientas y recursos JS y conceptos de
codificación como variables, tipos de datos, tipos de fundición, operadores,
interacción del usuario, flujo de control, flujo de control, Funciones, errores,
excepciones, depuración y solución de problemas.

El curso lo preparará para trabajos y carreras conectadas con un software y

desarrollo web ampliamente entendido, lo que incluye no solo la creación del
código en sí mismo como desarrollador junior, sino también diseño web,
desarrollo de front-end y pruebas de aplicaciones.

1.0.2 Estructura del curso

El curso se divide en seis módulos:

Módulo 1 - Introducción a JavaScript y programación de computadoras;

Módulo 2 - Variables, tipos de datos, tipo de fundición y comentarios;

Módulo 3 - Operadores e interacción de usuario;

Módulo 4 - Flujo de control: ejecución condicional y bucles;

Módulo 5 - Funciones;

Módulo 6 - Errores, excepciones, depuración y resolución de problemas.

El curso concluye con una prueba final que consta de 30 preguntas, evaluando
su comprensión de los conceptos cubiertos.

1.0.3 programa
En este curso aprenderás:

Módulo 1 - Introducción a JavaScript y programación de computadoras

- Acerca de JavaScript (cómo comunicarse con la computadora, qué es JS,

ventajas y limitaciones de JS, dónde se usa JS hoy)
- Configuración del entorno de programación (herramientas de desarrollo,
entorno de desarrollo en línea, entorno de desarrollo local)
- Primer programa JS - ¡Hola, mundo! (Algunas palabras sobre HTML, cómo
ejecutar su código JavaScript, ejecutando el código directamente en la consola)

Módulo 2 - Variables, tipos de datos, tipos de fundición y comentarios

- Variables (nombrar, declarar e inicializar variables, declaraciones y modo

estricto, cambio de valores variables, constantes, alcance)
- Tipos de datos primitivos (booleano, número, bigint, string, indefinido,
nulo, type Casting - primitivas funciones de construcción y conversiones
primitivas, conversiones implícitas)
- Tipos de datos complejos (objeto, matriz, propiedades y métodos básicos
de matriz)
- Comentarios (comentarios de una sola línea, comentarios de múltiples
líneas, documentación)

Módulo 3 - Operadores e interacción de usuario

- Asignación, operadores aritméticos y lógicos (cuáles son los operadores,

los operadores de asignación, los operadores aritméticos, los operadores
lógicos, los operadores de asignación de compuestos)
- Cadenas, comparación y otros operadores JS (concatenación de cadenas y
asignaciones de compuestos, operadores de comparación, operadores
condicionales, typeof, instanciaf y eliminación de operadores, precedencia de
operadores)
- Interactuar con el usuario (cuadros de diálogo - Alerta, confirmar, solicitar)

Módulo 4 - Flujo de control: ejecución condicional y bucles

- Ejecución condicional (¿Qué es la ejecución condicional, la declaración if -

else, el operador condicional, la declaración Switch -Case)?
 - Bucles (¿Cuáles son los bucles, el bucle While, el bucle do -while, el bucle
for, el bucle for -of bucle, el bucle for -in, las declaraciones de interrupción y
continuar)

Módulo 5 - Funciones

- Conceptos básicos de funciones (¿Cuáles son las funciones, declarar

funciones, llamar a las funciones, variables locales, la declaración de retorno,
parámetros de función, sombreado)
- Funciones como miembros de primera clase (expresiones de funciones,
aprobar una función como parámetro, devoluciones de llamada)
- Funciones de flecha (declarar y llamar)
- Recursión (idea básica)

Módulo 6 - Errores, excepciones, depuración y solución de problemas

- Errores y excepciones: introducción (lenguajes naturales y errores de

comunicación, errores versus excepciones, errores sin excepciones, confianza
limitada)
- Tipos básicos de errores en JS (syntaxError, referenceError, typeError,
rangeError)
- Manejo de excepciones (la declaración Try -Catch, la declaración
Finalmente, la declaración de lanzamiento y los errores personalizados)
- La depuración y la solución de problemas de código (lo que es la
depuración, la ejecución paso a paso, la visualización y la modificación de las
variables, la opción de paso fuera, el tiempo de ejecución del código de
medición)

1.0.4 Objetivos
Módulo 1 - Después de completar el módulo 1, lo hará:

- Comprender los conceptos de programación fundamentales, como:

interpretar y el intérprete, compilación y el compilador, programación del lado
del cliente versus del lado del servidor;
- tener un conocimiento básico de cómo configurar y usar el entorno de
programación básico (en línea o local)
- Obtenga habilidades que le permiten ejecutar su primer programa
JavaScript en el lado del cliente (tanto como un elemento integrado en la página
HTML y directamente en la consola del navegador).

Módulo 2 - Después de completar el módulo 2, lo hará:

- tener el conocimiento y las habilidades para trabajar con variables (es

decir, nombrar, declarar, inicializar y modificar sus valores)
- Comprender conceptos como alcance, bloques de código, sombreado y
elevación;
- Conozca las propiedades básicas de los tipos de datos primitivos como
booleano, número, bigint, indefinido, nulo y poder usarlos;
 - Estar familiarizado con las propiedades básicas de la cadena de tipo de
datos primitivos, incluidos los literales de cadena: citas simples o dobles, el
carácter de escape, la interpolación de cadenas, las propiedades y métodos
básicos;
- Conozca las propiedades básicas de los tipos de datos complejos, como la
matriz y el objeto (tratado como un registro) y poder usarlas en la práctica.

Módulo 3 - Después de completar el Módulo 3, lo hará:

- Sepa qué son los operadores y cómo clasificarlos (por tipo de operando,
por número de operandos, etc.)
- ser capaz de usar operadores de asignación, aritmética, lógica y de
comparación en la práctica;
- Comprender la operación del operador condicional y los operadores de
typeof, instancia y eliminación;
- Comprenda cuáles son la precedencia y asociatividad de los operadores
básicos y ser capaces de influir en ellos mediante la agrupación de soportes;
- Poder realizar una comunicación básica bidireccional con el usuario del
programa utilizando los cuadros de diálogo Alerta, confirmar y solicitar.

Módulo 4 - Después de completar el módulo 4, lo hará:

- Ser capaz de forzar la ejecución condicional de un grupo de declaraciones

(tomar decisiones y ramificar el flujo) utilizando los comandos if-else y
conmutador;
- poder obligar a un grupo de declaraciones a repetir en un bucle usando
los comandos for, while, y do-while, utilizando condiciones dependientes e
independientes en el número de iteraciones;
- Comprender y poder usar las instrucciones de ruptura y continuar
específicos de bucle;
- Poder usar la declaración FOR-In para iterar sobre las propiedades de un
objeto;
- Ser capaz de usar la declaración para caminar a través de los elementos
de una matriz.

Módulo 5 - Después de completar el módulo 5, lo hará:

- poder declarar y llamar funciones;

- saber cómo pasar los argumentos de llamadas a una función y devolver el
resultado de su operación de ella;
- Comprender el concepto de una variable local y el efecto de las variables
de sombreado con los mismos nombres dentro de una función;
- Sepa que una función en JS es un miembro de primera clase y puede
aprovechar esto declarando funciones utilizando expresiones de funciones y
funciones de aprobación como argumentos a llamadas de otras funciones;
- Comprender el concepto de recursión en el contexto de las funciones y
poder resolver problemas de programación simples utilizándolo;
- Tener una comprensión básica de la función de devolución de llamada y
poder usarla asincrónicamente junto con los métodos SetTimeOut y SetInterval;
 - Tener una comprensión clara de la notación de la función de flecha y
poder escribir funciones alternativas como declaraciones regulares, expresiones
de funciones y funciones de flecha.

Módulo 6 - Después de completar el módulo 6, lo hará:

- obtener una comprensión de las diferencias entre errores sintácticos,

semánticos y lógicos;
- Comprenda el concepto de una excepción y distinga entre las excepciones
básicas generadas por JS cuando ocurre un error: sintaxError, referenceError,
typeError, rangeError;
- tener la capacidad de manejar excepciones utilizando la declaración Try-
Catch-Final;
- poder generar sus propias excepciones utilizando la declaración de
lanzamiento;
- Tenga las habilidades para usar el depurador para el análisis básico de su
propio código, que incluye: ejecución paso a paso, visualización y modificación
de variables, midiendo el tiempo de ejecución del código.

1.0.5 Perfil de posgrado

Una vez que haya graduado del curso, lo hará:

- Conozca la sintaxis del lenguaje principal de JavaScript en un grado que

permitirá trabajar con variables, operadores, control de flujo y funciones;
- Conozca los conceptos básicos del sistema de tipos de datos JavaScript,
distinguiendo entre tipos primitivos y complejos, y es capaz de elegir un tipo
adecuado para sus necesidades;
- Piense algorítmicamente y pueda analizar un problema utilizando un
aparato conceptual programático;
- poder elegir un tipo de datos adecuado para el problema que se resuelve
y utilizar medias de control de flujo adecuadas;
- poder diseñar, desarrollar y mejorar programas de JavaScript muy
simples;
- poder interpretar y manejar excepciones básicas relacionadas con errores
en la ejecución del programa;
- Comprender el trabajo de un programador en el proceso de desarrollo de
software y el papel de las herramientas de desarrollo fundamentales;
- Sepa cómo se interpreta y ejecuta un programa en un entorno informático
real, local o remoto;
- Tenga las habilidades y conocimientos necesarios para comenzar a crear
y desarrollar su propia cartera de programación.

1.0.6 Prepárese para el examen JSE-40-0X

Buce en programación, aprenda JavaScript desde cero y prepárese para la
certificación de programador JavaScript de nivel de entrada certificado JSE

JavaScript Essentials 1 está directamente alineado con la certificación de

programador JavaScript de nivel de entrada certificado JSE, una credencial
profesional que demuestra la comprensión del candidato de la sintaxis y
semántica del núcleo del lenguaje JavaScript, así como su competencia en el
uso de los elementos más esenciales del idioma, Herramientas y recursos para
diseñar, desarrollar y refactorizar programas de JavaScript simples.

El titular de la certificación conoce la sintaxis del lenguaje principal de

JavaScript en un grado que les permite trabajar con variables, operadores,
mecanismos de flujo de control y funciones, así como comprender los
fundamentos del sistema de tipo de datos de JavaScript, manejo de
excepciones, solución de problemas, depuración, depuración y el entorno de
tiempo de ejecución.

JSE-La certificación de programador JavaScript de nivel de entrada certificado es

un paso interino para el asociado certificado JSA en la certificación de
programación JavaScript, y el punto de partida para lanzar una carrera en
desarrollo de software, programación de JavaScript y tecnologías relacionadas.

Convertirse en la certificación JSE lo ayudará a destacarse de otros candidatos y

poner el pie en la puerta, y después de completar este curso, se volverá
elegible para un descuento del 20% en el examen de certificación.

Para obtener más información sobre la certificación de programador JavaScript

de nivel de entrada certificada JSE, visite [Link].

Entonces, ¿estás listo para comenzar tu viaje de JavaScript? Haga clic en

Siguiente para continuar a la Sección 1 y comience a aprender. ¡Te veo allí!
 Sección 1 - Acerca de
JavaScript

1.1.1 Introducción
¿Entonces quieres aprender a programar en JavaScript? ¡Genial!

Este curso será un viaje bastante largo, pero si llega al final, podrá leer,
comprender y, por supuesto, escribir aplicaciones y programas de JavaScript.
Estas nuevas habilidades pueden ayudarlo en su trabajo actual, o permitirle
alcanzar nuevas oportunidades profesionales en un mercado de TI de
crecimiento constante. Comencemos esta aventura sin más preámbulos, y
descubramos qué es JavaScript.

1.1.2 Cómo comunicarse con la computadora

Comencemos con algo obvio: las computadoras están en todas partes.

Es casi seguro que estás leyendo este curso en una computadora; Tu teléfono
es una computadora; Encontrará computadoras en televisores y otros
electrodomésticos, como su aspiradora automática, que utiliza su computadora
y numerosos sensores en su misión interminable para erradicar el polvo de su
vida.

Estamos rodeados de computadoras. Las computadoras se utilizan en ciencia,

medicina, banca y negocios.

Sospechamos que hoy en día sería difícil encontrar cualquier área de la vida en
la que las computadoras no participen activamente.
Usamos computadoras principalmente porque pueden realizar ciertas tareas
incomparablemente más rápidas y más precisas que las personas. Sin embargo,
las computadoras no pueden adivinar qué tipos de tareas tenemos en mente o
cómo ayudarnos a realizarlas. Tenemos que decirles eso. ¿Cómo? Es mejor
hacerlo de manera similar a la transmisión de información a otras personas, en
otras palabras, usando un lenguaje que es comprensible para ambas partes.
Usando dicho lenguaje, escribimos un programa, una solución formal a nuestro
problema, que puede ser ejecutada por la computadora.

Desafortunadamente, un lenguaje que es directamente comprensible por una

computadora será absolutamente ilegible para un ser humano regular. Sería
una secuencia de instrucciones extrañas, escritas en forma numérica,
refiriéndose a los componentes de la computadora que ni siquiera sabíamos que
existían (y francamente, no necesariamente tenemos que saberlo). Esta forma
de comunicación, que data del comienzo de la informática, hoy en día se usa
extremadamente raramente, y solo en situaciones muy específicas.

Entonces, para ayudar en la comunicación con la computadora, se inventaron

lenguajes de programación que son algo similares a los idiomas naturales (es
decir, los utilizados para la comunicación entre las personas). Hay miles de
lenguajes de programación, y difieren en el propósito (aparte de los idiomas de
uso general, hay muchos especializados, por ejemplo, idiomas diseñados solo
para cálculos estadísticos), nivel de abstracción (en términos simples: cuanto
más alto sea el nivel de idioma , cuanto menos necesitemos saber sobre el
hardware en el que se ejecuta el programa), facilidad de uso, efectividad de los
programas escritos en ellos, etc.

1.1.3 JavaScript como lenguaje interpretado

JavaScript es un lenguaje interpretado típico. Si ejecutamos un código escrito en
JavaScript en un navegador web, tal como está sucediendo, como después de
cargar la página que estamos leyendo actualmente (sí, sí, hay elementos
escritos en JavaScript en esta página también), el intérprete será el Motor
JavaScript integrado en el navegador. Esta no es la única forma de ejecutar el
código JavaScript.

Quizás hayas oído hablar de [Link]. También es un intérprete, pero es

instalado independientemente de los navegadores como un entorno en el
sistema operativo de la computadora (puede ser macOS, Windows o Linux). El
uso de [Link] le permite escribir programas en JavaScript que, por ejemplo,
convertirán su computadora en un servidor.

Al comienzo de este párrafo, simplificamos un poco las cosas. JavaScript es un

lenguaje interpretado: no hay duda sobre eso. Y de hecho, ejecutar un
programa escrito en JavaScript parece que estamos ejecutando nuestro código
fuente (es decir, el código que escribimos) paso a paso. Sin embargo, puede
encontrar información sobre este idioma, y más específicamente sobre
intérpretes particulares, eso es un poco diferente.
La mayoría de los motores JavaScript modernos utilizan la técnica de
compilación justo en el tiempo (compilación JIT). Esta técnica consiste en
compilar fragmentos de código durante la ejecución del programa (más de una
sola instrucción) y le permite aumentar su rendimiento. Sin embargo, desde el
punto de vista del usuario, dicho cambio es prácticamente imposible de notar;
todavía parece que solo el intérprete está ejecutando el código fuente,
instrucción por instrucción.

Independientemente del lenguaje que elija, algunas cosas siguen siendo las
mismas mientras escriben el programa. En primer lugar, una etapa importante y
probablemente más difícil de este proceso es definir correctamente el problema
que queremos resolver. Solo entonces intentamos encontrar la solución óptima,
que finalmente presentaremos en forma de un programa escrito en el lenguaje
elegido.

Entonces, antes de comenzar a explicar algo a la computadora, en otras

palabras, escribir un programa, debe comprender exactamente lo que desea
lograr y cómo desea lograrlo. En segundo lugar, la solución que proponemos y
escribimos en forma de un programa debe ser 100% inquebrantable: la
computadora no puede adivinar nada.

Un ejemplo simple de un campo ligeramente diferente: en algún momento de su

vida, probablemente compró un mueble que requería ensamblaje. Ensamblar es
un problema con el que usted, el comprador, ha sido cargado. Para que pueda
hacer frente a esta tarea, obtiene un conjunto de instrucciones para guiarlo a
través de todo el proceso. Estás actuando como intérprete en este punto,
utilizando un programa que le permitirá completar la tarea. El éxito de su misión
depende de la calidad de estas instrucciones, ya sean precisos e inequívocos, y
no provengan de otro mueble. Al final, puede resultar que no ha construido los
muebles de sus sueños, sino una construcción surrealista de otra dimensión.

Para que las instrucciones sean buenas, alguien que los desarrolla debe saber
exactamente lo que debe ilustrar, en qué orden se deben llevar a cabo ciertas
acciones, en las que se confunde algo más fácil de confundir, y así
sucesivamente. Y, por supuesto, deben saber qué efecto se debe lograr al final.

1.1.4 Algunas palabras más en JavaScript

Como mencionamos antes, JavaScript es un lenguaje de programación
interpretado. Como la mayoría de los idiomas interpretados, también es un
lenguaje de alto nivel (es decir, relativamente fácil de entender para las
personas y que nos separa de los detalles del hardware).

A principios de los 90, todas las páginas web eran estáticas. Las cosas
cambiaron en 1995 cuando la Corporación Netscape contrató a Brendan Eich, y
le encargaron que desarrollara un nuevo idioma para su producto, el navegador
web Netscape Navigator. El nuevo lenguaje se llamaba Livescript, pero poco
después de su nombre se cambió a JavaScript. Su tarea principal era agregar
dinámica a los sitios web, lo que permitiría, por ejemplo, una interacción más
compleja con el usuario. Y así comenzó la carrera de JavaScript.

1.1.5 Programación del lado del cliente frente al

servidor
El uso de JavaScript en sitios web, que con el tiempo se ha vuelto cada vez más
complejo y a menudo contiene una lógica muy sofisticada, se llama
programación del lado del cliente. El código que se ejecutará se carga junto con
la página en el navegador, del lado del usuario, y el intérprete que es parte del
navegador web permite su ejecución.

Hoy, JavaScript es el único lenguaje compatible con todos los principales

navegadores web, y alrededor del 95% de las páginas web en todo el mundo
incrustaron el código JavaScript dentro de ellos. Desde el principio, las páginas
web usaron JavaScript en el lado del cliente para agregar interactividad y
cambiar dinámicamente el contenido.

Ahora es mucho más que eso, ya que JavaScript ofrece muchos marcos
excelentes para crear aplicaciones web y redes sociales enormes y complejas
(probablemente haya escuchado los nombres de marcos como React o
Angular).

Todo esto puede funcionar en una variedad de equipos, desde estaciones de

trabajo de alto rendimiento hasta simples teléfonos inteligentes. Gracias al
poder de JavaScript, podemos pedir comida, jugar juegos basados en el
navegador, ver películas en plataformas de transmisión y estar en contacto
constante con las personas importantes para nosotros. JavaScript es tan popular
que continuamente cada vez más esfuerzo se dedica al uso de él, no solo como
una solución del lado del cliente.

Con el tiempo, JavaScript comenzó a aparecer en otras áreas, como la

programación de las partes del lado del servidor de aplicaciones web complejas,
también llamadas back-end. Estos programas se ejecutan en servidores,
procesan datos (por ejemplo, desde bases de datos), que después del
procesamiento estará disponible en el lado del cliente. La flexibilidad de este
idioma y su relativa simplicidad lo han hecho mucho más aplicable, por ejemplo,
en aplicaciones móviles, o incluso en la programación de UAV (algunos drones
ejecutan programas escritos en este idioma).

1.1.6 ¿Es este el lenguaje de programación perfecto?

- Desventajas
Decimos que JavaScript es un lenguaje maduro, lo que significa que la mayoría
de las características ya están implementadas y estables, y probablemente no
veremos grandes cambios en el idioma. Desde 2015, muchos aspectos de
JavaScript han cambiado, y se han agregado muchas características nuevas. Se
introdujeron muchos de estos cambios para facilitar la migración a JavaScript
para los programadores que conocen otros idiomas populares, de los cuales
JavaScript originalmente difería fuertemente en ciertos aspectos, como al
manejar objetos. Todavía podemos usar el lenguaje de la antigua manera, pero
se recomienda usar el JavaScript moderno.

Pero ... no hay soluciones ideales, por lo que no hay buenos lenguajes de
programación para todas las aplicaciones. Cada uno de ellos tiene sus propias
limitaciones, y no es diferente con JavaScript. A pesar de su popularidad y éxito,
JavaScript no es un lenguaje de programación perfecto. Debido a su naturaleza,
no es adecuado para ciertas aplicaciones. Por ejemplo, no tiene sentido usarlo
para escribir programas que requieran cálculos matemáticos avanzados o un
rendimiento muy alto.

Algunas limitaciones se deben al concepto mismo del lenguaje, pero la gran

mayoría están relacionadas con la plataforma en la que lo usamos. Esto es
especialmente visible al escribir código que se ejecutará en un navegador, que
como dijimos anteriormente se llama lado del cliente. En tal situación,
JavaScript tiene una funcionalidad limitada por el hecho de que los
navegadores, por razones de seguridad, ejecutan el código de script en un
entorno de sandbox (un entorno separado del mundo exterior), que no permite
el acceso a archivos y recursos locales ( es decir, aquellos archivos que están en
la computadora donde se inicia el navegador).

Otro inconveniente es que, dado que el código no se compila, entra en el

navegador de la misma forma, o una forma muy similar a lo que escribimos
nosotros mismos. ¿Por qué es esto una desventaja? Esto se debe a que todos
pueden ver nuestra solución en una forma fácil de leer y usarla (ya sea
fragmentos de ella o incluso todo) sin nuestro permiso para escribir su propio
programa.

Alguna ayuda aquí puede ser la ofuscación del código, que consiste en
transformar nuestro script listo en una forma ligeramente menos legible (por
ejemplo, generando nombres aleatorios breves de variables y funciones,
eliminando los signos de fin de línea, etc.), pero el simple hecho Es que si
alguien quiere robar nuestro código JavaScript, hay muy poco que podamos
hacer para detenerlos.

1.1.7 ¿Es este el lenguaje de programación perfecto?

- Ventajas
Por otro lado, JavaScript tiene muchas ventajas sobre otros lenguajes de
programación, y una de las más grandes es una comunidad muy activa y de
apoyo. Es fácil encontrar soluciones a problemas comunes y encontrar ayuda en
general. Esto también significa que las herramientas que funcionan con
JavaScript se desarrollan activamente.
Otra gran ventaja es una gran cantidad de marcos y bibliotecas listos para usar
que proporcionan la mayoría de las funcionalidades y características
comúnmente requeridas. El lenguaje en sí es relativamente fácil de aprender y
nos permite centrarnos en el trabajo en lugar de luchar con la sintaxis (es decir,
la forma de construir las instrucciones que componen el código de nuestro
programa).

Además, JavaScript no requiere que compre herramientas costosas para

trabajar con él, y las herramientas realmente buenas ya están integradas dentro
de su navegador web. Por último, pero no menos importante, grandes jugadores
como Google, Facebook y Mozilla admiten activamente las herramientas de
JavaScript y su desarrollo.

Sin embargo, lo que es una ventaja para algunos puede ser una desventaja para
otros. Un ejemplo puede ser la característica de tipificación dinámica de
JavaScript. En resumen, consiste en el hecho de que podemos almacenar datos
de cualquier tipo en una variable (una variable es un contenedor en el que
almacenamos los datos que usaremos).

Por ejemplo, durante la ejecución del programa, podemos almacenar el número

10 en una variable, y en el siguiente paso use la misma variable para almacenar
la cadena "ABC" (eliminar el valor anterior automáticamente, por supuesto, no
se preocupe si usted No lo entiendo en este momento, porque cubriremos todos
estos términos más adelante).

Por lo general, esto es muy conveniente, pero varias personas han encontrado
que esta característica del idioma es una desventaja. En su opinión, facilita que
un programador cometa errores en ciertas situaciones. Al agregar tipificación
estática, donde una variable solo puede contener un tipo de variable (por
ejemplo, números) durante la ejecución del programa, se introdujo un nuevo
lenguaje llamado TypeScript.

Recuerde también que si aprende a programar en un idioma, generalmente será

mucho más fácil para usted aprender el próximo, lo que por alguna razón puede
ser mejor resolver un problema particular.

Pero comencemos ahora con JavaScript, que, debido a su sintaxis flexible y

simple, es perfecto para aprender como primer idioma.

1.1.8 Prepáramos para trabajar

Como mencionamos anteriormente, JavaScript se puede usar en varios
entornos, aunque a menudo será un navegador web o un servidor con un
entorno [Link].
Cada entorno impone una forma ligeramente diferente de usar este lenguaje, y
algunos mecanismos o funciones característicos aparecen.

Sin embargo, la parte esencial del idioma, su núcleo, sigue siendo la misma.

En esta parte del curso, aprenderemos cómo programar utilizando esta parte
invariable y central de JavaScript: cómo declarar variables, escribir funciones,
instrucciones condicionales o bucles, todo esto será igualmente utilizable en
cualquier entorno en el que decidamos Usa este idioma.

La programación en cualquier idioma no es algo fácil de aprender, y puede

sentirse abrumado por tanta información nueva. Si eres persistente y enfocado,
escribirás scripts simples en poco tiempo, y no hay otra forma de aprender a
programar que a escribir mucho y mucho código.

Lo más importante, no te rindas incluso cuando estés atrapado: tome un

descanso, salga a caminar, regrese a él con una mente fresca e intente
nuevamente. Al final, lento y estable gana la carrera.

¡Ahora, comencemos!

Sección 2
 Configuración del entorno de
programación

1.2.1 Herramientas de desarrollo

Como cualquier otra tarea, la programación requiere las herramientas y el
espacio de trabajo adecuado. 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 idioma
determinado. Este es un conjunto mínimo, que podemos extender según sea
necesario con varias otras herramientas.

En esta etapa del curso, aparte del editor e intérprete de código JavaScript,
también podemos usar el depurador, que es una herramienta que nos permite,
entre otras cosas, detener el programa en el lugar indicado y analizar su estado
actual (p. Ej. los valores de las variables indicadas).

Las herramientas en cuestión, por supuesto, tendrán que ejecutarse en la

computadora. En esta etapa, su rendimiento no es particularmente importante,
y cualquier unidad que pueda manejar tareas de oficina normales será
suficiente, por lo que se recomienda trabajar desde una computadora de
escritorio o computadora 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ódigos, el intérprete y otro contenido (por ejemplo, este curso) uno al lado del
otro. En circunstancias de trabajo normales, los programadores a menudo usan
varios monitores.

El sistema operativo no importa, ya que la herramienta apropiada se puede

encontrar 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 usar herramientas en línea. Estos pueden ser convenientes, ya

que no necesita instalar o configurar nada, simplemente funcionan. La mayoría
de ellos le permiten almacenar su trabajo en una nube para que pueda acceder
a él desde diferentes dispositivos, pero por otro lado, carecen de opciones de
personalización, y necesita tener una conexión constante a Internet.

Todo el código que verá en este curso se probó en entornos locales y en línea,
por lo que ambas opciones son válidas. Finalmente, podemos pasar a la
elección de las herramientas.
1.2.2 Entorno de desarrollo en línea
Los entornos en línea, comúnmente conocidos como parques infantiles, son
sitios que actúan como un simple editor y un entorno de tiempo de ejecución.
Todos ellos tienen conjuntos de características similares. Tienen diferentes
interfaces de usuario, pero en principio, se comportan de manera similar. Le
permiten escribir código, ejecutarlo para fines de prueba y a menudo lo
comparten con otros usuarios.

En el caso de JavaScript, donde la preparación de un entorno local

completamente en funcionamiento en realidad se reduce a instalar un editor de
código y ejecutar el navegador, no son tan importantes como entornos de
desarrollo regulares. Se utilizan principalmente como plataformas de
capacitación y prueba, o lugares para publicar soluciones de muestra a los
problemas de programación.

Entre los programadores de JavaScript, los más populares son los siguientes:

 Jsfiddle
 Codepen
 Jsbin
 Lunar

Durante el curso, utilizaremos un entorno en línea integrado con la plataforma

de capacitació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 totalmente completo. Sin embargo, es ideal para nuestras
necesidades, porque 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 lenguaje
JavaScript en sí.

Sin embargo, se recomienda encarecidamente que también configure su propio

entorno de desarrollo local. No es difícil, como lo descubrirá de inmediato, y le
permitirá hacer algunos ejercicios de una manera mucho más cercana a cómo
lo haría durante el desarrollo normal de software. Si, en la parte más del curso,
cualquiera de los ejercicios tendrá que hacerse en dicho entorno, lo indicaremos
claramente.

1.2.3 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.

Dependiendo del nivel de sofisticación, la complejidad del proyecto escrito o el

entorno para el cual escribimos nuestros programas (lado del cliente, lado del
servidor, móvil), también pueden ser necesarias otras herramientas.

Estos serán, entre otros:

Gestores de paquetes: habilitando la gestió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 hilo)

Corredores de tareas y Bundlers de módulos: se utiliza, 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, gruñido opack)

Marco de prueba: permite pruebas automáticas de la corrección de nuestro

programa en busca de posibles errores (por ejemplo, moca, jazmín o broma)

Analizadores de seguridad: como puede adivinar, se utiliza para controlar la

seguridad de nuestra solución (por ejemplo, Snyk, Retirejs o Owasp Dependency
Check)

La apertura de los entornos de desarrollo web es a la vez una bendición y una

maldición. Tenemos una opción de cientos de componentes, a partir de los
cuales podemos crear el ambiente más cómodo para nosotros mismos.

Sin embargo, su cantidad, más los cambios dinámicos de herramientas

particulares o incluso las tendencias entre los programadores dificultan
mantener el ritmo de todo lo que está sucediendo dentro de estos entornos.

Pero para nosotros, este es un problema para el futuro lejano.

Por ahora, necesitamos el trío mínimo: un editor de código, intérprete y

depurador.

1.2.4 Editor de código

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 rico, como MS Word). En otras palabras, solo un bloc de notas
sencillo 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á lleno de editores de códigos profesionales, tanto gratuitos como pagados.
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 la
resaltar de sintaxis, el texto autocompletado y la verificación de errores. Esto
mejora la eficiencia laboral y la comprensión del código, y reduce el número de
errores y errores tipográficos. Hay muchos buenos editores de código, pero
puede ser realmente difícil seleccionar uno que funcione para usted.

Aquí hay algunos populares:

Código de Visual Studio [Windows, macOS, Linux]

Poderoso editor de código gratis para uso personal y comercial. Se ha

convertido rápidamente en uno de los favoritos cuando se trata del desarrollo
web. Tiene funciones incorporadas como un depurador JavaScript y
herramientas para optimizar proyectos web. También es altamente
personalizable a través del sistema de extensión (hay muchas adiciones
dedicadas especialmente al lenguaje JavaScript).

WebStorm [Windows, macOS, Linux]

Un entorno de desarrollo comercial popular, en el que el editor de códigos es
solo uno de los elementos más pequeños en un gran conjunto de herramientas
que mejoran el desarrollo del código (por ejemplo, pruebas de apoyo).
Destinado a proyectos grandes, puede ser demasiado pesado y complejo para
pequeños programas. Aunque está destinado a uso comercial, es posible
obtener una licencia educativa gratuita.

Sublime Text [Windows, macOS, Linux]

Editor de código rápido y fácil de usar con muchas características avanzadas,

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

Notepad ++ [Windows]
Código gratuito y liviano y editor de texto. El programa es pequeño y rápido,
admite docenas de lenguajes de programación y se puede extender con
complementos. Puede ser viejo y feo, pero sigue siendo agudo.

Existen muchos otros editores de código, tanto gratuitos como pagados, y

puede usar el que prefiera. 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 alcanzar tales soluciones si las tareas que harás resultan ser demasiado
simples y quieres hacer tu vida un poco más difícil.

1.2.5 intérprete
Ya hemos hablado un poco sobre el intérprete y su papel. Funciona como un
entorno de tiempo de ejecución para nuestro programa. Verifica si hemos
cometido algún error formal, por ejemplo, hacer un error tipográfico en nombre
de una función o olvidar cerrar un paréntesis, y luego ejecuta la instrucción del
programa por instrucción.

La elección del intérprete JavaScript dependerá de la plataforma para la que

escribamos nuestro software. Por ejemplo, si queremos escribir una aplicación
simple del lado del servidor, es casi seguro que elegiremos el entorno [Link],
que tendremos que instalar directamente en nuestro sistema operativo. En el
caso del software del lado del cliente, nuestro intérprete simplemente será el
navegador web que ya ha instalado (porque ¿de qué otra manera leería este
curso?).

Nuestro curso es sobre JavaScript central, es decir, aquellos elementos de

idioma que serán igualmente útiles en soluciones del lado del cliente, del lado
del servidor y móviles. Entonces podemos practicarlos en cualquier entorno,
utilizando cualquier intérprete. La forma más fácil de hacerlo es limitarse a un
navegador web.

Como dijimos antes, prácticamente todos los navegadores tienen motores

JavaScript incorporados (o intérpretes), pero recomendamos encarecidamente
usar Chrome de Google o Firefox de Mozilla. Ambos son conocidos por su
eficiencia y herramientas avanzadas integradas para los desarrolladores web
(ese es usted). Están disponibles para Windows, MacOS y Linux.

Recuerde actualizar regularmente su navegador elegido y usar 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. Puede encontrar que su navegador favorito pero algo anticuado no
admite ciertas características del idioma. Su navegador ahora es una
herramienta, así que trate de mantenerla en buena forma actualizándolo
regularmente.
1.2.6 Debugger
Los programas de computadora son bestias complicadas, miles o incluso
millones de líneas de código (pero se calmaremos, comenzaremos con solo
algunas). Con tanta complejidad y tamaño, es imposible producir código sin
ningún error. Algunos tipos de errores, especialmente los lógicos (formalmente,
el programa se escribe 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 funciona rápidamente, y para esos problemas, existen
depugadores.

Un depurador es una herramienta que le permite reducir la velocidad o incluso

detener la ejecución de un programa, ejecutar instrucciones paso a paso y mirar
y analizar el estado del programa en cualquier momento dado.

Afortunadamente, en el momento en que decidimos usar el navegador web

como nuestro entorno de arranque y el intérprete de JavaScript, también
tenemos un depurador. Todos los navegadores modernos están equipados con
las herramientas del desarrollador. Durante la operación 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, encontraremos varias herramientas allí, pero

ciertamente habrá:

 El Inspector, que nos permitirá, por ejemplo, analizar los elementos HTML
individuales de un sitio web abierto;
 La consola JavaScript, que primero 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;
 El depurador, que, entre otras cosas, muestra los valores actuales de las
variables y le permite detener la ejecución del código en el lugar indicado
y realizar un trabajo paso a paso (es decir, ejecutar instrucciones únicas
del programa).

¿Cómo habilita las herramientas del desarrollador? Desafortunadamente, no hay

una sola respuesta; Depende del navegador que esté 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 clave:

Sistemas operativos de Windows y Linux, todos los navegadores comunes,

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

Sistema operativo de MacOS, todos los navegadores comunes:

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

más sobre estas herramientas útiles.

En el próximo capítulo escribiremos nuestra primera pieza de código JavaScript.

Lo probaremos en primer lugar en el entorno de tiempo de ejecución integrado
con nuestra plataforma de capacitación. También lo usaremos para verificar
cómo funciona nuestro entorno de desarrollo local. Por lo tanto, asegúrese de
que sus herramientas seleccionadas estén instaladas y que pueda iniciarlas. Si
aún no sabe qué elegir, sugerimos usar el entorno local con el código de estudio
Visual (nuestro editor de código) y el Chrome (navegador web con JavaScript
intérprete y depurador).
 1.3 Sección 3 - ¡Hola, mundo!

1.3.1 El Programa "¡Hola, mundo!"

¿Por qué "¡Hola, mundo!"? Durante casi 50 años, esta oración y sus derivados
han marcado a alguien como aprendiendo un nuevo lenguaje de programación,
aunque es más una tradición que cualquier otra cosa. La frase se usó hace
mucho tiempo en un libro muy importante sobre el lenguaje C, pero el texto en
sí no importa.

La idea es escribir algo en la pantalla usando un idioma específico. Primero, nos

permite ver la sintaxis básica del lenguaje y compararla con otros lenguajes de
programación. En segundo lugar, es un programa muy simple, y cualquiera
puede escribirlo fácilmente o copiarlo desde Internet y verificar si sus
herramientas y entornos están configurados correctamente. En tercer lugar, es
un programa que genera algo, por lo que proporciona comentarios sobre si se
ejecutó correctamente o no.

En el caso de JavaScript del lado del cliente, mostrar algo en la pantalla se

puede entender de dos maneras.

Primero, JavaScript del lado del cliente siempre se ejecuta en el contexto de un

sitio web y le permite manipular elementos de ese sitio web. Entonces, por
ejemplo, podemos usar la función apropiada para insertar algún texto, cambiar
un título, crear una tabla, etc. en la página. De esta manera, controlamos la
parte visual del sitio web.

En segundo lugar, podemos usar la console como pantalla para escribir

información. La consola, como mencionamos en el capítulo anterior, es parte de
las herramientas de desarrollador. Por lo tanto, no es visible de forma
predeterminada, y debe habilitarse correctamente (también escribimos sobre
esto en el capítulo anterior). Para nuestras necesidades, será mucho más
conveniente usar la consola, ya que evitaremos la necesidad de un análisis
exhaustivo de la estructura del sitio web.
Pero, ¿qué es realmente una consola? En primer lugar, es un lugar donde se
muestran varios mensajes, normalmente invisibles para el usuario del
navegador. El intérprete de JavaScript puede generar estos mensajes, por
ejemplo, después de encontrar un error o si lo imprimimos, llamando a la
función apropiada. En segundo lugar, podemos ejecutar comandos de JavaScript
individuales en la consola, que se ejecutarán en el contexto de la página web
cargada actualmente (un poco más sobre eso en un momento).

La función básica que nos permite escribir información en la consola es

[Link]

Entonces, para referirnos al eterno "¡Hola, mundo!", Deberíamos llamarlo de la

siguiente manera:

[Link] ("¡Hola, mundo!");

Podemos tratar la [Link] como una función*. De hecho, la función es solo

un registro, y la consola es el objeto al que pertenece la función.

*Este tipo de función, perteneciente a un objeto, generalmente se llama

método. Pero una vez más, por el momento, para simplificar ciertas cosas,
supongamos que esta es una función ordinaria: no nos molestará en absoluto
(aprenderemos sobre los objetos mucho más tarde).

La function es un código que le permite realizar una tarea específica (en

nuestro caso, mostrar algo en la consola). Las funciones a menudo toman
argumentos, en otras palabras, datos que utilizarán durante la operación. En
JavaScript, ejecutamos una función llamándola, y la llamamos escribiendo su
nombre seguido de un par de paréntesis, donde se proporcionan los
argumentos (si la función no necesita argumentos, los paréntesis se dejan
vacías). En nuestro ejemplo, el argumento es el texto que queremos mostrar.
Tenga en cuenta que para indicar que "¡Hola, mundo!" es el texto, lo colocamos
entre comillas.

Para que el intérprete sepa dónde termina el comando, ponemos un punto y

coma al final de la llamada de función. En este caso, el intérprete se manejaría
sin tal ayuda, pero es un buen hábito terminar cada comando con un punto y
coma, para que no lo olvide cuando realmente es necesario.

Ya sabemos qué escribir, y la única pregunta es, ¿dónde hacerlo?

1.3.2 Entorno de desarrollo en línea

En el editor, debe ver el código que se acaba de discutir, que contiene la
función [Link]. Intenta ejecutarlo. Debe presionar el botón resaltado con el
icono de reproducción, ubicado directamente sobre el editor.
Como resultado, la ventana inferior que simula la consola debe mostrar:

Vaya al editor nuevamente y cambie la palabra "mundo" a su nombre. Inicie el

programa nuevamente y verifique lo que aparece en la ventana de la consola.
Felicitaciones, acabas de modificar un programa escrito en JavaScript.

Podríamos discutir su primer programa JavaScript basado en este ejemplo. Has

aprendido su sintaxis, ejecutarla en línea, verificar su efecto e incluso
modificarlo tú mismo. Puede probar todos los ejemplos que discutimos en este
curso de esta manera. Sin embargo, en el capítulo anterior, le instamos a
configurar su entorno de desarrollo local. Por lo tanto, sería bueno mostrarle
cómo se puede ejecutar este ejemplo en dicho entorno. Y esto requerirá una
introducción un poco más larga.

1.3.3 Entorno de desarrollo local

JavaScript del lado del cliente es un idioma de la web y existe solo en el
ecosistema web. En esta configuración, JavaScript no puede existir solo. El
código JavaScript debe integrarse en un documento HTML. Cuando utilizamos el
entorno en línea para ejecutar nuestro programa, ciertos aspectos nos
ocultaron. Esta vez tendremos que mirarlos más de cerca.

Algunas palabras sobre html

El lenguaje de marcado de hipertexto, o HTML para abreviar, es un conjunto
de etiquetas utilizadas para describir la estructura de un sitio web. Nos permite
dar a una página el formato de un documento que contiene secciones,
encabezados, párrafos, listas y similares. HTML definitivamente está más allá
del alcance del curso actual, por lo que presentaremos solo información básica
al respecto, lo suficiente como para comprender dónde y cómo podemos
ejecutar el código JavaScript asociado con una página determinada.

Los tipos de etiquetas están predefinidos. Por ejemplo, la etiqueta que

especifica un párrafo es <p> y la etiqueta para el primer grado (más grande)
del encabezado es <h1>. El nombre de la etiqueta debe colocarse en los
soportes de ángulo. Las etiquetas generalmente se usan en pares, limitando un
área determinada del documento (tenemos una apertura y una etiqueta de
cierre). La etiqueta de cierre es diferente de la etiqueta de apertura, porque
aparece un corte antes del nombre. Por ejemplo, un párrafo puede verse así:

<p> Es solo un párrafo ordinario. </p>

A menudo, las etiquetas pueden (y a veces deben) colocarse dentro del rango
de otras etiquetas. Por ejemplo, nuestro párrafo debe colocarse dentro de las
etiquetas <body>, que separan la parte principal de nuestro documento.

<Body>
<p> Es solo un párrafo ordinario. </p>
</body>.

Documento HTML mínimo

Intentemos crear un HTML mínimo que define una página vacía.

<!DOCTYPE html>
<html>
<head>
<title> Página vacía </title>
</head>
<body>
</body>
</html>

Comencemos con la Declaración <!Doctype html>. Esta no es una etiqueta

típica, ya que se usa para informar al navegador que todo el documento se ha
preparado de acuerdo con HTML5. La descripción real del documento comienza
con la etiqueta <html>, que junto con la etiqueta </html> establece los límites
del documento. Cada otra etiqueta debe estar dentro de estos. Si alguna
etiqueta dada contiene otro contenido, habrá una etiqueta de cierre
correspondiente, formando algún tipo de contenedor.

La siguiente etiqueta, <head>, contiene información adicional sobre el

documento, que también debe colocarse en etiquetas. La más básica es la
etiqueta <title>, que establece el título de la página en su mayoría visible en la
barra de título del navegador. Después de <head> está el elemento <body>, y
el contenido visible de la página web debe colocarse allí (por ejemplo, nuestro
párrafo).

1.3.4 La etiqueta de script

El código JavaScript para ejecutar el navegador en la página debe adjuntarse al
HTML utilizando la etiqueta <Script>, y hay dos formas en que se puede hacer.
El código se puede incrustar directamente dentro de las etiquetas <script> y
</script>, pero esto solo se recomienda cuando el código es corto. Otro
enfoque es utilizar el atributo "src" para señalar un archivo separado que
contiene el código JavaScript. Esto es especialmente cierto cuando el mismo
código se usará en varias páginas, porque repetir exactamente el mismo código
muchas veces es una mala práctica, ya que cualquier cambio debe aplicarse a
todos los archivos; Y además, aumenta artificialmente el tamaño de la página.
La extensión del archivo JavaScript es .js.

El navegador lee HTML por línea, y las etiquetas de script se ejecutan justo en el
momento en que el navegador analiza la etiqueta <script> (análisis para
lenguajes de programación significa un análisis formal del código por una
máquina para comprender su estructura). Por lo general, las etiquetas <script>
se insertan en el encabezado de la página entre las etiquetas <head> y
</head>, y podemos insertar muchas de ellas en un archivo, por ejemplo, para
incluir el código JavaScript de diferentes archivos. Este comportamiento se
puede cambiar para los scripts externos señalados por el atributo "src"
mediante el uso de los atributos "defer" o "async".

 defer: significa que el script debe ejecutarse después de cargar toda la

página;
 async: significa que el script se ejecutará inmediatamente, pero en
paralelo a analizar el resto de la página.

1.3.5 ... y algo sobre CSS

CSS, o hojas de estilo en cascada, es un lenguaje utilizado junto con HTML para
describir la apariencia de una página y sus elementos. En pocas palabras, HTML
describe la estructura de un documento, mientras que CSS describe su
presentación.

Por ejemplo, en HTML, podemos describir una página que tiene un encabezado,
dos párrafos y una tabla de datos.

En CSS, podemos definir qué fuente se usará en toda la página, qué color
tendrá el fondo o si el cursor del mouse, cuando se mueve sobre la mesa, debe
cambiar de forma.
Por lo tanto, podemos tratar el CSS como algún tipo de configuración de la capa
visual de la página. Por lo tanto, el sitio web se construirá con mayor frecuencia
sobre la base de un archivo HTML (es decir, una descripción de la estructura), el
código JavaScript (que nos permite agregar, por ejemplo, algunos mecanismos
de interacción) y un archivo CSS (que describe la presentación capa de la
página). Sin embargo, lo importante es que no habrá página sin un archivo
HTML, pero podemos crear fácilmente una página sin usar archivos CSS. La
descripción de CSS en sí está fuera del alcance del curso actual, y lo
mencionamos solo por el orden.

1.3.6 ¿Cómo podemos ejecutar nuestro código

JavaScript?
Comencemos con un ejemplo simple, donde el navegador obtiene una página
simple (tal vez incluso vacía) de [Link] La dirección está compuesta
para este ejemplo, así que no intentes ingresarla. Mire la figura a continuación.

Comencemos desde el lado derecho de la figura. El usuario ejecuta un

navegador web en su computadora (por ejemplo, Chrome). Usando el acceso
directo apropiado, encienden las herramientas del desarrollador (consulte el
capítulo anterior) para poder usar la consola. Recuerde que estas herramientas
no son necesarias para el uso normal del navegador y, por lo tanto, están
ocultas de forma predeterminada. Luego, el usuario tipos [Link] (la URL
de nuestro sitio falso) en la barra de direcciones.

En el servidor remoto (lado izquierdo del dibujo), asociado con la dirección

[Link] se inicia un servidor web que, después de recibir una solicitud
de nuestro usuario, preparará una respuesta para ellos. En el caso más simple,
la respuesta solo contendrá un archivo HTML, que se puede almacenar en el
mismo servidor. El archivo HTML (en este ejemplo, [Link]) es devuelto al
usuario y procesado por el navegador. Si algún contenido (por ejemplo, un
párrafo con texto) se define en él, se mostrará en la ventana del navegador.
Sin embargo, estamos más interesados en el hecho de que el archivo
[Link] contiene las etiquetas <script> y </script>, con una pieza de código
JavaScript entre ellas. ¿Lo reconoces? Este es obviamente un intento de mostrar
nuestro "¡Hola, mundo!" en la consola. Al cargar la página, el código colocado
dentro de las etiquetas <script> debe ejecutarse y, si las herramientas del
desarrollador están habilitadas y el panel de la consola está visible, la consola
mostrará "¡Hola, mundo!".

Todo funcionará exactamente igual que en el escenario anterior, excepto que el

servidor web proporcionará el archivo [Link] además de [Link]. El usuario
no notará ninguna diferencia. Por supuesto, colocar nuestro código en un
servidor remoto solo para probarlo sería un poco engorroso.

Tenemos otra posibilidad, que es que podemos cargar un archivo HTML local (es
decir, uno que está en nuestra computadora) en el navegador. Si este código
contiene una etiqueta <script> que indica algún archivo JavaScript, entonces
este archivo también se cargará desde los recursos locales.

La imagen muestra un escenario simple en el que el usuario carga un archivo

local [Link] en el navegador, en el que hay una referencia a [Link] (por lo
que este archivo también se cargará automáticamente).
Puede cargar un archivo HTML local, ya sea escribiendo su ruta local después
del archivo: /// en la barra de direcciones, o simplemente abriéndolo en su
navegador usando el comando Open desde el menú. Dado que el menú en los
navegadores a menudo está oculto, una forma más simple puede ser usar un
atajo para abrir documentos existentes en aplicaciones. El atajo es universal, no
solo para los navegadores y probablemente ya lo haya visto:

o en el caso de macOS:

1.3.7 Está bien, tal vez finalmente podríamos

ejecutar algo ...
Para ejecutar esto localmente, deberá abrir el editor de código de su elección.
Cree un nuevo archivo con la extensión .html (el nombre del archivo no importa,
pero es una buena práctica evitar espacios en el nombre del archivo). Coloque
el siguiente código en este archivo y guárdelo.

<!DOCTYPE html>
<html>
<head>
<title>Empty Page</title>
<script src="[Link]"></script>
</head>
<body>
</body>
</html>
Luego, en el mismo editor, cree otro archivo, esta vez llamado [Link] (este es
el nombre que usamos en nuestro archivo HTML). Debe contener una línea que
haya visto antes:

[Link]("Hello, World!");

Guarde los cambios y vaya al navegador. Abra una nueva pestaña, habilite las
herramientas del desarrollador (se abran para una pestaña particular) y
seleccione la herramienta de consola. Date un momento para acostumbrarte al
diseño de las herramientas del desarrollador (cada herramienta, incluida la
consola, debe colocarse en un panel separado, que se puede seleccionar).

Por si acaso, asegúrese de que el enfoque esté configurado en la ventana del

navegador (es decir, la nueva pestaña) haciendo clic en ella. Luego, utilizando
el acceso directo de teclado apropiado, abra el archivo HTML que acaba de
crear. Si todo se ha hecho correctamente, debería ver nuestro "¡Hola, mundo!"
Iniciar sesión en la consola. Asegúrese de que funcione y que pueda ver un
mensaje que se muestra en la consola de depuración. Si es necesario, hazlo
nuevamente, siguiendo cuidadosamente los pasos.

Y ahora un pequeño desafío. Intente modificar el archivo HTML usted mismo

para que no se refiera al archivo [Link]. En cambio, el mismo código JavaScript
que escribimos en [Link] debe colocarse directamente después de la etiqueta
<Script>. Si tiene problemas, vuelva al primer dibujo en esta sección.

Para ejecutar este código en el entorno en línea, colóquelo dentro de las

pestañas HTML y, si es necesario, presione el botón Ejecutar.

1.3.8 Ejecución del código directamente en la consola

Tenemos otra opción bastante conveniente cuando se trata de ejecutar piezas
cortas de código JavaScript en el navegador (y nuestro programa, que consiste
en una instrucción, es definitivamente corta). Como dijimos antes, la consola no
solo se usa para mostrar información, sino que también le permite ejecutar
instrucciones individuales de JavaScript. Estas instrucciones deben ejecutarse
en el contexto de alguna página HTML. Sin embargo, no necesariamente tiene
que escribir su página mínima, como lo hicimos hace un momento. Intente abrir
una nueva pestaña y escriba about:blank en la barra de direcciones. Esta es una
dirección pseudo que le dice a su navegador que genere y cargue una página
HTML en blanco mínima.

Luego ejecute las herramientas de desarrollador. Al principio, podemos verificar

cómo se ve el HTML generado por el navegador. Para hacerlo, seleccione la
primera herramienta del panel (en Chrome, serán elementos, en el inspector de
Firefox). Debería ver un código HTML absolutamente mínimo:
<html>
<head></head>
<body></body>
</html>

Ahora elija la consola de las herramientas del desarrollador. Debería ver un

mensaje, generalmente un signo > o >> seguido de un cursor intermitente (si
no hay cursor, haga clic en el mensaje). Entonces puedes ingresar la instrucción
que mostrará "¡Hola, mundo!" en la consola (usando la función [Link]). El
escenario se muestra en la figura a continuación.

De hecho, independientemente del navegador, debemos obtener el mismo

efecto: la consola mostrará el texto que especificamos. En el caso de Chrome
(que se ejecuta en el sistema operativo de Windows), la consola debería verse
algo así después de completar esta tarea:

En el caso de Firefox (también Windows) de esta manera:

Para ambos navegadores, las ventanas del depurador que contienen la consola
pueden variar mínimamente dependiendo de la versión del software y el
sistema operativo que lo ejecuta. Las herramientas de desarrollador se pueden
mover. Se pueden ubicar en la parte inferior del navegador, como en los
ejemplos mostrados, pero también se pueden colocar en el lado izquierdo o
derecho de la ventana (o como una ventana separada por completo). Así que no
se sorprenda si el diseño de su navegador es ligeramente diferente de las
imágenes.

1.3.9 Resumen de la sección

Nuestro primer programa se lanzó en un entorno en línea al principio. Este
entorno nos permite ocultar ciertos detalles que no son importantes para
nosotros en esta etapa del curso. Todos los ejercicios y ejemplos que
discutiremos deben hacerse en este entorno.

Sin embargo, de vez en cuando, sería bueno para usted intentar hacer el
ejemplo elegido en el entorno local también. Está mucho más cerca de lo que
realmente se usa en el trabajo de un desarrollador web. Ejecutar el código
JavaScript en el entorno local puede parecer un poco engorroso al principio,
pero afortunadamente esta es solo una primera impresión. Recuerde, para
probar instrucciones simples, solo necesita usar la consola con una página vacía
(por ejemplo, abaut:blanck). Si desea probar una pieza de código un poco más
grande, es mejor crear un archivo HTML mínimo que se referirá al archivo que
contiene nuestro código JavaScript usando la etiqueta <Script>.
 2.0 Sección 1 - Variables

2.0.1 variables
La capacidad de escribir varias información en la pantalla, como "¡Hola,
mundo!" Puede ser divertido por un tiempo, pero no es una forma universal de
escribir programas. Es hora de comenzar a aprender más sobre los elementos
del rompecabezas que finalmente le permitirán crear programas que resuelvan
problemas reales.

Hay bastantes de estos elementos, y los presentaremos gradualmente, aunque

no necesariamente en una cronología simple. A menudo volveremos a lo que ya
se ha discutido, extendiendo la información anterior con algo nuevo. A veces
también avanzaremos, utilizando mecanismos que solo se explicarán con más
detalle con el tiempo.

Al principio puede parecer un poco abrumador, pero con el tiempo todo debería
comenzar a fusionarse en una imagen coherente.

El primer elemento de programación del que hablaremos es la variable. Puede

conocer el nombre de una variable de las matemáticas, donde significa un
símbolo utilizado como marcador de posición para diferentes valores que
pueden cambiar. Tienen un papel similar en la programación.

¿Para qué los necesitamos realmente? Como puede adivinar, la mayoría de los
programas son bastante complejos, y rara vez podemos resolver el problema
con una sola operación. Por lo general, el programa consistirá en muchas más
operaciones, cada una de las cuales puede producir algunos resultados
intermedios, lo que será necesario en los próximos pasos. Las variables nos
permiten almacenar dichos resultados, modificarlos o alimentarlos en
operaciones posteriores

2.0.2 Nombrar las variables

Imagine variables como contenedores en los que puede almacenar cierta
información (dicha información se llamará valores variables). Cada contenedor
debe tener su propio nombre, por el cual podremos indicarlo claramente.

Por lo general, tenemos mucha libertad cuando se trata de inventar estos

nombres, pero recuerde que deberían referirse a lo que almacenaremos en la
variable (por ejemplo, height, color, stepCounter, and so on). Por supuesto, JavaScript
no verificará la correlación entre el nombre y el contenido de la variable: es
simplemente una de las muchas buenas prácticas que nos facilitan más para
nosotros y para otros comprender el código más adelante.

En la mayoría de los lenguajes de programación, se debe declarar una variable

antes de su uso, y JavaScript no es una excepción. Declarar una variable es
simplemente "reservar" el nombre de la variable. De esta manera, informamos
al programa que en la parte más de la ejecución, usaremos este nombre para
referirnos a nuestro contenedor, para recuperar un valor de él o guardarle un
valor.

En JavaScript, los nombres variables pueden consistir en cualquier secuencia de

letras (lower-case and upper-case), dígitos, caracteres subrayados y signos de dólar,
pero no deben comenzar con un dígito. Hay una lista de palabras reservadas
que no se pueden usar como nombres variables (mire la tabla a continuación).

Lo importante es también que el intérprete de JavaScript distingue entre las

letras de los casos inferiores y superiores, también en nombres variables, por lo
que nombres como test, test o test se tratarán como diferentes.

2.0.3 declarando variables

Como mencionamos antes, declaramos la variable para reservar un nombre
para ello. Esta es una simplificación, porque, de hecho, el espacio de memoria
también está reservado para la variable, pero al programar en JavaScript,
prácticamente nunca tenemos que pensar en lo que sucede en la memoria. Por
lo general, los valores almacenados en la variable podrán modificarse durante la
ejecución del programa (después de todo, son "variables"). ¿Por qué
normalmente? Porque podemos declarar variables cuyos valores no se pueden
cambiar. Para ser honesto, ya ni siquiera las llamamos variables, los llamamos
constantes. Para las declaraciones, utilizamos las palabras clave VAR o LET
para variables y const para constantes. Por ahora, sin embargo, nos quedemos
con las variables habituales, y volveremos a las constantes en un momento.

Analicemos la siguiente muestra de código (también la encontrará en la

ventana del editor: ejecutelo allí y vea los resultados en la consola):

1. var height;
2. [Link](height); // -> undefined
3. [Link](weight); // -> Uncaught ReferenceError: weight is not
defined

La primera línea es la declaración variable (podemos ver la palabra clave var).

Esta declaración significa que la altura de la palabra será tratada como el
nombre del contenedor para ciertos valores.

La declaración, como otras instrucciones de JavaScript, debe terminar con un

punto y coma. En la segunda línea, intentamos escribir el valor de esta variable
(es decir, lo que está en el contenedor) en la consola. Debido a que aún no
hemos puesto nada allí, el resultado no está definido (el intérprete sabe esta
variable, pero aún no tiene valor: el valor no está definido). En la siguiente línea,
intentamos imprimir el contenido de la variable de peso ... que olvidamos
declarar. Esta vez, veremos referenceError. El intérprete JavaScript, que ejecuta
nuestro programa, nos ha informado que no conoce una variable con este
nombre (por lo que la variable en sí no está definida).

En el ejemplo del editor a continuación, usamos la palabra clave var.

La alternativa es la palabra clave Let. Usamos ambas palabras clave de la
misma manera. Ambos están destinados a declarar variables, y ambos se
pueden encontrar en diferentes ejemplos en Internet o en libros. Sin embargo,
no son exactamente los mismos, y discutiremos las diferencias en su operación
más adelante en este capítulo (incluso en varios lugares).

La palabra clave VAR proviene de la sintaxis de JavaScript original, y la palabra

clave LET se introdujo mucho más tarde. Por lo tanto, encontrará VAR más en
programas más antiguos. Actualmente, se recomienda usar la palabra Let por
razones que discutiremos en un momento.

Entonces, echemos un vistazo a nuestro ejemplo reescrito esta vez usando la

palabra clave Let.

1. let height;
2. [Link](height); // -> undefined

Una de las diferencias básicas en el uso de VAR y dejar que nos impida declarar
otra variable con el mismo nombre (se genera un error). El uso de VAR le
permite redeclarar una variable, lo que potencialmente puede conducir a
errores en la ejecución del programa.

1. var height;
2. var height;
3. [Link](height); // -> undefined

El ejemplo anterior demuestra la posibilidad de redeclarar una variable

utilizando la palabra clave var. En esta situación, no causará un error, pero en
programas más complejos, una redeclaración, especialmente por accidente, ya
no puede ser sin consecuencias. Al declararse con Let, el intérprete verifica si
tal variable ya se ha declarado, sin importar si LET o VAR se usa en la
declaración anterior.

1. let height;
2. let height; // -> Uncaught SyntaxError: Identifier 'height' has already been
declared
3. [Link](height);

Por lo tanto, use Let para declarar Variables, aunque solo sea porque no desea
declarar accidentalmente una variable nuevamente.

2.0.4 Variables de inicialización

Después de una declaración exitosa, la variable debe inicializarse, en otras
palabras, se le debe dar su primer valor. La inicialización se realiza asignando
un cierto valor a una variable (indicada por su nombre). Para asignarlo, usamos
el operador =.

Puede asignar a una variable: un valor específico; el contenido de otra variable;

o, por ejemplo, el resultado devuelto por una función.

La inicialización se puede hacer junto con la declaración, o por separado como

un comando independiente. Es importante ingresar el primer valor en la
variable antes de intentar leerlo, modificarlo o mostrarlo.

1. let height = 180;

2. let anotherHeight = height;
3. let weight;
4. [Link](height); // -> 180
5. [Link](anotherHeight); // -> 180
6. weight = 70;
7. [Link](weight); // -> 70

En el ejemplo anterior (verifíquelo en el editor), las declaraciones de la altura de

las variables y otra noche se combinan con su inicialización, mientras que el
peso variable se declara e inicializa por separado. Las variables de altura y peso
se inicializan proporcionando valores específicos (más precisamente, un
número), mientras que la otra variable de Vieve recibe un valor leído de la
variable de altura. Los valores de todas las variables se muestran en la consola.
Por cierto, presta atención a una cosa. Si especifica un nombre de variable en
[Link], el intérprete lo reconoce y muestra su valor. Si pone el mismo
nombre en comillas, se tratará como texto sin formato y se mostrará como tal.

1. let height = 180;

2. [Link](height); // -> 180
3. [Link]("height"); // -> height