Link to home
Start Free TrialLog in
Avatar of ST3VO
ST3VOFlag for United Kingdom of Great Britain and Northern Ireland

asked on

Include external js from a js file

Hi all,

I have a large javascript file that I have broken into 3 .js file.

How can I import the other 2 .js files into the main .js file please?

Something like php's include.

hope you can help

thx

st3vo
ASKER CERTIFIED SOLUTION
Avatar of shobinsun
shobinsun
Flag of India image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of abel
abel
Flag of Netherlands image
The general answer would be: no, you cannot do that. That's because there is no such statement.

However, many libraries have come up with their own methods for including javascripts and the most common is to simple document.write the <script> elements. Instead of repeating those discussions, here's a simple how-to: http://www.cryer.co.uk/resources/javascript/script17_include_js_from_js.htm
Avatar of abel
abel
Flag of Netherlands image
lol, apparently we use the same google search, shobinsun! Exactly the same code/page... lol
Avatar of ST3VO
ST3VO
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

It's not working.

please see code sample attached.
// main.js file:
 
<script type="text/javascript">
function IncludeJavaScript(jsFile)
    {
      document.write('<script type="text/javascript" src="'
        + jsFile + '"></scr' + 'ipt>');
    }
</script>
 
IncludeJavaScript('second.js');
 
//rest of code here.....
 
 
//Then code of second.js
 
var text = new Array();
var header = new Array();
var linka = new Array();
var targa = new Array();
var divtext = new Array();
var divh = new Array();
var objst = new Array();
var objs = new Array();
var objsh = new Array();
 
//It's not working for some reason.

Open in new window

Avatar of abel
abel
Flag of Netherlands image
Your IncludeJavaScript statement is placed after the closing </script> tag. Place it in its own script block and you will have some more luck
Avatar of abel
abel
Flag of Netherlands image
Btw, you are saying:

"// main.js file:"

do you mean that the <script> tags are placed inside the js file? Because they are invalid there. The <script> tags should be placed in the HTML page instead, under the <head> part of the page.
Avatar of ST3VO
ST3VO
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

Nope, that didn't work either :o/
Avatar of shobinsun
shobinsun
Flag of India image
Hi

Use following code:

<script type="text/javascript">
function IncludeJavaScript(jsFile)
    {
      document.write('<script type="text/javascript" src="'
        + jsFile + '"></scr' + 'ipt>');
    }
IncludeJavaScript('second.js');
 
//rest of code here.....
 
 
//Then code of second.js
 
var text = new Array();
var header = new Array();
var linka = new Array();
var targa = new Array();
var divtext = new Array();
var divh = new Array();
var objst = new Array();
var objs = new Array();
var objsh = new Array();
 
//It's not working for some reason.
</script>

Open in new window

Avatar of abel
abel
Flag of Netherlands image
> Nope, that didn't work either :o/

check out the post of shobinson, he shows in code what I wrote in words. Maybe still a mistake?
Avatar of ST3VO
ST3VO
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

Nope..that didn't work either
Avatar of abel
abel
Flag of Netherlands image
maybe time to show your whole code, or zip it and upload it? Is it online somewhere for us to see?
Avatar of ST3VO
ST3VO
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

OK, I'll add the whole code (working on single .js page) - which works.

Please read comments.

See attached code and comments.


//main.js code
 
//this code below I want to cut off and save it on external js file
var text = new Array();
var header = new Array();
var linka = new Array();
var targa = new Array();
var divtext = new Array();
var divh = new Array();
var objst = new Array();
var objs = new Array();
var objsh = new Array();
//this above code would go on external js file.
 
//next code fragment
//I want to place this one on an external .js file too
text[0] = "news 1";
text[1] = "news 2";
text[2] = "news 3";
 
header[0] = "News header 1 :";
header[1] = "News header 2 :";
header[2] = "News header 3 :";
 
linka[0] = "http://www.link1.com/";
linka[1] = "http://www.link2.com/";
linka[2] = "http://www.link3.com/";
 
targa[0] = "_blank";
targa[1] = "_blank";
targa[2] = "_blank"; 
 
//so the above whole go in an external .js file too.
 
//now the rest of the main.js code which will stay here.
uagent = window.navigator.userAgent.toLowerCase();IEB=(uagent.indexOf('msie') != -1)?true:false;var scompat = document.compatMode;var kalan=0;var vcurr=0;var vnext=0;var str2='';var mc=0;mc=text.length;stepc=parseInt(20*(4000/1000));dif=0.00;op=1.00;dif=(1.00/stepc);var RealTickerWidth=0;var RealTickerHeight=0;var CalcIcWidth=0;var CalcIcHeight=0;var nstheight=0,nst2width=0;nstheight=22-1-1;nst2width=500-1-1;var icwidth=500;var icheight=22;var msgw,msgh;msgw=500-120;if((IEB==true)&&(scompat == "BackCompat" )){    RealTickerWidth=500;    RealTickerHeight=22;}else{    RealTickerWidth=500-2*(1);    RealTickerHeight=22-2*(1);}    CalcIcWidth=500-2*(1);    CalcIcHeight=22-2*(1);    str2='';        str2=str2+'<div style="position:relative;width'+RealTickerWidth+':px;height:'+RealTickerHeight+'px;left:0px;top:0px;overflow:hidden;visibility:visible;'+'border-style:solid; border-width:1px; border-color:#000000;'+'">';        for(i=0;i<mc;i++)    {        divh[i]='<div id="dh'+i+'" style="position:absolute;width:'+120+'px; height:'+CalcIcHeight+'px;visibility:inherit;background:'+'#990000'+'; COLOR:#E9E9E9;padding-top:'+3+'px;padding-left:'+0+'px;'+'left:0px; top:0; FONT-FAMILY: '+'Verdana'+'; FONT-SIZE: '+9+'pt; font-style: '+'normal'+'; font-weight: '+'bold'+'; TEXT-DECORATION: '+'none'+';margin:0px; overflow:hidden;text-align:'+'center'+';cursor: default;">';        divtext[i]='<div id="d'+i+'" style="position:absolute;width:'+(CalcIcWidth-120-0)+'px;height:'+CalcIcHeight+'px;left:'+120+'px; top:0;visibility:inherit;background:#EEEEEE;COLOR:'+'#060606'+'; '+'padding-top:'+3+'px;padding-left:'+8+'px;'+' FONT-FAMILY: '+'Verdana'+'; FONT-SIZE: '+'8'+'pt; font-style: '+'normal'+'; font-weight: '+'normal'+'; margin:0px; TEXT-DECORATION: '+'none'+'; overflow:hidden;text-align:'+'left'+';cursor: default;" onmouseover="mdivmo('+i+')" onmouseout ="restime('+i+')" onclick="butclick('+i+')">';        str2=str2+'<div id="op'+i+'" style="position:absolute;overflow:hidden;visibility:hidden;left:0px;top:0px;width:'+CalcIcWidth+'px; height:'+CalcIcHeight+'px;border-style:solid;border-width:0px;">';        str2=str2+''+divh[i]+''+header[i]+'</div>'+divtext[i]+''+text[i]+'</div>';        str2=str2+'</div>';    }    str2=str2+'</div>';		function mdivmo(gnum){    if(linka[gnum]!='')    {		objs[gnum].style.color='#B40000';		objs[gnum].style.cursor='pointer';		window.status='Unregistered version. Visit:www.scriptocean.com';	}   }function restime(gnum2){	objs[gnum2].style.color='#060606';	window.status='';    }function butclick(gnum3){}function zindx(){	objst[vnext].style.visibility="visible";	objst[vcurr].style.zIndex=2;	objst[vnext].style.zIndex=3;}function Sonraki(){	vcurr=vnext;	vnext=vnext+1;		if(vnext>=mc)	{		vnext=0;	}}function dotrans(){    if(vnext!=vcurr)    {        if(IEB){spageObj.filters[0].apply();}        objs[vnext].style.color='#060606';        objst[vnext].style.visibility='visible';        objst[vcurr].style.visibility='hidden';        if(IEB){spageObj.filters[0].play();}    }    Sonraki();    setTimeout('dotrans()',3000+4000);}function dotransff(){	op=op-dif;		if(op<(0.00)){op=0.00;}		objst[vcurr].style.opacity = op;	objst[vnext].style.opacity = 1.00-op;	if(op>(0.00))	{		setTimeout('dotransff()',50);	}	else	{		objst[vcurr].style.zIndex=2;		objst[vnext].style.zIndex=3;		Sonraki();	    setTimeout('beftrans()',3000);					}}function beftrans(){	op=1.00;	objst[vcurr].style.visibility="visible";	objst[vnext].style.visibility="visible";		objst[vcurr].style.zIndex=3;	objst[vnext].style.zIndex=2;		objst[vcurr].style.opacity = 1.00;		objst[vnext].style.opacity = 1.00;			dotransff();	}function DoScrollUp(){    kalan=kalan-Math.ceil(kalan/(4000/1000));	objst[vcurr].style.top=""+(kalan-CalcIcHeight)+"px";	objst[vnext].style.top=""+kalan+"px";    if(kalan<=0)    {            Sonraki();        kalan=CalcIcHeight;	    objst[vnext].style.top=""+kalan+"px";        zindx();                 timeo=setTimeout('DoScrollUp()',3000);        }    else    {        setTimeout('DoScrollUp()',50);        }}function DoSlide(){	kalan=kalan-Math.ceil(kalan/(4000/1000));	objst[vcurr].style.left=""+(kalan-CalcIcWidth)+"px";	objst[vnext].style.left=""+kalan+"px";		if(kalan<=0)	{    		Sonraki();		kalan=CalcIcWidth;		objst[vnext].style.left=""+kalan+"px";	        		zindx();                  		timeo=setTimeout('DoSlide()',3000);	}	else	{		setTimeout('DoSlide()',50);    	}}function dofirst(){    var i=0;    for(i=0;i<mc;i++)    {        objs[i]=document.getElementById("d"+i);        objs[i].style.left=""+120+"px";        objs[i].style.top="0px";        objsh[i]=document.getElementById("dh"+i);        objsh[i].style.left="0px";        objsh[i].style.top="0px";        objst[i]=document.getElementById("op"+i);        objst[i].style.left="0px";        objst[i].style.top="0px";        objst[i].style.visibility="hidden";    }    objst[0].style.visibility="visible";            if(2==2)    {            kalan=CalcIcWidth;        vnext=0;        Sonraki();        zindx();        objst[vnext].style.left=""+kalan+"px";                setTimeout('DoSlide()',3000);    }    else if(2==4)    {            kalan=CalcIcHeight;        vnext=0;        Sonraki();        zindx();                setTimeout('DoScrollUp()',3000);    }    else if(2==5)    {		if(IEB){setTimeout('dotrans()',3000);}		else{setTimeout('beftrans()',3000);}    }    else    {        setTimeout('dotrans()',3000);    }}function initte(){    spageObj=document.getElementById('spage');        if(!spageObj)    {        setTimeout('initte()',200);    }    spageObj.innerHTML=str2;    vnext=1;    if(vnext>=mc){vnext=0;}    spageObj.style.left="0px";    spageObj.style.top="0px";    setTimeout('dofirst()',100);    }setTimeout('initte()',100);		       
 
 
//Now the html file code
<html>
<head><title></title></head>
<body topmargin=0 leftmargin=0 rightmargin=0>
<center>
<div style="position:absolute;left:0px;top:0px;width:500px; height:22px;overflow:hidden; margin:0px;"><div id="spage" style="position:absolute;left:0px;top:0px; width:500px; height:22px; background: #EEEEEE;  overflow:hidden; ;"></div>
<script language="javascript" src="main.js"></script>
 
</div>
</center>
</body></html>
 
//So, that's all the code.
// Hope you can help.

Open in new window

SOLUTION
Avatar of abel
abel
Flag of Netherlands image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of shobinsun
shobinsun
Flag of India image
Hi,

hope this will work for you.
<script type="text/javascript">
function IncludeJavaScript(jsFile)
    {
      document.write('<script type="text/javascript" src="'
        + jsFile + '"></scr' + 'ipt>');
    }
IncludeJavaScript('second.js');
 
//main.js code
 
 
 
//next code fragment
//I want to place this one on an external .js file too
text[0] = "news 1";
text[1] = "news 2";
text[2] = "news 3";
 
header[0] = "News header 1 :";
header[1] = "News header 2 :";
header[2] = "News header 3 :";
 
linka[0] = "http://www.link1.com/";
linka[1] = "http://www.link2.com/";
linka[2] = "http://www.link3.com/";
 
targa[0] = "_blank";
targa[1] = "_blank";
targa[2] = "_blank"; 
 
//so the above whole go in an external .js file too.
 
//now the rest of the main.js code which will stay here.
uagent = window.navigator.userAgent.toLowerCase();IEB=(uagent.indexOf('msie') != -1)?true:false;var scompat = document.compatMode;var kalan=0;var vcurr=0;var vnext=0;var str2='';var mc=0;mc=text.length;stepc=parseInt(20*(4000/1000));dif=0.00;op=1.00;dif=(1.00/stepc);var RealTickerWidth=0;var RealTickerHeight=0;var CalcIcWidth=0;var CalcIcHeight=0;var nstheight=0,nst2width=0;nstheight=22-1-1;nst2width=500-1-1;var icwidth=500;var icheight=22;var msgw,msgh;msgw=500-120;if((IEB==true)&&(scompat == "BackCompat" )){    RealTickerWidth=500;    RealTickerHeight=22;}else{    RealTickerWidth=500-2*(1);    RealTickerHeight=22-2*(1);}    CalcIcWidth=500-2*(1);    CalcIcHeight=22-2*(1);    str2='';        str2=str2+'<div style="position:relative;width'+RealTickerWidth+':px;height:'+RealTickerHeight+'px;left:0px;top:0px;overflow:hidden;visibility:visible;'+'border-style:solid; border-width:1px; border-color:#000000;'+'">';        for(i=0;i<mc;i++)    {        divh[i]='<div id="dh'+i+'" style="position:absolute;width:'+120+'px; height:'+CalcIcHeight+'px;visibility:inherit;background:'+'#990000'+'; COLOR:#E9E9E9;padding-top:'+3+'px;padding-left:'+0+'px;'+'left:0px; top:0; FONT-FAMILY: '+'Verdana'+'; FONT-SIZE: '+9+'pt; font-style: '+'normal'+'; font-weight: '+'bold'+'; TEXT-DECORATION: '+'none'+';margin:0px; overflow:hidden;text-align:'+'center'+';cursor: default;">';        divtext[i]='<div id="d'+i+'" style="position:absolute;width:'+(CalcIcWidth-120-0)+'px;height:'+CalcIcHeight+'px;left:'+120+'px; top:0;visibility:inherit;background:#EEEEEE;COLOR:'+'#060606'+'; '+'padding-top:'+3+'px;padding-left:'+8+'px;'+' FONT-FAMILY: '+'Verdana'+'; FONT-SIZE: '+'8'+'pt; font-style: '+'normal'+'; font-weight: '+'normal'+'; margin:0px; TEXT-DECORATION: '+'none'+'; overflow:hidden;text-align:'+'left'+';cursor: default;" onmouseover="mdivmo('+i+')" onmouseout ="restime('+i+')" onclick="butclick('+i+')">';        str2=str2+'<div id="op'+i+'" style="position:absolute;overflow:hidden;visibility:hidden;left:0px;top:0px;width:'+CalcIcWidth+'px; height:'+CalcIcHeight+'px;border-style:solid;border-width:0px;">';        str2=str2+''+divh[i]+''+header[i]+'</div>'+divtext[i]+''+text[i]+'</div>';        str2=str2+'</div>';    }    str2=str2+'</div>';               function mdivmo(gnum){    if(linka[gnum]!='')    {              objs[gnum].style.color='#B40000';               objs[gnum].style.cursor='pointer';              window.status='Unregistered version. Visit:www.scriptocean.com';        }   }function restime(gnum2){   objs[gnum2].style.color='#060606';      window.status='';    }function butclick(gnum3){}function zindx(){       objst[vnext].style.visibility="visible";        objst[vcurr].style.zIndex=2;    objst[vnext].style.zIndex=3;}function Sonraki(){        vcurr=vnext;    vnext=vnext+1;          if(vnext>=mc)   {               vnext=0;        }}function dotrans(){    if(vnext!=vcurr)    {        if(IEB){spageObj.filters[0].apply();}        objs[vnext].style.color='#060606';        objst[vnext].style.visibility='visible';        objst[vcurr].style.visibility='hidden';        if(IEB){spageObj.filters[0].play();}    }    Sonraki();    setTimeout('dotrans()',3000+4000);}function dotransff(){ op=op-dif;              if(op<(0.00)){op=0.00;}         objst[vcurr].style.opacity = op;        objst[vnext].style.opacity = 1.00-op;   if(op>(0.00))   {               setTimeout('dotransff()',50);   }       else    {               objst[vcurr].style.zIndex=2;            objst[vnext].style.zIndex=3;            Sonraki();          setTimeout('beftrans()',3000);                                      }}function beftrans(){  op=1.00;        objst[vcurr].style.visibility="visible";        objst[vnext].style.visibility="visible";                objst[vcurr].style.zIndex=3;    objst[vnext].style.zIndex=2;            objst[vcurr].style.opacity = 1.00;              objst[vnext].style.opacity = 1.00;                      dotransff();    }function DoScrollUp(){    kalan=kalan-Math.ceil(kalan/(4000/1000));    objst[vcurr].style.top=""+(kalan-CalcIcHeight)+"px";    objst[vnext].style.top=""+kalan+"px";    if(kalan<=0)    {            Sonraki();        kalan=CalcIcHeight;         objst[vnext].style.top=""+kalan+"px";        zindx();                 timeo=setTimeout('DoScrollUp()',3000);        }    else    {        setTimeout('DoScrollUp()',50);        }}function DoSlide(){       kalan=kalan-Math.ceil(kalan/(4000/1000));       objst[vcurr].style.left=""+(kalan-CalcIcWidth)+"px";    objst[vnext].style.left=""+kalan+"px";          if(kalan<=0)    {               Sonraki();              kalan=CalcIcWidth;              objst[vnext].style.left=""+kalan+"px";                          zindx();                                timeo=setTimeout('DoSlide()',3000);     }       else    {               setTimeout('DoSlide()',50);     }}function dofirst(){    var i=0;    for(i=0;i<mc;i++)    {        objs[i]=document.getElementById("d"+i);        objs[i].style.left=""+120+"px";        objs[i].style.top="0px";        objsh[i]=document.getElementById("dh"+i);        objsh[i].style.left="0px";        objsh[i].style.top="0px";        objst[i]=document.getElementById("op"+i);        objst[i].style.left="0px";        objst[i].style.top="0px";        objst[i].style.visibility="hidden";    }    objst[0].style.visibility="visible";            if(2==2)    {            kalan=CalcIcWidth;        vnext=0;        Sonraki();        zindx();        objst[vnext].style.left=""+kalan+"px";                setTimeout('DoSlide()',3000);    }    else if(2==4)    {            kalan=CalcIcHeight;        vnext=0;        Sonraki();        zindx();                setTimeout('DoScrollUp()',3000);    }    else if(2==5)    {            if(IEB){setTimeout('dotrans()',3000);}          else{setTimeout('beftrans()',3000);}    }    else    {        setTimeout('dotrans()',3000);    }}function initte(){    spageObj=document.getElementById('spage');        if(!spageObj)    {        setTimeout('initte()',200);    }    spageObj.innerHTML=str2;    vnext=1;    if(vnext>=mc){vnext=0;}    spageObj.style.left="0px";    spageObj.style.top="0px";    setTimeout('dofirst()',100);    }setTimeout('initte()',100);                      
 
 </script>
//Now the html file code
<html>
<head><title></title></head>
<body topmargin=0 leftmargin=0 rightmargin=0>
<center>
<div style="position:absolute;left:0px;top:0px;width:500px; height:22px;overflow:hidden; margin:0px;"><div id="spage" style="position:absolute;left:0px;top:0px; width:500px; height:22px; background: #EEEEEE;  overflow:hidden; ;"></div>
<script language="javascript" src="main.js"></script>
 
</div>
</center>
</body></html>
 
//So, that's all the code.
// Hope you can help.

Open in new window

Avatar of abel
abel
Flag of Netherlands image
> Here's a working version of the HTML part.
PS: nice animation ;-)
Avatar of ST3VO
ST3VO
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

Thanks both for your help. Hope I've been fair with the points.
Avatar of abel
abel
Flag of Netherlands image
you're welcome, glad we could help :)