{"id":37967,"date":"2018-05-07T03:01:04","date_gmt":"2018-05-06T17:01:04","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=37967"},"modified":"2018-05-06T21:07:46","modified_gmt":"2018-05-06T11:07:46","slug":"dynamic-javascript-tic-tac-toe-bookmarklet-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/dynamic-javascript-tic-tac-toe-bookmarklet-tutorial\/","title":{"rendered":"Dynamic Javascript Tic Tac Toe Bookmarklet Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/initially_andthen.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Dynamic Javascript Tic Tac Toe Bookmarklet Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/initially_andthen_more.jpg\" title=\"Dynamic Javascript Tic Tac Toe Bookmarklet Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Dynamic Javascript Tic Tac Toe Bookmarklet Tutorial<\/p><\/div>\n<p>We come at improvements to yesterday&#8217;s <a title='Dynamic Javascript Tic Tac Toe Game Tutorial' href='#djtttgt'>Dynamic Javascript Tic Tac Toe Game Tutorial<\/a>&#8216;s Tic Tac Toe game, namely &#8230;<\/p>\n<ul>\n<li>in addition to the Javascript prompt window user entries, the user can now pick squares via &#8230;\n<ol>\n<li>keyboard via the onkeypress event of a briefly showing HTML input type=text element<\/li>\n<li>click\/touch squares<\/li>\n<li>?squares=[SquareNumbersList] relevant to initially_andthen.htm execution method below<\/li>\n<li>Javascript prompt window<\/li>\n<\/ol>\n<\/li>\n<li>initially_andthen.htm <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/initially_andthen.htm\">live run<\/a> way to run &#8230; and additionally, today &#8230; we now have &#8230;<\/li>\n<li>some web browsers will allow the following at the address bar or, much more likely to lead to success is, have the wording of the link below be stored as a bookmarklet (or as bookmark) that you open &#8230;<br \/>\n<code><br \/>\n<a target=_blank title=\"javascript: var tag = document.createElement('script'); tag.src = \"HTTP:\/\/www.rjmprogramming.com.au\/HTMLCSS\/initially_andthen.js?x=f\"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\" href=\"javascript: var tag = document.createElement('script'); tag.src = \"HTTP:\/\/www.rjmprogramming.com.au\/HTMLCSS\/initially_andthen.js?x=f\"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\">javascript: var tag = document.createElement('script'); tag.src = \"HTTP:\/\/www.rjmprogramming.com.au\/HTMLCSS\/initially_andthen.js?x=f\"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);<\/a><br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>Many of the improvements above add a &#8220;type ahead buffer&#8221; aspect to user interaction that a Javascript prompt window is not tolerant of.  Depending on the user interaction required this can be advantageous, or not, in that sometimes you don&#8217;t want a user to be able to type (or click) ahead of seeing a prompt about what the information is.  Remember, though, with VAX\/VMS and unix and linux (and sometimes even DOS) command line desktop application work, type ahead buffers were all the rage to speed up user interactive tasks.<\/p>\n<p>Please try the HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/initially_andthen.html-GETME\" title=\"initially_andthen.htm\">initially_andthen.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/initially_andthen.htm\" title=\"Click picture\">live run<\/a> link for yourself and see how we &#8230;<\/p>\n<ul>\n<li>pared down the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/initially_andthen.html-GETME\" title=\"initially_andthen.htm\">initially_andthen.htm<\/a> considerably &#8230; because we hived off a lot of the logic to &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/initially_andthen.js_GETME\" title=\"initially_andthen.js\">initially_andthen.js<\/a> external Javascript &#8230; facilitating that bookmarklet execution method above<\/li>\n<\/ul>\n<p>Do you remember our series of blog postings about client side web applications not using Javascript starting with <a target=_blank title='Missing Javascript Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/missing-javascript-primer-tutorial\/'>Missing Javascript Primer Tutorial<\/a>?  Today&#8217;s client side bookmarklet concept represents the obverse of this, in that we kick off a web application just using Javascript.<\/p>\n<hr>\n<p id='djtttgt'>Previous relevant <a target=_blank title='Dynamic Javascript Tic Tac Toe Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/dynamic-javascript-tic-tac-toe-game-tutorial\/'>Dynamic Javascript Tic Tac Toe Game 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\/initially_andthen.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Dynamic Javascript Tic Tac Toe Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/initially_andthen.jpg\" title=\"Dynamic Javascript Tic Tac Toe Game Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Dynamic Javascript Tic Tac Toe Game Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Dynamic Javascript and the YouTube Embedded API Tutorial' href='#djyteapit'>Dynamic Javascript and the YouTube Embedded API Tutorial<\/a> got us thinking about dynamic Javascript, and today we put that concept through its paces by writing another incarnation of the <a target=_blank title='Tic Tac Toe blog postings here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=Tic+Tac+Toe'>Tic Tac Toe<\/a> (or Noughts and Crosses) game we&#8217;ve written a few versions of now.  We think this approach of taking a simple concept for a web application and rewriting it in different ways is instructive, and you learn quite a bit doing this, we think.  We think in this respect, though, that because things can be deadends in I.T. you should pick simple concepts as the ones you tackle in this way.  Even so, we find different ways each time to code the logic of Tic Tac Toe, let alone the changes in coding practices we are exploring each time.<\/p>\n<p>Today&#8217;s &#8220;dynamic Javascript&#8221; coding involved the use of the Javascript &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'>setTimeout<\/a>()<br \/>\n<\/code> <\/p>\n<p> &#8230; timer method to give the web application a chance to display the webpage between the &#8220;Javascript writes more dynamic Javascript&#8221; automated additions to the webpage&#8217;s client logic.<\/p>\n<p>You will see, examining the code, that you could have performed the same logic with different approaches.  If so, good, that is you recognising where you can use one technique or another at various places within the web application client logic.  The point is, that you should learn early on that there are very often more than one way to solve any programming problem.  Not always, but often.  Practising lots of different techniques could stand you in good stead when you come across a problem where your new found knowledge fits purposes perfectly.<\/p>\n<p>It&#8217;s not popular in many circles, but we often find Javascript &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank href='http:\/\/www.w3schools.com\/jsref\/jsref_eval.asp' title='Javascript eval'>eval<\/a>()<br \/>\n<\/code><\/p>\n<p> &#8230; invaluable to extend &#8220;the one to many&#8221; Javascript coding logics, but &#8220;eval&#8221; didn&#8217;t feature that way today, as much as it did with yesterday&#8217;s <a title='Dynamic Javascript and the YouTube Embedded API Tutorial' href='#djyteapit'>Dynamic Javascript and the YouTube Embedded API Tutorial<\/a>.<\/p>\n<p>Feel free to try the HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/initially_andthen.html_GETME\" title=\"initially_andthen.html\">initially_andthen.html<\/a>&#8216;s code will be more food for thought, that you can test for yourself at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/initially_andthen.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='djyteapit'>Previous relevant <a target=_blank title='Dynamic Javascript and the YouTube Embedded API Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/dynamic-javascript-and-the-youtube-embedded-api-tutorial\/'>Dynamic Javascript and the YouTube Embedded API 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\/dynamic_js.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Dynamic Javascript and the YouTube Embedded API Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/msgtw.jpg\" title=\"Dynamic Javascript and the YouTube Embedded API Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Dynamic Javascript and the YouTube Embedded API Tutorial<\/p><\/div>\n<p>Webpages without Javascript are generally pretty static and boring.  Javascript is that dynamic client addition to webpage functionality, but perhaps you only think of it as that statically written part of the webpage unable to be reloaded into effect after that initial webpage load.  Well, that is not taking into account Javascript such as &#8230;<\/p>\n<p><code><br \/>\n&lt;script&gt;<br \/>\n      var tag = document.<a target=_blank title='Javascript createElement method information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_document_createelement.asp'>createElement<\/a>('script');<br \/>\n      tag.src = \"https:\/\/www.youtube.com\/iframe_api\";<br \/>\n      var firstScriptTag = document.getElementsByTagName('script')[0];<br \/>\n      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);<br \/>\n&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; taken from the excellent <a target=_blank title='YouTube IFrame Player API' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>YouTube IFrame Player API<\/a> we really like to use around here to embed and control <a target=_blank title='YouTube' href='https:\/\/youtube.com'>YouTube<\/a> videos embedded into an HTML <a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> element.<\/p>\n<p>In today&#8217;s small extension of that we load nine such HTML iframe embedded YouTube videos into a 3&#215;3 grid.  We resisted the previous <a target=_blank title='External Javascript Genericity Follow Up Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/external-javascript-genericity-follow-up-tutorial\/'>Brady Bunch usage<\/a> of such an arrangement (perhaps you&#8217;ll be sad to hear?!) in favour of showing you a &#8220;collage&#8221; of video snippets from one of my favourite films ever, <a target=_blank title='Mr Smith Goes to Washington' href='https:\/\/en.wikipedia.org\/wiki\/Mr._Smith_Goes_to_Washington'>Mr Smith Goes to Washington<\/a>.<\/p>\n<p>We hope the HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dynamic_js.html_GETME\" title=\"dynamic_js.html\">dynamic_js.html<\/a>&#8216;s code will be food for thought, that you can test for yourself at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dynamic_js.html\" title=\"Click picture\">live run<\/a> link.<\/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='#d37921' onclick='var dv=document.getElementById(\"d37921\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d37921' 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='#d37945' onclick='var dv=document.getElementById(\"d37945\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d37945' 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='#d37967' onclick='var dv=document.getElementById(\"d37967\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/bookmarklet\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d37967' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We come at improvements to yesterday&#8217;s Dynamic Javascript Tic Tac Toe Game Tutorial&#8216;s Tic Tac Toe game, namely &#8230; in addition to the Javascript prompt window user entries, the user can now pick squares via &#8230; keyboard via the onkeypress &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/dynamic-javascript-tic-tac-toe-bookmarklet-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,37],"tags":[2541,157,2539,354,1683,399,476,477,576,652,2540,997,1105,1126,1319,2542,1418],"class_list":["post-37967","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-bookmark","tag-bookmarklet","tag-createelement","tag-dom","tag-dynamic","tag-eval","tag-game","tag-games-2","tag-html","tag-javascript","tag-load","tag-programming","tag-script","tag-settimeout","tag-tutorial","tag-type-ahead-buffer","tag-webpage"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/37967"}],"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=37967"}],"version-history":[{"count":3,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/37967\/revisions"}],"predecessor-version":[{"id":37970,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/37967\/revisions\/37970"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=37967"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=37967"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=37967"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}