schema.org.ComputerLanguage.Image.201702141306

Create HTML img elements from JSON-LD.

by ytyaru

HTML

<script id="lang-ld" type="application/ld+json">
[{
  "@context": "http://schema.org",
  "@type": "ComputerLanguage",
  "name": "C",
  "description": "汎用プログラミング言語",
  "disambiguatingDescription": "手続き型言語、関数型言語、コンパイラ言語。",
  "url": "https://ja.wikipedia.org/wiki/C%E8%A8%80%E8%AA%9E",
  "image": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgd2lkdGg9IjI1NnB4IiBoZWlnaHQ9IjI1NnB4IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjU2IDI1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBkPSJNMTY5LjE0MywxNzYuOTgxYy03LjcwMywzLjczMS0xNy43NjIsNS41OTEtMzAuMTcsNS41OTFjLTE2LjE5NiwwLTI4LjkyOS00Ljc1OC0zOC4xOTctMTQuMjc3CgljLTkuMjg0LTkuNTIxLTEzLjkxOC0yMi4yMDMtMTMuOTE4LTM4LjA1MWMwLTE2Ljg3OSw1LjIxNS0zMC41NjksMTUuNjQ2LTQxLjA2NmMxMC40MjMtMTAuNTAxLDIzLjk1My0xNS43NTEsNDAuNTg0LTE1Ljc1MQoJYzEwLjMwOCwwLDE4Ljk4NiwxLjI5OCwyNi4wNTUsMy45MDJ2MjIuODg1Yy03LjA2OC00LjIxNi0xNS4xMTEtNi4zMjQtMjQuMTQxLTYuMzI0Yy05LjkwMywwLTE3LjkwOCwzLjExNS0yMy45OTIsOS4zNDYKCWMtNi4wODQsNi4yMzEtOS4xMjEsMTQuNjY3LTkuMTIxLDI1LjMxNGMwLDEwLjIwNiwyLjg2NywxOC4zMzksOC42MDksMjQuMzkyYzUuNzM0LDYuMDY3LDEzLjQ2OSw5LjA5NSwyMy4xOCw5LjA5NQoJYzkuMjc1LDAsMTcuNzYyLTIuMjUyLDI1LjQ2NS02Ljc3M1YxNzYuOTgxeiIvPgo8L3N2Zz4K"
},
{
  "@context": "http://schema.org",
  "@type": "ComputerLanguage",
  "name": "C++",
  "alternateName": "cpp",
  "description": "汎用プログラミング言語",
  "disambiguatingDescription": "C言語の拡張として開発された。",
  "url": "https://ja.wikipedia.org/wiki/C%2B%2B",
  "sameAs": ["https://ja.wikipedia.org/wiki/C%2B%2B",...

JavaScript

langs = JSON.parse(document.getElementById('lang-ld').text); document.body.insertBefore(createLanguageTags(langs), document.body.firstChild);

function createListTag(langs)
{
  var ul = document.createElement('ul');
  for (var i = 0; i < langs.length; i++)
  {
    var li = document.createElement('li');
    //li.appendChild(createLinkTag(langs[i].name, langs[i].url, langs[i].description));
    li.appendChild(createImageLinkTag(langs[i].image, langs[i].url, langs[i].description));
    ul.appendChild(li);
  }
  return ul;
}
function createLanguageTags(langs)
{
  var fragment = document.createDocumentFragment();
  for (var i = 0; i < langs.length; i++)
  {      
  fragment.appendChild(createImageLinkTag(langs[i].image, langs[i].url, langs[i].description));
  }
  fragment.appendChild(document.createElement('br'));
  return fragment;
}
function createLinkTag(text, href, title)
{
  var a = document.createElement('a');
  a.appendChild(document.createTextNode(text));
  a.setAttribute("href", href);
  a.setAttribute("title", title);
  return a;
}
function createImageLinkTag(src, href, title)
{
  var a = document.createElement('a');
  a.appendChild(crateImageTag(src));
  //a.appendChild(crateImageByObjectTag(src));
  a.setAttribute("href", href);
  a.setAttribute("title", title);
  return a;
}
function crateImageTag(src)
{
  var img = document.createElement('img');
  img.setAttribute("src", src);
  img.setAttribute("width", 64);
  img.setAttribute("width", 64);
  return img;
}
function crateImageByObjectTag(src)
{
  var img = document.createElement('object');
  img.setAttribute("type", "image/svg+xml");
  img.setAttribute("data", src);
  img.setAttribute("width", 64);
  img.setAttribute("width", 64);
  return img;
}