Help get this topic noticed by sharing it on Twitter, Facebook, or email.
I’m unsure

Date ordinals and javascript.

Am I in the correct forum to ask a question about something I don't understand in the Javascript:Missing Manual book?
1 person has
this question
+1
Reply
  • Yes, ask away, and one of us will get you an answer.

    Nan Barber
    Editor
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • I’m baffled
    After I completed the exercise 4.1.html in the Chapter04 folder I was interested in seeing if I could create my own solution (before looking at the dateString.js file solution) to formatting date ordinals. I used a switch statement with conditionals to format the date ordinals (st, th, rd, nd) and this worked successfully using 23 lines of code. Then on opening the dateString.js to see the author's solution file I was amazed to see that the author had achieved the same with just 3 lines of code:

    1. var sfx = ["th","st","nd","rd"];
    2. var val = date%100;
    3. var ordDate = date + (sfx[(val-20)%10] || sfx[val] || sfx[0]);

    I understand the first line is an array that contains the ordinals.

    In the second line I don't understand what the modulus is doing - why 100? What is its purpose?

    In the third line, date is concatenated with the ordinal, the ordinal being extracted somehow (I don't know how) from the appropriate index of the sfx array. Because I don't understand line 2, I have difficulty with line 3. What is in val? How do the OR operators work? How does (val-20%10) work as an index?

    Unfortunately the code is not commented, and despite progressing sequentially through the book, I haven't a clue what the above means. Any help would be most welcome.

    By the way, the book is fantastic and is the best one I've ever read on Javascript! This is the first bit in the book that I haven't understood, which is strong praise indeed for a technical book.

    Many thanks if you can help me.

    Chris Curtis

    PS If you want to see my own solution I could post it here.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • I’m thbbbttt
    Why does it look like it's been 25 days and you still haven't gotten an answer? I don't know.
    Anyway, I finally found that file for JavaScript : The Missing Manual. Crazy that the file isn't hosted by O'Reilly. what a debacle this all seems to be. Missing samples and all.
    Well, I opened the DateString.js and I see an entire routine, not the 3 lines that you see.
    Looks like:
    function dateString(date,string) {
    /* key for creating string
    %Y = 2008
    %y = 08
    %M = January
    %m = Jan
    %N = 01 (month)
    %n = 1 (month)
    %W = Monday
    %w = Mon
    %D = 05 (day of month)
    %d = 5 (day of month)
    %O = ordinal like 'st' for 1st, or 'th' for 5th
    Example: '%W, the %d%O of %M, %Y' will return a string like
    'Tuesday, the 6th of February, 2009'
    */
    var months = ['January','February','March','April','May',
    'June','July','August','September',
    'October','November','December'];
    var days = ['Sunday','Monday','Tuesday','Wednesday',
    'Thursday','Friday','Saturday'];
    var day=date.getDay();
    var year=date.getFullYear();
    var month=date.getMonth();
    var realMonth=month+1;
    var fillMonth = (realMonth];
    var val = date%100;
    var ordDate = date + (sfx[(val-20)%10] || sfx[val] || sfx[0]);

    //year
    string = string.replace(/%Y/g,year); // 2008
    string = string.replace(/%y/g,year.toString().slice(-2)); //08
    //month
    string = string.replace(/%M/g,months[month]); //January
    string = string.replace(/%m/g,months[month].slice(0,3)); //Jan
    string = string.replace(/%N/g,fillMonth); // 01
    string = string.replace(/%n/g,realMonth); // 1
    //day of week
    string = string.replace(/%W/g,days[day]); //Monday
    string = string.replace(/%w/g,days[day].slice(0,3)); //Mon
    //day of month
    string = string.replace(/%D/g,fillDate); //05
    string = string.replace(/%d/g,date); // 5
    //ordinal (1st) to day
    string = string.replace(/%O/ig,ordDate);
    return string;
    }
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • I’m sad
    Hi blogr,

    I'm sorry but I may have misled you. In fact, when I read what I said, I now see that I might have misled everyone! I can access that entire code without difficulty. What I meant to say was that I don't understand those particular three lines of code within the entire script.... And I still don't understand. I think I've given up. Nan said she would reply but nobody has!
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • I’m resolved
    Are you still interested in the answers? I'll assume you are. Never assume!
    :-)

    1.) var sfx = ["th","st","nd","rd"];
    Sets up an array with 4 values.

    Running JavaScript The Fast Way
    To see those values you can copy / paste the following into your browser's navigation bar (where you normally type the URL (web address)) and hit .

    [-- copy each of the following lines --]

    javascript:var sfx = ["th","st","nd","rd"];alert("sfx[0] = " + sfx[0]);
    javascript:var sfx = ["th","st","nd","rd"];alert("sfx[1] = " + sfx[1]);

    That may seem odd, but it's a really cool feature that browsers allow (tested and verified in FireFox and IE 6.x and above).

    Here's what I'm talking about (see image):


    Caveat: For this to work you must be on a web page, like google.com or this page while you are reading my answer or whatever.

    2.) var val = date%100;
    The % (mod) operator means, give me the remainder.
    That means that any number that isn't exactly divisble by 100 will cause val to equal something other than 0.
    Okay, so that means this is checking the date value for whenever it is perfectly divisible by 100. But what does that mean.
    The Date() object returns the current date, like this:
    javascript:x= new Date();alert(x);

    You'll see something like:
    Fri Feb 5 14:59:36 EST 2010
    But, if you change that only slightly, by doing a mathematical operation on the date, like this:
    javascript:x= new Date();alert(x*1);
    You'll see something like:
    1265400042064
    This is an interesting situation which occurs with a _loosely typed language_ such as javascript. The variables can hold any type. Depending upon what you do to the values you get different types returned.

    Date Is A Strange Numeric Value
    This is because internally a date is stored (by JavaScript) as the Computer Epoch time (number of seconds elapsed since Jan. 1, 1970).

    More About Mod (%)
    Note: There are spaces between the % and the other parts of the script. Without those spaces the scripts will fail, because the % is a special HTML character. Long story.

    Try some of the following:

    javascript:alert(1 % 100); // = 1
    javascript:alert(2 % 100); // = 2
    javascript:alert(3 % 100); // = 3
    javascript:alert(100 % 100); // = 0

    Explanation of Mod %
    So, this shows that 1 is not divisble by 100(evenly without a decimal value) so you get the remainder value, which is 1. Same thing with 2...99.
    Then, the remainder for 100 = 0. So the number is divisbly evenly by 100. Any multiple of 100 = 0. 200 % 100 = 0; 300 % 100 = 0.
    This creates a type of counter.

    3. var ordDate = date + (sfx[(val-20)%10] || sfx[val] || sfx[0]);

    Finally, I've replaced the entire script with the following, which you can run from the Navigation bar of your browser (it wasn't easy):
    [-- copy all of this --]
    javascript: function ShowDate(date){ var val = new Date(date).getYear() % 100; var sfx = ["th","st","nd","rd"]; alert(new Date(date)+(sfx[(val-20) % 10] || sfx[val] || sfx[0]));}ShowDate(new Date().setFullYear(2001,0,14));

    So, now you can change the date value and see the thing work in front of your eyes.
    The Point: Number Ending
    The script simply appends the proper number ending (th, st, nd, rd) to the year depending upon which year it is.
    Unfortunately, the auhtor's script doesn't allow you to change it easily to see that.
    Fortunately, my script does.
    The original script uses Jan. 14, 2001 .setFullYear(2001,0,14);
    Yes, the month is 0(zero) based. Crazy I know.
    2001 should end in st for "first")
    2002 should end in nd for "second".
    Try this one:
    [-- copy all of this --]
    javascript: function ShowDate(date){ var val = new Date(date).getYear() % 100; var sfx = ["th","st","nd","rd"]; alert(new Date(date)+(sfx[(val-20) % 10] || sfx[val] || sfx[0]));}ShowDate(new Date().setFullYear(2002,0,14));

    Displays : Mon Jan 14 08:55:54 EST 2002nd
    in the alert dialog.

    I think if you work through this now, you'll have learned a lot.
    I hope it all helps you.
    ~Daylight
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • I’m happy.
    Hello Daylight!

    Thanks very much indeed. That was very useful and informative. Sorry that I've taken so long to reply, but I had given up on this site, thinking that I would not get a response to my question. So much appreciated.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • How do I close this thread? I'm a new user and cannot work out how to indicate that I am satisfied with my answer.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • 1
    I think you just need to click the link at the bottom of my entry which has a yellow star and states: "This answers the question".
    Glad the info. helped.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • This reply was removed on 2010-02-25.
    see the change log