{"id":3803,"date":"2018-07-08T11:27:25","date_gmt":"2018-07-08T02:27:25","guid":{"rendered":"https:\/\/www.ws-meguro.com\/\/?p=3803"},"modified":"2018-07-08T11:27:25","modified_gmt":"2018-07-08T02:27:25","slug":"javascript%e3%81%ae%e7%b7%b4%e7%bf%92%ef%bc%88loop%ef%bc%89","status":"publish","type":"post","link":"https:\/\/www.wsmeguro.jp\/wp\/?p=3803","title":{"rendered":"JavaScript\u306e\u7df4\u7fd2\uff08Loop\uff09"},"content":{"rendered":"

MDN\u306e\u30b5\u30f3\u30d7\u30eb\u304c\u306a\u3093\u3068\u306a\u304f\u6c17\u306b\u5165\u3063\u3066\u3057\u307e\u3044\u3001\u81ea\u5206\u3067\u3082\u4f5c\u3063\u3066\u307f\u307e\u3057\u305f<\/a>\u3002
\n<canvas>\u306e\u4f7f\u3044\u65b9\u3092\u8abf\u3079\u308b\u306e\u306b\u6642\u9593\u304c\u304b\u304b\u308a\u307e\u3057\u305f\u304c\u3001\u306a\u3093\u3068\u306a\u304f\u4f7f\u3044\u65b9\u3082\u308f\u304b\u3063\u305f\u3057\u3001\u81ea\u5206\u3067\u8208\u5473\u3092\u6301\u3063\u3066\u53d6\u308a\u7d44\u307f\u3053\u3068\u306f\u5927\u4e8b\u3067\u3059\u306d\u3002\u8272\u3092\u5909\u3048\u305f\u308a\u3057\u3066\u30fb\u30fb\u30fb\u3002<\/p>\n

\u672c\u5f53\u306f\u3001\u3086\u3063\u304f\u308a\u30d0\u30d6\u30eb\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u305f\u304b\u3063\u305f\u306e\u3067\u3059\u304c\u3001JavaScript\u306b\u306fsleep\u3084wait\u304c\u306a\u3044\u3068\u306e\u3053\u3068\u3002\u3046\u307e\u304f\u3067\u304d\u307e\u305b\u3093\u3067\u3057\u305f\u304c\u3001\u5931\u6557\u4f8b\u3092\u6b8b\u3057\u3066\u304a\u304d\u307e\u3059\u3002
\nindex.html<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <meta charset=\"utf-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n    <title>Bubble<\/title>\r\n    <link rel=\"stylesheet\" href=\"style.css\">\r\n  <\/head>\r\n  <body>\r\n    <h1>Bubble<\/h1>\r\n    <button class=\"setBubble\">Set<\/button><br>\r\n    <canvas id=\"canvas\" width=\"500\" height=\"300\">\r\n    <\/canvas>\r\n  <\/body>\r\n  <script src=\"script.js\"><\/script>\r\n<\/html><\/pre>\n
script.js<\/p>\n
\/*\r\nThis is a JavaScript (JS) file.\r\nJavaScript is the programming language that powers the web.\r\n\r\nTo use this file, place the following <script> tag just before the closing <\/body> tag in your HTML file, making sure that the filename after \"src\" matches the name of your file...\r\n\r\n    <script src=\"script.js\"><\/script>\r\n\r\nLearn more about JavaScript at https:\/\/developer.mozilla.org\/en-US\/Learn\/JavaScript\r\n\r\nWhen you're done, you can delete all of this grey text, it's just a comment.\r\n*\/\r\nvar cmdSetBubble = document.querySelector('.setBubble');\r\nvar canvas = document.getElementById('canvas');\r\nvar ctx = canvas.getContext('2d');\r\n\r\nfunction setBubble(){\r\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n  for (var i = 0; i < 100; i++) {\r\n    window.setTimeout(\"drawBubble()\",100);\r\n  }\r\n}\r\n\r\nfunction drawBubble() {\r\n  ctx.beginPath();\r\n  ctx.fillStyle = 'rgba(255,128,64,0.5)';\r\n  ctx.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * Math.min(canvas.height,  canvas.width) \/ 6, 0, 2 * Math.PI);\r\n  ctx.fill();\r\n}\r\n\r\ncmdSetBubble.addEventListener('click', setBubble);<\/pre>\n","protected":false},"excerpt":{"rendered":"
MDN\u306e\u30b5\u30f3\u30d7\u30eb\u304c\u306a\u3093\u3068\u306a\u304f\u6c17\u306b\u5165\u3063\u3066\u3057\u307e\u3044\u3001\u81ea\u5206\u3067\u3082\u4f5c\u3063\u3066\u307f\u307e\u3057\u305f\u3002 <canvas>\u306e\u4f7f\u3044\u65b9\u3092\u8abf\u3079\u308b\u306e\u306b\u6642\u9593\u304c\u304b\u304b\u308a\u307e\u3057\u305f\u304c\u3001\u306a\u3093\u3068\u306a\u304f\u4f7f\u3044\u65b9\u3082\u308f\u304b\u3063\u305f\u3057\u3001\u81ea\u5206\u3067\u8208\u5473\u3092\u6301\u3063\u3066\u53d6\u308a\u7d44\u307f\u3053\u3068\u306f\u5927\u4e8b\u3067\u3059\u306d\u3002\u8272\u3092…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[560],"tags":[],"class_list":["post-3803","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/posts\/3803","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3803"}],"version-history":[{"count":1,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/posts\/3803\/revisions"}],"predecessor-version":[{"id":3804,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/posts\/3803\/revisions\/3804"}],"wp:attachment":[{"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3803"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3803"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}