Lecciones · Programación · principiante · Programming with Mosh

JavaScript Course for Beginners – Your First Step to Web Development

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
21ejercicios
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

  • Write JavaScript variables, constants, and data types to store and manipulate values
  • Use conditionals, loops, and functions to control program flow and reuse logic
  • Work with arrays and objects to organize related data
  • Run and debug JavaScript code in the browser console and in a simple HTML page

Conviene saber antes

  • Basic comfort using a computer and a text editor
  • A general understanding of what a web page is

Temario

9 lecciones y un proyecto final

  1. 1

    Course setup and running your first JavaScript Gratis

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

    You learn where JavaScript runs (inside browsers, through a JavaScript engine) and how the JavaScript version history shapes what you will learn. You then open the browser's developer console and run your first line of JavaScript.

    3 pasos de construcción3 ejercicios3 preguntas
  2. 2

    Declaring variables and constants Beyond Pass

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

    You will learn what a variable is and how to declare one with let, and how a constant with const differs. You will also see how a value is stored and reused in JavaScript code.

    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 imprimir un mensaje en la consola del navegador con console.log y a mover el código a su propio archivo index.js enlazado mediante 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 literales de plantilla Beyond Pass

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

    Aprenderás qué es una cadena en JavaScript y cómo escribir texto con comillas. También aprenderás los literales de plantilla, que te permiten insertar valores dentro del texto usando comillas invertidas 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

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

    2 de código3 pasos de construcción1 ejercicio3 preguntas
  6. 6

    Repetir código con bucles Beyond Pass

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

    Esta lección trata la diferencia entre tipos primitivos (de valor) y tipos por referencia en JavaScript, y 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 guarda.

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

    Escribir y llamar funciones Beyond Pass

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

    Esta lección trata los objetos como una forma de agrupar valores relacionados, y cómo leer y cambiar sus propiedades con la notación de punto y de corchetes. El capítulo del vídeo se titula "Escribir y llamar funciones", pero la transcripción y los fotogramas de este segmento solo muestran objetos, así que esta lección cubre lo que realmente aparece.

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

    [51] Functions with Parameters, Return Values and a Small Project Beyond Pass

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

    [52] This lesson shows how to write functions that take inputs (parameters) and give back results (return values), and how to use them to build a small project. You will see the difference between a function that performs a task and one that calculates a value.

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

Proyecto final

Carrito de la compra en consola: un pequeño proyecto de JavaScript

Crea un programa pequeño de carrito de la compra que se ejecute desde una página HTML e imprima un recibo en la consola del navegador. Usa variables, constantes, plantillas literales, arrays, objetos, un bucle y funciones con valores de retorno. Escribe un único programa más grande en lugar de muchos fragmentos separados.

Sus 8 tareas se abren con Beyond Pass.

Vista previa gratis · La lección 1 completa

Course setup and running your first JavaScript

You learn where JavaScript runs (inside browsers, through a JavaScript engine) and how the JavaScript version history shapes what you will learn. You then open the browser's developer console and run your first line of 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 is the programming language of the web. Every modern browser, such as Chrome or Firefox, can run JavaScript code. Inside each browser there is a piece of software called a JavaScript engine that reads your code and carries out its instructions. Firefox uses an engine called SpiderMonkey, and Chrome uses one called V8.

JavaScript was first released in 1997 as version 1, and it has grown since then. A major update came in 2015, called ES2015 or ES6, and newer yearly versions followed in 2016 and after. The language you learn in this course is the modern version, so the features you use will work in current browsers.

You do not need to install anything to start. Open your browser, press F12 (or right-click the page and choose Inspect, then the Console tab) to open the developer tools. The Console is a box where you type JavaScript and press Enter, and the browser runs it immediately. Whatever your code produces is shown right below what you typed.

Your first program can be a single line. Type the line in the console and press Enter. If the browser shows the result below your line, you have just run JavaScript. This is the fastest way to test an idea, and it is the first tool you will use throughout the course.

Puntos clave

  • JavaScript runs inside the browser, using the browser's JavaScript engine (SpiderMonkey in Firefox, V8 in Chrome). 2:00
  • JavaScript started in 1997 as version 1; the ES2015/ES6 update and yearly releases after it added the modern features you will learn. 3:00
  • The browser's developer console lets you run JavaScript with no installation: open it, type a line, and press Enter. 3:50

Construye a la vez en la terminal de práctica

  1. Open a new browser tab (Chrome or Firefox). Open the developer tools with F12, or with right-click then Inspect. 3:50Deberías ver: A panel opens at the bottom of the page with tabs such as Elements, Console and Sources.
  2. Click the Console tab. You should see a prompt symbol (>) where you can type. 3:50Deberías ver: The Console tab is selected and a blinking cursor waits after the > symbol.
  3. Click next to the > symbol and type a simple line, for example: 2 + 3 , then press Enter. 
    $ 2 + 3
5
    Deberías ver: The console prints 5 below your line, showing the browser ran your JavaScript.

Práctica

Calcula Solución comprobada

In the console you type 7 * 6 and press Enter. What number does the console print? Give the number only.

Pista

Multiply 7 by 6.

Solución
  1. Multiplication is done first: 7 times 6 equals 42.
  2. The console prints the result of the expression.

42

Explica Solución comprobada

In your own words, explain what the JavaScript engine does and why different browsers have different engines.

Solución
  1. The engine is the part of the browser that reads JavaScript code and runs it.
  2. Each browser company builds its own engine (Firefox uses SpiderMonkey, Chrome uses V8), so the code is run by different software that follows the same language rules.

The JavaScript engine is the part of the browser that reads and runs JavaScript. Firefox uses SpiderMonkey and Chrome uses V8, so each browser has its own engine that runs the same language.

Hazlo Solución comprobada

Open the Console in your browser, type 10 - 4 and press Enter. Then type a line of your own choice and check that the console answers it.

Solución
  1. Press F12 and open the Console tab.
  2. Type 10 - 4 and press Enter; the console prints 6.
  3. Type any other simple sum and check the printed result.

The console prints 6 for 10 - 4, and your own line also prints a result.

En tu bloc de notas

Draw a box for the browser, put a small circle inside it labelled JavaScript Engine, and draw an arrow from the code to the engine. Write Chrome: V8 and Firefox: SpiderMonkey beside it.

Test

  1. Which part of the browser actually reads and runs JavaScript code?

    1. The address bar
    2. The JavaScript engine
    3. The bookmarks bar
    4. The tab title
    Mostrar la respuesta

    B. The JavaScript engine · Each browser contains a JavaScript engine, such as SpiderMonkey in Firefox or V8 in Chrome, which runs the code.

    2:00 ver el momento

  2. In which year was JavaScript first released as version 1?

    1. 1995
    2. 1997
    3. 2015
    4. 2016
    Mostrar la respuesta

    B. 1997 · JavaScript v1 is shown on the timeline at 1997. The 2015 ES2015/ES6 update came later.

    3:00 ver el momento

  3. What is the quickest way to run a line of JavaScript with no installation?

    1. Install a compiler
    2. Open the browser's developer console and type the line
    3. Restart the computer
    4. Create a new folder
    Mostrar la respuesta

    B. Open the browser's developer console and type the line · The browser's Console tab runs JavaScript as soon as you press Enter.

    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