Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 01-27-2006, 12:14 PM   PM User | #1
prophetofjah
New Coder

 
Join Date: Jan 2006
Posts: 68
Thanks: 0
Thanked 0 Times in 0 Posts
prophetofjah is an unknown quantity at this point
newb question :-)

Hello,
I have been working with http://www.maxxblade.co.uk/clock/

It is a gui that generates a javascript clock.

It is not working for me :-) I have this script in the header:

<script language="javascript">
// Clock Script Generated By Maxx Blade's Clock v2.0d
// http://www.maxxblade.co.uk/clock
function timeSource(){
x=new Date();
x.setTime(x.getTime()+daylightSaving());
return x;
}
function timeNow(){
return new Date();
}
function daylightSaving(){
return ((timeNow().getTime()>findDay(0,3,1,1).getTime())&&(timeNow().getTime()<findDay(0,9,1,-1).getTime()))?3600000:0;
}
function findDay(d,m,h,p){
var week=(p<0)?7*(p+1):7*(p-1),nm=(p<0)?m+1:m,x=new Date(timeNow().getUTCFullYear(),nm,1,h,0,0),dOff=0;
if(p<0){
x.setTime(x.getTime()-86400000);
}
if(x.getDay()!=d){
dOff=(x.getDay()<d)?(d-x.getDay()):0-(x.getDay()-d);
if(p<0&&dOff>0){
week-=7;
}
if(p>0&&dOff<0){
week+=7;
}
x.setTime(x.getTime()+((dOff+week)*86400000));
}
return x;
}
function leadingZero(x){
return (x>9)?x:'0'+x;
}
function twelveHour(x){
if(x==0){
x=12;
}
return (x>12)?x-=12:x;
}
function displayTime(){
document.getElementById('tP').innerHTML=eval(outputTime);
setTimeout('displayTime()',1000);
}
function amPMsymbol(x){
return (x>11)?'pm':'am';
}
function fixYear4(x){
return (x<500)?x+1900:x;
}
var dayNames=new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
var monthNames=new Array('January','February','March','April','May','June','July','August','September','October','Novem ber','December');
var outputTime="dayNames[timeSource().getDay()]+','+' '+monthNames[timeSource().getMonth()]+' '+timeSource().getDate()+','+' '+fixYear4(timeSource().getYear())+' '+':'+':'+' '+twelveHour(timeSource().getHours())+':'+leadingZero(timeSource().getMinutes())+':'+leadingZero(tim eSource().getSeconds())+' '+amPMsymbol(timeSource().getHours())";
if(!document.all){ window.onload=displayTime; }else{ displayTime(); }
</script>

I have this in the body as is :

<script language="JavaScript" src="path/clock.js"></script>
<span id="tP">&nbsp;</span>

I figure you need to call the script with the top line and then display it with the bottom line.

What am I doing wrong?

Also, when you have multiple scripts, say one to do a scrolling marquee and one to the date and time, can you place both scripts between the same script tag? Or should they stay seperate between there own script tags?

Thanks,
PoJ
prophetofjah is offline   Reply With Quote
Old 01-27-2006, 01:25 PM   PM User | #2
Pyth007
Regular Coder

 
Join Date: Sep 2005
Posts: 535
Thanks: 0
Thanked 0 Times in 0 Posts
Pyth007 is an unknown quantity at this point
Quote:
Originally Posted by prophetofjah
I have this script in the header:
... [snip code] ...
I have this in the body as is :
<script language="JavaScript" src="path/clock.js"></script>
The problem is that the line in your <body> that I quoted above is used to link an external .js file to the page; however, your javascript is contained inside the <head> of your web-page. You can do either of the following to fix your problem:

1) Remove the <script language="JavaScript" src="path/clock.js"></script> line from the <body>. OR...

2) (Recommended, albeit a little more complex for newbies) Move the code in the <head> into a separate .js file. Just open a text-editor, cut / paste the code in between the <script> tags from the html to a new document, and save the document with a .js extension (eg name the file "clock.js"). Then in the <script> line in the <body>, set the src attribute to point to that file (ie as it is right now, the web-page is looking for a "clock.js" file that is inside a folder named "path" which is located inside the folder where your html -page is stored). Finally, move that line from the <body> to the <head> section of the html page. Thus you should have:
Code:
<html>
  <head>
    <script type="text/javascript" language="javascript" src="clock.js"></script>
  </head>
  <body>
    <span id="tP">&nbsp;</span>
  </body>
</html>
And in a separate "clock.js" file located in the same directory as your html:
Code:
// Clock Script Generated By Maxx Blade's Clock v2.0d
// http://www.maxxblade.co.uk/clock
function timeSource(){
x=new Date();
x.setTime(x.getTime()+daylightSaving());
return x;
}
function timeNow(){
// ... [insert the rest of the code here] ...
Note that I did not include the <script> tags in the .js file. This is because external .js files hold javascript, not html, and the <script> tags are html tags!

As for your second question, it depends on what you mean by "can you place both scripts between the same script tag?" If you go with the
Code:
<script>
  ... [javascript code here] ...
</script>
format, then the answer is yes (with a caveat -- see below). However it is incorrect to do something like:
Code:
<script type="text/javascript" src="clock.js; anotherScript.js"></script>
nor can you do:
Code:
<script type="text/javascript" src="clock.js">
  ... [javascript code here] ...
</script>
Thus, if you are using the <script> tags to include an external .js script, then you can only include one script per <script> tag.

As I mentioned above, there is a caveat for writing multiple scripts within the same <script> tags... You may run into problems if the scripts try to address the same object / variable. To be safe:

1) Try to avoid global variables. Variables are local to the area where they are declared using the 'var' keyword (if you do not use the 'var' keyword when the variable is first used, then they become global). If you use global variables, then any script can access them and cause unintened consequences. Thus in the function timeSource():
Code:
function timeSource(){
x=new Date();
x.setTime(x.getTime()+daylightSaving());
return x;
}
the variable 'x' is being made into a global variable. It would be better to write var x=new Date(); instead, to make it a local variable to the timeSource() function (the info is still being passed outside of the function using the 'return' statement).

2) If you do use global variables / objects, try to make it specific for the particular script. In your clock script, you may want to change the <span> id attribute to "clockjsTP" and change the line in the displayTime() function to
Code:
document.getElementById('clockjsTP').innerHTML=eval(outputTime);
Then when you ( or others! ) read the html code, you'll realize that the <span> goes with the "clock.js" script. VWPhillips (on these forums) does a similar thing by appending "zxc" to the beginning of each variable / function. It's easy to type and it also signifies that the varibles / functions belong to the script that vwphillips wrote

3) Finally be aware of how scripts use the same object... For example the clock script has the line:
Code:
if(!document.all){ window.onload=displayTime; }else{ displayTime(); }
This basically is stating window.onload=displayTime; which defines the function to run when the window-object's onload event is triggered. The window-object is the navigator's window that is currently being used to display the html page. Thus other scripts may have need to also use this object. If, for example, the marquee script also calls window.onload=runMarquee;, then this will "bump-off" the displayTime() function from being run! If you have several scripts that need to use the window.onload event, then you'll have to define a separate function that calls each script / function to run:
Code:
function init()
{
  displayTime();
  runMarquee();
}
window.onload=init;

... or using an anonymous function ...

window.onload = function(){ displayTime(); runMarquee(); };
__________________
If you want answers, write a smart question.

Yes, someone probably does know how...

Oh, and if you want to learn, STFW!
Pyth007 is offline   Reply With Quote
Old 01-27-2006, 02:24 PM   PM User | #3
prophetofjah
New Coder

 
Join Date: Jan 2006
Posts: 68
Thanks: 0
Thanked 0 Times in 0 Posts
prophetofjah is an unknown quantity at this point
Smile thanks!

thank you sooooo much for your response!

I really appreciate it!
prophetofjah is offline   Reply With Quote
Old 01-27-2006, 04:23 PM   PM User | #4
prophetofjah
New Coder

 
Join Date: Jan 2006
Posts: 68
Thanks: 0
Thanked 0 Times in 0 Posts
prophetofjah is an unknown quantity at this point
Hello,
Right now I am searching the internet for different scripts for my website. So I come accross my marquee script:

<SCRIPT language="javascript">
//Specify the marquee's width (in pixels)
var marqueewidth="350px";
//Specify the marquee's height
var marqueeheight="25px";
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=2;
//configure background color:
var marqueebgcolor="#333333";
//Pause marquee onMousever (0=no. 1=yes)?
var pauseit=0;
</SCRIPT>

Then, I want to add the clock script. To clarify, could I house both scripts between the same <script></script> tags in the header?

If so I could both into a .js file. Would putting them both in a .js file be the most efficient way to handle it?

Also, "return x;" passes "x" out of the timeSource() function... so that sets the initial value of "x" for the rest of the script untill x is then returned out of the next function.

Thanks again kind soul!

PoJ

Last edited by prophetofjah; 01-27-2006 at 04:39 PM..
prophetofjah is offline   Reply With Quote
Old 01-27-2006, 04:49 PM   PM User | #5
arnyinc
Regular Coder

 
Join Date: Jan 2003
Posts: 867
Thanks: 4
Thanked 8 Times in 8 Posts
arnyinc is an unknown quantity at this point
Quote:
Originally Posted by prophetofjah
To clarify, could I house both scripts between the same <script></script> tags in the header?
Yes, you can have many different functions and declarations in the same script tag.

Quote:
Originally Posted by prophetofjah
If so I could both into a .js file. Would putting them both in a .js file be the most efficient way to handle it?
You can put them both in one .js file. Efficiency is another question though. Let's say you have one function that you use on 50 pages and another function that you use on 1 page. It won't cause any errors to put them both in the same .js file but it doesn't really make sense to have them in the same .js file. Now let's say you have a function that you use on 50 pages and another function you use on 49 pages. It would make more sense to include them both in the same .js file.

Don't forget, you can include several .js files on one page so you can separate them out as much as you want.
arnyinc is offline   Reply With Quote
Old 01-27-2006, 05:59 PM   PM User | #6
prophetofjah
New Coder

 
Join Date: Jan 2006
Posts: 68
Thanks: 0
Thanked 0 Times in 0 Posts
prophetofjah is an unknown quantity at this point
I am still having trouble, even though I have made great progress thanks to you :-)

Two of my scripts seem to be cancelling the other out.

In my header I have:

Code:
<SCRIPT language="javascript">
//Specify the marquee's width (in pixels)
var marqueewidth="350px";
//Specify the marquee's height
var marqueeheight="25px";
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=2;
//configure background color:
var marqueebgcolor="#333333";
//Pause marquee onMousever (0=no. 1=yes)?
var pauseit=0;
</SCRIPT>
<script type="text/javascript" language="javascript" src="calendar.js"></script>
Then in the body I have the following scripts:
Code:
 
 <SCRIPT type="text/javascript" language="javascript1.2" 
							SRC="http://www.cnsnews.com/ticker/horizontal_code.js"></SCRIPT>
<script type="text/javascript" language="javascript" src="http://www.freshcontent.net/world_news_feed.php"></script>
On my calendar.js file I have:
Code:
// Clock Script Generated By Maxx Blade's Clock v2.0d
// http://www.maxxblade.co.uk/clock
function timeSource(){
   x=new Date();
   x.setTime(x.getTime()+daylightSaving());
   return x;
}
function timeNow(){
   return new Date();
}
function daylightSaving(){
   return ((timeNow().getTime()>findDay(0,3,1,1).getTime())&&(timeNow().getTime()<findDay(0,9,1,-1).getTime()))?3600000:0;
}
function findDay(d,m,h,p){
   var week=(p<0)?7*(p+1):7*(p-1),nm=(p<0)?m+1:m,x=new Date(timeNow().getUTCFullYear(),nm,1,h,0,0),dOff=0;
   if(p<0){
      x.setTime(x.getTime()-86400000);
   }
   if(x.getDay()!=d){
      dOff=(x.getDay()<d)?(d-x.getDay()):0-(x.getDay()-d);
      if(p<0&&dOff>0){
         week-=7;
      }
      if(p>0&&dOff<0){
         week+=7;
      }
      x.setTime(x.getTime()+((dOff+week)*86400000));
   }
   return x;
}
function leadingZero(x){
   return (x>9)?x:'0'+x;
}
function twelveHour(x){
   if(x==0){
      x=12;
   }
   return (x>12)?x-=12:x;
}
function displayTime(){
   document.getElementById('calendartP').innerHTML=eval(outputTime);
   setTimeout('displayTime()',1000);
}
function amPMsymbol(x){
   return (x>11)?'pm':'am';
}
function fixYear4(x){
   return (x<500)?x+1900:x;
}
var dayNames=new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
var monthNames=new Array('January','February','March','April','May','June','July','August','September','October','November','December');
var outputTime="dayNames[timeSource().getDay()]+','+' '+monthNames[timeSource().getMonth()]+' '+timeSource().getDate()+','+' '+fixYear4(timeSource().getYear())+' '+'<BR>'+' '+twelveHour(timeSource().getHours())+':'+leadingZero(timeSource().getMinutes())+':'+leadingZero(timeSource().getSeconds())+' '+amPMsymbol(timeSource().getHours())";
if(!document.all){ window.onload=displayTime; }else{ displayTime(); }


// Put the following HTML on your page where you would like the Clock to be displayed:
// <span id="tP">&nbsp;</span>
I can either get my marqee to work and not the clock, or vice versa. Thank you so much for your help so far

PoJ
prophetofjah is offline   Reply With Quote
Old 01-27-2006, 09:04 PM   PM User | #7
Kor
Red Devil Mod


 
Kor's Avatar
 
Join Date: Apr 2003
Location: Bucharest, ROMANIA
Posts: 8,478
Thanks: 58
Thanked 379 Times in 375 Posts
Kor has a spectacular aura aboutKor has a spectacular aura about
Quote:
I can either get my marqee to work and not the clock, or vice versa
Both are triggered by onload event. As this event belongs to the window and as this event happens only once when the window object is loaded, now it is logically that everything that happens onload should be gather under the same command, so that look after the onload (or window.onload, or <body onload="") triggered functions and gather them in a single place (removing them from the others)
__________________
KOR
Offshore programming
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
Kor is offline   Reply With Quote
Old 01-28-2006, 02:12 AM   PM User | #8
prophetofjah
New Coder

 
Join Date: Jan 2006
Posts: 68
Thanks: 0
Thanked 0 Times in 0 Posts
prophetofjah is an unknown quantity at this point
Question

I see my onload event for my clock:
Code:
window.onload=displayTime;
Where is the second onload event? I can't spot it.

Thanks A Million

PoJ
prophetofjah is offline   Reply With Quote
Old 01-29-2006, 01:07 AM   PM User | #9
prophetofjah
New Coder

 
Join Date: Jan 2006
Posts: 68
Thanks: 0
Thanked 0 Times in 0 Posts
prophetofjah is an unknown quantity at this point
Question

I am sorry, but I still can't figure this out. I understand that the page only loads once, so that there can be only window.onload event, and I need to put the clock script and marquee script onload events as the same window.onload event.

I know what the clock onload event is (window.onload=displaytime so I would need to add the marquee onload function or whatever it does when the window loads. However, I cant find the marquee onload event. Could someone tell me what it is?

Thanks,
PoJ
prophetofjah is offline   Reply With Quote
Old 01-30-2006, 03:29 AM   PM User | #10
prophetofjah
New Coder

 
Join Date: Jan 2006
Posts: 68
Thanks: 0
Thanked 0 Times in 0 Posts
prophetofjah is an unknown quantity at this point
I figured it out... there was a window.onload event on the marquee javascript which is called from a url.

Thanks
prophetofjah is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 02:29 AM.


Advertisement
Log in to turn off these ads.