JMiur [E]

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 diablo2 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

20 comentarios:

Erwin Salas  

Una consulta, hasta donde se de mis pocos conociemiento sde JavaScript, las buenas practicas nos indican q se debe de referenciarse los js como buena practica para el adecuado cargado de las paginas, lo q dices lo contradice ¿o es q no aplica en este caso?

Responder
JMiur  

Si con referenciar te refieres a que sean archivos externos, es verdad pero, eso tiene sentido cuando tenemos un servidor propio, en ese caso, el acceso es rápido y el archivo se cachea. Sin embargo, Blogger no ofrece un servidor propio para los blogs por lo tanto, al estar alojados en otro servidor, el acceso termina siendo más lento además de provocar trastornos como estar constantemente buscando uno.

La única excepción a esto son las librerías API de Google ya que esas si son cacheadas por el mismo Google y en ese caso, conviene usarlas en lugar de alojarlas nosotros.

Responder
BanakaBanaka!!  

Hola, JMiur, te cuento, acabo de instalarme el Explorer8 y no consigo entrar a determinadas páginas, ni mi blog, ni el de Rosa, ni Pizcos.... Con el tuyo me pasa una cosa curiosa, puedo acceder a la página principal, pero no a las de entradas individuales.
El mensaje que me aparece es el consabido:"Internet Explorer no puede abrir el sitio de http://xxxxxxx. Operación anulada."

No entiendo, porque si la cosa ya estaba solucionada con el 8, porqué sigue pasando... a ti no te ocurre? Se puede hacer algo? esperar?

Un saludo y gracias de antemano!!
Iván.

Responder
JMiur  

No, amigo, no veo que pase eso. Vengo usando IE8 hace tiempo sin mayores inconvenientes ¿Has revisado la configuración? No se me ocurre cuál exactamente, hablo en voz alta.

Creo que de no encontrarse el problema habría que reinstalarlo porque es muy raro que todos los dominios te muestren un error y un error tan grave como ese.

Responder
Graciela  

¡hola JMIUR!...madrecita querida: con tanto código, scrips tengo la 'capocha' (cabeza) dada vuelta...que goce usted de un día bello!!!

Responder
MALINA  

Hola querido amigo, aquí estoy yo de nuevo a consultarte un problemilla. En los comentarios de mi blog de libros, el nombre del autor aparece demasiado a la izq y no se lee parte del nombre. Me puedes decir como lo arreglo?
Ejemplo de una entrada con comentario

Responder
JMiur  

Malina:

En realidad, el nombre debe verse a la drecha pero, como se pone un ancho demasiado grande, no entra y aparece abajo a la izquierda. Sacando el ancho, se debería resolver y acomodarse correctamente:

.commenttext {
float:right;
width:500px;
}

Borra eso en negrita.

Responder
MALINA  

Perfecto y a la primera. Graciassssss y besos!

Responder
Adrian Reyes  

Una pregunta fuera del tema del JavaScript ... cuantas entradas se pueden publicar en blogger ??? porque llevo 10 meses con mi pagina y ya tengo 250 artículos publicados y no se si blogger tiene un limite de entradas o algo parecido

Por Favor Responde

www.GaitaZuliana.com.ve

Responder
JMiur  

Muy bien, Malina, me alegro :D

Adrián: No hay límites en la cantidad de entradas. Puedes tener tantas como quieras.

Responder
Gem@  

Muy buenos datos maestro, siempre actualizando para recordar lo que no debemos olvidar :)

Responder
JMiur  

Gem@: En Blogger aprendemos a fuerza de golpes :D

Responder
Adrian Reyes  

Gracias por responder ahora puedo estar tranquilo...

y como decían en otra pagina:

"en Blogger la mitad es misterio y la otra mitad es intuición" :D

Responder
JMiur  

Jajajajaja. Pués si, esa es una verdad absoluta :D

Responder
Luckitas  

Hola...una pregunta algo relacionada:
Yo rediriji mi blog a mi dominio personal que es .com.ar y ahora no me anda ningun JavaScript...sabes por que???

Gracias


www.luckitas.com.ar

Responder
JMiur  

No hay motivos para eso. Por ejemplo, el script digitalclock funciona perfectamente lo mismo que otros scripts internos de Blogger. Los otros, no podría decirte porque no sé si funcionaban antes o cómo lo hacían.

Responder
Nico  
Este comentario ha sido eliminado por el autor.
Responder
JMiur  

Eso no sería asincrónico, sólo se cargarían todos juntos. Asincrónico es cuando el resto de la página se sigue cargando mientras se cargan simultánemamente los scripts cosa que no es nada sencillo de hacer:

cargar Javascript asincronamente
más técnicas para cargar Javascript asincronamente

Responder
kate  

alguno sabe que puedo hacer para javascript no me deshabilite el boton enviar al intentar validar un formulario??? le agradeceria en el alma a quien me pueda ayudar :)

Responder
JMiur  

Dependerá de lo que estás haciendo; habría que verlo.

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