{"id":33134,"date":"2017-09-24T03:01:32","date_gmt":"2017-09-23T17:01:32","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=33134"},"modified":"2017-09-25T21:29:13","modified_gmt":"2017-09-25T11:29:13","slug":"conditional-alternative-to-javascript-popup-windows-in-ios-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/conditional-alternative-to-javascript-popup-windows-in-ios-tutorial\/","title":{"rendered":"Conditional Alternative to Javascript Popup Windows in iOS Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/WKWebView.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Conditional Alternative to Javascript Popup Windows in iOS Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/WKWebView.jpg\" title=\"Conditional Alternative to Javascript Popup Windows in iOS Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Conditional Alternative to Javascript Popup Windows in iOS Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Conditional Alternative to Javascript Popup Windows Tutorial' href='#cajpwt'>Conditional Alternative to Javascript Popup Windows Tutorial<\/a> is put into context, today, as we start our journey down the road of readying some of our rjmprogramming.com.au PHP web applications to only conditionally use the Javascript <a target=_blank title='HTML window.open information from w3schools' href='https:\/\/www.w3schools.com\/js\/js_popup.asp'>popup windows<\/a> if we want them to ever be hosted by the new &#8230;<\/p>\n<ul>\n<li>iOS app <a target=_blank href='https:\/\/developer.apple.com\/documentation\/webkit\/wkwebview' title='WKWebView information from Apple'>WKWebView<\/a> object &#8230; that you are encouraged to start using rather than the previous &#8230;<\/li>\n<li>iOS app <a target=_blank href='https:\/\/developer.apple.com\/library\/ios\/documentation\/UIKit\/Reference\/UIWebView_Class\/' title='UIWebView information from Apple'>UIWebView<\/a> object<\/li>\n<\/ul>\n<p>To quote Apple &#8230;<\/p>\n<blockquote cite='https:\/\/developer.apple.com\/documentation\/webkit\/wkwebview'><p>\nStarting in iOS 8.0 and OS X 10.10, use WKWebView to add web content to your app. Do not use UIWebView or WebView.\n<\/p><\/blockquote>\n<p>We started out thinking the job might be pretty straightforward, and think for the most part it is, as we started out with <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Chart<\/a> <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php\" title=\"pie_chart.php\" target=\"_blank\">Pie Chart<\/a> (and  <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart_diff.php\" title=\"pie_chart_diff.php\" target=\"_blank\">Pie Chart Difference<\/a>) but then chose as the second the <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/OrgChart\/Google_OrgChart.php?nojwin=y\" title=\"Google_OrgChart.php\" target=\"_blank\">Org Chart<\/a>, and that is where the rubber hit the road.  But we&#8217;ve started down the track, and think you might be interested in the changes to &#8230;<\/p>\n<ul>\n<li><a href=\"http:\/\/www.rjmprogramming.com.au\/gchartgen.js-------GETME\" title=\"csv.php\" target=\"_blank\">gchartgen.js<\/a> is the changed Javascript programming source code as per <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/gchartgen.js-------GETME\" title=\"gchartgen.js\" target=\"_blank\">these changes<\/a> &#8230; generic Javascript involving the &#8220;first cabs off the rank&#8221; changed &#8230;<\/li>\n<li><a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php---------GETME\" title=\"pie_chart.php\" target=\"_blank\" title=\"Click picture\">pie_chart.php<\/a>&#8216;s <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php?nojwin=y\" title=\"pie_chart.php\" target=\"_blank\" title=\"Click picture\">forced textbox mode rather than popup window live run<\/a> and which changed in <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php---------GETME\" title=\"pie_chart.php\" target=\"_blank\" title=\"Click picture\">this way<\/a><\/li>\n<li><a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart_diff.php---GETME\" title=\"pie_chart.php\" target=\"_blank\" title=\"Click picture\">pie_chart_diff.php<\/a>&#8216;s <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart_diff.php?nojwin=y\" title=\"pie_chart.php\" target=\"_blank\" title=\"Click picture\">forced textbox mode rather than popup window live run<\/a> and which changed in <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart_diff.php---GETME\" title=\"pie_chart.php\" target=\"_blank\" title=\"Click picture\">this way<\/a><\/li>\n<\/ul>\n<p> &#8230; regarding this.  We hope so.<\/p>\n<hr>\n<p id='cajpwt'>Previous relevant <a target=_blank title='Conditional Alternative to Javascript Popup Windows Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/conditional-alternative-to-javascript-popup-windows-tutorial\/'>Conditional Alternative to Javascript Popup Windows Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ourprompt.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Conditional Alternative to Javascript Popup Windows Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ourprompt.jpg\" title=\"Conditional Alternative to Javascript Popup Windows Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Conditional Alternative to Javascript Popup Windows Tutorial<\/p><\/div>\n<p>We&#8217;ve been working on HTML Javascript <i>conditional<\/i> Javascript <a target=_blank title='Functional overload information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Function_overloading'>&#8220;overload&#8221;<\/a> thoughts.  The first project with respect to this?  Conditional &#8220;overload&#8221; of the Javascript prompt and confirm and alert <a target=_blank title='HTML window.open information from w3schools' href='https:\/\/www.w3schools.com\/js\/js_popup.asp'>popup windows<\/a> with an HTML form containing input type=text and input type=submit &#8220;button&#8221; arrangements.  You might recall us recently using a jQuery dialog method of Javascript prompt window &#8220;overload&#8221; ideas when we presented <a title='Javascript Function Overload Genericization Tutorial' href='#jfogt'>Javascript Function Overload Genericization Tutorial<\/a>.  Well, we&#8217;ve had time since then to research the latest with Javascript &#8220;sleep&#8221; thoughts (we still think a no go) and then thought that we could conditionally swing the &#8220;overloading&#8221; using the navigation talents of the HTML form element.  You can see where we got to in a <a target=_blank title='YouTube' href='http:\/\/www.youtube.com'>YouTube<\/a> clip below &#8230;<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/RY4kByCcFuI\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>Why is &#8220;<i>conditional<\/i>&#8221; the go today?  Well, we don&#8217;t see that we have to upset the applecart for all platforms, for what we are thinking to apply this logic to.  We just want the flexibility and ability to turn this functionality on or off, depending.  And so, today, we just have written a proof of concept HTML and Javascript web application you can try at <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ourprompt.html_GETME\" title=\"ourprompt.html\">ourprompt.html<\/a>&#8216;s various guises as &#8230;<\/p>\n<ul>\n<li>your platform&#8217;s default <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ourprompt.html\" title=\"ourprompt.html\">mode of use live run<\/a> &#8230; versus &#8230;<\/li>\n<li>force HTML input=text and input type=button <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ourprompt.html?nojwin=y\" title=\"ourprompt.html\">mode of use<\/a> &#8230; the default mode of use in our code for Safari and iPad and iPhone usage (but forcible by URL suffix &#8220;?nojwin=y&#8221;)<\/li>\n<\/ul>\n<p>With Javascript what&#8217;s the &#8220;scope&#8221; of &#8230;<\/p>\n<p><code><br \/>\nvar isSafari = \/Safari\/.test(navigator.userAgent) &amp;&amp; \/Apple Computer\/.test(navigator.vendor);<br \/>\nif (document.URL.indexOf('nojwin') != -1 || isSafari || navigator.userAgent.match(\/iPhone|iPad\/i)) {<br \/>\nvar prompt = function(zwords, defwords){<br \/>\n\/\/ logic for window.prompt() override<br \/>\n\/\/ see <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ourprompt.html_GETME\" title=\"ourprompt.html\">ourprompt.html<\/a> for more<br \/>\n};<br \/>\nvar alert = function(zwords){<br \/>\n\/\/ logic for window.confirm() override<br \/>\n\/\/ see <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ourprompt.html_GETME\" title=\"ourprompt.html\">ourprompt.html<\/a> for more<br \/>\n};<br \/>\nvar confirm = function(zwords){<br \/>\n\/\/ logic for window.alert() override<br \/>\n\/\/ see <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ourprompt.html_GETME\" title=\"ourprompt.html\">ourprompt.html<\/a> for more<br \/>\n};<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; this &#8220;overloading&#8221; of the Javascript popup windows?  Just that web application instance.  For instance, an HTML iframe, within this webpage, sent the same code, depending on its <i>src<\/i> property, would &#8220;rethink&#8221; the whole &#8220;overloading&#8221; decisions.  Similarly for any other webpage execution of it.  It &#8220;depends&#8221;, and today, that&#8217;s <i>all<\/i> we&#8217;re asking.<\/p>\n<p>When you talk of HTML form elements and navigation, a topic of interest is the role of the Enter key functionality when your &#8220;form&#8221; has one HTML input type=text, as the &#8220;pairing&#8221; for the Javascript prompt popup window &#8220;overloading&#8221; scenario involves.  Here, we tried the HTML form <i>onsubmit<\/i> event and HTML input type=submit <i>onclick<\/i> event, as candidate places for intervention, to no avail, and &#8220;bit the bullet&#8221;, thanks to the genius of <a target=_blank title='Useful link, thanks' href='http:\/\/jennifermadden.com\/javascript\/stringEnterKeyDetector.html'>this webpage<\/a>&#8216;s advice, thanks, and intervened at the HTML input type=text&#8217;s <a target=_blank title='Events information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_eventattributes.asp'><i>onkeypress<\/i><\/a> event, looking for the keyboard press of the Enter key to intervene, successfully, that aim being to simulate that HTML input type=text&#8217;s <a target=_blank title='Events information from w3schools' href='https:\/\/www.w3schools.com\/tags\/ev_onblur.asp'><i>onblur<\/i><\/a> event logic <i>before<\/i> the form submits its method=GET navigation back to the same code source <font size=1>&#8230; fancy that?!<\/font><\/p>\n<p>You can also see this play out at WordPress 4.1.1&#8217;s <a target=_blank  href='https:\/\/www.rjmprogramming.com.au\/ITblog\/conditional-alternative-to-javascript-popup-windows-tutorial\/'>Conditional Alternative to Javascript Popup Windows Tutorial<\/a>.<\/p>\n<hr>\n<p id='jfogt'>Previous relevant <a target=_blank title='Javascript Function Overload Genericization Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-function-overload-genericization-tutorial\/'>Javascript Function Overload 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\/ology_chalkboard.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Javascript Function Overload Genericization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/js_fo_genericization.jpg\" title=\"Javascript Function Overload Genericization Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Javascript Function Overload Genericization Tutorial<\/p><\/div>\n<p>A while back now, when we presented <a title='Javascript Function Overload Primer Tutorial' href='#jfopt'>Javascript Function Overload Primer Tutorial<\/a> as shown way below, we considered an <font color=green>ultimate<\/font> &#8220;dream&#8221; scenario &#8230;<\/p>\n<blockquote>\n<p>You may wonder, at this point, why this blog posting took so long?  Well, the original &#8220;dream&#8221; with this work &#8230; <font size=1>which, by the way, cannot work with functions like <i>Math.pow(x,y)<\/i>, because of the Javascript language interpretation of the &#8220;.&#8221;, unfortunately<\/font> &#8230; was to take the (old) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ology_chalkboard.html_GETME\" title=\"ology_chalkboard.html\">ology_chalkboard.html<\/a> of <a title='Suffix Ology Primer Tutorial' href='#sopt'>Suffix Ology Primer Tutorial<\/a> as shown below, from some days back, and have it be virtually untouched apart from the inclusion of the external Javascript call &#8230;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript' src='dotdotdot.js' defer&gt;&lt;\/script&gt;<br \/>\n<\/code>\n<\/p><\/blockquote>\n<p> &#8230; related to our many &#8220;DotDotDot&#8221; ESL web applications at this blog.  Sorry to throw all this &#8220;inhouse&#8221; stuff at you, but these are genericization and overloading considerations in Javascript and jQuery of pretty general interest, we feel, so we want to amend the original dream method of <b>just including<\/b> &#8230;<\/p>\n<p><code><br \/>\n&lt;head&gt;<br \/>\n<b><\/b><br \/>\n<b><br \/>\n&lt;script type='text\/javascript' src='dotdotdot.js' defer&gt;&lt;\/script&gt;<br \/>\n<\/b><br \/>\n<\/code><\/p>\n<p> &#8230; near the top of the &lt;head&gt;&lt;\/head&gt; section to <b>now be<\/b> just a <strike><font color=green>ultimate<\/font><\/strike> &#8220;dream&#8221; &#8230;<\/p>\n<p><code><br \/>\n<b><br \/>\n&lt;link href='\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.8.16\/themes\/base\/jquery-ui.css' rel='stylesheet' type='text\/css'&gt;<br \/>\n&lt;style> .ui-dialog .ui-dialog-titlebar-close { display: none; } &lt;\/style&gt;<br \/>\n&lt;script src=\"http:\/\/code.jquery.com\/jquery-1.9.1.js\"&gt;&lt;\/script&gt;<br \/>\n&lt;script src=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/jQuery\/Dialog\/Modal\/jquery-ui-1.11.1.custom\/jquery-ui.js\"&gt;&lt;\/script&gt;<br \/>\n&lt;script type='text\/javascript' src='dotdotdot.js'&gt;&lt;\/script&gt;<br \/>\n<\/b><br \/>\n<b><\/b><br \/>\n&lt;\/head&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; placed at the bottom of the &lt;head&gt;&lt;\/head&gt; section (ie. just above &lt;\/head&gt;) &#8230; because, now, dotdotdot.js needs to be aware of your &#8220;local&#8221; Javascript and tailor its &#8220;thinking&#8221; to that &#8220;local&#8221; Javascript thinking.  And so all of this begs the question &#8230; Does code eat Weet Bix in the morning?  &#8230; And if so, will it be putting adverse pressure on you to complete that web application you were going to do making breakfast, coffee and toast in the morning just on getting up, even before you need to want &#8220;breakfast, coffee and toast&#8221;? &#8230; But we digress.<\/p>\n<p>So what stops our &#8220;dream&#8221; being <font color=green>ultimate<\/font>?  Well, we couldn&#8217;t find a way to dynamically load jQuery into an external Javascript, for our scenario, at least, though we tried lots of good ideas from websites out there including this very useful <a target=_blank title='Useful link' href='http:\/\/www.stevesouders.com\/blog\/2010\/05\/11\/appendchild-vs-insertbefore\/'>one<\/a> &#8230; thanks.  So we loaded the jQuery from the parent HTML file instead.<\/p>\n<p>We&#8217;ve used 3 &#8220;guinea pig&#8221; DotDotDot web applications to use to get the important &#8220;middle<strike>man<\/strike><a target=_blank title='I learn, I learn' href='https:\/\/www.youtube.com\/watch?v=s6EaoPMANQM'>person<\/a>&#8221; dotdotdot.js right, with no changes needed, again, to our prompt.js from all those days ago &#8230; so &#8230;<\/p>\n<p>Here&#8217;s the main code parts of this project, again &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/prompt.js_GETME\" title=\"prompt.js\">prompt.js<\/a> is &#8220;child&#8221; external Javascript, unchanged today, called by &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dotdotdot.js--GETME\" title=\"dotdotdot.js\">dotdotdot.js<\/a> is &#8220;parent&#8221; external Javascript, changed, in major ways, today as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dotdotdot.js--GETME\" title=\"dotdotdot.js\">this link<\/a>, called by &#8230;<\/li>\n<ol>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ology_chalkboard.html---GETME\" title=\"ology_chalkboard.html\">ology_chalkboard.html<\/a> HTML programming source code changed from previous time, but ironically almost the same as the first incarnation called <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ology_chalkboard.html_GETME\" title=\"ology_chalkboard.html\">ology_chalkboard.html_GETME<\/a>, as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ology_chalkboard.html---GETME\" title=\"ology_chalkboard.html\">this link<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/phrasalverbs_chalkboard.html--GETME\" title=\"phrasalverbs_chalkboard.html\">phrasalverbs_chalkboard.html<\/a> HTML programming source code changed from previous time as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/phrasalverbs_chalkboard.html--GETME\" title=\"phrasalverbs_chalkboard.html\">this link<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/englishexpressions_chalkboard.html--GETME\" title=\"englishexpressions_chalkboard.html\">englishexpressions_chalkboard.html<\/a> HTML programming source code changed from previous time as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/englishexpressions_chalkboard.html--GETME\" title=\"englishexpressions_chalkboard.html\">this link<\/a><\/li>\n<\/ol>\n<\/ul>\n<p> with the live run set now &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ology_chalkboard.html\" title=\"ology_chalkboard.html\">ology_chalkboard.html<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/phrasalverbs_chalkboard.html\" title=\"phrasalverbs_chalkboard.html\">phrasalverbs_chalkboard.html<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/englishexpressions_chalkboard.html\" title=\"englishexpressions_chalkboard.html\">englishexpressions_chalkboard.html<\/a><\/li>\n<\/ul>\n<p>You might want to get the background to all this by reading <a title='Javascript Dynamic Function Overload Tutorial' href='#jdfot'>Javascript Dynamic Function Overload Tutorial<\/a> as shown below.<\/p>\n<hr>\n<p id='jdfot'>Previous relevant <a target=_blank title='Javascript Dynamic Function Overload Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-dynamic-function-overload-tutorial\/'>Javascript Dynamic Function Overload 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\/ology_chalkboard.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Javascript Dynamic Function Overload Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/js_fo_dynamic.jpg\" title=\"Javascript Dynamic Function Overload Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Javascript Dynamic Function Overload Tutorial<\/p><\/div>\n<p>Once you&#8217;ve succeeded with a piece of coding logic that is functioning, and you went to the trouble of making it modular, which we feel we did a couple of days ago when we presented <a title='Javascript Function Overload Primer Tutorial' href='#jfopt'>Javascript Function Overload Primer Tutorial<\/a>, it is especially important to review the process, even more so if it took a lot of nutting out.  In these circumstances you can fall into settling for &#8220;cute and static&#8221;.  By that we mean, you solved something, but you also took something away, and sometimes that is good, but isn&#8217;t it better to spare the user from &#8220;backward compatibility loss&#8221;.  We hate &#8220;bcl&#8221; here.<\/p>\n<p>Also involved with this is an important matter regarding &#8220;modularity&#8221; regarding external Javascript.  We&#8217;re reasonably pleased with the break up of Javascript into parts with this project, though many people would want lots more break up parts than we settle for, we readily admit.  But wouldn&#8217;t it be good for a mechanism (and that mechanism will, today, involve &#8220;get&#8221; parameters on the address bar URL used) that becomes user controllable (by some HTML <a target=_blank title='HTML a tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_a.asp'><i>a<\/i><\/a> tag links the user can click or touch), to control whether a &#8220;modular&#8221; part comes into play or not.  This can be controlled at &#8220;dotodotdot.js&#8221; parent external Javascript, the &#8220;middleman&#8221; of our project.  If &#8220;dotdotdot.js&#8221; could be coaxed into a dynamic view of whether it should load &#8220;prompt.js&#8221; (containing the overload to Javascript <i>prompt()<\/i> function) or not.  The &#8220;not&#8221; akin to the old arrangements that we &#8220;clobbered&#8221; and caused &#8220;bcl&#8221; sadness perhaps &#8230; <font size=1>here&#8217;s us passing a virtual hanky<\/font>.<\/p>\n<p>So yes, it is mainly the changes to &#8220;dotdotdot.js&#8221; that we want to emphasize today, and it is the &#8220;modular&#8221; arrangements of the past that helped make these changes simple and effective, we feel.  The <b>bold<\/b> bits below are all there is to the &#8220;middleman&#8221; changes &#8230;<\/p>\n<p><code><br \/>\n  \/\/ Earlier parts are unchanged ...<br \/>\n  \/\/ ...<br \/>\nvar mainview = \"mainview\";<br \/>\nvar minorview = \"\";<br \/>\nvar altview = \"altview\";<br \/>\n<b><br \/>\nif (document.URL.toLowerCase().indexOf('useoldprompt=') == -1) {<\/b><br \/>\nvar head= document.getElementsByTagName('head')[0]; \/\/ thanks to http:\/\/unixpapa.com\/js\/dyna.html<br \/>\nvar script= document.createElement('script');<br \/>\nscript.type= 'text\/javascript';<br \/>\nscript.src= 'prompt.js';  \/\/ our window.prompt function override technique<br \/>\nhead.appendChild(script);<br \/>\n<b>} <\/b><br \/>\n<b><br \/>\nfunction bitlater() {<br \/>\n document.getElementById('modesel').value = 'Button';<br \/>\n gameshowmode(document.getElementById('modesel').value);<br \/>\n}<br \/>\n<\/b><br \/>\nfunction atstartsel() {<br \/>\n  var hones=document.getElementsByTagName('h1');<br \/>\n  hones[0].innerHTML=hones[0].innerHTML.replace(\" Game\", \"&lt;select onchange=<b>\\\" if (document.URL.toLowerCase().indexOf('useoldprompt=') == -1) { document.getElementById('dota').href='.\/ology_chalkboard.html?useoldprompt=' + this.value; }<\/b> gameshowmode(this.value); <b>\\\"<\/b> id='modesel'&gt;&lt;option value=''&gt;Dropdown&lt;\/option&gt;&lt;option value='Button'&gt;Button&lt;\/option&gt;&lt;\/select&gt; Game\");<br \/>\n<b>if (document.URL.toLowerCase().indexOf('useoldprompt=') == -1) {<br \/>\n  nourd=Math.abs(nourd); \/\/ use this to differentiate the modes of prompt() meaning<br \/>\n        \/\/ ... positive is jQuery, negative is Javascript prompt()<br \/>\n  hones[0].innerHTML=hones[0].innerHTML.replace(\"Dot\", \"D&lt;a id='dota' title='Do not overload the Javascript prompt() function with a jQuery UI Dialog method' href='.\/ology_chalkboard.html?useoldprompt=y'&gt;o&lt;\/a&gt;t\");<br \/>\n} else {<br \/>\n  hones[0].innerHTML=hones[0].innerHTML.replace(\"Dot \", \"D&lt;a id='dota' title='Overload the Javascript prompt() function using a jQuery UI Dialog method' href='.\/ology_chalkboard.html'&gt;o&lt;\/a&gt;t \");<br \/>\n  if (document.URL.indexOf('=Button') != -1) setTimeout(bitlater, 1000);<br \/>\n}<\/b><br \/>\n  var pdivs=document.getElementsByTagName('div');<br \/>\n  mainview='';<br \/>\n  \/\/ Rest is unchanged ...<br \/>\n  \/\/ ...<br \/>\n<\/code><\/p>\n<p> &#8230; so we definitely recommend external Javascript modular code for a few reasons &#8230;<\/p>\n<ul>\n<li>external Javascript modular code aids documentation even by virtue of the filenames used<\/li>\n<li>there are more &#8220;picking up where you left off&#8221; clues with external Javascript modular code<\/li>\n<li>external Javascript modular code can have business logic ideas contained via the way it is called, which you can read about, at this blog, with <a target=_blank title='External Javascript Genericity Follow Up Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/external-javascript-genericity-follow-up-tutorial\/'>External Javascript Genericity Follow Up Tutorial<\/a> and\/or <a target=_blank title='PHP Writes PHP Vertical TextBoxes Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-writes-php-vertical-textboxes-primer-tutorial\/'>PHP Writes PHP Vertical TextBoxes Primer Tutorial<\/a> and still be aware of &#8220;get&#8221; parameter usage mechanisms with regard to the address bar URL<\/li>\n<li>external Javascript modular code can access the global variables of all the parent and sibling external Javascript modular code global variables around it<\/li>\n<\/ul>\n<p>Here&#8217;s the main code parts of this project, again &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/prompt.js_GETME\" title=\"prompt.js\">prompt.js<\/a> is &#8220;child&#8221; external Javascript, unchanged today, called by &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dotdotdot.js-GETME\" title=\"dotdotdot.js\">dotdotdot.js<\/a> is &#8220;parent&#8221; external Javascript, changed today as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dotdotdot.js-GETME\" title=\"dotdotdot.js\">this link<\/a>, called by &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ology_chalkboard.html--GETME\" title=\"ology_chalkboard.html\">ology_chalkboard.html<\/a> HTML programming source code changed from previous time as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ology_chalkboard.html--GETME\" title=\"ology_chalkboard.html\">this link<\/a><\/li>\n<\/ul>\n<p> &#8230; and for which you can (re)try live runs at &#8230; <\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ology_chalkboard.html\" title=\"ology_chalkboard.html\">live run<\/a> with Javascript <i>prompt()<\/i> overloaded (or overridden), perhaps, as controlled by the user &#8230; versus &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ology_chalkboard.htm\" title=\"ology_chalkboard.htm\">live run<\/a> the old way<\/li>\n<\/ul>\n<p>We hope this is food for thought.  Yoghurt, any one?!<\/p>\n<hr>\n<p id='jfopt'>Previous relevant <a target=_blank title='Javascript Function Overload Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-function-overload-primer-tutorial\/'>Javascript Function Overload 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\/ology_chalkboard.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Javascript Function Overload Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/js_fo.jpg\" title=\"Javascript Function Overload Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Javascript Function Overload Primer Tutorial<\/p><\/div>\n<p>Today&#8217;s blog posting, long in the making, is about Javascript&#8217;s function override (or overload) capabilities.  We&#8217;ve spoken about this before in relation to C++ or Java with <a target=_blank title='Override or overload tutorials' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overload'>these tutorials<\/a>.<\/p>\n<p>So let&#8217;s do a simple example first.  Take the Javascript global function <a target=_blank title='Javascript encodeURIComponent information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_encodeuricomponent.asp'><i>encodeURIComponent([String])<\/i><\/a> &#8230; <font size=1>to the seaside (would be nice)<\/font> &#8230; and the very similar, but not quite the same <a target=_blank title='Javascript encodeURI information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_encodeuri.asp'><i>encodeURI<\/i><\/a> &#8230; okay, time&#8217;s up.  Now examine two bits of code, the first from a parent HTML and the second from the HTML of its &#8220;child&#8221; iframe &#8230;<\/p>\n<p><code><br \/>\n  document.title=encodeURIComponent(\" The rain in Spain falls mainly on the plain. Yes? \");<br \/>\n<\/code><\/p>\n<p><code><br \/>\n  document.title=encodeURIComponent(\" The rain in Spain falls mainly on the plain. Yes? \");<br \/>\n<\/code><\/p>\n<p> &#8230; patently the same &#8230; but they result in different <i>document.title<\/i> results, as per, respectively &#8230;<\/p>\n<p><code><br \/>\n%20The%20rain%20in%20Spain%20falls%20mainly%20on%20the%20plain.%20Yes?%20<br \/>\n<\/code><\/p>\n<p><code><br \/>\n%20The%20rain%20in%20Spain%20falls%20mainly%20on%20the%20plain.%20Yes%3F%20<br \/>\n<\/code><\/p>\n<p>So how does this figure?  Well, the child HTML iframe call really calls the Javascript <i>encodeURIComponent<\/i> function, but the parent HTML call actually calls a local overload (or override) function within its own Javascript as per &#8230;<\/p>\n<p><code><br \/>\nfunction encodeURIComponent(es) {<br \/>\n  return encodeURI(es);<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; and this shows that Javascript can perform some rudimentary overload (or override) methodologies, and how that &#8220;?&#8221; (not translated by <i>encodeURI<\/i>) is translated by the Javascript (native) <i>encodeURIComponent<\/i> function.<\/p>\n<p>You may wonder, at this point, why this blog posting took so long?  Well, the original &#8220;dream&#8221; with this work &#8230; <font size=1>which, by the way, cannot work with functions like <i>Math.pow(x,y)<\/i>, because of the Javascript language interpretation of the &#8220;.&#8221;, unfortunately<\/font> &#8230; was to take the (old) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ology_chalkboard.html_GETME\" title=\"ology_chalkboard.html\">ology_chalkboard.html<\/a> of <a title='Suffix Ology Primer Tutorial' href='#sopt'>Suffix Ology Primer Tutorial<\/a> as shown below, from some days back, and have it be virtually untouched apart from the inclusion of the external Javascript call &#8230;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript' src='dotdotdot.js' defer&gt;&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; that did end up making it into the reworked <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ology_chalkboard.html-GETME\" title=\"ology_chalkboard.html\">ology_chalkboard.html<\/a> but as the task of overloading (or overriding) the function &#8230;<\/p>\n<p><code><br \/>\nvar userinput = <a target=_blank title='Javascript window.prompt information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_prompt.asp'>prompt<\/a>([the prompt], [the default value]);<br \/>\n<\/code><\/p>\n<p> &#8230; turned into reality &#8220;reworked&#8221; may not be a descriptive enough term.  We started down the route of a child HTML iframe piece of HTML calling the Javascript native <i>prompt([the prompt], [the default value])<\/i> while the parent did the overloading (or overriding), but as the timing of events got involved the &#8220;dream&#8221; was modified to lose its cute, generic flavour &#8230; but it was achieved, and we used <a target=_blank title='jQuery UI Dialog' href='https:\/\/jqueryui.com\/dialog\/'>jQuery UI Dialog<\/a> techniques to end up with what we ended up with, and which you can read about, also, at this blog, at <a target=_blank title='jQuery UI Modal Dialog Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/jquery-ui-modal-dialog-primer-tutorial\/'>jQuery UI Modal Dialog Primer Tutorial<\/a>.  Please note, though, that the original HTML source code calls that involved <i>var blah=prompt[prompt blah],[default blah])<\/i> &#8230; looking like &#8230; <\/p>\n<p><code><br \/>\nfunction addsome() {<br \/>\n  var two=\"\", three=\"\", <b>one=prompt(\"Enter first of your Suffix Ology parts (adjust accordingly)\", \"ology\");<\/b><br \/>\n  if (one != \"\") {<br \/>\n   \/\/ more here originally and much more, and reworked, with latest version<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; remain in the code as these calls (but now plus quite a few more), that the parent HTML code overloads (or overrides) via <i>dotdotdot.js<\/i> including our new <i>prompt.js<\/i> via &#8230; <\/p>\n<p><code><br \/>\nvar head= document.getElementsByTagName('head')[0]; \/\/ thanks to http:\/\/unixpapa.com\/js\/dyna.html<br \/>\nvar script= document.createElement('script');<br \/>\nscript.type= 'text\/javascript';<br \/>\nscript.src= 'prompt.js';  \/\/ our window.prompt function override technique<br \/>\nhead.appendChild(script);<br \/>\n<\/code><\/p>\n<p> &#8230; and, as it says in the code, we thank this <a target=_blank title='Useful link' href='http:\/\/unixpapa.com\/js\/dyna.html'>useful link<\/a> for the help here.<\/p>\n<p>Being as we involved jQuery UI Dialogs we figured why not add some design &#8220;smarts&#8221; to our new home styled <i>prompt()<\/i> &#8220;windows&#8221;, so as well as the usual &#8220;Cancel&#8221; and &#8220;OK&#8221; buttons of the native Javascript <i>prompt()<\/i> windows we add &#8220;Will Append More in 5&#8221; and &#8220;Will Append More in 30&#8221; allowances to append user input to the same user input.  So the &#8220;bottom line&#8221; is that our new HTML calls <i>prompt()<\/i> via its external Javascript&#8217;s <i>prompt.js<\/i> as per &#8230;<\/p>\n<p><code><br \/>\nfunction prompt(q,d) {<br \/>\n  \/\/ lots of code before the \"disastrous return\" scenario way below<br \/>\n<b><\/b><br \/>\n  \/\/ end of lots of code before the \"disastrous return\" scenario just below<br \/>\n  return '';<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; which you can examine at &#8230; <\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/prompt.js_GETME\" title=\"prompt.js\">prompt.js<\/a> is &#8220;child&#8221; external Javascript called by &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dotdotdot.js_GETME\" title=\"dotdotdot.js\">dotdotdot.js<\/a> is &#8220;parent&#8221; external Javascript called by &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ology_chalkboard.html-GETME\" title=\"ology_chalkboard.html\">ology_chalkboard.html<\/a> HTML programming source code changed from previous times as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ology_chalkboard.html-GETME\" title=\"ology_chalkboard.html\">this link<\/a><\/li>\n<\/ul>\n<p> &#8230; and which you can try live runs at &#8230; <\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ology_chalkboard.html\" title=\"ology_chalkboard.html\">live run<\/a> with Javascript <i>prompt()<\/i> overloaded (or overridden) &#8230; versus &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ology_chalkboard.htm\" title=\"ology_chalkboard.htm\">live run<\/a> the old way<\/li>\n<\/ul>\n<p> &#8230; and for those simple encodeURI(Component) examples &#8230; &#8230; <\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/encodeURIComponent.htm_GETME\" title=\"encodeURIComponent.htm\">encodeURIComponent.htm<\/a> is Javascript overloading <i>encodeURIComponent<\/i> (mapped to <i>encodeURI<\/i>) parent of the child HTML iframe &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/encodeURIComponent.html_GETME\" title=\"encodeURIComponent.html\">encodeURIComponent.html<\/a> calling Javascript native <i>encodeURIComponent<\/i><\/li>\n<\/ul>\n<p> &#8230; and which you can try live runs at &#8230; <\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/encodeURIComponent.htm\" title=\"encodeURIComponent.htm\">live run<\/a> with Javascript <i>encodeURIComponent()<\/i> overloaded (or overridden) (both) results shown &#8230; versus &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/encodeURIComponent.html\" title=\"encodeURIComponent.html\">live run<\/a> only showing the Javascript native <i>encodeURIComponent<\/i> call result<\/li>\n<\/ul>\n<p>We really hope this is food for thought for your Javascript client side coding.<\/p>\n<hr>\n<p id='sopt'>Previous relevant <a target=_blank title='Suffix Ology Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/suffix-ology-primer-tutorial\/'>Suffix Ology 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\/ology_chalkboard.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Suffix Ology Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ology_chalkboard.jpg\" title=\"Suffix Ology Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Suffix Ology Primer Tutorial<\/p><\/div>\n<p>A lot of nouns in English related to &#8220;the study of&#8221; have the suffix &#8220;ology&#8221;.  So, today, we team up the wonderful <a target=_blank href='http:\/\/chemistry.about.com\/od\/mathsciencefundamentals\/a\/ologylist_3.htm' title='List of (sciencific) nouns with suffix ology'>list<\/a> of mainly scientific nouns that have a suffix of &#8220;ology&#8221; (thanks) with the HTML <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element as one of the methods of display for our web application.  A new alternative mode of user questioning via HTML input type=button via the use of the HTML element <a target=_blank title='HTML alt attribute information from w3schools'><i>alt<\/i><\/a> attribute (to shield the answer from a user hovering over the button) is introduced into the &#8220;mix&#8221; today.<\/p>\n<p>This rather technical word and sentence game could help <a target=_blank title='ESL information from Wikipedia' href='http:\/\/en.wikipedia.org\/wiki\/English_as_a_second_or_foreign_language'>ESL<\/a> students, but in all likelihood could benefit native English speakers as well.<\/p>\n<p>So today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ology_chalkboard.html\" title=\"Click picture\">live run<\/a> based on HTML and Javascript programming code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ology_chalkboard.html_GETME\" title=\"ology_chalkboard.html\">ology_chalkboard.html<\/a> incorporates that Translate and Hear functionality using the great <a target=_blank title='Google Translate' href='http:\/\/translate.google.com'>Google Translate<\/a> product that we talked about previously below with <a title='Google Translate English Phrasal Verbs and Idioms Tutorial' href='#gtepvait'>Google Translate English Phrasal Verbs and Idioms Tutorial<\/a> is shown below.<\/p>\n<hr>\n<p id='gtepvait'>Previous relevant <a target=_blank title='Google Translate English Phrasal Verbs and Idioms Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-translate-english-phrasal-verbs-and-idioms-tutorial\/'>Google Translate English Phrasal Verbs and Idioms Tutorial<\/a> as shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/englishexpressions_chalkboard.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Google Translate English Phrasal Verbs and Idioms Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/englishexpressionschalkboard.jpg\" title=\"Google Translate English Phrasal Verbs and Idioms Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Google Translate English Phrasal Verbs and Idioms Tutorial<\/p><\/div>\n<p>A couple of our recent <a target=_blank title='ESL information from Wikipedia' href='http:\/\/en.wikipedia.org\/wiki\/English_as_a_second_or_foreign_language'>ESL<\/a> tutorials regarding Phrasal Verbs (<a target=_blank title='English Expressions and Idioms Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/english-phrasal-verb-game-primer-tutorial\/'>English Phrasal Verb Game Primer Tutorial<\/a>) and English Expressions and Idioms (as with <a title='English Expressions and Idioms Game Primer Tutorial' href='#eeaigpt'>English Expressions and Idioms Game Primer Tutorial<\/a> below) have a lot in common, especially their capacity to baffle a non-native English speaker.<\/p>\n<p>With this in mind we introduce some new optional functionality that may help out an ESL student completely flummoxed with a Phrasal Verb or an English Expression or Idiom by using Google Translate to translate the phrase or idiom back to their mother tongue.  Obviously, this translation could well be imperfect, but it is designed with a view to the user having no idea where to start understanding the English presented to them.<\/p>\n<p>And so we &#8220;house&#8221; this new functionality in some external Javascript which was <i>almost<\/i> okay to just plug into our two other HTML <i>parents<\/i> but not quite.<\/p>\n<p>Maybe you wonder how it can get even close?  Glad you asked &#8230; well, we like to add external Javascript and design it as independently as possible, so that it can be called by either method below, the latter being an address bar URL and the former being in the HTML&#8217;s <i>head<\/i> section, to become <b>active<\/b> &#8230;<\/p>\n<ol>\n<li><code>&lt;script src='translate_hear.js<b>?translate_hear=yes<\/b>' type='text\/javascript'&gt;&lt;\/script&gt;<\/code><\/li>\n<li><code>http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/englishexpressions_chalkboard.html<b>?translate_hear=yes<\/b><\/code><\/li>\n<\/ol>\n<p> &#8230; and only once this is established, the independently minded external Javascript looks for <i>&gt;.&lt;\/a&gt;<\/i> within <i>document.body.innerHTML<\/i> &#8230; I mean, who&#8217;d be crazy enough to have a link to a dot (.) &#8230; oops! &#8230; anyway &#8230;<\/p>\n<p> &#8230; then we store away (in global var<font size=1>iable<\/font> <i>alist<\/i>&#8216;s global var<font size=1>iable<\/font> alistone) the object of this HTML <i>a<\/i> tag in the external Javascript&#8217;s list of HTML <i>a<\/i> tag elements it derived via &#8230;<\/p>\n<p><code><br \/>\nalist=document.getElementsByTagName('a');<br \/>\n<\/code><\/p>\n<p>We like what happens next.  We are mostly familiar with an HTML <i>a<\/i> tag having the <i>href<\/i> property be a navigation destination, or then perhaps extra functionality that gets executed with the <i>onclick<\/i> event.  Well, we don&#8217;t want to meddle with whatever happens with this &#8230; remember our <i>independently minded<\/i> external Javascript?  Well, we only ask that the parent doesn&#8217;t also define any functionality for the <i>onmousedown<\/i> event, which we want to &#8220;purloin&#8221; (is that the word?) into action for us.  Here&#8217;s our definition of what to do with that dot (yes, <u>.<\/u>) HTML <i>a<\/i> element&#8217;s <i>onmousedown<\/i> event &#8230;<\/p>\n<p><code><br \/>\n            alist[alistone].addEventListener('mousedown', function(event) {<br \/>\n               var xt=document.getElementById('xtranslate');<br \/>\n               var xh=document.getElementById('xhear');<br \/>\n               if (xt && xh && alistone &gt;= 0) {<br \/>\n                 var thishref=alist[alistone].href;<br \/>\n                 var thishparts=thishref.split('\/');<br \/>\n                 if (thishparts.length &gt;= 2) {<br \/>\n                  var thewordsare=thishparts[eval(-1 + thishparts.length)].replace(\/\\+\/g, '%20');<br \/>\n                  if (xt.checked && lto.replace('en','') != '') {<br \/>\n                   urlone='https:\/\/transl' + 'ate.google.com\/#' + lfrom + '\/' + lto + '\/' + thewordsare; \/\/, '_blank', 'top=30,left=30,width=300,height=300');<br \/>\n                   setTimeout(inawhileone, 2100);<br \/>\n                  }<br \/>\n                  if (xh.checked && lto != '') {<br \/>\n                   urltwo='https:\/\/tra' + 'nslate.google.com\/translate_tts?tl=' + lto + '&q=' + thewordsare; \/\/, '_blank', 'top=30,left=330,width=300,height=300');<br \/>\n                   setTimeout(inawhiletwo, 2300);<br \/>\n                  }<br \/>\n                 }<br \/>\n               }<br \/>\n             }, false);<br \/>\n<\/code><\/p>\n<p> &#8230; where the <i>xtranslate<\/i> and <i>xhear<\/i> ID&#8217;ed elements are (HTML type=)checkboxes for user defined <i>Translate<\/i> and <i>Hear<\/i> optional extra active functionality decisions, with reference to global var<font size=1>iable<\/font> <i>lto<\/i> which contains the Google Translate language code for the destination language of the user&#8217;s choice (from a dropdown list, the contents of which we frequently use through the www.rjmprogramming.com.au domain).<\/p>\n<p>So we must thank Google for their great <a target=_blank title='Google Translate' href='http:\/\/translate.google.com'>Google Translate<\/a> product, but, again, caution the user into thinking such translations are always sensibly &#8220;translatable&#8221; between languages.  Again, we stress, this new functionality should just be an aid to the desperate ESL student with little idea about some English presented to them.<\/p>\n<p>Again, we make use of Javascript <a target=_blank title='Javascript setTimeout information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> &#8220;scheduled&#8221; Javascript function controller mechanism.  We find it endlessly useful, especially with events in ever changing platform environments.<\/p>\n<p>And so the two pieces of HTML and Javascript affected are &#8230;<\/p>\n<ol>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/englishexpressions_chalkboard.html\" title=\"English Expression and Idiom Game\">Game<\/a> you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/englishexpressions_chalkboard.html-GETME\" title='englishexpressions_chalkboard.html'>englishexpressions_chalkboard.html<\/a> (changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/englishexpressions_chalkboard.html-GETME\" title='englishexpressions_chalkboard.html'>this way<\/a>) uses HTML and Javascript programming languages with this <a target=_blank title=\"live run\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/englishexpressions_chalkboard.html\">live run<\/a> link<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/phrasalverbs_chalkboard.html\" title=\"English Expression and Idiom Game\">Game<\/a> you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/phrasalverbs_chalkboard.html-GETME\" title='phrasalverbs_chalkboard.html'>phrasalverbs_chalkboard.html<\/a> (changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/phrasalverbs_chalkboard.html-GETME\" title='phrasalverbs_chalkboard.html'>this way<\/a>) uses HTML and Javascript programming languages with this <a target=_blank title=\"live run\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/phrasalverbs_chalkboard.html\">live run<\/a> link<\/li>\n<\/ol>\n<p> &#8230; both calling our new external Javascript you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/translate_hear.js_GETME\" title=\"translate_hear.js\">translate_hear.js<\/a> with new optional <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/englishexpressionschalkboard.jpg\">functionality<\/a> <i>Translate<\/i> and\/or <i>Hear<\/i> some baffling English in an ESL student&#8217;s native tongue, perhaps.<\/p>\n<hr>\n<p id='eeaigpt'>Previous relevant <a target=_blank title='English Expressions and Idioms Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/english-expressions-and-idioms-game-primer-tutorial\/'>English Expressions and Idioms Game Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/englishexpressions_chalkboard.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"English Expressions and Idioms Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/englishexpressions_chalkboard.jpg\" title=\"English Expressions and Idioms Game Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">English Expressions and Idioms Game Primer Tutorial<\/p><\/div>\n<p>Advanced <a target=_blank title='ESL information from Wikipedia' href='http:\/\/en.wikipedia.org\/wiki\/English_as_a_second_or_foreign_language'>ESL<\/a> students are on the lookout for ways to &#8220;turbo charge&#8221; their improvement of English by being able to understand some of the English Expressions and <a target=_blank title='Idiom information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Idiom'>Idioms<\/a> an English native speaker is quite likely to take for granted &#8230; and so, alas, for the ESL beginner, is quite likely to slip into their conversational English.<\/p>\n<p>Today we present a missing part of one of these English Expressions or Idioms and get the user to try to fill in the missing part.<\/p>\n<p>Today we&#8217;d like to thank <a target=_blank title='Useful link' href='http:\/\/www.smart-words.org\/quotes-sayings\/idioms-meaning.html'>this link<\/a> for a great list of English expressions and idioms (thanks for the list and you can find an explanation of the meanings at this link too) and, as per usual with ESL games (here at this blog), <a target=_blank title='Free Dictionary' href='http:\/\/www.thefreedictionary.com'>The Free Dictionary<\/a> for the English expression or idiom lookups that may help linked off the underlined dot.  Also of great help was the advice regarding Linear Gradient backgrounds for our HTML5 canvas element used today, that came from this very very <a target=_blank title='Useful link regarding addColorStop canvas element from w3schools' href='http:\/\/www.w3schools.com\/tags\/canvas_addcolorstop.asp'>useful link<\/a>.<\/p>\n<p>This <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/englishexpressions_chalkboard.html\" title=\"English Expression and Idiom Game\">game<\/a> you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/englishexpressions_chalkboard.html_GETME\" title='englishexpressions_chalkboard.html'>englishexpressions_chalkboard.html<\/a> uses HTML and Javascript programming languages.  Hopefully you can figure the rules when you click the picture above for a <a target=_blank title=\"live run\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/englishexpressions_chalkboard.html\">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='#d20537' onclick='var dv=document.getElementById(\"d20537\"); 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='d20537' 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='#d20578' onclick='var dv=document.getElementById(\"d20578\"); 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='d20578' 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='#d20887' onclick='var dv=document.getElementById(\"d20887\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d20887' 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='#d20921' onclick='var dv=document.getElementById(\"d20921\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overload\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d20921' 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='#d20975' onclick='var dv=document.getElementById(\"d20975\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/genericization\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d20975' 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='#d33105' onclick='var dv=document.getElementById(\"d33105\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/popup\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d33105' 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='#d33134' onclick='var dv=document.getElementById(\"d33134\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ios\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d33134' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s Conditional Alternative to Javascript Popup Windows Tutorial is put into context, today, as we start our journey down the road of readying some of our rjmprogramming.com.au PHP web applications to only conditionally use the Javascript popup windows if we &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/conditional-alternative-to-javascript-popup-windows-in-ios-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,20,37,40],"tags":[1524,174,2335,250,452,576,609,617,626,630,631,652,830,860,2337,1837,967,997,1761,1000,2334,1675,1319,1329,2029,2338,1473],"class_list":["post-33134","post","type-post","status-publish","format-standard","hentry","category-elearning","category-ios","category-tutorials","category-xcode","tag-alert-popup-box","tag-button","tag-conditional","tag-confirm-popup-box","tag-form","tag-html","tag-input","tag-interactive","tag-ios","tag-ipad","tag-iphone","tag-javascript","tag-navigation","tag-onblur","tag-onkeypress","tag-overload","tag-popup","tag-programming","tag-prompt","tag-prompt-popup-box","tag-submit","tag-textbox","tag-tutorial","tag-uiwebview","tag-webview","tag-wkwebview","tag-xcode"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/33134"}],"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=33134"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/33134\/revisions"}],"predecessor-version":[{"id":33186,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/33134\/revisions\/33186"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=33134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=33134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=33134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}