{"id":35017,"date":"2017-12-23T03:01:29","date_gmt":"2017-12-22T17:01:29","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=35017"},"modified":"2017-12-23T15:48:37","modified_gmt":"2017-12-23T05:48:37","slug":"missing-javascript-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/missing-javascript-primer-tutorial\/","title":{"rendered":"Missing Javascript Primer Tutorial"},"content":{"rendered":"<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","protected":false},"excerpt":{"rendered":"<p>If you were to ask me which programming component is most vital to web application development, I&#8217;d not be Robinson Crusoe in saying &#8230; Without a doubt, Javascript &#8230; and with that thought in mind we have a two pronged &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/missing-javascript-primer-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":[4,12,37],"tags":[84,2422,281,282,576,675,997,2232,1953,2378,1319],"class_list":["post-35017","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-tutorials","tag-animation-2","tag-calc","tag-css","tag-css3","tag-html","tag-keyframes","tag-programming","tag-property","tag-selector","tag-transition","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35017"}],"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=35017"}],"version-history":[{"count":13,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35017\/revisions"}],"predecessor-version":[{"id":35034,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35017\/revisions\/35034"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=35017"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=35017"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=35017"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}