{"id":44129,"date":"2019-03-15T03:01:49","date_gmt":"2019-03-14T17:01:49","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=44129"},"modified":"2019-03-15T09:17:40","modified_gmt":"2019-03-14T23:17:40","slug":"javascript-dom-images-collection-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-dom-images-collection-primer-tutorial\/","title":{"rendered":"Javascript DOM Images Collection Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Memories\/analyzing_images.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Javascript DOM Images Collection Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Memories\/dom_images.jpg\" title=\"Javascript DOM Images Collection Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Javascript DOM Images Collection Primer Tutorial<\/p><\/div>\n<p>We think the Javascript <a target=_blank href='http:\/\/www.w3schools.com\/js\/js_htmldom.asp' title='Javascript DOM'>DOM<\/a> (or Document Object Model) is the best means by which to create dynamic HTML webpages.  The two objects of a webpage of most interest to us are &#8230;<\/p>\n<ul>\n<li>document &#8230; and to a lesser extent &#8230;<\/li>\n<li>window<\/li>\n<\/ul>\n<p>DOM never ceases to surprise and has &#8220;nooks and crannies&#8221; lots of us may never use with our web applications.   One associated with the &#8220;document&#8221; object, that I was aware of, but have never used in a productive sense is the DOM webpage <a target=_blank title='HTML DOM images Collection' href='https:\/\/www.w3schools.com\/jsref\/coll_doc_images.asp'>document.images<\/a>[] &#8230;<\/p>\n<blockquote cite='https:\/\/www.w3schools.com\/jsref\/coll_doc_images.asp'><p>\nThe images collection returns a collection of all &lt;img&gt; elements in the document.\n<\/p><\/blockquote>\n<p> &#8230; collection.  A couple of the more obvious uses here could be &#8230;<\/p>\n<ul>\n<li><i>document.images.length<\/i> gives a count of &lt;img&gt; elements in the document<\/li>\n<li><i>document.images[i].src<\/i> for example, would indicate what the <i>src<\/i> property of &lt;img&gt; number (i + 1)<\/li>\n<\/ul>\n<p>To view this in a proof of concept way we encase an existing web application, the one built when we presented <a title='HTML Canvas Memories Game Drag and Drop Tutorial' href='#htmlcmgddt'>HTML Canvas Memories Game Drag and Drop Tutorial<\/a> into an HTML <a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> &#8220;child&#8221; part of our &#8220;parent&#8221; HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Memories\/analyzing_images.html_GETME\" title=\"analyzing_images.html\">analyzing_images.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Memories\/analyzing_images.html\" title=\"Click picture\">live run<\/a> link.  We take the Memories Game as is, not trying to change it, in that we could use &#8220;parent.document&#8221; related code.  Instead, we just write our &#8220;parent&#8221; code referencing that HTML iframe &#8220;child&#8221;, and for this, we need to take a little sideways step to explain how you reference a &#8220;child&#8221; iframe from a &#8220;parent&#8221;, and for now, as with our &#8220;proof of concept&#8221; web application today, both the &#8220;parent&#8221; and &#8220;child&#8221; exist on the same domain.  From the &#8220;parent&#8221; point of view the HTML &#8230;<\/p>\n<p><code><br \/>\n&lt;iframe id=imif name=imif src=\"memories.html\" style=\"width:100%;height:87vh;\" <i>onload=\"if (!iois) { document.getElementById('myh1').style.visibility='visible'; jj=0; setTimeout(shuffle, 30000); <b>start_analyzing(this);<\/b> setInterval(start_analyzing, 2000); } else { jj=1;  iois=null; start_analyzing(this); } \"<\/i>&gt;&lt;\/iframe&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; calls the Javascript function <b>start_analyzing(this)<\/b> at the &#8220;child&#8221; iframe&#8217;s <i>onload<\/i> event, and by then, within that function, we&#8217;ve itallicized below instances of those two concepts above being used in relation to [iFrameObject].<a target=_blank title='HTML DOM IFrame contentWindow Property information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_frame_contentwindow.asp'>contentWindow<\/a> (HTML DOM IFrame contentWindow Property of the &#8220;child&#8221; iframe&#8217;s Window object) &#8230;<\/p>\n<p><code><br \/>\nvar iois=null;<br \/>\nvar srca=[], srcvs=[], alen=0;<br \/>\nfunction start_analyzing(jois) {<br \/>\n   if (!iois) { iois=jois; }<br \/>\n   try {<br \/>\n    document.title='Analyzing document.images[] Array - RJM Programming - March, 2019 ... ' + <i>iois.contentDocument.images.length<\/i> + ' images' + suffix;<br \/>\n    if (srca.length == 0) {<br \/>\n    <i>alen=iois.contentDocument.images.length;<\/i><br \/>\n    for (var i=0; i&lt;<i>iois.contentDocument.images.length<\/i>; i++) {<br \/>\n     srca.push(<i>iois.contentDocument.images[i].src<\/i>);<br \/>\n     srcvs.push(<i>iois.contentDocument.images[i].src<\/i>);<br \/>\n    }<br \/>\n    } else {<br \/>\n     if (<i>iois.contentDocument.images.length<\/i> != alen) {<br \/>\n     srca=[];<br \/>\n     srcvs=[];<br \/>\n    <i>alen=iois.contentDocument.images.length;<\/i><br \/>\n    for (var i=0; i&lt;<i>iois.contentDocument.images.length<\/i>; i++) {<br \/>\n     srca.push(<i>iois.contentDocument.images[i].src<\/i>);<br \/>\n     srcvs.push(<i>iois.contentDocument.images[i].src<\/i>);<br \/>\n    }<br \/>\n     } else {<br \/>\n     srcvs=[];<br \/>\n    for (var ii=0; ii&lt;<i>iois.contentDocument.images.length<\/i>; ii++) {<br \/>\n     srcvs.push(<i>iois.contentDocument.images[ii].src<\/i>);<br \/>\n    }<br \/>\n    arraysEqual(srca, srcvs); \/\/ thanks to <a target=_blank title='https:\/\/stackoverflow.com\/questions\/3115982\/how-to-check-if-two-arrays-are-equal-with-javascript' href='https:\/\/stackoverflow.com\/questions\/3115982\/how-to-check-if-two-arrays-are-equal-with-javascript'>https:\/\/stackoverflow.com\/questions\/3115982\/how-to-check-if-two-arrays-are-equal-with-javascript<\/a><br \/>\n    srca=srcvs;<br \/>\n     }<br \/>\n    }<br \/>\n   } catch(erw) {<br \/>\n   }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; as the nub of the workings of this simple &#8220;proof of concept&#8221; image change reporter, that produces interesting results because a nagging &#8220;parent&#8221; interferes with &#8220;child&#8221; fun every 30 seconds, by shuffling the cards in the Memories Game.<\/p>\n<hr>\n<p id='htmlcmgddt'>Previous relevant <a target=_blank title='HTML Canvas Memories Game Drag and Drop Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-canvas-memories-game-drag-and-drop-tutorial\/'>HTML Canvas Memories Game Drag and Drop Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Memories\/memories.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Canvas Memories Game Drag and Drop Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Memories\/memories_draganddrop.jpg\" title=\"HTML Canvas Memories Game Drag and Drop Tutorial\"   id='qwihcct' onmouseover=\"  this.src=this.src.replace('.gif','.xjpeg').replace('.jpeg','.xjpg').replace('.jpg','.xpng').replace('.png','.xgif').replace('.x','.');        \"   \/><\/a><p class=\"wp-caption-text\">HTML Canvas Memories Game Drag and Drop Tutorial<\/p><\/div>\n<p>The <a target=_blank title='HTML5 canvas element information from w3schools' href='http:\/\/www.w3schools.com\/html\/html5_canvas.asp'>Canvas<\/a> HTML element tag combines with some <a target=_blank title='Drag and drop information from w3schools' href='http:\/\/www.w3schools.com\/html\/html5_draganddrop.asp'>drag and drop<\/a> event Javascript logic today with our revised Memories Card Game we first developed some time back with <a target=_blank title='HTML\/Javascript Canvas Memories Card Game Primer Tutorial' href='#hjcmcgpt'>HTML\/Javascript Canvas Memories Card Game Primer Tutorial<\/a> as shown below.  In the same line of thinking was yesterday&#8217;s <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-colour-coded-tic-tac-toe-drag-and-drop-tutorial\/'>HTML Colour Coded Tic Tac Toe Drag and Drop Tutorial<\/a>.<\/p>\n<p>An HTML5 canvas element can be used as the container to draw graphics on the fly usually via the use of Javascript functions for rendering and event management.<\/p>\n<p>Today, with this topic, we&#8217;ve focussed on non-mobile platforms with the new drag and drop possibilities, but the old methods, with touch\/click, will still work for mobile platforms, and at a later date we may find room for &#8220;drag and drop&#8221; improvement with the mobile platforms as well &#8230; in the fullness of time &#8230; given the constraints of economic belt tightening &#8230; over the course of the current forward estimates.<\/p>\n<p>So what events, applied directly to the canvas element this time (incidentally, yesterday, this was not the case), were additionally of interest for non-mobile drag and drop functionality (in decreasing order of importance (where the already existant canvas &#8220;onclick&#8221; event remains the most important))?<\/p>\n<ul>\n<li><a target=_blank title='Event ondragstart information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_ondragstart.asp'>ondragstart<\/a>=&#8221;drag(event)&#8221; &#8230; where we can differentiate a drag and drop (of the first card chosen) from a click\/touch<\/li>\n<li><a target=_blank title='Event onmouseup information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onmouseup.asp'>onmouseup<\/a>=&#8221;omu(event)&#8221; &#8230; where we can get the (x,y) of the second card chosen<\/li>\n<li><a target=_blank title='Event onmousemove information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onmousemove.asp'>onmousemove<\/a>=&#8221;omo(event)&#8221; &#8230; not really important, but we can show it is a drag and drop up in the HTML h1 wording<\/li>\n<li><a target=_blank title='Event ondragover information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_ondragover.asp'>ondragover<\/a>=&#8221;allowDrop(event)&#8221; &#8230; not called upon for non-mobile<\/li>\n<li><a target=_blank title='Event ondrop information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_ondrop.asp'>ondrop<\/a>=&#8221;drop(event)&#8221; &#8230; not used for non-mobile<\/li>\n<\/ul>\n<p>And what additional property?<\/p>\n<ul>\n<li><a target=_blank title='Property draggable information from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_global_draggable.asp'>draggable<\/a>=&#8221;true&#8221;<\/li>\n<\/ul>\n<p>The end result on a non-mobile platform is that two cards separately clicked act very much like a drag and drop.  Our drag and drop does not draw the card flopping onto the other, but shows a change in the HTML h1 wording.<\/p>\n<p>Here is a link to some downloadable HTML programming code &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/Games\/Memories\/memories.html-GETME' title='memories.html'>memories.html<\/a> and how it changed for the tutorial below is described at <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Memories\/memories.html-GETME' title='memories.html'>this link<\/a>.<\/p>\n<p>And you may want to try a <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/Games\/Memories\/memories.html' title='memories.html'>memories.html<\/a>live run<\/a> of this card game that tests your memory, and perseverance, at the very least.<\/p>\n<hr>\n<p id='hjcmcgpt'>Previous relevant <a target=_blank title='HTML\/Javascript Canvas Memories Card Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-canvas-memories-card-game-primer-tutorial\/'>HTML\/Javascript Canvas Memories Card Game 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\/Games\/Memories\/memories.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Canvas Memories Card Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Memories\/Memories.jpg\" title=\"HTML\/Javascript Canvas Memories Card Game Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Canvas Memories Card Game Primer Tutorial<\/p><\/div>\n<p>The Canvas HTML element tag can be used as the container to draw graphics on the fly usually via the use of Javascript functions for rendering and event management.<\/p>\n<p>In today&#8217;s tutorial we mainly use the <a target=_blank href='http:\/\/www.w3schools.com\/tags\/canvas_drawimage.asp' title='HTML5 Canvas drawImage() method information from w3schools ... thanks'>drawImage<\/a> function to create a webpage where you can play the card game called Memories.<\/p>\n<p>You may want to read more at <a target=_blank title='HTML Canvas Reference' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>HTML Canvas Reference<\/a> as a generic reference, or here, at the tutorial <a target=_blank title='javascript - How do I add a simple onClick event handler to a canvas element? - Stack Overflow' href='http:\/\/stackoverflow.com\/questions\/9880279\/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element'>javascript &#8211; How do I add a simple onClick event handler to a canvas element? &#8211; Stack Overflow<\/a>.<\/p>\n<p>As you can imagine, this HTML canvas element, new to HTML5, can be very useful for some practical client-side web functionality.<\/p>\n<p>Link to some downloadable HTML programming code &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/Games\/Memories\/memories.html_GETME' title='memories.html'>memories.html<\/a>\n<\/p>\n<p>You&#8217;ll notice heavy use of the Javascript <a target=_blank title='Javascript Math.random() information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_random.asp'>Math.random()<\/a> function.<\/p>\n<p>We hope you enjoy this Memories Card Game tutorial <a target=_blank title='Canvas HTML element live run tutorial'  href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Memories\/memories.html\">live run<\/a>.<\/p>\n<p>Yes &#8230; you&#8217;ve reached the end &#8230; have a top supportive day full of happy memories!<\/p>\n<p><b>Stop Press<\/b><\/p>\n<p>As of the 5th June 2015 you may notice this game changed to add functionality, and that the live run above might support some drag and drop functionality on non-mobile platforms so you may want to compare this to an <a target=_blank title='Canvas HTML element live run tutorial'  href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Memories\/index.html\">old live run<\/a> for how it worked before this date.<\/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='#d8104' onclick='var dv=document.getElementById(\"d8104\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=games-2\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d8104' 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='#d15259' onclick='var dv=document.getElementById(\"d15259\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=drag-and-drop\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d15259' 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='#d44129' onclick='var dv=document.getElementById(\"d44129\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dom\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d44129' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We think the Javascript DOM (or Document Object Model) is the best means by which to create dynamic HTML webpages. The two objects of a webpage of most interest to us are &#8230; document &#8230; and to a lesser extent &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-dom-images-collection-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,15,37],"tags":[103,187,2525,223,2864,349,354,355,476,576,587,590,597,652,766,849,870,2411,953,997,1986,1319,1402,1418,1583],"class_list":["post-44129","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-array","tag-cards","tag-child","tag-collection","tag-contentwindow","tag-document","tag-dom","tag-domain","tag-game","tag-html","tag-iframe","tag-image","tag-images","tag-javascript","tag-memories","tag-object","tag-onload","tag-parent","tag-playing-cards","tag-programming","tag-proof-of-concept","tag-tutorial","tag-web-application","tag-webpage","tag-window"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/44129"}],"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=44129"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/44129\/revisions"}],"predecessor-version":[{"id":44146,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/44129\/revisions\/44146"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=44129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=44129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=44129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}