Lecciones · Programación · principiante · Programming with Mosh

JavaScript para principiantes: tu primer paso en el desarrollo web

El vídeo «JavaScript Course for Beginners – Your First Step to Web Development» de Programming with Mosh convertido en 9 lecciones, con la idea explicada, el código de la pantalla, pasos para probar en la terminal de práctica, problemas de práctica con soluciones y un test que te lleva al momento exacto.

9lecciones
16fragmentos de código
1fórmula
25ejercicios
48min de vídeo
Abrir las lecciones →La lección 1 es gratis · Beyond Pass lo abre todo

También en: English · Türkçe

El vídeo está en inglés. En el reproductor de YouTube, activa los subtítulos y elige Traducir automáticamente → Español.

JavaScript Course for Beginners – Your First Step to Web Development, video by Programming with Mosh▶ 48:16 · Programming with Mosh
123456789
0:009 lecciones a lo largo de todo el vídeo48:16

Sabrás

  • Escribe variables, constantes y tipos de datos en JavaScript para almacenar y manipular valores
  • Usa condicionales, bucles y funciones para controlar el flujo del programa y reutilizar la lógica
  • Trabaja con arrays y objetos para organizar datos relacionados
  • Ejecuta y depura código JavaScript en la consola del navegador y en una página HTML sencilla

Conviene saber antes

  • Cierta soltura al usar el ordenador y un editor de texto
  • Una idea general de qué es una página web

Temario

9 lecciones y un proyecto final

  1. 1

    Preparar el entorno y ejecutar tu primer JavaScript Gratis

    0:00–4:004 min de vídeo

    Aprenderás dónde se ejecuta JavaScript (dentro de los navegadores, mediante un motor de JavaScript) y cómo el historial de versiones de JavaScript da forma a lo que vas a aprender. Después abrirás la consola para desarrolladores del navegador y ejecutarás tu primera línea de JavaScript.

    3 pasos de construcción3 ejercicios3 preguntas
  2. 2

    Declarar variables y constantes Beyond Pass

    4:00–9:005 min de vídeo

    Aprenderás qué es una variable y cómo declarar una con let, y en qué se diferencia una constante con const. También verás cómo se guarda un valor y se reutiliza en el código JavaScript.

    1 de código4 pasos de construcción3 ejercicios3 preguntas
  3. 3

    Tu primer código en JavaScript: console.log y la etiqueta script Beyond Pass

    9:00–14:005 min de vídeo

    Aprenderás a ejecutar JavaScript dentro de una página HTML, a mostrar un mensaje en la consola del navegador con console.log y a pasar el código a su propio archivo index.js enlazado con una etiqueta script. El capítulo presenta la configuración básica que necesitas antes de aprender los tipos primitivos y los operadores.

    3 de código5 pasos de construcción2 ejercicios3 preguntas
  4. 4

    Trabajar con cadenas y plantillas literales Beyond Pass

    14:00–18:004 min de vídeo

    Aprenderás qué es una cadena en JavaScript y cómo escribir texto entre comillas. También aprenderás las plantillas literales, que te permiten poner valores dentro del texto usando acentos graves y ${...}.

    2 de código2 pasos de construcción3 ejercicios3 preguntas
  5. 5

    Nombres de variables y la diferencia entre const y let Beyond Pass

    18:00–23:205 min de vídeo

    Esta lección muestra las reglas para nombrar variables en JavaScript, incluyendo qué está permitido, qué está prohibido y por qué los nombres distinguen entre mayúsculas y minúsculas. También muestra la diferencia entre let (puede reasignarse) y const (no puede reasignarse), con un error que verás al intentarlo.

    2 de código3 pasos de construcción3 ejercicios4 preguntas
  6. 6

    Repetir código con bucles Beyond Pass

    23:20–29:006 min de vídeo

    Esta lección trata sobre la diferencia entre los tipos primitivos (de valor) y los tipos por referencia en JavaScript, y sobre cómo las variables guardan valores de estos tipos. También muestra cómo el tipado dinámico de JavaScript permite que una variable cambie el tipo de valor que contiene.

    2 de código3 pasos de construcción3 ejercicios4 preguntas
  7. 7

    Writing and calling functions Beyond Pass

    29:00–35:006 min de vídeo

    This lesson covers objects as a way to group related values, and how to read and change their properties with dot and bracket notation. The video's chapter is titled "Writing and calling functions", but the transcript and frames in this segment only show objects, so this lesson covers what is actually shown.

    2 de código3 pasos de construcción2 ejercicios3 preguntas
  8. 8

    Almacenar datos en arrays y objetos Beyond Pass

    35:00–40:205 min de vídeo

    Esta lección muestra cómo un array de JavaScript guarda una lista de valores en una sola variable, cómo leer y cambiar elementos por su índice y cómo comprobar el tipo de un valor con typeof. También explica por qué un array es un objeto y qué pasa si metes en él un valor del tipo equivocado.

    3 de código4 pasos de construcción3 ejercicios3 preguntas
  9. 9

    Funciones con parámetros, valores de retorno y un pequeño proyecto Beyond Pass

    40:20–48:168 min de vídeo

    Esta lección muestra cómo escribir funciones que reciben datos de entrada (parámetros) y devuelven resultados (valores de retorno), y cómo usarlas para crear un pequeño proyecto. Verás la diferencia entre una función que realiza una tarea y una que calcula un valor.

    1 de código1 fórmula4 pasos de construcción3 ejercicios3 preguntas

Proyecto final

Console Shopping Cart: a small JavaScript project

Build a small shopping cart program that runs from an HTML page and prints a receipt to the browser console. It uses variables, constants, template literals, arrays, objects, a loop and functions with return values. You write one bigger program instead of many separate snippets.

Sus 8 tareas se abren con Beyond Pass.

Vista previa gratis · La lección 1 completa

Preparar el entorno y ejecutar tu primer JavaScript

Aprenderás dónde se ejecuta JavaScript (dentro de los navegadores, mediante un motor de JavaScript) y cómo el historial de versiones de JavaScript da forma a lo que vas a aprender. Después abrirás la consola para desarrolladores del navegador y ejecutarás tu primera línea de JavaScript.

0:00 hasta 4:00 en el vídeo

Terminal de práctica

Escribe los comandos de la lección, rompe cosas y descubre por qué.

Bloc de notas

Dibuja y escribe junto al vídeo.

La idea

JavaScript es el lenguaje de programación de la web. Todos los navegadores modernos, como Chrome o Firefox, pueden ejecutar código JavaScript. Dentro de cada navegador hay un programa llamado motor de JavaScript. Lee tu código y lleva a cabo sus instrucciones.

Los distintos navegadores usan motores distintos. Firefox usa un motor llamado SpiderMonkey, y Chrome usa uno llamado V8. Siguen las mismas reglas del lenguaje, así que tu código funciona igual en ambos.

JavaScript sigue un estándar llamado ECMAScript. La primera versión estándar salió en 1997. Una gran actualización llegó en 2015, llamada ES2015 o ES6, y desde entonces salen nuevas versiones cada año. Este curso enseña el lenguaje moderno, así que lo que aprendas funciona en los navegadores actuales.

No necesitas instalar nada para empezar. Abre tu navegador y pulsa F12 (o haz clic derecho en la página y elige Inspeccionar, y luego la pestaña Console). La consola es un cuadro donde escribes JavaScript y pulsas Intro, y el navegador lo ejecuta al momento. El resultado aparece justo debajo de lo que escribiste.

Tu primer programa puede ser una sola línea. Escribe 2 + 3 en la consola y pulsa Intro. Si el navegador muestra 5 debajo de tu línea, acabas de ejecutar JavaScript. Esta es la forma más rápida de probar una idea, y la usarás durante todo el curso.

Puntos clave

  • JavaScript se ejecuta dentro del navegador, usando el motor de JavaScript del navegador (SpiderMonkey en Firefox, V8 en Chrome). 2:00
  • La primera versión estándar de JavaScript (ECMAScript 1) apareció en 1997. La actualización ES2015/ES6 y las versiones anuales posteriores añadieron las funciones modernas que vas a aprender. 3:00
  • La consola para desarrolladores del navegador te permite ejecutar JavaScript sin instalar nada: la abres, escribes una línea y pulsas Intro. 3:50

Palabras clave

Motor de JavaScript
La parte del navegador que lee el código JavaScript y lo ejecuta.
Consola
Una pestaña de las herramientas para desarrolladores del navegador donde escribes JavaScript y ves el resultado al momento.
ES6 (ES2015)
Una gran actualización de JavaScript de 2015 que añadió muchas de las funciones modernas.

Construye a la vez en la terminal de práctica

  1. Abre una nueva pestaña del navegador (Chrome o Firefox). Abre las herramientas para desarrolladores con F12, o con clic derecho y luego Inspeccionar. 3:50Deberías ver: Se abre un panel en la parte inferior de la página con pestañas como Elements, Console y Sources.
  2. Haz clic en la pestaña Console. Deberías ver un símbolo de solicitud (>) donde puedes escribir. 3:50Deberías ver: La pestaña Console está seleccionada y un cursor parpadeante espera después del símbolo >.
  3. Haz clic junto al símbolo > y escribe una línea sencilla, por ejemplo: 2 + 3 , y luego pulsa Intro. 
    $ 2 + 3
5
    Deberías ver: La consola muestra 5 debajo de tu línea, lo que demuestra que el navegador ejecutó tu JavaScript.

Práctica

Calcula Solución comprobada

En la consola escribes 7 * 6 y pulsas Intro. ¿Qué número muestra la consola? Responde solo con el número.

Pista

El signo * significa multiplicar.

Solución
  1. El signo * significa multiplicación.
  2. 7 por 6 es igual a 42.
  3. La consola muestra el resultado de la línea que escribiste: 42.

42

Explica Solución comprobada

Con tus propias palabras, explica qué hace un motor de JavaScript. Nombra un navegador y el motor que usa.

Pista

Piensa en qué le ocurre a tu código después de pulsar Intro.

Solución
  1. El motor es la parte del navegador que lee el código JavaScript y lo ejecuta.
  2. Por ejemplo, Firefox usa SpiderMonkey y Chrome usa V8.

El motor de JavaScript es la parte del navegador que lee y ejecuta JavaScript. Por ejemplo, Chrome usa V8 y Firefox usa SpiderMonkey.

Hazlo Solución comprobada

Abre la consola de tu navegador, escribe 10 - 4 y pulsa Intro. Después escribe una línea de tu elección y comprueba que la consola te responde.

Pista

Pulsa F12 y haz clic en la pestaña Console.

Solución
  1. Pulsa F12 y abre la pestaña Console.
  2. Escribe 10 - 4 y pulsa Intro. La consola muestra 6.
  3. Escribe cualquier otra suma sencilla y comprueba el resultado que aparece.

La consola muestra 6 para 10 - 4, y tu propia línea también muestra un resultado.

En tu bloc de notas

Dibuja un recuadro para el navegador, dentro pon un pequeño círculo con la etiqueta Motor de JavaScript y dibuja una flecha desde el código hasta el motor. Escribe junto a él Chrome: V8 y Firefox: SpiderMonkey.

Test

  1. ¿Qué parte del navegador lee y ejecuta realmente el código JavaScript?

    1. La barra de direcciones
    2. El motor de JavaScript
    3. La barra de marcadores
    4. El título de la pestaña
    Mostrar la respuesta

    B. El motor de JavaScript · Cada navegador contiene un motor de JavaScript, como SpiderMonkey en Firefox o V8 en Chrome, que ejecuta el código.

    2:00 ver el momento

  2. ¿Qué motor usa Chrome para ejecutar JavaScript?

    1. SpiderMonkey
    2. V8
    3. ES6
    4. Consola
    Mostrar la respuesta

    B. V8 · Chrome usa V8. Firefox usa SpiderMonkey. ES6 es una versión del lenguaje y la Consola es una herramienta para desarrolladores.

    2:00 ver el momento

  3. ¿Cuál es la forma más rápida de ejecutar una línea de JavaScript sin instalar nada?

    1. Instalar un compilador
    2. Abrir la consola para desarrolladores del navegador y escribir la línea
    3. Reiniciar el ordenador
    4. Crear una carpeta nueva
    Mostrar la respuesta

    B. Abrir la consola para desarrolladores del navegador y escribir la línea · La pestaña Console del navegador ejecuta JavaScript en cuanto pulsas Intro.

    3:50 ver el momento

Abrir la lección 1, con el vídeo →

Lecciones 2–9 y el proyecto final

Se abren con Beyond Pass: todas las lecciones de todos los cursos, completas. Un solo pago: 14,99 $ por 90 días o 29 $ por un año. Sin suscripción.

Consigue Beyond Pass →Empieza gratis la lección 1

Hecho por Beyond a partir del vídeo «JavaScript Course for Beginners – Your First Step to Web Development» de Programming with Mosh. El vídeo se reproduce en el propio reproductor de YouTube. Míralo en YouTube · Todas las lecciones