[ Web Proxy ]
URL:
Viewing:
https://es.javascript.info/tutorial/map
[Back]
[Original]
Show tasks
El lenguaje JavaScript
Una introduccin
Una introduccin a JavaScript
Manuales y especificaciones
Editores de Cdigo
Consola de desarrollador
Fundamentos de JavaScript
Hola, mundo!
Mostrar una alerta
Mostrar una alerta con un script externo
Estructura del cdigo
El modo moderno, "use strict"
Variables
Trabajando con variables.
Dando el nombre correcto
const maysculas?
Tipos de datos
Comillas
Interaccin: alert, prompt, confirm
Una pgina simple
Conversiones de Tipos
Operadores bsicos, matemticas
Las formas sufijo y prefijo
Resultado de asignacin
Conversiones de tipos
Corregir la adicin
Comparaciones
Comparaciones
Ejecucin condicional: if, '?'
if (un string con cero)
El nombre de JavaScript
Muestra el signo
Reescribe el 'if' como '?'
Reescriba el 'if..else' con '?'
Operadores Lgicos
Cul es el resultado de OR?
Cul es el resultado de las alertas aplicadas al operador OR?
Cul es el resultado de AND?
Cul 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 sesin
Operador Nullish Coalescing '??'
Bucles: while y for
ltimo valor del bucle
Qu valores sern mostrados por el bucle while?
Qu valores sern mostrados por el bucle "for"?
Muestra nmeros pares en el bucle
Reemplaza "for" por "while"
Repite hasta que la entrada sea correcta
Muestra nmeros primos
La sentencia "switch"
Reescribe el "switch" en un "if"
Reescribe "if" en "switch"
Funciones
Es "else" requerido?
Reescribe la funcin utilizando '?' o '||'
Funcin min(a, b)
Funcin pow(x,n)
Expresiones de funcin
Funciones Flecha, lo bsico
Reescribe con funciones de flecha
Especiales JavaScript
Calidad del cdigo
Debugging en el navegador
Estilo de codificacin
Estilo pobre
Comentarios
Cdigo ninja
Automatizacin de pruebas con Mocha
Qu est mal en el test?
Polyfills y transpiladores
Objetos: lo bsico
Objetos
Hola, objeto
Verificar los vacos
Suma de propiedades de un objeto
Multiplicar propiedades numricas por 2
Referencias de objetos y copia
Recoleccin de basura
Mtodos 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
Conversin de objeto a valor primitivo
Tipos de datos
Mtodos en tipos primitivos
Puedo agregar una propiedad a un string?
Nmeros
Suma nmeros del visitante
Por qu 6.35.toFixed(1) == 6.3?
Repetir hasta que lo ingresado sea un nmero
Un bucle infinito ocasional
Un nmero aleatorio entre min y max
Un entero aleatorio entre min y max
Strings
Hacer mayscula el primer carcter
Buscar spam
Truncar el texto
Extraer el dinero
Arrays
El array es copiado?
Operaciones en arrays.
LLamados en un contexto de array
Suma de nmeros ingresados
Subarray mximo
Mtodos 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 ledas"
Almacenar fechas de lectura
Object.keys, values, entries
Suma las propiedades
Contar propiedades
Asignacin desestructurante
Asignacin desestructurante
El salario mximo
Fecha y Hora
Crea una fecha
Muestra en pantalla un da de la semana
Da de la semana europeo
Qu da del mes era hace algunos das atrs?
Cul es el ltimo da del mes?
Cuntos segundos transcurrieron el da de hoy?
Cuantos segundos faltan para el da de maana?
Cambia el formato a fecha relativa
Mtodos JSON, toJSON
Convierte el objeto en JSON y de vuelta
Excluir referencias circulares
Trabajo avanzado con funciones
Recursin y pila
Suma todos los nmeros hasta el elegido
Calcula el factorial
Sucesin de Fibonacci
Generar una lista de un solo enlace
Genere una lista de un solo enlace en orden inverso
Parmetros Rest y operador Spread
mbito de Variable y el concepto "closure"
Esta funcin: recoge los ltimos cambios?
Qu variables estn disponibles?
Son independientes los contadores?
Objeto contador
Funcin en if
Suma con clausuras
Es visible la variable?
Filtrar a travs de una funcin
Ordenar por campo
Ejrcito de funciones
La vieja "var"
Objeto Global
Funcin como objeto, NFE
Establecer y disminuir un contador
Suma con una cantidad arbitraria de parntesis
La sintaxis "new Function"
Planificacin: setTimeout y setInterval
Salida cada segundo
Qu mostrar setTimeout?
Decoradores y redirecciones, call/apply
Decorador espa
Decorador de retraso
Decorador debounce
Decorador throttle
Funcin bind: vinculacin de funciones
Funcin enlazada como mtodo
Segundo enlace
Propiedad de funcin despus del enlace
Arreglar una funcin que perdi "this"
Aplicacin parcial para inicio de sesin
Funciones de flecha revisadas
Configuracin de las propiedades de objetos
Indicadores y descriptores de propiedad
"Getters" y "setters" de propiedad
Prototipos y herencia
Herencia prototpica
Trabajando con prototipo
Algoritmo de bsqueda
Donde escribe?
Por qu estn llenos los dos hmsters?
F.prototype
Cambiando "prototype"
Crea un objeto con el mismo constructor
Prototipos nativos
Agregue el mtodo "f.defer(ms)" a las funciones
Agregue el decorado "defer()" a las funciones
Mtodos prototipo, objetos sin __proto__
Aadir toString al diccionario
La diferencia entre llamadas
Clases
Sintaxis bsica de `class`
Reescribir como class
Herencia de clase
Error al crear una instancia
Reloj extendido
Propiedades y mtodos estticos.
La clase extiende el objeto?
Propiedades y mtodos privados y protegidos.
Ampliacin de clases nativas
Comprobacin de clase: "instanceof"
Extrao instanceof
Los Mixins
Manejo de errores
Manejo de errores, "try...catch"
Finally o solo el cdigo?
Errores personalizados, extendiendo Error
Heredar de SyntaxError
Promesas y async/await
Introduccin: callbacks
Promesa
Volver a resolver una promesa?
Demora con una promesa
Crculo animado con promesa
Encadenamiento de promesas
Promesa: then versus catch
Manejo de errores con promesas
Error en setTimeout
Promise API
Promisificacin
Microtareas (Microtasks)
Async/await
Rescribir usando async/await
Reescribir "rethrow" con async/await
Llamado async desde un non-async
Dangerous Promise.all
Generadores e iteracin avanzada
Generadores
Generador pseudoaleatorio
Iteradores y generadores asncronos
Mdulos
Mdulos, introduccin
Export e Import
Importaciones dinmicas
Temas diversos
Proxy y Reflect
Error al leer una propiedad no existente
Accediendo a array[-1]
Observable
Eval: ejecutando una cadena de cdigo
Calculadora-eval
Currificacin
Tipo de Referencia
Verificacin 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
Dnde est el "document" en la jerarqua?
Atributos y propiedades
Obtn 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 notificacin
Tamao 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
Tamao 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)
Introduccin a los eventos
Introduccin a los eventos en el navegador
Ocultar con un click
Ocultarse
Qu handlers se ejecutan?
Mueve el baln por el campo
Crear un men deslizante
Agregar un botn de cierre
Carrusel
Propagacin y captura
Delegacin de eventos
Ocultar mensajes con delegacin
Men de rbol
Tabla ordenable
Comportamiento: Tooltip
Acciones predeterminadas del navegador
Por qu "return false" no funciona?
Captura enlaces en el elemento
Galera de imgenes
Envo 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 ratn
Control deslizante
Arrastrar super hroes por el campo
Eventos de puntero
Teclado: keydown y keyup
Extendiendo atajos de teclado
Desplazamiento
Pgina sin fin
Botn para subir/bajar
Cargar imgenes visibles
Formularios y controles
Propiedades y Mtodos de Formularios
Aade una opcin al select
Enfocado: enfoque/desenfoque
Un div editable
Editar TD al clicar
Ratn manejado por teclado
Eventos: change, input, cut, copy, paste
Calculadora de depsito
Formularios: evento y mtodo submit
Formulario modal
El documento y carga de recursos
Pgina: DOMContentLoaded, load, beforeunload, unload
Scripts: async, defer
Carga de recursos: onload y onerror
Cargando imgenes con una un funcin de retorno (`callback`)
Temas diversos
Mutation observer
Selection y Range
Loop de eventos: microtareas y macrotareas
Cul ser la salida en consola de este cdigo?
Artculos adicionales
Marcos y ventanas
Ventanas emergentes y mtodos de ventana
Comunicacin 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 automticamente un campo de formulario
IndexedDB
Animaciones
Curva de Bzier
Animaciones CSS
Animar un avin (CSS)
Animar el avin volando (CSS)
Crculo animado
Crculo animado con funcin 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 dinmico
Shadow DOM
Elemento template
Shadow DOM slots, composicin
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 multilnea de anclas ^ $, bandera "m"
Lmite 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}
Cmo 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 direccin MAC
Encuentra el color en el formato #abc o #abcdef
Encuentre todos los nmeros
Analizar una expresin:
Referencias inversas en patrones: \N y \k<nombre>
Alternancia (O) |
Encuentra lenguajes de programacin
Encuentra la pareja bbtag
Encuentra cadenas entre comillas
Encuentra la etiqueta completa
Lookahead y lookbehind (revisar delante/detrs)
Encontrar enteros no negativos
Insertar despus de la cabecera
Backtracking catastrfico
Indicador adhesivo y, buscando en una posicin.
Mtodos de RegExp y String
Web Proxy Viewer |
New URL
|
Original Page