Aprende JavaScript: guía definitiva

GuíasTutorialesJavascriptProgramacion

En esta guía vamos a ver todo lo que necesitas saber del lenguaje de programación JavaScript, comenzando desde lo más simple. Muchas guías intentan cubrir en detalle todos y cada uno de los elementos de un tema, cuando en realidad necesitas conocer una pequeña parte, siendo el resto un accesorio al que poder recurrir una vez finalizado el aprendizaje.

Este tutorial está destinado a gente que nunca haya usado un lenguaje de programación, aunque es recomendable tener ciertos conocimientos previos básicos de HTML y de CSS.

JavaScript es un lenguaje que se utiliza principalmente del lado del cliente, es decir, que se ejecuta en tu navegador. Es por ello que no necesitarás instalar nada, bastando cualquier navegador como Chrome, Firefox, Opera o Safari. Sin embargo, para probar scripts básicos, es recomendable usar alguna herramienta online como por ejemplo CodePen o JSFiddle, que te permitirán practicar con el lenguaje y ejecutar pequeños scripts con facilidad, pudiendo ver el resultado de inmediato.

Lo primero que debes hacer será familiarizarte con la sintaxis del lenguaje y con ciertos conceptos básicos de JavaScript, que es lo que haremos a continuación.

Alerta! Esta guía todavía se encuentra en desarrollo y se irá completando en los sucesivos días.

Comentarios en JavaScript

Un comentario es una anotación que se realiza en el código fuente, por lo que no se tendrá en cuenta cuando el motor encargado de procesar el código JavaScript lo ejecute. Existen dos tipos de sintaxis diferentes que puedes usar con los comentarios:

  • Comentarios de una sola línea: Para agregar un comentario de una sola línea debes agregar dos barras inclinadas // seguidos del comentario que quieras añadir.
  • Comentarios multilínea: Un comentario que abarque varias líneas se escribe con una barra inclinada y un asterisco /* como elemento de inicio y con un asterisco y una barra inclinada */ como elemento de finalización.

A continuación puedes ver un ejemplo de ambos tipos de sintaxis:

// Esto es un comentario de una sola línea.

/* Este comentario puede abarcar
   varias líneas. */

Resulta muy habitual comentar líneas o porciones de código para excluirlas, de modo que no se ejecuten:

// const x = 2; Esta declaración no se ejecutará

Variables en JavaScript

Una variable es un elemento utilizado para almacenar valores o datos. Las variables se crean mediante las declaraciones var o let, seguido del nombre de la variable. Una variable que ha sido creada pero a la que no se le ha asignado un valor, tendrá el valor undefined.

Nombre de las variables

Puedes asignar diferentes tipos de datos a una variable, ya que las variables en JavaScript carecen de tipos. Por ejemplo, puedes asignar números, cadenas de texto, objetos o elementos booleanos. Una variable puede tener cualquier nombre que contenga exclusivamente letras, símbolos de dólar $, guiones bajos _ o números, aunque en ningún caso podrá comenzar por un número. Además, el nombre de una variable no podrá coincidir con alguna de las palabras reservadas en JavaScript.

Notación de las variables

Por convención, los nombres de las variables deberían seguir el tipo de notación camelCase, que implica que la primera palabra esté en minúsculas, pero que la primera letra del resto de palabras que conformen el nombre de la variable esté en mayúscula. Esto no significa que no puedas usar otros nombres, aunque siempre es recomendable seguir los estándares para evitar malas prácticas.

Sintaxis de una variable

En el siguiente ejemplo declaramos una variable siguiendo la notación camelCase y le asignamos un valor:

var miPerro = 'Zar'; // Declaramos la variable y le asignamos un valor

Lo que hecho es usar la sentencia var, que indica que lo que viene a continuación es el nombre de una variable. Seguidamente hemos usado miPerro como nombre de la variable. Luego hemos usado el símbolo = para asignar el valor 'Zar', cuyo valor va entre comillas porque se trata de una cadena de texto. Finalmente hemos finalizado la sentencia usando un punto y coma ;, aunque es opcional.

Tipos de datos en JavaScript

Los tipos de datos de JavaScript incluyen cadenas, números, booleanos, objetos y los tipos undefined «indefinido» y null «nulo». Cualquier tipo de dato que no sea un objeto es un tipo primitivo. Existen diferentes funciones que te permitirán saber de qué tipo es un valor en JavaScript, pudiendo así evitar errores que de otro modo serían impredecibles. A continuación vamos a ver una descripción de los diferentes tipos de datos:

Números

Un número es un valor numérico de hasta 15 dígitos, pudiendo ser tanto enteros como decimales. Además también podrás ser tanto positivos como negativos. Los tipos de datos numéricos no pueden contener fracciones y tampoco deben contener comas. Las funciones matemáticas pueden utilizarse, aunque se asignará el resultado de las mismas.

var numero = 10; // Asignamos el valor 10 a la variable numero
var numeroNegativo = -10; // Asignamos el valor -10 a la variable numero
var numeroDecimal = 2.4; // Asignamos el valor 2.4 a la variable numero
var suma = 2 + 2; // La variable contendrá el valor 4

Además, también existe la palabra reservada NaN «Not a Number», que indica que un valor no es un número, aunque en realidad se trata de un tipo de dato numérico. Este tipo suele ser el resultado de operaciones aritméticas con elementos que no contienen valores numéricos.

var noEsPosible = 2 / 'cadena'; // Si dividimos 2 entre 'cadena' obtenemos NaN.

Existen ciertas funciones que puedes usar para saber si una variable o un valor son un número es JavaScript.

Cadenas

Una cadena son una serie de caracteres. Los valores de tipo cadena se declaran entre comillas simples ' o comillas dobles ". Ambas notaciones son aceptables siempre y cuando la cadena comience y termine con el mismo tipo de comillas.

// A continuación asignamos una cadena entre comillas simples a una variable
var miTexto = 'Todo este texto es una cadena';

// Ahora asignamos una cadena entre comillas dobles a una variable
var miTexto = "Todo este texto es una cadena";

En caso de que quieras usar comillas en una cadena, tenemos un problema, aunque disponemos de varias formar de solucionarlo. Por ejemplo, puedes agregar el tipo opuesto de comillas usadas en la cadena:

"Usando una comilla ' dentro de una cadena con comillas dobles"
'Usando una comilla " dentro de una cadena con comillas simples'

En caso de que quieras usar comillas dobles en una cadena declarada con comillas dobles o comillas simples dentro de una cadena declarada con comillas simples, debes escapar la comilla usando una barra invertida \ tal que así:

"Usando una comilla \" dentro de una cadena con comillas dobles"
'Usando una comilla \' dentro de una cadena con comillas simples'

Booleanos

Un booleano es un valor que puede tener los valores true «verdadero» o false «falso»:

var meDivierto = true;
var meAburro = false;

Además, también podemos asignar los números 1 o 0, que son equivalentes a los valores true y false respectivamente.

var meDivierto = 1;
var meAburro = 0;

Undefined

Un tipo de dato undefined es aquel que ha sido declarado pero cuyo valor no ha sido definido. Por ejemplo, si declaramos una variable y luego mostramos su valor, no estará definida:

var varaibleIndefinida; // Variable declarada pero no definida.

Una variable está declarada cuando hemos usado las sentencias var o let con ella. La siguiente variable no estaría declarada:

variableNoDeclarada // Variable declarada pero no definida

Null

El valor null o nulo es la ausencia de un valor en un elemento. A diferencia del tipo de dato undefined, el valor null representa a la nada, sin proporcionarnos información adicional:

var inexistente = null; // La variable está definida pero es nula

Si todavía no lo tienes claro, consulta el siguiente tutorial, en donde explico en profundidad las diferencias entre los tipos null y undefined.

Objetos

Un objeto es una colección de pares de elementos que están formado por una clave y y respectivo valor. Los valores de la claves pueden corresponderse tanto con propiedades como con métodos. Una propiedad es una característica del objeto, y un método es una tarea o función que el objeto realiza. Sin embargo, si todavía no conoces las funciones de JavaScript, es mejor que primero consultes cómo se utilizan antes de adentrarte en los métodos de un objeto.

El contenido de un objeto se declara entre corchetes { ... }, con comas que separan cada uno de los pares de elementos. A la lista de pares de valores separada por comas también se le puede denominar literal de un objeto.

var miObjeto = {} // Definimos un objeto y lo inicializamos con un literal vacío.

// A continuación definimos un objeto y lo inicializamos con dos propiedades
var persona = {
  nombre: 'Edu',
  edad: 35
}

En el ejemplo superior, el objeto es la variable persona, mientras que nombre y edad son claves del mismo y 'Edu' y 35 sus respectivos valores. Para obtener el valor de un objeto puedes usar el nombre del objeto seguido de un punto . y el nombre de la calve que deseas obtener. Por ejemplo, vamos a asignar el contenido de la clave edad que hemos definido en nuestro ejemplo anterior a otra variables:

var miEdad = persona.edad // La variable miEdad contendrá el valor 35.

Existen diferentes métodos que puedes usar en JavaScript para saber si una propiedad de un objeto existe. Para conocerlos, consulta el tutorial en donde explico cómo saber se una propiedad existe en JavaScript.

Tal y como has podido comprobar, las diferencias entre los tipos primitivos son considerables. Si quieres, puedes consultar el siguiente tutorial, en donde explico en detalle cuáles son las diferencias entre los tipos primitivos y los objetos en JavaScript.

Arrays

Un array permite almacenar múltiples valores en una sola variable. Un array es un tipo objeto que puede contener múltiples tipos de datos diferentes en una lista. El contenido de un array se expresa entre corchetes [], con comas que separan cada uno de sus elementos.

// Creamos e inicializamos el array con un literal vacío
var miArray = [];

// Creamos un array y lo inicializamos con varios valores
var frutas = ['manzana', 'naranja', 'pera'];

Cada valor del array incluye un índice que comienza de 0 para el primero valor y se incrementa en una unidad con cada uno de los valores sucesivos. Un array es en el fondo un objeto que incluye índices numéricos en lugar de propiedades. El índice del elemento manzana del array frutas de nuestro ejemplo sería 0, el del elemento naranja sería 1 y el del elemento pera sería 2.

Para acceder a los elementos del array tendremos que indicar su índice numérico entre corchetes. En el siguiente ejemplo vamos a asignar el elemento manzana del array anterior a una nueva variable.

var mejorFruta = frutas[0];

Existen ciertas funciones que puedes usar para saber si un elemento es un array en JavaScript.

La consola de JavaScript

La consola de JavaScript te permite interactuar directamente con el navegador, además de poder consultar los errores JavaScript y de poder ver los mensajes que imprimas por ella.

Muchos lenguajes de programación incluyen una sentencia que te permite mostrar o imprimir contenido por pantalla. Estas sentencias suelen recibir el nombre de print o echo, pero JavaScript carece de ellas. Cuando comienzas a programar con JavaScript, lo mejor que puedes hacer es escribir aquellos que quieras mostrar directamente en el documento mediante el método document.write, aunque lo más habitual es usar el método console.log para mostrarlo por la consola.

A continuación vamos a ver un ejemplo en el que declaramos una variable, le asignamos una cadena y la mostramos tanto por la consola del navegador como en el documento:

var saludo = "Hola!";

// Mostramos el saludo en el documento
document.write(saludo);

// Mostramos el saludo por la consola
console.log(saludo);

Esto ha sido todo por ahora. Esta guía se irá ampliando progresivamente.


Avatar de Edu Lazaro

Edu Lázaro: Ingeniero técnico en informática, actualmente trabajo como desarrollador web y programador de videojuegos.

👋 Hola! Soy Edu, me encanta crear cosas y he redactado esta guía. Si te ha resultado útil, el mayor favor que me podrías hacer es el de compatirla en Twitter 😊

Si quieres conocer mis proyectos, sígueme en Twitter.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *