Time and Date script - JavaScript - Help required

[HighFlyerPL185]

Hello there,

I have registered on these forums to ask you professionals for help, as I am currently making websites myself out of boredom to learn some skills. At the moment, I know HTML, XHTML and CSS quite well, with a basic knowledge of jQuery and JavaScript. I wanted however to design a little thing for my friend's radio station, "On Air Now" that would change periodically, every day and every hour. For example, if the programme was DJ CSS on Monday between 1900 and 2100, it would display the required information, and somehow check it in a loop, every day and hour of the week. How would I script such a thing? Is a MySQL database or a PHP code required to store the information somewhere? I'd really appreciate some help, and if there's no way of doing it within JavaScript, maybe snippets of code in PHP to get me started. I heard that PHP is useful to learn as well.

Kind Regards

[paul_wilkins]

Hello there,

I have registered on these forums to ask you professionals for help, as I am currently making websites myself out of boredom to learn some skills. At the moment, I know HTML, XHTML and CSS quite well, with a basic knowledge of jQuery and JavaScript. I wanted however to design a little thing for my friend's radio station, "On Air Now" that would change periodically, every day and every hour. For example, if the programme was DJ CSS on Monday between 1900 and 2100, it would display the required information, and somehow check it in a loop, every day and hour of the week. How would I script such a thing? Is a MySQL database or a PHP code required to store the information somewhere? I'd really appreciate some help, and if there's no way of doing it within JavaScript, maybe snippets of code in PHP to get me started. I heard that PHP is useful to learn as well.

PHP would be more useful for this, for then you can have a .php file that uses the current date/time to get info from a database.
Then your page could make a call to that .php file every few minutes as a ajax call, to retrieve the latest info about what's on.

The database could have a Show table and a Period table, so that if something happen on Mon Wed and Fri you could have:

id     | title     | presenter
1      | "DJ CSS"  | "Mad Mike"
2      | "Clubbing"| "Suzi"

id     | showid | day   | start | stop
1      | 1      | "Mon" | 1900  | 2100
2      | 1      | "Wed" | 1900  | 2100
3      | 1      | "Fri" | 1900  | 2100
3      | 2      | "Sat" | 1900  | 2359

So that your PHP code could then get the current show id with:

SELECT showid
FROM Period
WHERE DAY="Wed" AND START >= 1930 AND END <= 1930

Or the show info itself with:

SELECT title, presenter
FROM SHOW
    INNER JOIN (
        SELECT showid
        FROM Period
        WHERE DAY="Wed" AND START >= 1930
    ) AS currentshow
        ON SHOW.id = currentshow.id

Where you could use date('D') and Date('HG') for the day of week and 24-hour format of the current time.

Something like that anyway. The PHP and MySQL forums would be able to provide much more detail on such things.

[HighFlyerPL185]

Thanks for your reply. Is there any way of doing it via JavaScript? I'd hate to install MySQL on my computer, it's slow and unreliable (the desktop is in repairs).

I was wondering whether constructing something like this would be possible. I found it on the internet while doing some researching upon the abilities.

function welcomeMessage()
{
var now = new Date();
var hours = now.getHours();
var msg;
if(hours<12)
msg = "Good Morning";
else if(hours<18)
msg = "Good Afternoon";
else
msg = "Good Evening";
return(msg);
}

But something more like the on-air banner on this website http://www.bbc.co.uk/radio1/programm...les/2012/01/08 where I assume Heading 1 within HTML defines the DJ name, and for instance H2 calls for the time - time element beside On Air Now which I discovered is static. Additionally, it would be useful for the image to change too.

I figured out a little script myself for the image but I don't know how to add days to it, or whether I've done it right. Any help would be appreciated on this entire thing.

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

var thedate = new Date();
var dayofweek = thedate.getUTCDay();
var hourofday = thedate.getUTCHours();

function DJTest()
{
   if (dayofweek != 1 && 
      ((hourofday > 19 && hourofday < 21))) {
     return true;
   }
   return false;
}
</script>
</head><body>

<script type="text/javascript">
if (DJTest()) {
  document.write("<h1>DJ HighFlyer</h1>");
}
</script>

</body>
</html>

[paul_wilkins]

Thanks for your reply. Is there any way of doing it via JavaScript?

Yes that is possible, but typically it's a poor practice to include all of your data in the page that's being sent out to everyone.

[HighFlyerPL185]

Yes that is possible, but typically it's a poor practice to include all of your data in the page that's being sent out to everyone.

Fair enough, I usually place it within a /scripts folder and give it 700 permissions on a server, but this will be just a local site, to pick some skills up.
Any idea how could I solve the above? I'd appreciate some clues, many thanks

[paul_wilkins]

Any idea how could I solve the above? I'd appreciate some clues, many thanks

Thanks for your reply. Is there any way of doing it via JavaScript?

Yes that is possible, but typically it's a poor practice to include all of your data in the page that's being sent out to everyone.

I would rewrite your script to remove document.write, so that the function you call edits the appropriate title instead, and that the data is stored in a way that's easier to edit.

<head>
</head>
<body>
<h1 id="radioshow">Playing your favourite hits</h1>
<script type="text/javascript" src="js/radioshow.js"></script>
</body>
</html>

 
function getShow(shows, day, hour) {
    var i,
        j,
        show;
    for (i = 0; i < shows.length; i += 1) {
        for (j = 0; j < shows[i].length; i += 1) {
            show = shows[i][j];
            if (show.day === day && show.start >= hour && show.end <= hour) {
                return show.name;
            }
        }
    }
}
 
function updateTitle(id) {
    var shows = [
            {name: 'DJ HighFlyer', periods: [
                {day: 2, start: 19, end: 21},
                {day: 3, start: 19, end: 21},
                {day: 4, start: 19, end: 21},
                {day: 5, start: 19, end: 21},
                {day: 6, start: 19, end: 21}
            ]}
        ],
        thedate = new Date(),
        dayofweek = thedate.getUTCDay(),
        hourofday = thedate.getUTCHours(),
        title = getShow(shows, dayofweek, hourofday) || 'Playing your favourite hits'; // default title
    document.getElementById(id).innerHTML = title;
}
 
updateTitle('radioshow');