{"id":328,"date":"2020-07-22T15:33:30","date_gmt":"2020-07-22T06:33:30","guid":{"rendered":"https:\/\/blog.wsd.sh\/?p=328"},"modified":"2020-07-22T16:32:09","modified_gmt":"2020-07-22T07:32:09","slug":"canvas-lesson-01","status":"publish","type":"post","link":"https:\/\/blog.wsd.sh\/?p=328","title":{"rendered":"Canvas Lesson 01"},"content":{"rendered":"

jQuery Library Moved from CDN<\/p>\n

\r\n<script src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.1\/jquery.min.js\"><\/script>\r\n<\/pre>\n
to local<\/p>\n
\r\n<script src=\"jquery-1.12.1.min.js\"><\/script>\r\n<\/pre>\n
Before<\/b><\/p>\n
\r\n    <div class=\"color\">\r\n      \u8272\uff1a\r\n      <a href=\"\" class=\"black\" data-color=\"0, 0, 0, 1\"><\/a>\r\n      <a href=\"\" class=\"red\" data-color=\"255, 0, 0, 1\"><\/a>\r\n      <a href=\"\" class=\"blue\" data-color=\"0, 0, 255, 1\"><\/a>\r\n    <\/div>\r\n<\/pre>\n
\r\n    $(\".color a\").click(function(){\r\n      cnvColor = $(this).data(\"color\");\r\n      console.log(\"here \");\r\n      return false;\r\n    });\r\n<\/pre>\n
After<\/b><\/p>\n
\r\n    <div class=\"color\">\r\n      \u8272\uff1a\r\n      <a class=\"black\" data-color=\"0, 0, 0, 1\"><\/a>\r\n      <a class=\"red\" data-color=\"255, 0, 0, 1\"><\/a>\r\n      <a class=\"blue\" data-color=\"0, 0, 255, 1\"><\/a>\r\n    <\/div>\r\n<\/pre>\n
\r\n\tvar cElements = document.getElementsByClassName('color');\r\n\tfor (let i = 0; i < cElements.length; i++) {\r\n\t\t\/\/console.log(cElements[i].className+\":\"+cElements[i].nodeName);\r\n\t\tconsole.log(cElements[i].childNodes+\":\"+cElements[i].nodeName);\r\n\t\tvar elms = cElements[i].childNodes;\r\n\t\tfor (let j = 0; j < elms.length; j++) {\r\n\t\t\tconsole.log(\"1\");\r\n\t\t\telms[j].onclick = function() {\r\n\t\t\t\tconsole.log(\"2\");\r\n\t\t\t\tcnvColor = this.getAttribute( \"data-color\" ) ;\r\n\t\t\t}.bind(elms[j]);\r\n\t\t}\r\n\t}\r\n<\/pre>\n
\u89e3\u8aac<\/b><\/p>\n
In this example we are changing the color of the brush being used by detecting a click on an element. <\/p>\n
In the original example we have a short \"$(\".color a\").click(\" function.
\nWhat this actually means is \"any elements with the class name of 'color' and a tagname of 'a'\"
\nAnd then when the element is clicked the color is identified with \"cnvColor = $(this).data(\"color\");\"
\nIn this case this<\/em> refers to the elements being clicked, but it's not always clear when tracing through a program.<\/p>\n
In the fix we mostly clean up the jQuery syntax
\nWe start by finding all of the elements with the class name \"color\" which returns a list of elements
\nand then we look through each of those elements for childnodes.
\nFor each of the child nodes we can assume these are intended to set the color, so we attach an onclick event
\nFor the onclick event we want to specifically define what the this<\/em> reference will be, so we bind it to the element being clicked
\nThen when the element is clicked, we can call the getAttribute on the child element by referencing this<\/em><\/p>\n
In this way while it more verbose, the code is more descriptive as to what's going on ahead of time, as opposed to being interpreted at runtime
\nWithout any context we can see that we're getting all of the elements of a class type and assigning an onclick function to be referenced
\nAnd specifically which point of reference is being used from within the onclick function <\/p>\n","protected":false},"excerpt":{"rendered":"
jQuery Library Moved from CDN <script src=”\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.1\/jquery.min.js”>…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/328"}],"collection":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=328"}],"version-history":[{"count":3,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/328\/revisions"}],"predecessor-version":[{"id":331,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/328\/revisions\/331"}],"wp:attachment":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=328"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=328"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}