Presentación del Bootcamp JavaScript Online Lemoncode. Aprende a programar desde cero, a tu ritmo y desde donde quieras. Metodología: dojo - conceptos, kata - implementación con el profesor, anime - desafíos para que aprendas tutorizados por nuestros docentes. Más información: https://lemoncode.net/bootcamp-javascript#bootcamp-javascript/inicio

1. Aprende a programar desde cero
BOOTCAMP JAVASCRIPT

2. PREGUNTAS
FRECUENTES

3. PREGUNTAS FRECUENTES
Bootcamp JavaScript
¿ Qué necesidad viene a cubrir este Bootcamp ?
Como organizadores del máster online Front End Lemoncode, nos escribían muchos interesados con la
siguiente casuística:
• Perfiles de usuario avanzado con cero o conocimientos limitados en programación.
• Con necesidad de tener una formación que fuera directa al grano y eminentemente práctica.
• Que fuera flexible y compatible con su vida laboral / personal.
Con estos requisitos, planteamos como principales objetivos de este Bootcamp:
• Poner al alumno en el mapa del desarrollo web (darle el primer empujón).
• Que en un cuatrimestre conozca los fundamentos de programación.
• Plantear un temario realista y enfocado, mejor salir del Bootcamp con un base que permita al alumno
crecer que haber pegado palos de ciego a mil sitios y no tener nada claro.

4. PREGUNTAS FRECUENTES
Bootcamp JavaScript
¿ Qué conocimientos previos necesito ?
En este máster te enseñamos a programar con JavaScript desde cero, no es necesario tener conocimientos
previos de programación.
Si debes de tener un buen conocimiento a nivel de usuario de equipos informáticos, y muchas ganas de
aprender.

5. PREGUNTAS FRECUENTES
Bootcamp JavaScript
¿ Es para mí ?
Este máster está orientado a perfiles técnicos o autodidactas que nunca hayan tenido la oportunidad de
aprender a programar o que tengan la programación muy oxidada, es decir:
• Si eres un diseñador gráfico / maquetador, y te gustaría dar un paso más y comprender la lógica que hay
detrás de las aplicaciones web.
• Si eres de los que te ha tocado modificar código de oído sin saber muy bien que es lo que realmente hace.
• Si hace mucho que estudiaste programación y lo tienes muy oxidado.
• Si siempre te ha llamado la atención la programación pero no has encontrado forma de meterte en este
mundillo.

6. PREGUNTAS FRECUENTES
Bootcamp JavaScript
¿ Qué voy a aprender ?
Fundamentos de programación aplicados al lenguaje JavaScript, es decir:
• Vas a saber manejarte con un editor de código y tener conceptos básico de maquetación.
• Vas a conocer los fundamentos de JavaScript.
• Vas a aprender a crear algoritmos (resolver problemas).
• Vas a aprender a generar listados y filtrados.
• Vas a aprender a crear y validar formularios.
• Vas a aprender a comunicarte con un servidor.
Aplicar lo aprendido en dos simulaciones de casos prácticos: banca online y portal inmobiliario.

7. PREGUNTAS FRECUENTES
Bootcamp Javascript
¿ En que se diferencia de otras maneras de iniciarte ?
El Bootcamp está enfocado en que adquieras una base solida de programación en un espacio de tiempo
concentrado (un cuatrimestre).
¿ Cómo se aprender a programar? Programando… la dinámica de cada módulo consiste en tener una sesión
de conceptos y seguidamente otra sesión en la que aplicáis lo aprendido.
Para finalizar planteamos trabajos finales en los que simulamos proyectos reales para que puedas tener la
foto completa de todo lo aprendido.

8. Temario

9. 0. Seminario previo
Para los que nunca hayáis tocado web, nos familiarizaremos con un editor de código, y maquetaremos una
ventana básica, utilizando HTML y CSS.
1. Introducción
En este módulo, veremos cuales son las piezas básicas que interactúan en una aplicación web (de lado
servidor a cliente), y tendremos una primera toma de contacto con JavaScript.
2. Variables y tipos de datos
Antes de enviar datos a un servidor, nos hace falta almacenarlos en la memoria del navegador, para ello
utilizaremos las variables, y utilizaremos los tipos para poder saber si son números, cadenas de caracteres,
campos lógicos, fecha o estructuras más complejas.
TEMARIO
Bootcamp JavaScript

10. 3. Operadores y flujos de datos
Cuando manejas datos en variables, te hace falta realizar transformaciones tales cómo: sumarle el IVA a
un producto, concatenar nombre y apellidos, etc… para eso tenemos los operadores, por otro lado, hay
veces que queremos ejecutar cierto código sólo si se cumple una condición dada (por ejemplo aplicar un
descuento sólo si es cliente VIP).
4. Funciones y eventos
Los programas crecen y se hacen inmantenibles, necesitamos una herramienta que nos permita romperlo
en piezas más pequeñas y reusables, para ello tenemos las funciones. Otro punto importante a tener en
cuenta es como interactuamos con el usuario, para ello utilizaremos los eventos.
5. Arrays y bucles
en muchos escenarios necesitamos almacenar listas de datos (ej.: la lista de elemento de un carrito de la
compra), para eso podemos usar los arrays, y para poder recorrerlos podemos utilizar los bucles.
TEMARIO
Bootcamp JavaScript

11. 6. Algoritmos
Un algoritmo resuelve un problema, ¿Cómo se implementa? Combinando todo lo que hemos visto hasta
ahora (variables, arrays, flujos de control…). La mejor manera de aprender a crear algoritmos es
practicando, vamos a ello.
7. Expresiones Regulares
Un escenario muy común es validar que una cadena este bien formada, por ejemplo que el DNI tenga 8
números y una letra al final, o validar el formato de un IBAN, esto lo podemos hacer implementando
algoritmos, pero también podemos contar con la potencia de las RegEx para realizar estas operaciones.
8. Trabajando con imports
El desarrollo con JavaScript ha sufrido una evolución drástica en los últimos años, la versión actual ES6/7
permite trabajar de un manera más organizada y nos da herramientas muy potentes. En este módulo
aprenderemos a importar ficheros y como hacer que esto sea compatible con navegadores antiguos.
TEMARIO
Bootcamp JavaScript

12. 9. Llamadas asíncronas
La mayoría de sitios web necesitan interactuar con un servidor: leer de servidor una lista de productos o
vuelos, confirmar la comprar para que se almacene en la base de datos del servidor… todo esto implica
llamadas asíncronas a un servidor ¿Cómo podemos manejar esto con JavaScript?
10. Conceptos avanzados ES6:
En este módulo vamos a aprender conceptos avanzados de ES6 que harán que nuestro código sea más
sencillo y más mantenible.
11. Clases y this
En ES6 se introdujo el concepto de clase, algo muy usado en lenguajes como Java o C#. En este módulo
vamos a aprender como funcionan y que casos particulares de la implementación de clases en JavaScript.
TEMARIO
Bootcamp Javascript

13. DINÁMICA
SESIONES MÓDULOS

14. MÓDULO 0
Seminario previo
• Mostrar formulario de contacto HTML / CSS.
• Maquetar listado de hoteles.
• Maquetar listado de hoteles estilado.
L A B O R A T O R I O
En este modulo nos familiarizaremos con un editor de código, y maquetaremos una ventana básica, utilizando HTML y CSS.
• Instalación VS Code.
• Hola mundo HTML.
• Hola mundo CSS.
• Maquetación listado carrito de la compra.
• Maquetación listado carrito de la compra
estilada.
P R Á C T I C A
• Qué es el desarrollo web.
• HTML & CSS.
• Elementos básicos CSS.
C O N C E P T O S
MÓDULO 0

15. MÓDULO 1
Introducción
• Sacar mensaje por consola.
• Depurar.
• Levantar servidor ligero.
• Interacción DOM / Javascript básica.
L A B O R A T O R I O
En este módulo, veremos cuales son las piezas básicas que interactúan en una aplicación web (de lado servidor a cliente), y
tendremos una primera toma de contacto con JavaScript.
• Hola mundo js.
• Toma de contacto VSCode / Nodejs.
• Toma de contacto depuración.
• Toma de contacto servidor ligero.
P R Á C T I C A
• Qué es un lenguaje de programación.
• Servidor y cliente.
• JavaScript.
• Editores.
• Navegadores.
• Servidor web.
• Sandboxes.
C O N C E P T O S
MÓDULO 1

16. MÓDULO 2
Variables y tipos de datos
• Mostrar foto del hotel.
• Mostrar campo lógico admite checkout.
• Añadir fecha última reserva.
L A B O R A T O R I O
Antes de enviar datos a un servidor, nos hace falta almacenarlos en la memoria del navegador, para ello utilizaremos las variables,
y para saber si son números, cadenas de caracteres, campos lógicos, fecha o estructuras más complejas utilizaremos los tipos.
• Trabajando con la ficha de un hotel.
• Mostrar nombre del hotel por pantalla.
• Mostramos nombre + ciudad.
• Agrupar en un objeto.
P R Á C T I C A
• Qué son las variables.
• Tipos de datos.
C O N C E P T O S
MÓDULO 2

17. MÓDULO 3
Operadores y flujos de control
• Precio de un producto y cantidad.
• Calcular total de producto por cantidad.
• Calcular IVA dependiente de tipo de
producto.
• Depurar.
• No permitir cantidades negativas.
L A B O R A T O R I O
Cuando manejas datos en variables, te hace falta realizar transformaciones tales cómo: sumarle el IVA a un producto, concatenar
nombre y apellidos, etc… para eso tenemos los operadores, por otro lado, hay veces que queremos ejecutar cierto código sólo si
se cumple una condición dada (por ejemplo aplicar un descuento sólo si es cliente VIP)
• Vamos a trabajar con una reserva de una
habitación.
• Tenemos número de noches y precio,
calcular el total.
• Si el precio total es mayor que 500 €
mostrar descuento.
• Condiciones adicionales (and / or).
• Depurar solución
P R Á C T I C A
• Qué son los operadores.
• Flujos de control (if, switch, ternario).
• Castings == vs ===
C O N C E P T O S
MÓDULO 3

18. MÓDULO 4
Funciones y eventos
• Vamos a trabajar con el pedido de un
producto.
• Romper en subfunciones.
• Meter input para descuento y botón
actualizar.
• Añadir combo de tipo de IVA, recalcular
total.
• Habilitar / Ocultar campos según opciones.
L A B O R A T O R I O
Cuando un programa crece, si no lo rompemos en piezas más pequeñas, se vuelve inmantenible, las funciones nos permite aislar
y reusar. Por otro lado necesitamos interactuar con el usuario para eso contamos con los eventos.
• Crear función estancia en hotel.
• Romper en subfunciones.
• Meter input número de noches y botón
actualizar, evento.
• Meter evento en el input change.
• Depurar solución
P R Á C T I C A
• Explicar que es una función.
• Explicar conceptos básicos DOM + Eventos.
C O N C E P T O S
MÓDULO 4

19. MÓDULO 5
Arrays y bucles
• Vamos a trabajar con un carrito de la
compra.
• Mostrar todo los productos.
• Filtrar por productos que sean “prime”.
• Calcular total carrito de la compra.
• Gastos de envío cero si todos los productos
son prime, sino indicar con gastos de envío.
L A B O R A T O R I O
Muchas veces nos hace falta almacenar listas de datos (por ejemplo la lista de elemento de un carrito de la compra), para eso
podemos usar los arrays, y para poder recorrerlos podemos utilizar los bucles.
• Mostrar listado de hoteles (for).
• Filtrar por varios campos (for – if).
• Mostrar listado de reservas.
• Calcular suma total precio.
• Borrar una reserva.
P R Á C T I C A
• Que son las colecciones / arrays.
• Bucles for / while.
C O N C E P T O S
MÓDULO 5

20. MÓDULO 6
Algoritmos (2 de 3)
• Calculo horas vacaciones en base a horas
extras incurridas (horas extra a 1.75 y
jornada reducida Viernes).
• Login pin seguro, petición coordenadas
aleatorias.
• Calculo básico horarios de clase.
L A B O R A T O R I O
Seguimos practicando, subimos el nivel de dificultad de los rompecabezas a resolver.
• Rendimientos de bienes inmuebles,
calcular deducción por cada inmueble, y
limite total deducción.
• Encontrar huecos comunes en n personas
para convocar una reunión.
P R Á C T I C A
• Técnicas de implementación de algoritmos.
C O N C E P T O S
MÓDULO 6

21. MÓDULO 6
Algoritmos (3 de 3)
• Calculadora aportación plan de pensiones.
• Calculadora ayuda ingresos, hijos,
minusvalía.
• Calculadora puntos oposiciones.
• Calculo óptimo billetes de un cajero.
• Calculo cambio exacto de un expendedor.
• + Batería adicional ejercicios para practicar.
L A B O R A T O R I O
Cerramos este módulo implementando algoritmos que habréis visto aplicados en el mundo real: una calculadora de hipotecas,
una calculadora de salarios brutos y netos, …
• Calculadora salario bruto / neto.
• Calculadora hipoteca.
P R Á C T I C A
• Técnicas de implementación de algoritmos.
C O N C E P T O S
MÓDULO 6

22. MÓDULO 7
Validaciones con expresiones regulares
• Validar matrícula de coche.
• Validar IBAN cuenta de abono.
• Extraer matrícula de coche.
• Extraer IBAN cuenta de abono.
• Batería de ejercicios.
• Aprendiendo a buscar expresiones regulares
y como probarlas: email, url, …
L A B O R A T O R I O
Muchas veces nos hace falta validar que una cadena este bien formada, por ejemplo que el DNI tenga 8 números y una letra al
final, o que el IBAN de una cuenta bancaria tenga el formato adecuado, esto lo podemos hacer implementando algoritmos, pero
también podemos contar con la potencia de las expresiones regulares para realizar estas operaciones.
• Simulamos reserva de habitación de hotel.
• Comprobar que el DNI está bien
informado.
• Comprobar que fecha está bien
informada.
• Soportar varios formatos de fecha.
• Extraer información.
P R Á C T I C A
• Que es una expresión regular.
• Validando.
• Extrayendo información.
• Implementación con Regex vs sin Regex.
C O N C E P T O S
MÓDULO 7

23. MÓDULO 8
Trabajando con imports
• Refactorizar ejercicios anteriores y comparar
bases de código.
• Uso de librerías externas para mejorar
aspecto y funcionalidad ejemplos anteriores.
L A B O R A T O R I O
El desarrollo con Javascript ha sufrido una evolución drástica en los últimos años, la versión actual ES6/7 permite trabajar de un
manera muchos más organizada y nos da herramientas más potentes. En este módulo aprenderemos a importar ficheros y como
hacer que esto sea compatible con navegadores antiguos.
• Refactorizar ejemplo de módulos
anteriores usando imports.
• Mostrar una configuración de webpack
básica.
• Instalación de librerías externas, evaluar
diferentes tipos de imports.
P R Á C T I C A
• JavaScript moderno.
• Qué es un transpilador.
• Conceptos que son los bundlers.
• Organizar código.
• Romper en imports.
• Depurar código.
C O N C E P T O S
MÓDULO 8

24. MÓDULO 9
Llamadas asíncronas
• Cargar lista de usuario de api rest de Github
(api real).
• Leer ficha de clientes un cliente api rest.
• Modificar un cliente.
• Mostrar un spinner de carga.
L A B O R A T O R I O
La mayoría de sitios web necesitan interactuar con un servidor: necesito leer de servidor una lista de productos o vuelos, necesito
confirmar la comprar para que se almacene en la base de datos del servidor… todo esto implica llamadas asíncronas a un servidor
¿Cómo podemos manejar esto con JavaScript?
• Leer una lista de hoteles y mostrarlo por
pantallas.
• Leer los datos de una reserva de un hotel.
• Modificar datos de una reserva y guardarlo
en servidor.
P R Á C T I C A
• Servidor y capas REST / JSON.
• Que es una llamada asíncrona.
• Promesas.
• Fetch y Axios.
• Leyendo datos.
• Guardando datos.
• Indicadores de carga y múltiples promesas.
C O N C E P T O S
MÓDULO 9

25. MÓDULO 10
Conceptos avanzados ES6
• Refactor ejemplo anterior ficha de cliente
aplicando funciones de mapeo, spread
operator y destructuring.
L A B O R A T O R I O
En este módulo vamos a aprender conceptos avanzados de ES6 que harán que nuestro código sea más sencillo y más mantenible.
• Refactor ejemplo anterior hoteles a
funciones de mapeo.
• Refactor ejemplo anterior uso de spread
operator y destructuring para simplificar
código.
P R Á C T I C A
• Const / var / let.
• Spread operator.
• Destructuring.
• Conjunto completo, no más bucles for.
C O N C E P T O S
MÓDULO 10

26. MÓDULO 11
Clases y this
• Clase reserva de hotel.
• Almacenar información.
• Extraer campos calculados.
• Carga de api rest.
• Interacción con eventos de formulario.
L A B O R A T O R I O
En ES6 se introdujo el concepto de clase, algo muy usado en lenguajes como Java o C#. En este módulo vamos a aprender como
funcionan y que casos particulares de la implementación de clases en JavaScript.
• Clase carrito de la compra.
• Campo descuento.
• Carga desde api rest y manejo de callback
+ this.
• Interacción de eventos y manejo de this.
P R Á C T I C A
• Explicar concepto de clase.
• Explicar aproximación funcional vs clase.
• Explicar como acceder a propiedades vía
this.
• Explicar problema this y callback promesas.
• Recetarios casos this.
C O N C E P T O S
MÓDULO 11

27. MÓDULO 12
Banca online (1/4)
• Implementación listado de movimientos.
• Implementación detalle de movimientos.
• Implementación transferencia bancaria.
L A B O R A T O R I O
En este módulo trabajaremos con una aplicación más completa, vamos a simular un portal de banca online, mostraremos un
listado de movimientos de cuenta, así como un formulario de transferencia.
• Arranque aplicación.
• Implementación listado de cuentas.
• Formulario alta nueva cuenta.
P R Á C T I C A
• Presentación caso de simulación banca
online.
• Servidor mock.
C O N C E P T O S
MÓDULO 12

28. MÓDULO 12
Banca online (2/4)
• Implementación.
L A B O R A T O R I O
En este módulo trabajaremos con una aplicación más completa, vamos a simular un portal de banca online, mostraremos un
listado de movimientos de cuenta, así como un formulario de transferencia.
• Plantear dudas alumnos.
P R Á C T I C A
• Resolver dudas comunes.
C O N C E P T O S
MÓDULO 12

29. MÓDULO 12
Portal inmobiliario (3/4)
• Terminar filtrado y ordenación.
• Detalle de una casa.
• Formulario de contacto.
L A B O R A T O R I O
En esta segunda práctica emularemos un portal inmobiliario, mostráremos un listado de propiedades disponibles,
implementaremos un panel de filtrado, y mostraremos detalle de una propiedad y formulario de contacto.
• Arranque aplicación.
• Implementación listado de viviendas.
• Arranque filtrado.
P R Á C T I C A
• Presentación caso de portal inmobiliario.
• A tener en cuenta.
• Servidor mock.
C O N C E P T O S
MÓDULO 12

30. MÓDULO 12
Portal inmobiliario (4/4)
• Implementación listado de movimientos.
• Implementación detalle de movimientos.
• Implementación transferencia bancaria.
L A B O R A T O R I O
En esta segunda práctica emularemos un portal inmobiliario, mostráremos un listado de propiedades disponibles,
implementaremos un panel de filtrado, y mostraremos detalle de una propiedad y formulario de contacto.
• Arranque aplicación.
• Implementación listado de cuentas.
• Formulario alta nueva cuenta.
P R Á C T I C A
• Presentación caso de simulación banca
online.
• Servidor mock.
C O N C E P T O S
MÓDULO 12

31. Aprende a programar desde ceroBOOTCAMP JAVASCRIPT
www.lemoncode.net