Я хочу предвосхитить это, сказав, что я бэкэнд-разработчик, который действительно использовал Javascript только для проверки формы.
Мне дали задание использовать "Pure Javascript" для манипулирования DOM для использования семантических тегов HTML 5. Мне сказали, что человек, который дал назначение, был обеспокоен тем, что я «использовал знания HTML вместо запрошенного Javascript». Рассматривая код javascipt, который я использовал, кто-нибудь имеет представление о том, что может означать «я использовал свои знания HTML вместо запрошенного Javascript»? Я знаю, что Javascript встроен, но именно здесь шаблон страницы должен был добавить его.
Любые комментарии или ответы будут высоко оценены.
Следующая страница. Я добавил код, который находится под строкой «использовать строгий режим».
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Animal Facts</title>
<style>
body{
font-size:1.2rem;
font-family:helvetica, arial, sans-serif;
}
figure img{max-width:100%;height:auto}
</style>
</head>
<body>
<div>
<h1>Animal Facts</h1>
<div class="image">
<img src="http://via.placeholder.com/500x300" alt="Lorem Ipsum"/>
<div class="caption">Placeholder Image</div>
</div>
<div class="animal-facts">
<div class="description">Bear Facts</div>
<h1>Unlike Many Mammals...</h1>
<ul>
<li>Polar bears are the largest land predators on earth,standing over 11' high and weighing over 1,700 lbs.</li>
<li>The giant panda is actually a bear.</li>
<li>Bears have an excellent sense of smell, better than dogs or possibly any other mammal.</li>
</ul>
</div>
<div class="animal-facts">
<div class="description">Tiger Facts</div>
<h1>Interesting information about tigers</h1>
<ul>
<li>Tigers are the largest wild cats in the world. Adults can weigh up to 363kg – that’s about the same as ten ten year olds! – and measure up to 3.3m!</li>
<li>Tigers are carnivores, eating only meat. They mainly feed on large mammals such as deer, wild pigs, antelope and buffalo.</li>
<li>Did you know that we have a FREE downloadable tiger primary resource? Great for teachers, homeschoolers and parents alike!</li>
<li>Tigers are solitary hunters, and generally search for food alone at night. They quietly stalk their prey until they are close enough to pounce – then they kill their victim with a bite to the neck or back of the head. Ouch!</li>
<li>Unlike most members of the cat family, tigers like water. They are good swimmers and often cool off in pools or streams.</li>
<li>When a tiger wants to be heard, you’ll know about it, gang – because their roar can be heard as far as three kilometres away.</li>
<li>They may be big and heavy, but tigers are by no means slow movers. In fact, at full speed they can reach up to 65km/h!</li>
<li>These fierce felines have walked the earth for a long time. Fossil remains of tigers found in parts of China are believed to be 2 million years old. Yikes!</li>
<li>Every tiger in the world is unique – no two tigers have the same pattern of stripes.</li>
<li>Today, there are five subspecies of tiger: Bengal, South China, Indochinese, Sumatran and Siberian. Sadly, three subspecies of tiger have become extinct – Caspian, Bali and Javan.</li>
<li>Less than 100 years ago, tigers could be found throughout Asia. Sadly, hunting and habitat loss have put populations at risk, and today their range has been reduced to around 7% of its former size. That’s why we need to do all we can to protect these beautiful beasts!</li>
</ul>
</div>
</div>
<script type="text/javascript">
"use strict";
/** Put Javascript code here **/
/**Create variables to store current tags that will be reused after the conversion **/
var div = document.getElementsByTagName('div')[0];
var ulTiger = document.getElementsByTagName('ul')[1];
var ulBear = document.getElementsByTagName('ul')[0];
var h1Tiger = document.getElementsByTagName('h1')[2]
var h1Bear = document.getElementsByTagName('h1')[1];
var h1Main = document.getElementsByTagName('h1')[0];
var body = document.body
/**Create variables for the new Semantic HTML5 tags that will be in the page after the conversion **/
var Main = document.createElement('main');
var detailsTiger = document.createElement('details');
var detailsBear = document.createElement('details');
var summaryTiger = document.createElement('summary');
var summaryBear = document.createElement('summary');
var figCaption = document.createElement('figcaption');
var figure = document.createElement('figure');
/**Set the first div into a variable so that the <main> can replace the outer <div> after the conversion
This is done so that I can create the main tag with all of its contents prior to removing the outer <div>
from the document **/
var child = document.getElementByTagName('div')[0];
/**Add the text and image to the figure tag and Append the figcaption tag to it **/
figCaption.textContent = 'Placeholder Image';
figure.innerHTML = '<img src="http://via.placeholder.com/500x300" alt="Lorem Ipsum">';
figure.append(figCaption);
/**Add the animal <detail> and <summary> tags in the correct order
summaryTiger.innerText = 'Tiger Facts';
detailsTiger.appendChild(ulTiger);
ulTiger.insertAdjacentElement("beforebegin", summaryTiger);
ulTiger.insertAdjacentElement("beforebegin", h1Tiger);
summaryBear.innerText = 'Bear Facts';
detailsBear.appendChild(ulBear);
ulBear.insertAdjacentElement("beforebegin", summaryBear);
ulBear.insertAdjacentElement("beforebegin", h1Bear);
/** Insert the new <main> tag into the <body> before the outer <div>. This is done so that
the new Semantic HTML5 tags are created and placed prior to removing the <div> tags
from the document**/
body.insertBefore(Main, div);
/** Insert the new <details> tags and their contents into the new <main> element **/
Main.append(detailsTiger);
Main.insertBefore(detailsBear, detailsTiger);
Main.insertBefore(figure, detailsBear);
Main.insertBefore(h1Main, figure);
/** Now that all of the new Semantic HTML5 tags have been added, we can remove the outer <div>
and all of its contents from the document **/
body.removeChild(child);
</script>
</body>
</html>