sábado, 18 de agosto de 2007

Objetos en Javascript 2/2

(Anterior: Objetos Javascript 1/2: crear objetos))

Si necesitamos que un objeto Javascript definido por nosotros mismos tenga métodos, tenemos varias opciones:

A. Podemos definir una función independiente que utilizaremos como método de nuestro objeto:

function datosUsuario(){
return this.login + ' ' + this.fecha_registro;
}

1. Caso de objeto literal:

var usu = {
login: "jcc",
fecha_registro: "20070818",
datosUsuario: datosUsuario
}

2. Caso de objeto definido con plantilla:

function Usuario(login, fecha_registro) {
this.login= login;
this.fecha_registro = fecha_registro;
this.datosUsuario = datosUsuario;
}

B. Podemos definir una función propia que utilizaremos como método de nuestro objeto:
1. Caso de objeto literal:

var usu = {
login: "jcc",
fecha_registro : "20070818",
datosUsuario : function(){
return this.login + ' '+ this.fecha_registro;
}
}

2. Caso de objeto definido con plantilla:

function Usuario(login, fecha_registro) {
this.login = login;
this.fecha_registro = fecha_registro;
this.datosUsuario = function(){
return this.login + ' ' + this.fecha_registro;
}
}

La principal diferencia entre los métodos A y B es que el B implementa de alguna manera lo que conocemos en programación orientada a objetos como encapsulación. Sólo un objeto del tipo que define el método puede utilizar la función datosUsuario().

obtener el resultado del metodo

//objeto.metodo()
var datos_de_usuario = usu0.datosUsuario();

NOTA: Hay un tercer caso:
C. Cuando tenemos un objeto ya definido, y por alguna razón necesitamos añadirle un nuevo método. Utilizamos la palabra reservada prototype igual que hacíamos para añadirle propiedades:

//Si el método se define a parte
Usuario.prototype.datosUsuario = datosUsuario;
//Si el método de define sólo par el objeto
Usuario.prototype.datosUsuario = function(){
return this.login + ' ' + this.fecha_registro;
}

Recorrer un objeto Javascript

Cuando tenemos un objeto podemos recorrer sus propiedades utilizando un bucle con in:

for (var campo in usu0 ){
//campo va tomando los nombres de las propiedades
document.write( usu0[campo] + '\t');
}

miércoles, 15 de agosto de 2007

Objetos en Javascript 1/2

En Javascript, además de utilizar cadenas, enteros, arrays, etc. podemos trabajar con objetos/estructuras definidos por nosotros mismos.
Para tener una instancia de un objeto tenemos dos opciones:
Modo literal (JSON)
A la variable se le asigna la definición del objeto. Este tipo de objeto será único, ya que ha sido declarado expresamente para una variable.

var usu = {
login : "jcc",
fecha_registro : "20070818"
}

Modo plantilla
Definimos una estructura. Utilizamos la estructura definida para crear cuantas instancias del mismo tipo de objetos queramos.

//Definición objeto Usuario
function Usuario(login, fecha_registro) {
this.login = login;
this.fecha_registro = fecha_registro;
}
//Instanciar varios objetos Usuario con "new"
var usu0 = new Usuario("jcc","20070818");
var usu1 = new Usuario("tcn","20070818");

Añadir más propiedades
A un objeto se le pueden seguir añadiendo propiedades tras ser definido, aunque es una práctica que no se aconseja, pues todos los objetos del mismo tipo ya creados hasta entonces añaden también esa propiedad con valor nulo. Para ello se utiliza la palabra prototype:

Usuario.prototype.email=null;//afectará a todas las instancias
usu0.email="usu0@dominio.es"

Incluso a una instancia concreta se le pueden añadir propiedades directamente así:

//sólo afectará a esta instancia
usu0.aficiones="Mis hobbies son...";//o bien
usu0['aficiones']="Mis hobbies son..."

Acceso a las propiedades
Por último, la forma de acceder a una propiedad de un objeto es la siguiente:

//objeto.propiedad
var login_usu = usu0.login//o bien objeto[propiedad]
var login_usu = usu0['login']

OJO: En el modo de acceso con corchetes ([,]) , la propiedad es un literal cadena. Esto nos permite recorrer las propiedades de un objeto haciendo uso de una variable (ejemplo).

(continúa con Objetos Javascript 2/2: los métodos)

Herencia en Javascript

La herencia en Javascript podemos emularla de esta manera:

Primer método: (Object masquerading)

function ClaseA(nombre){
this.nombre=nombre;
this.identificarse=function(){
alert(this.nombre);
}
}

function ClaseB(nombre){
this.superClase=ClaseA;
this.superClase(nombre);
delete this.superClase;
}

El constructor ‘ClaseA’, es llamado como método del nuevo objeto que se esta creando en ‘ClaseB’, por lo tanto, todas las propiedades y métodos que se crean en ClaseA se van a agregar al nuevo objeto de ClaseB.

frente a otros métodos éste permite herencia múltiple, es decir, un objeto puede heredar de mas de una clase al mismo tiempo sólo con llamar a cuantos constructores sean necesarios dentro del constructor de la clase hija.

Segundo método: (Prototype chaining)

El ejemplo anterior utilizando prototype chaining quedaría de la siguiente manera:

function ClassA(){}

ClassA.prototype.nombre = “”;
ClassA.prototype.identificarse = function(){
alert(this.nombre);
}

function ClassB(){}

ClassB.prototype = new ClassA();

De ahora en adelante, todos los objetos creados con ‘ClassB’ van a tener, también, los mismos métodos y propiedades de la instancia de ‘ClassA’. Y si queremos agregar más métodos y propiedades, lo único que tenemos que hacer es agregárselos al prototype de ‘ClassB’.

Lo malo de este método para emular herencia, es que no se puede pasar parámetros a la clase base, como hicimos en el ejemplo de Object masquerading.

Lo bueno, es que el operador instanceof funciona de una manera única: por cada instancia de ClaseB, instanceof nos retorna true tanto con ‘ClaseA’ como con ‘ClaseB’:
var miobjeto = new ClassB();  alert(miobjeto instanceof ClassB); // true
alert(miobjeto instanceof ClassA); // true

Referencias
Blog de Notas: Herencia en Javascript

jueves, 9 de agosto de 2007

Imágenes gif para indicar "cargando", "en proceso", "loading"

Para páginas web que realicen tareas que no son inmediatas podemos utilizar imágenes animadas y con buen diseño que indiquen al usuario que algo está ocurriendo y debe esperar.
Desde que las tecnologías AJAX entraron con fuerza, este tipo de imágenes son un recurso fundamental.





En la web Ajaxload.info puedes elegir el modelo de imagen que te interesa, los colores de fondo y de la propia imagen y listo. Las querrás todas ;)

domingo, 5 de agosto de 2007

Iconos de propósito general para web en formato PNG

Muchas veces buscamos el icono perfecto. Utilizamos Google, damos mil vueltas y al final: "mejor me lo hago yo".

Por suerte un día dí con la web que evitaría estas vueltas por la red en busca de iconos de todo tipo, bien diseñados y sobre todo bonitos: FamFamFam.com.

Datos:
  • Los iconos están en formato PNG, y tienen un tamaño de 16x16 píxeles (unos 1.000 iconos).
  • Existe además una selección de iconos de banderas
  • Puedes utilizar también una mini-colección de iconos GIF que hay en la web

Se puede acceder a una vista previa o bien descargarlos desde la web.

Tienen licencia Creative Commons 2.1, así que puedes utilizarlos en tus desarrollos de modo gratuito y modificarlos a tu gusto. El autor comenta que si los utilizas en una web, sería muy amable por tu parte que incluyeras un enlace a FamFamFam en los créditos de tu web.

sábado, 4 de agosto de 2007

Herramientas de acceso a bases de datos

Cuando desarrollamos software que interactúa con alguna/s base/s de datos, necesitamos acceder a estas de forma cómoda, rápida y lo más sencillamente posible. No es viable estar haciendo cada consulta desde interfaz de línea de comandos (por ejemplo SQL*PLUS de Oracle).

En algún momento he necesitado encontrar el programa que me diera estas posibilidades, y en ocasiones me ha costado mucho encontrar el que me pareciera más cómodo, por eso anoto aquí aquellos que finalmente me han parecido buenos:

Acceso a MySQL:

  • PHPMyAdmin: interfaz de acceso vía web. Es estupendo y gratuito.

  • SQLyog: interfaz de acceso de escritorio. Muy bueno y gratuito (previo registro)

  • Navicat: interfaz de acceso de escritorio. El mejor pero de pago... (permite incluso crear conexiones vía túnel ssh)


Acceso a Oracle:

  • TOra: interfaz de acceso de escritorio. Bueno y gratuito

  • Oracle SQL Developer: interfaz de acceso de escritorio. Muy bueno y gratuito (acceso también a otras bases de datos: mysql, sqlserver y access)

  • TOAD: interfaz de acceso de escritorio. El mejor pero de pago.


Todas estas herramientas permiten administrar una base de datos, crear triggers, escribir procedimientos, gnerar vistas, ver las consultas coloreadas, crear copias de seguridad, etc.

viernes, 3 de agosto de 2007

Centrar con CSS una web : en general cualquier elemento de bloque

Para centrar las páginas de nuestra web, podemos hacerlo así de sencillo utilizando DIV y dándole estilo con CSS:

body { text-align:center; }
#principal{ width:70%; margin:0 auto; text-align:left;}

Y el código HTML:

<body>
<div id="principal">
Todo lo que metas aquí queda centrado
</div>
</body>

NOTA: La parte de CSS que afecta al BODY, y la propiedad text-align:left paraa el DIV, sólo son necesarias para que funcione en IE con versión inferior a la 6.

Referencia
Juque : Centrando Elementos de Bloque

Elementos de bloque y elementos de línea en HTML

HTML clasifica a todos los elementos en dos grandes grupos: elementos en línea (inline elements en inglés) y elementos de bloque (block elements en inglés).

Las diferencias:

BLOQUE: Los elementos de bloque siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea, aunque sus contenidos no lleguen hasta el final de la línea. Esta nueva línea contiene un espacio superior y otro inferior.

LÍNEA: Los elementos en línea sin embargo no empiezan en nueva línea y solo ocupan el espacio necesario para mostrar sus contenidos

------------

BLOQUE: La mayoría de elementos de bloque pueden contener elementos en línea y otros elementos de bloque.

LÍNEA: Los elementos en línea solo pueden contener texto u otros elementos en línea


==> En otras palabras, un elemento de bloque no puede aparecer dentro de un elemento en línea. En cambio, un elemento en línea puede aparecer dentro de un elemento de bloque y dentro de otro elemento en línea.


Lista de elementos de bloque y de línea definidos por HTML:
Los elementos de bloque definidos por HTML son:
  • address
  • blockquote
  • center
  • dir
  • div
  • dl
  • fieldset
  • form
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • hr
  • isindex
  • menu
  • noframes
  • nos-cript
  • ol
  • p
  • pre
  • table
  • ul

Los elementos en línea definidos por HTML son:
  • a
  • abbr
  • acronym
  • b
  • basefont
  • bdo
  • big
  • br
  • cite
  • code
  • dfn
  • em
  • font
  • i
  • img
  • input
  • kbd
  • label
  • q
  • s
  • samp
  • select
  • small
  • span
  • strike
  • strong
  • sub
  • sup
  • textarea
  • tt
  • u
  • var.

Los siguientes elementos también se considera que son de bloque:
  • dd
  • dt
  • frame-set
  • li
  • tbody
  • td
  • tfoot
  • th
  • thead
  • tr


Los siguientes elementos pueden ser en línea y de bloque según las circunstancias:
  • button
  • del
  • iframe
  • ins
  • map
  • object
  • script




Referencias
Librosweb.es : Elementos en línea y elementos de bloque
Juque
Mozilla Developer Center: HTML:Elemento:Tipos de elementos

jueves, 2 de agosto de 2007

Código html de símbolos útiles










símbolocódigo
»&raquo;
®&reg;
á&aacute;
é&eacute;
......
Á&Aacute;
É&Eacute;
......

Referencias
ConClase.net