{"id":25572,"date":"2016-10-09T03:01:32","date_gmt":"2016-10-08T17:01:32","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=25572"},"modified":"2016-10-08T19:54:21","modified_gmt":"2016-10-08T09:54:21","slug":"web-application-html-reporter-tool-genericization-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/web-application-html-reporter-tool-genericization-tutorial\/","title":{"rendered":"Web Application HTML Reporter Tool Genericization Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reporttool_moretwo.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_moretwo.jpg\" title=\"Web Application HTML Reporter Tool Genericization Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Web Application HTML Reporter Tool Genericization Tutorial<\/p><\/div>\n<p>Our &#8220;Web Application Report&#8221; tool could benefit with some flexibility of use ideas, picking up on where we left off yesterday with <a title='Web Application HTML Reporter Tool Content Tutorial' href='#wahrtct'>Web Application HTML Reporter Tool Content Tutorial<\/a> as shown below.  Do you remember tutorials like <a target=_blank title='HTML Themed Supervision First Genericization Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-themed-supervision-first-genericization-tutorial\/'>HTML Themed Supervision First Genericization Tutorial<\/a> and <a target=_blank title='PHP\/HTML with External Javascript Slotting In Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/phphtml-with-external-javascript-slotting-in-tutorial\/'>PHP\/HTML with External Javascript Slotting In Tutorial<\/a> that discussed some &#8220;genericization&#8221; principles and how with the use of external Javascript in your web applications, then there is scope for both &#8230;<\/p>\n<ul>\n<li>document.head.innerHTML HTML script tag GET properties and\/or overworked by<\/li>\n<li>document.URL GET properties<\/li>\n<\/ul>\n<p> &#8230; to allow for the one external Javascript to take on several modes of use?<\/p>\n<p>Here&#8217;s an example of tailoring that can go on with this in mind.  For large bits of HTML we still think it&#8217;s best to use <i>window.open<\/i> popup windows, because we are balancing the software load effort.  However, there are other modes of use that spring to mind.  We could, as far as report placement goes &#8230;<\/p>\n<ul>\n<li>use popup <i>window.open<\/i> window<\/li>\n<li>append to <i>document.body.innerHTML<\/i> as an ID&#8217;ed HTML div element, and allow for some hashtagging navigation, and then, while analyzing elements, try to ignore any after arriving at that HTML div element&#8217;s ID (but we find this a slow architecture to use, in practice)<\/li>\n<li>not sure it is that useful, but you could clobber the whole webpage with the first report by using <i>document.write([theReportContent])<\/i><\/li>\n<li>not do reporting at all<\/li>\n<\/ul>\n<p> &#8230; and the way to use this could be via,respectively (in between &lt;head&gt; and &lt;\/head&gt;) &#8230;<\/p>\n<ul>\n<li>&lt;script type=&#8217;text\/javascript&#8217; src=&#8217;http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reporttool.js<b>?rjm_reporttoolmode=0<\/b>&#8216;&gt;&lt;\/script&gt;<\/li>\n<li>&lt;script type=&#8217;text\/javascript&#8217; src=&#8217;http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reporttool.js<b>?rjm_reporttoolmode=2<\/b>&#8216;&gt;&lt;\/script&gt;<\/li>\n<li>&lt;script type=&#8217;text\/javascript&#8217; src=&#8217;http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reporttool.js<b>?rjm_reporttoolmode=1<\/b>&#8216;&gt;&lt;\/script&gt;<\/li>\n<li>&lt;script type=&#8217;text\/javascript&#8217; src=&#8217;http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reporttool.js<b>?rjm_reporttoolmode=-1<\/b>&#8216;&gt;&lt;\/script&gt;<\/li>\n<\/ul>\n<p> &#8230; and\/or thinking in terms of document.URL at the address bar &#8230;<\/p>\n<ul>\n<li>[document.URL]<b>?rjm_reporttoolmode=0<\/b><\/li>\n<li>[document.URL]<b>?rjm_reporttoolmode=2<\/b><\/li>\n<li>[document.URL]<b>?rjm_reporttoolmode=1<\/b><\/li>\n<li>[document.URL]<b>?rjm_reporttoolmode=-1<\/b><\/li>\n<\/ul>\n<p>Another usage, (and please note that the first example below is also available to you as a <a target=_blank title='Live run' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emojislideshow.html'>live run<\/a> for the slightly reworked <a target=_blank title='emojislideshow.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emojislideshow.html_GETME'>emojislideshow.html<\/a> of the recent <a target=_blank title='Emoji Random Slideshow Cookie Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-random-slideshow-cookie-tutorial\/'>Emoji Random Slideshow Cookie Tutorial<\/a>) to get rid of those awkward clashes, early on, between Javascript <i>prompt<\/i> windows and popup <i>window.open<\/i> windows, why not &#8220;genericize&#8221; by allowing whatever answers you&#8217;d have given to the prompt windows be contained within a comma separated list as for &#8230;<\/p>\n<ul>\n<li>&lt;script type=&#8217;text\/javascript&#8217; src=&#8217;http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reporttool.js?rjm_reporttoolmode=0<b>&#038;rjm_answers=12;1,5;4<\/b>&#8216;&gt;&lt;\/script&gt;<\/li>\n<li>&lt;script type=&#8217;text\/javascript&#8217; src=&#8217;http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reporttool.js?rjm_reporttoolmode=2<b>&#038;rjm_answers=12;1<\/b>&#8216;&gt;&lt;\/script&gt;<\/li>\n<li>&lt;script type=&#8217;text\/javascript&#8217; src=&#8217;http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reporttool.js?rjm_reporttoolmode=1<b>&#038;rjm_answers=12;1<\/b>&#8216;&gt;&lt;\/script&gt;<\/li>\n<li>&lt;script type=&#8217;text\/javascript&#8217; src=&#8217;http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reporttool.js?rjm_reporttoolmode=-1<b>&#038;rjm_answers=0<\/b>&#8216;&gt;&lt;\/script&gt;<\/li>\n<\/ul>\n<p> &#8230; and\/or thinking in terms of document.URL at the address bar (as well as the last example below&#8217;s <a target=_blank title='Live run' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emojislideshow.html?rjm_reporttoolmode=-1&#038;rjm_answers=0'>live run with no reporting<\/a> &#8220;Random Emoji Slideshow&#8221; example usage) &#8230;<\/p>\n<ul>\n<li>[document.URL]?rjm_reporttoolmode=0<b>&#038;rjm_answers=12;1,5;4<\/b><\/li>\n<li>[document.URL]?rjm_reporttoolmode=2<b>&#038;rjm_answers=12;1<\/b><\/li>\n<li>[document.URL]?rjm_reporttoolmode=1<b>&#038;rjm_answers=12;1<\/b><\/li>\n<li>[document.URL]?rjm_reporttoolmode=-1<b>&#038;rjm_answers=0<\/b><\/li>\n<\/ul>\n<p>With external Javascript usage like this, you can have the one external Javascript file taking on many guises and uses for web applications that use them, making the &#8220;tool&#8221; you write be of more general use.<\/p>\n<p>What&#8217;s with the use of <b>&#8220;rjm_&#8221;<\/b> prefix above, making the GET parameters quite &#8220;weird&#8221; sounding?  Well, it goes like this for maximum benefits from a &#8220;tool&#8221; being arranged this way &#8230;<\/p>\n<ul>\n<li>the &#8220;tool&#8221; can have many and varied masters, but users and programmers actually making use of the &#8220;tool&#8221;, in a programmatical role, should know the details of how to use that &#8220;tool&#8221; &#8230; so that when a programmer adds between &lt;head&gt; and &lt;\/head&gt; something like &#8220;&lt;script type=&#8217;text\/javascript&#8217; src=&#8217;http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reporttool.js?<b>rjm_<\/b>reporttoolmode=0&#038;<b>rjm_<\/b>answers=12;1,5;4&#8242;&gt;&lt;\/script&gt;&#8221; they&#8217;ve come there with this knowledge in mind &#8230; and so &#8230;<\/li>\n<li>users asked to test the [document.URL] can use it with this [document.URL] in its default mode of use from how the programmers of [document.URL] saw how the current default should be, depending on whether the external Javascript +\/- its GET parameters are there between &lt;head&gt; and &lt;\/head&gt; or not &#8230; as well as &#8230;<\/li>\n<li>users asked to test a particular mode of use can access the &#8220;tool&#8221; documentation, independent to the [document.URL] documentation, 99.99% relaxed in the knowledge that the &#8220;weird&#8221; &#8220;tool&#8221; GET parameters are not going to clash with any [document.URL] GET parameters, and tag onto the [document.URL] URL &#8220;tool&#8221; GET parameters to test for their particular test case, because what they put on their URL will override the &#8220;tool&#8221; default modes of use &#8230; for example, maybe the test URL for a particular test case will end up in the form &#8230;<br \/>\n<code><br \/>\n[document.URL]?city=Sydney&country=Australia&<b>rjm_<\/b>reporttoolmode=0&<b>rjm_<\/b>answers=16;3,7;3<br \/>\n<\/code><br \/>\n&#8230; where &#8220;city=Sydney&#8221; and &#8220;country=Australia&#8221; were GET parts of the logic of the original [document.URL] code logic whereas &#8220;<b>rjm_<\/b>reporttoolmode=0&#8243; and &#8220;<b>rjm_<\/b>answers=16;3,7;3&#8243; GET parts will, rightly, override whatever active  &#8220;&lt;script type=&#8217;text\/javascript&#8217; src=&#8217;http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reporttool.js?<b>rjm_<\/b>reporttoolmode=0&#038;<b>rjm_<\/b>answers=12;1,5;4&#8242;&gt;&lt;\/script&gt;&#8221; type calls there are defined between &lt;head&gt; and &lt;\/head&gt;\n<\/li>\n<\/ul>\n<p>Again 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 these &#8220;genericization&#8221; and &#8220;flexibility&#8221; considerations.<\/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('pcomzm').style.display='inline'; document.getElementById('scomzm').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='pcomzm' style='display:none;color:blue;'>!--<\/span>script type='text\/javascript' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reporttool.js'&gt;&lt;\/script<span id='scomzm' style='display:none;color:blue;'>--<\/span>&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; it&#8217;s just that, as today&#8217;s tutorial shows you can work this call to your advantage with more flexibility after the <i>.js<\/i> bit with GET parameters as you use on address bar URLs.<\/p>\n<hr>\n<p id='wahrtct'>Previous relevant <a target=_blank title='Web Application HTML Reporter Tool Content Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/web-application-html-reporter-tool-content-tutorial\/'>Web Application HTML Reporter Tool Content 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_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<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='#d25572' onclick='var dv=document.getElementById(\"d25572\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/external-javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d25572' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Our &#8220;Web Application Report&#8221; tool could benefit with some flexibility of use ideas, picking up on where we left off yesterday with Web Application HTML Reporter Tool Content Tutorial as shown below. Do you remember tutorials like HTML Themed Supervision &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/web-application-html-reporter-tool-genericization-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":[1],"tags":[257,305,307,342,354,409,1839,564,576,1525,652,1861,967,997,1166,1262,2005,1319,1402,1433],"class_list":["post-25572","post","type-post","status-publish","format-standard","hentry","category-uncategorised","tag-content","tag-debug","tag-debugging","tag-div","tag-dom","tag-external-javascript","tag-genericization","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\/25572"}],"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=25572"}],"version-history":[{"count":17,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/25572\/revisions"}],"predecessor-version":[{"id":25589,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/25572\/revisions\/25589"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=25572"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=25572"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=25572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}