Curso de JavaScript

Bienvenido a nuestro curso de JavaScript donde aprenderás desde lo más básico del lenguaje hasta el desarrollo de varias aplicaciones de ejemplo.

Comencemos desde el principio con la siguiente pregunta.

¿Qué es JavaScript?

JavaScript es un lenguaje de programación interpretado, multiplataforma y orientado a objetos, utilizado para desarrollar funcionalidades interactivas en el navegador web como animaciones, validación de formularios, comportamientos de botones, menús desplegables, entre muchas otras posibilidades.

Existen también entornos de desarrollo en JavaScript enfocados a la creación de servicios en el lado del servidor. La implementación más conocida es Node.js la cual permite añadir funcionalidades de servidor como almacenar información en una base de datos brindando acceso al navegador web a través de una API, incluyendo la posibilidad de acceder a ese servicio en el servidor también desde otra plataforma como podría ser una aplicación Android o iOS.

JavaScript llega incluso a ser utilizado en otros sectores:

• Desarrollo de aplicaciones móviles (Ej: React Native, NativeScript)
• Desarrollo de aplicaciones de escritorio (Ej: Ionic Framework)
• Desarrollo web utilizando frameworks (Ej: React, Angular, Vue.js)
• Desarrollo de modelos de Machine Learning (Ej: TensorFlow)
• Robótica, plugins de navegadores web, Firebase functions, y más.

Conceptos

Debido a que los conceptos básicos de la mayoría de los lenguajes de programación son iguales o muy similares, decidimos crear un curso exclusivo para explicar de forma sencilla los conceptos iniciales de programación.

Si eres completamente nuevo en el mundo de la programación o si en algún momento de este curso utilizamos un término que no conoces, te será de gran utilidad el curso: Conceptos de programación.

De esta forma también logramos que este y otros cursos de lenguajes sean más directos sin explicar cada vez los conceptos básicos que tal vez muchos estudiantes ya conozcan.

Ir al curso de Conceptos de Programación

Un estándar para JavaScript

JavaScript lleva varias décadas de existencia y en sus primeros años cada navegador web implementó JavaScript a su manera, lo que se convirtió en un gran problema para la compatibilidad. A causa de este problema, en 1997 se propuso crear un nuevo estándar, lo que concluyó en ECMA-262, el estándar que define un nuevo lenguaje de scripting llamado ECMAScript.

Tuvieron que transcurrir muchos años, pero afortunadamente en la actualidad el caos de las diferencias entre navegadores está solucionado y podemos programar en JavaScript sin preocuparnos de que nuestro código pueda funcionar mal en algún navegador web actual.

Tenemos que mencionar ciertas excepciones. JavaScript sigue evolucionando y algunos navegadores implementan rápidamente las nuevas características, mientras que otros navegadores demoran más. Para conocer la compatibilidad de una característica de JavaScript con respecto a los navegadores web populares de la actualidad podemos utilizar el buscador del sitio web Can I use (opens in a new tab).

Implementaciones de JavaScript

Aunque a menudo se utilicen los términos ECMAScript y JavaScript como sinónimos, JavaScript es mucho más de lo que se define en el estándar ECMA-262.

Podemos distinguir las siguiente partes en la implementación de JavaScript:

• El core (ECMAScript)
• El DOM (Document Object Model)
• El BOM (Browser Object Model)

ECMAScript

ECMAScript es el lenguaje que define el estándar ECMA-262, e incluye las partes fundamentales de JavaScript pero no tiene ninguna particularidad que permita utilizar JavaScript en navegadores web, y esto es así porque el navegador web es solamente uno de los entornos en los que se puede utilizar JavaScript.

Veamos entonces cuáles son las características que incluye ECMAScript:

• Sintaxis
• Tipos de datos
• Sentencias
• Palabras clave
• Palabras reservadas
• Operadores
• Objetos globales

Si uno de estos términos te resulta desconocido no te preocupes, habrán lecciones dedicadas para cada uno de ellos.

Document Object Model

El DOM en JavaScript es una API que nos permite trabajar con el contenido de documentos HTML o XML. Básicamente lo que realiza es un mapeo de todo el documento HTML a una jerarquía de nodos, nodos de diferentes tipos y con información que podemos utilizar.

Al crearse un árbol de nodos para representar al documento HTML, como programadores podemos manipular la estructura de dicho árbol añadiendo, reemplazando o eliminando nodos, y modificándolos utilizando la DOM API.

Por el momento solo comentaremos el concepto de DOM, más adelante tendremos todo un capítulo al respecto.

Browser Object Model

Utilizando el BOM podemos interactuar con el navegador más allá del contexto de la página que se está visualizando.

Estas son algunas de las posibilidades del BOM:

• abrir una nueva ventana del navegador web
• mover, redimensionar o cerrar ventanas del navegador web
• obtener información acerca del navegador web utilizado
• obtener información acerca de la página visualizada
• obtener detalles de la resolución de la pantalla del usuario
• obtener datos de consumos del navegador y tiempos de carga
• soporte para cookies
• enviar solicitudes a servidores remotos a través de su API y recibir una respuesta

Veremos todo estos casos a detalle en un capítulo dedicado al BOM.

Ediciones de ECMAScript

La sexta edición del estándar ECMA-262 (también conocida como ES6 o ES2015), fue publicada en el año 2015 y sigue siendo la más relevante hasta la actualidad por la cantidad de mejoras que introdujo.

ES6 introdujo el soporte formal para clases, módulos, iteradores, generadores, funciones de flecha, promesas, reflexión, proxies y una gran cantidad de nuevos tipos de datos.

Existen otras dos ediciones publicadas, la séptima (ES7 o ES2016) y octava (ES8 o ES2017) del estándar, que añaden otras características que no sería realmente útil mencional en la primer lección de este curso, pero que iremos viendo en sus respectivas lecciones y aclararemos en cada caso a cuál edición pertenece, para que dicha característica sea utilizada con precaución, ya que puede no estar implementada aún por algún navegador web.

Para finalizar esta sección vamos a mencionar que la novena edición del estándar, aún no publicada, promete importantes nuevas adiciones, entre ellas la carga dinámica de módulos ES6.

Algunos ejemplos

Veamos algunos ejemplos JavaScript solo a modo de introducción ya que en los siguientes capítulos veremos en detalle cada unos de estos conceptos.

Iniciemos por el ejemplo más típico en todo lenguaje de programación, el famoso "Hola mundo".

Hola mundo

Debido a la amplitud de contextos en los que se puede utilizar JavaScript, existen varias formas de realizar un ejemplo "Hola mundo", pero el más sencillo de ellos es simplemente la siguiente línea:

console.log("¡Hola mundo!")

Veremos en el primer Codelab de JavaScript cómo ejecutar esta línea directamente en la consola del navegador web, con lo que luego de ejecutarla veremos como salida en la misma consola el texto:

¡Hola mundo!

Variables

En JavaScript las variables son débilmente tipadas, lo que significa que pueden almacenar valores de cualquier tipo de dato en cualquier momento, es decir que las siguientes líneas son completamente válidas:

var saludo = "Hola"
saludo = 12

Normalmente no es recomendable utilizar variables de esta forma, es conveniente que una variable siempre trabaje con el mismo tipo de dato.

Para declarar una variable utilizamos la palabra clave var.

En lecciones dedicadas a las variables veremos que existen otras formas de declarar variables.

Sentencias de control de flujo

JavaScript define las sentencias de control de flujo típicas, veamos las mas utilizadas:

// Sentencias condicional
if (year >= 2001) {
  console.log('21st century')
} else if (year >= 1901) {
  console.log('20th century')
}
 
// Sentencia de repetición
for (month = 1; month <= 12; month++) {
  console.log(month)
}
 
// Otra forma de sentencia de repetición
while (year < 2016) {
  year += 1
}

Como vimos en el curso de Conceptos de programación la sentencia de control condicional if se utiliza para ejecutar un bloque de código solo si se cumple una condición, y las sentencias de repetición for y while se utilizan para ejecutar un bloque de código repetidamente mientras se cumpla una condición.

Veremos todas las sentencias de control de flujo, todas sus posibilidades y ejemplos en un capítulo dedicado a ellas.

Funciones

Las funciones en JavaScript son declaradas utilizando la palabra clave function:

// Una función que recibe un parámetro
function saludar(nombre) {
  console.log("Hola " + nombre)
}
 
// Llamar a la función (ejecutarla)
saludar("Ian")

Este fragmento de código produce la siguiente salida en consola:

Hola Ian

Las funciones son una herramienta muy importante en programación, veremos todas sus posibilidades en el capítulo de Funciones.

Clases

A partir de ECMAScript 6 trabajar con clases en JavaScript se vuelve más simple utilizando la palabra clave class, veamos un ejemplo:

class Poligono {
  constructor (height, width) {
    this.height = height
    this.width = width
  }
  // Getter
  get area()   {
     return this.calcularArea()
   }
  // Método
  calcularArea() {
    return this.height * this.width 
  }
}
 
const cuadrado = new Poligono (10, 10)
 
console.log(cuadrado.area); // 100 

Este fragmento de código produce la siguiente salida en consola:

100

Las clases son un tema muy amplio e importante y por lo tanto dedicaremos muchas lecciones a ellas en este curso.