Вызов js кода в html

282
19 декабря 2017, 19:58

Попалось такое задание, не понимаю как с точки зрения синтаксиса это должно выглядеть в html и js файлах. Ниже привожу текст задания и то, как я написала код, который естественно не работает.

Некоторый справочник представлен в виде дерева, каждый узел которого может быть, либо перечнем дочерних узлов (тип А), либо узлом с информацией (тип Б).

Узлы типа А имеют вид:
{
title: “Категория”, // заголовок узла
children: [] // список дочерних узлов
}
Узлы типа B имеют вид:
{
title: “Понятие”, // заголовок узла
image: “...”, // (необяз)URL-изображения
text: “...” // текст информации, который не должен отображаться как
// html (перед выводом нужно экранировать), строки в нем
// разделяются символами переноса строки “\n”
}

HTML-код справочника должен генерироваться автоматически. Входным параметром является корневой узел типа А.

<!DOCTYPE html>
<html>
<head>
<title>Справочник по странам</title>
<link rel="stylesheet" type="text/css" href="Style.css">
<script type="text/javascript" src="Tree.js"></script>
</head>
<body>
<div Landscape()></div>
</body>
</html>

Попыталась повторить синтаксис, как в задании, но там абсолютно ничего не работает

Russia()
{
title:"Россия",
children:["Landscape"]
}
Landscape()
{
title:"Пейзажи",
image:"img/moskva.jpg",
text:"Территория России, определяемая её конституцией, "
"составляет 17 125 191 км² (первое место по площади среди стран мира)" 
}
Answer 1

Получается, что вот так:

https://jsfiddle.net/osbjovLz/

Как добавить картинки думаю разберётесь...

const data = [
  {
    "title": "Parent 0",
    "children": [
      {
        "title": "Child 1",
        "text": "Text 1",
        "image": "http://lorempixel.com/400/200/sports/1/"
      },
      {
        "title": "Child 2",
        "text": "Text 2",      
        "image": "http://lorempixel.com/400/200/sports/1/"
      }
    ]
  },
  {
    "title": "Parent 1",
    "children": [
      {
        "title": "Child 1",
        "text": "Text 1",
        "image": "http://lorempixel.com/400/200/sports/1/"
      },
      {
        "title": "Child 2",
        "text": "Text 2",      
        "image": "http://lorempixel.com/400/200/sports/1/"
      }
    ]
  }
];
function processData(data) {
  const root = document.getElementById('root');
  console.log(root)

  data.map(parent => {
    root.appendChild(createParentNode(parent));
  })
}
function createParentNode(data) {
  const node = document.createElement('div');
  const titleNode = document.createElement('h3');
  titleNode.textContent = data.title;
  node.appendChild(titleNode);
  const children = data.children || [];
  children.map(child => {
    node.appendChild(createChildNode(child));
  })
  return node;
}
function createChildNode(data) {
  const node = document.createElement('div');
  const textNode = document.createElement('span');
  textNode.textContent = data.text;
  node.appendChild(textNode);
  return node;
}

function main() {
  processData(data);
}
main();
READ ALSO
Вывод таблицы на элемент body через скрипт
javascript

Вывод таблицы на элемент body через скрипт

Я новичек в програмиировании и в том числе в js и htmlНа курсе дали задание, и я не могу понять, как с ним справиться

 276
автоматизация загрузки шаблонов Handlebars
javascript

автоматизация загрузки шаблонов Handlebars

Доброго времени сутокВ поисках ответа на свой вопрос набрел на подобный способ

 208
Pause\Stop background video
javascript

Pause\Stop background video

Есть кнопка, по клику на которую - я останавливаю фоновое видео, помогите дописать, чтобы на повторный клик, видео заново воспроизводилось

 207
Почему classList.add не работает после clearInterval()
javascript

Почему classList.add не работает после clearInterval()

До того, как сработает clearInterval(), всё работает, но после прохождения цикла и очищения интервала, невозможно по новой добавить класс, чтобы замкнуть...

 223