{"id":20256,"date":"2016-02-20T03:01:33","date_gmt":"2016-02-19T17:01:33","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=20256"},"modified":"2016-02-20T06:23:56","modified_gmt":"2016-02-19T20:23:56","slug":"html-themed-supervision-second-genericization-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-themed-supervision-second-genericization-tutorial\/","title":{"rendered":"HTML Themed Supervision Second Genericization Tutorial"},"content":{"rendered":"
\"HTML<\/a>

HTML Themed Supervision Second Genericization Tutorial<\/p><\/div>\n

Some days ago we left off with HTML\/Javascript Themed Supervision Primer Tutorial<\/a> having a pretty hardcoded feel to it, as a web application gathering together other web applications under the concept of “ESL Ideas”. Then yesterday we started on our “genericization” drive involving the introduction of external Javascript and the address bar URL GET parameters, as dynamic controllers of web application content.<\/p>\n

Yesterday stayed within the realms of client side HTML and Javascript (and CSS), and today, we stay there for some more functionality on the theme of “interactivity”.<\/p>\n

We’ve talked before at this blog about the wonders of Javascript … document.write<\/a>(prompt<\/a>([wording],[default])); <\/code> … last time was with HTML\/Javascript Clairvoyance Tester Mobile Tutorial<\/a> … and today we revisit that “wonder” … wonderful!<\/p>\n

The logic with our purely Javascript DOM extra functionality is that, as you may remember from HTML\/Javascript Themed Supervision Primer Tutorial<\/a> … way back when … just plain old document.write([someHTML])<\/i> helped us have a feel with our HTML and Javascript that we are a “bit” … just a tad … like a server side language like PHP … delaying the output of HTML until ready. Well, now, today, ponder …<\/p>\n


\n document.write(itdepends(outhtml));
\n<\/code><\/p>\n

… and the Javascript itdepends<\/i> function …<\/p>\n


\nfunction itdepends(inh) {
\n var ct='Change this', cellno=1, pregs, gs, hw='', cellmemno=1, outh=inh, cells, kc, ic, thisbutton, precells, jc=0, lastsuff='', postcell, suff='<br>', xlast=' setTimeout(andthen, 200); ', zlast='', lastc='';
\n var inask=location.search.split('ask=')[1] ? location.search.split('ask=')[1].split('&')[0] : ' ';
\n if (inask != ' ') {
\n cells=inh.split('<\/h1>');
\n thisbutton=cells[0] + '<\/h1>';
\n dis=thisbutton.replace(\/\"\/g, \"' + String.fromChar(34) '\");
\n lastc=\"<scr\" + \"ipt type='text\/javascript'> var dis\" + jc + \"=\" + '\"' + dis + '\"' + \"; document.write(prompt(\" + '\"' + \"Change this Theme and\/or its dropdown?\" + '\"' + \",dis\" + jc + \")); <\/scr\" + \"ipt>\";
\n outh=outh.replace(thisbutton, lastc);
\n lastc='';
\n cells=inh.split('<\/td>');
\n for (ic=0; ic<cells.length; ic++) {
\n if (cells[ic].indexOf('<\/button>') != -1) {
\n precells=cells[ic].split('<\/button>');
\n for (kc=0; kc<precells.length; kc++) {
\n if (precells[kc].replace('<\/div>','').indexOf('<button') != -1) {
\n postcell=(' ' + precells[kc]).split('<button');
\n thisbutton='<button' + postcell[1] + '<\/button>';
\n suff='';
\n ct='Change this ' + hw + 'web application button ' + cellmemno + ' (of ' + eval(-1 + precells.length) + ') in cell ' + cellno + ' of 9 ... nothing is allowed';
\n if (outh.indexOf(thisbutton + '<br>') != -1) {
\n suff='<br>';
\n thisbutton += suff;
\n lastsuff=suff;
\n } else if (outh.indexOf(thisbutton + '<') == -1) {
\n gs=outh.split(thisbutton);
\n pregs=gs[1].split('<');
\n suff=pregs[0];
\n thisbutton += suff;
\n lastsuff=suff;
\n } else {
\n ct='Change this ' + hw + 'web application button ' + cellmemno + ' (of ' + cellmemno + ') in cell ' + cellno + ' of 9 ... nothing is allowed ... to add more, best delimiter between buttons is ' + lastsuff + ' ';
\n }
\n jc++;
\n dis=thisbutton.replace(\/\"\/g, \"' + String.fromChar(34) '\");
\n lastc=\"<scr\" + \"ipt type='text\/javascript'> var dis\" + jc + \"=\" + '\"' + dis + '\"' + \"; document.write(prompt(\" + '\"' + ct + \"?\" + '\"' + \",dis\" + jc + \")); <\/scr\" + \"ipt>\";
\n outh=outh.replace(thisbutton, lastc);
\n if (suff != '') {
\n cellmemno++;
\n } else {
\n cellno++;
\n cellmemno=1;
\n lastsuff='';
\n if (cellno == 5) {
\n hw='hidden ';
\n } else {
\n hw='';
\n }
\n }
\n }
\n }
\n }
\n }
\n }
\n if (lastc != '') outh=outh.replace(lastc, lastc.replace('<\/scr', xlast + '<\/scr'));
\n return outh;
\n}
\n<\/code><\/p>\n

… voila … document.write([someHTML])<\/i> is usefully nesting document.write([someReworkedHTML])<\/i> … was wondering when this “onion of the 4th dimension”<\/a> would come.<\/p>\n

Once again, have a look at our HTML and Javascript and CSS programming source code you could call middle_interest.html<\/a> (changed from before as per this link<\/a>) supervising the external Javascript you could call middle_interest.js<\/a> (changed from before as per this link<\/a>) and\/or try a …<\/p>\n