{"id":60370,"date":"2023-08-09T03:01:48","date_gmt":"2023-08-08T17:01:48","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=60370"},"modified":"2023-08-08T14:07:54","modified_gmt":"2023-08-08T04:07:54","slug":"tic-tac-toe-game-timing-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/tic-tac-toe-game-timing-tutorial\/","title":{"rendered":"Tic Tac Toe Game Timing Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Tic Tac Toe Game Timing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/tictactoe_better.gif\" title=\"Tic Tac Toe Game Timing Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Tic Tac Toe Game Timing Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Tic Tac Toe Game Drag and Drop Tutorial' href='#tttgddt'>Tic Tac Toe Game Drag and Drop Tutorial<\/a>&#8216;s Tic Tac Toe game had an annoyance.  You, as the interactive player, playing the Computer, had to imagine how the Computer won, should it do so.  How come?  Well, when writing &#8230;<\/p>\n<ul>\n<li>Javascript &#8230; especially &#8230;<\/li>\n<li><a target=_blank title='Javascript DOM information from W3schools' href='https:\/\/www.w3schools.com\/js\/js_htmldom.asp'>DOM<\/a> <font size=1>style<\/font> &#8230; you need to look out for the combination of &#8230;<\/li>\n<li>\n<ol>\n<li>Javascript DOM that crucially affects the look of the visible webpage &#8230; followed by &#8230;<\/li>\n<li>a <a target=_blank title='Modal window information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Modal_window'>modal<\/a> <a target=_blank title='Javascript popup boxes information from W3schools' href='https:\/\/www.w3schools.com\/js\/js_popup.asp'>popup window<\/a> such as <i>alert<\/i> or <i>confirm<\/i> or <i>prompt<\/i> &#8230; followed by a &#8230;<\/li>\n<li>webpage reload<\/li>\n<\/ol>\n<p> &#8230; because &#8230;<\/li>\n<li>if step 2 above immediately follows step 1 it can be that the user never sees that Javascript DOM code&#8217;s visible webpage effects &#8230; we believe, because, Javascript DOM (maybe sometimes) needs some &#8220;flush&#8221; <font size=1>(no &#8230; not &#8230; to da loo)<\/font> time before any modal Javascript windows appear, demanding attention.<\/li>\n<\/ul>\n<p>We have almost answered our own question about how to resolve this issue where we say above &#8220;if step 2 above immediately follows step 1&#8221;.  Can you think how?  <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>Anyone, anyone?!<\/a>   Yes, <a target=_blank title='?' href='https:\/\/en.wikipedia.org\/wiki\/Brendan_Eich'>Brendan<\/a>, we can embed a <i>static Javascript snippet of code<\/i> ( eg. <i>alert(&#8216;Some blurb&#8217;);<\/i> ) into a &#8230;<\/p>\n<p><code><br \/>\n<font color=purple>setTimeout(function(){<\/font><br \/>\n  alert('Some blurb');<br \/>\n  <font color=blue>newgame();<\/font><br \/>\n<font color=purple>}, 3000);<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; delayed ( eg. by 3 seconds ) <a target=_blank title='Javascript setTimeout() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'>setTimeout<\/a> <font color=purple>timed function type of scenario<\/font>, as above.  In that 3 seconds, Javascript DOM&#8217;s work can have time to complete.<\/p>\n<p style=color:blue;>And regarding how our step 3 is described by <i>webpage reload<\/i> above, that equates to <i>newgame();<\/i> in our Tic Tac Toe game code, it needs to be in the delayed sequence of events ( the <font color=purple>purple snippets<\/font> representing the basis for a 2 second delay solution to this timing issue ) &#8230;<\/p>\n<p><code><br \/>\n   if (oemail.indexOf(',') != -1) {<br \/>\n   if ((oemail.split(',')[0] + oemail.split(',')[1]).indexOf('Computer') != -1) { emojithem('Computer'); }<br \/>\n   <font color=purple>setTimeout(function(){<\/font><br \/>\n   alert(emojithem(oemail.split(',')[1]) + \" wins!   Bad luck, \" + emojithem(oemail.split(',')[0]));<br \/>\n   <font color=purple>newgame();<\/font><br \/>\n   <font color=purple>}, 2000);<\/font><br \/>\n   } else {<br \/>\n   emojithem('Computer');<br \/>\n   <font color=purple>setTimeout(function(){<\/font><br \/>\n   alert(emojithem(\"Computer\") + \" wins!   Bad luck.  Scores: \" + emojithem(\"Computer\") + \" \" + cscore + \" vs \" + emojithem(\"You\") + \" \" + yscore + \" (\" + dscore + \" draws)\");<br \/>\n   <font color=purple>newgame();<\/font><br \/>\n   <font color=purple>}, 2000);<\/font><br \/>\n   }<br \/>\n   <font color=purple>\/\/<\/font>newgame();<br \/>\n<\/code><\/p>\n<p> &#8230; within <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/tictactoe.js---------GETME\" title=\"tictactoe.js\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/tictactoe.js---------GETME\" title=\"tictactoe.js\">tictactoe.js<\/a> Tic Tac Toe logic external Javascript specialist used for <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/\">the Tic Tac Toe game<\/a> you can <a href=#ifttt>play below<\/a> also.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/tic-tac-toe-game-timing-tutorial\/'>Tic Tac Toe Game Timing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='tttgddt'>Previous relevant <a target=_blank title='Tic Tac Toe Game Drag and Drop Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/tic-tac-toe-game-drag-and-drop-tutorial\/'>Tic Tac Toe Game Drag and Drop Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Tic Tac Toe Game Drag and Drop Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/tic_tac_toe_drag_and_drop.jpg\" title=\"Tic Tac Toe Game Drag and Drop Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Tic Tac Toe Game Drag and Drop Tutorial<\/p><\/div>\n<p>The Tic Tac Toe game talked about in <a title='Apache PHP Code Control Tutorial' href='#aphpcct'>Apache PHP Code Control Tutorial<\/a> already has a variety of inputs such as mouse and touch and email and SMS possibilities, and so to also allow <i>drag and drop<\/i> as an alternative does not sound like too much of a stretch for our extremely able and perspicacious audience!<\/p>\n<p>Again, &#8220;click&#8221; or &#8220;touch&#8221; reigns supreme here, but because the user is being asked to fill a (3&#215;3 grid) square with their (usually &#8220;X&#8221;) answer of &#8220;X&#8221; or &#8220;O&#8221; a <i>drag and drop<\/i> paradigm can well suit the player&#8217;s thinking.<\/p>\n<p>Yesterday&#8217;s <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-indigenous-language-drag-and-drop-tutorial\/' title='Australian Indigenous Language Drag and Drop Tutorial'>Australian Indigenous Language Drag and Drop Tutorial<\/a>&#8216;s logic panned out to be a great help with fleshing out what was required, but again, there <font color=blue>were nuances<\/font> &#8230;<\/p>\n<table>\n<tr>\n<th>tictactoe.js<\/th>\n<th>countries.js<\/th>\n<\/tr>\n<tr>\n<td style=vertical-align:top;><code style='font-size:8px;'><br \/>\nvar amdragging=false, havedropped=false, dropthing='';<br \/>\n<font color=blue>var defxo='&#10060;';<\/font><br \/>\n<br \/>\/\/ ...<br \/>\n var ifbittwo='&lt;iframe scrolling=no frameborder=0 name=iftr id=iftr style=\"display:block;position:absolute;left:calc(100% - 60px);top:50%;width:60px;height:60px;\" srcdoc=\"&lt;body style=background-color:transparent;&gt;&lt;p id=mg title=' + \"'\" + 'Drag and drop for your X square choice playing Tic Tac Toe.' + \"'\" + ' draggable=' + \"'\" + 'true' + \"'\" + '&gt;<font color=blue>' + defxo + '<\/font>&lt;\/p&gt;&lt;br&gt;&lt;br&gt;&lt;div id=myh1&gt;&lt;\/div&gt;&lt;script type=' + \"'\" + 'text\/javascript' + \"'\" + ' src=' + \"'\" + '\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.js?rand=89742464857' + \"'\" + ' defer&gt;&lt;\/script&gt;&lt;\/body&gt;\" data-src=&gt;&lt;\/iframe&gt;';<br \/>\n<br \/>\/\/ ...<br \/>\n document.body.innerHTML = hcont + hcont2 + hcont3 + hcont4 + hcont5 + hcont6 + hcont7 + hcont8 + hcont9 + hcont10 + hcont11 + hcont12 + hcont13 + hcont14 + hcont15 + hcont16 + hcont17 + hcont18 + hcont19 + hcont20 + hcont21 + eform + ifbit<font color=blue> + ifbittwo<\/font>;<br \/>\n<\/code>\n<\/td>\n<td style=vertical-align:top;><code style='font-size:8px;'><br \/>\n  console.log(\"Drop ... \" + ev.target.id + ' --- ' + ev.target.outerHTML);<br \/>\n  dropdt=(new Date());<br \/>\n    if (('' + ev.target.id) != '') {<br \/>\n    if (typeof(parent.amdragging) !== 'undefined') { parent.amdragging=false; }<br \/>\n    if (typeof(parent.havedropped) !== 'undefined') { parent.havedropped=true;  }<br \/>\n    if (('' + ev.target.outerHTML).indexOf('<img') == 0 &#038;&#038; ('' + ev.target.outerHTML).indexOf('doit(this)') != -1 &#038;&#038; typeof(parent.amdragging) !== 'undefined' &#038;&#038; typeof(parent.havedropped) !== 'undefined' &#038;&#038; typeof(parent.dropthing) !== 'undefined') { \/\/ Tic Tac Toe\n    ev.target.click();\n    } \n    } <font color=blue>else if (('' + ev.target.outerHTML).indexOf(' alt=\"') != -1 && typeof(parent.amdragging) !== 'undefined' && typeof(parent.havedropped) !== 'undefined' && typeof(parent.dropthing) !== 'undefined') {<br \/>\n    parent.dropthing=('' + ev.target.outerHTML).split(' alt=\"')[1].split('\"')[0];<br \/>\n    parent.langwo();<br \/>\n    } else if (('' + ev.target.outerHTML).indexOf('<img') == 0 &#038;&#038; ('' + ev.target.outerHTML).indexOf('doit(this)') != -1 &#038;&#038; typeof(parent.amdragging) !== 'undefined' &#038;&#038; typeof(parent.havedropped) !== 'undefined' &#038;&#038; typeof(parent.dropthing) !== 'undefined') { \/\/ Tic Tac Toe\n    ev.target.click();\n    }<\/font><br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; asking for <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.js--------GETME\">our <font size=1>still needing to be changed<\/font> changed<\/a> external Javascript <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.js--------GETME\">countries.js<\/a> &#8220;Drag and Drop specialist&#8221; to be tweaked, so that a call by <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/tictactoe.js--------GETME\" title=\"tictactoe.js\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/tictactoe.js--------GETME\" title=\"tictactoe.js\">tictactoe.js<\/a> Tic Tac Toe logic external Javascript specialist used for <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/\">the Tic Tac Toe game<\/a> could be made to work, as you might want to try below &#8230;<\/p>\n<p><iframe id=ifttt src=\"https:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/\" style=\"width:100%;height:700px;\"><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-apache-php-code-control-tutorial\/'>New Apache PHP Code Control Tutorial<\/a>.<\/p-->\n<hr>\n<p id='aphpcct'>Previous relevant <a target=_blank title='Apache PHP Code Control Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/apache-php-code-control-tutorial\/'>Apache PHP Code Control Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Apache PHP Code Control Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/tic_tac_toe_notification.jpg\" title=\"Apache PHP Code Control Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Apache PHP Code Control Tutorial<\/p><\/div>\n<p>It might be tempting to ask, after the event, with web application code on an Apache web server, can controlling code be added to an existing web application codeset, that does not rely on changes to any existent code?  The answer is yes, with a lot of provisos &#8230;<\/p>\n<ul>\n<li>it&#8217;s not a great idea, as much to do with causing confusion as to do with security looseness &#8230; but, nonetheless, depending on other php.ini configurations you might be able to add &#8230;<\/li>\n<li>into Apache domain&#8217;s <a target=_blank title='Apache PHP php.ini configuration file' href='https:\/\/www.php.net\/manual\/en\/configuration.file.php'>php.ini<\/a> configuration file &#8230;<br \/>\n<code><br \/>\n; Automatically add files before or after any PHP document.<br \/>\nauto_prepend_file = somestartingphp.php<br \/>\nauto_append_file = someendingphp.php<br \/>\n<\/code><br \/>\n &#8230; as we intimated in <a title='Apache\/PHP\/MySql Linux Language Considerations Primer Tutorial' href='#a\/php\/msllcpt'>Apache\/PHP\/MySql Linux Language Considerations Primer Tutorial<\/a> &#8230; or &#8230;<\/li>\n<li>within a folder of Apache web server directory structure via an Apache <a target=_blank title='Apache .htaccess information' href='https:\/\/httpd.apache.org\/docs\/2.4\/howto\/htaccess.html'>.htaccess<\/a> file mention, such as &#8230;<br \/>\n<code><br \/>\nphp_value auto_prepend_file ..\/..\/ncmailxitin.php<br \/>\nphp_value auto_append_file ..\/..\/ncmailxitout.php<br \/>\n<\/code><br \/>\n &#8230; the exact contents of our MAMP Apache .htaccess for HTTP:\/\/localhost:8888\/Games\/Noughtsandcrosses\/ in explanation below<\/li>\n<\/ul>\n<p>We were kind of sad and relieved at the same time seeing that to apply this .htaccess approach of allowing for introductory Notification welcome messages up at the RJM Programming domain&#8217;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/\" title=\"Tic tac toe\"><i>Noughts and Crosses<\/i><\/a> web application we tried it on, but it did not work, whereas trying to apply it to our Apache <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> <font size=1>(local web server)<\/font> environment via &#8230;<\/p>\n<ul>\n<li>downloaded existing code to MAMP place in Games\/Noughtsandcrosses off the MAMP Document Root folder &#8230;<\/li>\n<li>tweaked <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/tictactoe.js-------GETME\" title=\"tictactoe.js\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/tictactoe.js-------GETME\" title=\"tictactoe.js\">tictactoe.js<\/a> &#8230; in a way that suited allowing new introductory Notifications welcoming players in both MAMP and RJM Programming domain <i>brands<\/i> of Apache web servers, but in different ways &#8230; please note that this change to existent code would not have been needed had the RJM Programming domain accepted the .htaccess methodologies, and we were not wanting the same <i>Noughts and Crosses<\/i> codeset suiting both Apache environments &#8230;<\/li>\n<li>renamed the Games\/Noughtsandcrosses index.html (default web application filename) to index.php &#8230; to allow for an Apache .htaccess methodology to possibly work <font size=1>(but only does, for us, at MAMP)<\/font> &#8230; it&#8217;s only noticed when PHP code is involved <font size=1>(even if there are no starting <i>&lt;?php <\/i> and ending <i> ?&gt;<\/i> delimitations in the code, as in our, what was, index.html case)<\/font> &#8230;<\/li>\n<li>created a 644 permissions .htaccess in Games\/Noughtsandcrosses off the MAMP Document Root folder &#8230;<br \/>\n<code><br \/>\nphp_value auto_prepend_file ..\/..\/ncmailxitin.php<br \/>\nphp_value auto_append_file ..\/..\/ncmailxitout.php<br \/>\n<\/code>\n<\/li>\n<li>created in MAMP Document Root folder <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ncmailxitin.php_GETME\" title=\"ncmailxitin.php\">ncmailxitin.php<\/a> &#8230;<\/li>\n<li>created in MAMP Document Root folder <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ncmailxitout.php_GETME\" title=\"ncmailxitout.php\">ncmailxitout.php<\/a><\/li>\n<\/ul>\n<p> &#8230; did!<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/apachephpmysql-linux-language-considerations-primer-tutorial\/'>Apache\/PHP\/MySql Linux Language Considerations Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='a\/php\/msllcpt'>Previous relevant <a target=_blank title='Apache\/PHP\/MySql Linux Language Considerations Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/apache\/php\/mysql-linux-language-considerations-primer-tutorial\/'>Apache\/PHP\/MySql Linux Language Considerations Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mamp_language.jpg\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Apache\/PHP\/MySql Linux Language Considerations Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mamp_language.jpg\" title=\"Apache\/PHP\/MySql Linux Language Considerations Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Apache\/PHP\/MySql Linux Language Considerations Primer Tutorial<\/p><\/div>\n<p>The recent <a target=_blank title='CSS Style Javascript DOM Override Onload Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css-style-javascript-dom-override-onload-primer-tutorial\/'>CSS Style Javascript DOM Override Onload Primer Tutorial<\/a> &#8220;proof of concept&#8221; web application ended up with the name &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='are_you_happy_with_my_or_do_you_think_my_derriere_needs_work.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/are_you_happy_with_my_or_do_you_think_my_derriere_needs_work.html'>are_you_happy_with_my_or_do_you_think_my_derriere_needs_work.html<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; but along the way we wanted to call it &#8230;<\/p>\n<p><code><br \/>\nare_you_happy_with_my_or_do_you_think_my_derri\u00e8re_needs_work.html<br \/>\n<\/code><\/p>\n<p> &#8230; but this didn&#8217;t work as an RJM Programming website filename.  Rather than make it work, we compromised, and called it (the final)  are_you_happy_with_my_or_do_you_think_my_derriere_needs_work.html it ended up as.  But this didn&#8217;t stop us wondering about all this language and the relationship of these language characters and where and how you can or can&#8217;t use those characters outside those usual US-keyboard type characters.<\/p>\n<p>And that brings us to the great <a target=_blank title='MAMP local Apache\/PHP\/MySQL' href='http:\/\/mamp.info'>MAMP<\/a> local Apache\/PHP\/MySql web server product, as a place to experiment, comforted in the knowledge that the Mac OS X Terminal application &#8230;<\/p>\n<p><code><br \/>\nls -li<br \/>\n<\/code><\/p>\n<p> &#8230; and knowledge of inodes (all the way to their &#8220;extreme case Linux system file removal talents) you can read about at <a target=_blank title='Linux Inode File Removal Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/linux-inode-file-removal-tutorial\/'>Linux Inode File Removal Tutorial<\/a> would probably protect me from home grown stupidities.<\/p>\n<p>So what followed for me was a quick look at MAMP&#8217;s relevant php.ini file and its httpd.conf configuration files to see that the web server default &#8220;goto look for&#8221; file list for the web server directory can be altered by a change of &#8230;<\/p>\n<p><code><br \/>\nDirectoryIndex index.html index.php<br \/>\n<\/code><\/p>\n<p> &#8230; to something else in httpd.conf Apache configuration file.  But nothing to easily reinvent the US-keyboard feeling file extensions .htm and .html and .php that was apparent to me.  And noting to change that &#8230;<\/p>\n<p><code><br \/>\n[protocol]:\/\/localhost:[localHostPortNumber]\/<br \/>\n<\/code><\/p>\n<p> &#8230; US-keyboard feeling prefix to a URL, such as our http:\/\/localhost:8888\/ prefix to a MAMP local Apache\/PHP\/MySql URL we created a Simplified Chinese character set &#8220;Hello World&#8221; folder scenario (and thank <a target=_blank title='Google Translate' href='http:\/\/translate.google.com'>Google Translate<\/a> for translation help today) &#8230;<\/p>\n<p><code><font color=black>ht<\/font>tp:\/\/localhost:8888\/\u4f60\u597d\/\u4e16\u754c\/<\/code><\/p>\n<p>index.html as per &#8230;<\/p>\n<p><code><br \/>\n&lt;!doctype html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;RJM\u7f16\u7a0b\u7740\u9646\u9875&lt;\/title&gt;<br \/>\n&lt;meta charset=\"UTF-8\"&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;h1&gt;\u6b22\u8fce\u6765\u5230-RJM\u7f16\u7a0b\u7f51\u7ad9&lt;\/h1&gt;&lt;br&gt;<br \/>\n&lt;a target=_blank title='RJM\u7f16\u7a0b\u7740\u9646\u9875' href='https:\/\/translate.google.com\/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=%2F%2Fwww.rjmprogramming.com.au%2Findex.html&tl=zh-CN'&gt;RJM\u7f16\u7a0b\u7740\u9646\u9875&lt;\/a&gt;<br \/>\n&lt;\/body&gt;&lt;\/html&gt;<br \/>\n<\/code><\/p>\n<p>Within the php.ini configuration file we found interesting, in particular &#8230;<\/p>\n<p><code><br \/>\n; Automatically add files before or after any PHP document.<br \/>\nauto_prepend_file =<br \/>\nauto_append_file =<br \/>\n<b><\/b><br \/>\n; PHP's built-in default is text\/html<br \/>\ndefault_mimetype = \"text\/html\"<br \/>\n<b><\/b><br \/>\n; Whether to allow the treatment of URLs (like http:\/\/ or ftp:\/\/) as files.<br \/>\nallow_url_fopen = On<br \/>\n<\/code><\/p>\n<p> &#8230; the last of which, if set to <i>Off<\/i> could set up for the scenario of setting up a web server full of index.html and index.php code in web server folders that could include non US-keyboard characters, and so you could have within the code of &#8230;<\/p>\n<p><code><font color=black>ht<\/font>tp:\/\/localhost:8888\/\u4f60\u597d\/<\/code><\/p>\n<p> index.html a relative URL such as &#8230;<\/p>\n<p><code>&lt;a target=_blank title='\u4f60\u597d \u4e16\u754c' href='\u4e16\u754c'&gt;\u4f60\u597d \u4e16\u754c&lt;\/a&gt;<\/code><\/p>\n<p> &#8230; taking you off to today&#8217;s (URL) starting place.<\/p>\n<p>Am sure you can feel yourself, there is so much more to explore in this topic area, and we&#8217;ll be returning soon to this neck of the woods soon, we hope.  In the meantime, take a look at our <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mamp_language.jpg\" title='Click picture'>tutorial picture<\/a> for a bit of what we did on MAMP with some of these concepts not changing any configuration files at all.<\/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='#d30401' onclick='var dv=document.getElementById(\"d30401\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mamp\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d30401' 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='#d57500' onclick='var dv=document.getElementById(\"d57500\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/apache\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57500' 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='#d60365' onclick='var dv=document.getElementById(\"d60365\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/drag-and-drop\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60365' 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='#d60370' onclick='var dv=document.getElementById(\"d60370\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/setTimeout\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60370' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s Tic Tac Toe Game Drag and Drop Tutorial&#8216;s Tic Tac Toe game had an annoyance. You, as the interactive player, playing the Computer, had to imagine how the Computer won, should it do so. How come? Well, when writing &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/tic-tac-toe-game-timing-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":[2516,211,354,2237,364,4385,380,400,409,4432,476,477,652,2080,3573,847,861,967,968,997,998,4152,1126,1159,1275,1282,1283,1294],"class_list":["post-60370","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-alert","tag-click","tag-dom","tag-drag","tag-drag-and-drop","tag-drop","tag-email","tag-event","tag-external-javascript","tag-flush","tag-game","tag-games-2","tag-javascript","tag-modal","tag-modal-dialog-box","tag-noughts-and-crosses","tag-onclick","tag-popup","tag-popup-window","tag-programming","tag-programming-tutorial","tag-reload","tag-settimeout","tag-sms","tag-tic-tac-toe","tag-timer","tag-timing","tag-touch"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60370"}],"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=60370"}],"version-history":[{"count":11,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60370\/revisions"}],"predecessor-version":[{"id":60381,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60370\/revisions\/60381"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=60370"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=60370"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=60370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}