{"id":20560,"date":"2016-03-09T03:01:51","date_gmt":"2016-03-08T17:01:51","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=20560"},"modified":"2016-03-09T09:02:54","modified_gmt":"2016-03-08T23:02:54","slug":"javascript-associative-array-mobile-friendly-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-associative-array-mobile-friendly-tutorial\/","title":{"rendered":"Javascript Associative Array Mobile Friendly Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tree_chalkboard.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Javascript Associative Array Mobile Friendly Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tree--chalkboard.jpg\" title=\"Javascript Associative Array Mobile Friendly Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Javascript Associative Array Mobile Friendly Tutorial<\/p><\/div>\n<p>A couple of days ago we last talked about our Javascript Associated Array thoughts when we presented <a title='Javascript Associative Array Primer Tutorial' href='#jaapt'>Javascript Associative Array Primer Tutorial<\/a> as shown below.  Today we turn our attention to some weaknesses this web application had with regard to being mobile friendly.<\/p>\n<p>If you&#8217;ve developed a web application on a laptop, as we frequently do on a MacBook Pro with access to the web browsers &#8230;<\/p>\n<ul>\n<li>Firefox<\/li>\n<li>Chrome<\/li>\n<li>Safari<\/li>\n<li>Opera<\/li>\n<\/ul>\n<p> &#8230; you can be gobsmacked when (for us, often) you have left off the mobile tests &#8230; and what we have physically here is &#8230;<\/p>\n<ul>\n<li>iPad (tablet) and Safari<\/li>\n<li>Samsung (phone) and Android<\/li>\n<\/ul>\n<p> &#8230; even given <b>YOU KNOW<\/b> in the back of your mind, there&#8217;ll with width issues in all probability whether or not you have a &lt;head&gt; &lt;\/head&gt; meta tag like &#8230;<\/p>\n<p><code><br \/>\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes\" \/&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; or not &#8230; ie. it may be good never to assume that the inclusion of such a meta tag guarantees anything fully with respect to &#8220;mobile friendliness&#8221;.  Bottom line, for us, is that it is a bit of a struggle.<\/p>\n<p>Personally, we battle against the need to involve jQuery.  Javascript is the &#8220;landline&#8221; of client work.  Why should jQuery be essential?  We think jQuery is great if it saves lots of time or contributes to making something far less complicated, but, after all, jQuery is Javascript.<\/p>\n<p>And so we battle against the odds, sometimes, when thinking on these small projects with not having to concern jQuery, about <i>touch<\/i> events.  They <b>ARE<\/b> different to <i>mouse<\/i> events, and there is no getting around that.<\/p>\n<p>And so, given all this our second bottom line &#8230; huh? &#8230; is that each project written, initially for non-mobile, and wanting to improve for &#8220;mobile&#8221; needs testing &#8230; and the &#8220;gobsmacking&#8221; begins.<\/p>\n<p>Okay, regarding <i>device width<\/i> we tend to tell ourselves that a width in percentages will be the go to solve this type of issue for &#8220;mobile&#8221; &#8230; the optimistic programmer probably thinks so &#8230; but we didn&#8217;t find this to be totally the case with how we saw it with our web application today &#8230; we ended up, as we so often do, thinking Javascript &#8220;if&#8221; logic, rather than CSS &#8230; but this is just us, and we not pretending &#8220;us=you&#8221; &#8230; <font size=1> or even &#8220;us=ewe&#8221; &#8230; chortle, chortle<\/font>.<\/p>\n<p>So once we start off with this approach we tend to use code like &#8230;<\/p>\n<p><code><br \/>\nvar five=5;<br \/>\nvar fiveacross=5;<br \/>\nvar th=\"200px\";<br \/>\nvar th0=\"20px\";<br \/>\nif (navigator.userAgent.match(\/iPad\/i)) {<br \/>\n  fiveacross=4;<br \/>\n  if (window.location.search.indexOf(\"mode=tree\") != -1) {<br \/>\n   fiveacross=3;<br \/>\n  } else if (window.location.search.indexOf(\"mode=hanger\") != -1) {<br \/>\n   fiveacross=3;<br \/>\n  }<br \/>\n} else if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPod|iPad|Opera Mini|IEMobile\/i)) {<br \/>\n  fiveacross=3;<br \/>\n  th=\"60px\";<br \/>\n  th0=\"10px\";<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; to particularize &#8230; and so, today, we &#8220;invented&#8221; var<font size=1>iable<\/font> <i>fiveacross<\/i> as our (sad to say) capitulation of limiting the size of our &#8220;trees&#8221; &#8230; <font size=1>for mobile, they are not the size of the laptop &#8220;forest&#8221; trees<\/font>.<\/p>\n<p>Another thing to watch out for, is if you try to control <i>focus<\/i> through a series of HTML input elements (maybe in an HTML form &#8230; but not here).  Here we sympathize with mobile platforms regarding hardware architecture, and the affect on software.  At first we were angry about the difficulty, sometimes, with mobile Javascript DOM [element].focus() logic, but, then, on calming down, saw the dilemma of when the pop-up keyboard of mobile devices is out of the way enough for the user to see anything.  And thinking more, and seeing how <b>REALLY<\/b> difficult it is to coax the software to respond to an HTML body onload event request to focus on the first of your HTML input elements, that it makes sense for a small width device to resist (though am sure it can be done) because it is not good UX (user experience) to have the keyboard show straight away for a mobile web application &#8230; bit like seeing a car for the first time with its hood up, or a mobile web application that introduces itself on loading, with music, when you weren&#8217;t forewarned.  With a &#8220;controlled focus&#8221; web application, to get it working for all the scenarios of mobile platform usage, you are going to have to test it out, a lot, we think, and there is no hard and fast piece of advice to contribute, except to say that you may need to involve Javascript&#8217;s <i>setTimeout<\/i> functionality to delay things &#8230; we are not purists against the usefulness of the use of <i>setTimeout<\/i> to solve some mobile friendliness issues.<\/p>\n<p>Today&#8217;s more mobile friendly HTML and Javascript programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tree_chalkboard.html--GETME\" title='tree_chalkboard.html'>tree_chalkboard.html<\/a> has this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tree_chalkboard.html\" title='Click picture'>live run<\/a> link, and this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tree_chalkboard.html--GETME\" title='tree_chalkboard.html'>link<\/a> shows the changes made since two days ago.  Yet again, we&#8217;d like to thank <a target=_blank title='Useful link' href='http:\/\/www.quirksmode.org\/js\/associative.html'>this link<\/a> for its great advice regarding Javascript objects and their associative array &#8220;look&#8221; possibilities.<\/p>\n<hr>\n<p id='jaapt'>Previous relevant <a target=_blank title='Javascript Associative Array Quiz Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-associative-array-quiz-tutorial\/'>Javascript Associative Array Quiz Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tree_chalkboard.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Javascript Associative Array Quiz Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/treechalkboard.jpg\" title=\"Javascript Associative Array Quiz Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Javascript Associative Array Quiz Tutorial<\/p><\/div>\n<p>We consolidate yesterday&#8217;s <a title='Javascript Associative Array Primer Tutorial' href='#jaapt'>Javascript Associative Array Primer Tutorial<\/a> with today&#8217;s HTML and Javascript web application where we use Javascript <a target=_blank title='Javascript object information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_objects.asp'>objects<\/a> as a way to have <a target=_blank title='Associative array information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Associative_array'><i>associative array<\/i><\/a> thoughts permeate your client side web application logic.<\/p>\n<p>Today&#8217;s HTML and Javascript programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tree_chalkboard.html_GETME\" title='tree_chalkboard.html'>tree_chalkboard.html<\/a> has this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tree_chalkboard.html\" title='Click picture'>live run<\/a> link.  We&#8217;d like to thank <a target=_blank title='Useful link' href='http:\/\/www.quirksmode.org\/js\/associative.html'>this link<\/a> for its great advice regarding Javascript objects and their associative array &#8220;look&#8221; possibilities.<\/p>\n<ol>\n<li>add a &#8220;Previous&#8221; way to navigate along the Associative Array data structure &#8230; in addition to yesterday&#8217;s &#8220;Next&#8221; way (that <i>linked lists<\/i> are very fond of)<\/li>\n<li>add background imagery for a tree<\/li>\n<li>change border arrangements for &#8220;root&#8221; and &#8220;canopy&#8221; of tree<\/li>\n<li>allow display modes [Tree Creeper], Tree, Creeper, Weeping Tree &#8230; with different looks via CSS styling via HTML class definitions established via URL mechanisms teamed with a <i>document.write<\/i> &#8220;delayed write out of HTML&#8221; Javascript technique<\/li>\n<li>allow the concept of a Tree <i>name<\/i> via user specific arrangements involving a colon (:) when defining the (tree) root value<\/li>\n<li>establish a quiz functionality to the web application &#8230; optional, of course<\/li>\n<\/ol>\n<p>Step 4 above needed us to explore CSS <a target=_blank title='CSS transform and rotaton information from w3schools' href='http:\/\/www.w3schools.com\/css\/css3_2dtransforms.asp'><i>rotation<\/i><\/a> techniques on the (new) HTML div element (now) encasing the HTML table we talked about with yesterday&#8217;s tutorial.<\/p>\n<p>Today&#8217;s HTML and Javascript programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tree_chalkboard.html-GETME\" title='tree_chalkboard.html'>tree_chalkboard.html<\/a> has this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tree_chalkboard.html\" title='Click picture'>live run<\/a> link, and this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tree_chalkboard.html-GETME\" title='tree_chalkboard.html'>link<\/a> shows the changes made since yesterday.  Again, we&#8217;d like to thank <a target=_blank title='Useful link' href='http:\/\/www.quirksmode.org\/js\/associative.html'>this link<\/a> for its great advice regarding Javascript objects and their associative array &#8220;look&#8221; possibilities.<\/p>\n<hr>\n<p id='jaapt'>Previous relevant <a target=_blank title='Javascript Associative Array Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-associative-array-primer-tutorial\/'>Javascript Associative Array Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tree_chalkboard.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Javascript Associative Array Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tree_chalkboard.jpg\" title=\"Javascript Associative Array Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Javascript Associative Array Primer Tutorial<\/p><\/div>\n<p>Today&#8217;s HTML and Javascript web application uses Javascript <a target=_blank title='Javascript object information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_objects.asp'>objects<\/a> as a way to have <a target=_blank title='Associative array information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Associative_array'><i>associative array<\/i><\/a> thoughts permeate your client side web application logic.<\/p>\n<p>The idea of an <i>associative array<\/i> has a lot of appeal, in the same way we humans, hopefully, prefer to call each other by our <i>name<\/i> rather than our <i>number<\/i>.  Don&#8217;t feel sorry for the trouble you&#8217;re causing the computer thinking in terms of arrays with names rather than numbers &#8230; <font size=1>they&#8217;ll get over it<\/font> &#8230; but there is a small consideration with massive amounts of data that the computer will do that massive amount of calculation faster using a numerical index on a huge array, rather than an associative indexing system.<\/p>\n<p>Today we have the user create up to 5 tree hierarchies, initialised via<\/p>\n<p><code>var Questions = [new Object(), new Object(), new Object(), new Object(), new Object()];<\/code><\/p>\n<p>this approach that ends up a lot like a <a target=_blank title='Linked list information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Linked_list'>linked list<\/a>.  We provide you with a guaranteed reference to the root element of <i>Tree x<\/i> as <i>Questions[x].Text<\/i> and the value contained in Questions[x].Text fed through a homespun Javascript function enumis() gets you going so that &#8230;<\/p>\n<p><code>var nextis = eval(\"Questions[x].\" + enumis(Questions[x].Text) + \"Next\")<\/code><\/p>\n<p> &#8230; would get you to the next place on the tree &#8230; and can you guess you could then go &#8230;<\/p>\n<p><code>nextis = eval(\"Questions[x].\" + enumis(nextis) + \"Next\")<\/code><\/p>\n<p> &#8230; to keep going up the tree, perhaps all the way to our green bordered &#8220;canopy&#8221;.  As you can see, to be a friend of Javascript <a target=_blank title='Javascript eval() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_eval.asp'>eval()<\/a> is a very wise move for a huge number and variety of client web application issues and solutions.<\/p>\n<p>HTML display wise what we do is to start with an HTML <i>table<\/i> and <i>tbody<\/i> and 5 <i>tr<\/i> row elements, initially with just 1 <i>td<\/i> cell (per row) containing the HTML <i>input<\/i> type=text where the user enters their data.  At the HTML <i>body<\/i> onload event we snapshot this scenario exactly like that, and add into the end of the 1 <i>td<\/i> cell an HTML <i>div<\/i> element given an ID (for Javascript DOM purposes).  As we build any one tree to be &#8220;taller&#8221; (in our case, we have right to left &#8220;climbers&#8221;) that aforesaid mentioned HTML <i>div<\/i> has its <i>innerHTML<\/i> property populated with the next HTML <i>input<\/i> type=text (derivable from that snapshotted first HTML <i>input<\/i> type=text element of the row) and HTML <i>div<\/i> element &#8220;child&#8221; set (of new HTML elements).  So you end up with the 1 cell per row, and things are helped to stay &#8220;connected&#8221; by the CSS <i><a target=_blank title='CSS float property information from w3schools' href='http:\/\/www.w3schools.com\/css\/css_float.asp'>float<\/a>:left<\/i> property applied to the HTML <i>div<\/i> elements.<\/p>\n<p>Today&#8217;s HTML and Javascript programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tree_chalkboard.html_GETME\" title='tree_chalkboard.html'>tree_chalkboard.html<\/a> has this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tree_chalkboard.html\" title='Click picture'>live run<\/a> link.  We&#8217;d like to thank <a target=_blank title='Useful link' href='http:\/\/www.quirksmode.org\/js\/associative.html'>this link<\/a> for its great advice regarding Javascript objects and their associative array &#8220;look&#8221; possibilities.<\/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='#d20505' onclick='var dv=document.getElementById(\"d20505\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/associative-array\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d20505' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d20526' onclick='var dv=document.getElementById(\"d20526\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/rotation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d20526' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d20560' onclick='var dv=document.getElementById(\"d20560\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mobile\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d20560' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>A couple of days ago we last talked about our Javascript Associated Array thoughts when we presented Javascript Associative Array Primer Tutorial as shown below. Today we turn our attention to some weaknesses this web application had with regard to &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-associative-array-mobile-friendly-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,13,14,37],"tags":[76,1819,184,281,354,399,576,630,652,703,795,798,849,875,997,1072,1319],"class_list":["post-20560","post","type-post","status-publish","format-standard","hentry","category-elearning","category-esl","category-event-driven-programming","category-tutorials","tag-android","tag-associative-array","tag-canvas","tag-css","tag-dom","tag-eval","tag-html","tag-ipad","tag-javascript","tag-linked-list","tag-mobile","tag-mobile-friendly","tag-object","tag-oop","tag-programming","tag-rotation","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/20560"}],"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=20560"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/20560\/revisions"}],"predecessor-version":[{"id":20577,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/20560\/revisions\/20577"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=20560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=20560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=20560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}