Archivo JS para funciones Javascript

Muchos os preguntaréis como convertir un archivo gif o jpg en un archivo JS, pero la cosa no es como parece, ya que js no es una extensión de un archivo, como jpg o gif, sino que nos indica que se sustituye un código completo java script.

Si vamos a usar una función Javascript hay dos posibilidades:

Ponerlo directamente en la página entre las etiquetas < head> y < /head>. Necesitamos tener acceso al código fuente, cosa difícil en muchas páginas.

Utilizar un archivo externo con extensión .js, lo cual es más ligero ya que no se carga en tu página sino en la del usuario y se pone en varios lugares que los foros tienen preparados a tal efecto.

En el código Java sí se ponen imágenes hechas en extensiones normales, así que si tienes tu propia imagen, primero pon la función java en cualquier lugar que te permita editar y guardarla en tus carpetas, después súbela a un hosting de archivos que la admita y luego ya solo tienes que hacer la conexión a el código.

Esto no es fácil como comprenderás, por eso la mayoría usamos imágenes que ya estén así configuradas y nos limitamos a poner los códigos que han hecho otros. Si quieres hacerlo, te digo como se hace paso a paso:

1º En un documento nuevo del "blog de notas" escribe las funciones elegidas, sin incluir las etiquetas , porque aún no las necesitamos. Después guárdalo.

2º En “archivo” selecciona “guardar como” y como nombre pon el de tu archivo pero con terminación “.js”, por ejemplo “nieve1.js”. En donde dice “Tipo” marca “Todos los archivos” y en “codificación” marca “UTF-8″ este archivo .js es el que tienes que subir a un host.

3º En nuestra página vamos a donde esté el código HTML, entre las etiquetas y o donde admita el código javascript. Allí ponemos está fórmula:

Código:

<script src="URL/nieve1.js" type="text/javascript"></script>

Nieve1.js es el archivo nuestro y la URL sería la de la página del alojamiento donde esté.

Por ejemplo este que tengo de lluvia de copos de nieve.

Código:

<script src="http://astuforum.free.fr/js/neige.js"></script>

Para quien aún no lo haya entendido, pongo un código java completo de poner nieve en un foro. Esto es lo que ponemos en el host, veréis que hay imágenes de copos de nieve con extensión gif:

Código:

<! --- nieve --- >

<script language="JavaScript1.2">
 
 
//Pre-load your image below!
grphcs=new Array(6)
Image0=new Image();
Image0.src=grphcs[0]="http://i285.photobucket.com/albums/ll78/Artes-ana/GIFTS/GIFTS%20DE%20NAVIDAD/neige.gif";
Image1=new Image();
Image1.src=grphcs[1]="http://i285.photobucket.com/albums/ll78/Artes-ana/GIFTS/GIFTS%20DE%20NAVIDAD/neige.gif"
Image2=new Image();
Image2.src=grphcs[2]="http://i285.photobucket.com/albums/ll78/Artes-ana/GIFTS/GIFTS%20DE%20NAVIDAD/neige.gif"
Image3=new Image();
Image3.src=grphcs[3]="http://i285.photobucket.com/albums/ll78/Artes-ana/GIFTS/GIFTS%20DE%20NAVIDAD/neige.gif"
Image4=new Image();
Image4.src=grphcs[4]="http://i285.photobucket.com/albums/ll78/Artes-ana/GIFTS/GIFTS%20DE%20NAVIDAD/neige.gif"
Image5=new Image();
Image5.src=grphcs[5]="http://i285.photobucket.com/albums/ll78/Artes-ana/GIFTS/GIFTS%20DE%20NAVIDAD/neige.gif"
 
Amount=8; //Smoothness depends on image file size, the smaller the size the more you can use!
Ypos=new Array();
Xpos=new Array();
Speed=new Array();
Step=new Array();
Cstep=new Array();
ns=(document.layers)?1:0;
ns6=(document.getElementById&&!document.all)?1:0;
 
if (ns){
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");
}
}
else{
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
}
document.write('</div></div>');
}
WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
for (i=0; i < Amount; i++){                                                               
 Ypos[i] = Math.round(Math.random()*WinHeight);
 Xpos[i] = Math.round(Math.random()*WinWidth);
 Speed[i]= Math.random()*5+3;
 Cstep[i]=0;
 Step[i]=Math.random()*0.1+0.05;
}
function fall(){
var WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
var WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
var hscrll=(ns||ns6)?window.pageYOffset:document.body.scrollTop;
var wscrll=(ns||ns6)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < Amount; i++){
sy = Speed[i]*Math.sin(90*Math.PI/180);
sx = Speed[i]*Math.cos(Cstep[i]);
Ypos[i]+=sy;
Xpos[i]+=sx;
if (Ypos[i] > WinHeight){
Ypos[i]=-60;
Xpos[i]=Math.round(Math.random()*WinWidth);
Speed[i]=Math.random()*5+3;
}
if (ns){
document.layers['sn'+i].left=Xpos[i];
document.layers['sn'+i].top=Ypos[i]+hscrll;
}
else if (ns6){
document.getElementById("si"+i).style.left=Math.min(WinWidth,Xpos[i]);
document.getElementById("si"+i).style.top=Ypos[i]+hscrll;
}
else{
eval("document.all.si"+i).style.left=Xpos[i];
eval("document.all.si"+i).style.top=Ypos[i]+hscrll;
}
Cstep[i]+=Step[i];
}
setTimeout('fall()',20);
}
 
window.onload=fall
//-->
</script>

Esto tan corto es lo que ponemos si hacemos un enlace al host donde está guardado este código:

Código:

<script src="http://astuforum.free.fr/js/neige.js"></script>