Tratando de entender JavaScript

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.