{"id":47623,"date":"2020-01-09T03:01:38","date_gmt":"2020-01-08T17:01:38","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=47623"},"modified":"2020-01-08T20:38:15","modified_gmt":"2020-01-08T10:38:15","slug":"google-translate-javascript-internationalization-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-translate-javascript-internationalization-tutorial\/","title":{"rendered":"Google Translate Javascript Internationalization Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/intl_currency.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Translate Javascript Internationalization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/intl_gt.jpg\" title=\"Google Translate Javascript Internationalization Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Google Translate Javascript Internationalization Tutorial<\/p><\/div>\n<p>As a user selects a language from the language dropdowns of yesterday&#8217;s <a title='Currency Number Javascript Internationalization Tutorial' href='#cnjit'>Currency Number Javascript Internationalization Tutorial<\/a> and <a title='DateTime Javascript Internationalization Primer Tutorial' href='#dtjipt'>DateTime Javascript Internationalization Primer Tutorial<\/a>&#8216;s web applications they are presented with two &#8220;Translate&#8221; and (as of today a new) &#8220;New Window&#8221; buttons to get to &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Google Translate' href='https:\/\/translate.google.com'>Google Translate<\/a> overseeing of the web application content &#8230; allowing for &#8230;<\/li>\n<li>Selective (via <a target=_blank title='Global attribute translate information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_translate.asp'>translate<\/a>=yes and translate=no HTML element global attribute arrangements) translation from English to another language<\/li>\n<\/ul>\n<p>We&#8217;d been offering the gist of this for a couple of days, but the user interaction of the web application had been &#8220;lost in translation&#8221; in these three major ways &#8230;<\/p>\n<ul>\n<li>our HTML element type button&#8217;s onclick logic appears to be ignored within Google Translate supervision &#8230;<\/li>\n<li>the Result table column remained blank (as if, again, not all Javascript functionality was surviving the Google Translate supervision)<\/li>\n<li>Google Translate will flag nested URLs involving &#8220;&amp;&#8221; (second and on) arguments as &#8220;malformed&#8221;<\/li>\n<\/ul>\n<p>.  As of today, that user interaction within Google Translate supervision is honoured much more often.  We need to team our &#8230;<\/p>\n<ul>\n<li>HTML\/Javascript Internationalization <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/intl_use.html---GETME\" title=\"intl_use.html\">DateTime changed<\/a> via <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/intl_use.html---GETME\" title=\"intl_use.html\">intl_use.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/intl_use.html\" title=\"intl_use.html\">supervisory live run<\/a> with new PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/intl_use.php_GETME\" title=\"intl_use.html\">intl_use.php<\/a> &#8230; still &#8220;peer integrated&#8221; with &#8230;<\/li>\n<li>HTML\/Javascript Internationalization <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/intl_currency.html---GETME\" title=\"intl_currency.html\">Currency and Number changed<\/a> via <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/intl_currency.html---GETME\" title=\"intl_currency.html\">intl_currency.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/intl_currency.html\" title=\"intl_currency.html\">supervisory live run<\/a> with new PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/intl_currency.php_GETME\" title=\"intl_currency.html\">intl_currency.php<\/a><\/li>\n<\/ul>\n<p> &#8230; to get that (intervention) place before Google Translate takes over where we can amend the default HTML web application data, ahead of time.  These new PHP codings &#8230;<\/p>\n<ul>\n<li>needed to use <a target=_blank title='PHP cURL information' href='https:\/\/www.php.net\/manual\/en\/ref.curl.php'>cURL<\/a> techniques rather than our (usually) more favoured <a target=_blank title='file_get_contents' href='http:\/\/us1.php.net\/file_get_contents'>file_get_contents<\/a> methodologies in order to maintain the https: (SSL) protocol we favour with these web applications &#8230; and HTML needed to continue using &#8230;<\/li>\n<li>https:\/\/translate.google.com\/translate?sl=en&#038;js=n&#038;prev=_t&#038;hl=en&#038;ie=UTF-8&#038;layout=2&#038;eotf=1<wbr>&#038;u=<\/wbr>https%3A%2F%2Fwww.rjmprogramming.com.au%2F<wbr>HTMLCSS%2F<\/wbr>intl_<select title='DateTime then Currency\/Number' style='display:inline-block;' size=2><option value=use>use<\/option><option value=currency>currency<\/option><\/select>.php%3Fviagt%3Dy<wbr>&#038;tl=[TwoCharacterLanguageCode] # Google Translate URL invocations &#8230;<\/wbr><\/li>\n<li>navigated to, no longer by the aforesaid mentioned &#8220;HTML element type button&#8217;s onclick logic&#8221; methodologies but now by (PHP rearranged) &#8220;a&#8221; link navigation &#8220;target=_top&#8221; (for now) &#8230; and &#8230;<\/li>\n<li>start using Javascript <a target=_blank title='Document.write method information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_output.asp'><i>document.write([someHTML])<\/i><\/a> code to be able to present the Result column data independent of needing Javascript DOM (after document.body onload event) (Javascript DOM) <a target=_blank title='Javascript getElementById() method information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_document_getelementbyid.asp'><i>[element].getElementById<\/i><\/a> anything &#8230; and in order to be able to piece &#8230;<\/li>\n<li>Results and Javascript Content amended by user can be transported between webpages by starting to use window.<a target=_blank title='Window object sessionStorage property' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp'>localStorage<\/a> techniques<\/li>\n<\/ul>\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\/google-translate-javascript-internationalization-tutorial\/'>Google Translate Javascript Internationalization Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cnjit'>Previous relevant <a target=_blank title='Currency Number Javascript Internationalization Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/currency-number-javascript-internationalization-tutorial\/'>Currency Number Javascript Internationalization 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\/intl_currency.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Currency Number Javascript Internationalization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/intl_currency.jpg\" title=\"Currency Number Javascript Internationalization Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Currency Number Javascript Internationalization Tutorial<\/p><\/div>\n<p>Our Internationalization quest continues.  So, today, adding onto yesterday&#8217;s <a title='DateTime Javascript Internationalization Primer Tutorial' href='#dtjipt'>DateTime Javascript Internationalization Primer Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>datetime work &#8230; we add (<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/intl_use.html-GETME\" title=\"intl_use.html\">and &#8220;peer integrate&#8221;<\/a> via <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/intl_use.html-GETME\" title=\"intl_use.html\">intl_use.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/intl_use.html\" title=\"intl_use.html\">supervisory live run<\/a>), today &#8230;<\/li>\n<li>currency or number<\/li>\n<\/ul>\n<p> &#8230; Javascript (ie. client) based Intl object web application functionality.<\/p>\n<p>Thanks to these great resources &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Intl.NumberFormat' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/NumberFormat'>Intl.NumberFormat<\/a><\/li>\n<li><a target=_blank title='Current currency &#038; funds code list' href='https:\/\/www.currency-iso.org\/en\/home\/tables\/table-a1.html'>Current currency &#038; funds code list<\/a>&#8216;s\n<ol>\n<li>download the link&#8217;s XLS zip resource &#8230;<\/li>\n<li>open with macOS Numbers desktop application here on this MacBook Pro &#8230;<\/li>\n<li>Export To &#8230; CSV&#8230;<br \/>\n<code><br \/>\nAFGHANISTAN,Afghani,AFN,971,2,,,<br \/>\n\u00c5LAND ISLANDS,Euro,EUR,978,2,,,<br \/>\nALBANIA,Lek,ALL,008,2,,,<br \/>\nALGERIA,Algerian Dinar,DZD,012,2,,,<br \/>\nAMERICAN SAMOA,US Dollar,USD,840,2,,,<br \/>\nANDORRA,Euro,EUR,978,2,,,<br \/>\nANGOLA,Kwanza,AOA,973,2,,,<br \/>\nANGUILLA,East Caribbean Dollar,XCD,951,2,,,<br \/>\n...<br \/>\n<\/code><br \/>\n &#8230; the first 8 lines of data looking as above\n<\/li>\n<li>at Terminal application command line using the resultant currencies.csv &#8230;<br \/>\n<code><br \/>\n$ cat currencies.csv | <a target=_blank title='Linux awk command information from computerhope' href='http:\/\/www.computerhope.com\/unix\/uawk.htm'>awk<\/a> -F, '{ print \"\\&lt;option data-ctyname=\\\"\" $1 \"\\\" data-cryname=\\\"\" $2 \"\\\" value=~ currency: \\\"\" $3 \"\\\" ~ data-crynumber=\\\"\" $4 \"\\\" data-minorunit=\\\"\" $5 \"\\\"\\&gt; currency: \\\"\" $3 \"\\\"\\ (\" $2 \")&lt;\\\/option\\&gt;\"; }' | tr \"~\" \"'\" &gt; currencies.txt<br \/>\n$ head -8 currencies.txt<br \/>\n&lt;option data-ctyname=\"AFGHANISTAN\" data-cryname=\"Afghani\" value=' currency: \"AFN\" ' data-crynumber=\"971\" data-minorunit=\"2\"&gt; currency: \"AFN\" (Afghani)&lt;\/option&gt;<br \/>\n&lt;option data-ctyname=\"\u00c5LAND ISLANDS\" data-cryname=\"Euro\" value=' currency: \"EUR\" ' data-crynumber=\"978\" data-minorunit=\"2\"&gt; currency: \"EUR\" (Euro)&lt;\/option&gt;<br \/>\n&lt;option data-ctyname=\"ALBANIA\" data-cryname=\"Lek\" value=' currency: \"ALL\" ' data-crynumber=\"008\" data-minorunit=\"2\"&gt; currency: \"ALL\" (Lek)&lt;\/option&gt;<br \/>\n&lt;option data-ctyname=\"ALGERIA\" data-cryname=\"Algerian Dinar\" value=' currency: \"DZD\" ' data-crynumber=\"012\" data-minorunit=\"2\"&gt; currency: \"DZD\" (Algerian Dinar)&lt;\/option&gt;<br \/>\n&lt;option data-ctyname=\"AMERICAN SAMOA\" data-cryname=\"US Dollar\" value=' currency: \"USD\" ' data-crynumber=\"840\" data-minorunit=\"2\"&gt; currency: \"USD\" (US Dollar)&lt;\/option&gt;<br \/>\n&lt;option data-ctyname=\"ANDORRA\" data-cryname=\"Euro\" value=' currency: \"EUR\" ' data-crynumber=\"978\" data-minorunit=\"2\"&gt; currency: \"EUR\" (Euro)&lt;\/option&gt;<br \/>\n&lt;option data-ctyname=\"ANGOLA\" data-cryname=\"Kwanza\" value=' currency: \"AOA\" ' data-crynumber=\"973\" data-minorunit=\"2\"&gt; currency: \"AOA\" (Kwanza)&lt;\/option&gt;<br \/>\n&lt;option data-ctyname=\"ANGUILLA\" data-cryname=\"East Caribbean Dollar\" value=' currency: \"XCD\" ' data-crynumber=\"951\" data-minorunit=\"2\"&gt; currency: \"XCD\" (East Caribbean Dollar)&lt;\/option&gt;<br \/>\n...<br \/>\n<\/code><br \/>\n &#8230; supplying many of the\n<\/li>\n<li>option elements of &#8220;Global Changes&#8221; select (dropdown) element currencies.txt needed manual edits via &#8220;vi currencies.txt&#8221; to modify and\/or delete occasional records containing &#8220;&#8221; &#8230;<\/li>\n<li>copy the resultant modified currencies.txt content into our (<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/intl_currency.html--GETME\" title=\"intl_currency.html\">how we got there<\/a>) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/intl_currency.html--GETME\" title=\"intl_currency.html\">intl_currency.html<\/a> code for the &#8220;GlobalChanges&#8221; dropdown element you can try with this <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/intl_currency.html'>live run<\/a> link<\/li>\n<\/ol>\n<\/li>\n<\/ul>\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\/currency-number-javascript-internationalization-tutorial\/'>Currency Number Javascript Internationalization Tutorial<\/a>.<\/p-->\n<hr>\n<p id='dtjipt'>Previous relevant <a target=_blank title='DateTime Javascript Internationalization Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/datetime-javascript-internationalization-primer-tutorial\/'>DateTime Javascript Internationalization 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\/intl_use.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"DateTime Javascript Internationalization Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/intl_use.jpg\" title=\"DateTime Javascript Internationalization Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">DateTime Javascript Internationalization Primer Tutorial<\/p><\/div>\n<p>We wanted to visit the big I.T. topic area of Internationalization here today.  Specifically, dates and times and how your Javascript can harness the &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='Intl object' href='https:\/\/www.ecma-international.org\/ecma-402\/1.0\/'>Intl<\/a> object<br \/>\n<\/code><\/p>\n<p> &#8230; functionality.<\/p>\n<p>We found good for research here were, thanks to &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Intl object' href='https:\/\/www.ecma-international.org\/ecma-402\/1.0\/'>ECMAScript Internationalization API Specification<\/a><\/li>\n<li><a title='JavaScript in the face of international programming, some of the recommendations _ basics' href='https:\/\/topic.alibabacloud.com\/a\/javascript-in-the-face-of-international-programming-some-of-the-recommendations-_-basics_1_24_20121437.html'>JavaScript in the face of international programming, some of the recommendations _ basics<\/li>\n<li><a title='Intl.DateTimeFormat cheatsheet' href='https:\/\/devhints.io\/wip\/intl-datetime'>Intl.DateTimeFormat cheatsheet<\/a><\/li>\n<\/ul>\n<p>To then test some of this for yourself you can try our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/intl_use.html_GETME\" title=\"intl_use.html\">intl_use.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/intl_use.html\">proof of concept web application<\/a> &#8230; or &#8230;<\/p>\n<p><iframe style=\"width:100%;height:850px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/intl_use.html\"><\/iframe><\/p>\n<p> &#8230; the idea being you can learn about it by changing Javascript code examples yourselves.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank title='DateTime Javascript Internationalization Primer Tutorial' href=';https:\/\/www.rjmprogramming.com.au\/ITblog\/datetime-javascript-internationalization-primer-tutorial\/'>DateTime Javascript Internationalization Primer Tutorial<\/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='#d47604' onclick='var dv=document.getElementById(\"d47604\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/datetime\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47604' 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='#d47612' onclick='var dv=document.getElementById(\"d47612\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/number\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47612' 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='#d47623' onclick='var dv=document.getElementById(\"d47623\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/google-translate\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47623' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>As a user selects a language from the language dropdowns of yesterday&#8217;s Currency Number Javascript Internationalization Tutorial and DateTime Javascript Internationalization Primer Tutorial&#8216;s web applications they are presented with two &#8220;Translate&#8221; and (as of today a new) &#8220;New Window&#8221; buttons &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-translate-javascript-internationalization-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[122,234,2392,2396,301,302,352,354,2446,513,532,576,620,3172,652,1560,3173,734,2178,2394,997,1986,1279,1693,1319],"class_list":["post-47623","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-awk","tag-command-line","tag-currency","tag-currency-code","tag-date","tag-datetime","tag-document-write","tag-dom","tag-ecma","tag-google","tag-google-translate","tag-html","tag-internationalization","tag-intl","tag-javascript","tag-language","tag-language-code","tag-macbook-pro","tag-macos","tag-number","tag-programming","tag-proof-of-concept","tag-time","tag-timezone","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47623"}],"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=47623"}],"version-history":[{"count":13,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47623\/revisions"}],"predecessor-version":[{"id":47636,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47623\/revisions\/47636"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=47623"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=47623"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=47623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}