JS en 15'

Nicolás Quiroz / @_nhsz

JavaScript

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 de programación que entienden y ejecutan los navegadores (browsers).

Desde hace algunos años, podemos ejecutar código JavaScript fuera del browser, con NodeJS.

Variables

Espacios con nombre para guardar valores.

Son reutilizables y se pueden reasignar.

Declarar una variable


          var nombre;
          

Cada sentencia termina con ;

Inicializar una variable


          var nombre = 'Ada';
          

Reasignar una variable


          var nombre = 'Ada';
          nombre = 'Grace';
          

Cómo nombrar variables

  • Usar nombres significativos, que representen el contenido
  • El nombre puede empezar con cualquier letra, $ ó _
  • Hay distinción entre mayúsculas y minúsculas (case sensitive)
  • Por convención se utiliza camelCase

Constantes

Espacios con nombre para guardar valores que no varían.

Son reutilizables, pero no se pueden reasignar.


          Math.PI // 3.141592653589793;
          

          const otroNombre = 'Estefanía';
          otroNombre = 'Celeste'; // TypeError
          

Imprimir texto en la consola


          console.log(nombre);
          

Tipos de datos

  • String
  • Number
  • Boolean

JavaScript tiene tipado dinámico y débil: las variables se declaran sin un tipo, pueden modificarse, compararse y operar sin necesidad de ser convertidas previamente.

String

Cadenas de caracteres (texto).

Se escriben entre comillas simples ó dobles, sin mezclar.


          'JavaScript' ✔
          "JavaScript" ✔
          'JavaScript" ✗
          

Operaciones con Strings

Longitud


          nombre.length;
          'Ada'.length;  // 3
          

Concatenación

Se usa para unir diferentes cadenas de caracteres.


          var nombre = 'Ada';
          var apellido = 'IT';
          var nombreCompleto = nombre + ' ' + apellido;
          

Number

Números enteros ó de punto flotante.


          var unEntero = 27;
          

          var unNumeroDePuntoFlotante = 2.5;
          

Operaciones con Number

Suma: x + y


          1 + 1  // 2
          1 + Math.PI  // 4.141592653589793
          

Resta: x - y


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

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 diferentes formas.

x = x + 1, x += 1, ++x, x++


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

Decremento

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
          x % 2 === 0  // siempre que x sea par
          y % 2 === 1  // siempre que y sea impar
          

Boolean

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


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

Nota: al comparar valores, usar siempre ===

Otros tipos de datos

Hay 2 tipos de datos especiales que también se usan frecuentemente en JavaScript: null y undefined.

Null

Indica explícitamente que la variable no tiene valor.


          var sinValor = null;
          

Undefined

Indica que la variable no tiene valor definido, o bien porque le fue asignado o bien porque sólo fue declarada.


          var conValorIndefinido = undefined;
          

          var variableSoloDeclarada;  // undefined
          

Comentarios

1 sola línea


          // Hola!
          

Multilínea


          /*
            esto es una introducción
            muy rápida a JavaScript
          */
          

Comparar valores

Igualdad


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

Igualdad estricta


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

Desigualdad


          'js' != 'js'  // false
          

Desigualdad estricta


          1 !== '1'  // true
          

Otras comparaciones

<, >, <=, >=

Arrays

Un array es una colección ordenada de valores de cualquier tipo. Puede modificarse.


          var unArregloVacio = [];
          

          var unArregloDeNumeros = [1, 2, 3];
          

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

Para acceder a un elemento usamos índices.

Primer elemento: [0]


          unArregloDeNumeros[0];  // 1
          

Último elemento: [longitud del arreglo - 1]


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

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

Modificar un array

Reasignar valores


          unArregloDeNumeros[1] = 7.5;  // [1, 7.5, 3];
          

Agregar al final


          unArregloDeNumeros.push('Ada');  // [1, 7.5, 3, 'Ada'];
          

Sacar el último elemento


          unArregloDeNumeros.pop();  // 'Ada';
          

Objetos

Son colecciones no ordenadas de pares clave-valor.

Contienen propiedades, que pueden ser valores de cualquier tipo, arrays, funciones o incluso otros objetos.

Creando un objeto


          var unLibro = {
            titulo: 'Como agua para chocolate',
            autor: 'Laura Esquivel',
            paginas: 256
          };
          

Podemos acceder a los atributos por el nombre


          unLibro.titulo;  // 'Como agua para chocolate'
          unLibro.autor;  // 'Laura Esquivel'
          unLibro.paginas;  // 256
          

Podemos redefinir los atributos


          unLibro.titulo = 'Como JavaScript para chocolate';
          

Y crear atributos nuevos


          unLibro.anio = 1989;
          

Tip: mostrar objetos en la consola con console.table


          console.table(unObjeto);
          

Condicionales

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

Las condiciones son booleanas: cualquier expresión que pueda evaluarse como true o false.

If

El código del condicional se ejecuta sólo si la condición se cumple (es decir, es verdadera).


          if (condición booleana) {
            // ejecuto este código
          }
          

          if (nombre === 'Ada') {
            console.log('Hola' + ' ' + nombre + '!');
          }
          

If/Else

El código del condicional se ejecuta sólo si la condición se cumple, sino tomamos el otro camino.


          if (condición booleana) {
            // ejecuto este código
          } else {
            // ejecuto este otro código
          }
          

          if (1 > 2) {
            console.log('1 es mayor que 2');
          } else {
            console.log('2 es mayor que 1');
          }
          

Ciclos

Nos permiten iterar sobre diferentes colecciones de valores, como arreglos u objetos.

For

El ciclo se ejecuta la cantidad de veces indicada. Lo usamos cuando conocemos esta cantidad.


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

While

Se ejecuta mientras la condición booleana sea verdadera.


          var i = 0;

          while (i < 5) {
            console.log('Iteración N° ' + i);
            i++;
          }
          

Do... While

Se ejecuta siempre al menos una vez, independientemente de que la condición booleana sea o no verdadera.


          var i = 0;

          do {
            console.log('Iteración N° ' + i);
            i++;
          } while (i < 5);
          

Funciones

Son bloques de código con nombre, reutilizables.

Pueden recibir (o no) parámetros.


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

Las funciones no siempre retornan un valor.


          // le asigna 0 al segundo elemento del array
          function elSegundoSiempreEsCero(unArreglo) {
            unArreglo[1] = 0;
          }
          

Las funciones no siempre reciben parámetros.


          function saludo() {
            console.log('Hola Mundo!');
          }
          

Para ejecutar una función (invocarla) escribimos su nombre y los parámetros que recibe.


          saludo()  // 'Hola Mundo!'
          

Nota: si no recibe parámetros, igual escribimos los ().

Scope

Es el ámbito o alcance de una variable, donde esta 'vive' y desde donde puede ser accedida y modificada.

var

El scope está ligado a una función.

let

Tiene alcance dentro de un bloque de código, que forma parte de alguna función.

const

Al igual que let, tiene alcanca dentro de un bloque de código, pero no es variable sino constante (no puede reasignarse).

Cuidado: en JavaScript podemos declarar variables sin usar var, let o const, ¡pero el scope pasa a ser global!


Esto significa que la variable puede ser accedida y modificada desde cualquier parte de nuestro código.

Para leer más!

JavaScript Para Gatos

A re-introduction to JavaScript

Fin