{"id":41334,"date":"2018-10-18T03:01:31","date_gmt":"2018-10-17T17:01:31","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=41334"},"modified":"2018-10-17T20:06:13","modified_gmt":"2018-10-17T10:06:13","slug":"firefox-scratchpad-javascript-placeholder-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/firefox-scratchpad-javascript-placeholder-tutorial\/","title":{"rendered":"Firefox Scratchpad Javascript Placeholder Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/tictactoe.html?reflexes=y\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Firefox Scratchpad Javascript Placeholder Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/ttt.jpg\" title=\"Firefox Scratchpad Javascript Placeholder Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Firefox Scratchpad Javascript Placeholder Tutorial<\/p><\/div>\n<p>We&#8217;re revisiting the Tic Tac Toe game talked about with <a title='Firefox Scratchpad Javascript Primer Tutorial' href='#fsjpt'>Firefox Scratchpad Javascript Primer Tutorial<\/a> with some changed external Javascript code featuring &#8230;<\/p>\n<ul>\n<li>a new &#8220;Fast Reflexes&#8221; version of game &#8230; that involves &#8230;<\/li>\n<li><a target=_blank title='HTML placeholder attribute information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_input_placeholder.asp'>placeholder<\/a> attribute work &#8230; with &#8230;<\/li>\n<li>textarea element that &#8230;\n<ol>\n<li>looks and acts like a button <font size=1>&#8230; go figure<\/font> &#8230; largely because of &#8230;<\/li>\n<li><a target=_blank title='HTML textarea element readonly property' href='http:\/\/www.w3schools.com\/tags\/att_textarea_readonly.asp'>readonly<\/a> attribute set on &#8230; and &#8230;<\/li>\n<li>gets its background (image) and width and height from the &#8220;other mode of game&#8221; images<\/li>\n<li>derives its font-size as that height from above<\/li>\n<li>cols=1 rows=1<\/li>\n<li>randomly has its placeholder attribute changed<\/li>\n<li>as a user clicks on an &#8220;X&#8221; <i>placeholder<\/i> it gets &#8220;locked in&#8221; as an &#8220;X&#8221; <i>value<\/i> (the setting of which negates <i>placeholder<\/i> usage)<\/li>\n<\/ol>\n<\/li>\n<li>a new <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/tictactoe.html?reflexes=y\" title=\"Click picture\">&#8220;New Fast Reflexes Game&#8221;<\/a> option &#8220;a&#8221; link (that also looks like a button) to reflect this new &#8220;Fast Reflexes&#8221; game version, along with a dropdown to control speed of <i>placeholder<\/i> attribute changes<\/li>\n<\/ul>\n<p>We thought the semi-transparency of the placeholder attribute might help with game design, and here is one thought &#8230; &#8220;locking in&#8221; an answer on clicking (like &#8220;buzzing&#8221;).<\/p>\n<p>Again, you can download Javascript source code and rename to <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\">&#8220;Fast Reflexes&#8221; mode of play changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/tictactoe.js-GETME' title=\"tictactoe.js\">tictactoe.js<\/a> supervised by the puny <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/tictactoe.html_GETME' title=\"tictactoe.html\">tictactoe.html<\/a> as you see fit.<\/p>\n<hr>\n<p id='fsjpt'>Previous relevant <a target=_blank title='Firefox Scratchpad Javascript Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/firefox-scratchpad-javascript-primer-tutorial\/'>Firefox Scratchpad Javascript 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\/wordpress\/tictactoe.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Firefox Scratchpad Javascript Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/justjs.jpeg\" title=\"Firefox Scratchpad Javascript Primer Tutorial\" id='aazxcv'  onmouseover='   this.src=this.src.replace(\".jpg\",\".PNG\").replace(\".png\",\".BMP\").replace(\".gif\",\".JPEG\").replace(\".jpeg\",\".JPG\").replace(\".bmp\",\".GIF\").replace(\".JPG\",\".jpg\").replace(\".GIF\",\".gif\").replace(\".JPEG\",\".jpeg\").replace(\".PNG\",\".png\").replace(\".BMP\",\".bmp\");   ' style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Firefox Scratchpad Javascript Primer Tutorial<\/p><\/div>\n<p>Today&#8217;s <a target=_blank title='click picture' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/tictactoe.html'>tutorial<\/a> looks at the scenario of webpages &#8220;virtually&#8221; just made up of Javascript &#8230; &#8220;virtually&#8221; because we&#8217;ve stopped short of turning this into a bookmarklet.   Today we write the Tic Tac Toe game in Javascript &#8220;virtually&#8221; only.<\/p>\n<p>If you don&#8217;t have a bookmarklet, how do you test Javascript on its own?   Well, you&#8217;ve probably guessed by this blog posting&#8217;s title, that one alternative here is the Firefox browser&#8217;s Scratchpad functionality, available off its Tools menu.<\/p>\n<p>By Scratchpad we do not mean an iPad set aside for your dog to scratch itself on &#8230; but why aren&#8217;t you thinking of the pooch &#8230; where&#8217;s the inventor of &#8220;PoochPad&#8221; or &#8220;itPad&#8221;? &#8230; but rather a good tool to test the workings of your Javascript to validate it and check its workings.<\/p>\n<p>For today&#8217;s tutorial also make use of the Javascript function <a target=_blank title='Javascript function document.createElement() information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_document_createelement.asp'>document.createElement()<\/a> as the way the Javascript gets to create the Tic Tac Toe board (the HTML you have <a target=_blank title='Claytons' href='https:\/\/www.youtube.com\/watch?v=ylH43Tcaj60'>when you aren&#8217;t<\/a> &#8220;really&#8221; &#8220;virtually&#8221; having HTML).<\/p>\n<p>You can download Javascript source code and rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/tictactoe.js_GETME' title=\"tictactoe.js\">tictactoe.js<\/a> supervised by the puny <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/tictactoe.html_GETME' title=\"tictactoe.html\">tictactoe.html<\/a> as you see fit.<\/p>\n<p>Should you find Tac Tac Toe (or even Noughts and Crosses) addictive you should see <a target=_blank title='Wargames' href='http:\/\/www.youtube.com\/watch?v=NHWjlCaIrQo'>this<\/a> &#8230; amazing, really amazing!<\/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='#d10570' onclick='var dv=document.getElementById(\"d10570\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=Firefox\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d10570' 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='#d41334' onclick='var dv=document.getElementById(\"d41334\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/placeholder\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d41334' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re revisiting the Tic Tac Toe game talked about with Firefox Scratchpad Javascript Primer Tutorial with some changed external Javascript code featuring &#8230; a new &#8220;Fast Reflexes&#8221; version of game &#8230; that involves &#8230; placeholder attribute work &#8230; with &#8230; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/firefox-scratchpad-javascript-placeholder-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,1,37],"tags":[354,409,476,576,652,2643,997,2366,1262,1275,1319,1360],"class_list":["post-41334","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-uncategorised","category-tutorials","tag-dom","tag-external-javascript","tag-game","tag-html","tag-javascript","tag-placeholder","tag-programming","tag-readonly","tag-textarea","tag-tic-tac-toe","tag-tutorial","tag-value"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/41334"}],"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=41334"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/41334\/revisions"}],"predecessor-version":[{"id":41341,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/41334\/revisions\/41341"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=41334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=41334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=41334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}