{"id":11928,"date":"2015-09-07T05:02:57","date_gmt":"2015-09-06T19:02:57","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=11928"},"modified":"2015-09-07T06:20:14","modified_gmt":"2015-09-06T20:20:14","slug":"javascript-dom-big-changes-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-dom-big-changes-primer-tutorial\/","title":{"rendered":"Javascript DOM Big Changes Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/change_everything.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Javascript DOM Big Changes Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/change_everything-1of.jpg\" title=\"Javascript DOM Big Changes Primer Tutorial\" id='jbg' onmouseover=' this.src=this.src.replace(\"-1of.jpg\",\"-2of.JPG\").replace(\"-2of.jpg\",\"-1of.JPG\").replace(\"JPG\",\"jpg\");   '   \/><\/a><p class=\"wp-caption-text\">Javascript DOM Big Changes Primer Tutorial<\/p><\/div>\n<p>Hope you&#8217;ve been seeing the joys of web application programming using Javascript client logic regarding <a target=_blank title='HTML DOM innerHTML Property information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/prop_html_innerhtml.asp'>HTML DOM innerHTML property<\/a> over the last couple of days.  It occurs to us that we, perhaps, should step back a bit and go over some &#8220;refresh&#8221; feel issues to this work, where you need to consider important dynamic choices the user has made on your webpage ahead of the &#8220;refresh&#8221; feel you make happen, and cater for that, as necessary.  The bottom line is, these techniques add dynamic aspects to your Javascript DOM client work.<\/p>\n<p>Javascript <a target=_blank title='Javascript DOM information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_htmldom.asp'>DOM<\/a> is very useful, and tend to think of it normally as a localised modifier of the look of web elements, but the use of its <i>document.body.<a target=_blank title='Information about innerHTML from w3schools' href='http:\/\/www.w3schools.com\/jsref\/prop_html_innerhtml.asp'>innerHTML<\/a><\/i> along with a <a target=_blank title='Javascript regex' href='http:\/\/www.w3schools.com\/jsref\/jsref_obj_regexp.asp'>regex<\/a> usage of Javascript&#8217;s <a target=_blank title='Javascript string replace function information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_replace.asp'><i>replace<\/i><\/a> function can be combined to change things up considerably.<\/p>\n<p>This came to mind, and got implemented, with our <a target=_blank title=tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=11901'>Morse Code tutorial<\/a> the other day, when multiple select tags using the onclick event don&#8217;t work so well with mobile devices.<\/p>\n<p>Here, today, we allow the toggling of &#8230;<\/p>\n<ul>\n<li>option tags with input type=&#8221;button&#8221; tags<\/li>\n<li>Morse Code content with Character content<\/li>\n<\/ul>\n<p>&#8230; via some <a target-_blank title='a tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_a.asp'><i>a<\/i><\/a> link tag clicking.<\/p>\n<p>Javascript&#8217;s replace function has a &#8220;dumbness&#8221; which we&#8217;ve used deliberately, though it feels wrong, in that in its non-regex usage mode it just does one replace at most, unlike PHP&#8217;s <a target=_blank title='PHP str_replace method' href='http:\/\/php.net\/manual\/en\/function.str-replace.php'>str_replace<\/a> (generally much more useful).  Not often, but sometimes, that one replace only can be useful, even for bits of our purposes today when we bank on finding the Morse Code to replace that first time only, and not allow it to delve further, whereas the regex way with replace is great to turn &#8220;\/option&#8221; to &#8220;\/input&#8221; and &#8220;option &#8221; to &#8220;input type=&#8217;button&#8217; &#8221; and so fits the bill well &#8230; sadly, the other way around with the deprecated use of <i>&lt;\/input&gt;<\/i> to close an input tag, it is not so useful.  The regex usage of Javascript&#8217;s replace function often combines well with the Javascript <a target=_blank title='Javascript eval function information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_eval.asp'>eval<\/a> function to construct dynamic replace scenarios.  Sometimes in Javascript event logic it can be useful to use <i>this.type<\/i> to determine the HTML element type &#8230; here is a <a target=_blank title='link' href='http:\/\/stackoverflow.com\/questions\/7117549\/bugs-in-javascript'>link<\/a> using it, as we do here today in code below.<\/p>\n<p>Wow, are you still awake?!   You really need to try this yourself to see what we mean should you be into these ideas.<\/p>\n<p>So try the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/change_everything.html\" title='Click picture'>live run<\/a> and\/or download the HTML and Javascript source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/change_everything.html_GETME\" title='change_everything.html'>change_everything.html<\/a><\/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='#d11928' onclick='var dv=document.getElementById(\"d11928\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=Javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d11928' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Hope you&#8217;ve been seeing the joys of web application programming using Javascript client logic regarding HTML DOM innerHTML property over the last couple of days. It occurs to us that we, perhaps, should step back a bit and go over &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-dom-big-changes-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":[12,14,17,37],"tags":[1596,354,399,549,576,1525,652,862,997,1040,1053,1319],"class_list":["post-11928","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-gui","category-tutorials","tag-document-body-innerhtml","tag-dom","tag-eval","tag-gui","tag-html","tag-innerhtml","tag-javascript","tag-onclick-event","tag-programming","tag-regex","tag-replace","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/11928"}],"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=11928"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/11928\/revisions"}],"predecessor-version":[{"id":17038,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/11928\/revisions\/17038"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=11928"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=11928"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=11928"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}