Scripting dinámico con JavaScript
JavaScript es un tema enorme, con muchísimas características, estilos y técnicas que aprender, y muchísimas API y herramientas construidas sobre él. Este módulo se centra en lo esencial del lenguaje base, junto con algunos temas clave relacionados: aprenderlos te dará una base sólida desde la que trabajar.
Requisitos previos
Para empezar este módulo no necesitas ningún conocimiento previo de JavaScript, pero sí deberías haber completado los módulos anteriores del curso. Como mínimo, deberías conocer HTML y los fundamentos básicos de CSS.
Tutoriales y desafíos
- ¿Qué es JavaScript?
-
¡Te damos la bienvenida al curso de JavaScript para principiantes de MDN! En este primer artículo veremos JavaScript a grandes rasgos, respondiendo preguntas como «¿qué es?» y «¿qué hace?», y nos aseguraremos de que tengas claro para qué sirve JavaScript.
- Un primer acercamiento a JavaScript
-
Ahora que has aprendido algo sobre la teoría de JavaScript y lo que puedes hacer con él, te daremos un curso intensivo sobre las características básicas de JavaScript mediante un tutorial completamente práctico. Aquí construirás, paso a paso, un sencillo juego de «Adivina el número».
- ¿Qué salió mal? Solución de problemas en JavaScript
-
Cuando construiste el juego «Adivina el número» en el artículo anterior, quizá descubriste que no funcionaba. No te preocupes: este artículo pretende evitar que te tires de los pelos con este tipo de problemas, dándote algunos consejos sencillos para encontrar y corregir errores en los programas de JavaScript.
- Guardar la información que necesitas: variables
-
Después de leer los últimos artículos, ya deberías saber qué es JavaScript, qué puede hacer por ti, cómo se usa junto con otras tecnologías web y cómo son, a grandes rasgos, sus características principales. En este artículo nos centraremos en lo más básico: cómo trabajar con los bloques de construcción más elementales de JavaScript, las variables.
- Matemáticas básicas en JavaScript: números y operadores
-
En este punto del curso hablaremos de las matemáticas en JavaScript: cómo combinar operadores y otras características para manipular números y conseguir que hagan lo que queremos.
- Manejo de texto: cadenas en JavaScript
-
A continuación, nos centraremos en las cadenas, que es como se llaman los fragmentos de texto en programación. En este artículo veremos todo lo habitual que de verdad deberías saber sobre las cadenas al aprender JavaScript, como crearlas, escapar comillas dentro de ellas y unirlas.
- Métodos útiles de las cadenas
-
Ahora que hemos visto lo más básico de las cadenas, subamos una marcha y empecemos a pensar en qué operaciones útiles podemos hacer con ellas mediante métodos integrados, como obtener la longitud de una cadena de texto, unir y dividir cadenas, sustituir un carácter de una cadena por otro, y más.
- Arrays
-
En esta lección veremos los arrays, una forma práctica de guardar una lista de elementos de datos bajo un único nombre de variable. Veremos por qué esto es útil y después cómo crear un array, obtener, añadir y quitar los elementos que guarda, y mucho más.
- Desafío: generador de historias absurdas Desafío
-
En este desafío tendrás que tomar parte de lo que has aprendido hasta ahora en este módulo y aplicarlo para crear una aplicación divertida que genera historias absurdas al azar. Por el camino, pondremos a prueba tus conocimientos sobre variables, matemáticas, cadenas y arrays.
- Tomar decisiones en tu código: condicionales
-
En cualquier lenguaje de programación, el código tiene que tomar decisiones y actuar en consecuencia según las distintas entradas. Por ejemplo, en un juego, si el número de vidas del jugador es 0, se acaba el juego. En una aplicación del tiempo, si se consulta por la mañana, se muestra un gráfico de un amanecer; si es de noche, se muestran estrellas y una luna. En este artículo veremos cómo funcionan en JavaScript las llamadas sentencias condicionales.
- Bucles
-
Los lenguajes de programación son muy útiles para completar rápidamente tareas repetitivas, desde múltiples cálculos básicos hasta casi cualquier otra situación en la que tengas muchas tareas parecidas que completar. Aquí veremos las estructuras de bucle disponibles en JavaScript para cubrir esas necesidades.
- Funciones: bloques de código reutilizables
-
Otro concepto esencial en programación son las funciones, que te permiten guardar un fragmento de código que realiza una sola tarea dentro de un bloque definido, y después llamar a ese código siempre que lo necesites con una única orden corta, en lugar de tener que escribir el mismo código varias veces. En este artículo veremos los conceptos fundamentales de las funciones, como la sintaxis básica, cómo invocarlas y definirlas, el ámbito y los parámetros.
- Construye tu propia función
-
Con la mayor parte de la teoría esencial ya vista en el artículo anterior, este artículo ofrece experiencia práctica. Aquí practicarás construyendo tu propia función personalizada. Por el camino, también explicaremos algunos detalles útiles sobre el trabajo con funciones.
- Valores de retorno de las funciones
-
Nos queda un último concepto esencial sobre las funciones: los valores de retorno. Algunas funciones no devuelven un valor significativo, pero otras sí. Es importante entender cuáles son esos valores, cómo usarlos en tu código y cómo hacer que las funciones devuelvan valores útiles. Veremos todo esto a continuación.
- Introducción a los eventos
-
En este artículo hablaremos de algunos conceptos importantes relacionados con los eventos y veremos los fundamentos de cómo funcionan en los navegadores.
- Propagación de eventos
-
Este artículo presenta los conceptos de propagación de eventos, captura de eventos y delegación de eventos, que tratan de lo que ocurre cuando añades un detector a un elemento que contiene otro elemento, y después se produce un evento en el elemento contenido.
- Desafío: galería de imágenes Desafío
-
Ahora que hemos visto los bloques de construcción fundamentales de JavaScript, pondremos a prueba tus conocimientos sobre bucles, funciones, condicionales y eventos pidiéndote que construyas un elemento bastante común que verás en muchos sitios web: una galería de imágenes impulsada por JavaScript.
- Conceptos básicos de los objetos
-
En este artículo veremos la sintaxis fundamental de los objetos de JavaScript y repasaremos algunas características de JavaScript que ya vimos antes en el curso, insistiendo en el hecho de que muchas de las características con las que ya has trabajado son objetos.
- Introducción al scripting del DOM
-
Al escribir páginas y aplicaciones web, una de las cosas más habituales que querrás hacer es cambiar de alguna forma la estructura del documento. Normalmente esto se hace manipulando el Document Object Model (DOM) mediante un conjunto de API integradas en el navegador para controlar el HTML y la información de estilo. En este artículo te presentaremos el scripting del DOM.
- Hacer solicitudes de red con JavaScript
-
Otra tarea muy habitual en los sitios web y las aplicaciones modernas es hacer solicitudes de red para obtener elementos de datos individuales del servidor y actualizar secciones de una página web sin tener que cargar una página nueva entera. Este detalle en apariencia pequeño ha tenido un impacto enorme en el rendimiento y el comportamiento de los sitios, así que en este artículo explicaremos el concepto y veremos las tecnologías que lo hacen posible.
- Trabajar con JSON
-
JavaScript Object Notation (JSON) es un formato estándar basado en texto para representar datos estructurados, basado en la sintaxis de objetos de JavaScript. Se usa habitualmente para transmitir datos en aplicaciones web (p. ej., enviar datos del servidor al cliente para mostrarlos en una página web, o viceversa). Te lo encontrarás con bastante frecuencia, así que en este artículo te damos todo lo que necesitas para trabajar con JSON usando JavaScript, incluido analizar JSON para acceder a sus datos y crear JSON.
- Desafío: construir una interfaz de datos de viviendas Desafío
-
En este desafío te pediremos que escribas algo de JavaScript para una página de búsqueda de viviendas de un sitio web inmobiliario. Esto incluirá obtener datos JSON, filtrarlos según los valores introducidos en los controles de formulario proporcionados y mostrarlos en la interfaz. Por el camino, también pondremos a prueba tus conocimientos sobre condicionales, bucles, arrays y métodos de arrays, y mucho más.
- Depuración y manejo de errores en JavaScript
-
En esta lección volveremos al tema de la depuración de JavaScript (que ya vimos por primera vez en ¿Qué salió mal?). Aquí profundizaremos en las técnicas para localizar errores, pero también veremos cómo programar de forma defensiva y manejar los errores en tu código, evitando los problemas desde el principio.
Pon a prueba tus habilidades
Entre los artículos del tutorial encontrarás artículos de tipo «Pon a prueba tus habilidades» para comprobar si has retenido la información más importante antes de seguir adelante. Si quieres verlos todos juntos, los tienes listados en Pon a prueba tus habilidades: JavaScript.
Véase también
- Scrimba: Learn JavaScript socio de aprendizaje de MDN
-
El curso Learn JavaScript de Scrimba te enseña JavaScript resolviendo más de 140 desafíos de programación interactivos y construyendo proyectos que incluyen un juego, una extensión de navegador e incluso una aplicación móvil. Scrimba ofrece lecciones interactivas divertidas impartidas por profesores expertos.
- Learn JavaScript
-
Un recurso excelente para quienes quieren dedicarse al desarrollo web: aprende JavaScript en un entorno interactivo, con lecciones cortas y pruebas interactivas, guiado por una evaluación automática. Las primeras 40 lecciones son gratuitas, y el curso completo está disponible por un pequeño pago único.