Entradas con la etiqueta ‘javascript’

JS – Internet Explorer Shim

Publicado por Iván Gajate el 26 de abril de 2014 en JavaScript | Los comentarios están cerrados.

Si nuestro código falla inexplicablemente en Internet Explorer 8 seguramente sea porque estamos llamando a alguna función que no existía por aquel entonces, como trim, indexOf, forEach
Para solucionarlo podemos incluir este js en nuestra página y todo volverá a funcionar como debería 🙂

https://github.com/es-shims/es5-shim/blob/master/es5-shim.js

JS – Explosión de Letras

Publicado por Iván Gajate el 5 de febrero de 2014 en Desarrollo Web, JavaScript | 2 comentarios »

Hoy me ha dado por experimentar un poco con el TweenMax, y me ha salido este efecto interesante sobre las letras de un párrafo.
Lo que hago es separar cada letra y envolverla en un span. Luego con jQuery los selecciono todos y hago un bucle animando alguna de sus propiedades.

JS – Comparar dos Objetos en JavaScript

Publicado por Iván Gajate el 29 de noviembre de 2013 en JavaScript | 1 comentario »

Los Object en JavaScript se comparan por referencia, es decir, que aunque sean dos objetos idénticos, cada uno apunta a un espacio de memoria diferente. Así:

var a = {nombre:'Ivan'};
var b = {nombre:'Ivan'};
 
alert(a == b); // false

Una forma rápida y sencilla de comparar dos objetos es convertirlos a una cadena de texto con JSON.stringify

var a = {nombre:'Ivan'};
var b = {nombre:'Ivan'};
 
// Compare two objects
function compareObjects(obj1, obj2) {
	return JSON.stringify(obj1) === JSON.stringify(obj2);
}
 
alert( compareObjects(a, b) ); // true
Si tratamos de usarlo con un objeto jQuery nos dará un error porque tiene referencias circulares.

JS – Comunicación entre ventanas

Publicado por Iván Gajate el 30 de septiembre de 2013 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

Si una ventana de html abre otra, estas se pueden comunicar entre ellas. Normalmente se hace con window.open, pero a mi este método no me gusta porque eso abre un popup y la mayoría de navegadores tienen bloqueados los popups.

Lo que muchos no saben es que abriendo una ventana desde un enlace directo, no se bloquea la ventana y se siguen pudiendo comunicar de la misma manera, a través del window.opener

Dejo un ejemplo de un index, que abre una ventana hija (hijo.html)

Este hijo a su vez, tiene un iframe que carga ok.html

Esto lo hago porque hay muchos servicios, como Youtube o Facebook que se abren en un iframe, y una vez logado el usuario, se re dirigen a una url dada. De esta forma, nuestra app de Youtube estaría dentro de nuestro iframe, y este puede comunicarle a quien quiera que se ha logado con éxito.

HTML PADRE:

<body>
	<a href="hijo.html" target="_blank">Abrir ventana</a>
 
	<script>
 
		// La ventana hijo me informa que se ha abierto, y me puede pasar una referencia suya
		function popupAbierto(windowHijo){
			console.log("Ventana Abierta!! " , windowHijo);
		}
 
		// La ventana hijo me informa que se ha cerrado
		function popupCerrado(){
			console.log("Ventana Cerrada");
		}
 
	</script>
</body>

HTML HIJO:

<body>
 
	<iframe src="ok.html" frameborder="1"></iframe>
 
	<script>
 
		// Informo de que me han abierto. Puedo pasarle una referencia a esta ventana para que pueda acceder a ella el padre
		window.opener.popupAbierto(window);
 
		// Le digo a la ventana padre que esta ventana se va a cerrar (tambien puedo delegar esta responabilidad al padre)
		function usuarioLogado(){
			window.opener.popupCerrado();
			window.close();
		}
 
	</script>
</body>

HTML OK:

<body>
	<a href="javascript:logadoOk()" target="_self">Ya me he logado y quiero cerrar esta ventana</a>
 
	<script>
 
		// Se lo comunico la ventana contenedora de este iFrame
		function logadoOk(){
			window.parent.usuarioLogado();
		}
 
	</script>
</body>

Descargar ejemplo de comunicación entre ventanas

 

Subflash 2013

Publicado por Iván Gajate el 28 de agosto de 2013 en Eventos, Flash, JavaScript | Los comentarios están cerrados.

Otro año que vamos al Subflash!!

y este año… me toca dar una charla a mi 🙂

Ironías de la vida, tantos años yendo como flashero y ahora voy a hablar de Programación en JavaScript, la idea es seguir trabajando como en flash pero con JS 🙂

Corréd! que aún estáis a tiempo! Este año es en Ezcaray, un lugar precioso de La Rioja.

http://www.subflash.com/talleres/2013/

Tutoriales sobre Canvas

Publicado por Iván Gajate el 6 de agosto de 2013 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

Muy concisos estos tutos sobre canvas en html5 

http://www.html5canvastutorials.com/tutorials/html5-canvas-element/

JavaScript EnterFrame

Publicado por Iván Gajate el 20 de julio de 2013 en JavaScript | Los comentarios están cerrados.

Comparto aquí mi “claseEnterFrame de JavaScript que uso para animar objetos de forma continua como haría en Flash.

Se usaría así:

YXQN.EnterFrame.add(miFuncion, this);

Tiene estos métodos que se explican por si solos:

YXQN.EnterFrame.add(function, scope);
YXQN.EnterFrame.remove(function, scope);
YXQN.EnterFrame.pause();
YXQN.EnterFrame.resume();
YXQN.EnterFrame.clear();
YXQN.EnterFrame.getCallbacks();
YXQN.EnterFrame.setFps(value);

Se apoya en el rAF.js de Paulirish para optimizar el rendimiento, y yo la he puesto bonita como a mi me gusta 🙂

Descargar EnterFrame.js

 

Hoisting o Elevación de las variables en JavaScript

Publicado por Iván Gajate el 2 de julio de 2013 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

Interesantísima explicación sobre el comportamiento “peculiar” de JavaScript a la hora de definir las variables dentro de una función. Es lo que se llama “hoisting” o elevación de las variables.

http://www.etnassoft.com/2010/12/26/hoisting-en-javascript/

Básicamente se pueden evitar estos problemas declarando todas las variables al principio de cada función y tratando de no jugar a pisar variables con el mismo nombre y “chapus” así.

Hakim

Publicado por Iván Gajate el 5 de noviembre de 2012 en JavaScript, Sitios Destacados | 1 comentario »

He visto los experimentos de este tio y aún sigo flipando… fijaos bien en todo porque tiene muchos detalles.

http://hakim.se/

 

 

Singleton en JavaScript

Publicado por Iván Gajate el 4 de noviembre de 2012 en JavaScript, Patrones de diseño, Tutoriales | Los comentarios están cerrados.

Un Singleton es un tipo de objeto del que solo queremos tener una única instancia que sea accesible fácilmente desde cualquier parte.

Un ejemplo muy típico de este patrón de diseño es el modelo de datos. Todo el mundo tiene que tener acceso a él pero debemos asegurarnos de que solo existe una instancia.

var modelo = function(){
 
}();

Lo que hacemos es guardar en una variable nuestro objeto desde el principio, así nos aseguramos de tener un única instancia.
Son muy importantes los paréntesis del final de la definición de función. Lo que hacen es auto ejecutar la función (crear el objeto la primera vez que se lee este código). De esta manera nuestra variable crea y almacena el objeto.

Esto con un ejemplo real usando un namespace sería algo así:

YXQN.modelo = function(){
 
	var _api = {};
	var _contador;
 
	function init(){
		_contador = 0;
	}
 
	// Incrementa el marcador
	_api.incrementarContador = function(){
		_contador++;
	}
 
	// Devuelve el valor actual
	_api.getContador = function(){
		return _contador;
	}
 
	init();
 
	return _api;
}();

Como la instancia ya está creada, no necesitamos hacer un new, podemos acceder directamente a la variable modelo:

YXQN.modelo.getContador(); // 0
YXQN.modelo.incrementarContador();
YXQN.modelo.getContador(); // 1

Otro uso muy interesantes para el Singleton es un objeto que controle las cartelas de aviso de nuestra página, es bueno que todos los avisos estén centralizados y no se pisen entre si.

Nótese que escribo modelo en minúsculas, indicando que es una variable, porque realmente se crea desde un principio en memoria, desde que se carga el js. Es lo que se conoce como Eager initialization, o de inicialización impaciente, y aunque tiene la ventaja de estar creado desde un principio, tiene la desventaja de que si no se usa consume unos recursos que no utilizamos. Si el objeto es muy costoso de crear, puede que ralentice el inicio del programa. Veremos mas adelante como crear un Singleton Lazy Initialization, o de inicialización perezosa (siempre me ha hecho mucha gracia este nombre ;).