Javascript, one month at a time



  • Found this gem while working on a freelance gig. It's meant to show/hide page content depending on the current month:

    <!--THIS SCRIPT CHECKS THE MONTH AND TRIGGERS THE CLASES ACCORDINGLY-->
    <script type="text/javascript">
       var d = new Date();
       var month = d.getMonth();
    switch (month) {
       case 0: $(function() {
       $("#mn_1").attr('class','tabli active');
       $('#tab-1').show();
       });
       break;
       case 1: $(function() {
       $("#mn_2").attr('class','tabli active');
       $('#tab-2').show();
       });
       break;
       case 2: $(function() {
       $("#mn_3").attr('class','tabli active');
       $('#tab-3').show();
       });
       break;
       case 3: $(function() {
       $("#mn_4").attr('class','tabli active');
       $('#tab-4').show();
       });
       break;
       case 4: $(function() {
       $("#mn_5").attr('class','tabli active');
       $('#tab-5').show();
       });
       break;
       case 5: $(function() {
       $("#mn_6").attr('class','tabli active');
       $('#tab-6').show();
       });
       break;
       case 6: $(function() {
       $("#mn_7").attr('class','tabli active');
       $('#tab-7').show();
       });
       break;
       case 7: $(function() {
       $("#mn_8").attr('class','tabli active');
       $('#tab-8').show();
       });
       break;
       case 8: $(function() {
       $("#mn_9").attr('class','tabli active');
       $('#tab-9').show();
       });
       break;
       case 9: $(function() {
       $("#mn_10").attr('class','tabli active');
       $('#tab-10').show();
       });
       break;
       case 10: $(function() {
       $("#mn_11").attr('class','tabli active');
       $('#tab-11').show();
       });
       break;
       case 11: $(function() {
       $("#mn_12").attr('class','tabli active');
       $('#tab-12').show();
       });
       break;
       }
       </script>

    Reflections:

    • Basic math and string manipulation is for suckers. It's always better to use a switch statement.
    • External src for Javascript code? No thanks, inline <script> tags are best, preferably littered throughout the HTML document at random. Double for CSS.
    • Instead of writing one jQuery document ready handler it's better to write twelve. Sure, it makes it harder to maintain, but it sure does improve readability, amirite?
    • Also, always use $ as your jQuery selector. No other script loaded after jQuery will ever redefine $

     



  • @pygorex said:

    Also, always use $ as your jQuery selector. No other script loaded after jQuery will ever redefine $

    Oh man that one bugs me.

    The worst part is that the $ variable is reserved for the interpreter. Well... was. Now through years of mis-use, no interpreter could actually use it without breaking everything.



  • @blakeyrat said:

    Oh man that one bugs me.

    Why? It's pretty standard at this point. Also, if you absolutely have to redefine $ later, you can just refactor the code. I like $; it's concise.

    @blakeyrat said:

    The worst part is that the $ variable is reserved for the interpreter. Well... was. Now through years of mis-use, no interpreter could actually use it without breaking everything.

    [citation needed] Not that I don't believe you, but I would just like to learn more.



  • @blakeyrat said:

    @pygorex said:
    Also, always use $ as your jQuery selector. No other script loaded after jQuery will ever redefine $

    Oh man that one bugs me.

    Using $ is actually quite handy. Which can lead to conflicts as lots of coders and frameworks like to define $ for their own purposes.

    The workaround is to never assume that global $ is the jQuery object and wrap your code in an anonymous function:

    (function($) {
     $('.jquery-selector-is-fine').html('<strong>some stuff</strong>');
    })(jQuery); 
    


  • @morbiuswilters said:


    @blakeyrat said:

    The worst part is that the $ variable is reserved for the interpreter. Well... was. Now through years of mis-use, no interpreter could actually use it without breaking everything.

    [citation needed] Not that I don't believe you, but I would just like to learn more.

     

    ECMAScript 3.0 § 7.6 (Identifiers): “This standard specifies one departure from the grammar given in the Unicode standard: The dollar sign ($) and the underscore (_) are permitted anywhere in an identifier. The dollar sign is intended for use only in mechanically generated code.”

    This was removed in ECMAScript 3.1 and subsequent versions of the standard allow $ in any identifier.



  • Ah, I wasn't aware that the spec had been changed. I guess since everybody's running ECMA 4 now, it's a non-issue. Early versions of jQuery and other $-using JavaScript code was indeed in violation of the spec.

    Used to be one of my good examples of when spec writers put in confusing shit, since despite being reserved for "mechanically generated code" nobody actually seemed to know what the hell was meant by that, and it wasn't defined anywhere.



  • @blakeyrat said:

    Used to be one of my good examples of when spec writers put in confusing shit, since despite being reserved for "mechanically generated code" nobody actually seemed to know what the hell was meant by that, and it wasn't defined anywhere.

    Code typed by mechanical monkeys on mechanical type writers is the only thing that would make sense.



  • @pygorex said:

    <!--THIS SCRIPT CHECKS THE MONTH AND TRIGGERS THE [b]CLASES[/b] ACCORDINGLY-->
    an instant CLASIC!



  • @pygorex said:

    The workaround is to never assume that global $ is the jQuery object and wrap your code in an anonymous function:

    (function($) {
     $('.jquery-selector-is-fine').html('<strong>some stuff</strong>');
    })(jQuery); 
    

    To check that I'm understanding this correctly: the additional scope is unnecessary in this particular example, which could just be

    jQuery('.jquery-selector-is-fine').html('<strong>some stuff</strong>');

    but this technique gains in value when the code inside the function scope makes multiple use of $. Correct?



  • @pjt33 said:

    but this technique gains in value when the code inside the function scope makes multiple use of $. Correct?
     

    Yes.

Log in to reply