www.webdeveloper.com
Results 1 to 6 of 6

Thread: Please help me understand how a function can use an object as a parameter.

  1. #1
    Join Date
    Oct 2012
    Posts
    10

    Please help me understand how a function can use an object as a parameter.

    I am following a tutorial from a book. The tutorial is pretty straightforward. There is some html code which has embedded javascript and there is also an external javascript file. Basically, the website uses javascript to get the current date and time and display it in the correct field, but before doing that it uses an external javascript file to extract the current date and time as separate values and put them together as a string. This string will then be put into the corresponding field on the webpage.

    Sorry for going into the long description, but I felt like I have to explain what I am doing so its easier to understand.

    The issue I am having is with the external file. It uses an object as a parameter for a function, even though the object "seemingly" doesn't exist anywhere! How is this possible? This is driving me nuts. I spend many hours looking over the code trying to find out where this parameter exists that they are passing in, and still I cannot figure it out.

    This is the htm file
    Code:
    <!DOCTYPE html>
    <html>
    
       <head>
       <!--
          New Perspectives on HTML, CSS, and JavaScript
          Tutorial 11
          Tutorial Case
    
          New Year's Countdown Clock
          Author: 
          Date:  7/2/2013 
    
          Filename:         clock.htm
          Supporting files: banner.png, functions.js, 
                            modernizr-1.5.js, newyear.css
    
       -->
    
          <meta charset="UTF-8" />
          <title>Tulsa's New Year's Bash</title>
            
           <script src="modernizr-1.5.js" type="text/javascript" ></script>
    
          <link href="newyear.css" rel="stylesheet" type="text/css" />
            
    
           <script type="text/javascript" src="functions.js"></script> 
           <script type="text/javascript">
    
               function NYClock() {
                   
                   //the today variable contains the current date and time
                   var today = new Date("February 24, 2015 14:35:05");
                   
                   //display the current date and time
                   document.clockform.dateNow.value = showDate(today);
                   document.clockform.timeNow.value = showTime(today);
    
                   //calculate the time left until new year's eve bash
                   document.clockform.daysLeft.value = "99 day(s)";
                   document.clockform.hrsLeft.value = "99 hour(s)";
                   document.clockform.minsLeft.value = "99 minute(s)";
                   document.clockform.secsLeft.value = "99 second(s)";
    
               }
           </script>
    
       </head>
    
       <body onload="NYClock()">
          <form name="clockform" id="clockform" action="">
    
          <header>
             <h1>New Year's Eve<br />Bash</h1>
    
             <div id="time">
                <h2>Hello Tulsa</h2>
                <input id="dateNow" name="dateNow"  />
                <input id="timeNow" name="timeNow" />
             </div>
    
             <div id="countdown">
                <h2>Watch the Countdown</h2>
                <input id="daysLeft" name="daysLeft"  />
                <input id="hrsLeft" name="hrsLeft"  /> 
                <input id="minsLeft" name="minsLeft"  /> 
                <input id="secsLeft" name="secsLeft"  /> 
             </div>
    
             <img src="banner.png" alt="" />
          </header>
    
          <nav class="horizontal">
             <ul>
                <li><a href="#">News</a></li>
                <li><a href="#">Entertainment Beat</a></li>
                <li><a href="#">Tulsa Times</a></li>
                <li><a href="#">Event Calendar</a></li>
                <li><a href="#">City Links</a></li>
             </ul>
          </nav>
    
          <nav class="vertical">
             <h1>Links to the Party</h1>
             <ul>
                <li><a href="#">FrostiRun</a></li>
                <li><a href="#">Kid's Korner</a></li>
                <li><a href="#">Chester the Jester</a></li>
                <li><a href="#">A Taste of Tulsa</a></li>
                <li><a href="#">Winter Art Fair</a></li>
                <li><a href="#">Lester's Blues Band</a></li>
                <li><a href="#">The Jazz Express</a></li>
                <li><a href="#">The Fireworks Show</a></li>
                <li><a href="#">Final Countdown</a></li>
             </ul>
          </nav>
    
          <section id="middle">
             <p>Tulsa's New Year's Eve Bash is back for the 22nd year of fun and 
                excitement. Be sure to arrive 
                early for all of the festivities and the final countdown.
                The party starts on December 31 at noon with 
                the <em>FrostiRun</em> 5K and 10K races. Sign up now or the morning of 
                the race.
             <p>Family fun is available at the <em>Kid's Korner</em> with 
                booths and free activities for the whole family, including 
                performances from Tulsa's own <em>Chester the Jester</em>.
             </p>
    
          </section>
    
          <section id="right">
             <p>The fun continues with <cite>A Taste of Tulsa</cite> 
                from Tulsa's best eateries, and the artistically inclined should
                plan on attending the <cite>Winter Art Fair</cite> on Tulsa's 
                downtown square.
             </p>
             <p>Music from <cite>Lester's Blues Band</cite> and <cite>The Jazz 
                Express</cite> brings us into the New Year. The dancing starts 
                at 7 p.m. and continues until midnight. From 10 to 11 p.m. we 
                say goodbye to the old year (and ring in the new) with the 
                famous New Year's Eve Bash fireworks spectacular. 
             </p>
          </section>
    
          <footer>
             <address>
                New Year's Eve Bash  
                340 Main Street, Tulsa, OK 74102 
                (918) 555-3481
             </address>
          </footer>
    
          </form>
    
       </body>
    
    </html>


    This is the external .js file

    Code:
       /*
       New Perspectives on HTML, CSS, and JavaScript
       Tutorial 11
       Tutorial Case
    
       Author:    
       Date:   8/7/2013
    
       Function List:
       showDate(dateObj)
          Returns the current date in the format mm/dd/yyyy
    
       showTime(dateObj)
          Returns the current time in the format hh:mm:ss a.m./p.m.
    
       calcDays(currentDate)
          Returns the number of days between the current date and January 1st
          of the next year
    
    */
    
    
    
    function showDate(dateObj){
        thisDate = dateObj.getDate();
        thisMonth = dateObj.getMonth() + 1;
        thisYear = dateObj.getFullYear();
        return thisMonth + "/" + thisDate + "/" + thisYear;
    
    }
    
    function showTime(dateObj){
        thisSecond = dateObj.getSeconds();
        thisMinute = dateObj.getMinutes();
        thisHour = dateObj.getHours();
        return thisHour + ":" + thisMinute + ":" + thisSecond;
    }
    Do you see the dateObj that they are passing in? This dateObj doesn't exist anywhere in the html file or the javascript file. How can a function use methods to extract something from an object when this object was never created or defined?


    Thanks very much.
    Last edited by ibex333; 08-08-2013 at 06:18 PM.

  2. #2
    Join Date
    Jun 2008
    Posts
    106
    Obviously they create an object somewhere. It's probably just new Date(), which is an object.
    I can't know for sure since you didn't post the external file, so... yeah.

  3. #3
    Join Date
    Oct 2012
    Posts
    10
    Yes! You are correct. But how does new Date() create dateObj? the new date, as you can see in the htm file, was written to the "today" variable. So shouldnt it be "today" that will be passed in and not dateObj? Sorry.. I am completely lost.

    Here, I'll post both files. Look at my OP.

    Whats interesting, is that I can call that parameter whatever.... it doesn't have to be called "dateObj"... and it still works fine!
    Last edited by ibex333; 08-08-2013 at 06:22 PM.

  4. #4
    Join Date
    Jun 2008
    Posts
    106
    Code:
    var today = new Date("February 24, 2015 14:35:05");
                   
                   //display the current date and time
                   document.clockform.dateNow.value = showDate(today);
                   document.clockform.timeNow.value = showTime(today);
    This code in NYClock() creates a new Date() object, and passes that object to showDate and showTime. The functions receive a reference to the object so that they can access it.
    I think you're just confused on parameter/argument names. I'm not very good at explaining, but I'll try.

    The parameter can be named anything. It doesn't have to relate to the variable name that was passed. Regardless of what the variable name was that contained the date object, showTime & showDate will rename it to 'dateObj' and use it like that.

    Code:
    function process(dog) {
        // process() was passed a reference to the string stored
        // in the variable 'cat'
        // this parameter can be named anything. it's just a reference
        return dog;
    }
    
    var cat = 'persian';
    process(cat);
    I hope you understand. I'm not the best at explanations.

  5. #5
    Join Date
    Oct 2012
    Posts
    10
    I still dont quite understand, but I think you already pointed me in the right direction....

    Does the relating topic in javascript have something to do with "pass by reference" and "pass by value"? I want to read up on this because I am very shaky on this topic.
    Last edited by ibex333; 08-08-2013 at 07:14 PM.

  6. #6
    Join Date
    Jun 2008
    Posts
    106
    Yea I see how it could be confusing at first. I don't know what you would look up specifically for that. It's just something you'll have to get used to (the difference between parameters/arguments and variables).

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles