JavaScript en 14 minutos

Consola herramienta

Tu navegador viene con una consola para desarrolladores que te permite escribir JavaScript directamente en esta página web.

¡Veamos si funciona!

En la consola, escribe (o pega) lo siguiente y pulsa Entrar

¡Buen trabajo!

Acabas de usar alert(), una función de JavaScript nativa que viene con todos los navegadores.

Pero, ¿qué has hecho exactamente?

Funciones concepto

Has llamado a la función alert() con el parámetro '¡Hola Mundo!'.

Has hecho, básicamente, 4 cosas:

A veces, no hay ningún parámetro.
A veces, hay múltiples parámetros.
La mayoría de ellos son obligatorios, pero algunos pueden ser opcionales.

En este caso, alert() sólo requiere un parámetro.

Pero, ¿qué tipo de parámetro es este?

Cadenas (strings) tipo

Cuando manejas texto, estás usando cadenas, que son una serie de caracteres. En nuestro caso, utilizamos una serie de 12 caracteres: ¡Hola Mundo!. Esto incluye todas las letras minúsculas y mayúsculas, el espacio y los signos de exclamación.

Para definir dónde empieza la cadena y dónde termina, necesitas envolverla entre comillas (ya sean simples ' o dobles ").

al definir la cadena '¡Hola Mundo!':

1. tecleaste una comilla simple
2. tecleaste los 12 caracteres
3. tecleaste otra comilla simple

Y si en lugar de eso quisieras trabajar con números?

Múmeros tipo

Como cualquier otro lenguaje de programación, JavaScript puede manejar números.

Estos números pueden ser grandes o pequeños, con o sin decimales, combinados mediante operaciones numéricas…

Escribe o pega el siguiente fragmento en tu consola:

¡Perfecto!

Observa algunas cosas:

• estás usando los operadores + y *
• se respeta el orden matemático: primero se calcula 5 * 3, luego 9 + 15
• los espacios alrededor del símbolo * no afectan al resultado; sólo están ahí para ayudarnos (a los humanos) a leer el código.

Puedes encontrar númderos en muchos sitios.

Dimensiones del navegador info

Los números están en todas partes. Especialmente en un navegador.

Por ejemplo, la ventana de tu navegador actual tiene un determinado ancho al que puedes acceder con JavaScript.

Teclea lo siguiente:

alert(window.innerWidth)

¡Maravilloso!

Esto significa que la ventana de tu navegador tiene 1680 pixels de ancho.

Como ya habrás adivinado, window.innerHeight también existe, así como window.scrollY, que te proporciona la posición de desplazamiento actual.

Pero, ¿qué es window exactamente?

Objetos tipo

window es un objeto de JavaScript.

innerWidth es una propiedad del objeto window.
Para acceder a esta propiedad, has utilizado un punto . para especificar que querías el valor de innerWidth que existe dentro del objeto window.

El objeto JavaScript es básicamente un tipo que contiene otras cosas.

Por ejemplo, window también contiene:

• window.origin que es una cadena
• window.scrollY que es un número
• window.location que es un objeto

Si window es un objeto que contiene location que es otro objeto, esto significa que JavaScript soporta objetos…

Anidación info

Una propiedad de un objeto puede ser un objeto en sí mismo (¡anidado!).

Como window.location también es un objeto, tiene sus propiedades. Para acceder a sus propiedades, sólo hay que añadir otro punto . y el nombre de la propiedad.

Por ejemplo, existe la propiedad href:

alert(window.location.href)

¡Impresionante!

Acabas de mostrar la URL completa de esta página web. Esto es porque:

• window es un objeto
• location es un objeto
• href es una cadena

No hay límite para la profundidad de anidación de los objetos.

Tampoco hay límite en el número de propiedades que puede tener un objeto.

Como hemos visto, las propiedades de un objeto pueden ser de cualquier tipo: cadenas, números, objetos e incluso funciones. En este último caso, son llamadas…

Métodos info

Cuando una propiedad de un objeto es una función, se la llama método en su lugar.

En realidad, la función alert() que hemos estado utilizando hasta ahora es un método del objeto window!

window.alert('OMG')

¡OMG en efecto!

Como window es el objeto de nivel más alto en el navegador, puedes acceder directamente a todas sus propiedades y métodos.

Por eso, teclear location.href es lo mismo que teclear window.location.href.

O que alert() equivale a window.alert().

Los objetos son útiles para agrupar varias propiedades bajo el mismo nombre y ámbito, y definir una jerarquía en los datos. Es como un árbol, donde cada rama puede tener otras ramas más pequeñas.

Pero, ¿y si sólo necesitas una lista de cosas…?

Arreglos tipo

A JavaScript array is a type that can contain multiple values, as if they were in an ordered list.

Let's pass an array of 3 strings to the alert() function:

alert(['Qué', 'está', 'pasando'])

¡Exacto!

You already know the syntax for calling the alert function: alert(parameter).

In this case, the parameter is an array with 3 items that you have defined like this:

An array can contain any type of values: strings, numbers, objects, other arrays, and more…

Try out this snippet:

alert([2 + 5, 'samurai', true])

¡Cierto!

The first item 2 + 5 is a number, while the second one 'samurai' is a string.

What about the third parameter? It's not a string because it's not wrapped in quotes, and it's not a number either.

So what is it?

Booleans type

While strings and numbers have an infinite amount of possible values, a boolean can only be either true o false.

By combining the alert() function and the 3-item array on a single line, it makes our code less readable.

What if we could split the two by moving the array onto its own line?

Variables concepto

We can move the array into a variable.

A variable is a container that stores a certain value. It has a nombre (so you can identify and re-use it), and it has a value (so you can update it later on).

var mis_cosas = [2 + 5, 'samurai', true];

• mis_cosas is the nombre of the variable
• [2 + 5, 'samurai', true] is the value of the variable

Here's the breakdown:

This means that mis_cosas is equal to [2 + 5, 'samurai', true].

We can now reinstate the alert function:

Since we now have two statements, we need to separate them with a semicolon ; in order to know where one ends and the next one begins.

var mis_cosas = [2 + 5, 'samurai', true];
alert(mis_cosas);

¡Maravilloso!

By storing our array into a variable, we managed to make our code more readable.

Although this variables contains a list of several things, we might want to deal with only a single item of the list.

To access a specific item of an array, you first need to know its index (or position) within the array. You then need to wrap this index into square brackets.

Can you guess which item is gonna be displayed?

var mis_cosas = [2 + 5, 'samurai', true];
alert(mis_cosas[1]);

¡Lo adivinaste!

It's the second item that showed up! In programming, indexes start at zero 0.

It turns out that variables are objects too! Which means that variables also have properties and methods.

For example, mis_cosas has a property called length:

var mis_cosas = [2 + 5, 'samurai', true];
alert(mis_cosas.length);

¡Eso es correcto!

The array has 3 items. You'll see that if you add or remove items in mis_cosas, this length value will change accordingly.

While readability and properties are useful, the main point of a variable is that it's editable: you can change the value afterwards!

var mis_cosas = [2 + 5, 'samurai', true];
alert(mis_cosas);
mis_cosas = [2 + 5, 'samurai', true, 'AMOR'];
alert(mis_cosas);

¡Sip!

Two alert boxes have been displayed, but with different values! That's because between the first call and the second one, the value of mis_cosas has been updated: a fourth item, the string 'AMOR', was added.

Note that the second time we're assigning a value to mis_cosas, we're not using the var keyword: it's because we're editing the mis_cosas variable defined two lines above.

You only use the keyword var when you're creating a new variable, not when you're editing one.

Do you remember I told you variables had methods too (since they're objects)? Another way to edit an array's value is by using the push() method:

var mis_cosas = [2 + 5, 'samurai', true];
alert(mis_cosas);
mis_cosas.push('El botón');
alert(mis_cosas);

¡Fantástico!

The mis_cosas array ends up with 4 items.

While the push() method altered the array, others simply return a value:

var mis_cosas = [2 + 5, 'samurai', true];
alert(mis_cosas.includes('ninja'));

¡No hay ningún ninja ahí!

The includes() method checked if the string 'ninja' was present in the array. Since it wasn't, the method returned false, a boolean value.

As a matter of fact, when dealing with booleans, typing the keywords true o false is quite rare. Usually, booleans exist as a result of a function call (like includes()) or a comparison.

Here's a "greater than" comparison:

alert(window.innerWidth > 400)

¡De nuevo genial!

This means your browser window is not wider than 400 pixels.

Just like the + and * before, > is a JavaScript operator.

When you make such a comparison with the "greater than" operator >, you obtain a boolean value.

Since the result of a comparison only has 2 outcomes (true o false), it's useful in cases where your code has to make a decision…

Conditional statements concepto

Conditional statements are one of the most important concepts in programming. They allow your code to perform certain commands only if certain conditions are met. These conditions can for example be based on:

• a user's input (is the password entered correct?)
• the current state (is it day or night?)
• the value of a certain element (is this person older than 18?)

For now, let's trigger an alert box only if you happen to be on my domain!

if (window.location.hostname == 'javguerra.github.io') {
  alert('¡Bienvenido a mi dominio!')
}

Coincide ¡en efecto!

We're doing another comparison here, but with the "equal to" operator == instead.

Since the alert box did appear, it means that the hostname is indeed equal to 'javguerra.github.io'!

We've handled the case when the comparison returns true.

To handle the opposite case, when the hostname isn't 'javguerra.github.io', we can use the "not equal to" operator !=:

if (window.location.hostname != 'javguerra.github.io') {
  alert('Por favor, ¡vuelve pronto! 😉')
}

If you try out this snippet, you'll see that it doesn't trigger anything! (Unless this tutorial has been copied to another domain 😆).

What if we wanted to handle both cases simultaneously? We could write two if statements in a row. But since one statement is the exact opposite of the other, we can combine them with a else statment:

if (window.location.hostname == 'javguerra.github.io') {
  alert('¡Bienvenido a mi dominio!')
} else {
  alert('Por favor, ¡vuelve pronto!')
}

¡También igual!

With this conditional setup, we can be sure that:

• only one of the two alerts will be triggered, but never both
• at least one of the two alerts will be triggered, because we're covering all cases

While else is useful for covering all remaining cases, sometimes you want to handle more than two cases.

By using else if you can add intermediate statements and handle multiple cases:

if (window.innerWidth > 2000) {
  alert('¡Gran pantalla! 🔥')
} else if (window.innerWidth < 600) {
  alert('Probablemente un teléfono móvil 📱')
} else {
  alert('Tamaño adecuado 👍')
}

¡Lo tienes!

As soon as one comparison returns true, it will be triggered, and all following statements will be ignored. That's why only one alert box showed up!

Conditional statements make use of the keywords if and else, followed by a set of parentheses.

This pattern of keyword/parentheses combination also happens to exist for another essential programming concept…

Loops concepto

When you want to execute a block of code a certain amount of times, you can use a JavaScript loop.

Can you guess how many alert boxes this snippet will trigger?

for (var i = 0; i < 3; i++) {
  alert(i);
}

¡Tres, eso es!

There were exactly 3 alert boxes! Let's dissect what happened:

• var i = 0 is the initial state
  Before the loop even starts, the variable i is assigned a value of zero 0.
• i < 3 is the conditional statement
  On every iteration of the loop, we check this comparison.
  If it's true, we execute the code in the block.
  If it's false, we exit the loop.
  
• i++ is the increment expression
  If the block of code is executed, this expression is executed.
  In this case, the value of i is incremented by 1.

Here's how you implemented it:

Let's analyze each iteration of the loop:

This loop allowed us to repeat an action N times. That's what computers are all about!

Of all the types of variables we've covered so far, there is one in particular worth looping through…

Looping through arrays herramienta

Arrays are a perfect candidate for loops, because in programming we often want to repeat the same action for each item of an array.

Let's say we wanted to trigger an alert box for each item of an array. While we could write as many alert() statements as there are items in the array (😰), this solution is cumbersome and ineffective! It would be prone to errors, and wouldn't scale at all with bigger arrays.

Since programming languages are here to help us simplify our work, let's figure out a better way. We already know a few things:

• We know how to get an array's length
• We know how to access an array's item by using the index
• We have access to the variable i, which conveniently increments 1 by 1

By combining these informations, we can devise the following snippet:

var mis_cosas = [2 + 5, 'samurai', true];
for (var i = 0; i < mis_cosas.length; i++) {
  alert(mis_cosas[i]);
}

¡En una fila!

One by one, the items of the array were displayed in their own alert box.

While using a loop simplifies the process of going through each item of an array, we still had to create a for block manually and create a new variable i whose only purpose was to increment after each loop.

I know what you're thinking. "There must be a better way!"

forEach loop herramienta

Arrays actually have a method called forEach(), which allows to perform a task for each item in the array:

var mis_cosas = [2 + 5, 'samurai', true];
mis_cosas.forEach(function(elemento) {
  alert(elemento);
});

¡Mejor!

Note a few improvements:

• There is no i variable involved
• We don't need to access the array's length
• We don't need to use the index with my_thing[i] to access the item

Remember the syntax of the alert() function? It was alert(parameter).

If you look carefully, you can see that forEach() has the exact same syntax! It's forEach(parameter) but where the parameter happens to be a function that spans 3 lines.

So far, we've used a few functions and methods:

• the alert() function (or window method)
• the push() array method
• the includes() array method
• the forEach() array method

We know how to call a function, but how do you actually create one?

Creating a custom function info

The power of programming languages is the ability to create your own functions, that fit your needs.

Remember the keyword/parentheses combination that we used for if/else and for? Well, guess what: it's almost the same pattern here!

I'm saying "almost" because the only difference is that a function needs a nombre!

Let's create a function called saludar(), with 1 parameter called nombre, and then immediately call it:

function saludar(nombre) {
  var mensaje = 'Hola ' + nombre;
  alert(mensaje);
}
saludar('Alejandro');

¡Saludos!

You've created your first function! It's a simple one but it can teach you a lot.

Note a few things:

• the nombre of the function is saludar
• the parameter is called nombre: it's like a variable, since it acts as a container for a value
• we're creating a variable called message (a string) whose value is 'Hola ' + nombre
• what this plus sign + does is concatenate (or combine) the two strings to make a single longer one
• we're calling the alert() function, and use the message variable as parameter
• after having created the function, we're calling it with the parameter 'Alejandro'

If we break it down step by step:

Unless we call the saludar() function at the end, nothing happens! That's because the alert() call is inside the scope of saludar() so it's not triggered unless the parent function saludar() itself is called!

Basically, by creating saludar(), you're only telling the browser: "Hey! I've created this new function. So if at some point I call it, please execute whatever is inside!".

That's why, when you call saludar() at the end, the browser executes its content, which happens to be calling alert().

It's important to understand that functions are a 2-step process: creating it first, calling it afterwards.

As a matter of fact, the alert() function we've used all along was already created beforehand. It just exists somewhere inside your browser.

Anyway, we've already covered a lot in 14 minutes!
So, what's next?

Próximos pasos ¡Victoria!

Aprender JavaScript

Apenas hemos cubierto los conceptos básicos. ¡Pero no te preocupes! ¡Hay toneladas de recursos disponibles en línea!

Aquí hay algunos recursos gratuitos que recomendaría:

• Eloquent JavaScript
• freeCodeCamp
• The Modern JavaScript Tutorial
• Mozilla Developer Network
• You Don't Know JS

Si prefieres tutoriales en vídeo, consulta estos cursos de Udemy:

Si tienes prisa, ¡prueba este curso más corto!.

Aprende HTML y CSS

JavaScript es sólo un tercio de lo que conforma una página web. También hay que saber HTML y CSS.

Por suerte, he creado dos referencias gratuitas para que puedas navegar por ellas y aprender todo lo que ofrece cada lenguaje.

Aprende mi framework CSS

Diseñé esta página con Bulma, mi framework CSS gratuito de código abierto basado en Flexbox. ¡Échale un vistazo!

Lee mi libro

Escribí un PDF de 44 páginas llamado "CSS en 44 minutos" que enseña cómo crear tu propia página web personal desde cero con HTML5 y CSS3.

Como extra, el libro también incluye un pequeño capítulo sobre JavaScript en el que hablo sobre funciones, condicionales, objetos, cadenas e incluso explico cómo interactuar con CSS.

Supongo que ahora hay solo queda una cosa por hacer…

¡Comparte y apoya! 😍

¡Gracias por leerlo!

Creado por @jgthms

Traducido por @javgr