{"id":55075,"date":"2022-03-05T03:01:37","date_gmt":"2022-03-04T17:01:37","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=55075"},"modified":"2022-03-04T09:32:59","modified_gmt":"2022-03-03T23:32:59","slug":"javascript-object-oriented-programming-constructor-calculator-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-object-oriented-programming-constructor-calculator-tutorial\/","title":{"rendered":"Javascript Object Oriented Programming Constructor Calculator Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/since_1970.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Object Oriented Programming Constructor Calculator Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/since_1970_calculator.jpg\" title=\"Javascript Object Oriented Programming Constructor Calculator Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Object Oriented Programming Constructor Calculator Tutorial<\/p><\/div>\n<p>We&#8217;re going to relent regarding the impracticality of handling the big numbers involved in our most recent Date Guessing game featured in <a title='Javascript Object Oriented Programming Constructor Players Tutorial' href='#joopcpt'>Javascript Object Oriented Programming Constructor Players Tutorial<\/a>.  To &#8220;relent&#8221; with a game design means adding &#8220;hints&#8221;, quite often, and in the case of handling these big numbers you encounter in this game, we&#8217;d like to offer an inhouse &#8220;calculator&#8221; hint functionality.<\/p>\n<p>Maybe you recall our <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tcl-and-php-calculator-tutorial\/' title='Tcl and PHP Calculator Tutorial'>Tcl and PHP Calculator Tutorial<\/a> combining the talents of &#8230;<\/p>\n<ul>\n<li>PHP serverside language to organize command line tools such as the talented &#8230;<\/li>\n<li>Tcl with its scripting and mathematics<\/li>\n<\/ul>\n<p> &#8230; to create a &#8220;calculator&#8221; HTML iframe hosted optional add-on to our game, callable with a &#8230;<\/p>\n<ul>\n<li>click on <font color=blue>blue seconds large number<\/font> for a year (double) value calculation &#8230; or &#8230;<\/li>\n<li>double click on <font color=blue>blue seconds large number<\/font> for a day (double) value calculation<\/li>\n<\/ul>\n<p> &#8230; that can help while not giving the game away.   Your masochists can spurn this help!<\/p>\n<p>Codewise &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/since_1970.html--GETME\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/since_1970.html--GETME\">since_1970.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/since_1970.html\">web application Game<\/a> which you can <a href='#nsitwo'>try for two<\/a> or <a href='#nsi'>one<\/a> below, called on a tweaked &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/calculator.php--GETME\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/calculator.php--GETME\">calculator.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/calculator.php\">calculator tool as a standalone web application<\/a><\/li>\n<\/ul>\n<p> &#8230; made this happen, along with some <i>&#8220;lucky number&#8221; birthdate(time) (GMT?)<\/i> code <font size=2>(well, you had to be there <\/font><font size=1>&#8230; didn&#8217;t you?<\/font><font size=2>)<\/font>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-object-oriented-programming-constructor-calculator-tutorial\/'>Javascript Object Oriented Programming Constructor Calculator Tutorial<\/a>.<\/p-->\n<hr>\n<p id='joopcpt'>Previous relevant <a target=_blank title='Javascript Object Oriented Programming Constructor Players Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-object-oriented-programming-constructor-players-tutorial\/'>Javascript Object Oriented Programming Constructor Players Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/since_1970.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Object Oriented Programming Constructor Players Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/since_1970_more.jpg\" title=\"Javascript Object Oriented Programming Constructor Players Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Object Oriented Programming Constructor Players Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Javascript Object Oriented Programming Constructor Primer Tutorial' href='#joopcprt'>Javascript Object Oriented Programming Constructor Primer Tutorial<\/a>&#8216;s game was coded, and designed, for a single player.  But perhaps you have a group of &#8220;big number&#8221; and\/or &#8220;date&#8221; afficionado players wanting to play.  Well, as of today, herd up to nine of them around your computing device and have a go at <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/since_1970.html-GETME\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/since_1970.html-GETME\">since_1970.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/since_1970.html\">web application Game<\/a> which you can <a href='#nsitwo'>try for two<\/a> or <a href='#nsi'>one<\/a> below.<\/p>\n<p>So, how did we approach this extension of functionality?<\/p>\n<ol>\n<li>ready for a new get argument called <font color=blue>numplayers<\/font> for <font color=purple>a new global variable<\/font> &#8230;<br \/>\n<code><br \/>\n  <font color=purple>var numplayers=<\/font><font color=blue>location.search.split('numplayers=')[1] ? eval(decodeURIComponent(location.search.split('numplayers=')[1].split('&')[0])) : <\/font><font color=purple>1;<\/font><br \/>\n<\/code>\n<\/li>\n<li>initialize arrays and <font color=olive>add some new global variables<\/font> and <font color=green>make scalar variables into arrays<\/font> then <font color=red>populate arrays<\/font> &#8230;<br \/>\n<code><br \/>\n  <font color=purple>var numplayers=<\/font><font color=blue>location.search.split('numplayers=')[1] ? eval(decodeURIComponent(location.search.split('numplayers=')[1].split('&')[0])) : <\/font><font color=purple>1;<\/font><br \/>\n  <font color=olive>var restdone=true;<br \/>\n  if (numplayers > 1) {  restdone=false;  }<br \/>\n  var zero=0;<br \/>\n  var thecurrentone='';<br \/>\n  var im=0;<\/font><br \/>\n<br \/>\n  var dow=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];<br \/>\n  var dowm=['January','February','March','April','May','June','July','August','September','October','November','December'];<br \/>\n<br \/> <br \/>\n  var nts=1970;<br \/>\n  var adate = null;<br \/>\n  var bdate = null;<br \/>\n  var his, mis, sis, daym, monthm, yearm;<br \/>\n  var now = new Date();<br \/>\n  nts=eval('' + now.getFullYear());<br \/>\n  var utcMilllisecondsSinceEpoch = now.getTime(); \/\/ + (now.getTimezoneOffset() * 60 * 1000);<br \/>\n  var utcSecondsSinceEpoch = Math.round(utcMilllisecondsSinceEpoch \/ 1000);<br \/>\n<br \/> <br \/>\n  var score=<font color=green>[<\/font>eval(73000 * 24 * 60 * 60)<font color=green>]<\/font>;<br \/>\n  var goes=<font color=green>[<\/font>0<font color=green>]<\/font>;<br \/>\n  var blurb='';<br \/>\n<br \/> <br \/>\n  var myr=<font color=green>[<\/font>eval(Math.floor(Math.random() * 56) + 1)<font color=green>]<\/font>;<br \/>\n<br \/> <br \/>\n  nts++;<br \/>\n  for (im=0; im&lt;myr[0]; im++) {<br \/>\n    nts++;<br \/>\n    utcSecondsSinceEpoch+=eval(24 * 60 * 60);<br \/>\n  }<br \/>\n <br \/> <br \/>\n  var myantiguess=<font color=green>[<\/font>eval(Math.floor(Math.random() * utcSecondsSinceEpoch) + 0)<font color=green>]<\/font>;<br \/>\n<br \/> <br \/>\n  <font color=red>for (im=1; im&lt;numplayers; im++) {<br \/>\n    score.push(score[0]);<br \/>\n    goes.push(goes[0]);<br \/>\n    myr.push(myr[0]);<br \/>\n    myantiguess.push(eval(Math.floor(Math.random() * utcSecondsSinceEpoch) + 0));<br \/>\n  }<\/font><br \/>\n<\/code>\n<\/li>\n<li>work at letting the user know that the <font color=blue>functionality is available<\/font> &#8230;<br \/>\n<code><br \/>\n&lt;h1&gt;Big Number (Starts at 1\/1\/1970) Date and Time Guessing via Seconds Since Game<font color=blue> for &lt;input id=inumplayers style=display:inline-block;width:35px; type=number step=1 min=1 max=9 onblur=\"if (eval(this.value) &gt; 1) { location.href=document.URL.split('#')[0].split('?')[0] + '?numplayers=' + this.value; }\" value=1&gt;&lt;\/input&gt; Player(s)<\/font>&lt;\/h1&gt;<br \/>\n<\/code><br \/>\n &#8230;<br \/>\n<code><br \/>\n&lt;body onload=\"<font color=blue>document.getElementById('inumplayers').value='' + numplayers;<\/font> display();\"&gt;<br \/>\n<\/code>\n<\/li>\n<li>change the onclick logic <font color=olive>call<\/font> of the input type=button elements &#8230;<br \/>\n<code><br \/>\n&lt;tr&gt;&lt;td style=text-align:center;&gt;&lt;br&gt;&lt;input <font color=purple>class=mybut id=mybut <\/font>type=button onclick=checkanswer(<font color=olive>this<\/font>); value='Check my Datetime Above'&gt;&lt;\/input&gt;&lt;br&gt;&lt;\/td&gt;&lt;\/tr&gt;<br \/>\n<\/code>\n<\/li>\n<li>make the input type=button <font color=purple>be id&#8217;ed and class it<\/font> &#8230;<br \/>\n<code><br \/>\n&lt;tr&gt;&lt;td style=text-align:center;&gt;&lt;br&gt;&lt;input <font color=purple>class=mybut id=mybut <\/font>type=button onclick=checkanswer(<font color=olive>this<\/font>); value='Check my Datetime Above'&gt;&lt;\/input&gt;&lt;br&gt;&lt;\/td&gt;&lt;\/tr&gt;<br \/>\n<\/code>\n<\/li>\n<li>make the existing HTML table element be embedded <font color=blue>in an outer HTML table (with its associated &#8220;thead&#8221; and &#8220;tbody&#8221; &#8220;and tr=row1&#8221; element helpers)<\/font> and <font color=brown>class some more elements<\/font> and tweak <font color=orange>some CSS min-width property styling<\/font> &#8230;<br \/>\n<code><br \/>\n<font color=blue>&lt;table id=outertable&gt;&lt;thead id=mythead&gt;&lt;\/thead&gt;&lt;tbody id=mytbody&gt;&lt;tr id=row1&gt;&lt;td id=cell1&gt;<\/font><br \/>\n&lt;table border=20&gt;<br \/>\n&lt;tr&gt;&lt;th id=thscore&gt;Points left: &lt;span <font color=brown>class=score<\/font> id=score&gt;&lt;\/span&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Survival count: &lt;span <font color=brown>class=goes<\/font> id=goes&gt;&lt;\/span&gt;&lt;\/th&gt;&lt;\/tr&gt;<\/font><br \/>\n&lt;tr&gt;&lt;th id=secanswer&gt;Seconds since 1\/1\/1970: &lt;span <font color=brown>class=spananswer<\/font> id=spananswer&gt;&lt;\/span&gt; ... try to match GMT datetime closely below, else lose points&lt;\/th&gt;&lt;\/tr&gt;<br \/>\n&lt;tr&gt;&lt;td style=text-align:center;&gt;&lt;br&gt;&lt;form&gt;<br \/>\n&lt;input style=display:inline-block;<font color=orange>min-width:28px;<\/font> onblur=fixitzero(this,1,31); onchange=fixitzero(this,1,31); type=\"text\" title=\"Date\" id=\"sday\" name=\"sday\" value=\"01\"&gt;&lt;\/input&gt;\/&lt;select style=display:inline-block; id=\"smonth\" name=\"smonth\" title=\"Month\"&gt;&lt;option value=\"01\"&gt;January&lt;\/option&gt;&lt;option value=\"02\"&gt;February&lt;\/option&gt;&lt;option value=\"03\"&gt;March&lt;\/option&gt;&lt;option value=\"04\"&gt;April&lt;\/option&gt;&lt;option value=\"05\"&gt;May&lt;\/option&gt;&lt;option value=\"06\"&gt;June&lt;\/option&gt;&lt;option value=\"07\"&gt;July&lt;\/option&gt;&lt;option value=\"08\"&gt;August&lt;\/option&gt;&lt;option value=\"09\"&gt;September&lt;\/option&gt;&lt;option value=\"10\"&gt;October&lt;\/option&gt;&lt;option value=\"11\"&gt;November&lt;\/option&gt;&lt;option value=\"12\"&gt;December&lt;\/option&gt;&lt;\/select&gt;\/&lt;input style=display:inline-block;<font color=orange>min-width:55px;<\/font> onblur=fixitzero(this,1970,nts); onchange=fixitzero(this,1970,nts); step=1 min=1970 type=\"number\" id=\"syear\" name=\"syear\" value=\"1970\" title=\"Year\"&gt;&lt;\/input&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input onblur=fixitzero(this,0,23); onchange=fixitzero(this,0,23); style=display:inline-block;<font color=orange>min-width:28px;<\/font> type=\"text\" id=\"shour\" name=\"shour\" value=\"00\" title=\"Hours\"&gt;&lt;\/input&gt;:&lt;input onblur=fixitzero(this,0,59); onchange=fixitzero(this,0,59); title=\"Minutes\" style=display:inline-block;<font color=orange>min-width:28px;<\/font> type=\"text\" id=\"sminute\" name=\"sminute\" value=\"00\"&gt;&lt;\/input&gt;:&lt;input onblur=fixitzero(this,0,59); onchange=fixitzero(this,0,59); title=\"Seconds\" style=display:inline-block;<font color=orange>min-width:28px;<\/font> type=\"text\" id=\"ssecond\" name=\"ssecond\" value=\"00\"&gt;&lt;\/input&gt;&lt;span&gt; GMT&lt;\/span&gt;&lt;br&gt;<br \/>\n&lt;\/form&gt;&lt;br&gt;&lt;\/td&gt;&lt;\/tr&gt;<br \/>\n&lt;tr&gt;&lt;td style=text-align:center;&gt;&lt;br&gt;&lt;input <font color=purple>class=mybut id=mybut <\/font>type=button onclick=checkanswer(<font color=olive>this<\/font>); value='Check my Datetime Above'&gt;&lt;\/input&gt;&lt;br&gt;&lt;\/td&gt;&lt;\/tr&gt;<br \/>\n&lt;\/table&gt;<br \/>\n<font color=blue>&lt;\/td&gt;&lt;\/tr&gt;&lt;\/tbody&gt;&lt;\/table&gt;<\/font><br \/>\n<\/code>\n<\/li>\n<li>at document.body onload event <font color=orange>remember the innerHTML of original td<\/font> (now id&#8217;ed to id=cell1) element and <font color=magenta>getting to that<\/font> and <font color=cyan>semi-clone that innerHTML above but change any id&#8217;s to reflect the index of the new player cell and append a new &#8220;td cell&#8221; outerHTML that to the innerHTML of &#8220;tr id=row1&#8221; element<\/font> featuring <font color=pink>onto the innerHTML of &#8220;thead&#8221; a header cell above append a new &#8220;th cell&#8221; outerHTML specifying a player title, amendable within a div contenteditable=true arrangement<\/font> &#8230;<br \/>\n<code><br \/>\n  function display() {<br \/>\n    document.getElementById('score'<font color=olive> + thecurrentone<\/font>).innerHTML='' + score<font color=green>[zero]<\/font>;<br \/>\n    document.getElementById('goes'<font color=olive> + thecurrentone<\/font>).innerHTML='' + goes<font color=green>[zero]<\/font>;<br \/>\n    document.getElementById('spananswer'<font color=olive> + thecurrentone<\/font>).innerHTML='' + myantiguess<font color=green>[zero]<\/font>;<br \/>\n    adate=new Date(eval(eval('' + myantiguess<font color=green>[zero]<\/font>) * 1000));<br \/>\n    yearm=eval('' + adate.getFullYear());<br \/>\n    monthm=dowm[eval(0 + eval('' + adate.getMonth()))];<br \/>\n    daym=eval(0 + eval('' + adate.getDate()));<br \/>\n    his=eval('' + adate.getHours());<br \/>\n    mis=eval('' + adate.getMinutes());<br \/>\n    sis=eval('' + adate.getSeconds());<br \/>\n    \/\/blurb='';<br \/>\n    \/\/document.getElementById('asp').title='';<br \/>\n    <font color=magenta>if (!restdone) { restdone=true; dorest(); }<\/font><br \/>\n  }<br \/>\n<br \/> <br \/>\n  <font color=magenta>function dorest() {<\/font><br \/>\n    <font color=orange>var ccellone=document.getElementById('cell1').innerHTML;<\/font><br \/>\n    <font color=cyan>var acellarr=ccellone.split(' id=\"');<br \/>\n    var newtdis=acellarr[0];<\/font><br \/>\n    <font color=pink>document.getElementById('mythead').innerHTML+='&lt;tr id=row0&gt;&lt;th&gt;&lt;div id=div1 contenteditable=true&gt;Player 1&lt;\/div&gt;&lt;\/th&gt;&lt;\/tr&gt;';<\/font><br \/>\n    <font color=cyan>for (var ii=2; ii&lt;=numplayers; ii++) {<br \/>\n     for (var jj=1; jj&lt;acellarr.length; jj++) {<br \/>\n       newtdis+=' id=\"' + acellarr[jj].split('\"')[0] + ii + acellarr[jj].replace(acellarr[jj].split('\"')[0], '');<br \/>\n     }<\/font><br \/>\n     <font color=pink>document.getElementById('mythead').innerHTML=document.getElementById('mythead').innerHTML.replace('&lt;\/tr&gt;','&lt;th&gt;&lt;div id=div' + ii + ' contenteditable=true&gt;Player ' + ii + '&lt;\/div&gt;&lt;\/th&gt;&lt;\/tr&gt;');<\/font><br \/>\n     <font color=cyan>document.getElementById('row1').innerHTML+='&lt;td id=cell' + ii + '&gt;' + newtdis + '&lt;\/td&gt;';<br \/>\n     document.getElementById('spananswer' + ii).innerHTML='' + myantiguess[eval(-1 + ii)];<br \/>\n     newtdis=acellarr[0];<br \/>\n    }<\/font><br \/>\n  <font color=magenta>}<\/font><br \/>\n<\/code>\n<\/li>\n<li>change the <font color=olive>onclick logic event function<\/font> of the input type=button elements &#8230;<br \/>\n<code><br \/>\n  function checkanswer(<font color=olive>buto<\/font>) {<br \/>\n    <font color=olive>zero=0;<br \/>\n    thecurrentone=('' + buto.id).replace('mybut','');<br \/>\n    if (thecurrentone != '') { zero=eval(-1 + eval('' + thecurrentone));   }<br \/>\n    adate=new Date(eval(eval('' + myantiguess<\/font><font color=green>[zero]<\/font><font color=olive>) * 1000));<br \/>\n    yearm=eval('' + adate.getFullYear());<br \/>\n    monthm=dowm[eval(0 + eval('' + adate.getMonth()))];<br \/>\n    daym=eval(0 + eval('' + adate.getDate()));<br \/>\n    his=eval('' + adate.getHours());<br \/>\n    mis=eval('' + adate.getMinutes());<br \/>\n    sis=eval('' + adate.getSeconds());<\/font><br \/>\n    blurb = 'Perfect last answer for ' + myantiguess<font color=green>[zero]<\/font> + ' was ' + ('0' + daym).slice(-2) + '\/' + monthm + '\/' + yearm + ' ' + ('0' + his).slice(-2) + ':' + ('0' + mis).slice(-2) + ':' + ('0' + sis).slice(-2) + ' GMT';<br \/>\n    document.getElementById('asp').title='Best answer to ' + myantiguess<font color=green>[zero]<\/font> + ' seconds since 1\/1\/1970 was what date';<br \/>\n    var bdate = new Date(document.getElementById('syear'<font color=olive> + thecurrentone<\/font>).value, eval(-1 + eval('' + document.getElementById('smonth'<font color=olive> + thecurrentone<\/font>).value)), document.getElementById('sday'<font color=olive> + thecurrentone<\/font>).value,  document.getElementById('shour'<font color=olive> + thecurrentone<\/font>).value, document.getElementById('sminute'<font color=olive> + thecurrentone<\/font>).value, document.getElementById('ssecond'<font color=olive> + thecurrentone<\/font>).value);<br \/>\n    var butcMilllisecondsSinceEpoch = bdate.getTime(); \/\/ + (bdate.getTimezoneOffset() * 60 * 1000);<br \/>\n    var butcSecondsSinceEpoch = Math.round(butcMilllisecondsSinceEpoch \/ 1000);<br \/>\n    goes<font color=green>[zero]<\/font>++;<br \/>\n    score<font color=green>[zero]<\/font>-=Math.abs(eval(eval(butcSecondsSinceEpoch) - eval(myantiguess<font color=green>[zero]<\/font>)));<br \/>\n    document.getElementById('score'<font color=olive> + thecurrentone<\/font>).innerHTML='' + score<font color=green>[zero]<\/font>;<br \/>\n    document.getElementById('goes'<font color=olive> + thecurrentone<\/font>).innerHTML='' + goes<font color=green>[zero]<\/font>;<br \/>\n    if (document.getElementById('score'<font color=olive> + thecurrentone<\/font>).innerHTML.replace(\/^0$\/g,'-1').indexOf('-') != -1) {<br \/>\n      <font color=olive>if (numplayers == 1) {<\/font><br \/>\n        alert('You survived until go number ' + goes<font color=green>[zero]<\/font>);<br \/>\n        location.href=document.URL;<br \/>\n      <font color=olive>}<\/font><br \/>\n    } else {<br \/>\n      myantiguess<font color=green>[zero]<\/font>=eval(Math.floor(Math.random() * utcSecondsSinceEpoch) + 0);<br \/>\n      display();<br \/>\n    }<br \/>\n  }<br \/>\n<\/code>\n<\/li>\n<li>change CSS to start using <font color=lime>class selectors<\/font> &#8230;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\n  input:not([type=button]) { width:10%; background-color:#f0f0f0; }<br \/>\n  input[type=button] { background-color:yellow; }<br \/>\n  select { background-color:#f0f0f0;  }<br \/>\n  <font color=lime>.<\/font>spananswer { color: blue; }<br \/>\n  <font color=lime>.<\/font>goes { color: purple; }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p>And the rest is up to the players!<\/p>\n<p><iframe id=nsitwo src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/since_1970.html?numplayers=2\" style=\"width:100%;height:700px;\"><\/iframe><br \/>\n<!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-object-oriented-programming-constructor-players-tutorial\/'>Javascript Object Oriented Programming Constructor Players Tutorial<\/a>.<\/p-->\n<hr>\n<p id='joopcprt'>Previous relevant <a target=_blank title='Javascript Object Oriented Programming Constructor Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-object-oriented-programming-constructor-primer-tutorial\/'>Javascript Object Oriented Programming Constructor Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/since_1970.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Object Oriented Programming Constructor Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/since_1970.jpg\" title=\"Javascript Object Oriented Programming Constructor Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Object Oriented Programming Constructor Primer Tutorial<\/p><\/div>\n<p>An important aspect to any <a target=_blank title='OOP information from Wikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/Object-oriented_programming'>Object Oriented Programming<\/a> (or OOP) discussion would have to include an early introduction to the concept of the (object) <a target=_blank title='OOP Constructor information from Wikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/Constructor_(object-oriented_programming)'>Constructor<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/en.wikipedia.org\/wiki\/Constructor_(object-oriented_programming)'><p>\nIn class-based object-oriented programming, a constructor is a special type of subroutine called to create an object. It prepares the new object for use, often accepting arguments that the constructor uses to set required member variables.\n<\/p><\/blockquote>\n<p>The nature of method signatures including &#8230;<\/p>\n<ul>\n<li>method name &#8230; and &#8230;<\/li>\n<li>arguments (also known as parameters) &#8230; and &#8230;<\/li>\n<li>return value(s)<\/li>\n<\/ul>\n<p> &#8230; &#8220;tests&#8221; for uniqueness, and so, validity, means that any one <a target=_blank title='OOP class information from Wikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/Class_(computer_programming)'>&#8220;class&#8221;<\/a> (like a &#8220;blueprint&#8221;, where &#8220;Constructors&#8221; are defined for the deployed &#8220;objects&#8221; to follow) can have multiple (method name) &#8220;Constructors&#8221; defined.<\/p>\n<p>So, how best to illustrate this?  Well, with Javascript <font size=1>(where, as with other languages that support OOP, you can mix OOP style programming with non-OOP style programming, should you wish)<\/font>, we often use the <a target=_blank title='Javascript Date object information from W3schools' href='https:\/\/www.w3schools.com\/js\/js_dates.asp'>Date<\/a> object when we have a web application involving the &#8220;when&#8221; of life.   Look at the four ways below you can &#8220;construct&#8221; a Date object &#8230;<\/p>\n<blockquote cite='https:\/\/www.w3schools.com\/js\/js_dates.asp'><p>\nCreating Date Objects<br \/>\nDate objects are created with the new Date() constructor.<br \/>\n<br \/>\nThere are 4 ways to create a new date object:<br \/>\n<br \/>\nnew Date()<br \/>\nnew Date(year, month, day, hours, minutes, seconds, milliseconds)<br \/>\nnew Date(milliseconds)<br \/>\nnew Date(date string)\n<\/p><\/blockquote>\n<p>Interesting, huh?!  The first we use most commonly, resulting in a Date object describing the Date and Time it is when the codeline executes.  The second is used to recreate a Date and Time you have information about.   The fourth is a way to create a Date object via a timestamp string.<\/p>\n<p>We think the third one above is very intriguing and revealing!   Could it be that the computer view of a Date object&#8217;s data be as simple as containable in a single &#8220;counting number&#8221; (or integer) type of data item?  Yup!  It&#8217;s been organized that way because it was decided that <i>1st January 1970 00:00:00<\/i> should be the starting point (ie. parameter zero) for this arrangement.  For a lot of us &#8220;oldies&#8221; then, the sad news is, to describe your birth day will need the second or fourth constructors, <a onclick=\"document.getElementById('spanboomer').style.display='inline-block';\" onmouseover=\"document.getElementById('spanboomer').style.display='inline-block';\" style=\"cursor:pointer;text-decoration:underline;\">only!<\/a> <span id=spanboomer style=display:none;color:red;>Hello Boomer Revenge clause is that constructor three parameter can be negative! Don&#8217;t like to be too childish here, but &#8230; ngarh, ngarh ngarh ngarh, ngarrrhhhh!<\/span>  But cheer up, because this arrangement is really great for computer speed processing Date object logic.<\/p>\n<p>We decided to write a bit of a &#8220;proof of concept&#8221; (fun and) game<font size=1>s<\/font> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/since_1970.html_GETME\">since_1970.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/since_1970.html\">web application Game<\/a> to give you a feel for all of this, that features &#8220;Constructors&#8221; two and three above.  You can also try it below &#8230;<\/p>\n<p><iframe id=nsi src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/since_1970.html\" style=\"width:100%;height:700px;\"><\/iframe><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d55039' onclick='var dv=document.getElementById(\"d55039\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/date\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55039' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d55061' onclick='var dv=document.getElementById(\"d55061\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/table\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55061' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d55075' onclick='var dv=document.getElementById(\"d55075\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/calculator\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55075' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re going to relent regarding the impracticality of handling the big numbers involved in our most recent Date Guessing game featured in Javascript Object Oriented Programming Constructor Players Tutorial. To &#8220;relent&#8221; with a game design means adding &#8220;hints&#8221;, quite often, &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-object-oriented-programming-constructor-calculator-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,15,37],"tags":[103,3925,2251,1580,210,2078,2442,3924,301,342,354,476,477,3081,3922,2728,576,1525,609,2991,652,1830,3923,849,2010,875,1861,932,952,3908,997,1986,3401,1238,3628,1245,3629,1319,1721],"class_list":["post-55075","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-array","tag-blueprint","tag-calculator","tag-cell","tag-class","tag-constructor","tag-contenteditable","tag-counting-number","tag-date","tag-div","tag-dom","tag-game","tag-games-2","tag-global-variable","tag-guess","tag-hint","tag-html","tag-innerhtml","tag-input","tag-integer","tag-javascript","tag-method","tag-milliseconds","tag-object","tag-object-oriented-programming","tag-oop","tag-outerhtml","tag-php","tag-player","tag-players","tag-programming","tag-proof-of-concept","tag-seconds","tag-table","tag-tbody","tag-tcl","tag-thead","tag-tutorial","tag-variable"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55075"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=55075"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55075\/revisions"}],"predecessor-version":[{"id":55081,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55075\/revisions\/55081"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=55075"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=55075"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=55075"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}