Introducción a

Javascript!
CURSO PARA DESARROLLADOR FRONTEND

Moisés Miguel
Temas del curso

Temario con los principales objetivos de la sesión de hoy

Variables, operaciones y métodos Tipos de variables y todo lo que se puede realizar

DOM Cómo modificar el documento HTML mediante JS

Funciones Tipos y usos

Manejo de Array Métodos para manipular arreglos

Map, Filter, Reduce Funciones para manejo de la información contenida en los arrays

Clean Code / SOLID Usos y buena codificación en Javascript

Al final de todo trataremos de temas fundamentales de JS QUE SON POCO MENCIONADOS

 01
Variables y operaciones
 COVERAGE

01 02 03
Texto/numérica Booleanos Array
let a = 25 let a = true let a = [1,2,3]
Let b = 23.5 Let b = false

04 05 06
Objetos (JSON) Funciones Operaciones
Let a = {edad: 4, Matemáticas y Lógica
nombre:’carlos’}
02
DOM
ESTRUCTURA

DOM

INTERFAZ

API

AGNÓSTICO DE LENGUAJE
 03
FUNCIONES
COVERAGE

01 02 03
Declaradas Expresadas Métodos
Tradicional forma Asignadas a una variable Dentro de un objeto

04 05
IIFE Arrow functions
Autoejecutables “This” - Binding
 04
Manejo de Arrays
Métodos comunes
 05
Map – Filter - Reduce
DEFS

Nombre Definición
Se utiliza para crear un nuevo array a partir de uno existente, aplicando una
MAP función a cada uno de sus elementos.
Toma cada elemento en una matriz y aplica una declaración condicional
contra él. Si este condicional devuelve verdadero, el elemento se envía a la
FILTER
matriz de salida. Si la condición devuelve falso, el elemento no se envía a la
matriz de salida.
Reduce una matriz de valores a un solo valor. Para obtener el valor de salida,
REDUCE ejecuta una función de reducción en cada elemento de la matriz.
MAP vs FILTER vs REDUCE
CLEAN CODE

Inglés y expresivos
Evitar usar var
Nombres sin info técnica
Mismo vocabulario para hacer referencia al
mismo contexto
Según tipo de dato nombre adecuado
camelcase
 SOLID  Alta cohesión / Bajo acoplamiento

Single-responsibility principle Open-closed principle Liskov substitution principle

Interface segregation principle (Angular) Dependency Inversion Principle

(Angular)
importante
CALLSTACK
CADA REGISTRO CONTIENE
1. Archivo que ejecuta
2. Siguiente línea de código
3. Contexto (this)
 MICROTASKS

Console.log, Promises SE EJECUTAN BAJO

ORDEN

CONTEXTOS DE
EJECUCIÓN MACROTASKS

TOMAN UN TIEMPO setTimeout, setInterval

Thanks