{"id":55954,"date":"2022-10-08T03:01:59","date_gmt":"2022-10-07T17:01:59","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=55954"},"modified":"2022-10-01T13:30:13","modified_gmt":"2022-10-01T03:30:13","slug":"html-morse-code-makeover-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-morse-code-makeover-tutorial\/","title":{"rendered":"HTML Morse Code Makeover Tutorial"},"content":{"rendered":"
\"HTML<\/a>

HTML Morse Code Makeover Tutorial<\/p><\/div>\n

We’re revisiting HTML Morse Code Primer Tutorial<\/a>‘s Morse Code sharing web application today, realizing it could be improved in two major ways …<\/p>\n

    \n
  1. add Hints for Morse Code message creators (ie. on non-mobile, you see the letter associated with Morse Code when hovering over that Morse Code after optionally clicking Hints link) …
    \n
    \n<a style='text-decoration:underline;cursor:pointer;' id='hints' data-href='.\/morsecode.html' onclick='titleit();' title='hint'>Hint<\/a><\/font>
    \n<\/code><\/p>\n

    … HTML helped out by Javascript …<\/p>\n


    \nfunction titleit() {
    \n var opts=document.getElementsByTagName('option');
    \n for (var iopts=0; iopts<opts.length; iopts++) {
    \n if (('' + opts[iopts].title).trim() == '') {
    \n opts[iopts].title=opts[iopts].value.replace(' ', 'Space');
    \n }
    \n }
    \n}
    \n<\/code>\n<\/li>\n

  2. add SMS communication conduit to the existant email one with changes<\/font> …
    \n
    \n<span id='myspan'>To: <input placeholder='Enter email address or SMS number'<\/font> title='Enter email address or SMS number'<\/font> id='to' size=30 type='text' value='' onblur=\" aem='asms'; if (this.value.indexOf('@') == -1) { sendsms(); } else if (this.value.indexOf('@') != -1) { aem='aemail';<\/font> document.getElementById('iemail').src='morsecode.php?set=' + this.value; document.getElementById(aem).href=document.getElementById(aem).href.replace('o:' + wasemailee,'o:' + this.value).replace(encodeURIComponent('o:' + wasemailee),encodeURIComponent('o:' + this.value)); }<\/font> wasemailee=this.value; \"><\/input><input type='button' onclick=\" aem='asms'; if (document.getElementById('to').value.indexOf('@') == -1) { sendsms(); } else if (document.getElementById('to').value.indexOf('@') != -1) { aem='aemail';<\/font> if (documentURL.indexOf('?isMobile=y') != -1) { startagain='y'; document.getElementById('iemail').src='.\/morsecode.php?mt=' + encodeURIComponent(document.getElementById(aem).href); document.getElementById('myspan').innerHTML=document.getElementById('myspan').innerHTML.replace('Email' + ' Sent To: ','To: ').replace('SMS' + ' Sent To: ','To: ').replace('To:','Email' + ' Sent To:').replace('o:' + wasemailee, 'o:' + document.getElementById('to').value).replace(encodeURIComponent(':' + wasemailee), encodeURIComponent(':' + document.getElementById('to').value).replace('to=&', 'to=' + encodeURIComponent(document.getElementById('to').value) + '&')); document.getElementById('myh1').innerHTML = document.getElementById('myh1').innerHTML + ' sent'; } else { document.getElementById(aem).href='mailto:' + document.getElementById('to').value + '?subject=' + document.getElementById(aem).href.replace('to%3D%26', 'to%3D' + encodeURIComponent(document.getElementById('to').value) + '%26').split('?subject=')[1];<\/font> document.getElementById(aem).click(); }<\/font> }\" value='Send email\/SMS of Morse Code below'><\/input>&nbsp;<a id='reset' href='.\/morsecode.html' title='reset'>Reset<\/a>&nbsp;<a style='text-decoration:underline;cursor:pointer;' id='hints' data-href='.\/morsecode.html' onclick='titleit();' title='hint'>Hint<\/a><\/font><\/span><br>
    \n<a style='display:none;' id='asms' href='sms:&body='>sms<\/a><\/font>
    \n<\/code><\/p>\n

    … HTML helped out by Javascript …<\/p>\n


    \nfunction sendsms() {
    \nif (document.getElementById(\"to\").value.trim() != '' && document.getElementById(\"to\").value.trim().replace(\/0\/g,'').replace(\/1\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'') == '') {
    \n document.getElementById(\"asms\").href=\"sm\" + \"s:\" + document.getElementById(\"to\").value.trim() + \"&body=\" + encodeURIComponent(document.URL.split('#')[0].split('?')[0] + '?to=' + document.getElementById(\"to\").value.trim() + '&mc=' + encodeURIComponent(document.getElementById(\"mymc\").innerHTML));
    \n document.getElementById(\"asms\").click();
    \n}
    \n}
    \n<\/code>\n<\/li>\n<\/ol>\n

    … in the changed<\/a> morsecode.html<\/a> Morse Code creator and sharer<\/a>.<\/p>\n

    We hope you find it’s easier and more useful to use!<\/p>\n

    \n

    \n

    Previous relevant HTML Morse Code Primer Tutorial<\/a> is shown below.<\/p>\n

    \"HTML<\/a>

    HTML Morse Code Primer Tutorial<\/p><\/div>\n

    Recently, with Yahoo YQL Web Service JSON Worldbank Datasets Tutorial<\/a> as shown below, we found time for HTML multiple mode select<\/a> tags … <\/p>\n

    \nHow do you do, Hmmst?<\/b>
    \nI’m not exactly sure … (pointing to right of screen) … ask that pixel over there.
    \nHey Hmmst, did you find your watch the other day?<\/b>
    \nI’m not exactly sure … (pointing to top of screen) … ask that pixel over there.
    \nOver here Hmmst. It’s on the table.<\/b>
    \nI’m not exactly sure what exactly you’re getting at with the term “table” … (pointing to bottom of screen) … but suggest you ask that pixel over there.
    \n(Aside, to you guys.) You find the time for someone, and what thanks do you get?<\/b>
    \nBy the way … (pointing to the left of screen) … that pixel over there, the one next to that one (pointing to the left of screen) appreciates you finding the time.\n<\/p><\/blockquote>\n

    The thing about today’s Morse Code<\/a> game in HTML and Javascript is that it does make use of an HTML multiple mode select tag “onclick” event, because was wondering what would happen with it, and realized it could be used a bit like a keyboard (or a button for that matter … and we actually use a button for mobile platforms, because multiple select tags do not suit so well here) for entries that might repeat for instance.<\/p>\n

    So today we use this event to create a Morse Code emailer, which is a bit funny, in that, of course, when Morse Code was invented, there was no email, and a bit funny in that Morse Code (sort of) was an (early) alternative to email, and is locked up with the days of telegrams<\/a>. Last holidays, at Beechworth<\/a>, at its historic Telegraph Station<\/a> found out that you could send a real Morse Code message (with all the real equipment) as a telegram, to someone.<\/p>\n

    Hope you enjoy the live run<\/a> and have a go using and downloading the HTML programming source code morsecode.html<\/a> … and thanks to this useful link<\/a>.<\/p>\n

    \n

    Yahoo YQL Web Service JSON Worldbank Datasets Tutorial<\/a> is shown below.<\/p>\n

    \"Yahoo<\/a>

    Yahoo YQL Web Service JSON Worldbank Datasets Tutorial<\/p><\/div>\n

    Here is a tutorial that (just) might be re-introducing you to the Yahoo Web Services called YQL, building on previous YQL tutorials<\/a> on this blog, building on previous Yahoo YQL Web Service JSON Worldbank Data Tutorial<\/a> as shown below, but today we use the YQL worldbank.data database queries to start the ball rolling with the idea of Google Chart<\/a> (software integrated) reports being mixed with latitude, longitude GeoData<\/a> (as we began two days ago). The name is the way it is because it simplified the API aspects of its functionality for the developer to concentrate on SQL, and I’m really (top) supportive of this concept. You don’t have to output in JSON, as other data forms like XML are acceptable. Let’s see what Wikipedia says about Yahoo’s YQL below. <\/p>\n

    \n

    Yahoo! Query Language (YQL) is an SQL-like query language created by Yahoo! as part of their Developer Network. YQL is designed to retrieve and manipulate data from APIs through a single Web interface, thus allowing mashups that enable developers to create their own applications.[1]<\/p>\n

    Initially launched in October 2008 with access to Yahoo APIs,[2] February 2009 saw the addition of open data tables from third parties such as Google Reader, the Guardian, and The New York Times.[3] Some of these APIs still require an API key to access them. On April 29th of 2009, Yahoo introduced the capability to execute the tables of data built through YQL using JavaScript run on the company’s servers for free.[3]<\/p>\n<\/blockquote>\n

    So this tutorial uses a YQL web service into the data emanating from its links to the Worldbank Data worldbank.data database with Yahoo YQL website … thanks. You select report types of interest from dropdown list allowing multiple selection and then set the ball rolling by selecting a country name from the dropdown list (derived from Worldbank country codes at Worldbank country codes<\/a> … thanks) and see a detailed map and world context map all using Google Charts functionality.<\/p>\n

    The two big PHP functions of use for this are:<\/p>\n