Menú
JavaScript es un lenguaje de programación ampliamente utilizado que permite agregar interactividad y funcionalidades avanzadas a las páginas web. Se ha convertido en un estándar en el desarrollo web y es compatible con todos los navegadores modernos.
La consola JavaScript es una herramienta integrada en los navegadores que permite a los desarrolladores ejecutar y depurar código JavaScript en tiempo real. Ofrece varias funciones para mostrar información y errores, como “console.log()” y “console.error()”, facilitando la identificación y solución de problemas en el código.
console.log("Hola, mundo!"); // Muestra "Hola, mundo!" en la consola
console.error("Hubo un error en la ejecución del código"); // Muestra un mensaje de error en la consola
JavaScript funciona a través de la interpretación y ejecución de código en el navegador, permitiendo agregar interactividad y funcionalidades avanzadas a las páginas web.
Los archivos JavaScript pueden cargarse en una página HTML utilizando la etiqueta <script> con el atributo src que apunta al archivo JavaScript.
Los conceptos básicos de JavaScript incluyen variables, operadores, estructuras de control de flujo, funciones y objetos.
Algunas palabras comunes en la programación con JavaScript son: variable, función, objeto, array, bucle, condición, evento y error.
ECMAScript es la especificación que define el lenguaje de programación JavaScript y sus características. JavaScript es una implementación de esta especificación.
JavaScript sigue ciertas normas y reglas, como la sensibilidad a mayúsculas y minúsculas, el uso de punto y coma para separar instrucciones y la declaración de variables antes de su uso.
<!DOCTYPE html>
<html>
<head>
<title>Mi página</title>
<script src="miarchivo.js" defer></script>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.mejs-overlay-button{--wpr-bg-ecdec368-78c5-406b-8486-fef6d1fcdc2c: url('https://c0.wp.com/c/6.5.3/wp-includes/js/mediaelement/mejs-controls.svg');}.mejs-overlay-loading-bg-img{--wpr-bg-0ce5ad55-aaca-4359-93bd-ea33a30a7948: url('https://c0.wp.com/c/6.5.3/wp-includes/js/mediaelement/mejs-controls.svg');}.mejs-button>button{--wpr-bg-6b9a7759-cfdf-4a13-872f-fd645a40724e: url('https://c0.wp.com/c/6.5.3/wp-includes/js/mediaelement/mejs-controls.svg');}.woocommerce .blockUI.blockOverlay::before{--wpr-bg-30907a92-3752-4f05-86dd-5c09c3328e74: url('https://c0.wp.com/p/woocommerce/8.7.0/assets/css/../images/icons/loader.svg');}.woocommerce .loader::before{--wpr-bg-8b5a321e-38e6-4164-8c30-45e6f307b3e1: url('https://c0.wp.com/p/woocommerce/8.7.0/assets/css/../images/icons/loader.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.visa,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.visa,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.visa{--wpr-bg-fcddab54-96e6-46fa-ac0c-8c1b972f3aac: url('https://c0.wp.com/p/woocommerce/8.7.0/assets/css/../images/icons/credit-cards/visa.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.mastercard{--wpr-bg-61391bc9-4970-4bb9-9224-681ddd3deef7: url('https://c0.wp.com/p/woocommerce/8.7.0/assets/css/../images/icons/credit-cards/mastercard.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.laser,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.laser,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.laser{--wpr-bg-289624ff-6b69-4e26-9a5a-9676ba7c748e: url('https://c0.wp.com/p/woocommerce/8.7.0/assets/css/../images/icons/credit-cards/laser.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.dinersclub{--wpr-bg-be05ab3f-df7e-4ae9-9ef2-7cfdeb1a83a2: url('https://c0.wp.com/p/woocommerce/8.7.0/assets/css/../images/icons/credit-cards/diners.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.maestro{--wpr-bg-30bbd902-d651-4196-9f53-f43a49e8bbdc: url('https://c0.wp.com/p/woocommerce/8.7.0/assets/css/../images/icons/credit-cards/maestro.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.jcb{--wpr-bg-73c33347-0131-4a8f-a7a1-40656402f08d: url('https://c0.wp.com/p/woocommerce/8.7.0/assets/css/../images/icons/credit-cards/jcb.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.amex,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.amex,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.amex{--wpr-bg-19148b86-22c8-4785-919a-5f7d9e134976: url('https://c0.wp.com/p/woocommerce/8.7.0/assets/css/../images/icons/credit-cards/amex.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.discover,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.discover,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.discover{--wpr-bg-12342072-fe15-4569-b414-ef7b1eafcfbb: url('https://c0.wp.com/p/woocommerce/8.7.0/assets/css/../images/icons/credit-cards/discover.svg');}.trp-language-switcher>div{--wpr-bg-81da100f-b6bc-4f8d-a166-38212895aa67: url('https://nelkodev.com/wp-content/plugins/translatepress-multilingual/assets/images/arrow-down-3101.svg');}.xt_woofc-trigger.xt_woofc-icontype-image .xt_woofc-trigger-cart-icon{--wpr-bg-ad41f143-f7ce-4b64-b754-30442235cc36: url('https://nelkodev.com/wp-content/plugins/xt-woo-floating-cart/public/assets/img/open.svg');}.xt_woofc-trigger.xt_woofc-icontype-image .xt_woofc-trigger-close-icon{--wpr-bg-7d3daf72-6595-4cc9-8560-165632a1dee4: url('https://nelkodev.com/wp-content/plugins/xt-woo-floating-cart/public/assets/img/close.svg');}.lSAction>a{--wpr-bg-5784b9c5-89ec-459c-a0cc-9099d3515d03: url('https://nelkodev.com/wp-content/plugins/xt-woo-floating-cart/public/assets/vendors/lightslider/img/controls.png');}.elementor-22300 .elementor-element.elementor-element-5ab3080:not(.elementor-motion-effects-element-type-background), .elementor-22300 .elementor-element.elementor-element-5ab3080 > .elementor-motion-effects-container > .elementor-motion-effects-layer{--wpr-bg-66c5bb68-aeb9-40b8-b8bb-3be117b43a67: url('https://i0.wp.com/nelkodev.com/wp-content/uploads/2023/03/3d-black-icosahedron-and-asymmetric-hexagonal-bipyramid-patterned-background.jpg?fit=1280%2C853&ssl=1');}.elementor-22007 .elementor-element.elementor-element-727797ed:not(.elementor-motion-effects-element-type-background), .elementor-22007 .elementor-element.elementor-element-727797ed > .elementor-motion-effects-container > .elementor-motion-effects-layer{--wpr-bg-b396bcf8-892f-4f6b-88cf-cbc316cfd52a: url('https://i0.wp.com/nelkodev.com/wp-content/uploads/2023/03/3d-black-paper-craft-cubic-patterned-background.jpg?fit=1280%2C853&ssl=1');}table.dataTable thead .sorting{--wpr-bg-de20a428-7b24-43a1-9722-70fe64ef2c0e: url('https://nelkodev.com/wp-content/plugins/elementskit-lite/widgets/init/assets/img/arrow.png');}table.dataTable thead .sorting_asc{--wpr-bg-0753b0ab-7227-41ef-9cbb-6227f3ebfbf1: url('https://nelkodev.com/wp-content/plugins/elementskit-lite/widgets/init/assets/img/sort_asc.png');}table.dataTable thead .sorting_desc{--wpr-bg-27b11833-a499-4670-990b-dc06179a5d39: url('https://nelkodev.com/wp-content/plugins/elementskit-lite/widgets/init/assets/img/sort_desc.png');}table.dataTable thead .sorting_asc_disabled{--wpr-bg-8093e805-04ca-42bf-a831-607376cc518c: url('https://nelkodev.com/wp-content/plugins/elementskit-lite/widgets/init/assets/img/sort_asc_disabled.png');}body div div.jetpack-slideshow-controls a,body div div.jetpack-slideshow-controls a:hover{--wpr-bg-8e37a3c4-0dee-4f11-8755-a02adfc84cb2: url('https://c0.wp.com/p/jetpack/13.3/css/../modules/shortcodes/img/slideshow-controls.png');}body div div.jetpack-slideshow-controls a,body div div.jetpack-slideshow-controls a:hover{--wpr-bg-6f62db32-0044-4c31-85b6-e4e599621bfd: url('https://c0.wp.com/p/jetpack/13.3/css/../modules/shortcodes/img/slideshow-controls-2x.png');}.presentation .nav-arrow-left,.presentation .nav-arrow-right{--wpr-bg-356ee701-c2ac-4dd7-972f-c2343cd4d8fc: url('https://c0.wp.com/p/jetpack/13.3/css/../modules/shortcodes/images/slide-nav.png');}.presentation .nav-fullscreen-button{--wpr-bg-d75038ad-daa5-4e75-8efc-081a0f3826f4: url('https://c0.wp.com/p/jetpack/13.3/css/../modules/shortcodes/images/expand.png');}.presentation-wrapper-fullscreen .nav-fullscreen-button{--wpr-bg-94d5df34-5f81-4df5-86cc-d2738ec74c66: url('https://c0.wp.com/p/jetpack/13.3/css/../modules/shortcodes/images/collapse.png');}.widget-grofile .grofile-accounts-logo{--wpr-bg-9cfbd595-2991-4a3a-b381-366c934d250b: url('https://secure.gravatar.com/images/grav-share-sprite.png');}.widget-grofile .grofile-accounts-logo{--wpr-bg-eb3f52d5-cb47-41c4-92dc-8ca70fd6bc4b: url('https://secure.gravatar.com/images/grav-share-sprite-2x.png');}.xt_woofc-trigger.xt_woofc-icontype-image .xt_woofc-trigger-cart-icon{--wpr-bg-487bb614-f138-45f2-906e-7fa6c128d75b: url('https://nelkodev.com/wp-content/plugins/xt-woo-floating-cart/public/assets/img/open.svg');}.xt_woofc-trigger.xt_woofc-icontype-image .xt_woofc-trigger-close-icon{--wpr-bg-f688466d-5764-474b-a201-ecb6eecbd790: url('https://nelkodev.com/wp-content/plugins/xt-woo-floating-cart/public/assets/img/close.svg');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".mejs-overlay-button","style":".mejs-overlay-button{--wpr-bg-ecdec368-78c5-406b-8486-fef6d1fcdc2c: url('https:\/\/c0.wp.com\/c\/6.5.3\/wp-includes\/js\/mediaelement\/mejs-controls.svg');}","hash":"ecdec368-78c5-406b-8486-fef6d1fcdc2c","url":"https:\/\/c0.wp.com\/c\/6.5.3\/wp-includes\/js\/mediaelement\/mejs-controls.svg"},{"selector":".mejs-overlay-loading-bg-img","style":".mejs-overlay-loading-bg-img{--wpr-bg-0ce5ad55-aaca-4359-93bd-ea33a30a7948: url('https:\/\/c0.wp.com\/c\/6.5.3\/wp-includes\/js\/mediaelement\/mejs-controls.svg');}","hash":"0ce5ad55-aaca-4359-93bd-ea33a30a7948","url":"https:\/\/c0.wp.com\/c\/6.5.3\/wp-includes\/js\/mediaelement\/mejs-controls.svg"},{"selector":".mejs-button>button","style":".mejs-button>button{--wpr-bg-6b9a7759-cfdf-4a13-872f-fd645a40724e: url('https:\/\/c0.wp.com\/c\/6.5.3\/wp-includes\/js\/mediaelement\/mejs-controls.svg');}","hash":"6b9a7759-cfdf-4a13-872f-fd645a40724e","url":"https:\/\/c0.wp.com\/c\/6.5.3\/wp-includes\/js\/mediaelement\/mejs-controls.svg"},{"selector":".woocommerce .blockUI.blockOverlay","style":".woocommerce .blockUI.blockOverlay::before{--wpr-bg-30907a92-3752-4f05-86dd-5c09c3328e74: url('https:\/\/c0.wp.com\/p\/woocommerce\/8.7.0\/assets\/css\/..\/images\/icons\/loader.svg');}","hash":"30907a92-3752-4f05-86dd-5c09c3328e74","url":"https:\/\/c0.wp.com\/p\/woocommerce\/8.7.0\/assets\/css\/..\/images\/icons\/loader.svg"},{"selector":".woocommerce .loader","style":".woocommerce .loader::before{--wpr-bg-8b5a321e-38e6-4164-8c30-45e6f307b3e1: url('https:\/\/c0.wp.com\/p\/woocommerce\/8.7.0\/assets\/css\/..\/images\/icons\/loader.svg');}","hash":"8b5a321e-38e6-4164-8c30-45e6f307b3e1","url":"https:\/\/c0.wp.com\/p\/woocommerce\/8.7.0\/assets\/css\/..\/images\/icons\/loader.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.visa,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.visa,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.visa","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.visa,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.visa,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.visa{--wpr-bg-fcddab54-96e6-46fa-ac0c-8c1b972f3aac: url('https:\/\/c0.wp.com\/p\/woocommerce\/8.7.0\/assets\/css\/..\/images\/icons\/credit-cards\/visa.svg');}","hash":"fcddab54-96e6-46fa-ac0c-8c1b972f3aac","url":"https:\/\/c0.wp.com\/p\/woocommerce\/8.7.0\/assets\/css\/..\/images\/icons\/credit-cards\/visa.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.mastercard","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.mastercard{--wpr-bg-61391bc9-4970-4bb9-9224-681ddd3deef7: url('https:\/\/c0.wp.com\/p\/woocommerce\/8.7.0\/assets\/css\/..\/images\/icons\/credit-cards\/mastercard.svg');}","hash":"61391bc9-4970-4bb9-9224-681ddd3deef7","url":"https:\/\/c0.wp.com\/p\/woocommerce\/8.7.0\/assets\/css\/..\/images\/icons\/credit-cards\/mastercard.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.laser,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.laser,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.laser","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.laser,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.laser,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.laser{--wpr-bg-289624ff-6b69-4e26-9a5a-9676ba7c748e: url('https:\/\/c0.wp.com\/p\/woocommerce\/8.7.0\/assets\/css\/..\/images\/icons\/credit-cards\/laser.svg');}","hash":"289624ff-6b69-4e26-9a5a-9676ba7c748e","url":"https:\/\/c0.wp.com\/p\/woocommerce\/8.7.0\/assets\/css\/..\/images\/icons\/credit-cards\/laser.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.dinersclub","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.dinersclub{--wpr-bg-be05ab3f-df7e-4ae9-9ef2-7cfdeb1a83a2: url('https:\/\/c0.wp.com\/p\/woocommerce\/8.7.0\/assets\/css\/..\/images\/icons\/credit-cards\/diners.svg');}","hash":"be05ab3f-df7e-4ae9-9ef2-7cfdeb1a83a2","url":"https:\/\/c0.wp.com\/p\/woocommerce\/8.7.0\/assets\/css\/..\/images\/icons\/credit-cards\/diners.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.maestro","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.maestro{--wpr-bg-30bbd902-d651-4196-9f53-f43a49e8bbdc: url('https:\/\/c0.wp.com\/p\/woocommerce\/8.7.0\/assets\/css\/..\/images\/icons\/credit-cards\/maestro.svg');}","hash":"30bbd902-d651-4196-9f53-f43a49e8bbdc","url":"https:\/\/c0.wp.com\/p\/woocommerce\/8.7.0\/assets\/css\/..\/images\/icons\/credit-cards\/maestro.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.jcb","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.jcb{--wpr-bg-73c33347-0131-4a8f-a7a1-40656402f08d: url('https:\/\/c0.wp.com\/p\/woocommerce\/8.7.0\/assets\/css\/..\/images\/icons\/credit-cards\/jcb.svg');}","hash":"73c33347-0131-4a8f-a7a1-40656402f08d","url":"https:\/\/c0.wp.com\/p\/woocommerce\/8.7.0\/assets\/css\/..\/images\/icons\/credit-cards\/jcb.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.amex,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.amex,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.amex","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.amex,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.amex,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.amex{--wpr-bg-19148b86-22c8-4785-919a-5f7d9e134976: url('https:\/\/c0.wp.com\/p\/woocommerce\/8.7.0\/assets\/css\/..\/images\/icons\/credit-cards\/amex.svg');}","hash":"19148b86-22c8-4785-919a-5f7d9e134976","url":"https:\/\/c0.wp.com\/p\/woocommerce\/8.7.0\/assets\/css\/..\/images\/icons\/credit-cards\/amex.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.discover,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.discover,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.discover","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.discover,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.discover,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.discover{--wpr-bg-12342072-fe15-4569-b414-ef7b1eafcfbb: url('https:\/\/c0.wp.com\/p\/woocommerce\/8.7.0\/assets\/css\/..\/images\/icons\/credit-cards\/discover.svg');}","hash":"12342072-fe15-4569-b414-ef7b1eafcfbb","url":"https:\/\/c0.wp.com\/p\/woocommerce\/8.7.0\/assets\/css\/..\/images\/icons\/credit-cards\/discover.svg"},{"selector":".trp-language-switcher>div","style":".trp-language-switcher>div{--wpr-bg-81da100f-b6bc-4f8d-a166-38212895aa67: url('https:\/\/nelkodev.com\/wp-content\/plugins\/translatepress-multilingual\/assets\/images\/arrow-down-3101.svg');}","hash":"81da100f-b6bc-4f8d-a166-38212895aa67","url":"https:\/\/nelkodev.com\/wp-content\/plugins\/translatepress-multilingual\/assets\/images\/arrow-down-3101.svg"},{"selector":".xt_woofc-trigger.xt_woofc-icontype-image .xt_woofc-trigger-cart-icon","style":".xt_woofc-trigger.xt_woofc-icontype-image .xt_woofc-trigger-cart-icon{--wpr-bg-ad41f143-f7ce-4b64-b754-30442235cc36: url('https:\/\/nelkodev.com\/wp-content\/plugins\/xt-woo-floating-cart\/public\/assets\/img\/open.svg');}","hash":"ad41f143-f7ce-4b64-b754-30442235cc36","url":"https:\/\/nelkodev.com\/wp-content\/plugins\/xt-woo-floating-cart\/public\/assets\/img\/open.svg"},{"selector":".xt_woofc-trigger.xt_woofc-icontype-image .xt_woofc-trigger-close-icon","style":".xt_woofc-trigger.xt_woofc-icontype-image .xt_woofc-trigger-close-icon{--wpr-bg-7d3daf72-6595-4cc9-8560-165632a1dee4: url('https:\/\/nelkodev.com\/wp-content\/plugins\/xt-woo-floating-cart\/public\/assets\/img\/close.svg');}","hash":"7d3daf72-6595-4cc9-8560-165632a1dee4","url":"https:\/\/nelkodev.com\/wp-content\/plugins\/xt-woo-floating-cart\/public\/assets\/img\/close.svg"},{"selector":".lSAction>a","style":".lSAction>a{--wpr-bg-5784b9c5-89ec-459c-a0cc-9099d3515d03: url('https:\/\/nelkodev.com\/wp-content\/plugins\/xt-woo-floating-cart\/public\/assets\/vendors\/lightslider\/img\/controls.png');}","hash":"5784b9c5-89ec-459c-a0cc-9099d3515d03","url":"https:\/\/nelkodev.com\/wp-content\/plugins\/xt-woo-floating-cart\/public\/assets\/vendors\/lightslider\/img\/controls.png"},{"selector":".elementor-22300 .elementor-element.elementor-element-5ab3080:not(.elementor-motion-effects-element-type-background), .elementor-22300 .elementor-element.elementor-element-5ab3080 > .elementor-motion-effects-container > .elementor-motion-effects-layer","style":".elementor-22300 .elementor-element.elementor-element-5ab3080:not(.elementor-motion-effects-element-type-background), .elementor-22300 .elementor-element.elementor-element-5ab3080 > .elementor-motion-effects-container > .elementor-motion-effects-layer{--wpr-bg-66c5bb68-aeb9-40b8-b8bb-3be117b43a67: url('https:\/\/i0.wp.com\/nelkodev.com\/wp-content\/uploads\/2023\/03\/3d-black-icosahedron-and-asymmetric-hexagonal-bipyramid-patterned-background.jpg?fit=1280%2C853&ssl=1');}","hash":"66c5bb68-aeb9-40b8-b8bb-3be117b43a67","url":"https:\/\/i0.wp.com\/nelkodev.com\/wp-content\/uploads\/2023\/03\/3d-black-icosahedron-and-asymmetric-hexagonal-bipyramid-patterned-background.jpg?fit=1280%2C853&ssl=1"},{"selector":".elementor-22007 .elementor-element.elementor-element-727797ed:not(.elementor-motion-effects-element-type-background), .elementor-22007 .elementor-element.elementor-element-727797ed > .elementor-motion-effects-container > .elementor-motion-effects-layer","style":".elementor-22007 .elementor-element.elementor-element-727797ed:not(.elementor-motion-effects-element-type-background), .elementor-22007 .elementor-element.elementor-element-727797ed > .elementor-motion-effects-container > .elementor-motion-effects-layer{--wpr-bg-b396bcf8-892f-4f6b-88cf-cbc316cfd52a: url('https:\/\/i0.wp.com\/nelkodev.com\/wp-content\/uploads\/2023\/03\/3d-black-paper-craft-cubic-patterned-background.jpg?fit=1280%2C853&ssl=1');}","hash":"b396bcf8-892f-4f6b-88cf-cbc316cfd52a","url":"https:\/\/i0.wp.com\/nelkodev.com\/wp-content\/uploads\/2023\/03\/3d-black-paper-craft-cubic-patterned-background.jpg?fit=1280%2C853&ssl=1"},{"selector":"table.dataTable thead .sorting","style":"table.dataTable thead .sorting{--wpr-bg-de20a428-7b24-43a1-9722-70fe64ef2c0e: url('https:\/\/nelkodev.com\/wp-content\/plugins\/elementskit-lite\/widgets\/init\/assets\/img\/arrow.png');}","hash":"de20a428-7b24-43a1-9722-70fe64ef2c0e","url":"https:\/\/nelkodev.com\/wp-content\/plugins\/elementskit-lite\/widgets\/init\/assets\/img\/arrow.png"},{"selector":"table.dataTable thead .sorting_asc","style":"table.dataTable thead .sorting_asc{--wpr-bg-0753b0ab-7227-41ef-9cbb-6227f3ebfbf1: url('https:\/\/nelkodev.com\/wp-content\/plugins\/elementskit-lite\/widgets\/init\/assets\/img\/sort_asc.png');}","hash":"0753b0ab-7227-41ef-9cbb-6227f3ebfbf1","url":"https:\/\/nelkodev.com\/wp-content\/plugins\/elementskit-lite\/widgets\/init\/assets\/img\/sort_asc.png"},{"selector":"table.dataTable thead .sorting_desc","style":"table.dataTable thead .sorting_desc{--wpr-bg-27b11833-a499-4670-990b-dc06179a5d39: url('https:\/\/nelkodev.com\/wp-content\/plugins\/elementskit-lite\/widgets\/init\/assets\/img\/sort_desc.png');}","hash":"27b11833-a499-4670-990b-dc06179a5d39","url":"https:\/\/nelkodev.com\/wp-content\/plugins\/elementskit-lite\/widgets\/init\/assets\/img\/sort_desc.png"},{"selector":"table.dataTable thead .sorting_asc_disabled","style":"table.dataTable thead .sorting_asc_disabled{--wpr-bg-8093e805-04ca-42bf-a831-607376cc518c: url('https:\/\/nelkodev.com\/wp-content\/plugins\/elementskit-lite\/widgets\/init\/assets\/img\/sort_asc_disabled.png');}","hash":"8093e805-04ca-42bf-a831-607376cc518c","url":"https:\/\/nelkodev.com\/wp-content\/plugins\/elementskit-lite\/widgets\/init\/assets\/img\/sort_asc_disabled.png"},{"selector":"body div div.jetpack-slideshow-controls a","style":"body div div.jetpack-slideshow-controls a,body div div.jetpack-slideshow-controls a:hover{--wpr-bg-8e37a3c4-0dee-4f11-8755-a02adfc84cb2: url('https:\/\/c0.wp.com\/p\/jetpack\/13.3\/css\/..\/modules\/shortcodes\/img\/slideshow-controls.png');}","hash":"8e37a3c4-0dee-4f11-8755-a02adfc84cb2","url":"https:\/\/c0.wp.com\/p\/jetpack\/13.3\/css\/..\/modules\/shortcodes\/img\/slideshow-controls.png"},{"selector":"body div div.jetpack-slideshow-controls a","style":"body div div.jetpack-slideshow-controls a,body div div.jetpack-slideshow-controls a:hover{--wpr-bg-6f62db32-0044-4c31-85b6-e4e599621bfd: url('https:\/\/c0.wp.com\/p\/jetpack\/13.3\/css\/..\/modules\/shortcodes\/img\/slideshow-controls-2x.png');}","hash":"6f62db32-0044-4c31-85b6-e4e599621bfd","url":"https:\/\/c0.wp.com\/p\/jetpack\/13.3\/css\/..\/modules\/shortcodes\/img\/slideshow-controls-2x.png"},{"selector":".presentation .nav-arrow-left,.presentation .nav-arrow-right","style":".presentation .nav-arrow-left,.presentation .nav-arrow-right{--wpr-bg-356ee701-c2ac-4dd7-972f-c2343cd4d8fc: url('https:\/\/c0.wp.com\/p\/jetpack\/13.3\/css\/..\/modules\/shortcodes\/images\/slide-nav.png');}","hash":"356ee701-c2ac-4dd7-972f-c2343cd4d8fc","url":"https:\/\/c0.wp.com\/p\/jetpack\/13.3\/css\/..\/modules\/shortcodes\/images\/slide-nav.png"},{"selector":".presentation .nav-fullscreen-button","style":".presentation .nav-fullscreen-button{--wpr-bg-d75038ad-daa5-4e75-8efc-081a0f3826f4: url('https:\/\/c0.wp.com\/p\/jetpack\/13.3\/css\/..\/modules\/shortcodes\/images\/expand.png');}","hash":"d75038ad-daa5-4e75-8efc-081a0f3826f4","url":"https:\/\/c0.wp.com\/p\/jetpack\/13.3\/css\/..\/modules\/shortcodes\/images\/expand.png"},{"selector":".presentation-wrapper-fullscreen .nav-fullscreen-button","style":".presentation-wrapper-fullscreen .nav-fullscreen-button{--wpr-bg-94d5df34-5f81-4df5-86cc-d2738ec74c66: url('https:\/\/c0.wp.com\/p\/jetpack\/13.3\/css\/..\/modules\/shortcodes\/images\/collapse.png');}","hash":"94d5df34-5f81-4df5-86cc-d2738ec74c66","url":"https:\/\/c0.wp.com\/p\/jetpack\/13.3\/css\/..\/modules\/shortcodes\/images\/collapse.png"},{"selector":".widget-grofile .grofile-accounts-logo","style":".widget-grofile .grofile-accounts-logo{--wpr-bg-9cfbd595-2991-4a3a-b381-366c934d250b: url('https:\/\/secure.gravatar.com\/images\/grav-share-sprite.png');}","hash":"9cfbd595-2991-4a3a-b381-366c934d250b","url":"https:\/\/secure.gravatar.com\/images\/grav-share-sprite.png"},{"selector":".widget-grofile .grofile-accounts-logo","style":".widget-grofile .grofile-accounts-logo{--wpr-bg-eb3f52d5-cb47-41c4-92dc-8ca70fd6bc4b: url('https:\/\/secure.gravatar.com\/images\/grav-share-sprite-2x.png');}","hash":"eb3f52d5-cb47-41c4-92dc-8ca70fd6bc4b","url":"https:\/\/secure.gravatar.com\/images\/grav-share-sprite-2x.png"},{"selector":".xt_woofc-trigger.xt_woofc-icontype-image .xt_woofc-trigger-cart-icon","style":".xt_woofc-trigger.xt_woofc-icontype-image .xt_woofc-trigger-cart-icon{--wpr-bg-487bb614-f138-45f2-906e-7fa6c128d75b: url('https:\/\/nelkodev.com\/wp-content\/plugins\/xt-woo-floating-cart\/public\/assets\/img\/open.svg');}","hash":"487bb614-f138-45f2-906e-7fa6c128d75b","url":"https:\/\/nelkodev.com\/wp-content\/plugins\/xt-woo-floating-cart\/public\/assets\/img\/open.svg"},{"selector":".xt_woofc-trigger.xt_woofc-icontype-image .xt_woofc-trigger-close-icon","style":".xt_woofc-trigger.xt_woofc-icontype-image .xt_woofc-trigger-close-icon{--wpr-bg-f688466d-5764-474b-a201-ecb6eecbd790: url('https:\/\/nelkodev.com\/wp-content\/plugins\/xt-woo-floating-cart\/public\/assets\/img\/close.svg');}","hash":"f688466d-5764-474b-a201-ecb6eecbd790","url":"https:\/\/nelkodev.com\/wp-content\/plugins\/xt-woo-floating-cart\/public\/assets\/img\/close.svg"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<!-- Contenido de la página -->
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
Los comentarios de código son anotaciones que se pueden agregar al código fuente para proporcionar información adicional, aclaraciones o ayuda para el mantenimiento y comprensión del código. Estos no afectan la funcionalidad del programa.
Los comentarios en JavaScript pueden ser de dos tipos: comentarios de una línea y comentarios de varias líneas. Los comentarios de una línea comienzan con dos barras diagonales (//), mientras que los comentarios de varias líneas comienzan con una barra diagonal y un asterisco (/) y terminan con un asterisco y una barra diagonal (/).
// Comentario de una línea: Esto no se ejecutará
/*
Comentario de varias líneas:
Esto es un comentario que abarca
múltiples líneas y tampoco se ejecutará
*/
console.log("Hola, mundo!"); // Comentario de una línea después de una instrucción
Las estructuras de control en JavaScript permiten controlar el flujo de ejecución del código y tomar decisiones según las condiciones establecidas.
JavaScript ofrece varias estructuras de control, como if, if-else, switch, for, while y do-while, que permiten controlar el flujo del programa en función de condiciones o iteraciones específicas.
Los bucles en JavaScript permiten la ejecución repetitiva de un bloque de código mientras se cumpla una condición. Los bucles más comunes son for, while y do-while.
Las estructuras de control de bucles permiten simplificar tareas repetitivas en JavaScript, automatizando la ejecución de bloques de código sin necesidad de escribir las mismas instrucciones múltiples veces.
// Estructura if
if (condicion) {
// Código a ejecutar si la condición es verdadera
}
// Estructura if-else
if (condicion) {
// Código a ejecutar si la condición es verdadera
} else {
// Código a ejecutar si la condición es falsa
}
// Bucle for
for (let i = 0; i < 10; i++) {
// Código a ejecutar en cada iteración
}
// Bucle while
while (condicion) {
// Código a ejecutar mientras la condición sea verdadera
}
// Bucle do-while
do {
// Código a ejecutar al menos una vez y mientras la condición sea verdadera
} while (condicion);
Los operadores en JavaScript permiten realizar diversas operaciones con valores y variables, como asignaciones, comparaciones y cálculos matemáticos.
Los operadores básicos en JavaScript incluyen operadores aritméticos, de asignación y de comparación. Algunos ejemplos son:
+, -, *, /, %=, +=, -=, *=, /=, %===, ===, !=, !==, <, >, <=, >=Los operadores avanzados en JavaScript incluyen operadores lógicos, ternarios y de tipo. Algunos ejemplos son:
&& (AND), || (OR), ! (NOT)? :typeof, instanceof
// Operadores aritméticos
let suma = 5 + 3; // 8
let resta = 5 - 3; // 2
let producto = 5 * 3; // 15
let division = 5 / 3; // 1.666666...
let modulo = 5 % 3; // 2
// Operadores de asignación
let num = 5; // Asigna 5 a la variable num
num += 3; // Incrementa num en 3 (num = num + 3)
num -= 2; // Decrementa num en 2 (num = num - 2)
// Operadores de comparación
let isEqual = 5 == "5"; // true
let isStrictEqual = 5 === "5"; // false
// Operadores lógicos
let andResult = true && false; // false
let orResult = true || false; // true
let notResult = !true; // false
// Operador ternario
let age = 18;
let canVote = age >= 18 ? "Yes" : "No"; // "Yes"
// Operadores de tipo
let type = typeof "Hello"; // "string"
let isInstance = [1, 2, 3] instanceof Array; // true
La indentación de código y las convenciones de nombres son prácticas fundamentales para mantener la legibilidad y el mantenimiento del código en JavaScript. Estas prácticas ayudan a organizar el código de manera clara y a facilitar la comprensión de su estructura y funcionamiento.
La legibilidad del código es crucial para que otros desarrolladores puedan entenderlo fácilmente y realizar modificaciones si es necesario. La indentación apropiada y las convenciones de nombres son dos aspectos clave para mejorar la legibilidad del código.
Al elegir nombres para variables, funciones y objetos en JavaScript, es importante seguir ciertas convenciones y prácticas recomendadas:
miVariable.MiClase.MI_CONSTANTE.i, j o k.function, var, let, const, entre otros.
// Declaración de variables con nombres descriptivos
let userAge = 30;
let userName = "John";
// Declaración de funciones con nombres descriptivos
function calculateArea(width, height) {
return width * height;
}
// Uso de indentación en funciones y estructuras de control
function checkAge(age) {
if (age >= 18) {
console.log("Mayor de edad");
} else {
console.log("Menor de edad");
}
}
Los fundamentos de JavaScript incluyen aspectos básicos del lenguaje, como tipos de datos, variables y constantes, y funciones básicas.
'Hola' o "Hola").42, 3.14).true o false.Las variables y constantes en JavaScript permiten almacenar y manipular valores. Se pueden declarar usando las palabras clave var, let y const.
var: permite declarar variables con un alcance de función.let: permite declarar variables con un alcance de bloque.const: permite declarar constantes cuyo valor no puede ser modificado después de su asignación.Las funciones en JavaScript son bloques de código reutilizables que pueden ser llamados y ejecutados cuando se requieran. Para declarar una función, se utiliza la palabra clave function seguida del nombre de la función, paréntesis y un bloque de código entre llaves.
Las funciones en JavaScript pueden aceptar argumentos, que son valores pasados a la función cuando se invoca, y pueden devolver un valor usando la palabra clave return.
// Tipos de datos
let myString = 'Hola, mundo!';
let myNumber = 42;
let myBoolean = true;
let myNull = null;
let myUndefined = undefined;
// Variables y constantes
var myVar = 'Variable var';
let myLet = 'Variable let';
const MY_CONST = 'Constante';
// Funciones básicas
function greet(name) {
return 'Hola, ' + name + '!';
}
// Invocar una función
let greeting = greet('Juan');
console.log(greeting); // Salida: "Hola, Juan!"
JavaScript ofrece tipos de datos numéricos como Number y BigInt, junto con herramientas para realizar operaciones matemáticas y conversiones numéricas.
Number es un tipo de dato en JavaScript que representa números enteros y decimales. Puede almacenar valores numéricos en formato decimal, binario, octal y hexadecimal.
NaN es un valor especial de JavaScript que representa el resultado de una operación matemática no válida o indefinida. NaN es único porque no es igual a ningún valor, incluso a sí mismo.
JavaScript proporciona el objeto Math, que contiene propiedades y métodos para realizar operaciones matemáticas comunes, como redondeo, generación de números aleatorios y cálculo de funciones trigonométricas.
Las operaciones matemáticas básicas en JavaScript, como suma, resta, multiplicación y división, se pueden realizar utilizando los operadores aritméticos (+, -, *, /). Para operaciones más avanzadas, se puede utilizar el objeto Math.
BigInt es un tipo de dato numérico en JavaScript que permite representar números enteros más grandes que el máximo representable por el tipo Number (2^53 – 1). Los BigInt se crean agregando una ‘n’ al final de un número entero.
JavaScript permite convertir valores entre diferentes tipos numéricos utilizando métodos como parseInt(), parseFloat() y Number(), así como el uso de operadores como + y *.
// Number
let num = 42;
// NaN
let notANumber = 0 / 0;
// Objeto Math
let randomNum = Math.random(); // Número aleatorio entre 0 y 1
let roundedNum = Math.round(3.5); // 4
// Operaciones matemáticas
let suma = 5 + 3;
let resta = 5 - 3;
let producto = 5 * 3;
let division = 5 / 3;
// BigInt
let bigInt = 1234567890123456789012345678901234567890n;
// Conversiones numéricas
let str = "42";
let numFromStr = parseInt(str); // 42
let floatFromStr = parseFloat("3.14"); // 3.14
let numFromString = Number("42"); // 42
Los strings en JavaScript son secuencias de caracteres que representan texto. Pueden ser manipulados y modificados mediante una variedad de métodos y propiedades.
Un string es un tipo de dato en JavaScript que representa una cadena de caracteres. Se pueden crear utilizando comillas simples ('texto'), comillas dobles ("texto"), o comillas invertidas (`texto`).
Los caracteres dentro de un string tienen posiciones indexadas, comenzando desde 0. Se pueden acceder y extraer substrings utilizando métodos como charAt(), substring(), slice() y substr().
Los strings en JavaScript ofrecen métodos para buscar y reemplazar contenido, como indexOf(), lastIndexOf(), includes(), startsWith(), endsWith(), replace() y replaceAll().
Se pueden realizar modificaciones y transformaciones en los strings utilizando métodos como concat(), toUpperCase(), toLowerCase(), trim(), padStart() y padEnd().
Unicode JavaScript admite el estándar Unicode para representar caracteres en strings, lo que permite incluir caracteres de diversos idiomas y símbolos especiales. Para trabajar con caracteres Unicode, se pueden utilizar métodos como fromCharCode(), fromCodePoint(), charCodeAt() y codePointAt().
// Crear un string
let myString = 'Hola, mundo!';
// Posiciones y substrings
let firstChar = myString.charAt(0); // 'H'
let mySubstring = myString.substring(0, 4); // 'Hola'
// Buscar y reemplazar
let position = myString.indexOf('mundo'); // 7
let replacedString = myString.replace('mundo', 'amigo'); // 'Hola, amigo!'
// Modificar cadenas de texto
let upperCaseString = myString.toUpperCase(); // 'HOLA, MUNDO!'
let trimmedString = ' Hola, mundo! '.trim(); // 'Hola, mundo!'
// Contenido de texto Unicode
let unicodeChar = String.fromCodePoint(128512); // '😀'
let codePoint = '😀'.codePointAt(0); // 128512
JavaScript ofrece estructuras de datos como objetos y arrays para almacenar y organizar información de manera estructurada y fácilmente accesible.
Los objetos en JavaScript son colecciones de pares clave-valor, donde cada clave se asocia con un valor. Los objetos se crean utilizando llaves ({}) y pueden almacenar datos, funciones y otros objetos.
Los objetos en JavaScript pueden actuar como diccionarios, donde cada clave es única y se asocia a un valor específico.
JSON (JavaScript Object Notation) es un formato ligero para el intercambio de datos, que utiliza una sintaxis similar a los objetos de JavaScript. JSON se puede convertir a objetos y viceversa utilizando JSON.parse() y JSON.stringify().
La desestructuración de objetos permite extraer propiedades de un objeto y asignarlas a variables individuales de manera más concisa.
Se pueden iterar las propiedades de un objeto utilizando bucles for...in o métodos como Object.keys(), Object.values() y Object.entries().
Los arrays en JavaScript son objetos que representan listas ordenadas de elementos. Se crean utilizando corchetes ([]) y pueden almacenar cualquier tipo de dato, incluidos otros arrays (arrays multidimensionales).
Se pueden buscar elementos en un array utilizando métodos como indexOf(), lastIndexOf(), includes(), find() y findIndex().
Los arrays pueden ser modificados o se pueden crear subarrays utilizando métodos como push(), pop(), shift(), unshift(), splice(), slice() y concat().
Los arrays pueden ordenarse utilizando el método sort(), que acepta una función de comparación opcional para personalizar el ordenamiento.
Los arrays en JavaScript ofrecen funciones de alto orden como map(), filter(), reduce(), forEach() y some() para transformar, filtrar y procesar sus elementos.
La desestructuración de arrays permite extraer elementos de un array y asignarlos a variables individuales de manera más concisa.
// Crear un objeto
let obj = {
clave: 'valor',
saludo: function() {
console.log('Hola, mundo!');
},
};
// Desestructuración de objetos
let {clave, saludo} = obj;
// Crear un array
let arr = [1, 2, 3, 4, 5];
// Buscar elementos en un array
let index = arr.indexOf(3); // 2
// Modificar un array
arr.push(6); // [1, 2, 3, 4, 5, 6]
// Ordenar un array
arr.sort((a, b) => a - b); // [1, 2, 3, 4, 5, 6]
// Array functions
let squares = arr.map((num) => num * num); // [1, 4, 9, 16, 25, 36]
// Desestructuración de arrays
let [first, second, ...rest] = arr;
// JSON
let jsonString = '{"nombre": "Juan", "edad": 30}';
let jsonObj = JSON.parse(jsonString); // {nombre: "Juan", edad: 30}
let jsonStringify = JSON.stringify(jsonObj); // '{"nombre":"Juan","edad":30}'
// Iteradores de objetos
for (let key in obj) {
console.log(`${key}: ${obj[key]}`);
}
let keys = Object.keys(obj); // ['clave', 'saludo']
let values = Object.values(obj); // ['valor', function]
// Funciones de array
let evenNumbers = arr.filter((num) => num % 2 === 0); // [2, 4, 6]
let sum = arr.reduce((acc, num) => acc + num, 0); // 21
arr.forEach((num) => console.log(num));
let anyGreaterThan4 = arr.some((num) => num > 4); // true
JavaScript ofrece estructuras de datos adicionales como Set y Map para almacenar y organizar información de manera eficiente y fácil de usar.
Un Set es una estructura de datos en JavaScript que representa una colección de valores únicos, sin duplicados. Se crea utilizando la palabra clave new Set() y puede almacenar cualquier tipo de dato.
Los conjuntos (Set) en JavaScript ofrecen varios métodos para realizar operaciones comunes, como agregar elementos (add()), eliminar elementos (delete()), verificar si un conjunto contiene un elemento (has()), y obtener el tamaño del conjunto (size). También es posible iterar sobre los elementos de un conjunto utilizando bucles for...of o el método forEach().
Un Map es una estructura de datos en JavaScript que representa una colección de pares clave-valor, similar a un objeto. Sin embargo, a diferencia de los objetos, las claves en un Map pueden ser de cualquier tipo, incluidos objetos y funciones. Los Map se crean utilizando la palabra clave new Map().
Los Map en JavaScript ofrecen varios métodos para realizar operaciones comunes, como agregar pares clave-valor (set()), obtener el valor asociado a una clave (get()), eliminar un par clave-valor (delete()), verificar si un Map contiene una clave (has()), y obtener el tamaño del Map (size). También es posible iterar sobre las claves, valores o pares clave-valor de un Map utilizando bucles for...of o los métodos keys(), values() y entries().
// Crear un Set
let mySet = new Set();
// Operaciones de conjuntos
mySet.add(1);
mySet.add(2);
mySet.add(2); // No se agregará porque ya existe en el Set
console.log(mySet.size); // 2
console.log(mySet.has(1)); // true
mySet.delete(1);
console.log(mySet.size); // 1
// Crear un Map
let myMap = new Map();
// Estructura de datos de pares clave-valor
myMap.set('clave', 'valor');
myMap.set('nombre', 'Juan');
console.log(myMap.size); // 2
console.log(myMap.get('nombre')); // 'Juan'
console.log(myMap.has('nombre')); // true
myMap.delete('nombre');
console.log(myMap.size); // 1
Mantener un alto nivel de calidad en el código es esencial para garantizar la legibilidad, mantenibilidad y escalabilidad de cualquier proyecto de desarrollo. Herramientas como linters y formateadores de código pueden ayudar a mejorar la calidad del código en proyectos de JavaScript.
ESLint es un linter de código abierto para JavaScript que analiza el código fuente y detecta problemas de estilo, errores de programación y malas prácticas. ESLint utiliza un conjunto de reglas configurables para aplicar estilos de codificación consistentes y prevenir errores comunes.
Al usar ESLint, se identifican automáticamente errores y problemas en el código, y se proporcionan mensajes descriptivos para ayudar a los desarrolladores a solucionarlos. ESLint también puede corregir automáticamente algunos problemas, como errores de formato y estilo, al ejecutar el comando eslint --fix.
npm install -g eslint
o
npm install --save-dev eslint
eslint --init
.eslintrc.json en la raíz del proyecto y agregar las reglas deseadas. Por ejemplo:
{
"extends": "eslint:recommended",
"rules": {
"indent": ["error", 2],
"quotes": ["error", "single"],
"semi": ["error", "always"]
}
}
eslint yourfile.js
eslint --fix yourfile.js
Los módulos son una forma de organizar y dividir el código en diferentes archivos y componentes, lo que facilita la organización, el mantenimiento y la reutilización del código en proyectos de JavaScript. Con la introducción de ECMAScript 2015 (ES6), los módulos ECMAScript (ESM) se convirtieron en una característica nativa de JavaScript, permitiendo una gestión más eficiente de las dependencias y la carga de módulos.
Los módulos ECMAScript (ESM) son una forma de organizar el código en archivos separados que pueden exportar e importar funciones, variables, objetos y clases entre ellos. Esto permite crear estructuras de código más limpias y modulares, y facilita la reutilización de código en diferentes partes de una aplicación o en múltiples proyectos.
Para hacer que una función, variable, objeto o clase esté disponible para ser utilizada en otros módulos, se debe exportar utilizando la palabra clave export. Puedes utilizar la exportación nombrada o la exportación predeterminada:
// myModule.js
export const myFunction = () => {...};
export const myVariable = 42;
// defaultModule.js
export default function() {...};
Para utilizar las funciones, variables, objetos o clases exportadas desde otros módulos, se deben importar utilizando la palabra clave import:
// main.js
import { myFunction, myVariable } from './myModule.js';
// main.js
import myDefaultFunction from './defaultModule.js';
El import dinámico es una característica de JavaScript que permite importar módulos de forma dinámica en tiempo de ejecución. Esto puede ser útil para cargar módulos bajo demanda, por ejemplo, en aplicaciones de una sola página (SPA) con rutas y componentes específicos.
// dynamicImport.js
async function loadModule() {
const module = await import('./myModule.js');
module.myFunction();
}
loadModule();
La programación orientada a objetos (OOP) es un paradigma de programación que utiliza objetos y sus interacciones para diseñar y estructurar aplicaciones y software. Los objetos son instancias de clases, que son plantillas que definen las propiedades y comportamientos que los objetos deben tener. La OOP permite organizar y modularizar el código de manera más eficiente, y facilita el mantenimiento y la reutilización del código.
La orientación a objetos es un enfoque de diseño y programación que se centra en la creación de entidades llamadas objetos, que representan elementos del mundo real o conceptos abstractos. Los objetos encapsulan datos (propiedades) y comportamientos (métodos) en una única entidad y pueden interactuar entre sí para realizar tareas complejas.
A partir de ECMAScript 2015 (ES6), JavaScript introdujo el soporte nativo para clases, lo que facilita la creación de objetos utilizando la sintaxis de clase. Las clases son plantillas que definen las propiedades y métodos de los objetos que se crean a partir de ellas.
class MyClass {
constructor(param) {
this.property = param;
}
myMethod() {
console.log(this.property);
}
}
const myObject = new MyClass('Hello, world!');
myObject.myMethod(); // Output: 'Hello, world!'
Las propiedades de clase son variables que almacenan valores específicos de cada instancia de una clase. Se definen dentro del constructor de la clase utilizando la palabra clave this:
class Car {
constructor(brand, model) {
this.brand = brand;
this.model = model;
}
}
Los métodos de clase son funciones asociadas a una clase que pueden ser llamadas por las instancias de la clase. Los métodos pueden acceder y modificar las propiedades de la instancia utilizando la palabra clave this:
class Car {
constructor(brand, model) {
this.brand = brand;
this.model = model;
}
getDescription() {
return `This car is a ${this.brand} ${this.model}`;
}
}
La herencia es un mecanismo de la OOP que permite crear una nueva clase a partir de una clase existente, heredando sus propiedades y métodos. En JavaScript, la herencia de clases se logra utilizando la palabra clave extends:
class Vehicle {
constructor(wheels) {
this.wheels = wheels;
}
getWheelCount() {
return this.wheels;
}
}
class Car extends Vehicle {
constructor(brand, model) {
super(4);
this.brand = brand;
this.model = model;
}
getDescription() {
return `This car is a ${this.brand} ${this.model} with ${this.getWheelCount()} wheels`;
}
}
El Document Object Model (DOM) es una representación en forma de objeto de la estructura de un documento HTML o XML. Permite a los desarrolladores interactuar y manipular el contenido, estructura y estilo de la página web mediante JavaScript u otros lenguajes de programación.
El DOM es una interfaz de programación que proporciona una representación en forma de árbol de los elementos de una página web y sus relaciones. Cada nodo del árbol representa un elemento del documento, como un elemento HTML, un atributo o un texto. Al interactuar con el DOM, es posible crear, modificar o eliminar elementos y atributos, cambiar el contenido de texto y aplicar estilos CSS.
Para interactuar con los elementos de una página web, primero debes seleccionarlos utilizando diferentes métodos proporcionados por el DOM:
getElementById: Selecciona un elemento por su atributo “id”.
const element = document.getElementById('myElement');
querySelector: Selecciona el primer elemento que coincida con el selector CSS proporcionado.
const element = document.querySelector('.myClass');
querySelectorAll: Selecciona todos los elementos que coincidan con el selector CSS proporcionado.
const elements = document.querySelectorAll('.myClass');
Puedes crear nuevos elementos del DOM utilizando el método createElement:
const newElement = document.createElement('div');
Para agregar un elemento al DOM, debes insertarlo como hijo de un elemento existente. Algunos métodos para insertar elementos en el DOM incluyen:
appendChild: Inserta un elemento como último hijo del elemento seleccionado.
const parentElement = document.querySelector('#parent');
parentElement.appendChild(newElement);
insertBefore: Inserta un elemento antes de otro elemento hijo del elemento seleccionado.
const referenceElement = document.querySelector('#reference');
parentElement.insertBefore(newElement, referenceElement);
La API classList proporciona una forma fácil de agregar, eliminar y alternar clases CSS en elementos del DOM:
element.classList.add('myClass'); // Agrega la clase 'myClass'.
element.classList.remove('myClass'); // Elimina la clase 'myClass'.
element.classList.toggle('myClass'); // Alterna la clase 'myClass'.
Puedes navegar por los elementos del DOM utilizando sus propiedades de relación, como parentNode, firstChild, lastChild, previousSibling y nextSibling:
const parent = element.parentNode;
const firstChild = element.firstChild;
const lastChild = element.lastChild;
const previousSibling = element.previousSibling;
const nextSibling = element.nextSibling;
Los eventos son acciones o interacciones del usuario o el sistema que pueden ser detectadas y manejadas por el código JavaScript en una página web. Algunos ejemplos de eventos incluyen clics de ratón, pulsaciones de teclas, cambios en elementos de formulario y carga de páginas.
Los eventos son señales enviadas por el navegador o el usuario para indicar que algo ha sucedido en la página web. Los desarrolladores pueden escuchar y responder a estos eventos utilizando manejadores de eventos en JavaScript, lo que permite interactuar con los usuarios y realizar acciones basadas en sus interacciones.
Puedes agregar manejadores de eventos directamente en el HTML utilizando atributos “on” seguidos del nombre del evento, como “onclick”, “onmouseover” o “onkeyup”:
<button onclick="myFunction()">Click me!</button>
Para agregar manejadores de eventos en JavaScript, puedes asignar una función a la propiedad “on” seguida del nombre del evento en el elemento del DOM:
const button = document.querySelector('button');
button.onclick = function() {
console.log('Button clicked!');
};
El método addEventListener permite agregar múltiples manejadores de eventos para un mismo evento en un elemento del DOM:
button.addEventListener('click', function() {
console.log('Button clicked!');
});
button.addEventListener('click', function() {
console.log('Another button clicked!');
});
Puedes utilizar la interfaz EventListener y su método handleEvent para manejar eventos de una manera más estructurada y orientada a objetos:
class MyEventListener {
handleEvent(event) {
console.log('Event:', event.type);
}
}
const myListener = new MyEventListener();
button.addEventListener('click', myListener);
Los eventos nativos son eventos integrados en el navegador, como “click”, “keydown”, “submit” y “load”. Estos eventos son generados automáticamente por el navegador en respuesta a interacciones del usuario o cambios en la página.
Puedes crear y emitir tus propios eventos personalizados utilizando la clase CustomEvent:
const customEvent = new CustomEvent('myEvent', { detail: { message: 'Hello, world!' } });
element.dispatchEvent(customEvent);
Los eventos del navegador son eventos globales que ocurren en el objeto window, como “resize”, “scroll” y “beforeunload”.
Para emitir un evento, utiliza el método dispatchEvent en el elemento del DOM al que deseas asociar el evento:
element.dispatchEvent(customEvent);
Los eventos en el DOM se propagan siguiendo dos fases: captura y burbuja. Durante la fase de captura, el evento desciende desde el elemento raíz hasta el elemento objetivo. Durante la fase de burbuja, el evento asciende desde el elemento objetivo hasta el elemento raíz. Puedes detener la propagación de un evento utilizando el método stopPropagation en el objeto del evento
button.addEventListener('click', function(event) {
event.stopPropagation();
console.log('Button clicked!');
});
JavaScript ofrece un objeto Date para trabajar con fechas y horas, permitiendo a los desarrolladores obtener, establecer y manipular información de tiempo y fecha.
El objeto Date en JavaScript es una clase que representa una única fecha y hora. Puedes crear una instancia de Date utilizando el constructor Date:
const now = new Date(); // Crea una instancia de Date con la fecha y hora actuales.
const specificDate = new Date('2023-03-25T00:00:00'); // Crea una instancia de Date con una fecha y hora específicas.
El objeto Date proporciona varios métodos para obtener y establecer componentes individuales de fecha y hora, como año, mes, día, hora, minuto, segundo y milisegundo:
const year = now.getFullYear();
const month = now.getMonth();
const day = now.getDate();
const hour = now.getHours();
const minute = now.getMinutes();
const second = now.getSeconds();
const millisecond = now.getMilliseconds();
La API Intl.DateTimeFormat es una clase incorporada en JavaScript que permite formatear fechas y horas de acuerdo con las convenciones locales y los formatos específicos de un idioma:
const formatter = new Intl.DateTimeFormat('es-ES', {
year: 'numeric',
month: 'long',
day: 'numeric',
});
const formattedDate = formatter.format(now);
console.log(formattedDate); // Ejemplo de salida: '25 de marzo de 2023'
La API Intl.RelativeTimeFormat es una clase incorporada en JavaScript que permite formatear las diferencias de tiempo en forma de texto relativo, como “hace 3 días” o “en 2 horas”:
const relativeFormatter = new Intl.RelativeTimeFormat('es', { numeric: 'auto' });
const daysDifference = -3;
console.log(relativeFormatter.format(daysDifference, 'day')); // Ejemplo de salida: 'hace 3 días'
Day.js es una biblioteca liviana y fácil de usar para manipular y formatear fechas y horas en JavaScript. Puedes utilizar Day.js para formatear fechas de manera similar a las soluciones nativas:
// Primero, instala Day.js mediante npm o yarn:
// npm install dayjs
// yarn add dayjs
// Importa Day.js en tu archivo JavaScript:
import dayjs from 'dayjs';
// Utiliza Day.js para formatear fechas:
const formattedDateWithDayjs = dayjs(now).format('MMMM D, YYYY');
console.log(formattedDateWithDayjs); // Ejemplo de salida: 'March 25, 2023'
Las expresiones regulares, también conocidas como regex o regexp, son patrones de búsqueda de texto que permiten encontrar coincidencias, reemplazar y manipular cadenas de caracteres en función de dichos patrones.
Una expresión regular es una secuencia de caracteres que define un patrón de búsqueda, utilizado principalmente para la búsqueda de patrones de cadenas de caracteres u operaciones de sustitución.
Las expresiones regulares en JavaScript pueden tener ciertas propiedades o banderas que modifican su comportamiento:
g: Global, busca todas las coincidencias en lugar de detenerse en la primera.i: Insensible a mayúsculas y minúsculas, trata las letras mayúsculas y minúsculas como iguales.m: Multilínea, permite que los caracteres ^ y $ coincidan con el inicio y el final de una línea, respectivamente, en lugar del inicio y el final de la cadena completa.s: Permite que el punto (.) coincida con caracteres de nueva línea.u: Trata la cadena como texto Unicode y permite el uso de escape Unicode.y: Modo “sticky”, busca coincidencias solo al principio o en la posición indicada.Puedes utilizar expresiones regulares en JavaScript con los métodos match, search, replace, split y test de los objetos String y RegExp. Por ejemplo:
const regex = /hola/gi;
const text = 'Hola, ¿cómo estás? Hola de nuevo.';
const matches = text.match(regex); // ['Hola', 'Hola']
const searchResult = text.search(regex); // 0 (índice de la primera coincidencia)
const replacedText = text.replace(regex, 'adiós'); // 'Adiós, ¿cómo estás? Adiós de nuevo.'
const splitText = text.split(regex); // ['', ', ¿cómo estás? ', ' de nuevo.']
const testResult = regex.test(text); // true (hay al menos una coincidencia)
Puedes crear expresiones regulares en JavaScript de dos maneras:
/patrón/flagsnew RegExp('patrón', 'flags')
const regexLiteral = /hola/gi;
const regexConstructor = new RegExp('hola', 'gi');
Las expresiones regulares utilizan caracteres especiales para definir patrones de búsqueda:
^: Coincide con el inicio de la cadena o línea.$: Coincide con el final de la cadena o línea..: Coincide con cualquier carácter, excepto los caracteres de nueva línea.*: Coincide con cero o más ocurrencias del carácter o patrón anterior.+: Coincide con una o más ocurrencias del carácter o patrón anterior.?: Coincide con cero o una ocurrencia del carácter o patrón anterior.{n}: Coincide exactamente con n ocurrencias del carácter o patrón anterior.{n,}: Coincide con al menos n ocurrencias del carácter o patrón anterior.{n,m}: Coincide con al menos n y como máximo m ocurrencias del carácter o patrón anterior.(x|y): Coincide con x o y.[xyz]: Coincide con cualquier carácter de los que aparecen dentro de los corchetes.[^xyz]: Coincide con cualquier carácter que NO esté dentro de los corchetes.\d: Coincide con un dígito decimal (0-9).\D: Coincide con cualquier carácter que no sea un dígito decimal.\w: Coincide con cualquier carácter alfanumérico o guion bajo.\W: Coincide con cualquier carácter que no sea alfanumérico o guion bajo.\s: Coincide con un carácter de espacio en blanco (espacio, tabulador, nueva línea, etc.).\S: Coincide con cualquier carácter que no sea un espacio en blanco.\b: Coincide con un límite de palabra (posición entre un carácter \w y un carácter \W).\B: Coincide con una posición que no sea un límite de palabra.x(?=y): Coincide con x solo si es seguido por y.x(?!y): Coincide con x solo si no es seguido por y.(?<=y)x: Coincide con x solo si es precedido por y.(?<!y)x: Coincide con x solo si no es precedido por y.La web moderna ofrece un conjunto de herramientas para trabajar con archivos multimedia como imágenes, audio y video. JavaScript proporciona APIs para interactuar con estos medios, permitiendo manipularlos y controlar su reproducción.
La API de audio en JavaScript, conocida como Web Audio API, proporciona un entorno de programación avanzado para trabajar con audio en aplicaciones web. Permite generar audio, analizarlo, crear visualizaciones de audio, aplicar efectos y mucho más. Aquí hay un ejemplo básico de cómo reproducir un archivo de audio:
const audio = new Audio('ruta/al/archivo/audio.mp3');
// Reproducir audio
audio.play();
// Pausar audio
audio.pause();
El elemento HTML <audio> y <video> se pueden utilizar para reproducir archivos multimedia. Puedes controlar la reproducción de estos elementos utilizando JavaScript. Aquí hay un ejemplo básico de cómo reproducir un archivo de video:
<video id="miVideo" width="320" height="240" controls>
<source src="ruta/al/archivo/video.mp4" type="video/mp4">
Tu navegador no soporta el elemento de video.
</video>
<script>
const video = document.getElementById('miVideo');
// Reproducir video
video.play();
// Pausar video
video.pause();
</script>
La asincronía en JavaScript permite ejecutar tareas sin bloquear la ejecución del resto del código, como solicitudes a un servidor, lectura de archivos, entre otros. Esto es crucial para evitar que las aplicaciones web se congelen mientras esperan la finalización de tareas que consumen tiempo.
Las funciones callback son funciones que se pasan como argumentos a otras funciones y se ejecutan después de que la función principal haya terminado. Estas se utilizan frecuentemente en JavaScript para manejar operaciones asíncronas.
function ejemploCallback(mensaje, callback) {
console.log(mensaje);
callback();
}
ejemploCallback('Mensaje 1', function() {
console.log('Mensaje 2 (callback)');
});
Las promesas son objetos que representan el resultado final de una operación asíncrona. Permiten manejar el flujo de control de forma más clara y legible en comparación con los callbacks. Una promesa tiene tres estados: pendiente, resuelta (cumplida) o rechazada.
const promesa = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Operación completada');
}, 1000);
});
promesa.then(resultado => {
console.log(resultado);
}).catch(error => {
console.error(error);
});
La API de promesas ofrece métodos como Promise.all(), Promise.race(), Promise.allSettled() y Promise.any() para trabajar con múltiples promesas simultáneamente.
const promesa1 = Promise.resolve('Promesa 1 completada');
const promesa2 = new Promise((resolve, reject) => setTimeout(resolve, 500, 'Promesa 2 completada'));
Promise.all([promesa1, promesa2]).then(resultados => {
console.log(resultados);
});
La sintaxis async/await permite escribir código asíncrono de manera más legible y fácil de entender, utilizando un estilo similar al código síncrono. Las funciones async siempre devuelven una promesa y las expresiones await detienen la ejecución de la función hasta que la promesa se resuelva.
async function ejemploAsync() {
const resultado = await new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Operación completada');
}, 1000);
});
console.log(resultado);
}
ejemploAsync();
Las peticiones HTTP permiten a las aplicaciones web comunicarse con servidores y APIs para intercambiar información. JavaScript ofrece varias herramientas para realizar peticiones HTTP, como AJAX, XMLHttpRequest y Fetch.
AJAX (Asynchronous JavaScript and XML) es una técnica que permite a las aplicaciones web cargar y procesar datos en segundo plano sin interrumpir la página actual. Aunque el nombre incluye “XML”, AJAX también puede trabajar con otros formatos de datos, como JSON.
XMLHttpRequest es una API de JavaScript que permite realizar peticiones HTTP asíncronas. Es la base de AJAX y ha sido la forma más común de realizar peticiones HTTP en JavaScript hasta la aparición de la API Fetch.
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
}
};
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();
La API Fetch proporciona una interfaz moderna y más fácil de usar para realizar peticiones HTTP. Fetch utiliza promesas, lo que permite un mejor manejo de errores y una estructura de código más limpia.
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
La API URL en JavaScript permite analizar y construir URLs. También se puede utilizar para modificar y construir parámetros de consulta para peticiones HTTP.
const url = new URL('https://api.example.com/data');
url.searchParams.append('param', 'value');
console.log(url.toString()); // https://api.example.com/data?param=value
La política de intercambio de recursos entre orígenes (CORS, Cross-Origin Resource Sharing) es una medida de seguridad implementada por los navegadores para prevenir solicitudes no autorizadas a recursos en servidores remotos. Para realizar peticiones HTTP a otros dominios, el servidor debe incluir encabezados específicos en la respuesta que permitan el acceso.
Hola, me llamo Joan Medina y soy full stack developer y trabajo como freelance desde hace 2011 para empresas de ámbito nacional e internacional. Tambien ayudo a nuevos emprendedores a realizar sus ideas con consejos, contenido y e-book de forma gratuita.
Spanish 
English