{"id":29041,"date":"2017-03-23T03:01:34","date_gmt":"2017-03-22T17:01:34","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=29041"},"modified":"2017-03-22T13:01:27","modified_gmt":"2017-03-22T03:01:27","slug":"list-web-application-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/list-web-application-primer-tutorial\/","title":{"rendered":"List Web Application Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"List Web Application Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.jpg\" title=\"List Web Application Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">List Web Application Primer Tutorial<\/p><\/div>\n<p>We&#8217;re starting out pretty simply, but we hope, pretty usefully, with today&#8217;s new web application, which is &#8220;Make a List&#8221; via &#8230;<\/p>\n<ul>\n<li>an Emoji numbering system<\/li>\n<li>a Quantity or Weight measurement entered by the user interactively<\/li>\n<li>an Item entered by the user interactively<\/li>\n<\/ul>\n<p>Pretty simple, huh?  A little more complex is a facility to be a bit &#8220;accountable&#8221; and a bit &#8220;sharing&#8221; with our HTML and Javascript and CSS web application.   So we turn to an &#8230;<\/p>\n<ul>\n<li>email client approach to sending the list off to an email recipient &#8230; via &#8230;<\/li>\n<li>the clicking of an HTML <i>a<\/i> link whose &#8230;.<\/li>\n<li><i>href<\/i> property is of the form <i>mailto:[emailee]?subject=[subject]&#038;body=[URLpointingTOyourLIST]<\/i><\/li>\n<\/ul>\n<p>And so, we hope you see that there are two aspects to the method by which we construct our list via Javascript DOM techniques, those being &#8230;<\/p>\n<ul>\n<li>with our dynamically unfolding HTML table (and tbody) of rows (tr) and sets of 3 cells (td x 3) we don&#8217;t want to show any unfilled out rows (tr) so we could either &#8230;\n<ol>\n<li>only add a row (tr) when the Item is filled out (which we tried for a while using a linked list of HTML div elements at the end of row (tr) elements) and rejected for &#8230;<\/li>\n<li>allow for a lot of rows (tr) that are invisible (style=display:none;) until we need them, at the HTML Item input element&#8217;s <i>onblur<\/i> to a non-blank <i>value<\/i> event, when they become (style=display:table-row;) (do you remember something similar with <a target=_blank title='Middle Word Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/middle-word-game-primer-tutorial\/'>Middle Word Game Primer Tutorial<\/a>?)<\/li>\n<\/ol>\n<\/li>\n<li>we need to cater for (big long, presumably) email URLs arriving at this same web application &#8230; our method of &#8220;sharing&#8221; (that we often use) &#8230; and this involves a web application automated (programmatic) simulation of what the <i>onblur<\/i> logic is above, as much as anything, because &#8230;\n<ol>\n<li>speaking personally, there is a sense of satisfaction with event-driven programming, when you access some event logic from two or more different modes of entry<\/li>\n<li>we don&#8217;t like to reinvent wheels, so this design makes some good sense<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>So here is the &#8220;first draft&#8221; <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.html'>live run<\/a> link pointing at the (so far purely client side) HTML and Javascript <a target=_blank title='mylist.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.html_GETME'>mylist.html<\/a> to start the ball rolling.  But it is doubtful that we&#8217;ll settle on this first draft, a <a target=_blank title='List information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/List_(abstract_data_type)'><i>list<\/i><\/a> being one of the most useful data container in programming &#8220;<font size=1>h<\/font><font size=2>i<\/font><font size=3>s<\/font><font size=4>t<\/font><font size=5>o<\/font><font size=6>r<\/font><font size=7>y<\/font><font size=8><a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=2VSYmGSJtCA'> &#8230; and beyond!<\/a><\/font>&#8220;.<\/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='#d29041' onclick='var dv=document.getElementById(\"d29041\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/list\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d29041' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re starting out pretty simply, but we hope, pretty usefully, with today&#8217;s new web application, which is &#8220;Make a List&#8221; via &#8230; an Emoji numbering system a Quantity or Weight measurement entered by the user interactively an Item entered by &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/list-web-application-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,1,37],"tags":[354,576,652,710,997,1319,1402],"class_list":["post-29041","post","type-post","status-publish","format-standard","hentry","category-elearning","category-uncategorised","category-tutorials","tag-dom","tag-html","tag-javascript","tag-list","tag-programming","tag-tutorial","tag-web-application"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/29041"}],"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=29041"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/29041\/revisions"}],"predecessor-version":[{"id":29046,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/29041\/revisions\/29046"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=29041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=29041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=29041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}