Interesante tutorial que nos indica cómo usar los objetos en Javascript, ya sean los objetos predefinidos, el uso del operador new, objetos literales, su declaración, la encapsulación, la herencia, la propiedad prototype para añadir métodos y atributos a un objeto, poliformismo, … explicado con ejemplos y muy útil para aquellos que empiezan y para aquellos que quieran mejorar su código (que a todos nos viene bien).
Object-Oriented Javascript
VÃa / Digg
Ayer nos preguntaban cómo cargar combos según lo que se seleccione en otro combo, y aunque no me quedó muy claro la duda que tenÃa, pues para intentar ayudarle, voy a explicar cómo hacerlo mediante tres posibilidades.
Primeramente explicaremos cómo hacerlo mediante el uso de iframes ocultos. SÃ, no es nada web 2.0, pero no a todo el mundo se le da bien el desarrollo web, o no le gusta el uso de Ajax, o simplemente, como me pasa a mÃ, no nos dejan usar Ajax en los desarrollos del cliente (¡vete a saber por qué!).
Después lo haremos mediante Ajax (¡viva la web 2.0!), pero instanciando nosotros mismos el objeto XMLHttpRequest, para que los conceptos de Ajax no se pierdan dentro del uso de librerÃas, es importante conocer la base para luego usar una librerÃa que te lo haga todo más fácil.
Y por último, ya no solo en plan web 2.0, sino en plan lo último de lo último, lo haremos usando la librerÃa Prototype. Que la verdad sea dicha, no se trata de reinventar la rueda.
Muchas de las veces, cuando estamos realizando páginas web y no usamos un editor HTML completo, nos puede ocurrir que no nos acordamos de una etiqueta HTML, de su utilización o de sus atributos.
Si te encuentras en esa situación, HTML Playground puede serte de mucha utilidad, ya que te muestra todas las etiquetas HTML, con su descripción y un código de ejemplo, el cual se puede visualizar y modificar.
HTML Playground
VÃa / Ajaxian
Crear ventanas flotantes en HTML es una de las cosas más difÃciles de realizar en una página web. En alguna ocasión hemos hablado de cómo realizar ventanas con HTML y Javascript.
En este caso se trata de una extensión para Prototype que con unas simples lÃneas de código seremos capaces de crear nuestras ventanas de forma rápida.
Para usarlo primero nos deberemos crear la estructura HTML:
<div id="page">
<div id="widget_col_0"></div>
<div id="widget_col_1"></div>
<div id="widget_col_2"></div>
</div>Con sus CSS:
#page {
margin: 10px auto;
}
#widget_col_0 {
float:left;
width: 30%;
}
#widget_col_1 {
width: 50%;
float:left;
}
#widget_col_2 {
float:left;
width: 20%;
}
Instanciar la clase:
var portal = new Xilinus.Portal("#page div")Y por último añadir el contenido:
portal.add(new Xilinus.Widget(), 0)
// O con tÃtulo y contenido
portal.add(new Xilinus.Widget().setTitle("Widget Title").setContent("El texto que sea"), 1);VÃa / WebAppers
Sencillo pero efectivo método para paginar contenidos mediante Javascript. Puede ser muy útil cuando el diseño no permite grandes espacios para contenidos.
El funcionamiento es muy sencillo, se ocultan los contenidos y mediante los botones de paginación se van mostrando. La verdad es que no serÃa necesaria esta librerÃa, porque como ya he dicho el método es muy sencillo y nosotros mismos lo podrÃamos implementar, incluso mejorar, porque usa la librerÃa cssQuery unicamente para obtener los elementos, mientras que podrÃamos hacerlo nosotros mismos con un getElementsByTagName, si es que nuestras necesidades no son obtener elementos mediante sus estilos, rel u otras cosas.
Javascript pagination in yer face
En muchos sitios web de almacenamiento de imágenes se nos permite retocar las imágenes. Hoy vamos a explicar como recortar una imagen directamente desde una página web.
Para ello tenemos que crearnos una página web que nos permita seleccionar la zona de la imagen que queremos recortar y de un script PHP que usando la librería GD recortará la imagen y la devolverá en formato PNG.
Read More “Laboratorio: Recorta imágenes dinámicamente con PHP y HTML”
Uno de los problemas con los que nos solemos encontrar cuando programamos en Javascript es el modo en el que obtenemos los elementos HTML que deseamos tratar, a parte del conocido getElementById(), existen otros, algunos estándar y otros desarrollados por otra gente.
Una interesante lista con todos ellos reunidos: getElementById (W3C, Prototype JavaScript framework), getElementsByName (W3C), getElementsByTagName (W3C), getElementsByTagNames (Peter-Paul Koch), getElementsByClassName (Prototype JavaScript framework, Stuart Colville, Robert Nyman, Jonathan Snook), getElementsBySelector (Dean Edwards, Olivier Gambier, Prototype JavaScript framework 1.0.5rc2, Simon Willison, jQuery, Joe Hewitt), getElementsByAttribute (Robert Nyman, David “liorean” Andersson, Jack Sleight) y getElementsByAnything (Matthew Pennell)
VÃa / Menéame