Academia X - Gui A JavaScript v1.0.0
Academia X - Gui A JavaScript v1.0.0
Contenido
1 Introducción 4
1.1 Bienvenida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.1.1 Libro vivo . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.1.2 Alcance . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.2 Prerequisitos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.3 ¿Cómo evitar bloqueos? . . . . . . . . . . . . . . . . . . . . . . . 6
2 Primeros pasos 7
2.1 Visión general . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.1.1 ¿Qué es y porqué debes aprenderlo? . . . . . . . . . . . . . 7
2.1.2 ¿En dónde se utiliza? . . . . . . . . . . . . . . . . . . . . . 8
2.1.3 ¿Qué trabajos puedes conseguir? . . . . . . . . . . . . . . 9
2.1.4 ¿Cuánto puedes ganar? . . . . . . . . . . . . . . . . . . . 9
2.1.5 ¿Cuales son las preguntas más comunes? . . . . . . . . . . 10
2.2 Historia, evolución, y versiones . . . . . . . . . . . . . . . . . . . . 11
2.3 Características y ventajas . . . . . . . . . . . . . . . . . . . . . . 12
2.4 Diferencias con otros lenguajes de programación . . . . . . . . . . 12
2.5 Configuración . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.5.1 IDE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.5.2 Entorno . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.6 Hola Mundo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3 Gramática 15
3.1 Sintaxis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.2 Comentarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
4 Tipos y variables 16
4.1 Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
4.2 Listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
2
Contenido
4.3 Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.4 Constantes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
5 Operadores 23
5.1 Operadores de aritméticos . . . . . . . . . . . . . . . . . . . . . . 23
5.2 Operadores comparativos . . . . . . . . . . . . . . . . . . . . . . 24
5.3 Operadores lógicos . . . . . . . . . . . . . . . . . . . . . . . . . 24
6 Condicionales 25
6.1 Condición única . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
6.2 Múltiples condiciones . . . . . . . . . . . . . . . . . . . . . . . . 26
7 Bucles 28
7.1 Bucle for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
7.2 Bucle while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
8 Funciones 30
10 Módulos 34
11 Siguientes pasos 36
11.1 Herramientas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
11.2 Recursos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
11.3 ¿Que viene después? . . . . . . . . . . . . . . . . . . . . . . . . 37
11.4 Preguntas de entrevista . . . . . . . . . . . . . . . . . . . . . . . 38
3
1 INTRODUCCIÓN
1 Introducción
1.1 Bienvenida
• Gramática
• Tipos y variables
• Operadores
• Condicionales
• Bucles
• Funciones
• Programación orientada a objetos (POO)
• Módulos
La motivación de esta guía es darte todo el conocimiento técnico que necesitas para
elevar la calidad de tus proyectos y al mismo tiempo puedas perseguir metas más
grandes, ya sea utilizar esta tecnología para tus pasatiempos creativos, aumentar
tus oportunidades laborales, o si tienes el espíritu emprendedor, incluso crear tu
propio negocio en línea. Confío en que esta guía te dará los recursos que necesitas
para que tengas éxito en este campo.
Empecemos!
4
1 INTRODUCCIÓN
Esta publicación fue planeada, editada, y revisada manualmente por Xavier Reyes
Ochoa. La fundación del contenido fue generada parcialmente por inteligencia ar-
tificial usando ChatGPT (Mar 14 Version) de OpenAI. Puedes ver más detalles en
https://openai.com/
Esto es a lo que llamo un trabajo VIVO, esto quiere decir que será actualizado en
el tiempo a medida que existan cambios en la tecnología. La versión actual es 1.0.0
editada el 23 de marzo de 2023. Si tienes correcciones importantes, puedes escri-
birnos a nuestra sección de contacto en https://wwww.academia-x.com
1.1.2 Alcance
El objetivo de esta guía es llenar el vacío que existe sobre esta tecnología en Espa-
ñol siguiendo el siguiente enfoque:
1.2 Prerequisitos
5
1 INTRODUCCIÓN
Si ya tienes estos requisitos, estarás en una buena posición para comenzar a apren-
der JavaScript y profundizar en sus características y aplicaciones.
Si todavía no tienes conocimiento sobre algunos de estos temas, te recomiendo
buscar tutoriales básicos en blogs a través de Google, ver videos en YouTube, o
hacer preguntas a ChatGPT. Alternativamente, puedes empezar ya e investigar en
línea a medida que encuentres bloqueos enteniendo los conceptos en esta guía.
1. No solo leas esta guía. La práctica es esencial en este campo. Practica todos
los días y no pases de lección hasta que un concepto esté 100% claro.
2. No tienes que memorizarlo todo, solo tienes que saber donde están los temas
para buscarlos rápidamente cuando tengas dudas.
3. Cuando tengas preguntas usa Google, StackOverFlow, y ChatGPT
4. Acepta que en esta carrera, mucho de tu tiempo lo vas utilizar investigando e
innovando, no solo escribiendo código.
6
2 PRIMEROS PASOS
2 Primeros pasos
7
2 PRIMEROS PASOS
8
2 PRIMEROS PASOS
En resumen, aprender JavaScript puede prepararte para una amplia gama de ca-
rreras en el campo de la tecnología, desde el desarrollo web hasta las aplicaciones
móviles y la inteligencia artificial.
9
2 PRIMEROS PASOS
Estas son solo algunas de las preguntas más comunes sobre JavaScript. Hay mu-
chas más que pueden surgir a medida que avanzas en tu aprendizaje y desarrollo
de aplicaciones con este lenguaje de programación.
10
2 PRIMEROS PASOS
Al finalizar este recurso, tendrás las habilidades necesarias para responder o encon-
trar las respuestas a estas preguntas.
11
2 PRIMEROS PASOS
Ventajas:
12
2 PRIMEROS PASOS
2.5 Configuración
2.5.1 IDE
Los archivos de JavaScript son archivos de texto. Puedes editarlos con editores de
texto como Notepad en Windows o Notes en MacOS pero es recomendado utilizar
un IDE (Integrated Development Environment) que es una aplicación de edición
de código más avanzado que le da colores a tu código para que sea más fácil de
leer y tengas funciones de autocompletado, entre otras. Algunos IDEs populares
son Brackets, Atom, Sublime Text, Vim, y Visual Studio Code.
El editor recomendado para practicar el código que vamos a ver es Visual Studio
Code (o VSCode) que puedes bajar desde https://code.visualstudio.com/
2.5.2 Entorno
13
2 PRIMEROS PASOS
2. Editor de texto: puedes usar un editor de texto sencillo como el Bloc de notas
en Windows o TextEdit en Mac, pero también puedes usar un editor de código
más avanzado como Visual Studio Code, Sublime Text, etc.
3. Conocimiento básico de HTML y CSS: ya que JavaScript se utiliza para agre-
gar dinamismo y interactividad a las páginas web, es importante tener una
comprensión básica de HTML y CSS.
Una vez que tengas estos elementos, estarás list@ para escribir y ejecutar código
JavaScript en tu navegador. Puedes crear un archivo HTML y agregar tu código
JavaScript dentro de una etiqueta <script> o puedes escribir código JavaScript di-
rectamente en la consola del navegador.
También podrías modificar este código con tu nombre. Si esqJuanr, debería imprimir
en la consola qHola, Juanr.
Reto:
Modifica el ejemplo anterior para imprimir qHola Universoren la consola.
14
3 GRAMÁTICA
3 Gramática
3.1 Sintaxis
3.2 Comentarios
Los comentarios en JavaScript son líneas de texto que no son interpretadas como
parte del código. Se usan para proporcionar información adicional sobre el código,
como explicaciones, notas, o instrucciones para el desarrollador. Los comentarios
también se pueden usar para deshabilitar código temporalmente, sin tener que eli-
minarlo completamente.
15
4 TIPOS Y VARIABLES
Ejemplo:
Este código es un comentario.
Reto:
Comenta esta línea para que no cause errores y se lea como comentario:
4 Tipos y variables
4.1 Variables
16
4 TIPOS Y VARIABLES
Ejemplo:
Este código declara una variable llamada qlibrory le asigna el valor de una cadena
de texto que contiene el título de un libro. Luego, imprime el valor de la variable
qlibroren la consola.
Texto es un tipo de dato útil para guardar información como números telefónicos y
colores, entre otros. Este código asigna dos variables, una llamada telf que contiene
un número de teléfono como una cadena de caracteres, y otra llamada color que
contiene el color amarillo como una cadena de caracteres.
También podemos guardar datos como números enteros y decimales. Estos datos
se usan para realizar operaciones matemáticas y representar valores de peso, di-
nero, entre otros. Este código asigna dos variables, una con un valor entero (100) y
otra con un valor decimal (1.967857).
17
4 TIPOS Y VARIABLES
El tipo de dato buleano representa los valores de verdadero y falso. Este tipo de
datos es útil, por ejemplo, para para indicar si un usuario está autorizado a acceder
a una app o no, entre varios usos. Este código crea una variable llamadaqautorizador
que es verdadera y otra variable llamada qseleccionadorque es falsa.
4.2 Listas
Las listas en JavaScript son una estructura de datos que nos permite almacenar una
colección ordenada de elementos. Estos elementos pueden ser de cualquier tipo,
desde números hasta sublistas. También los vas a encontrar con otros nombres
18
4 TIPOS Y VARIABLES
También existen listas de texto. Este código crea una variable llamada qanimalesr
que contiene una lista de elementos, en este caso, tres animales: perro, gato y ti-
gre.
Y esta es una lista de datos mixtos. Este código crea una variable llamadaqdatosMix-
tosrque contiene una lista de elementos de diferentes tipos, como texto, números,
booleanos y otra lista.
19
4 TIPOS Y VARIABLES
Reto:
Crea una lista en JavaScript que contenga los nombres de los meses del año. Ac-
cede al 3er índice e imprímelo en la consola.
4.3 Objetos
Los objetos en JavaScript son una forma de almacenar y organizar datos mapeán-
dolos de uno a uno. Estos datos se almacenan en forma de pares clave-valor, donde
la clave suele ser una cadena de texto y el valor puede ser cualquier tipo de dato.
También los vas a encontrar con otros nombres como mapas, diccionarios, etc.
Ejemplo:
Este código crea un objeto llamado jugadores que contiene dos pares clave-valor.
El primer par clave-valor es 10:oMessipy el segundo es 7:oCristiano Ronaldop.
Luego, se imprime el valor asociado con la clave 10, que es oMessip.
20
4 TIPOS Y VARIABLES
También podemos mapear de texto a texto. Este código crea un objeto llamado
qpaísesrque contiene claves y valores. Las claves son códigos de países (EC, MX,
AR) y los valores son los nombres de los países (Ecuador, México, Argentina).
E incluso podemos mapear de texto a listas de texto, entre muchas otras opciones.
Este código establece un objeto llamado qemailsrque contiene dos pares clave-
valor. Cada clave es un nombre de persona y el valor es un arreglo de direcciones
de correo electrónico asociadas con esa persona.
21
4 TIPOS Y VARIABLES
Reto:
Crea un objeto en JavaScript que represente una computadora, con sus respectivas
características (marca, modelo, procesador, memoria RAM, etc).
4.4 Constantes
Las constantes son variables que no pueden ser reasignadas. Esto significa que
una vez que se asigna un valor a una constante, este no puede ser cambiado.
Ejemplo:
Esta línea de código establece una constante llamada qpircon un valor de
3.14159265359. Esta constante se puede usar para almacenar un valor numérico
que no cambiará a lo largo del programa.
Reto:
22
5 OPERADORES
5 Operadores
Los operadores aritméticos en JavaScript son usados para realizar operaciones ma-
temáticas básicas. Estos operadores incluyen sumar, restar, multiplicar, dividir, entre
otros.
Ejemplo:
Este código realiza operaciones matemáticas básicas, imprimiendo los resultados
en la consola. Estas operaciones incluyen suma, resta, multiplicación y división.
Reto:
Usa los operadores aritméticos para calcular el área de un círculo con radio 5.
23
5 OPERADORES
Los operadores comparativos en JavaScript son usados para comparar dos valores
y determinar si son iguales o diferentes. Estos operadores so útiles para determinar
si dos valores son iguales, si dos valores no son iguales, si un valor es mayor o
menor que otro, entre otros.
Ejemplo:
Este código muestra cómo se usan los operadores para comparar valores.
Reto:
Escribe un programa que compare dos números oapy obpy determina si oapcon
el valor de 4 es mayor, menor o igual a obpcon un valor de 2.
24
6 CONDICIONALES
Este código muestra el uso de los operadores lógicos oypy ooppara evaluar expre-
siones booleanas. El operador oypdevuelve verdadero si ambas expresiones son
verdaderas, de lo contrario devuelve falso. El operador oopdevuelve verdadero si
al menos una de las expresiones es verdadera, de lo contrario devuelve falso.
Reto:
Escribe una línea de código que devuelva verdadero si oxpes mayor que 0 y oyp
es menor que 0.
6 Condicionales
25
6 CONDICIONALES
Ejemplo:
Este código comprueba si una variable booleana (autorizado) es verdadera. Si es
así, imprime un mensaje en la consola indicando que el usuario puede ingresar. Si
no es así, imprime un mensaje indicando que el usuario no puede ingresar.
Reto:
Escribe código condicional que revise si un número oapes par o impar. La variable
oaptiene el valor de 17 y debe imprimir a la consola oEs parpsi es par o oEs imparp
si es impar.
26
6 CONDICIONALES
Este condicional es útil cuando hay una gran cantidad de posibles resultados para
una expresión. Este código compara una variable (color) con diferentes valores y
ejecuta una acción dependiendo del resultado de la comparación. En este caso, si
la variable color es igual a oamarillop, se imprimirá oAdvertenciapen la consola.
27
7 BUCLES
Reto:
Crea un programa que evalúe una variable onumeropy dependiendo del resultado,
imprima un mensaje diferente. Si el número es mayor a 10, imprime qEl número es
mayor a 10r. Si el número es menor a 10, imprime qEl número es menor a 10r.
Si el número es igual a 10, imprime qEl número es igual a 10r.
7 Bucles
Los bucles son otra estructura de control de flujo que se utilizan para iterar sobre
una secuencia de elementos. También se los llama loops o ciclos.
Ejemplo:
Este código itera sobre una lista de animales e imprime cada elemento de la lista en
la consola.
Reto:
28
7 BUCLES
while es un tipo de bucle en JavaScript que se usa para ejecutar una serie de instruc-
ciones mientras se cumpla una condición. Esta condición se evalúa antes de cada
iteración del bucle.
Ejemplo:
Este código establece un bucle while que imprime los números enteros desde 100
hasta 911 en la consola. El bucle while se ejecutará mientras la variable entero sea
menor o igual a la variable emergencia. Cada vez que el bucle se ejecuta, la variable
entero se incrementa en 1.
Ten cuidado de no inclur una condición para parar el bucle. Esto podría seguir co-
rriendo tu código indefinidamente hasta congelar tu computador.
Reto:
Crea un bucle while que imprima los números del 1 al 10 en la consola.
29
8 FUNCIONES
8 Funciones
En JavaScript, una función es un bloque de código diseñado para realizar una tarea
específica y se puede reutilizar en varias partes el código. Las funciones se pueden
definir para realizar cualquier tarea, desde realizar cálculos hasta mostrar mensajes
en la pantalla.
Ejemplo:
Esta función toma dos argumentos (primero y segundo) de forma dinámica y los
suma. Luego, imprime el resultado en la consola. Esta función se llama dos veces
con diferentes argumentos para mostrar los resultados de la suma.
También puedes crear funciones que retornen un valor. Esto significa que una vez
que se ejecuta una función, el valor devuelto se puede usar en otra parte del código.
Esta función toma dos argumentos (primero y segundo) y los multiplica para devolver
el resultado. En este caso, el resultado es 6.
30
8 FUNCIONES
Esta función imprime el primer elemento de una lista. En este caso, la lista es una
lista de animales, y la función imprime el primer elemento de la lista, que es operrop
. Funciones como esta son útiles para evitar la repetición de código y para ahorrar
tiempo.
Finalmente, puedes ver otro ejemplo de una función bastante compleja. Esta fun-
ción implementa el algoritmo de ordenamiento QuickSort para ordenar una lista de
elementos. El algoritmo comienza tomando un elemento de la lista como pivote y
luego coloca los elementos menores que el pivote a su izquierda y los elementos
mayores a su derecha. Luego, se aplica el mismo algoritmo a las sublistas izquierda
y derecha hasta que la lista esté ordenada. No tienes que entender todo lo que hace
31
8 FUNCIONES
internamente pero te dará una idea de la complejidad que pueden tener programas
como apps con miles de funciones.
Reto:
Escribe una función que tome dos números como argumentos y devuelva el mayor
de los dos.
32
9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)
9.1 Paradigma
9.2 Clases
Las clases en JavaScript son una forma de definir objetos creando una plantilla.
Se pueden usar para crear objetos con propiedades y métodos similares. Las pro-
piedades son valores que pertenecen al objeto y los métodos son funciones que
perteneces al objeto.
Ejemplo:
En este ejemplo creamos una clase llamada oLenguajepque inicializamos con las
propiedades onombrepy oañop. Adicionalmente creamos el método odescripciónp
que imprime un texto usando las propiedades previas. Con esa clase podemos crear
una instancia para el lenguaje oHTMLpy otra para oCSSp. Ahora podemos crear,
en teoría, un número infinito de lenguajes sin reescribir los objetos manualmente.
33
10 MÓDULOS
Reto:
Crea una clase llamada Auto que tenga propiedades como marca, modelo y año.
Luego, crea un par de instancias de esta clase.
10 Módulos
Los módulos son una forma de incluir código externo de otro archivo. Esto permite
a los desarrolladores reutilizar código y ahorrar tiempo al escribir código.
Ejemplo:
Este archivo define una función que toma dos argumentos (a y b) y luego imprime
el resultado de la resta de a y b en la consola. El código exporta la función para
que pueda ser usada en otros archivos. Exportar es una forma de compartir código
34
10 MÓDULOS
entre archivos. Esto significa que un archivo puede exportar variables, funciones y
objetos para que otros archivos los puedan usar.
Y en otro archivo podemos importar y utilizar esta función. Este código importa una
función desde el archivo externo y luego la usa para restar 10 menos 2, resultando
en 8.
Reto:
Crea un archivo llamado que contenga una función para calcular el área de un rec-
tángulo. Luego, importa la función en otro archivo y usala para calcular el área de
un rectángulo con lados de 3 y 4.
35
11 SIGUIENTES PASOS
11 Siguientes pasos
11.1 Herramientas
11.2 Recursos
36
11 SIGUIENTES PASOS
1. Practicar JavaScript: Una vez que hayas aprendido los conceptos básicos de
JavaScript, es importante practicar para mejorar tus habilidades. Puedes hacer
esto escribiendo código en un editor de texto y ejecutándolo en un navegador
web.
2. Aprender un marco de JavaScript: Un marco de JavaScript es un conjunto
de herramientas y librerías que te ayudan a desarrollar aplicaciones web más
rápido. Algunos de los marcos más populares son React, Angular y Vue.
3. Aprender una biblioteca de JavaScript: Una biblioteca de JavaScript es un con-
junto de funciones y herramientas que te ayudan a realizar tareas comunes de
desarrollo web. Algunas de las bibliotecas más populares son jQuery, Lodash
y Underscore.
37
11 SIGUIENTES PASOS
1. ¿Qué es JavaScript?
38
11 SIGUIENTES PASOS
39
11 SIGUIENTES PASOS
• Una clase es una plantilla para crear objetos. En JavaScript, las clases se
definen usando la palabra clave qclassr.
• Una etiqueta es una palabra clave que se utiliza para marcar una sección de
código. En JavaScript, las etiquetas se escriben entre corchetes.
40
11 SIGUIENTES PASOS
• Una sentencia de control es una instrucción que se utiliza para controlar el flujo
de un programa. En JavaScript, las sentencias de control se escriben usando
la palabra clave qswitchr.
41
11 SIGUIENTES PASOS
• Una sentencia de salto es una instrucción que se utiliza para saltar a una parte
específica de un programa. En JavaScript, las sentencias de salto se escriben
usando la palabra clave qbreakr.
• Una sentencia de etiqueta es una instrucción que se utiliza para marcar una
sección de código. En JavaScript, las sentencias de etiqueta se escriben usan-
do la palabra clave qlabelr.
• Una sentencia de función es una instrucción que se utiliza para definir una fun-
ción. En JavaScript, las sentencias de función se escriben usando la palabra
clave qfunctionr.
42
11 SIGUIENTES PASOS
• Una sentencia de etiqueta es una instrucción que se utiliza para marcar una
sección de código. En JavaScript, las sentencias de etiqueta se escriben usan-
do la palabra clave qlabelr.
• Una sentencia de clase es una instrucción que se utiliza para definir una clase.
En JavaScript, las sentencias de clase se escriben usando la palabra clave
qclassr.
• Una sentencia de objeto es una instrucción que se utiliza para crear un objeto.
En JavaScript, las sentencias de objeto se escriben usando la palabra clave
qnewr.
43
11 SIGUIENTES PASOS
44
11 SIGUIENTES PASOS
45
11 SIGUIENTES PASOS
46