{"id":56293,"date":"2022-07-02T03:01:49","date_gmt":"2022-07-01T17:01:49","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=56293"},"modified":"2022-07-02T14:33:03","modified_gmt":"2022-07-02T04:33:03","slug":"scrolling-logging-template-literals-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/scrolling-logging-template-literals-primer-tutorial\/","title":{"rendered":"Scrolling Logging Template Literals Primer Tutorial"},"content":{"rendered":"
\"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