{"id":5105,"date":"2013-11-07T05:03:09","date_gmt":"2013-11-06T18:03:09","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=5105"},"modified":"2013-11-07T05:03:09","modified_gmt":"2013-11-06T18:03:09","slug":"javascript-text-node-object-via-dom-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-text-node-object-via-dom-tutorial\/","title":{"rendered":"Javascript Text Node Object via DOM Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/TextNode\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Javascript Text Node Object via DOM Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/TextNode\/TextNodeObjectDOM.jpg\" title=\"Javascript Text Node Object via DOM Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Javascript Text Node Object via DOM Tutorial<\/p><\/div>\n<p>A lot of the things people like about the Web are to do with JavaScript and client-side activities.   You can arrange for many interesting things to happen for your web clients without changing pages all that often, which used to be all the rage in the early days of the web.   It is when getting form information off the person browsing that you really need to transfer to a new page, but there are so many things Javascript can do using the DOM (document object model).   Today we show an object oriented approach to DOM usage with the theme of totally dynamically controlled text node &lt;p&gt; HTML elements using Javascript and the DOM.<\/p>\n<blockquote><p>The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents.[1] Objects in the DOM tree may be addressed and manipulated by using methods on the objects. The public interface of a DOM is specified in its application programming interface (API). The history of the Document Object Model is intertwined with the history of the &#8220;browser wars&#8221; of the late 1990s between Netscape Navigator and Microsoft Internet Explorer, as well as with that of JavaScript and JScript, the first scripting languages to be widely implemented in the layout engines of web browsers.\n<\/p><\/blockquote>\n<p>Click <a target=_blank title='click picture' href='http:\/\/www.rjmprogramming.com.au\/Javascript\/TextNode\/'>on picture above<\/a> to do live run tutorial of Text Node add\/delete\/replace\/insert-before functionality using Javascript objects and the DOM.<\/p>\n<p>Link to Document Object Model information &#8230; <a target=_blank title='DOM' href='http:\/\/en.wikipedia.org\/wiki\/Document_Object_Model'> &#8230; via Wikipedia, from where quote above is derived<\/a>.<br \/>\n<a target=_blank href='http:\/\/www.rjmprogramming.com.au\/Javascript\/TextNode\/text_node_object_dom.html_GETME'>Download programming source code and rename to text_node_object_dom.html<\/a>.<\/p>\n<p>Regarding this topic I really like and got help from <em>&#8220;JavaScript &amp; Ajax&#8221; seventh edition by Tom Negrino and Dori Smith<\/em>  \u2026 the only matter not covered in this book is the idea of non-breaking white space entries, as we came across in the tutorial trying to piece together a poem, and some ideas to overcome this problem came from this <a target=_blank href='http:\/\/www.codingforums.com\/archive\/index.php\/t-6252.html' title='Overcoming white space problem'>tutorial<\/a> where, in the end, a scenario where the user enters &amp;nbsp; into the text area will result in a post-processing examination of the &lt;div&gt; HTML element\u2019s innerHTML property and arrange for u00a0 to be placed to satisfy web browser \u201cscrunching\u201d of right hand white space (believe me, the web browser people would have thought if there was any way around this rendering issue, long and hard, so we programmers need to think about it, a lot, sometimes). Anyway, thanks to this link are in order.<\/p>\n<p>Thanks to <a target=_blank title='Aufie Zophy (18 October 1964)' href='http:\/\/www.poemhunter.com\/poem\/y-in-the-dark-of-the-night-poem-about-hope\/'>Aufie Zophy (18 October 1964)<\/a> for the poetical inspiration.<\/a><\/p>\n<p><strong><em>Did you know &#8230;<\/em><\/strong><br \/>\nJavaScript makes a great easy-access Calculator?<\/p>\n<p>Try typing the lines below into the address bar of your favourite browser:<\/p>\n<p>Javascript: eval(512 \/ 380);<br \/>\nJavascript: eval(512 * 380);<br \/>\nJavascript: eval(512 &#8211; 380);<br \/>\nJavascript: eval(512 + 380);<br \/>\nJavascript: eval(512 % 380);<\/p>\n<p>These days we spend so much time on the Internet it is a much quicker way to get to a calculator!\n<\/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='#d5105' onclick='var dv=document.getElementById(\"d5105\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?s=Slide+Show\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d5105' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>A lot of the things people like about the Web are to do with JavaScript and client-side activities. You can arrange for many interesting things to happen for your web clients without changing pages all that often, which used to &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-text-node-object-via-dom-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,28,37],"tags":[354,576,652,849,875,997,1257,1319],"class_list":["post-5105","post","type-post","status-publish","format-standard","hentry","category-elearning","category-oop","category-tutorials","tag-dom","tag-html","tag-javascript","tag-object","tag-oop","tag-programming","tag-text-node","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/5105"}],"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=5105"}],"version-history":[{"count":0,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/5105\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=5105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=5105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=5105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}