Splitting script from code

Can't figure out how

Page 1 of 1

3 Replies - 358 Views - Last Post: 11 February 2009 - 10:59 AM

#1 Stofke  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 55
  • Joined: 07-January 09

Splitting script from code

Post icon  Posted 10 February 2009 - 10:48 AM

hi all !

I hava a webpage with a few java scripts in it ,

Now i want to put them in a seprate file for readability of my code. can someone explain me how i should do this ?

this is my page.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>korfbal</title>
<link href="css/website.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="javascripts/paginas.js"/>
<script type="text/javascript" src="javascripts/submenu.js"/>
<script type="text/javascript"></script>
</head>

<body onload="navigeer()">
<div align="center">
<!-- header -->
<div class="header">
<iframe src ="banner/imageshow/index.html" class="header" scrolling="no" frameborder="0"> </iframe>
</div>
<!-- menu -->
<div class="menu_container">
<div class="balkje_links"></div>
<div class="menu_middle">
<div class="nieuwMenu"><div class="textMenu"><a href="index.html?loc=home">Home</a></div></div>
<div class="nieuwMenu"><div class="textMenu"><a href="index.html?loc=clubnieuws">Clubnieuws</a></div></div>
<div class="nieuwMenu"><div class="textMenu"><a href="index.html?loc=ploegen">Ploegen</a></div></div>
<div class="nieuwMenu"><div class="textMenu"><a href="index.html?loc=clubblad">Clubblad</a></div></div>
<div class="nieuwMenu"><div class="textMenu"><a href="index.html?loc=contact">Contact</a></div></div>
<div class="nieuwMenuRechts"><div class="textMenu"><a href="index.html?loc=webteam">Webteam</a></div></div>
</div>
<div class="balkje_rechts"></div>
<div class="text_left"></div>
<div class="text_middle"><div class="text3" id="nieuws">
<script language="javascript" type="text/javascript">

function startTicker()
{
		huidigeBoodschap	 = -1;
	huidigeLengte	= 0;
	if (document.getElementById) {	
			element	 = document.getElementById("nieuws");
			tikHetNieuws();   	
		 }
	else {
			document.write("<style>.ticki{display:none;}.ticko{border:0px; padding:0px;}</style>");
			return true;
	}
}

function tikHetNieuws()
{
	var myTimeout;  
		if(huidigeLengte == 0)
	{
		huidigeBoodschap++;
		huidigeBoodschap	  = huidigeBoodschap % theItemCount;
		Boodschap	  = boodschappen[huidigeBoodschap].replace(/&quot;/g,'"');		

	}
		element.innerHTML = Boodschap.substring(0,huidigeLengte) + bepaalTeken();
		if(huidigeLengte != Boodschap.length)
	{
		huidigeLengte++;
		myTimeout = theCharacterTimeout;
	}
	else
	{
		huidigeLengte = 0;
		myTimeout = theStoryTimeout;
	}
	
	setTimeout("tikHetNieuws()", myTimeout);
}
function bepaalTeken()
{
	if(huidigeLengte == Boodschap.length)
	{
		return geenTeken;
	}

	if((huidigeLengte % 2) == 1)
	{
		return teken1;
	}
	else
	{
		return teken2;
	}
}

</script>
	

	<script language="javascript" type="text/javascript">


	var theCharacterTimeout = 50;
	var theStoryTimeout	 = 5000;
	var teken1		= "_";
	var teken2		= "-";
	var geenTeken	   = "";
	

	var boodschappen = new Array();

	var theItemCount = 4;

	
		boodschappen[0] = "Borgerhout wint van Boeckenberg";
		
	
		boodschappen[1] = "test1";
	
	
		boodschappen[2] = "Test3.";
	
	
		boodschappen[3] = "test4.";
	
	

	startTicker();
	</script>
</div>
</div>
<div class="text_right"></div>
<div style="clear: both"></div>
</div>
<!-- container content -->
<div class="content_container">

<div class="leftside">
<div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden" id="menubalk">
	<div class="text">Home.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
<div class="white">
   <div class="text2" id="side_menu">
 <script language="javascript" type="text/javascript">
var status=new Array();
var menu_inhoud=new Array();

aantalMenus=1;



menu_inhoud[0]="<ul id='home_submenu'<li><a class='link' href ='paginas/startpagina.html' target='middenframe'>&nbsp;&nbsp;&nbsp;&nbsp;&raquo; Jeugd</a></li><li><a class='link' href ='paginas/nieuws.html' target='middenframe'>&nbsp;&nbsp;&nbsp;&nbsp;&raquo; Kern</a></li><li><a class='link' href ='paginas/kalender.html' target='middenframe'>&nbsp;&nbsp;&nbsp;&nbsp;&raquo; Gewestelijken</a></li><li><a class='link' href ='paginas/kalender.html' target='middenframe'>&nbsp;&nbsp;&nbsp;&nbsp;&raquo; Recreanten</a></li></ul>";

for (teller=0; teller<aantalMenus; teller++){
 status[teller]=0;
}

function collapse_menu(menu_id, menu_number){
  if (status[menu_number]==0){
	menu_id.innerHTML=menu_inhoud[menu_number];
	status[menu_number]=1;
  }else{
	menu_id.innerHTML="";
	status[menu_number]=0;
  }
}
</script>
   </div>
</div>
  </div>
  <div class="afronding"></div>
   <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden">
	<div class="text">In de kijker.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white">
   <img src="images/memberofthemonth.jpg" alt="member of the month " class="memberofthemonth" />
  </div>
  </div>
  <div class="afronding"></div>
</div>
<iframe src="paginas/startpagina.html" class ="middleFrame" scrolling="no" frameborder="0" name="middenframe"></iframe>
<!-- Golden Sponsor -->
<div class="rightside">
<div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden">
	<div class="text">Golden sponsors.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white">
   <div class="text2">
	   Nog<br />
	   wa<br />
	   afbeeldinge die ze ZELF moeten
	   <br />
	   opsturen<br />
	   <br />
	   <br />
   </div>
  </div>
  </div>
  <div class="afronding"></div>
</div>
<!-- Silver Sponsor -->
<div class="rightside">
<div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden">
	<div class="text">Silver sponsors.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white">
   <div class="text2">Nog<br />
	   wa<br />
	   afbeeldinge die ze ZELF moeten
	   <br />
	   opsturen<br />
   </div>
  </div>
  </div>
  <div class="afronding"></div>
</div>
<!-- Bronze Sponsor -->
<div class="rightside">
<div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden">
	<div class="text">Bronze sponsors.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white">
   <div class="text2">Nog<br />
	   wa<br />
	   afbeeldinge die ze ZELF moeten
	   <br />
	   opsturen<br />
	   <br />
	   <br />
	   <br />
	   <br />
   </div>
  </div>
  </div>
  <div class="afronding"></div>
</div>
<!-- einde sponsors -->
</div>

</div></body>

</html>


Is This A Good Question/Topic? 0
  • +

Replies To: Splitting script from code

#2 SoLi  Icon User is offline

  • andydust.com

Reputation: 41
  • View blog
  • Posts: 1,438
  • Joined: 27-January 02

Re: Splitting script from code

Posted 10 February 2009 - 11:07 AM

You'll want to put all the code in between your (but not including) <script></script> into a separate file, e.g. 'myjavascript.js'.

Then in the header of your document

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


I noticed you have a function being called in the flow of your document. Since you are now moving this call into a separate file, and calling it at the start of the document, you might want to wait until the document has loaded before calling it (especially if the function relies on elements in the document).

So where you have:

 startTicker();


you might want to do this instead, once you have moved everything to an external javascript file.
window.onload = startTicker;

This post has been edited by SoLi: 10 February 2009 - 11:08 AM

Was This Post Helpful? 1
  • +
  • -

#3 Stofke  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 55
  • Joined: 07-January 09

Re: Splitting script from code

Posted 10 February 2009 - 11:59 AM

Thx mate !

Also for the submenu ?

+

Where do i need to put the onload command ?

This post has been edited by Stofke: 10 February 2009 - 01:12 PM

Was This Post Helpful? 0
  • +
  • -

#4 Stofke  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 55
  • Joined: 07-January 09

Re: Splitting script from code

Posted 11 February 2009 - 10:59 AM

So, i managed to do the newsticker part.. but for the submenu he gives an error..


page =


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>korfbal</title>
<link href="css/website.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="javascripts/paginas.js"/>
<script type="text/javascript" src="javascripts/submenu.js"/>
<script type="text/javascript"></script>
</head>

<body onload="navigeer()">
<div align="center">
<!-- header -->
<div class="header">
<iframe src ="banner/imageshow/index.html" class="header" scrolling="no" frameborder="0"> </iframe>
</div>
<!-- menu -->
<div class="menu_container">
<div class="balkje_links"></div>
<div class="menu_middle">
<div class="nieuwMenu"><div class="textMenu"><a href="index.html?loc=home">Home</a></div></div>
<div class="nieuwMenu"><div class="textMenu"><a href="index.html?loc=clubnieuws">Clubnieuws</a></div></div>
<div class="nieuwMenu"><div class="textMenu"><a href="index.html?loc=ploegen">Ploegen</a></div></div>
<div class="nieuwMenu"><div class="textMenu"><a href="index.html?loc=clubblad">Clubblad</a></div></div>
<div class="nieuwMenu"><div class="textMenu"><a href="index.html?loc=contact">Contact</a></div></div>
<div class="nieuwMenuRechts"><div class="textMenu"><a href="index.html?loc=webteam">Webteam</a></div></div>
</div>
<div class="balkje_rechts"></div>
<div class="text_left"></div>
<div class="text_middle"><div class="text3" id="nieuws">
<script language="javascript" type="text/javascript" src="javascripts/nieuws.js"></script>
</div>
</div>
<div class="text_right"></div>
<div style="clear: both"></div>
</div>
<!-- container content -->
<div class="content_container">

<div class="leftside">
<div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden" id="menubalk">
	<div class="text">Home.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
<div class="white">
   <div class="text2" id="side_menu">
<script language="javascript" type="text/javascript" src="javascripts/submenu.js"></script>
   </div>
</div>
  </div>
  <div class="afronding"></div>
   <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden">
	<div class="text">In de kijker.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white">
   <img src="images/memberofthemonth.jpg" alt="member of the month " class="memberofthemonth" />
  </div>
  </div>
  <div class="afronding"></div>
</div>
<iframe src="paginas/startpagina.html" class ="middleFrame" scrolling="no" frameborder="0" name="middenframe"></iframe>
<!-- Golden Sponsor -->
<div class="rightside">
<div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden">
	<div class="text">Golden sponsors.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white">
   <div class="text2">
	   Nog<br />
	   wa<br />
	   afbeeldinge die ze ZELF moeten
	   <br />
	   opsturen<br />
	   <br />
	   <br />
   </div>
  </div>
  </div>
  <div class="afronding"></div>
</div>
<!-- Silver Sponsor -->
<div class="rightside">
<div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden">
	<div class="text">Silver sponsors.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white">
   <div class="text2">Nog<br />
	   wa<br />
	   afbeeldinge die ze ZELF moeten
	   <br />
	   opsturen<br />
   </div>
  </div>
  </div>
  <div class="afronding"></div>
</div>
<!-- Bronze Sponsor -->
<div class="rightside">
<div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden">
	<div class="text">Bronze sponsors.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white">
   <div class="text2">Nog<br />
	   wa<br />
	   afbeeldinge die ze ZELF moeten
	   <br />
	   opsturen<br />
	   <br />
	   <br />
	   <br />
	   <br />
   </div>
  </div>
  </div>
  <div class="afronding"></div>
</div>
<!-- einde sponsors -->
</div>

</div></body>

</html>


submenu.js =

var status=new Array();
var menu_inhoud=new Array();

aantalMenus=1;



menu_inhoud[0]="<ul id='home_submenu'><li class='sub'><a class='link' href ='paginas/wedstrijdoverzichtJeugd.html' target='middenframe'>&nbsp;&nbsp;&nbsp;&nbsp;&raquo; Jeugd</a></li><li class='sub'><a class='link' href ='paginas/wedstrijdoverzichtKern.html' target='middenframe'>&nbsp;&nbsp;&nbsp;&nbsp;&raquo; Kern</a></li><li class='sub'><a class='link' href ='paginas/wedstrijdoverichtGewestelijken.html' target='middenframe'>&nbsp;&nbsp;&nbsp;&nbsp;&raquo; Gewestelijken</a></li><li class='sub'><a class='link' href ='paginas/wedstrijdoverichtRecreanten.html' target='middenframe'>&nbsp;&nbsp;&nbsp;&nbsp;&raquo; Recreanten</a></li></ul>";

for (teller=0; teller<aantalMenus; teller++){
status[teller]=0;
}

function collapse_menu(menu_id, menu_number){
  if (status[menu_number]==0){
	menu_id.innerHTML=menu_inhoud[menu_number];
	status[menu_number]=1;
  }else{
	menu_id.innerHTML="";
	status[menu_number]=0;
  }
}


In internet explorer he gives an error with the argument : not implemented.

in firefox he doesn't show the menu at all

this is how i call in the function :

 <a class="link" onclick="collapse_menu(menu1, 0)"/>&raquo; Wedstrijdoverzicht</a></li></ul><span id="menu1"></span>


(site is still korfbal.kbkc.be)

This post has been edited by Stofke: 11 February 2009 - 11:17 AM

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1