{"id":3808,"date":"2018-07-16T13:02:21","date_gmt":"2018-07-16T04:02:21","guid":{"rendered":"https:\/\/www.ws-meguro.com\/\/?p=3808"},"modified":"2018-07-16T13:02:21","modified_gmt":"2018-07-16T04:02:21","slug":"javascript%e3%81%ae%e7%b7%b4%e7%bf%92%ef%bc%9a%e3%82%ab%e3%83%ac%e3%83%b3%e3%83%80%e3%83%bc%e3%81%a1%e3%82%87%e3%81%a3%e3%81%a8%e6%94%b9%e8%89%af","status":"publish","type":"post","link":"https:\/\/www.wsmeguro.jp\/wp\/?p=3808","title":{"rendered":"JavaScript\u306e\u7df4\u7fd2\uff1a\u30ab\u30ec\u30f3\u30c0\u30fc\u3061\u3087\u3063\u3068\u6539\u826f"},"content":{"rendered":"

\u30ab\u30ec\u30f3\u30c0\u30fc\u306f\u6708\u672b\u65e5\u304c\u8868\u793a\u3055\u308c\u306a\u3044\u3068\u3044\u3046\u30d0\u30b0\u304c\u3042\u308b\u3053\u3068\u306b\u6c17\u3065\u3044\u305f\u306e\u3067\u3001\u76f4\u3059\u3064\u3044\u3067\u306b\u3001\u5f53\u521d\u4f5c\u3063\u3066\u307f\u305f\u304b\u3063\u305f\u3088\u3046\u306b\u3084\u3063\u3066\u307f\u305f\u3002
\n\u6210\u679c\u7269\u306f\u3053\u3061\u3089<\/a>\u3002
\n\u6700\u521d\u306f\u3001thimble\u3067\u4f5c\u696d\u3057\u3066\u3044\u305f\u304c\u3001thimble\u306f\u300cnew\u3000Date\uff082018,1,31,0,0,0\uff09\u300d\u3068\u65e5\u6642\u3092\u6307\u5b9a\u3057\u3066\u3082\u3001\u73fe\u5728\u306e\u65e5\u6642\u306b\u306a\u3063\u3066\u3057\u307e\u3046\u3053\u3068\u304c\u308f\u304b\u3063\u305f\u3002Playcode\u3082\u540c\u3058\u307f\u305f\u3044\u3060\u3063\u305f\u3002\u65e5\u672c\u6a19\u6e96\u6642\u306e\u6271\u3044\u306b\u304f\u3055\u3082\u3042\u3063\u3066\u3001Thimble\u3084Playcode\u306b\u4f9d\u5b58\u3057\u306a\u3044\u3001VS\u3000Code\uff0bChrome\u3068\u3044\u3046\u6a19\u6e96\u7684\u306a\u958b\u767a\u74b0\u5883\u306b\u843d\u3061\u7740\u3044\u305f\u3053\u3068\u3082\u30e1\u30e2\u3057\u3066\u304a\u304d\u307e\u3059\u3002
\n
\n\u30b3\u30fc\u30c9\u306f\u3001\u5165\u529b\u30a8\u30e9\u30fc\u30c1\u30a7\u30c3\u30af\u3082\u5165\u308c\u3066\u3001\u591a\u5c11\u30b9\u30c3\u30ad\u30ea\u3057\u305f\u3088\u3046\u306a\u6c17\u304c\u3057\u307e\u3059\u3002
\nindex.html<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <meta charset=\"utf-8\">\r\n    <title>Calendar<\/title>\r\n    <!-- <link> \u30bf\u30b0\u3092 HTML \u30d5\u30a1\u30a4\u30eb\u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002\u901a\u5e38\u306f <head> \u30bf\u30b0\u5185\u306b\u7f6e\u304b\u308c\u307e\u3059 -->\r\n    <link href=\"style.css\" rel=\"stylesheet\">\r\n    <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js\"><\/script>\r\n    <link href=\"https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\r\n  <\/head>\r\n  <body>\r\n    <div>\r\n      <input id=\"year1\" type=\"text\" maxlength=\"4\" pattern=\"^[0-9]+$\" size=\"4\" min=\"1970\">\r\n      <label for=\"year1\">\u5e74<\/label>\r\n      <input id=\"month1\" type=\"text\" maxlength=\"2\" pattern=\"^[0-9]+$\" size=\"2\" max=\"12\">\r\n      <label for=\"month1\">\u6708<\/label>\r\n      <button class=\"setcal1\">Set Calendar<\/button>\r\n    <\/div>\r\n    <p class=\"target\"><\/p>\r\n    <table id=\"table\">\r\n    <\/table>\r\n\r\n    <script src=\"script.js\"><\/script>\r\n  <\/body>\r\n<\/html><\/pre>\n
style.css<\/p>\n
\/* Fonts from Google Fonts - more at https:\/\/fonts.google.com *\/\r\n@import url('https:\/\/fonts.googleapis.com\/css?family=Open+Sans:400,700');\r\n@import url('https:\/\/fonts.googleapis.com\/css?family=Merriweather:400,700');\r\n\r\nbody {\r\n  background-color: white;\r\n  font-family: \"Open Sans\", sans-serif;\r\n  padding: 5px 25px;\r\n  font-size: 18px;\r\n  margin: 0;\r\n  color: #444;\r\n}\r\n\r\nh1 {\r\n  font-family: \"Merriweather\", serif;\r\n  font-size: 32px;\r\n}\r\n\r\ntable {\r\n  text-align: center;\r\n  width: 490px;\r\n  border: 1px;\r\n  border-color: black;\r\n}\r\n\r\n.target{\r\n  padding-top: 5px;\r\n  padding-bottom: 5px;\r\n}\r\n\r\n.sun {\r\n  color: red;\r\n  background-color: lightpink;\r\n}\r\n\r\n.sat {\r\n  color: darkblue;\r\n  background-color: lightblue;\r\n}\r\n\r\n.notThisMonth {\r\n  color:darkgray;\r\n  background-color: lightgray;\r\n}\r\n\r\n.sunNotThisMonth {\r\n  color: rgba(148, 53, 53, 0.8);\r\n  background-color: rgba(148, 53, 53, 0.3)\r\n}\r\n\r\n.satNotThisMonth {\r\n  color: rgba(38, 38, 168, 0.8);\r\n  background-color: rgba(38, 38, 168, 0.3);\r\n}<\/pre>\n
script.js<\/p>\n
var myTarget = document.querySelector('.target');\r\nvar cmdSetCal1 = document.querySelector('.setcal1');\r\nvar myYear = document.getElementById('year1');\r\nvar myMonth = document.getElementById('month1');\r\nvar myTable = document.getElementById('table');\r\nvar day1 = new Date();\r\nmyYear.value = day1.getFullYear();\r\nmyMonth.value = day1.getMonth()+1;\r\n\r\nfunction setCal1(){\r\n  var numYear = myYear.value;\r\n  var numMonth = myMonth.value;\r\n  var dayStart = new Date(numYear,numMonth-1,1,0,0,0,0);\r\n  console.log('dayStart:' + dayStart);\r\n  if (dayStart.toString() === \"Invalid Date\") {\r\n    alert('Please input correct year and month');\r\n    return;\r\n  }\r\n  day1 = new Date(numYear,numMonth-1,1,0,0,0,0);\r\n  day1.setDate(dayStart.getDate() - dayStart.getDay());\r\n  console.log('day1:' + day1);\r\n  myTarget.textContent = numYear + \"\u5e74\" + numMonth + \"\u6708\";\r\n  var booLoop = true;\r\n  myTable.innerHTML = '';\r\n  var row = myTable.insertRow(-1);\r\n  var myHTML = '<th class=\"sun\">\u65e5<\/th><th class=\"week\">\u6708<\/th><th class=\"week\">\u706b<\/th><th class=\"week\">\u6c34<\/th><th class=\"week\">\u6728<\/th><th class=\"week\">\u91d1<\/th><th class=\"sat\">\u571f<\/th>';\r\n  row.innerHTML = myHTML;\r\n  do {\r\n    row = myTable.insertRow(-1);\r\n    myHTML = \"\";\r\n    var i;\r\n    for (i=0; i<7; i++){\r\n      if (day1.getMonth() != numMonth-1){\r\n        if (i==0){\r\n          myHTML += '<td class=\"sunNotThisMonth\">' + day1.getDate() + '<\/td>';\r\n        } else if (i === 6){\r\n          myHTML += '<td class=\"satNotThisMonth\">' + day1.getDate() + '<\/td>';\r\n        } else {\r\n          myHTML += '<td class=\"notThisMonth\">' + day1.getDate() + '<\/td>';\r\n        }\r\n      } else {\r\n        if (i==0){\r\n          myHTML += '<td class=\"sun\">' + day1.getDate() + '<\/td>';\r\n        } else if (i === 6){\r\n          myHTML += '<td class=\"sat\">' + day1.getDate() + '<\/td>';\r\n        } else {\r\n          myHTML += '<td class=\"week\">' + day1.getDate() + '<\/td>';        }\r\n      }\r\n      day1.setDate(day1.getDate()+1);\r\n      \/\/console.log(day1);\r\n    }\r\n    row.innerHTML = myHTML;\r\n    if (day1.getMonth() != dayStart.getMonth()) {\r\n      booLoop = false;\r\n    }\r\n  } while (booLoop);\r\n}\r\n\r\ncmdSetCal1.addEventListener('click', setCal1);\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
\u30ab\u30ec\u30f3\u30c0\u30fc\u306f\u6708\u672b\u65e5\u304c\u8868\u793a\u3055\u308c\u306a\u3044\u3068\u3044\u3046\u30d0\u30b0\u304c\u3042\u308b\u3053\u3068\u306b\u6c17\u3065\u3044\u305f\u306e\u3067\u3001\u76f4\u3059\u3064\u3044\u3067\u306b\u3001\u5f53\u521d\u4f5c\u3063\u3066\u307f\u305f\u304b\u3063\u305f\u3088\u3046\u306b\u3084\u3063\u3066\u307f\u305f\u3002 \u6210\u679c\u7269\u306f\u3053\u3061\u3089\u3002 \u6700\u521d\u306f\u3001thimble\u3067\u4f5c\u696d\u3057\u3066\u3044\u305f\u304c\u3001thimble\u306f\u300cnew\u3000Date\uff0820…<\/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":[580,558,579],"class_list":["post-3808","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-date","tag-javascript","tag-579"],"_links":{"self":[{"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/posts\/3808","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=3808"}],"version-history":[{"count":1,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/posts\/3808\/revisions"}],"predecessor-version":[{"id":3809,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/posts\/3808\/revisions\/3809"}],"wp:attachment":[{"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3808"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3808"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}