Referencia de Objetos, Propiedades y Funciones

Mediante el uso de un bucle mostramos las propiedades de un objeto pasado como argumento.

Bien podrían escribirse cientos de posts sobre las propiedades de los objetos que se manejan en la ventana del explorador, más sin embargo esta referencia rápida nos proporciona funcionalidad en varios niveles, tanto para aprender nuevas propiedades, revisar los valores predeterminados y también en el desarrollo de nuestras aplicaciones.

Este script itera sobre las variables y funciones (a excepción de IE que solo muestra variables, no obstante tanto Opera, Firefox y Safari despliegan los nombres de sus funciones nativas) y los despliega en una tabla.

Dividido en funciones. Esta primera función (la más importante) construye el contenido a mostrar con las propiedades miembro del objeto pasado como argumento. Aquí la línea clave es "for (var nombrePropiedad in objeto)" que nos permite acceder a las propiedades del objeto.

function Propiedades(objeto,StrObjName) { var tablaPropiedades='', nextObj='' tablaPropiedades += '<script language="JavaScript" src="ObjProp.js"></script>'+ '<center><br><table border="1" width="90%" cols="2"><tr align="left">'+ '<td><b>Propiedad</b></td><td><b>Valor</b></td></tr>' for (var nombrePropiedad in objeto) { tablaPropiedades += "<tr><td>"+nombrePropiedad+"</td><td> "+objeto[nombrePropiedad] if ( (""+objeto[nombrePropiedad]).indexOf("[object") != -1 ) { // Explorer referencia un objeto así "[object]", Opera da más info nextObj = ''+ StrObjName + '["' + nombrePropiedad +'"]' tablaPropiedades += "<input value='Propiedades' onclick='MostrarPropiedades("+ nextObj +")' "+ "type='button' title='Propiedades de este objeto en ESTA pagina'>" } tablaPropiedades += "</td></tr>" } tablaPropiedades += '</table></center></body></html>' return tablaPropiedades }

La siguiente función, muestra el contenido en una ventana nueva. Es importante recalcar el uso de una ventana nueva en vez de mostrar el contenido en un DIV, ya que se altera la información de la página si mostramos un DIV y eso hace más robusto el resultado.

function MostrarPropiedades(StrObjeto) { var objeto = eval(StrObjeto) var opciones = "toolbar=1,status=1,menubar=1,scrollbars=1,resizable=1"; var ventana = window.open("","",opciones) ventana.document.write('<html><head><title>Objeto: '+StrObjeto+'</title></head><body bgcolor=#efefef>') ventana.document.write(Propiedades(objeto,StrObjeto)) ventana.document.close() }

Recomiendo usar una tercera función que escriba el formulario necesario para procesar el objeto, un ejemplo de esto es la siguiente:

function WriteForm() { var HTML = '<br><center><form name="PropiedadesObjetos" onsubmit="return false">Objeto: '+ '<input type="text" value="window" name="objetos" size="50" style="font-size:14px;background-color:#fefefe;" mce_style="font-size:14px;background-color:#fefefe;"> '+ '<input value="Propiedades" onclick="MostrarPropiedades(document.PropiedadesObjetos.objetos.value)" type="button">'+ '</form></center><br>' document.write(HTML) }

Por último, podemos guardar estas 3 funciones en un archivo *.js, incluyendo la ejecución de la tercera función para que al incluirlo en nuestra página podamos hacer uso del script sin que sea necesario hacer grandes cambios.

// Escribimos el formulario WriteForm()

Una implementación ligeramente más elaborada está aquí.