3
Mar
aNieto2k hace 188 días en: Programacion, javascript, webdev
Uno de los problemas con los que nos encontramos con Javascript es la cantidad de líneas de código que hemos de escribir para trabajar con DOM, pese a haber frameworks que se encargan de que nuestro código sea más ligero, no siempre podemos disponer de este lujo.
La creación de elementos es algo bastante laborioso, y por ello los frameworks ponen especial empeño en mejorar este punto ya que es algo que cada vez más usamos en nuestros scripts. createElements() es una función que facilita esta tarea sin necesidad de depender de un framework, 30 líneas que te ahorrarán 30.000.
La función
function createElements( args ) {
var el;
if( typeof(args) == "string" ) {
el = document.createTextNode(args);
} else if ( typeof(args) == "object" ) {
el = document.createElement( args.tag );
if ( args.attributes ) {
for ( i in args.attributes ) {
el.setAttribute(i, args.attributes[i]);
}
}
if ( args.style ) {
for ( i in args.style ) {
el.style[i] = args.style[i];
}
}
if ( args.children ) {
for ( var i = 0; i < args.children.length; i++ ) {
el.appendChild( createElements( args.children[i] ) );
}
}
}
return el;
}
Modo de empleo
var node = createElements({
tag: "div",
attributes: {
id: "google_link"
},
children: [
{
tag: "a",
attributes: {
href: "http://www.google.com"
},
style: {
textDecoration: "none",
fontWeight: "bold"
},
children: [
{
tag: "img",
attributes: {
src: "http://www.google.com/intl/en_ALL/images/logo.gif",
alt: "Google!",
title: "Google!",
border: "0"
},
style: {
width: "200px",
height: "200px"
}
},
{
tag: "br"
},
"Click here to go to Google!"
]
}
]
});
document.body.appendChild(node);
Actualización
Una pequeña modificación, para hacerlo más cómodo.
HTMLElement.prototype.add = function(args) {
var el;
if( typeof(args) == "string" ) {
el = document.createTextNode(args);
} else if ( typeof(args) == "object" ) {
el = document.createElement( args.tag );
if ( args.attributes ) {
for ( i in args.attributes ) {
el.setAttribute(i, args.attributes[i]);
}
}
if ( args.style ) {
for ( i in args.style ) {
el.style[i] = args.style[i];
}
}
if ( args.children ) {
for ( var i = 0; i < args.children.length; i++ ) {
el.appendChild( this.add( args.children[i] ) );
}
}
}
this.appendChild(el);
}
//USO:
$("header").add({...});
23
Dic
aNieto2k hace 259 días en: Programacion, estandares, javascript, web, webdev
Cuando detectamos un error en nuestras aplicaciones, solemos bajar un nivel y dirigirnos directamente al código para ver por que y por donde está fallando.
Para ello solemos recurrir a herramientas que nos ayudan a visualizar el código de una forma más cómoda y directa como Firebug, o algunos de sus versiones para otros navegadores (Companion.js, Opera Developer Console, Inspector Web, …).
Aunque lamentablemente no siempre tenemos a mano una de estas herramientas, y tenemos que mirar el código completo desde el propio navegador o editor de texto. Para evitar esto, nacen aplicaciones como xRay, que nos permite integrarlas como un simple marcador y nos permite conocer las propiedades básicas de los elementos que componen una página web.
Instalación
- Guardamos esta dirección como un marcador en nuestro navegador.
- Lo lanzamos en cualquier página
- Hacemos click sobre cualquier elemento de la página
Compatibilidad
En la página de la aplicación, aseguran que ha sido probado en Internet Explorer 6.0, y todas las versiones basadas en Webkit y Mozilla (Safari, Firefox, Camino,…)
16
Nov
aNieto2k hace 296 días en: Programacion, javascript, webdev
La creación de elementos DOM en nuestro Javascript suele ser un calvario si necesitamos crear una gran cantidad de elementos. Pero gracias a aplicaciones como Easy DOM Creation, esto se va a acabar.
Easy DOM Creation, es un plugin para jQuery y Prototype, portado del famoso MochiKit.DOM, nos permite abstraernos de lo laborioso de crear elementos DOM y añadirlos a nuestra aplicación. Usando un sistema bastante lógico y visual, consiguen que crear un tabla con sus correspondientes filas y columnas sea algo simple y compacto.
var table =
$.TABLE({ Class:"MyTable" },
$.TBODY({},
$.TR({ Class:"MyTableRow" },
$.TD({ Class:"MyTableCol1" }, 'howdy' ),
$.TD({ Class:"MyTableCol2" },
'Link: ',
$.A({ Class:"MyLink", href:"http://www.example.com" },
'example.com'
)
)
)
)
);
[Descargar]
8
Nov
aNieto2k hace 304 días en: Programacion, javascript, web, webdev
Hace ya mucho tiempo que vengo usando DebugBar, pero nunca había comentado nada de ello. Y ayer Dehiv, me lo recordó.
Buscando imagenes para poner el post y ahorrarme tener que hacerlas con el paint he llegadoa la página oficial del proyecto, y cual ha sido mi sorpresa al enterarme de que Companion.js es la versión lite de Debugbar.
Carácterísticas
- DOM Inspector
- HTTP Inspector
- Javascript Inspector y Consola Javascript
- HTML Validator
- Redimensión de la página
- Permite mostrar alerts con los errores
- Selector de Color
- Enviar capturas de pantalla por correo
- Visualización de Cookies
Instalación
- Descargamos la última versión
- Seguimos los pasos de la instalación
- Activamos la Toolbar desde el menú de Internet Explorer (Ver > Barras de Herramientas)
7
Nov
aNieto2k hace 305 días en: Programacion, javascript, webdev
Todas las páginas web se componen de un esqueleto formado por HTML, y si usamos una metáfora que me acabo de inventar, el DOM sería el alma de este esqueleto. Ya que es algo que sabemos que está ahi, pero no podemos ver a simple vista. Usando herramientas como Firebug o Companion.js para IE podemos ver las propiedades que cada elemento nos ofrece.
En SlayerOffice, publican una alternativa bastante interesante para la mayoría de navegadores (Firefox, Netscape 8, Opera 7.5 e Internet Explorer).
¿Como instalarlo?
- Añade el este link a tus marcadores
¿Como usarlo?
- Estando en cualquier página hacemos click sobre el marcador guardado anteriormente.
- Este generará un layer flotante que irá mostrando la información sobre el elemento por el que pasamos con el ratón.
