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