{"id":56302,"date":"2022-07-03T03:01:12","date_gmt":"2022-07-02T17:01:12","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=56302"},"modified":"2022-07-02T14:49:32","modified_gmt":"2022-07-02T04:49:32","slug":"form-or-prompt-output-tagged-template-literal-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/form-or-prompt-output-tagged-template-literal-tutorial\/","title":{"rendered":"Form or Prompt Output Tagged Template Literal Tutorial"},"content":{"rendered":"
\"Form<\/a>

Form or Prompt Output Tagged Template Literal Tutorial<\/p><\/div>\n

Yesterday’s Scrolling Logging Template Literals Primer Tutorial<\/a> was the precursor to discussing “Tagged<\/a> Template Literals<\/a>” … <\/p>\n

\nA more advanced form of template literals are tagged templates.
\n
\nTags allow you to parse template literals with a function. The first argument of a tag function contains an array of string values. The remaining arguments are related to the expressions.
\n
\nThe tag function can then perform whatever operations on these arguments you wish, and return the manipulated string. (Alternatively, it can return something completely different, as described in one of the following examples.)\n<\/p><\/blockquote>\n

… we’ve adapted into an HTML and Javascript tagged_template_literal.html<\/a> codebase proof of concept<\/a> web application closely using the start the webpages above started us with … thanks.<\/p>\n

These “Tagged Template” logics<\/font> helped us separate the chaff<\/font> (small words magically handled via “Tagged Template” usage) from the wheat (form or prompt arguments formalized by our interactive input) in the English sentence … such as (today’s default) …<\/p>\n

\nThat <\/font>Nala is a wonderful <\/font>9 year ( <\/font>81 in K9 years ) old <\/font>Golden Retriever who lives at <\/font>33 Charles Street, <\/font>Lawson, <\/font>State of Wow.<\/font>\n<\/p><\/blockquote>\n

… we produce as a result of all the efforts, here.<\/p>\n


\n<html>
\n<head>
\n<title>Tagged Template Literals - RJM Programming - July, 2022 ... thanks to https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals<\/title>
\n<style> input { width: 20%; } <\/style>
\n<\/head>
\n<body>
\n<h2 title='A Tagged Template Literal regimen is dealing with all the little word stuff between the arguments.'>Tagged Template Literals<\/h2>
\n<h3>RJM Programming - July, 2022<\/h3>
\n<h3>Thanks to <a target=_blank title='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals' href='\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals'>https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals<\/a><\/h3>
\n
\n<p id=blurb><\/p>
\n
\n<script type='text\/javascript'>
\nconst prompt = location.search.split('prompt=')[1] ? (one,two) => { return window.prompt(one,two); } : (one,two) => { return two; };
\nconst alert = location.search.split('prompt=')[1] ? (one) => { document.getElementById('blurb').innerHTML=one; return one; } : (one) => { return window.alert(one); };
\nlet being = location.search.split('being=')[1] ? prompt('Being', decodeURIComponent(location.search.split('being=')[1].split('&')[0]).replace(\/\\+\/g,' ')) : prompt('Being', 'Nala');
\nlet age = location.search.split('age=')[1] ? prompt('Age',decodeURIComponent(location.search.split('age=')[1].split('&')[0]).replace(\/\\+\/g,' ')) : prompt('Age','9');
\nlet breed = location.search.split('breed=')[1] ? prompt('Breed',decodeURIComponent(location.search.split('breed=')[1].split('&')[0]).replace(\/\\+\/g,' ')) : prompt('Breed','Golden Retriever');
\nlet street = location.search.split('street=')[1] ? prompt('Street',decodeURIComponent(location.search.split('street=')[1].split('&')[0]).replace(\/\\+\/g,' ')) : prompt('Street','33 Charles Street');
\nlet suburb = location.search.split('suburb=')[1] ? prompt('Suburb',decodeURIComponent(location.search.split('suburb=')[1].split('&')[0]).replace(\/\\+\/g,' ')) : prompt('Suburb','Lawson');
\nlet state = location.search.split('state=')[1] ? prompt('State',decodeURIComponent(location.search.split('state=')[1].split('&')[0]).replace(\/\\+\/g,' ')) : prompt('State','State of Wow');
\nlet secondage = location.search.split('secondage=')[1] ? prompt('K9 Age', decodeURIComponent(location.search.split('secondage=')[1].split('&')[0]).replace(\/\\+\/g,' ')) : prompt('K9 Age', '' + eval(eval('' + age) * 9));
\nlet rest = location.search.split('rest=')[1] ? decodeURIComponent(location.search.split('rest=')[1].split('&')[0]) : '';
\n
\nfunction doform() {
\n var ideas=['Being [' + being + ']', 'Age [' + age + ']', 'K9 Age [' + secondage + ']', 'Breed [' + breed + ']', 'Street [' + street + ']', 'Suburb [' + suburb + ']', 'State [' + state + ']'];
\n var aform='<form method=GET onsubmit=\"checkis();\" action=.\/tagged_template_literal.html><br><br><input type=submit value=Show><\/input><br><br><input type=submit name=prompt id=prompt value=Prompt><\/input><\/form>';
\n for (var jj=eval(-1 + ideas.length); jj>=0; jj--) {
\n aform=aform.replace('>', '><input type=text onblur=\"if (this.value.length == 0) { this.value=this.placeholder.split(String.fromCharCode(91))[1].split(String.fromCharCode(93))[0]; }\" id=' + ideas[jj].split('[')[0].toLowerCase().replace('k9 age', 'secondage') + ' name=' + ideas[jj].split('[')[0].toLowerCase().replace('k9 age', 'secondage') + ' placeholder=\"' + ideas[jj] + '\" value=\"\"><\/input><br>');
\n }
\n document.body.innerHTML+='<br><br>' + aform;
\n \/\/alert(aform);
\n \/\/document.getElementById(ideas[0].split('[')[0].toLowerCase().replace('k9 age', 'secondage')).focus();
\n window.setTimeout(function () {
\n document.getElementById('being').focus();
\n}, 1000);
\n}
\n
\nfunction checkis() {
\n var eis=document.getElementsByTagName('input');
\n for (var jis=0; jis<eis.length; jis++) {
\n if (eis[jis].value == '' && ('' + eis[jis].placeholder).indexOf('[') != -1) {
\n eis[jis].value=eis[jis].placeholder.split(String.fromCharCode(91))[1].split(String.fromCharCode(93))[0];
\n }
\n }
\n}
\n
\nfunction myTag(strings, beingExp, ageExp, secondageExp, breedExp, streetExp, suburbExp, stateExp) {
\n let str0 = '';
\n let str1 = '';
\n let str2 = '';
\n let str3 = '';
\n let str4 = '';
\n let str5 = '';
\n let str6 = '';
\n let str7 = '';
\n

\n for (var ii=0; ii<strings.length; ii++) {
\n if (ii > 7) {
\n rest+=' ' + strings[ii];
\n } else {
\n eval(\"str\" + ii + ' = \"' + strings[ii] + '\"');
\n }
\n }
\n
\n let ageStr;
\n if (ageExp > 99){
\n ageStr = 'centenarian';
\n } else {
\n ageStr = 'youngster';
\n }
\n
\n \/\/ We can even return a string built using a template literal
\n return `${str0}${beingExp}${str1}${ageExp}${str2}${secondageExp}${str3}${breedExp}${str4}${streetExp}${str5}${suburbExp}${str6}${stateExp}${str7}` + rest;<\/font>
\n}
\n
\nlet output = myTag`That ${ being } is a wonderful ${ age } year ( ${ secondage } in K9 years ) old ${ breed } who lives at ${ street }, ${ suburb }, ${ state }.`;<\/font>
\n
\nif (document.URL.indexOf('being=') != -1) {
\n alert(output);
\n \/\/ That Mike is a youngster.
\n}
\n
\ndoform();
\n<\/script>
\n
\n<\/body>
\n<\/html>
\n<\/code><\/p>\n

\n

\n

Previous relevant Scrolling Logging Template Literals Primer Tutorial<\/a> is shown below.<\/p>\n

\"Scrolling<\/a>

Scrolling Logging Template Literals Primer Tutorial<\/p><\/div>\n

Yesterday’s Screen Capture API Download Video Tutorial<\/a>‘a web application code, thanks to Using Screen Capture<\/a>, used interesting Javascript Template Literals<\/a> …<\/p>\n

\nTemplate literals are literals delimited with backtick (`) characters, allowing for multi-line strings, for string interpolation with embedded expressions, and for special constructs called tagged templates.
\n
\nTemplate literals are sometimes informally called template strings, because they are used most commonly for string interpolation (to create strings by doing substitution of placeholders). However, a tagged template literal may not result in a string; it can be used with a custom tag function to perform whatever operations you want on the different parts of the template literal.\n<\/p><\/blockquote>\n

… we’ve adapted<\/font> for use today in our very simple “Scrolling Logging” console_override.html<\/a> web application<\/a> that scrolls like for a command line interactive terminal session …<\/p>\n


\n<html>
\n<head>
\n<title>Console Message Override - RJM Programming - July, 2022<\/title>
\n<script type='text\/javascript'>
\n var logElem=null;
\n var firstisnot=false;
\n var ii=0;
\n
\nfunction onl() {
\n logElem=document.getElementById('log');
\n

\nconsole.log = msg => logElem.innerHTML += (firstisnot ? '<span id=span' + ii + '><\/span>' + document.getElementById('topbit').innerHTML : '') + `${msg}<br>Brought to you via console.log at ` + new Date() + `<br><br>`;
\nconsole.error = msg => logElem.innerHTML += `<span class=\"error\">${msg}<br>Brought to you via console.error at ` + new Date() + `<\/span><br><br>`;
\nconsole.warn = msg => logElem.innerHTML += `<span class=\"warn\">${msg}<br>Brought to you via console.warn at ` + new Date() + `<span><br><br>`;
\nconsole.info = msg => logElem.innerHTML += `<span class=\"info\">${msg}<br>Brought to you via console.info at ` + new Date() + `<\/span><br><br>`;<\/font>
\n
\n console.log('A console.log message.');
\n console.error('A console.error message.');
\n console.warn('A console.warn message.');
\n console.info('A console.info message.');
\n

\n if (firstisnot) {
\n document.getElementById('span' + ii).scrollIntoView();
\n }
\n ii++;
\n firstisnot=true;
\n

\n setTimeout(onl, 4045);
\n}
\n
\n<\/script>
\n<\/head>
\n<body onload='onl();'>
\n<div id=topbit>
\n<h2>Console Message Override<\/h2>
\n<h3>RJM Programming - July, 2022<\/h3>
\n<\/div>
\n<h4 id=log><\/h4>
\n<\/body>
\n<\/html>
\n<\/code><\/p>\n

… in action below<\/a> …<\/p>\n