{"id":20304,"date":"2016-02-23T03:01:55","date_gmt":"2016-02-22T17:01:55","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=20304"},"modified":"2016-02-28T12:17:52","modified_gmt":"2016-02-28T02:17:52","slug":"php-themed-supervision-fifth-genericization-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/php-themed-supervision-fifth-genericization-tutorial\/","title":{"rendered":"PHP Themed Supervision Fifth Genericization Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"PHP Themed Supervision Fifth Genericization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle-----interest.jpg\" title=\"PHP Themed Supervision Fifth Genericization Tutorial\"  \/><\/a><p class=\"wp-caption-text\">PHP Themed Supervision Fifth Genericization Tutorial<\/p><\/div>\n<p>More than a week ago, now, we started off with <a target=_blank title='HTML\/Javascript Themed Supervision Primer Tutorial' href='#hjtspt'>HTML\/Javascript Themed Supervision Primer Tutorial<\/a> having a pretty hardcoded feel to it, as a web application gathering together other web applications under the concept of &#8220;ESL Ideas&#8221;.  Then four days ago we started on our &#8220;genericization&#8221; drive involving the introduction of external Javascript and the address bar URL GET parameters, as dynamic controllers of web application content.<\/p>\n<p>Then three days ago on the continuation of our &#8220;genericization&#8221; drive we introduced some <i><a target=_blank title='Javascript DOM document.write method information from wschools' href='http:\/\/www.w3schools.com\/jsref\/met_doc_write.asp'>document.write<\/a>(<a target=_blank title='Javascript prompt window information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_prompt.asp'>prompt<\/a>([wording],[default]));<\/i> inspired web interactive functionality.<\/p>\n<p>Then two days ago on the continuation of our &#8220;genericization&#8221; drive, we were still only involving client side HTML and Javascript and CSS, and we introduced some HTML <i><a target=_blank title='Javascript DOM document.write method information from wschools' href='http:\/\/www.w3schools.com\/html\/html_forms.asp'>form<\/a><\/i> inspired web interactive functionality, using interim HTML input type=button click functionality to send messages internally back to the same HTML source code living within the parent web page within a child HTML iframe element, and introducing new callback functionality to be able to turn its parent&#8217;s cell content into the type of content &#8220;looking&#8221; (but &#8220;actually&#8221; slightly different) to what we&#8217;d been getting used to in earlier incarnations of the HTML and Javascript and CSS for this series of &#8220;ESL Ideas&#8221; blog postings.<\/p>\n<p>Yesterday we embarked on our PHP server side journey aspects to the genericization process when we presented <a target=_blank title='PHP Themed Supervision Fourth Genericization Tutorial' href='#ptsfgt'>PHP Themed Supervision Fourth Genericization Tutorial<\/a> as shown below, highlighting the great features of the HTML form method=post posting (perhaps large amounts of) data to a serverside language, ours here at our Apache web server being PHP.<\/p>\n<p>And so we come to today, and we&#8217;re showing PHP&#8217;s talent for dynamic modular development.  Let me explain.  We identified the biggest bugbear with the &#8220;form mode&#8221; information gathering is the filling in of URLs, so perhaps it would be good to help out this process, at least with regard to WordPress Blog Posting URLs, and lobbed onto the thought of channelling what <a target=_blank title='tutorial_options.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/tutorial_options.php----GETME'>tutorial_options.php<\/a> does in <a target=_blank title='Landing Page Mobile Phone Crontab Curl Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/landing-page-mobile-phone-crontab-curl-tutorial\/'>Landing Page Mobile Phone Crontab Curl Tutorial<\/a>.  It gleans information about RJM Programming Blog Posting URLs from corresponding MySql databases, and some crontab\/curl dynamic &#8220;cc&#8221; magic turns this into some useful dropdown functionality on our <a target=_blank title='Landing Page' href='http:\/\/www.rjmprogramming.com.au\/index.html'>Landing Page&#8217;s Iframe<\/a>.  Why reinvent the wheel?  Why not take most of that good functionality and &#8220;appropriate&#8221; it into our current work.  For instance, a few lines of PHP code like &#8230;<\/p>\n<p><code><br \/>\n$selbit=\"\";<br \/>\n $lpage=@file_get_contents(\"http:\/\/www.rjmprogramming.com.au\/Welcome.html\");<br \/>\n $lbits=explode(\"&lt;select\", str_replace(\"&lt;\/select\", \"&lt;select\", $lpage));<br \/>\n if (sizeof($lbits) &gt; 1) {<br \/>\n  $selbit=\"&nbsp;&nbsp;&lt;select\" . $lbits[sizeof($lbits) <b>- 2<\/b>] . \"&lt;\/select&gt;\";<br \/>\n }<br \/>\n<\/code><\/p>\n<p> &#8230; can have an up to date and very useful dropdown (the <b>last<\/b> such dropdown in whatever HTML you use as your starting point) of Blog Postings placed into our &#8220;ESL Ideas&#8221; &#8220;form interactive&#8221; and &#8220;post interactive&#8221; scenarios to aid with collecting some RJM Programming WordPress Blog Posting URL details via the use of the PHP <i>$selbit<\/i> variable above.  Does it feel a bit like &#8220;local home grown&#8221; data scraping?  The rest of what we do today is to add three new buttons for each of the 8=(9 &#8211; 1) relevant cell &#8220;web application&#8221; members to map onto them, optionally, what was selected in this dropdown, placed the once up the top near the theme HTML input type=text element.  On clicking a relevant such button the dropdown&#8217;s URLs and label get populated into the relevant fields, saving heaps of time, and avoiding some wrong keystrokes, we hope.<\/p>\n<p>Recap time &#8230; <font size=1>hats to the left of me, <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=8StG4fFWHqg'>jokers to the right<\/a><\/font>.  Take a skeg at our newer PHP source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.php-GETME\" title='middle_interest.php'>middle_interest.php<\/a> (changed from before as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.php-GETME\" title='middle_interest.php'>this link<\/a>).  Once again, have a look at our HTML and Javascript and CSS programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html-----GETME\" title='middle_interest.html'>middle_interest.html<\/a> (changed from before as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html-----GETME\" title='middle_interest.html'>this link<\/a>) supervising the external Javascript you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.js--GETME\" title='middle_interest.js'>middle_interest.js<\/a> (unchanged from yesterday) and\/or try a &#8230;<\/p>\n<ul>\n<li>old hardcoded <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.htm\" title='click picture'>live run<\/a><\/li>\n<li>new nuanced look via programmer document.head.innerHTML HTML script tag  <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html\" title='click picture'>live run<\/a> &#8230; note the spelling of first buttons in each cell (the dropdown of which allows you to choose two days ago&#8217;s &#8220;interactive&#8221; mode of use or yesterday&#8217;s &#8220;form interactive&#8221; mode of use or today&#8217;s &#8220;post interactive&#8221; mode of use, as required)<\/li>\n<li>user controlled live run, adding onto programmer document.head.innerHTML HTML script tag, bringing extra options from cell[2,3] up into cell[1,1] &#8230; via URL &#8230;<br \/>\n<code><a style='text-decoration:none;' target=_blank title='User controlled example (adds to script tags)' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html?theme=My%20ESL&#038;oc1_1_=ITblog\/htmljavascript-hearing-and-listening-primer-tutorial\/&#038;te1_1_=HTMLCSS\/listen_to.html&#038;bv1_1_=Hearing,%20Listening&#038;oc2_1_=ITblog\/english-learning-listening-class-love-at-first-bite\/&#038;te2_1_=TESOL\/ListeningTask2\/&#038;bv2_1_=Love%20at%20First%20Bite&#038;oc3_1_=ITblog\/english-learning-listening-class-tapioca-five-ways\/&#038;te3_1_=TESOL\/ListeningTask\/&#038;bv3_1_=Tapioca%20Five%20Ways&#038;oc4_1_=ITblog\/php-pictogram-word-decoding-game-primer-tutorial\/&#038;te4_1_=PHP\/decodepictowords.php&#038;bv4_1_=Pictogram%20Decode&#038;oc5_1_=ITblog\/past-present-tense\/&#038;te5_1_=ITblog\/past-present-tense\/%23content&#038;bv5_1_=Past%20and%20Present%20Tense&#038;oc6_1_=ITblog\/mixed-up-song-lyrics-game-primer-tutorial\/&#038;te6_1_=HTMLCSS\/hart_via_ella.html&#038;bv6_1_=Song%20Lyrics'>http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html?theme=My%20ESL&oc1_1_=ITblog\/htmljavascript-hearing-and-listening-primer-tutorial\/&te1_1_=HTMLCSS\/listen_to.html&bv1_1_=Hearing,%20Listening&oc2_1_=ITblog\/english-learning-listening-class-love-at-first-bite\/&te2_1_=TESOL\/ListeningTask2\/&bv2_1_=Love%20at%20First%20Bite&oc3_1_=ITblog\/english-learning-listening-class-tapioca-five-ways\/&te3_1_=TESOL\/ListeningTask\/&bv3_1_=Tapioca%20Five%20Ways&oc4_1_=ITblog\/php-pictogram-word-decoding-game-primer-tutorial\/&te4_1_=PHP\/decodepictowords.php&bv4_1_=Pictogram%20Decode&oc5_1_=ITblog\/past-present-tense\/&te5_1_=ITblog\/past-present-tense\/%23content&bv5_1_=Past%20and%20Present%20Tense&oc6_1_=ITblog\/mixed-up-song-lyrics-game-primer-tutorial\/&te6_1_=HTMLCSS\/hart_via_ella.html&bv6_1_=Song%20Lyrics<\/a><\/code><br \/>\n&#8230; or click picture link below &#8230;<br \/>\n<a target=_blank title='User controlled example (adds to script tags)' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html?theme=My%20ESL&#038;oc1_1_=ITblog\/htmljavascript-hearing-and-listening-primer-tutorial\/&#038;te1_1_=HTMLCSS\/listen_to.html&#038;bv1_1_=Hearing,%20Listening&#038;oc2_1_=ITblog\/english-learning-listening-class-love-at-first-bite\/&#038;te2_1_=TESOL\/ListeningTask2\/&#038;bv2_1_=Love%20at%20First%20Bite&#038;oc3_1_=ITblog\/english-learning-listening-class-tapioca-five-ways\/&#038;te3_1_=TESOL\/ListeningTask\/&#038;bv3_1_=Tapioca%20Five%20Ways&#038;oc4_1_=ITblog\/php-pictogram-word-decoding-game-primer-tutorial\/&#038;te4_1_=PHP\/decodepictowords.php&#038;bv4_1_=Pictogram%20Decode&#038;oc5_1_=ITblog\/past-present-tense\/&#038;te5_1_=ITblog\/past-present-tense\/%23content&#038;bv5_1_=Past%20and%20Present%20Tense&#038;oc6_1_=ITblog\/mixed-up-song-lyrics-game-primer-tutorial\/&#038;te6_1_=HTMLCSS\/hart_via_ella.html&#038;bv6_1_=Song%20Lyrics'><img src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle-interest.jpg' title='How this looks'><\/img><\/a><\/li>\n<li>three days ago&#8217;s interactive <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html?ask=y\" title='click picture'>live run<\/a> (the same as if the dropdown was set to the &#8220;interactive&#8221; mode of use)<\/li>\n<li>two days ago&#8217;s form (cell) interactive <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html?getask=y\" title='click picture'>live run<\/a> (the same as if the dropdown was set to the &#8220;form interactive&#8221; mode of use) &#8230; note the new RJM Programming blog posting dropdown<\/li>\n<li>yesterday&#8217;s (total) form interactive <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html?getask=y&#038;viapost=y\" title='click picture'>live run<\/a> (the same as if the dropdown was set to the &#8220;post interactive&#8221; mode of use) &#8230; note the new RJM Programming blog posting dropdown<\/li>\n<\/ul>\n<hr>\n<p id='ptsfgt'>Previous relevant <a target=_blank title='PHP Themed Supervision Fourth Genericization Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-themed-supervision-fourth-genericization-tutorial\/'>PHP Themed Supervision Fourth Genericization 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\/middle_interest.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"PHP Themed Supervision Fourth Genericization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle----interest.jpg\" title=\"PHP Themed Supervision Fourth Genericization Tutorial\"  \/><\/a><p class=\"wp-caption-text\">PHP Themed Supervision Fourth Genericization Tutorial<\/p><\/div>\n<p>More than a week ago, now, we started off with <a target=_blank title='HTML\/Javascript Themed Supervision Primer Tutorial' href='#hjtspt'>HTML\/Javascript Themed Supervision Primer Tutorial<\/a> having a pretty hardcoded feel to it, as a web application gathering together other web applications under the concept of &#8220;ESL Ideas&#8221;.  Then three days ago we started on our &#8220;genericization&#8221; drive involving the introduction of external Javascript and the address bar URL GET parameters, as dynamic controllers of web application content.<\/p>\n<p>Then two days ago on the continuation of our &#8220;genericization&#8221; drive we introduced some <i><a target=_blank title='Javascript DOM document.write method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_doc_write.asp'>document.write<\/a>(<a target=_blank title='Javascript prompt window information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_prompt.asp'>prompt<\/a>([wording],[default]));<\/i> inspired web interactive functionality.<\/p>\n<p>Then yesterday on the continuation of our &#8220;genericization&#8221; drive, we were still only involving client side HTML and Javascript and CSS, and we introduced some HTML <i><a target=_blank title='Javascript DOM document.write method information from wschools' href='http:\/\/www.w3schools.com\/html\/html_forms.asp'>form<\/a><\/i> inspired web interactive functionality, using interim HTML input type=button click functionality to send messages internally back to the same HTML source code living within the parent web pahe within a child HTML iframe element, and introducing new callback functionality to be able to turn its parent&#8217;s cell content into the type of content &#8220;looking&#8221; (bot &#8220;acrually&#8221; slightly different) to what we&#8217;d been getting used to in earlier incarnations of the HTML and Javascript and CSS for this series of &#8220;ESL Ideas&#8221; blog postings.<\/p>\n<p>And so we come to today, and, we embark on our PHP server side journey aspects to the genericization process.<\/p>\n<p>Looks-wise very little changes with the introduction of PHP.  The look changes just with &#8230;<\/p>\n<ol>\n<li>one new dropdown option called <i>&#8220;Post Mode Asking&#8221;<\/i> &#8230; which is just like yesterday&#8217;s <i>&#8220;Form Mode Asking&#8221;<\/i> (as you can read about at <a title='HTML Themed Supervision Third Genericization Tutorial' href='#htstgt'>HTML Themed Supervision Third Genericization Tutorial<\/a> as shown below) &#8230; that, if selected, brings on &#8230;<\/li>\n<li>the addition of one new HTML input type=submit button labelled &#8220;All&#8221; calling on the HTML form submit logic<\/li>\n<\/ol>\n<p>On clicking\/touching that &#8220;All&#8221; HTML form submit button we navigate to our new PHP via an HTML form method=POST &#8230; so that lots of data can be handled for &#8230;<\/p>\n<blockquote>\n<ul>\n<li>HTML input type=url and type=text to gather up the 72 = ((3 buttons x (2 url + 1 text) data items per button) x ((9 &#8211; 1) cells)) detail data sets<\/li>\n<li>HTML type=text &#8220;theme&#8221; and two url data descriptor data sets<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; we first alluded to yesterday.<\/p>\n<p>So what is the role of this new PHP in this first incarnation of its use?  This is where PHP meets (external) Javascript, where server meets client &#8230; bienvenuto &#8230; in that those 9 ((HTML td element) cell) external Javascript &#8220;calls&#8221; in the HTML are amended by the PHP by rewriting them and issues with the &#8220;theme&#8221; and the mode of URL to use, all user controllable as content via what they filled out in the HTML form back at HTML being sent to the PHP which clones the HTML (by literally starting with the HTML, as is) and rewriting the bits that should change according to what the user entered into the HTML form and posted (method=post).<\/p>\n<p>But this is not the extent of PHP&#8217;s &#8220;charms&#8221; in such a scenario.  Later we show more.<\/p>\n<p>So let&#8217;s recap on where we&#8217;ve reached today.  We&#8217;ve introduced PHP &#8230; yay!  Take a geek at our new PHP source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.php_GETME\" title='middle_interest.php'>middle_interest.php<\/a> &#8230; if that&#8217;s how you &#8220;sausage roll&#8221;.  Once again, have a look at our HTML and Javascript and CSS programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html----GETME\" title='middle_interest.html'>middle_interest.html<\/a> (changed from before as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html----GETME\" title='middle_interest.html'>this link<\/a>) supervising the external Javascript you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.js--GETME\" title='middle_interest.js'>middle_interest.js<\/a> (unchanged from yesterday) and\/or try a &#8230;<\/p>\n<ul>\n<li>old hardcoded <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.htm\" title='click picture'>live run<\/a><\/li>\n<li>new nuanced look via programmer document.head.innerHTML HTML script tag  <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html\" title='click picture'>live run<\/a> &#8230; note the spelling of first buttons in each cell (the dropdown of which allows you to choose two days ago&#8217;s &#8220;interactive&#8221; mode of use or yesterday&#8217;s &#8220;form interactive&#8221; mode of use or today&#8217;s &#8220;post interactive&#8221; mode of use, as required)<\/li>\n<li>user controlled live run, adding onto programmer document.head.innerHTML HTML script tag, bringing extra options from cell[2,3] up into cell[1,1] &#8230; via URL &#8230;<br \/>\n<code><a style='text-decoration:none;' target=_blank title='User controlled example (adds to script tags)' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html?theme=My%20ESL&#038;oc1_1_=ITblog\/htmljavascript-hearing-and-listening-primer-tutorial\/&#038;te1_1_=HTMLCSS\/listen_to.html&#038;bv1_1_=Hearing,%20Listening&#038;oc2_1_=ITblog\/english-learning-listening-class-love-at-first-bite\/&#038;te2_1_=TESOL\/ListeningTask2\/&#038;bv2_1_=Love%20at%20First%20Bite&#038;oc3_1_=ITblog\/english-learning-listening-class-tapioca-five-ways\/&#038;te3_1_=TESOL\/ListeningTask\/&#038;bv3_1_=Tapioca%20Five%20Ways&#038;oc4_1_=ITblog\/php-pictogram-word-decoding-game-primer-tutorial\/&#038;te4_1_=PHP\/decodepictowords.php&#038;bv4_1_=Pictogram%20Decode&#038;oc5_1_=ITblog\/past-present-tense\/&#038;te5_1_=ITblog\/past-present-tense\/%23content&#038;bv5_1_=Past%20and%20Present%20Tense&#038;oc6_1_=ITblog\/mixed-up-song-lyrics-game-primer-tutorial\/&#038;te6_1_=HTMLCSS\/hart_via_ella.html&#038;bv6_1_=Song%20Lyrics'>http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html?theme=My%20ESL&oc1_1_=ITblog\/htmljavascript-hearing-and-listening-primer-tutorial\/&te1_1_=HTMLCSS\/listen_to.html&bv1_1_=Hearing,%20Listening&oc2_1_=ITblog\/english-learning-listening-class-love-at-first-bite\/&te2_1_=TESOL\/ListeningTask2\/&bv2_1_=Love%20at%20First%20Bite&oc3_1_=ITblog\/english-learning-listening-class-tapioca-five-ways\/&te3_1_=TESOL\/ListeningTask\/&bv3_1_=Tapioca%20Five%20Ways&oc4_1_=ITblog\/php-pictogram-word-decoding-game-primer-tutorial\/&te4_1_=PHP\/decodepictowords.php&bv4_1_=Pictogram%20Decode&oc5_1_=ITblog\/past-present-tense\/&te5_1_=ITblog\/past-present-tense\/%23content&bv5_1_=Past%20and%20Present%20Tense&oc6_1_=ITblog\/mixed-up-song-lyrics-game-primer-tutorial\/&te6_1_=HTMLCSS\/hart_via_ella.html&bv6_1_=Song%20Lyrics<\/a><\/code><br \/>\n&#8230; or click picture link below &#8230;<br \/>\n<a target=_blank title='User controlled example (adds to script tags)' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html?theme=My%20ESL&#038;oc1_1_=ITblog\/htmljavascript-hearing-and-listening-primer-tutorial\/&#038;te1_1_=HTMLCSS\/listen_to.html&#038;bv1_1_=Hearing,%20Listening&#038;oc2_1_=ITblog\/english-learning-listening-class-love-at-first-bite\/&#038;te2_1_=TESOL\/ListeningTask2\/&#038;bv2_1_=Love%20at%20First%20Bite&#038;oc3_1_=ITblog\/english-learning-listening-class-tapioca-five-ways\/&#038;te3_1_=TESOL\/ListeningTask\/&#038;bv3_1_=Tapioca%20Five%20Ways&#038;oc4_1_=ITblog\/php-pictogram-word-decoding-game-primer-tutorial\/&#038;te4_1_=PHP\/decodepictowords.php&#038;bv4_1_=Pictogram%20Decode&#038;oc5_1_=ITblog\/past-present-tense\/&#038;te5_1_=ITblog\/past-present-tense\/%23content&#038;bv5_1_=Past%20and%20Present%20Tense&#038;oc6_1_=ITblog\/mixed-up-song-lyrics-game-primer-tutorial\/&#038;te6_1_=HTMLCSS\/hart_via_ella.html&#038;bv6_1_=Song%20Lyrics'><img src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle-interest.jpg' title='How this looks'><\/img><\/a><\/li>\n<li>two days ago&#8217;s interactive <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html?ask=y\" title='click picture'>live run<\/a> (the same as if the dropdown was set to the &#8220;interactive&#8221; mode of use)<\/li>\n<li>yesterday&#8217;s form (cell) interactive <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html?getask=y\" title='click picture'>live run<\/a> (the same as if the dropdown was set to the &#8220;form interactive&#8221; mode of use)<\/li>\n<li>today&#8217;s (total) form interactive <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html?getask=y&#038;viapost=y\" title='click picture'>live run<\/a> (the same as if the dropdown was set to the &#8220;post interactive&#8221; mode of use)<\/li>\n<\/ul>\n<hr>\n<p id='htstgt'>Previous relevant <a target=_blank title='HTML Themed Supervision Third Genericization Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-themed-supervision-third-genericization-tutorial\/'>HTML Themed Supervision Third Genericization 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\/middle_interest.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Themed Supervision Third Genericization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle---interest.jpg\" title=\"HTML Themed Supervision Third Genericization Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML Themed Supervision Third Genericization Tutorial<\/p><\/div>\n<p>Quite a few days ago, now, we left off with <a target=_blank title='HTML\/Javascript Themed Supervision Primer Tutorial' href='#hjtspt'>HTML\/Javascript Themed Supervision Primer Tutorial<\/a> having a pretty hardcoded feel to it, as a web application gathering together other web applications under the concept of &#8220;ESL Ideas&#8221;.  Then two days ago we started on our &#8220;genericization&#8221; drive involving the introduction of external Javascript and the address bar URL GET parameters, as dynamic controllers of web application content.<\/p>\n<p>Then yesterday on the continuation of our &#8220;genericization&#8221; drive we introduced some <i><a target=_blank title='Javascript DOM document.write method information from wschools' href='http:\/\/www.w3schools.com\/jsref\/met_doc_write.asp'>document.write<\/a>(<a target=_blank title='Javascript prompt window information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_prompt.asp'>prompt<\/a>([wording],[default]));<\/i> inspired web interactive functionality.<\/p>\n<p>And so we come to today, and, even unexpectedly for us, there is more to do just within the realms of client side HTML, Javascript and CSS code &#8230; and so we find ourselves in the <a target=_blank title=\"but there's more\" href=\"http:\/\/www.youtube.com\/watch?v=iiATDMHU7gc\">&#8220;but there&#8217;s more&#8221;<\/a> syndrome of there &#8230; well &#8230; being more.<\/p>\n<p>Today we show interactivity involving an HTML form full of &#8230;<\/p>\n<ul>\n<li>HTML input type=url and type=text to gather up the 72 = ((3 buttons x (2 url + 1 text) data items per button) x ((9 &#8211; 1) cells)) detail data sets<\/li>\n<li>HTML type=text &#8220;theme&#8221; and two url data descriptor data sets<\/li>\n<\/ul>\n<p>&#8230; that is clearly going to overspill the address bar URL (ie. PHP $_GET[]) length restrictions.  <i>&#8220;So why isn&#8217;t this the day for the PHP to come into play?&#8221;<\/i>  Well, we have a natural way of breaking this data up into 8 cell parts, that each will not overspill the address bar URL (ie. PHP $_GET[]) length restrictions, and so it behoves us to show you &#8230; <font size=1>cuz that&#8217;s the kind of peep holes weez R guv&#8217;<\/font> &#8230; a method for &#8220;form interactive usage&#8221; (we use <i>Form Mode Asking<\/i> on the dropdown) of &#8230; <\/p>\n<ul>\n<li>adding extra &#8220;intermediate&#8221; HTML input type=button with no &#8220;name&#8221; properties &#8230; so they do not pass to anything on the HTML form submission logic &#8230; that construct a simulated address bar URL (ie. PHP $_GET[]) calling this same HTML, and then having that same HTML callback logic recognize this unique set of circumstances &#8230; in &#8230;<\/li>\n<li>an HTML iframe element within the <i>top.document<\/i> object (hence all the changes of &#8220;document.get(blah blah)&#8221; to &#8220;top.document.get(blah blah)&#8221; in the HTML code, the changes for which you can see later, below) &#8230; and &#8230;<\/li>\n<li>use Javascript DOM techniques (in this same HTML software&#8217;s guise as being a child in an iframe, at its <i>callback check logic<\/i>) to transform any one (parent (ie. <i>top.document<\/i>)) cell that had one of these aforesaid mentioned HTML input type=button elements clicked, transforming the HTML <i>td<\/i> (cell) element <i>innerHTML<\/i> to revert back to the HTML (input type=)button element look you&#8217;d have got used to in the preceding blog postings of this series &#8230; <i>&#8220;why not continue on with the HTML button element usage?&#8221;<\/i> &#8230; they submit to the HTML form element, and we do not want that to happen<\/li>\n<\/ul>\n<p>You might well ask, if this is a bit new to you &#8230; &#8220;what is an example of <i>callback check logic<\/i> for the URL (ie. PHP $_GET[] (but in HTML))?&#8221; &#8230; well, to us (and it may well look totally different to others), such code looks like &#8230;<\/p>\n<p><code><br \/>\n var gw=location.search.split('getask=')[1] ? location.search.split('getask=')[1].split('&')[0] : ' ';<br \/>\n<\/code><\/p>\n<p>&#8230; where Javascript var<font size=1>iable<\/font> &#8220;gw&#8221; ends up as one space if the HTML mode of use is <b>not<\/b> today&#8217;s new &#8220;form interactive usage&#8221; (we use <i>Form Mode Asking<\/i> on the dropdown).  A really big strength of such logic is that it can sit anywhere in the HTML&#8217;s internal and\/or external Javascript, and make sense before, during or after the <i>[top.]document.body<\/i> &#8220;onload&#8221; event &#8230; so is pretty useful really.<\/p>\n<p>So here&#8217;s where we&#8217;ve reached today.  Still no PHP.  Once again, have a look at our HTML and Javascript and CSS programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html---GETME\" title='middle_interest.html'>middle_interest.html<\/a> (changed from before as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html---GETME\" title='middle_interest.html'>this link<\/a>) supervising the external Javascript you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.js--GETME\" title='middle_interest.js'>middle_interest.js<\/a> (changed from before as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.js--GETME\" title='middle_interest.js'>this link<\/a>) and\/or try a &#8230;<\/p>\n<ul>\n<li>old hardcoded <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.htm\" title='click picture'>live run<\/a><\/li>\n<li>new nuanced look via programmer document.head.innerHTML HTML script tag  <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html\" title='click picture'>live run<\/a> &#8230; note the spelling of first buttons in each cell (the dropdown of which allows you to choose yesterday&#8217;s &#8220;interactive&#8221; mode of use or today&#8217;s &#8220;form interactive&#8221; mode of use, as required)<\/li>\n<li>user controlled live run, adding onto programmer document.head.innerHTML HTML script tag, bringing extra options from cell[2,3] up into cell[1,1] &#8230; via URL &#8230;<br \/>\n<code><a style='text-decoration:none;' target=_blank title='User controlled example (adds to script tags)' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html?theme=My%20ESL&#038;oc1_1_=ITblog\/htmljavascript-hearing-and-listening-primer-tutorial\/&#038;te1_1_=HTMLCSS\/listen_to.html&#038;bv1_1_=Hearing,%20Listening&#038;oc2_1_=ITblog\/english-learning-listening-class-love-at-first-bite\/&#038;te2_1_=TESOL\/ListeningTask2\/&#038;bv2_1_=Love%20at%20First%20Bite&#038;oc3_1_=ITblog\/english-learning-listening-class-tapioca-five-ways\/&#038;te3_1_=TESOL\/ListeningTask\/&#038;bv3_1_=Tapioca%20Five%20Ways&#038;oc4_1_=ITblog\/php-pictogram-word-decoding-game-primer-tutorial\/&#038;te4_1_=PHP\/decodepictowords.php&#038;bv4_1_=Pictogram%20Decode&#038;oc5_1_=ITblog\/past-present-tense\/&#038;te5_1_=ITblog\/past-present-tense\/%23content&#038;bv5_1_=Past%20and%20Present%20Tense&#038;oc6_1_=ITblog\/mixed-up-song-lyrics-game-primer-tutorial\/&#038;te6_1_=HTMLCSS\/hart_via_ella.html&#038;bv6_1_=Song%20Lyrics'>http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html?theme=My%20ESL&oc1_1_=ITblog\/htmljavascript-hearing-and-listening-primer-tutorial\/&te1_1_=HTMLCSS\/listen_to.html&bv1_1_=Hearing,%20Listening&oc2_1_=ITblog\/english-learning-listening-class-love-at-first-bite\/&te2_1_=TESOL\/ListeningTask2\/&bv2_1_=Love%20at%20First%20Bite&oc3_1_=ITblog\/english-learning-listening-class-tapioca-five-ways\/&te3_1_=TESOL\/ListeningTask\/&bv3_1_=Tapioca%20Five%20Ways&oc4_1_=ITblog\/php-pictogram-word-decoding-game-primer-tutorial\/&te4_1_=PHP\/decodepictowords.php&bv4_1_=Pictogram%20Decode&oc5_1_=ITblog\/past-present-tense\/&te5_1_=ITblog\/past-present-tense\/%23content&bv5_1_=Past%20and%20Present%20Tense&oc6_1_=ITblog\/mixed-up-song-lyrics-game-primer-tutorial\/&te6_1_=HTMLCSS\/hart_via_ella.html&bv6_1_=Song%20Lyrics<\/a><\/code><br \/>\n&#8230; or click picture link below &#8230;<br \/>\n<a target=_blank title='User controlled example (adds to script tags)' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html?theme=My%20ESL&#038;oc1_1_=ITblog\/htmljavascript-hearing-and-listening-primer-tutorial\/&#038;te1_1_=HTMLCSS\/listen_to.html&#038;bv1_1_=Hearing,%20Listening&#038;oc2_1_=ITblog\/english-learning-listening-class-love-at-first-bite\/&#038;te2_1_=TESOL\/ListeningTask2\/&#038;bv2_1_=Love%20at%20First%20Bite&#038;oc3_1_=ITblog\/english-learning-listening-class-tapioca-five-ways\/&#038;te3_1_=TESOL\/ListeningTask\/&#038;bv3_1_=Tapioca%20Five%20Ways&#038;oc4_1_=ITblog\/php-pictogram-word-decoding-game-primer-tutorial\/&#038;te4_1_=PHP\/decodepictowords.php&#038;bv4_1_=Pictogram%20Decode&#038;oc5_1_=ITblog\/past-present-tense\/&#038;te5_1_=ITblog\/past-present-tense\/%23content&#038;bv5_1_=Past%20and%20Present%20Tense&#038;oc6_1_=ITblog\/mixed-up-song-lyrics-game-primer-tutorial\/&#038;te6_1_=HTMLCSS\/hart_via_ella.html&#038;bv6_1_=Song%20Lyrics'><img src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle-interest.jpg' title='How this looks'><\/img><\/a><\/li>\n<li>yesterday&#8217;s interactive <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html?ask=y\" title='click picture'>live run<\/a> (the same as if the dropdown was set to the &#8220;interactive&#8221; mode of use)<\/li>\n<li>today&#8217;s form interactive <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html?getask=y\" title='click picture'>live run<\/a> (the same as if the dropdown was set to the &#8220;form interactive&#8221; mode of use)<\/li>\n<\/ul>\n<p>In the future, the external Javascript and a new PHP idea will combine for more future genericization ideas on this project, but for now there is plenty to consider just on the web application client side of life, above.<\/p>\n<hr>\n<p id='htssgt'>Previous relevant <a target=_blank title='HTML Themed Supervision Second Genericization Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-themed-supervision-second-genericization-tutorial\/'>HTML Themed Supervision Second Genericization 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\/middle_interest.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Themed Supervision Second Genericization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle--interest.jpg\" title=\"HTML Themed Supervision Second Genericization Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML Themed Supervision Second Genericization Tutorial<\/p><\/div>\n<p>Some days ago we left off with <a target=_blank title='HTML\/Javascript Themed Supervision Primer Tutorial' href='#hjtspt'>HTML\/Javascript Themed Supervision Primer Tutorial<\/a> having a pretty hardcoded feel to it, as a web application gathering together other web applications under the concept of &#8220;ESL Ideas&#8221;.  Then yesterday we started on our &#8220;genericization&#8221; drive involving the introduction of external Javascript and the address bar URL GET parameters, as dynamic controllers of web application content.<\/p>\n<p>Yesterday stayed within the realms of client side HTML and Javascript (and CSS), and today, we stay there for some more functionality on the theme of &#8220;interactivity&#8221;.<\/p>\n<p>We&#8217;ve talked before at this blog about the wonders of Javascript &#8230; <code> <a target=_blank title='Javascript DOM document.write method information from wschools' href='http:\/\/www.w3schools.com\/jsref\/met_doc_write.asp'>document.write<\/a>(<a target=_blank title='Javascript prompt window information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_prompt.asp'>prompt<\/a>([wording],[default])); <\/code> &#8230; last time was with <a target=_blank title='HTML\/Javascript Clairvoyance Tester Mobile Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-clairvoyance-tester-mobile-tutorial\/'>HTML\/Javascript Clairvoyance Tester Mobile Tutorial<\/a> &#8230; and today we revisit that &#8220;wonder&#8221; &#8230; wonderful!<\/p>\n<p>The logic with our purely Javascript DOM extra functionality is that, as you may remember from <a target=_blank title='HTML\/Javascript Themed Supervision Primer Tutorial' href='#hjtspt'>HTML\/Javascript Themed Supervision Primer Tutorial<\/a> &#8230; way back when &#8230; just plain old <i>document.write([someHTML])<\/i> helped us have a feel with our HTML and Javascript that we are a &#8220;bit&#8221; &#8230; just a tad &#8230; like a server side language like PHP &#8230; delaying the output of HTML until ready.  Well, now, today, ponder &#8230;<\/p>\n<p><code><br \/>\n document.write(itdepends(outhtml));<br \/>\n<\/code><\/p>\n<p> &#8230; and the Javascript <i>itdepends<\/i> function &#8230;<\/p>\n<p><code><br \/>\nfunction itdepends(inh) {<br \/>\n  var ct='Change this', cellno=1, pregs, gs, hw='', cellmemno=1, outh=inh, cells, kc, ic, thisbutton, precells, jc=0, lastsuff='', postcell, suff='&lt;br&gt;', xlast=' setTimeout(andthen, 200); ', zlast='', lastc='';<br \/>\n  var inask=location.search.split('ask=')[1] ? location.search.split('ask=')[1].split('&amp;')[0] : ' ';<br \/>\n  if (inask != ' ') {<br \/>\n    cells=inh.split('&lt;\/h1&gt;');<br \/>\n    thisbutton=cells[0] + '&lt;\/h1&gt;';<br \/>\n    dis=thisbutton.replace(\/\"\/g, \"' + String.fromChar(34) '\");<br \/>\n    lastc=\"&lt;scr\" + \"ipt type='text\/javascript'&gt; var dis\" + jc + \"=\" + '\"' + dis + '\"' + \";  document.write(prompt(\" + '\"' + \"Change this Theme and\/or its dropdown?\" + '\"' + \",dis\" + jc + \"));  &lt;\/scr\" + \"ipt&gt;\";<br \/>\n    outh=outh.replace(thisbutton, lastc);<br \/>\n    lastc='';<br \/>\n    cells=inh.split('&lt;\/td&gt;');<br \/>\n    for (ic=0; ic&lt;cells.length; ic++) {<br \/>\n      if (cells[ic].indexOf('&lt;\/button&gt;') != -1) {<br \/>\n        precells=cells[ic].split('&lt;\/button&gt;');<br \/>\n        for (kc=0; kc&lt;precells.length; kc++) {<br \/>\n         if (precells[kc].replace('&lt;\/div&gt;','').indexOf('&lt;button') != -1) {<br \/>\n          postcell=(' ' + precells[kc]).split('&lt;button');<br \/>\n          thisbutton='&lt;button' + postcell[1] + '&lt;\/button&gt;';<br \/>\n          suff='';<br \/>\n          ct='Change this ' + hw + 'web application button ' + cellmemno + ' (of ' + eval(-1 + precells.length) + ') in cell ' + cellno + ' of 9 ... nothing is allowed';<br \/>\n          if (outh.indexOf(thisbutton + '&lt;br&gt;') != -1) {<br \/>\n           suff='&lt;br&gt;';<br \/>\n           thisbutton += suff;<br \/>\n           lastsuff=suff;<br \/>\n          } else if (outh.indexOf(thisbutton + '&lt;') == -1) {<br \/>\n           gs=outh.split(thisbutton);<br \/>\n           pregs=gs[1].split('&lt;');<br \/>\n           suff=pregs[0];<br \/>\n           thisbutton += suff;<br \/>\n           lastsuff=suff;<br \/>\n          } else {<br \/>\n           ct='Change this ' + hw + 'web application button ' + cellmemno + ' (of ' + cellmemno + ') in cell ' + cellno + ' of 9 ... nothing is allowed ... to add more, best delimiter between buttons is ' + lastsuff + ' ';<br \/>\n          }<br \/>\n          jc++;<br \/>\n          dis=thisbutton.replace(\/\"\/g, \"' + String.fromChar(34) '\");<br \/>\n          lastc=\"&lt;scr\" + \"ipt type='text\/javascript'&gt; var dis\" + jc + \"=\" + '\"' + dis + '\"' + \";  document.write(prompt(\" + '\"' + ct + \"?\" + '\"' + \",dis\" + jc + \"));  &lt;\/scr\" + \"ipt&gt;\";<br \/>\n          outh=outh.replace(thisbutton, lastc);<br \/>\n          if (suff != '') {<br \/>\n            cellmemno++;<br \/>\n          } else {<br \/>\n            cellno++;<br \/>\n            cellmemno=1;<br \/>\n            lastsuff='';<br \/>\n            if (cellno == 5) {<br \/>\n              hw='hidden ';<br \/>\n            } else {<br \/>\n              hw='';<br \/>\n            }<br \/>\n          }<br \/>\n         }<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  if (lastc != '') outh=outh.replace(lastc, lastc.replace('&lt;\/scr', xlast + '&lt;\/scr'));<br \/>\n  return outh;<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; voila &#8230; <i>document.write([someHTML])<\/i> is usefully nesting <i>document.write([someReworkedHTML])<\/i> &#8230; was wondering when this <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=onion\" title='Onions'>&#8220;onion of the 4th dimension&#8221;<\/a> would come.<\/p>\n<p>Once again, have a look at our HTML and Javascript and CSS programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html--GETME\" title='middle_interest.html'>middle_interest.html<\/a> (changed from before as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html--GETME\" title='middle_interest.html'>this link<\/a>) supervising the external Javascript you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.js-GETME\" title='middle_interest.js'>middle_interest.js<\/a> (changed from before as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.js-GETME\" title='middle_interest.js'>this link<\/a>) and\/or try a &#8230;<\/p>\n<ul>\n<li>old hardcoded <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.htm\" title='click picture'>live run<\/a><\/li>\n<li>new nuanced look via programmer document.head.innerHTML HTML script tag  <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html\" title='click picture'>live run<\/a> &#8230; note the spelling of first buttons in each cell (the dropdown of which allows you to choose today&#8217;s &#8220;interactive&#8221; mode of use, as required)<\/li>\n<li>user controlled live run, adding onto programmer document.head.innerHTML HTML script tag, bringing extra options from cell[2,3] up into cell[1,1] &#8230; via URL &#8230;<br \/>\n<code><a style='text-decoration:none;' target=_blank title='User controlled example (adds to script tags)' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html?theme=My%20ESL&#038;oc1_1_=ITblog\/htmljavascript-hearing-and-listening-primer-tutorial\/&#038;te1_1_=HTMLCSS\/listen_to.html&#038;bv1_1_=Hearing,%20Listening&#038;oc2_1_=ITblog\/english-learning-listening-class-love-at-first-bite\/&#038;te2_1_=TESOL\/ListeningTask2\/&#038;bv2_1_=Love%20at%20First%20Bite&#038;oc3_1_=ITblog\/english-learning-listening-class-tapioca-five-ways\/&#038;te3_1_=TESOL\/ListeningTask\/&#038;bv3_1_=Tapioca%20Five%20Ways&#038;oc4_1_=ITblog\/php-pictogram-word-decoding-game-primer-tutorial\/&#038;te4_1_=PHP\/decodepictowords.php&#038;bv4_1_=Pictogram%20Decode&#038;oc5_1_=ITblog\/past-present-tense\/&#038;te5_1_=ITblog\/past-present-tense\/%23content&#038;bv5_1_=Past%20and%20Present%20Tense&#038;oc6_1_=ITblog\/mixed-up-song-lyrics-game-primer-tutorial\/&#038;te6_1_=HTMLCSS\/hart_via_ella.html&#038;bv6_1_=Song%20Lyrics'>http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html?theme=My%20ESL&oc1_1_=ITblog\/htmljavascript-hearing-and-listening-primer-tutorial\/&te1_1_=HTMLCSS\/listen_to.html&bv1_1_=Hearing,%20Listening&oc2_1_=ITblog\/english-learning-listening-class-love-at-first-bite\/&te2_1_=TESOL\/ListeningTask2\/&bv2_1_=Love%20at%20First%20Bite&oc3_1_=ITblog\/english-learning-listening-class-tapioca-five-ways\/&te3_1_=TESOL\/ListeningTask\/&bv3_1_=Tapioca%20Five%20Ways&oc4_1_=ITblog\/php-pictogram-word-decoding-game-primer-tutorial\/&te4_1_=PHP\/decodepictowords.php&bv4_1_=Pictogram%20Decode&oc5_1_=ITblog\/past-present-tense\/&te5_1_=ITblog\/past-present-tense\/%23content&bv5_1_=Past%20and%20Present%20Tense&oc6_1_=ITblog\/mixed-up-song-lyrics-game-primer-tutorial\/&te6_1_=HTMLCSS\/hart_via_ella.html&bv6_1_=Song%20Lyrics<\/a><\/code><br \/>\n&#8230; or click picture link below &#8230;<br \/>\n<a target=_blank title='User controlled example (adds to script tags)' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html?theme=My%20ESL&#038;oc1_1_=ITblog\/htmljavascript-hearing-and-listening-primer-tutorial\/&#038;te1_1_=HTMLCSS\/listen_to.html&#038;bv1_1_=Hearing,%20Listening&#038;oc2_1_=ITblog\/english-learning-listening-class-love-at-first-bite\/&#038;te2_1_=TESOL\/ListeningTask2\/&#038;bv2_1_=Love%20at%20First%20Bite&#038;oc3_1_=ITblog\/english-learning-listening-class-tapioca-five-ways\/&#038;te3_1_=TESOL\/ListeningTask\/&#038;bv3_1_=Tapioca%20Five%20Ways&#038;oc4_1_=ITblog\/php-pictogram-word-decoding-game-primer-tutorial\/&#038;te4_1_=PHP\/decodepictowords.php&#038;bv4_1_=Pictogram%20Decode&#038;oc5_1_=ITblog\/past-present-tense\/&#038;te5_1_=ITblog\/past-present-tense\/%23content&#038;bv5_1_=Past%20and%20Present%20Tense&#038;oc6_1_=ITblog\/mixed-up-song-lyrics-game-primer-tutorial\/&#038;te6_1_=HTMLCSS\/hart_via_ella.html&#038;bv6_1_=Song%20Lyrics'><img src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle-interest.jpg' title='How this looks'><\/img><\/a><\/li>\n<li>new interactive <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html?ask=y\" title='click picture'>live run<\/a> (the same as if the dropdown was set to the &#8220;interactive&#8221; mode of use)<\/li>\n<\/ul>\n<hr>\n<p id='htsfgt'>Previous relevant <a target=_blank title='HTML Themed Supervision First Genericization Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-themed-supervision-first-genericization-tutorial\/'>HTML Themed Supervision First Genericization 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\/middle_interest.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Themed Supervision First Genericization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middleinterest.jpg\" title=\"HTML Themed Supervision First Genericization Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML Themed Supervision First Genericization Tutorial<\/p><\/div>\n<p>Some days ago we left off with <a target=_blank title='HTML\/Javascript Themed Supervision Primer Tutorial' href='#hjtspt'>HTML\/Javascript Themed Supervision Primer Tutorial<\/a> having a pretty hardcoded feel to it, as a web application gathering together other web applications under the concept of &#8220;ESL Ideas&#8221;.<\/p>\n<p>We saw this application then, as now, as being a great candidate to take you through some genericization ideas.<\/p>\n<p>Today&#8217;s genericization ideas stay within the realm of client side web application functionality, only &#8230; the reason the blog title mentions &#8220;First&#8221;.  We go over some similar concepts as to when we presented <a target=_blank title='PHP\/HTML with External Javascript Slotting In Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/phphtml-with-external-javascript-slotting-in-tutorial\/'>PHP\/HTML with External Javascript Slotting In Tutorial<\/a> where both &#8230;<\/p>\n<ol>\n<li>document.head.innerHTML HTML script tag GET properties and\/or overworked by<\/li>\n<li>document.URL GET properties<\/li>\n<\/ol>\n<p>So we allow the web application &#8220;theme&#8221; and the three HTML button aspects described by, again &#8230;<\/p>\n<ol>\n<li>a label (that is displayed and is that HTML button element&#8217;s <a target=_blank title='HTML innerHTML property information' href='http:\/\/www.w3schools.com\/jsref\/prop_html_innerhtml.asp'>innerHTML<\/a> property)<\/li>\n<li>a title containing a URL to reach the &#8220;tutorial web application&#8221; as above<\/li>\n<li>an onclick event, the function called passing across a <i>this<\/i> var<font size=1>iable<\/font> pointing at the HTML button element and a URL to reach the &#8220;tutorial (itself)&#8221; as above<\/li>\n<\/ol>\n<p> &#8230; can now be dynamically controlled by the user in the last of those two ways described (way) above, and by the writer of the software with the <i>document.head.innerHTML<\/i> approach.<\/p>\n<p>And there is more to come involving possible interactivity and serverside functionality.  Hope you get some good ideas from this thread of postings.<\/p>\n<p>In the meantime, again, have a look at our HTML and Javascript and CSS programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html-GETME\" title='middle_interest.html'>middle_interest.html<\/a> (changed from before as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html-GETME\" title='middle_interest.html'>this link<\/a>) supervising the new external Javascript you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.js_GETME\" title='middle_interest.js'>middle_interest.js<\/a> and\/or try a &#8230;<\/p>\n<ul>\n<li>old hardcoded <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.htm\" title='click picture'>live run<\/a><\/li>\n<li>new nuanced look via programmer document.head.innerHTML HTML script tag  <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html\" title='click picture'>live run<\/a> &#8230; note the spelling of first buttons in each cell<\/li>\n<li>user controlled live run, adding onto programmer document.head.innerHTML HTML script tag, bringing extra options from cell[2,3] up into cell[1,1] &#8230; via URL &#8230;<br \/>\n<code><a style='text-decoration:none;' target=_blank title='User controlled example (adds to script tags)' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html?theme=My%20ESL&#038;oc1_1_=ITblog\/htmljavascript-hearing-and-listening-primer-tutorial\/&#038;te1_1_=HTMLCSS\/listen_to.html&#038;bv1_1_=Hearing,%20Listening&#038;oc2_1_=ITblog\/english-learning-listening-class-love-at-first-bite\/&#038;te2_1_=TESOL\/ListeningTask2\/&#038;bv2_1_=Love%20at%20First%20Bite&#038;oc3_1_=ITblog\/english-learning-listening-class-tapioca-five-ways\/&#038;te3_1_=TESOL\/ListeningTask\/&#038;bv3_1_=Tapioca%20Five%20Ways&#038;oc4_1_=ITblog\/php-pictogram-word-decoding-game-primer-tutorial\/&#038;te4_1_=PHP\/decodepictowords.php&#038;bv4_1_=Pictogram%20Decode&#038;oc5_1_=ITblog\/past-present-tense\/&#038;te5_1_=ITblog\/past-present-tense\/%23content&#038;bv5_1_=Past%20and%20Present%20Tense&#038;oc6_1_=ITblog\/mixed-up-song-lyrics-game-primer-tutorial\/&#038;te6_1_=HTMLCSS\/hart_via_ella.html&#038;bv6_1_=Song%20Lyrics'>http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html?theme=My%20ESL&oc1_1_=ITblog\/htmljavascript-hearing-and-listening-primer-tutorial\/&te1_1_=HTMLCSS\/listen_to.html&bv1_1_=Hearing,%20Listening&oc2_1_=ITblog\/english-learning-listening-class-love-at-first-bite\/&te2_1_=TESOL\/ListeningTask2\/&bv2_1_=Love%20at%20First%20Bite&oc3_1_=ITblog\/english-learning-listening-class-tapioca-five-ways\/&te3_1_=TESOL\/ListeningTask\/&bv3_1_=Tapioca%20Five%20Ways&oc4_1_=ITblog\/php-pictogram-word-decoding-game-primer-tutorial\/&te4_1_=PHP\/decodepictowords.php&bv4_1_=Pictogram%20Decode&oc5_1_=ITblog\/past-present-tense\/&te5_1_=ITblog\/past-present-tense\/%23content&bv5_1_=Past%20and%20Present%20Tense&oc6_1_=ITblog\/mixed-up-song-lyrics-game-primer-tutorial\/&te6_1_=HTMLCSS\/hart_via_ella.html&bv6_1_=Song%20Lyrics<\/a><\/code><br \/>\n&#8230; or click picture link below &#8230;<br \/>\n<a target=_blank title='User controlled example (adds to script tags)' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html?theme=My%20ESL&#038;oc1_1_=ITblog\/htmljavascript-hearing-and-listening-primer-tutorial\/&#038;te1_1_=HTMLCSS\/listen_to.html&#038;bv1_1_=Hearing,%20Listening&#038;oc2_1_=ITblog\/english-learning-listening-class-love-at-first-bite\/&#038;te2_1_=TESOL\/ListeningTask2\/&#038;bv2_1_=Love%20at%20First%20Bite&#038;oc3_1_=ITblog\/english-learning-listening-class-tapioca-five-ways\/&#038;te3_1_=TESOL\/ListeningTask\/&#038;bv3_1_=Tapioca%20Five%20Ways&#038;oc4_1_=ITblog\/php-pictogram-word-decoding-game-primer-tutorial\/&#038;te4_1_=PHP\/decodepictowords.php&#038;bv4_1_=Pictogram%20Decode&#038;oc5_1_=ITblog\/past-present-tense\/&#038;te5_1_=ITblog\/past-present-tense\/%23content&#038;bv5_1_=Past%20and%20Present%20Tense&#038;oc6_1_=ITblog\/mixed-up-song-lyrics-game-primer-tutorial\/&#038;te6_1_=HTMLCSS\/hart_via_ella.html&#038;bv6_1_=Song%20Lyrics'><img src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle-interest.jpg' title='How this looks'><\/img><\/a><\/li>\n<\/ul>\n<hr>\n<p id='hjtspt'>Previous relevant <a target=_blank title='HTML\/Javascript Themed Supervision Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-themed-supervision-primer-tutorial\/'>HTML\/Javascript Themed Supervision 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\/middle_interest.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Themed Supervision Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.jpg\" title=\"HTML\/Javascript Themed Supervision Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Themed Supervision Primer Tutorial<\/p><\/div>\n<p>Today we want to show another <a target=_blank title='Overlay tutorials at this blog' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay'>&#8220;overlay&#8221;<\/a> variation on HTML and Javascript supervision of other web applications, in an HTML <a target=_blank title='HTML iframe element information from wschools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> element.  We make the look of this supervisor be a central &#8220;core&#8221; child web application that is either a &#8230;<\/p>\n<ul>\n<li>tutorial web application &#8230; or &#8230;<\/li>\n<li>tutorial (itself)<\/li>\n<\/ul>\n<p> &#8230; displayed in a middle &#8220;overlay&#8221; HTML iframe element.<\/p>\n<p>That middle &#8220;overlay&#8221; HTML iframe element&#8217;s content is controlled by (the clicking of) HTML <a target=_blank title='HTML button element information from wschools' href='http:\/\/www.w3schools.com\/tags\/tag_button.asp'>button<\/a> elements spread around it, that position themselves as far away from the &#8220;middle&#8221; part as they can (so that the &#8220;middle&#8221; part can be as big as it can), in HTML <a target=_blank title='HTML td element information from wschools' href='http:\/\/www.w3schools.com\/tags\/tag_td.asp'>td<\/a> (cell) elements.  Three pieces of information are associated with these buttons, namely &#8230;<\/p>\n<ol>\n<li>a label (that is displayed and is that HTML button element&#8217;s <a target=_blank title='HTML innerHTML property information' href='http:\/\/www.w3schools.com\/jsref\/prop_html_innerhtml.asp'>innerHTML<\/a> property)<\/li>\n<li>a title containing a URL to reach the &#8220;tutorial web application&#8221; as above<\/li>\n<li>an onclick event, the function called passing across a <i>this<\/i> var<font size=1>iable<\/font> pointing at the HTML button element and a URL to reach the &#8220;tutorial (itself)&#8221; as above<\/li>\n<\/ol>\n<p>That all sounds a pretty generic plan, but today we have a &#8220;Primer&#8221; tutorial, as proof of concept, which hardcodes all the HTML button element features as above on the theme (which is contained in a global var<font size=1>iable<\/font> called &#8220;theme&#8221;) of <a target=_blank title='ESL information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/English_as_a_second_or_foreign_language'>ESL<\/a>.  We chose this &#8220;theme&#8221; because we have quite a varied lineup that would benefit from a web application coalescing some of the ideas we&#8217;ve been developing here at this blog.<\/p>\n<p>Over time, you can be pretty sure we&#8217;ll be genericising all this in a variety of directions.   We hope you stick around to see this.<\/p>\n<p>By the way, the CSS &#8220;overlay&#8221; usual suspects come into play again today, the main two being &#8230;<\/p>\n<ul>\n<li><a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a> property<\/li>\n<li><a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>z-index<\/a><\/li>\n<\/ul>\n<p> &#8230; and we use the Window.<a target=_blank title='Information about Window.getComputedStyle' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/getComputedStyle'>getComputedStyle<\/a> Javascript functionality to help position that middle &#8220;overlay&#8221; HTML iframe element, as well as CSS <a target=_blank title='CSS float property information from w3schools' href='http:\/\/www.w3schools.com\/css\/css_float.asp'>float<\/a> and  <a target=_blank title='CSS vertical-align property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_vertical-align.asp'>vertical-align<\/a> properties.  Again, as was the case with <a target=_blank title='Landing Page Mobile Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/landing-page-mobile-tutorial\/'>Landing Page Mobile Tutorial<\/a>, we use Javascript that performs a little like a server language like PHP, holding back on the production of the HTML via that HTML being defined in a var<font size=1>iable<\/font> capable of being modified and &#8220;tweaked&#8221;, until ready to release via the use of the Javascript DOM <a target=_blank title='Javascript DOM document.write method information from wschools' href='http:\/\/www.w3schools.com\/jsref\/met_doc_write.asp'>document.write<\/a>([that variable]) method, used to set off the bulk of the web page rendering at the web browser.<\/p>\n<p>In the meantime, have a look at our HTML and Javascript and CSS programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html_GETME\" title='middle_interest.html'>middle_interest.html<\/a> and\/or try a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html\" title='click picture'>live run<\/a>.<\/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='#20146' onclick='var dv=document.getElementById(\"d20146\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/esl\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d20146' 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='#20241' onclick='var dv=document.getElementById(\"d20241\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/html\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d20241' 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='#20256' onclick='var dv=document.getElementById(\"d20256\"); 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='d20256' 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='#20276' onclick='var dv=document.getElementById(\"d20276\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d20276' 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='#20293' onclick='var dv=document.getElementById(\"d20293\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/php\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d20293' 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='#20304' onclick='var dv=document.getElementById(\"d20304\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/database\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d20304' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>More than a week ago, now, we started off with HTML\/Javascript Themed Supervision Primer Tutorial having a pretty hardcoded feel to it, as a web application gathering together other web applications under the concept of &#8220;ESL Ideas&#8221;. Then four days &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/php-themed-supervision-fifth-genericization-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,13,37],"tags":[1580,281,299,352,354,396,409,446,452,1533,1801,576,587,617,652,827,870,894,932,997,1222,1238,1319,1345,1802,1456],"class_list":["post-20304","post","type-post","status-publish","format-standard","hentry","category-elearning","category-esl","category-tutorials","tag-cell","tag-css","tag-database-2","tag-document-write","tag-dom","tag-esl","tag-external-javascript","tag-float","tag-form","tag-get","tag-getcomputedstyle","tag-html","tag-iframe","tag-interactive","tag-javascript","tag-mysql","tag-onload","tag-overlay","tag-php","tag-programming","tag-supervisor","tag-table","tag-tutorial","tag-url","tag-vertical-align","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/20304"}],"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=20304"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/20304\/revisions"}],"predecessor-version":[{"id":20401,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/20304\/revisions\/20401"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=20304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=20304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=20304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}