{"id":8781,"date":"2014-08-01T05:03:19","date_gmt":"2014-07-31T19:03:19","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=8781"},"modified":"2018-10-28T07:48:20","modified_gmt":"2018-10-27T21:48:20","slug":"static-html-javascript-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/static-html-javascript-primer-tutorial\/","title":{"rendered":"Static HTML Javascript Primer Tutorial"},"content":{"rendered":"
\"Static<\/a>

Static HTML Javascript Primer Tutorial<\/p><\/div>\n

Very simple static HTML that has not been readied for Javascript DOM<\/a> manipulations can still be dynamically changed and worked with to turn your “sow’s ear”<\/i> into your “silk purse”<\/i> (even if the pigs are flying<\/a>?!).<\/p>\n

The only real requirement to be able to create a web page using Javascript DOM is a knowledge of which HTML element types go to make up the web page data, and the order in which those HTML elements are placed, maybe … perhaps you don’t even need to know this. Once you know that, even if the web page data has no id=<\/i> nor (input tag) name=<\/i> specification, you can still use Javascript DOM’s getElementsByTagName()<\/i><\/a> method to create the Javascript DOM functionality you wish to place on top of simple static HTML you have inherited. In the two phase operation, for static HTML with no id=<\/i> first use a looping of getElementsByTagName()<\/i> for known HTML element types and assign id=<\/i>‘s to elements that potentially need Javascript DOM attention, and for the rest of the time use Javascript DOM getElementById()<\/i><\/a> method to actually perform the dynamic functionality you wish to apply.<\/p>\n

We show today, also, the dynamic application of user interactivity via an HTML form tag with the use of the GET<\/i> method (because we are only using HTML\/Javascript today (no PHP (which could handle the POST<\/i> method)), the parameters of which we test for when the webpage loads, and the specifications for which we have full control over, hence the chance to use pieces of code like:<\/p>\n

favcol = location.search.split(“favcol=”)[1] ? location.search.split(“favcol=”)[1].split(“&”)[0] : “”;<\/codeblock><\/p>\n

So, today, we show the application of some code in an external Javascript file to show this being done to this simple starting static HTML addid.htm<\/a> to (very minute changes to HTML, but bigger changes regarding external Javascript) addid.html<\/a> where the external Javascript (which makes all the dynamics) is addid.js<\/a><\/p>\n

Here is a link to the HTML code change differences (minute) addid.html<\/a> and here is a link to the external Javascript code change differences (second) addid.js<\/a> … chortle, chortle … get it … minute\/second … play on words … oh! … guess you had to be there … chortle, chortle.<\/p>\n

Here is a live run<\/a> of the original static HTML, and here is a live run<\/a> of the Javascript DOM dynamically altered webpage.<\/p>\n

You may notice that a View->Page Source of the Javascript DOM enhanced web page shows no difference to the View->Page Source of the Static HTML. There are two points to note about this:<\/p>\n