|

Resaltar filas en tablas mediante Javascript

ByLuis

A la hora de mostrar tablas, un modo de presentación muy recomendable es resaltar las filas alternas como por ejemplo hace la lista de actualizaciones de Bitacoras.com consiguiendo así una mayor facilidad a la hora de leer los datos. Para ello, se suelen usar un estilo para las filas pares.

tr.par {
background: [color];
}
...
<tr class="par">
...
</tr>
...

Si la tabla se genera de forma dinámica, ya sea mediante Javascript o con PHP, JSP, … esto puede ser una acción bastante sencilla, tan solo tendremos que mirar en el bucle si el contador es par y colocar el class=”par”. Pero si la tabla es estática, puede suponer un trabajo un poco pesado, ir buscando todos los <tr> y escribir la clase. Siguiendo la Ley del Mínimo Esfuerzo, escribiremos la tabla sin modificar y luego ejecutaremos un script que modifique las filas pares automáticamente.

  function transformar() {
var tablas = document.getElementsByTagName("TABLE");
for (var i=0; i<tablas.length; i++) {
for (var j=0; j<tablas[i].rows.length; j++) {
if (j%2 == 0) {
tablas[i].rows[j].className = "par";
}
}
}
}

Ejemplo

Similar Posts

|

Botones: Distintas formas de enviar un formulario

ByLuis

input-image.gif Existen distintas formas de enviar los datos de un formulario a la aplicación web que se encarga de procesar la información. Todos los métodos son igualmente válidos, y va según los gustos usar unos u otros.

Los formularios dentro de HTML disponen de sus propios elementos para enviar los datos al formulario. El elemento en cuestión es el input, el cual según sea su atributo type, podemos enviar los datos directamente con el elemento submit o podemos reiniciar los valores de los elementos del formulario con el botón reset.

<input type="submit" value="Enviar" />
<input type="submit" value="Reiniciar" />

En los formularios de Sentido Web usamos los elementos input con el type=”imagen”. Este elemento usa una imagen como elemento submit, devolviendo la posición x e y de la imagen donde se ha producido el evento:

<input name="preview" type="image" align="top" value="Revisar" src="http://sentidoweb.com/i/bt/bt-revisar.gif" />
<input name="post" type="image" align="top" value="Publicar" src="http://sentidoweb.com/i/bt/bt-publicar.gif" />

Cuando se usa esta posibilidad, se enviarán dos parámetros al script usando el texto que hayamos usado en el atributo name, se le añade un _x para la coordenada x y un _y para la coordenada y, en el caso de Firefox también manda el parámetro sin sufijo. En el caso anterior, para saber cual de los dos se ha pulsado, se comprueba si hay parámetro preview_x o preview_y para el primer caso y post_x o post_y para el segundo caso.

Siguiendo con el elemento input, podemos usar el botón (type=”button”), pero habrá que añadirle el evento onclick para que haga el submit.

<input type="button" value="Enviar" onclick="document.forms[0].submit()" />

Otra forma distinta es mediante el uso de un enlace, en el href o en el onclick se deberá escribir el código Javascript necesario para el envío del formulario:

<a href="javascript:document.forms[0].submit()">Enviar</a>

Y por último, pero no por ello menos importante ;), mediante la pulsación de la tecla intro en una de las cajas del formulario. Esto lo realizan normalmente los navegadores cuando dentro de un formulario hay alguna forma estándar de hacer el submit, pero en el caso de que no queramos poner botón de submit, tendremos que ejecutar el siguiente código en el evento onkeypress de la caja:

<input name="nombre" onkeypress="if (event.keyCode == 13) document.forms[0].submit()"/>
|

Efecto fadding como en Flash con jQuery

ByLuis

Un efecto llamativo que se suele hacer con Flash es realizar una transición entre dos imágenes cuando se posiciona sobre ella.
fadding.png
El efecto es sencillo, disponemos de una cabecera (H1) en el que hay un elemento con posicionamiento absoluto y que contiene la imagen final, y un enlace (el que se suele usar para ir al home) que tiene la imagen original mediante estilos.
El proceso es el siguiente: cuando se posiciona el ratón sobre el enlace se crea efecto fadeout y cuando se sale se crea el efecto fadein. Ambos efectos se hacen con tiempo de retardo para dar continuidad.
Todo el código en el post original.
Creating a fading header
Vía / CSS Globe

Hapi.js + Vue.js empezando con las routes

Hapi.js + Vue.js empezando con las routes

ByLuis

Empezamos a mostrar contenido, hasta ahora solo mostraba un error 404 cuando se accedía a la URL del servidor.

Ahora vamos a añadir una route simple que muestre un objeto JSON cuando se acceda a la home. Recordad que la parte del servidor solo va a devolver respuestas JSON que tratará el frontend.

Usaremos plugins para tratar todas las rutas que incluiremos en glue. En este ejemplo tan solo añadiremos un route al server que devuelva un mensaje:

const Config = require( '../config' );

const websiteName = Config.get( '/website/name' );

const register = function( server, serverOptions ) { // eslint-disable-line
	server.route( {
		method: 'GET',
		path: '/',
		options: {
			tags: [ 'api', 'home' ],
			description: 'Server home',
			notes: 'Server home',
			auth: false,
		},
		handler: function( request, h ) { // eslint-disable-line
			return {
				message: `Welcome to ${ websiteName }`,
			};
		},
	} );
};

module.exports = {
	name: 'api-home',
	dependencies: [],
	register,
};

Ahora solo falta añadir el plugin en el manifest.js

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

Puedes bajarte el código aquí

Funciones en Javascript

ByLuis

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

| | |

Laboratorio: búsqueda y reemplazo masivo en ficheros

ByLuis

Debido a la compra de Ideasapiens.com y para no perder el contenido actual, Jose Luis Antunez ha querido migrarlo a ideasapiens.blogsmedia.com.

El problema que se encontró fue tener que editar del código fuente de cada documento web la secuencia de texto www.ideasapiens.com a ideasapiens.blogsmedia.com. De esa forma los enlaces apuntarían al subdominio y accesos internos correspondientes donde ahora se alojarán los contenidos.

Para realizar esa búsqueda y reemplazo masivo, antes de pensar en alguna aplicación de escritorio que lo realizara, pensamos en un script para la shell de Linux que con una simple línea se pudiera hacer. Bueno, tan simple no nos resultó y gracias a la ayuda de Dani lo pudimos sacar (teníamos la shell un tanto oxidada).

find . -type f -name "*.php" -exec sed -i s/www\.ideasapiens\.com/ideasapiens\.blogsmedia\.com/g {} \;

Viendo las complicaciones que estábamos teniendo con la shell (por una tontería, dicha sea la verdad), Gabriel nos pasó el siguiente PHP, obteniendo el mismo resultado.

Read More “Laboratorio: búsqueda y reemplazo masivo en ficheros”

Manejar y generar excepciones en Javascript

ByLuis

Los que hemos trabajado con Java estamos acostumbrados a tratar y lanzar excepciones para controlar los errores, algo que en Javascript no es muy común, pero en librerías algo elaboradas podría ser muy útil.

// Clases de errores
function DivisionByZeroError() {
    this.name = "DivisionByZeroError";
}
function DivisionByStringError() {
    this.name = "DivisionByStringError";
}
// Funcion que devuelve un error
function divisionCanFail(a, b) {
    if (b == 0) {
        throw new DivisionByZeroError();
    }
    if (typeof b == "string") {
        throw new DivisionByStringError();
    }
    return a / b;
}
// Funcion de test
function decoratedDivision(a, b) {
    try {
        alert(divisionCanFail(a, b));
    } catch (error if (error.name == "DivisionByZeroError")) {
        alert("A division by zero...");
        alert("Exception class: " + error.name);
    } catch (error if (error.name == "DivisionByStringError")) {
        alert("Exception class: " + error.name);
    }
}

decoratedDivision(5, "isThisANumber?!");
decoratedDivision(5, 0);

Exceptional JavaScript