SEMANA 2:

JavaScript
 TEMAS
¿Qué es JavaScript?
Paradigmas de JavaScript

Tipos de datos y variables

Funciones y Scope

Condicionales

Operador ternario

Objetos

Clases

Prototype

Iterables

Manipulación del DOM

¿ Qué es JavaScript?
Lenguaje de programación interpretado.

Utilizado generalmente como front-end.

Soportado por la mayoría de navegadores

modernos

Ultima versión estable: ES6

Extensión: .js
PARADIGMAS DE JAVASCRIPT:

¿ Qué es un paradigma
de programación?
PARADIGMAS DE JAVASCRIPT:

¿ Qué es un paradigma
de programación?
Es una forma de clasificar un lenguaje de

programación basado en sus

características.
PROGRAMACIÓN DIRIGIDA PROGRAMACIÓN
POR EVENTOS FUNCIONAL
Tanto la estructura como la ejecución de los Construir software por medio de funciones

programas son determinados por los sucesos que puras, evitando el uso de un estado común y

ocurran en el sistema
datos mutables.

PROGRAMACIÓN IMPERATIVA PROGRAMACIÓN ORIENTADA

O POR PROCEDIMIENTOS A OBJETOS:
Enfatiza los cambios de estado mediante la Introduce el concepto de elementos

mutación de variables encapsulados con variables y funciones

conocidos como objetos

INTERPRETADO VS. COMPILADO

Imagen tomada de: https://rafaramoneblog.wordpress.com/2017/02/15/compiladosinterpletados/

 JAVASCRIPT

¿ QUÉ SIGNIFICA "NO

TIPADO" O "TIPADO
DINÁMICO"?
JAVA
El tipo está asociado al valor, no a la

variable
TIPOS DE DATOS...
var - Las variables
declaradas con var:

Tienen un scope funcional

No tienen un scope de bloque

Hoisting: Elevar la declaración de una

variable al tope del scope local o de

la función y definirla como undefined.

let - Las variables
declaradas con let:

Son visibles unicamente dentro del

bloque en el cual fueron definidas:

Scope de bloque

No aplica el hoisting

No pueden ser declaradas 2 veces en

el mismo scope.
const - Las
variables
declaradas con
const:

Son de lectura unicamente y su valor

no puede ser reasignado.

Por convención, las constantes

llevan nombres en mayusculas

separados por _

Necesitan una asignación al momento

de la declaración.
Resumen...

Imagen tomada de: http://www.constletvar.com/

 TIPOS DE DATOS:
Primitivos: Inmutables

Undefined

Null

Boolean

String

Number

Todos los demas: Objetos

Mutables
Arrays

Funciones

Clases

Etc...
 TIPOS DE DATOS:

Primitivos No-Primitivos
Primitivos:

Copias en asignación

No Primitivos:

Referencias en el espacio

en memoria que ocupan.

FUNCIONES Y SCOPE
Argumentos

Scope:

Variables declaradas

fuera de la función

tienen un scope global.

Variables declaradas

en la función tienen un

scope local.

No hay ninguna diferencia

de velocidad en el uso de

las 3 opciones
 CONDICIONALES
If/Else convencional:
Operadores:
== Equality operator
=== Strict equality operator
!= Inequality operator
!== Strict inequality operator
< o > Menor que / Mayor que
Operador ternario: && Condicionales anidados
|| Una condición o la otra
!X && !Y === !(X || Y)
 Objetos
Modelos de elementos de la vida real con atributos

propios.

Los atributos pueden ser cualquier cosa, un

string, un numero, un array, incluso otros

objetos.
EJEMPLO:
 CLASES Y OBJETOS
Las clases fueron introducidas en ES6 y nos permiten crear una

plantilla para generar objetos con las mismas propiedades

 CLASES Y OBJETOS
Las clases fueron introducidas en ES6 y nos permiten crear una

plantilla para generar objetos con las mismas propiedades

 PROTOTYPE
Todos los objetos en JavaScript heredan

funciones y propiedades de un prototipo

Los elementos agregados por prototype no

agregan directamente a los atributos del

objeto sino a uno ya definido llamado:

__proto__

Permite utilizar una "herencia" de prototipos

sin necesidad de utilizar clases.

Si las clases son una plantilla, los prototipos

son un delegado

Al final, todos los objetos heredan del

prototipo de 'Object'
ITERABLES

For loop

Itera desde un valor definido hasta otro

valor definido.
Incremento constante.
Requiere conocer la cantidad de
iteraciones necesarias

Imagen tomada de: https://www.tutorialspoint.com/javascript/javascript_for_loop

ITERABLES

For loop

Utilizar un for loop para

recorrer un array / objeto:
Para calcular la
cantidad de "keys" o
atributos en un objeto
se debe usar:

Object.keys(objeto).length
ITERABLES

While Do-While
Realiza una acción siempre y cuando se Realiza una acción siempre y cuando se
cumpla una condición cumpla una condición, sin embargo
siempre realiza la acción al menos una
vez.
OTROS ITERABLES

Map
Itera sobre cada uno de los elementos
de un array, recibe una función como
parametro y retorna otro array.
OTROS ITERABLES

Filter
Al igual que map, filter itera sobre cada
uno de los elementos de un array, si la
condición se cumple agrega el elemento
a un nuevo array el cual retorna al
finalizar.
 Alteración del DOM con JS
JavaScript permite agregar, eliminar o document.getElementsByClassName/tagNam
modificar elementos en el DOM de e("<clase o tag del elemento>"): Retornará un
manera dinámica array con los elementos encontrados

document.getElementById("<Id del
elemento>"): Retorna un elemento document.querySelector("<Selector de
con un ID, si múltiples elementos CSS>"): Retornará el primer elemento que
tienen el mismo ID (MALA hace match con el query.
PRACTICA!) retornará el primero
document.querySelectorAll("<Selector de
CSS>"): Retornará un array con todos los
elementos que hagan match.
 Alteración del DOM con JS
Para modificar el contenido de un elemento:
document.getElementById("demo").innerHTML = "Hola mundo";

Para modificar o agregar los estilos aplicados a un elemento:

document.getElementById("demo").style.fontSize = "35px";

Para esconder o mostrar un elemento:

document.getElementById("demo").style.display = "none"/"block";
 Alteración del DOM con JS
Eliminar un elemento del DOM requiere un poco mas de
lógica...
 Alteración del DOM con JS
Al igual que agregar un elemento al DOM:
Ejercicios
TOMADOS DE CODEWARS.COM
El millonésimo número de Fibonacci:
Crear la función fib(n) donde:

fib(1) := 1
fib(2) := 2
fib(3) := 3
fib(4) := 5
...
fin(n + 2) := fib(n + 1) + fib(n)

El algoritmo debe retornar un número entero y validar entradas

positivas únicamente.
 Solución:
El millonésimo número de Fibonacci:
Crear la función fib(n) donde:

fib(1) := 1
fib(2) := 2
fib(3) := 3
fib(4) := 5
...
fin(n + 2) := fib(n + 1) + fib(n)

El algoritmo debe retornar un número entero y validar entradas

positivas únicamente.
Raíces cuadradas
Crear una función que reciba un número como parametro.
La función debe calcular la raíz cuadrada mas próxima hacia abajo
de la siguiente manera:

sqrRoot(4) = 2
sqrRoot(17) = 4
sqrRoot(30) = 5
etc...

No se debe utilizar la función nativa: Math.floor(Math.sqrt(N))

Raíces cuadradas Solución:
Crear una función que reciba un número como parametro.
La función debe calcular la raíz cuadrada mas próxima hacia abajo
de la siguiente manera:

sqrRoot(4) = 2
sqrRoot(17) = 4
sqrRoot(30) = 5
etc...

No se debe utilizar la función nativa: Math.floor(Math.sqrt(N))

ALL CAPS
Crear una función que reciba un String como parametro.
La función debe utilizar .map y retornar un array de caracteres todos en
mayúscula, asi:

allCaps("hola mundo") = ["H","O","L","A"," ","M","U","N","D","O"]

allCaps("hola de nuevo!") = ["H","O","L","A"," ","D","E"," ","N","U","E","V","O"]

Hint: la clase String contiene la función "toUpperCase()" como parte de su

prototipo

Hint 2: JS no nos permite utilizar .map directamente sobre un String por lo

que debemos extraer map en una variable y posterior a esto llamar map.call
ALL CAPS
Crear una función que reciba un String como parametro.
La función debe utilizar .map y retornar un array de caracteres todos en Solución:
mayuscula, asi:

allCaps("hola mundo") = ["H","O","L","A"," ","M","U","N","D","O"]

allCaps("hola de nuevo!") = ["H","O","L","A"," ","D","E"," ","N","U","E","V","O"]

Hint: la clase String contiene la función "toUpperCase()" como parte de su

prototipo

Hint 2: JS no nos permite utilizar .map directamente sobre un String por lo

que debemos extraer map en una variable y posterior a esto llamar map.call
Taller

SLIDE PUZZLE
SEMANA 2:
JavaScript