{"id":25545,"date":"2016-10-08T03:01:51","date_gmt":"2016-10-07T17:01:51","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=25545"},"modified":"2016-10-08T09:01:12","modified_gmt":"2016-10-07T23:01:12","slug":"web-application-html-reporter-tool-content-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/web-application-html-reporter-tool-content-tutorial\/","title":{"rendered":"Web Application HTML Reporter Tool Content Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reporttool_more.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Web Application HTML Reporter Tool Content Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reporttool_more.jpg\" title=\"Web Application HTML Reporter Tool Content Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Web Application HTML Reporter Tool Content Tutorial<\/p><\/div>\n<p>Yesterday we left off our &#8220;Web Application HTML Reporter Tool&#8221; project, with <a title='Web Application HTML Reporter Tool Primer Tutorial' href='#wahrtpt'>Web Application HTML Reporter Tool Primer Tutorial<\/a> as shown below, not ready to involve the reporting of &#8220;content&#8221; if we use the loose inhouse terminology, where, for us &#8230;<\/p>\n<ul>\n<li>&#8220;content&#8221; denotes our HTML Javascript DOM element <i>innerHTML<\/i> property values &#8230; whereas (we are going to call) &#8230;<\/li>\n<li>&#8220;styling&#8221; denotes our HTML Javascript DOM element <i>outerHTML<\/i> &#8220;shell&#8221; which is, as we talked about yesterday &#8230;<br \/>\n<blockquote><p>\nthe <i>outerHTML<\/i> content minus any <a target=_blank title='HTML innerHTML property information' href='http:\/\/www.w3schools.com\/jsref\/prop_html_innerhtml.asp'><i>innerHTML<\/i><\/a> content of an HTML element\n<\/p><\/blockquote>\n<\/li>\n<\/ul>\n<p>So yesterday was a &#8220;styling&#8221; day, and today is a &#8220;content&#8221; day.  With &#8220;content&#8221; we are interested in &#8230;<\/p>\n<ul>\n<li>having it be up to the user whether they display &#8220;content&#8221; or not &#8230; so control this via button presses for the user to do &#8230; and &#8230;<\/p>\n<li>we are interested in changes to &#8220;content&#8221; over (snapshots in) time<\/li>\n<\/ul>\n<p>The first request above is a display only type of request, so we should pick a &#8220;specialist&#8221; HTML element for such display, and, as we discussed at <a target=_blank title='HTML Textarea and Div Talents Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-textarea-and-div-talents-primer-tutorial\/'>HTML Textarea and Div Talents Primer Tutorial<\/a>, that would be the &#8230;<\/p>\n<ul>\n<li><a target=_blank title='HTML textarea tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_textarea.asp'><i>textarea<\/i><\/a> element will be used for the display only &#8220;content&#8221; &#8230; which leaves for flagging changes, via colour coding techniques, the &#8230;<\/li>\n<li><a target=_blank title='HTML div tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_div.asp'><i>div<\/i><\/a> element will be used for flagging the changed &#8220;content&#8221;<\/li>\n<\/ul>\n<p>So our &#8220;Web Application HTML Reporter&#8221; tool, in the form of an external Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reporttool.js--GETME\" title=\"reporttool.js\">reporttool.js<\/a> file, changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reporttool.js--GETME\" title=\"reporttool.js\">this way<\/a> for the &#8220;second draft&#8221;, which is a &#8220;first draft&#8221; of web application &#8220;content&#8221; reporting.  If you try it, we hope you like it.<\/p>\n<p>Nothing has, nor ever will change, about how a programmer uses this external Javascript, via placing the following line of code, <a onclick=\" document.getElementById('pcomxm').style.display='inline'; document.getElementById('scomxm').style.display='inline';  \" style=\" text-decoration:underline; cursor: pointer; \"><font color=blue;>or not<\/font><\/a>, between &lt;head&gt; and &lt;\/head&gt; &#8230;<\/p>\n<p><code><br \/>\n&lt;<span id='pcomxm' style='display:none;color:blue;'>!--<\/span>script type='text\/javascript' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reporttool.js'&gt;&lt;\/script<span id='scomxm' style='display:none;color:blue;'>--<\/span>&gt;<br \/>\n<\/code><\/p>\n<p>Hope it helps, like a &#8220;tool&#8221; helps.<\/p>\n<hr>\n<p id='wahrtpt'>Previous relevant <a target=_blank title='Web Application HTML Reporter Tool Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/web-application-html-reporter-tool-primer-tutorial\/'>Web Application HTML Reporter Tool 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\/reporttool.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Web Application HTML Reporter Tool Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reporttool.jpg\" title=\"Web Application HTML Reporter Tool Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Web Application HTML Reporter Tool Primer Tutorial<\/p><\/div>\n<p>The work we&#8217;ve been doing lately with the &#8220;Random Emoji Slideshow&#8221; project felt like we were creating a &#8220;tool&#8221;, as much as a web application for amusement or information.  Don&#8217;t know about you, but this looking up of emoji information was a real chore for me, but even with the display of emojis being random, I&#8217;ve found that I&#8217;ve quickly discovered useful emojis just by &#8220;randomly&#8221; being exposed to them.  Because the time taken to get the technical &#8220;goss&#8221; on each emoji has been reduced with this technique means that it becomes a &#8220;tool&#8221; for us, as we also relate with the WordPress 4.1.1 <a target=_blank title='Web Application HTML Reporter Tool Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/web-application-html-reporter-tool-primer-tutorial\/'>Web Application HTML Reporter Tool Primer Tutorial<\/a>.<\/p>\n<p>In day to day unit testing of web applications, we find of all the &#8220;tools&#8221; we wish we had, they revolve around new and different ways to &#8220;debug&#8221;.  No matter how good the tools like Firefox Firebug or Safari Web Inspector are, it doesn&#8217;t mean, at least for us, that we don&#8217;t dream of other approaches to &#8220;debugging&#8221;.  The last two web projects we did were &#8230;<\/p>\n<ol>\n<li><a target=_blank title='Karaoke via YouTube API in Iframe Email Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/karaoke-via-youtube-api-in-iframe-email-tutorial\/'>Karaoke via YouTube API<\/a> &#8230; and &#8230;<\/li>\n<li><a target=_blank title='Emoji Random Slideshow Cookie Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-random-slideshow-cookie-tutorial\/'>Random Emoji Slideshow<\/a><\/li>\n<\/ol>\n<p> &#8230; and what they both had in common was a genuine use for the Javascript DOM HTML element property <a target=_blank title='HTML outerHTML property information' href='http:\/\/help.dottoro.com\/ljloliex.php'><i>outerHTML<\/i><\/a>.  Cannot remember two projects in a row like this, and it set us to thinking about the first draft of a &#8220;Web Application HTML Reporter&#8221; debugging &#8220;tool&#8221; that, at least in its first incarnation, we&#8217;ll just hone in on an <i>outerHTML<\/i> &#8220;shell&#8221; view of the reporting tool, as much as anything, because an <i>outerHTML<\/i> &#8220;shell&#8221; view will normally not be too crowded with information, and in this first incarnation, should not confuse too much.<\/p>\n<p>So what do we mean by <i>outerHTML<\/i> &#8220;shell&#8221; view?  It&#8217;s the <i>outerHTML<\/i> content minus any <a target=_blank title='HTML innerHTML property information' href='http:\/\/www.w3schools.com\/jsref\/prop_html_innerhtml.asp'><i>innerHTML<\/i><\/a> content of an HTML element &#8230; <font>the &#8220;caret&#8221;y bits, if you will<\/font>.<\/p>\n<p>We want this &#8220;Web Application HTML Reporter&#8221;, pretty obviously &#8230;<\/p>\n<ul>\n<li>to be unobtrusive<\/li>\n<li>be up to the programmer to deploy using unit testing, but not go to production<\/li>\n<li>be dynamic<\/li>\n<\/ul>\n<p> &#8230; and so this led us to, respectively &#8230;<\/p>\n<ul>\n<li>the &#8220;Web Application HTML Reporter&#8221; information will be contained in a Javascript <a target=_blank title='Javascript window.open information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp'><i>window.open<\/i><\/a> popup window &#8230; as much as anything, then, so that <font size=1>(just as with <a target=_blank title=\"Heisenberg's uncertainty principle\" href='http:\/\/abyss.uoregon.edu\/~js\/21st_century_science\/lectures\/lec14.html'>Heisenberg&#8217;s uncertainty principle<\/a> regarding interference with photons just by being an observer)<\/font> our reporting HTML does not &#8220;get muddled up&#8221; with the HTML being reported on<\/li>\n<li>the &#8220;Web Application HTML Reporter&#8221; will be written in an external Javascript file that can be called, <a onclick=\" document.getElementById('pcomm').style.display='inline'; document.getElementById('scomm').style.display='inline';  \" style=\" text-decoration:underline; cursor: pointer; \"><font color=blue;>or not<\/font><\/a>, via &#8230;<br \/>\n<code><br \/>\n&lt;<span id='pcomm' style='display:none;color:blue;'>!--<\/span>script type='text\/javascript' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reporttool.js'&gt;&lt;\/script<span id='scomm' style='display:none;color:blue;'>--<\/span>&gt;<br \/>\n<\/code><br \/>\n &#8230; in the head section somewhere between &lt;head&gt; and &lt;\/head&gt;\n<\/li>\n<li>the &#8220;Web Application HTML Reporter&#8221; functionality of showing the HTML element type and its attributes and properties (with the exception of its <i>innerHTML<\/i> property, for now, at least) starts itself and can maintain itself, as required, by calling itself via Javascript <i>setTimeout<\/i> methodology &#8230; in a similar way we do Ajax <i>wajax.js<\/i> functionality at this WordPress Blog, and you can read about starting at <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-ajax-mobile-friendly-primer-tutorial\/' title='WordPress Ajax Mobile Friendly Primer Tutorial'>WordPress Ajax Mobile Friendly Primer Tutorial<\/a><\/li>\n<\/ul>\n<p>Is this enough of a tool just like that?  Well, we think at the very least, to be useful, we need to &#8230;<\/p>\n<ul>\n<li>show HTML hierarchy<\/li>\n<li>show HTML attributes and properties line by line<\/li>\n<\/ul>\n<p> &#8230; which we did in this first draft, and then thought we needed to have a means to &#8230;<\/p>\n<ul>\n<li>show &#8220;Web Application HTML Reporter&#8221; snapshots, depending on what the user chooses to do &#8230; which led us, even on this first draft, wanting to &#8230;<\/li>\n<li>show HTML <i>innerHTML<\/i> property&#8217;s length &#8230; at least, in order for the user to see the dynamic nature, or not, of what the executing HTML might be doing &#8230; eg. in the case of the &#8220;Random Emoji Slideshow&#8221; we should see the length of <i>document.body.innerHTML<\/i> increase over (one hour&#8217;s worth of) time<\/li>\n<\/ul>\n<p> &#8230; and we do this in otherwise unused HTML table td cells (to the right of our HTML element type cell) of our &#8220;Web Application HTML Report&#8221; that when you hover over them, tell you the length of that element&#8217;s <i>innerHTML<\/i> property contents (via that HTML td cell &#8220;title&#8221; property being filled out), and while we&#8217;re at it, we colour code, a bit bizarrely (so far) according to the length of that <i>innerHTML<\/i> property content.<\/p>\n<p>As you can surmise from above, a &#8220;tool&#8221; often starts as a convenience for the programmer.  Whether it turns into something generically useful is the interest in the project as it goes along?!<\/p>\n<p>Our &#8220;Web Application HTML Reporter&#8221; tool, in its external Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reporttool.js-GETME\" title=\"reporttool.js\">reporttool.js<\/a> form, as explained, is not designed as a standalone proposition, so we can&#8217;t offer the <i>live run<\/i> offer today (though there is a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reporttool.jpg\">tutorial picture<\/a> that we hope explains a bit, graphically), but, as per usual, we encourage you to try using it in an HTML (or perhaps server side PHP or ASP.Net) web application project of your own to see if its functionality is of any use.  If you try it, we hope you like it.<\/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='#d25525' onclick='var dv=document.getElementById(\"d25525\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/tool\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d25525' 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='#d25545' onclick='var dv=document.getElementById(\"d25545\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/outerhtml\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d25545' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday we left off our &#8220;Web Application HTML Reporter Tool&#8221; project, with Web Application HTML Reporter Tool Primer Tutorial as shown below, not ready to involve the reporting of &#8220;content&#8221; if we use the loose inhouse terminology, where, for us &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/web-application-html-reporter-tool-content-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,33,37],"tags":[257,305,307,342,354,409,564,576,1525,652,1861,967,997,1166,1262,2005,1319,1402,1433],"class_list":["post-25545","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-software","category-tutorials","tag-content","tag-debug","tag-debugging","tag-div","tag-dom","tag-external-javascript","tag-hierarchy","tag-html","tag-innerhtml","tag-javascript","tag-outerhtml","tag-popup","tag-programming","tag-software-2","tag-textarea","tag-tool","tag-tutorial","tag-web-application","tag-window-open"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/25545"}],"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=25545"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/25545\/revisions"}],"predecessor-version":[{"id":25560,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/25545\/revisions\/25560"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=25545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=25545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=25545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}