{"id":52056,"date":"2021-04-03T03:01:01","date_gmt":"2021-04-02T17:01:01","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=52056"},"modified":"2021-04-02T19:46:44","modified_gmt":"2021-04-02T09:46:44","slug":"just-javascript-quiz-css-styling-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/just-javascript-quiz-css-styling-tutorial\/","title":{"rendered":"Just Javascript Quiz CSS Styling Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Just Javascript Quiz CSS Styling Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus_css.jpg\" title=\"Just Javascript Quiz CSS Styling Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Just Javascript Quiz CSS Styling Tutorial<\/p><\/div>\n<p>Our &#8220;Just Javascript&#8221; adage used throughout this blog posting thread, up until today, headed by yesterday&#8217;s <a title='Just Javascript Quiz Content Management Tutorial' href='#jjqcmt'>Just Javascript Quiz Content Management Tutorial<\/a> needs more explanation.  Really what we are trying to do might better be described as &#8220;No Body Definition&#8221; (ie. no defined document.body) but have &#8230;<\/p>\n<ol>\n<li>an HTML webpage (ie. within &lt;html&gt; and &lt;\/html&gt;) &#8230; has &#8230;<\/li>\n<li>&lt;head&gt; and &lt;\/head&gt; (ie. document.head) content which can be made up of (at least) <i>title, style, script, link, meta<\/i> tags<\/li>\n<\/ol>\n<p>To assert &#8220;Just Javascript&#8221; is just to allow <i>script<\/i> content above, but what we should really say is &#8220;Just Head Content&#8221; but that is not nearly so marketable, is it now?!<\/p>\n<p>The thing is, though, we can dynamically add <i>title, style, link, meta<\/i> tag content within the <i>script<\/i> content, and we do this more than statically define it, to feel better about our ethics saying &#8220;Just Javascript&#8221;.<\/p>\n<p>Dynamically adding <i>style<\/i> CSS styling either &#8230;<\/p>\n<ul>\n<li>using Javascript DOM (not available to us for document.getElementById([elementID] <font size=1>and nor can we use inline CSS via <i>style=&#8221;[CSSstyling]&#8221;<\/i> statically within HTML element code for that same reason<\/font>) ideas today though &#8230; remember &#8220;No Body Definition&#8221; &#8230; but &#8230;<\/li>\n<li>we can append to &lt;head&gt; and &lt;\/head&gt; (for today&#8217;s scenario) as per &#8230;<br \/>\n<code><br \/>\n    document.head.innerHTML+=\"&lt;style&gt; <font color=blue>html<\/font> { background-color: yellow; font-size: 36px; background: URL('<a target=_blank title='\/\/www.rjmprogramming.com.au\/rjmquiz.jpg' href='\/\/www.rjmprogramming.com.au\/rjmquiz.jpg'>\/\/www.rjmprogramming.com.au\/rjmquiz.jpg<\/a>'); background-size: cover; } &lt;\/style&gt;\";<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; allowing (into the scope of our work CSS styling of) background (image(s)) and other background styling ideas that can get us past the anonymous feel the web application had before today.  We tailored the background image above to suit our Quiz and help it be a bit more self explanatory &#8230; thanks CSS styling!  We add onto the child &#8220;card&#8221; popup windows, their own background image colour and pizazz, to cheer things up in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html---GETME\" title=\"cards_usefocus.html\">CSS styling enhanced<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html---GETME\" title=\"cards_usefocus.html\">cards_usefocus.html<\/a> code behind the &#8220;Just Javascript&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html\" title=\"Click picture\">live run<\/a>.<\/p>\n<p>You may well ask &#8230;<\/p>\n<blockquote><p>\nWhat can we hang our hat on with CSS style selectors without a body element?\n<\/p><\/blockquote>\n<p>Well, we had to step out of our usual comfort zone of CSS styling thinking, and realize, even without that body element we can still use the <font color=blue>html<\/font> selector to &#8220;point at&#8221; the entirety of your webpage of interest.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/just-javascript-quiz-css-styling-tutorial\/'>Just Javascript Quiz CSS Styling Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jjqcmt'>Previous relevant <a target=_blank title='Just Javascript Quiz Content Management Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/just-javascript-quiz-content-management-tutorial\/'>Just Javascript Quiz Content Management 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\/cards_usefocus.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Just Javascript Quiz Content Management Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus_cms.jpg\" title=\"Just Javascript Quiz Content Management Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Just Javascript Quiz Content Management Tutorial<\/p><\/div>\n<p>It feels like an &#8220;onions of the 4th dimension&#8221; idea to allow the user to control the questions and answers behind the workings of yesterday&#8217;s <a title='Just Javascript Quiz Multiple Users Tutorial' href='#jjqmut'>Just Javascript Quiz Multiple Users Tutorial<\/a>&#8216;s web application, featuring &#8220;Just Javascript&#8221;.<\/p>\n<p>It&#8217;s not &#8220;Just Javascript&#8221; we&#8217;re keeping, it&#8217;s &#8220;Just HTML&#8221; client work rather than involving any serverside anything (eg.PHP) and yet this question and answer data could be quite sizeable.  What can we use, given no PHP serverside, and given we&#8217;ve decided not to navigate via <a target=_blank title='Ajax information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Ajax_%28programming%29'>Ajax<\/a>\/<a target=_blank title='FormData object information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/FormData'>FormData<\/a> techniques?  How about &#8220;the better than HTTP Cookies&#8221; twins &#8230;<\/p>\n<ul>\n<li><a target=_blank title='window.sessionStorage info' href='https:\/\/www.w3schools.com\/jsref\/prop_win_sessionstorage.asp'>sessionStorage<\/a> &#8230; and &#8230;<\/li>\n<li><a target=_blank title='window.localStorage info' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp'>localStorage<\/a><\/li>\n<\/ul>\n<p>Yep, set up a means by which these two can store and restore questions and answers entered by the user, using these storage methods above.<\/p>\n<p><code><br \/>\n  function reassess() {<br \/>\n      var retv='', ewq;<br \/>\n      var retcols=[];<br \/>\n      var ir=0;<br \/>\n      if (window.localStorage) {<br \/>\n        try {<br \/>\n          retv=('' + window.localStorage.getItem('cards_usefocus_local')).replace(\/^null$\/g,'');<br \/>\n          if (retv != '') {<br \/>\n            \/\/alert('0:' + retv);<br \/>\n            retcols=decodeURIComponent(retv).split('~');<br \/>\n            sq=[];<br \/>\n            asq=[];<br \/>\n            for (ir=0; ir&lt;retcols.length; ir++) {<br \/>\n              sq.push(retcols[ir].split('?!')[0] + '?');<br \/>\n              asq.push(retcols[ir].split('?!')[1]);<br \/>\n              nomap=false;<br \/>\n              given='';<br \/>\n            }<br \/>\n            return;<br \/>\n          }<br \/>\n        } catch(ewq) {<br \/>\n        }<br \/>\n      }<br \/>\n      if (window.sessionStorage) {<br \/>\n        try {<br \/>\n          retv=('' + window.sessionStorage.getItem('cards_usefocus_session')).replace(\/^null$\/g,'');<br \/>\n          if (retv != '') {<br \/>\n            \/\/alert('1:' + retv);<br \/>\n            retcols=decodeURIComponent(retv).split('~');<br \/>\n            sq=[];<br \/>\n            asq=[];<br \/>\n            for (ir=0; ir&lt;retcols.length; ir++) {<br \/>\n              sq.push(retcols[ir].split('?')[0] + '?');<br \/>\n              asq.push(retcols[ir].split('?')[1]);<br \/>\n              nomap=false;<br \/>\n              given='';<br \/>\n            }<br \/>\n            return;<br \/>\n          }<br \/>\n        } catch(ewq) {<br \/>\n        }<br \/>\n      }<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function assess(what) {<br \/>\n    var ewq, retv='';<br \/>\n    if (what.toLowerCase() == '?x') {<br \/>\n      sslistq=[];<br \/>\n      sslista=[];<br \/>\n      if (window.sessionStorage) {<br \/>\n        try {<br \/>\n          window.sessionStorage.removeItem('cards_usefocus_session');<br \/>\n        } catch(ewq) {<br \/>\n        }<br \/>\n        location.href=document.URL.split('#')[0].split('?')[0] + '?rand=' + Math.floor(Math.random() * 198765897);<br \/>\n        return '';<br \/>\n      }<br \/>\n      return '';<br \/>\n    } else if (what.toLowerCase() == '?!x') {<br \/>\n      lslistq=[];<br \/>\n      lslista=[];<br \/>\n      if (window.localStorage) {<br \/>\n        try {<br \/>\n          window.localStorage.removeItem('cards_usefocus_local');<br \/>\n        } catch(ewq) {<br \/>\n        }<br \/>\n        location.href=document.URL.split('#')[0].split('?')[0] + '?rand=' + Math.floor(Math.random() * 198765897);<br \/>\n        return '';<br \/>\n      }<br \/>\n      return '';<br \/>\n    } else if (what.toLowerCase().indexOf('?!') != -1) {<br \/>\n      if (what.toLowerCase() == '?!') {<br \/>\n        location.href=document.URL.split('#')[0].split('?')[0] + '?rand=' + Math.floor(Math.random() * 198765897);<br \/>\n        return '';<br \/>\n      }<br \/>\n      if (window.localStorage) {<br \/>\n      if (lslistq.length == 0) {<br \/>\n      lslistq.push(what.split('?!')[0]);<br \/>\n      lslista.push(what.split('?!')[1]);<br \/>\n      window.localStorage.setItem('cards_usefocus_local', encodeURIComponent(what));<br \/>\n      } else {<br \/>\n      lslistq.push(what.split('?!')[0]);<br \/>\n      lslista.push(what.split('?!')[1]);<br \/>\n      window.localStorage.setItem('cards_usefocus_local', window.localStorage.getItem('cards_usefocus_local') + encodeURIComponent('~' + what));<br \/>\n      }<br \/>\n      }<br \/>\n      return '';<br \/>\n    } else if (what.toLowerCase().indexOf('?') != -1) {<br \/>\n      if (what.toLowerCase() == '?') {<br \/>\n        location.href=document.URL.split('#')[0].split('?')[0] + '?rand=' + Math.floor(Math.random() * 198765897);<br \/>\n        return '';<br \/>\n      }<br \/>\n      if (window.sessionStorage) {<br \/>\n      if (sslistq.length == 0) {<br \/>\n      sslistq.push(what.split('?')[0]);<br \/>\n      sslista.push(what.split('?')[1]);<br \/>\n      window.sessionStorage.setItem('cards_usefocus_session', encodeURIComponent(what));<br \/>\n      } else {<br \/>\n      sslistq.push(what.split('?')[0]);<br \/>\n      sslista.push(what.split('?')[1]);<br \/>\n      window.sessionStorage.setItem('cards_usefocus_session', window.sessionStorage.getItem('cards_usefocus_session') + encodeURIComponent('~' + what));<br \/>\n      }<br \/>\n      }<br \/>\n      return '';<br \/>\n    } else {<br \/>\n      firstbit='';<br \/>\n      if (window.localStorage) {<br \/>\n        try {<br \/>\n          retv=('' + window.localStorage.getItem('cards_usefocus_local')).replace(\/^null$\/g,'');<br \/>\n          if (retv != '' && nomap) { location.href=document.URL.split('#')[0].split('?')[0] + '?rand=' + Math.floor(Math.random() * 198765897);  }<br \/>\n        } catch(ewq) {<br \/>\n        }<br \/>\n      }<br \/>\n      if (window.sessionStorage) {<br \/>\n        try {<br \/>\n          retv=('' + window.sessionStorage.getItem('cards_usefocus_session')).replace(\/^null$\/g,'');<br \/>\n          if (retv != '' && nomap) { location.href=document.URL.split('#')[0].split('?')[0] + '?rand=' + Math.floor(Math.random() * 198765897);  }<br \/>\n        } catch(ewq) {<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n    return what;<br \/>\n  }<br \/>\n<\/code><\/p>\n<p><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html--GETME\" title=\"cards_usefocus.html\">The fairly significantly changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html--GETME\" title=\"cards_usefocus.html\">cards_usefocus.html<\/a> code behind the &#8220;Just Javascript&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html\" title=\"Click picture\">live run<\/a> is worth a look, we figure, for up to 52 players who play in turn.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/just-javascript-quiz-content-management-tutorial\/'>Just Javascript Quiz Content Management Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jjqmut'>Previous relevant <a target=_blank title='Just Javascript Quiz Multiple Users Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/just-javascript-quiz-multiple-users-tutorial\/'>Just Javascript Quiz Multiple Users 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\/cards_usefocus.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Just Javascript Quiz Multiple Users Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus_multiplayer.jpg\" title=\"Just Javascript Quiz Multiple Users Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Just Javascript Quiz Multiple Users Tutorial<\/p><\/div>\n<p>Adding to yesterday&#8217;s <a title='Just Javascript Quiz via Cards Tutorial' href='#jjqct'>Just Javascript Quiz via Cards Tutorial<\/a> we were surprised how difficult it was to stay with &#8220;Just Javascript&#8221; and allow for multiple player play.<\/p>\n<p>We didn&#8217;t opt for the parent to ask about the number of players, curiously, but on the second quiz answer and on, offered any non first player the chance to identify themselves as a new player into the game by appending their answer with a space character.<\/p>\n<p>The implication of that is that we&#8217;ll want to run Javascript functions of the parent from the children <font color=blue>as per<\/font> &#8230;<\/p>\n<p><code><br \/>\n    oplist[eval(-1 + oplist.length)].document.write(\"&lt;link rel=icon href=\" + cards[kl] + \"&gt;&lt;scr\" + \"ipt type='text\/javascript'&gt; var da='\" + eval(0 + kq) + \"'; var dp='Given answer is integer from 0 to 25 ... \" + sq[kq] + \"'; var def=String.fromCodePoint(\" + spcps[eval('' + kl)].split('\/')[0] + \"); function checka(tpa) { var os=''; var ps=eval(window.opener.document.title.split('\/')[0].trim()); var pg=eval(window.opener.document.title.split('\/')[1].split(' ')[0]); if (tpa.trim() == da) { ps++; os=tpa.split(da)[1];  } else { pg++;  os=tpa.split(tpa.trim())[1];  } window.opener.document.title=ps + os + '\/' + pg + ' is User Score\/Goes'; window.close();  } function pa() { if (document.hasFocus()) {  var hj=prompt(dp<font color=blue> + window.opener.blurb()<\/font>, def); if (hj == null) { hj=''; } if (hj.replace(def,'') == '') { setTimeout(pa,1000);  } else { checka(hj); } } else { setTimeout(pa,1000); } } pa(); &lt;\/scr\" + \"ipt&gt;\");<br \/>\n<\/code><\/p>\n<p> &#8230; accessing &#8230;<\/p>\n<p><code><br \/>\n  function blurb() {  \/\/ theblurb and wblurb are global variables changed elsewhere<br \/>\n    if (wblurb == '  Hello Player 1' && theblurb == '  If you are player 2 rather than player 1 append space to your answer.') {<br \/>\n      theblurb='';<br \/>\n      wblurb='';<br \/>\n    }<br \/>\n    return theblurb + wblurb;<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; giving the rather curious behaviour whereby a Javascript prompt window can be dynamically different from one document.<a target=_blank title='HTML DOM hasFocus information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_document_hasfocus.asp'>hasFocus<\/a>() incarnation (ie. the user might go away and answer another &#8220;card&#8221; Number Quiz question) to another (even not attending to answering the Javascript prompt window) &#8230; huh?!<\/p>\n<p><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html-GETME\" title=\"cards_usefocus.html\">The significantly changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html-GETME\" title=\"cards_usefocus.html\">cards_usefocus.html<\/a> code behind the &#8220;Just Javascript&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html\" title=\"Click picture\">live run<\/a> is worth a look, we figure, for up to 52 players who play in turn.<\/p>\n<hr>\n<p id='jjqct'>Previous relevant <a target=_blank title='Just Javascript Quiz via Cards Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/just-javascript-quiz-via-cards-tutorial\/'>Just Javascript Quiz via Cards 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\/cards_usefocus.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Just Javascript Quiz via Cards Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/just_javascript_quiz.jpg\" title=\"Just Javascript Quiz via Cards Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Just Javascript Quiz via Cards Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Just Javascript Navigation Tutorial' href='#jjnt'>Just Javascript Navigation Tutorial<\/a> continues our interest in &#8220;Just Javascript&#8221; (or &#8220;No Body&#8221;) web applications.<\/p>\n<p>We think today&#8217;s &#8220;Numbers Quiz&#8221; via a &#8220;Card Deck&#8221; organizational design ups the ante on all this.  We realize now what we have been missing not having involved document.<a target=_blank title='HTML DOM hasFocus information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_document_hasfocus.asp'>hasFocus<\/a>() in any of our popup window scenarios. Today, at least on non-mobile, we involve 52 such popup windows each containing a &#8220;Number Quiz&#8221; question presented as a Javascript prompt (sub-)window.  This would not be feasible without document.<a target=_blank title='HTML DOM hasFocus information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_document_hasfocus.asp'>hasFocus<\/a>() as you can tell if you examine the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html_GETME\" title=\"cards_usefocus.html\">cards_usefocus.html<\/a> code behind the &#8220;Just Javascript&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html\" title=\"Click picture\">live run<\/a> best used on your non-mobile platforms where popup windows can sit in front of parent (and beside sibling) windows, whereas mobile platforms open new web browser tabs for all the 52 windows of (a card deck) design.<\/p>\n<p>Look out, too, in the code above, for use of <a target=_blank title='window.opener information from W3Schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_opener.asp'>window.opener<\/a> back reference from a popup window back to the parent window where the scoring data is held, and updated by each popup window because of that <a target=_blank title='window.opener information from W3Schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_opener.asp'>window.opener<\/a> avaalability.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/just-javascript-quiz-via-cards-tutorial\/'>Just Javascript Quiz via Cards Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jjnt'>Previous relevant <a target=_blank title='Just Javascript Navigation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/just-javascript-navigation-tutorial\/'>Just Javascript Navigation 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\/nobody.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Just Javascript Navigation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nobody.jpg\" title=\"Just Javascript Navigation Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Just Javascript Navigation Tutorial<\/p><\/div>\n<p>The recent use we made of &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='createElement information from W3schools ... thanks' href='https:\/\/www.w3schools.com\/jsref\/met_document_createelement.asp'>document.createElement<\/a>\/<a target=_blank title='click method information from W3schools ... thanks' href='https:\/\/www.w3schools.com\/jsref\/met_html_click.asp#:~:text=The%20click()%20method%20simulates,user%20manually%20clicked%20on%20it.'>click()<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; got us thinking of the &#8220;Just Javascript&#8221; (or No Body) blog posting thread headed by <a title='Just Javascript Webmail No Body Attachment Tutorial' href='#jjwnbat'>Just Javascript Webmail No Body Attachment Tutorial<\/a>.<\/p>\n<p>As such, today we present the very simple (but first time use of the interesting <a target=_blank title='HTML DOM hasFocus information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_document_hasfocus.asp'>hasFocus<\/a>) &#8220;proof of concept&#8221; &#8230;<\/p>\n<p><code><br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n  function dothis() {<br \/>\n  var ais=null;<br \/>\n  var urlis=' ';<br \/>\n  while (urlis != '') {<br \/>\n  if (document.<a target=_blank title='HTML DOM hasFocus information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_document_hasfocus.asp'>hasFocus<\/a>()) {<br \/>\n  urlis=prompt('Enter URL that we will send you to (exit to stop)', '');<br \/>\n  } else {<br \/>\n  setTimeout(dothis, 2000); \/\/ urlis=' ';<br \/>\n  return;<br \/>\n  }<br \/>\n  if (urlis == null) { urlis=''; }<br \/>\n  if (urlis.toLowerCase() == 'exit') { return; }<br \/>\n<br \/> <br \/>\n  if (urlis.trim() != '') {<br \/>\n    if (urlis.substring(0,1) == '.') { \/\/ relative URL<br \/>\n      urlis=document.URL.split('nobody.htm')[0] + urlis;<br \/>\n    } else if (urlis.substring(0,1) == '\/' && urlis.indexOf('\/\/') == -1) { \/\/ relative URL<br \/>\n      urlis=document.URL.split('\/\/')[0] + '\/\/' + document.URL.split('\/\/')[1].split('\/')[0] + '\/' + urlis;<br \/>\n    } else if (urlis.split('\/')[0].indexOf('.') != -1) { \/\/ absolute URL<br \/>\n      if (urlis.toLowerCase().indexOf('http') != 0) {<br \/>\n        if (urlis.indexOf('\/\/') == 0) {<br \/>\n         urlis=document.URL.split('\/\/')[0] + urlis;<br \/>\n        } else {<br \/>\n         urlis=document.URL.split('\/\/')[0] + '\/\/' + urlis;<br \/>\n        }<br \/>\n      }<br \/>\n    } else { \/\/ relative URL<br \/>\n      urlis=document.URL.split('nobody.htm')[0] + urlis;<br \/>\n    }<br \/>\n    ais=document.createElement('a');<br \/>\n    ais.onclick=function() {  window.open(urlis, '_blank', 'top=100,left=100,width=600,height=600');    };<br \/>\n    if (1 == 2) { ais.href=urlis; }<br \/>\n    ais.target='_blank';<br \/>\n    ais.click();<br \/>\n  }<br \/>\n  }<br \/>\n  setTimeout(dothis, 2000); \/\/ urlis=' ';<br \/>\n  }<br \/>\n<br \/> <br \/>\n  dothis();<br \/>\n<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;\/html&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nobody.html_GETME\" title='nobody.html'>nobody.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nobody.html\" title='Click picture'>live run<\/a> link for you to use a Javascript prompt popup window&#8217;s user interaction results to navigate to a new webpage, as applicable.  Bookmarklets may be scarce on the ground, but these &#8220;Just Javascript&#8221; ideas continue the Bookmarklet Spirit of the past!<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/just-javascript-navigation-tutorial\/'>Just Javascript Navigation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jjwnbat'>Previous relevant <a target=_blank title='Just Javascript Webmail No Body Attachment Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/just-javascript-webmail-no-body-attachment-tutorial\/'>Just Javascript Webmail No Body Attachment 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\/webmail_nobody.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Just Javascript Webmail No Body Attachment Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtmlattachments.jpg\" title=\"Just Javascript Webmail No Body Attachment Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Just Javascript Webmail No Body Attachment Tutorial<\/p><\/div>\n<p>A &#8220;hard liner&#8221; for the proper use of &#8220;business emails&#8221; could argue that an email without an attachment is not productive.  Couldn&#8217;t you just have a face to face meeting instead, if there is just wording in the email (as we somewhat concur with, as an argument)?  So yesterday&#8217;s <a title='Just Javascript Webmail No Body Tutorial' href='#jjwnbt'>Just Javascript Webmail No Body Tutorial<\/a> had that limitation of no email attachment logic, which we remedy today.<\/p>\n<p>And this is where PHP&#8217;s wonderful <a target=_blank title='file-get_contents PHP method information' href='http:\/\/php.net\/manual\/en\/function.file-get-contents.php'>file_get_contents<\/a> (function) means by which we garner (URL) content &#8230;<\/p>\n<ul>\n<li>definitely works with &#8220;relative URLs&#8221; relative to HTTP:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ where today&#8217;s unchanged <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/webmail_nobody.html_GETME\" title=\"webmail_nobody.html\">webmail_nobody.html<\/a> resides &#8230; in &#8220;parsing parlance&#8221; &#8230;<br \/>\n<code><br \/>\n\"relative (URL)\" to the left of any # or ? of what lies to the left of the most right hand \"\/\" (of what the address bar URL is of the webpage you are on)<br \/>\n<\/code><br \/>\n&#8230; so that &#8230;<\/p>\n<ol>\n<li>&#8220;relative URLs&#8221; starting with &#8220;.\/&#8221; (followed by the filename, or just the filename (as you can see us using in today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtmlattachments.jpg\">tutorial picture<\/a>)) refer to the web server directory corresponding to &#8220;HTTP:\/\/www.rjmprogramming.com.au\/HTMLCSS\/&#8221; &#8230; whereas, for example &#8230;<\/li>\n<li>&#8220;relative URLs&#8221; starting with &#8220;..\/&#8221; (followed by the filename) refer to the web server directory corresponding to &#8220;HTTP:\/\/www.rjmprogramming.com.au\/&#8221; &#8230; for example<\/li>\n<\/ol>\n<p> &#8230; and &#8230;\n<\/li>\n<li>might work for &#8220;absolute URLs&#8221; (those that start with https: or HTTP: or even \/\/ (that we beg you not to confuse with <a target=_blank title='Windows UNC information from Wikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/Path_(computing)#Uniform_Naming_Convention'>Windows UNC<\/a> pathnames) that infer a transport protocol of the transport protocol (out of https: or HTTP: or even file:) that got you to the webpage you are currently on), the &#8220;might&#8221; being far more likely on &#8220;absolute URLs&#8221; pointing to the same domain as indicated on the URL of the address bar of the webpage you are currently on<\/li>\n<\/ul>\n<p>Upshot is, the user in their email Body section definitions (still no HTML <i>body<\/i> though!), can throw into any word they use, an &#8220;absolute URL&#8221; of interest, or a &#8220;relative URL&#8221; of interest, of files they want to attach (as attachments, doh!) in their email.<\/p>\n<p>Depending on the email rules though, there are limits as to the amount of attachment data allowed.  We&#8217;ll leave that to you intrepid &#8220;explorers of the Net&#8221; to discover for yourselves.   On this subject though, have you noticed that with the Photos (or Gallery) app Share options, the Email option drops off when you have highlighted a large number of photos or videos or audios to share?  That&#8217;s that email limit coming into play.<\/p>\n<p>So feel free to try this HTML-body-less web application <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/webmail_nobody.html\" title=\"Click picture\">live run<\/a> to see what we mean here.  Though the parent HTML is unchanged today, the new (email) attachment functionality needed <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php---GETME\" title=\"emailhtml.php\">a changed PHP<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php---GETME\" title=\"emailhtml.php\">emailhtml.php<\/a> to make this happen.<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>This (relative URL) &#8220;..\/&#8221; navigation backwards up the hierarchy of the web server directories will, if repeated (ie. nested to &#8220;..\/..\/&#8221; etcetera) too many times, get you into uncharted unnavigable (web server directory) places relative to that web server web site&#8217;s Document Root (below which you can not access in public webpages, normally).   But when you perform similar thinking with &#8220;absolute URLs&#8221; and go &#8220;HTTP:\/\/www.rjmprogramming.com.au\/HTMLCSS\/..\/..\/..\/blahdeblah.jpg&#8221; (in a web browser address bar) for instance, you cannot get into trouble, as you just don&#8217;t get beyond this sending you to (attempt the reference to) &#8220;HTTP:\/\/www.rjmprogramming.com.au\/blahdeblah.jpg&#8221; because on this rjmprogramming.com.au Apache domain the correspondence of the Document Root (web server directory) is to &#8220;HTTP:\/\/www.rjmprogramming.com.au\/&#8221; as the place you are not allowed (and cannot) go below in the hierarchy tree.<\/p>\n<hr>\n<p id='jjwnbt'>Previous relevant <a target=_blank title='Just Javascript Webmail No Body Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/just-javascript-webmail-no-body-tutorial\/'>Just Javascript Webmail No Body 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\/webmail_nobody.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Just Javascript Webmail No Body Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/webmailnobody.jpg\" title=\"Just Javascript Webmail No Body Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Just Javascript Webmail No Body Tutorial<\/p><\/div>\n<p>Were you around and interested in our series of about three blog postings in the series on the theme of creating webpage functionality of some interest, involving no Javascript, when we presented <a title='Missing Javascript Audio on Unmute Tutorial' href='#mjaut'>Missing Javascript Audio on Unmute Tutorial<\/a>?  Well, today, it&#8217;s the turn of &#8220;just Javascript&#8221;, which is sort of like what <a target=_blank title='Bookmarklet information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Bookmarklet'>Bookmarklets<\/a> were about.<\/p>\n<p>With today&#8217;s &#8220;just Javascript&#8221; we have to qualify that a little for our webmail emailing sender application with the architecture &#8230;<\/p>\n<ul>\n<li>parent webpage with only document.head and apart from a document.title just a script Javascript tag of content (using  Javascript <a target=_blank title='Javascript prompt window information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_prompt.asp'>prompt<\/a> windows to ask for user information) &#8230; <\/li>\n<li>sending (POSTing) data via &#8230;\n<ol>\n<li>Ajax <a target=_blank title='XMLHttpRequest information' href='https:\/\/developer.mozilla.org\/en\/docs\/Web\/API\/XMLHttpRequest'>XMLHttpRequest<\/a> object &#8230; as the conduit for &#8230;<\/li>\n<li><a target=_blank title='FormData object information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/FormData'>FormData<\/a> object<\/li>\n<\/ol>\n<p> &#8230; to <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php--GETME\" title=\"emailhtml.php\">our changed<\/a> &#8230;\n<\/li>\n<li>PHP communication emailing tool <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php--GETME\" title=\"emailhtml.php\">emailhtml.php<\/a> &#8230; and out to &#8230;<\/li>\n<li>the emailee (out there in the big wide woooorrrrrllllldddd)<\/li>\n<\/ul>\n<p>Guess we find it interesting that you can do all this (sending of email to emailee recipients) with no document.body in sight.<\/p>\n<p>So take a look at that parent <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/webmail_nobody.html_GETME\" title=\"webmail_nobody.html\">webmail_nobody.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/webmail_nobody.html\" title=\"Click picture\">live run<\/a> link to see what we mean here, and\/or watch the video below &#8230;<\/p>\n<p><video style='width:100%;height:600px;' controls><source src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/webmailnobody.mp4\" type=\"video\/mp4\"><\/source><\/video><\/p>\n<hr>\n<p id='mjaut'>Previous relevant <a target=_blank title='Missing Javascript Audio on Unmute Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/missing-javascript-audio-on-unmute-tutorial\/'>Missing Javascript Audio on Unmute 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\/the_nested.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Missing Javascript Audio on Unmute Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/the_nested.jpg\" title=\"Missing Javascript Audio on Unmute Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Missing Javascript Audio on Unmute Tutorial<\/p><\/div>\n<p>Our &#8220;third cab off the rank&#8221; following on from yesterday&#8217;s <a title='Missing Javascript Stop Watch Tutorial' href='#mjswt'>Missing Javascript Stop Watch Tutorial<\/a>  &#8220;missing Javascript&#8221; ideas is an HTML div nesting scenario using just &#8230;<\/p>\n<ol>\n<li>HTML<\/li>\n<li>CSS<\/li>\n<\/ol>\n<p> &#8230; again, with some or all of the &#8220;usuals&#8221; below  &#8230;<\/p>\n<ul>\n<li><a target=_blank title='CSS3 calc information' href='https:\/\/www.htmlgoodies.com\/html5\/css\/using-the-css3-calc-function.html'>calc<\/a> method to assist with defining width and height and size dimensions along with operator &#8220;+&#8221; and\/or &#8220;-&#8221; offset calculation opportunities, and which we&#8217;d have used the Javascript window.<a target=_blank title='Information about Window.getComputedStyle' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/getComputedStyle'>getComputedStyle<\/a> and\/or [element].<a target=_blank title='Javascript getBoundingClientRect method information from Mozilla' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect'>getBoundingClientRect<\/a> methods to cover this (in a much more unwieldy way, as you would probably surmise)<\/li>\n<li>CSS <a target=_blank title='CSS variables information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Using_CSS_variables'>variables<\/a> we started talking about here at <a target=_blank title='CSS Variables Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css-variables-primer-tutorial\/'>CSS Variables Primer Tutorial<\/a><\/li>\n<li>CSS3 <a target=_blank title='CSS3 @keyframes rule information' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_animation-keyframes.asp'>@keyframes<\/a> rules we first talked about at <a target=_blank title='CSS3 @keyframes Rule Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-keyframes-rule-primer-tutorial\/'>CSS3 @keyframes Rule Primer Tutorial<\/a> that assist with animations that we can make work via &#8230;<\/li>\n<li>CSS3  <a target=_blank title='CSS3 transitions rule information' href='https:\/\/www.w3schools.com\/css\/css3_transitions.asp'>transitions<\/a> for scheduled functionality (we&#8217;d have used Javascript <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> (and <a target=_blank title='Javascript setInterval method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_setinterval.asp'><i>setInterval<\/i><\/a>) methods to cover the same &#8220;territory&#8221;) we first talked about at <a target=_blank title='CSS3 Transition Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-transition-primer-tutorial '>CSS3 Transition Primer Tutorial<\/a> &#8230; specified with CSS Criteria involving &#8230;<\/li>\n<li>CSS Selectors <i>:after<\/i> and <i>:before<\/i> (and often, as for today&#8217;s work, with the <a target=_blank title='CSS content: property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_gen_content.asp'>content:<\/a> CSS property) first talked about here with <a target=_blank title='WordPress Bullet Point CSS Styling Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-bullet-point-css-styling-primer-tutorial\/'>WordPress Bullet Point CSS Styling Primer Tutorial<\/a> &#8230; and, today &#8230;<\/li>\n<li>CSS3 <a target=_blank title='CSS3 transform property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_transform.asp'>transform<\/a> property&#8217;s rotate (<b>and translate and scale<\/b>) setting<b>s<\/b> (for the <b>puppy dog body<\/b> movements) &#8230; as well as the idea that &#8230;<\/li>\n<li><b>On non mobile platforms you can set up the playing of &#8220;audio&#8221; data via the use of an HTML <a target=_blank href='https:\/\/www.w3schools.com\/html\/html5_audio.asp' title='HTML audio element information from w3schools'>audio<\/a> tag with the properties &#8230;\n<ol>\n<li>controls<\/li>\n<li>autostart<\/li>\n<li>loop<\/li>\n<li>muted<\/li>\n<\/ol>\n<p><i><b>Stop Press<\/b><\/i><\/p>\n<p>Above is all fine and good for non-mobile but not so good for mobile, so to keep all happy with the one click, still, is to transfer HTML coding from &#8230;<\/p>\n<p><code><br \/>\n&lt;audio id='myaudio' title='Got a sock in my mouth, so you might want to unmute me!' type='audio\/mp3' style=\"display:none;margin-left:-350px;opacity:0.1;\" autostart muted loop controls src=\"Puppy-sounds.mp3\" \/&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; to &#8230;<\/p>\n<p><code><br \/>\n&lt;!--audio id='myaudio' title='Got a sock in my mouth, so you might want to unmute me!' type='audio\/mp3' style=\"display:none;margin-left:-350px;opacity:0.1;\" autostart muted loop controls src=\"Puppy-sounds.mp3\" \/--&gt;<br \/>\n&lt;audio id='myaudiotwo' title='Got a sock in my mouth, so you might want to unmute me!' type='audio\/mp3' style=\"margin-left:-350px;opacity:0.1;\" autostart=\"0\" loop controls src=\"Puppy-sounds.mp3\" \/&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and a <i>src=<\/i> URL data source (as we thank <a target=_blank title='Puppy sounds, thanks' href='http:\/\/www.orangefreesounds.com\/puppy-sounds\/'>this link<\/a> for today), or data URI if preferred (which we do for today&#8217;s image data from <a target=_blank title='Image data URI of puppy, thanks' href='https:\/\/stackoverflow.com\/questions\/34914113\/dataimage-gifbase64-images-not-animated'>this link<\/a>, thanks (when we were researching animated GIF data URIs (which we may return to at a later date))<\/b>\n<\/li>\n<\/ul>\n<p> &#8230; that sets up the scenario that all the user has to do to hear the audio is to click the &#8220;muted&#8221; control button, without needing the usual Javascript <i>play()<\/i> methods &#8230; but not on mobile!<\/p>\n<p>Feel free to let the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/the_nested.html\" title=\"Click picture\">puppy play<\/a>, that uses the HTML and CSS (but no Javascript) of <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/the_nested.html-GETME\" title=\"the_nested.html\">the_nested.html<\/a> and based largely on the previous <a target=_blank title='HTML Nested Centering via Multiple Select Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-nested-centering-via-multiple-select-tutorial\/'>HTML Nested Centering via Multiple Select Tutorial<\/a> so that <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/the_nested.html-GETME\" title=\"the_nested.html\">these changes<\/a> reflect how we got to the first draft of today&#8217;s work.   Maybe some of the ideas are of interest.  We hope so!<\/p>\n<hr>\n<p id='mjswt'>Previous relevant <a target=_blank title='Missing Javascript Stop Watch Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/missing-javascript-primer-tutorial\/'>Missing Javascript Stop Watch 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\/stop_watch.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Missing Javascript Stop Watch Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_watch.jpg\" title=\"Missing Javascript Stop Watch Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Missing Javascript Stop Watch Tutorial<\/p><\/div>\n<p>Following on from yesterday&#8217;s <a title='Missing Javascript Primer Tutorial' href='#mjpt'>Missing Javascript Primer Tutorial<\/a> our second &#8220;cab off the rank&#8221; for &#8220;missing Javascript&#8221; ideas is a stop watch featuring just &#8230;<\/p>\n<ol>\n<li>HTML<\/li>\n<li>CSS<\/li>\n<\/ol>\n<p> &#8230; again, <b>setting up document.body load instigated<\/b> &#8230;<\/p>\n<ul>\n<li><a target=_blank title='CSS3 calc information' href='https:\/\/www.htmlgoodies.com\/html5\/css\/using-the-css3-calc-function.html'>calc<\/a> method to assist with defining width and height and size dimensions along with operator &#8220;+&#8221; and\/or &#8220;-&#8221; offset calculation opportunities, and which we&#8217;d have used the Javascript window.<a target=_blank title='Information about Window.getComputedStyle' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/getComputedStyle'>getComputedStyle<\/a> and\/or [element].<a target=_blank title='Javascript getBoundingClientRect method information from Mozilla' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect'>getBoundingClientRect<\/a> methods to cover this (in a much more unwieldy way, as you would probably surmise)<\/li>\n<li>CSS <a target=_blank title='CSS variables information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Using_CSS_variables'>variables<\/a> we started talking about here at <a target=_blank title='CSS Variables Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css-variables-primer-tutorial\/'>CSS Variables Primer Tutorial<\/a><\/li>\n<li><b>CSS3 <a target=_blank title='CSS3 @keyframes rule information' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_animation-keyframes.asp'>@keyframes<\/a> rules we first talked about at <a target=_blank title='CSS3 @keyframes Rule Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-keyframes-rule-primer-tutorial\/'>CSS3 @keyframes Rule Primer Tutorial<\/a> that assist with animations<\/b> that we can make work via &#8230;<\/li>\n<li>CSS3  <a target=_blank title='CSS3 transitions rule information' href='https:\/\/www.w3schools.com\/css\/css3_transitions.asp'>transitions<\/a> for scheduled functionality (we&#8217;d have used Javascript <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> (and <a target=_blank title='Javascript setInterval method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_setinterval.asp'><i>setInterval<\/i><\/a>) methods to cover the same &#8220;territory&#8221;) we first talked about at <a target=_blank title='CSS3 Transition Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-transition-primer-tutorial '>CSS3 Transition Primer Tutorial<\/a> &#8230; specified with CSS Criteria involving &#8230;<\/li>\n<li>CSS Selectors <i>:after<\/i> and <i>:before<\/i> (and often, as for today&#8217;s work, with the <a target=_blank title='CSS content: property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_gen_content.asp'>content:<\/a> CSS property) first talked about here with <a target=_blank title='WordPress Bullet Point CSS Styling Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-bullet-point-css-styling-primer-tutorial\/'>WordPress Bullet Point CSS Styling Primer Tutorial<\/a> &#8230; and, today &#8230;<\/li>\n<li><b>CSS3 <a target=_blank title='CSS3 transform property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_transform.asp'>transform<\/a> property&#8217;s rotate setting (for the stop watch hand movements)<\/b><\/li>\n<\/ul>\n<p> &#8230; which we needed to do to make multiple animations happen, but we used <a target=_blank title='CSS animation-delay property' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_animation-delay.asp'><i>animation-delay:5s;<\/i><\/a> to delay its start.   The hands (second and minute, hence the two animations) are <a target=_blank title='Overlay postings at this blog' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay'>&#8220;overlay&#8221;<\/a> &#8230;<\/p>\n<ul>\n<li><a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a> property<\/li>\n<li><a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>z-index<\/a><\/li>\n<\/ul>\n<p> &#8230; feeling HTML horizontal rule elements that also feature <a target=_blank title='CSS linear gradient information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/func_linear-gradient.asp'>linear gradients<\/a>, to emphasise (in red) the &#8220;pointy end&#8221; of the &#8220;hand conversation&#8221; (good on walls with shadows &#8230; but we digress).<\/p>\n<p>Feel free to let loose the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_watch.html\" title=\"Click picture\">stop watch<\/a> that uses the HTML and CSS (but no Javascript) of <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_watch.html_GETME\" title=\"stop_watch.html\">stop_watch.html<\/a> for today&#8217;s instructional information.  Thanks to <a target=_blank title='Clipart - stop watch ... thanks' href='https:\/\/openclipart.org\/detail\/46075\/stop-watch'>Clipart &#8211; stop watch<\/a> for the great clip art used.<\/p>\n<hr>\n<p id='mjpt'>Previous relevant <a target=_blank title='Missing Javascript Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/missing-javascript-primer-tutorial\/'>Missing Javascript 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\/calc_use.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Missing Javascript Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/calc_use.jpg\" title=\"Missing Javascript Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Missing Javascript Primer Tutorial<\/p><\/div>\n<p>If you were to ask me which programming component is most vital to web application development, I&#8217;d not be <i>Robinson Crusoe<\/i> in saying &#8230;<\/p>\n<blockquote><p>\nWithout a doubt, Javascript\n<\/p><\/blockquote>\n<p> &#8230; and with that thought in mind we have a two pronged motive to see how far we go developing some web applications that &#8220;don&#8217;t use Javascript&#8221;, calling into play the &#8230;<\/p>\n<ul>\n<li>meaning of &#8220;missing&#8221;, as in, our code is &#8220;missing&#8221; Javascript &#8230; as well as how I feel with the masochism of the exercise, calling into play the &#8230;<\/li>\n<li>meaning of &#8220;missing&#8221;, as in, it&#8217;s hard work writing meaningful web applications without Javascript &#8230; but I guess we&#8217;ll learn a bit from the exercise of <i>&#8220;see where we go&#8221;<\/i>, allowing for the fact, not today, but down the track, that we will allow the use of server-side languages such as PHP<\/li>\n<\/ul>\n<p>Okay, so, given that restriction, let&#8217;s see today&#8217;s challenge, to just use, in a web application &#8230;<\/p>\n<ol>\n<li>HTML<\/li>\n<li>CSS<\/li>\n<\/ol>\n<p> &#8230; and here is where we have to point out that CSS3 introduced to us some functionality that improves the prospects for web application design &#8220;interest&#8221; without using Javascript (though it is hard to convince me even so, that I am not &#8220;missing&#8221; Javascript) here.  CSS3 introduced to us &#8230;<\/p>\n<ul>\n<li><a target=_blank title='CSS3 calc information' href='https:\/\/www.htmlgoodies.com\/html5\/css\/using-the-css3-calc-function.html'>calc<\/a> method to assist with defining width and height and size dimensions along with operator &#8220;+&#8221; and\/or &#8220;-&#8221; offset calculation opportunities, and which we&#8217;d have used the Javascript window.<a target=_blank title='Information about Window.getComputedStyle' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/getComputedStyle'>getComputedStyle<\/a> and\/or [element].<a target=_blank title='Javascript getBoundingClientRect method information from Mozilla' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect'>getBoundingClientRect<\/a> methods to cover this (in a much more unwieldy way, as you would probably surmise)<\/li>\n<li>CSS <a target=_blank title='CSS variables information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Using_CSS_variables'>variables<\/a> we started talking about here at <a target=_blank title='CSS Variables Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css-variables-primer-tutorial\/'>CSS Variables Primer Tutorial<\/a><\/li>\n<li>CSS3 <a target=_blank title='CSS3 @keyframes rule information' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_animation-keyframes.asp'>@keyframes<\/a> rules we first talked about at <a target=_blank title='CSS3 @keyframes Rule Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-keyframes-rule-primer-tutorial\/'>CSS3 @keyframes Rule Primer Tutorial<\/a> that assist with animations that we can make work via &#8230;<\/li>\n<li>CSS3  <a target=_blank title='CSS3 transitions rule information' href='https:\/\/www.w3schools.com\/css\/css3_transitions.asp'>transitions<\/a> for scheduled functionality (we&#8217;d have used Javascript <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> (and <a target=_blank title='Javascript setInterval method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_setinterval.asp'><i>setInterval<\/i><\/a>) methods to cover the same &#8220;territory&#8221;) we first talked about at <a target=_blank title='CSS3 Transition Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-transition-primer-tutorial '>CSS3 Transition Primer Tutorial<\/a> &#8230; specified with CSS Criteria involving &#8230;<\/li>\n<li>CSS Selectors <i>:after<\/i> and <i>:before<\/i> (and often, as for today&#8217;s work, with the <a target=_blank title='CSS content: property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_gen_content.asp'>content:<\/a> CSS property) first talked about here with <a target=_blank title='WordPress Bullet Point CSS Styling Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-bullet-point-css-styling-primer-tutorial\/'>WordPress Bullet Point CSS Styling Primer Tutorial<\/a><\/li>\n<\/ul>\n<p> &#8230; and we use all of these in our Festive Season themed web application today, you can try at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/calc_use.html\" title=\"Click picture\">live run<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/calc_use.html_GETME\" title=\"calc_use.html\">calc_use.html<\/a> (free of any Javascript (but &#8220;why&#8221; springs to mind <font size=1>&#8230; because it is NOT there, perhaps?<\/font>)).<\/p>\n<p>Here&#8217;s the other thing about today.  Our long sought after &#8220;just make the <i>body<\/i> background be semi-transparent&#8221; but not its foreground parts, was solved, for us via the great advice of &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Useful background opacity link' href='https:\/\/stackoverflow.com\/questions\/35669563\/changing-the-opacity-of-background-image-in-css'>https:\/\/stackoverflow.com\/questions\/35669563\/changing-the-opacity-of-background-image-in-css<\/a> was a great link regarding semi-transparent background via CSS like &#8230;<br \/>\n<code><br \/>\n<b>body<\/b> {<br \/>\n  background: URL(https:\/\/www.woodwardenglish.com\/wp-content\/uploads\/2013\/12\/12-days-of-christmas.jpg) no-repeat center center fixed;<br \/>\n  background-size: contain;<br \/>\n}<br \/>\n.banner {<br \/>\n  <b>background: rgba(220,220,255,0.8);<\/b><br \/>\n}<br \/>\n<\/code>\n<\/li>\n<li><a target=_blank title='Useful CSS :root information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:root'>https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:root<\/a> taught me how the <i> :root {   } <\/i> CSS descriptor was a good place to define CSS (global) variables, thanks<\/li>\n<li><a target=_blank title='Useful CSS calc information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/calc'>https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/calc<\/a> taught me lots regarding how to use CSS calc method, thanks<\/li>\n<li><a target=_blank title='Useful background opacity link' href='https:\/\/codepen.io\/robinrendle\/embed\/MaVPbo?height=300&#038;theme-id=1&#038;embed-version=2&#038;slug-hash=MaVPbo&#038;default-tab=result&#038;user=robinrendle'>https:\/\/codepen.io\/robinrendle\/embed\/MaVPbo?height=300&#038;theme-id=1&#038;embed-version=2&#038;slug-hash=MaVPbo&#038;default-tab=result&#038;user=robinrendle<\/a> taught me lots of setting up the animation and transitioning in CSS, thanks<\/li>\n<li><a target=_blank title='Useful lyrics resource' href='https:\/\/www.google.com.au\/search?q=lyrics+to+twelve+days+of+christmas&#038;ie=utf-8&#038;oe=utf-8&#038;client=firefox-b-ab&#038;gfe_rd=cr&#038;dcr=0&#038;ei=Z0U8WpLKEobp8wfejKjQDg'>https:\/\/www.google.com.au\/search?q=lyrics+to+twelve+days+of+christmas&#038;ie=utf-8&#038;oe=utf-8&#038;client=firefox-b-ab&#038;gfe_rd=cr&#038;dcr=0&#038;ei=Z0U8WpLKEobp8wfejKjQDg<\/a> is a great link to some lyrics, thanks<\/li>\n<li><a target=_blank title='Background image of great assistance, thanks' href='https:\/\/www.woodwardenglish.com\/wp-content\/uploads\/2013\/12\/12-days-of-christmas.jpg'>https:\/\/www.woodwardenglish.com\/wp-content\/uploads\/2013\/12\/12-days-of-christmas.jpg<\/a> was link to very useful background image, thanks<\/li>\n<\/ul>\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='#d35017' onclick='var dv=document.getElementById(\"d35017\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d35017' 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='#d35043' onclick='var dv=document.getElementById(\"d35043\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/keyframes\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d35043' 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='#d35068' onclick='var dv=document.getElementById(\"d35068\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/audio\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d35068' 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='#d45027' onclick='var dv=document.getElementById(\"d45027\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45027' 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='#d45034' onclick='var dv=document.getElementById(\"d45034\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/attachment\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45034' 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='#d52035' onclick='var dv=document.getElementById(\"d52035\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/navigation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d52035' 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='#d52040' onclick='var dv=document.getElementById(\"d52040\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/quiz\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d52040' 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='#d52045' onclick='var dv=document.getElementById(\"d52045\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/prompt\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d52045' 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='#d52051' onclick='var dv=document.getElementById(\"d52051\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/localStorage\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d52051' 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='#d52056' onclick='var dv=document.getElementById(\"d52056\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d52056' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Our &#8220;Just Javascript&#8221; adage used throughout this blog posting thread, up until today, headed by yesterday&#8217;s Just Javascript Quiz Content Management Tutorial needs more explanation. Really what we are trying to do might better be described as &#8220;No Body Definition&#8221; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/just-javascript-quiz-css-styling-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,37],"tags":[126,127,157,257,3610,2539,281,3609,576,652,2415,3608,830,1968,967,997,1761,1022,1953,3169,1209,1212,1319,1418,3010],"class_list":["post-52056","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-background","tag-background-image","tag-bookmarklet","tag-content","tag-content-management","tag-createelement","tag-css","tag-document-createelement","tag-html","tag-javascript","tag-localstorage","tag-mclick","tag-navigation","tag-onions","tag-popup","tag-programming","tag-prompt","tag-quiz","tag-selector","tag-sessionstorage","tag-style","tag-styling","tag-tutorial","tag-webpage","tag-window-opener"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52056"}],"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=52056"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52056\/revisions"}],"predecessor-version":[{"id":52063,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52056\/revisions\/52063"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=52056"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=52056"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=52056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}