Javascript: mostrar el contenido de un objeto

0 - , , - 03/02/2012 19:30:08

Para imprimir el contenido completo de un objeto, en Firefox, podemos utilizar la siguiente instrucción:

alert(object.toSource());

También se puede acceder a todos los elementos de un objeto mediante un bucle foreach. La siguiente función ImprimirObjeto monstrará un alert() que muestra todas las propiedades y los valores respectivos.

function ImprimirObjeto(o) {
  var salida = '';
  for (var p in o) {
    salida += p + ': ' + o[p] + '\n';
  }
  alert(salida);
}

Por ejemplo:

<!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=utf-8" />
<title>imprimir objeto</title>
<script type="text/javascript">
function ImprimirObjeto(o) {
  var salida = '';
  for (var p in o) {
    salida += p + ': ' + o[p] + '\n';
  }
  alert(salida);
}
var Objeto = {'algo1': 1, 'algo2': 2};
</script>
</head>
<body>
<a href="javascript:ImprimirObjeto(Objeto);">mostrar</a>
</body>
</html>

Ver ejemplo en funcionamiento » »

Caman.js

0 - , , - 28/01/2012 08:59:22

Caman.js es una librería de javascript que nos permite la manipulación de imágenes usando el objeto canvas de HTML. Cabe destacar que es una librería independiente y que también puede ser usada junto a otras librerías como jQuery o Mootools sin problema.

Caman.js » »

validate.js

0 - , , - 23/10/2011 00:00:00

Validate.js es un pequeño script para la validación de formularios cuyo tamaño apenas supera 1Kb en su versión comprimida. Otros puntos a tener en cuenta es que no depende de otras librerías como jQuery o Mootols y que se pueden personalizar los mensajes. Un ejemplo sencillo:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Validate JS</title>
<script type="text/javascript" src="validate.min.js"></script>
</head>
<body>
<div id="errores"></div>
<form method="post" action="#" name="formulario">
        <label for="req">Campo Obligatorio:</label>
        <input id="req" name="req">
        
        <label for="alphanumeric">Campo alfanumérico:</label>
        <input id="alphanumeric" name="alphanumeric">
        
        <label for="password">Password:</label>
        <input type="password" id="password" name="password">
        
        <label for="password_confirm">Confirmar Password (La contraseña debe coincidir):</label>
        <input type="password" id="password_confirm" name="password_confirm">
        
        <label for="email">Email:</label>
        <input id="email" name="email">
        
        <label for="minlength">Longitud mínima (min. 8 caracteres):</label>
         <input id="minlength" name="minlength">
        
        <button name="submit" type="submit" >Enviar</button>
    </form>
 <script type="text/javascript">
var validator = new FormValidator('formulario', [{
    name: 'req',
    display: 'Campo Obligatorio',    
    rules: 'required'
}, {
    name: 'alphanumeric',
    display: 'Campo alfanumérico',  
    rules: 'alpha_numeric'
}, {
    name: 'password',
    rules: 'required'
}, {
    name: 'password_confirm',
    display: 'Confirmar Password',
    rules: 'required|matches[password]'
}, {
    name: 'email',
    rules: 'valid_email'
}, {
    name: 'minlength',
    display: 'Longitud mínima',
    rules: 'min_length[8]'
}], function(errors, events) {
    if (errors.length > 0) {
        alert("errores");
		var el = document.getElementById("errores");
		el.innerHTML = errors.join('<br />');
    }
});
// Validate JS también permite establecer mensajes personalizados
validator.setMessage('required', 'El campo %s es obligatorio.');
</script>
</body>
</html>

Ver ejemplo en funcionamiento » »

validate.js » »

Javascript: Mostrar código fuente de la página

0 - , - 06/10/2011 12:59:50

El siguiente script habilita una forma en que los visitantes de tu página web pueden ver el código fuente. Es útil para aquellos sitios web que puedan estar enseñando desarrollo web y de esta forma ofrecer una forma fácil de acceder al código. La función es:

function VerFuente() {
		window.location = "view-source:" + window.location.href;
}

Un ejemplo de uso podría ser:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ver Código Fuente</title>
<script language=JavaScript>
function VerFuente() {
		window.location = "view-source:" + window.location.href;
}
</script>
</head>
<body>
	<p><a href=javascript:VerFuente()>Ver código fuente</a></p>
</body>
</html>

Bookmarkleter

0 - - 07/05/2011 16:12:40

Esta herramienta crea bookmarklets a partir de código JavaScript. Las acciones que realiza son las siguientes:

  • Elimina los saltos de línea, tabuladores y espacios adicionales
  • Codifica caracteres especiales: [espacio],%, ", <,>, #, @,etc.
  • Coloca todo el código en una función contenedora (si esto no se ha hecho ya)

Bookmarkleter » »