Introducción a JavaScript: Fundamentos, Funcionalidades y Buenas Prácticas

Aprende los fundamentos esenciales de JavaScript, el lenguaje de programación más popular en el desarrollo web. Esta guía cubre conceptos básicos, estructuras de control, operadores, objetos, DOM, eventos, asincronía, peticiones HTTP y más. Además, descubre buenas prácticas y herramientas para mejorar la calidad y eficiencia de tu código JavaScript.

Índice de contenidos

¿Qué es JavaScript?

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

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.

Ejemplo 1: Uso de “console.log()” y “console.error()”

				
					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

				
			

¿Cómo funciona JavaScript?

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.

Cargar un archivo JavaScript

Los archivos JavaScript pueden cargarse en una página HTML utilizando la etiqueta <script> con el atributo src que apunta al archivo JavaScript.

Conceptos básicos

Los conceptos básicos de JavaScript incluyen variables, operadores, estructuras de control de flujo, funciones y objetos.

Palabras comunes usadas en la programación

Algunas palabras comunes en la programación con JavaScript son: variable, función, objeto, array, bucle, condición, evento y error.

La especificación ECMAScript

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.

Normas y reglas de funcionamiento de JavaScript

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.

Ejemplo 1: Cargar un archivo JavaScript en HTML

				
					<!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">.woocommerce .blockUI.blockOverlay::before{--wpr-bg-1a0fe007-7d22-47d2-9766-49f8b9a23638: url('https://nelkodev.com/wp-content/plugins/woocommerce/assets/images/icons/loader.svg');}.woocommerce .loader::before{--wpr-bg-39df8518-8589-46e1-a398-1be8cd637800: url('https://nelkodev.com/wp-content/plugins/woocommerce/assets/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-296be8fc-4b22-460e-b399-6d4952b0a2c8: url('https://nelkodev.com/wp-content/plugins/woocommerce/assets/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-2e3f7805-09d2-4f65-b008-d39dc02f6aa1: url('https://nelkodev.com/wp-content/plugins/woocommerce/assets/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-0bde2739-8c27-4884-a689-ddbd7b0f5224: url('https://nelkodev.com/wp-content/plugins/woocommerce/assets/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-16a2e69e-efd9-400a-9688-264c8097ff00: url('https://nelkodev.com/wp-content/plugins/woocommerce/assets/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-5a8a1c1b-ec17-47a7-9161-bb560f287c85: url('https://nelkodev.com/wp-content/plugins/woocommerce/assets/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-0b4325e8-1906-4a3b-9aad-f6286b7a4a76: url('https://nelkodev.com/wp-content/plugins/woocommerce/assets/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-3569e75e-768d-45c4-ae7b-234255c6ee18: url('https://nelkodev.com/wp-content/plugins/woocommerce/assets/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-766d3a29-2ca2-4172-896a-5465ea76fff7: url('https://nelkodev.com/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/discover.svg');}.trp-language-switcher>div{--wpr-bg-7ac3a27e-af84-48f7-85b1-8e3c46a01f10: 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-e09709aa-6a34-44dd-9f55-f19147358689: 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-ff85f8df-0df7-4a3c-9440-c34caea27e67: url('https://nelkodev.com/wp-content/plugins/xt-woo-floating-cart/public/assets/img/close.svg');}.lSAction>a{--wpr-bg-59feda3b-653e-403f-b052-8587c1a258d6: 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-0e94d66a-29f9-4143-a64b-58544ef3abc6: 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-2135e3f0-8480-42cc-bb86-6eb07cfb0ea8: 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-ac6ca819-ac14-4258-97c6-ea0cc041c40e: url('https://nelkodev.com/wp-content/plugins/elementskit-lite/widgets/init/assets/img/arrow.png');}table.dataTable thead .sorting_asc{--wpr-bg-a2e387c6-6152-4086-84ab-463cc6f4158c: url('https://nelkodev.com/wp-content/plugins/elementskit-lite/widgets/init/assets/img/sort_asc.png');}table.dataTable thead .sorting_desc{--wpr-bg-bcf28550-2054-42d1-b34f-0bfdae3b1755: url('https://nelkodev.com/wp-content/plugins/elementskit-lite/widgets/init/assets/img/sort_desc.png');}table.dataTable thead .sorting_asc_disabled{--wpr-bg-9946f75c-a9e8-4e90-9459-679ba8761902: url('https://nelkodev.com/wp-content/plugins/elementskit-lite/widgets/init/assets/img/sort_asc_disabled.png');}.xt_woofc-trigger.xt_woofc-icontype-image .xt_woofc-trigger-cart-icon{--wpr-bg-4bac401f-eabc-4d4e-8fb3-9647a27032de: 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-9f9ff624-13eb-4aa9-aa40-1e508b790c6d: 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":".woocommerce .blockUI.blockOverlay","style":".woocommerce .blockUI.blockOverlay::before{--wpr-bg-1a0fe007-7d22-47d2-9766-49f8b9a23638: url('https:\/\/nelkodev.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/loader.svg');}","hash":"1a0fe007-7d22-47d2-9766-49f8b9a23638","url":"https:\/\/nelkodev.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/loader.svg"},{"selector":".woocommerce .loader","style":".woocommerce .loader::before{--wpr-bg-39df8518-8589-46e1-a398-1be8cd637800: url('https:\/\/nelkodev.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/loader.svg');}","hash":"39df8518-8589-46e1-a398-1be8cd637800","url":"https:\/\/nelkodev.com\/wp-content\/plugins\/woocommerce\/assets\/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-296be8fc-4b22-460e-b399-6d4952b0a2c8: url('https:\/\/nelkodev.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/visa.svg');}","hash":"296be8fc-4b22-460e-b399-6d4952b0a2c8","url":"https:\/\/nelkodev.com\/wp-content\/plugins\/woocommerce\/assets\/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-2e3f7805-09d2-4f65-b008-d39dc02f6aa1: url('https:\/\/nelkodev.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/mastercard.svg');}","hash":"2e3f7805-09d2-4f65-b008-d39dc02f6aa1","url":"https:\/\/nelkodev.com\/wp-content\/plugins\/woocommerce\/assets\/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-0bde2739-8c27-4884-a689-ddbd7b0f5224: url('https:\/\/nelkodev.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/laser.svg');}","hash":"0bde2739-8c27-4884-a689-ddbd7b0f5224","url":"https:\/\/nelkodev.com\/wp-content\/plugins\/woocommerce\/assets\/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-16a2e69e-efd9-400a-9688-264c8097ff00: url('https:\/\/nelkodev.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/diners.svg');}","hash":"16a2e69e-efd9-400a-9688-264c8097ff00","url":"https:\/\/nelkodev.com\/wp-content\/plugins\/woocommerce\/assets\/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-5a8a1c1b-ec17-47a7-9161-bb560f287c85: url('https:\/\/nelkodev.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/maestro.svg');}","hash":"5a8a1c1b-ec17-47a7-9161-bb560f287c85","url":"https:\/\/nelkodev.com\/wp-content\/plugins\/woocommerce\/assets\/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-0b4325e8-1906-4a3b-9aad-f6286b7a4a76: url('https:\/\/nelkodev.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/jcb.svg');}","hash":"0b4325e8-1906-4a3b-9aad-f6286b7a4a76","url":"https:\/\/nelkodev.com\/wp-content\/plugins\/woocommerce\/assets\/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-3569e75e-768d-45c4-ae7b-234255c6ee18: url('https:\/\/nelkodev.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/amex.svg');}","hash":"3569e75e-768d-45c4-ae7b-234255c6ee18","url":"https:\/\/nelkodev.com\/wp-content\/plugins\/woocommerce\/assets\/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-766d3a29-2ca2-4172-896a-5465ea76fff7: url('https:\/\/nelkodev.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/discover.svg');}","hash":"766d3a29-2ca2-4172-896a-5465ea76fff7","url":"https:\/\/nelkodev.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/discover.svg"},{"selector":".trp-language-switcher>div","style":".trp-language-switcher>div{--wpr-bg-7ac3a27e-af84-48f7-85b1-8e3c46a01f10: url('https:\/\/nelkodev.com\/wp-content\/plugins\/translatepress-multilingual\/assets\/images\/arrow-down-3101.svg');}","hash":"7ac3a27e-af84-48f7-85b1-8e3c46a01f10","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-e09709aa-6a34-44dd-9f55-f19147358689: url('https:\/\/nelkodev.com\/wp-content\/plugins\/xt-woo-floating-cart\/public\/assets\/img\/open.svg');}","hash":"e09709aa-6a34-44dd-9f55-f19147358689","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-ff85f8df-0df7-4a3c-9440-c34caea27e67: url('https:\/\/nelkodev.com\/wp-content\/plugins\/xt-woo-floating-cart\/public\/assets\/img\/close.svg');}","hash":"ff85f8df-0df7-4a3c-9440-c34caea27e67","url":"https:\/\/nelkodev.com\/wp-content\/plugins\/xt-woo-floating-cart\/public\/assets\/img\/close.svg"},{"selector":".lSAction>a","style":".lSAction>a{--wpr-bg-59feda3b-653e-403f-b052-8587c1a258d6: url('https:\/\/nelkodev.com\/wp-content\/plugins\/xt-woo-floating-cart\/public\/assets\/vendors\/lightslider\/img\/controls.png');}","hash":"59feda3b-653e-403f-b052-8587c1a258d6","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-0e94d66a-29f9-4143-a64b-58544ef3abc6: 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":"0e94d66a-29f9-4143-a64b-58544ef3abc6","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-2135e3f0-8480-42cc-bb86-6eb07cfb0ea8: 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":"2135e3f0-8480-42cc-bb86-6eb07cfb0ea8","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-ac6ca819-ac14-4258-97c6-ea0cc041c40e: url('https:\/\/nelkodev.com\/wp-content\/plugins\/elementskit-lite\/widgets\/init\/assets\/img\/arrow.png');}","hash":"ac6ca819-ac14-4258-97c6-ea0cc041c40e","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-a2e387c6-6152-4086-84ab-463cc6f4158c: url('https:\/\/nelkodev.com\/wp-content\/plugins\/elementskit-lite\/widgets\/init\/assets\/img\/sort_asc.png');}","hash":"a2e387c6-6152-4086-84ab-463cc6f4158c","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-bcf28550-2054-42d1-b34f-0bfdae3b1755: url('https:\/\/nelkodev.com\/wp-content\/plugins\/elementskit-lite\/widgets\/init\/assets\/img\/sort_desc.png');}","hash":"bcf28550-2054-42d1-b34f-0bfdae3b1755","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-9946f75c-a9e8-4e90-9459-679ba8761902: url('https:\/\/nelkodev.com\/wp-content\/plugins\/elementskit-lite\/widgets\/init\/assets\/img\/sort_asc_disabled.png');}","hash":"9946f75c-a9e8-4e90-9459-679ba8761902","url":"https:\/\/nelkodev.com\/wp-content\/plugins\/elementskit-lite\/widgets\/init\/assets\/img\/sort_asc_disabled.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-4bac401f-eabc-4d4e-8fb3-9647a27032de: url('https:\/\/nelkodev.com\/wp-content\/plugins\/xt-woo-floating-cart\/public\/assets\/img\/open.svg');}","hash":"4bac401f-eabc-4d4e-8fb3-9647a27032de","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-9f9ff624-13eb-4aa9-aa40-1e508b790c6d: url('https:\/\/nelkodev.com\/wp-content\/plugins\/xt-woo-floating-cart\/public\/assets\/img\/close.svg');}","hash":"9f9ff624-13eb-4aa9-aa40-1e508b790c6d","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>

				
			

Comentarios de código

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.

Indicaciones y ayuda extra para nuestro código

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 (/).

Ejemplo 1: Comentarios de una línea y de varias líneas en JavaScript

				
					// 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

				
			

Estructuras de control

Las estructuras de control en JavaScript permiten controlar el flujo de ejecución del código y tomar decisiones según las condiciones establecidas.

Controlar nuestro código JavaScript

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.

Bucles e iteraciones

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.

Simplificando tareas repetitivas en JavaScript

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.

Ejemplo 1: Estructuras de control en JavaScript

				
					// 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);

				
			

Operadores básicos y avanzados

Los operadores en JavaScript permiten realizar diversas operaciones con valores y variables, como asignaciones, comparaciones y cálculos matemáticos.

Operadores básicos en JavaScript

Los operadores básicos en JavaScript incluyen operadores aritméticos, de asignación y de comparación. Algunos ejemplos son:

  • Aritméticos: +, -, *, /, %
  • Asignación: =, +=, -=, *=, /=, %=
  • Comparación: ==, ===, !=, !==, <, >, <=, >=

Operadores avanzados en JavaScript

Los operadores avanzados en JavaScript incluyen operadores lógicos, ternarios y de tipo. Algunos ejemplos son:

  • Lógicos: && (AND), || (OR), ! (NOT)
  • Ternario: ? :
  • Tipo: typeof, instanceof

Ejemplo 1: Uso de operadores básicos y avanzados en JavaScript

				
					// 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

				
			

Indentación de código y convenciones de nombres

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.

Introducción a la legibilidad en JavaScript

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.

Bases para elegir nombres

Al elegir nombres para variables, funciones y objetos en JavaScript, es importante seguir ciertas convenciones y prácticas recomendadas:

  1. Utilizar nombres descriptivos y significativos que indiquen claramente el propósito de la variable, función u objeto.
  2. Utilizar la notación camelCase para variables y funciones, donde la primera letra de cada palabra, excepto la primera, se escribe en mayúsculas. Ejemplo: miVariable.
  3. Utilizar la notación PascalCase para nombres de clases y constructores, donde la primera letra de cada palabra se escribe en mayúsculas. Ejemplo: MiClase.
  4. Utilizar nombres en mayúsculas con guiones bajos para constantes. Ejemplo: MI_CONSTANTE.
  5. Evitar el uso de nombres de una sola letra, a menos que sean variables de iteración en bucles, como i, j o k.
  6. No utilizar nombres reservados por JavaScript, como function, var, let, const, entre otros.

Ejemplo 1: Uso de indentación y convenciones de nombres en JavaScript

				
					// 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");
    }
}

				
			

Fundamentos de JavaScript

Los fundamentos de JavaScript incluyen aspectos básicos del lenguaje, como tipos de datos, variables y constantes, y funciones básicas.

Tipos de datos JavaScript tiene varios tipos de datos, como:

  • String: cadenas de texto, representadas entre comillas simples o dobles ('Hola' o "Hola").
  • Number: números enteros y decimales (ejemplo: 42, 3.14).
  • Boolean: valores de verdad, representados por true o false.
  • Null: representa un valor nulo o “sin valor”.
  • Undefined: indica que una variable no ha sido asignada a ningún valor.
  • Object: objetos y colecciones de datos como arrays y funciones.

Variables y constantes

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.

Funciones básicas

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.

Introducción a las funciones en JavaScript

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.

Ejemplo 1: Fundamentos de JavaScript

				
					// 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!"

				
			

Number, BigInt y conversiones numéricas

JavaScript ofrece tipos de datos numéricos como Number y BigInt, junto con herramientas para realizar operaciones matemáticas y conversiones numéricas.

¿Qué es un Number?

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.

¿Qué es NaN (Not A Number)?

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.

El objeto Math

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.

Operaciones matemáticas

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.

El tipo BigInt

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.

Conversiones numéricas

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 *.

Ejemplo 1: Number, BigInt y conversiones numéricas en JavaScript

				
					// 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

				
			

Strings

Los strings en JavaScript son secuencias de caracteres que representan texto. Pueden ser manipulados y modificados mediante una variedad de métodos y propiedades.

¿Qué es un String?

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`).

Posiciones y substrings

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().

Buscar y reemplazar

Los strings en JavaScript ofrecen métodos para buscar y reemplazar contenido, como indexOf(), lastIndexOf(), includes(), startsWith(), endsWith(), replace() y replaceAll().

Modificar cadenas de texto

Se pueden realizar modificaciones y transformaciones en los strings utilizando métodos como concat(), toUpperCase(), toLowerCase(), trim(), padStart() y padEnd().

Contenido de texto

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().

Ejemplo 1: Strings en JavaScript

				
					// 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

				
			

Objetos y Arrays

JavaScript ofrece estructuras de datos como objetos y arrays para almacenar y organizar información de manera estructurada y fácilmente accesible.

¿Qué son los objetos?

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.

Estructuras de datos tipo diccionario

Los objetos en JavaScript pueden actuar como diccionarios, donde cada clave es única y se asocia a un valor específico.

Formato JSON

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().

Desestructuración de objetos

La desestructuración de objetos permite extraer propiedades de un objeto y asignarlas a variables individuales de manera más concisa.

Iteradores de objetos

Se pueden iterar las propiedades de un objeto utilizando bucles for...in o métodos como Object.keys(), Object.values() y Object.entries().

¿Qué es un Array en JavaScript?

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).

Buscar elementos en un array

Se pueden buscar elementos en un array utilizando métodos como indexOf(), lastIndexOf(), includes(), find() y findIndex().

Modificar o crear subarrays

Los arrays pueden ser modificados o se pueden crear subarrays utilizando métodos como push(), pop(), shift(), unshift(), splice(), slice() y concat().

Ordenación de un array

Los arrays pueden ordenarse utilizando el método sort(), que acepta una función de comparación opcional para personalizar el ordenamiento.

Array functions

Los arrays en JavaScript ofrecen funciones de alto orden como map(), filter(), reduce(), forEach() y some() para transformar, filtrar y procesar sus elementos.

Desestructuración de arrays

La desestructuración de arrays permite extraer elementos de un array y asignarlos a variables individuales de manera más concisa.

Ejemplo 1: Objetos y arrays en JavaScript

				
					// 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;

				
			

Ejemplo 2: Uso de JSON, iteradores de objetos y funciones de array

				
					// 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

				
			

Set / Map

JavaScript ofrece estructuras de datos adicionales como Set y Map para almacenar y organizar información de manera eficiente y fácil de usar.

¿Qué es un Set?

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.

Operaciones de conjuntos

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().

¿Qué es un Map?

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().

Mapa: Estructura de datos de pares clave-valor

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().

Ejemplo 1: Uso de Set y Map en JavaScript

				
					// 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

				
			

Calidad de código

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: Linter 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.

Revisión de errores o problemas

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.

Ejemplo 1: Configuración de ESLint en un proyecto de JavaScript

  1. Instalar ESLint globalmente o como una dependencia de desarrollo en el proyecto:
				
					npm install -g eslint

				
			

o

				
					npm install --save-dev eslint

				
			
  1. Inicializar la configuración de ESLint en el proyecto ejecutando el siguiente comando y siguiendo las instrucciones:
				
					eslint --init

				
			
  1. Crear un archivo de configuración .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"]
  }
}

				
			
  1. Ejecutar ESLint en los archivos de JavaScript del proyecto:
				
					eslint yourfile.js

				
			
  1. Para corregir automáticamente algunos problemas, ejecutar:
				
					eslint --fix yourfile.js

				
			

Módulos

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.

¿Qué son los módulos (ESM)?

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.

Exportar módulos

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:

  • Exportación nombrada: Permite exportar múltiples elementos desde un módulo y debe ser importada usando el mismo nombre.
				
					// myModule.js
export const myFunction = () => {...};
export const myVariable = 42;

				
			
  • Exportación predeterminada: Solo puede haber una exportación predeterminada por módulo, y se puede importar con cualquier nombre.
				
					// defaultModule.js
export default function() {...};

				
			

Importar módulos

Para utilizar las funciones, variables, objetos o clases exportadas desde otros módulos, se deben importar utilizando la palabra clave import:

  • Importación nombrada: Importa elementos exportados con nombres específicos.
				
					// main.js
import { myFunction, myVariable } from './myModule.js';

				
			
  • Importación predeterminada: Importa el elemento exportado por defecto de un módulo.
				
					// main.js
import myDefaultFunction from './defaultModule.js';

				
			

Import dinámico en JavaScript

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();

				
			

Orientación a objetos (OOP)

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.

¿Qué es la orientación a objetos?

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.

Clases en Javascript

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!'

				
			

Propiedades de clase

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;
  }
}

				
			

Métodos de clase

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}`;
  }
}

				
			

Herencia de Clases

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`;
  }
}

				
			

DOM

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.

¿Qué es el DOM?

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.

Seleccionar elementos del DOM

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');

				
			

Crear elementos en el DOM

Puedes crear nuevos elementos del DOM utilizando el método createElement:

				
					const newElement = document.createElement('div');

				
			

Insertar elementos en el DOM

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 de Javascript

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'.

				
			

Navegar por elementos del DOM

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;

				
			

Eventos

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.

¿Qué son los eventos?

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.

Eventos mediante HTML

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>

				
			

Eventos mediante Javascript

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

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!');
});

				
			

Escuchar eventos y handleEvent

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);

				
			

Eventos nativos

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.

Eventos personalizados

Puedes crear y emitir tus propios eventos personalizados utilizando la clase CustomEvent:

				
					const customEvent = new CustomEvent('myEvent', { detail: { message: 'Hello, world!' } });
element.dispatchEvent(customEvent);

				
			

Eventos del navegador

Los eventos del navegador son eventos globales que ocurren en el objeto window, como “resize”, “scroll” y “beforeunload”.

Emisión de eventos

Para emitir un evento, utiliza el método dispatchEvent en el elemento del DOM al que deseas asociar el evento:

				
					element.dispatchEvent(customEvent);

				
			

Propagación de eventos

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!');
});

				
			

Fechas y horas

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 tipo Date

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();

				
			

Formatear fechas con Intl

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'

				
			

Formatear fechas relativas con Intl

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'

				
			

Formatear fechas con dayjs

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'

				
			

Expresiones regulares

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.

¿Qué es una expresión regular?

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.

Propiedades y flags

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.

Buscar y capturar textos

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)

				
			

Cómo crear expresiones regulares

Puedes crear expresiones regulares en JavaScript de dos maneras:

  • Notación literal: /patrón/flags
  • Constructor de RegExp: new RegExp('patrón', 'flags')
				
					const regexLiteral = /hola/gi;
const regexConstructor = new RegExp('hola', 'gi');

				
			

Caracteres especiales dentro de las expresiones regulares

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.

Multimedia

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.

API de Audio Javascript

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();

				
			

API multimedia para reproducir audio o video

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>

				
			

Asincronía

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.

Funciones callbacks

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)');
});

				
			

¿Qué son las promesas?

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);
});

				
			

Promesas en grupo (Promise API)

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);
});

				
			

Async/Await

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();

				
			

Peticiones HTTP

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: Peticiones HTTP

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.

XHR: XMLHttpRequest

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();

				
			

Fetch: Peticiones Asíncronas

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));

				
			

URL en Javascript

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

				
			

Política CORS

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.

es_ESSpanish