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 integradas
  • 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
• 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 and 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

• © 2007—2025  Ilya Kantor
• acerca del proyecto
• contáctenos