Javascript

JSINER: objetos y herencia en Javascript

ByLuis May 8, 2007

JSINER es una librerÃa de Javascript que pretende facilitar la programaciÃ³n orientada a objetos y la dependencia en la gestiÃ³n de scripts en ficheros externos.

Para el tema de la herencia, el autor define una herencia lazy, cuyas caracterÃsticas son las siguientes:

Tiene las mismas caracterÃsticas que la herencia mediante prototype.
No es necesario orden alguno en la declaraciÃ³n de los scripts externos.
En la mayorÃa de los casos la carga del HTML es mÃ¡s rÃ¡pida, ya que los scripts se cargan solo en el momento en el que se necesitan.
Las dependencias se declaran en un modo mÃ¡s especÃfico y las dependencias entre clases solo en scripts concretos.
Los scripts solo se cargan cuando se necesitan.

JSINER

css | Javascript

GlassBox: bordes transparentes mediante Javascript y CSS

ByLuis February 28, 2008

GlassBox es una librería Javascript que permite añadir bordes transparentes, con transparencias y con sombreado. Es muy sencillo de usar, admite skins, bien documentado y funciona en IE 6, Firefox 2, Opera 9 y Safari 3.

GlassBox

Vía / CSS Globe

AI/Usabilidad | AJAX | Javascript

Laboratorio: desplegar mapa del sitio mediante Ajax

ByLuis January 18, 2007

Vamos a explicar un pequeÃ±o script para mostrar en una capa el mapa del sitio web usando Ajax (en este caso la librerÃa jQuery).

Un efecto parecido lo podemos encontrar en periÃ³dicos online para mostrar las diferentes secciones que se pueden visitar. Por ejemplo lo podemos ver en elmundo.es (en la cabecera) y en elpais.com (en el pie de pÃ¡gina).

Se trata de que cuando se pasa el ratÃ³n sobre el link, se muestra un menÃº con las secciones del periÃ³dico (mapa del sitio en nuestro caso).

Como hemos explicado en otras ocasiones de cÃ³mo usar Ajax, esta vez vamos a utilizar la librerÃa jQuery para facilitar la labor. El que sea un mapa del sitio es debido a que de cara a SEO los buscadores indexan mÃ¡s facilmente nuestro sitio.

TambiÃ©n hemos pensado en la accesibilidad, para ello el enlace nos lleva a una pÃ¡gina que muestra el mapa del sitio. Esta pÃ¡gina que deberÃ¡ ser dinÃ¡mica, lo que hace es incluir en la parte del HTML donde se muestra la informaciÃ³n principal (suponiendo que hay navegaciÃ³n y paneles laterales) el contenido de otro archivo, que es el que tiene el mapa del sitio. Este Ãºltimo archivo es el mismo que mediante Ajax se carga en la capa que se muestra en el mouseover del enlace.

Supongamos que tenemos dentro de nuestra pÃ¡gina, el enlace en cuestiÃ³n y una capa que estarÃ¡ oculta inicialmente mediante CSS:

<p><a href="paginasecciones.php" id="secciones">Secciones</a></p>
<div id="marco"></div>

TambiÃ©n disponemos de dos pÃ¡ginas, una que muestra el mapa del sitio (secciones.html) y otra que incluye a la primera dentro de su contenido (paginasecciones.php), en cuyo cÃ³digo deberÃa haber la siguiente funciÃ³n:

<?php require('secciones.html'); ?>

Ahora tan solo nos falta en el onload del window aÃ±adir la funcionalidad necesaria para ocultar la capa, y aÃ±adir al enlace el evento onmouseover para cargar el contenido de la capa y mostrarla cuando se pose el ratÃ³n en el enlace, y el evento onmouseout para ocultar la capa cuando salgamos del enlace.

window.onload = function() {
var obj = $("div#marco");
obj.hide();
$("a#secciones").mouseover(
function() {
var capa = $("div#marco");
// Para evitar recargar la pagica cada vez que se muestra
if (!capa.attr("cargado")) {
capa.load("secciones.html");
capa.attr({cargado: true});
}
capa.show().slideDown("slow");
} );
$("a#secciones").mouseout(
function() {
var capa = $("div#marco");
capa.slideUp("slow");
} );
}

El cÃ³digo es muy sencillo, lo Ãºnico necesario de explicar para entenderlo es lo siguiente:

Cuando se carga el contenido de la capa, primero se comprueba si existe un atributo propio que hemos aÃ±adido a la capa, si no existe ese atributo entonces cargamos el contenido mediante Ajax y luego creamos ese atributo para asÃ no tener que volver a cargar otra vez el contenido cuando pasemos el ratÃ³n sobre el enlace.
La funciÃ³n $ nos permite obtener un elemento HTML, en el caso de $(“div#marco”) nos devuelve el elemento DIV cuyo id es “marco”.
hide() oculta un elemento HTML.
show() muestra un elemento.mouseover(funcion) aÃ±ade la ejecuciÃ³n de la funciÃ³n en el evento mouseover de un elemento.
mouseout(funcion) aÃ±ade la ejecuciÃ³n de la funciÃ³n en el evento mouseout de un elemento.
attr(texto) consulta el valor del atributo pasado como parÃ¡metro de un elemento.
attr(cÃ³digo) aÃ±ade el atributos y valores a un elemento.
slideDown despliega una capa hacia abajo.
slideUp repliega una capa hacia arriba.

CÃ³digo fuente

Javascript

Funciones en Javascript

ByLuis October 13, 2009October 14, 2009

Normalmente el uso que hacemos de las funciones en javascript es bastante sencillo, pero en algún otro momento puede que necesitemos un uso más avanzado.

El tutorial que os paso explica detalladamente todos los usos que podemos realizar de funciones. Lo que yo desconocía era el uso de callee, que tiene un puntero a la función que se está ejecutando en ese instante, fundamental para la recursividad:

alert((function(n){ if(n <= 1){return 1;}else{return n*arguments.callee(n-1);}})(10));

Functional Javascript

Javascript

Hapi.js + Vue.js modelos mejorados

ByLuis June 25, 2019June 25, 2019

En este caso voy a explicar cómo añadir una ruta en el backend para gestionar usuarios.

Antes de nada vamos a instalar tres paquetes:

@hapi/joi para validar los datos de entrada
@hapi/boom para mostrar errores HTTP de forma sencilla
bcrypt para encriptar la contraseña

npm i @hapi/joi
npm i @hapi/boom
npm i bcrypt

Tendremos que añadir la ruta al manifest de glee

const manifest = {
	server: {
		port: Config.get( '/server/port' ),
	},
	register: {
		plugins: [
			{
				plugin: './api/home',
			},
			{
				plugin: './api/user',
			},
			{
				plugin: './plugins/db',
				options: Config.get( '/db' ),
			},
		],
	},
};

Ahora solo falta crear el controlador para las rutas de usuarios, dos en este caso:

GET /user/[user] para recuperar un usuario
PUT /user para crear un nuevo usuario

Lógicamente aún no hay nada de autenticación, por lo que cualquiera puede crear un usuario realizando una llamada PUT a la URL indicando userName, email y password.

Para comprobar la validez de los datos introducidos, usaremos joi. Usando las opciones de la ruta, indicaremos las reglas que deberá cumplir cada parámetro introducido. Así, para recuperar un usuario, se comprobará que user sea string, alfanumérico y que tenga una longitud de 3 a 20 caracteres:

validate: {
	params: {
		user: Joi.string().alphanum().min( 3 ).max( 20 ),
	},
},

Así de fácil.

En el caso de comprobar los datos de entrada de la llamada PUT, en vez de usar params, usaremos payload:

validate: {
	payload: {
		userName: Joi.string().alphanum().min( 3 ).max( 20 ).required(),
		email: Joi.string().email().required(),
		password: Joi.string().min( 8 ).required(),
	},
},

Por último mostrar el código para crear un nuevo usuario. Primero se comprueba si existe un usuario con ese nickname o email. Si es así, se devuelve error usando boom, si no, se genera la contraseña encriptada (aquí no me he molestado mucho en ello, ya lo haré más adelante), y se crea el usuario usando el método create de moongose:

/**
 * Route handler
 *
 * @param {object} request
 * @param {object} h Hapi object
 * @returns {object}
 */
handler: async( request, h ) => { // eslint-disable-line
	try {
		// TODO: Add role
		const user = await User
			.findOne( {
				$or: [
					{ userName: request.payload.username },
					{ email: request.payload.email },
				],
			} )
			.exec();
		if ( user ) {
			return Boom.badData( 'User exists' );
		}
		const password = await bcrypt.hash( request.payload.password, Config.get( '/hash/PASSWORD_HASH' ) );
		const userData = Object.assign( {}, request.payload, { password } );
		const newUser = await User.create( userData );

		return newUser ?
			{
				response: true,
				message: 'User created',
				userId: newUser.id,
			} :
			Boom.boomify( {
				response: false,
				message: 'There was an error during user creation',
			}, { statusCode: 400 } );
	} catch ( error ) {
		return Boom.badImplementation( 'Error', { error } );
	}
},

Como último apunte, he modificado la configuración para que admita ficheros .env con los datos necesarios.

Como siempre te puedes bajar el código aquí

Javascript | Quicklinks

Animated Table Sort with REGEXP Friendly

ByLuis August 13, 2010

Animated Table Sort is a plugin that allows you to animatedly sort a table based on a column’s <td>s, or on the content/value of a child/descendant element within those <td>s. The various <td>s fly to their new homes, giving a nice …

Post original

Javascript

Foo Framework: framework javascript

ByLuis October 4, 2007

Foo Framework es un framework javascript realizado sobre Prototype que permite realizar aplicaciones RIA de forma sencilla.

Foo actÃºa como una mÃ¡quina virtual que traduce las etiquetas especiales de Foo a Javascript y lo enlaza con datos para crear aplicaciones web. Une la facilidad del HTML y el poder del Javascript para crear aplicaciones web complejas.

Veo una gran utilidad a este framework sobre todo para los casos en que en un proyecto existe un grupo de desarrolladores de pÃ¡ginas sin gran conocimiento de XHTML o Javascript, ya que su desarrollo es muy sencillo, con poco cÃ³digo se puede hacer mucho.

Por ejemplo, con este cÃ³digo se puede hacer una tabla ordenable:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sorting Table</title>
<script language="javascript" src="../scripts/prototype.js"></script>
<script language="javascript" src="../scripts/foo.js"></script>
<script language="javascript" src="../scripts/foo.interact.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"></link>
<script language="javascript">
var dsCatalog = new foo.XMLDataSet('../data/data.xml', {path:'CATALOG.CD'});
</script>
</head>
<body xmlns:f="http://foo.riiv.net/namespace">
<div id="catalog" f:datasource="dsCatalog" f:implement="Sort">
<table cellspacing="1" cellpadding="0" border="0">
<tr>
<th f:sort="{by:'TITLE'}">Title</th>
<th f:sort="{by:'ARTIST'}">Artist</th>
<th f:sort="{by:'COMPANY'}">Company</th>
<th f:sort="{by:'COUNTRY'}">Country</th>
<th f:sort="{by:'PRICE', type:'number'}">Price</th>
<th f:sort="{by:'YEAR', type:'number'}">Year</th>
</tr>
<tr f:each="i in this.data as cd" class="${i%2==0?'odd':'even'}">
<td>${cd.TITLE}</td>
<td>${cd.ARTIST}</td>
<td>${cd.COMPANY}</td>
<td>${cd.COUNTRY}</td>
<td>${cd.PRICE}</td>
<td>${cd.YEAR}</td>
</tr>
</table>
</div>
</body>
</html>

AdemÃ¡s Foo es modular, incluyendo una API para desarrolladores que permite crear tus propias etiquetas y plugins sin tener que modificar el core de la aplicaciÃ³n.

Foo Framework

Gracias DiarioTHC

Similar Posts