JavaScript en 14 minutos

Consola tool

El navegador viene con una consola de desarrollador que le permite escribir JavaScript directamente en esta página web.

¡Veamos como funciona!

En la consola, escribe o pega lo siguiente, y presione Enter

¡Buen trabajo!

Acabas de utilizar alert(), una función de JavaScript nativa que viene con cada navegador.

Pero, ¿qué has hecho exactamente?

Funciones concept

 function 

Has llamado la función alert() con el parametro '¡Hola Mundo!'.

Básicamente has hecho 4 cosas:

A veces, no hay 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() solo requiere un parámetro.

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

Cadenas type

 strings 

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

Para definir dónde comienza y dónde termina la cadena, debes incluirla entre comillas (simples ' o dobles ").

Cuando definiste la cadena '¡Hola Mundo!' :

1. escribiste una comilla simple
2. escribiste los 12 caracteres
3. y escribiste otra comilla simple

¿Qué pasaría si en su lugar quisieras tratar con números?.

Numeros type

 numbers 

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

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

Escriba o pegue el siguiente fragmento de código en su consola:

¡Perfecto!

Nótese algunas cosas:

• estas usando los operadores + y *
• el orden matemático es respetada: en primer lugar se calcula 5 * 3, a continuación 9 + 15
• los espacios alrededor del símbolo * no afectan la salida; solo están aquí para ayudarnos a leer el código.

Puedes encontrar números en muchos lugares.

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 cierto ancho al que puedes acceder con JavaScript.

Escribe lo siguiente:

alert(window.innerWidth)

¡Maravilloso!

Esto significa que la ventana de tu navegador tiene 1680 píxeles de ancho.

Como habrás adivinado window.innerHeight te da el ancho de la la ventana de tu navegador, al igual que window.scrollY, que te da la posición de desplazamiento actual.

Pero ¿qué es window exactamente?

Objetos type

 objects 

window es un objeto de JavaScript.

innerWidth Es una propiedad de el objetowindow.
Para acceder a esta propiedad, usa un punto . para especificar el innerWidth que existe dentro del objeto window.

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

Por ejemplo, window también tiene:

• window.origin que es una cadena
• window.scrollY que es un numero
• window.location que es un objeto

Si window es un objeto que contiene location que es otro objeto, esto significa que los objetos de JavaScript admiten…

Anidación info

Una propiedad de un objeto puede ser un objeto mismo.

Como window.location también es un objeto, tiene propiedades propias. Para acceder a estas propiedades, simplemente agregue otro punto . y el nombre de la propiedad.

Por ejemplo, la propiedad href:

alert(window.location.href)

¡Increíble!

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 en cuanto a la profundidad de los objetos que se pueden anidar.
Tampoco hay límite para la cantidad 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. Este último, se llama…

Métodos info

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

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

window.alert('OMG')

¡Oh Dios Mío!

Dado que window es el objeto de nivel superior en el navegador, Puede acceder a todas sus propiedades y métodos directamente.

Es por eso que escribir location.href es lo mismo que escribir window.location.href.

O por qué alert() es equivalente a window.alert().

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

Pero qué pasa si solo necesitaras una lista de cosas…

Matrices type

 arrays 

Una matriz en JavaScript es un tipo que puede contener varios valores, como si estuvieran en una lista ordenada.

Pasemos una matriz de 3 cadenas a la función alert():

alert(['Hola', 'cómo', 'estás'])

¡Exactamente!

Ya conoces la sintaxis para llamar la función alert seguido por un parámetro alert(parámetro).

En este caso, el parámetro es una matriz con 3 elementos que has definido de esta manera:

Una matriz puede contener cualquier tipo de valores: cadenas, números, objetos, otras matrices y más…

Prueba este fragmento:

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

¡Cierto!

El primer elemento 2 + 5 es un número, mientras que el segundo 'samurai' es una cadena.

¿Qué pasa con el tercer parámetro? No es una cadena porque no está envuelta entre comillas, y tampoco es un número.

Entonces, ¿qué es?

Booleano type

 Booleans 

Mientras que las cadenas y los números tienen una cantidad infinita de valores posibles, un booleano solo puede ser true o false.

Al combinar la función alert() y la matriz de 3 elementos en una sola línea, hace que nuestro código sea menos legible.

¿Qué pasaría si pudiéramos dividir los dos moviendo la matriz en su propia línea?

Variables concept

 Variables 

Podemos mover la matriz a una variable.

Una variable es un contenedor que almacena un determinado valor. Tiene un nombre (para que pueda identificarlo y reutilizarlo), y tiene un valor (para que pueda actualizarlo más adelante).

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

• mi_xvariable es el nombre de la variable
• [2 + 5, 'samurai', true] es el valor de la variable

Aquí está el desglose:

Esto significa que mi_xvariable es igual a [2 + 5, 'samurai', true].

Ahora podemos restablecer la función alert:

Como ahora tenemos dos declaraciones, debemos separarlas con un punto y coma ; para saber dónde termina una y comienza la siguiente.

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

¡Maravilloso!

Al almacenar nuestra matriz en una variable, logramos hacer que nuestro código sea más legible.

Aunque estas variables contienen una lista de varias cosas, podríamos querer tratar con un solo elemento de la lista.

Para acceder a un elemento específico de una matriz, primero debe conocer su índice (o posición) dentro de la matriz. A continuación, debe ajustar este índice en corchetes.

¿Puedes adivinar qué elemento se va a mostrar?

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

¡Lo adivinaste!

¡Es el segundo elemento que apareció! En programación, los índices comienzan en cero 0.

¡Resulta que las variables también son objetos! Lo que significa que las variables también tienen propiedades y métodos.

Por ejemplo, mi_xvariable tiene una propiedad llamada length:

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

¡Es correcto!

La matriz tiene 3 elementos. Verás que si agregas o eliminas elementos en mi_xvariable, este valor length cambiará en consecuencia.

Si bien la legibilidad y las propiedades son útiles, el punto principal de una variable es que es editable: ¡después puede cambiar el valor!

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

¡Síp!

¡Se han mostrado dos cuadros de alerta, pero con diferentes valores! Esto se debe a que entre la primera llamada y la segunda, el valor de mi_xvariable se ha actualizado: se agregó un cuarto elemento, la cadena 'LOVE'.

Nótese que la segunda vez que asignamos un valor a mi_xvariable, no estamos usando la palabra clave var: es porque estamos editando la variable mi_xvariable definida dos líneas arriba.

Solo utilice la palabra clave var cuando esté creando una nueva variable, no cuando esté editando una variable.

¿Recuerdas que te dije que las variables también tenían métodos (ya que son objetos)? Otra forma de editar el valor de una matriz es mediante el método push():

var mi_xvariable = [2 + 5, 'samurai', true];
alert(mi_xvariable);
mi_xvariable.push('The Button');
alert(mi_xvariable);

¡Fantástico!

La matriz mi_xvariable termina con 4 elementos.

Mientras que el método push() modificó la matriz, otros simplemente devuelven un valor:

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

¡No hay ninja aquí!

El método includes() verificó si la cadena 'ninja' estaba presente en la matriz. Dado que no fue así, el método devuelto fue false, un valor booleano.

De hecho, cuando se trata de booleanos, escribir las palabras clave true o false es bastante raro. Por lo general, los valores booleanos existen como resultado de una llamada de función (como includes()) o una comparación.

Aquí hay una comparación "mayor que":

alert(window.innerWidth > 400)

¡Genial de nuevo!

Esto significa que la ventana de su navegador no es más ancha que 400 pixels.

Al igual que el + y * anterior, > es un operador de JavaScript.

Cuando realiza dicha comparación con el operador "mayor que" >, obtiene un valor booleano.

Dado que el resultado de una comparación solo tiene 2 resultados (true o false), es útil en los casos en que su código tiene que tomar una decisión…

Condicionales concept

 Conditional statements 

Las declaraciones condicionales son uno de los conceptos más importantes en la programación. Permiten que su código ejecute ciertos comandos solo si se cumplen ciertas condiciones. Estas condiciones pueden basarse, por ejemplo, en:

• la entrada de un usuario (¿La contraseña introducida es correcta?)
• el estado actual (¿es de día o de noche?)
• el valor de un determinado elemento (¿es esta persona mayor de 18 años?)

Por ahora, activemos un cuadro de alerta solo si está en mi dominio.

if (window.location.hostname == 'crisanjs.blogspot.com') {
  alert('Estas en mi dominio 🤗')
}

¡Igualdad!

Estamos haciendo otra comparación aquí, pero con el operador "igual a" ==.

¡Desde que apareció el cuadro de alerta, significa que el nombre del host es igual a 'crisanjs.blogspot.com'!

Hemos manejado el caso cuando la comparación vuelve. true.

Para manejar el caso opuesto, cuando el nombre del host no es 'crisanjs.blogspot.com', podemos usar el operador "no es igual a" !=:

if (window.location.hostname != 'crisanjs.blogspot.com') {
  alert('Por favor vuelve pronto 😉')
}

Si prueba este fragmento, verá que no dispara nada (A menos que este tutorial haya sido copiado a otro dominio 😆).

¿Y si quisiéramos manejar ambos casos simultáneamente? Podríamos escribir dos declaraciones if en una fila. Pero como una declaración es exactamente lo opuesto a la otra, podemos combinarlas con una declaración else:

if (window.location.hostname == 'crisanjs.blogspot.com') {
  alert('Estas en mi dominio 🤗')
} else {
  alert('Por favor vuelve pronto 😉')
}

¡Sigue igual!

Con esta configuración condicional, podemos estar seguros de que:

• solo una de las dos alertas se activará, pero nunca ambas
• al menos una de las dos alertas se activará, porque estamos cubriendo todos los casos.

Si bien else es útil para cubrir todos los casos restantes, a veces desea manejar más de dos casos.

Usando else if puedes agregar declaraciones intermedias y manejar múltiples casos:

if (window.innerWidth > 2000) {
  alert('Pantalla grande 🔥')
} else if (window.innerWidth < 600) {
  alert('Probablemente un teléfono móvil 📱')
} else {
  alert('Tamaño decente 👍')
}

¡Lo tienes!

Tan pronto como devuelva una comparación true, se activará y todas las siguientes declaraciones se ignorarán. Es por eso que solo apareció un cuadro de alerta!

Las declaraciones condicionales hacen uso de las palabras clave if y else, seguidas de un conjunto de paréntesis.

Este patrón de combinación de palabras clave / paréntesis también existe para otro concepto de programación esencial…

Bucles concept

 loops 

Cuando desea ejecutar un bloque de código una cierta cantidad de veces, puede usar un bucle de JavaScript.

¿Puedes adivinar cuántos cuadros de alerta activará este fragmento?

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

¡Es tres!

¡Había exactamente 3 cajas de alerta! Vamos a analizar lo que pasó:

• var i = 0 es el estado inicial
  Antes de que el ciclo comience, la variable i tiene asignado un valor de cero 0.
• i < 3 es la declaración condicional
  En cada iteración del bucle, verificamos esta comparación.
  Si es true (verdadero), ejecutamos el código en el bloque.
  Si es false (falso), salimos del bucle.
  
• i++ es la expresión de incremento
  Si se ejecuta el bloque de código, esta expresión se ejecuta.
  En este caso, el valor de i se incrementa en 1.

Así es como lo implementaste:

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 tool

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 my_things = [2 + 5, 'samurai', true];
for (var i = 0; i < my_things.length; i++) {
  alert(my_things[i]);
}

In a row!

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 tool

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

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

Better!

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 name!

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

function greet(name) {
  var message = 'Hey there ' + name;
  alert(message);
}
greet('Alex');

Greetings!

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

Note a few things:

• the name of the function is greet
• the parameter is called name: 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 'Hey there ' + name
• 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 'Alex'

If we break it down step by step:

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

Basically, by creating greet(), 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 greet() 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?

Next steps victory!

Learn JavaScript

We've barely covery the basics here. But don't worry! There are tons of resources available online!

Here are a few free resources I'd recommend:

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

If you prefer video tutorials, check out these Udemy courses:

If you're in a rush, try this shorter course!

Learn HTML and CSS

JavaScript is only one third of what makes a webpage! You also need to know HTML and CSS.

Luckily, I've created two free references for you to browse through, so you can learn everything each language has to offer!

Learn my CSS framework

I designed this page with Bulma, my free open source CSS framework based on Flexbox. Check it out!

Read my book

I wrote a 44-page PDF called "CSS in 44 minutes" which teaches how to build your own personal webpage from scratch with HTML5 and CSS3.

As a bonus, the book also includes a small chapter on JavaScript in which I talk about functions, conditionals, objects, strings, and even explains how to interact with CSS.

I guess now there's only one thing left to do…

Share and support! 😍

Thanks for reading!

Made by @jgthms