problems with operators & expressions loading into page properly

Hi. I am a new student to javascripting. We have an assignment in the book that the teacher states is a poorly written book, yet is not offering any help and there are no tutors on campus to assist us. The book gives some pre-written code, and we are to do the rest based on the books steps. I am at a point where no tutorials have answered what I need help with and I'm hoping someone can offer suggestions.
I have both an htm page and a js page. I have added comments on the js page as to what it's supposed to do, and the part I'm having problems with is on the htm page- based on the wording of the book. The page is essentially an events form, that is to calculate the difference between today's date and the next event (some event for "hector's" web page)

I have worked on this for the past 4 days straight and everything I've tried has given me no results.

the book asks this:
A) Using the today variable as the parameter value, call the showDateTime() function & store the value returned by the function in the thisDay field of the eventform Web form.
B) Using today as the first parameter value & Date1 as the second parameter value, call the changeYear() function. Calling this function sets the correct year value for the first event in Hector's list. Repeat this step for the Date2-Date6 variables.
C) Call the countdown() function using the today variable as the first parameter value & the Date1 variable as the 2nd. Display the results returned by this funciion in the count1 field of the event web form. Running this command displays the time remaining until the first event in Hector's list. Repeat this step for the other 5 events.

If anyone can help on this that would be so greatly appreciated!!


first is the .htm code
<html>
<head>
<!-- 
   New Perspectives on JavaScript
   Tutorial 2
   Review Assignment
 
   Events in Dixon
   Author: Maria 
   Date:   February 11, 2009
 
   Filename:         events.htm
   Supporting files: dates.js, dixon.css, logo.jpg
-->
 
<title>Upcoming Events at Dixon</title>
<link href="dixon.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="dates.js"></script>
<script type="text/javascript">
function showCountdown() {
//the today variable contains the current date and time
var today = new Date();
today = New Date("December 1, 2007 6:31:45");
Date1 = (January 14, 2007, 10:00:00");
Date2 = (May 21, 2007 12:00:00);
Date3 = (July 4, 2007 21:00:00);
Date4 = (September 1, 2007 12:00:00);
Date5 = (December 1, 2007 11:30:00);
Date6 = (December 31, 2007 15:30:00);
}
// I'm not sure if the rest of the script below is done correctly
show changeYear(date1);
show changeYear(date2);
show changeYear(date3);
show changeYear(date4);
show changeYear(date5);
show changeYear(date6);
</script>
 
 
 
</head>
 
<body onload='showCountdown()';> /*one of the steps after the requested questions */
<form name="eventform" id="eventform" action="">
 
<div id="links1">
   <a href="#">Home</a>
   <a href="#">City Services</a>
   <a href="#">City Agencies</a>
   <a href="#">Mayor's Office</a>
   <a href="#">News Today</a>
   <a href="#">Upcoming Events</a>
</div>
<div id="logo">
   <img src="logo.jpg" alt="New Years Bash" />
</div>
<div id="links2">
   <a href="#">Site Map</a>
   <a href="#">Search Engine</a>
   <a href="#">Public Notices</a>
   <a href="#">Survey Form</a>
   <a href="#">Contact Us</a>
   <a href="#">E-Government</a>
</div>
 
 
<div id="main">
<h3>Countdown to Upcoming Events</h3>
<table>
<tr>
   <td></td>
   <th style="text-align: right">Current Time </th>
   <td><input name="thisDay" id="thisDay" readonly="readonly" size="40" onLoad="javascript:showDateTime(today)" /></td>
</tr>
<tr>
   <th>Event</th>
   <th>Starting Time</th>
   <th>Countdown to Event</th>
</tr>
<tr>
   <td><input value="Heritage Day" readonly="readonly" size="20" /></td>
   <td><input value="Jan 14 at 10:00 am"readonly="readonly" size="20" /></td>
   <td><input name="count1" id="count1" size="40" /></td>
</tr>
<tr>
   <td><input value="Spring Day Rally" readonly="readonly" size="20" /></td>
   <td><input value="May 21 at 12:00 pm"readonly="readonly" size="20" /></td>
   <td><input name="count2" id="count2" size="40" /></td>
</tr>
<tr>
   <td><input value="July 4th Fireworks" readonly="readonly" size="20" /></td>
   <td><input value="Jul 4 at 9:00 pm" readonly="readonly" size="20" /></td>
   <td><input name="count3" id="count3" size="40" /></td>
</tr>
<tr>
   <td><input value="Summer Bash" readonly="readonly" size="20" /></td>
   <td><input value="Sep 1 at 12:00 pm" readonly="readonly" size="20" /></td>
   <td><input name="count4" id="count4" size="40" /></td>
</tr><tr>
   <td><input value="Holiday Party" readonly="readonly" size="20" /></td>
   <td><input value="Dec 1 at 11:30 am" readonly="readonly" size="20" /></td>
   <td><input name="count5" id="count5" size="40" /></td>
</tr>
<tr>
   <td><input value="New Year's Bash" readonly="readonly" size="20" /></td>
   <td><input value="Dec. 31 at 3:30 pm" readonly="readonly" size="20" /></td>
   <td><input name="count6" id="count6" size="40" /></td>
</tr>
</table>
</div>
 
</form>
</body>
</html>
 
 
this is the ..js code
/*
   New Perspectives on JavaScript
   Tutorial 2
   Review Assignment
 
   Author: Maria 
   Date:  February 11, 2009
 
   Function List:
   showDateTime(time)
      Returns the date in a text string formatted as:
      mm/dd/yyyy at hh:mm:ss am
 
   changeYear(today, holiday)
      Changes the year value of the holiday object to point to the
      next year if it has already occurred in the present year
 
   countdown(stop, start)
      Displays the time between the stop and start date objects in the
      text format:
      dd days, hh hrs, mm mins, ss secs
*/
 
function showDateTime(time) {
   date = time.getDate();
   month = time.getMonth()+1;
   year = time.getFullYear();
 
   second = time.getSeconds();
   minute = time.getMinutes();
   hour = time.getHours();
 
   ampm = (hour < 12) ? " am" : " pm";
   hour = (hour > 12) ? hour - 12 : hour;
   hour = (hour == 0) ? 12 : hour;
 
   minute = minute < 10 ? "0"+minute : minute;
   second = second < 10 ? "0"+second : second;
 
   return month+"/"+date +"/"+year+" at "+hour+":"+minute+":"+second+ampm;
}
 
//creating function to changeYear with 2 parameters: today,holiday
function changeYear(today,holiday) {
//get full year to extract the 4 digit from today variable,store in variable named year 
  var year=today.getFullYear();
//use setFullYear()date method to set full year of holiday date object to value of year variable 
 var holiday = holiday.setFullYear(year);
 year = (holiday < today) ? year+1 : year;
 holiday=holiday.setFullYear(year);
 
}
 
function countdown(start,stop) {
// create a function called countdown that passes 2 parameters- start and stop.the start
//parameter contains a date object for the starting date, and the stop parameter contains
// a date object for the stopping date
//1st line calculate time difference between stop& start,storing in variable named time
time = (stop.getDate() - start.getDate());
//2nd, convert time difference into days, hours, minutes, seconds in a text string
var today=New Date("February 15, 2009 14:35:05");
var oneDay = 1000*60*60*24;//in case I need to divide time by this to get days returned
var days = today.getDay();
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
 
return days + ":" + hours + ":" + minutes + ":" seconds;
 
}

Open in new window

ylekot88Asked:
Who is Participating?
 
HonorGodSoftware EngineerCommented:
One thing that I hope you find here on EE is a large number of people who want to help.

The points are a nice mechanism of recognition... and they're good for my ego. :-)

I have a long way to go (about 4 million points) to catch up with b0l though...
0
 
HonorGodSoftware EngineerCommented:
Well, one problem I saw is that when you try to get the day of month using:

  var days = today.getDay()    

  you are actually getting the day of week (from 0..6, where 0 == Sun, 1 == Mon, etc).

What kind of help do you want?

Where do you want to start?
0
 
HonorGodSoftware EngineerCommented:
Under what conditions, or events, do you want to do each of the steps?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
HonorGodSoftware EngineerCommented:
For example, when do you want to

"...call the showDateTime() function & store the value returned by the function in the thisDay field of the eventform Web form"?
0
 
HonorGodSoftware EngineerCommented:
Ah, another problem, the "onload" attribute is only defined for the <body> tag, not for individual elements on the page, like this:


<input name="thisDay" id="thisDay" readonly="readonly" size="40" onLoad="javascript:showDateTime(today)"

Open in new window

0
 
HonorGodSoftware EngineerCommented:
So, another question is:

Q: Do you know how to locate a element on the page within a javascript routine?
0
 
HonorGodSoftware EngineerCommented:
sigh... sorry for the bad grammer.

Q: Do you know how to locate an element on the page within a javascript routine?
0
 
HonorGodSoftware EngineerCommented:
Q: Do you understand the difference between the name and id attributes?
0
 
HonorGodSoftware EngineerCommented:
Yet another problem...

Javascript is CaSe SeNsItIVe...

So, "New Date(..."  is not recognized as valid, but "new Date(..." is.
0
 
HonorGodSoftware EngineerCommented:
Let me know when you have digested this stuff, and we can continue...
0
 
ylekot88Author Commented:
Thank you for getting back to me so promptly!

Let me address a few of these as best as I can.

As far as the function countdown(start,stop) {code inserted here},
the homework stated to make a function called countdown with 2 parameters- a start date object & a stop date object. The purpose of the function is to return a text string displaying the number of days, hours, minutes and seconds between a starting date & stopping date in the form.

Under the "countdown to events" column on the htm page, heritage day's countdown is listed as "44 days, 3 hrs, 28 mins, 14 secs. So I am to understand that the function I created gives the numbers of days, hours, minutes & seconds and I am to add the text strings "days" + "hours" with the results?

As far as the "call the showDateTime() function & store the value returned by the function in the thisDay field of the eventform Web form"?" I have no idea where this is supposed to go. Up until this point, I have not created anything called thisDay. On the htm page, I created the function showCountDown(), I'm not even clear if it should have "document.form.field.value=field_value" written in, and replace form.field with eventform. and the field_value should be "thisDay". The first I noticed thisDay was down below listed in the table, as this
<table>
<tr>
   <td></td>
   <th style="text-align: right">Current Time </th>
   <td><input name="thisDay" id="thisDay" readonly="readonly" size="40" /></td>
</tr>

I was hoping for a long shot in putting the showDateTime(thisDay) there as an onLoad, because I genuinely have no clue where this is supposed to go. I emailed my teacher for some clarity on Thursday, and I have heard nothing.

I'm sorry, I'm not a bit clear on your question of "do I know how to locate an element on the page within a javascript routine"... Up to this point, the book instructs us to" insert function xyz under a div tag."

I understand the difference between the name & id attributes, and I've been trying to read this assignment line by line to not get ahead of myself, but the thisDay line makes me think I don't understand any of this.
Again, thank you for taking the time to explain & help

0
 
HonorGodSoftware EngineerCommented:
Well, you do have a start.

Unfortunately, you also have lots of ... let us call them "opportunities for improvement... "  :-)

This is not something that I will answer for you completely at one shot.
That is not how you will learn.  So, we can start slowly, and work our way
through it.

Let's start with something that can cause people a lot of difficulties.

Q: What is the difference between local and global variables in JavaScript?
0
 
HonorGodSoftware EngineerCommented:
You said:
...
Up until this point, I have not created anything called thisDay
...

Then, you immediately followed with some HTML from the page...

Note that the INPUT element of this table cell has both a name, id attributes, the values of which are "thisDay"

<table>
...
<tr>
   <td></td>
   <th style="text-align: right">Current Time </th>
   <td><input name="thisDay" id="thisDay" readonly="readonly" size="40" /></td>
</tr>
...

Open in new window

0
 
HonorGodSoftware EngineerCommented:
From this, we can conclude that this input element, which by the way has an implied "type" of "text", can be located using either the name, or id attribute of "thisDay".
0
 
HonorGodSoftware EngineerCommented:
Let's start really simply.  For example, with a trivial table, and no javascript
----------------------------------------------------------------------
<html>
<head>
<title> Dixon </title>
</head>
<body>
  <table>
    <tr>
      <th>Today:</th>
      <td><input name='thisDay' id='thisDay' readonly='readonly' size='60' /></td>
    </tr>
  </table>
</body>
</html>
----------------------------------------------------------------------
Based upon what you have already provided, this should be easily understood.

No, as you have already demonstrated, you can use the "onload" attribute of the <body> tag to execute an arbitrary JavaScript statement.  The following html will display a JavaScript alert (dialog) box when the browser has completely loaded the page.
----------------------------------------------------------------------
<html>
<head>
<title> Dixon </title>
</head>
<body onload='alert("Hi")'>
  <table>
    <tr>
      <th>Today:</th>
      <td><input name='thisDay' id='thisDay' readonly='readonly' size='60' /></td>
    </tr>
  </table>
</body>
</html>
----------------------------------------------------------------------
In fact, as you have already shown, this can be an invocation of an arbitrary JavaScript function.
----------------------------------------------------------------------
<html>
<head>
<title> Dixon </title>
<script type='text/javascript'>
  function init() {
    alert( 'Hi' )
  }
</script>
</head>
<body onload='init()'>
  <table>
    <tr>
      <th>Today:</th>
      <td><input name='thisDay' id='thisDay' readonly='readonly' size='60' /></td>
    </tr>
  </table>
</body>
</html>
----------------------------------------------------------------------
Now, one of the reasons for document elements have name and/or id attributes is so that JavaScript code can locate, and manipulate these document elements.

Some functions are defined as part of the "document" object that can be used to locate document elements.  The one with which we want to look
right now is:

document.getElementById()

This routine expects (requires) 1 parameter, which is the string value of
the id attribute of a document element to be located.  For example, to
locate the "INPUT" element of the above HTML, we could use something
like this:
----------------------------------------------------------------------
<html>
<head>
<title> Dixon </title>
<script type='text/javascript'>
  function init() {
    var ele = document.getElementById( 'thisDay' )
    if ( ele ) {
      ele.value = 'thisDay document element'
    } else {
      alert( 'Specified element not found: id="thisDay"' )
    }
  }
</script>
</head>
<body onload='init()'>
  <table>
    <tr>
      <th>Today:</th>
      <td><input name='thisDay' id='thisDay' readonly='readonly' size='60' /></td>
    </tr>
  </table>
</body>
</html>
----------------------------------------------------------------------
Does this make sense?
0
 
ylekot88Author Commented:
LOL! Definitely could use room for improvement :)

My understanding of the global and local variables  is this: Local scope is when a variable is created within a javascript function, and can be used only within that function. If a variable is not declared within functions, and is accessible to all code in a page including any code within a function, that would be Global. In lament's terms to me, does that mean the predefined functions such as dateObj.getDate() would be considered a global because it can be used in any javascript you write?

I saw the name/id attribute of "thisDay" in the table form, but I was under the assumption somehow I was supposed to have created thisDay, and just calling the function elsewhere. Does this mean I'm replacing the "thisDay" with showDate();? (I feel like I'm relearning the alphabet here, and asking "so, you say b comes after a"). If this is right, is the javascript:showDateTime(today) what replaces it, or is it adding another <script type = "text/javascript">  and does it need to be onLoad, or use another event handler for it to work?
0
 
HonorGodSoftware EngineerCommented:
If not, please ask some questions...

If so, we can continue...  

Now that we can:
- Write HTML to describe what to be rendered (displayed) on the page, and
- Write some JavaScript to locate and modify a document element, we are
  well on the way to resolving of your issues.

Simple modification of the last code allows us to display a date & time in this
document element, instead of the simple text that we had previously displayed.

----------------------------------------------------------------------
<html>
<head>
<title> Dixon </title>
<script type='text/javascript'>
  function init() {
    var ele = document.getElementById( 'thisDay' )
    if ( ele ) {
      ele.value = new Date()
    } else {
      alert( 'Specified element not found: id="thisDay"' )
    }
  }
</script>
</head>
<body onload='init()'>
  <table>
    <tr>
      <th>Today:</th>
      <td><input name='thisDay' id='thisDay' readonly='readonly' size='60' /></td>
    </tr>
  </table>
</body>
</html>
----------------------------------------------------------------------

  Wow, that's pretty neat.  However, is it in the format you want? Probably not.  That is what this is all about... Trying to figure out what to compute,
and how to display it on the page.
0
 
HonorGodSoftware EngineerCommented:
Remember that JavaScript is CaSe SeNsiTiVe! So, dateObj is not something known, or defined as part of the language.  If you want a variable named dateObj, you would have to declare (define) and assign it.

Your definition is good.  The reason that I brought it up was that you had many instances of code like this within your functions, are these global, or local variables?

function showDateTime(time) {
   date = time.getDate();
   month = time.getMonth()+1;
   year = time.getFullYear();
 
   second = time.getSeconds();
   minute = time.getMinutes();
   hour = time.getHours();
 
   ampm = (hour < 12) ? " am" : " pm";
   hour = (hour > 12) ? hour - 12 : hour;
   hour = (hour == 0) ? 12 : hour;
 
   minute = minute < 10 ? "0"+minute : minute;
   second = second < 10 ? "0"+second : second;
 
   return month+"/"+date +"/"+year+" at "+hour+":"+minute+":"+second+ampm;
}

Open in new window

0
 
HonorGodSoftware EngineerCommented:
By the way, here is a very useful site

http://www.w3schools.com

On the main page, there is a link on the left side labelled "Learn JavaScript", which has a JavaScript tutorial.

One of the really, really useful things about this site is the number of pages that include "Try-It-Yourself Demos".  These pages can be used to enter (or paste) a small script, or bit of HTML to be tested.  I use these all the time to check my examples.
0
 
HonorGodSoftware EngineerCommented:
hehe... There is a great deal of difference between

lament : http://www.merriam-webster.com/dictionary/lament

and

laymen : http://www.merriam-webster.com/dictionary/laymen

You typed "In lament's terms...", when you really meant "In laymen's terms..."
0
 
ylekot88Author Commented:
The wheels are churning slowly, but I think I'm understanding what you are stating. Which is good!
So, if I am doing code similar to what you stated above, I would also be applying the countdown() function in a similar manner where its asking for the today parameter value and the Date1 variable as a second parameter, the results of this would be placed in something like document.getElementById('count1')?
0
 
HonorGodSoftware EngineerCommented:
The reason for pointing you to the w3schools page was to show you how you could use it to quickly and easily test your code.  For example, go to

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_parsefloat

and page the following into the input area, and click the "Edit and click me" button.

What happens?  Nothing, because you never "call" or invoke the function.

So, change the <body> tag to:

<body onload='showDateTime( new Date() )'>

and click the button, what happens?

Nothing again!  Why?  Because showDateTime() returns a string, and you don't do anything with it...

Change it (the body tag) to:

<body onload='alert( showDateTime( new Date() ) )'>

And try it one more time.  What happens?

You see the output of your function.

Is this how you want the data to look?
<html>
<body>
 
<script type="text/javascript">
 
function showDateTime(time) {
   date = time.getDate();
   month = time.getMonth()+1;
   year = time.getFullYear();
 
   second = time.getSeconds();
   minute = time.getMinutes();
   hour = time.getHours();
 
   ampm = (hour < 12) ? " am" : " pm";
   hour = (hour > 12) ? hour - 12 : hour;
   hour = (hour == 0) ? 12 : hour;
 
   minute = minute < 10 ? "0"+minute : minute;
   second = second < 10 ? "0"+second : second;
 
   return month+"/"+date +"/"+year+" at "+hour+":"+minute+":"+second+ampm;
}
 
</script>
 
</body>
</html>

Open in new window

0
 
HonorGodSoftware EngineerCommented:
re: http://www.experts-exchange.com/Q_24147092.html#a23653197

The result of:

document.getElementById('count1')?

is a "reference" to a document element, if it exists, that has

id='count1'

What do you want to do with this "reference"?

Probably put it into a variable, so you can use it.

e.g.,


var count = document.getElementById('count1')

Open in new window

0
 
HonorGodSoftware EngineerCommented:
One (very good) reason to use this kind of assignment is so that you can check to see if the desired element exists.  This can be done as simply as using something like:
var count = document.getElementById('count1')
if ( count ) {
  alert( count.value )
} else {
  alert( 'Specified element not found.  id="count"' )
}

Open in new window

0
 
HonorGodSoftware EngineerCommented:
oops, the second alert should have been:
alert( 'Specified element not found.  id="count1"' )

Open in new window

0
 
HonorGodSoftware EngineerCommented:
re: http://www.experts-exchange.com/Q_24147092.html#a23653197

So, as a more complete answer to the question:

Q: Would the results of this [computation] would be placed in something like document.getElementById('count1')?

A: Not in document.getElementById('count1'), but into the document element, or more precisely, into a specific attribute of the document element.  Namely, the value attribute.  Something like this:
var count = document.getElementById('count1')
if ( count ) {
  count.value = 'My result'
} else {
  alert( 'Specified element not found.  id="count"' )
}

Open in new window

0
 
HonorGodSoftware EngineerCommented:
Please take a close look at, and try the steps in my earlier update:

http://www.experts-exchange.com/Q_24147092.html#a23653226
0
 
ylekot88Author Commented:
I have http://www.w3schools.com bookmarked on my toolbar, and actually did the javascript tutorial right before I attempted this project. I do appreciate all of your help on this!

I understand this is going to be a lot of trial and error, which I don't mind, but understanding the fundamentals of what's being asked is a bit overwhelming when all of this is so new to me.

The html that was run through the validator was code previously written (by the book) and we are to call it on the htm page.

The count1 field of the eventform Web form, essentially has count1-count6. I am" to use the countdown() function using today's variable as the first parameter value and the Date1 variable as the second, then I am to display the result returned by this function in the count1 field of the eventform Web form, as running this command displays the time remaining until the first event in Hector's list, and I am to repeat this step for the other five events"

 
0
 
ylekot88Author Commented:
I'm sorry, I think I'm a bit confused. That last chunk of your answer:

Not in document.getElementById('count1'), but into the document element, or more precisely, into a specific attribute of the document element.  Namely, the value attribute.  

am I to be running a similar script as yours, then when count1 is located, displaying countdown(today,date1) instead?
0
 
HonorGodSoftware EngineerCommented:
Sorry for any confusion.  I know that this can be a bit overwhelming when you first have it presented.

Let's try it this way.

When you have a document element like this:

<input type='text' id='count1' value='123'>

and the browser "renders" it, this rendering is actually a number of things:

1. Parsing, or understanding what the tag is, and verifying that all parts of the
    tag are recognized, handled accordingly.
    This include the creation, in the browser, of a data structure used to
    represent this document element, and its attributes.

2. The browser uses its internal representation of all of the document
    elements to draw the page, and its contents on the screen.

So, when JavaScript is executing, and a statement like this is encountered:

var count = document.getElementById('count1')

The JavaScript "engine" that is running in the browser looks trough it's data
structures for an element that has an id attribute with the value of "count1".
Since id attributes are supposed to be unique, it stops when it finds the first
one in its representation in the data structure.  This way, if another document
element should somehow (incorrectly) have an id="count1" attribute value,
it can not be located using the standard statement shown above.

Ok, if a document element with this id attribute exists, the a reference to this
document element will be stored in the count variable.  If not, a value of null
(i.e., 0) will be stored in the variable named count.  That is why (and how)
the "if" statement, shown above, is able to detect if a document element with
this id attribute value exists.

So, the next step, when the document element is located, is to assign the
value attribute a new value using a statement something like:

  count.value = 'Some new value'

This replaces any existing value in this document element attribute with this
string value.

The browser will then determine to refresh what information is on the page
based upon the data structure contents, and the portion of the script that
represents the "input" tag that has the id attribute value of "count1" will
now show the new string value (in this case 'Some new value').

Does that make sense?
0
 
HonorGodSoftware EngineerCommented:
So, your script will need to locate the different document elements on the page that need to have values computed, and update the "value" attribute of each of these document elements.

Hopefully this makes more sense for you.
0
 
ylekot88Author Commented:
wow, you are so incredibly helpful! that does make much more sense. I am going to make adjustments and I will let you know how it turns out. Thank you again! you deserve a huge raise :)
0
 
HonorGodSoftware EngineerCommented:
hehe...  I'm glad that it helps.  Unfortunately, they use a multiplier for the "raise", so anything times zero is still zero.  :-)

I will be leaving soon to go home for the afternoon.  I'll try to check back later though to see how you are doing.
0
 
HonorGodSoftware EngineerCommented:
Aren't you glad that I'm taking the time to explain, in stead of just giving an answer you wouldn't understand?  ;-)
0
 
ylekot88Author Commented:
Yes, I am extremely glad you are taking the time to explain this to me!
0
 
HonorGodSoftware EngineerCommented:
So, what is next?
0
 
ylekot88Author Commented:
I feel like an idiot right now. I put in alerts and they're not loading. I put in
 var ele = document.getElementByID('thisDay');
if (ele) {
  ele.value = 'thisDay document element'
  } else {
    alert('specified element not found: id="thisDay")
      }
      }
and i'm getting nothing. I tried posting with changes for count1, count2, etc, and absolutely nothing is loading. I'm losing chunks of hair over this
0
 
HonorGodSoftware EngineerCommented:
What browser are you using?

It is probably an indication of a syntax error (or two), somewhere in the code.
For example, that code has an extra closing brace (i.e., '}') but it could come
from an enclosing block of code.

Suggestion:
- "comment out" almost all of your code by adding '// ' to the beginning of
  almost every line
- Then, add small sections of code by removing the comment indicators.

Here are some syntax error that I see:
------------------------------------------------------------------------------------------
<script type="text/javascript">
function showCountdown() {
//the today variable contains the current date and time
var today = new Date();
today = New Date("December 1, 2007 6:31:45");
Date1 = (January 14, 2007, 10:00:00");
Date2 = (May 21, 2007 12:00:00);
Date3 = (July 4, 2007 21:00:00);
Date4 = (September 1, 2007 12:00:00);
Date5 = (December 1, 2007 11:30:00);
Date6 = (December 31, 2007 15:30:00);
}
// I'm not sure if the rest of the script below is done correctly
show changeYear(date1);
show changeYear(date2);
show changeYear(date3);
show changeYear(date4);
show changeYear(date5);
show changeYear(date6);
</script>
------------------------------------------------------------------------------------------

1. Line: today = New Date("December 1, 2007 6:31:45");
    Error: "New" is not correct.  It should not be capitalized

2. Note really a syntax error, but the preceding line assigned today
    with the current date and time.  Why do you assign a value, then
    turn around and immediately change it?

3. The next six lines, all of which start with "Date", are these supposed
    to be local, or global variables?

4. The "assignments" to these "Date" variables are all wrong.
    The assignment to "today" using a date string is the closest to being
    right.   It is right after you change "New" to "new".  None of the
    Date assignments are right.  Look closely at the assignment to today,
    and how you assign to each Date.  How do these statements differ?
0
 
HonorGodSoftware EngineerCommented:
oh yeah, remove all of the "show changeYear()" lines.
For one thing this is syntactically incorrect:

show changeYear(date1)

And "date1" is not the same as "Date1", so you don't have any variables named "date#" (where # is a digit from 1..6)
0
 
ylekot88Author Commented:
Hi

I made some adjustments in the code. the book was stating Date1 not date1, so I changed those.
I have
function showCountdown() {
var today = new Date("December 1, 2007 6:31:45");// this is declaring variable today as "Dec 1, 2007"
var Date1 = ("January 14, 2007, 10:00:00"); //this is declaring Date1 to Hector's first event
var Count1 = document.getElementById('count1'); // this is declaring Count1, look for 'count1' w/in doc
if ( "count1" ) {    //this is my alert if..else statement
  count1.value = (today-Date1)
} else {
  alert( 'Specified element not found.  id="count1"' )
}
}
document.getElementById("count1").value = showCountdown(Count1);// this is calling the //showCountdown function, and in the parameters using Count1, which should pass today-Date1

I then repeated this for the rest of the 'count2-count6'

I deleted the rest of it bc I just wanted to see if this was working. I'm using Firefox 3.06 as my browser.

0
 
HonorGodSoftware EngineerCommented:
ok,  Can you attach the complete code, so that we can see how things look now?
0
 
HonorGodSoftware EngineerCommented:
Look closely at what you have.  What's the difference between these two statements?
var today = new Date("December 1, 2007 6:31:45");
var Date1 = ("January 14, 2007, 10:00:00");

Open in new window

0
 
HonorGodSoftware EngineerCommented:
Hint: You are missing something very important on the 2nd statement!
0
 
ylekot88Author Commented:
I put a comma after the year in the second statement.

this is my new portion of the code
function showCountdown() {                           //calling function showCountdown
var today = new Date("December 1, 2007 6:31:45");    //sets todays date as a temporary date  
var Date1 = ("January 14, 2007 10:00:00");          //sets Date1 to Hector's first event
var Count1 = document.getElementById('count1');      //sets Count1 as variable to look for 'count1' on form              
if ( "count1" ) {                                     //if count1 is found, value is now today minus Date1
  count1.value = (today-Date1)
} else {
  alert( 'Specified element not found.  id="count1"' )  //if not found, set alert
}
document.getElementById("count1").value = showCountdown(Count1); //value of count1 to now call showCountdown function & pass Count1 value

var Date2 = ("May 21, 2007 12:00:00");               //sets var Date2 to Hectors 2nd event
var Count2 = document.getElementById('count2');     //sets Count2 as var to look for 'count2' on form
if ( "count2" ) {                                    //if count2 is found, value is now today minus Date2
  count2.value = (today-Date2)
} else {
  alert( 'Specified element not found.  id="count2"' )  //if not found, set alert
}
document.getElementById("count2").value = showCountdown(Count2);  //value of count2 to now call showCountdown function & pass Count2 value

var Date3 = ("July 4, 2007 21:00:00");               //set var Date 3 to Hector's 3rd event
var Count3 = document.getElementById('count3');      //sets Count3 as var to look for 'count3' on form
if ( "count3" ) {                                    //if count3 is found, value is now today minus Date3
  count3.value = (today-Date3)
} else {
  alert( 'Specified element not found.  id="count3"' ) //if not found, set alert
}
  document.getElementById("count3").value = showCountdown(Count3); //value of count3 to now call showCountdown function & pass Count3 value

var Date4 = ("September 1, 2007 12:00:00");        //set var Date4 to Hector's 4th event
var Count4 = document.getElementById('count4');    //set Count4 to look for 'count4' on form
if ( "count4" ) {                                  //if count4 is found, set new value, if not, set alert not found
  count1.value = (today-Date4)
} else {
  alert( 'Specified element not found.  id="count4"' )
}
document.getElementById("count4").value = showCountdown(Count4); // value of Count4 to now call showCountdown function & pass Count4 value

var Date5 = ("December 1, 2007 11:30:00");           //set var Date5 to Hector's 5th event
var Count5 = document.getElementById('count5');      //set Count5 to look for 'count5' on form
if ( "count5" ) {                                    //if count5 is found, set new value, if not, set alert not found
  count1.value = (today-Date5)
} else {
  alert( 'Specified element not found.  id="count5"' )
}
document.getElementById("count5").value = showCountdown(Count5); //value of Count5 to now call showCountdown function & pass Count5 value

var Date6 = ("December 31, 2007 15:30:00");        //set var Date6 to Hector's 6th event
var Count6 = document.getElementById('count6');    //set Count6 to look for 'count6' on form
if ( "count6" ) {                                  // if count6 is found, set new value, if not, set alert not found
  count6.value = (today-Date6)
} else {
  alert( 'Specified element not found.  id="count6"' )
  }
document.getElementById("count6").value = showCountdown(Count6); //value of Count6 is to now call showCountdown function & pass Count6 value


}
0
 
HonorGodSoftware EngineerCommented:
Look closer!  The second statement is wrong.

Go to one of the w3shools "try it pages", e.g., http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_parsefloat

and try to get this working:

Is the output what you expect?
<html>
<body>
 
<script type="text/javascript">
 
var today = new Date("December 1, 2007 6:31:45");
var Date1 = ("January 14, 2007, 10:00:00");
 
document.write( 'today: ' + today + '<\/br>' )
document.write( 'Date1: ' + Date1 + '<\/br>' )
 
</script>
 
</body>
</html>

Open in new window

0
 
HonorGodSoftware EngineerCommented:
ok, the only thing I've done here is to change the indentation of the code, to make it a little easier to read.

Indentation can be used to help understand what the code is trying to do.
However, the indentation in JavaScript is for the human reader, not the
JavaScript interpreter.  It doesn't care about indentation.

This is not true for every programming language.  There are some languages
for which indentation is critical (e.g., Python).

Anyway.  here are some comments about your code.

1. Line 1 has a comment stating "calling function showCountdown"
    This comment is not correct.  A more accurate comment would be
    "defining function showCountdown".  However, this kind of comment
    is less than useless.  It adds no value to your code.

    It would be better to preceed the code with a comment block that
    tells about the code.  Something like this, for example:

//----------------------------------------------------------------------
// Name: showCountdown()
// Role: Compute and display date constants for portions
//      of the page.
//----------------------------------------------------------------------

2. Line for declares a variable, named "Count1", and assigns
    it what kind of value?

3. What exactly is this statement testing?

  if ( "count1" ) {

  Not what you think!
function showCountdown() {                           //calling function showCountdown
  var today = new Date("December 1, 2007 6:31:45");    //sets todays date as a temporary date  
  var Date1 = ("January 14, 2007 10:00:00");          //sets Date1 to Hector's first event
  var Count1 = document.getElementById('count1');      //sets Count1 as variable to look for 'count1' on form              
  if ( "count1" ) {                                     //if count1 is found, value is now today minus Date1
    count1.value = (today-Date1)
  } else {
    alert( 'Specified element not found.  id="count1"' )  //if not found, set alert
  }
  document.getElementById("count1").value = showCountdown(Count1); //value of count1 to now call showCountdown function & pass Count1 value
 
  var Date2 = ("May 21, 2007 12:00:00");               //sets var Date2 to Hectors 2nd event
  var Count2 = document.getElementById('count2');     //sets Count2 as var to look for 'count2' on form
  if ( "count2" ) {                                    //if count2 is found, value is now today minus Date2
    count2.value = (today-Date2)
  } else {
    alert( 'Specified element not found.  id="count2"' )  //if not found, set alert
  }
  document.getElementById("count2").value = showCountdown(Count2);  //value of count2 to now call showCountdown function & pass Count2 value
 
  var Date3 = ("July 4, 2007 21:00:00");               //set var Date 3 to Hector's 3rd event
  var Count3 = document.getElementById('count3');      //sets Count3 as var to look for 'count3' on form
  if ( "count3" ) {                                    //if count3 is found, value is now today minus Date3
    count3.value = (today-Date3)
  } else {
    alert( 'Specified element not found.  id="count3"' ) //if not found, set alert
  }
  document.getElementById("count3").value = showCountdown(Count3); //value of count3 to now call showCountdown function & pass Count3 value
 
  var Date4 = ("September 1, 2007 12:00:00");        //set var Date4 to Hector's 4th event
  var Count4 = document.getElementById('count4');    //set Count4 to look for 'count4' on form
  if ( "count4" ) {                                  //if count4 is found, set new value, if not, set alert not found
    count1.value = (today-Date4)
  } else {
    alert( 'Specified element not found.  id="count4"' )
  }
  document.getElementById("count4").value = showCountdown(Count4); // value of Count4 to now call showCountdown function & pass Count4 value
 
  var Date5 = ("December 1, 2007 11:30:00");           //set var Date5 to Hector's 5th event
  var Count5 = document.getElementById('count5');      //set Count5 to look for 'count5' on form
  if ( "count5" ) {                                    //if count5 is found, set new value, if not, set alert not found
    count1.value = (today-Date5)
  } else {
    alert( 'Specified element not found.  id="count5"' )
  }
  document.getElementById("count5").value = showCountdown(Count5); //value of Count5 to now call showCountdown function & pass Count5 value
 
  var Date6 = ("December 31, 2007 15:30:00");        //set var Date6 to Hector's 6th event
  var Count6 = document.getElementById('count6');    //set Count6 to look for 'count6' on form
  if ( "count6" ) {                                  // if count6 is found, set new value, if not, set alert not found
    count6.value = (today-Date6)
  } else {
    alert( 'Specified element not found.  id="count6"' )
  }
  document.getElementById("count6").value = showCountdown(Count6); //value of Count6 is to now call showCountdown function & pass Count6 value
 
}

Open in new window

0
 
HonorGodSoftware EngineerCommented:
Here's another hint.

There is a JavaScript function that can tell you with kind of value a current variable is.  The name of this function is "typeof()", and when you pass it
the name of a variable, the result of the function is a string containing a
description of what kind of value is contained in that variable.

Use a w3schools.com "try it" page, and explain the output of this code:
<html>
<body>
 
<script type="text/javascript">
 
var today = new Date("December 1, 2007 6:31:45");
var Date1 = ("January 14, 2007, 10:00:00");
 
document.write( 'today: ' + typeof( today ) + '<\/br>' )
document.write( 'Date1: ' + typeof( Date1 ) + '<\/br>' )
 
</script>
 
</body>
</html>

Open in new window

0
 
HonorGodSoftware EngineerCommented:
Another thing to consider... (hehe)...

When you have a chunk of code that is essentially duplicated... think about making that duplicated code into a function!
0
 
ylekot88Author Commented:
I have another question if you don't mind-


If I'm to be replacing "thisDay" field on the eventsform,  and the html code for the form states
<form name="eventform" id="eventform" action="">, a little farther down the code lists
<div id="main">
<h3>Countdown to Upcoming Events</h3>
<table>
<tr>
   <td></td>
   <th style="text-align: right">Current Time </th>
   <td><input name="thisDay" id="thisDay" +readonly="readonly" size="40"  /></td></tr>

and the idea of document.form.field.value=field_value
is to help locate where you want to change a value, would another way of doing the getElementByID
could you state:  document.eventform.thisDay.value=new_field_value;
or would you have to list both the input name AND id "thisDay"?

I'm trying to start from scratch, I feel like I have too many errors and my code will work a lot better if I can see it actually working instead of being told to write the whole thing out and then backtrack to find the errors


0
 
HonorGodSoftware EngineerCommented:
Well, if you enter the following into one of the w3schools "try it" sections, the current "value" of the specified element is displayed ...

Which is easier to understand?

document.eventform.thisDay.value

or

document.getElementById( 'thisDay' ).value

?

> I'm trying to start from scratch ...
  Start small, and add things one at a time.

<html>
<body>
 
<form name="eventform" id="eventform" action="">
<div id="main">
<h3>Countdown to Upcoming Events</h3>
<table>
<tr>
<td><input name="thisDay" id="thisDay" +readonly="readonly" size="40" value='junk' /></td></tr>
</table>
<br>
 
<script type="text/javascript">
 
document.write(document.eventform.thisDay.value);
 
</script>
 
</body>
</html>

Open in new window

0
 
ylekot88Author Commented:
I think the document.eventform.thisDay.value is easier for me to understand at this point. The teacher mentioned the getElementByID last night in class, and said we would be discussing it in a few weeks, and he just introduced if...else, & loops to the mix last night too.

Just looking at what you did above, I'm realizing I'm calling the document.write in the head and not in the table, which is *probably* part of my problem lol.  Guess that's what I get for trying to run before I can walk lol

wish me luck on this next round :) thank you for all your help.
0
 
HonorGodSoftware EngineerCommented:
> ... I'm realizing I'm calling the document.write in the head and not in the table ...

  Well, that's almost right.  The example above (http://www.experts-exchange.com/Q_24147092.html#a23669095) shows the use of document.write, but it is in the body of the html page, not the head.

Notice how the HTML starts:

<html>
<body>

There is no "head" section to this page.  The other thing to notice is that within the "body", we can (and do) have a "script" section.  It is within this "script" section that the document.write() routine is called.

Think of it this way, after processing the document, and creating the data structure that represents all of the individual document/page elements, the browser starts processing this data structure to display the contents.

The stuff that is to be drawn (rendered) on the page is described/identified within the "body".  In this example, the "table" gets drawn, then the "script" section gets processed (is executed).

The only thing in this "script" is the referencing of document.eventform.thisDay.value.  So, this document element MUST ALREADY HAVE BEEN DRAWN (rendered) ON THE PAGE, for this statement to work correctly.

If you had, inadvertently, put the "script" section above the "table", then the referenced items (i.e., document.eventform) would not yet exist.  So the statement would have failed.

Another, generally better, way to do a very similar thing would have been to do something like this:

This delays the execution of the script (i.e., the call to "alert()") until the entire page has been drawn (rendered).  This guarantees that every document element will exist before the script is executed.

Hopefully this helps.
<html>
<body onload='alert(document.eventform.thisDay.value)'>
<form name="eventform" id="eventform" action="">
<div id="main">
<h3>Countdown to Upcoming Events</h3>
<table>
<tr>
<td><input name="thisDay" id="thisDay" +readonly="readonly" size="40" value='junk' /></td></tr>
</table>
</body>
</html>

Open in new window

0
 
HonorGodSoftware EngineerCommented:
One thing I noticed about the example code in http:#a23670633 is that it is sloppy.

The "</form>" tag is missing
The "</div>" tag is missing

Indentation is not used to make the relationship of elements clear.

This is a better example
<html>
<body onload='alert(document.eventform.thisDay.value)'>
  <form name="eventform" id="eventform" action="">
    <div id="main">
      <table>
        <tr>
          <td>
            <input name="thisDay" id="thisDay" +readonly="readonly" size="40" value='junk' />
          </td>
        </tr>
      </table>
    </div>
  </form>
</body>
</html>

Open in new window

0
 
HonorGodSoftware EngineerCommented:
Hm.  How did that '+' get in front of "readonly"?  It should not be there.
The tag should read
<input name="thisDay" id="thisDay" readonly size="40" value='junk' />

Open in new window

0
 
HonorGodSoftware EngineerCommented:
One of the things that I've noticed about your code is that your HTML elements frequently have both a "name" and an "id" attribute set to the same value.

The biggest difference is that the "name" attribute can be used to group a number of elements together.  For example, if you need a group of radio buttons, this group should only allow 1 of the group to be selected.

Here is an example that demonstrates this properly.

Things to note:
- The "script" clause is in the "head" section and defines a function named "showVal" that expects 1 argument
- Each of the input elements is of the same type (i.e., "radio"), and has the same name attribute value (i.e., "YNM"), and the same onClick event (i.e., "showVal(this)")
- Each input element has a unique value attribute

When an input element is selected (e.g., with a mouse click), the corresponding event function is called, and the value that is passed is a reference to the current document element (i.e., the INPUT element containing the onclick attribute).

When the showVal() function begins execution, the parameter value will be a reference to the document element that caused the function to be called.

The "if" test verifies that:
- The parameter (i.e., obj) has a value, and
- The parameter is referring to a document element that has a nodeName attribute of "INPUT"
  - The reason for doing this is to guarantee that the element will have an attribute name "value"

Note: The input element value is not the text between the <input...> and the </input> tags, it is the current value of the attribute named "value".

Hopefully this helps
<html>
<head>
<script type='text/javascript'>
  function showVal( obj ) {
    if ( obj && ( obj.nodeName == 'INPUT' ) ) {
      alert( 'Selected value: ' + obj.value )
    }
  }
</script>
</head>
<body>
 
<input type='radio' name='YNM' value='Y' onclick='showVal(this)'>Yes</input><br>
<input type='radio' name='YNM' value='N' onclick='showVal(this)'>No</input><br>
<input type='radio' name='YNM' value='M' onclick='showVal(this)'>Maybe</input><br>
 
</body>
</html>

Open in new window

0
 
ylekot88Author Commented:
I'm so frustrated right now, my starting from scratch is not going so well. I'm using the w3c edit page just to get one of the pre-written functions to show up, and on the document.write(function call) is giving me what I've typed out, its not giving me the purpose of the function. If I add the alert to the page, the whole page is blanking out on me.

The only instruction I received from my teacher was that we shouldn't be using if/else right now, as we haven't learned them yet, we should be able to do the code just by using variables, and some simple date object/date methods, and that I should be using the document.form.field.value=field_value method to show I understand it. I was also told I shouldn't need to re-write the code, the simple declaring of the functions & calling them in the document should suffice.

the name/Id thing is the way the code came already written. If I'm understanding what you wrote, the input value you have listed 'Y', 'M', 'N' is essentially the same purpose as the id in the pre-written code. Which makes it a little more confusing for someone who's just starting out to give both name & Id the same name.

I have printed all your answers and put them in my book for references so later on when coding becomes a little more involved I will have a better background of what the teacher is talking about.

0
 
HonorGodSoftware EngineerCommented:
Show me the code.
0
 
HonorGodSoftware EngineerCommented:
The name attribute can be used for a number of things.
One of which is to group document elements together (as see above http:#a23671823).
Another is to allow individual document elements to be located, using the notation:

document.<elementName>.<elementName>...

For example:
<html>
<body>
 
<form name='eventform' action=''>
  <div id="main">
    <table>
      <tr>
        <td>
          <input name="thisDay" readonly size="10" value='Whatever!' />
        </td>
      </tr>
    </table>
  </div>
</form>
 
  document.eventform.thisDay.value = 
<script type="text/javascript">
  document.write(document.eventform.thisDay.value);
</script>
 
</body>
</html>

Open in new window

0
 
ylekot88Author Commented:
the function was taken off the prewritten code downloaded from the book. I just wanted to see if the code would even return the value with a document.write statement. I figured if the code was already written with the document.write I could see what the function looked like.

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


function showDateTime(time) {
   
   date = time.getDate();
   month = time.getMonth()+1;
   year = time.getFullYear();

   second = time.getSeconds();
   minute = time.getMinutes();
   hour = time.getHours();

   ampm = (hour < 12) ? " am" : " pm";
   hour = (hour > 12) ? hour - 12 : hour;
   hour = (hour == 0) ? 12 : hour;

   minute = minute < 10 ? "0"+minute : minute;
   second = second < 10 ? "0"+second : second;

   return month+"/"+date +"/"+year+" at "+hour+":"+minute+":"+second+ampm;
}
</script>
</head>
<body>
<script type="text/javascript">
alert(showDateTime(time));
document.write("today is"+ "+showDateTime(time)");
</script>

</body>
</html>
0
 
HonorGodSoftware EngineerCommented:
ok, let's start looking at your code, one line at a time, and see what we see.

Line# | Comment
------+----------
   1  | "html"   tag - so far, so good
   2  | "body"   tag - ok
   3  | "script" tag - ok
   4  | Defines a function named 'showDateTime' with 1 parm named 'time'
   5  | Attempts to assigns a global variable named 'date' and tries to
      | assign it a value.  The value it tries to assign is an attempt to
      | invoke a function (named 'getDate').  How do we know it is an attmpt
      | to call a function?  By the presence of the parentheses: getDate()
      | So will it work?  Only if the actual parameter is an object that has
      | a function with this name!
      | Let's look forward a little, down to line # 26, where we are trying to
      | call the function define in line #4, and pass it a value.
      | Unfortunately, we are trying to pass it something. The syntax of this
      | statement says that a global object named 'time' should exist.  It
      | doesn't though, so the function call fails, and nothing get' output.
      | How would we create a date object, and pass it to our function?  By
      | using the syntax "new Date()".  So, let's start really, really simply.
------+----------
How do we do that?  Let's have our function name 'showDateTime()' have a
single parm that is expected to be a Date object.  What we'll do is to then,
immediately after the function is define, to call the function and pass it a
Date object.  How do we do that?  Something like this:
---------------------------------------------------------------------
<html>
<head>
<script type='text/javascript'>
  function showDateTime( time ) {
   alert( 'getDate() value: ' + time.getDate() )
  }
  showDateTime( new Date() )
</script>
</head>
<body>
</body>
</html>
---------------------------------------------------------------------
Note that this html page really has no 'body' define, but that's ok.
What happens when we put create this as an HTML file, and open it with
a browser?  You should see an alert dialog box that contains the string
'getDate() value: ' followed by an integer value containing the day of
the month.  Do you?



<html>
<head>
<script type='text/javascript'>
  function showDateTime( time ) {
   date   = time.getDate()
   month  = time.getMonth() + 1
   year   = time.getFullYear()
 
   second = time.getSeconds()
   minute = time.getMinutes()
   hour   = time.getHours()
 
   ampm = (hour < 12) ? ' am' : ' pm'
   hour = (hour > 12) ? hour - 12 : hour
   hour = (hour == 0) ? 12 : hour
 
   minute = minute < 10 ? '0' + minute : minute
   second = second < 10 ? '0' + second : second
 
   return month + '/' + date + '/' + year + ' at ' + hour + ':' + minute + ':' + second + ampm
}
</script>
</head>
<body>
  <script type='text/javascript'>
    alert( showDateTime( time ) );
    document.write( "today is" + "+showDateTime(time)" )
  </script>
</body>
</html>

Open in new window

0
 
HonorGodSoftware EngineerCommented:
Do you understand what I've said so far?

Do you understand the difference between the "formal parameter" used in the function definition?  i.e., in the statement:

  function showDateTime( time ) {
...
  }

"time" is a formal parameter.  What is an "actual parameter"?  Well, when we have a statement where the function name is called, and a parameter is provided, like:

  showDateTime( new Date() )

The JavaScript engine will, before it is able to actually "call", or invoke the function name "showDateTime()", it has to evaluate the parameter that was provided.  The parameter that was specified is an expression: new Date() that happens to tell the JavaScript engine to "create a new Date object" and pass this newly created object as the "actual parameter" to the function.
The function, showDateTime gets this Date object value copied into its parameter named time.  So within the function showDateTime, the parameter (time) is a Date object.

What does this mean?  Well, it means that when showDateTime is executing, the variable name time is a Date object.  So the variable has Date object attributes, and methods.  That is why, when the JavaScript engine sees "time.methodName()" it is able to call the specified methodName (in the code above, this methodName happens to be 'getDate'.  When a Date object has the getDate method called, the result will be the "day of the month".  The w3schools web page has this documented here:

http://www.w3schools.com/jsref/jsref_obj_date.asp

And shows that the result of calling the getDate method as:

Returns the day of the month from a Date object (from 1-31).

Hopefully this (verbose) explanation makes some sense...

Let me know
0
 
ylekot88Author Commented:
yes, when I used your function it did return an alert box that said get date() value: 18.



0
 
HonorGodSoftware EngineerCommented:
Did you understand the descriptions?  Did it help?
0
 
HonorGodSoftware EngineerCommented:
Do you understand why this:

alert(showDateTime(time));

in your code is wrong?
0
 
ylekot88Author Commented:
yes, because time is not defined as a date object. I'm realizing that the parameter time is referencing another function that we were asked to create, in the countdown function. We were asked to pass 2 parameters- start.dateObj & stop.dateobj, where we calculate the difference between the 2 dates, and store them in a variable named time. Does this mean time variable is global? I thought it was local to just the countdown function. I didn't see anywhere in the instructions that I'd have to redefine the value passed to time in the showDateTime(time) function. But at least I understand why it's not working, and that I'd have to define it in at least the w3c editor page.
0
 
HonorGodSoftware EngineerCommented:
Q: Does this mean time variable is global?
A: No, it does not mean that a global variable is, or should be use.  In fact,
    it is much better to try and avoid using global variables.

Q: Does this mean time variable is global?
A:  No.  That is I believe that you are asking if the variable named time is
     global.  In fact, when you define a function like this:

    function showDateTime( time ) {
       ...
    }

    All of the parameters can, in fact, be thought of as "local variable" within
    the scope of the function.

    What does this mean?  Well, it means that if a global variable exists with
    the same name, then within the function, the global variable is not
    accessible.

    Which is generally, just fine, because we really don't want to be using
    global variables.

ok?
0
 
ylekot88Author Commented:
that is ok, but does that mean the showDateTime(time) function is written incorrectly? The only thing I was to do with that function (as I said, it was pre written) was to call the showDateTime function on the htm page, but I was replacing 'time' with 'today', which was defined as a variable a few times. Why would the showDateTime(time) function pass 'time' if its not defined on the .js page,  if we're replacing it with 'today' on the .htm page? I understand showDateTime() was supposed to pass days/hours/minutes/seconds on what day it is in the events section on the event page, but if time isn't defined, did I miss a step in my thinking? Does my logic make sense?


0
 
HonorGodSoftware EngineerCommented:
NO!  The "call" to showDateTime() is wrong.  Because where you have it (the attempt to execute the function), no variable named "time" exists.

Remember?!?  You have to pass, or provide, a Date object, on the call to showDateTime()
0
 
HonorGodSoftware EngineerCommented:
The function itself has some minor things, but nothing of significance.

Remember.  You can use a trivial HTML file, or something like a w3schools try-it
page to see if a function like showDateTime() is doing what you expect.
0
 
HonorGodSoftware EngineerCommented:
For example, take the code from http:#a23673692 and get it working.

What changes are needed to do this?
0
 
HonorGodSoftware EngineerCommented:
By the way.  Once you get this code http:#a23673692 working, you will be well on your way to a solution for this question... :-)
0
 
ylekot88Author Commented:
everything that I'm reading states I need to define 'time'.
I first tried time = new Date ();
that is no good

I then started thinking what does time mean?
 time is hours:minutes:seconds. So I modified the code to add that in, it didn't like that either.

I'm still trying
0
 
HonorGodSoftware EngineerCommented:
In http:#a23673692, you have:

  <script type='text/javascript'>
    alert( showDateTime( time ) );
    document.write( "today is" + "+showDateTime(time)" )
  </script>

Each of the 2 statements is wrong, for one reason or another.

Let's take a look at the first:

    alert( showDateTime( time ) );

Why is this wrong?  Because no variable named time exists.
What kind of parameter value is expected by showDateTime()?
A Date object.  How can we make, or create a Date object?
using this syntax:

   new Date()

So, how do we correct this alert() to correctly invoke the showDateTime()
routine?

By doing something like this:

    alert( showDateTime( new Date() ) );

Does it have to be this way?  No, any variable containing a Date object can be used as the "actual" parameter.  So,  we could do something like:

    var today = new Date()
    alert( showDateTime( today ) );

Does this make sense?

If so, what is wrong with the second statement?

    document.write( "today is" + "+showDateTime(time)" )

and how do we fix it?  Let's look closely at what is being passed to the document.write() function:

What, exactly is?

"today is" + "+showDateTime(time)"
                           
Well the first part is a string.  How do we tell?  It starts with a double quote.
Where does the string end?  At the matching double quote.  So, the first part of the parameter is a string that has the value:

"today is"

What comes next?  A plus sign.  What is this, and what does it mean?  Well, with numbers, it represents the addition operator.  What about with strings?
It represents the concatenation operator.  So, the result of performing:

string + something

will try to convert the something to a string (if it isn't already a string), and
concatenate these two strings together into a single, longer string.

So, what is after the plus sign?

"+showDateTime(time)"

What is this?  A string.  Why?  Because it starts with a double quote.
Is this what you want?  Probably not.  But let's take this example to
its conclusion.

So, what is the result of this concatenation?  The creation of a single,
longer string that has the value:

"today is+showDateTime(time)"

That is what will be output....
0
 
ylekot88Author Commented:
wow, I am really learning I don't belong in this class. I am dumbfounded at how you spell it out for me, and I still can't get the alert to work or get a simple function to work. I understand what I'm reading, what you're saying. I understand concatenate and where my error was with regards to using quotes improperly, but holy mother of god I must have dyscalculia or I am that slow. I think I'm genuinely ready to throw in the towel. I've spent over 30 hours trying to figure out how to get this project to work, how to even get an alert to work and it doesn't.
0
 
ylekot88Author Commented:
I just wanted to say thank you for all of your assistance. You've been very patient & helpful, I think I've been staring at this for too long. I have to put this away for the night and give my brain a rest
0
 
HonorGodSoftware EngineerCommented:
That sounds like a very good plan. :-)

Please, please, please, don't beat yourself up to badly.

You have to be out of your comfort zone in order to learn.

It take practice.  Patience, and practice.

If you want to close this question, and start another, that would be fine with me. ;-)

0
 
HonorGodSoftware EngineerCommented:
Do you feel rested?

Does it make any more sense now?
0
 
ylekot88Author Commented:
Well, I'm at work right now, I've had the luxury of having the past 3 days off, but I will let you know this evening :)
0
 
HonorGodSoftware EngineerCommented:
I hope your day at work was pleasant, and that it didn't burn your brain out.  :-)

How are things looking now?
0
 
ylekot88Author Commented:
still frustrated. wrote to the dean, which in turn got the teacher got back to me & said I had over 40 errors in my code & we're meeting tomorrow at noon. Here's hoping I can understand what he's saying lol :)
thank you for checking in w me, I will keep you posted
0
 
HonorGodSoftware EngineerCommented:
You might want to take a look at this javascript tutorial.  It's not perfect, but it's not too bad.  I haven't looked at each and every page, but the ones at which I glanced seemed decent.

http://www.htmliseasy.com/javascript/index.html
0
 
ylekot88Author Commented:
I met with the teacher today, and overall, I think it went pretty well. He explained objects/methods, and that a big point I kept missing was that you can't manipulate a date object unless it's created & initialized. I can't do both in the same line. I guess a bunch of the students were doing that. He said something about casting, and that we won't be getting to that for a few more weeks, so not to concern myself with that. He noted that I was also trying to pass only one value through a parameter when the function was expecting two, and that I was also ( in the document.eventform.count1.value=changeYear(today-Date1) calling the parameters wrong, that it should be (today, Date1). He said that I seemed to comprehend everything he said, and that I was doing a lot better than I thought, and that I'm doing a lot better than most kids in the class (which worries me a little lol). So at this point, I have a more finely tuned...not...working....code. I have an idea as to why they might not be working but I'm not sure how to correct it.
 
I will post the refreshed versions of the code and any help/suggestions would be great
the following functions are on a page called functions.js

//creating function to changeYear with 2 parameters: today,holiday./today param is used to store a dateObj representing the current date.the holiday param is used to store a dateObj representing an event in Hectors list

function changeYear(today,holiday) {

today = new Date();
holiday = new Date(); //question about this

     //get full year to extract the 4 digit from today variable,store in variable named year

year = today.getFullYear();

      //use setFullYear()date method to set full year of holiday date object to value of year variable
 
holiday.setFullYear(year);

//conditional operator on year variable. test condition is whether the value of the holiday date             //object iis less than today date object. if it is, this means the event has already passed in the current
// year & the value of the year variable should be increased by 1      
//otherwise event has not passed & value should remain unchanged
 
year = (holiday < today) ? year+1 : year;

//once again set the full year variable of the holiday date object to the value of the yr variable


 holiday=holiday.setFullYear(year);
}

// create a function called countdown that passes 2 parameters- start and stop.the start
//parameter contains a date object for the starting date, and the stop parameter contains
// a date object for the stopping date
//1st line calculate time difference between stop& start,storing in variable named time
//2nd, convert time difference into days, hours, minutes, seconds in a text string

function countdown(start,stop) {
time = (stop-start);

//inserts the current date and time
var today = new Date();

//calculate the number of days left in upcoming months
 var days = today.getDay();

 //calculate the number of hours left in the current day
 var hours = (days-Math.floor(days))*24;

 // calculate the minutes left in the current hour
 var minutes=(hours-Math.floor(hours))*60;      

 // calculate the seconds left in the current minute
 var seconds = (minutes-Math.floor(minutes))*60;

return "Days: +" days + "Hours: +" hours + "Minutes: +" minutes + "Seconds: +" seconds;
 
}

the following is the updated events.htm page coding
<head>
<html>
<title>Upcoming Events at Dixon</title>
<link href="dixon.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="dates.js"></script>
<script type="text/javascript">
function showCountdown() {                           //calling function showCountdown
var today = new Date("December 1, 2007 6:31:45");    //sets todays date as a temporary date  
var Date1 = new Date("January 14, 2007 10:00:00");          //sets Date1 to Hector's first event
var Date2 = new Date("May 21, 2007 12:00:00");               //sets var Date2 to Hectors 2nd event
var Date3 = new Date("July 4, 2007 21:00:00");               //set var Date 3 to Hector's 3rd event
var Date4 = new Date("September 1, 2007 12:00:00");        //set var Date4 to Hector's 4th event
var Date5 = new Date("December 1, 2007 11:30:00");           //set var Date5 to Hector's 5th event
var Date6 = new Date("December 31, 2007 15:30:00");        //set var Date6 to Hector's 6th event


//using today as parameter value,call showDateTime function & store value returned in thisDay field
document.eventform.thisDay.value = showDateTime(today);


//using today as 1st parameter & Date1 as 2nd parameter value, call the changeYear function to set the correct value for the first event in Hector's list. Repeat this step for the Date2-Date6 variables
document.eventform.count1.value=changeYear(today, Date1);
document.eventform.count2=changeYear(today, Date2);
document.eventform.count3=changeYear(today, Date3);
document.eventform.count4=changeYear(today, Date4);
document.eventform.count5=changeYear(today, Date5);
document.eventform.count=changeYear(today, Date6);

}
</script>
</head>

<body onload="set interval('showCountdown(today)', 50)";>
<form name="eventform" id="eventform" action="">

<div id="links1">
   <a href="#">Home</a>
   <a href="#">City Services</a>
   <a href="#">City Agencies</a>
   <a href="#">Mayor's Office</a>
   <a href="#">News Today</a>
   <a href="#">Upcoming Events</a>
</div>
<div id="logo">
   <img src="logo.jpg" alt="New Years Bash" />
</div>
<div id="links2">
   <a href="#">Site Map</a>
   <a href="#">Search Engine</a>
   <a href="#">Public Notices</a>
   <a href="#">Survey Form</a>
   <a href="#">Contact Us</a>
   <a href="#">E-Government</a>
</div>


<div id="main">
<h3>Countdown to Upcoming Events</h3>
<table>
<tr>
   <td></td>
   <th style="text-align: right">Current Time </th>
   <td><input name="thisDay" id="thisDay" readonly="readonly" size="40"  /></td>
</tr>
<tr>
   <th>Event</th>
   <th>Starting Time</th>
   <th>Countdown to Event</th>
</tr>
<tr>
   <td><input value="Heritage Day" readonly="readonly" size="20" /></td>
   <td><input value="Jan 14 at 10:00 am"readonly="readonly" size="20" /></td>
   <td><input name="count1" id="count1" size="40" /></td>
</tr>
<tr>
   <td><input value="Spring Day Rally" readonly="readonly" size="20" /></td>
   <td><input value="May 21 at 12:00 pm"readonly="readonly" size="20" /></td>
   <td><input name="count2" id="count2" size="40" /></td>
</tr>
<tr>
   <td><input value="July 4th Fireworks" readonly="readonly" size="20" /></td>
   <td><input value="Jul 4 at 9:00 pm" readonly="readonly" size="20" /></td>
   <td><input name="count3" id="count3" size="40" /></td>
</tr>
<tr>
   <td><input value="Summer Bash" readonly="readonly" size="20" /></td>
   <td><input value="Sep 1 at 12:00 pm" readonly="readonly" size="20" /></td>
   <td><input name="count4" id="count4" size="40" /></td>
</tr><tr>
   <td><input value="Holiday Party" readonly="readonly" size="20" /></td>
   <td><input value="Dec 1 at 11:30 am" readonly="readonly" size="20" /></td>
   <td><input name="count5" id="count5" size="40" /></td>
</tr>
<tr>
   <td><input value="New Year's Bash" readonly="readonly" size="20" /></td>
   <td><input value="Dec. 31 at 3:30 pm" readonly="readonly" size="20" /></td>
   <td><input name="count6" id="count6" size="40" /></td>
</tr>
</table>
</div>

</form>
</body>
</html>

so my new questions are as follows: in the changeYear(today,holiday) function. Does holiday need to be initialized before I can insert it into setting it to setFullYear(year)? my other question/statement is this: if the changeYear function is passing 2 parameters, (today, holiday) and then on the events.htm page, Im being asked to changeYear (today, Date1), I feel like holiday and Date1(thru Date6) there needs to be some tie-in somehow and i'm not seeing it. The teacher told me the changeYear(today,holiday) was written correctly, but the computer isn't picking up Date1 as holiday? does that make sense?

0
 
HonorGodSoftware EngineerCommented:
I'm glad that the instructor was encouraging.

Now, I'm going to make some suggestion on your code.

1. Use the "Attach Code Snippet" checkbox & section to show/display your code.
    Why?  Because that section uses a monospace font (i.e., every character is the
    same width, which makes thing significantly easier to read).
2. Take time to indent your code.  Indentation, even if it isn't important to the
    JavaScript engine, it is IMMENSELY important for the human reader.
3. Don't make your lines too long!

So, this update is only going to do those 3 things.

Let's reformat each function (in the javascript code), and talk about them first.
//--------------------------------------------------------------------
// Name: changeYear()
// Role: ?
// Parm: today   == date object identifying indicated date
//       holiday == date object identifying a particular date
//--------------------------------------------------------------------
function changeYear( today, holiday ) {
 
  year = today.getFullYear()           // Get current (4 digit) year
  holiday.setFullYear( year )          // Unique holiday
 
  //------------------------------------------------------------------
  // See if the specified holiday has already occurred this year.
  // If so, update year, for the next instance of the specified holiday
  //------------------------------------------------------------------
 
  year = ( holiday < today ) ? year + 1 : year
 
  //------------------------------------------------------------------
  // once again set the full year variable of the holiday date object
  // to the value of the yr variable
  //------------------------------------------------------------------
 
  holiday = holiday.setFullYear( year )
}
 
//**********************************************************************
// ok, what's the problem with the above code?
// What happens to the "result"?
// What is the result?  Well, take a look at the code, and see what
// values are modified?  Well, maybe year, and certainly holiday.
//**********************************************************************
// Here's the big question:
// What happens to a local value in a function when the function ends?
// Specifically, when changeYear() finishes, what happens to the final
// values for year, and holiday?
//**********************************************************************
 
 
//-------------------------------------------------------------------
// Name: countdown()
// Role: ...
// Note: start = date object representing some start date & time
//       stop  = date object representing some stop  date & time
//-------------------------------------------------------------------
function countdown( start, stop ) {
  //-----------------------------------------------------------------
  // Compute the difference between the two date objects.
  //-----------------------------------------------------------------
  time = ( stop - start )
 
  var today = new Date()               // Current date and time
  var days = today.getDay()            // Current Day of Week (0..6)
 
  //-----------------------------------------------------------------
  // The following calculation is WRONG!
  // The comment has no relationship to the value being computed.
  //-----------------------------------------------------------------
  // ?? calculate the number of hours left in the current day
  //-----------------------------------------------------------------
  var hours = ( days - Math.floor( days ) ) * 24
 
  //-----------------------------------------------------------------
  // The following calculation is WRONG!
  // The comment has no relationship to the value being computed.
  //-----------------------------------------------------------------
  // calculate the minutes left in the current hour
  //-----------------------------------------------------------------
  var minutes = ( hours - Math.floor( hours ) ) * 60      
 
  //-----------------------------------------------------------------
  // The following calculation is WRONG!
  // The comment has no relationship to the value being computed.
  //-----------------------------------------------------------------
  // calculate the seconds left in the current minute
  //-----------------------------------------------------------------
  var seconds = ( minutes - Math.floor( minutes ) ) *60
 
  //-----------------------------------------------------------------
  // The following syntax is WRONG!
  //-----------------------------------------------------------------
  return "Days: +" days + "Hours: +" hours + "Minutes: +" minutes + "Seconds: +" seconds;
}
 
// Questions:
// 1. Is time local, or global?
// 2. How do you tell?
// 3. What kind of value will be in "time"?
// 4. What units of measure does it represent?
// 5. What, exactly, is this function supposed to compute?
// 6. Is it returning the proper format?
 
//*******************************************************************
// Now, for the HTML
//*******************************************************************
 
<head>
<html>
<title>Upcoming Events at Dixon</title>
<link href="dixon.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="dates.js"></script>
<script type="text/javascript">
function showCountdown() {
  var today = new Date( "December 1, 2007 6:31:45" )   // Reference date
  var Date1 = new Date( "January 14, 2007 10:00:00" )  // Event #1
  var Date2 = new Date( "May 21, 2007 12:00:00" )      // Event #2
  var Date3 = new Date( "July 4, 2007 21:00:00" )      // Event #3
  var Date4 = new Date( "September 1, 2007 12:00:00" ) // Event #4
  var Date5 = new Date( "December 1, 2007 11:30:00" )  // Event #5
  var Date6 = new Date( "December 31, 2007 15:30:00" ) // Event #6
 
  // Call showDateTime & display specified
  document.eventform.thisDay.value = showDateTime( today 
 
  // using today as 1st parameter & Date1 as 2nd parameter value, call the changeYear function to set the correct value for the first event in Hector's list. Repeat this step for the Date2-Date6 variables
  document.eventform.count1.value = changeYear( today, Date1 )
  document.eventform.count2 = changeYear( today, Date2 )
  document.eventform.count3 = changeYear( today, Date3 )
  document.eventform.count4 = changeYear( today, Date4 )
  document.eventform.count5 = changeYear( today, Date5 )
  document.eventform.count  = changeYear( today, Date6 )
}
</script>
</head>
 
<body onload="set interval('showCountdown(today)', 50)";>
  <form name="eventform" id="eventform" action="">
 
    <div id="links1">
       <a href="#">Home</a>
       <a href="#">City Services</a>
       <a href="#">City Agencies</a>
       <a href="#">Mayor's Office</a>
       <a href="#">News Today</a>
       <a href="#">Upcoming Events</a>
    </div>
    <div id="logo">
       <img src="logo.jpg" alt="New Years Bash" />
    </div>
    <div id="links2">
       <a href="#">Site Map</a>
       <a href="#">Search Engine</a>
       <a href="#">Public Notices</a>
       <a href="#">Survey Form</a>
       <a href="#">Contact Us</a>
       <a href="#">E-Government</a>
    </div>
 
    <div id="main">
      <h3>Countdown to Upcoming Events</h3>
      <table>
        <tr>
           <td></td>
           <th style="text-align: right">Current Time </th>
           <td><input name="thisDay" id="thisDay" readonly="readonly" size="40"  /></td>
        </tr>
        <tr>
           <th>Event</th>
           <th>Starting Time</th>
           <th>Countdown to Event</th>
        </tr>
        <tr>
           <td><input value="Heritage Day" readonly="readonly" size="20" /></td>
           <td><input value="Jan 14 at 10:00 am"readonly="readonly" size="20" /></td>
           <td><input name="count1" id="count1" size="40" /></td>
        </tr>
        <tr>
           <td><input value="Spring Day Rally" readonly="readonly" size="20" /></td>
           <td><input value="May 21 at 12:00 pm"readonly="readonly" size="20" /></td>
           <td><input name="count2" id="count2" size="40" /></td>
        </tr>
        <tr>
           <td><input value="July 4th Fireworks" readonly="readonly" size="20" /></td>
           <td><input value="Jul 4 at 9:00 pm" readonly="readonly" size="20" /></td>
           <td><input name="count3" id="count3" size="40" /></td>
        </tr>
        <tr>
           <td><input value="Summer Bash" readonly="readonly" size="20" /></td>
           <td><input value="Sep 1 at 12:00 pm" readonly="readonly" size="20" /></td>
           <td><input name="count4" id="count4" size="40" /></td>
        </tr><tr>
           <td><input value="Holiday Party" readonly="readonly" size="20" /></td>
           <td><input value="Dec 1 at 11:30 am" readonly="readonly" size="20" /></td>
           <td><input name="count5" id="count5" size="40" /></td>
        </tr>
        <tr>
           <td><input value="New Year's Bash" readonly="readonly" size="20" /></td>
           <td><input value="Dec. 31 at 3:30 pm" readonly="readonly" size="20" /></td>
           <td><input name="count6" id="count6" size="40" /></td>
        </tr>
      </table>
    </div>
 
  </form>
</body>
</html>

Open in new window

0
 
HonorGodSoftware EngineerCommented:
ok, take a look at the reformatted code, and the comments and questions...

and let me know what you think.
0
 
ylekot88Author Commented:
Here's the big question:
// What happens to a local value in a function when the function ends?
// Specifically, when changeYear() finishes, what happens to the final
// values for year, and holiday?

the purpose of this function is to decide whether the holiday event is in this year or not. If it has passed, it sets to the next year's date, if it has not passed it stays the same.

so, year gets +1 added to it, or holiday remains the same.

as far as your comments on" function countdown( start, stop ) {"
I'm not sure how they are "wrong" bc the teacher gave me the code to use to calculate the days, hours, minutes, seconds. I don't understand what is wrong with the syntax, as I copied all of it from a previous tutorial as the book and the teacher said to do. He even noted the page, drew a line where to start and where to end. If the time = (stop-start) is wrong, then the problem is now just an issue of getting time = (stop-start) or (stop, start) be date objects to minus our the stopping point from the starting point. once the value is returned, it should only be one date and return a string "days" following int "days", the same for hours, minutes, seconds.
0
 
HonorGodSoftware EngineerCommented:
ok, let me try coming from a different direction.  Removing the comments from
changeYear(), we get the code shown below.

Say that we call it with two date objects:

  var someDate = new Date( 'December 1, 2007 6:31:45' )
  var heritage = new Date( 'January 14, 2007 10:00:00' )

We could call it like this:

  changeYear( someDate, heritage )

So, someDate, and heritage are the actual parameters.
What happens within changeYear() ?

First, year will be extracted from the today parameter (2007)
Then, this year will be saved in the local holiday variable
Then since the holiday date (Jan 14th) came before "today" (i.e., "Dec 1st"),
year will be incremented (to 2008),
Then this newly incremented year will be saved in the local holiday variable.

The question is, will the modification of this local variable be reflected back to
the calling routine?

I was mistaken.  I had forgotten that since the actual parameter is an object,
modification to this object within the function WILL be available to the calling
code.

Please forgive me.

How did I test this?

I went to a w3schools "try it" page, and tried the following:
----------------------------------------------------------------------
<html>
<body>

<script type="text/javascript">

function changeYear( today, holiday ) {
  year = today.getFullYear()
  holiday.setFullYear( year )
  year = ( holiday < today ) ? year + 1 : year
  holiday = holiday.setFullYear( year )
}

var someDate = new Date( 'December 1, 2007 6:31:45' )
var heritage = new Date( 'January 14, 2007 10:00:00' )

document.write( 'Before: ' + heritage + '<br\/>' )
changeYear( someDate, heritage )
document.write( ' After: ' + heritage + '<br\/>' )

</script>

</body>
</html>
----------------------------------------------------------------------

  I was surprised that the output was:
----------------------------------------------------------------------
Before: Sun Jan 14 2007 10:00:00 GMT-0500 (Eastern Standard Time)
After: Mon Jan 14 2008 10:00:00 GMT-0500 (Eastern Standard Time)
----------------------------------------------------------------------

Let's look at the countdown() from http#a23697902

The statement in line 50 is:

time = ( stop - start )

And the associated (block) comment says:
 Compute the difference between the two date objects.

The question that I have for you though, is

Q: What kind of value is "time" after this assignment?

Using our trusty w3school "try it" page, we try:

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

var someDate = new Date( 'December 1, 2007 6:31:45' )
var heritage = new Date( 'January 14, 2008 10:00:00' )

time = ( heritage - someDate )

document.write( 'time: ' + time + '<br\/>' )

</script>
----------------------------------------------------------------------

and find the output to be:
----------------------------------------------------------------------
time: 3814095000
----------------------------------------------------------------------

What kind of value is this?  It's an integer, not a date.
What does it represent?  The number of milliseconds
between the two date objects!

What are the next 2 statements?
----------------------------------------------------------------------
  var today = new Date()
  var days = today.getDay()
----------------------------------------------------------------------

Well, after the first is executed, today will contain a date object representing the time and date that the statement is executed, which has nothing to do
with the input date objects (start & stop).

Then, the value of days will be an integer value from 0 to 6, that is used to represent the day of the week from the specified date object. ( 0 means Sunday, 1 means Monday, ... and 6 means Saturday).

The next statment does not calculate what you think it calculates:

----------------------------------------------------------------------
var hours = ( days - Math.floor( days ) ) * 24
----------------------------------------------------------------------

Since the value of days is an integer from 0..6, the result of this calculation will be:

hours = ( days - days ) * 24  ==> 0

That's why the statement is wrong.  It is not computing anything at all because the input value is an integer, and any integer subtracted from itself will be zero, and zero times anything will be 0.

The next statement:

var minutes = ( hours - Math.floor( hours ) ) * 60

is also wrong for the same reason.  Since the value of hours == 0, the value of minutes will also be zero, which is not what you really want to be computing.

and this is also true for the last calculation:

var seconds = ( minutes - Math.floor( minutes ) ) *60

Hopefully this helps you to understand things enough to look back at your notes to see what the statements should really be.

function changeYear( today, holiday ) {
  year = today.getFullYear()
  holiday.setFullYear( year )
  year = ( holiday < today ) ? year + 1 : year
  holiday = holiday.setFullYear( year )
}

Open in new window

0
 
HonorGodSoftware EngineerCommented:
So, for changeYear(), the 1st call to holiday.setFullYear() is useless.

And for countdown(), you have to rethink your use of today!
What kind of value are you trying to output?  A string.

What is this string supposed to represent?...
0
 
ylekot88Author Commented:
the string has to represent a string and and integer, a string and an integer, a string and an integer
ex. 5 days 4 hours 23 minutes 44 seconds

I see what you're saying about the use of today.
so I'm reworking on the calculations to see how to get the difference of hours between stop and starting points. once I get that, I can work on the minutes, seconds. I was told to stay away from the (start-stop)*1000*24*60*60, and that I am to use the math.methods.
0
 
HonorGodSoftware EngineerCommented:
> the string has to represent a string and and integer, a string and an integer, a string and an integer
> ex. 5 days 4 hours 23 minutes 44 seconds

  When you have the string + an integer, the integer is converted to a string, and the two strings get concatenated together.

> I was told to stay away from the (start-stop)*1000*24*60*60, and that I am to use the math.methods.

Ah,  that may be the case, but from this equation, you do actually have almost all of the information required to compute the:

days, hours, minutes, and seconds!

If ( start - stop ) == The total number of milliseconds difference between the two days, how do you use the math.methods to compute the required values?

0
 
ylekot88Author Commented:
well, i tried ((stop-start)/1000*24*60*60) and I didn't get results. I tried seeing if I could extract the days,hours, minutes, seconds using the math functions ie- just calculating the difference between days on

var someDate = new Date( 'December 1, 2007 6:31:45' )
var heritage = new Date( 'January 14, 2007 10:00:00' )

using heritage.getDay() - someDate.getDay();
I got 5 as a result, which is picking up the day Saturday (today). I tried adding in the dates in the .getDate() and still got 5 as the result. Now, I know the answer should be 44 days.

I figured if I could extract the individual seperately, then when all are working, they would be in the return I could use the terms "days:" "hours:" "minutes:" "seconds" as text strings and concatenate them
but I'm not sure why the days aren't turning up 44 days if I'm using the dates given
0
 
HonorGodSoftware EngineerCommented:
First, before I forget, let me rescind my earlier comment in http:#a23701323
The 1st call to holiday.setFullYear() does has value.  So, please leave it in.

( stop - start ) == # milliseconds between the two dates

So, given this difference, and the constant for the number of milliseconds in
a day (i.e., 60 * 60 * 24 * 1000), how do we compute the number of days
by which these two date objects differ?
0
 
HonorGodSoftware EngineerCommented:
> using heritage.getDay() - someDate.getDay()

What is this supposed to tell you?
What does heritage.getDay() return?
What does someDate.getDay() return?

Don't just throw equations... you need to understand what you are trying to compute before you know you are doing it right...
0
 
ylekot88Author Commented:
> using heritage.getDay() - someDate.getDay()

What is this supposed to tell you?
What does heritage.getDay() return?
What does someDate.getDay() return?

Don't just throw equations... you need to understand what you are trying to compute before you know you are doing it right...

I don't think I'm throwing equations, I understand that it is supposed to get a certain day return. I am not that familiar with the manipulation of date objects to get the results I am looking for.

after the zone advisor's posting I don't know what to say, if I'm supposed to close the question at this point or not. I'm not sure if this site is to be used for tutoring, for a question of "this code doesn't work" and someone points out the errors, makes suggestions on making it work. Please advise if you can see a way to correct this error, or if I should close the question and repost. thank you
0
 
HonorGodSoftware EngineerCommented:
Well, generally (as in most cases), a  more specific question is asked, and some interaction occurs to drive towards the answer, or the realization that the answer to the question is "no, you can't do that".

In this case you started with a larger challenge, that had lots, and lots of issues.
However, I didn't feel like you were trying to "take advantage" of EE and me, so I was willing to provide much more detailed "tutorial" assistance than one is likely to find.

> I don't think I'm throwing equations, I understand that it is supposed to get a certain day return.

  Good.  I asked the questions though because I was confused about exactly what it was you were trying to compute, or determine from this equation.

Since heritage is a date Object, we can use something like
http://www.w3schools.com/jsref/jsref_obj_date.asp
to find out what heritage.getDay() will return:

----------------------------------------------------------------------------------------------------
getDay()        Returns the day of the week from a Date object (from 0-6)
----------------------------------------------------------------------------------------------------

So, given some date object, this method "getDay()" will tell us which day of the week is currently being represented by the date object.  For example, the "try it" for this particular method is available here:

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_date_weekday

It demonstrates one way to make use of the getDay() method.

My confusion stems from the fact that I don't understand what you are trying to determine when you subtract the day of the week for one date object from the day of the week for another object.

Does this make sense?

b0lsc0tt is one of the people who try to keep an eye on things (in his copious spare time :-)) to make sure that EE runs smoothly.  He doesn't want you to get the wrong impression about EE, and I hope that I am not giving any wrong impression.  He is trying to make sure that your expectations about what EE can do for you, and how it works are in agreement with how the site works.

I have certainly been much more verbose with this thread than you will find with almost all of the other "questions" on EE.  That has been my choice, and I hope that I haven't caused you to have any misunderstandings about EE.  If so, please forgive me.

I am most interested in helping.  That's why I'm here.  I have been trying to use this thread to help you learn about JavaScript.  I have been trying to do that by continuing to ask leading questions.  Hopefully you have not found this method to frustrating.

Does this mean that you have to close the question right here and now?

No, but it would probably be good to pick a very focused, and precise question, and we can drive it to completion.  How does that sound?
0
 
ylekot88Author Commented:
all of the above sounds good to me :) I do thank you for all your assistance.

I understand the return is a number, and as far as the array, it returns the day. We are learning arrays this week, but we are not using arrays in this assignment. The number extracted is correct in .getDay() but its supposed to give me the difference between the start date and stop date. The amount of days between those 2 dates is 44. My return is not 44. What I meant by not getting the date objects/math objects not working by the way I need them to is I don't see a way to get the days to return 44 as the amount of days between start and stop. When I use hours, minutes, & seconds, again, the subtraction of dates works, but I'm getting today returns, not the return of the set values starting in the var someDay("your values here") and heritageDay('your values here")

0
 
HonorGodSoftware EngineerCommented:
Ah...  close.

When you take the difference between ( stop - start ), it is the number of milliseconds difference between the two date object.

Note: I'm going to use a differently named variable to represent this difference

var diff = ( stop - start )
var msPerSec = 1000
var msPerMin = 60 * msPerSec
var msPerHour = 60 * msPerMin
var msPerDay = 24 * msPerHour

If you take the Math.floor( diff / msPerDay ) then the result will be 44,
more importantly, if you subtract this amount from "diff" the remainder will be the number of milliseconds less than a day that remain...

So,

var days = Math.floor( diff / msPerDay )

Now, to determine the number of hours (i.e., fractions of days) we could use
something like:

var hours = Math.floor( ( diff - ( days * msPerDay ) ) / msPerHour )

And to determine the number of minutes (i.e., fractions of hours), we could
use something like:

var min = Math.floor( ( diff - ( days * msPerDay ) - ( hours * msPerHour ) ) / msPerMin )

and finally, to determine the number of seconds we could do something similar.

Is this the best way to do it?  Probably not, but it is one way to do it.
Take a look, and see if this makes sense...
0
 
HonorGodSoftware EngineerCommented:
You doing ok?  You've been pretty quiet...
0
 
ylekot88Author Commented:
Thank you to both of you for all of your assistance and for clarification. HonorGod was kind enough and patient enough to help explain an overview of how javascripting should work with regards to programming. I didn't think this site was to be used as a direct tutoring site, but I definitely appreciate all the direction HonorGod offered with regards to learning how to be a better coder, how to post on here, how to zero in one one thing at a time, and how to debug. As a beginner, I am a bit frustrated that I have trouble relaying my knowledge of what I need the code to do & what I understand, but I'm sure in due time it'll get much easier, and I'll be much more comfortable.

I am going to post this now, but I'd like to close the question when I get home this evening so I can make sure HonorGod gets points. Again, thank you for checking in on me, and for helping me way above and beyond the normal suggestions!!
0
 
ylekot88Author Commented:
the solution was not complete, but I definitely learned much more than I was expecting! excellent assistance, very patient and willing to go the extra mile to make sure I know proper coding!
0
 
HonorGodSoftware EngineerCommented:
Thanks for the grade & the points.

If you put HonorGod in the text, or title of any future questions, I will be notified.

Good luck & have a great day.
0
 
HonorGodSoftware EngineerCommented:
Interesting.  Thank you for sharing b0lsc0tt.  That is something of which I was unaware.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.