{"id":3823,"date":"2018-07-29T17:58:36","date_gmt":"2018-07-29T08:58:36","guid":{"rendered":"https:\/\/www.ws-meguro.com\/\/?p=3823"},"modified":"2018-07-29T17:59:31","modified_gmt":"2018-07-29T08:59:31","slug":"javascript%e3%81%ae%e7%b7%b4%e7%bf%92%ef%bc%9ajson","status":"publish","type":"post","link":"https:\/\/www.wsmeguro.jp\/wp\/?p=3823","title":{"rendered":"JavaScript\u306e\u7df4\u7fd2\uff1aJSON"},"content":{"rendered":"<p>JSON\u306f\u3001JavaScript Object Notation\u306e\u7565\u306a\u3093\u3067\u3059\u306d\u3002\u3002\u307e\u3055\u306b\u3001JavaScript\u306e\u305f\u3081\u306e\u69cb\u9020\u5316\u8868\u73fe\u3068\u3044\u3046\u3053\u3068\u3067\u3059\u3002\u305d\u306e\u5272\u306b\u306f\u3001\u624b\u9806\u304c\u591a\u3044\u306a\u3041\u30fb\u30fb<br \/>\n\u7cf8\u3092\u5f15\u304f\u3088\u3046\u306a\u30d5\u30a9\u30f3\u30c8\u306b\u8208\u5473\u304c\u6e67\u304d\u3001\u518d\u73fe\u3057\u3066\u307f\u307e\u3057\u305f\u3002<a href=\"https:\/\/www.wsmeguro.jp\/\/tools\/js\/test5\/\" rel=\"noopener\" target=\"_blank\">\u3053\u3061\u3089\u3067\u3059\u3002<\/a><br \/>\nJavaScript\u306f\u3053\u3093\u306a\u611f\u3058\u3067\u3059\u3002<\/p>\n<pre class=\"lang:js decode:true \" >var header = document.querySelector('header');\r\nvar section = document.querySelector('section');\r\nvar requestURL = 'https:\/\/mdn.github.io\/learning-area\/javascript\/oojs\/json\/superheroes.json';\r\nvar request = new XMLHttpRequest();\r\nrequest.open('GET', requestURL);\r\nrequest.responseType = 'json';\r\nrequest.send();\r\nrequest.onload = function() {\r\n  var superHeroes = request.response;\r\n  populateHeader(superHeroes);\r\n  showHeroes(superHeroes);\r\n}\r\nfunction populateHeader(jsonObj) {\r\n  var myH1 = document.createElement('h1');\r\n  myH1.textContent = jsonObj['squadName'];\r\n  header.appendChild(myH1);\r\n  var myPara = document.createElement('p');\r\n  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' \/\/ Formed: ' + jsonObj['formed'];\r\n  header.appendChild(myPara);\r\n}\r\nfunction showHeroes(jsonObj) {\r\n  var heroes = jsonObj['members'];\r\n  for(var i = 0; i &lt; heroes.length; i++) {\r\n    var myArticle = document.createElement('article');\r\n    var myH2 = document.createElement('h2');\r\n    var myPara1 = document.createElement('p');\r\n    var myPara2 = document.createElement('p');\r\n    var myPara3 = document.createElement('p');\r\n    var myList = document.createElement('ul');\r\n    myH2.textContent = heroes[i].name;\r\n    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;\r\n    myPara2.textContent = 'Age: ' + heroes[i].age;\r\n    myPara3.textContent = 'Superpowers:';\r\n    var superPowers = heroes[i].powers;\r\n    for(var j = 0; j &lt; superPowers.length; j++) {\r\n      var listItem = document.createElement('li');\r\n      listItem.textContent = superPowers[j];\r\n      myList.appendChild(listItem);\r\n    }\r\n    myArticle.appendChild(myH2);\r\n    myArticle.appendChild(myPara1);\r\n    myArticle.appendChild(myPara2);\r\n    myArticle.appendChild(myPara3);\r\n    myArticle.appendChild(myList);\r\n    section.appendChild(myArticle);\r\n  }\r\n}<\/pre>\n<p><!--more--><\/p>\n<p>HTML\u306f\u3053\u3093\u306a\u611f\u3058\u3002<\/p>\n<pre class=\"lang:python decode:true \" >&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n\r\n    &lt;title&gt;Our superheroes&lt;\/title&gt;\r\n\r\n    &lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Faster+One\" rel=\"stylesheet\"&gt;\r\n    &lt;link rel=\"stylesheet\" href=\"style.css\"&gt;\r\n  &lt;\/head&gt;\r\n\r\n  &lt;body&gt;\r\n\r\n    &lt;header&gt;&lt;\/header&gt;\r\n    &lt;section&gt;&lt;\/section&gt;\r\n\r\n    &lt;script src=\"script.js\"&gt;&lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>CSS\u306f\u3053\u3093\u306a\u611f\u3058<\/p>\n<pre class=\"lang:python decode:true \" >\/* || general styles *\/\r\n\r\nhtml {\r\n    font-family: 'helvetica neue', helvetica, arial, sans-serif;\r\n  }\r\n  \r\n  body {\r\n    width: 800px;\r\n    margin: 0 auto;\r\n  }\r\n  \r\n  h1, h2 {\r\n    font-family: 'Faster One', cursive;\r\n  }\r\n  \r\n  \/* header styles *\/\r\n  \r\n  h1 {\r\n    font-size: 4rem;\r\n    text-align: center;\r\n  }\r\n  \r\n  header p {\r\n    font-size: 1.3rem;\r\n    font-weight: bold;\r\n    text-align: center;\r\n  }\r\n  \r\n  \/* section styles *\/\r\n  \r\n  section article {\r\n    width: 33%;\r\n    float: left;\r\n  }\r\n  \r\n  section p {\r\n    margin: 5px 0;\r\n  }\r\n  \r\n  section ul {\r\n    margin-top: 0;\r\n  }\r\n  \r\n  h2 {\r\n    font-size: 2.5rem;\r\n    letter-spacing: -5px;\r\n    margin-bottom: 10px;\r\n  }<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>JSON\u306f\u3001JavaScript Object Notation\u306e\u7565\u306a\u3093\u3067\u3059\u306d\u3002\u3002\u307e\u3055\u306b\u3001JavaScript\u306e\u305f\u3081\u306e\u69cb\u9020\u5316\u8868\u73fe\u3068\u3044\u3046\u3053\u3068\u3067\u3059\u3002\u305d\u306e\u5272\u306b\u306f\u3001\u624b\u9806\u304c\u591a\u3044\u306a\u3041\u30fb\u30fb \u7cf8\u3092\u5f15\u304f\u3088\u3046\u306a\u30d5\u30a9\u30f3\u30c8\u306b\u8208\u5473\u304c\u6e67\u304d\u3001\u518d\u73fe\u3057\u3066&#8230;<\/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":[558,585],"class_list":["post-3823","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-javascript","tag-json"],"_links":{"self":[{"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/posts\/3823","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=3823"}],"version-history":[{"count":2,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/posts\/3823\/revisions"}],"predecessor-version":[{"id":3825,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/posts\/3823\/revisions\/3825"}],"wp:attachment":[{"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3823"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3823"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}