JMiur [E]

Cuando se nos ocurre hacer algo diferente, en Blogger sólo podemos utilizar JavaScript, un lenguaje que asusta a más de uno y eso no es problema siempre y cuando nos limitemos a seguir las instrucciones de quien explica cierta cosa y nos resignemos a que eso funcione o no funcione pero sin cuestionar demasiado.

Sin embargo, a veces queremos más y está bien que así sea, pero, salvo que alguien descubra un método de aprendizaje instantáneo, no hay más remedio que hacer las cosas paso a paso y ser concientes de nuestras limitaciones para ... no meter la pata.

JavaScript tiene sus bemoles y hay códigos sencillos y códigos complejos, tanto unos como otros nos permiten ahorrar trabajo o hacer cosas que de otra manera serían imposibles de resolver. Probablemente, lo más común es generar etiquetas HTML o modificar las existente.

No es algo tan difícil como parece a primera vista y sólo requiere un poco de paciencia y conocer algunas instrucciones elementales.

La más simple es document.write() ¿Que hace? Pués "escribe" en la página, justo allí donde es ejecutada. Por ejemplo, agreguemos un elemento HTML para jugar un poco y probar; allí, pongamos esto:
<script> document.write('BUENOS DIAS'); </script>
Si lo guardamos y miramos, veremos ese texto escrito:

Fácil, un poco inútil pero fácil, demasiado fácil, lo complicamos un poco:
<script> document.write('<p style="color:red;text-align:center;">BUENOS DIAS</p>'); </script>

BUENOS DIAS


No es mucho más útil pero ahora, no sólo estamos escribiendo un texto sino que ese texto está formateado, es decir, es lo mismo que si colocáramos el código HTML de manera directa:
<p style="color:red;text-align:center;">BUENOS DIAS</p>
¿Para qué podría servir esto? Es obvio que no tiene mucho sentido usarlo de esta manera pero, este lenguaje nos da la posibilidad de escribir cosas "literales" o usar variables. Una variable es ... como un cajón, le damos un nombre y "adentro" ponemos algo. El nombre del cajón es siempre el mismo y lo que cambia es su contenido. Por ejemplo, a este "cajón" lo llamamos saludo y lo "llenamos" con un texto:
var saludo = 'HOLA';
o con otro texto:
var saludo = 'ADIOS';
Se trata siempre del mismo cajón, sólo cambia su contenido y lo que podemos mostrar es justamente eso:
<script>
  var saludo = 'BUENAS TARDES'
  document.write(saludo);
</script>
Así explicado tampoco parece interesante hay que seguir complicando un poco y decir que en JavaScript podemos definir funciones que no son otra cosa que trozos de código que hacen algo y a los que ejecutamos dándoles un nombre único. Su mayor importancia es que tienen la posibilidad de transferir datos así que, por ejemplo:
<script>
function escribirtexto(cual) {
  document.write(cual);
}
</script>
Es una función a la que le "enviamos" un dato de esta manera:
<script>escribirtexto('ESTE ES EL TEXTO QUE QUIERO MOSTRAR')</script>
La función, la colocamos siempre antes de llamarla, por eso es que generalmente decimos "colocar el script antes de </head> blablabla". Una vez que está en nuestra plantilla, podemos ejecutarla cuando se nos ocurra y cuantas veces se nos de la gana, llamándola una y otra vez desde distintas partes, trasfiriéndole los datos (en este caso textos) que vamos a mostrar:

ESTE ES EL TEXTO QUE QUIERO MOSTRAR

Como lo que podemos "escribir" es HTML significa que podemos usar casi cualquier tipo de dato. Esta es una función que mostraría imágenes:
<script>
function escribirImagen(miURL) {
  salida = '<img src="' + miURL + '" />';
  document.write(salida);
}
</script>
Y la usaríamos así:
<script>escribirImagen('URL_de_mi_imagen')</script>
Ahí hay algo nuevo; ya estamos agregándole más "cositas". Transferimos un dato (en este caso, la dirección URL de una imagen), pero, ese dato (miURL) no lo vamos a mostrar directamente sino que lo usaremos para construir el código HTML de la imagen.

El código normal que deberíamos usar para mostrar una imagen debería ser algo así:
<img src="URL_de_mi_imagen'" />
Como en nuestra función, la URL de la imagen es una variable (cambia cuando se nos ocurre), creamos otra variable (salida) y allí, escribimos algunas cosas como textos y le "sumamos" ese dato:
salida = '<img src="' + miURL + '" />';
Para "sumar" o concatenar textos, usamos el signo +.
miTexto = 'ESTE ES EL TEXTO QUE QUIERO MOSTRAR';
miTexto = 'ESTE ES EL ' + 'TEXTO' + ' QUE QUIERO MOSTRAR';
miTexto = 'ESTE ' + 'ES ' + 'EL ' + 'TEXTO ' + 'QUE ' + 'QUIERO ' + 'MOSTRAR';
Todo eso dará el mismo resultado, la variable miTexto siempre será la misma. Pero, como las variables pueden sumarse entre si, podemos hacer esto:
laPalabra = 'DISEÑO';
miTexto = 'ESTE ES EL ' + laPalabra  + ' QUE QUIERO MOSTRAR';

Y esto otro:
laPalabra = 'MODELO';
miTexto = 'ESTE ES EL ' + laPalabra  + ' QUE QUIERO MOSTRAR';

En todos esos ejemplos, hay un texto fijo y una variable llamada laPalabra que es la que cambia:

ESTE ES EL [ TEXTO] QUE QUIERO MOSTRAR

En muchos casos, en lugar de usar el símbolo + se usa += que hace lo mismo, concatenar cosas sin necesidad de hacerlo todo de una vez:
miTexto = 'ESTE ES EL ';
laPalabra = 'MODELO';
.......
miTexto += laPalabra; // miTexto ahora es 'ESTE ES EL MODELO';
.......
miTexto += ' QUE QUIERO MOSTRAR';  // miTexto ahora es 'ESTE ES EL MODELO QUE QUIERO MOSTRAR';
.......
otraPalabra = ' HOY';
miTexto += otraPalabra;  // miTexto ahora es 'ESTE ES EL MODELO QUE QUIERO MOSTRAR HOY';

Toda esta parte puede volverse engorrosa porque debemos prestar mucha atención al uso de las comillas.

Para que en Blogger no haya problemas, las comillas exteriores son simples y las interiores son dobles; en teoría, podríamos hacer lo inverso pero, como Blogger es un poco histérico, mejor sigamos este criterio: si lo que vamos a escribir tiene comillas, estas, deben ser dobles.

Un ejemplo:

Si quisiera escribir: Esto es un "texto" con "comillas" debería usar este tipo de código en un elemento HTML:
<script>
  document.write('Esto es un "texto" con "comillas"');
</script>
pero ... si eso lo escribo directamente en la plantilla y lo guardo, me aparecerá esto:
<script>
  document.write(&#39;Esto es un &quot;texto&quot; con &quot;comillas&quot;&#39;);
</script>
No es problema, ambas cosas son lo mismo. Sin embargo, para evitar esos cambios que en realidad, sólo confunden y hacen que el código sea poco claro, usamos CDATA:
<script>
//<![CDATA[
  document.write('Esto es otro "texto" con "comillas"');
//]]>
</script>
Genial, entonces usemos lo mismo en un elemento HTML. Copio y pego lo anterior, guardo y no pasa nada. Raro ... miro y lo que veo es que Blogger ha cambiado mi código ... lo ha destruido!!!!
<script>
//<![cdata[
document.write( texto esto );
//]] otro comillas con es>
</script>
La plantilla es "estricta" pero los elementos HTML no lo son, esa dualidad es confusa. Peor aún, algo que normalmente funcionaría en una página cualquiera, incluso en un post, en un elemento HTML puede no funcionar. Allí, no debemos usar CDATA y siempre, siempre, verificar el código, luego de guardarlo.

18 comentarios:

Bilosony2™  

Genial que empieces a contarnos como funciona el lenguaje JavaScript, estare esperando ancioso otro post de estos. :D


suerte!!

Responder
RickySmart  

Uso Wordpress, así que no tengo que enredarme en estos temas, pero sí me interesan y mucho...
Esa es la razón por la que deseo felicitarle por el buen trabajo explicándolo, le ha quedado muy bien, y marcaré este blog para saber si aparece algún otro curso como este...
Un saludo, script> document.write('amigo');<script

Responder
Alberto Fuentes  

que bueno el post pero mas que nada me gusto la explicacion sencilla :D

Responder
Santi Folch  

Me sumo a lo dicho por los compañeros. ¡Sigue con este tipo de cursos J! A ver si entre todos aprendemos un poco de JScript :)

Responder
Oloman  

Este post no me gusta nada porque sospecho que es el primero de una tanda. Mi queja es porque lo tendrías que haber escrito hace más tiempo y más de uno nos hubiéramos ahorrado muchos cabezazos contra la pared :( Ahora ya es tarde y tengo mis sesos totalmente batidos :o

Aunque, bueno, más vale tarde que nunca. Algo pescaremos :D

Responder
Graciela  

Muy bien explicado, claro y simple, continúa Bolsa :D

Responder
Vku  

Me gusto esta entrada.

JavaScript tiene sus cosas fáciles y otras muy difíciles, aunque a muchos no les guste soluciona y/o simplifica el trabajo o el diseño de una página. A parte de los efectos que se pueden hacer.

Lastima que en blogger nos complica las cosas. (lo digo por la ultima parte) A mi me a cambiado texto en mayúscula por minúscula.

Saludos.

Responder
JMiur  

Pués, a decir verdad, no sé si habrá más porque no es nada sencillo contar estas cosas :D Igual, si a alguien le ha servido para sacarse los miedos, bienvenido sea :D

Responder
Manfenix  

Me sumo al pedido de un "Tuto" sobre JScript....
Será posible...? :P

Responder
JMiur  

Se hará l oque se pueda :D

Responder
Manfenix  

Estaremos a la espera.... :D

Responder
rafarrojas  

nunca creí que un comentario mío mereciera no ser publicado. (!!!)
y no dice grandes cosas sobre este blog el hecho de que se supriman así comentarios... y más cuando son absolutamente inocentes como el que hice yo...
Pero, oye, el blog es tuyo. Haz lo que quieras con él.
En el mío he hablado de éste, de todas formas, y lo que ofreces.

Responder
JMiur  

No tengo la menor idea de lo que estás hablando ni a que te refieres pero, no importa.

Que en este blog se eliminan comentarios no te quepa la menor duda. Es una cuestión de simple higiene.

Cualquier comentario agresivo, discriminatorio o que considere fuera de lugar o simplemente molesto, es eliminado sin contemplaciones y sin escrúpulos ya que la libertad de expresión nada tiene que ver con los buenos modales ni un blog es un tablón de anuncios donde cualquiera puede decir cualquier cosa sin consecuencias.

Cada uno es libre de decir lo que quiera y vivir como quiera pero, nadie puede obligarme a tener que escuchar esas opiniones y hay algunas que ni siquiera me dan ganas de discutir.

Lo siento, pero, los blogs personales son eso: personales y las reglas las coloca quien lo administra; si las reglas no son del agrado de alguien, basta con que cree su propio blog y aplique sus propias reglas. De esa manera, todos felices.

La verdad, no sé a que viene tanto alboroto pero, uso esto para que las cosas queden claritas y por cierto, tu perfil es inaccesible; por lo tanto, no hay mucha diferencia entre eso y un comentario anónimo.

Responder
ayreonauta  

Buenas... Sé que esto va mucho más allá de este post, pero quizá tengas la respuesta o te guste la idea (o el desafío) como para dedicarle otro post...

Lo que quiero es un script que automáticamente haga cliqueables las URLs escritas en los comentarios, exceptuando las que ya tienen la sintaxis correspondiente.

Sería como el que tenés acá para los emoticones, pero un poco más "flexible", que tome cualquier string que comience con "http://". Claro, el problemita sería saber dónde termina la URL, que puede ser un signo de puntuación, que a su vez podría existir dentro de la URL...

¿Se te ocurre algo? Gracias.

Responder
JMiur  

Supongo que sería posible crear un script que lea el contenido, busque el protocolo http:// y termine con un caracter espacio. Seguramente, en la web debe haber varios códigos o expresiones regulares que hacen algo así o casi.

Responder
ayreonauta  

Sí, en realidad esa parte ya la tengo resuelta. El problema es dar con una expresión regular que evite los links que ya están en la página.

Por si te interesa, mi regex es:

/(b(https?|ftp)://[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gim

lo cual funcionaría con "http://vagabundia.blogspot.com/", pero destruiría "Vagabundia"...

:(

Responder
Pavelkapaz  

Saludos Jmiur.
Te agradesco el tutorial, aunque me cabe una pregunta haber si me puedes ayudar con algo. Sucede que estoy trabajando con una nueva plantilla para mi blog, y le estoy aplicando todas las modificaciones en un blog auxiliar antes de aplicarlo a mi blog oficial ...

sucede que la plantilla traia una script que generaba resumen de las entradas... Lo estuve modificando para que quedara como yo queria... pero me falta algo, y nose si sera posible agregarlo.

Como toda forma de resumen, aquí se muesta hasta una cierta cantidad del texto de las entradas, y al final termina con un [....], para referir que falta por leer.. pero además de esto me gustaria agregar un boton de LEER MÁS, ya que solo se puede acceder a las entradas aprentando en el titulo de estas.

Este es el Blog donde estoy modificando la plantilla: BLOG AUXILIAR

Este es el SCRIPT que genera el resume (te agrego todo el codigo, ya qu nose por donde se puede colocar un LEER MÁS, y como hacerlo:

//")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'[....]';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = 'span style="float:left; margin:10px 10px 10px 0px;max-width:600px;padding:5px 5px 0px 5px; background:#dedede;"img src="http://www.fileden.com/files/2008/12/19/2230412/biblioinfernal.PNG" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"//span';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = 'span style="float:left; margin:10px 10px 10px 0px;max-width:600px;padding:5px 5px 0px 5px; background:#dedede;"img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"';
summ = summary_img;
}
var summary = imgtag + 'div> + removeHtmlTag(div.innerHTML,summ) + '/div';
div.innerHTML = summary;
}


Te agradeceria tu ayuda
Gracias nuevamente por el tutorial
Saludos

Responder
JMiur  

Todo se remite siempre a lo mismo, a crear la salida con los datos; por ejemplo, allí es esta:

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;

Pero, en ese script, no está el dato de la URL del post que es lo que te faltaria trnasferirle a la función de alguna manera y luego, con ese dato, se construye la salida.

Por ejemplo, si el dato se llamara urlpost:

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
summary += '<a href="' + urlpost + '" class=botonmas"><img src="URL_imagen" /></a>'
div.innerHTML = summary;

pero falta ese dato. Vas a tener que pensar la forma de trasferirlo.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR