Help In Explaining How The Codes Work

[cleeclee]

Hello i'd like to know how this code works. It displays a time and date for me. But i don't understand how it does. Thanks in advance for the reply!

<script>
var myVar=setInterval(function(){myTimer()},1000);


function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}


<!--
function makeArray() {
for (i = 0; i<makeArray.arguments.length; i++)
this[i + 1] = makeArray.arguments[i];
}


var months = new makeArray('January','February','March','April','May',
'June','July','August','September','October','November','December');
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;


document.write(day + " " + months[month] + " " + year);
//-->


</script>

[Adam]

Well first of all, your makeArray function does not create an array. It just creates a standard object with the function acting as the constructor.

 

You also seem to have two timers. One of which may never be seen, depending on the location of that script in the document. The other that would be seen, does not update itself. So do you see a timer updating every second or a static timer?

[cleeclee]

hmm i see a timer that updates every sec according to the current time my computer is at. Would you care explaining each line to me so that i could do the trouble shooting myself? ^^

[Adam]

Okay. First timer:

 

var myVar=setInterval(function(){myTimer()},1000);

 

This creates a timer that calls the provided callback every second, which in turn calls the myTimer() function.

 

function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}

 

This creates a new Date object with no arguments, meaning it's set to the current date/time. The return value of toLocaleTimeString() is then stored in the variable t, and then set as the innerHTML of the #demo element. This will happen every second, so you'll get the "dynamic" clock.

 

Second timer:

 

function makeArray() {
for (i = 0; i<makeArray.arguments.length; i++)
this[i + 1] = makeArray.arguments[i];
}

 

The arguments provided to this function are stored as the properties 1, 2, 3, etc. As mentioned this isn't actually an array, so you can't use the array methods, but numeric property names are valid in JS so while this is wrongly named it isn't necessarily bad. Would be a lot easier to remove it though and just define the array like:

 

var months = ['January', 'February' ...];

 

Though you would need to account for the index starting at 0.

 

var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;

 

Again this just creates a new Date object to the current date/time, and then uses the Data object's methods to build up a string, which is eventually written to the document once:

 

document.write(day + " " + months[month] + " " + year);

 

With what I said before about one not being shown, if document.write() is called after the document is ready you will overwrite the whole document and so loose the #demo element, meaning the first timer would fail. If called in-line, within the body, it will be written in-line. See the difference here:

 

http://jsfiddle.net/GWezM/

http://jsfiddle.net/z6Mq5/

[cleeclee]

wow that was very detailed and helpful. Thanks i'll make sure to work em out nicely. Your help is very much appreciated!