5 cosas de JavaScript que vale la pena conocer
JavaScript es el lenguaje de moda. Pasó de ser un mero lenguaje de validación de formularios, a ser el lenguaje que todo diseñador y desarrollador web debe conocer. Aquí les recopilo 5 cosas interesantes para tener en cuenta a la hora de programar con él.
Funciones nativas
JavaScript posee varios objetos nativos, los cuales son accesibles desde cualquier parte del código. Es muy importante aprender cuáles son y las funciones que poseen, ya que pueden hacer la diferencia a la hora de programar. Por ejemplo, si tenemos un arreglo de números desordenados, y queremos saber cuál es el número más chico; tendríamos que hacer lo siguiente:
var numbers = [40, 100, 1, 5, 25, 10];
var minimo = numbers[0];
for (var i = 1; i < numbers.length; i++) {
if (numbers[i] < minimo) {
minimo = numbers[i];
}
};
En cambio, utilizando la función
sort() del objeto Array, el código cambia a sólo lo siguiente:var numbers = [40, 100, 1, 5, 25, 10];
minimo = numbers.sort(function(a, b) {
return a - b
})[0];
La función
sort() ordena los elementos de un arreglo. El ordenamiento puede ser alfabético o numérico, ascendente o descendente. Si a la función no le pasamos parámetros, el ordenamiento se hace alfabético; si en cambio le pasamos una función (como en este ejemplo) se hace numérico. Al indicar "a - b" como retorno, indicamos que el primer número debe ser menor que el segundo (en las comparaciones).
Los objetos más importantes son:
- Number
- Boolean
- String
- Array
- Date
- Math
- RegExp
Declaraciones abreviadas
Hay dos declaraciones abreviadas que se utilizan mucho actualmente. Para los objetos y para los arreglos.
Antes los objetos se declaraban de la siguiente manera:
Antes los objetos se declaraban de la siguiente manera:
var auto = new Object();
auto.color = 'red';
auto.ruedas = 4;
auto.marca = 'Renault';
auto.anio = 2011;
Ahora se hace de la siguiente manera:
var auto = {
color: 'red',
ruedas: 4,
marca: 'Renault',
anio: 2011
}
De esta forma no hay que repetir el nombre del objeto cada vez que agregamos una propiedad y quedan todas las propiedades dentro de las llaves, lo cual es más fácil de interpretar visualmente.
Por el otro lado, los arreglos antes se declaraban de la siguiente forma:
Por el otro lado, los arreglos antes se declaraban de la siguiente forma:
var marcasDeAutos = new Array('Renault', 'Ford', 'Chevrolet', 'Fiat');
Actualmente se hace de la siguiente:
var marcasDeAutos = ['Renault', 'Ford', 'Chevrolet', 'Fiat'];
No es mucha diferencia, pero al tener los corchetes es más fácil intuir que se trata de un arreglo.
JSON
Antes de la creación de JSON, había que hacer muchas cosas raras para guardar información de modo que JavaScript pudiera leerla (arreglos, strings con caracteres de control, etc). Por suerte Douglas Crockford cambió todo eso al traer JSON.
JSON significa JavaScript Object Notation y es un formato para el intercambio de datos. Sirve para almacenar datos complejos en una forma nativa a JavaScript y no necesita una conversión extra para ser usada inmediatamente. En JSON se utiliza las declaraciones abreviadas vistas antes.
Para ejemplificar, imaginá lo siguiente:
JSON significa JavaScript Object Notation y es un formato para el intercambio de datos. Sirve para almacenar datos complejos en una forma nativa a JavaScript y no necesita una conversión extra para ser usada inmediatamente. En JSON se utiliza las declaraciones abreviadas vistas antes.
Para ejemplificar, imaginá lo siguiente:
- Tengo un div en el cual quiero agregar una lista desordenada que muestre a cada uno de los integrantes de la banda Kiss, junto a su respectivo instrumento.
Como JSON se utiliza para intercambio de datos, en este caso los datos de los integrantes podrían estar llegando a través de una página de música que nos informa de los mismos.
Vamos por partes. Primero creamos el div.
Vamos por partes. Primero creamos el div.
Obtenemos el objeto JSON con los datos de los integrantes
var kiss = {
//dentro del objeto kiss tengo un arreglo de miembros
"miembros": [{
//cada miembro contiene dos atributos
"nombre": "Gene Simmons",
"instrumento": "bajo"
}, {
"nombre": "Paul Stanley",
"instrumento": "guitarra"
}, {
"nombre": "Ace Frehley",
"instrumento": "guitarra"
}, {
"nombre": "Peter Criss",
"instrumento": "batería"
}]
}
Finalmente agregamos la lista
//creamos una variable donde vamos a almacenar la lista
var listaDeMiembros = '';
//iteramos el arreglo de miembros dentro del objeto kiss
for (var i = 0; i < kiss.miembros.length; i++) {
//por cada miembro creamos un item de la lista y le agregamos los datos
listaDeMiembros += '
- ' + kiss.miembros[i].nombre + ' - ' + kiss.miembros[i].instrumento + '
';
};
listaDeMiembros += '
';
//seleccionamos el div y le agregamos la lista que creamos
$('#miembrosDeKiss').append(listaDeMiembros);
Delegación de eventos
En el manejo tradicional de eventos, agregás o quitas manejadores de eventos de cada elemento a medida que vas necesitando. Sin embargo, los manejadores pueden causar problemas con filtraciones de memoria y degradar la performance. Cuantos más tenés, más riesgo.
La delegación de eventos es una técnica en la cual añadís un sólo manejador de evento a un elemento padre para evitar tener que agregar uno para cada uno de sus hijos. Esta técnica utiliza el burbujeo de eventos y el elemento target.
Cuando un evento es lanzado sobre un elemento (por ejemplo, el click del mouse en un enlace), el mismo evento es lanzado sobre todos los elementos precedentes de su herencia. Este proceso se conoce como "burbujeo de eventos", ya que el evento va buscando hacia arriba hasta la cima del árbol del DOM.
El elemento
La delegación de eventos es una técnica en la cual añadís un sólo manejador de evento a un elemento padre para evitar tener que agregar uno para cada uno de sus hijos. Esta técnica utiliza el burbujeo de eventos y el elemento target.
Cuando un evento es lanzado sobre un elemento (por ejemplo, el click del mouse en un enlace), el mismo evento es lanzado sobre todos los elementos precedentes de su herencia. Este proceso se conoce como "burbujeo de eventos", ya que el evento va buscando hacia arriba hasta la cima del árbol del DOM.
El elemento
target de cada evento, es el elemento que originó el evento (en nuestro ejemplo, el enlace), el cual se almacena en la propiedad del objeto del evento. Entonces utilizando la delegación de eventos, se puede agregar un manejador de eventos a un elemento, esperar a que un evento burbujee desde los elementos hijos y utilizar el elemento target para identificar qué elemento lo lanzó.
Para aclarar un poco las cosas, vamos con un ejemplo. Tenemos los siguientes elementos:
Queremos agregar un evento a cada enlace para mostrar una alerta en vez de redirigir al usuario a esas páginas. Según el manejo tradicional de eventos haríamos lo siguiente:
//obtenemos el div que contiene a los enlaces
var divLinks = document.getElementById('links');
//obtenemos el arreglo de enlaces
var links = divLinks.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
// añadimos un listener a cada uno de los elementos a
//indicamos que cuando ocurra el evento click se debe llamar a la función manejador
links[i].addEventListener('click', manejador, false);
};
//el parámetro e es el evento
function manejador(e) {
// obtenemos el link del elemento a
var x = e.target;
alert(x);
//evitamos que se haga la redirección
e.preventDefault();
}
Ahora veamos cómo se realizaría lo mismo pero con la delegación de eventos.
//obtenemos el div que contiene a los enlaces
var divLinks = document.getElementById('links');
//agregamos un listener al div en vez de a los enlaces
links.addEventListener('click', handler, false);
function handler(e) {
//verificamos que el elemento que lanzó el evento sea un enlace
if (e.target.tagName.toLowerCase() === 'a') {
alert('Event delegation:' + e.target.href);
e.preventDefault();
}
};
Si en vez de 2 enlaces, tuviéramos 30; la performance sería realmente distinta en un caso y el otro.
Patrón módulo y las funciones anónimas
El principal atractivo del patrón módulo es que resulta extremadamente útil para conseguir código reusable y modular. Se trata de una función que actúa como contenedor para un contexto de ejecución. O sea, que en su interior, se declaran una serie de variables y funciones que sólo son visibles desde dentro de la misma (a menos que indiquemos que se pueda acceder desde el exterior).
En JavaScript, cualquier variable que no esté dentro de una función, arreglo u objeto, es global; lo que significa que se puede acceder desde cualquier script en la misma página.
Empecemos con nuestras variables y funciones sueltas.
En JavaScript, cualquier variable que no esté dentro de una función, arreglo u objeto, es global; lo que significa que se puede acceder desde cualquier script en la misma página.
Empecemos con nuestras variables y funciones sueltas.
var creador = 'Gabriel Kaplan';
var fecha = '2013';
function obtenerCopyright(){
return creador + ' - ' + fecha;
}
Cualquier otro script en la página que contenga una variable llamada creador o fecha, va a causar problemas. Para solucionarlo, podemos meter estos datos en una función anónima (sin nombre).
(function(){
var creador = 'Gabriel Kaplan';
var fecha = '2013';
function obtenerCopyright(){
return creador + ' - ' + fecha;
}
})();
El problema es que ahora no se pueden acceder desde fuera de esta función.
Así que vamos a utilizar el patrón módulo para solucionarlo.
Así que vamos a utilizar el patrón módulo para solucionarlo.
var aplicacion = ( function(){
//variables privadas
var creador = 'Gabriel Kaplan';
var fecha = '2013';
var obtenerCopyright = function(){
return creador + ' - ' + fecha;
}
return {
//puntero a la función, lo que hace que se pueda acceder desde afuera
//copyright no es más que un alias que creamos para su acceso
copyright:obtenerCopyright
}
})();
Desde afuera podemos llamar a la funcion copyright, a través del puntero.
alert(aplicacion.copyright());
A pesar de eso, no podemos acceder a las variables, ya que no se encuentran en el block return y por ende están ocultas (son privadas).
Resumen
En este artículo pudimos ver 5 características que hacen de JavaScript un lenguaje distinto.
