encapsular codigo JavaScript

[don vito]

buenas tardes, tengo un gran choclo de codigo en el HEAD de javaScrip, son dos script... es inmenso... quisiera saber si lo puedo meter en un archivo separado y llamarlo desde el HTML, si que tener todo escrito. desde ya mis agradecimientos.

[caricatos]

Hola:

Puedes ponerlo en un archivo externo y enlazarlo con el atributo src del tag script...

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

... y funciones.js solo con el código:
//
var autor = "Yo";
function MePresento() {
alert(autor);
}
//

Saludos

[Mickz]

En efecto si se puede hacer eso de hecho es muy recomendable hacerlo si lo vas a ocupar en varias paginas ya que si necesitas hacer alguna modificacion no necesitas hacerlo en cada pagina que pusiste tu encabezado si no solo en la el archivo *.js.

psos
1. creas tu archivo *.js (trae el codigo que necesitas para tu header)
2. lo llamans de esta manera en tu html(<SCRIPT type="text/javascript" src="<html:rewrite page="ruta del archivo *.js"/> "></SCRIPT>)
3.- donde quieras colocar tu arcivo dentro del html lo llamas de la siguiente manera.

<script type="text/javascript">
<!--
nombre de la funcion();
-->
</script>

Espero te sirva salu2....

[don vito]

muchas gracias, ahora bien; como para variar no me funca...

esto es lo q tengo en el HEAD:

<script language="JavaScript" type="text/javascript">
posArriba = 50
posIzquierda = 0
anchoOp = 129
menuPrin=4
var tunIex=navigator.appName=="Microsoft Internet Explorer"?true:false;
var tiempo
function menucete(ide,num){
espan = document.createElement("span")
document.getElementById('Men_'+num).appendChild(es pan)
espan.id=ide.toLowerCase(ide)+'_'+num
espan.className="subMe"
espan.cierra = true
espan.tiempo = 0
espan.style.top="-1px"
espan.onmouseout=function(){
setTimeout('ocultaP()',1000)
}
with(espan.style){
width = anchoOp+"px"
}
posIzquierda += anchoOp
construye(ide+'_'+num,eval('Op_'+num).subO)
}
function seccion(tex,enl,dstn,subO,an,dir){
this.tex = tex
this.enl = enl
this.dstn = dstn
this.subO = subO
this.dir = dir
this.an = an
}
var Op_0 = new seccion("Placas de Policarbonato",null,null,5)
var Op_0_0=new seccion('Policarbonato Alveolar','alveolar.htm')
var Op_0_1=new seccion('Policarbonato Compacto','compacto.htm')
var Op_0_2=new seccion('Policarbonato Ondulado','ondulado.htm')
var Op_0_3=new seccion('Chapa Ondulada Policloruro de Vinilo','chapas.htm')
var Op_0_4=new seccion('Perfileria Accesorios','accesorios_poli.htm')
var Op_1 = new seccion("Construcción en Seco",null,null,4)
var Op_1_0=new seccion('Placas de Yeso','placas_yeso.htm')
var Op_1_1=new seccion('Placas Acústicas','placas_acusticas.htm')
var Op_1_2=new seccion('Puertas','puertas.htm')
var Op_1_3=new seccion('Perfileria Accesorios','accesorios_seco.htm')
var Op_2 = new seccion("Vivienda Industrializada",null,null,3)
var Op_2_0=new seccion('Placas para Exterior','placas_exterior.htm')
var Op_2_1=new seccion('Placas Cementicias','placas_cementicia.htm')
var Op_2_2=new seccion('Perfileria Accesorios','accesorios_vivienda.htm')
var Op_3 = new seccion("Cielorrasos Desmontables",null,null,3)
var Op_3_0=new seccion('Placas Desmontables','placas_desmontables.htm')
var Op_3_1=new seccion('Cielorrasos de PVC','pvc_cielorrasos.htm')
var Op_3_2=new seccion('Perfileria Accesorios','accesorios_cielorrasos.htm')

var anchoTotal = 532
if(!tunIex){anchoTotal += menuPrin*3}
function menPrin(){
menuP=document.createElement('div')
if(!tunIex){
tablaP = document.createElement('table')
tablaP.border=1
menuP.appendChild(tablaP)
fila=document.createElement('tr')
fila.id ='filita'
tablaP.appendChild(fila)
tablaP.cellSpacing='0'
tablaP.className='celda'
}
document.getElementById('tunMenu').appendChild(men uP)
menuP.className = "subMeP"
menuP.id = 'MenuPrincipal'
menuP.style.visibility='hidden'
menuP.style.position="absolute"
menuP.style.width = anchoTotal +"px"
for(s=0; s<menuPrin; s++){
if(!tunIex){opcionP=document.createElement('div')}
else{opcionP=document.createElement('span')}
opcionP.className = "botonesP"
opcionP.style.width= anchoOp+'px'
document.getElementById('MenuPrincipal').appendChi ld(opcionP)

opcionP.id='Men_'+s
opcionP.onclick=function(){
}
if(!tunIex){
celda = document.createElement('td')
document.getElementById('filita').appendChild(celd a)
celda.id='celda_' + s
celda.appendChild(opcionP)
celda.className='celda'
}
if(eval('Op_'+s).subO > 0){
menucete('Op',s)
}
}
}
var subs=new Array(0)
function construye(ide,num){
subOp=0
for(m=0; m<num; m++){
opchon = eval(ide +'_' + m)
caja = document.createElement("div")
boton = document.createElement("div")
boton.appendChild(caja)
caja.className='Caj'
document.getElementById(ide.toLowerCase()).appendC hild(boton)
identi = ide.toLowerCase() + "_" + m
caja.id=identi+'caja'
boton.id = identi
boton.className = 'botones'
document.getElementById(identi).appendChild(docume nt.createTextNode(opchon.tex))
salto = document.createElement('br')
boton.onmouseover=function(){
this.className='botonesHover'
this.parentNode.cierra=false
muestra(this.parentNode.id)
}
boton.onmouseout=function(){
this.className='botones'
this.parentNode.cierra = true
}
if(opchon.subO > 0){
subs[subs.length] = identi
subOp++
boton.style.cursor='default'
}
else{
boton.style.cursor=cur
if(opchon.enl!=null){
boton.enl=opchon.enl
boton.dstn=opchon.dstn
boton.onclick=function(){
enlaces(this.enl,this.dstn)
}
}
}

}
if(subs.length>0){construyeSub(subs)}
}
function construye2(ide,num){
for(m=0; m<num; m++){
opchon = eval(ide +'_' + m)
caja = document.createElement("div")
boton = document.createElement("div")
boton.appendChild(caja)
caja.className='Caj'
document.getElementById(ide.toLowerCase()+'_sub'). appendChild(boton)
identi = ide.toLowerCase() + "_" + m
boton.id = identi
caja.id=identi+'caja'
boton.className = 'botones'
document.getElementById(identi).appendChild(docume nt.createTextNode(opchon.tex))
salto = document.createElement('br')
boton.onmouseover=function(){this.className='boton esHover'}
boton.onmouseout=function(){this.className='botone s'}


if(opchon.subO > 0){
subs[subs.length] = identi
subOp++
boton.style.cursor='default'
}
else{
boton.style.cursor=cur
if(opchon.enl!=null){
boton.enl=opchon.enl
boton.dstn=opchon.dstn
boton.onclick=function(){
enlaces(this.enl,this.dstn)
}
}
}

}
}
var cur=tunIex?'hand':'pointer'
function construyeSub(lista){
largo = subs.length
for(t=0; t<subs.length;t++){
if(subs[t] != null){
obj = subs[t].charAt(0).toUpperCase() + subs[t].substr(1)
obj2 = subs[t].charAt(0).toUpperCase() + subs[t].substring(1,subs[t].length-2)
espan = document.createElement("span")
document.getElementById(subs[t]+'caja').appendChild(espan)
espan.id=subs[t]+'_sub'
espan.className="subMe"
espan.cierra = true
document.getElementById(subs[t]).onmouseover=function(){
this.className = 'botonesHover'
this.parentNode.cierra=false
muestra(this.id+'_sub')
}
document.getElementById(subs[t]).onmouseout=function(){
this.className = 'botones'
this.parentNode.cierra = true
oculta(this.id+'_sub')
}
espan.onclick=function(){

}
if(eval(obj2).an){An=eval(obj2).an}
else{An=anchoOp}
if(eval(obj).an){An2=eval(obj).an}
else{An2=anchoOp}
if(eval(obj).dir=='iz')
{pIz=-(An2-20)+"px"}
else{pIz=(An-20)+"px";}

with(espan.style){
position="absolute"
width = An2+"px"
left= pIz
visibility = 'hidden'
}
construye2(obj,eval(obj).subO)
subs[t] = null
}
}
}
function enlaces(enl,dstn){
if(dstn != null && dstn.toLowerCase() == 'nueva'){
window.open(enl)
}
else if(dstn==null){
location.href=enl
}
else{
eval(dstn+'.location.href='+enl)
}
}
function muestra(cual){
document.getElementById(cual).style.visibility='vi sible'
}
function oculta(cual){
document.getElementById(cual).style.visibility='hi dden'
}
function ocultaP(){
for(y=0;y<menuPrin;y++){
if(document.getElementById('op_'+y)!=null){
if(document.getElementById('op_'+y).cierra){
document.getElementById('op_'+y).style.visibility= 'hidden'
}
}
}
}
var reaj=0
function centra(){
anM=(anchoOp*menuPrin)+(4*menuPrin)+reaj
posCentra =anM/2
document.getElementById('MenuPrincipalP').style.wi dth=anM+'px'
marco.document.getElementById('MenuPrincipal').sty le.width=anM+'px'
document.getElementById('MenuPrincipalP').style.le ft='50%'
marco.document.getElementById('MenuPrincipal').sty le.left='50%'
document.getElementById('MenuPrincipalP').style.ma rginLeft=-posCentra
marco.document.getElementById('MenuPrincipal').sty le.marginLeft=-posCentra
reAjusta()
}
function reAjusta(){
if((document.getElementById('tuMen0').scrollHeight *2)<document.getElementById('MenuPrincipalP').scro llHeight){reaj+=2; centra()}
}
function inicio(){
////////////////////////////////////////////
menuP=document.createElement('div')
if(!tunIex){
tablaP = document.createElement('table')
tablaP.border=1
menuP.appendChild(tablaP)
fila=document.createElement('tr')
fila.id ='filitaP'
tablaP.appendChild(fila)
tablaP.cellSpacing='0'
tablaP.className='celda'
}
document.getElementById('tunMenu').appendChild(men uP)
menuP.className = "subMeP"
menuP.id = 'MenuPrincipalP'
menuP.style.width = anchoTotal+"px"
for(s=0; s<menuPrin; s++){
if(!tunIex){opcionP=document.createElement('div')}
else{opcionP=document.createElement('span')}
opcionP.className = "botones"
opcionP.style.width= anchoOp+'px'
opcionP.appendChild(document.createTextNode(eval(' Op_'+s).tex))
document.getElementById('MenuPrincipalP').appendCh ild(opcionP)
opcionP.style.cursor = cur
opcionP.id='tuMen'+s
if(eval('Op_'+s).enl!=null){
opcionP.enl=eval('Op_'+s).enl
opcionP.dstn=eval('Op_'+s).dstn
opcionP.onclick=function(){
enlaces(this.enl,this.dstn)
}
}
if(!tunIex){
celda = document.createElement('td')
document.getElementById('filitaP').appendChild(cel da)
celda.id='celdaP_' + s
celda.appendChild(opcionP)
celda.className='celda'

}
}
////////////////////////////////////////////

for(n=0;n<menuPrin;n++){
document.getElementById('tuMen'+n).onmouseover=fun ction(){
if(document.getElementById('op_'+this.id.substr(5) )!=null){
clearTimeout(tiempo)
document.getElementById('op_'+this.id.substr(5)).c ierra=false
ocultaP()
muestra('op_'+this.id.substr(5))
}
else{
clearTimeout(tiempo)
ocultaP()
}
}
document.getElementById('tuMen'+n).onmouseout=func tion(){
if(document.getElementById('op_'+this.id.substr(5) )!=null){
document.getElementById('op_'+this.id.substr(5)).c ierra=true
tiempo =setTimeout('ocultaP()',1000)
}
}
}
menPrin()
}
var activo = false
window.onload=inicio
</script>

[don vito]

<style type="text/css">
<!--
.botones {
font-family: Tahoma, Verdana, Arial;
font-size: 12px;
font-weight: bold;
background-color: #FF0000;
text-align: center;
border: 1px solid #FFFFFF;
margin: 2px;
vertical-align: middle;
color: #FFFFFF;

}
.botonesHover{
font-family: Tahoma, Verdana, Arial;
font-size: 12px;
font-weight: bold;
background-color: #000000;
text-align: center;
border: 1px solid #333333;
margin: 2px;
vertical-align: top;
color: #FFFFFF;
}
.subMe {
visibility: hidden;
position: absolute;
font-family: Tahoma, Verdana, Arial;
font-size: 12px;
font-weight: bold;
background-color: #cccccc;
text-align: center;
border: 1px solid #FFFFFF;
}
.subMeP {
font-family: Tahoma, Verdana, Arial;
font-size: 12px;
font-weight: bold;
background-color: #cccccc;
}
.botonesP {
font-family: Tahoma, Verdana, Arial;
font-size: 12px;
font-weight: bold;
background-color: #D8D8C5;
border: 1px solid #009900;
margin: 2px;
color: #000000;
vertical-align: top;
height: 10px;
}
.celda{
margin:0;
padding: 0;
}
.pepe{
border: 1px solid #ff0000;
position:absolute;
left:0
}
-->
</style>





y para habilitar el correspondiente menu, escibo en el BODY:


<div id="tunMenu"></div>



A todo el codigo mencionado del HEAD lo puse dentro de un archivo: "men.js"

Por lo cual escribi en el HEAD:

<script type="text/javascript" language="JavaScript1.2" src="<A href="http://www.baukraft.com.ar/productos/men.js"></script">http://www.baukraft.com.ar/productos/men.js"></script>

ahora bien, no se que deberia poner en el codigo, en el BODY, para q lea las funciones q se encuentran dentro del archivo .js.

muchas gracias por la generosa participacion.

[fonoteca]

No es que sea un experto pero creo que debes darle un nombre al función.
Me explico:

Primero pones el enlace en el <head>
<script language="JavaScript" type="text/javascript" src="js/nombredelfichero.js"></script>

Luego, donde quieras que aparezca el contenido debes escribir algo similar a:

<script language="javascript">
nombreFuncion();
</script>

Siempre que al principio de tu fichero .js hayas escrito:
function nombreFunción()
{
posArriba = 50
posIzquierda = 0
anchoOp = 129
menuPrin=4
var tunIex=navigator.appName=="Microsoft Internet Explorer"?true:false;
(...)

Y creo que deberás incluir en <body onload=inicio();> para que arranque.

Haré pruebas y te confirmaré. Pero creo que va por ahí.

[caricatos]

Hola:

El atributo src solo debe tener una dirección válida, y por lo visto no lo haces así...

<script type="text/javascript" language="JavaScript1.2" src="http://www.baukraft.com.ar/productos/men.js"></script>

Saludos