From 5da1f00b474e18811deb8e9b9d12dc9fe1c4501a Mon Sep 17 00:00:00 2001 From: "Juan F. Ruiz" Date: Mon, 2 Sep 2024 15:12:46 +0200 Subject: [PATCH 1/7] Corregido SUMMARY.md con las nuevas paginas. Generadas nueva seccion y nuevas paginas de la version en ingles. Terminadas traducciones (o revisadas) de: - Dedicatoria. - Derechos de autor - Prefacio - Introduccion (Capitulo 1) - Lo esencial (Capitulo 2) - Numeros (Capitulo 3) - Cadenas (Capitulo 4) - Logica condicional (Capitulo 5) - Matrices (Capitulo 6) - Bucles (Capiutlo 7) --- es/Copyright.md | 2 +- es/Credits.md | 2 +- es/Preface.md | 2 + es/README.md | 10 +- es/SUMMARY.md | 30 ++- es/animation-resources/README.md | 50 ++++ es/animation-resources/animejs.md | 106 ++++++++ es/animation-resources/framer-motion.md | 109 ++++++++ es/animation-resources/gsap.md | 79 ++++++ es/animation-resources/react-spring.md | 103 ++++++++ es/animation-resources/threejs.md | 103 ++++++++ es/animation-resources/velocityjs.md | 82 ++++++ es/arrays/README.md | 55 ++-- es/arrays/indices.md | 2 +- es/arrays/shift.md | 2 +- es/arrays/slice.md | 7 +- es/basics/README.md | 7 + es/behind-scenes/README.md | 47 ++++ es/behind-scenes/call-stack.md | 75 ++++++ es/behind-scenes/engine.md | 92 +++++++ es/behind-scenes/event-loop.md | 132 ++++++++++ es/behind-scenes/execution-context.md | 127 +++++++++ es/behind-scenes/memory-heap.md | 86 +++++++ es/behind-scenes/runtime-environment.md | 112 ++++++++ es/book.json | 111 -------- es/conditional/README.md | 10 +- es/conditional/comparators.md | 8 +- es/conditional/concatenate.md | 2 +- es/conditional/else.md | 2 +- es/conditional/if.md | 89 ++++++- es/conditional/switch.md | 2 +- es/date-and-time.md | 2 +- es/events.md | 2 +- es/functions/SUMMARY.md | 153 +++++++++++ es/functions/closures.md | 63 +++++ es/functions/getters-setters.md | 105 ++++++++ es/functions/hoisting.md | 64 +++++ es/functions/recursive-functions.md | 58 +++++ es/functions/rest-operator.md | 75 ++++++ es/functions/set-interval.md | 57 ++++ es/functions/set-timeout.md | 37 +++ es/functions/this-keyword.md | 124 +++++++++ es/json.md | 14 +- es/loops/README.md | 10 +- es/loops/break.md | 56 ++++ es/loops/continue.md | 22 ++ es/loops/for.md | 155 +++++++++-- es/modules.md | 8 +- es/numbers/README.md | 6 + es/numbers/advanced.md | 2 +- es/numbers/math.md | 2 +- es/numbers/operators.md | 329 ++++++++++++++++++++++-- es/objects/SUMMARY.md | 153 +++++++++++ es/objects/constructor-functions.md | 95 +++++++ es/objects/constructor-property.md | 67 +++++ es/objects/dynamic-nature.md | 117 +++++++++ es/objects/factory-functions.md | 106 ++++++++ es/regular-expression.md | 168 +++++++++++- es/strings/README.md | 14 +- es/strings/charAt.md | 7 +- es/strings/split.md | 4 +- es/strings/substring.md | 14 +- 62 files changed, 3504 insertions(+), 231 deletions(-) create mode 100644 es/animation-resources/README.md create mode 100644 es/animation-resources/animejs.md create mode 100644 es/animation-resources/framer-motion.md create mode 100644 es/animation-resources/gsap.md create mode 100644 es/animation-resources/react-spring.md create mode 100644 es/animation-resources/threejs.md create mode 100644 es/animation-resources/velocityjs.md create mode 100644 es/behind-scenes/README.md create mode 100644 es/behind-scenes/call-stack.md create mode 100644 es/behind-scenes/engine.md create mode 100644 es/behind-scenes/event-loop.md create mode 100644 es/behind-scenes/execution-context.md create mode 100644 es/behind-scenes/memory-heap.md create mode 100644 es/behind-scenes/runtime-environment.md delete mode 100644 es/book.json create mode 100644 es/functions/SUMMARY.md create mode 100644 es/functions/closures.md create mode 100644 es/functions/getters-setters.md create mode 100644 es/functions/hoisting.md create mode 100644 es/functions/recursive-functions.md create mode 100644 es/functions/rest-operator.md create mode 100644 es/functions/set-interval.md create mode 100644 es/functions/set-timeout.md create mode 100644 es/functions/this-keyword.md create mode 100644 es/loops/break.md create mode 100644 es/loops/continue.md create mode 100644 es/objects/SUMMARY.md create mode 100644 es/objects/constructor-functions.md create mode 100644 es/objects/constructor-property.md create mode 100644 es/objects/dynamic-nature.md create mode 100644 es/objects/factory-functions.md diff --git a/es/Copyright.md b/es/Copyright.md index 76b91758..d601fa8d 100644 --- a/es/Copyright.md +++ b/es/Copyright.md @@ -19,7 +19,7 @@ chapter:
-Aprenda JavaScript: Edición para principiantes +**Aprenda JavaScript: Edición para principiantes** Primera Edición Copyright © 2023 por Suman Kunwar diff --git a/es/Credits.md b/es/Credits.md index 7b44b188..f98deedf 100644 --- a/es/Credits.md +++ b/es/Credits.md @@ -11,7 +11,7 @@ chapter: - Profile Picture + Fotografía del perfil
Suman Kunwar diff --git a/es/Preface.md b/es/Preface.md index 7a6cacc6..6d44c52c 100644 --- a/es/Preface.md +++ b/es/Preface.md @@ -12,4 +12,6 @@ Una característica destacada de "Aprender JavaScript" es su enfoque práctico. Ideas complejas como cierres (closures en inglés) y programación asincrónica se desmitifican mediante explicaciones intuitivas y ejemplos prácticos. El énfasis en la claridad y la simplicidad permite a los estudiantes de todos los niveles captar y retener los conceptos clave de manera efectiva. El libro está estructurado en tres partes, y los primeros 14 capítulos profundizan en los conceptos centrales. Los cuatro capítulos siguientes profundizan en la utilización de JavaScript para la programación de navegadores web, mientras que los dos últimos capítulos cubren diversos temas y ofrecen ejercicios. La sección Varios explora temas y escenarios importantes relacionados con la programación JavaScript, seguidos de ejercicios para practicar. +El curso cubre temas adicionales como preguntas de entrevistas, patrones de diseño, conceptos de sistemas de archivos y ES6 para brindar una comprensión integral del lenguaje. El enfoque está en escribir código eficiente y fácil de mantener, lo cual es valioso para quienes buscan empleo y para proyectos personales. + En conclusión, "Aprende JavaScript: Edición para principiantes" es una compañía esencial para quienes buscan dominar JavaScript y sobresalir en el desarrollo web. Con su cobertura integral, enfoque práctico, explicaciones claras, enfoque en aplicaciones del mundo real y compromiso con el aprendizaje continuo, este libro constituye un recurso valioso. Al sumergirse en su contenido, los lectores obtendrán las habilidades y el conocimiento necesarios para crear aplicaciones web dinámicas e interactivas, liberando todo su potencial como desarrolladores de JavaScript. diff --git a/es/README.md b/es/README.md index 036a4744..d08470d0 100644 --- a/es/README.md +++ b/es/README.md @@ -1,6 +1,6 @@ --- chapter: 1 -pageNumber: 7 +pageNumber: 9 description: JavaScript es un lenguaje de programación de alto nivel, interpretado y de tipo dinámico que se utiliza principalmente para el desarrollo web. Es una de las tecnologías centrales utilizadas para crear sitios web y aplicaciones web interactivos y dinámicos. --- # Capítulo 1 @@ -22,20 +22,18 @@ JavaScript (_JS para abreviar_) es el lenguaje de programación que se usa para Inicialmente, fue creado para dar vida a las páginas web y solo podía ejecutarse en un navegador. Ahora se ejecuta en cualquier dispositivo que admita el motor JavaScript. Los objetos estándar como [Array](./arrays/README.md), [Date](./date-and-time.md) y [Math](./numbers/math.md) están disponibles en JavaScript, así como operadores, estructuras de control y declaraciones. _JavaScript del lado del cliente_ y _JavaScript del lado del servidor_ son las versiones extendidas del JavaScript principal. * _JavaScript del lado del cliente_ permite la mejora y manipulación de páginas web y navegadores de clientes. Las respuestas a eventos del usuario, como clics del mouse, entrada de formularios y navegación de páginas, son algunos de sus ejemplos. -* _JavaScript del lado del servidor_ permite el acceso a servidores, bases de datos y sistemas de archivos. +* [_JavaScript del lado del servidor_](./server-side/README.md) permite el acceso a servidores, bases de datos y sistemas de archivos. -JavaScript es un lenguaje interpretado. Mientras ejecuta Javascript, un intérprete interpreta cada línea y la ejecuta. El navegador moderno utiliza la tecnología Just In Time (JIT) para la compilación, que compila JavaScript en un código de bytes ejecutable. +JavaScript es un lenguaje interpretado. Mientras ejecuta Javascript, un intérprete interpreta cada línea y la ejecuta. El navegador moderno utiliza la tecnología [Just In Time (JIT)](https://hacks.mozilla.org/2017/02/a-crash-course-in-just-in-time-jit-compilers/) para la compilación, que compila JavaScript en un código de bytes ejecutable. {% hint style="info" %} "LiveScript" fue el nombre inicial dado a JavaScript. {% endhint %} -### Código y qué hacer con él +### Código y qué hacer con él y Convenciones tipográficas _Código_ son las instrucciones escritas que componen un programa. Aquí, muchos capítulos contienen mucho código y es importante leer y escribir código como parte del aprendizaje de programación. No se limite a leer rápidamente los ejemplos: léalos atentamente y trate de comprenderlos. Esto puede resultar difícil al principio, pero con la práctica mejorará. Lo mismo ocurre con los ejercicios: asegúrese de intentar escribir una solución antes de asumir que los comprende. También es útil intentar ejecutar las soluciones de los ejercicios en un intérprete de JavaScript, ya que esto le permitirá ver si su código funciona correctamente y puede animarlo a experimentar e ir más allá de los ejercicios. -### Convenciones tipográficas - Aquí, el texto escrito en una fuente monoespaciada representa elementos de un programa. Puede ser un fragmento autónomo o una referencia a parte de un programa cercano. Los programas, como el que se muestra a continuación, se escriben de esta manera: ```javascript diff --git a/es/SUMMARY.md b/es/SUMMARY.md index 423df2fd..32d8ca94 100644 --- a/es/SUMMARY.md +++ b/es/SUMMARY.md @@ -45,8 +45,18 @@ - [For](loops/for.md) - [While](loops/while.md) - [Do...While](loops/dowhile.md) + - [Continue](loops/continue.md) + - [Break](loops/break.md) - [Funciones](functions/README.md) - [Funciones de orden superior](functions/higher-order.md) + - [Funciones recursivas](functions/recursive-functions.md) + - [Cierres](functions/closures.md) + - [Set Interval](functions/set-interval.md) + - [Set Timeout](functions/set-timeout.md) + - [Operador de resto](functions/rest-operator.md) + - [Palabra clave this](functions/this-keyword.md) + - [Elevación (Hoisting)](functions/hoisting.md) + - [Captadores y definidores (Getters and Setters)](functions/getters-setters.md) - [Objetos](objects/README.md) - [Propiedades](objects/properties.md) - [Mutable](objects/mutable.md) @@ -54,6 +64,10 @@ - [Prototype](objects/prototype.md) - [Operador Delete](objects/delete.md) - [Enumeración](objects/enumeration.md) + - [Funciones factoría](objects/factory-functions.md) + - [Funciones Constructor](objects/constructor-functions.md) + - [Propiedad Constructor](objects/constructor-property.md) + - [Naturaleza dinámica](objects/dynamic-nature.md) - [Fecha y hora](date-and-time.md) - [JSON](json.md) - [Manejo de errores](error-handling/README.md) @@ -79,7 +93,7 @@ - [Async/Await](promise-async-await/async-await.md) - [Misceláneas](miscellaneous/README.md) - [Literales de plantilla](miscellaneous/template-literals.md) - - [Hoisting (Alzado)](miscellaneous/hoisting.md) + - [Hoisting (Elevación)](miscellaneous/hoisting.md) - [Currying](miscellaneous/currying.md) - [Polyfills y transpiladores](miscellaneous/polyfills-and-transpilers.md) - [Lista enlazada](miscellaneous/linked-list.md) @@ -120,6 +134,20 @@ - [Funciones flecha](es6-concepts/arrow-functions.md) - [Desestructurando](es6-concepts/destructuring.md) - [Literales de plantilla](es6-concepts/template-literals.md) +- [Recursos de animación](animation-resources/README.md) + - [GSAP](animation-resources/gsap.md) + - [Anime JS](animation-resources/animejs.md) + - [Three JS](animation-resources/threejs.md) + - [Velocity JS](animation-resources/velocityjs.md) + - [React Spring](animation-resources/react-spring.md) + - [Framer Motion](animation-resources/framer-motion.md) +- [JavaScript detrás de escena](behind-scenes/README.md) + - [Pila de llamadas](behind-scenes/call-stack.md) + - [Motor](behind-scenes/engine.md) + - [Bucle de eventos](behind-scenes/event-loop.md) + - [Contexto de ejecución](behind-scenes/execution-context.md) + - [Montón de memoria](behind-scenes/memory-heap.md) + - [Entorno de ejecución](behind-scenes/runtime-environment.md) - [Referencias](References.md) - [Recursos](resources.md) - [Créditos](Credits.md) diff --git a/es/animation-resources/README.md b/es/animation-resources/README.md new file mode 100644 index 00000000..e4e9fa32 --- /dev/null +++ b/es/animation-resources/README.md @@ -0,0 +1,50 @@ +--- +layout: editorial +chapter: 26 +pageNumber: 252 +description: JavaScript animation resources, including libraries, tutorials, articles, and frameworks to create engaging animations. +--- + +# Chapter 26 +# Animation Resources + +Animations in JavaScript are a powerful way to create engaging user experiences on the web. This chapter will cover various resources, including libraries, tutorials, articles, and frameworks, that assist developers in creating animations using JavaScript. + +## Introduction to JavaScript Animations + +JavaScript animations allow developers to create dynamic, visually appealing web content. Animations can be used for various purposes, such as enhancing user interfaces, providing feedback, and making content more engaging. + +### Libraries + +JavaScript animation libraries make it easier to create complex animations. Here are some popular libraries: + +1. **[GSAP (GreenSock Animation Platform)](https://greensock.com/gsap/)**: A powerful library for creating high-performance animations. +2. **[Anime.js](https://animejs.com/)**: A lightweight library for handling animations. +3. **[Three.js](https://threejs.org/)**: A library for creating 3D animations. +4. **[Velocity.js](http://velocityjs.org/)**: A fast animation engine. + +### Tutorials + +To get started with JavaScript animations, check out these tutorials: + +1. **[MDN Web Docs: Using CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)**: A comprehensive guide on CSS animations. +2. **[JavaScript.info: JavaScript Animations](https://javascript.info/js-animation/)**: An introduction to JavaScript animations. +3. **[GreenSock Learning Resources](https://greensock.com/learning/)**: Tutorials and resources for learning GSAP. + +### Frameworks + +Frameworks provide a structured approach to building animations. Some popular frameworks include: + +1. **[React Spring](https://react-spring.io/)**: A spring-physics based animation library for React. +2. **[Framer Motion](https://www.framer.com/motion/)**: A production-ready motion library for React. + +In this chapter, we will explore the following topics in detail: + +* [Getting Started with GSAP](./gsap.md) +* [Creating Animations with Anime.js](./animejs.md) +* [3D Animations with Three.js](./threejs.md) +* [Fast Animations with Velocity.js](./velocityjs.md) +* [Using React Spring for Animations](./react-spring.md) +* [Animating with Framer Motion](./framer-motion.md) + +Let's dive into each topic to understand how to use these resources effectively. \ No newline at end of file diff --git a/es/animation-resources/animejs.md b/es/animation-resources/animejs.md new file mode 100644 index 00000000..aadc814d --- /dev/null +++ b/es/animation-resources/animejs.md @@ -0,0 +1,106 @@ +--- +chapter: 26 +pageNumber: 254 +description: Creating animations with Anime.js, a lightweight JavaScript animation library. +--- + +## Creating Animations with Anime.js + +Anime.js is a lightweight JavaScript animation library with a simple yet powerful API. + +**Installation** + +You can include Anime.js in your project using npm: + +```bash +npm install animejs +``` + +Or you can use a CDN: + +```html + +``` + +**Basic Animation** + +Here's a simple example of using Anime.js to animate an element: + +```html + + + + + + Anime.js Animation + + +
+ + + + +``` + +**Advanced Animation** + +Anime.js provides various features for advanced animations, such as keyframes, timeline, and easing. + + +- **Keyframes:** +Keyframes allow you to define multiple stages of an animation. Here's an example: + +```javascript +anime({ + targets: '#box', + keyframes: [ + {translateX: 100}, + {translateY: 100}, + {translateX: 0}, + {translateY: 0} + ], + duration: 4000 +}); +``` + + +- **Timeline:** +Timelines allow you to sequence animations. Here's an example: + +```javascript +var tl = anime.timeline({ + easing: 'easeOutExpo', + duration: 750 +}); + +tl.add({ + targets: '#box', + translateX: 250 +}).add({ + targets: '#box', + translateY: 250 +}, '-=500'); // Starts 500ms before the previous animation ends +``` + + +- **Easing:** +Anime.js provides a variety of easing options to make animations look more natural. Here's an example: + +```javascript +anime({ + targets: '#box', + translateX: 250, + duration: 1000, + easing: 'easeInOutQuad' +}); +``` + +{% hint style="info" %} +For more details and examples, check out the Anime.js documentation. +{% endhint %} \ No newline at end of file diff --git a/es/animation-resources/framer-motion.md b/es/animation-resources/framer-motion.md new file mode 100644 index 00000000..55386a00 --- /dev/null +++ b/es/animation-resources/framer-motion.md @@ -0,0 +1,109 @@ +--- +chapter: 26 +pageNumber: 255 +description: Using Framer Motion for animations in React applications. +--- + +## Animating with Framer Motion + +Framer Motion is a production-ready motion library for React. It makes it easy to create complex animations. + +**Installation** + +You can include Framer Motion in your project using npm: + +```bash +npm install framer-motion +``` + +**Basic Animation** + +Here's a simple example of using Framer Motion to animate a component: + +```javascript +import React from 'react'; +import { motion } from 'framer-motion'; + +const AnimatedComponent = () => { + return ( + + I will move to the right + + ); +}; + +export default AnimatedComponent; +``` + +**Advanced Animation** + +Framer Motion provides various features for advanced animations, such as keyframes, gestures, and layout animations. + + +- **Keyframes:** +Keyframes allow you to define multiple stages of an animation. Here's an example: + +```javascript +import React from 'react'; +import { motion } from 'framer-motion'; + +const KeyframeComponent = () => { + return ( + + I will move back and forth + + ); +}; + +export default KeyframeComponent; +``` + + +- **Gestures** +Framer Motion allows you to create animations based on user gestures. Here's an example: + +```javascript +import React from 'react'; +import { motion } from 'framer-motion'; + +const GestureComponent = () => { + return ( + + Drag me around + + ); +}; + +export default GestureComponent; +``` + + +- **Layout Animations** +Framer Motion makes it easy to animate layout changes. Here's an example: + +```javascript +import React, { useState } from 'react'; +import { motion } from 'framer-motion'; + +const LayoutAnimationComponent = () => { + const [isOpen, setIsOpen] = useState(false); + + return ( + setIsOpen(!isOpen)} style={{ background: 'lightblue', padding: '10px' }}> + {isOpen ? 'Click to collapse' : 'Click to expand'} + + ); +}; + +export default LayoutAnimationComponent; +``` + +{% hint style="info" %} +For more details and examples, check out the Framer Motion documentation. +{% endhint %} \ No newline at end of file diff --git a/es/animation-resources/gsap.md b/es/animation-resources/gsap.md new file mode 100644 index 00000000..850150b5 --- /dev/null +++ b/es/animation-resources/gsap.md @@ -0,0 +1,79 @@ +--- +chapter: 26 +pageNumber: 253 +description: Getting started with GSAP, a powerful library for creating high-performance animations. +--- + +## Getting Started with GSAP + +GSAP (GreenSock Animation Platform) is a powerful library for creating high-performance animations. It is widely used due to its robustness and flexibility. + +**Installation** + +You can include GSAP in your project using npm: + +```bash +npm install gsap +``` + +Or you can use a CDN: + +```html + +``` + +**Basic Animation** + +Here's a simple example of using GSAP to animate an element: + +```html + + + + + + GSAP Animation + + +
+ + + + +``` + +**Advanced Animation** + +GSAP provides various features for advanced animations, such as timelines, stagger, and easing. + + +- **Timelines:** +Timelines allow you to sequence animations. Here's an example: + +```javascript +const name = "John"; +const greeting = `Hello, ${name}!`; +console.log(greeting); // Output: Hello, John! +``` + + +- **Stagger:** +Stagger allows you to animate multiple elements with a delay between each. Here's an example: + +```javascript +gsap.to(".box", {x: 100, duration: 1, stagger: 0.2}); +``` + + +- **Easing:** +GSAP provides a variety of easing options to make animations look more natural. Here's an example: + +```javascript +gsap.to("#box", {x: 100, duration: 1, ease: "bounce"}); +``` + +{% hint style="info" %} +For more details and examples, check out the GSAP documentation. +{% endhint %} \ No newline at end of file diff --git a/es/animation-resources/react-spring.md b/es/animation-resources/react-spring.md new file mode 100644 index 00000000..3d4bc7a5 --- /dev/null +++ b/es/animation-resources/react-spring.md @@ -0,0 +1,103 @@ +--- +chapter: 26 +pageNumber: 255 +description: Using React Spring for animations in React applications. +--- + +## Using React Spring for Animations + +React Spring is a spring-physics-based animation library for React that makes it easy to create animations. + +**Installation** + +You can include React Spring in your project using npm: + +```bash +npm install react-spring +``` + +**Basic Animation** + +Here's a simple example of using React Spring to animate a component: + +```javascript +import React from 'react'; +import { useSpring, animated } from 'react-spring'; + +const AnimatedComponent = () => { + const props = useSpring({ opacity: 1, from: { opacity: 0 } }); + + return I will fade in; +}; + +export default AnimatedComponent; +``` + +**Advanced Animation** + +React Spring provides various features for advanced animations, such as transitions, trails, and keyframes. + + +- **Transitions** +Transitions allow you to animate components as they mount and unmount. Here's an example: + +```javascript +import React, { useState } from 'react'; +import { useTransition, animated } from 'react-spring'; + +const TransitionComponent = () => { + const [items, setItems] = useState([]); + const transitions = useTransition(items, item => item.key, { + from: { transform: 'translate3d(0,-40px,0)' }, + enter: { transform: 'translate3d(0,0px,0)' }, + leave: { transform: 'translate3d(0,-40px,0)' }, + }); + + return ( +
+ + {transitions.map(({ item, props, key }) => ( + {item.key} + ))} +
+ ); +}; + +export default TransitionComponent; +``` + + +- **Trails** +Trails allow you to animate a list of components in sequence. Here's an example: + +```javascript +import React from 'react'; +import { useTrail, animated } from 'react-spring'; + +const items = [1, 2, 3]; + +const TrailComponent = () => { + const trail = useTrail(items.length, { + from: { opacity: 0 }, + to: { opacity: 1 }, + }); + + return ( +
+ {trail.map((props, index) => ( + + {items[index]} + + ))} +
+ ); +}; + +export default TrailComponent; +``` + +{% hint style="info" %} +For more details and examples, check out the React Spring documentation. +{% endhint %} \ No newline at end of file diff --git a/es/animation-resources/threejs.md b/es/animation-resources/threejs.md new file mode 100644 index 00000000..d7184651 --- /dev/null +++ b/es/animation-resources/threejs.md @@ -0,0 +1,103 @@ +--- +chapter: 26 +pageNumber: 253 +description: Creating 3D animations with Three.js, a JavaScript library for 3D graphics. +--- + +## 3D Animations with Three.js + +Three.js is a JavaScript library that makes creating 3D graphics on the web easier. It is widely used for creating immersive 3D experiences. + +**Installation** + +You can include Three.js in your project using npm: + +```bash +npm install three +``` + +Or you can use a CDN: + +```html + +``` + +**Basic Animation** + +Here's a simple example of using Three.js to create a rotating cube: + +```html + + + + + + Three.js Animation + + + + + + + +``` + +**Advanced Animation** + +Three.js provides various features for advanced animations, such as lighting, textures, and physics. + + +- **Lighting** +Adding lighting to your scene can make it more realistic. Here's an example: + +```javascript +const light = new THREE.PointLight(0xffffff); +light.position.set(10, 10, 10); +scene.add(light); +``` + + +- **Textures** +Applying textures to your objects can make them more detailed. Here's an example: + +```javascript +const texture = new THREE.TextureLoader().load('path/to/texture.jpg'); +const material = new THREE.MeshBasicMaterial({ map: texture }); +const cube = new THREE.Mesh(geometry, material); +``` + + +- **Physics** +Integrating physics can make your 3D world more dynamic. One popular physics engine that works with Three.js is Cannon.js. + +{% hint style="info" %} +For more details and examples, check out the Three.js documentation. +{% endhint %} \ No newline at end of file diff --git a/es/animation-resources/velocityjs.md b/es/animation-resources/velocityjs.md new file mode 100644 index 00000000..8a947039 --- /dev/null +++ b/es/animation-resources/velocityjs.md @@ -0,0 +1,82 @@ +--- +chapter: 26 +pageNumber: 254 +description: Creating fast animations with Velocity.js, a high-performance animation engine. +--- + +## Fast Animations with Velocity.js + +Velocity.js is a high-performance animation engine that is easy to use and works with and without jQuery. + +**Installation** + +You can include Velocity.js in your project using npm: + +```bash +npm install velocity-animate +``` + +Or you can use a CDN: + +```html + +``` + +**Basic Animation** +Here's a simple example of using Velocity.js to animate an element: + +```html + + + + + + Velocity.js Animation + + +
+ + + + +``` + +**Advanced Animation** + +Velocity.js provides various features for advanced animations, such as sequences, easing, and SVG animations. + + +- **Sequences** + +Sequences allow you to chain animations together. Here's an example: + +```javascript +Velocity(document.getElementById('box'), { left: "100px" }, { duration: 1000 }) + .then(() => { + return Velocity(document.getElementById('box'), { top: "100px" }, { duration: 1000 }); + }); +``` + + +- **Easing** + +Velocity.js provides a variety of easing options to make animations look more natural. Here's an example: + +```javascript +Velocity(document.getElementById('box'), { left: "100px" }, { duration: 1000, easing: "spring" }); +``` + + +- **SVG Animations** + +Velocity.js can also animate SVG elements. Here's an example: + +```javascript +Velocity(document.querySelector('svg'), { strokeDashoffset: 0 }, { duration: 1000 }); +``` + +{% hint style="info" %} +For more details and examples, check out the Velocity.js documentation. +{% endhint %} diff --git a/es/arrays/README.md b/es/arrays/README.md index fbd8ba86..b103f5c5 100644 --- a/es/arrays/README.md +++ b/es/arrays/README.md @@ -1,7 +1,7 @@ --- layout: editorial chapter: 6 -pageNumber: 36 +pageNumber: 47 description: Un array (matriz, en español) es una lista de datos y es parte fundamental de la programación. Aquí podemos almacenar una gran cantidad de datos de diferentes tipos. --- @@ -29,7 +29,6 @@ const coches = new Array("Saab", "Volvo", "BMW"); // usando la palabra clave new Se utiliza un número de índice para acceder a los valores de una matriz. El índice del primer elemento de una matriz es siempre `0`, ya que los índices de las matrices comienzan con `0`. El número de índice también se puede utilizar para cambiar los elementos de una matriz. - ```javascript const coches = ["Saab", "Volvo", "BMW"]; console.log(coches[0]); @@ -48,29 +47,45 @@ La propiedad `length` de una matriz devuelve el recuento de elementos numéricos | Nombre | Descripción | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `concat()` | Devuelve dos o más matrices combinadas | -| `join()` | Une todos los elementos de una matriz en una cadena | -| `push()` | Agrega uno o más elementos al final de la matriz y devuelve la longitud | -| `pop()` | Elimina el último elemento de una matriz y devuelve ese elemento | -| `shift()` | Elimina el primer elemento de una matriz y devuelve ese elemento | -| `unshift()` | Agrega uno o más elementos al frente de una matriz y devuelve la longitud | -| `slice()` | Extrae la sección de una matriz y devuelve la nueva matriz. | | `at()` | Devuelve el elemento en el índice especificado o `undefined` | -| `splice()` | Elimina elementos de una matriz y (opcionalmente) los reemplaza y devuelve la matriz | -| `reverse()` | Transpone los elementos de una matriz y devuelve una referencia a una matriz | -| `flat()` | Devuelve una nueva matriz con todos los elementos de la submatriz concatenados en ella de forma recursiva hasta la profundidad especificada | -| `sort()` | Ordena los elementos de una matriz en su lugar y devuelve una referencia a la matriz | -| `indexOf()` | Devuelve el índice de la primera coincidencia del elemento de búsqueda. | -| `lastIndexOf()` | Devuelve el índice de la última coincidencia del elemento de búsqueda. | -| `forEach()` | Ejecuta una devolución de llamada en cada elemento de una matriz y devuelve undefined | -| `map()` | Devuelve una nueva matriz con un valor de retorno al ejecutar `callback` en cada elemento de la matriz. | -| `flatMap()` | Ejecuta `map()` seguido de `flat()` de profundidad 1 | +| `concat()` | Devuelve dos o más matrices combinadas | +| `every()` | Devuelve `true` si `callback` devuelve `true` para cada elemento en la matriz | | `filter()` | Devuelve una nueva matriz que contiene los elementos para los cuales `callback` devolvió `true` | | `find()` | Devuelve el primer elemento para el cual `callback` devolvió `true` | | `findLast()` | Devuelve el último elemento para el cual `callback` devolvió `true` | | `findIndex()` | Devuelve el índice del primer elemento para el cual `callback` devolvió `true` | | `findLastIndex()` | Devuelve el índice del último elemento para el cual `callback` devolvió `true` | -| `every()` | Devuelve `true` si `callback` devuelve `true` para cada elemento en la matriz | -| `some()` | Devuelve `true` si `callback` devuelve `true` para al menos un elemento en la matriz | +| `flat()` | Devuelve una nueva matriz con todos los elementos de la submatriz concatenados en ella de forma recursiva hasta la profundidad especificada | +| `flatMap()` | Ejecuta `map()` seguido de `flat()` de profundidad 1 | +| `forEach()` | Ejecuta una devolución de llamada en cada elemento de una matriz y devuelve undefined | +| `indexOf()` | Devuelve el índice de la primera coincidencia del elemento de búsqueda. | +| `join()` | Une todos los elementos de una matriz en una cadena | +| `lastIndexOf()` | Devuelve el índice de la última coincidencia del elemento de búsqueda. | +| `map()` | Devuelve una nueva matriz con un valor de retorno al ejecutar `callback` en cada elemento de la matriz. | +| `pop()` | Elimina el último elemento de una matriz y devuelve ese elemento | +| `push()` | Agrega uno o más elementos al final de la matriz y devuelve la longitud | | `reduce()` | Usa `callback(acumulador, valorActual, indiceActual, matriz)` con el propósito de reducir y devuelve el valor final devuelto por la función `callback` | | `reduceRight()` | Funciona de forma similar a `reduce()` pero comienza con el último elemento | +| `reverse()` | Transpone los elementos de una matriz y devuelve una referencia a una matriz | +| `shift()` | Elimina el primer elemento de una matriz y devuelve ese elemento | +| `slice()` | Extrae la sección de una matriz y devuelve la nueva matriz. | +| `some()` | Devuelve `true` si `callback` devuelve `true` para al menos un elemento en la matriz | +| `sort()` | Ordena los elementos de una matriz en su lugar y devuelve una referencia a la matriz | +| `splice()` | Elimina elementos de una matriz y (opcionalmente) los reemplaza y devuelve la matriz | +| `unshift()` | Agrega uno o más elementos al frente de una matriz y devuelve la longitud | + +En este capítulo, exploraremos los siguientes temas: + +* [For-Each](./for-each.md) +* [Indices](./indices.md) +* [Join](./join.md) +* [Length](./length.md) +* [Map](./map.md) +* [Pop](./pop.md) +* [Push](./push.md) +* [Reverse](./reverse.md) +* [Shift](./shift.md) +* [Slice](./slice.md) +* [Sort](./sort.md) +* [Spread](./spread.md) +* [Unshift](./unshift.md) diff --git a/es/arrays/indices.md b/es/arrays/indices.md index 58f3e4f5..ad28b715 100644 --- a/es/arrays/indices.md +++ b/es/arrays/indices.md @@ -5,7 +5,7 @@ description: Las matrices son una colección de elementos y a cada elemento se l --- # Índices -Entonces tienes tu conjunto de elementos de datos, pero ¿qué pasa si quieres acceder a un elemento específico? Ahí es donde entran los índices. Un **índice** se refiere a un lugar en la matriz. Los índices progresan lógicamente uno por uno, pero cabe señalar que el primer índice de una matriz es 0, como ocurre en la mayoría de los lenguajes. Los corchetes `[]` se utilizan para indicar que se está haciendo referencia a un índice de una matriz. +Entonces tienes tu conjunto de elementos de datos, pero ¿qué pasa si quieres acceder a un elemento específico? Ahí es donde entran los índices. Un **índice** se refiere a un lugar en la matriz. Los índices progresan lógicamente uno por uno, pero cabe señalar que el primer índice de una matriz es `0`, como ocurre en la mayoría de los lenguajes. Los corchetes `[]` se utilizan para indicar que se está haciendo referencia a un índice de una matriz. ```javascript // Esto es una matriz de cadenas diff --git a/es/arrays/shift.md b/es/arrays/shift.md index 2dd6c048..d829c5f0 100644 --- a/es/arrays/shift.md +++ b/es/arrays/shift.md @@ -5,7 +5,7 @@ description: El método shift elimina el primer elemento de índice de la matriz --- # Shift -El método `shift` elimina el primer índice de esa matriz y mueve todos los índices hacia la izquierda. Cambia la matriz original. Aquí está la sintaxis para usar "shift": +El método `shift` elimina el primer índice de esa matriz y mueve todos los índices hacia la izquierda. Cambia la matriz original. Aquí está la sintaxis para usar `shift`: ```javascript array.shift(); diff --git a/es/arrays/slice.md b/es/arrays/slice.md index 7f0e60b9..a4d3e68b 100644 --- a/es/arrays/slice.md +++ b/es/arrays/slice.md @@ -7,11 +7,10 @@ description: El método Javascript arr.slice() devuelve una nueva matriz que co El método `slice` acepta dos parametros inicio y fin. -* inicio: Este parámetro define el índice inicial desde donde la porción va a ser extraída. -Si este argumento se pierde entonces el método tomca como inicio el 0 como valor de inicio por defecto. - -* final: Este parámetro es el índice hasta el cual se extraerá la porción (excluyendo el índice final). +* **inicio**: Este parámetro define el índice inicial desde donde la porción va a ser extraída. + Si este argumento se pierde entonces el método tomca como inicio el `0` como valor de inicio por defecto. +* **final**: Este parámetro es el índice hasta el cual se extraerá la porción (excluyendo el índice final). Si este argumento no está definido, entonces se extrae la matriz hasta el final, ya que es el valor final predeterminado. Si el valor final es mayor que la longitud de la matriz, entonces el valor final cambia a la longitud de la matriz. ```javascript diff --git a/es/basics/README.md b/es/basics/README.md index c967cf12..d28e3f1d 100644 --- a/es/basics/README.md +++ b/es/basics/README.md @@ -26,3 +26,10 @@ let mensaje = hola + " " + mundo; ``` Este código puede ser ejecutado por otro programa llamado _intérprete_ que leerá el código y ejecutará todas las declaraciones en el orden correcto. + +En este capítulo, exploraremos los siguientes temas: + +* [Comentarios](./comments.md) +* [Igualdad](./equality.md) +* [Tipos](./types.md) +* [Variables](./variables.md) diff --git a/es/behind-scenes/README.md b/es/behind-scenes/README.md new file mode 100644 index 00000000..19a08a4d --- /dev/null +++ b/es/behind-scenes/README.md @@ -0,0 +1,47 @@ +--- +layout: editorial +chapter: 27 +pageNumber: 256 +description: JavaScript behind the scenes. +--- + +## JavaScript Behind the Scenes + +JavaScript is a versatile language that runs in various environments, including browsers and servers. Understanding how +JavaScript works behind the scenes can help you write more efficient and effective code. This guide covers key concepts +such as the JavaScript engine, execution context, call stack, memory heap, runtime environment, and event loop. + +### JavaScript Engine + +A JavaScript engine is a program or interpreter that executes JavaScript code. Popular engines like V8 (used in Google +Chrome and Node.js), SpiderMonkey (used in Firefox), and JavaScriptCore (used in Safari) parse the code into an Abstract +Syntax Tree (AST), compile it into bytecode or machine code, and then execute it. + +### Execution Context + +An execution context is an environment where JavaScript code is evaluated and executed. There are three types: global, +function, and eval. Each context has a creation phase, where variables, functions, and the `this` keyword are created, +and an execution phase, where the code is executed line by line. + +### Call Stack + +The call stack is a data structure that keeps track of function calls in a Last-In, First-Out (LIFO) manner. It helps +the JavaScript engine manage the execution of multiple functions by pushing and popping function calls as they are +invoked and completed. + +### Memory Heap + +The memory heap is a region in memory where objects are stored. JavaScript uses garbage collection to manage memory, +automatically freeing up memory that is no longer in use, thus preventing memory leaks and optimizing performance. + +### Runtime Environment + +The runtime environment provides the necessary resources for JavaScript to execute. In a browser, this includes the +Document Object Model (DOM), Web APIs, and the JavaScript engine. In Node.js, it includes the file system, HTTP module, +and other Node.js-specific APIs. + +### Event Loop + +The event loop allows JavaScript to perform non-blocking operations by offloading tasks to the system kernel whenever +possible. It continuously checks the call stack and processes the callback queue, enabling asynchronous programming and +efficient execution of code. \ No newline at end of file diff --git a/es/behind-scenes/call-stack.md b/es/behind-scenes/call-stack.md new file mode 100644 index 00000000..39a392cd --- /dev/null +++ b/es/behind-scenes/call-stack.md @@ -0,0 +1,75 @@ +--- +chapter: 27 +pageNumber: 257 +description: Understanding Call Stacks in JavaScript +--- + + +## Understanding Call Stacks in JavaScript + +In JavaScript, a Call Stack is a data structure that uses the Last-In, First-Out (LIFO) principle to temporarily store and manage function invocation (call). + +### What is a Call Stack? + +A call stack is responsible for keeping track of function calls in your code. The call stack helps the JavaScript interpreter to keep track of what function is currently being run and what functions are called from within that function, and so on. + +When a script calls a function, JavaScript's interpreter adds that function to the call stack and then starts carrying out the function. Any functions that are called by that function are added to the call stack further up, and run where their calls are reached. + +When the current function is finished, the interpreter takes it off the stack and resumes execution where it left off in the last line of code that was run. + +### Example of a Call Stack + +Here's a basic example to understand how a call stack works: + +```javascript +function firstFunction() { + console.log("First function is called."); + secondFunction(); + console.log("First function is done."); +} + +function secondFunction() { + console.log("Second function is called."); + thirdFunction(); + console.log("Second function is done."); +} + +function thirdFunction() { + console.log("Third function is called."); +} + +firstFunction(); +``` + +**Output:** +``` +First function is called. +Second function is called. +Third function is called. +Second function is done. +First function is done. +``` + +### How the Call Stack Works + +1. When `firstFunction` is called, it is added to the call stack. +2. Inside `firstFunction`, `secondFunction` is called, so it is added to the call stack. +3. Inside `secondFunction`, `thirdFunction` is called, so it is added to the call stack. +4. `thirdFunction` completes and is removed from the call stack. +5. `secondFunction` resumes, completes, and is removed from the call stack. +6. `firstFunction` resumes, completes, and is removed from the call stack. + +### Stack Overflow + +A stack overflow occurs when there are too many function calls in the call stack. This can happen with recursive functions that do not have a base case to stop the recursion. + +```javascript +function recursiveFunction() { + recursiveFunction(); +} + +recursiveFunction(); +``` + +This will result in a "Maximum call stack size exceeded" error. + diff --git a/es/behind-scenes/engine.md b/es/behind-scenes/engine.md new file mode 100644 index 00000000..ff9457cd --- /dev/null +++ b/es/behind-scenes/engine.md @@ -0,0 +1,92 @@ +--- +chapter: 27 +pageNumber: 258 +description: Understanding JavaScript Engines and how they execute JavaScript code. +--- + +## Understanding JavaScript Engines + +A JavaScript engine is a program or an interpreter that executes JavaScript code. The most well-known JavaScript engines are V8 (used in Google Chrome and Node.js), SpiderMonkey (used in Firefox), and JavaScriptCore (used in Safari). + +### How JavaScript Engines Work + +JavaScript engines perform several key tasks to execute JavaScript code efficiently: + +1. **Parsing**: The engine parses the JavaScript code into an Abstract Syntax Tree (AST). +2. **Compilation**: The AST is then compiled into bytecode or machine code. +3. **Execution**: The compiled code is executed by the engine. + +### Example of JavaScript Engine Workflow + +Here's a simple example to illustrate the workflow of a JavaScript engine: + +```javascript +function add(a, b) { + return a + b; +} + +console.log(add(2, 3)); // Output: 5 +``` + +### Parsing + +The engine first parses the code into an AST. For the above code, the AST might look something like this: + +``` +Program + ├── FunctionDeclaration (add) + │ ├── Identifier (a) + │ ├── Identifier (b) + │ └── BlockStatement + │ └── ReturnStatement + │ └── BinaryExpression (+) + │ ├── Identifier (a) + │ └── Identifier (b) + └── ExpressionStatement + └── CallExpression (console.log) + └── CallExpression (add) + ├── Literal (2) + └── Literal (3) +``` + +### Compilation + +The AST is then compiled into bytecode or machine code. This step involves optimizations to improve performance. + +### Execution + +The compiled code is executed by the engine. In this case, the `add` function is called with arguments `2` and `3`, and the result `5` is logged to the console. + +### Just-In-Time (JIT) Compilation + +Modern JavaScript engines use Just-In-Time (JIT) compilation to improve performance. JIT compilation involves compiling code at runtime, rather than before execution. This allows the engine to optimize the code based on actual usage patterns. + +### Example of JIT Compilation + +```javascript +function multiply(a, b) { + return a * b; +} + +for (let i = 0; i < 1000000; i++) { + multiply(2, 3); +} +``` + +In this example, the `multiply` function is called repeatedly. A JIT compiler can optimize the function after detecting that it is a hot function (i.e., frequently called). + +### Garbage Collection + +JavaScript engines also include garbage collectors to manage memory. The garbage collector automatically frees up memory that is no longer in use, preventing memory leaks. + +### Example of Garbage Collection + +```javascript +function createObject() { + return { name: "Object" }; +} + +let obj = createObject(); +obj = null; // The object is now eligible for garbage collection +``` +In this example, the object created by `createObject` is eligible for garbage collection after `obj` is set to `null`. diff --git a/es/behind-scenes/event-loop.md b/es/behind-scenes/event-loop.md new file mode 100644 index 00000000..2b200d5a --- /dev/null +++ b/es/behind-scenes/event-loop.md @@ -0,0 +1,132 @@ +--- +chapter: 27 +pageNumber: 259 +description: Understanding the Event Loop in JavaScript. +--- + +## Understanding the Event Loop in JavaScript + +The event loop is a fundamental concept in JavaScript that allows for asynchronous programming. It is responsible for executing code, collecting and processing events, and executing queued sub-tasks. + +### How the Event Loop Works + +JavaScript is single-threaded, meaning it can execute one piece of code at a time. The event loop allows JavaScript to perform non-blocking operations by offloading operations to the system kernel whenever possible. + +### Components of the Event Loop + +1. **Call Stack**: The call stack is where the JavaScript engine keeps track of function calls. +2. **Web APIs**: These are provided by the browser (or Node.js) and include things like `setTimeout`, `DOM events`, and `HTTP requests`. +3. **Callback Queue**: This is where functions are queued up to be executed after the call stack is clear. +4. **Event Loop**: The event loop continuously checks the call stack to see if it's empty. If it is, it takes the first event from the callback queue and pushes it to the call stack. + +### Example of the Event Loop + +Here's a simple example to illustrate how the event loop works: + +```javascript +console.log("Start"); + +setTimeout(() => { + console.log("Timeout"); +}, 0); + +console.log("End"); +``` + +**Output:** +``` +Start +End +Timeout +``` + +### Explanation + +1. `console.log("Start")` is executed and "Start" is printed. +2. `setTimeout` is called, and the callback is sent to the Web API. The main thread continues. +3. `console.log("End")` is executed and "End" is printed. +4. The event loop checks the call stack and finds it empty. It then pushes the `setTimeout` callback to the call stack. +5. The `setTimeout` callback is executed and "Timeout" is printed. + +### Event Loop in Action + +Here's a more complex example to demonstrate the event loop in action: + +```javascript +console.log("Start"); + +setTimeout(() => { + console.log("Timeout 1"); +}, 1000); + +setTimeout(() => { + console.log("Timeout 2"); +}, 0); + +Promise.resolve().then(() => { + console.log("Promise"); +}); + +console.log("End"); +``` + +**Output:** +``` +Start +End +Promise +Timeout 2 +Timeout 1 +``` + +### Explanation + +1. `console.log("Start")` is executed and "Start" is printed. +2. `setTimeout` with 1000ms delay is called and the callback is sent to the Web API. +3. `setTimeout` with 0ms delay is called and the callback is sent to the Web API. +4. `Promise.resolve().then` is called and the callback is sent to the microtask queue. +5. `console.log("End")` is executed and "End" is printed. +6. The event loop checks the call stack and finds it empty. It then processes the microtask queue first, executing the `Promise` callback and printing "Promise". +7. The event loop then processes the callback queue, executing the `setTimeout` with 0ms delay and printing "Timeout 2". +8. Finally, the `setTimeout` with 1000ms delay is executed and "Timeout 1" is printed. + +### Microtasks vs Macrotasks + +Microtasks (e.g., Promises) have higher priority than macrotasks (e.g., `setTimeout`). The event loop processes all microtasks before moving on to the next macrotask. + +### Example of Microtasks and Macrotasks + +```javascript +console.log("Start"); + +setTimeout(() => { + console.log("Timeout"); +}, 0); + +Promise.resolve().then(() => { + console.log("Promise 1"); +}).then(() => { + console.log("Promise 2"); +}); + +console.log("End"); +``` + +**Output:** +``` +Start +End +Promise 1 +Promise 2 +Timeout +``` + +### Explanation + +1. `console.log("Start")` is executed and "Start" is printed. +2. `setTimeout` is called and the callback is sent to the Web API. +3. `Promise.resolve().then` is called and the callback is sent to the microtask queue. +4. `console.log("End")` is executed and "End" is printed. +5. The event loop processes the microtask queue, executing the `Promise` callbacks and printing "Promise 1" and "Promise 2". +6. The event loop then processes the callback queue, executing the `setTimeout` callback and printing "Timeout". + diff --git a/es/behind-scenes/execution-context.md b/es/behind-scenes/execution-context.md new file mode 100644 index 00000000..7523dd2b --- /dev/null +++ b/es/behind-scenes/execution-context.md @@ -0,0 +1,127 @@ +--- +chapter: 27 +pageNumber: 260 +description: Understanding Execution Context in JavaScript. +--- + +## Understanding Execution Context in JavaScript + +In JavaScript, an execution context is an environment where the code is evaluated and executed. It is a fundamental concept that helps manage the scope and behavior of variables and functions. + +### Types of Execution Context + +There are three main types of execution contexts in JavaScript: + +1. **Global Execution Context**: This is the default context where the code starts execution. It creates a global object (e.g., `window` in browsers) and sets up the global scope. +2. **Function Execution Context**: Created whenever a function is invoked. Each function has its own execution context. +3. **Eval Execution Context**: Created when code is executed inside the `eval` function. + +### Phases of Execution Context + +Each execution context goes through two phases: + +1. **Creation Phase**: In this phase, the JavaScript engine sets up the environment for the code to be executed. It involves: + - Creating the `this` binding. + - Setting up the scope chain. + - Creating the variable object (variables, functions, and arguments). + +2. **Execution Phase**: In this phase, the JavaScript engine executes the code line by line. + +### Example of Execution Context + +Here's an example to illustrate how execution contexts work: + +```javascript +var globalVar = "I am a global variable"; + +function outerFunction() { + var outerVar = "I am an outer variable"; + + function innerFunction() { + var innerVar = "I am an inner variable"; + console.log(globalVar); // Accesses global variable + console.log(outerVar); // Accesses outer variable + console.log(innerVar); // Accesses inner variable + } + + innerFunction(); +} + +outerFunction(); +``` + +**Output:** +``` +I am a global variable +I am an outer variable +I am an inner variable +``` + +### Explanation + +1. **Global Execution Context**: + - `globalVar` is created and assigned the value "I am a global variable". + - `outerFunction` is created and stored in memory. + +2. **Function Execution Context (outerFunction)**: + - `outerVar` is created and assigned the value "I am an outer variable". + - `innerFunction` is created and stored in memory. + +3. **Function Execution Context (innerFunction)**: + - `innerVar` is created and assigned the value "I am an inner variable". + - The `console.log` statements access variables from their respective scopes. + +### Scope Chain and Lexical Environment + +The scope chain is a list of all the variable objects that the currently executing code has access to. The lexical environment is the environment in which the code is written, and it determines the scope chain. + +### Example of Scope Chain + +```javascript +var a = 10; + +function foo() { + var b = 20; + + function bar() { + var c = 30; + console.log(a + b + c); // Accesses variables from all scopes + } + + bar(); +} + +foo(); +``` + +**Output:** +``` +60 +``` + +### Explanation + +1. **Global Scope**: Contains `a`. +2. **Function Scope (foo)**: Contains `b` and has access to `a`. +3. **Function Scope (bar)**: Contains `c` and has access to `a` and `b`. + +### Hoisting + +Hoisting is a behavior in JavaScript where variable and function declarations are moved to the top of their containing scope during the creation phase. + +### Example of Hoisting + +```javascript +console.log(hoistedVar); // Output: undefined +var hoistedVar = "I am hoisted"; + +hoistedFunction(); // Output: I am a hoisted function +function hoistedFunction() { + console.log("I am a hoisted function"); +} +``` + +### Explanation + +- `hoistedVar` is declared but not initialized during the creation phase, so it is `undefined` when accessed. +- `hoistedFunction` is fully hoisted and can be called before its declaration. \ No newline at end of file diff --git a/es/behind-scenes/memory-heap.md b/es/behind-scenes/memory-heap.md new file mode 100644 index 00000000..b08924de --- /dev/null +++ b/es/behind-scenes/memory-heap.md @@ -0,0 +1,86 @@ +--- +chapter: 27 +pageNumber: 261 +description: Understanding Memory Heap in JavaScript. +--- + +## Understanding Memory Heap in JavaScript + +In JavaScript, memory management is crucial for ensuring efficient and smooth performance of applications. The memory heap is a region in memory where objects, strings, and closures are stored. It is managed by the JavaScript engine's garbage collector. + +### What is a Memory Heap? + +The memory heap is an area of pre-reserved computer memory that a program can use to store data in some variable amount. Unlike the stack, which is used for static memory allocation, the heap is used for dynamic memory allocation. + +### How Memory Heap Works + +When you create objects or variables in JavaScript, they are allocated in the memory heap. The JavaScript engine's garbage collector periodically scans the heap to identify and reclaim memory that is no longer in use. + +### Example of Memory Allocation + +Here's an example to illustrate how memory is allocated in the heap: + +```javascript +let obj = { + name: "John", + age: 30 +}; + +let arr = [1, 2, 3, 4, 5]; +``` + +In this example, the object `obj` and the array `arr` are allocated in the memory heap. + +### Garbage Collection + +JavaScript uses an automatic garbage collection mechanism to manage memory. The garbage collector identifies objects that are no longer reachable and reclaims their memory. + +### Example of Garbage Collection + +Consider the following example: + +```javascript +function createUser() { + let user = { + name: "Alice", + age: 25 + }; + return user; +} + +let user1 = createUser(); +let user2 = createUser(); +user1 = null; // The object referenced by user1 is now eligible for garbage collection +``` + +In this example, when `user1` is set to `null`, the object it referenced becomes eligible for garbage collection because it is no longer reachable. + +### Memory Leaks + +Memory leaks occur when memory that is no longer needed is not released. This can happen if references to objects are unintentionally retained. + +### Example of Memory Leak + +Here's an example of a memory leak: + +```javascript +let arr = []; +function addElement() { + arr.push(new Array(1000000).join('x')); +} + +setInterval(addElement, 1000); // This will cause a memory leak as the array keeps growing +``` + +In this example, the `arr` array keeps growing because new elements are continuously added without being removed, leading to a memory leak. + +### Best Practices for Memory Management + +1. **Avoid Global Variables**: Minimize the use of global variables to reduce the risk of memory leaks. +2. **Use `let` and `const`**: Prefer `let` and `const` over `var` to limit the scope of variables. +3. **Clean Up References**: Explicitly set references to `null` when they are no longer needed. +4. **Use Closures Wisely**: Be cautious with closures as they can retain references to outer variables. + +### Conclusion + +Understanding how the memory heap works in JavaScript is essential for writing efficient and performant code. By following best practices and being mindful of memory allocation and garbage collection, you can avoid common pitfalls such as memory leaks. diff --git a/es/behind-scenes/runtime-environment.md b/es/behind-scenes/runtime-environment.md new file mode 100644 index 00000000..eea4ee44 --- /dev/null +++ b/es/behind-scenes/runtime-environment.md @@ -0,0 +1,112 @@ +--- +chapter: 27 +pageNumber: 262 +description: Understanding Runtime Environment in JavaScript. +--- + +## Understanding Runtime Environment in JavaScript + +The runtime environment in JavaScript is the context in which your code is executed. It includes the JavaScript engine, the call stack, the memory heap, and the APIs provided by the environment (such as the browser or Node.js). + +### JavaScript Engine + +The JavaScript engine is responsible for executing your code. Popular engines include V8 (used in Chrome and Node.js), SpiderMonkey (used in Firefox), and JavaScriptCore (used in Safari). + +### Call Stack + +The call stack is a data structure that keeps track of function calls. When a function is called, it is added to the top of the stack. When the function returns, it is removed from the stack. + +### Example of Call Stack + +```javascript +function first() { + console.log("First function"); + second(); +} + +function second() { + console.log("Second function"); + third(); +} + +function third() { + console.log("Third function"); +} + +first(); +``` + +**Output:** +``` +First function +Second function +Third function +``` + +### Memory Heap + +The memory heap is where objects, strings, and closures are stored. It is managed by the garbage collector, which reclaims memory that is no longer in use. + +### Example of Memory Allocation + +```javascript +let obj = { + name: "John", + age: 30 +}; + +let arr = [1, 2, 3, 4, 5]; +``` + +### Event Loop + +The event loop is responsible for handling asynchronous operations. It continuously checks the call stack and the task queue, executing tasks from the queue when the stack is empty. + +### Example of Event Loop + +```javascript +console.log("Start"); + +setTimeout(() => { + console.log("Timeout"); +}, 0); + +console.log("End"); +``` + +**Output:** +``` +Start +End +Timeout +``` + +### APIs Provided by the Environment + +The runtime environment provides various APIs that you can use in your code. In a browser, these include the DOM, fetch, and setTimeout. In Node.js, these include file system operations, HTTP requests, and more. + +### Example of Browser API + +```javascript +document.getElementById("myButton").addEventListener("click", () => { + alert("Button clicked!"); +}); +``` + +### Example of Node.js API + +```javascript +const fs = require('fs'); + +fs.readFile('example.txt', 'utf8', (err, data) => { + if (err) { + console.error(err); + return; + } + console.log(data); +}); +``` + +### Conclusion + +Understanding the runtime environment in JavaScript is crucial for writing efficient and effective code. By knowing how the call stack, memory heap, event loop, and provided APIs work, you can better manage your code's execution and performance. \ No newline at end of file diff --git a/es/book.json b/es/book.json deleted file mode 100644 index f7e97ffa..00000000 --- a/es/book.json +++ /dev/null @@ -1,111 +0,0 @@ -{ - "title": "Aprenda JavaScript: Edición para principiantes", - "description": "Guía para principiantes para aprender JavaScript", - "author": "Suman Kunwar, Juan F. Ruiz", - "isbn": "", - "published": "13/07/2023", - "copyright": "Suman Kunwar", - "website": "https://sumankunwar.com.np", - "keywords": "aprender JavaScript, lecciones para principiantes", - "language": "es", - "totalpages": 113, - "hidepageheaders": [ - 1, - 2, - 3, - 10, - 40 - ], - "hidepagefooters": [ - 1, - 2, - 3, - 10, - 40 - ], - "plugins": [ - "hints", - "theme-creative", - "sidebar-ad", - "intopic-toc", - "sharing", - "exercises", - "sitemap", - "i18nsettings", - "favicon-custom", - "chapter-fold", - "hide-published-with", - "edit-link" - ], - "pdf": { - "pageNumbers": true, - "margin": { - "right": 32, - "left": 32 - } - }, - "pluginsConfig": { - "sidebar-ad": { - "imageUrl": "https://d2sofvawe08yqg.cloudfront.net/learnjavascriptbeginnersguide/s_hero2x", - "url": "https://leanpub.com/learnjavascriptbeginnersguide/signup", - "description": "¡Obtén la versión pdf y epub gratuita uniéndote a la lista de deseos! ✨", - "btnText": "¡Lee ahora!" - }, - "edit-link": { - "base": "https://github.com/sumn2u/learn-javascript/edit/main", - "label": "" - }, - "sharing": { - "facebook": true, - "twitter": true, - "google": false, - "weibo": false, - "instapaper": false, - "vk": false, - "all": [ - "facebook", - "google", - "twitter", - "weibo", - "instapaper" - ] - }, - "favicon": "favicon.ico", - "appleTouchIconPrecomposed152": "js.png", - "intopic-toc": { - "label": "En este capítulo" - }, - "sitemap": { - "hostname": "https://javascript.sumankunwar.com.np/" - }, - "i18nsettings": { - "language": "en", - "languages": [ - { - "config": "en", - "text": "English" - }, - { - "config": "fr", - "text": "Français" - }, - { - "config": "np", - "text": "नेपाली" - }, - { - "config": "tr", - "text": "Türkiye" - }, - { - "config": "id", - "text": "Indonesian" - }, - { - "config": "es", - "text": "Español" - } - ] - } - } -} \ No newline at end of file diff --git a/es/conditional/README.md b/es/conditional/README.md index 1cf6f136..02473dd4 100644 --- a/es/conditional/README.md +++ b/es/conditional/README.md @@ -1,7 +1,7 @@ --- layout: editorial chapter: 5 -pageNumber: 29 +pageNumber: 39 description: Las condiciones son esenciales para escribir código dinámico y responsivo que pueda adaptarse a diferentes escenarios y tomar decisiones basadas en entradas, interacciones del usuario o datos. --- @@ -15,4 +15,10 @@ En primer lugar, se pueden utilizar condiciones para garantizar que su programa La otra cosa que las condiciones pueden hacer por usted es permitir la ramificación. Es posible que haya encontrado diagramas de ramificación antes, por ejemplo, al completar un formulario. Básicamente, esto se refiere a ejecutar diferentes “ramas” (partes) de código, dependiendo de si se cumple o no la condición. -En este capítulo, aprenderemos las bases de la lógica condicional en JavaScript. +En este capítulo, aprenderemos las bases de la lógica condicional en JavaScript, incluyendo los siguientes temas: + +* [If](./if.md) +* [Else](./else.md) +* [Switch](./switch.md) +* [Comparadores](./comparators.md) +* [Concatenación](./concatenate.md) diff --git a/es/conditional/comparators.md b/es/conditional/comparators.md index c334ac95..f29525a9 100644 --- a/es/conditional/comparators.md +++ b/es/conditional/comparators.md @@ -1,6 +1,6 @@ --- chapter: 5 -pageNumber: 34 +pageNumber: 45 description: Los comparadores son funciones que se utilizan para comparar dos valores y determinar su relación. Aquí, el valor devuelto indica si los valores son iguales, mayores que, menores que o alguna otra relación basada en un criterio de comparación específico. --- # Comparadores @@ -32,4 +32,8 @@ Para evitar la molestia de si o si no, se pueden utilizar comparaciones lógicas let topper = marcas > 85 ? "SI" : "NO"; ``` -En el ejemplo anterior, `?` es un operador lógico. El código dice que si el valor de las marcas es mayor que 85, es decir, `marcas > 85`, entonces `topper = SI`; de lo contrario `topper = NO`. Básicamente, si la condición de comparación resulta verdadera, se accede al primer argumento y si la condición de comparación es falsa, se accede al segundo argumento. +En el ejemplo anterior, `?` es un operador lógico. El código dice que si el valor de las marcas es mayor que 85, es decir, `marcas > 85`, entonces `topper = SI`; de lo contrario `topper = NO`. Básicamente, si la condición de comparación resulta verdadera, se accede al primer argumento y si la condición de comparación es falsa, se accede al segundo argumento. Este operador abreviado también se conoce como `operador ternario`, ya que toma tres operandos. + +```javascript +condicion ? expresion1 : expresion2 +``` diff --git a/es/conditional/concatenate.md b/es/conditional/concatenate.md index ad6f7c01..69e1aa43 100644 --- a/es/conditional/concatenate.md +++ b/es/conditional/concatenate.md @@ -1,6 +1,6 @@ --- chapter: 5 -pageNumber: 35 +pageNumber: 46 description: La condición de concatenación se refiere a la combinación de múltiples condiciones utilizando operadores lógicos para crear condicionales más complejos y sofisticados. --- # Concatenación diff --git a/es/conditional/else.md b/es/conditional/else.md index 0b5808b7..d7521642 100644 --- a/es/conditional/else.md +++ b/es/conditional/else.md @@ -1,6 +1,6 @@ --- chapter: 5 -pageNumber: 31 +pageNumber: 42 description: La palabra clave else se utiliza junto con la declaración if para proporcionar un bloque de código alternativo para ejecutar cuando la condición especificada en la declaración if se evalúa como falsa. --- # Else diff --git a/es/conditional/if.md b/es/conditional/if.md index a4f2e692..cf43db17 100644 --- a/es/conditional/if.md +++ b/es/conditional/if.md @@ -1,8 +1,9 @@ --- chapter: 5 -pageNumber: 30 +pageNumber: 40 description: La condición if evalúa la condición y, si la condición es verdadera, se ejecuta el bloque de código que sigue a la declaración if; de lo contrario, se omite. --- + # If La condición más sencilla es una declaración if y su sintaxis es `if (condición) {haz esto...}`. La condición debe ser verdadera para que se ejecute el código dentro de las llaves. Por ejemplo, puede probar una cadena y establecer el valor de otra cadena dependiendo de su valor como se describe a continuación. @@ -49,3 +50,89 @@ console.log(mensaje); {% hint style="info" %} Las condiciones también se pueden anidar. {% endhint %} + +## If-Else anidado + +En JavaScript, puedes usar declaraciones `if-else` anidadas para crear una lógica condicional más compleja. + +### Sintaxis básica + +```javascript +if (condicion1) { + // Código a ejecutar cuando condicion1 es 'true' +} else { + if (condicion2) { + // Código a ejecutar cuando condicion1 es 'false' y condicion2 es 'true' + } else { + // Código a ejecutar cuando tanto condicion1 como condicion2 son 'false' + } +} +``` + +El siguiente programa determina el estado de estudiante de una persona en función de su edad e imprime un mensaje correspondiente. + +```JavaScript +let edad = 20; +let esAlumno = true; + +if (edad >= 18) { + if (esAlumno) { + console.log("Usted es un alumno adulto."); + } else { + console.log("Usted es un adulto, pero no un alumno."); + } +} else { + console.log("Usted no es un adulto."); +} + +// Salida: Usted es un alumno adulto. +``` + +Este programa verifica la lluvia, la temperatura y la nieve para brindar asesoramiento meteorológico. + +```JavaScript +let temperatura = 25; +let estaLloviendo = true; +let estaNevando = false; + +if (estaLloviendo) { + console.log("Está lloviendo. No olvides tu paraguas."); + + if (temperatura < 10) { + console.log("Y hace frío. Quizá necesites un abrigo también."); + } +} else if (estaNevando) { + console.log("Está nevando. Prepárese para carreteras resbaladizas."); +} else { + console.log("No llueve ni nieva. ¡Disfruta del clima!"); +} + +// Salida: Está lloviendo. No olvides tu paraguas. +``` + +Este programa verifica la edad de una persona, su experiencia de conducción previa y el estado de la prueba escrita para determinar su elegibilidad para una licencia de conducir. + +```JavaScript +let edad = 19; +let tieneExperienciaPrevia = true; +let haPasadoExamenEscrito = true; + +if (edad >= 18) { + if (tieneExperienciaPrevia) { + console.log("¡Felicitaciones! Usted es elegible para obtener una licencia de conducir."); + } else { + console.log("Lo sentimos, necesita experiencia previa de conducción para obtener una licencia de conducir."); + } +} else { + console.log("Lo sentimos, debes tener 18 años o más para solicitar una licencia de conducir."); + + if (haPasadoExamenEscrito) { + console.log("Has aprobado el examen escrito, pero debes esperar hasta cumplir 18 años para presentar la solicitud."); + } else { + console.log("Primero debes aprobar el examen escrito y esperar hasta tener 18 años para postularte."); + } +} + +// Salida: ¡Felicitaciones! Usted es elegible para obtener una licencia de conducir. + +``` diff --git a/es/conditional/switch.md b/es/conditional/switch.md index 23f3f48a..ef821940 100644 --- a/es/conditional/switch.md +++ b/es/conditional/switch.md @@ -1,6 +1,6 @@ --- chapter: 5 -pageNumber: 32 +pageNumber: 43 description: Switch es una declaración condicional que realiza acciones basadas en diferentes condiciones. Utiliza una comparación estricta para hacer coincidir las condiciones y ejecuta los bloques de código de la condición coincidente. --- # Switch diff --git a/es/date-and-time.md b/es/date-and-time.md index 7a0096ab..f18db6a5 100644 --- a/es/date-and-time.md +++ b/es/date-and-time.md @@ -1,7 +1,7 @@ --- layout: editorial chapter: 10 -pageNumber: 64 +pageNumber: 79 description: El objeto date almacena la fecha y la hora y proporciona métodos para administrarla. Los objetos Date son estáticos y utilizan la zona horaria predeterminada del navegador para mostrar la fecha como una cadena de texto completo. --- diff --git a/es/events.md b/es/events.md index f145a0f8..0cc40c87 100644 --- a/es/events.md +++ b/es/events.md @@ -1,7 +1,7 @@ --- layout: editorial chapter: 17 -pageNumber: 87 +pageNumber: 106 description: En programación, los eventos son acciones o sucesos en un sistema sobre los que el sistema le informa para que pueda responder a ellos. Por ejemplo, cuando hace clic en el botón Restablecer, se borra la entrada. --- diff --git a/es/functions/SUMMARY.md b/es/functions/SUMMARY.md new file mode 100644 index 00000000..32d8ca94 --- /dev/null +++ b/es/functions/SUMMARY.md @@ -0,0 +1,153 @@ +# Índice de contenidos + +- [Dedicatoria](Dedication.md) +- [Derechos de autor](Copyright.md) +- [Prefacio](Preface.md) +- [Introducción](README.md) +- [Lo esencial](basics/README.md) + - [Comentarios](basics/comments.md) + - [Variables](basics/variables.md) + - [Tipos](basics/types.md) + - [Igualdad](basics/equality.md) +- [Números](numbers/README.md) + - [Math](numbers/math.md) + - [Operadores básicos](numbers/operators.md) + - [Operadores avanzados](numbers/advanced.md) +- [Cadenas](strings/README.md) + - [Creación](strings/create.md) + - [Replace](strings/replace.md) + - [Length](strings/length.md) + - [Concatenación](strings/concat.md) + - [Split](strings/split.md) + - [CharAt](strings/charAt.md) + - [Substring](strings/substring.md) +- [Lógica condicional](conditional/README.md) + - [If](conditional/if.md) + - [Else](conditional/else.md) + - [Switch](conditional/switch.md) + - [Comparadores](conditional/comparators.md) + - [Concatenación](conditional/concatenate.md) +- [Matrices](arrays/README.md) + - [Unshift](arrays/unshift.md) + - [Map](arrays/map.md) + - [Spread](arrays/spread.md) + - [Shift](arrays/shift.md) + - [Pop](arrays/pop.md) + - [Join](arrays/join.md) + - [Length](arrays/length.md) + - [Push](arrays/push.md) + - [For Each](arrays/for-each.md) + - [Sort](arrays/sort.md) + - [Índices](arrays/indices.md) + - [Reverse](arrays/reverse.md) + - [Slice](arrays/slice.md) +- [Bucles](loops/README.md) + - [For](loops/for.md) + - [While](loops/while.md) + - [Do...While](loops/dowhile.md) + - [Continue](loops/continue.md) + - [Break](loops/break.md) +- [Funciones](functions/README.md) + - [Funciones de orden superior](functions/higher-order.md) + - [Funciones recursivas](functions/recursive-functions.md) + - [Cierres](functions/closures.md) + - [Set Interval](functions/set-interval.md) + - [Set Timeout](functions/set-timeout.md) + - [Operador de resto](functions/rest-operator.md) + - [Palabra clave this](functions/this-keyword.md) + - [Elevación (Hoisting)](functions/hoisting.md) + - [Captadores y definidores (Getters and Setters)](functions/getters-setters.md) +- [Objetos](objects/README.md) + - [Propiedades](objects/properties.md) + - [Mutable](objects/mutable.md) + - [Referencia](objects/reference.md) + - [Prototype](objects/prototype.md) + - [Operador Delete](objects/delete.md) + - [Enumeración](objects/enumeration.md) + - [Funciones factoría](objects/factory-functions.md) + - [Funciones Constructor](objects/constructor-functions.md) + - [Propiedad Constructor](objects/constructor-property.md) + - [Naturaleza dinámica](objects/dynamic-nature.md) +- [Fecha y hora](date-and-time.md) +- [JSON](json.md) +- [Manejo de errores](error-handling/README.md) + - [try...catch](error-handling/try...-catch.md) + - [try...catch...finally](error-handling/try...catch...finally.md) +- [Módulos](modules.md) +- [Expresión regular](regular-expression.md) +- [Clases](classes/README.md) + - [Static](classes/static.md) + - [Herencia](classes/inheritance.md) + - [Modificadores de acceso](classes/access-modifiers.md) +- [Modelo de Objetos del Navegador (BOM en inglés)](browser-object-model-bom/README.md) + - [Window](browser-object-model-bom/window.md) + - [Ventanas emergentes](browser-object-model-bom/popup.md) + - [Screen](browser-object-model-bom/screen.md) + - [Navigator](browser-object-model-bom/navigator.md) + - [Cookies](browser-object-model-bom/cookies.md) + - [History](browser-object-model-bom/history.md) + - [Location](browser-object-model-bom/location.md) +- [Eventos](events.md) +- [Promise, async/await (Promesas y asincronía)](promise-async-await/README.md) + - [Promise](promise-async-await/promise.md) + - [Async/Await](promise-async-await/async-await.md) +- [Misceláneas](miscellaneous/README.md) + - [Literales de plantilla](miscellaneous/template-literals.md) + - [Hoisting (Elevación)](miscellaneous/hoisting.md) + - [Currying](miscellaneous/currying.md) + - [Polyfills y transpiladores](miscellaneous/polyfills-and-transpilers.md) + - [Lista enlazada](miscellaneous/linked-list.md) + - [Huella global](miscellaneous/global-footprint.md) + - [Depuración](miscellaneous/debugging.md) + - [Creación e implementación de aplicaciones JS](miscellaneous/building-and-deploying.md) + - [Retrollamadas](miscellaneous/callback.md) + - [IPA Web y AJAX](miscellaneous/api-ajax.md) + - [Naturaleza de un solo hilo](./miscellaneous/single-thread-nature.md) + - [ECMAScript](miscellaneous/ECMA-script.md) + - [Pruebas](miscellaneous/testing.md) +- [Código del lado del servidor](server-side/README.md) + - [Node.js](server-side/nodejs.md) + - [Renderizado del lado del servidor](server-side/server-side-rendering.md) +- [Ejercicios](exercises/README.md) + - [Console](exercises/console.md) + - [Multiplicación](exercises/multiplication.md) + - [Variables de entrada del usuario](exercises/user-input-variables.md) + - [Constantes](exercises/constants.md) + - [Concatenación](exercises/concatenation.md) + - [Funciones](exercises/functions.md) + - [Sentencias condicionales](exercises/conditional-statements.md) + - [Objetos](exercises/objects.md) + - [Problema de FizzBuzz](exercises/fizzbuzz-problem.md) + - [¡Consigue los títulos!](exercises/get-the-titles.md) +- [Preguntas de entrevista (Sección de Bonificación)](interview-questions/README.md) + - [Nivel básico](interview-questions/basic-level.md) + - [Nivel intermedio](interview-questions/intermediate-level.md) + - [Nivel avanzado](interview-questions/advance-level.md) +- [Patrones de diseño (Sección de Bonificación)](design-patterns/README.md) + - [Patrones creacionales](design-patterns/creational-patterns.md) + - [Patrones estructurales](design-patterns/structural-patterns.md) + - [Patrones conductuales](design-patterns/behavioral-patterns.md) +- [Sistema de Ficheros (Sección de Bonificación)](file-system/README.md) +- [Conceptos de ES6 (Sección de Bonificación)](es6-concepts/README.md) + - [Let Const](es6-concepts/let-const.md) + - [Map](es6-concepts/map.md) + - [Funciones flecha](es6-concepts/arrow-functions.md) + - [Desestructurando](es6-concepts/destructuring.md) + - [Literales de plantilla](es6-concepts/template-literals.md) +- [Recursos de animación](animation-resources/README.md) + - [GSAP](animation-resources/gsap.md) + - [Anime JS](animation-resources/animejs.md) + - [Three JS](animation-resources/threejs.md) + - [Velocity JS](animation-resources/velocityjs.md) + - [React Spring](animation-resources/react-spring.md) + - [Framer Motion](animation-resources/framer-motion.md) +- [JavaScript detrás de escena](behind-scenes/README.md) + - [Pila de llamadas](behind-scenes/call-stack.md) + - [Motor](behind-scenes/engine.md) + - [Bucle de eventos](behind-scenes/event-loop.md) + - [Contexto de ejecución](behind-scenes/execution-context.md) + - [Montón de memoria](behind-scenes/memory-heap.md) + - [Entorno de ejecución](behind-scenes/runtime-environment.md) +- [Referencias](References.md) +- [Recursos](resources.md) +- [Créditos](Credits.md) diff --git a/es/functions/closures.md b/es/functions/closures.md new file mode 100644 index 00000000..8cc3b6aa --- /dev/null +++ b/es/functions/closures.md @@ -0,0 +1,63 @@ +--- +chapter: 8 +description: Closures are a JavaScript concept that allows functions to access and remember variables from their containing scope, even after the outer function has finished running. They're vital for data encapsulation, private variables, and various design patterns in JavaScript. Closures enhance code flexibility and maintainability. +--- + +# Closures + +In JavaScript, closures are a fundamental and powerful concept that plays a crucial role in the language. Understanding closures is essential for writing clean, efficient, and maintainable code. In this chapter, we'll explore what closures are, how they work, and why they are important in JavaScript. + +## What are Closures? + +A closure is a function that retains access to variables from its containing (enclosing) lexical scope even after the outer function has finished execution. In simpler terms, a closure "closes over" variables, preserving their values, and allows inner functions to access them. + +## How Closures Work + +Closures in JavaScript are created when a function is defined within another function and references variables from the outer function. Here's a step-by-step explanation of how closures work: + +1. **Function Definition**: A function is defined within another function. + +2. **Variable Reference**: The inner function references variables from the outer function. + +3. **Creation of a Closure**: When the inner function is created, it forms a closure, capturing the variables it references. + +4. **Access to Enclosing Scope**: The inner function can still access and use the variables from the outer function, even after the outer function has finished executing. + +## Practical Example + +Let's illustrate closures with a practical example: + +```javascript +function outerFunction() { + const outerVariable = 'I am from the outer function'; + + function innerFunction() { + console.log(outerVariable); + } + + return innerFunction; +} + +const closureFunction = outerFunction(); // Creates a closure +closureFunction(); // Logs "I am from the outer function" +``` + +In this example, `outerFunction` defines `outerVariable`, and `innerFunction` accesses `outerVariable` within its scope. When `outerFunction` is invoked and `closureFunction` is assigned the value it returns, it creates a closure that retains access to `outerVariable`. Later, when `closureFunction` is called, it still has access to `outerVariable`, even though `outerFunction` has completed execution. + +## Use Cases for Closures + +Closures have various practical use cases in JavaScript, including: + +- **Data Encapsulation**: Closures can be used to encapsulate and protect data, making it inaccessible from the outside. This is a fundamental concept in many design patterns. + +- **Function Factories**: Closures allow the creation of factory functions that generate functions with specific behaviors. + +- **Private Variables**: Closures enable the creation of private variables and methods within objects, keeping certain data hidden from external code. + +- **Callback Functions**: Callbacks often involve closures to maintain context and data between asynchronous operations. + +Closures are a powerful feature in JavaScript that allows functions to retain access to variables from their containing scope. Understanding closures is essential for writing clean and efficient code. They are commonly used in various design patterns and provide solutions for data encapsulation, function factories, and more. + +Closures can be both a powerful tool and a potential source of memory leaks if not used wisely. Therefore, it's crucial to grasp the concept and use it judiciously in your JavaScript code. + +--- diff --git a/es/functions/getters-setters.md b/es/functions/getters-setters.md new file mode 100644 index 00000000..747b1799 --- /dev/null +++ b/es/functions/getters-setters.md @@ -0,0 +1,105 @@ +--- +chapter: 8 +description: Understanding Getters and Setters in JavaScript. +--- + +## Understanding Getters and Setters in JavaScript + +Getters and setters in JavaScript are special methods that provide a way to access and update the properties of an object. They allow you to control how a property is accessed and modified, adding a layer of abstraction and encapsulation. + +### What are Getters and Setters? + +- **Getters**: Methods that get the value of a specific property. +- **Setters**: Methods that set the value of a specific property. + +### Defining Getters and Setters + +You can define getters and setters using the `get` and `set` keywords within an object literal or a class. + +### Example with Object Literals + +Here's an example of defining getters and setters in an object literal: + +```javascript +let person = { + firstName: "John", + lastName: "Doe", + get fullName() { + return `${this.firstName} ${this.lastName}`; + }, + set fullName(name) { + [this.firstName, this.lastName] = name.split(" "); + } +}; + +console.log(person.fullName); // Output: John Doe +person.fullName = "Jane Smith"; +console.log(person.firstName); // Output: Jane +console.log(person.lastName); // Output: Smith +``` + +### Example with Classes + +Here's an example of defining getters and setters in a class: + +```javascript +class Person { + constructor(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; + } + + get fullName() { + return `${this.firstName} ${this.lastName}`; + } + + set fullName(name) { + [this.firstName, this.lastName] = name.split(" "); + } +} + +let person = new Person("John", "Doe"); +console.log(person.fullName); // Output: John Doe +person.fullName = "Jane Smith"; +console.log(person.firstName); // Output: Jane +console.log(person.lastName); // Output: Smith +``` + +### Benefits of Using Getters and Setters + +1. **Encapsulation**: Control how properties are accessed and modified. +2. **Validation**: Add validation logic when setting a property. +3. **Computed Properties**: Create properties that are computed based on other properties. + +### Example of Validation + +Here's an example of adding validation logic in a setter: + +```javascript +class User { + constructor(username) { + this._username = username; + } + + get username() { + return this._username; + } + + set username(name) { + if (name.length < 3) { + console.error("Username must be at least 3 characters long."); + } else { + this._username = name; + } + } +} + +let user = new User("jsmith"); +console.log(user.username); // Output: jsmith +user.username = "jo"; // Output: Username must be at least 3 characters long. +console.log(user.username); // Output: jsmith +``` + +### Conclusion + +Getters and setters provide a powerful way to manage object properties in JavaScript. By using them, you can add validation, encapsulation, and computed properties, making your code more robust and maintainable. diff --git a/es/functions/hoisting.md b/es/functions/hoisting.md new file mode 100644 index 00000000..9d27e257 --- /dev/null +++ b/es/functions/hoisting.md @@ -0,0 +1,64 @@ +--- +chapter: 8 +description: Understanding Hoisting for Functions in JavaScript. +--- + +## Understanding Hoisting for Functions in JavaScript + +Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their containing scope during the compile phase. This means that you can use functions and variables before they are declared in the code. + +### Function Hoisting + +In JavaScript, function declarations are hoisted to the top of their containing scope. This allows you to call a function before it is defined in the code. + +### Example of Function Hoisting + +Here's an example to illustrate function hoisting: + +```javascript +console.log(greet()); // Output: Hello, World! + +function greet() { + return "Hello, World!"; +} +``` + +In this example, the `greet` function is called before it is defined, but it works because the function declaration is hoisted to the top of the scope. + +### Function Expressions and Hoisting + +Unlike function declarations, function expressions are not hoisted. This means that you cannot call a function expression before it is defined. + +### Example of Function Expression + +Here's an example to illustrate the difference: + +```javascript +console.log(greet()); // Output: TypeError: greet is not a function + +var greet = function() { + return "Hello, World!"; +}; +``` + +In this example, the `greet` function is defined as a function expression, and calling it before the definition results in an error because the variable `greet` is hoisted, but its assignment is not. + +### Hoisting with `let` and `const` + +Variables declared with `let` and `const` are also hoisted, but they are not initialized. This means that accessing them before their declaration results in a `ReferenceError`. + +### Example with `let` and `const` + +```javascript +console.log(greet); // Output: ReferenceError: Cannot access 'greet' before initialization + +let greet = function() { + return "Hello, World!"; +}; +``` + +In this example, the `greet` variable is hoisted, but it is not initialized, resulting in a `ReferenceError` when accessed before its declaration. + +### Conclusion + +Understanding hoisting is crucial for writing predictable and bug-free JavaScript code. Function declarations are hoisted, allowing them to be called before they are defined, while function expressions are not hoisted, leading to potential errors if called before their definition. Variables declared with `let` and `const` are hoisted but not initialized, resulting in `ReferenceError` if accessed before their declaration. diff --git a/es/functions/recursive-functions.md b/es/functions/recursive-functions.md new file mode 100644 index 00000000..1f62b74f --- /dev/null +++ b/es/functions/recursive-functions.md @@ -0,0 +1,58 @@ +--- +chapter: 8 +description: An explanation of recursive functions in JavaScript. +--- + +# Recursive Functions + +In JavaScript, a recursive function is a function that calls itself in order to solve a problem. Recursion is a powerful concept that can be used to solve complex problems by breaking them down into smaller, more manageable subproblems. This document provides an overview of recursive functions in JavaScript, their syntax, common use cases, and best practices. + +## Syntax + +A recursive function typically has the following structure: + +```javascript +function recursiveFunction(params) { + // Base case: the simplest scenario + if (/* base case condition */) { + // return a value or perform an action + } else { + // Recursive case: call the function with modified parameters + return recursiveFunction(modifiedParams); + } +} +``` +Common Use Cases +Recursive functions are often used to solve problems that can be divided into smaller, similar subproblems. Here are some common use cases: + +**Calculating Factorials**: + +A recursive function can be used to calculate the factorial of a number. + +```javascript +function factorial(n) { + if (n === 0) { + return 1; // Base case + } else { + return n * factorial(n - 1); // Recursive case + } +} + +factorial(5); // Returns 120 +``` +**Fibonacci Sequence**: +The Fibonacci sequence can be calculated using recursion. + +```javascript +function fibonacci(n) { + if (n <= 1) { + return n; // Base cases: F(0) = 0, F(1) = 1 + } else { + return fibonacci(n - 1) + fibonacci(n - 2); // Recursive case + } +} + +fibonacci(5); // Returns 5 +``` + +Recursive functions are a valuable tool in JavaScript for solving problems that involve repetitive subtasks. When used correctly, they can lead to elegant and efficient solutions. \ No newline at end of file diff --git a/es/functions/rest-operator.md b/es/functions/rest-operator.md new file mode 100644 index 00000000..d61cc690 --- /dev/null +++ b/es/functions/rest-operator.md @@ -0,0 +1,75 @@ +--- +chapter: 8 +description: Understanding the Rest Operator for Functions in JavaScript. +--- + +## Understanding the Rest Operator for Functions in JavaScript + +The rest operator (`...`) in JavaScript allows you to represent an indefinite number of arguments as an array. It is particularly useful in function definitions to handle multiple parameters without explicitly specifying them. + +### Syntax + +The rest operator is used by prefixing three dots (`...`) before the parameter name in a function definition. + +### Example of Using the Rest Operator + +Here's a basic example of using the rest operator in a function: + +```javascript +function sum(...numbers) { + return numbers.reduce((acc, curr) => acc + curr, 0); +} + +console.log(sum(1, 2, 3)); // Output: 6 +console.log(sum(4, 5, 6, 7)); // Output: 22 +``` + +In this example, the `sum` function can accept any number of arguments, which are then combined into an array called `numbers`. + +### Combining Rest Operator with Other Parameters + +You can use the rest operator in combination with other parameters, but it must be the last parameter in the function definition. + +```javascript +function greet(greeting, ...names) { + return `${greeting}, ${names.join(" and ")}!`; +} + +console.log(greet("Hello", "Alice", "Bob")); // Output: Hello, Alice and Bob! +console.log(greet("Hi", "Charlie", "Dave", "Eve")); // Output: Hi, Charlie and Dave and Eve! +``` + +In this example, the `greet` function takes a fixed `greeting` parameter and a variable number of `names`. + +### Rest Operator in Arrow Functions + +The rest operator can also be used in arrow functions: + +```javascript +const multiply = (...numbers) => numbers.reduce((acc, curr) => acc * curr, 1); + +console.log(multiply(2, 3)); // Output: 6 +console.log(multiply(4, 5, 6)); // Output: 120 +``` + +### Practical Use Cases + +1. **Handling Variable Arguments**: Functions that need to handle a variable number of arguments, such as mathematical operations or string manipulations. +2. **Combining Arrays**: Functions that need to combine multiple arrays into one. +3. **Event Handlers**: Functions that handle events with varying numbers of arguments. + +### Example of Combining Arrays + +Here's an example of using the rest operator to combine arrays: + +```javascript +function combineArrays(...arrays) { + return arrays.flat(); +} + +console.log(combineArrays([1, 2], [3, 4], [5, 6])); // Output: [1, 2, 3, 4, 5, 6] +``` + +### Conclusion + +The rest operator is a powerful feature in JavaScript that allows functions to handle an indefinite number of arguments efficiently. By using the rest operator, you can write more flexible and concise functions that can adapt to various input scenarios. diff --git a/es/functions/set-interval.md b/es/functions/set-interval.md new file mode 100644 index 00000000..dd008c07 --- /dev/null +++ b/es/functions/set-interval.md @@ -0,0 +1,57 @@ +--- +chapter: 8 +pageNumber: 55 +Title: Set Interval +--- + + +# Set Interval +The `setInterval` method is used to call a function and add a delay time to it, in milliseconds, before the function will run again. For example, if you're making a function that generates a random color, you can use `setInterval()` to say how long the computer has to wait before the function runs again and generates another color. This is useful in making functions repeat. + +The first parameter in the method is the name of the function for which you're setting an interval. The second parameter specifies the duration of the interval. You can also add additional parameters if you want to pass arguments to the function. + +As another simple example, let's create a function called `repeatSaying` where it says "And again!" every 2 seconds in the [console](https://javascript.sumankunwar.com.np/en/exercises/console.html). + +```js +function repeatSaying() { +console.log("And again"); +} +//when called, it generates in the console: "And again!" + +setInterval(repeatSaying, 2000); +//calls the function every 2 seconds + + +``` +You can also add parameters of a function when you use set interval. Continuing on with the previous example let's add an ellipsis to the console statement, to show that it repeats. First we'll add a parameter called `el` which is short for ellipse. Next we'll add a `+` followed by calling are parameter `el` to show that the value of the parameter comes after. Finally in set interval let's add a comma `,` followed by a string for the value of the ellipse parameter, we'll put `"..."`. + +```js +function repeatSaying(el) { +console.log("And again!" + el); +} + +setInterval(repeatSaying, 2000, "..."); +//When it runs, it'll repeat the saying "And again!..." +``` + +As you can see from this example, after you put the function and interval for the function, you can set the values of the function parameters inside set interval. + + + + +## Clear Interval +You can use the `clearInterval()` method to remove a set interval with a specefic variable name. As an example based on the previous one let's store set interval into a variable named `intervalTime`, however, right after our variable we'll call it inside clear interval by writing `clearInterval(intervalTime).` + +```js +function repeatSaying(el) { +console.log("And again!" + el); +} + +var interval = setInterval(repeatSaying, 2000, "..."); + +clearInterval(interval); +//The clear Interval method stops setInterval +``` + +When this code is run, you'll see that there is no output. This is because `setInterval` was the only thing calling the `repeatSaying` function, but since it was removed by `clearInterval` it's no longer is called. Even if it was called seperately using `repeatSaying()` it would only run once because clear Interval stops it from repeating. + diff --git a/es/functions/set-timeout.md b/es/functions/set-timeout.md new file mode 100644 index 00000000..6e661e3f --- /dev/null +++ b/es/functions/set-timeout.md @@ -0,0 +1,37 @@ +--- +chapter: 8 +pageNumber: 56 +Title: Set Timeout +--- + +# Set Timeout +The `setTimeout` global method is used to add a delay (in milliseconds) before a function is ran. + +For instance, in this example after "Ready..." is written in the console, the function `start()` has to wait 3 seconds before running. + +```js +console.log("Ready..."); + +function start() { +console.log("go!!"); +} + +setTimeout(start, 3000); + +//Output: "Ready..." then after 3 seconds, "go!!" +``` + +# Clear Timeout +The `clearTimeout` global method is used to remove any `setTimeout()` methods that are stored in variables. For instance, let's change our last example by storing `setTimeout()` in a variable +```js +console.log("Ready..."); + +function start() { +console.log("go!!"); +} + +let timeBeforeStart = setTimeout(start, 3000); + +clearTimeout(timeBeforeStart); +// Stops the function as a whole from running +``` \ No newline at end of file diff --git a/es/functions/this-keyword.md b/es/functions/this-keyword.md new file mode 100644 index 00000000..012d9ed2 --- /dev/null +++ b/es/functions/this-keyword.md @@ -0,0 +1,124 @@ +--- +chapter: 8 +description: Understanding the `this` Keyword in JavaScript. +--- + +## Understanding the `this` Keyword in JavaScript + +The `this` keyword in JavaScript refers to the object it belongs to. It has different values depending on where it is used: in a method, alone, in a function, in an event, etc. + +### `this` in Global Context + +In the global execution context (outside of any function), `this` refers to the global object, which is `window` in browsers. + +```javascript +console.log(this); // Output: Window {...} +``` + +### `this` in Object Methods + +When used in an object method, `this` refers to the object the method belongs to. + +```javascript +const person = { + firstName: "John", + lastName: "Doe", + fullName: function() { + return `${this.firstName} ${this.lastName}`; + } +}; + +console.log(person.fullName()); // Output: John Doe +``` + +### `this` in Constructor Functions + +In a constructor function, `this` refers to the newly created instance. + +```javascript +function Person(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; +} + +const person1 = new Person("Jane", "Smith"); +console.log(person1.firstName); // Output: Jane +``` + +### `this` in Arrow Functions + +Arrow functions do not have their own `this`. Instead, `this` is lexically inherited from the outer function where the arrow function is defined. + +```javascript +const person = { + firstName: "John", + lastName: "Doe", + fullName: function() { + const getFullName = () => `${this.firstName} ${this.lastName}`; + return getFullName(); + } +}; + +console.log(person.fullName()); // Output: John Doe +``` + +### `this` in Event Handlers + +In event handlers, `this` refers to the element that received the event. + +```html + + +``` + +### Changing `this` with `call`, `apply`, and `bind` + +You can explicitly set the value of `this` using `call`, `apply`, and `bind`. + +#### `call` Method + +The `call` method calls a function with a given `this` value and arguments provided individually. + +```javascript +function greet() { + console.log(`Hello, ${this.name}`); +} + +const person = { name: "Alice" }; +greet.call(person); // Output: Hello, Alice +``` + +#### `apply` Method + +The `apply` method calls a function with a given `this` value and arguments provided as an array. + +```javascript +function greet(greeting) { + console.log(`${greeting}, ${this.name}`); +} + +const person = { name: "Bob" }; +greet.apply(person, ["Hi"]); // Output: Hi, Bob +``` + +#### `bind` Method + +The `bind` method creates a new function that, when called, has its `this` keyword set to the provided value. + +```javascript +function greet() { + console.log(`Hello, ${this.name}`); +} + +const person = { name: "Charlie" }; +const greetPerson = greet.bind(person); +greetPerson(); // Output: Hello, Charlie +``` + +### Conclusion + +Understanding the `this` keyword is crucial for writing effective JavaScript code. Its value depends on the context in which it is used, and it can be explicitly set using `call`, `apply`, and `bind`. \ No newline at end of file diff --git a/es/json.md b/es/json.md index 81675435..18eb5ce4 100644 --- a/es/json.md +++ b/es/json.md @@ -1,7 +1,7 @@ --- layout: editorial chapter: 11 -pageNumber: 67 +pageNumber: 82 description: JSON (JavaScript Object Notation, Notación de objetos JavaScript en español ) es un formato de intercambio de datos ligero que se utiliza para representar e intercambiar datos entre diferentes sistemas y plataformas. Es ampliamente utilizado para la transmisión y almacenamiento de datos, especialmente en el desarrollo web. --- @@ -36,11 +36,11 @@ console.log(JSONoriginal); Los siguientes tipos de datos son compatibles con JSON. -* string -* number -* array -* boolean -* objeto con valores JSON válidos -* `null` +* [string](./strings/README.md) +* [number](./numbers/README.md) +* [array](./arrays/README.md) +* [boolean](./basics/types.md#Boolean) +* [object](./basics/types.md#Object) con valores JSON válidos +* [null](./basics/types.md#NULL) No puede ser `function`, `date` o `undefined`. diff --git a/es/loops/README.md b/es/loops/README.md index 6dcad70d..7182248b 100644 --- a/es/loops/README.md +++ b/es/loops/README.md @@ -1,7 +1,7 @@ --- layout: editorial chapter: 7 -pageNumber: 49 +pageNumber: 62 description: Los bucles son estructuras de control que le permiten ejecutar un bloque de código repetidamente hasta que se cumpla una condición específica. Son esenciales para automatizar tareas repetitivas e iterar sobre estructuras de datos como matrices y cadenas. --- @@ -28,3 +28,11 @@ for (var i = 0; i < coches.length; i++) { hacerAlgo(coches[i]); } ``` + +En este capítulo vamos a discutir los siguientes temas: + +* [For](./for.md) +* [While](./while.md) +* [Do...While](./dowhile.md) +* [Continue](./continue.md) +* [Break](./break.md) diff --git a/es/loops/break.md b/es/loops/break.md new file mode 100644 index 00000000..09c15b63 --- /dev/null +++ b/es/loops/break.md @@ -0,0 +1,56 @@ +--- +chapter: 7 +pageNumber: 54 +description: Una declaración break se utiliza para salir de un bucle siempre que se cumple una condición específica. +--- + +# Break + +El bucle finaliza cuando la condición especificada para el bucle se vuelve falsa. Sin embargo, podemos finalizar cualquier bucle de manera forzada mediante la declaración `break`. + +## Sintaxis + +La sintaxis de `break` en JavaScript se muestra a continuación + +```javascript +for (inicializacion; condicion finalizacion; cambio) { + if(condicionParaRomper){ + break; + } +} +``` + +## Explicación + +- Dentro del bucle for, siempre que se cumpla la condición `condicionParaRomper`, el control llega fuera del bucle for y el bucle finaliza. + +## Ejemplo + +- Supongamos que tenemos una matriz de números y necesitamos imprimir la primera aparición de un número divisible por 5. Podemos usar la declaración `break` para lograr esto: + +```javascript +const arr = [4, 7, 9, 11, 45, 23, 15, 87]; + +for(let i = 0; i < arr.length; i++){ + if(arr[i]%5 == 0){ + console.log(arr[i]); + break; + } +} +// Este código imprimirá 45, que es la primera aparición de un número divisible por 5. +``` + +- La declaración `break` también se puede utilizar dentro del bucle `while`. + +```javascript +const arr = [4, 7, 9, 11, 45, 23, 15, 87]; +let i = 0; +while(i < arr.length){ + if(arr[i]%5 == 0){ + console.log(arr[i]); + break; + } + i++; +} +// Este código también imprimirá 45, que es la primera aparición de un número divisible por 5. +``` diff --git a/es/loops/continue.md b/es/loops/continue.md new file mode 100644 index 00000000..07c3540f --- /dev/null +++ b/es/loops/continue.md @@ -0,0 +1,22 @@ +--- +title: Continue +description: Una explicación de la declaración continue en JavaScript con un ejemplo. +--- + +# Continue + +La sentencia `continue` en JavaScript es una declaración de control de flujo utilizada para saltar la iteración actual de un bucle y continuar con la siguiente iteración. Permite omitir código específico dentro de un bucle bajo ciertas condiciones. Este documento proporciona una descripción general de la declaración `continue` en JavaScript, su sintaxis, casos de uso comunes y prácticas recomendadas. + +## Sintaxis + +En JavaScript, la declaración `continue` se usa dentro de los bucles. La sintaxis es sencilla: + +```javascript +for (let i = 1; i <= 5; i++) { + if (i === 3) { + console.log("Saltando 3."); + continue; + } + console.log(`Valor actual de i: ${i}`); +} +``` diff --git a/es/loops/for.md b/es/loops/for.md index c41f6024..1b9f7b22 100644 --- a/es/loops/for.md +++ b/es/loops/for.md @@ -1,18 +1,31 @@ --- chapter: 7 -pageNumber: 50 +pageNumber: 63 description: Un bucle for es una potente estructura de control que se utiliza para ejecutar un bloque de código varias veces, ya sea para un número específico de iteraciones o en un rango definido. Es muy versátil y se usa comúnmente para iterar a través de matrices, cadenas y otros objetos iterables. --- -# For + + +# Bucles For + +## For La forma más sencilla de bucle es la declaración for. Éste tiene una sintaxis similar a una declaración if, pero con más opciones: +### Sintaxis `for` + ```javascript -for (condicion; condicion_finalizacion; cambio) { +for (inicializacion; condicion_finalizacion; cambio) { // hazlo, hazlo ahora } ``` +### Explicación + +- En la parte `inicializacion`, ejecutada antes de la primera iteración, se inicializa su variable de bucle +- En la parte `condicion_finalizacion`, se coloca una condición que puede ser comprobada antes de cada iteración. En el momento en el que la condición se vuelva `false`, el bucle termina. +- En la parte `cambio`, le indicamos al programa cómo actualizar la variable de bucle +- In the `change` part, tell the program how to update the loop variable. + Veamos cómo ejecutar el mismo código diez veces usando un bucle `for`: ```javascript @@ -23,40 +36,144 @@ for (let i = 0; i < 10; i = i + 1) { > _**Nota**_: `i = i + 1` se puede escribir `i++`. -Para recorrer las propiedades de un objeto o una matriz también se puede utilizar un bucle `for in`. +## Bucle `for...in` + +Para recorrer las propiedades enumerables de un objeto también se puede utilizar un bucle `for in`. Por cada propiedad distinta, JavaScript ejecuta las sentencias especificadas. + +### Sintaxis `for...in` ```javascript -for (clave in objeto) { - // bloque de código a ejecutar +for (variable in objeto) { + // iterar cada propiedad en el objeto } ``` -A continuación se muestran ejemplos de bucle `for in` para un objeto y una matriz: +### Ejemplos + +Supongamos que tenemos el siguiente objeto: + +```javascript +const persona = { + nombre:"John", + apellido:"Doe", + edad:25 + }; +``` + +Luego, con la ayuda del bucle `for in` podemos iterar sobre el objeto `persona` para acceder a sus propiedades como `nombre`, `apellido` y `edad` como se muestra a continuación. ```javascript -const persona = {nombre:"John", apellido:"Doe", edad:25}; let info = ""; for (let x in persona) { info += persona[x]; } +``` + +La salida del fragmento de código anterior será: + +```javascript +John +Doe +25 +``` + +> **Nota: Los objetos iterables como `Arrays (matrices)`, `Strings (cadenas)`, `Maps (mapas)`, `NodeLists (Listas de nodos)` se pueden recorrer en bucle utilizando la declaración `for in`** + +```javascript +// Ejemplo con matrices +const miMatriz = [1, 2, 3, 4, 5]; +for (const elemento of miMatriz) { + console.log(elemento; +} + +// Ejemplo con cadenas +const miCadena = "¡Hola mundo!"; +for (const caracter of miCadena) { + console.log(caracter); +} + +// Ejemplo con Mapas +const miMapa = new Map(); +miMapa.set("nombre", "Juan"); +miMapa.set("edad", 30); + +for (const [clave, valor] of miMapa) { + console.log(clave, valor); +} -// Resultado: info = "JohnDoe25" +// Ejemplo con Listas de Nodos (Elementos HTML) +const parrafos = document.querySelectorAll("p"); +for (const parrafo of parrafos) { + console.log(parrafo.textContent); +} +``` + +## Bucle `for...of` + +El bucle `for...of` se introdujo en las versiones posteriores de **[JavaScript ES6](../es6-concepts/README.md)**. La instrucción `for...of` ejecuta un bucle que opera sobre una secuencia de valores provenientes de objetos iterables como `Array`, `String`, `TypedArray`, `Map`, `Set`, `NodeList` (y otras colecciones del DOM). -const numeros = [45, 4, 9, 16, 25]; -let txt = ""; -for (let x in numeros) { - txt += numeros[x]; +### Sintaxis `for...of` + +La sintaxis del bucle `for...of` es: + +```javascript +for (elemento of objeto_iterable) { + //cuerpo de for...of } +``` + +Donde: + +- **objeto_iterable** - un objeto iterable (cuyas propiedades pueden recorrerse con un bucle) +- **elemento** - los distintos elementos en el objeto iterable + +En términos simples, puedes leer el código anterior como: “para cada elemento del iterable, ejecuta el cuerpo del bucle”. -// Resultado: txt = '45491625' +### Ejemplos `for...of` + +Supongamos que tenemos el siguiente objeto: + +```javascript +const persona = ["Juan Pérez", "Alberto", "Neo"]; ``` -El valor de objetos iterables como `Arrays`, `Strings`, `Maps`, `NodeLists` se puede iterar usando la declaración `for of`. +Luego, con la ayuda del bucle `for of` podemos iterar sobre el objeto `persona` para acceder a su elemento individual como se muestra a continuación. ```javascript -let lenguaje = "JavaScript"; -let text = ""; -for (let x of lenguaje) { -text += x; +let info = ""; +for (let x of persona) { + console.log(x); +} +``` + +La salida del fragmento de código anterior será: + +```javascript +Juan Pérez +Alberto +Neo +``` + +A continuación se detalla el uso del bucle `for...of` con cadenas, mapas y listas de nodos: + +```js +// Ejemplo con cadenas +const texto = "¡Hola mundo!"; +for (const caracter of texto) { + console.log(caracter); +} + +// Ejemplo con mapas +const persona = new Map(); +persona.set("nombre", "Juan"); +persona.set("edad", 30); +for (const [clave, valor] of persona) { + console.log(clave, valor); +} + +// Ejemplo con NodeLists (Elementos de HTML) +const parrafos = document.querySelectorAll("p"); +for (const parrafo of parrafos) { + console.log(parrafo.textContent); } ``` diff --git a/es/modules.md b/es/modules.md index 057f71d6..f12902bd 100644 --- a/es/modules.md +++ b/es/modules.md @@ -1,7 +1,7 @@ --- layout: editorial chapter: 13 -pageNumber: 70 +pageNumber: 87 description: Los módulos son una forma de organizar el código en componentes separados, reutilizables y encapsulados. Los módulos permiten a los desarrolladores dividir bases de código grandes y complejas en partes más pequeñas y manejables, lo que facilita la comprensión, el mantenimiento y la colaboración en los proyectos. --- @@ -13,9 +13,9 @@ En el mundo real, un programa crece orgánicamente para hacer frente a las neces Los _Módulos_ vienen a evitar estos problemas. Un `módulo` especifica de qué piezas de código depende, junto con qué funcionalidad proporciona para que la utilicen otros módulos. Los módulos que dependen de otro módulo se denominan _dependencias_. Existen varias bibliotecas de módulos para organizar el código en módulos y cargarlo según demanda. -* AMD - uno de los sistemas modulares más antiguos, utilizado inicialmente por [require.js](https://requirejs.org/). -* CommonJS - Sistema de módulos creado para el servidor Node.js. -* UMD - Sistema de módulos compatible con AMD y CommonJS. +* **AMD** - uno de los sistemas modulares más antiguos, utilizado inicialmente por [require.js](https://requirejs.org/). +* **CommonJS** - Sistema de módulos creado para el servidor Node.js. +* **UMD** - Sistema de módulos compatible con AMD y CommonJS. Los módulos pueden cargarse entre sí y utilizar directivas especiales `import` y `export` para intercambiar funcionalidades y llamar funciones entre sí. diff --git a/es/numbers/README.md b/es/numbers/README.md index 9f27e829..dfce6e68 100644 --- a/es/numbers/README.md +++ b/es/numbers/README.md @@ -40,3 +40,9 @@ Las constantes numéricas se interpretan como hexadecimales si van precedidas de ```javascript let z = 0xFF; // 255 ``` + +En este capítulo, exploraremos los siguientes temas: + +* [Math](./math.md) +* [Operadores básicos](./operators.md) +* [Operadores avanzados](./advanced.md) diff --git a/es/numbers/advanced.md b/es/numbers/advanced.md index c1c7cbcd..9bfdcc7f 100644 --- a/es/numbers/advanced.md +++ b/es/numbers/advanced.md @@ -1,6 +1,6 @@ --- chapter: 3 -pageNumber: 21 +pageNumber: 28 description: Existen varios operadores avanzados que brindan una potente funcionalidad y nos permiten realizar diversas operaciones más allá de las operaciones aritméticas y lógicas básicas. Estos operadores avanzados pueden resultar muy útiles para manipular datos, realizar operaciones bit a bit, trabajar con objetos y más. --- # Operadores avanzados diff --git a/es/numbers/math.md b/es/numbers/math.md index 891b5ead..13fd90c8 100644 --- a/es/numbers/math.md +++ b/es/numbers/math.md @@ -1,6 +1,6 @@ --- chapter: 3 -pageNumber: 17 +pageNumber: 19 description: El objeto Math permite realizar operaciones matemáticas en JavaScript. Es estático y no tiene constructor. Se pueden utilizar el método y las propiedades del objeto Math sin crear primero un objeto Math. --- # Math diff --git a/es/numbers/operators.md b/es/numbers/operators.md index e44c495d..0d075123 100644 --- a/es/numbers/operators.md +++ b/es/numbers/operators.md @@ -1,41 +1,80 @@ --- chapter: 3 -pageNumber: 19 +pageNumber: 21 description: Los operadores son símbolos o palabras clave que se utilizan para realizar operaciones con datos, como variables, valores o expresiones. Son una parte esencial del lenguaje y permiten a los desarrolladores realizar operaciones aritméticas, de comparación, lógicas, de asignación y de otro tipo. --- + # Operadores básicos -Las operaciones matemáticas con números se pueden realizar utilizando algunos operadores básicos como: +En JavaScript, un operador es un símbolo o palabra clave con el que el usuario realiza operaciones sobre operandos (valores y variables). Por ejemplo: + +```javascript +2 + 3; //5 +``` + +Aquí `+` es un operador que realiza la suma, y `2` y `3` son los operandos. + +## Tipos de operadores + +Hay varios operadores soportados por JavaScript. Son los siguientes: + +- [Operadores aritméticos](#arithmetic-operators) +- [Operadores de asignación](#assignment-operators) +- [Operadores de comparación](#comparison-operators) +- [Operadores lógicos](#logical-operators) +- [Operadores ternarios](#ternary-operators) +- [Operadores bit a bit](#bitwise-operators) +- [Operador `typeof`](#typeof-operators) + +### Operadores aritméticos {#arithmetic-operators} + +Los operadores aritméticos se usan para realizar operaciones matemáticas con los valores. Estos incluyen -* **Operador de suma (`+`)**: El operador de suma suma dos números. Por ejemplo: +- [Operador Suma (`+`)](#addition-operator) +- [Operador Resta (`-`)](#subtraction-operator) +- [Operador Multiplicación (`*`)](#multiplication-operator) +- [Operador División (`/`)](#division-operator) +- [Operador Resto (`%`)](#remainder-operator) + +#### Operador Suma (`+`) {#addition-operator} + +El operador de suma suma dos números. Por ejemplo: ```javascript console.log(1 + 2); // 3 -console.log(1 + (-2)); // -1 +console.log(1 + -2); // -1 ``` -* **Operador de resta (`-`)**: El operador de resta resta un número de otro. Por ejemplo: +#### Operador Resta (`-`) {#subtraction-operator} + +El operador de resta resta un número de otro. Por ejemplo: ```javascript console.log(3 - 2); // 1 -console.log(3 - (-2)); // 5 +console.log(3 - -2); // 5 ``` -* **Operador de multiplicación (`*`)**: El operador de multiplicación multiplica dos números. Por ejemplo: +#### Operador Multiplicación (`*`) {#multiplication-operator} + +El operador de multiplicación multiplica dos números. Por ejemplo: ```javascript console.log(2 * 3); // 6 -console.log(2 * (-3)); // -6 +console.log(2 * -3); // -6 ``` -* **Operador de división (`/`)**: El operador de división divide un número por otro. Por ejemplo: +#### Operador División (`/`) {#division-operator} + +El operador de división divide un número por otro. Por ejemplo: ```javascript console.log(6 / 2); // 3 -console.log(6 / (-2)); // -3 +console.log(6 / -2); // -3 ``` -* **Operador módulo (`%`)**: El operador módulo devuelve el resto de una operación de división. Por ejemplo: +#### Operador Resto (`%`) {#remainder-operator} + +El operador de resto devuelve el resto de una operación de división. Por ejemplo: ```javascript console.log(10 % 3); // 1 @@ -43,21 +82,19 @@ console.log(11 % 3); // 2 console.log(12 % 3); // 0 ``` -El intérprete de JavaScript funciona de izquierda a derecha. Se pueden usar paréntesis como en matemáticas para separar y agrupar expresiones: - -`c = (a / b) + d` +El intérprete de JavaScript funciona de izquierda a derecha. Se pueden utilizar paréntesis, como en matemáticas, para separar y agrupar expresiones.: `c = (a / b) + d` {% hint style="warning" %} JavaScript utiliza el operador `+` tanto para la suma como para la concatenación. Los números se suman mientras que las cadenas se concatenan. {% endhint %} -El término `NaN` es una palabra reservada que indica que un número no es un número legal, esto surge cuando realizamos aritmética con una cadena no numérica la cual dará como resultado `NaN` (Not a Number, no es un número, en español). +El término `NaN` es una palabra reservada que indica que un número no es un número legal, esto surge cuando realizamos operaciones aritméticas con una cadena no numérica que dará como resultado `NaN` (No es un número). ```javascript let x = 100 / "10"; ``` -El método `parseInt` analiza un valor como una cadena y devuelve el primer número entero. +El método `parseInt` analiza un valor como una cadena y devuelve el primer entero. ```javascript parseInt("10"); // 10 @@ -65,19 +102,19 @@ parseInt("10.00"); // 10 parseInt("10.33"); // 10 parseInt("34 45 66"); // 34 parseInt(" 60 "); // 60 -parseInt("40 years"); //40 +parseInt("40 years"); //40 parseInt("He was 40"); //NaN ``` -En JavaScript, si calculamos un número fuera del mayor número posible, devuelve `Infinity` (infinito en español). +En JavaScript, si calculamos un número más alla del número más grande posible se devuelve `Infinity`. ```javascript -let x = 2 / 0; // Infinity +let x = 2 / 0; // Infinity let y = -2 / 0; // -Infinity ``` {% exercise %} -Utilice los operadores matemáticos +, -, *, / y % para realizar las siguientes operaciones en `num1` y `num2`. +Use los operadores matemáticos +, -, \*, /, y % para realizar las siguientes operaciones sobre `num1` y `num2`. {% initial %} let num1 = 10; @@ -91,7 +128,7 @@ let subtractResult = let multiplyResult = // Divida num1 por num2. let divideResult = -// Encuentre el resto al dividir num1 por num2. +// Encuentre el resto cuando num1 se divide por num2. let reminderResult = {% solution %} @@ -103,14 +140,258 @@ let addResult = (num1 + num2); // Reste num2 de num1. let subtractResult = (num1 - num2); // Multiplique num1 por num2. -let multiplyResult = (num1 * num2); +let multiplyResult = (num1 \* num2); // Divida num1 por num2. let divideResult = (num1 / num2); -// Encuentre el resto al dividir num1 por num2. +// Encuentre el resto cuando num1 se divide por num2. let reminderResult = (num1 % num2); {% validation %} -assert(addResult === 15 && subtractResult === 5 && multiplyResult === 50 && divideResult === 2 && reminderResult === 0 ); +assert(addResult === 15 && subtractResult === 5 && multiplyResult === 50 && divideResult === 2 && reminderResult === 0 ); {% context %} {% endexercise %} + +### Operadores de asignación {#assignment-operators} + +Los operadores de asignación se utilizan para asignar valores a variables o evaluar el valor asignado. Es posible encadenar el operador de asignación para asignar un único valor a varios valores. Incluyen el operador de asignación (`=`) y operadores de asignación compuestos como `+=`, `-=`, `*=` y `/=`. + +#### `=` (Operador de asignación) + +Este operador se usa para asignar el valor del lado derecho a la variable en el lado izquierdo. +Por ejemplo: + +```javascript +let x = 10; //Asigna el valor 10 a la variable x. +``` + +#### Operadores de asignación compuestos + +Estos operadores combinan la operación aritmética con la operación de asignación. Son atajos para realizar una operación y luego asignar el resultado nuevamente a la variable. +Por ejemplo: + +##### `+=` (Asignación de suma) + +Agrega el valor del lado derecho a la variable y asigna el resultado nuevamente a la variable. + +##### `-=` (Asignación de resta) + +Resta el valor del lado derecho de la variable y asigna el resultado nuevamente a la variable. + +##### `*=-` (Asignación de multiplicación) + +Multiplica la variable por el valor del lado derecho y asigna el resultado nuevamente a la variable. + +##### `/=` (Asignación de división) + +Divide la variable por el valor del lado derecho y asigna el resultado nuevamente a la variable. + +##### `%=` (Módulo/Asignación de resto) + +Calcula el resto cuando la variable se divide por el valor del lado derecho y asigna el resultado nuevamente a la variable. + +```javascript +let a = 10; +a += 5; // Equivalente a a = a + 5; (a se convierte en 15) +a -= 3; // Equivalente a a = a - 3; (a se convierte en 12) +a *= 2; // Equivalente a a = a * 2; (a se convierte en 24) +a /= 4; // Equivalente a a = a / 4; (a se convierte en 6) +a %= 5; // Equivalente a a = a % 5; (a se convierte en 1) +``` + +### Operadores de comparación {#comparison-operators} + +Los operadores de comparación se utilizan para comparar dos valores o expresiones y devolver un resultado `boolean`, que puede ser `true` o `false`. Estos operadores se utilizan habitualmente en declaraciones condicionales para tomar decisiones o evaluar condiciones. + +#### Igual a (`==`) + +Este operador verifica si los valores de los lados izquierdo y derecho son iguales. Si son iguales, devuelve `true`; de lo contrario, devuelve `false`. No tiene en cuenta los tipos de datos. + +```javascript +5 == 5; // verdadero (muestra 'true' en la consola) +"5" == 5; // verdadero (conversión implícita del tipo, muestra 'true' en la consola) +``` + +#### No igual a (`!=`) + +Este operador comprueba si los valores de los lados izquierdo y derecho no son iguales. Si no son iguales, devuelve `true`; de lo contrario, devuelve `false`. + +```javascript +5 != 3; // verdadero (muestra 'true' en la consola) +"5" != 5; // falso (conversión implícita del tipo, muestra 'false' en la consola) +``` + +#### Estrictamente igual a (`===`) + +Este operador verifica si los valores de los lados izquierdo y derecho son iguales y tienen el mismo tipo de datos. Si tanto el valor como el tipo de datos coinciden, devuelve `true`; de lo contrario, devuelve `false`. + +```javascript +5 === 5; // verdadero (muestra 'true' en la consola) +"5" === 5; // falso (muestra 'false' en la consola, tipos de datos diferentes) +``` + +#### Estrictamente no igual a (`!==`) + +Este operador verifica si los valores de los lados izquierdo y derecho no son iguales o tienen tipos de datos diferentes. Si no son iguales o tienen tipos de datos diferentes, devuelve `true`; de lo contrario, devuelve `false`. + +```javascript +5 !== "5"; // verdadero (muestra 'true' en la consola, tipos de datos diferentes) +5 !== 5; // falso (muestra 'false' en la consola) +``` + +#### Mayor que (`>`) + +Este operador comprueba si el valor de la izquierda es mayor que el valor de la derecha. Si el valor de la izquierda es mayor, devuelve `true`; de lo contrario, devuelve `false`. + +```javascript +8 > 5; // verdadero (muestra 'true' en la consola) +3 > 10; // falso (muestra 'false' en la consola) +``` + +#### Menor que (`<`) + +Este operador comprueba si el valor de la izquierda es menor que el valor de la derecha. Si el valor de la izquierda es menor, devuelve `true`; de lo contrario, devuelve `false`. + +```javascript +3 < 5; // verdadero (muestra 'true' en la consola) +8 < 2; // falso (muestra 'false' en la consola) +``` + +#### Mayor o igual que (`>=`) + +Este operador comprueba si el valor de la izquierda es mayor o igual que el valor de la derecha. Si el valor de la izquierda es mayor o igual, devuelve `true`; de lo contrario, devuelve `false`. + +```javascript +8 >= 5; // verdadero (muestra 'true' en la consola) +3 >= 8; // falso (muestra 'false' en la consola) +``` + +#### Menor o igual que (`>=`) + +Este operador comprueba si el valor de la izquierda es menor o igual que el valor de la derecha. Si el valor de la izquierda es menor o igual, devuelve `true`; de lo contrario, devuelve `false`. + +```javascript +3 <= 5; // verdadero (muestra 'true' en la consola) +8 <= 2; // falso (muestra 'false' en la consola) +``` + +### Operadores lógicos {#logical-operators} + +Los operadores lógicos se utilizan para realizar operaciones lógicas con valores o expresiones booleanos. Estos operadores permiten combinar o manipular valores booleanos para tomar decisiones o evaluar condiciones complejas. + +#### AND lógico (`&&`) + +El operador lógico AND devuelve `true` si ambos operandos son `true`. Si al menos uno de los operandos es `falso`, devuelve `falso`. + +```javascript +true && true; // devuelve 'true' +true && false; // devuelve 'false' +false && true; // devuelve 'false' +false && false; // devuelve 'false' +``` + +#### OR lógico (`||`) + +El operador lógico OR devuelve `true` si al menos uno de los operandos es `true`. Devuelve `falso` solo si ambos operandos son `false`. + +```javascript +true || true; // devuelve 'true' +true || false; // devuelve 'true' +false || true; // devuelve 'true' +false || false; // devuelve 'false' +``` + +#### NOT lógico (`!`) + +El operador lógico NOT niega el valor de un operando. Devuelve `true` si el operando es `false` y devuelve `false` si el operando es `true`. + +```javascript +!true; // devuelve 'false' +!false; // devuelve 'true' +``` + +### Operador ternario {#ternary-operators} + +El operador ternario tiene tres operandos. Es el operador simplificado del if/else. + +Es la forma abreviada de la condición `if-else`. + +**Sintaxis:** + +```js +Y = ? A : B +// Si la condifición es true entonces Y = A; de lo contrario Y = B +``` + +```javascript +let esPar = 8 % 2 === 0 ? "Par" : "Impar"; +console.log(esPar); // "Par" +``` + +### Operadores bit a bit {#bitwise-operators} + +Los operadores bit a bit se utilizan para manipular bits individuales de números binarios. Realizan operaciones a nivel de bit, lo que resulta especialmente útil en situaciones en las que es necesario controlar o analizar datos de bajo nivel. + +#### AND bit a bit (`&`) + +Este operador compara cada bit de dos números y devuelve 1 por cada bit que sea 1 en ambos números. Todos los demás bits se establecen en 0. + +```javascript +1010 & 1100; // 1000 +``` + +#### OR bit a bit (`|`) + +Este operador compara cada bit de dos números y devuelve 1 por cada bit que sea 1 en al menos uno de los números. + +```javascript +1010 | 1100; // 1110 +``` + +#### XOR bit a bit (`^`) + +Este operador compara cada bit de dos números y devuelve 1 por cada bit que sea 1 en un número pero no en ambos. + +```javascript +1010 ^ 1100; // 0110 +``` + +#### NOT bit a bit (`-`) + +Este operador invierte (cambia) todos los bits de un número. Cambia cada 0 por 1 y cada 1 por 0. + +```javascript +~1010; // 0101 +``` + +#### Desplazamiento a la izquierda (`<<`) + +Este operador desplaza los bits de un número hacia la izquierda una cantidad específica de posiciones, rellenando las posiciones desplazadas con 0. + +```javascript +1010 << 2; // 101000 (desplazado 2 posiciones hacia la izquierda) +``` + +#### Desplazamiento a la derecha (`>>`) + +Este operador desplaza los bits de un número hacia la derecha una cantidad específica de posiciones. Las posiciones desplazadas hacia adentro se completan según el bit más a la izquierda (bit de signo). + +```javascript +1010 >> 2; // 0010 (desplazado 2 posiciones hacia la derecha) +``` + +### Operador `typeof` {#typeof-operators} + +Devuelve el tipo de operando. Los tipos posibles que existen en javascript son undefined, Object, boolean, number, string, symbol, and function. + +```javascript +let value1 = 42; +let value2 = "¡Hola mundo!"; +let value3 = true; +let value4 = null; + +console.log(typeof value1); // devuelve "number" +console.log(typeof value2); // devuelve "string" +console.log(typeof value3); // devuelve "boolean" +console.log(typeof value4); // devuelve "object" (Nota: `typeof null` devuelve "object" debido a razones históricas) +``` diff --git a/es/objects/SUMMARY.md b/es/objects/SUMMARY.md new file mode 100644 index 00000000..32d8ca94 --- /dev/null +++ b/es/objects/SUMMARY.md @@ -0,0 +1,153 @@ +# Índice de contenidos + +- [Dedicatoria](Dedication.md) +- [Derechos de autor](Copyright.md) +- [Prefacio](Preface.md) +- [Introducción](README.md) +- [Lo esencial](basics/README.md) + - [Comentarios](basics/comments.md) + - [Variables](basics/variables.md) + - [Tipos](basics/types.md) + - [Igualdad](basics/equality.md) +- [Números](numbers/README.md) + - [Math](numbers/math.md) + - [Operadores básicos](numbers/operators.md) + - [Operadores avanzados](numbers/advanced.md) +- [Cadenas](strings/README.md) + - [Creación](strings/create.md) + - [Replace](strings/replace.md) + - [Length](strings/length.md) + - [Concatenación](strings/concat.md) + - [Split](strings/split.md) + - [CharAt](strings/charAt.md) + - [Substring](strings/substring.md) +- [Lógica condicional](conditional/README.md) + - [If](conditional/if.md) + - [Else](conditional/else.md) + - [Switch](conditional/switch.md) + - [Comparadores](conditional/comparators.md) + - [Concatenación](conditional/concatenate.md) +- [Matrices](arrays/README.md) + - [Unshift](arrays/unshift.md) + - [Map](arrays/map.md) + - [Spread](arrays/spread.md) + - [Shift](arrays/shift.md) + - [Pop](arrays/pop.md) + - [Join](arrays/join.md) + - [Length](arrays/length.md) + - [Push](arrays/push.md) + - [For Each](arrays/for-each.md) + - [Sort](arrays/sort.md) + - [Índices](arrays/indices.md) + - [Reverse](arrays/reverse.md) + - [Slice](arrays/slice.md) +- [Bucles](loops/README.md) + - [For](loops/for.md) + - [While](loops/while.md) + - [Do...While](loops/dowhile.md) + - [Continue](loops/continue.md) + - [Break](loops/break.md) +- [Funciones](functions/README.md) + - [Funciones de orden superior](functions/higher-order.md) + - [Funciones recursivas](functions/recursive-functions.md) + - [Cierres](functions/closures.md) + - [Set Interval](functions/set-interval.md) + - [Set Timeout](functions/set-timeout.md) + - [Operador de resto](functions/rest-operator.md) + - [Palabra clave this](functions/this-keyword.md) + - [Elevación (Hoisting)](functions/hoisting.md) + - [Captadores y definidores (Getters and Setters)](functions/getters-setters.md) +- [Objetos](objects/README.md) + - [Propiedades](objects/properties.md) + - [Mutable](objects/mutable.md) + - [Referencia](objects/reference.md) + - [Prototype](objects/prototype.md) + - [Operador Delete](objects/delete.md) + - [Enumeración](objects/enumeration.md) + - [Funciones factoría](objects/factory-functions.md) + - [Funciones Constructor](objects/constructor-functions.md) + - [Propiedad Constructor](objects/constructor-property.md) + - [Naturaleza dinámica](objects/dynamic-nature.md) +- [Fecha y hora](date-and-time.md) +- [JSON](json.md) +- [Manejo de errores](error-handling/README.md) + - [try...catch](error-handling/try...-catch.md) + - [try...catch...finally](error-handling/try...catch...finally.md) +- [Módulos](modules.md) +- [Expresión regular](regular-expression.md) +- [Clases](classes/README.md) + - [Static](classes/static.md) + - [Herencia](classes/inheritance.md) + - [Modificadores de acceso](classes/access-modifiers.md) +- [Modelo de Objetos del Navegador (BOM en inglés)](browser-object-model-bom/README.md) + - [Window](browser-object-model-bom/window.md) + - [Ventanas emergentes](browser-object-model-bom/popup.md) + - [Screen](browser-object-model-bom/screen.md) + - [Navigator](browser-object-model-bom/navigator.md) + - [Cookies](browser-object-model-bom/cookies.md) + - [History](browser-object-model-bom/history.md) + - [Location](browser-object-model-bom/location.md) +- [Eventos](events.md) +- [Promise, async/await (Promesas y asincronía)](promise-async-await/README.md) + - [Promise](promise-async-await/promise.md) + - [Async/Await](promise-async-await/async-await.md) +- [Misceláneas](miscellaneous/README.md) + - [Literales de plantilla](miscellaneous/template-literals.md) + - [Hoisting (Elevación)](miscellaneous/hoisting.md) + - [Currying](miscellaneous/currying.md) + - [Polyfills y transpiladores](miscellaneous/polyfills-and-transpilers.md) + - [Lista enlazada](miscellaneous/linked-list.md) + - [Huella global](miscellaneous/global-footprint.md) + - [Depuración](miscellaneous/debugging.md) + - [Creación e implementación de aplicaciones JS](miscellaneous/building-and-deploying.md) + - [Retrollamadas](miscellaneous/callback.md) + - [IPA Web y AJAX](miscellaneous/api-ajax.md) + - [Naturaleza de un solo hilo](./miscellaneous/single-thread-nature.md) + - [ECMAScript](miscellaneous/ECMA-script.md) + - [Pruebas](miscellaneous/testing.md) +- [Código del lado del servidor](server-side/README.md) + - [Node.js](server-side/nodejs.md) + - [Renderizado del lado del servidor](server-side/server-side-rendering.md) +- [Ejercicios](exercises/README.md) + - [Console](exercises/console.md) + - [Multiplicación](exercises/multiplication.md) + - [Variables de entrada del usuario](exercises/user-input-variables.md) + - [Constantes](exercises/constants.md) + - [Concatenación](exercises/concatenation.md) + - [Funciones](exercises/functions.md) + - [Sentencias condicionales](exercises/conditional-statements.md) + - [Objetos](exercises/objects.md) + - [Problema de FizzBuzz](exercises/fizzbuzz-problem.md) + - [¡Consigue los títulos!](exercises/get-the-titles.md) +- [Preguntas de entrevista (Sección de Bonificación)](interview-questions/README.md) + - [Nivel básico](interview-questions/basic-level.md) + - [Nivel intermedio](interview-questions/intermediate-level.md) + - [Nivel avanzado](interview-questions/advance-level.md) +- [Patrones de diseño (Sección de Bonificación)](design-patterns/README.md) + - [Patrones creacionales](design-patterns/creational-patterns.md) + - [Patrones estructurales](design-patterns/structural-patterns.md) + - [Patrones conductuales](design-patterns/behavioral-patterns.md) +- [Sistema de Ficheros (Sección de Bonificación)](file-system/README.md) +- [Conceptos de ES6 (Sección de Bonificación)](es6-concepts/README.md) + - [Let Const](es6-concepts/let-const.md) + - [Map](es6-concepts/map.md) + - [Funciones flecha](es6-concepts/arrow-functions.md) + - [Desestructurando](es6-concepts/destructuring.md) + - [Literales de plantilla](es6-concepts/template-literals.md) +- [Recursos de animación](animation-resources/README.md) + - [GSAP](animation-resources/gsap.md) + - [Anime JS](animation-resources/animejs.md) + - [Three JS](animation-resources/threejs.md) + - [Velocity JS](animation-resources/velocityjs.md) + - [React Spring](animation-resources/react-spring.md) + - [Framer Motion](animation-resources/framer-motion.md) +- [JavaScript detrás de escena](behind-scenes/README.md) + - [Pila de llamadas](behind-scenes/call-stack.md) + - [Motor](behind-scenes/engine.md) + - [Bucle de eventos](behind-scenes/event-loop.md) + - [Contexto de ejecución](behind-scenes/execution-context.md) + - [Montón de memoria](behind-scenes/memory-heap.md) + - [Entorno de ejecución](behind-scenes/runtime-environment.md) +- [Referencias](References.md) +- [Recursos](resources.md) +- [Créditos](Credits.md) diff --git a/es/objects/constructor-functions.md b/es/objects/constructor-functions.md new file mode 100644 index 00000000..1cdf4083 --- /dev/null +++ b/es/objects/constructor-functions.md @@ -0,0 +1,95 @@ +--- +chapter: 9 +description: Understanding Constructor Functions in JavaScript. +--- + +## Understanding Constructor Functions in JavaScript + +Constructor functions in JavaScript are special functions used to create and initialize objects. They provide a way to define a blueprint for creating multiple objects with similar properties and methods. + +### Defining a Constructor Function + +A constructor function is defined like a regular function but is typically named with an initial capital letter to distinguish it from regular functions. + +### Example of a Constructor Function + +Here's a basic example of a constructor function: + +```javascript +function Person(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; +} + +const person1 = new Person("John", "Doe"); +const person2 = new Person("Jane", "Smith"); + +console.log(person1.firstName); // Output: John +console.log(person2.lastName); // Output: Smith +``` + +In this example, the `Person` constructor function initializes the `firstName` and `lastName` properties for each new object created. + +### Adding Methods to Constructor Functions + +You can add methods to the objects created by a constructor function by defining them on the constructor's prototype. + +```javascript +function Person(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; +} + +Person.prototype.getFullName = function() { + return `${this.firstName} ${this.lastName}`; +}; + +const person1 = new Person("John", "Doe"); +console.log(person1.getFullName()); // Output: John Doe +``` + +### Using `new` Keyword + +The `new` keyword is used to create an instance of an object from a constructor function. It performs the following steps: +1. Creates a new empty object. +2. Sets the `this` keyword to the new object. +3. Executes the constructor function. +4. Returns the new object. + +### Example with `new` Keyword + +```javascript +function Car(make, model) { + this.make = make; + this.model = model; +} + +const car1 = new Car("Toyota", "Corolla"); +console.log(car1.make); // Output: Toyota +``` + +### Constructor Functions vs. Classes + +ES6 introduced the `class` syntax, which provides a more concise and readable way to define constructor functions and methods. + +### Example with Classes + +```javascript +class Person { + constructor(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; + } + + getFullName() { + return `${this.firstName} ${this.lastName}`; + } +} + +const person1 = new Person("John", "Doe"); +console.log(person1.getFullName()); // Output: John Doe +``` + +### Conclusion + +Constructor functions are a fundamental feature in JavaScript for creating and initializing objects. They allow you to define a blueprint for objects and add methods to their prototype. With the introduction of ES6, the `class` syntax provides a more modern and readable way to achieve the same functionality. diff --git a/es/objects/constructor-property.md b/es/objects/constructor-property.md new file mode 100644 index 00000000..4f57b15d --- /dev/null +++ b/es/objects/constructor-property.md @@ -0,0 +1,67 @@ +--- +chapter: 9 +description: Understanding the `constructor` Property in JavaScript. +--- + +## Understanding the `constructor` Property in JavaScript + +The `constructor` property in JavaScript is a reference to the function that created an instance's prototype. It is a property of all objects that points to the function that was used to create the object. + +### What is the `constructor` Property? + +The `constructor` property returns a reference to the constructor function that created the instance. This is useful for identifying the type of an object. + +### Example of the `constructor` Property + +Here's a basic example to illustrate the `constructor` property: + +```javascript +function Person(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; +} + +const person1 = new Person("John", "Doe"); +console.log(person1.constructor); // Output: [Function: Person] +``` + +In this example, the `constructor` property of `person1` points to the `Person` function. + +### Using the `constructor` Property to Create New Instances + +You can use the `constructor` property to create new instances of the same type: + +```javascript +const person2 = new person1.constructor("Jane", "Smith"); +console.log(person2.firstName); // Output: Jane +``` + +### `constructor` Property in Built-in Objects + +The `constructor` property is also available in built-in JavaScript objects: + +```javascript +const arr = []; +console.log(arr.constructor); // Output: [Function: Array] + +const obj = {}; +console.log(obj.constructor); // Output: [Function: Object] +``` + +### Modifying the `constructor` Property + +You can modify the `constructor` property, but it is generally not recommended as it can lead to unexpected behavior: + +```javascript +function Animal(name) { + this.name = name; +} + +const dog = new Animal("Rex"); +dog.constructor = Person; +console.log(dog.constructor); // Output: [Function: Person] +``` + +### Conclusion + +The `constructor` property is a useful feature in JavaScript that allows you to reference the function that created an instance's prototype. It can be used to identify the type of an object and create new instances of the same type. However, modifying the `constructor` property should be done with caution. \ No newline at end of file diff --git a/es/objects/dynamic-nature.md b/es/objects/dynamic-nature.md new file mode 100644 index 00000000..2a95c0b5 --- /dev/null +++ b/es/objects/dynamic-nature.md @@ -0,0 +1,117 @@ +--- +chapter: 9 +description: Understanding the Dynamic Nature of Objects in JavaScript. +--- + +## Understanding the Dynamic Nature of Objects in JavaScript + +JavaScript objects are dynamic, meaning their properties can be added, modified, or deleted at runtime. This flexibility +allows for powerful and adaptable code but requires careful management to avoid unexpected behavior. + +### Adding Properties + +You can add properties to an object at any time using dot notation or bracket notation. + +```javascript +const person = { + firstName: "John", + lastName: "Doe" +}; + +// Adding a new property +person.age = 30; +console.log( person.age ); // Output: 30 + +// Adding a property using bracket notation +person["gender"] = "male"; +console.log( person.gender ); // Output: male +``` + +### Modifying Properties + +Existing properties can be modified by reassigning their values. + +```javascript +const car = { + make: "Toyota", + model: "Corolla" +}; + +// Modifying a property +car.model = "Camry"; +console.log( car.model ); // Output: Camry +``` + +### Deleting Properties + +Properties can be removed from an object using the `delete` operator. + +```javascript +const book = { + title: "1984", + author: "George Orwell", + year: 1949 +}; + +// Deleting a property +delete book.year; +console.log( book.year ); // Output: undefined +``` + +### Checking for Properties + +You can check if an object has a specific property using the `in` operator or the `hasOwnProperty` method. + +```javascript +const user = { + username: "johndoe", + email: "john@example.com" +}; + +// Using the `in` operator +console.log( "email" in user ); // Output: true + +// Using `hasOwnProperty` method +console.log( user.hasOwnProperty( "username" ) ); // Output: true +``` + +### Iterating Over Properties + +You can iterate over an object's properties using a `for...in` loop. + +```javascript +const student = { + name: "Alice", + age: 22, + major: "Computer Science" +}; + +for (let key in student) { + if (student.hasOwnProperty( key )) { + console.log( `${key}: ${student[key]}` ); + } +} +// Output: +// name: Alice +// age: 22 +// major: Computer Science +``` + +### Dynamic Property Names + +You can use dynamic property names by using computed property names in object literals. + +```javascript +const propName = "score"; +const game = { + [propName]: 100 +}; + +console.log( game.score ); // Output: 100 +``` + +### Conclusion + +The dynamic nature of JavaScript objects provides great flexibility in managing data structures. You can add, modify, +and delete properties at runtime, check for the existence of properties, and iterate over them. This flexibility, while +powerful, requires careful handling to maintain code stability and predictability. \ No newline at end of file diff --git a/es/objects/factory-functions.md b/es/objects/factory-functions.md new file mode 100644 index 00000000..10721ca1 --- /dev/null +++ b/es/objects/factory-functions.md @@ -0,0 +1,106 @@ +--- +chapter: 9 +description: Understanding Factory Functions for Objects in JavaScript. +--- + +## Understanding Factory Functions for Objects in JavaScript + +Factory functions are functions that create and return objects. They provide a flexible way to create multiple instances of objects without using the `new` keyword or constructor functions. + +### Defining a Factory Function + +A factory function is a regular function that returns an object. It can include parameters to customize the properties of the created object. + +### Example of a Factory Function + +Here's a basic example of a factory function: + +```javascript +function createPerson(firstName, lastName) { + return { + firstName: firstName, + lastName: lastName, + getFullName: function() { + return `${this.firstName} ${this.lastName}`; + } + }; +} + +const person1 = createPerson("John", "Doe"); +const person2 = createPerson("Jane", "Smith"); + +console.log(person1.getFullName()); // Output: John Doe +console.log(person2.getFullName()); // Output: Jane Smith +``` + +In this example, the `createPerson` function returns a new object with `firstName`, `lastName`, and `getFullName` properties. + +### Advantages of Factory Functions + +1. **No `new` Keyword**: Factory functions do not require the `new` keyword, making them simpler and less error-prone. +2. **Encapsulation**: Factory functions can encapsulate private variables and methods. +3. **Flexibility**: They can return different types of objects based on conditions. + +### Encapsulation with Factory Functions + +Factory functions can encapsulate private data by defining variables inside the function scope and returning an object with methods that access those variables. + +```javascript +function createCounter() { + let count = 0; + return { + increment: function() { + count++; + return count; + }, + decrement: function() { + count--; + return count; + }, + getCount: function() { + return count; + } + }; +} + +const counter = createCounter(); +console.log(counter.increment()); // Output: 1 +console.log(counter.getCount()); // Output: 1 +console.log(counter.decrement()); // Output: 0 +``` + +### Returning Different Objects + +Factory functions can return different objects based on conditions, providing flexibility in object creation. + +```javascript +function createShape(type) { + if (type === "circle") { + return { + type: "circle", + radius: 10, + getArea: function() { + return Math.PI * this.radius * this.radius; + } + }; + } else if (type === "square") { + return { + type: "square", + side: 10, + getArea: function() { + return this.side * this.side; + } + }; + } +} + +const circle = createShape("circle"); +const square = createShape("square"); + +console.log(circle.getArea()); // Output: 314.1592653589793 +console.log(square.getArea()); // Output: 100 +``` + +### Conclusion + +Factory functions are a powerful and flexible way to create objects in JavaScript. They provide advantages such as avoiding the `new` keyword, encapsulating private data, and returning different types of objects based on conditions. By using factory functions, you can write more modular and maintainable code. diff --git a/es/regular-expression.md b/es/regular-expression.md index ca69a780..7d786a6a 100644 --- a/es/regular-expression.md +++ b/es/regular-expression.md @@ -1,7 +1,7 @@ --- layout: editorial chapter: 14 -pageNumber: 73 +pageNumber: 89 description: Una expresión regular, a menudo abreviada como "regex", es una poderosa herramienta para la coincidencia de patrones y la búsqueda dentro de cadenas. Proporciona una forma concisa y flexible de buscar, unir y manipular texto según patrones específicos. --- @@ -35,17 +35,143 @@ En los casos en los que queremos que una barra diagonal sea parte de una expresi Los diferentes modificadores que se utilizan para realizar búsquedas que no distinguen entre mayúsculas y minúsculas son: * `g` - búsqueda global (encuentra todas las coincidencias en lugar de detenerse después de la primera) + +Ejemplo : + +```javascript +const str = "Hello world, hello again!"; +const regex = /hello/g; +const matches = str.match(regex); +// Si estás pensando en .match() lee esto 👇 +// Es un método integrado en JavaScript que se utiliza para buscar una cadena que coincida con una expresión. +// Si se encuentra la coincidencia, devuelve una matriz de todas las coincidencias que se encontraron. Si no, el método .match() devuelve nulo. + +console.log(matches); // ["Hello", "hello"] +``` + * `i` - búsqueda que no distingue entre mayúsculas y minúsculas + +Ejemplo : + +```javascript +const str = "HeLlO WoRlD"; +const regex = /hello/i; +const match = regex.test(str); +// El método '.test()' devuelve un valor booleano: +// 'true' si se encuentra una coincidencia, y 'false' si la coincidencia no se encuentra. + +console.log(match); // true +``` + * `m` - coincidencia multilínea +Ejemplo : + +```javascript +const str = "This is a\nmultiline string."; +const regex = /./mg; +const matches = str.match(regex); +// La bandera m se utiliza para hacer coincidir caracteres de nueva línea (\n). +// Esto significa que la expresión regular coincidirá con los 26 caracteres de la cadena. +// incluyendo el carácter de nueva línea. + +console.log(matches.length); // 26 +``` + Los _corchetes_ se utilizan en una expresión regular para encontrar un rango de caracteres. Algunos de ellos se mencionan a continuación. * `[abc]` - Encuentra cualquier carácter entre corchetes. + +Ejemplo : + +```javascript +const str = "The cat and the dog are both animals."; +const regex = /[abc]/g; +const matches = str.match(regex); + +console.log(matches); // Matriz de todas las ocurrencias de a, b, y c + +[ + 'c', 'a', 'a', + 'a', 'b', 'a', + 'a' +] +``` + * `[^abc]` - encontrar cualquier carácter, menos los que están entre corchetes + +Ejemplo : + +```javascript +const str = "The cat and dog."; +const regex = /[^abc]/g; // Coincide cualquier carácter que no sea 'a', 'b', o 'c' +const matches = str.match(regex); + +console.log(matches); // Matriz de todas las ocurrencias de caracteres que no sean 'a', 'b', o 'c' + +[ + 'T', 'h', 'e', ' ', + 't', ' ', 'n', 'd', + ' ', 'd', 'o', 'g', + '.' +] + +``` + * `[0-9]` - encuentra cualquier dígito de los que están entre corchetes + +Ejemplo : + +```javascript +const str = "The price of the item is $25, but it may change to $30."; +const regex = /[0-9]/g; // Coincide con cualquier dígito desde el 0 al 9 +const matches = str.match(regex); + +console.log(matches); // Matriz con todas las ocurrencias de los dígitos + +[ + '2', '5', '3', '0' +] + +``` + * `[^0-9]` - encuantra cualquier dígito, menos los que estaán entre corchetes + +Ejemplo : + +```javascript +const str = "The price is $25."; +const regex = /[^0-9]/g; // Coincide con cualquier carácter que no sea un dígito +const matches = str.match(regex); + +console.log(matches); // Matriz de todas las ocurrencias de números que no son dígitos + +[ + 'T', 'h', 'e', ' ', + 'p', 'r', 'i', 'c', + 'e', ' ', 'i', 's', + ' ', '$', '.' +] + +``` + * `(x|y)`- encuentre cualquiera de las alternativas separadas por | +Ejemplo : + +```javascript +const str = "The words 'xylophone' and 'yellow' contain the letters 'x' and 'y'."; +const regex = /(x|y)/g; // Coincide con 'x' o 'y' +const matches = str.match(regex); + +console.log(matches); // Matriz de todas las apariciones de 'x' o 'y' + +[ + 'x', 'y', 'y', 'x', 'x', 'y' +] + +``` + Los _metacaracteres_ son caracteres especiales que tienen un significado especial en la expresión regular. Estos caracteres se describen con más detalle a continuación: | Metacaracter | Descripción | @@ -87,7 +213,7 @@ Las propiedades y métodos admitidos por RegEx se enumeran a continuación. Un método `compile()` compila la expresión regular y está en desuso. {% endhint %} -Aquí se muestran algunos ejemplos de expresiones regulares. +### Un ejemplo común de expresión regular ```javascript let texto = "Las mejores cosas de la vida son gratis"; @@ -104,3 +230,41 @@ let result1 = pattern1.test(textoHolaMundo); let pattern1String = pattern1.toString(); // pattern1String : '/Hola/g' ``` + +### Un ejemplo real de expresiones regulares en la verificación de códigos PIN + +```javascript +const handleSubmit = (e) => { + // Evitar el comportamiento de envío de formulario predeterminado + e.preventDefault(); + + // Definir una lista de códigos PIN válidos + const validPincodes = [ + 110001, 110002, 110003, 110004, 110005, 110006, 110007, 110008, 110009, + 110010, 110011, 110012, 110013, 110014, 110015, 110016, 110017, 110018, + 110019, 110020, 110021, 110022, 110023, 110050, 110051, 110056, 110048, + 110057, 110058, 110059, 110060, 110061, 110062, 110063, 110064 + ]; + + // Convertir los códigos PIN válidos en cadenas + const validPincodeStrings = validPincodes.map((pincode) => String(pincode)); + + // Crea un patrón de expresión regular para que coincida con códigos PIN válidos + const regexPattern = new RegExp(`^(${validPincodeStrings.join("|")})$`); + + // Obtiene el código PIN enviado desde el campo de entrada + const submittedPincode = pincode; // Asegúrese de que el 'pincode' esté definido en otra parte + + // Comprueba si el código PIN enviado coincide con el patrón de código PIN válido + if (regexPattern.test(submittedPincode)) { + // Muestra un mensaje de éxito + // ... + } else if (submittedPincode === "") { + // Muestra un mensaje de error para una entrada vacía + // ... + } else if (submittedPincode.length < 6) { + // Muestra un mensaje de error para una longitud de código PIN no válida + // ... + } +} +``` diff --git a/es/strings/README.md b/es/strings/README.md index 4c6e83e1..334f9935 100644 --- a/es/strings/README.md +++ b/es/strings/README.md @@ -1,7 +1,7 @@ --- layout: editorial chapter: 4 -pageNumber: 23 +pageNumber: 30 --- # Capítulo 4 @@ -13,7 +13,7 @@ Las cadenas (strings, en inglés) de JavaScript comparten muchas similitudes con A continuación se muestra un ejemplo de una cadena: ```Javascript -"Hello World" +"Hola mundo" ``` Los índices de cadenas tienen base cero, lo que significa que la posición inicial del primer carácter es "0" seguida de otros en orden incremental. Varios métodos son compatibles con cadenas y devuelven un nuevo valor. Estos métodos se describen a continuación. @@ -50,3 +50,13 @@ Los índices de cadenas tienen base cero, lo que significa que la posición inic | `trimEnd()` | Devuelve una cadena con espacios en blanco eliminados del final | | `trimStart()` | Devuelve una cadena con espacios en blanco eliminados desde el inicio. | | `valueOf()` | Devuelve el valor primitivo de una cadena o un objeto string. | + +En este capítulo, exploraremos los siguientes temas: + +* [Creación](./create.md) +* [CharAt](./charAt.md) +* [Concatenación](./concat.md) +* [Length](./length.md) +* [Replace](./replace.md) +* [Split](./split.md) +* [Substring](./substring.md) diff --git a/es/strings/charAt.md b/es/strings/charAt.md index afe10692..02f7fbc8 100644 --- a/es/strings/charAt.md +++ b/es/strings/charAt.md @@ -11,10 +11,9 @@ El método `str.charAt()` devuelve el carácter en el índice dado del índice d El método charAt() tiene en cuenta: -Argumentos: El único argumento en esta función es el índice en la cadena de donde se extraerá el carácter único. - -índice: El rango de este índice está entre 0 y longitud - 1. Si no se especifica el índice entonces se devuelve el primer carácter de la cadena ya que el índice usado por defecto para esta función es 0. -Valor de Retorno: Devuelve un único carácter localizado en el índice especificado como el argumento de la función. Si el índice está fuera de rango, esta función devolverá una cadena vacía. +* **Argumentos**: El único argumento en esta función es el índice en la cadena de donde se extraerá el carácter único. +* **Índice**: El rango de este índice está entre 0 y longitud - 1. Si no se especifica el índice entonces se devuelve el primer carácter de la cadena ya que el índice usado por defecto para esta función es 0. +* **Valor de Retorno**: Devuelve un único carácter localizado en el índice especificado como el argumento de la función. Si el índice está fuera de rango, esta función devolverá una cadena vacía. ```javascript //Ejemplo 1: diff --git a/es/strings/split.md b/es/strings/split.md index bf6b44f2..06d793fa 100644 --- a/es/strings/split.md +++ b/es/strings/split.md @@ -11,8 +11,8 @@ El método split() divide una cadena en una lista de subcadenas y las devuelve c El método split() tiene en cuenta: -separador (opcional) - El patrón (cadena o expresión regular) que describe dónde debería ocurrir cada división. -límite (opcional) - Un entero no negativo que limita el número de partes en las que se dividirá la cadena dada. +* **Separador (opcional)** - El patrón (cadena o expresión regular) que describe dónde debería ocurrir cada división. +* **Límite (opcional)** - Un entero no negativo que limita el número de partes en las que se dividirá la cadena dada. ```javascript console.log("ABCDEF".split("")); // [ 'A', 'B', 'C', 'D', 'E', 'F' ] diff --git a/es/strings/substring.md b/es/strings/substring.md index fe1cf7e8..32640fce 100644 --- a/es/strings/substring.md +++ b/es/strings/substring.md @@ -8,20 +8,18 @@ pageNumber: 38 Sintaxis: -string.substring(indiceInicial, indiceFinal) +`string.substring(indiceInicial, indiceFinal)` ## Sintaxis -*str.substr(inicio , longitud) - +* usando `str.substr(inicio , longitud)` * usando el método `substr()` -* usando el literal de plantilla (introducido en ES6) - -El método substr() tiene en cuenta: +* usando el literal de plantilla (introducido en [ES6](../es6-concepts/template-literals.md)) -Parámetros: Aquí indiceInicial e indiceFinal describen la parte de la cadena que se tomará como subcadena. Aquí el indiceFinal es opcional. +El método `substr()` tiene en cuenta: -Valor devuelto: Devuelve una cadena nueva que es parte de la cadena dada. El código de JavaScript que muestra el trabajo de la función string.substring(): +* **Parámetros**: Aquí indiceInicial e indiceFinal describen la parte de la cadena que se tomará como subcadena. Aquí el indiceFinal es opcional. +* **Valor devuelto**: Devuelve una cadena nueva que es parte de la cadena dada. El código de JavaScript que muestra el trabajo de la función `string.substring()`: ```javascript // Ejemplo 1: From 4e24413e46e94c5cce948d967204f9dd14cb01d3 Mon Sep 17 00:00:00 2001 From: "Juan F. Ruiz" Date: Mon, 2 Sep 2024 22:15:30 +0200 Subject: [PATCH 2/7] =?UTF-8?q?Traducida=20la=20secci=C3=B3n=20"Funciones"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- es/functions/README.md | 14 +++- es/functions/closures.md | 58 +++++++------- es/functions/getters-setters.md | 114 +++++++++++++-------------- es/functions/hoisting.md | 54 ++++++------- es/functions/recursive-functions.md | 52 +++++++------ es/functions/rest-operator.md | 71 +++++++++-------- es/functions/set-interval.md | 49 ++++++------ es/functions/set-timeout.md | 35 +++++---- es/functions/this-keyword.md | 116 ++++++++++++++-------------- 9 files changed, 289 insertions(+), 274 deletions(-) diff --git a/es/functions/README.md b/es/functions/README.md index cb9bb907..6bff2a98 100644 --- a/es/functions/README.md +++ b/es/functions/README.md @@ -1,7 +1,7 @@ --- layout: editorial chapter: 8 -pageNumber: 53 +pageNumber: 68 description: Las funciones son bloques de código que realizan una tarea específica o un conjunto de tareas. Son unidades de código reutilizables que se pueden llamar y ejecutar en cualquier punto de un programa. --- @@ -46,3 +46,15 @@ const double = (x) => 2 * x; {% hint style="warning" %} La palabra clave `this` en la función de flecha representa el objeto que definió la función de flecha. {% endhint %} + +En este capítulo, exploraremos los siguientes temas: + +* [Cierres](./closures.md) +* [Funciones de orden superior](./higher-order.md) +* [Funciones recursivas](./recursive-functions.md) +* [Set Interval](./set-interval.md) +* [Set Timeout](./set-timeout.md) +* [Palabra clave this](./this-keyword.md) +* [Operador de resto](./rest-operator.md) +* [Elevación (Hoisting)](./hoisting.md) +* [Captadores y definidores (Getters / Setters)](./getters-setters.md) \ No newline at end of file diff --git a/es/functions/closures.md b/es/functions/closures.md index 8cc3b6aa..287d20dc 100644 --- a/es/functions/closures.md +++ b/es/functions/closures.md @@ -1,63 +1,63 @@ --- chapter: 8 -description: Closures are a JavaScript concept that allows functions to access and remember variables from their containing scope, even after the outer function has finished running. They're vital for data encapsulation, private variables, and various design patterns in JavaScript. Closures enhance code flexibility and maintainability. +description: Los cierres son un concepto de JavaScript que permite a las funciones acceder y recordar variables de su ámbito de contención, incluso después de que la función externa haya terminado de ejecutarse. Son fundamentales para la encapsulación de datos, las variables privadas y varios patrones de diseño en JavaScript. Los cierres mejoran la flexibilidad y la capacidad de mantenimiento del código. --- -# Closures +# Cierres (Closures, en inglés) -In JavaScript, closures are a fundamental and powerful concept that plays a crucial role in the language. Understanding closures is essential for writing clean, efficient, and maintainable code. In this chapter, we'll explore what closures are, how they work, and why they are important in JavaScript. +En JavaScript, los cierres son un concepto fundamental y poderoso que desempeña un papel crucial en el lenguaje. Comprender los cierres es esencial para escribir código limpio, eficiente y fácil de mantener. En este capítulo, exploraremos qué son los cierres, cómo funcionan y por qué son importantes en JavaScript. -## What are Closures? +## ¿Qué son los cierres? -A closure is a function that retains access to variables from its containing (enclosing) lexical scope even after the outer function has finished execution. In simpler terms, a closure "closes over" variables, preserving their values, and allows inner functions to access them. +Un cierre es una función que conserva el acceso a las variables de su ámbito léxico contenedor (que las encierra) incluso después de que la función externa haya terminado su ejecución. En términos más simples, un cierre "cierra" las variables, preserva sus valores y permite que las funciones internas accedan a ellas. -## How Closures Work +## Cómo funcionan los cierres -Closures in JavaScript are created when a function is defined within another function and references variables from the outer function. Here's a step-by-step explanation of how closures work: +Los cierres en JavaScript se crean cuando se define una función dentro de otra función y se hace referencia a variables de la función externa. A continuación, se ofrece una explicación paso a paso de cómo funcionan los cierres: -1. **Function Definition**: A function is defined within another function. +1. **Definición de función**: Una función se define dentro de otra función. -2. **Variable Reference**: The inner function references variables from the outer function. +2. **Referencia de variable**: La función interna hace referencia a variables de la función externa. -3. **Creation of a Closure**: When the inner function is created, it forms a closure, capturing the variables it references. +3. **Creación de un cierre**: Cuando se crea la función interna, ésta forma un cierre, capturando las variables a las que hace referencia. -4. **Access to Enclosing Scope**: The inner function can still access and use the variables from the outer function, even after the outer function has finished executing. +4. **Acceso al ámbito circundante**: la función interna aún puede acceder y usar las variables de la función externa, incluso después de que esta última haya terminado de ejecutarse. -## Practical Example +## Ejemplo práctico -Let's illustrate closures with a practical example: +Ilustremos los cierres con un ejemplo práctico: ```javascript -function outerFunction() { - const outerVariable = 'I am from the outer function'; +function funcionExterna() { + const variableExterna = 'Soy de la funcion externa'; - function innerFunction() { - console.log(outerVariable); + function funcionInterna() { + console.log(variableExterna); } - return innerFunction; + return funcionInterna; } -const closureFunction = outerFunction(); // Creates a closure -closureFunction(); // Logs "I am from the outer function" +const funcionCierre = funcionExterna(); // Crea un cierre +funcionCierre(); // Registra "Soy de la función exterior" ``` -In this example, `outerFunction` defines `outerVariable`, and `innerFunction` accesses `outerVariable` within its scope. When `outerFunction` is invoked and `closureFunction` is assigned the value it returns, it creates a closure that retains access to `outerVariable`. Later, when `closureFunction` is called, it still has access to `outerVariable`, even though `outerFunction` has completed execution. +En este ejemplo, `funcionExterna` define `variableExterna` y `funcionInterna` accede a `variableExterna` dentro de su ámbito. Cuando se invoca `funcionExterna` y se le asigna a `funcionCierre` el valor que devuelve, crea un cierre que conserva el acceso a `variableExterna`. Más tarde, cuando se llama a `funcionCierre`, todavía tiene acceso a `variableExterna`, aunque `funcionExterna` haya completado la ejecución. -## Use Cases for Closures +## Casos de uso para cierres -Closures have various practical use cases in JavaScript, including: +Los cierres tienen varios casos prácticos de uso en JavaScript, entre ellos: -- **Data Encapsulation**: Closures can be used to encapsulate and protect data, making it inaccessible from the outside. This is a fundamental concept in many design patterns. +- **Encapsulación de datos**: los cierres se pueden utilizar para encapsular y proteger datos, haciéndolos inaccesibles desde el exterior. Este es un concepto fundamental en muchos patrones de diseño. -- **Function Factories**: Closures allow the creation of factory functions that generate functions with specific behaviors. +- **Fábricas de funciones**: los cierres permiten la creación de funciones de fábrica que generan funciones con comportamientos específicos. -- **Private Variables**: Closures enable the creation of private variables and methods within objects, keeping certain data hidden from external code. +- **Variables privadas**: los cierres permiten la creación de variables y métodos privados dentro de los objetos, manteniendo ciertos datos ocultos del código externo. -- **Callback Functions**: Callbacks often involve closures to maintain context and data between asynchronous operations. +- **Funciones de devolución de llamada**: las devoluciones de llamada a menudo implican cierres para mantener el contexto y los datos entre operaciones asincrónicas. -Closures are a powerful feature in JavaScript that allows functions to retain access to variables from their containing scope. Understanding closures is essential for writing clean and efficient code. They are commonly used in various design patterns and provide solutions for data encapsulation, function factories, and more. +Los cierres son una característica poderosa en JavaScript que permite que las funciones conserven el acceso a las variables desde su ámbito de contención. Comprender los cierres es esencial para escribir código limpio y eficiente. Se utilizan comúnmente en varios patrones de diseño y brindan soluciones para la encapsulación de datos, fábricas de funciones y más. -Closures can be both a powerful tool and a potential source of memory leaks if not used wisely. Therefore, it's crucial to grasp the concept and use it judiciously in your JavaScript code. +Los cierres pueden ser tanto una herramienta poderosa como una fuente potencial de fugas de memoria si no se utilizan con prudencia. Por lo tanto, es fundamental comprender el concepto y utilizarlo con criterio en el código JavaScript. --- diff --git a/es/functions/getters-setters.md b/es/functions/getters-setters.md index 747b1799..ec383fa0 100644 --- a/es/functions/getters-setters.md +++ b/es/functions/getters-setters.md @@ -1,105 +1,105 @@ --- chapter: 8 -description: Understanding Getters and Setters in JavaScript. +description: Comprender los métodos Getters y Setters en JavaScript --- -## Understanding Getters and Setters in JavaScript +# Comprender los métodos Getters y Setters en JavaScript -Getters and setters in JavaScript are special methods that provide a way to access and update the properties of an object. They allow you to control how a property is accessed and modified, adding a layer of abstraction and encapsulation. +Los métodos getters y setters de JavaScript son métodos especiales que proporcionan una forma de acceder y actualizar las propiedades de un objeto. Permiten controlar cómo se accede a una propiedad y cómo se modifica, agregando una capa de abstracción y encapsulamiento. -### What are Getters and Setters? +## ¿Qué son los Getters y Setters? -- **Getters**: Methods that get the value of a specific property. -- **Setters**: Methods that set the value of a specific property. +- **Getters**: métodos que obtienen el valor de una propiedad específica. +- **Setters**: métodos que establecen el valor de una propiedad específica. -### Defining Getters and Setters +## Definición de métodos get y set -You can define getters and setters using the `get` and `set` keywords within an object literal or a class. +Puede definir getters y setters utilizando las palabras clave `get` y `set` dentro de un objeto literal o una clase. -### Example with Object Literals +## Ejemplos con literales de objeto -Here's an example of defining getters and setters in an object literal: +A continuación se muestra un ejemplo de definición de captadores y definidores en un literal de objeto: ```javascript -let person = { - firstName: "John", - lastName: "Doe", - get fullName() { - return `${this.firstName} ${this.lastName}`; +let persona = { + nombre: "Juan", + apellido: "Pérez", + get nombreCompleto() { + return `${this.nombre} ${this.apellido}`; }, - set fullName(name) { - [this.firstName, this.lastName] = name.split(" "); + set nombreCompleto(nombre) { + [this.nombre, this.apellido] = nombre.split(" "); } }; -console.log(person.fullName); // Output: John Doe -person.fullName = "Jane Smith"; -console.log(person.firstName); // Output: Jane -console.log(person.lastName); // Output: Smith +console.log(persona.nombreCompleto); // Salida: 'Juan Pérez' +persona.nombreCompleto = "Juana Herrera"; +console.log(persona.nombre); // Salida: 'Juana' +console.log(persona.apellido); // Salida: 'Herrera' ``` -### Example with Classes +## Ejemplo con clases -Here's an example of defining getters and setters in a class: +A continuación se muestra un ejemplo de definición de getters y setters en una clase: ```javascript -class Person { - constructor(firstName, lastName) { - this.firstName = firstName; - this.lastName = lastName; +class Persona { + constructor(nombre, apellido) { + this.nombre = nombre; + this.apellido = apellido; } - get fullName() { - return `${this.firstName} ${this.lastName}`; + get nombreCompleto() { + return `${this.nombre} ${this.apellido}`; } - set fullName(name) { - [this.firstName, this.lastName] = name.split(" "); + set nombreCompleto(nombre) { + [this.nombre, this.apellido] = nombre.split(" "); } } -let person = new Person("John", "Doe"); -console.log(person.fullName); // Output: John Doe -person.fullName = "Jane Smith"; -console.log(person.firstName); // Output: Jane -console.log(person.lastName); // Output: Smith +let persona = new Persona("Juan", "Pérez"); +console.log(persona.nombreCompleto); // Output: 'Juan Pérez' +persona.nombreCompleto = "Juana Herrera"; +console.log(persona.nombre); // Output: 'Juana' +console.log(persona.apellido); // Output: 'Herrera' ``` -### Benefits of Using Getters and Setters +## Beneficios del uso de getters y setters -1. **Encapsulation**: Control how properties are accessed and modified. -2. **Validation**: Add validation logic when setting a property. -3. **Computed Properties**: Create properties that are computed based on other properties. +1. **Encapsulación**: controla cómo se accede a las propiedades y cómo se modifican. +2. **Validación**: agrega lógica de validación al configurar una propiedad. +3. **Propiedades calculadas**: crea propiedades que se calculan en función de otras propiedades. -### Example of Validation +## Ejemplo de validación -Here's an example of adding validation logic in a setter: +A continuación se muestra un ejemplo de cómo agregar lógica de validación en un setter: ```javascript -class User { - constructor(username) { - this._username = username; +class Usuario { + constructor(nombreUsuario) { + this._nombreUsuario = nombreUsuario; } - get username() { - return this._username; + get nombreUsuario() { + return this._nombreUsuario; } - set username(name) { - if (name.length < 3) { - console.error("Username must be at least 3 characters long."); + set nombreUsuario(nombre) { + if (nombre.length < 3) { + console.error("El nombre de usuario debe tener al menos 3 caracteres."); } else { - this._username = name; + this._nombreUsuario = nombre; } } } -let user = new User("jsmith"); -console.log(user.username); // Output: jsmith -user.username = "jo"; // Output: Username must be at least 3 characters long. -console.log(user.username); // Output: jsmith +let usuario = new Usuario("jperez"); +console.log(usuario.nombreUsuario); // Output: 'jperez' +usuario.nombreUsuario = "jp"; // Output: 'El nombre de usuario debe tener al menos 3 caracteres.' +console.log(usuario.nombreUsuario); // Output: jperez' ``` -### Conclusion +## Conclusión -Getters and setters provide a powerful way to manage object properties in JavaScript. By using them, you can add validation, encapsulation, and computed properties, making your code more robust and maintainable. +Los métodos getter y setter proporcionan una forma eficaz de gestionar las propiedades de los objetos en JavaScript. Al usarlos, puede agregar validación, encapsulación y propiedades calculadas, lo que hace que su código sea más sólido y fácil de mantener. diff --git a/es/functions/hoisting.md b/es/functions/hoisting.md index 9d27e257..74751dee 100644 --- a/es/functions/hoisting.md +++ b/es/functions/hoisting.md @@ -1,64 +1,64 @@ --- chapter: 8 -description: Understanding Hoisting for Functions in JavaScript. +description: Comprender la elevación de funciones en JavaScript. --- -## Understanding Hoisting for Functions in JavaScript +# Comprender la elevación de funciones en JavaScript Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their containing scope during the compile phase. This means that you can use functions and variables before they are declared in the code. -### Function Hoisting +## Elevación de funciones -In JavaScript, function declarations are hoisted to the top of their containing scope. This allows you to call a function before it is defined in the code. +En JavaScript, las declaraciones de funciones se colocan en la parte superior del ámbito que las contiene. Esto permite llamar a una función antes de que se defina en el código. -### Example of Function Hoisting +## Ejemplo de elevación de funciones -Here's an example to illustrate function hoisting: +A continuación se muestra un ejemplo para ilustrar la elevación de funciones: ```javascript -console.log(greet()); // Output: Hello, World! +console.log(saludo()); // Salida: ¡Hola mundo! -function greet() { - return "Hello, World!"; +function saludo() { + return "¡Hola mundo!"; } ``` -In this example, the `greet` function is called before it is defined, but it works because the function declaration is hoisted to the top of the scope. +En este ejemplo, se llama a la función `saludo` antes de definirla, pero funciona porque la declaración de la función se eleva a la parte superior del ámbito. -### Function Expressions and Hoisting +## Expresiones de función y elevación -Unlike function declarations, function expressions are not hoisted. This means that you cannot call a function expression before it is defined. +A diferencia de las declaraciones de funciones, las expresiones de funciones no se pueden elevar. Esto significa que no se puede llamar a una expresión de función antes de que se defina. -### Example of Function Expression +## Ejemplo de expresión de función -Here's an example to illustrate the difference: +He aquí un ejemplo para ilustrar la diferencia: ```javascript -console.log(greet()); // Output: TypeError: greet is not a function +console.log(saludo()); // Salida: TypeError: saludo is not a function -var greet = function() { - return "Hello, World!"; +var saludo = function() { + return "¡Hola mundo!"; }; ``` -In this example, the `greet` function is defined as a function expression, and calling it before the definition results in an error because the variable `greet` is hoisted, but its assignment is not. +En este ejemplo, la función `saludo` se define como una expresión de función, y llamarla antes de la definición genera un error porque la variable `saludo` se eleva, pero su asignación no. -### Hoisting with `let` and `const` +## Elevación con `let` y `const` -Variables declared with `let` and `const` are also hoisted, but they are not initialized. This means that accessing them before their declaration results in a `ReferenceError`. +Las variables declaradas con `let` y `const` también se elevan, pero no se inicializan. Esto significa que acceder a ellas antes de su declaración da como resultado un `ReferenceError`. -### Example with `let` and `const` +## Ejemplo con `let` y `const` ```javascript -console.log(greet); // Output: ReferenceError: Cannot access 'greet' before initialization +console.log(saludo); // Salida: ReferenceError: saludo is not defined -let greet = function() { - return "Hello, World!"; +let saludo = function() { + return "¡Hola mundo!"; }; ``` -In this example, the `greet` variable is hoisted, but it is not initialized, resulting in a `ReferenceError` when accessed before its declaration. +En este ejemplo, la variable `saludo` se eleva, pero no se inicializa, lo que genera un `ReferenceError` cuando se accede a ella antes de su declaración. -### Conclusion +## Conclusión -Understanding hoisting is crucial for writing predictable and bug-free JavaScript code. Function declarations are hoisted, allowing them to be called before they are defined, while function expressions are not hoisted, leading to potential errors if called before their definition. Variables declared with `let` and `const` are hoisted but not initialized, resulting in `ReferenceError` if accessed before their declaration. +Comprender el hoisting es crucial para escribir código JavaScript predecible y libre de errores. Las declaraciones de funciones se elevan, lo que permite llamarlas antes de que se definan, mientras que las expresiones de función no se elevan, lo que genera posibles errores si se llaman antes de su definición. Las variables declaradas con `let` y `const` se elevan pero no se inicializan, lo que genera `ReferenceError` si se accede a ellas antes de su declaración. diff --git a/es/functions/recursive-functions.md b/es/functions/recursive-functions.md index 1f62b74f..95fcead1 100644 --- a/es/functions/recursive-functions.md +++ b/es/functions/recursive-functions.md @@ -1,58 +1,62 @@ --- chapter: 8 -description: An explanation of recursive functions in JavaScript. +description: Una explicación de las funciones recursivas en JavaScript. --- -# Recursive Functions +# Funciones recursivas -In JavaScript, a recursive function is a function that calls itself in order to solve a problem. Recursion is a powerful concept that can be used to solve complex problems by breaking them down into smaller, more manageable subproblems. This document provides an overview of recursive functions in JavaScript, their syntax, common use cases, and best practices. +En JavaScript, una función recursiva es una función que se llama a sí misma para resolver un problema. La recursión es un concepto poderoso que se puede utilizar para resolver problemas complejos dividiéndolos en subproblemas más pequeños y manejables. Este documento proporciona una descripción general de las funciones recursivas en JavaScript, su sintaxis, casos de uso comunes y prácticas recomendadas. -## Syntax +## Sintaxis -A recursive function typically has the following structure: +Una función recursiva normalmente tiene la siguiente estructura: ```javascript -function recursiveFunction(params) { - // Base case: the simplest scenario - if (/* base case condition */) { - // return a value or perform an action +function funcionRecursiva(parametros) { + // Caso base: el escenario más simple + if (/* condición caso base */) { + // devuelve un valor o realiza una acción } else { - // Recursive case: call the function with modified parameters - return recursiveFunction(modifiedParams); + // Caso recursivo: se llama a la función con parámetros modificados + return funcionRecursiva(parametrosModificados); } } ``` -Common Use Cases -Recursive functions are often used to solve problems that can be divided into smaller, similar subproblems. Here are some common use cases: -**Calculating Factorials**: +## Casos de uso común -A recursive function can be used to calculate the factorial of a number. +Las funciones recursivas suelen utilizarse para resolver problemas que se pueden dividir en subproblemas más pequeños y similares. A continuación, se muestran algunos casos de uso habituales: + +**Cálculo de factoriales**: + +Se puede utilizar una función recursiva para calcular el factorial de un número. ```javascript function factorial(n) { if (n === 0) { - return 1; // Base case + return 1; // Caso base } else { - return n * factorial(n - 1); // Recursive case + return n * factorial(n - 1); // Caso recursivo } } -factorial(5); // Returns 120 +factorial(5); // Devuelve 120 ``` -**Fibonacci Sequence**: -The Fibonacci sequence can be calculated using recursion. + +**Secuencia de Fibonacci**: + +La secuencia de Fibonacci se puede calcular mediante recursión. ```javascript function fibonacci(n) { if (n <= 1) { - return n; // Base cases: F(0) = 0, F(1) = 1 + return n; // Casos base: F(0) = 0, F(1) = 1 } else { - return fibonacci(n - 1) + fibonacci(n - 2); // Recursive case + return fibonacci(n - 1) + fibonacci(n - 2); // Caso recursivo } } -fibonacci(5); // Returns 5 +fibonacci(5); // Devuelve 5 ``` -Recursive functions are a valuable tool in JavaScript for solving problems that involve repetitive subtasks. When used correctly, they can lead to elegant and efficient solutions. \ No newline at end of file +Las funciones recursivas son una herramienta valiosa en JavaScript para resolver problemas que involucran subtareas repetitivas. Cuando se utilizan correctamente, pueden generar soluciones elegantes y eficientes. diff --git a/es/functions/rest-operator.md b/es/functions/rest-operator.md index d61cc690..bd0f1008 100644 --- a/es/functions/rest-operator.md +++ b/es/functions/rest-operator.md @@ -1,75 +1,74 @@ --- chapter: 8 -description: Understanding the Rest Operator for Functions in JavaScript. +description: Comprender el operador de resto para funciones en JavaScript. --- -## Understanding the Rest Operator for Functions in JavaScript +# Comprender el operador de resto para funciones en JavaScript -The rest operator (`...`) in JavaScript allows you to represent an indefinite number of arguments as an array. It is particularly useful in function definitions to handle multiple parameters without explicitly specifying them. +El operador de resto (`...`) en JavaScript permite representar una cantidad indefinida de argumentos como una matriz. Es particularmente útil en las definiciones de funciones para manejar múltiples parámetros sin especificarlos explícitamente. -### Syntax +## Sintaxis -The rest operator is used by prefixing three dots (`...`) before the parameter name in a function definition. +El operador de resto se utiliza anteponiendo tres puntos (`...`) antes del nombre del parámetro en una definición de función. -### Example of Using the Rest Operator +## Ejemplo de uso del operador de resto -Here's a basic example of using the rest operator in a function: +A continuación se muestra un ejemplo básico del uso del operador de resto en una función: ```javascript -function sum(...numbers) { - return numbers.reduce((acc, curr) => acc + curr, 0); +function suma(...numeros) { + return numeros.reduce((acumula, actual) => acumula + actual, 0); } -console.log(sum(1, 2, 3)); // Output: 6 -console.log(sum(4, 5, 6, 7)); // Output: 22 +console.log(suma(1, 2, 3)); // Salida: 6 +console.log(suma(4, 5, 6, 7)); // Salida: 22 ``` -In this example, the `sum` function can accept any number of arguments, which are then combined into an array called `numbers`. +En este ejemplo, la función `suma` puede aceptar cualquier número de argumentos, que luego se combinan en una matriz llamada `numeros`. -### Combining Rest Operator with Other Parameters +## Combinación del operador de resto con otros parámetros -You can use the rest operator in combination with other parameters, but it must be the last parameter in the function definition. +Puede utilizar el operador de resto en combinación con otros parámetros, pero debe ser el último parámetro en la definición de la función. ```javascript -function greet(greeting, ...names) { - return `${greeting}, ${names.join(" and ")}!`; +function saluda(saludo, ...nombres) { + return `¡${saludo}, ${nombres.join(" y ")}!`; } -console.log(greet("Hello", "Alice", "Bob")); // Output: Hello, Alice and Bob! -console.log(greet("Hi", "Charlie", "Dave", "Eve")); // Output: Hi, Charlie and Dave and Eve! +console.log(saluda("Hola", "Alicia", "Roberto")); // Salida: 'Hola, Alicia y Roberto!' +console.log(saluda("Hola", "Carlos", "David", "Eva")); // Salida: '¡Hola, Carlos y David y Eva!' ``` -In this example, the `greet` function takes a fixed `greeting` parameter and a variable number of `names`. +En este ejemplo, la función `saluda` toma un parámetro `saludo` fijo y un número variable de `nombres`. -### Rest Operator in Arrow Functions +## Operador de resto en funciones de flecha -The rest operator can also be used in arrow functions: +E operador de resto se puede usar también en funciones de flecha: ```javascript -const multiply = (...numbers) => numbers.reduce((acc, curr) => acc * curr, 1); +const multiplica = (...numeros) => numeros.reduce((acumulador, actual) => acumulador * actual, 1); -console.log(multiply(2, 3)); // Output: 6 -console.log(multiply(4, 5, 6)); // Output: 120 -``` +console.log(multiplica(2, 3)); // Salida: 6 +console.log(multiplica(4, 5, 6)); // Salida: 120``` -### Practical Use Cases +## Casos de uso práctico -1. **Handling Variable Arguments**: Functions that need to handle a variable number of arguments, such as mathematical operations or string manipulations. -2. **Combining Arrays**: Functions that need to combine multiple arrays into one. -3. **Event Handlers**: Functions that handle events with varying numbers of arguments. +1. **Manejo de argumentos variables**: Funciones que necesitan manejar una cantidad variable de argumentos, como operaciones matemáticas o manipulaciones de cadenas. +2. **Combinación de matrices**: Funciones que necesitan combinar varias matrices en una sola. +3. **Manejadores de eventos**: Funciones que manejan eventos con una cantidad variable de argumentos. -### Example of Combining Arrays +## Ejemplo de combinación de matrices -Here's an example of using the rest operator to combine arrays: +A continuación se muestra un ejemplo del uso del operador de resto para combinar matrices: ```javascript -function combineArrays(...arrays) { - return arrays.flat(); +function combinaMatrices(...matrices) { + return matrices.flat(); } -console.log(combineArrays([1, 2], [3, 4], [5, 6])); // Output: [1, 2, 3, 4, 5, 6] +console.log(combinaMatrices([1, 2], [3, 4], [5, 6])); // Salida: [1, 2, 3, 4, 5, 6] ``` -### Conclusion +## Conclusión -The rest operator is a powerful feature in JavaScript that allows functions to handle an indefinite number of arguments efficiently. By using the rest operator, you can write more flexible and concise functions that can adapt to various input scenarios. +El operador de resto es una característica poderosa de JavaScript que permite que las funciones gestionen una cantidad indefinida de argumentos de manera eficiente. Al usar el operador de resto, puede escribir funciones más flexibles y concisas que se puedan adaptar a varios escenarios de entrada. diff --git a/es/functions/set-interval.md b/es/functions/set-interval.md index dd008c07..03cb1aab 100644 --- a/es/functions/set-interval.md +++ b/es/functions/set-interval.md @@ -6,52 +6,49 @@ Title: Set Interval # Set Interval -The `setInterval` method is used to call a function and add a delay time to it, in milliseconds, before the function will run again. For example, if you're making a function that generates a random color, you can use `setInterval()` to say how long the computer has to wait before the function runs again and generates another color. This is useful in making functions repeat. -The first parameter in the method is the name of the function for which you're setting an interval. The second parameter specifies the duration of the interval. You can also add additional parameters if you want to pass arguments to the function. +El método `setInterval` se utiliza para llamar a una función y agregarle un tiempo de retraso, en milisegundos, antes de que la función se ejecute nuevamente. Por ejemplo, si estás creando una función que genera un color aleatorio, puedes usar `setInterval()` para indicar cuánto tiempo debe esperar la computadora antes de que la función se ejecute nuevamente y genere otro color. Esto es útil para hacer que las funciones se repitan. -As another simple example, let's create a function called `repeatSaying` where it says "And again!" every 2 seconds in the [console](https://javascript.sumankunwar.com.np/en/exercises/console.html). +El primer parámetro del método es el nombre de la función para la que estás configurando un intervalo. El segundo parámetro especifica la duración del intervalo. También puedes agregar parámetros adicionales si quieres pasar argumentos a la función. + +Como otro ejemplo simple, creemos una función llamada `repetirDicho` donde dice "¡Y otra vez!" cada 2 segundos en la [consola](https://javascript.sumankunwar.com.np/en/exercises/console.html). ```js -function repeatSaying() { -console.log("And again"); +function repetirDicho() { + console.log("¡Y otra vez!"); } -//when called, it generates in the console: "And again!" - -setInterval(repeatSaying, 2000); -//calls the function every 2 seconds - +// al llamarla genera en la consola: "¡Y otra vez!" +setInterval(repetirDicho, 2000); +// llama a la función cada 2 segundos ``` -You can also add parameters of a function when you use set interval. Continuing on with the previous example let's add an ellipsis to the console statement, to show that it repeats. First we'll add a parameter called `el` which is short for ellipse. Next we'll add a `+` followed by calling are parameter `el` to show that the value of the parameter comes after. Finally in set interval let's add a comma `,` followed by a string for the value of the ellipse parameter, we'll put `"..."`. + +También puedes agregar parámetros de una función cuando usas `setInterval`. Continuando con el ejemplo anterior, agreguemos puntos suspensivos a la declaración de la consola para mostrar que se repite. Primero, agregaremos un parámetro llamado `el`, que es la abreviatura de elipse. Luego, agregaremos un `+` seguido de llamar a nuestro parámetro `el` para mostrar que el valor del parámetro viene después. Finalmente, en `setInterval`, agreguemos una coma `,` seguida de una cadena para el valor del parámetro elipse, pondremos `"..."`. ```js -function repeatSaying(el) { -console.log("And again!" + el); +function repetirDicho(el) { + console.log("¡Y otra vez!" + el); } -setInterval(repeatSaying, 2000, "..."); -//When it runs, it'll repeat the saying "And again!..." +setInterval(repetirDicho, 2000, "..."); +// Cuando se ejecuta, repetirá el dicho "¡Y otra vez!..." ``` -As you can see from this example, after you put the function and interval for the function, you can set the values of the function parameters inside set interval. - - - +Como puede ver en este ejemplo, después de poner la función y el intervalo para la función, puede establecer los valores de los parámetros de la función dentro del intervalo establecido. ## Clear Interval -You can use the `clearInterval()` method to remove a set interval with a specefic variable name. As an example based on the previous one let's store set interval into a variable named `intervalTime`, however, right after our variable we'll call it inside clear interval by writing `clearInterval(intervalTime).` + +Puede utilizar el método `clearInterval()` para eliminar un intervalo establecido con un nombre de variable específico. Como ejemplo basado en el anterior, almacenemos el intervalo establecido en una variable llamada `intervalo`, sin embargo, justo después de nuestra variable la llamaremos dentro de clear interval escribiendo `clearInterval(intervalo).` ```js -function repeatSaying(el) { -console.log("And again!" + el); +function repetirDicho(el) { +console.log("¡Y otra vez!" + el); } -var interval = setInterval(repeatSaying, 2000, "..."); +var interval = setInterval(repetirDicho, 2000, "..."); clearInterval(interval); -//The clear Interval method stops setInterval +//El método clearInterval detiene setInterval ``` -When this code is run, you'll see that there is no output. This is because `setInterval` was the only thing calling the `repeatSaying` function, but since it was removed by `clearInterval` it's no longer is called. Even if it was called seperately using `repeatSaying()` it would only run once because clear Interval stops it from repeating. - +Cuando se ejecuta este código, verá que no hay salida. Esto se debe a que `setInterval` era lo único que llamaba a la función `repetirDicho`, pero como fue eliminada por `clearInterval`, ya no se llama. Incluso si se llamara por separado usando `repetirDicho()`, solo se ejecutaría una vez porque `clearInterval` evita que se repita. diff --git a/es/functions/set-timeout.md b/es/functions/set-timeout.md index 6e661e3f..7d42ead3 100644 --- a/es/functions/set-timeout.md +++ b/es/functions/set-timeout.md @@ -5,33 +5,36 @@ Title: Set Timeout --- # Set Timeout -The `setTimeout` global method is used to add a delay (in milliseconds) before a function is ran. -For instance, in this example after "Ready..." is written in the console, the function `start()` has to wait 3 seconds before running. +El método global `setTimeout` se utiliza para agregar un retraso (en milisegundos) antes de que se ejecute una función. + +Por ejemplo, en este ejemplo, después de escribir "Listo..." en la consola, la función `arranca()` tiene que esperar 3 segundos antes de ejecutarse. ```js -console.log("Ready..."); +console.log("Listo..."); -function start() { -console.log("go!!"); +function arranca() { +console.log("¡ya está!"); } -setTimeout(start, 3000); +setTimeout(arranca, 3000); -//Output: "Ready..." then after 3 seconds, "go!!" +// Salida: "Listo..." y luego, después de 3 segundos, "¡ya está!" ``` -# Clear Timeout -The `clearTimeout` global method is used to remove any `setTimeout()` methods that are stored in variables. For instance, let's change our last example by storing `setTimeout()` in a variable +## Clear Timeout + +El método global `clearTimeout` se utiliza para eliminar cualquier método `setTimeout()` que esté almacenado en variables. Por ejemplo, cambiemos nuestro último ejemplo almacenando `setTimeout()` en una variable + ```js -console.log("Ready..."); +console.log("Listo..."); -function start() { -console.log("go!!"); +function arranca() { +console.log("¡ya está!"); } -let timeBeforeStart = setTimeout(start, 3000); +let tiempoAntesDeComenzar = setTimeout(arranca, 3000); -clearTimeout(timeBeforeStart); -// Stops the function as a whole from running -``` \ No newline at end of file +clearTimeout(tiempoAntesDeComenzar); +// Detiene la ejecución de la función en su totalidad +``` diff --git a/es/functions/this-keyword.md b/es/functions/this-keyword.md index 012d9ed2..b5337feb 100644 --- a/es/functions/this-keyword.md +++ b/es/functions/this-keyword.md @@ -1,124 +1,124 @@ --- chapter: 8 -description: Understanding the `this` Keyword in JavaScript. +description: Entendiendo la palabra clave `this` en JavaScript. --- -## Understanding the `this` Keyword in JavaScript +# Entendiendo la palabra clave `this` en JavaScript -The `this` keyword in JavaScript refers to the object it belongs to. It has different values depending on where it is used: in a method, alone, in a function, in an event, etc. +La palabra clave `this` en JavaScript hace referencia al objeto al que pertenece. Tiene distintos valores según dónde se utilice: en un método, sola, en una función, en un evento, etc. -### `this` in Global Context +## `this` en el Contexto global -In the global execution context (outside of any function), `this` refers to the global object, which is `window` in browsers. +En el contexto de ejecución global (fuera de cualquier función), `this` se refiere al objeto global, que es `window` en los navegadores. ```javascript -console.log(this); // Output: Window {...} +console.log(this); // Salida: Window {...} ``` -### `this` in Object Methods +## `this` en los métodos de un objeto -When used in an object method, `this` refers to the object the method belongs to. +Cuando se utiliza en un método de objeto, `this` se refiere al objeto al que pertenece el método. ```javascript -const person = { - firstName: "John", - lastName: "Doe", - fullName: function() { - return `${this.firstName} ${this.lastName}`; +const persona = { + nombre: "Juan", + apellido: "Pérez", + nombreCompleto: function() { + return `${this.nombre} ${this.apellido}`; } }; -console.log(person.fullName()); // Output: John Doe +console.log(persona.nombreCompleto()); // Salida: Juan Pérez ``` -### `this` in Constructor Functions +## `this` en funciones de construcción -In a constructor function, `this` refers to the newly created instance. +En una función constructora, `this` se refiere a la instancia recién creada. ```javascript -function Person(firstName, lastName) { - this.firstName = firstName; - this.lastName = lastName; +function Persona(nombre, apellido) { + this.nombre = nombre; + this.apellido = apellido; } -const person1 = new Person("Jane", "Smith"); -console.log(person1.firstName); // Output: Jane +const persona1 = new Persona("Juana", "Herrera"); +console.log(persona1.nombre); // Salida: Juana ``` -### `this` in Arrow Functions +## `this` en funciones flecha -Arrow functions do not have their own `this`. Instead, `this` is lexically inherited from the outer function where the arrow function is defined. +Las funciones de flecha no tienen su propio `this`. En cambio, `this` se hereda léxicamente de la función externa donde se define la función de flecha. ```javascript -const person = { - firstName: "John", - lastName: "Doe", - fullName: function() { - const getFullName = () => `${this.firstName} ${this.lastName}`; - return getFullName(); +const persona = { + nombre: "Juan", + apellido: "Pérez", + nombreCompleto: function() { + const dameNombreCompleto = () => `${this.nombre} ${this.apellido}`; + return dameNombreCompleto(); } }; -console.log(person.fullName()); // Output: John Doe +console.log(persona.nombreCompleto()); // Saslida: Juan Pérez ``` -### `this` in Event Handlers +## `this` en manejadores de eventos -In event handlers, `this` refers to the element that received the event. +En los controladores de eventos, `this` se refiere al elemento que recibió el evento. ```html - + ``` -### Changing `this` with `call`, `apply`, and `bind` +## Cambiar `this` con `call`, `apply`, y `bind` -You can explicitly set the value of `this` using `call`, `apply`, and `bind`. +Puede establecer explícitamente el valor de `this` usando `call`, `apply` y `bind`. -#### `call` Method +### Método `call` -The `call` method calls a function with a given `this` value and arguments provided individually. +El método `call` llama a una función con un valor `this` dado y argumentos proporcionados individualmente. ```javascript -function greet() { - console.log(`Hello, ${this.name}`); +function saluda() { + console.log(`Hola, ${this.nombre}`); } -const person = { name: "Alice" }; -greet.call(person); // Output: Hello, Alice +const persona = { nombre: "Alicia" }; +saluda.call(persona); // Salida: Hola, Alicia ``` -#### `apply` Method +### Método `apply` -The `apply` method calls a function with a given `this` value and arguments provided as an array. +El método `apply` llama a una función con un valor `this` dado y argumentos proporcionados como una matriz. ```javascript -function greet(greeting) { - console.log(`${greeting}, ${this.name}`); +function saluda(saludo) { + console.log(`${saludo}, ${this.nombre}`); } -const person = { name: "Bob" }; -greet.apply(person, ["Hi"]); // Output: Hi, Bob +const persona = { nombre: "Roberto" }; +saluda.apply(persona, ["Hola"]); // Salida: Hola, Roberto ``` -#### `bind` Method +### Método `bind` -The `bind` method creates a new function that, when called, has its `this` keyword set to the provided value. +El método `bind` crea una nueva función que, cuando se llama, tiene su palabra clave `this` establecida en el valor proporcionado. ```javascript -function greet() { - console.log(`Hello, ${this.name}`); +function saluda() { + console.log(`Hola, ${this.nombre}`); } -const person = { name: "Charlie" }; -const greetPerson = greet.bind(person); -greetPerson(); // Output: Hello, Charlie +const persona = { nombre: "Carlos" }; +const saludaPersona = saluda.bind(persona); +saludaPersona(); // Salida: Hola, Carlos ``` -### Conclusion +## Conclusión -Understanding the `this` keyword is crucial for writing effective JavaScript code. Its value depends on the context in which it is used, and it can be explicitly set using `call`, `apply`, and `bind`. \ No newline at end of file +Comprender la palabra clave `this` es fundamental para escribir código JavaScript eficaz. Su valor depende del contexto en el que se utiliza y se puede configurar explícitamente mediante `call`, `apply` y `bind`. From 1c0f2487d28926095ec526e1f65070cff3fa94c0 Mon Sep 17 00:00:00 2001 From: "Juan F. Ruiz" Date: Tue, 3 Sep 2024 18:36:25 +0200 Subject: [PATCH 3/7] =?UTF-8?q?Traducidas=20o=20corregidas=20las=20siguien?= =?UTF-8?q?tes=20paginas:=20-=20regular-expression.md=20-=20README.md=20de?= =?UTF-8?q?=20la=20secci=C3=B3n=20'Manejo=20de=20errores'=20-=20try...-cat?= =?UTF-8?q?ch.md=20-=20try...catch...finally.md=20-=20constructor-function?= =?UTF-8?q?s.md=20-=20constructor-property.md=20-=20delete.md=20-=20dynami?= =?UTF-8?q?c-nature.md=20-=20enumeration.md=20-=20factory-functions.md=20-?= =?UTF-8?q?=20mutable.md=20-=20properties.md=20-=20README.md=20de=20la=20s?= =?UTF-8?q?ecci=C3=B3n=20'Objetos'=20-=20reference.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Se eliminan dos ficheros de sumario que sobraban de dos secciones. --- es/error-handling/README.md | 11 +- es/error-handling/try...-catch.md | 10 +- es/error-handling/try...catch...finally.md | 2 +- es/functions/SUMMARY.md | 153 --------------------- es/objects/README.md | 13 +- es/objects/SUMMARY.md | 153 --------------------- es/objects/constructor-functions.md | 99 ++++++------- es/objects/constructor-property.md | 64 ++++----- es/objects/delete.md | 6 +- es/objects/dynamic-nature.md | 124 ++++++++--------- es/objects/enumeration.md | 2 +- es/objects/factory-functions.md | 113 ++++++++------- es/objects/mutable.md | 4 +- es/objects/properties.md | 30 ++-- es/objects/prototype.md | 7 +- es/objects/reference.md | 32 ++--- es/regular-expression.md | 2 +- 17 files changed, 266 insertions(+), 559 deletions(-) delete mode 100644 es/functions/SUMMARY.md delete mode 100644 es/objects/SUMMARY.md diff --git a/es/error-handling/README.md b/es/error-handling/README.md index acbcff2e..16f5ee02 100644 --- a/es/error-handling/README.md +++ b/es/error-handling/README.md @@ -1,4 +1,13 @@ -# Guía de manejo de errores de JavaScript +--- +layout: editorial +chapter: 12 +pageNumber: 83 +description: En programación, los errores ocurren por diversas razones, algunos se deben a errores de código, otros a una entrada incorrecta y otras cosas imprevisibles. El método try catch ayuda a evitar que todo el script se detenga o se bloquee cuando ocurre un error, lo que nos permite manejar con elegancia los casos excepcionales y proporcionar un comportamiento alternativo. +--- + +# Capítulo 12 + +## Guía de manejo de errores de JavaScript Los errores son una parte inevitable del desarrollo de software. Manejarlos de manera efectiva es crucial para escribir código JavaScript robusto y confiable. Esta guía lo guiará a través de los fundamentos del manejo de errores en JavaScript, incluido por qué es importante, los tipos de errores y cómo usar la declaración `try...catch`. diff --git a/es/error-handling/try...-catch.md b/es/error-handling/try...-catch.md index d2fd1691..7e90da7d 100644 --- a/es/error-handling/try...-catch.md +++ b/es/error-handling/try...-catch.md @@ -1,17 +1,11 @@ --- layout: editorial chapter: 12 -pageNumber: 68 +pageNumber: 85 description: En la programación, los errores ocurren por varias razones, algunos se deben a errores de código, otros se deben a una entrada incorrecta y otras cosas imprevisibles. La captura de prueba ayuda a evitar que todo el script se detenga o falle cuando se produce un error, lo que nos permite manejar con elegancia casos excepcionales y proporcionar un comportamiento alternativo. --- -# Capítulo 12 - -## Manejo de errores - -En la programación, los errores ocurren por varias razones, algunos se deben a errores de código, otros se deben a una entrada incorrecta y otras cosas imprevisibles. Cuando ocurre un error, el código se detiene y genera un mensaje de error que normalmente se ve en la consola. - -## try... catch +# try... catch En lugar de detener la ejecución del código, podemos usar la construcción `try...catch` que permite detectar errores sin que el script muera. La construcción `try...catch` tiene dos bloques principales; `try` y luego `catch`. diff --git a/es/error-handling/try...catch...finally.md b/es/error-handling/try...catch...finally.md index b4fd3c3c..20950034 100644 --- a/es/error-handling/try...catch...finally.md +++ b/es/error-handling/try...catch...finally.md @@ -1,6 +1,6 @@ --- chapter: 12 -pageNumber: 69 +pageNumber: 86 description: try catch finally permite a los desarrolladores manejar con elegancia las excepciones (errores) que pueden ocurrir durante la ejecución de un bloque de código y garantizar que ciertas acciones de limpieza siempre se ejecuten, independientemente de si se lanzó una excepción o no. --- # try...catch...finally diff --git a/es/functions/SUMMARY.md b/es/functions/SUMMARY.md deleted file mode 100644 index 32d8ca94..00000000 --- a/es/functions/SUMMARY.md +++ /dev/null @@ -1,153 +0,0 @@ -# Índice de contenidos - -- [Dedicatoria](Dedication.md) -- [Derechos de autor](Copyright.md) -- [Prefacio](Preface.md) -- [Introducción](README.md) -- [Lo esencial](basics/README.md) - - [Comentarios](basics/comments.md) - - [Variables](basics/variables.md) - - [Tipos](basics/types.md) - - [Igualdad](basics/equality.md) -- [Números](numbers/README.md) - - [Math](numbers/math.md) - - [Operadores básicos](numbers/operators.md) - - [Operadores avanzados](numbers/advanced.md) -- [Cadenas](strings/README.md) - - [Creación](strings/create.md) - - [Replace](strings/replace.md) - - [Length](strings/length.md) - - [Concatenación](strings/concat.md) - - [Split](strings/split.md) - - [CharAt](strings/charAt.md) - - [Substring](strings/substring.md) -- [Lógica condicional](conditional/README.md) - - [If](conditional/if.md) - - [Else](conditional/else.md) - - [Switch](conditional/switch.md) - - [Comparadores](conditional/comparators.md) - - [Concatenación](conditional/concatenate.md) -- [Matrices](arrays/README.md) - - [Unshift](arrays/unshift.md) - - [Map](arrays/map.md) - - [Spread](arrays/spread.md) - - [Shift](arrays/shift.md) - - [Pop](arrays/pop.md) - - [Join](arrays/join.md) - - [Length](arrays/length.md) - - [Push](arrays/push.md) - - [For Each](arrays/for-each.md) - - [Sort](arrays/sort.md) - - [Índices](arrays/indices.md) - - [Reverse](arrays/reverse.md) - - [Slice](arrays/slice.md) -- [Bucles](loops/README.md) - - [For](loops/for.md) - - [While](loops/while.md) - - [Do...While](loops/dowhile.md) - - [Continue](loops/continue.md) - - [Break](loops/break.md) -- [Funciones](functions/README.md) - - [Funciones de orden superior](functions/higher-order.md) - - [Funciones recursivas](functions/recursive-functions.md) - - [Cierres](functions/closures.md) - - [Set Interval](functions/set-interval.md) - - [Set Timeout](functions/set-timeout.md) - - [Operador de resto](functions/rest-operator.md) - - [Palabra clave this](functions/this-keyword.md) - - [Elevación (Hoisting)](functions/hoisting.md) - - [Captadores y definidores (Getters and Setters)](functions/getters-setters.md) -- [Objetos](objects/README.md) - - [Propiedades](objects/properties.md) - - [Mutable](objects/mutable.md) - - [Referencia](objects/reference.md) - - [Prototype](objects/prototype.md) - - [Operador Delete](objects/delete.md) - - [Enumeración](objects/enumeration.md) - - [Funciones factoría](objects/factory-functions.md) - - [Funciones Constructor](objects/constructor-functions.md) - - [Propiedad Constructor](objects/constructor-property.md) - - [Naturaleza dinámica](objects/dynamic-nature.md) -- [Fecha y hora](date-and-time.md) -- [JSON](json.md) -- [Manejo de errores](error-handling/README.md) - - [try...catch](error-handling/try...-catch.md) - - [try...catch...finally](error-handling/try...catch...finally.md) -- [Módulos](modules.md) -- [Expresión regular](regular-expression.md) -- [Clases](classes/README.md) - - [Static](classes/static.md) - - [Herencia](classes/inheritance.md) - - [Modificadores de acceso](classes/access-modifiers.md) -- [Modelo de Objetos del Navegador (BOM en inglés)](browser-object-model-bom/README.md) - - [Window](browser-object-model-bom/window.md) - - [Ventanas emergentes](browser-object-model-bom/popup.md) - - [Screen](browser-object-model-bom/screen.md) - - [Navigator](browser-object-model-bom/navigator.md) - - [Cookies](browser-object-model-bom/cookies.md) - - [History](browser-object-model-bom/history.md) - - [Location](browser-object-model-bom/location.md) -- [Eventos](events.md) -- [Promise, async/await (Promesas y asincronía)](promise-async-await/README.md) - - [Promise](promise-async-await/promise.md) - - [Async/Await](promise-async-await/async-await.md) -- [Misceláneas](miscellaneous/README.md) - - [Literales de plantilla](miscellaneous/template-literals.md) - - [Hoisting (Elevación)](miscellaneous/hoisting.md) - - [Currying](miscellaneous/currying.md) - - [Polyfills y transpiladores](miscellaneous/polyfills-and-transpilers.md) - - [Lista enlazada](miscellaneous/linked-list.md) - - [Huella global](miscellaneous/global-footprint.md) - - [Depuración](miscellaneous/debugging.md) - - [Creación e implementación de aplicaciones JS](miscellaneous/building-and-deploying.md) - - [Retrollamadas](miscellaneous/callback.md) - - [IPA Web y AJAX](miscellaneous/api-ajax.md) - - [Naturaleza de un solo hilo](./miscellaneous/single-thread-nature.md) - - [ECMAScript](miscellaneous/ECMA-script.md) - - [Pruebas](miscellaneous/testing.md) -- [Código del lado del servidor](server-side/README.md) - - [Node.js](server-side/nodejs.md) - - [Renderizado del lado del servidor](server-side/server-side-rendering.md) -- [Ejercicios](exercises/README.md) - - [Console](exercises/console.md) - - [Multiplicación](exercises/multiplication.md) - - [Variables de entrada del usuario](exercises/user-input-variables.md) - - [Constantes](exercises/constants.md) - - [Concatenación](exercises/concatenation.md) - - [Funciones](exercises/functions.md) - - [Sentencias condicionales](exercises/conditional-statements.md) - - [Objetos](exercises/objects.md) - - [Problema de FizzBuzz](exercises/fizzbuzz-problem.md) - - [¡Consigue los títulos!](exercises/get-the-titles.md) -- [Preguntas de entrevista (Sección de Bonificación)](interview-questions/README.md) - - [Nivel básico](interview-questions/basic-level.md) - - [Nivel intermedio](interview-questions/intermediate-level.md) - - [Nivel avanzado](interview-questions/advance-level.md) -- [Patrones de diseño (Sección de Bonificación)](design-patterns/README.md) - - [Patrones creacionales](design-patterns/creational-patterns.md) - - [Patrones estructurales](design-patterns/structural-patterns.md) - - [Patrones conductuales](design-patterns/behavioral-patterns.md) -- [Sistema de Ficheros (Sección de Bonificación)](file-system/README.md) -- [Conceptos de ES6 (Sección de Bonificación)](es6-concepts/README.md) - - [Let Const](es6-concepts/let-const.md) - - [Map](es6-concepts/map.md) - - [Funciones flecha](es6-concepts/arrow-functions.md) - - [Desestructurando](es6-concepts/destructuring.md) - - [Literales de plantilla](es6-concepts/template-literals.md) -- [Recursos de animación](animation-resources/README.md) - - [GSAP](animation-resources/gsap.md) - - [Anime JS](animation-resources/animejs.md) - - [Three JS](animation-resources/threejs.md) - - [Velocity JS](animation-resources/velocityjs.md) - - [React Spring](animation-resources/react-spring.md) - - [Framer Motion](animation-resources/framer-motion.md) -- [JavaScript detrás de escena](behind-scenes/README.md) - - [Pila de llamadas](behind-scenes/call-stack.md) - - [Motor](behind-scenes/engine.md) - - [Bucle de eventos](behind-scenes/event-loop.md) - - [Contexto de ejecución](behind-scenes/execution-context.md) - - [Montón de memoria](behind-scenes/memory-heap.md) - - [Entorno de ejecución](behind-scenes/runtime-environment.md) -- [Referencias](References.md) -- [Recursos](resources.md) -- [Créditos](Credits.md) diff --git a/es/objects/README.md b/es/objects/README.md index 8593ac2a..069f8abf 100644 --- a/es/objects/README.md +++ b/es/objects/README.md @@ -1,7 +1,7 @@ --- layout: editorial chapter: 9 -pageNumber: 56 +pageNumber: 71 description: Un objeto es un tipo de datos compuesto que le permite almacenar y organizar múltiples valores (propiedades) como pares clave-valor. Es una estructura de datos fundamental en el lenguaje y se usa ampliamente para representar datos complejos y crear entidades estructuradas. --- @@ -9,7 +9,7 @@ description: Un objeto es un tipo de datos compuesto que le permite almacenar y ## Objetos -En javascript los objetos son **mutables** porque cambiamos los valores apuntados por el objeto de referencia, en cambio, cuando cambiamos un valor primitivo estamos cambiando su referencia que ahora apunta al nuevo valor y por lo tanto los primitivos son **inmutables**. Los tipos primitivos de JavaScript son `true`, `false`, `numbers`, `strings`, `null` e `undefined`. Cualquier otro valor es un `object`. Los objetos contienen pares `propertyName`:`propertyValue`. Hay tres formas de crear un "objeto" en JavaScript: +En javascript los objetos son **mutables** porque cambiamos los valores apuntados por el objeto de referencia, en cambio, cuando cambiamos un valor primitivo estamos cambiando su referencia que ahora apunta al nuevo valor y por lo tanto los primitivos son **inmutables**. Los tipos primitivos de JavaScript son `true`, `false`, `numbers`, `strings`, `null` e `undefined`. Cualquier otro valor es un `object`. Los objetos contienen pares `nombrePropiedad`:`valorPropiedad`. Hay tres formas de crear un "objeto" en JavaScript: 1. literal @@ -33,3 +33,12 @@ En javascript los objetos son **mutables** porque cambiamos los valores apuntado ``` > _**Nota:**_ crea un nuevo objeto con el objeto prototipo y las propiedades especificadas. + +En este capítulo, exploraremos los siguientes temas: + +* [Delete](./delete.md) +* [Enumeración](./enumeration.md) +* [Mutable](./mutable.md) +* [Propiedades](./properties.md) +* [Prototype](./prototype.md) +* [Referencia](./reference.md) diff --git a/es/objects/SUMMARY.md b/es/objects/SUMMARY.md deleted file mode 100644 index 32d8ca94..00000000 --- a/es/objects/SUMMARY.md +++ /dev/null @@ -1,153 +0,0 @@ -# Índice de contenidos - -- [Dedicatoria](Dedication.md) -- [Derechos de autor](Copyright.md) -- [Prefacio](Preface.md) -- [Introducción](README.md) -- [Lo esencial](basics/README.md) - - [Comentarios](basics/comments.md) - - [Variables](basics/variables.md) - - [Tipos](basics/types.md) - - [Igualdad](basics/equality.md) -- [Números](numbers/README.md) - - [Math](numbers/math.md) - - [Operadores básicos](numbers/operators.md) - - [Operadores avanzados](numbers/advanced.md) -- [Cadenas](strings/README.md) - - [Creación](strings/create.md) - - [Replace](strings/replace.md) - - [Length](strings/length.md) - - [Concatenación](strings/concat.md) - - [Split](strings/split.md) - - [CharAt](strings/charAt.md) - - [Substring](strings/substring.md) -- [Lógica condicional](conditional/README.md) - - [If](conditional/if.md) - - [Else](conditional/else.md) - - [Switch](conditional/switch.md) - - [Comparadores](conditional/comparators.md) - - [Concatenación](conditional/concatenate.md) -- [Matrices](arrays/README.md) - - [Unshift](arrays/unshift.md) - - [Map](arrays/map.md) - - [Spread](arrays/spread.md) - - [Shift](arrays/shift.md) - - [Pop](arrays/pop.md) - - [Join](arrays/join.md) - - [Length](arrays/length.md) - - [Push](arrays/push.md) - - [For Each](arrays/for-each.md) - - [Sort](arrays/sort.md) - - [Índices](arrays/indices.md) - - [Reverse](arrays/reverse.md) - - [Slice](arrays/slice.md) -- [Bucles](loops/README.md) - - [For](loops/for.md) - - [While](loops/while.md) - - [Do...While](loops/dowhile.md) - - [Continue](loops/continue.md) - - [Break](loops/break.md) -- [Funciones](functions/README.md) - - [Funciones de orden superior](functions/higher-order.md) - - [Funciones recursivas](functions/recursive-functions.md) - - [Cierres](functions/closures.md) - - [Set Interval](functions/set-interval.md) - - [Set Timeout](functions/set-timeout.md) - - [Operador de resto](functions/rest-operator.md) - - [Palabra clave this](functions/this-keyword.md) - - [Elevación (Hoisting)](functions/hoisting.md) - - [Captadores y definidores (Getters and Setters)](functions/getters-setters.md) -- [Objetos](objects/README.md) - - [Propiedades](objects/properties.md) - - [Mutable](objects/mutable.md) - - [Referencia](objects/reference.md) - - [Prototype](objects/prototype.md) - - [Operador Delete](objects/delete.md) - - [Enumeración](objects/enumeration.md) - - [Funciones factoría](objects/factory-functions.md) - - [Funciones Constructor](objects/constructor-functions.md) - - [Propiedad Constructor](objects/constructor-property.md) - - [Naturaleza dinámica](objects/dynamic-nature.md) -- [Fecha y hora](date-and-time.md) -- [JSON](json.md) -- [Manejo de errores](error-handling/README.md) - - [try...catch](error-handling/try...-catch.md) - - [try...catch...finally](error-handling/try...catch...finally.md) -- [Módulos](modules.md) -- [Expresión regular](regular-expression.md) -- [Clases](classes/README.md) - - [Static](classes/static.md) - - [Herencia](classes/inheritance.md) - - [Modificadores de acceso](classes/access-modifiers.md) -- [Modelo de Objetos del Navegador (BOM en inglés)](browser-object-model-bom/README.md) - - [Window](browser-object-model-bom/window.md) - - [Ventanas emergentes](browser-object-model-bom/popup.md) - - [Screen](browser-object-model-bom/screen.md) - - [Navigator](browser-object-model-bom/navigator.md) - - [Cookies](browser-object-model-bom/cookies.md) - - [History](browser-object-model-bom/history.md) - - [Location](browser-object-model-bom/location.md) -- [Eventos](events.md) -- [Promise, async/await (Promesas y asincronía)](promise-async-await/README.md) - - [Promise](promise-async-await/promise.md) - - [Async/Await](promise-async-await/async-await.md) -- [Misceláneas](miscellaneous/README.md) - - [Literales de plantilla](miscellaneous/template-literals.md) - - [Hoisting (Elevación)](miscellaneous/hoisting.md) - - [Currying](miscellaneous/currying.md) - - [Polyfills y transpiladores](miscellaneous/polyfills-and-transpilers.md) - - [Lista enlazada](miscellaneous/linked-list.md) - - [Huella global](miscellaneous/global-footprint.md) - - [Depuración](miscellaneous/debugging.md) - - [Creación e implementación de aplicaciones JS](miscellaneous/building-and-deploying.md) - - [Retrollamadas](miscellaneous/callback.md) - - [IPA Web y AJAX](miscellaneous/api-ajax.md) - - [Naturaleza de un solo hilo](./miscellaneous/single-thread-nature.md) - - [ECMAScript](miscellaneous/ECMA-script.md) - - [Pruebas](miscellaneous/testing.md) -- [Código del lado del servidor](server-side/README.md) - - [Node.js](server-side/nodejs.md) - - [Renderizado del lado del servidor](server-side/server-side-rendering.md) -- [Ejercicios](exercises/README.md) - - [Console](exercises/console.md) - - [Multiplicación](exercises/multiplication.md) - - [Variables de entrada del usuario](exercises/user-input-variables.md) - - [Constantes](exercises/constants.md) - - [Concatenación](exercises/concatenation.md) - - [Funciones](exercises/functions.md) - - [Sentencias condicionales](exercises/conditional-statements.md) - - [Objetos](exercises/objects.md) - - [Problema de FizzBuzz](exercises/fizzbuzz-problem.md) - - [¡Consigue los títulos!](exercises/get-the-titles.md) -- [Preguntas de entrevista (Sección de Bonificación)](interview-questions/README.md) - - [Nivel básico](interview-questions/basic-level.md) - - [Nivel intermedio](interview-questions/intermediate-level.md) - - [Nivel avanzado](interview-questions/advance-level.md) -- [Patrones de diseño (Sección de Bonificación)](design-patterns/README.md) - - [Patrones creacionales](design-patterns/creational-patterns.md) - - [Patrones estructurales](design-patterns/structural-patterns.md) - - [Patrones conductuales](design-patterns/behavioral-patterns.md) -- [Sistema de Ficheros (Sección de Bonificación)](file-system/README.md) -- [Conceptos de ES6 (Sección de Bonificación)](es6-concepts/README.md) - - [Let Const](es6-concepts/let-const.md) - - [Map](es6-concepts/map.md) - - [Funciones flecha](es6-concepts/arrow-functions.md) - - [Desestructurando](es6-concepts/destructuring.md) - - [Literales de plantilla](es6-concepts/template-literals.md) -- [Recursos de animación](animation-resources/README.md) - - [GSAP](animation-resources/gsap.md) - - [Anime JS](animation-resources/animejs.md) - - [Three JS](animation-resources/threejs.md) - - [Velocity JS](animation-resources/velocityjs.md) - - [React Spring](animation-resources/react-spring.md) - - [Framer Motion](animation-resources/framer-motion.md) -- [JavaScript detrás de escena](behind-scenes/README.md) - - [Pila de llamadas](behind-scenes/call-stack.md) - - [Motor](behind-scenes/engine.md) - - [Bucle de eventos](behind-scenes/event-loop.md) - - [Contexto de ejecución](behind-scenes/execution-context.md) - - [Montón de memoria](behind-scenes/memory-heap.md) - - [Entorno de ejecución](behind-scenes/runtime-environment.md) -- [Referencias](References.md) -- [Recursos](resources.md) -- [Créditos](Credits.md) diff --git a/es/objects/constructor-functions.md b/es/objects/constructor-functions.md index 1cdf4083..8719ff85 100644 --- a/es/objects/constructor-functions.md +++ b/es/objects/constructor-functions.md @@ -1,95 +1,96 @@ --- chapter: 9 -description: Understanding Constructor Functions in JavaScript. +description: Comprensión de las funciones constructoras en JavaScript. --- -## Understanding Constructor Functions in JavaScript +# Comprensión de las funciones constructoras en JavaScript -Constructor functions in JavaScript are special functions used to create and initialize objects. They provide a way to define a blueprint for creating multiple objects with similar properties and methods. +Las funciones constructoras en JavaScript son funciones especiales que se utilizan para crear e inicializar objetos. Ofrecen una forma de definir un modelo para crear varios objetos con propiedades y métodos similares. -### Defining a Constructor Function +## Definición de una función constructora -A constructor function is defined like a regular function but is typically named with an initial capital letter to distinguish it from regular functions. +Una función constructora se define como una función regular, pero normalmente se nombra con una letra mayúscula inicial para distinguirla de las funciones regulares. -### Example of a Constructor Function +## Ejemplo de una función constructora -Here's a basic example of a constructor function: +He aquí un ejemplo básico de una función constructora: ```javascript -function Person(firstName, lastName) { - this.firstName = firstName; - this.lastName = lastName; +function Persona(nombre, apellido) { + this.nombre = nombre; + this.apellido = apellido; } -const person1 = new Person("John", "Doe"); -const person2 = new Person("Jane", "Smith"); +const persona1 = new Persona("Juan", "Pérez"); +const persona2 = new Persona("Juana", "Herrera"); -console.log(person1.firstName); // Output: John -console.log(person2.lastName); // Output: Smith +console.log(persona1.nombre); // Output: Juan +console.log(persona2.apellido); // Output: Herrera ``` -In this example, the `Person` constructor function initializes the `firstName` and `lastName` properties for each new object created. +En este ejemplo, la función constructora `Persona` inicializa las propiedades `nombre` y `apellido` para cada nuevo objeto creado. -### Adding Methods to Constructor Functions +## Agregar métodos a funciones constructoras -You can add methods to the objects created by a constructor function by defining them on the constructor's prototype. +Puede agregar métodos a los objetos creados por una función constructora definiéndolos en el prototipo del constructor. ```javascript -function Person(firstName, lastName) { - this.firstName = firstName; - this.lastName = lastName; +function Persona(nombre, apellido) { + this.nombre = nombre; + this.apellido = apellido; } -Person.prototype.getFullName = function() { - return `${this.firstName} ${this.lastName}`; +Persona.prototype.dameNombreCompleto = function() { + return `${this.nombre} ${this.apellido}`; }; -const person1 = new Person("John", "Doe"); -console.log(person1.getFullName()); // Output: John Doe +const persona1 = new Persona("Juan", "Pérez"); +console.log(persona1.dameNombreCompleto()); // Output: Juan Pérez ``` -### Using `new` Keyword +## Uso de la palabra clave `new` -The `new` keyword is used to create an instance of an object from a constructor function. It performs the following steps: -1. Creates a new empty object. -2. Sets the `this` keyword to the new object. -3. Executes the constructor function. -4. Returns the new object. +La palabra clave `new` se utiliza para crear una instancia de un objeto a partir de una función constructora. Realiza los siguientes pasos: -### Example with `new` Keyword +1. Crea un nuevo objeto vacío. +2. Establece la palabra clave `this` en el nuevo objeto. +3. Ejecuta la función constructora. +4. Devuelve el nuevo objeto. + +## Ejemplo con la palabra clave `new` ```javascript -function Car(make, model) { - this.make = make; - this.model = model; +function Coche(marca, modelo) { + this.marca = marca; + this.modelo = modelo; } -const car1 = new Car("Toyota", "Corolla"); -console.log(car1.make); // Output: Toyota +const coche1 = new Coche("Toyota", "Corolla"); +console.log(coche1.marca); // Salida: Toyota ``` -### Constructor Functions vs. Classes +## Funciones constructoras vs. clases -ES6 introduced the `class` syntax, which provides a more concise and readable way to define constructor functions and methods. +ES6 introdujo la sintaxis `class`, que proporciona una forma más concisa y legible de definir funciones y métodos constructores. -### Example with Classes +## Ejemplo con Clases ```javascript -class Person { - constructor(firstName, lastName) { - this.firstName = firstName; - this.lastName = lastName; +class Persona { + constructor(nombre, apellido) { + this.nombre = nombre; + this.apellido = apellido; } - getFullName() { - return `${this.firstName} ${this.lastName}`; + dameNombreCompleto() { + return `${this.nombre} ${this.apellido}`; } } -const person1 = new Person("John", "Doe"); -console.log(person1.getFullName()); // Output: John Doe +const persona1 = new Persona("Juan", "Pérez"); +console.log(persona1.dameNombreCompleto()); // Salida: Juan Pérez ``` -### Conclusion +## Conclusión -Constructor functions are a fundamental feature in JavaScript for creating and initializing objects. They allow you to define a blueprint for objects and add methods to their prototype. With the introduction of ES6, the `class` syntax provides a more modern and readable way to achieve the same functionality. +Las funciones constructoras son una característica fundamental de JavaScript para crear e inicializar objetos. Permiten definir un modelo para los objetos y agregar métodos a su prototipo. Con la introducción de ES6, la sintaxis de `class` proporciona una forma más moderna y legible de lograr la misma funcionalidad. diff --git a/es/objects/constructor-property.md b/es/objects/constructor-property.md index 4f57b15d..849a7fd8 100644 --- a/es/objects/constructor-property.md +++ b/es/objects/constructor-property.md @@ -1,67 +1,67 @@ --- chapter: 9 -description: Understanding the `constructor` Property in JavaScript. +description: Comprender la propiedad `constructor` en JavaScript. --- -## Understanding the `constructor` Property in JavaScript +# Comprender la propiedad `constructor` en JavaScript -The `constructor` property in JavaScript is a reference to the function that created an instance's prototype. It is a property of all objects that points to the function that was used to create the object. +La propiedad `constructor` en JavaScript es una referencia a la función que creó el prototipo de una instancia. Es una propiedad de todos los objetos que apunta a la función que se utilizó para crear el objeto. -### What is the `constructor` Property? +## ¿Qué es la propiedad `constructor`? -The `constructor` property returns a reference to the constructor function that created the instance. This is useful for identifying the type of an object. +La propiedad `constructor` devuelve una referencia a la función constructora que creó la instancia. Esto resulta útil para identificar el tipo de un objeto. -### Example of the `constructor` Property +## Ejemplo de la propiedad `constructor` -Here's a basic example to illustrate the `constructor` property: +A continuación se muestra un ejemplo básico para ilustrar la propiedad `constructor`: ```javascript -function Person(firstName, lastName) { - this.firstName = firstName; - this.lastName = lastName; +function Persona(nombre, apellido) { + this.nombre = nombre; + this.apellido = apellido; } -const person1 = new Person("John", "Doe"); -console.log(person1.constructor); // Output: [Function: Person] +const persona1 = new Persona("Juan", "Herrera"); +console.log(persona1.constructor); // Output: [Function: Persona] ``` -In this example, the `constructor` property of `person1` points to the `Person` function. +En este ejemplo, la propiedad `constructor` de `persona1` apunta a la función `Persona`. -### Using the `constructor` Property to Create New Instances +## Uso de la propiedad `constructor` para crear nuevas instancias -You can use the `constructor` property to create new instances of the same type: +Puede utilizar la propiedad `constructor` para crear nuevas instancias del mismo tipo: ```javascript -const person2 = new person1.constructor("Jane", "Smith"); -console.log(person2.firstName); // Output: Jane +const persona2 = new persona1.constructor("Juana", "Herrera"); +console.log(persona2.nombre); // Output: Juana ``` -### `constructor` Property in Built-in Objects +## La propiedad `constructor` en objetos integrados -The `constructor` property is also available in built-in JavaScript objects: +La propiedad `constructor` también está disponible en objetos JavaScript integrados: ```javascript -const arr = []; -console.log(arr.constructor); // Output: [Function: Array] +const array = []; +console.log(array.constructor); // Output: [Function: Array] -const obj = {}; -console.log(obj.constructor); // Output: [Function: Object] +const objeto = {}; +console.log(objeto.constructor); // Output: [Function: Object] ``` -### Modifying the `constructor` Property +## Modificación de la propiedad `constructor` -You can modify the `constructor` property, but it is generally not recommended as it can lead to unexpected behavior: +Puedes modificar la propiedad `constructor`, pero generalmente no se recomienda ya que puede generar un comportamiento inesperado: ```javascript -function Animal(name) { - this.name = name; +function Animal(nombre) { + this.nombre = nombre; } -const dog = new Animal("Rex"); -dog.constructor = Person; -console.log(dog.constructor); // Output: [Function: Person] +const perro = new Animal("Rex"); +perro.constructor = Persona; +console.log(perro.constructor); // Output: [Function: Persona] ``` -### Conclusion +## Conclusión -The `constructor` property is a useful feature in JavaScript that allows you to reference the function that created an instance's prototype. It can be used to identify the type of an object and create new instances of the same type. However, modifying the `constructor` property should be done with caution. \ No newline at end of file +La propiedad `constructor` es una característica útil de JavaScript que permite hacer referencia a la función que creó el prototipo de una instancia. Se puede utilizar para identificar el tipo de un objeto y crear nuevas instancias del mismo tipo. Sin embargo, la modificación de la propiedad `constructor` debe realizarse con precaución. diff --git a/es/objects/delete.md b/es/objects/delete.md index 307c8432..6534d2e0 100644 --- a/es/objects/delete.md +++ b/es/objects/delete.md @@ -1,9 +1,9 @@ --- chapter: 9 -pageNumber: 62 +pageNumber: 77 description: Se puede utilizar una propiedad `delete` para **eliminar una propiedad** de un objeto. Cuando se elimina una propiedad, se elimina del objeto y no se puede acceder a ella ni enumerarla (es decir, no aparece en un bucle for-in). --- -# Delete +# Operador Delete Un operador `delete` se puede usar para **eliminar una propiedad** de un objeto. Cuando se elimina una propiedad, es eliminada del objeto y no puede ser accedida o enumerada (por ejemplo, no se muestra en un bucle for-in). @@ -23,7 +23,7 @@ niño.edad = 8; delete niño.edad; -/* Elimine la propiedad de edad del niño, revelando la edad del prototipo, porque entonces no se anula.. */ +/* Elimina la propiedad de edad del niño, revelando la edad del prototipo, porque entonces no se anula. */ let prototipoEdad = niño.edad; // 26, porque el niño no tiene su propia propiedad de edad. diff --git a/es/objects/dynamic-nature.md b/es/objects/dynamic-nature.md index 2a95c0b5..e486df71 100644 --- a/es/objects/dynamic-nature.md +++ b/es/objects/dynamic-nature.md @@ -1,117 +1,113 @@ --- chapter: 9 -description: Understanding the Dynamic Nature of Objects in JavaScript. +description: Comprender la naturaleza dinámica de los objetos en JavaScript. --- -## Understanding the Dynamic Nature of Objects in JavaScript +# Comprender la naturaleza dinámica de los objetos en JavaScript -JavaScript objects are dynamic, meaning their properties can be added, modified, or deleted at runtime. This flexibility -allows for powerful and adaptable code but requires careful management to avoid unexpected behavior. +Los objetos de JavaScript son dinámicos, lo que significa que sus propiedades se pueden agregar, modificar o eliminar en tiempo de ejecución. Esta flexibilidad +permite un código potente y adaptable, pero requiere una gestión cuidadosa para evitar comportamientos inesperados. -### Adding Properties +## Agregar propiedades -You can add properties to an object at any time using dot notation or bracket notation. +Puede agregar propiedades a un objeto en cualquier momento utilizando la notación de puntos o la notación de corchetes. ```javascript -const person = { - firstName: "John", - lastName: "Doe" +const persona = { + nombre: "Juan", + apellido: "Pérez" }; -// Adding a new property -person.age = 30; -console.log( person.age ); // Output: 30 +// Agrega una propiedad nueva +persona.edad = 30; +console.log( persona.edad ); // Salida: 30 -// Adding a property using bracket notation -person["gender"] = "male"; -console.log( person.gender ); // Output: male +// Agrega una propiedad usando la notación de corchetes +persona["genero"] = "masculino"; +console.log( persona.genero ); // Salida: masculino ``` -### Modifying Properties +## Modificación de propiedades -Existing properties can be modified by reassigning their values. +Las propiedades existentes se pueden modificar reasignando sus valores. ```javascript -const car = { - make: "Toyota", - model: "Corolla" +const coche = { + marca: "Toyota", + modelo: "Corolla" }; -// Modifying a property -car.model = "Camry"; -console.log( car.model ); // Output: Camry +// Se modifica una propiedad +coche.modelo = "Camry"; +console.log( coche.modelo ); // Salida: Camry ``` -### Deleting Properties +## Eliminar propiedades -Properties can be removed from an object using the `delete` operator. +Se pueden eliminar propiedades de un objeto utilizando el operador `delete`. ```javascript -const book = { - title: "1984", - author: "George Orwell", - year: 1949 +const libro = { + titulo: "1984", + autor: "George Orwell", + año: 1949 }; -// Deleting a property -delete book.year; -console.log( book.year ); // Output: undefined +// Eliminando una propiedad +delete libro.año; +console.log( libro.año ); // Output: undefined ``` -### Checking for Properties +## Comprobando propiedades -You can check if an object has a specific property using the `in` operator or the `hasOwnProperty` method. +Puede comprobar si un objeto tiene una propiedad específica utilizando el operador `in` o el método `hasOwnProperty`. ```javascript -const user = { - username: "johndoe", - email: "john@example.com" +const usuario = { + nombreUsuario: "johndoe", + correo: "john@example.com" }; -// Using the `in` operator -console.log( "email" in user ); // Output: true +// Usando el operador 'in' +console.log( "correo" in usuario ); // Salida: true -// Using `hasOwnProperty` method -console.log( user.hasOwnProperty( "username" ) ); // Output: true +// Usando el método `hasOwnProperty` +console.log( usuario.hasOwnProperty( "nombreUsuario" ) ); // Salida: true ``` -### Iterating Over Properties +## Iteración sobre propiedades -You can iterate over an object's properties using a `for...in` loop. +Puedes iterar sobre las propiedades de un objeto usando un bucle `for...in`. ```javascript -const student = { - name: "Alice", - age: 22, - major: "Computer Science" +const estudiante = { + nombre: "Alice", + edad: 22, + importante: "Ciencias de la Computación" }; -for (let key in student) { - if (student.hasOwnProperty( key )) { - console.log( `${key}: ${student[key]}` ); +for (let clave in estudiante) { + if (estudiante.hasOwnProperty( clave )) { + console.log( `${clave}: ${estudiante[clave]}` ); } } -// Output: -// name: Alice -// age: 22 -// major: Computer Science +// Salida: +'nombre: Alice' 'edad: 22' 'importante: Ciencias de la Computación' ``` -### Dynamic Property Names +## Nombres de propiedades dinámicas -You can use dynamic property names by using computed property names in object literals. +Puede utilizar nombres de propiedad dinámicos mediante el uso de nombres de propiedad calculados en literales de objeto. ```javascript -const propName = "score"; -const game = { - [propName]: 100 +const nombrePropiedad = "resultado"; +const juego = { + [nombrePropiedad]: 100 }; -console.log( game.score ); // Output: 100 +console.log( juego.resultado); // Salida: 100 ``` -### Conclusion +## Conclusión -The dynamic nature of JavaScript objects provides great flexibility in managing data structures. You can add, modify, -and delete properties at runtime, check for the existence of properties, and iterate over them. This flexibility, while -powerful, requires careful handling to maintain code stability and predictability. \ No newline at end of file +La naturaleza dinámica de los objetos de JavaScript proporciona una gran flexibilidad en la gestión de estructuras de datos. Puede agregar, modificar y eliminar propiedades en tiempo de ejecución, verificar la existencia de propiedades e iterar sobre ellas. Esta flexibilidad, si bien es poderosa, requiere un manejo cuidadoso para mantener la estabilidad y la previsibilidad del código. diff --git a/es/objects/enumeration.md b/es/objects/enumeration.md index 4e855232..3f1b3ad0 100644 --- a/es/objects/enumeration.md +++ b/es/objects/enumeration.md @@ -1,6 +1,6 @@ --- chapter: 9 -pageNumber: 63 +pageNumber: 78 description: La enumeración se refiere al proceso de iterar sobre las propiedades de un objeto y realizar una determinada acción para cada propiedad. Una forma de enumerar las propiedades de un objeto es utilizar el bucle `for-in`. El bucle `for-in` itera sobre las propiedades enumerables de un objeto en un orden arbitrario, y para cada propiedad ejecuta un bloque de código determinado. --- # Enumeración diff --git a/es/objects/factory-functions.md b/es/objects/factory-functions.md index 10721ca1..24bcbf8e 100644 --- a/es/objects/factory-functions.md +++ b/es/objects/factory-functions.md @@ -1,106 +1,105 @@ --- chapter: 9 -description: Understanding Factory Functions for Objects in JavaScript. +description: Comprensión de las funciones factoría para objetos en JavaScript. --- -## Understanding Factory Functions for Objects in JavaScript +# Comprensión de las funciones factoría para objetos en JavaScript -Factory functions are functions that create and return objects. They provide a flexible way to create multiple instances of objects without using the `new` keyword or constructor functions. +Las funciones de factoría son funciones que crean y devuelven objetos. Ofrecen una forma flexible de crear múltiples instancias de objetos sin utilizar la palabra clave `new` ni funciones constructoras. -### Defining a Factory Function +## Definición de una función factoría -A factory function is a regular function that returns an object. It can include parameters to customize the properties of the created object. +Una función factoría es una función normal que devuelve un objeto. Puede incluir parámetros para personalizar las propiedades del objeto creado. -### Example of a Factory Function +## Ejemplo de una función factoría -Here's a basic example of a factory function: +He aquí un ejemplo básico de una función factoría: ```javascript -function createPerson(firstName, lastName) { +function creaPersona(nombre, apellido) { return { - firstName: firstName, - lastName: lastName, - getFullName: function() { - return `${this.firstName} ${this.lastName}`; + nombre: nombre, + apellido: apellido, + obtenNombreCompleto: function() { + return `${this.nombre} ${this.apellido}`; } }; } -const person1 = createPerson("John", "Doe"); -const person2 = createPerson("Jane", "Smith"); +const persona1 = creaPersona("Juan", "Pérez"); +const persona2 = creaPersona("Juana", "Herrera"); -console.log(person1.getFullName()); // Output: John Doe -console.log(person2.getFullName()); // Output: Jane Smith +console.log(persona1.obtenNombreCompleto()); // Salida: 'Juan Pérez' +console.log(persona2.obtenNombreCompleto()); // Salida: 'Juana Herrera' ``` -In this example, the `createPerson` function returns a new object with `firstName`, `lastName`, and `getFullName` properties. +En este ejemplo, la función `creaPersona` devuelve un nuevo objeto con propiedades `nombre`, `apellido` y `obtenNombreCompleto`. -### Advantages of Factory Functions +## Ventajas de las funciones factoría -1. **No `new` Keyword**: Factory functions do not require the `new` keyword, making them simpler and less error-prone. -2. **Encapsulation**: Factory functions can encapsulate private variables and methods. -3. **Flexibility**: They can return different types of objects based on conditions. +1. **Sin palabra clave `new`: Las funciones factoría no requieren la palabra clave `new`, lo que las hace más simples y menos propensas a errores. +2. **Encapsulación**: Las funciones factoría pueden encapsular variables y métodos privados. +3. **Flexibilidad**: Pueden devolver diferentes tipos de objetos según las condiciones. -### Encapsulation with Factory Functions +## Encapsulación con funciones factoría -Factory functions can encapsulate private data by defining variables inside the function scope and returning an object with methods that access those variables. +Las funciones factoría pueden encapsular datos privados definiendo variables dentro del alcance de la función y devolviendo un objeto con métodos que acceden a esas variables. ```javascript -function createCounter() { - let count = 0; +function creaContador() { + let cuenta = 0; return { - increment: function() { - count++; - return count; + incrementa: function() { + cuenta++; + return cuenta; }, - decrement: function() { - count--; - return count; + decrementa: function() { + cuenta--; + return cuenta; }, - getCount: function() { - return count; + dameCuenta: function() { + return cuenta; } }; } -const counter = createCounter(); -console.log(counter.increment()); // Output: 1 -console.log(counter.getCount()); // Output: 1 -console.log(counter.decrement()); // Output: 0 +const contador = creaContador(); +console.log(contador.incrementa()); // Salida: 1 +console.log(contador.dameCuenta()); // Salida: 1 +console.log(contador.decrementa()); // Salida: 0 ``` -### Returning Different Objects +## Devolviendo objetos diferentes -Factory functions can return different objects based on conditions, providing flexibility in object creation. +Las funciones factoría pueden devolver diferentes objetos según las condiciones, lo que proporciona flexibilidad en la creación de objetos. ```javascript -function createShape(type) { - if (type === "circle") { +function creaForma(tipo) { + if (tipo === "circulo") { return { - type: "circle", - radius: 10, - getArea: function() { - return Math.PI * this.radius * this.radius; + tipo: "circulo", + radio: 10, + obtenArea: function() { + return Math.PI * this.radio * this.radio; } }; - } else if (type === "square") { + } else if (tipo === "cuadrado") { return { - type: "square", - side: 10, - getArea: function() { - return this.side * this.side; + tipo: "cuadrado", + lado: 10, + obtenArea: function() { + return this.lado * this.lado; } }; } } -const circle = createShape("circle"); -const square = createShape("square"); +const circulo = creaForma("circulo"); +const cuadrado = creaForma("cuadrado"); -console.log(circle.getArea()); // Output: 314.1592653589793 -console.log(square.getArea()); // Output: 100 -``` +console.log(circulo.obtenArea()); // Salida: 314.1592653589793 +console.log(cuadrado.obtenArea()); // Salida: 100``` -### Conclusion +## Conclusión -Factory functions are a powerful and flexible way to create objects in JavaScript. They provide advantages such as avoiding the `new` keyword, encapsulating private data, and returning different types of objects based on conditions. By using factory functions, you can write more modular and maintainable code. +Las funciones factoría son una forma potente y flexible de crear objetos en JavaScript. Ofrecen ventajas como evitar la palabra clave `new`, encapsular datos privados y devolver distintos tipos de objetos en función de condiciones. Al utilizar funciones de fábrica, puede escribir código más modular y fácil de mantener. diff --git a/es/objects/mutable.md b/es/objects/mutable.md index 695480de..38efa0a4 100644 --- a/es/objects/mutable.md +++ b/es/objects/mutable.md @@ -1,6 +1,6 @@ --- chapter: 9 -pageNumber: 58 +pageNumber: 73 description: Mutable significa que un objeto o tipo de datos se puede cambiar después de su creación, mientras que "inmutable" significa que no se puede cambiar. Los objetos mutables permiten modificar su estado interno, mientras que los objetos inmutables devuelven nuevas instancias con cambios, dejando el original sin cambios. --- # Mutable @@ -18,7 +18,7 @@ miObjeto.clave = "otro valor"; // miObjeto apunta al mismo objeto. ``` -Puede agregar, modificar o eliminar propiedades de un objeto utilizando la notación de puntos o la notación de corchetes. +Puede **agregar**, **modificar** o **eliminar** propiedades de un objeto utilizando la notación de puntos o la notación de corchetes. ```javascript let objeto = {}; diff --git a/es/objects/properties.md b/es/objects/properties.md index c404613f..636207bb 100644 --- a/es/objects/properties.md +++ b/es/objects/properties.md @@ -5,20 +5,20 @@ description: Un objeto es un tipo de datos compuesto que le permite almacenar y --- # Propiedades -La propiedad del objeto es un par `propertyName`:`propertyValue`, donde **el nombre de propiedad puede ser solo una cadena**. Si no es una cadena, se convierte en una cadena. Puede especificar propiedades **al crear** un objeto **o después**. Puede haber cero o más propiedades separadas por comas. +La propiedad del objeto es un par `nombrePropiedad`:`valorPropiedad`, donde **el nombre de propiedad puede ser solo una cadena**. Si no es una cadena, se convierte en una cadena. Puede especificar propiedades **al crear** un objeto **o después**. Puede haber cero o más propiedades separadas por comas. ```javascript -let language = { - name: "JavaScript", - isSupportedByBrowsers: true, - createdIn: 1995, - author: { - firstName: "Brendan", - lastName: "Eich", +let lenguaje = { + nombre: "JavaScript", + estaSoportadoPorNavegadores: true, + creadoEn: 1995, + autor: { + nombre: "Brendan", + apellido: "Eich", }, // ¡Sí, los objetos se pueden anidar! - getAuthorFullName: function () { - return this.author.firstName + " " + this.author.lastName; + obtenNombreCompletoAutor: function () { + return this.autor.nombre + " " + this.autor.apellido; }, // Sí, ¡las funciones también pueden ser valores! }; @@ -27,19 +27,19 @@ let language = { El siguiente código demuestra cómo **obtener** el valor de una propiedad. ```javascript -let variable = language.name; +let variable = lenguaje.nombre; // variable ahora contiene una cadena "JavaScript". -variable = language["name"]; +variable = lenguaje["nombre"]; // Las líneas de arriba hacen lo mismo. La diferencia es que el segundo te permite usar literalmente cualquier cadena como nombre de propiedad, pero es menos legible. -variable = language.newProperty; +variable = lenguaje.nuevaPropiedad; // variable ahora no está definida porque aún no hemos asignado esta propiedad. ``` El siguiente ejemplo muestra cómo **agregar** una nueva propiedad **o cambiar** una existente. ```javascript -language.newProperty = "nuevo valor"; +lenguaje.nuevaPropiedad = "nuevo valor"; // Ahora el objeto tiene una nueva propiedad. Si la propiedad ya existe, se repondrá su valor. -language["newProperty"] = "valor cambiado"; +lenguaje["nuevaPropiedad"] = "valor cambiado"; // Una vez más, puede acceder a las propiedades en ambos sentidos. Se recomienda la primera (notación de puntos). ``` diff --git a/es/objects/prototype.md b/es/objects/prototype.md index 42de17e2..7d52b42b 100644 --- a/es/objects/prototype.md +++ b/es/objects/prototype.md @@ -1,6 +1,6 @@ --- chapter: 9 -pageNumber: 61 +pageNumber: 76 description: Cada objeto tiene una propiedad especial llamada prototipo, que es una referencia a otro objeto. La propiedad prototype es una parte esencial del sistema de herencia basado en prototipos en JavaScript y permite que los objetos hereden propiedades y métodos de otros objetos. --- # Prototype @@ -38,12 +38,17 @@ Para configurar su propio objeto como prototipo en lugar del Object.prototype pr ```javascript let niño = Object.create(adulto); + /* Esta forma de crear objetos nos permite reemplazar fácilmente el Object.prototype predeterminado por el que queramos. En este caso, el prototipo de niño es el objeto adulto. */ + niño.edad = 8; + /* Anteriormente, niño no tenía su propia propiedad edad y el intérprete tenía que buscar más allá del prototipo del objeto niño para encontrarla. Ahora, cuando establezcamos la edad del niño, el intérprete no irá más lejos. Nota: la edad del adulto sigue siendo 26 años. */ + let cadenaPresentacion = niño.toString(); + // El valor es "Tengo 8". /* Nota: no hemos anulado la propiedad toString del niño, por lo que se invocará el método del adulto. Si el adulto no tuviera la propiedad toString, entonces se invocaría el método toString de Object.prototype y obtendríamos "[object Object]" en lugar de "Tengo 8 años" */ ``` diff --git a/es/objects/reference.md b/es/objects/reference.md index 00066154..45dbe0f8 100644 --- a/es/objects/reference.md +++ b/es/objects/reference.md @@ -1,6 +1,6 @@ --- chapter: 9 -pageNumber: 59 +pageNumber: 74 description: Una referencia a un objeto es un valor que apunta a la ubicación de la memoria donde está almacenado el objeto. Cuando se crea un objeto, se asigna un espacio de memoria para almacenar sus propiedades y valores. Cuando asignamos este objeto a una variable, esa variable contiene una referencia a la ubicación de la memoria donde está almacenado el objeto. --- # Referencia @@ -9,7 +9,7 @@ Los objetos **nunca se copian**. Se transmiten por referencia. Una referencia de A continuación se muestra un ejemplo de creación de un objeto utilizando la sintaxis literal del objeto: ```javascript -var object = { +var objeto = { foo: 'bar' }; ``` @@ -17,8 +17,8 @@ var object = { Aquí hay un ejemplo de cómo crear un objeto usando el operador `new`: ```javascript -var object = new Object(); -object.foo = 'bar'; +var objeto = new Object(); +objeto.foo = 'bar'; ``` Cuando asigna una referencia de objeto a una variable, la variable simplemente contiene una referencia al objeto, no al objeto en sí. Esto significa que si asigna la referencia del objeto a otra variable, ambas variables apuntarán al mismo objeto. @@ -26,16 +26,16 @@ Cuando asigna una referencia de objeto a una variable, la variable simplemente c Por ejemplo: ```javascript -var object1 = { +var objeto1 = { foo: 'bar' }; -var object2 = object1; +var objeto2 = objeto1; -console.log(object1 === object2); // Salida: true +console.log(objeto1 === objeto2); // Salida: true ``` -En el ejemplo anterior, tanto `object1` como `object2` son variables que contienen referencias al mismo objeto. El operador `===` se usa para comparar las referencias, no los objetos en sí, y devuelve `true` porque ambas variables contienen referencias al mismo objeto. +En el ejemplo anterior, tanto `objeto1` como `objeto2` son variables que contienen referencias al mismo objeto. El operador `===` se usa para comparar las referencias, no los objetos en sí, y devuelve `true` porque ambas variables contienen referencias al mismo objeto. {% hint style="info" %} Puede utilizar el método `Object.assign()` para crear un nuevo objeto que sea una copia de un objeto existente. @@ -45,20 +45,20 @@ A continuación se muestra un ejemplo de un objeto por referencia. ```javascript // Imagínate que comí una pizza -let myPizza = { slices: 5 }; +let miPizza = { trozos: 5 }; // Y lo compartí contigo -let yourPizza = myPizza; +let tuPizza = miPizza; // me como otra rebanada -myPizza.slices = myPizza.slices - 1; -let numberOfSlicesLeft = yourPizza.slices; -// Ahora tenemos 4 porciones porque myPizza y yourPizza -// referencia al mismo objeto pizza. +miPizza.trozos = miPizza.trozos - 1; +let numeroDeTrozosRestantes = tuPizza.trozos; +// Ahora tenemos 4 porciones porque miPizza y tuPizza +// referencian al mismo objeto pizza. let a = {}, b = {}, c = {}; -// a, byc se refieren cada uno a a +// a, b y c se refieren cada uno a un // objeto vacío diferente a = b = c = {}; -// a, byc se refieren todos a +// a, b y c se refieren todos a // el mismo objeto vacío ``` diff --git a/es/regular-expression.md b/es/regular-expression.md index 7d786a6a..73d7ed4b 100644 --- a/es/regular-expression.md +++ b/es/regular-expression.md @@ -200,12 +200,12 @@ Las propiedades y métodos admitidos por RegEx se enumeran a continuación. | Nombre | Descripción | | ------------- | -------------------------------------------------------------------------------------------------- | | `constructor` | Devuelve la función que creó el prototipo del objeto RegEx | +| `exec()` | Prueba la coincidencia y devuelve la primera coincidencia; si no hay coincidencia, devuelve `null` | | `global` | Comprueba si el modificador `g` está configurado | | `ignoreCase` | Comprueba si el modificador `i` está configurado | | `lastIndex` | Especifica el índice en el que comenzar la próxima coincidencia. | | `multiline` | Comprueba si el modificador m está configurado | | `source` | Devuelve el texto de la cadena. | -| `exec()` | Prueba la coincidencia y devuelve la primera coincidencia; si no hay coincidencia, devuelve `null` | | `test()` | Prueba la coincidencia y devuelve `true` o `false` | | `toString()` | Devuelve el valor de cadena de la expresión regular. | From bf21028db9d79bf1f61c9108ef6f777d2125abde Mon Sep 17 00:00:00 2001 From: "Juan F. Ruiz" Date: Wed, 4 Sep 2024 19:18:25 +0200 Subject: [PATCH 4/7] =?UTF-8?q?Terminada=20traduccion/correcci=C3=B3n=20se?= =?UTF-8?q?cciones:=20-=20clases=20-=20objetos=20del=20modelo=20del=20nave?= =?UTF-8?q?gador=20-=20miscelaneas=20-=20promise-async-await?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- es/browser-object-model-bom/README.md | 12 ++++- es/browser-object-model-bom/cookies.md | 2 +- es/browser-object-model-bom/history.md | 3 +- es/browser-object-model-bom/location.md | 2 +- es/browser-object-model-bom/navigator.md | 2 +- es/browser-object-model-bom/popup.md | 8 ++-- es/browser-object-model-bom/screen.md | 24 +++++----- es/browser-object-model-bom/window.md | 12 ++--- es/classes/README.md | 14 ++++-- es/classes/access-modifiers.md | 4 +- es/classes/inheritance.md | 8 +++- es/classes/static.md | 2 +- es/events.md | 20 ++++---- es/miscellaneous/ECMA-script.md | 17 ++++++- es/miscellaneous/README.md | 20 ++++---- es/miscellaneous/api-ajax.md | 11 +++-- es/miscellaneous/building-and-deploying.md | 2 +- es/miscellaneous/callback.md | 4 +- es/miscellaneous/currying.md | 2 +- es/miscellaneous/debugging.md | 2 +- es/miscellaneous/global-footprint.md | 2 +- es/miscellaneous/hoisting.md | 4 +- es/miscellaneous/linked-list.md | 10 ++-- es/miscellaneous/polyfills-and-transpilers.md | 2 +- es/miscellaneous/single-thread-nature.md | 3 +- es/miscellaneous/template-literals.md | 2 +- es/miscellaneous/testing.md | 47 +++++++++++++++---- es/promise-async-await/README.md | 5 +- es/promise-async-await/async-await.md | 4 +- es/promise-async-await/promise.md | 10 ++-- 30 files changed, 160 insertions(+), 100 deletions(-) diff --git a/es/browser-object-model-bom/README.md b/es/browser-object-model-bom/README.md index 9b66b946..277ae904 100644 --- a/es/browser-object-model-bom/README.md +++ b/es/browser-object-model-bom/README.md @@ -1,7 +1,7 @@ --- layout: editorial chapter: 16 -pageNumber: 79 +pageNumber: 98 description: El modelo de objetos del navegador nos permite interactuar con la ventana del navegador. A través de él se pueden controlar o manipular varios aspectos del navegador, como la ventana, marcos, historial, ubicación y más. --- @@ -19,4 +19,12 @@ window.alert("Bienvenido a Aprender JavaScript"); alert("Bienvenido a Aprender JavaScript") ``` -De manera similar, podemos llamar a otras propiedades debajo del objeto `window`(ventana), como `history` (historial), `screen` (pantalla), `navigator`(navegador), `location`(ubicación), etc. +En este capítulo, vamos a hablar sobre varias propiedades y métodos del modelo de objetos del navegador. + +* [Cookies](./cookies.md) +* [History](./history.md) +* [Location](./location.md) +* [Navigator](./navigator.md) +* [Ventanas emergentes](./popup.md) +* [Screen](./screen.md) +* [Window](./window.md) diff --git a/es/browser-object-model-bom/cookies.md b/es/browser-object-model-bom/cookies.md index 028cfa56..73ab446e 100644 --- a/es/browser-object-model-bom/cookies.md +++ b/es/browser-object-model-bom/cookies.md @@ -1,6 +1,6 @@ --- chapter: 16 -pageNumber: 84 +pageNumber: 103 description: Las cookies son piezas de información que se almacenan en una computadora y a las que puede acceder el navegador. --- # Cookies 🍪 diff --git a/es/browser-object-model-bom/history.md b/es/browser-object-model-bom/history.md index 30366c91..2b52f272 100644 --- a/es/browser-object-model-bom/history.md +++ b/es/browser-object-model-bom/history.md @@ -1,6 +1,6 @@ --- chapter: 16 -pageNumber: 85 +pageNumber: 104 description: La propiedad history es un objeto que gestiona la pila del historial del navegador. A medida que navegamos por las páginas, las nuevas entradas se introducen en la pila. --- @@ -40,4 +40,3 @@ Para navegar entre las diferentes pilas de historial podemos usar los métodos ` ```javascript history.forward(); ``` - diff --git a/es/browser-object-model-bom/location.md b/es/browser-object-model-bom/location.md index aa9249bb..67abc937 100644 --- a/es/browser-object-model-bom/location.md +++ b/es/browser-object-model-bom/location.md @@ -1,6 +1,6 @@ --- chapter: 16 -pageNumber: 86 +pageNumber: 105 description: La propiedad location es un objeto integrado que representa la URL actual de la página web que se muestra en el navegador. Proporciona la ubicación de la página web actual y permite realizar diversas operaciones relacionadas con las URL. --- # Location diff --git a/es/browser-object-model-bom/navigator.md b/es/browser-object-model-bom/navigator.md index db65f60c..ca0c8014 100644 --- a/es/browser-object-model-bom/navigator.md +++ b/es/browser-object-model-bom/navigator.md @@ -1,6 +1,6 @@ --- chapter: 16 -pageNumber: 83 +pageNumber: 102 description: La propiedad navigator es un objeto integrado que proporciona información sobre el navegador web del usuario y el sistema del usuario. Contiene varias propiedades y métodos que dan acceso a información sobre el entorno del usuario, como el nombre del navegador, la versión, el agente de usuario, las preferencias de idioma y más. --- diff --git a/es/browser-object-model-bom/popup.md b/es/browser-object-model-bom/popup.md index 4ccf9789..e789d0ca 100644 --- a/es/browser-object-model-bom/popup.md +++ b/es/browser-object-model-bom/popup.md @@ -1,9 +1,9 @@ --- chapter: 16 -pageNumber: 81 +pageNumber: 100 description: Las ventanas emergentes son pequeñas ventanas que aparecen en la parte superior del navegador principal para proporcionar información. Se utiliza para mostrar notificaciones, alertas, cuadros de diálogo, formularios de inicio de sesión o cualquier otro contenido que deba aparecer temporalmente o en un contexto separado de la página principal. --- -# Ventanas emergentes +# Ventanas emergentes (Popup windows, en inglés) Las ventanas emergentes son una forma adicional de mostrar información, recibir confirmación del usuario o recibir información del usuario de documentos adicionales. Una ventana emergente puede navegar a una nueva URL y enviar información a la ventana de apertura. **Cuadro de alerta** (función `alert()`), **Cuadro de confirmación** (función `confirm()`) y **Cuadro de mensaje** (función `prompt()`) son las funciones globales donde podemos mostrar la información emergente. @@ -32,9 +32,9 @@ Las ventanas emergentes son una forma adicional de mostrar información, recibir let persona = prompt("Por favor, introduzca su nombre", "Harry Potter"); - if (person == null || person == "") { + if (persona == null || persona == "") { txt = "El usuario canceló el mensaje."; } else { - txt = "¡Hola, " + person + "! ¿Cómo estás hoy?"; + txt = "¡Hola, " + persona + "! ¿Cómo estás hoy?"; } ``` diff --git a/es/browser-object-model-bom/screen.md b/es/browser-object-model-bom/screen.md index e2d8bb30..5313ef62 100644 --- a/es/browser-object-model-bom/screen.md +++ b/es/browser-object-model-bom/screen.md @@ -1,6 +1,6 @@ --- chapter: 16 -pageNumber: 82 +pageNumber: 101 description: El objeto screen contiene la información sobre la pantalla en la que se está representando la ventana actual. Permite a los desarrolladores acceder a propiedades relacionadas con el tamaño de la pantalla del usuario, la resolución, la profundidad del color y otra información relacionada con la visualización. --- # Screen @@ -15,14 +15,14 @@ screen El objeto `window.screen` tiene diferentes propiedades, algunas de ellas se enumeran aquí: -| Propiedad | Descripción | -| :--- | :--- | -| `height` | Representa la altura de píxeles de la pantalla. | -| `left` | Representa la distancia en píxeles del lado izquierdo de la pantalla actual. | -| `pixelDepth` | Una propiedad de solo lectura que devuelve la profundidad de bits de la pantalla. | -| `top` | Representa la distancia en píxeles de la parte superior de la pantalla actual. | -| `width` | Representa el ancho de píxeles de la pantalla. | -| `orientation` | Devuelve la orientación de la pantalla como se especifica en la IPA de Orientación de Pantalla. | -| `availTop` | Una propiedad de solo lectura que devuelve el primer píxel desde la parte superior que no está ocupado por los elementos del sistema. | -| `availWidth` | Una propiedad de solo lectura que devuelve el ancho de píxeles de la pantalla excluyendo los elementos del sistema. | -| `colorDepth` | Una propiedad de solo lectura que devuelve el número de bits utilizados para representar los colores. | +| Propiedad | Descripción | +| --------------| ------------------------------------------------------------------------------------------------------------------------------------- | +| `height` | Representa la altura de píxeles de la pantalla. | +| `left` | Representa la distancia en píxeles del lado izquierdo de la pantalla actual. | +| `pixelDepth` | Una propiedad de solo lectura que devuelve la profundidad de bits de la pantalla. | +| `top` | Representa la distancia en píxeles de la parte superior de la pantalla actual. | +| `width` | Representa el ancho de píxeles de la pantalla. | +| `orientation` | Devuelve la orientación de la pantalla como se especifica en la IPA de Orientación de Pantalla. | +| `availTop` | Una propiedad de solo lectura que devuelve el primer píxel desde la parte superior que no está ocupado por los elementos del sistema. | +| `availWidth` | Una propiedad de solo lectura que devuelve el ancho de píxeles de la pantalla excluyendo los elementos del sistema. | +| `colorDepth` | Una propiedad de solo lectura que devuelve el número de bits utilizados para representar los colores. | diff --git a/es/browser-object-model-bom/window.md b/es/browser-object-model-bom/window.md index ed790583..f4c17c9b 100644 --- a/es/browser-object-model-bom/window.md +++ b/es/browser-object-model-bom/window.md @@ -1,25 +1,21 @@ --- chapter: 16 -pageNumber: 80 +pageNumber: 99 description: window es un objeto global que representa la ventana o pestaña del navegador en la que está cargada la página web actual. El objeto window actúa como objeto global para JavaScript del lado del cliente, lo que significa que las variables y funciones declaradas sin las palabras clave var, let o const se convierten en propiedades y métodos del objeto window. - --- -# Window -El objeto `window` representa la ventana del navegador y es compatible con los navegadores. Las variables, objetos y funciones globales también forman parte del objeto de ventana. +# Window -Global **variables** are **properties** and **functions** are **methods** of the window object. +El objeto `window` representa la ventana del navegador y es compatible con los navegadores. Las variables, objetos y funciones globales también forman parte del objeto `window`. Las **variables** globales son **propiedades** y las **funciones** son **métodos** del objeto window. -Let's take an example of the screen properties. It is used to determine the size of the browser window and is measured in pixels. - Tomemos un ejemplo de las propiedades de la pantalla. Se utiliza para determinar el tamaño de la ventana del navegador y se mide en píxeles. * `window.innerHeight` - la altura interior de la ventana del navegador * `window.innerWidth` - el ancho interior de la ventana del navegador -> _**Nota**_: `window.document` es lo mismo que `document.location` ya que el modelo de objeto de documento\(DOM\) es parte del objeto de ventana. +> _**Nota**_: `window.document` es lo mismo que `document.location` ya que el Modelo de Objetos del documento\(DOM\) es parte del objeto de ventana. Algunos ejemplos de los métodos de ventana. diff --git a/es/classes/README.md b/es/classes/README.md index 82e69fba..42df3fab 100644 --- a/es/classes/README.md +++ b/es/classes/README.md @@ -1,7 +1,7 @@ --- layout: editorial chapter: 15 -pageNumber: 75 +pageNumber: 94 description: Las clases son plantillas para crear un objeto. Encapsula datos con código para trabajar con datos. La palabra clave class se utiliza para crear una clase. --- @@ -9,9 +9,9 @@ description: Las clases son plantillas para crear un objeto. Encapsula datos con ## Clases -Las clases son plantillas para crear un objeto. Encapsula datos con código para trabajar con datos. La palabra clave `class` se utiliza para crear una clase. Y se utiliza un método específico llamado `constructor` para crear e inicializar un objeto creado con una `class`. A continuación se muestra un ejemplo de clase de automóvil. - +Las clases son plantillas para crear un objeto. Encapsulan datos con código para trabajar con los datos. Por ejemplo, si queremos crear un árbol genealógico de pájaros, podemos crear una clase de pájaro y cada objeto de pájaro que creemos tendrá los métodos y datos de la clase de pájaro. +La palabra clave `class` se utiliza para crear una clase. Y un método específico llamado `constructor` se utiliza para crear e inicializar un objeto creado con una `class`. A continuación se muestra un ejemplo de una clase de automóvil. ```javascript class Automovil { @@ -34,3 +34,11 @@ La clase debe definirse antes de su uso. {% endhint %} En el cuerpo de la clase, los métodos o constructores se definen y ejecutan en `strict mode` (modo estricto, en español). La sintaxis que no se adhiere al modo estricto genera error. + +Cada vez que creamos un objeto a partir de una clase, estamos creando una **instancia** de esa clase, por ejemplo, la variable `miCoche` que está arriba de nosotros con la palabra clave `new` es una instancia. Las instancias son *independientes*, lo que significa que no afectan a ninguna otra instancia. Es por eso que se piensa que las clases son plantillas para los objetos, ya que una vez que creas ese objeto de instancia, tendrá los mismos métodos que la clase original. + +En este capítulo, exploraremos los siguientes temas: + +* [Modificadores de acceso](./access-modifiers.md) +* [Herencia](./inheritance.md) +* [Static](./static.md) \ No newline at end of file diff --git a/es/classes/access-modifiers.md b/es/classes/access-modifiers.md index 101abc19..cca48dd5 100644 --- a/es/classes/access-modifiers.md +++ b/es/classes/access-modifiers.md @@ -1,6 +1,6 @@ --- chapter: 15 -pageNumber: 78 +pageNumber: 97 description: Los modificadores de acceso controlan la visibilidad y accesibilidad de los miembros de la clase (propiedades y métodos). public, private y protected son los tres modificadores de acceso utilizados en clase para controlar su acceso desde el exterior. De forma predeterminada, todos los miembros (propiedades, campos, métodos o funciones) son accesibles públicamente desde fuera de la clase. --- # Modificadores de acceso @@ -20,7 +20,7 @@ let miCoche = new Coche("Toyota"); console.log(Coche.hola(miCoche)); // Hola Toyota ``` -Los miembros `privados` sólo pueden acceder internamente dentro de la clase y no pueden ser accesibles desde fuera. Los elementos de la clase privados deben comenzar con el carácter de la almohadilla: `#`. +Los miembros `privados` sólo pueden accederse internamente dentro de la clase y no pueden ser accesibles desde fuera. Los elementos de la clase privados deben comenzar con el carácter de la almohadilla: `#`. ```javascript class Coche { diff --git a/es/classes/inheritance.md b/es/classes/inheritance.md index fd7d5947..df78f1b6 100644 --- a/es/classes/inheritance.md +++ b/es/classes/inheritance.md @@ -1,6 +1,6 @@ --- chapter: 15 -pageNumber: 77 +pageNumber: 96 description: La herencia se refiere a la capacidad de un objeto (subclase) de heredar propiedades y métodos de otro objeto (superclase). JavaScript admite la herencia de prototipos, lo que significa que los objetos pueden heredar propiedades y métodos directamente de otros objetos, lo que se conoce como prototipos. --- # Herencia @@ -35,4 +35,8 @@ console.log(miCoche.mostrar()); // Tengo un Toyota, es un Camry El prototipo de la clase padre debe ser un `Object` o `null`. {% endhint %} -El método `super` se usa dentro de un constructor y se refiere a la clase principal. Con esto, se puede acceder a las propiedades y métodos de la clase principal. +El método `super` se utiliza dentro de un constructor y hace referencia a la clase padre. Con esto, se puede acceder a las propiedades y métodos de la clase padre. En el ejemplo anterior, usamos `super(marca)` en la subclase `Modelo` para que pueda obtener las propiedades de la superclase `Coche`. + +{% hint style="info" %} +Las superclases son las clases principales utilizadas, mientras que las subclases son clases que se extienden a partir de las superclases. +{% endhint %} diff --git a/es/classes/static.md b/es/classes/static.md index c02b7984..224890b5 100644 --- a/es/classes/static.md +++ b/es/classes/static.md @@ -1,6 +1,6 @@ --- chapter: 15 -pageNumber: 76 +pageNumber: 95 description: La palabra clave static define los métodos o propiedades estáticas de una clase. Cuando un método o propiedad se define como estático dentro de una clase, entonces pertenece a la clase misma y no a instancias (objetos) de la clase. --- diff --git a/es/events.md b/es/events.md index 0cc40c87..a0690d17 100644 --- a/es/events.md +++ b/es/events.md @@ -32,16 +32,16 @@ Los detectores de eventos se llaman solo cuando el evento ocurre en el contexto Algunos de los eventos HTML comunes se mencionan aquí. -| Evento | Descripción | -| ------------- | ------------| +| Evento | Descripción | +| ------------- | ------------------------------------------------------------------------- | +| `onclick` | Cuando el usuario hace clic en el elemento. | | `onchange` | Cuando el usuario cambia o modifica el valor de la entrada del formulario | -| `onclick` | Cuando el usuario hace clic en el elemento. | -| `onmouseover` | Cuando el cursor del mouse pasa sobre el elemento | -| `onmouseout` | Cuando el cursor del mouse sale del elemento. | -| `onkeydown` | Cuando el usuario presiona y luego suelta la tecla | -| `onload` | Cuando el navegador haya terminado de cargar| +| `onkeydown` | Cuando el usuario presiona y luego suelta la tecla | +| `onload` | Cuando el navegador haya terminado de cargar | +| `onmouseout` | Cuando el cursor del mouse sale del elemento. | +| `onmouseover` | Cuando el cursor del mouse pasa sobre el elemento | -Es común que los controladores registrados en nodos con hijos también reciban eventos de los hijos. Por ejemplo, si se hace clic en un botón dentro de un párrafo, los controladores registrados en el párrafo también recibirán el evento de clic. En caso de presencia de manejadores en ambos, el de abajo irá primero. Se dice que el evento se propaga hacia afuera, desde el nodo iniciador hasta su nodo padre y en la raíz del documento. +Es común que los controladores registrados en nodos con hijos también reciban eventos de los hijos. Por ejemplo, si se hace clic en un botón dentro de un párrafo, los controladores registrados en el párrafo también recibirán el evento de clic. En caso de presencia de manejadores en ambos, el de abajo irá primero. Se dice que el evento se _propaga_ hacia afuera, desde el nodo iniciador hasta su nodo padre y en la raíz del documento. El controlador de eventos puede llamar al método `stopPropagation` en el objeto del evento para evitar que los controladores más arriba reciban el evento. Esto es útil en casos como, tienes un botón dentro de un elemento en el que se puede hacer clic y no deseas activar el comportamiento de clic del elemento externo al hacer clic en un botón. @@ -60,7 +60,7 @@ El controlador de eventos puede llamar al método `stopPropagation` en el objeto ``` -Aquí, los controladores _`mousedown`_ se registran tanto por párrafo como por botón. Al hacer clic en el botón, el controlador del botón llama a "stopPropagation", lo que evitará que se ejecute el controlador del párrafo. +Aquí, los controladores _`mousedown`_ se registran tanto por párrafo como por botón. Al hacer clic en el botón, el controlador del botón llama a `stopPropagation`, lo que evitará que se ejecute el controlador del párrafo. Los eventos pueden tener un comportamiento predeterminado. Por ejemplo, los enlaces navegan hasta el destino del enlace al hacer clic, se navega al final de una página al hacer clic en la flecha hacia abajo, y así sucesivamente. Estos comportamientos predeterminados se pueden evitar llamando a un método `preventDefault` en el objeto del evento. @@ -75,4 +75,4 @@ Los eventos pueden tener un comportamiento predeterminado. Por ejemplo, los enla ``` -Aquí, se evita el comportamiento predeterminado del enlace al hacer clic, es decir, navegar hacia el destino del enlace.target. +Aquí, se evita el comportamiento predeterminado del enlace al hacer clic, es decir, navegar hacia el destino del enlace. diff --git a/es/miscellaneous/ECMA-script.md b/es/miscellaneous/ECMA-script.md index 63ecaf98..baab3b45 100644 --- a/es/miscellaneous/ECMA-script.md +++ b/es/miscellaneous/ECMA-script.md @@ -1,6 +1,6 @@ --- chapter: 19 -pageNumber: 82 +pageNumber: 136 description: Este documento de Markdown proporciona una descripción general de ECMAScript, su historia, características y su papel en el desarrollo web. --- # ECMAScript (ES) @@ -87,6 +87,21 @@ Esta sección del documento explica por qué ECMAScript es crucial para JavaScri - **TypeScript**: TypeScript, un superconjunto de ECMAScript, agrega escritura estática para mejorar las herramientas y la seguridad del código. +### Algunos ejemplos de sintaxis ECMAScript + +- **Sintaxis de las funciones flecha**: `const x = (x, y) => x + y;` + +- **Sintaxis de Class**: `class ClassName { constructor() { ... } }` + +- **Sintaxis de Promise**: `const promiseA = new Promise(myExecutorFunc);` +`const promiseB = promiseA.then(handleFulfilled1, handleRejected1);` + +- **Operador Spread**: `const year = [...q1, ...q2, ...q3, ...q4];` + +- **Objeto Map**: `const x = new Map([ ["a", 500],["b", 300],["c", 200] ]);` + + + ## Conclusión ECMAScript es una parte fundamental del desarrollo web y da forma a la forma en que creamos aplicaciones web dinámicas e interactivas. Mantenerse informado sobre las últimas funciones de ECMAScript es esencial para el desarrollo de JavaScript moderno. diff --git a/es/miscellaneous/README.md b/es/miscellaneous/README.md index 55067540..6ca6a8e0 100644 --- a/es/miscellaneous/README.md +++ b/es/miscellaneous/README.md @@ -1,7 +1,7 @@ --- layout: editorial chapter: 19 -pageNumber: 92 +pageNumber: 112 --- # Capítulo 19 @@ -10,16 +10,16 @@ pageNumber: 92 En este capítulo discutiremos varios temas que surgirán al escribir código. Los temas se enumeran a continuación: -* [Literales de plantilla](./template-literals.md) -* [Hoisting (Alzado)](./hoisting.md) +* [IPA Web y AJAX](./api-ajax.md) +* [Creación e implementación de aplicaciones JS](./building-and-deploying.md) +* [Retrollamadas](./callback.md) * [Currying](./currying.md) -* [Polyfills y transpiladores](./polyfills-and-transpilers.md) -* [Lista enlazada](./linked-list.md) -* [Huella global](./global-footprint.md) * [Depuración](./debugging.md) -* [Retrollamadas](./callback.md) -* [IPA Web y AJAX](./api-ajax.md) -* [Naturaleza de un solo hilo](./single-thread-nature.md) * [ECMAScript](./ECMA-script.md) -* [Creación e implementación de aplicaciones JS](./building-and-deploying.md) +* [Huella global](./global-footprint.md) +* [Hoisting (Alzado)](./hoisting.md) +* [Lista enlazada](./linked-list.md) +* [Polyfills y transpiladores](./polyfills-and-transpilers.md) +* [Naturaleza de un solo hilo](./single-thread-nature.md) +* [Literales de plantilla](./template-literals.md) * [Pruebas](./testing.md) diff --git a/es/miscellaneous/api-ajax.md b/es/miscellaneous/api-ajax.md index da83a0fa..2099eb64 100644 --- a/es/miscellaneous/api-ajax.md +++ b/es/miscellaneous/api-ajax.md @@ -1,15 +1,16 @@ --- chapter: 19 -pageNumber: 80 +pageNumber: 129 description: Este capítulo presenta el concepto de IPA (Interfaz de Programación de Aplicaciones) y demuestra su uso a través de AJAX (JavaScript asíncrono y XML). Aprenda a obtener datos de fuentes externas e integrarlos en aplicaciones web para mejorar su funcionalidad.. --- + # IPA de Web y AJAX En este capítulo, analizaremos IPA y AJAX, las dos tecnologías importantes que permiten que las aplicaciones interactúen con servidores y envíen o recuperen datos sin la necesidad de recargar la página completa. ## IPA (Interfaz de Programación de Aplicaciones) -Un **IPA** (Interfaz de Programación de Aplicaciones) es un conjunto de reglas y protocolos que permite a diferentes aplicaciones de software comunicarse entre sí. Define los métodos y los formatos de datos que las aplicaciones pueden usar para solicitar e intercambiar información. +Una **IPA** (Interfaz de Programación de Aplicaciones) es un conjunto de reglas y protocolos que permite a diferentes aplicaciones de software comunicarse entre sí. Define los métodos y los formatos de datos que las aplicaciones pueden usar para solicitar e intercambiar información. ## Puntos clave @@ -17,13 +18,13 @@ Un **IPA** (Interfaz de Programación de Aplicaciones) es un conjunto de reglas - Las IPA proporcionan una forma para que las aplicaciones envíen solicitudes y reciban respuestas, lo que les permite interactuar y compartir datos sin problemas. -- Los tipos comunes de IPA incluyen **IPA web** que permiten que las aplicaciones web se comuniquen a través de Internet, **IPA de biblioteca** que proporcionan funciones de código reutilizables y **IPA del sistema operativo** que permiten la interacción con el sistema operativo subyacente. +- Los tipos comunes de IPA incluyen **IPAs de web** que permiten que las aplicaciones web se comuniquen a través de Internet, **IPAs de biblioteca** que proporcionan funciones de código reutilizables e **IPAs del sistema operativo** que permiten la interacción con el sistema operativo subyacente. - Las IPA son esenciales para crear integraciones, crear software sobre plataformas existentes y permitir la interoperabilidad entre diferentes sistemas. - La documentación de IPA, a menudo proporcionada por desarrolladores o proveedores de servicios, explica cómo utilizar una IPA, incluidos los puntos finales disponibles, los métodos de solicitud y los formatos de respuesta. -- Ejemplos de IPA populares incluyen IPA de redes sociales (por ejemplo, IPA Graph de Facebook), IPA de pasarela de pago (por ejemplo, IPA de PayPal) y IPA de servicios en la nube (por ejemplo, IPA de AWS). +- Ejemplos de IPA populares incluyen IPAs de redes sociales (por ejemplo, la IPA Graph de Facebook), IPAs de pasarela de pago (por ejemplo, la IPA de PayPal) e IPAs de servicios en la nube (por ejemplo, la IPA de AWS). ## Beneficios de las IPA @@ -171,4 +172,4 @@ Recuerde alojar sus archivos HTML y JavaScript en un servidor web si planea acce Las IPA desempeñan un papel crucial en el desarrollo de software moderno al permitir que las aplicaciones colaboren y compartan datos de forma eficaz. Comprender cómo utilizar las IPA e integrarlas en sus proyectos es fundamental para crear software interconectado y rico en funciones. -AJAX es una tecnología fundamental en el desarrollo web moderno que permite a los desarrolladores crear aplicaciones web dinámicas y responsivas. Si bien el nombre sugiere XML, AJAX es compatible con varios formatos de datos, lo que lo convierte en una herramienta versátil para mejorar la experiencia del usuario y crear aplicaciones web interactivas. \ No newline at end of file +AJAX es una tecnología fundamental en el desarrollo web moderno que permite a los desarrolladores crear aplicaciones web dinámicas y responsivas. Si bien el nombre sugiere XML, AJAX es compatible con varios formatos de datos, lo que lo convierte en una herramienta versátil para mejorar la experiencia del usuario y crear aplicaciones web interactivas. diff --git a/es/miscellaneous/building-and-deploying.md b/es/miscellaneous/building-and-deploying.md index cbda8e6c..b15e5600 100644 --- a/es/miscellaneous/building-and-deploying.md +++ b/es/miscellaneous/building-and-deploying.md @@ -1,6 +1,6 @@ --- chapter: 19 -pageNumber: 95 +pageNumber: 123 description: --- # Creación e implementación de aplicaciones JS diff --git a/es/miscellaneous/callback.md b/es/miscellaneous/callback.md index c3b7fa7d..e51656b8 100644 --- a/es/miscellaneous/callback.md +++ b/es/miscellaneous/callback.md @@ -1,10 +1,10 @@ --- chapter: 19 -pageNumber: 85 +pageNumber: 126 description: Una retrollamada es una función que se pasa como argumento a otra función, se ejecuta más tarde y se usa a menudo para operaciones asincrónicas. El infierno de las retrollamadas, también conocido como la "pirámide de la perdición", ocurre cuando las retrollamadas anidadas dan como resultado un código ilegible e imposible de mantener. --- -# Funciones de retrollamada en JavaScript +# Funciones de retrollamada (Callback function, en inglés) en JavaScript Las funciones de retrollamada son un concepto fundamental en JavaScript, que permite la programación asincrónica y basada en eventos. Este documento de Markdown proporciona una explicación detallada de las funciones de retrollamada, su propósito y cómo usarlas de manera efectiva. diff --git a/es/miscellaneous/currying.md b/es/miscellaneous/currying.md index ab14e4bd..82f74b58 100644 --- a/es/miscellaneous/currying.md +++ b/es/miscellaneous/currying.md @@ -1,6 +1,6 @@ --- chapter: 19 -pageNumber: 95 +pageNumber: 115 description: Currying es una técnica avanzada en programación funcional para transformar una función con múltiples argumentos en una secuencia de funciones anidadas. Transforma una función invocable como f(a,b,c) a invocable como f(a)(b)(c). No llama a una función, sino que la transforma. --- # Currying diff --git a/es/miscellaneous/debugging.md b/es/miscellaneous/debugging.md index d53c2646..a633b5c2 100644 --- a/es/miscellaneous/debugging.md +++ b/es/miscellaneous/debugging.md @@ -1,6 +1,6 @@ --- chapter: 19 -pageNumber: 102 +pageNumber: 122 description: En programación, pueden ocurrir errores al escribir código. Podría deberse a errores sintácticos o lógicos. El proceso de encontrar errores puede llevar mucho tiempo y ser complicado y se denomina depuración de código. --- # Depuración diff --git a/es/miscellaneous/global-footprint.md b/es/miscellaneous/global-footprint.md index bd6225d8..fca26728 100644 --- a/es/miscellaneous/global-footprint.md +++ b/es/miscellaneous/global-footprint.md @@ -1,6 +1,6 @@ --- chapter: 19 -pageNumber: 101 +pageNumber: 121 description: La huella global se refiere al impacto o influencia que tiene un script o una aplicación en el alcance global del entorno de ejecución. Cuando un script o una aplicación crea variables o funciones en el ámbito global, afecta la huella global. --- # Huella global diff --git a/es/miscellaneous/hoisting.md b/es/miscellaneous/hoisting.md index 9e711673..4278a995 100644 --- a/es/miscellaneous/hoisting.md +++ b/es/miscellaneous/hoisting.md @@ -1,11 +1,11 @@ --- chapter: 19 -pageNumber: 94 +pageNumber: 114 description: El hoisting es un comportamiento predeterminado en JavaScript para mover declaraciones en la parte superior. Mientras se ejecuta un código, se crea un contexto de ejecución global y se ejecuta. En la fase de creación, JavaScript mueve la declaración de variable y función a la parte superior de la página, lo que se conoce como elevación.. --- # Hoisting (Alzado) -El alzado o elevación es un comportamiento predeterminado en JavaScript para mover declaraciones en la parte superior. Mientras se ejecuta un código, se crea un contexto de ejecución global: creación y ejecución. En la fase de creación, JavaScript mueve la declaración de variables y funciones a la parte superior de la página, lo que se conoce como elevación. +El alzado o elevación es un comportamiento predeterminado en JavaScript para mover declaraciones en la parte superior. Mientras se ejecuta un código, se crea un contexto de ejecución global: **creación** y **ejecución**. En la fase de creación, JavaScript mueve la declaración de variables y funciones a la parte superior de la página, lo que se conoce como elevación. ```javascript // elevación de la variable diff --git a/es/miscellaneous/linked-list.md b/es/miscellaneous/linked-list.md index 2bcc2fc4..7718debd 100644 --- a/es/miscellaneous/linked-list.md +++ b/es/miscellaneous/linked-list.md @@ -1,6 +1,6 @@ --- chapter: 19 -pageNumber: 98 +pageNumber: 118 description: La lista enlazada es una estructura de datos lineal que se utiliza para almacenar una colección de elementos, llamados nodos. Cada nodo en una lista enlazada contiene dos partes - los datos o el valor del elemento que representa y una referencia (puntero) al siguiente nodo de la secuencia. El último nodo de la lista apunta a nulo, lo que indica el final de la lista. --- # Lista Enlazada @@ -21,7 +21,7 @@ Hay tres tipos diferentes de listas enlazadas: 2. **Listas doblemente enlazadas:** Hay dos punteros en cada nodo, uno al siguiente nodo y otro al nodo anterior. 3. **Listas enlazadas circulares:** Una lista enlazada circular forma un bucle al hacer que el último nodo apunte al primer nodo o a cualquier otro nodo anterior. -### agregar (add) +### Agregar (add, en inglés) El método `agregar` se crea aquí para agregar valor a una lista vinculada. @@ -52,7 +52,7 @@ class ListaEnlazada { } ``` -### extraer (pop) +### Extraer (pop, en inglés) Aquí, se crea un método `extraer` para eliminar un valor de la lista vinculada. @@ -78,7 +78,7 @@ class ListaEnlazada { } ``` -### anteponer (prepend) +### Anteponer (prepend, en inglés) Aquí, se crea un método `anteponer` para agregar un valor antes del primer hijo de la lista vinculada. @@ -107,7 +107,7 @@ class ListaEnlazada { } ``` -### eliminarPrimero (shift) +### EliminarPrimero (shift, en inglés) Aquí, se crea el método `eliminarPrimero` para eliminar el primer elemento de la Lista Enlazada. diff --git a/es/miscellaneous/polyfills-and-transpilers.md b/es/miscellaneous/polyfills-and-transpilers.md index 886ab1f6..039e7055 100644 --- a/es/miscellaneous/polyfills-and-transpilers.md +++ b/es/miscellaneous/polyfills-and-transpilers.md @@ -1,6 +1,6 @@ --- chapter: 19 -pageNumber: 96 +pageNumber: 116 description: Polyfills y transpilers son dos herramientas importantes que se utilizan en el desarrollo web para ayudar a garantizar que el código JavaScript moderno pueda ejecutarse en navegadores más antiguos y aprovechar las últimas funciones de JavaScript manteniendo la compatibilidad con entornos más antiguos. --- # Polyfills y transpiladores diff --git a/es/miscellaneous/single-thread-nature.md b/es/miscellaneous/single-thread-nature.md index bef9046b..cacb8fdd 100644 --- a/es/miscellaneous/single-thread-nature.md +++ b/es/miscellaneous/single-thread-nature.md @@ -1,9 +1,10 @@ --- layout: editorial chapter: 23 -pageNumber: 81 +pageNumber: 133 description: JavaScript es un lenguaje de programación popular conocido principalmente por su uso en el desarrollo web. Una de las características clave que diferencia a JavaScript de muchos otros lenguajes es su naturaleza de subproceso único. Esto significa que el código JavaScript se ejecuta en un único hilo principal del navegador o del entorno de ejecución. --- + # Naturaleza de un solo hilo de JavaScript JavaScript es un lenguaje de programación de un solo subproceso que ejecuta código de forma secuencial en un subproceso principal. Se basa en patrones asincrónicos sin bloqueo para manejar tareas de manera eficiente sin bloquear el hilo principal, lo que garantiza la capacidad de respuesta en las aplicaciones web. Si bien simplifica la concurrencia, requiere un uso eficaz de retrollamadas y programación basada en eventos. diff --git a/es/miscellaneous/template-literals.md b/es/miscellaneous/template-literals.md index f6ac2805..f15e1a23 100644 --- a/es/miscellaneous/template-literals.md +++ b/es/miscellaneous/template-literals.md @@ -1,6 +1,6 @@ --- chapter: 19 -pageNumber: 93 +pageNumber: 113 description: Los literales de plantilla son literales delaminados con comillas invertidas (` `) y se usan en la interpolación de variables y expresiones en cadenas. --- # Literales de plantilla diff --git a/es/miscellaneous/testing.md b/es/miscellaneous/testing.md index 15597b24..c4b90c9b 100644 --- a/es/miscellaneous/testing.md +++ b/es/miscellaneous/testing.md @@ -1,6 +1,6 @@ --- chapter: 19 -pageNumber: 120 +pageNumber: 139 description: En este capítulo, profundizaremos en los aspectos críticos de las pruebas en el desarrollo web. Estas habilidades son indispensables para garantizar la confiabilidad y funcionalidad de las aplicaciones web. Exploremos el mundo de las pruebas unitarias utilizando varias herramientas y marcos. --- @@ -8,11 +8,38 @@ description: En este capítulo, profundizaremos en los aspectos críticos de las ## Pruebas unitarias -Las pruebas unitarias son una práctica fundamental en el desarrollo web. Implica probar componentes o funciones individuales para garantizar que funcionen como se espera. Esta práctica puede detectar errores tempranamente, mejorar la calidad del código y hacer que la refactorización sea más segura. Las pruebas unitarias son esenciales por las siguientes razones: +Las pruebas unitarias son una práctica fundamental en el desarrollo web. Implica probar componentes o funciones individuales para garantizar que funcionen como se espera. Esta práctica está incluida en un enfoque de desarrollo de software llamado desarrollo basado en pruebas (TDD), que consiste en escribir pruebas unitarias a partir de los requisitos del software primero y luego escribir el código. Veamos ahora por qué deberíamos escribir pruebas unitarias. -- Verifica que las partes individuales de su código base estén funcionando correctamente. +## ¿Por qué escribir pruebas unitarias? + +Las pruebas unitarias se utilizan ampliamente por las siguientes razones: + +- En TDD, los requisitos del software se convierten en casos de prueba específicos. Luego, el software se mejora para pasar las nuevas pruebas. +- En otras palabras, para verificar que partes individuales del código base estén funcionando correctamente. +- Permite la modificación del código sin afectar la funcionalidad de otras unidades o del software. - Proporciona una red de seguridad al refactorizar o realizar cambios. -- Ayuda a documentar el comportamiento esperado de funciones y componentes. +- Ayuda a documentar el comportamiento esperado de las funciones y los componentes. +- Ayuda a que no se repitan los módulos porque cada módulo tiene su propia responsabilidad. + +## Beneficios de las pruebas unitarias + +La principal ventaja de las pruebas unitarias es su enfoque preciso. Dado que prueban una sola función, brindan una respuesta precisa. Si una prueba unitaria falla, en la mayoría de los casos, puede estar seguro de que la función específica que se está probando es el problema. + +- Las pruebas unitarias ayudan a encontrar y corregir errores de manera rápida y sencilla. +- Las pruebas unitarias contribuyen a una mayor calidad del código. +- Las pruebas unitarias contribuyen a una mejor arquitectura de la aplicación. +- Las pruebas unitarias actúan como documentación. + +## Mejores prácticas para crear pruebas unitarias + +Para asegurarse de tener buenas pruebas unitarias, siga estas mejores prácticas: + +- Escriba las pruebas durante el desarrollo, no después +- Los casos de prueba no deben duplicar la lógica de implementación. +- Los casos de prueba deben exhibir el mismo comportamiento siempre que su código no cambie. +- Use una convención de nomenclatura consistente para los casos de prueba +- Evite usar expresiones de lógica condicional en las pruebas unitarias +- Si es posible, automatice las pruebas unitarias ## Marcos de prueba @@ -50,7 +77,7 @@ npx jest Mocha es un marco de prueba flexible. Proporciona la estructura para ejecutar pruebas, pero requiere bibliotecas adicionales para las aserciones y burlas. -Comenzando con Moca +Comenzando con Mohca Instale Mocha y una biblioteca de aserciones como Chai: @@ -58,9 +85,9 @@ Instale Mocha y una biblioteca de aserciones como Chai: npm install --save-dev mocha chai ``` -Create a `test` directory and add your test files. +Cree un directorio `test` y agregue sus archivos de prueba. -Write your test cases using Mocha's describe and it functions and Chai's assertion functions. +Escriba sus casos de prueba utilizando las funciones describe e it de Mocha y las funciones assertion de Chai. ```javascript const chai = require('chai'); @@ -68,12 +95,12 @@ const expect = chai.expect; const myFunction = require('./myFunction'); describe('myFunction', () => { - it('should return the sum of two numbers', () => { + it('debe devolver la suma de dos números', () => { expect(myFunction(2, 3)).to.equal(5); }); }); ``` -## Conclusion +## Conclusión -In this chapter, we've explored the fundamentals of testing in web development and discussed the significance of Unit testing and other testing frameworks and tools that are vital for any web developer. With consistent practice and access to the right set of tools, one can write dependable code and ensure that applications perform optimally. +En este capítulo, hemos explorado los aspectos básicos de las pruebas en el desarrollo web y hemos analizado la importancia de las pruebas unitarias y otros marcos y herramientas de prueba que son fundamentales para cualquier desarrollador web. Con una práctica constante y acceso al conjunto de herramientas adecuado, se puede escribir código confiable y garantizar que las aplicaciones funcionen de manera óptima. \ No newline at end of file diff --git a/es/promise-async-await/README.md b/es/promise-async-await/README.md index 4a3bc47d..a0a2a7c1 100644 --- a/es/promise-async-await/README.md +++ b/es/promise-async-await/README.md @@ -1,7 +1,7 @@ --- layout: editorial chapter: 17 -pageNumber: 87 +pageNumber: 108 description: Promises are now used by most modern APIs. It is therefore important to understand how they work and to know how to use them to optimize your code. --- @@ -10,3 +10,6 @@ description: Promises are now used by most modern APIs. It is therefore importan ## Promise, async/await (Promesas y asincronía) Las promesas (los objetos Promise) ahora son utilizadas por la mayoría de las API modernas. Por tanto, es importante comprender cómo funcionan y saber cómo utilizarlos para optimizar su código. En este capítulo, definiremos en detalle qué son las promesas y cómo usarlas en operaciones asincrónicas. + +* [Promise](./promise.md) +* [Async/Await](./async-await.md) diff --git a/es/promise-async-await/async-await.md b/es/promise-async-await/async-await.md index a448f467..7300233a 100644 --- a/es/promise-async-await/async-await.md +++ b/es/promise-async-await/async-await.md @@ -1,13 +1,13 @@ --- chapter: 18 -pageNumber: 91 +pageNumber: 111 description: Async/Await es una característica introducida en ECMAScript 2017 (ES8) que proporciona una sintaxis más concisa y legible para trabajar con código JavaScript asincrónico. Está construido sobre JavaScript Promises y se utiliza para manejar operaciones asincrónicas de manera síncrona. --- + # Async/Await Con las promesas, se puede usar una palabra clave `async` para declarar una función asincrónica que devuelve una promesa, mientras que la sintaxis `await` hace que JavaScript espere hasta que esa promesa se establezca y devuelva su valor. Estas palabras clave facilitan la redacción de promesas. A continuación se muestra un ejemplo de `async`. - ```javascript //función asíncrona f async function f() { diff --git a/es/promise-async-await/promise.md b/es/promise-async-await/promise.md index 0c6fc4bb..0a34202c 100644 --- a/es/promise-async-await/promise.md +++ b/es/promise-async-await/promise.md @@ -1,12 +1,10 @@ --- chapter: 18 -pageNumber: 89 +pageNumber: 109 description: Promise es un objeto que representa la eventual finalización (o falla) de una operación asincrónica y su valor resultante. Las promesas proporcionan una forma más estructurada y organizada de manejar operaciones asincrónicas, como realizar solicitudes de red, leer archivos o interactuar con bases de datos. --- -# Capítulo 18 - -## Promise, async/await +# Promise, async/await Imagine que es un escritor de libros popular y planea publicar un nuevo libro en un día determinado. Los lectores que estén interesados en este libro lo agregarán a su lista de deseos y recibirán una notificación cuando se publique o incluso si el día de lanzamiento también se pospuso. El día del lanzamiento, todos reciben una notificación y pueden comprar el libro, haciendo felices a todas las partes. Esta es una analogía de la vida real que ocurre en la programación. @@ -14,7 +12,7 @@ Imagine que es un escritor de libros popular y planea publicar un nuevo libro en 2. Un "_código consumidor_" es alguien que consume el "código productor" una vez que está listo. En este caso, es un "lector". 3. El vínculo entre el "_código productor_" y el "_código consumidor_" puede denominarse _promesa_ ya que garantiza la obtención de los resultados del "_código productor_" al "_código consumidor_". -### Promise +## Promise La analogía que hicimos también es válida para el objeto `promise` de JavaScript. La sintaxis del constructor para el objeto `promise` es: @@ -40,7 +38,7 @@ Las propiedades internas del objeto `promise` devuelta por el constructor `new P No se puede acceder a las propiedades de la promesa: `state` y `result`. Se necesitan métodos de promesa para manejar las promesas. {% endhint %} -Ejemplo de una promesa. +## Ejemplo de una promesa ```javascript let promesaUno = new Promise(function(resuelve, rechaza) { From 87535b6a4d4f4c29d669463633184eb16b818173 Mon Sep 17 00:00:00 2001 From: "Juan F. Ruiz" Date: Wed, 4 Sep 2024 21:20:01 +0200 Subject: [PATCH 5/7] Terminadas las traducciones de: - Javascript del lado del servidor - Ejercicios --- es/exercises/README.md | 14 ++++----- es/exercises/concatenation.md | 15 ++++++--- es/exercises/conditional-statements.md | 14 +++++++-- es/exercises/console.md | 41 +++++++++++++++++++++++-- es/exercises/constants.md | 15 +++++++-- es/exercises/fizzbuzz-problem.md | 7 +++-- es/exercises/functions.md | 8 +++-- es/exercises/get-the-titles.md | 7 +++-- es/exercises/multiplication.md | 8 +++-- es/exercises/objects.md | 7 +++-- es/exercises/user-input-variables.md | 7 +++-- es/server-side/README.md | 7 ++++- es/server-side/nodejs.md | 30 +++++++++--------- es/server-side/server-side-rendering.md | 6 +--- 14 files changed, 136 insertions(+), 50 deletions(-) diff --git a/es/exercises/README.md b/es/exercises/README.md index 8d0e5faf..fed6f798 100644 --- a/es/exercises/README.md +++ b/es/exercises/README.md @@ -1,7 +1,7 @@ --- layout: editorial chapter: 21 -pageNumber: 106 +pageNumber: 146 --- # Capítulo 21 @@ -10,13 +10,13 @@ pageNumber: 106 En este capítulo realizaremos ejercicios para comprobar nuestro conocimiento en JavaScript. Los ejercicios que realizaremos se listan abajo: -* [Console](./console.md) -* [Multiplicación](./multiplication.md) -* [Variables de entrada del usuario](./user-input-variables.md) -* [Constantes](./constants.md) * [Concatenación](./concatenation.md) -* [Funciones](./functions.md) * [Sentencias condicionales](./conditional-statements.md) -* [Objetos](./objects.md) +* [Constantes](./constants.md) +* [Console](./console.md) * [Problema de FizzBuzz](./fizzbuzz-problem.md) +* [Funciones](./functions.md) * [¡Consigue los títulos!](./get-the-titles.md) +* [Multiplicación](./multiplication.md) +* [Objetos](./objects.md) +* [Variables de entrada del usuario](./user-input-variables.md) diff --git a/es/exercises/concatenation.md b/es/exercises/concatenation.md index b044665d..da2bd777 100644 --- a/es/exercises/concatenation.md +++ b/es/exercises/concatenation.md @@ -1,6 +1,6 @@ --- -chapter: 20 -pageNumber: 111 +chapter: 21 +pageNumber: 151 --- # Concatenación @@ -27,10 +27,17 @@ const icono = '👋'; // hola 👋 ``` -## 📝 Tarea +### 📝 Tarea -- [ ] Escriba un programa que establezca los valores para `str1`y `str2` para que el código imprima '_Hola mundo_' a la consola. +- [ ] Escriba un programa para establecer los valores de `str1` y `str2` para que el código imprima '_Hola Mundo_' en la consola. + +- [ ] Escriba un programa que solicite al usuario que ingrese su nombre (`nombre`) y apellido (`apellido`). Luego, utilice la concatenación de cadenas para crear y mostrar su nombre completo (`nombreCompleto`). + +- [ ] Escriba un programa que solicite al usuario que ingrese su nombre. Luego, utilice la concatenación de cadenas para crear un mensaje de saludo que incluya su nombre. Por ejemplo: "Buenos días, Aman". ## 💡 Consejos - Visite el capítulo de cadenas [concatenación](../strings/concat.md) para tener más información sobre la concatenación de cadenas. + +{% aceeditor compilerTitle="¡Inténtelo!" %} +{% endaceeditor %} diff --git a/es/exercises/conditional-statements.md b/es/exercises/conditional-statements.md index 98533c76..c40d7f16 100644 --- a/es/exercises/conditional-statements.md +++ b/es/exercises/conditional-statements.md @@ -1,6 +1,6 @@ --- -chapter: 20 -pageNumber: 113 +chapter: 21 +pageNumber: 153 --- # Sentencias condicionales @@ -12,7 +12,17 @@ La lógica condicional es vital en programación para asegurar que el programa f - Si hay más de 100 km por recorrer, imprima `"Todavía te queda un poco de camino por recorrer"`. - Si son más de 50 km, pero menores o iguales a 100 km, imprima: `"Estaré ahí en 5 minutos"`. - Si son menores o iguales a 50 km, imprimir: `"Estoy estacionando. Te veo ahora mismo"`. +- [ ] Escriba un programa que verifique si una persona es elegible para votar o no en función de su edad. + + - Si la edad del usuario es 18 o más, imprima `Usted es elegible para votar`. + - Si la edad del usuario es menor de 18 años, imprima `No es elegible para votar`. + + **_Nota: `edad` puede estar entre `1` y `100`._** + ## 💡 Consejos - Visite el capítulo [lógica condicional](../conditional/) para entender como usar la lógica condicional y las declaraciones condicionales. + +{% aceeditor compilerTitle="¡Inténtelo!" %} +{% endaceeditor %} diff --git a/es/exercises/console.md b/es/exercises/console.md index 366249dc..d3fa926b 100644 --- a/es/exercises/console.md +++ b/es/exercises/console.md @@ -1,13 +1,13 @@ --- -chapter: 20 -pageNumber: 107 +chapter: 21 +pageNumber: 147 --- # Console En JavaScript, usamos `console.log()` para escribir un mensaje (el contenido de una variable, un) In JavaScript, we use `console.log()` to write a message (the content of a variable, una cadena dada, etc.) en `console`. Se usa principalmente con fines de depuración, idealmente para dejar una traza del contenido de las variables durante la ejecución de un programa. -## Ejemplo +## Ejemplo 1 ```javascript console.log("Bienvenido a la edición para principiantes de Aprende JavaScript"); @@ -15,13 +15,48 @@ let edad = 30; console.log(edad); ``` +## Matemáticas en la consola + +También puedes escribir una ecuación matemática en la `consola` para saber la respuesta a una expresión. + +### Ejemplo + +```javascript +console.log("¿Qué edad tendrá una década después?"); +let edad = 30; +console.log(edad + 10); +//devuleve 40 en la consola +``` + +## Booleanos en la consola + +Otra forma útil en la que los desarrolladores usan la consola es para comprobar si algo es verdadero o falso. Por ejemplo, en el ejemplo siguiente, puedes comprobar si la edad de una persona igual a 45 es verdadera o falsa. + +### Ejemplo 3 + +```javascript +console.log("¿Tienen 50 años?"); +let edad = 30; +console.log(edad === 50); +//resultado: false +``` + ## 📝 Tareas - [ ] Escriba un programa para imprimir `Hola mundo` en la consola. ¡Siéntase libre de probar otras cosas también! - [ ] Escriba un programa para imprimir variables en la `console`. 1. Declare una variable `animal` y asígnele el valor dragón. 2. Imprima la variable `animal` en la `console`. +- [ ] Escriba un programa para imprimir el número `45` con una expresión matemática de su elección. (¡Es una ventaja si uno de los números es una variable!) +- [ ] Escriba un programa en la consola que verifique si la cantidad de huevos es mayor que `12`. + 1. Declara una variable `huevos` y asígnale un número de tu elección + 2. Llame a la variable `eggs` en la `consola` y use el operador correcto para ver si el número asignado a `eggs` es mayor que 12 + Si el número de huevos es mayor, debe imprimir `true`, si no, debe imprimir `falso`. ## 💡 Consejos - Visite el capítulo [Variables](../basics/variables.md) para entender más sobre variables. +- Visite el capítulo [Operadores](https://javascript.sumankunwar.com.np/en/numbers/operators.html) para conocer los posibles operadores que puede usar. + +{% aceeditor compilerTitle="¡Inténtelo!" %} +{% endaceeditor %} diff --git a/es/exercises/constants.md b/es/exercises/constants.md index 21dd9321..cd9ef75a 100644 --- a/es/exercises/constants.md +++ b/es/exercises/constants.md @@ -1,6 +1,6 @@ --- -chapter: 20 -pageNumber: 110 +chapter: 21 +pageNumber: 150 --- # Constantes @@ -22,6 +22,17 @@ VERSION = '0.9'; console.log(VERSION); ``` +- [ ] Escriba un programa que solicite al usuario ingresar una temperatura en _grados Celsius_, luego use la constante `FACTOR_CONVERSION` que es igual a `9/5` para convertir a _grados Fahrenheit_. + + ```javascript + const FACTOR_CONVERSION = 9 / 5; + + /* Comienza tu código desde aquí */ + ``` + ## 💡 Consejos - Visite el capítulo [Variables](../basics/variables.md) para más información sobre const y tambíen busque "_TypeError assignment to constant variable_" en los buscadores para encontrar una solución. + +{% aceeditor compilerTitle="¡Inténtelo!" %} +{% endaceeditor %} diff --git a/es/exercises/fizzbuzz-problem.md b/es/exercises/fizzbuzz-problem.md index 09200dff..06e32ff8 100644 --- a/es/exercises/fizzbuzz-problem.md +++ b/es/exercises/fizzbuzz-problem.md @@ -1,6 +1,6 @@ --- -chapter: 20 -pageNumber: 115 +chapter: 21 +pageNumber: 155 --- # Problema de FizzBuzz @@ -42,3 +42,6 @@ Buzz ## 💡 Consejos - Visite el capítulo [Bucles](../loops/) para entender cómo trabajan los bucles. + +{% aceeditor compilerTitle="¡Inténtelo!" %} +{% endaceeditor %} diff --git a/es/exercises/functions.md b/es/exercises/functions.md index ff592f8c..81cbc7d9 100644 --- a/es/exercises/functions.md +++ b/es/exercises/functions.md @@ -1,6 +1,6 @@ --- -chapter: 20 -pageNumber: 112 +chapter: 21 +pageNumber: 152 --- # Funciones @@ -10,7 +10,11 @@ Una función es un bloque de código diseñado para realizar una tarea específi - [ ] Escriba un programa para crear una función llamada `esImpar` a la que se pasa un número `45345` como argumento y determina si el número es impar o no. - [ ] Llame a esta función para obtener el resultaado. El resultado debería estar en un formato booleano y y debería devolver `true` en `console`. +- [ ] Escriba un programa para crear una función llamada `calcularAreaRectangulo` que tome dos parámetros, el `ancho` y `alto` del rectángulo y debería devolver el `área` del rectángulo. ## 💡 Consejos - Visite el capítulo [funciones](../functions/) para entender las funciones y cómo crearlas. + +{% aceeditor compilerTitle="¡Inténtelo!" %} +{% endaceeditor %} diff --git a/es/exercises/get-the-titles.md b/es/exercises/get-the-titles.md index 9ee45ca4..2605efa8 100644 --- a/es/exercises/get-the-titles.md +++ b/es/exercises/get-the-titles.md @@ -1,6 +1,6 @@ --- -chapter: 20 -pageNumber: 116 +chapter: 21 +pageNumber: 156 --- # ¡Consigue los títulos! @@ -28,3 +28,6 @@ const libros = [ ## 💡 Consejos - Viste los capítulos de [matrices](../arrays/) y [objetos](../objects/) para entender como trabajan los objetos y las matrices. + +{% aceeditor compilerTitle="¡Inténtelo!" %} +{% endaceeditor %} diff --git a/es/exercises/multiplication.md b/es/exercises/multiplication.md index a34bf2d1..a7fc2dc4 100644 --- a/es/exercises/multiplication.md +++ b/es/exercises/multiplication.md @@ -1,6 +1,6 @@ --- -chapter: 20 -pageNumber: 108 +chapter: 2 +pageNumber: 148 --- # Multiplicación @@ -17,7 +17,11 @@ Aquí, hemos almacenado el producto de `3 * 2` en la variable `valorResultante`. ## 📝 Tareas - [ ] Escriba un programa que almacene el producto de `23` veces `41` e imprima su valor. +- [ ] Escriba un programa que genere una tabla de multiplicación para un número específico. El programa debe tomar un número como entrada y luego mostrar la tabla de multiplicación para ese número, del 1 al 10. ## 💡 Consejos - Visite el capítulo [Operadores básicos](../numbers/operators.md) para entender las operaciones matemáticas. + +{% aceeditor compilerTitle="¡Inténtelo!" %} +{% endaceeditor %} diff --git a/es/exercises/objects.md b/es/exercises/objects.md index a1c048e1..7418a092 100644 --- a/es/exercises/objects.md +++ b/es/exercises/objects.md @@ -1,6 +1,6 @@ --- -chapter: 20 -pageNumber: 114 +chapter: 21 +pageNumber: 154 --- # Objetos @@ -45,3 +45,6 @@ let familia = { - Visite el capítulo [objetos](../objects/) para entender cómo trabajan los objetos. - Puede obtener los `numerosAfortunados` de cada objeto persona dentro del objeto familia. - Una vez obtenga cada matriz simplemente itere sobre ella agregando cada elemento y después sume cada uno de los tres miembros de la familia. + +{% aceeditor compilerTitle="¡Inténtelo!" %} +{% endaceeditor %} diff --git a/es/exercises/user-input-variables.md b/es/exercises/user-input-variables.md index 3faa5534..bd88c756 100644 --- a/es/exercises/user-input-variables.md +++ b/es/exercises/user-input-variables.md @@ -1,6 +1,6 @@ --- -chapter: 20 -pageNumber: 109 +chapter: 21 +pageNumber: 149 --- # Variables de entrada del usuario @@ -15,3 +15,6 @@ En JavaScript, podemos tomar información de los usuarios y usarla como una vari - El contenido de una variable se determina por las entradas del usuario. El método `prompt()` salva el valor de entrada como una cadena. - Necesitará asegurarse de que el valor de cadena se convierte en un entero para los cálculos. - Visite el capítulo [Operadores básicos](../numbers/operators.md) para la conversión de tipos de `string` a `int`. + +{% aceeditor compilerTitle="¡Inténtelo!" %} +{% endaceeditor %} diff --git a/es/server-side/README.md b/es/server-side/README.md index 363cc504..cfc4ec16 100644 --- a/es/server-side/README.md +++ b/es/server-side/README.md @@ -1,7 +1,7 @@ --- layout: editorial chapter: 20 -pageNumber: 103 +pageNumber: 141 --- # Capítulo 20 @@ -46,3 +46,8 @@ A diferencia del código del lado del cliente, que sólo se puede escribir en Ja - **JSON**: La Notación de Objetos JavaScript (JSON) es un formato de datos popular que se utiliza para transmitir datos entre un servidor y una aplicación web. JSON se basa en JavaScript, por lo que es fácil trabajar con datos JSON en JavaScript. A continuación, aprenderemos cómo usar JavaScript para el código del lado del servidor con Node.js y cómo usar Server Side Rendering (SSR) para generar HTML en el servidor. + +En este capítulo, exploraremos los siguientes temas: + +- [Node.js](./nodejs.md) +- [Renderizado del lado del servidor (SSR)](./server-side-rendering.md) diff --git a/es/server-side/nodejs.md b/es/server-side/nodejs.md index 531d2f94..b7bcd69b 100644 --- a/es/server-side/nodejs.md +++ b/es/server-side/nodejs.md @@ -1,6 +1,6 @@ --- chapter: 20 -pageNumber: 104 +pageNumber: 143 --- # Node.js @@ -27,31 +27,33 @@ Esto debería imprimir el número de versión de Node.js de esta manera: v20.7.0 ``` -## Escribiendo su primer programa Node.js +## Node.js REPL -Ahora que ha instalado Node.js, escribamos nuestro primer programa Node.js. Cree un nuevo archivo llamado `hola.js` y agregue el siguiente código: - -```js -console.log('¡Hola mundo!'); -``` - -Para ejecutar este programa, abra su terminal y navegue hasta el directorio donde guardó el archivo `hola.js`. Luego ejecute el siguiente comando: +REPL es una interfaz de línea de comandos que significa Leer, evaluar, imprimir, bucle (Read, Evaluate, Print, Loop en inglés), que permite ejecutar código desde la terminal. Para comenzar, escriba el siguiente comando en la terminal: ```bash -node hola.js +node ``` -Esto debería imprimir el siguiente resultado: +Una vez que ingreses a este mensaje, puedes ejecutar un código como este: -```bash -'¡Hola mundo!' +```js +> console.log("Hola mundo") ``` +Puede dejar el REPL pulsando la combinación de teclas CTRL + d + ## Escribir un servidor web simple usando Express y Node.js Express es un marco web popular para Node.js. Proporciona una API simple y elegante para crear aplicaciones web. Usemos Express para crear un servidor web simple que responda a las solicitudes HTTP con un "¡Hola mundo!" mensaje. -Primero, necesitamos instalar Express. Para hacer esto, ejecute el siguiente comando en su terminal: +First, we need to initialize npm by running npm init. + +```bash +npm init +``` + +Después, necesitamos instalar Express. Para hacer esto, ejecute el siguiente comando en su terminal: ```bash npm install express diff --git a/es/server-side/server-side-rendering.md b/es/server-side/server-side-rendering.md index 85ab2e66..a7a8aebe 100644 --- a/es/server-side/server-side-rendering.md +++ b/es/server-side/server-side-rendering.md @@ -1,6 +1,6 @@ --- chapter: 20 -pageNumber: 105 +pageNumber: 145 --- # Renderizado del lado del servidor (SSR) @@ -32,7 +32,3 @@ También existen algunas desventajas al usar SSR: ## ¿Cómo implementar SSR? Cada biblioteca tiene su propia forma de implementar SSR. Por ejemplo, para React, puede usar [Next.js](https://nextjs.org/) o [Gatsby](https://www.gatsbyjs.com/). Para Vue, puede utilizar [Nuxt.js](https://nuxtjs.org/). Para Svelte puedes usar [SvelteKit](https://kit.svelte.dev/). - -## Conclusión - -En este capítulo, aprendimos sobre la representación del lado del servidor (SSR) y cómo puede mejorar el rendimiento de su sitio web. También aprendimos sobre las ventajas de usar SSR sobre CSR y cómo implementar SSR con React, Vue y Svelte. From 651a110cd7febfe8ce9bfd50c547da5274b842d9 Mon Sep 17 00:00:00 2001 From: "Juan F. Ruiz" Date: Thu, 5 Sep 2024 21:22:30 +0200 Subject: [PATCH 6/7] =?UTF-8?q?Termino=20traducci=C3=B3n=20de=20las=20secc?= =?UTF-8?q?iones:=20-=20Animation=20Resources=20-=20Design=20Patterns=20(c?= =?UTF-8?q?ambios=20menores)=20-=20ES6=20Concepts=20-=20Interview=20Questi?= =?UTF-8?q?ons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- es/animation-resources/README.md | 59 +-- es/animation-resources/animejs.md | 45 +- es/animation-resources/framer-motion.md | 45 +- es/animation-resources/gsap.md | 42 +- es/animation-resources/react-spring.md | 34 +- es/animation-resources/threejs.md | 47 +- es/animation-resources/velocityjs.md | 42 +- es/design-patterns/README.md | 3 +- es/design-patterns/behavioral-patterns.md | 3 + es/design-patterns/structural-patterns.md | 2 + es/es6-concepts/map.md | 24 +- es/interview-questions/README.md | 2 +- es/interview-questions/advance-level.md | 416 ++++++++++++++++-- es/interview-questions/basic-level.md | 432 ++++++++++++++++++- es/interview-questions/intermediate-level.md | 428 +++++++++++++++--- 15 files changed, 1327 insertions(+), 297 deletions(-) diff --git a/es/animation-resources/README.md b/es/animation-resources/README.md index e4e9fa32..9a22c29d 100644 --- a/es/animation-resources/README.md +++ b/es/animation-resources/README.md @@ -2,49 +2,50 @@ layout: editorial chapter: 26 pageNumber: 252 -description: JavaScript animation resources, including libraries, tutorials, articles, and frameworks to create engaging animations. +description: Recursos de animación de JavaScript, incluidas bibliotecas, tutoriales, artículos y marcos para crear animaciones atractivas. --- -# Chapter 26 -# Animation Resources +# Capítulo 26 -Animations in JavaScript are a powerful way to create engaging user experiences on the web. This chapter will cover various resources, including libraries, tutorials, articles, and frameworks, that assist developers in creating animations using JavaScript. +## Recursos de animación -## Introduction to JavaScript Animations +Las animaciones en JavaScript son una forma eficaz de crear experiencias de usuario atractivas en la Web. En este capítulo se tratarán diversos recursos, incluidas bibliotecas, tutoriales, artículos y marcos de trabajo, que ayudan a los desarrolladores a crear animaciones con JavaScript. -JavaScript animations allow developers to create dynamic, visually appealing web content. Animations can be used for various purposes, such as enhancing user interfaces, providing feedback, and making content more engaging. +## Introducción a las animaciones de JavaScript -### Libraries +Las animaciones de JavaScript permiten a los desarrolladores crear contenido web dinámico y visualmente atractivo. Las animaciones se pueden utilizar para diversos fines, como mejorar las interfaces de usuario, proporcionar comentarios y hacer que el contenido sea más atractivo. -JavaScript animation libraries make it easier to create complex animations. Here are some popular libraries: +### Bibliotecas -1. **[GSAP (GreenSock Animation Platform)](https://greensock.com/gsap/)**: A powerful library for creating high-performance animations. -2. **[Anime.js](https://animejs.com/)**: A lightweight library for handling animations. -3. **[Three.js](https://threejs.org/)**: A library for creating 3D animations. -4. **[Velocity.js](http://velocityjs.org/)**: A fast animation engine. +Las bibliotecas de animación de JavaScript facilitan la creación de animaciones complejas. Estas son algunas bibliotecas populares: -### Tutorials +1. **[GSAP (GreenSock Animation Platform)](https://greensock.com/gsap/)**: Una potente biblioteca para crear animaciones de alto rendimiento. +2. **[Anime.js](https://animejs.com/)**: Una biblioteca ligera para gestionar animaciones. +3. **[Three.js](https://threejs.org/)**: Una biblioteca para crear animaciones 3D. +4. **[Velocity.js](http://velocityjs.org/)**: Un motor de animación rápido. -To get started with JavaScript animations, check out these tutorials: +### Tutoriales -1. **[MDN Web Docs: Using CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)**: A comprehensive guide on CSS animations. -2. **[JavaScript.info: JavaScript Animations](https://javascript.info/js-animation/)**: An introduction to JavaScript animations. -3. **[GreenSock Learning Resources](https://greensock.com/learning/)**: Tutorials and resources for learning GSAP. +Para comenzar a utilizar animaciones en JavaScript, consulte estos tutoriales: -### Frameworks +1. **[MDN Web Docs: Usando animaciones CSS](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Animations/Using_CSS_animations)**: Una guía completa sobre animaciones CSS. +2. **[JavaScript.info: JavaScript Animations](https://javascript.info/js-animation/)**: Una introducción a las animaciones de JavaScript. +3. **[GreenSock Learning Resources](https://greensock.com/learning/)**: Tutoriales y recursos para aprender GSAP. -Frameworks provide a structured approach to building animations. Some popular frameworks include: +### Marcos de trabajo (Frameworks, en inglés) -1. **[React Spring](https://react-spring.io/)**: A spring-physics based animation library for React. -2. **[Framer Motion](https://www.framer.com/motion/)**: A production-ready motion library for React. +Los marcos de trabajo proporcionan un enfoque estructurado para crear animaciones. Algunos marcos de trabajo populares son: -In this chapter, we will explore the following topics in detail: +1. **[React Spring](https://react-spring.io/)**: Una biblioteca de animación basada en física de resortes para React. +2. **[Framer Motion](https://www.framer.com/motion/)**: Una biblioteca de movimiento lista para producción para React. -* [Getting Started with GSAP](./gsap.md) -* [Creating Animations with Anime.js](./animejs.md) -* [3D Animations with Three.js](./threejs.md) -* [Fast Animations with Velocity.js](./velocityjs.md) -* [Using React Spring for Animations](./react-spring.md) -* [Animating with Framer Motion](./framer-motion.md) +En este capítulo, exploraremos los siguientes temas en detalle: -Let's dive into each topic to understand how to use these resources effectively. \ No newline at end of file +* [Introducción a GSAP](./gsap.md) +* [Creando animaciones con Anime.js](./animejs.md) +* [Animaciones 3D con Three.js](./threejs.md) +* [Animaciones rápidas con Velocity.js](./velocityjs.md) +* [Uso de React Spring para animaciones](./react-spring.md) +* [Animación con Framer Motion](./framer-motion.md) + +Profundicemos en cada tema para comprender cómo utilizar estos recursos de manera efectiva. diff --git a/es/animation-resources/animejs.md b/es/animation-resources/animejs.md index aadc814d..04aa8020 100644 --- a/es/animation-resources/animejs.md +++ b/es/animation-resources/animejs.md @@ -1,38 +1,38 @@ --- chapter: 26 pageNumber: 254 -description: Creating animations with Anime.js, a lightweight JavaScript animation library. +description: Creación de animaciones con Anime.js, una biblioteca de animación JavaScript ligera. --- -## Creating Animations with Anime.js +# Creación de animaciones con Anime.js -Anime.js is a lightweight JavaScript animation library with a simple yet powerful API. +Anime.js es una biblioteca de animación de JavaScript liviana con una API simple pero poderosa. -**Installation** +## Instalación -You can include Anime.js in your project using npm: +Puedes incluir Anime.js en tu proyecto usando npm: ```bash npm install animejs ``` -Or you can use a CDN: +O puedes utilizar un CDN: ```html ``` -**Basic Animation** +## Animación básica -Here's a simple example of using Anime.js to animate an element: +A continuación se muestra un ejemplo sencillo del uso de Anime.js para animar un elemento: ```html - + - Anime.js Animation + Animación Anime.js
@@ -48,13 +48,12 @@ Here's a simple example of using Anime.js to animate an element: ``` -**Advanced Animation** +## Animación avanzada -Anime.js provides various features for advanced animations, such as keyframes, timeline, and easing. +Anime.js proporciona varias funciones para animaciones avanzadas, como fotogramas clave, línea de tiempo y suavizado. - -- **Keyframes:** -Keyframes allow you to define multiple stages of an animation. Here's an example: +- **Fotogramas clave:** +Los fotogramas clave permiten definir varias etapas de una animación. A continuación, se muestra un ejemplo: ```javascript anime({ @@ -69,9 +68,8 @@ anime({ }); ``` - -- **Timeline:** -Timelines allow you to sequence animations. Here's an example: +- **Línea de tiempo:** +Las líneas de tiempo permiten secuenciar animaciones. A continuación, se muestra un ejemplo: ```javascript var tl = anime.timeline({ @@ -85,12 +83,11 @@ tl.add({ }).add({ targets: '#box', translateY: 250 -}, '-=500'); // Starts 500ms before the previous animation ends +}, '-=500'); // Comienza 500 ms antes de que finalice la animación anterior. ``` - -- **Easing:** -Anime.js provides a variety of easing options to make animations look more natural. Here's an example: +- **Suavizado:** +Anime.js ofrece una variedad de opciones de suavizado para que las animaciones se vean más naturales. A continuación, se muestra un ejemplo: ```javascript anime({ @@ -102,5 +99,5 @@ anime({ ``` {% hint style="info" %} -For more details and examples, check out the Anime.js documentation. -{% endhint %} \ No newline at end of file +Para obtener más detalles y ejemplos, consulte la documentación de Anime.js. +{% endhint %} diff --git a/es/animation-resources/framer-motion.md b/es/animation-resources/framer-motion.md index 55386a00..60aa525c 100644 --- a/es/animation-resources/framer-motion.md +++ b/es/animation-resources/framer-motion.md @@ -1,24 +1,24 @@ --- chapter: 26 pageNumber: 255 -description: Using Framer Motion for animations in React applications. +description: Uso de Framer Motion para animaciones en aplicaciones React. --- -## Animating with Framer Motion +# Animación con Framer Motion -Framer Motion is a production-ready motion library for React. It makes it easy to create complex animations. +Framer Motion es una biblioteca de movimiento lista para producción para React. Facilita la creación de animaciones complejas. -**Installation** +## Instalación -You can include Framer Motion in your project using npm: +Puedes incluir Framer Motion en tu proyecto usando npm: ```bash npm install framer-motion ``` -**Basic Animation** +## Animación básica -Here's a simple example of using Framer Motion to animate a component: +A continuación se muestra un ejemplo sencillo del uso de Framer Motion para animar un componente: ```javascript import React from 'react'; @@ -27,7 +27,7 @@ import { motion } from 'framer-motion'; const AnimatedComponent = () => { return ( - I will move to the right + Me moveré hacia la derecha ); }; @@ -35,13 +35,12 @@ const AnimatedComponent = () => { export default AnimatedComponent; ``` -**Advanced Animation** +## Animación avanzada -Framer Motion provides various features for advanced animations, such as keyframes, gestures, and layout animations. +Framer Motion proporciona varias funciones para animaciones avanzadas, como fotogramas clave, gestos y animaciones de diseño. - -- **Keyframes:** -Keyframes allow you to define multiple stages of an animation. Here's an example: +- **Fotogramas clave:** +Los fotogramas clave permiten definir varias etapas de una animación. A continuación, se muestra un ejemplo: ```javascript import React from 'react'; @@ -53,7 +52,7 @@ const KeyframeComponent = () => { animate={{ x: [0, 100, 0] }} transition={{ duration: 2, ease: 'easeInOut' }} > - I will move back and forth + Me moveré de un lado a otro ); }; @@ -61,9 +60,8 @@ const KeyframeComponent = () => { export default KeyframeComponent; ``` - -- **Gestures** -Framer Motion allows you to create animations based on user gestures. Here's an example: +- **Gestos** +Framer Motion te permite crear animaciones basadas en los gestos del usuario. Aquí tienes un ejemplo: ```javascript import React from 'react'; @@ -75,7 +73,7 @@ const GestureComponent = () => { drag dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }} > - Drag me around + Arrástrame por ahí ); }; @@ -83,9 +81,8 @@ const GestureComponent = () => { export default GestureComponent; ``` - -- **Layout Animations** -Framer Motion makes it easy to animate layout changes. Here's an example: +- **Animaciones de diseño** +Framer Motion facilita la animación de cambios de diseño. A continuación, se muestra un ejemplo: ```javascript import React, { useState } from 'react'; @@ -96,7 +93,7 @@ const LayoutAnimationComponent = () => { return ( setIsOpen(!isOpen)} style={{ background: 'lightblue', padding: '10px' }}> - {isOpen ? 'Click to collapse' : 'Click to expand'} + {isOpen ? 'Haga clic para contraer' : 'Haga clic para expandir'} ); }; @@ -105,5 +102,5 @@ export default LayoutAnimationComponent; ``` {% hint style="info" %} -For more details and examples, check out the Framer Motion documentation. -{% endhint %} \ No newline at end of file +Para obtener más detalles y ejemplos, consulte la documentación de Framer Motion. +{% endhint %} diff --git a/es/animation-resources/gsap.md b/es/animation-resources/gsap.md index 850150b5..a0f898dd 100644 --- a/es/animation-resources/gsap.md +++ b/es/animation-resources/gsap.md @@ -1,38 +1,38 @@ --- chapter: 26 pageNumber: 253 -description: Getting started with GSAP, a powerful library for creating high-performance animations. +description: Introducción a GSAP, una potente biblioteca para crear animaciones de alto rendimiento. --- -## Getting Started with GSAP +# Introducción a GSAP -GSAP (GreenSock Animation Platform) is a powerful library for creating high-performance animations. It is widely used due to its robustness and flexibility. +GSAP (GreenSock Animation Platform) es una potente biblioteca para crear animaciones de alto rendimiento. Es muy utilizada debido a su robustez y flexibilidad. -**Installation** +## Instalación -You can include GSAP in your project using npm: +Puede incluir GSAP en su proyecto usando npm: ```bash npm install gsap ``` -Or you can use a CDN: +O puedes utilizar un CDN: ```html ``` -**Basic Animation** +## Animación básica -Here's a simple example of using GSAP to animate an element: +A continuación se muestra un ejemplo sencillo del uso de GSAP para animar un elemento: ```html - + - GSAP Animation + Animación GSAP
@@ -44,13 +44,12 @@ Here's a simple example of using GSAP to animate an element: ``` -**Advanced Animation** +## Animación avanzada -GSAP provides various features for advanced animations, such as timelines, stagger, and easing. +GSAP proporciona varias funciones para animaciones avanzadas, como líneas de tiempo, escalonamiento y suavizado. - -- **Timelines:** -Timelines allow you to sequence animations. Here's an example: +- **Líneas de tiempo:** +Las líneas de tiempo permiten secuenciar animaciones. A continuación, se muestra un ejemplo: ```javascript const name = "John"; @@ -58,22 +57,21 @@ const greeting = `Hello, ${name}!`; console.log(greeting); // Output: Hello, John! ``` - -- **Stagger:** -Stagger allows you to animate multiple elements with a delay between each. Here's an example: +- **Escalonamiento:** +El escalonamiento te permite animar varios elementos con un retraso entre cada uno. A continuación, se muestra un ejemplo: ```javascript gsap.to(".box", {x: 100, duration: 1, stagger: 0.2}); ``` -- **Easing:** -GSAP provides a variety of easing options to make animations look more natural. Here's an example: +- **Suavizado:** +GSAP ofrece una variedad de opciones de suavizado para que las animaciones se vean más naturales. A continuación, se muestra un ejemplo: ```javascript gsap.to("#box", {x: 100, duration: 1, ease: "bounce"}); ``` {% hint style="info" %} -For more details and examples, check out the GSAP documentation. -{% endhint %} \ No newline at end of file +Para obtener más detalles y ejemplos, consulte la documentación de GSAP. +{% endhint %} diff --git a/es/animation-resources/react-spring.md b/es/animation-resources/react-spring.md index 3d4bc7a5..649371bd 100644 --- a/es/animation-resources/react-spring.md +++ b/es/animation-resources/react-spring.md @@ -1,24 +1,24 @@ --- chapter: 26 pageNumber: 255 -description: Using React Spring for animations in React applications. +description: Usando React Spring para animaciones en aplicaciones React. --- -## Using React Spring for Animations +# Uso de React Spring para animaciones -React Spring is a spring-physics-based animation library for React that makes it easy to create animations. +React Spring es una biblioteca de animación basada en física de resortes para React que facilita la creación de animaciones. -**Installation** +## Instalación -You can include React Spring in your project using npm: +Puedes incluir React Spring en tu proyecto usando npm: ```bash npm install react-spring ``` -**Basic Animation** +## Animación básica -Here's a simple example of using React Spring to animate a component: +A continuación se muestra un ejemplo sencillo del uso de React Spring para animar un componente: ```javascript import React from 'react'; @@ -27,19 +27,18 @@ import { useSpring, animated } from 'react-spring'; const AnimatedComponent = () => { const props = useSpring({ opacity: 1, from: { opacity: 0 } }); - return I will fade in; + return Me desvaneceré; }; export default AnimatedComponent; ``` -**Advanced Animation** +## Animación avanzada -React Spring provides various features for advanced animations, such as transitions, trails, and keyframes. +React Spring proporciona varias funciones para animaciones avanzadas, como transiciones, estelas y fotogramas clave. - -- **Transitions** -Transitions allow you to animate components as they mount and unmount. Here's an example: +- **Transiciones** +Las transiciones permiten animar los componentes mientras se montan y desmontan. A continuación, se muestra un ejemplo: ```javascript import React, { useState } from 'react'; @@ -68,9 +67,8 @@ const TransitionComponent = () => { export default TransitionComponent; ``` - -- **Trails** -Trails allow you to animate a list of components in sequence. Here's an example: +- **Estelas** +Las estelas permiten animar una lista de componentes en secuencia. A continuación, se muestra un ejemplo: ```javascript import React from 'react'; @@ -99,5 +97,5 @@ export default TrailComponent; ``` {% hint style="info" %} -For more details and examples, check out the React Spring documentation. -{% endhint %} \ No newline at end of file +Para obtener más detalles y ejemplos, consulte la documentación de React Spring. +{% endhint %} diff --git a/es/animation-resources/threejs.md b/es/animation-resources/threejs.md index d7184651..612b0075 100644 --- a/es/animation-resources/threejs.md +++ b/es/animation-resources/threejs.md @@ -1,38 +1,38 @@ --- chapter: 26 pageNumber: 253 -description: Creating 3D animations with Three.js, a JavaScript library for 3D graphics. +description: Creación de animaciones 3D con Three.js, una biblioteca JavaScript para gráficos 3D. --- -## 3D Animations with Three.js +# Animaciones 3D con Three.js -Three.js is a JavaScript library that makes creating 3D graphics on the web easier. It is widely used for creating immersive 3D experiences. +Three.js es una biblioteca de JavaScript que facilita la creación de gráficos 3D en la web. Se utiliza ampliamente para crear experiencias 3D inmersivas. -**Installation** +## Instalación -You can include Three.js in your project using npm: +Puedes incluir Three.js en tu proyecto usando npm: ```bash npm install three ``` -Or you can use a CDN: +O puedes utilizar un CDN: ```html ``` -**Basic Animation** +## Animación básica -Here's a simple example of using Three.js to create a rotating cube: +A continuación se muestra un ejemplo sencillo del uso de Three.js para crear un cubo giratorio: -```html +````html - + - Three.js Animation + Animación Three.js