problema de forma y método

vitxo · #1 (**permalink**) 29/03/2004, 07:24

Hola a todos,
es la primera vez que realmente "necesito" implementar cierta lógica de mi aplicación en Javascript.
Mi intención es implementar una función que cambie todas las ocurrencias de emoticones por sus respectivas imágenes.
La idea la tengo clara: mantener un array multidimensional que relacione cada emoticón con su imagen, iterar a través del vector y reemplazar a cada vuelta.

Pero mi pregunta es, cómo puedo acceder al contenido de la etiqueta body? es posible?
Incluso sería posible accede a un "nodo más interno" a la etiqueta body, como podría ser un bloqute <div id="vista"></div>? Para "pegar" ahi dentro las imágenes.

un saludete, ya hablamos. :)

JavierB · #2 (**permalink**) 29/03/2004, 10:22

Hola, vitxo.

Para acceder al contenido de <body>

elem=document.getElementsByTagName('body');
elem[0].innerHTML="Lo que sea ;)";

Para acceder a otro elemento, como el div que has puesto de ejemplo:

elem=document.getElemenById("vista");
elem.innerHTML="Lo que quieras :)";

Saludos,

vitxo · #3 (**permalink**) 29/03/2004, 11:05

y es portable entre navegadores?? Joer, que fácil que es este rollito no?? :)

JavierB · #4 (**permalink**) 29/03/2004, 11:56

Cita:

Mensaje Original por vitxo
y es portable entre navegadores??

Pues salvo que sea un navegador muy antiguo, se supone que debe funcionar en todos.

Cita:

Mensaje Original por vitxo
Joer, que fácil que es este rollito no?? :)

Depende de cuanto quieras, o necesites, complicarte con el código

saludos,

vitxo · #5 (**permalink**) 02/04/2004, 03:45

Oye, pues al final me ha salido. Más o menos claro, todo está en mi blog (http://weblogs.javahispano.org/comme...e_contacto_con). Aunque me he liado con las expresiones regulares un poco y todavía no reemplaza todas las ocurrencias de cada emoticón. :(

vitxo · #6 (**permalink**) 02/04/2004, 11:58

Oye, pues funcionar más o menos funciona pero no es muy eficiente. Llamo a la función cuando se carga el body y según lo he implementado, recorro el array asociativo que mantiene los emoticiones y sus imágenes, usando como clave para indexar el valor el propio patrón (

-> por ejemplo) que luego uso para reemplazar el texto.
Entonces, ahora tengo 10 emoticones, y el elem.innerHTML.replace(patron, '...') recorre todo el cuerpo de la página 10 veces, una por cada sonrisa del array. ... y eso que no reemplazo todas las ocurrencias.

No sería mejor usar algún tipo de filosofía usando funciones de retro-llamada? (como el intérprete SAX que tienes tres métodos que implementar que se llaman al interpretar un archivo XML genérico)

Que lío no....? :D

caricatos · #7 (**permalink**) 02/04/2004, 12:10

Hola vitxo y JavierB

...

En las FAQs de este foro puse un método muy sencillo para cambiar texto por emoticones, aunque con expresiones regulares tendría que ser posible también...

Para referenciar el body de un documento es algo mucho más sencillo: document.body

Saludos

vitxo · #8 (**permalink**) 03/04/2004, 08:28

Oye, pones el link directo al hilo de la FAQ? Es que me he mamado tres páginas ya y varias búsquedas y no doy con elllo. :)

JavierB · #9 (**permalink**) 03/04/2004, 08:49

Hola de nuevo, vitxo.

Caricatos debe referirse a la FAQ-113 que junto con la FAQ-114, y por motivos todabía desconocidos, han desaparecido del lugar donde deberían estar. Creo recordar que puse un pasquín de busqueda y captura, pero no se ha vuelto a tener noticias

Cita:

Para referenciar el body de un documento es algo mucho más sencillo: document.body

Gracias caricatos

Ya he tomado nota en el reducido espacio de mi disco duro cerebral. Una vez más se ha demostrado mi acreditada inclinación a complicar las cosas fáciles.

Salu2 a los 2

vitxo · #10 (**permalink**) 03/04/2004, 13:19

No me parece q se complique mucho la historia, son diferentes modelos de atajar el mismo problema.

Estoy acostumbrado de trabajar con implementaciones de DOM (Document Object Model) en Java, PHP y C++ y hace mucho más sencillo aprender Javascript. :)

caricatos · #11 (**permalink**) 03/04/2004, 15:46

Hola otra vez:

Voy a intentar resumir lo que debía poner esa FAQ:

Si el fichero de la imagen es smyle.gif y el texto que lo representa es "[

]"...

se pueden cambiar todas las ocurrencias del segundo por el código que inserta su imagen con algo así:

texto.split("[

]").join("<img src='" + smyle.gif + "' />");

La explicación es:
split convierte una cadena en un array de elementos y su parámetro es el separador...

join hace lo contrario... convierte un array en una cadena y su nexo es su parámetro.

Parece sencillo, y realmente lo es...

Si no te enteras de lo que te puse, no dudes en consultar...

JavierB: ¿Qué es "posquín...

?...
... Lo de complicar las cosas es relativo... me acuerdo de viejos proyectos donde solo tenía que cortar y pegar... (el generador... las postales...)

Por cierto... ya pasas de los 2500 mensajes...

en un tris me vas a adelantar...

vitxo: Ya que conoces el tema del DOM, fíjate en esta página, en donde se muestra el árbol del documento: http://www.pepemolina.com/DOM/index.html
... lo tengo aparcado, pero creo que es interesante...

Saludos

vitxo · #12 (**permalink**) 04/04/2004, 03:14

Pues usando los metodos split y join se soluciona todo muy facil. Cuando mi weblog vuelva a estar online (ahora da un problema el server) pondre el codigo y las imagenes disponibles para que trasteen ;)

Tu implementacion del DOM me parece muy interesante.

vitxo · #13 (**permalink**) 04/04/2004, 14:28

Hola a todos,
la funcion tal como la uso ahora es asi: (ya se que el codigo no es php pero mola verlo con colores ejeje)

Código PHP:

  function replaceSmilies(id){ 
        var smilies = new Array(); 
        smilies[":-)"] = "regular_smile.gif"; 
        smilies[":)"] = "regular_smile.gif"; 
        smilies[";-)"] = "wink_smile.gif"; 
        smilies[";)"] = "wink_smile.gif"; 
        smilies[":D"] = "teeth_smile.gif"; 
        smilies[":-D"] = "teeth_smile.gif"; 
        smilies[":-|"] = "what_smile.gif"; 
        smilies[":|"] = "what_smile.gif"; 
        smilies[":-("] = "sad_smile.gif"; 
        smilies[":("] = "sad_smile.gif"; 
        smilies[":ein:"] = "sarcastic_smile.gif"; 
        smilies[":sueco:"] = "roll_smile.gif";       
        smilies[":pensando:"] = "thinking_smile.gif"; 
        smilies[":-?"] = "dont_know_smile.gif"; 
        smilies[":O"] = "omg_smile.gif"; 
        smilies[":-O"] = "omg_smile.gif"; 
 
        var view = document.getElementById( id ); 
        for( smiley in smilies ){ 
          var html = view.innerHTML.split( smiley ); 
          view.innerHTML = html.join("<img  
src=\"$ctxPath/resources/$userName/"+smilies[smiley]+"\"  
alt=\""+smiley+"\"/>"); 
        }             
     }

Aunque sustituye las ocurrencias que se encuentran en los atributos TITLE de cada etiqueta y en los bloques PRE,BLOCKQUOTE y CODE, cosa q no me interesa.
Eso podria controlarlo con expresiones regulares, pero todavia no me he puesto del todo. He medio conseguido hacer funcionar esta:

Código PHP:

          var patron = "(:-*\))|(:-*D)|(:-*\()|(;-*\))|(:-*\|)|(:-*\?) 
|(:-*O)|(:ein:)|(:sueco:)|(:pensando:)"; 
        var regexp = new RegExp(patron, 'gi'); 
view.innerHTML = view.innerHTML.replace(regexp, "<img src=\"imagenes/"+smilies[$1]+"\" alt=\"careto\"/>" );

La verdad que podria estar mas currada la expresion, pero de otra forma no me funciona, porque esta claro que todos o casi todos los emoticones tiene el :- en comun (o sin guion).
De hecho ahora q me acuerdo, en el debugger de mozilla me salta un error diciendo que la variable $1 no esta definida. uhm.

Como lo hariais vosotros? :)

un saludete, ya hablamos.

vitxo · #14 (**permalink**) 04/04/2004, 14:31

El propio parser de los foros me ha metido codigo por en medio!

JavierB · #15 (**permalink**) 05/04/2004, 01:03

Cita:

Mensaje Original por caricatos
JavierB: ¿Qué es "posquín...

?...

Un pasquín es un cartel que ponían en el salvaje oeste con la tipica frase "Se busca vivo o muerto".
Me sorprende que se le haya pasado por alto a un tipo que hace muescas en su winchester

Saludos,

caricatos · #16 (**permalink**) 05/04/2004, 16:02

Hola otra vez:

Cita:

Mensaje Original por JavierB

Me sorprende que se le haya pasado por alto a un tipo que hace muescas en su winchester

La verdad es que mi "winchester" lo compré en "aquellas tiendas de los 20 duros"

vitxo: no sabía que se podían usar los arrays asociativos en javascript (todos los días se aprende algo nuevo)... alguna vez lo usé en php, y creo que se le puede sacar mucho provecho.

No olvides mostrarnos el blog.

Saludetes

vitxo · #17 (**permalink**) 08/04/2004, 15:32

Caricatos, los arrays asociativos (o tablas hash o mapas hash, depende las implementaciones y convenios y lenguajes jeje) son extremadamente útiles y simples de usar.
Estos días q he investigado sobre Javascript no he visto a nadie usarlos y me resulta extraño.

Al tajo: en http://people.javahispano.org/vitxo/js.emoticones.zip
está todo lo hecho. Aunque tengo pensado reimplementarlo con expresiones regulares,
pero bueno, tiempo al tiempo. jeje

y poco más, espero feedback. El script lo tenéis funcionando a pleno pulmón en mi página personal y en mi weblog.

un saludete.

vitxo · #18 (**permalink**) 10/04/2004, 08:10

Estoy investigando otras vias de implementar la funcion porque es muy poco eficiente. Y usar solo expresiones regulares puede complicarse un poco, asi que estoy pensando iterar por el arbol representativo DOM y reemplazar solo en los cuerpos de los parrafos.

Muy complicado? Es que ahora mismo, por cada emoticon que tenga definido estoy haciendo estas operaciones:
1. partir el texto en N trozos, donde N son el numero de ocurrencias del smiley actual.
2. N-1 uniones con la etiquetaa IMG correspondiente.

un poco peludo no? :)

caricatos · #19 (**permalink**) 10/04/2004, 12:21

Hola otra vez:

Ya estuve probando arrays asociativos y me gustan...

... Aunque por ahora mi sistema de emoticones funciona bien y no tengo motivos para cambiarlo.

He visto que el array asociativo lo tienes dentro de una función, y de esta manera se realizan las asignaciones en cada utilización de la misma. Un pequeña optimización del código pienso que sería hacer las asignaciones fuera de esa función... tal vez en una función de inicialización global

Sobre los blogs sinceramente sé muy poco, pero me imagino que se parecerá a un libro de visitas (lo estuve viendo y así me lo ha parecido), pero solo lo actualiza el dueño (tal vez sea una forma de definirlo poco acertada ¿?)... Si quieres fíjate en el de mi perfil, o en este otro: http://www.pepemolina.com/visitas/visitas.php que es de otra página personal. Hay una versión de éste último en donde empecé a adaptar un menú hecho por tunait que permite más opciones: http://www.pepemolina.com/visitas/__visitas.php

Para seleccionar todas las ocurrencias de un tag "p" en un documento puedes usar document.getElementsByTagName("p") que genera un array de todos esos elementos.

Si necesitas ver un árbol de los nodos de un documento, también he estado haciendo mis pinos, y lo puedes ver en este otro enlace: http://www.pepemolina.com/DOM/index.html ... puedes ver una especie de versión reducida en la misma página.

Saludos

vitxo · #20 (**permalink**) 13/04/2004, 04:40

Hola again,
un compi ha puesto su granito de arena también:
http://weblogs.javahispano.org/page/...s_vacaciones_o

Que quede claro que somos javaHispano, de Java 2 de Sun, no Javascript. ;)

un saludete, señores.