◐ Shell
Open
reader mode
source ↗
Show tasks
El lenguaje JavaScript
Una introducción
Una introducción a JavaScript
Manuales y especificaciones
Editores de Código
Consola de desarrollador
Fundamentos de JavaScript
¡Hola, mundo!
Mostrar una alerta
Mostrar una alerta con un script externo
Estructura del código
El modo moderno, "use strict"
Variables
Trabajando con variables.
Dando el nombre correcto
¿const mayúsculas?
Tipos de datos
Comillas
Interacción: alert, prompt, confirm
Una página simple
Conversiones de Tipos
Operadores básicos, matemáticas
Las formas sufijo y prefijo
Resultado de asignación
Conversiones de tipos
Corregir la adición
Comparaciones
Comparaciones
Ejecución condicional: if, '?'
if (un string con cero)
El nombre de JavaScript
Muestra el signo
Reescribe el 'if' como '?'
Reescriba el 'if..else' con '?'
Operadores Lógicos
¿Cuál es el resultado de OR?
¿Cuál es el resultado de las alertas aplicadas al operador OR?
¿Cuál es el resultado de AND?
¿Cuál es el resultado de las alertas aplicadas al operador AND?
El resultado de OR AND OR
Comprueba el rango por dentro
Comprueba el rango por fuera
Un pregunta acerca de "if"
Comprueba el inicio de sesión
Operador Nullish Coalescing '??'
Bucles: while y for
Último valor del bucle
¿Qué valores serán mostrados por el bucle while?
¿Qué valores serán mostrados por el bucle "for"?
Muestra números pares en el bucle
Reemplaza "for" por "while"
Repite hasta que la entrada sea correcta
Muestra números primos
La sentencia "switch"
Reescribe el "switch" en un "if"
Reescribe "if" en "switch"
Funciones
¿Es "else" requerido?
Reescribe la función utilizando '?' o '||'
Función min(a, b)
Función pow(x,n)
Expresiones de función
Funciones Flecha, lo básico
Reescribe con funciones de flecha
Especiales JavaScript
Calidad del código
Debugging en el navegador
Estilo de codificación
Estilo pobre
Comentarios
Código ninja
Automatización de pruebas con Mocha
¿Qué está mal en el test?
Polyfills y transpiladores
Objetos: lo básico
Objetos
Hola, objeto
Verificar los vacíos
Suma de propiedades de un objeto
Multiplicar propiedades numéricas por 2
Referencias de objetos y copia
Recolección de basura
Métodos de objeto, "this"
Usando el "this" en un objeto literal
Crea una calculadora
Encadenamiento
Constructor, operador "new"
Dos funciones – un objeto
Crear nueva Calculadora
Crear nuevo Acumulador
Encadenamiento opcional '?.'
Tipo Symbol
Conversión de objeto a valor primitivo
Tipos de datos
Métodos en tipos primitivos
¿Puedo agregar una propiedad a un string?
Números
Suma números del visitante
¿Por qué 6.35.toFixed(1) == 6.3?
Repetir hasta que lo ingresado sea un número
Un bucle infinito ocasional
Un número aleatorio entre min y max
Un entero aleatorio entre min y max
Strings
Hacer mayúscula el primer carácter
Buscar spam
Truncar el texto
Extraer el dinero
Arrays
¿El array es copiado?
Operaciones en arrays.
LLamados en un contexto de array
Suma de números ingresados
Subarray máximo
Métodos de arrays
Transforma border-left-width en borderLeftWidth
Filtrar un rango
Filtrar rango "en el lugar"
Ordenar en orden decreciente
Copia y ordena un array
Crea una calculadora extensible
Mapa a nombres
Mapa a objetos
Ordena usuarios por edad
Barajar un array
Obtener edad promedio
Filtrar elementos únicos de un array
Crea un objeto a partir de un array
Iterables
Map y Set
Filtrar miembros únicos del array
Filtrar anagramas
Claves iterables
WeakMap y WeakSet
Almacenar banderas "no leídas"
Almacenar fechas de lectura
Object.keys, values, entries
Suma las propiedades
Contar propiedades
Asignación desestructurante
Asignación desestructurante
El salario máximo
Fecha y Hora
Crea una fecha
Muestra en pantalla un día de la semana
Día de la semana europeo
¿Qué día del mes era hace algunos días atrás?
¿Cuál es el último día del mes?
¿Cuántos segundos transcurrieron el día de hoy?
¿Cuantos segundos faltan para el día de mañana?
Cambia el formato a fecha relativa
Métodos JSON, toJSON
Convierte el objeto en JSON y de vuelta
Excluir referencias circulares
Trabajo avanzado con funciones
Recursión y pila
Suma todos los números hasta el elegido
Calcula el factorial
Sucesión de Fibonacci
Generar una lista de un solo enlace
Genere una lista de un solo enlace en orden inverso
Parámetros Rest y operador Spread
Ámbito de Variable y el concepto "closure"
Esta función: ¿recoge los últimos cambios?
¿Qué variables están disponibles?
¿Son independientes los contadores?
Objeto contador
Función en if
Suma con clausuras
¿Es visible la variable?
Filtrar a través de una función
Ordenar por campo
Ejército de funciones
La vieja "var"
Objeto Global
Función como objeto, NFE
Establecer y disminuir un contador
Suma con una cantidad arbitraria de paréntesis
La sintaxis "new Function"
Planificación: setTimeout y setInterval
Salida cada segundo
¿Qué mostrará setTimeout?
Decoradores y redirecciones, call/apply
Decorador espía
Decorador de retraso
Decorador debounce
Decorador throttle
Función bind: vinculación de funciones
Función enlazada como método
Segundo enlace
Propiedad de función después del enlace
Arreglar una función que perdió "this"
Aplicación parcial para inicio de sesión
Funciones de flecha revisadas
Configuración de las propiedades de objetos
Indicadores y descriptores de propiedad
"Getters" y "setters" de propiedad
Prototipos y herencia
Herencia prototípica
Trabajando con prototipo
Algoritmo de búsqueda
¿Donde escribe?
¿Por qué están llenos los dos hámsters?
F.prototype
Cambiando "prototype"
Crea un objeto con el mismo constructor
Prototipos nativos
Agregue el método "f.defer(ms)" a las funciones
Agregue el decorado "defer()" a las funciones
Métodos prototipo, objetos sin __proto__
Añadir toString al diccionario
La diferencia entre llamadas
Clases
Sintaxis básica de `class`
Reescribir como class
Herencia de clase
Error al crear una instancia
Reloj extendido
Propiedades y métodos estáticos.
¿La clase extiende el objeto?
Propiedades y métodos privados y protegidos.
Ampliación de clases nativas
Comprobación de clase: "instanceof"
Extraño instanceof
Los Mixins
Manejo de errores
Manejo de errores, "try...catch"
Finally o solo el código?
Errores personalizados, extendiendo Error
Heredar de SyntaxError
Promesas y async/await
Introducción: callbacks
Promesa
¿Volver a resolver una promesa?
Demora con una promesa
Círculo animado con promesa
Encadenamiento de promesas
Promesa: then versus catch
Manejo de errores con promesas
Error en setTimeout
Promise API
Promisificación
Microtareas (Microtasks)
Async/await
Rescribir usando async/await
Reescribir "rethrow" con async/await
Llamado async desde un non-async
Dangerous Promise.all
Generadores e iteración avanzada
Generadores
Generador pseudoaleatorio
Iteradores y generadores asíncronos
Módulos
Módulos, introducción
Export e Import
Importaciones dinámicas
Temas diversos
Proxy y Reflect
Error al leer una propiedad no existente
Accediendo a array[-1]
Observable
Eval: ejecutando una cadena de código
Calculadora-eval
Currificación
Tipo de Referencia
Verificación de sintaxis
Explica el valor de "this"
BigInt
Unicode, String internals
WeakRef y FinalizationRegistry
El navegador: Documentos, Eventos e Interfaces
Documento
Entorno del navegador, especificaciones
Árbol del Modelo de Objetos del Documento (DOM)
Recorriendo el DOM
DOM children
La pregunta de los hermanos
Seleccionar todas las celdas diagonales
Buscar: getElement*, querySelector*
Buscar elementos
Propiedades del nodo: tipo, etiqueta y contenido
Contar los descendientes
¿Qué hay en nodeType?
Etiqueta en comentario
¿Dónde está el "document" en la jerarquía?
Atributos y propiedades
Obtén en atributo
Haz los enlaces externos naranjas
Modificando el documento
createTextNode vs innerHTML vs textContent
Limpiar el elemento
Por qué "aaa" permanece?
Crear una lista
Crea un árbol desde el objeto
Mostrar descendientes en un árbol
Crea un calendario
Reloj coloreado con setInterval
Inserta el HTML en la lista
Ordena la tabla
Estilos y clases
Crear una notificación
Tamaño de elementos y desplazamiento
¿Qué es el desplazamiento desde la parte inferior?
¿Qué es el ancho de la barra de desplazamiento?
Coloca la pelota en el centro del campo.
La diferencia: CSS width versus clientWidth
Tamaño de ventana y desplazamiento
Coordenadas
Encuentra las coordenadas del campo en la ventana
Muestra una nota cercana al elemento
Muestra una nota cercana al elemento (absolute)
Posiciona la nota adentro (absolute)
Introducción a los eventos
Introducción a los eventos en el navegador
Ocultar con un click
Ocultarse
¿Qué handlers se ejecutan?
Mueve el balón por el campo
Crear un menú deslizante
Agregar un botón de cierre
Carrusel
Propagación y captura
Delegación de eventos
Ocultar mensajes con delegación
Menú de árbol
Tabla ordenable
Comportamiento: Tooltip
Acciones predeterminadas del navegador
¿Por qué "return false" no funciona?
Captura enlaces en el elemento
Galería de imágenes
Envío de eventos personalizados
Eventos en la UI
Eventos del Mouse
Lista seleccionable
Moviendo el mouse: mouseover/out, mouseenter/leave
Comportamiento mejorado de un tooltip
Tooltip "inteligente"
Arrastrar y Soltar con eventos del ratón
Control deslizante
Arrastrar super héroes por el campo
Eventos de puntero
Teclado: keydown y keyup
Extendiendo atajos de teclado
Desplazamiento
Página sin fin
Botón para subir/bajar
Cargar imágenes visibles
Formularios y controles
Propiedades y Métodos de Formularios
Añade una opción al select
Enfocado: enfoque/desenfoque
Un div editable
Editar TD al clicar
Ratón manejado por teclado
Eventos: change, input, cut, copy, paste
Calculadora de depósito
Formularios: evento y método submit
Formulario modal
El documento y carga de recursos
Página: DOMContentLoaded, load, beforeunload, unload
Scripts: async, defer
Carga de recursos: onload y onerror
Cargando imágenes con una un función de retorno (`callback`)
Temas diversos
Mutation observer
Selection y Range
Loop de eventos: microtareas y macrotareas
¿Cuál será la salida en consola de este código?
Artículos adicionales
Marcos y ventanas
Ventanas emergentes y métodos de ventana
Comunicación entre ventanas
El ataque de secuestro de clics
Datos binarios y archivos
ArrayBuffer, arrays binarios
Concatenar arrays tipados
TextDecoder y TextEncoder
Blob
File y FileReader
Solicitudes de red
Fetch
Fetch de usuarios de GitHub
FormData
Fetch: Progreso de la descarga
Fetch: Abort
Fetch: Cross-Origin Requests
¿Por que necesitamos el origen (Origin)?
Fetch API
Objetos URL
XMLHttpRequest
Carga de archivos reanudable
Sondeo largo
WebSocket
Eventos enviados por el servidor
Almacenando datos en el navegador
Cookies, document.cookie
LocalStorage, sessionStorage
Guardar automáticamente un campo de formulario
IndexedDB
Animaciones
Curva de Bézier
Animaciones CSS
Animar un avión (CSS)
Animar el avión volando (CSS)
Círculo animado
Círculo animado con función de callback
Animaciones JavaScript
Animar la pelota que rebota
Animar la pelota rebotando hacia la derecha
Componentes Web
Desde la altura orbital
Elementos personalizados
Elemento reloj dinámico
Shadow DOM
Elemento template
Shadow DOM slots, composición
Estilo Shadow DOM
Shadow DOM y eventos
Expresiones Regulares
Patrones y banderas (flags)
Clases de caracteres
Unicode: bandera "u" y clase \p{...}
Anclas: inicio ^ y final $ de cadena
Regexp ^$
Modo multilínea de anclas ^ $, bandera "m"
Límite de palabra: \b
Encuentra la hora
Escapando, caracteres especiales
Conjuntos y rangos [...]
Java[^script]
Encuentra la hora como hh:mm o hh-mm
Cuantificadores +, *, ? y {n}
¿Cómo encontrar puntos suspensivos "..."?
Regexp para colores HTML
Cuantificadores codiciosos y perezosos
Una coincidencia para /d+? d+?/
Encuentra el comentario HTML
Encontrar las etiquetas HTML
Grupos de captura
Verificar dirección MAC
Encuentra el color en el formato #abc o #abcdef
Encuentre todos los números
Analizar una expresión:
Referencias inversas en patrones: \N y \k<nombre>
Alternancia (O) |
Encuentra lenguajes de programación
Encuentra la pareja bbtag
Encuentra cadenas entre comillas
Encuentra la etiqueta completa
Lookahead y lookbehind (revisar delante/detrás)
Encontrar enteros no negativos
Insertar después de la cabecera
Backtracking catastrófico
Indicador adhesivo “y”, buscando en una posición.
Métodos de RegExp y String