Just another web developer

Etiquetas de la entrada: javascript

Texto

Mi trabajo de la universidad. Espero sirva de guía para quienes están empezando.

Comentarios
Texto

Antes de haber aprendido mucho de desarrollo front-end aprendí lenguajes del lado servidor (por ejemplo, PHP) por lo que al empezar a desarrollar seriamente con JavaScript familiarizarme con la sintaxis fue relativamente sencillo. Para entonces obviamente utilizaba muy normalmente las funciones. Si con PHP podía hacer lo siguiente:

function foo($bar = 0){ // si no se especifica un valor, $bar toma 0

}

En JavaScript al principio no me figuraba como poner un valor por defecto pero la solución resulta ser bastante simple:

function foo(bar){
    var bar = bar || 0;
}

¿Y con múltiples parámetros?

Ok, si determinamos cómo podemos establecer un valor por defecto, vamos a ver cómo lo hacemos si tenemos más parámetros.

Solución clásica sería la siguiente:

function foo(a, b, c, d, e, f, g, h){

}

Funciona, está bien, todos están contentos. Pero… pronto olvidaríamos que representa cada parámetro y en el orden en particular, por lo que el uso de una función después de unos días puede ser bastante problemático.

Si utilizamos jQuery (¿quién no?), podríamos valernos del jQuery.extend(). En lugar de enviar una serie loca de argumentos, un objeto sería mucho más atractivo…

var params = {
	moneda:	'guaranies',
	precio: 200
};
foo(params);

function foo(params) {
	var o = { // o de opciones
		moneda:	'USD',
		precio: 0,
		param_x_defecto: 'bar'
	}
	$.extend(o, params);

	console.dir(o);

}

Ahora no importa en qué orden van específicamente los argumentos. Simple ah!?

Y comentá ¿cuál es la técnica que utilizás actualmente?

Fuente: iamntz.com

Comentarios
Texto

Una situación cada vez más común es la necesidad de manipular (de una u otra manera) la URL desde JavaScript. En una aplicación GIS en la que estoy trabajando utilizo un 90% de JavaScript para desarrollarla y una de las primeras cosas que necesité fue capturar los parámetros que eran pasados vía URL; para ello había escrito una función sencilla:

// opu = obtener parametro de url ;)
function opu(nombre){
    name = nombre.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regexS = "[\\?&]"+nombre+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var resultados = regex.exec( window.location.href );
    if( resultados == null ){
        return "";
    }else {
        return resultados[1];
    }
}

Simplemente se pasa como parámetro a la función el nombre del parámetro que se encuentra en la URL. Por ejemplo, para una URL como http://www.ejemplo.com/index.html?param=99 si a esta función le paso param obtendría 99 de retorno.

Hoy en día casi siempre utilizamos jQuery para cualquier tipo de desarrollo web y existe un plugin llamado jQuery-URL-Parser que es excelente para obtener todo tipo de información que pueda darnos una URL

Funciona de la siguiente manera:

  • Especificar la URL a manipular
    Se puede obtener de varias formas
    var url = $.url(); // obtiene la URL actual
    var url = $.url('http://gilbert.im'); /* pasar una URL en forma de texto */
    var url = $('#miElemento').url(); // extrae la URL del elemento seleccionado - funcionaría con elementos que cuenten con atributos `src`, `href` o `action`.
    
  • Atributos URL
    El método .attr() es utilizado para retornar información de varias partes de la URL. Por ejemplo:
    var url = $.url('http://gilbert.im/carpeta/dir/index.html?item=valor');
    url.attr('protocol'); // retorna 'http'
    url.attr('path'); // retorna '/carpeta/dir/index.html'
    Los atributos disponibles para realizar consultas son:
    • source - la URL completa que se está analizando
    • protocol - Ej.: ‘http’, ‘https’, ‘file’, etc.
    • host - Ej.: www.mydomain.com, localhost, etc.
    • port - Ej.: ’80’, ‘4848’
    • relative - la ruta de acceso relativa al archivo incluyendo la cadena de consulta (por ejemplo, carpeta/dir/index.html?item=valor)
    • path - la ruta del archivo (por ejemplo, carpeta/dir/index.html)
    • directory - la parte del directorio de la ruta (por ejemplo, /carpeta/dir/)
    • file - el nombre base del archivo. Ej.: index.html
    • query - la cadena de consulta completa si es que existe. Ej.: item1=valor1&item2=valor2
    • fragment (también disponible como anchor) - toda la cadena después del símbolo #
  • Consulta de parámetros de cadena

    El .param() se utiliza para devolver los valores de los parámetros de cadena de consulta.

    Pasar de una cadena en el acceso de valor de dicho parámetro:

    $.url('http://gilbert.im?cielo=azul&pasto=verde').param('cielo'); /* retorna 'azul' */
    

    Si ningún argumento se pasa en ella, devolverá un objeto literal que contiene un mapa clave:valor de todos los parámetros de cadena de consulta.

    $.url('http://gilbert.im?cielo=azul&pasto=verde').param(); 
    /* retorna { 'cielo':'azul', 'pasto':'verde' } */
    

    Tenga en cuenta que el método .param() trabajá tanto en signo de división y de cadenas de consulta dividida por punto y coma.

  • Segmentos URL

    El .segment() se utiliza para devolver valores de segmentos individuales de la ruta de la URL

    Pase un valor entero para obtener el valor de ese segmento - Nótese sin embargo que el número no es cero-indexado como un array - es decir, el .segment(1) devuelve el primer segmento, no el segundo

    También puede pasar en valores negativos, en cuyo caso se contará de nuevo desde el final de la ruta en lugar de hacia delante desde el principio.

    var url = $.url('http://gilbert.im/carpeta/dir/ejemplo/index.html');
    url.segment(1); // retorna 'carpeta'
    url.segment(-2); // retorna 'ejemplo'
    

    Si ningún argumento se pasa en ella devolverá una matriz de todos los segmentos (que será cero-indexado!)

    $.url('http://gilbert.im/carpeta/dir/ejemplo/index.html').segment();
    /* retorna ['carpeta','dir','ejemplo','index.html'] */
    
  • Fragmento de parámetros y / o segmentos

    Algunos sitios y aplicaciones también utilizan el fragmento de hash para almacenar los pares de claves de estilo cadena de consulta de valor (Ej.: http://gilbert.im/#cielo=azul&pasto=verde) o path de tipo barra-delimitado (http://ejemplo.com/#/quienes/somos/)

    Hay dos métodos para extraer información a partir de fragmentos de este tipo - .fparam() y .fsegment(), los cuales se comportan de forma idéntica a sus contrapartes .param() y .segment() pero actúan en el fragmento en lugar de la URL principal.

    $.url('http://gilbert.im/#cielo=azul&pasto=verde').fparam('pasto'); /* retorna 'verde' */
    $.url('http://ejemplo.com/#/quienes/somos/').fsegment(1); /* retorna 'quienes' */
    

Comentarios
Texto

Cada vez que veas la palabra clave function dentro de otra función, la función interna tiene acceso a las variables de la función externa.

function foo(x) {
    var tmp = 3;
    function bar(y) {
        alert(x + y + (++tmp));
    }
    bar(10);
}
foo(2);

Esto siempre alerta 16, porque bar puede acceder a la x que se definió como un argumento a foo, y asimismo puede acceder a tmp de foo. Eso no es un closure. Un closure es cuando regreses la función interna. La función interna clausurará las variables de foo antes de salir.

function foo(x) {
    var tmp = 3;
    return function (y) {
      alert(x + y + (++tmp));
    }
}
var bar = foo(2); // bar es ahora una clausura.
bar(10);

La función de arriba también alertará 16, porque bar aún puede referenciar a x y a tmp, a pesar de que ya no está directamente en el ámbito.

Sin embargo, dado que tmp sigue dando vueltas en el interior de la clausura bar, también está siendo incrementada. Se incrementa cada vez que llame a bar.

Aquí el número x es un número literal. Al igual que con otros literales en JavaScript, cuando se llama foo, el número x se copia en foo como argumento x.

Por otra parte, JavaScript siempre utiliza referencias cuando se trata de objetos. Si por ejemplo, ha llamado foo con un objeto, el retorno de la clausura referencia al objeto original!

function foo(x) {
  var tmp = 3;
  return function (y) {
    alert(x + y + tmp);
    x.memb = x.memb ? x.memb + 1 : 1;
    alert(x.memb);
  }
}
var edad = new Number(2);
var bar = foo(edad); // bar es ahora una clausura referenciando edad.
bar(10);

Como era de esperar, cada llamada a bar(10) incrementará x.memb. Lo que no era de esperar, es que x es una simple referencia al mismo objeto que la variable edad! Después de un par de llamadas a bar, age.memb será de 2!

Comentarios
Texto

Quiero presentar a jKey, un plugin jQuery muy sencillo que permite utilizar atajos en nuestras aplicaciones.

Ejemplo 1

/**
 * Un ejemplo básico de su uso.
 */
$(window).jkey('a',function(){
	console.log('Presionaste la tecla "a".');
});

Nótese que el selector indica que está utilizando el evento para window pero esta forma es aplicable a cualquier elemento del documento.

Seleccionando un elemento

/**
 * La función será ejecutada
 * solo cuando el foco esté en el input.
 */
$('#ejemplo').jkey('i',function(){
	console.log('Presionaste la letra "i" dentro de un input.');
});

Ejemplo 2

Combos! Se pueden cachar combos (y/o combinaciones) de la siguiente manera:

/**
 * A diferencia de los sistemas operativos se puede
 * crear un atajo con 2 letras
 */
$(window).jkey('y+u',function(){
	console.log('Presionaste la "y" y la "u"!');
});
/**
 * Una combinación convencional
 */
$(window).jkey('alt+d',function(){
	console.log('Felicidades, hiciste un combo: alt+d');
});
/**
 * Una combinación de más de 2 teclas
 */
$(window).jkey('alt+shift+s',function(){
	console.log('Woohoo, combinaste de esta forma: alt+shift+s');
});

Ejemplo 3

Muchas veces puede que querramos hacer accesible una misma función pero de forma distinta. jKey permite la selección de múltiples opciones

/**
 * Más de una opción para la misma función
 */
$(window).jkey('w, up',function(){
	console.log('Presionaste o la w, o arriba!');
});

Estas son solo algunas de las funcionalidades que nos ofrece este sencillo plugin. Las aplicaciones prácticas que se le puede dar son muchas! Desde integrarlo dentro de un formulario sencillo como integrarlo dentro de un juego.

Pueden descargar el código fuente AQUI

Happy coding! ;)

Comentarios