Introducción a JavaScript

freeCodeCamp BA

• Leonardo Galante @leogln_
• Nicolás Quiroz @_nhsz

freeCodeCamp BA

• freecodecamp.com

• Nuestra comunidad: freecodecampba.org
• En Twitter: @freeCodeCampBA

• Guía rápida para empezar

freeCodeCamp BA

Próximo Meetup: Domingo 23/7 en Wolox

• 15 a 20hs
• Charla de Ruby On Rails
• Inscripción: del Miércoles 19/7 al Sábado 22/7

Esta fue la primer página web

World Wide Web (CERN - 1990)

¿Qué es JavaScript?

Es un lenguaje de programación creado en 1995 por Brendan Eich, para darle dinamismo e interacción a los sitios web.

Hoy es un lenguaje de propósito general.

¿Por qué JavaScript?

• Es el lenguaje que entienden y ejecutan los navegadores (browsers).
• Es relativamente fácil de aprender, por lo que es una buena opción como primer lenguaje.
• Hay mucha demanda de desarrolladores JavaScript.
• Ahora también podemos ejecutar código JavaScript fuera del browser, usando NodeJS.

Variables

Es una caja para guardar valores, de diferentes tipos. Esta caja tiene una etiqueta, el nombre de la variable.

Son reutilizables: una vez creadas, podemos usarlas todas las veces que querramos.

Se pueden reasignar, cambiar su valor. Por eso se llaman variables.

Declarar una variable

Declarar es crear una nueva variable.

Usamos la palabra var para crear nuevas variables.

var nombreDeLaVariable;

Nota: las sentencias en JS terminan con ;

Importante: ¡probá todo el código en tu consola!

Ejercicio 1

Declarar la variable nombre.

Solución ejercicio 1

var nombre;

Inicializar una variable

Inicializar una variable consiste en crearla (declararla) y asignarle un valor inicial.

var nombreDeLaVariable = 3;

Ejercicio 2

Declarar la variable nombre e inicializarla con tu nombre, escrito entre comillas.

Solución ejercicio 2

var nombre = 'Nicolás';

Reasignar una variable

¿Te acordás que las variables se podían reasignar?

Una vez que creamos una variable y la inicializamos, ya podemos empezar a usarla.

También podemos cambiar su valor, es decir, reasignarla.

//Declaro e inicializo la variable
var nombreDeLaVariable = 3;
 
// Le cambio el valor (la reasigno)
nombreDeLaVariable = 7;

Ejercicio 3

Reasignar la variable nombre que creamos.

Solución ejercicio 3

var nombre = 'freeCodeCamp';

Operar con variables

var tres = 3;
 
// Equivale a hacer 3 + 2
tres + 2;
// => 5

Ejercicio 4

Crear la variable unNumero, inicializarla con el valor 1.

En otra instrucción, sumarle 3 a la misma variable.

Solución ejercicio 4

var unNumero = 1;
unNumero + 3;
// => 4

Cómo nombrar variables

• Usar nombres descriptivos, que representen el contenido
• El nombre puede empezar con cualquier letra, $ ó _, no con números
• Por convención se utiliza camelCase
• El lenguaje es case sensitive, es decir hay distinción entre mayúsculas y minúsculas

Constantes

Son espacios con nombre para guardar valores (también son cajas con etiquetas, como las variables) que no varían.

Son reutilizables, pero no se pueden reasignar.

const numeroEntero = 1;

Si reasignamos una constante, obtenemos un error

const saludo = 'Hola!';
saludo = 'Hola Mundo!';
// => Uncaught TypeError: Assignment to constant variable

Imprimir texto en la consola

Podemos mostrar valores de cualquier tipo en la consola del navegador.

¡La consola forma parte de las herramientas de desarrollo del navegador que estás usando ahora!

console.log('Hola Mundo!');
console.log(nombreDeLaVariable);

Ejercicio 5

Mostrar por consola el valor de la variable nombre.

Solución ejercicio 5

console.log(nombre);

Tipos de datos

Podemos usar valores de diferentes tipos en JavaScript.

Tipos principales en JS

• String (Cadena de caracteres)
• Number (Números)
• Boolean (Booleanos)

String

Representan cadenas de caracteres (texto).

Se escriben entre comillas simples ó dobles, sin mezclar.

'JavaScript' // ✔
"JavaScript" // ✔
// 'JavaScript" ✗ Nope

Cualquier valor entre comillas es un String, por ejemplo, un número.

'43' // Esto también es un String

Operaciones con Strings

Longitud de la cadena

var titulo = "¡Estoy aprendiendo a programar!";
titulo.length;  // 31

'titulo'.length;  // 6

Ejercicio 6

Declarar una variable evento y asignarle 'Programá Tu Futuro'.

Averiguar cuál es la longitud de la variable definida.

Solución ejercicio 6

var evento = 'Programá Tu Futuro';
evento.length; // 18

Operaciones con Strings

Concatenación

Se usa para combinar diferentes cadenas de caracteres.

var lenguaje = 'JavaScript';
var año = 1995;
var unaFrase = lenguaje + ' apareció en ' + año;
// "JavaScript apareció en 1995"

Ejercicio 7

Declarar una variable tema y asignale Kids.

Declarar otra variable artista y asignale MGMT.

Teniendo las 2 variables declaradas, concatenarlas para formar
el siguiente estado: Ahora suena: Kids de MGMT.

Solución ejercicio 7

var tema = 'Kids';
var artista = 'MGMT';
var estado = 'Ahora suena: ' + tema + ' de ' + artista;

Number

JavaScript no hace diferencia entre números enteros y de punto flotante (decimales).

var unEntero = 27;

var unNumeroDePuntoFlotante = 2.5;

var unEnteroNegativo = -10;

Operaciones con Number

Suma: x + y

10 + 91;
// => 101
1 + 3.14;
// => 4.14

Resta: x - y

27 - 4
// => 23
3 - 5
// => -2
3 - 1.5
// => 1.5

Ejercicio 8

¿Cuantos días faltan para el último día del mes?

Solución ejercicio 8

var diaFinDeMes = 31;
var diaActual = 15;
var diasRestantes = diaFinDeMes - diaActual;
// => 16

Operaciones con Number

Multiplicación: x * y

7 * 3
// => 21
4 * 12.5
// => 50

División: x / y

1 / 2
// => 0.5
8 / 2
// => 4
1.0 / 3.0
// => 0.3333333333333333

Incremento

Se puede escribir de muchas formas: x = x + 1, x += 1, ++x, x++

var x = 5;
x += 1;
// => 6

Decremento

Se puede escribir de muchas formas: x = x - 1, x -= 1, --x, x--

var x = 5;
x -= 1;
// => 4

Módulo: x % y

Es el resto de dividir x por y.

10 % 2
// => 0
11 % 2
// => 1

Boolean

Tiene 2 valores posibles: true y false, para indicar si algo es verdadero ó falso.

2 > 1
// => true
1 > 2
// => false
'hola' === 'Hola'
// => false

Nota: al comparar valores, usar siempre ===

Ejercicio 9

Verificar si tu edad es mayor a 18

Solución ejercicio 9

var edad = 24;
edad > 18
// => true

Expresión booleana

Es cualquier expresión que pueda evaluarse como verdadera ó falsa y por lo tanto, reducirse a true ó false.

Ejercicio 10

¿Cómo podemos verificar si el día de hoy es par?

Solución ejercicio 10

diaActual % 2 === 0
// => false

Operadores de comparación

Igualdad ==

Compara sólo el valor

1 == 1
// => true
1 == '1'
// => true

Igualdad estricta ===

Compara el valor y tipo del mismo

1 === 1
// => true
1 === '1'
// => false

Son análogos a la igualdad.

Desigualdad !=

23 != '23'
// => false

Desigualdad estricta !==

23 !== '23'
// => true

Otros operadores de comparación

Menor <

1 < 2
// => true

También podemos comparar caracteres, según su orden en la tabla ASCII.

'a' < 'b'
// => true

Mayor >

77.5 > 80
// => false

Menor ó igual <=

10 <= 10
// => true

Mayor ó igual >=

31 >= 33
// => false

Operadores lógicos

Se utilizan para evaluar valores y expresiones booleanas.

Retornan un valor booleano.

AND &&

Retorna true si y sólo si todas las expresiones evaluadas son verdaderas. Sino, retorna false.

true && true
// => true

Ejercicio 11

Es tu edad mayor a 18 y, al mismo tiempo, menor a 26?

Solución ejercicio 11

var edad = 24;
edad > 18 && edad < 26;
// => true

OR ||

Retorna true si al menos una de las expresiones es verdadera; sino, retorna false.

true || true
// => true

true || false
// => true

false || false
// => false

NOT !

Negación. Retorna false si la expresión es verdadera; sino, retorna true.

// En este caso poner !(true) o bien !true es lo mismo
!(true)
// => false

!(2 > 1)  // false, porque 2 > 1 es true

!(/* expresión booleana verdadera */)  // false

!(/* expresión booleana falsa */)  // true

Ejercicio 12

¿Cuál es el resultado final, true ó false?

var x = 10;
var y = 'a';
 
y === 'b' || x >= 10;

Ejercicio 13

¿Cuál es el resultado final, true ó false?

var x = 3;
var y = 8;
 
!(x == '3') && !(y != 8);

Undefined

Indica que la variable no tiene valor definido. Esto pasa cuando le asignamos el valor undefined explícitamente o sólo la declaramos, sin inicializarla.

var conValorIndefinido = undefined;

var variableSoloDeclarada;
// => undefined

Comentarios

1 sola línea

// Esto es un comentario simple

Multilínea

/*
  Los que se enamoran de la práctica sin la teoría
  son como los pilotos sin timón ni brújula,
  que nunca podrán saber a dónde van
 
  Leonardo Da Vinci
*/

Arrays

Un array es una lista de valores.

var unArregloVacio = [];

var unArregloDeNumeros = [1, 2, 3];

En JavaScript, podemos armar listas de valores de cualquier tipo.

var unArregloDeCosas = [3.7, 2, 'JavaScript', [48, 7]];

Ejercicio 14

Definí un array con el nombre de tus 3 mejores amigos

Solución ejercicio 14

var mejoresAmigos = ['Matías', 'Nicolás', 'Mauricio'];

Para acceder a un elemento usamos índices

Primer elemento del array: [0]

unArregloDeNumeros[0];
// => 1

Último elemento del array: [longitud del arreglo - 1]

var ultimaPosicion = unArregloDeNumeros.length - 1;
unArregloDeNumeros[ultimaPosicion];
// => 3

Nota: los índices de los arrays empiezan en 0.

Ejercicio 15

Definir un array mejoresAmigos con los nombres de tus 3 mejores amigos.

Mostrar por consola el último amigo dentro del array.

Solución ejercicio 15

var mejoresAmigos = ['Matias', 'Nicolas', 'Mauricio'];
console.log(mejoresAmigos[2]);

Modificar un Array

Reasignar valores

var unArregloDeNumeros = [19, 8, 3];
unArregloDeNumeros[1] = 23;
// => [19, 23, 3]

Agregar al final

unArregloDeNumeros.push('FCC');
// => [19, 23, 3, 'FCC']

Sacar el último elemento

unArregloDeNumeros.pop();
// => 'FCC'

Ejercicio 16

Agregale un amigo más a tu array de mejoresAmigos.

Solución ejercicio 16

mejoresAmigos.push('Camilo');
console.log(mejoresAmigos);

Nota: Strings e índices

También podemos acceder a los caracteres de un String usando índices (como si fuera un Array de caracteres), pero no podemos modificarlo (los Strings en JavaScript son inmutables).

Si quisiéramos hacerlo, tendríamos que convertirlo primero a Array, operar y luego pasarlo a String nuevamente.

var unString = 'Puedo acceder a los caracteres de este texto, pero no modificarlo';

Acceder a un caracter de un String

console.log(unString[2]);
// => e

Convierto el String a Array

console.log(unString.split(' '));
/*
[
  'Puedo',
  'acceder',
  'a',
  'los',
  'caracteres',
  'de',
  'este',
  'texto,',
  'pero',
  'no',
  'modificarlo',
]
*/

Condicionales

Nos permiten decidir qué camino seguir, según las condiciones que evaluemos.

if (condición booleana) {
  // Se ejecuta si la condición se cumple
} else {
  // Se ejecuta si la condición no se cumple
}

Ejemplo

var edad = 16;
// Solo las personas mayores de 18 años pueden entrar al boliche
if (edad > 18) {
  console.log('Puede entrar al boliche.');
} else {
  console.log('No puede entrar al boliche.');
}

Valores falsos (falsy values)

Son aquellos valores que se interpretan como falsos si se evalúan en el contexto de una expresión booleana.

• false
• null
• undefined
• ''
• 0
• NaN

Valores verdaderos (truthy values)

Todos los valores que no se encuentren en la lista anterior, se consideran verdaderos.

Ciclos

Nos permiten iterar sobre diferentes colecciones de valores

También iterar hasta que ciertas condiciones se cumplan o no

While

Se ejecuta hasta que la condición booleana sea falsa.

var i = 0;
// Iteración N° 0 hasta Iteración N° 4
while (i < 5) {
  console.log('Iteración N° ' + i);
  i++;
}

For

Se ejecuta hasta que la condición booleana sea falsa y consiste en tres expresiones opcionales.

for (expresión inicial; condición; expresión final) {
  ...
};

• expresión inicial: declaramos una variable como contador.
• condición: expresión evaluada antes de cada iteración.
• expresión final: expresión evaluada al final de cada iteración.

Ejemplo I

for (var i = 0; i < 10; i++) {
  console.log('Iteración N° ' + i);
}

Ejemplo II

var animales = ['Perro', 'Gato', 'Tortuga'];
 
// Recorremos el array animales y mostramos cada uno
for (var i = 0; i < animales.length; i++) {
  console.log('Las mascotas disponibles son: ' + animales[i]);
}

Ejercicio 17

Definir un array planetas con los siguientes valores: 'Jupiter', 'Saturno' y 'Urano'.

Recorrer el array y mostrarlos por consola.

Solución ejercicio 17

var planetas = ['Jupiter', 'Saturno', 'Urano'];
 
for (var i = 0; i < planetas.length; i++) {
  var planeta = planetas[i];
  console.log('Planeta: ' + planeta);
}

Funciones

Son bloques de código con nombre, reutilizables.

Pueden recibir (o no) parámetros.

function nombreFuncion(primerParametro, segundoParametro) {
  ...
}

Ejemplo I

// Devuelve la suma entre a y b
function sumarDosValores(a, b) {
  return a + b;
}
 
sumarDosValores(2, 4);

Ejemplo II

// Devuelve el total con solo 2 decimales
function imprimirTotal(total) {
  return total.toFixed(2);
}
 
imprimirTotal(10.6533);

Ejercicio 18

Definir una función que multiplique 2 valores que serán pasados por parámetro

Solución ejercicio 18

function multiplicar(primerValor, segundoValor) {
  return primerValor * segundoValor;
}

Ejercicio Final

En este ejercicio vamos a crear un sistema sencillo para un Video Club, utilizando todo lo aprendido hasta ahora: strings, arreglos, funciones, etc...

Vamos a escribir una función que verifique si las películas que quiere el cliente se encuentran o no en stock.

1. Debe contar con una lista con las siguientes películas:
   'The Avengers', 'Inception', 'The Matrix', 'The Lord of the Rings'
2. El cliente pide 2 películas, una que se encuentra en stock y otra que no.
3. Debe de verificar si la pedida por el cliente se encuentre entre una de ellas.
4. Debe mostrar un mensaje tanto si la película se encuentra en stock como sino.

Si tenés dudas para resolver el ejercicio...

• Escribinos en el chat
• Escribinos un mail: freecodecampba@gmail.com
• Preguntanos por Facebook, Twitter, etc

Si querés ver una solución posible... ¡Pero después de haber intentado!

• Solución

Para seguir aprendiendo...

Algunos recursos gratuitos recomendados:

En español

• JavaScript para Gatos
• JavaScript101
• MDN JavaScript
  • En Twitter: @javascript_101
  • Próximo evento: Sábado 22/7
• Vengan a nuestros Meetups!

En inglés

• You Don't Know JS: Up & Going
• Eloquent JavaScript
• freeCodeCamp
• MDN JavaScript