Resumen de dudas sobre JavaScript

Como son preguntas que se repiten una y otra vez, esta entrada trata de responder las más frecuentes referidas al tema de utilizar scripts en Blogger. Ya no se trata sólo de alojar los archivos sino, de usarlos correctamente.

Insisto, insisto, insisto: Lo mejor es agregarlos a la plantilla y utilizar la menor cantidad de archivos externos. De todas formas, la sintaxis correcta para agregar un script contenido en un archivo externo es la siguiente:

<script src='URL_archivo.js' type='text/javascript'></script>

¿Por qué es la correcta? Porque eso dicen las reglas establecidas por la w3.org. Estas, indican que no puede haber etiquetas que no tengan su correspondiente etiqueta de cierre. Sin embargo, pese a que Blogger se supone que sigue reglas estrictas en su plantilla y nos vuelve locos cambiando cosas a su antojo, no parece haber leido esta así que si escribimos eso, al guardarlo, veremos esto:

<script src='URL_archivo.js' type='text/javascript'/>

En la práctica, salvo que a alguien se le ocurra intentar validar su código (algo absurdo en Blogger) no tiene mayor importancia.

La extensión de esos archivos es .js pero eso, sólo es una convención, en realidad, puede ser cualquier otra o no tener ninguna en absoluto, basta que sea un archivo de texto plano sin formato y que el contenido sea un código válido y no contenga etiquetas HTML.

El atributo type es obligatorio y el atributo language que muchas veces se ve es innecesario a menos que el lenguaje del archivo no sea JavaScript. Eventualmente, se agrega un atriburto charset si el script contiene caracteres especiales:

<script src='URL_archivo.js' type='text/javascript' charset='utf-8' />

Por lo general, se ubican en el HEAD de la página, es decir, antes de la etiqueta </head> porque ese es el lugar donde nos aseguramos que funcionen. Esto, provoca que, al cargarse la página, se produzca una demora ya que el navegador debe acceder a esos archivos, leerlos y ejecutarlos. Mientras eso ocurre, el resto de los procesos de carga se detiene. No hay una regla fija que nos permita decir que todos los scripts deben ubicarse en tal o cual lugar de nuestra plantilla, depende de qué hagan, si no se está seguro de eso, mejor seguir las indicaciones de quienes los han desarrollado o probado.

Muchos de ellos DEBEN ser incluidos en el HEAD porque deben ser ejecutados de manera inmediata pero, esto no ocurre siempre. Algunos, DEBEN ser ejecutados después que la pagina ha sido cargada y para eso existen instrucciones específicas:

<script type='text/javascript'>
  window.onload=function() {
    // esto se ejecutará cuando la pagina haya termiando de cargarse
  }
</script>

Si el script posee instrucciones que modifican la página como innerHTML o appendChild, algunas versiones de Internet Explorer pueden generar un error "Internet Explorer no puede abrir el sitio de http://xxxxxxx. Operación anulada." así que, si debemos utilizarlas, hay que verificar que se ejecuten DESPUÉS que se ha cargado la página (más información). Este error, bastante común ha sido solucionado en IE8.

Una regla elemental es la siguiente: No podemos ejecutar un script que modifique nuestra página si eso que vamos a modificar aún no se ha creado.

Una página web se crea de manera secuencial, línea por línea tal cual se ve en el código fuente así que debemos estar atentos a ese orden. Por ejemplo:

<script type='text/javascript'> getElementById('ejemplo').style.display='none'; </script>
<div id='ejemplo'> ....... </div>

Es un error ya que el DIV llamado ejemplo se crea DESPUES del script y cuando este se ejecuta, aún no existe. El error generado dirá algo así: "getElementById is not defined" o "se esperaba un objeto".

Esto sería lo correcto:

<div id='ejemplo'> ....... </div>
<script type='text/javascript'> getElementById('ejemplo').style.display='none'; </script>

Es el tipo de error que se generará si un script se carga o se ejecuta en algún lugar, de manera equivocada. Por ejemplo es lo que ocurriría si ubicamos mal los scripts de los post relacionados, los emoticones, las diferentes funciones de expandir y contraer, etc. Todas ellas, dejarían de funcionar. Son funciones que se ejecutan al mostrar las entradas así que deben estar ANTES que estas se carguen.

Por el contrario, scripts como los de Twitter y Tumblr es conveniente ubicarlos al final de la página, antes de </body> para que se ejecuten después que la página ha sido cargada y de esa manera, tener el blog funcionando aún cuando los datos de esos servicios no sean accesibles. Sería bueno que Blogger hiciera lo mismo con algunos de sus scripts como los que manejan los comentarios, el buscador o los seguidores.

A diferencia del HTML, el lenguaje JavaScript es sensible a las mayúsculas y minúsculas así que ese detalle debe ser tenido muy en cuenta a la hora de darle nombre a las variables y las funciones.

Aunque hay excepciones, cada línea de código debe terminar con un punto y coma. Es una buena práctica acostumbrarse a hacerlo.

No es usual utilizar esto pero, los scripts externos también pueden cargarse usando código JavaScript; para esto, hay muchos métodos:

<script type='text/javascript'>
  window.onload=function(){
    if(!document.getElementById || !document.createElement){return;}
    var nuevoScript = document.createElement('script');
    nuevoScript.type = 'text/javascript';
    nuevoScript.src = 'URL_archivo';
    document.getElementsByTagName('head')[0].appendChild(nuevoScript);
  }
</script>

o bien podemos usar una función:

<script type='text/javascript'>
  function loadScript(src) {
    nuevoScript = document.createElement( 'script' );
    nuevoScript.src = src;
    nuevoScript.type = 'text/javascript';
    head = document.getElementsByTagName( 'head' )[0];
    head.appendChild(nuevoScript);
  }
</script>

Una función que usamos así:

<script type='text/javascript'>
  loadScript('URL_archivo');
</script>

Para agregar código Javascript válido en las plantillas de Blogger, lo mejor es usar CDATA porque ciertos caracteres como < > & están prohibidos salvo que formen parte del código mismo:

<script type="text/javascript">
//<![CDATA[
  ....... aquí va el código .......
//]]>
</script>

Si no lo hacemos y el código tiene esos caracteres, pueden aparecer mensajes de error o funcionar mal. Lo mismo ocurrirá con las comillas simples y dobles, los códigos serán cambiados por &#39; y &quot;, provocando errores impredescibles.

Es importante saber que un script puede tener un código que se ejecuta apenas es cargado o bien, una función que se ejecuta sólo cuando la invocamos. Por ejemplo:

<script type='text/javascript'>
  alert ('un mensaje'); 
  function ejemploFuncion() {
    alert ('otro mensaje'); 
  }
</script>

alert ('un mensaje'); ese ejecutará inmediatamente; en cambio, para que se ejecute alert ('otro mensaje'); debemos llamar a la función:

<script type='text/javascript'> ejemploFuncion(); </script>

Las funciones también puden ser ejecutadas mediante eventos como onclick, onmouseover, etc. Para hacer esto, incluimos esos eventos como atributos de una etiqueta HTML:

<a href='javascript:void(0);' onclick='ejemploFuncion();"> click </a>

Un ejemplo: click

En Blogger, el atributo href es complicado de resolver. Si bien siempre es mejor que tenga un destino real (una dirección) para que funcione aún cuando el visitante tenga JavaScript desactivado, no siempre podemos hacerlo.

Otra forma de llamar a una función es esta:

<a href='javascript:ejemploFuncion();"> click </a>

Otro ejemplo: click

Tampoco es necesario que la etiqueta sea un enlace, pude usarse casi cualquier otra:

<span onclick='javascript:ejemploFuncion();"> click </span>

Un último ejemplo: click