{"id":43823,"date":"2019-02-25T03:01:02","date_gmt":"2019-02-24T17:01:02","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=43823"},"modified":"2019-02-25T05:21:46","modified_gmt":"2019-02-24T19:21:46","slug":"tic-tac-toe-class-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/tic-tac-toe-class-tutorial\/","title":{"rendered":"Tic Tac Toe Class Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/tictactoe.html?idvsclass=class\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Tic Tac Toe Class Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/tictactoe_class.jpg\" title=\"Tic Tac Toe Class Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Tic Tac Toe Class Tutorial<\/p><\/div>\n<p>What do &#8220;Simon Says&#8221; and &#8220;Tic Tac Toe&#8221; have in common, for us today?<\/p>\n<blockquote><p>\nThey&#8217;re both games.\n<\/p><\/blockquote>\n<p><font size=1>Yeh, well &#8230; okay &#8230; but apart from &#8220;They&#8217;re both games&#8221; &#8230; <\/font>What do &#8220;Simon Says&#8221; and &#8220;Tic Tac Toe&#8221; have in common, for us today, like?<\/p>\n<blockquote><p>\nNeither of them are called Noughts and Crosses.\n<\/p><\/blockquote>\n<p><font size=1>Well, yes, in non-Australian parts &#8230; yes, well &#8230; okay &#8230; but apart from &#8220;They&#8217;re both games&#8221; and &#8220;Neither of them are called Noughts and Crosses&#8221; &#8230; <\/font>What do &#8220;Simon Says&#8221; and &#8220;Tic Tac Toe&#8221; have in common, for us today, like, web application coding wise?<\/p>\n<blockquote><p>\nThey both use conspicuous repetition of identical initial consonant sounds in successive or closely associated syllables within a group of words.\n<\/p><\/blockquote>\n<p><font size=1>Now I think we&#8217;ve been Googling now &#8230; well, okey dokey &#8230; yes, well &#8230; okay &#8230; but apart from &#8220;They&#8217;re both games&#8221; and &#8220;Neither of them are called Noughts and Crosses&#8221; and &#8220;They both use conspicuous repetition of identical initial consonant sounds in successive or closely associated syllables within a group of words&#8221; &#8230; <\/font>What do &#8220;Simon Says&#8221; and &#8220;Tic Tac Toe&#8221; have in common, for us today, like, web application coding wise, in terms of wearing a tophat, like?<\/p>\n<blockquote><p>\nBoth have had updates to their code by a balding &#8230;\n<\/p><\/blockquote>\n<p><font size=1>Righteo &#8230; that&#8217;s it &#8230; apart from &#8220;They&#8217;re both games&#8221; and &#8220;Neither of them are called Noughts and Crosses&#8221; and &#8220;They both use conspicuous repetition of identical initial consonant sounds in successive or closely associated syllables within a group of words&#8221; and &#8220;Both have had updates to their code by a balding &#8230;&#8221; &#8230; <\/font>&#8220;Simon Says&#8221; and <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/wordpress\/tictactoe.js--GETME\" title=\"tictactoe.js\">changes to<\/a> our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/tictactoe.js--GETME\" title=\"tictactoe.js\">tictactoe.js<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/tictactoe.html?idvsclass=class\">class mode of use live run<\/a> <a target=_blank title='Firefox Scratchpad Javascript Placeholder Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/firefox-scratchpad-javascript-placeholder-tutorial\/'>Firefox Scratchpad Javascript Placeholder Tutorial<\/a> inspired external Javascript &#8220;Tic Tac Toe&#8221; show that (my usual line of thinking that) &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/new-simon-says-game-primer-tutorial\/'>\n<ul>\n<li>HTML element <a target=_blank title='HTML ID attribute information from w3schools' href='https:\/\/www.w3schools.com\/html\/html_id.asp'>ID<\/a> attribute is associated with Javascript DOM (action) work &#8230; eg. clicking a button and looking after other event logics<\/li>\n<li>HTML element <a target=_blank title='HTML class attribute information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_class.asp'>class<\/a> attribute is associated with CSS (styling) work<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; can be mixed up a bit in that we used &#8230;<\/p>\n<ul>\n<li>HTML class attribute as a controller of onclick logic via <a target=_blank title='Javascript DOM document.querySelector information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_document_queryselector.asp'>document.querySelector<\/a> in &#8220;Simon Says&#8221; &#8230; and today, we&#8217;ve allowed &#8230;<\/li>\n<li>HTML class attribute can be combined with HTML inline CSS onclick event logic as well<\/li>\n<\/ul>\n<p> &#8230; both idea concepts capable of ending up with webpages containing no ID attribute HTML?  You may well ask, why is this a big deal?  We&#8217;d say here, that it is &#8230;<\/p>\n<ul>\n<li>indicative of the flexibility of Javascript, the recognition of which we think is an important component to the thinking of web application developers &#8230; as well as &#8230;<\/li>\n<li>to occasionally set yourself austere restrictions (and the blog posting series with <i>CSS but no Javascript<\/i> culminating in <a target=_blank title='Missing Javascript Audio on Unmute Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/missing-javascript-audio-on-unmute-tutorial\/'>Missing Javascript Audio on Unmute Tutorial<\/a> springs to mind here) teaches you about &#8220;pinch points&#8221;<\/li>\n<\/ul>\n<p>What &#8220;pinch point&#8221; was the crucial one allowing &#8220;Tic Tac Toe&#8221; be either an <i>ID<\/i> attribute (the old approach) or <i>class<\/i> attribute (the new option for mode of use) based controller of event logic for the web application?  It was the replacement of Javascript DOM &#8230;<\/p>\n<p><code><br \/>\n var anHTMLobject=<a target=_blank title='Javascript DOM getElementsById() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_doc_getelementbytagid.asp'>document.getElementById<\/a>('anHTMLobjectID');  \/\/ our favourite Javascript DOM type of usage<br \/>\n<\/code><\/p>\n<p> &#8230; type lines of code (mostly, but not everywhere) with (an inhouse) &#8230;<\/p>\n<p><code><br \/>\n var anHTMLobject=documentgetElementById('anHTMLobjectID');<br \/>\n<br \/> <br \/>\n function documentgetElementById(inid) {<br \/>\n   var reto=document.getElementById(inid);<br \/>\n   if (!reto) {<br \/>\n     var alles=document.<a target=_blank title='Javascript DOM getElementsByTagName() method information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_document_getelementsbytagname.asp'>getElementsByTagName<\/a>('*');<br \/>\n     for (var ialles=0; ialles&lt;alles.length; ialles++) {<br \/>\n      if (('' + alles[ialles].className).indexOf(inid) != -1) { reto=alles[ialles];  }<br \/>\n     }<br \/>\n   }<br \/>\n   return reto;<br \/>\n }<br \/>\n<\/code><\/p>\n<p> &#8230; that suits a round of code changes that wherever we had written (in the HTML written out) something like &#8230;<\/p>\n<p><code><br \/>\n... id=\"t21\"&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; that now gets tokenized via (global var<font size=1>iable<\/font> &#8220;idvsclass&#8221; to) &#8230;<\/p>\n<p><code><br \/>\n... ' + idvsclass + '=\"' + classy('t21') + '\"&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; which is now a var<font size=1>iable<\/font> controlled via web browser address bar URL argumentation code <b>as per<\/b> &#8230;<\/p>\n<p><code><br \/>\n<b>var idvsclass=location.search.split('idvsclass=')[1] ? decodeURIComponent(location.search.split('idvsclass=')[1].split('&')[0]) : 'id';<br \/>\nvar exbidvsclass=location.search.split('idvsclass=')[1] ? '&idvsclass=' + decodeURIComponent(location.search.split('idvsclass=')[1].split('&')[0]) : '';<\/b><br \/>\nvar atend='?reflexes=y<b>' + exbidvsclass + '<\/b>&between=';<br \/>\n<\/code><\/p>\n<p> &#8230; in turn controlled, as far as the user is concerned, by a piece of hardcoded &#8220;&#8230;&#8221; in an H1 element becoming a dropdown with ID versus class options as per &#8230;<\/p>\n<p><code><br \/>\n var threedots=location.search.split('idvsclass=')[1] ? \"&lt;select onchange='if (this.value.length &gt; 0) { location.href=(document.URL.replace(\\\"idvsclass=\\\",\\\"idvsxclass=\\\") + \\\"&idvsclass=\\\" + this.value).replace(\\\".html&\\\",\\\".html?\\\").replace(\\\".htm&\\\",\\\".htm?\\\");  } '&gt;&lt;option value=''&gt;...&lt;\/option&gt;&lt;option value=class&gt;class&lt;\/option&gt;&lt;option value=id&gt;id&lt;\/option&gt;&lt;\/select&gt;\" : \"&lt;select onchange='if (this.value.length &gt; 0) { location.href=(document.URL.replace(\\\"idvsclass=\\\",\\\"idvsxclass=\\\") + \\\"&idvsclass=\\\" + this.value).replace(\\\".html&\\\",\\\".html?\\\").replace(\\\".htm&\\\",\\\".htm?\\\");  } '&gt;&lt;option value=''&gt;...&lt;\/option&gt;&lt;option value=id&gt;id&lt;\/option&gt;&lt;option value=class&gt;class&lt;\/option&gt;&lt;\/select&gt;\";<br \/>\n<br \/>\n var hcont = '&lt;h1 align=\"center\"&gt;You say Tic Tac Toe ' + threedots + ' I say Noughts and Crosses&lt;\/h1&gt;';<br \/>\n<\/code><\/p>\n<p>Here is another feature of HTML class attribute use that is truly different to ID use.  You can have multiple classnames defined for an inline CSS defined HTML coded element.  And here with Tic Tac Toe we use (a strategy that ID control is not capable of, whereby) &#8230;<\/p>\n<ul>\n<li>the first classname part of the class HTML inline CSS definition for the table cell (td) elements is what is that cell&#8217;s ID (of the old approach) &#8230; and we take the opportunity to value add (a bit) by having &#8230;<\/li>\n<li>the second classname part of the class HTML inline CSS definition for the table cell (td) elements is &#8220;z&#8221; prefixed to that above<\/li>\n<\/ul>\n<p> &#8230; so that we can add a little border colour razzamatazz to the Tic Tac Toe (class attribute controlled mode of use) style of the game as per &#8230;<\/p>\n<p><code><br \/>\nvar scols=['red','olive','orange','brown','green','blue','magenta','pink','purple'];<br \/>\nvar scolsofar=',,';<br \/>\nvar stylebits=location.search.split('idvsclass=')[1] ? '&lt;style&gt; .zt11 { border:5px solid ' + randc() + '; } .zt12 { border:5px solid ' + randc() + '; } .zt13 { border:5px solid ' + randc() + '; } .zt21 { border:5px solid ' + randc() + '; } .zt22 { border:5px solid ' + randc() + '; } .zt23 { border:5px solid ' + randc() + '; } .zt31 { border:5px solid ' + randc() + '; } .zt32 { border:5px solid ' + randc() + '; } .zt33 { border:5px solid ' + randc() + '; }  &lt;\/style&gt;' : '';<br \/>\n<br \/>\n function randc() {<br \/>\n   var cchoice='';<br \/>\n   while (scolsofar.indexOf(',' + cchoice + ',') != -1) {<br \/>\n     cchoice=scols[Math.floor(Math.random() * scols.length)];<br \/>\n   }<br \/>\n   scolsofar+=cchoice + ',';<br \/>\n   return cchoice;<br \/>\n }<br \/>\n<br \/>\n function classy(inb) {<br \/>\n var inbsuffix='';<br \/>\n if (idvsclass == 'class') { inbsuffix=' ' + 'z' + inb; }<br \/>\n return inb + inbsuffix;<br \/>\n }<br \/>\n<\/code><\/p>\n<p>Maybe you&#8217;d like to compare and contrast to the <a target=_blank title='Javascript DOM document.querySelector information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_document_queryselector.asp'>document.querySelector<\/a> and class attribute aspects of the &#8220;Simon Says&#8221; game of the recent <a title='Simon Says Game Primer Tutorial' href='#ssgpt'>Simon Says Game Primer Tutorial<\/a> below.<\/p>\n<hr>\n<p id='ssgpt'>Previous relevant <a target=_blank title='Simon Says Game Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/simon-says-game-primer-tutorial\/'>Simon Says Game 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\/doc_qs.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Simon Says Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/simon_says.jpg\" title=\"Simon Says Game Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Simon Says Game Primer Tutorial<\/p><\/div>\n<p>One of the great things about the &#8220;net&#8221; is learning things off other people.  Here at this blog we&#8217;ve mentioned the stupendous <a target=_blank title='Great link' href='http:\/\/www.html5rocks.com\/en\/tutorials\/file\/dndfiles\/'>HTML5 File API<\/a> link we&#8217;ve used a lot for &#8220;shape to upload&#8221; local disk file browsing purposes in so many web applications we&#8217;ve talked about.  So, thanks for that, but that File API brilliance is not all we learnt by putting that logic into play.  We&#8217;ve not up until now, formalized it into a &#8220;proof of concept&#8221; web application, but we&#8217;ve now adapted its &#8230;<\/p>\n<table>\n<tr>\n<th>At <a target=_blank title='Great link' href='http:\/\/www.html5rocks.com\/en\/tutorials\/file\/dndfiles\/'>HTML5 File API<\/a> &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<blockquote cite='http:\/\/www.html5rocks.com\/en\/tutorials\/file\/dndfiles\/'><p>\ndocument.querySelector(&#8216;.readBytesButtons&#8217;).addEventListener(&#8216;click&#8217;, function(evt) {<br \/>\n    if (evt.target.tagName.toLowerCase() == &#8216;button&#8217;) {<br \/>\n      var startByte = evt.target.getAttribute(&#8216;data-startbyte&#8217;);<br \/>\n      var endByte = evt.target.getAttribute(&#8216;data-endbyte&#8217;);<br \/>\n      readBlob(startByte, endByte);<br \/>\n    }<br \/>\n  }, false);\n<\/p><\/blockquote>\n<\/td>\n<\/tr>\n<tr>\n<th>Adapted for a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/doc_qs.html\" title=\"Click picture\">Simon Says<\/a> Game<\/th>\n<\/tr>\n<tr>\n<td>\ndocument.querySelector(&#8216;.classy&#8217;).addEventListener(&#8216;click&#8217;, function(evt) {<br \/>\n    if (evt.target.tagName.toLowerCase() == &#8216;button&#8217;) {<br \/>\n      eval(evt.target.title);<br \/>\n    }<br \/>\n}, false);\n<\/td>\n<\/tr>\n<\/table>\n<p>Let&#8217;s learn a bit more about the crucial <a target=_blank title='Javascript DOM document.querySelector information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_document_queryselector.asp'>document.querySelector<\/a> method &#8230;<\/p>\n<blockquote cite='https:\/\/www.w3schools.com\/jsref\/met_document_queryselector.asp'><p>\nThe querySelector() method returns the first element that matches a specified CSS selector(s) in the document.\n<\/p><\/blockquote>\n<p>For me, and I grant you it might just be me, but it breaks the nexus in my mind that I should always be thinking &#8230;<\/p>\n<ul>\n<li>HTML element <a target=_blank title='HTML ID attribute information from w3schools' href='https:\/\/www.w3schools.com\/html\/html_id.asp'>ID<\/a> attribute is associated with Javascript DOM (action) work &#8230; eg. clicking a button and looking after other event logics<\/li>\n<li>HTML element <a target=_blank title='HTML class attribute information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_class.asp'>class<\/a> attribute is associated with CSS (styling) work<\/li>\n<\/ul>\n<p> &#8230; and not quite &#8220;never the twain shall meet&#8221; because ID CSS is commonly used by us, but generally the above principles hold for us.<\/p>\n<p>The use of the <a target=_blank title='Javascript DOM document.querySelector information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_document_queryselector.asp'>document.querySelector<\/a> method above turns this on its head though, to the extent that with the underlying Simon Says game HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/doc_qs.html_GETME\" title=\"doc_qs.html\">doc_qs.html<\/a> code &#8230;<\/p>\n<ul>\n<li>no HTML elements needed any ID attributes &#8230; and yet &#8230;<\/li>\n<li>HTML button elements with a class are controlled by onclick logic instigated by that right hand Javascript code above &#8230; but it had to be (a little awkwardly, we grant you) arranged that &#8230;<\/li>\n<li>only one HTML button class=&#8217;classy&#8217; exists at any given time to allow that <a target=_blank title='Javascript DOM document.querySelector information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_document_queryselector.asp'>document.querySelector<\/a> methodology to serve its purpose in the Simon Says game (which is just a bit of fun trying to succeed with what Simon Says to turn its underlying table all green)<\/li>\n<\/ul>\n<p>We hope this is of interest to you too, and thanks to <a target=_blank title='Useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/11373841\/make-a-3d-button-with-rounded-edge'>this useful link<\/a> for some CSS ideas for button styling, and <a target=_blank title='30 Funniest Simon Says Ideas' href='https:\/\/playtivities.com\/30-funniest-simon-says-ideas\/'>30 Funniest Simon Says Ideas<\/a> for Simon Says ideas.<\/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='#d43777' onclick='var dv=document.getElementById(\"d43777\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/class\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43777' 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='#d43823' onclick='var dv=document.getElementById(\"d43823\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dom\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43823' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>What do &#8220;Simon Says&#8221; and &#8220;Tic Tac Toe&#8221; have in common, for us today? They&#8217;re both games. Yeh, well &#8230; okay &#8230; but apart from &#8220;They&#8217;re both games&#8221; &#8230; What do &#8220;Simon Says&#8221; and &#8220;Tic Tac Toe&#8221; have in common, &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/tic-tac-toe-class-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":[112,210,281,349,2847,2848,354,367,400,476,477,576,2846,652,861,997,2835,1275,1319],"class_list":["post-43823","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-attribute","tag-class","tag-css","tag-document","tag-document-getelementbyid","tag-document-getelementsbytagname","tag-dom","tag-dropdown","tag-event","tag-game","tag-games-2","tag-html","tag-id","tag-javascript","tag-onclick","tag-programming","tag-queryselector","tag-tic-tac-toe","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43823"}],"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=43823"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43823\/revisions"}],"predecessor-version":[{"id":43836,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43823\/revisions\/43836"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=43823"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=43823"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=43823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}