Entradas con la etiqueta ‘javascript’

Namespaces en JavaScript

Publicado por Iván Gajate el 30 de octubre de 2012 en JavaScript | 1 comentario »

Como ya vimos cuando explicamos los patrones de diseño, todas las variables que creemos fuera de una función van al ámbito global (root en Flash).

Para evitar que nuestras clases entren en conflicto con otras con el mismo nombre podemos crear un objeto donde meteremos todas nuestras clases, un Namespace.

var YXQN = YXQN || {};

Esto viene a decir: «La variable YXQN es igual a YXQN si existe, y si no, creo un objeto vacío»

Con esto nos aseguramos que solo exista una sola vez para todo nuestro proyecto. Yo lo suelo guardar en un archivo independiente que importo en el html desde el principio.

<script type="text/javascript" src="js/YXQN.js"></script>

Ahora nuestras clases las definiremos dentro de nuestro namespace:

YXQN.Cuadrado = function(){
	...
};

Y para crear un nuevo objeto:

var miCuadrado = new YXQN.Cuadrado();

Programación Orientada a Objetos en JavaScript

Publicado por Iván Gajate el 25 de octubre de 2012 en Desarrollo Web, JavaScript | 3 comentarios »

Para poder hacer una programación orientada a objetos en JavaScript primero tenemos que entender que TODO lo que declaremos se guarda en el espacio global, es como si en Flash lo guardásemos todo el en root (!!).
Por eso para evitar problemas vamos a meter nuestro código dentro de una función, como si fuese una clase de ActionScript (al ser una función no se ejecutará hasta que la llamemos por primera vez).
Además, podemos guardar esta «clase» en una variable y de esta manera instanciarla tantas veces como queramos:

var Cuadrado = function(){
	alert("Soy un cuadrado!!");
};
 
var unCuadrado = new Cuadrado();
var otroCuadrado = new Cuadrado();
var untercerCuadrado = new Cuadrado();

 

Todas las variables que declaremos dentro de esa función no entrará en conflicto con ninguna variable de fuera, y a su vez, desde fuera se podrá preguntar por las variables de dentro:

var unNumero = 0;
 
var Cuadrado = function(){
	this.unNumero = 5;
	var otraVariable = "Foo";
};
 
var unCuadrado = new Cuadrado();
 
alert(unNumero); // 0
alert(unCuadrado.unNumero); // 5
alert(unCuadrado.otraVariable); // undefined

En este ejemplo «declaramos» la variable unNumero en «this«, que hace referencia al propio objeto creado. De hecho, ese this es lo que devuelve la función cuando hacemos un new Cuadrado() y lo que se almacena en la variable unCuadrado.
Todo lo que no esté declarado en this se ejecuta dentro de la función pero no es accesible desde fuera como en el caso de otraVariable.

Sin embargo, podemos devolver cualquier cosa, por ejemplo un objeto creado por nosotros:

var Cuadrado = function(){
	var _api = {};
	_api.unNumero = 5;
 
	var otraVariable = "Foo";
 
	return _api;
};
 
var unCuadrado = new Cuadrado();
 
alert(unCuadrado.unNumero); // 5
alert(unCuadrado.otraVariable); // undefined

Hemos creado un objeto vacío llamado _api que devuelve la función, y con él todas las variables (y métodos) que hayamos declarado dentro. El resto de variables siguen teniendo como ámbito nuestro nuevo objeto pero no son accesibles desde fuera de este.
¡Ya tenemos métodos públicos y privados! 🙂
En efecto, con este sistema es fácil encapsular nuestros métodos privados para hacer mas robusta nuestra clase, y solo dejar visible ciertos métodos públicos que queramos (de ahí el nombre de la variable 🙂

Solo nos queda un detalle: debido a la «peculiar» manera en que se generan los objetos en JavaScript (magia dice Isra 😉 es mas que aconsejable utilizar un método init declarado al principio de nuestra clase y llamado justo antes del final. De esta manera nos aseguramos que cuando accedemos al objeto éste está perfectamente montado y podemos acceder a sus variables y métodos sin problemas.
Quedaría tal que así:

var Cuadrado = function(){
	var _api = {};
	_api.unNumero;
 
	function init(){
		_api.unNumero = 5;
	}
 
	// Este metodo es publico
	_api.metodoPublico = function(){
		alert("Soy un Cuadrado!");
	}
 
	// Metodo privado, solo accesible desde dentro del objeto
	function metodoPrivado(){
		//
	}
 
	init();
	return _api;
};
 
var unCuadrado = new Cuadrado();
 
alert(unCuadrado.unNumero); // 5
unCuadrado.metodoPublico(); // Soy un Cuadrado!

Esto (menos las tres ultimas lineas) lo guadamos en un archivo independiente llamado Cuadrado.js, lo importamos en nuestro html con la etiqueta script

<script type="text/javascript" src="js/Cuadrado.js"></script>

y ya tenemos nuestra estructura de clases lista para darle caña! 🙂

PD: Mi agradecimiento a Isra y Javi que han tenido la paciencia de enseñarme esta forma de trabajar que tanto me reconforta… 😉

SWFObject 2.1

Publicado por Iván Gajate el 29 de octubre de 2008 en AS2, AS3, Desarrollo Web, Flash, Tutoriales | 12 comentarios »

Hay una nueva versión de esta librería de JavaScript que sirve para incrustar contenido flash en nuestro html.

Como ya hemos visto en Flash 99% bueno, esta forma de hacerlo nos ofrece varias ventajas:

  1. Es muy fácil de insertar, mas sencillo que incluir las etiquetas object, es una solución respetuosa con los estándares, y es común para todos los navegadores.
  2. Evita el tener que hacer clic sobre el objeto flash para activarlo en las últimas versiones de Internet Explorer.
  3. Nos permite incluir un contenido "alternativo" accesible para usuarios que no tengan flash player o naveguen con JavaScript deshabilitado.
  4. Google y otros motores de búsqueda son capaces de leer e indexar ese contenido alternativo perfectamente.

 

Ahora, con el SWFObject, ponemos una capa (div) con el contenido no-flash o alternativo (por supuesto podemos dejarla vacía). Esta capa, será sustituida por el contenido flash, de forma totalmente transparente para el usuario.

Eso si, tenemos que darle un id a la capa para que el SWFObject sepa dónde queremos que ponga nuestro flash.

<div id="miFlash">Texto Alternativo</div>

Ahora, en la cabecera del html, incluimos la librería del SWFObject, y hacemos la llamada para que se incluya el flash.

<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript">
	//swfobject.embedSWF(swfUrl,      id,    width, height, version)
	swfobject.embedSWF("test.swf", "miFlash", "300", "120", "8.0.0");
</script>

Leer el resto de esta entrada

Flash 99% Bueno

Publicado por Iván Gajate el 19 de octubre de 2008 en Accesibilidad, Flash, Tutoriales | 15 comentarios »

Al menos hoy por hoy sí.

Y es que "eso no se puede hacer" y "yo no lo se hacer" son dos cosas muy distintas, y muchas veces por desconocimiento nos creemos todo lo que nos dicen.

Cierto es que Flash a día de hoy no lo pueden leer los motores de búsqueda. Dicen que sí, que pueden leer los textos estáticos y los enlaces y bla, bla, bla… pero vamos, que si preguntas a alguien que sepa del tema te confirmará que una página hecha 100% en flash no se puede posicionar bien (o al menos yo no lo se hacer, jeje)

¿Y entonces los que vivimos de esto que hacemos?

Pues buscarnos la vida. Pero ya hay gente por ahí que ha mirado mucho este tema y se han llegado a algunas soluciones muy buenas que paso a resumir aquí:

La idea es bastante sencilla, todo lo que sea flash no lo ve un motor de búsqueda. Ni JavaScript. Y eso en este caso nos viene bien. Si sustituyo el contenido HTML por el contenido flash con JavaScript y el motor no puede leer JavaScript, tampoco se hace la sustitución, y se queda con el contenido de texto, que si pueden leer los buscadores.

Dicho de otra manera, es como cuando hace 5 años entrabas en una página web y te encontrabas dos botones, versión Flash y versión HTML decían. Es lo mismo, pero ahora la elección la hago yo por defecto: Si no tienes JavaScript te muestro la versión HTML y si lo tienes, te muestro mi súper-mega-página-100%-flashhhhhh 🙂

Leer el resto de esta entrada