Roadmap para principiantes en JavaScript
¿Qué es JavaScript?
Antes de presentar el Roadmap de sus estudios de JavaScript, es importante comprender qué es y con qué fines podemos usarlo. JavaScript (o, para abreviar, JS) es un lenguaje de programación dinámico de alto nivel que se utiliza principalmente para el desarrollo web front-end.
¿Para qué sirve?
JavaScript te permite hacer una infinidad de cosas increíbles. Utilizando JS es posible, por ejemplo, promover la interacción de una página web con el usuario que la usa. Cuando nos encontramos con un sitio web que tiene contenido que se actualiza durante un período de tiempo, que tiene formularios interactivos, botones e imágenes, o incluso animaciones, es posible concluir que JS probablemente esté involucrado en la construcción de esta página. Corre junto con otros lenguajes de desarrollo web, como: HTML y CSS. Además de crear páginas web, puede usar JS para desarrollar aplicaciones, desarrollar juegos e incluso servidores backend.
¿Dónde está presente JS y cómo se comporta en el mercado laboral?
Hay varias empresas con sitios web famosos que utilizan recursos de JavaScript. Algunas de ellas son: Amazon, Facebook, Google, LinkedIn, Netflix, YouTube, y una multitud de otros sitios web. En el mercado laboral, JS tiene una gran reputación, como uno de los lenguajes más versátiles de la actualidad. Se considera el lenguaje web más popular del mundo, y no se limita al front-end. En otros segmentos de desarrollo también es posible utilizar este lenguaje, como por ejemplo: en back-end con NodeJS, para crear juegos, e incluso inteligencias artificiales para crear y capturar imágenes y textos de forma dinámica. Esta versatilidad se refleja en la cantidad de puestos de trabajo disponibles para desarrolladores de JavaScript en el mercado laboral actual. Haz una búsqueda en tu LinkedIn de estas vacantes, ¡seguro que te animará con muchas oportunidades!
¿Dónde puedo programar en JS? ¿Qué necesito saber para aprender?
Puedes programar en JS utilizando cualquier editor de texto compatible con el lenguaje. Recomendamos los editores de texto VS Code, Sublime Text y Atom. Puede obtener más información sobre estos editores de texto haciendo clic aquí. Para aprender JS no es necesario haber aprendido previamente a programar, es un lenguaje muy amigable para principiantes, favoreciendo la comprensión de la lógica de programación, base fundamental para aprender a programar. Conoce más sobre por qué JavaScript es uno de los mejores lenguajes para principiantes en programación, haciendo clic aquí.
Por último, cabe mencionar que para trabajar bien con JS, es interesante tener conocimientos básicos de HTML y CSS. Puedes encontrar cursos sobre estos lenguajes aquí en Alura Latam.
Entonces, ¿estás interesado en estudiar JavaScript? ¡Vamos con tu Roadmap de estúdios!
¿Qué es un Roadmap?
Empecemos con una pequeña contextualización: El Roadmap (hoja de ruta) es un tipo de mapa que permite organizar las tareas a realizar para un determinado objetivo. En este caso, tu objetivo es aprender JavaScript, por lo que este Roadmap será tu guía, conteniendo todos los temas, en orden, que debes estudiar para pasar de lo básico a lo avanzado en este lenguaje de programación.
¿Vamos? Para construir una buena base de conocimientos que te permita avanzar en tus estudios, es bueno saber, inicialmente:
| Tema | Asunto |
|---|---|
| Estructuras del lenguaje | Expresiones, tipos de datos, variables, comentarios. |
| Condicionales y Loops | If, While, For, Switch, Do While. |
| Funciones | Qué son las funciones y sus tipos. |
| Otros recursos | Recursividad, Rest y el operador Spread, setTimeout, setInterval, Decorators, Forwarding, Call, Apply y bind. |
| Operadores y conversión de tipos | matemáticos, lógicos, de comparación, de asignación, relacionales y conversión de tipos. |
| Arrays | Map, Filter, Reduce, Push, Pop, Slice, Sort, Splice, Shuffle, Shift, Unshift. |
| JSON | Métodos JSON, toJSON, Stringify, Parse. |
| Objetos | Referencia a objetos, Garbage collection, This, constructores, operador New, objeto Dates, objeto Math. |
| Eventos | Eventos del navegador, Bubbling y Capturing, delegación de eventos, acciones estándar, Dispatching, eventos personalizados. |
| Eventos del ratón | Mouseover, Mouseout, Mouseenter, Mouseleave, Drag and drop, eventos del cursor, Scrolling. |
| Eventos del teclado | Keydown, Keyup, Keypress, Keycode. |
| Manipulación del DOM - Conceptos básicos | Árbol DOM, navegación por el DOM, propiedades getElement, querySelector, propiedades del nodo. |
A partir de aquí, una vez entendidos los conceptos anteriores, podrá pasar a los asuntos de nivel intermedio:
| Tema | Asunto |
|---|---|
| Manipulación del DOM - Intermedio | Estilos y clases, tamaños de elementos, tamaño de ventanas, coordenadas, Popups, desplazamiento. |
| Otros temas intermedios | editores de código, consola, calidad del código, depuración, normas de código, Polyfills, Transpilers. |
| Animaciones en Javascript | Web Animation API, Canvas, Sprite Sheets, SVG. |
| Programación asíncrona y Callbacks | Timers, Promises, Async y Await, AJAX, eventos. Interacciones, arrays, template Literals, strict Mode. |
| Formularios | Propiedades y métodos, enfoque: focus/blur, eventos: change, input, copiar y pegar, eventos del formulario, método Submit. |
| Programación funcional | Defer y Async, CORS, Closures, expresiones regulares, Unicode, estructura de datos, Map Data Structure, Set Data Structure. |
Ha llegado el momento de dar otro gran paso en tu camino como dev. A partir de aquí, ya tendrá un gran y amplio conocimiento en JS, pudiendo aprovechar tus estudios con conocimientos avanzados:
| Tema | Asunto |
|---|---|
| Almacenamiento de datos y API | Cookies, LocalStorage, History API, Fetch, Cache, Service Workers, IndexedDB. |
| Archivos y datos binarios | ArrayBuffer, TextDecoder, TextEncoder, Blob, File y FileReader, FormData*. |
| Solicitudes de red | Fetch API, FormData, Cross-Origin Requests, objetos URL, XMLHttpRequest, File Upload, Long polling, WebSocket. |
| Módulos | Import y Export, importación dinámica, Generators. |
| Clases | Sintaxis básica, herencia, propiedades estáticas, métodos públicos, métodos privados, Instanceof Mixins. |
| Manejo de errores | Try Catch, Throw, error de objeto, errores personalizados y pruebas automatizadas. |
Conclusión
A lo largo de este artículo hemos explorado las principales ideas y conceptos de JavaScript, un lenguaje de programación que abre muchos caminos en el area de la programación y sobre todo de la tecnología. Si estás interesado en seguir carrera en el desarrollo front-end, a partir de aquí es interesante empezar tu jornada de estudios sobre los frameworks.
En la plataforma de Alura Latam encontrarás formaciones en dos frameworks que trabajan conjuntamente con JS para el front-end: React y Angular, que forman parte de nuestra formación front end. Disfruta de este Roadmap lleno de contenido, sigue adelante con tus estudios y no dudes que, siguiendo estos pasos, te convertirás en un profesional capaz de intentar tus primeros trabajos como dessarrollador en JavaScript. Sumérgete en JavaScript y en la tecnología!
Sobre las autoras:
Marianna Costa
Brasileña, estudiante de Ingeniería Informática y formo parte del Scuba Team en Alura Latam. Amante de la tecnología desde siempre, me enamoré del desarrollo front end hace dos años. Soy muy curiosa y siempre estoy interesada en aprender sobre los diversos asuntos, me encanta compartir y recibir conocimiento porque creo firmemente que "compartir conocimiento es lo mismo que difundir desarrollo".
Rafaela Rocha:
Soy Rafa, una de las Scubas Front-End aquí en Alura LATAM. Soy Técnico en Computación, apasionada por la programación y el área de tecnología. Siempre dispuesta a aprender cada día más en esta área que sigue creciendo.