JavaScript es el lenguaje de programación más popular en la web. Puede usarlo para crear sitios web, servidores, juegos e incluso aplicaciones nativas. Así que no es de extrañar que sea una habilidad tan valiosa en el mercado laboral actual.
Así que me acerqué a Dylan C. Israel, un YouTuber de programación y graduado de freeCodeCamp, y le pedí que creara un curso de JavaScript gratuito en Scrimba.
El curso contiene 15 conferencias y 7 desafíos interactivos y es adecuado para principiantes. Le dará una introducción rápida a los conceptos de JavaScript más importantes.
Así es como se presenta el curso.
Parte # 1: Introducción
Como siempre, el curso comienza con un screencast sobre el tema en general y una descripción general de la estructura del curso. Dylan también te contará un poco sobre sí mismo para que lo conozcas antes de sumergirte en la codificación.
Parte # 2: Variables
El primer concepto que deberá aprender son las variables, que sirven para almacenar valores. En JavaScript moderno, hay dos palabras clave para hacer eso: lety const.
Guardemos el nombre Dylan en un nombre al letque llamaremos name.
let name = 'Dylan'; console.log(name); // --> 'Dylan' Como puede ver, podemos hacer referencia a esa variable más adelante para obtener el valor, por ejemplo, para cerrar la sesión en la consola, usando el console.log()método.
Parte # 3: Cuerdas
En la segunda lección, aprenderá sobre su primer tipo de datos: cadenas . Una cadena simplemente almacena una secuencia de caracteres entre comillas. Entonces, cada vez que envuelve algo entre comillas simples o dobles, se convierte en una cadena en JavaScript, como esta:
let name = "Dylan"; Parte # 4: Desafío de cuerdas
¡Es hora del primer desafío del curso! En este, intentarás combinar dos variables en una.
let firstName = "Dylan"; let lastName = "Israel"; console.log(fullName); // --> ReferenceError: fullName is not defined Si esta es su primera introducción a JavaScript, necesitará utilizar su conocimiento recién adquirido de variables y cadenas para resolver este problema. También puede que tenga que hacer un pequeño código de experimentación. Afortunadamente, esto es posible en la plataforma Scrimba.
Parte # 5: Números
El siguiente es el segundo tipo de datos que necesitará aprender: números . Otros lenguajes suelen tener varios tipos de datos para números, como flotantes para números decimales y enteros para números enteros _._ Sin embargo, en JavaScript, ambos son números .
Podemos usar typeofpara verificar el tipo de datos:
let example1 = 7; let example2 = 7.77; console.log(typeof example1); console.log(typeof example2); // --> "number" // --> "number" En esta lección también aprenderá a convertir valores entre cadenas y números usando métodos parseInt()y parseFloat().
Parte # 6: Desafío de números
En el desafío de los números, estará expuesto a algunas cadenas y números diferentes combinados con los métodos que ha aprendido hasta ahora. Su trabajo es adivinar en qué valores terminan estas expresiones.
let example1 = parseInt("33 World 22"); let example2 = parseFloat('44 Dylan 33'); let example3 = 55.3333.toFixed(0); let example4 = 200.0.toFixed(2); Puede ser un poco complicado, ¡así que no se desanime si comete errores!
Parte # 7: Booleanos
Los booleanos son simples, verdaderos o falsos. Así es como se crea un valor booleano:
let example = true; El hecho de que exampleahora esté configurado como verdadero puede ser útil cuando está programando, ya que a veces desea tomar acciones basadas en condiciones como esta.
También aprenderá acerca de los valores verdaderos o falsos en esta lección, que son otros tipos de datos, como cadenas o números, pero que tienen un lado verdadero o falso .
Parte # 8: desafío booleano
En el desafío booleano, Dylan sigue el mismo patrón que los números uno, donde debes adivinar un montón de valores. Su trabajo es adivinar si estas variables son verdaderas o falsas:
let example1 = false; let example2 = true; let example3 = null; let example4 = undefined; let example5 = ''; let example6 = NaN; let example7 = -5; let example8 = 0; Parte # 9: Matrices
Los tipos de datos que ha aprendido hasta ahora son los llamados valores primitivos . Ahora es el momento de aprender sobre la matriz, que es un valor no primitivo .
Una matriz es simplemente una lista de valores, como esta:
let example = ['programming', 'design', 'art']; Aprenderá cómo crear matrices, cómo agregar y eliminar elementos e incluso cómo recorrer toda la matriz utilizando el forEach()método.
Parte # 10: Desafío de matrices
In the arrays challenge you’ll be introduced to the concept of padding by reference or value, which is important in order to understand JavaScript properly. We’ll also revisit this concept later on, as repetition will help the knowledge stick.
let example1 = ['Dylan', 5, true]; let example2 = example1; example2.push(11); console.log(example1); console.log(example2); The results that are logged above might surprise you if you’re not aware of the passing by reference concept.
Part #11: Objects
From arrays, we’ll continue to its close relatives called objects. Objects are like arrays in the sense that they can store multiple values. However, instead of consisting of a list of values, an object consists of so-called key-value pairs. We create an object using curly brackets:
let example = { firstName: 'Dylan'; lastName: 'Israel' }; In this lecture, you’ll learn how to populate objects and fetch their values.
Part #12: Objects challenge
In this challenge, we’ll revisit the concept of passing by reference or value. You’ll also learn about the Object.assign() method, which allows you to create copies of objects.
let example1 = { firstName: 'Dylan' }; let example2 = example1; example2.lastName = 'Israel'; console.log(example1); console.log(example2); Part #13: Arithmetic operators
A programming language would be almost useless if it didn’t know how to do arithmetic operations. Doing it in JavaScript is pretty straight-forward:
let example = 5 + 5; console.log(example) // --> 10 In this lecture, you’ll also experience how JavaScript handles expressions where multiple operations are combined.
Part #14: Relational operators
When programming we often have to compare values, to see if they’re equal to each other, or if one of them is larger than the other, so in this lecture, you’ll learn how to do that.
let example1 = 10; let example2 = 15; console.log(example1 > example2) // --> false And real-world example of this would be when you want to check if a user has got enough credit to purchase an item. If the credit is above the price, then they’re allowed to buy, otherwise, they’re not.
Part #15: Relational operators challenge
In this challenge you’ll be able to test how well you understand relational operators, through guessing the boolean value of these variables:
let example1 = 5 === 5; let example2 = 5 == '5'; let example3 = 6 != '6'; let example4 = 7 !== '7'; Part #16: Increment & decrement
Making values grow or shrink is very often done in programming, for example when you’re counting. It can be done in a few different ways, though, so it deserves its own lecture.
let example = 1; example = example + 1; console.log(example); // --> 2 Part #17: Increment & decrement challenge
This challenge will look at the difference between doing example++ and ++example.
This might require you to experiment a bit in order to understand it, or even googling, which also is a critical skill for any developer.
Part #18: If, else if, else
Conditional statements like if, if else and else are critical when programming. It’s what allows you to have logic in your application. So in this lecture, you’ll learn how to work with all three of them.
let example = 5; if (example === 5) { console.log('Runs'); } else if ( true ) { console.log('else if'); } else { console.log('else'); } You’ll also learn about how to combine these conditionals with relational operators to make complex logic.
Part #19: If, else if, else challenge
In this challenge, you’ll try to guess what the following expressions evaluate to. This builds upon both what you’ve learned in the relational operators' lecture and in the previous one.
console.log(10 === 10 && 5 < 4); console.log(10 === 10 || 5 = 5 || 4 > 4) && 3 + 2 === 5); Again, don’t lose the courage if you don’t manage to guess correctly. This stuff is tricky for a beginner!
Part #20: Switch
In this lecture, you’ll learn about so-called switch statements, which are really handy if you have many conditions to check between. Here’s an example of that:
let studentAnswer = 'D'; switch(studentAnswer) { case 'A': console.log('A is wrong.'); break; case 'B' : console.log('B is wrong.'); break; case 'C': console.log('C is correct.'); break; default: console.log('Not a real answer.'); } Part #21: For loop
For loops allow you to execute a block of code a number of times. The amount is dictated by you by setting three conditionals. Here’s an example of a simple for loop:
for (let i = 0; i // 0 // 1 // 2 // 3 // 4 In this lecture, you’ll see how you can calculate the total sum of an array of numbers using a for loop.
Part #22: While & do while
If you want to execute a piece of code multiple times but don’t know how many times, then a while loop might be exactly what you need. It allows you to execute a block of code as long as a certain condition is met.
let count = 0; while (count < 20) { count++; } console.log(count); You’ll also learn about the do/while statement.
Part #23: Functions
Finally, you’ll need to learn about functions, as it’s critical for any application. You’ll learn the syntax of functions, how they’re called and how you can add parameters to them.
function add() { console.log('add'); } add(); // --> 'add' And when you’ve finished this lecture you’re done with the syllabus for this course, as you know have an understanding of the core concepts in JavaScript.
Part #24: What’s next?
Dylan ends the course by telling you a little bit about what you can do next in order to further improve your JavaScript skills! Remember, this course was just the beginning.
Once you’ve reached this far, I’d strongly encourage you to continue, as you’re on track to gain highly valuable skill in today's society.
Not only can JavaScript help you improve your career, but you’ll also be able to build products on your own!
So be sure to take this free course today. You’ll be able to build projects in JavaScript on your own before you know it!
Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.
