Foros del Web » Programando para Internet » Javascript »

Destripando por Placer

Estas en el tema de Destripando por Placer en el foro de Javascript en Foros del Web. Jjaja, qué chistoso título. Aaaaaaaaaja !!!!!!!!!!! 'ta de poca tu destripador, Caricatos. Lo vi ese día que me pasaste la liga, pero no entendía nada ...
  #1 (permalink)  
Antiguo 20/04/2006, 00:08
Avatar de uamistad  
Fecha de Ingreso: diciembre-2004
Ubicación: Cd. de México
Mensajes: 1.395
Antigüedad: 19 años, 4 meses
Puntos: 1
De acuerdo Destripando por Placer

Jjaja, qué chistoso título.

Aaaaaaaaaja !!!!!!!!!!! 'ta de poca tu destripador, Caricatos.

Lo vi ese día que me pasaste la liga, pero no entendía nada realmente. ¡Nada! Jeje. Se veía complejo es lo que recuerdo, pero no entendía su funcionaliadad.

Jaja, es que tengo un monitor chirris de 600x800 y no había visto la barra de scroll del iframe que es el que muestra la info, =)

Y este emoticono está muy divertido.

Aún no puedo explotar bien la herramienta porque no sé para qué sirven algunas, pero de momento con el SELECT que tienes ahí y sobre todo con la sección destripar otro objeto que apenas ahorita vi para qué sirve, tengo más que suficiente para divertirme un rato. Ojalá pudieras comentar para qué sirve probar código y nuevo tag, please. =)

Luego pensé que quizá alguien escribió algo de documentación sobre la herramienta, quizá por aquí en FdW, así que escribí en Google:

link:http://www.pepemolina.com/DOM/destripador.html

Y vi un link con una buena explicación y un código muy light de entender, así que me pasé un buen rato destripando objetos con el siguiente código:

Código PHP:
//
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<
HTML>
<
HEAD>
<
TITLEDestripar es un Placer </TITLE>
</
HEAD>

<
BODY>
    <
script type="text/javascript">

            function 
destripar(dato){
                var 
tripas "destripando el objeto <u>window</u>";
                for(
esto in dato){
                    
tripas += "<br />" esto " = " dato[esto];
                }
//end for
                
return tripas;
            }
//end function
            
document.write(destripar(window.navigator))

    
</script>
</BODY>
</HTML> 
Luego me pasó por la cabeza, tal como comentas, hacer una función recursiva que liste todos los objetos y propiedades del documento para poder consultar de cuándo en cuándo en una sola hoja un montón de propiedades interesantes de cada navegador.

Comentas que un objeto tiene referencia a sí mismo, eso quién sabe por qué lo habrán hecho, no le encuentro todavía el sentido, pero si pudiera tener dentro de la función acceso a el nombre del objeto, bien se podría hacer la función recursiva en la que, si se encuentra con su propio nombre, que no se meta para no hacer un bucle infinito.

Traté de hacerlo con eval(), pero no sé si lo hice bien porque no me salió.

Es decir, en lugar de mandarle un objeto a la función destripar(), por ejemplo, el objeto window.navigator que fue el que le pasé en el ejm. de código que puse, quiero enviarle en lugar de eso un string, por ejempo: "window.navigator" y ya dentro de la función, convertir ese string a el objeto que le corresponde, intenté con algo como:

Código PHP:
//
function destripar(datoString){ //enviarle un string
                
dato = eval(datoString//y convertirlo a obj dentro
                
var tripas "destripando el objeto <u>window</u>";
                
//el resto de la función igual 
... pero no me salió, a la mejor estoy cometiendo alguna incoherencia.

Lo mejor de ese destripador es que no sólo se puede tener acceso la información del DOM como se tendría en una guía, libro, etc. sino que se puede conocer el valor que tienen en ese momento. Eso sí que está crazy !

He leído muchos post por aquí y no he visto que lo mencionen. Tantas dudas que se resuelven con esa herramienta, hay que hacerle más publicidad, =P

Saludos, si no es molestia Caricatos, te encargo eso de:

-probar código
-nuevo tag


Thanks !
__________________
"Di no al Internet Explorer" -Proverbio Chino-
  #2 (permalink)  
Antiguo 20/04/2006, 02:34
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
¡Gracias!

¡Gracias uamistad!

Me estás haciendo una buena promoción de una página que me encanta, y creo que es hora de empezar a comentarla mejor... seguro que me echarás una mano.

Bueno, en principio te comento la parte superior...
donde pone elemento actual se muestra la ruta "por etapas" del elemento destripado (cuyas tripas se muestran en el textarea)... y cada una de esas etapas se pueden pinchar como un atajo a un objeto de orden superior (en la estructura de árbol)

La línea siguiente son un botón directo al padre del objeto actual, y un select con los hijos objetos (destriplables) seguido de información válida para nodos del tipo "NODO" (suelen ser tags)

Abajo se muestran los atributos (tripas), que no creo que necesite comentarios...

En probar código se puede poner por ejemplo alert("hola")
... pero tiene mucho más interés si se crean nuevos objetos...

Se pueden poner por ejemplo estas líneas:
nuevoTag = document.createElement("div")
ir...
nuevoTag.appendChild(document.createTextNode("hola "))
ir...
document.body.appendChild(nuevoTag)
ir...
(ir... significa pinchar el botón)

Bueno, dejo el resto para otro momento, porque no recuerdo bien como funciona...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 22/04/2006, 06:29
Avatar de uamistad  
Fecha de Ingreso: diciembre-2004
Ubicación: Cd. de México
Mensajes: 1.395
Antigüedad: 19 años, 4 meses
Puntos: 1
Caricatos, ¿también se puede acceder al propiedades de elementos de formulario?

Le di por todos lados, pero son muchas ramas y no tengo muy claro el árbol del DOM todavía.

Thanks =)
__________________
"Di no al Internet Explorer" -Proverbio Chino-
  #4 (permalink)  
Antiguo 22/04/2006, 08:09
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Hola:

Pues, document.forms.muestra.elements...

Lo que coloree es un ejemplo... un atajo podría ser poner en "destripar otro objeto": document.getElementsByTagName("form")[0]

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 22/04/2006, 10:49
 
Fecha de Ingreso: abril-2005
Ubicación: Lima-Peru
Mensajes: 313
Antigüedad: 19 años
Puntos: 1
Hola, pues me parece que en mi post el amigo caricatos nos haya dado a conocer a los 2 uamistad y yo,esa excelente herramienta, a proposito, tenia una ultima duda en la implementacion del script que pusiste alli, pero que ha quedado en el olvido

Amigo Caricatos en tu pagina los enlaces de la seccion articulos estan rotos

Gracias por el gran apoyo que nos brindas, y pues tengo que ponerme a estudiar javascript y DOM, todo sea por el imperio
  #6 (permalink)  
Antiguo 22/04/2006, 14:00
Avatar de uamistad  
Fecha de Ingreso: diciembre-2004
Ubicación: Cd. de México
Mensajes: 1.395
Antigüedad: 19 años, 4 meses
Puntos: 1
Gracias Caricatos.

Había entrado a la página del destripador pero no veía elementos de formulario para analizar, ya le puse en destripar otro objeto el texto "window.document.forms[0]" y pude ver algo.

So, me hice un formulario de pruebas p' ver qué tanta info tenía cada campo y quedé más que satisfecho, =)

Código PHP:
<?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<
HTML>
<
HEAD>
<
TITLEDestripar es un Placer </TITLE>
</
HEAD>
<
BODY>
    
Formulario de Ejemplo para la Extracci&#243;n de Tripas
    
<form name="formulario" action="http://www.dominio.com" method="post">
        <
br/>El siguiente es un input:
        <
br/><input type="text" name="un_input">
        <
br/>
        <
br/>Luego llega un select:
        <
br/><select name="mas_opciones">
        <
br/><option name="op1">Opci&#243;n 1
        
<br/><option name="op2">Opci&#243;n 2
        
<br/><option name="op3">Opci&#243;n 3
        
<br/><option name="op4">Opci&#243;n 4
        
<br/><option name="op5">Opci&#243;n 5
        
<br/>
        <
br/>Un par de checkbox y terminamos:
        <
br/><input type="checkbox" name="caja1">
        <
br/><input type="checkbox" name="caja2">
        <
br/>
        <
br/><input type="submit" name="enviar" value="Enviar">
    </
form>

<!-- 
Comencemos con la Carnicer&#237;a -->
<script type="text/javascript">
function 
destripar(dato){
        for(
esto in dato)
            
tripas += "<br />" esto " = " dato[esto];
        return 
tripas;
    }
//end function
    
document.write(destripar(document.formulario.mas_opciones.options[0]))

Tendr&#233; que aprenderme ese código saca-tripas p' irme familiarizando con la info de mis elementos del DOM cuando lo necesite.

Y es que luego me pasa que se me olvida el nombre de alguna propiedad por ejemploo al menos la manera correcta de escribirlo y esto viene de lujo en s&#243;lo 6 líneas!

    
</script>
</BODY>
</HTML> 
?>
Muchas gracias Caricatos.
__________________
"Di no al Internet Explorer" -Proverbio Chino-
  #7 (permalink)  
Antiguo 22/04/2006, 15:09
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Hola:

Por partes... faltaba responder lo de nuevo tag... y reo que es de las cosas más sencillas de descifrar con el código...

HTML:
Código:
<form name="pega" action="">
<fieldset style="display: inline"><legend style="display: inline; text-align: center"> Nuevo Tag </legend>
<input type="text" name="elemento" value="" />
<input type="button" value=" ir " onclick="insertar(elemento.value)" />
</fieldset>
</form>
función insertar:
Código:
function insertar(x)	{
	var insertor = document.createElement(x);
	document.body.appendChild(insertor);
}
O sea que el más sencillo de los usos sería destripar luego el elemento:
dcument.body.lastChild
o asignarle un id con la opción probar código...

La verdad es que cada sencillo campo o botón tiene un juego...

MaXaC: He visto el último tema que pusiste en el otro mensaje, y no contesté porque simplemente no tengo respuesta... no es normal que php genere un código html y no funcione... y el mismo código sin ser generado por php sí... evidentemente hay algún fallo...
He mirado los enlaces que dices que están rotos, y los encuentro bien... te agradecería que me dijeras cuales en concreto...

uamistad: Me encanta saber que te ayuda en algo la página y su código... no tienes idea las veces que lo uso (y también uso mucho el probador...)

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #8 (permalink)  
Antiguo 22/04/2006, 18:50
 
Fecha de Ingreso: abril-2005
Ubicación: Lima-Peru
Mensajes: 313
Antigüedad: 19 años
Puntos: 1
Cita:
He mirado los enlaces que dices que están rotos, y los encuentro bien... te agradecería que me dijeras cuales en concreto...
este, este, este, uhmm y otros mas creo
  #9 (permalink)  
Antiguo 23/04/2006, 01:37
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Cita:
Iniciado por MaXaC
este, este, este, uhmm y otros mas creo
Gracias por avisar... es que es una página clonada, y las direcciones debían ser absolutas... Ya lo he arreglado (Esos enlaces no existen)
Aproveché para hacer otros arreglos como poner una cita aleatoria...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #10 (permalink)  
Antiguo 23/04/2006, 16:44
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Hola:

Con respecto a la forma recursiva, hay una clase de "tripa" que permite obtener todos los elementos "etiqueta"...
La raíz en este caso es document.documentElement que se corresponde con la etiqueta html... y los elementos que realmente se consideran nodos son los que se encuentran en el array childNodes... el primer elemento de ese array sería el tag head y el último el tag body...

document.documentElement.childNodes[0] = etiqueta head
document.documentElement.childNodes[1] = etiqueta body

Aunque se podría encontrar espacios en blanco entre las 2 etiquetas que según el navegador podría evaluarse como un nodo intermedio en blanco.

Por cierto, hice unas modificaciones en el destripador con unos breves comentarios.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:54.