SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    beginner needs help...please please please

    I am very new to javascript (or any other kind of programming for that matter)and I'm finding it all very hard to understand. I need to figure out a way of creating a calendar that stays current, in that the years displayed are always 5 years either side of whatever the current year is. I'm not really sure about how to do this, although i'm thinking a for loop might do it (but I'm not sure how!). Does anyone know of such a calendar I can take a look at for ideas, or better still if anyone can suggest the appropriate code that would be much appreciated.
    Thanks
    Kati

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Well, first, you need to figure out the code for your current year calendar. To get the current time, you can use this:
    Code:
    var date = new Date();
    The Date() object has several member functions you can call to get the various aspects of what you need, including:
    Code:
    getMonth();
    getDate();
    getFullYear();
    getMinutes();
    getHours();
    which return the values that you would expect them to call. Just in case you haven't run into using objects yet, you use objects like this:
    Code:
    var date = new Date(); // Constructs the object. date is now an instance of Date.
    date.getMonth(); // You are calling getMonth, which is a member function of Date.
    You can use those to get your current time.

    Then, for the others, you would have to do a little math to figure out what values each of the dates are for the other years.

    Once you find the algorithm which let's you calculate the dates of other months and years, you can then place that in a loop to generate them.

    Hopefully that'll get you started. Ask if you have any more questions.

    Oh, and welcome to Sitepoint. =D

  3. #3
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,034
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)

    javascript calendar

    Hi katihannah, welcome to the forums,
    If you have difficulty with javascript, writing a calendar script on your own may be a bit too much for you ATM. What with leap years and the way the first day of the month changes there's a lot to consider.
    You may have your hands full just trying to work with an existing script like mootools (Google for "javascript calendar").

  4. #4
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the welcome

    yes I agree it is way too hard for me to understand, lol. This is in fact one of the questions i need to answer for an assignment, but to say I'm struggling is an understatement. The question asks to use js to create a drop down list for selecting the year but making sure it stays current in the future by using a loop rather than the normal html 'select' code. Hope this makes more sense to you than it does to me!

    thanks also to samanime, that does help some, but I'm not sure how to construct the loop itself...

  5. #5
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,034
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)

    instead of

    I'm confused by what you mean by a loop instead of a select. A loop is javascript and a select is HTML. Perhaps you mean to have javascript dynamically create a select with the current month/year selected?

    I would approach this on 2 fronts. First, make sure you can write the HTML for a static select. Then make sure you can use javascript to get the information you need by using alert() in your code to show variable values in different places within the code. Note* be careful with alert()s inside loops, unless you want to close a bunch or shut down the browser to stop them.

    For example, using samanime's example
    HTML Code:
    var date = new Date(); // Constructs the object. date is now an instance of Date.
    alert(date);
    date.getMonth(); // You are calling getMonth, which is a member function of Date.

  6. #6
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Ah, I see, you aren't trying to form an entire calendar, just to get the years itself. That is significantly simpler.

    First, you'll need to determine the current year. This is simply done similar to how I showed you earlier:
    Code:
    var date = new Date();
    var currentYear = date.getFullYear();
    Now currentYear would be an integer value of the current year (in this case, 2008).

    Now, there are a couple of ways to construct the loop. I think the simplest to understand would be something like this:
    Code:
    // How many years back and forward with your list?
    var back = 2;
    var forward = 5;
    
    for(var i = currentYear-back; i < currentYear+forward+1; i++) {
        // What you need to implement goes here.
    }
    So, we have two variables. One we set to tell it how many years we want to go backward. In this case, I put two, so we'll start at 2006.

    For forward, I put 5. We want to make sure that we include that 5th year in our loop (in this case, 2013), so for the stop condition I did "i < currentYear + forward + 1". You could also do "i <= currentYear + forward". They are completely equivalent, I just prefer < for no real reason.

    Then, for your select statement itself you have a couple of options. I think the easiest option would be to create the select statement in your HTML code, and give it an id:
    Code:
    <select id="year"></select>
    Right above your for loop, you'll then want this code:
    Code:
        var select = document.getElementById("year");
    Which will give us a reference to that select statement in our HTML.

    Then, in your for loop you can use the following code:
    Code:
        var option = document.createElement("option");
        option.value = i;
        option.innerHTML = i;
        select.appendChild(option);
    What this code does is, for each loop, we create a new <option> element. We then set it's value and innerHTML (what goes between <option></option>, so our text) to our current year.

    We then call select.appendChild(option). This will put our newly created option in between our <select></select>. When this is rendered, it'll look just how you want.

    If you have access to Firefox, I recommend downloading this toolbar: https://addons.mozilla.org/en-US/firefox/addon/60

    It will help immensely. In this case, because you can select "View Source"->"View Generated Source" to see exactly how our HTML looks after your Javascript is finished running. Also, be sure to take good advantage of it's Error Console (accessible from Tools -> Error Console), which will help you find errors in your Javascript code.

    Hope that helps.

    Also, as a note, if you were to implement this for "real world" usage, you should do this with a server-side language (like PHP/ASP) instead of Javascript, because if someone has Javascript disabled you will end up with an empty, useless select statement.

  7. #7
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks saminime...i think thats exactly what its asking, brilliant, thank you so much!



    the exact wording of the task states

    'using javascript ensure that a 10 year window is displayed, 5 years either side of the current year, this will mean that the calendar stays current in the future. HINT: use a loop and a document.write statement in place of the normal html select code'

    from what I understand of it, its asking me to create a drop down list ( which I've done) in order to select a year for the calendar to display (thats the easy bit, lol), but to make the list display 5 years either side of the selected year, so for example if the year selected is 2008 then the drop down list would show a range between 2003 and 2013, if 2010 is selected the list would show 2005 to 2015...

  8. #8
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Yes. In the example I gave, you would just set both back and forward to 5 and that would give what they are asking for.

    The difference between mine and the assignment is in my use of append() versus their use of document.write(). If you wanted to use document.write() you can, just replace:
    Code:
    var option = document.createElement("option");
        option.value = i;
        option.innerHTML = i;
        select.appendChild(option);
    with
    Code:
        document.write("<option value=\"" + i "\">" + i + "</option>");
    in the loop. The big difference there is that with document.write, you must put the segment of code between the <select></select>. With my version, you can place it anywhere after the page has been loaded. Other than that, they are pretty much identical. (Other than I think my version is easier to read. =p).

    Glad to help.

  9. #9
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yay! thank you again, I tried your suggestions and it worked beautifully. Its good to know there are people willing to take the time to help us noobs, I'm very grateful.

  10. #10
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Your very welcome.

    I like helping people solve questions like the one you asked because it lets me think of problems that I've never thought about before, so I'm actually learning as much as I'm teaching.

    In fact, I just sat here and implemented a Calendar in both Javascript and PHP. You can check out the code for both of those, if you're interested. The code for the PHP can be seen from http://www.arwebdesign.net/systems/C...P/viewCode.php.

    If you have any questions about anything, be sure to post them here. =D


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •