Привет! Сегодня я расскажу, как я сформировал массив с данными для блока ″Опыт работы″ и вывел эти данные в HTML-шаблоне на моем сайте.Для начала, мне понадобилось создать массив с данными об опыте работы. Я решил, что каждый элемент массива будет представлять собой объект с несколькими свойствами, такими как название компании, должность, период работы и описание.Вот как выглядит мой массив данных⁚
javascript
var experience [
{
company⁚ ″Компания А″,
position⁚ ″Web-разработчик″,
period⁚ ″Июнь 2015 ⸺ Декабрь 2017″,
description⁚ ″Веб-разработка и поддержка сайта компании. Работа над дизайном и функциональностью.″
},
{
company⁚ ″Компания Б″,
position⁚ ″Frontend-разработчик″,
period⁚ ″Январь 2018 ⸺ настоящее время″,
description⁚ ″Разработка пользовательского интерфейса для веб-приложений. Оптимизация производительности.″
}
];
Как только я создал массив, я перешел к созданию HTML-шаблона, в котором будут выводиться данные из массива. Я решил использовать список UL для отображения информации об опыте работы. Вот как выглядит мой HTML-шаблон⁚
-
Компания А
Web-разработчик
Июнь 2015 ⎻ Декабрь 2017
Веб-разработка и поддержка сайта компании. Работа над дизайном и функциональностью.
-
Компания Б
Frontend-разработчик
Январь 2018 ⎻ настоящее время
Разработка пользовательского интерфейса для веб-приложений. Оптимизация производительности.
Теперь, чтобы вывести данные из массива в HTML-шаблоне, я воспользовался JavaScript. Я создал функцию, которая будет генерировать HTML-код для каждого элемента массива и вставлять его в HTML-страницу.Вот как выглядит мой JavaScript код⁚
javascript
function generateExperienceHTML {
var experienceHTML ″″;
for (var i 0; i < experience.length; i ) { experienceHTML ″
experienceHTML ″
″ experience[i].company ″
″;
experienceHTML ″
″ experience[i].position ″
″;
experienceHTML ″
″ experience[i].period ″
″;
experienceHTML ″
″ experience[i].description ″
″;
experienceHTML ″
″;
}
var ulElement document.querySelector(″ul″);
ulElement.innerHTML experienceHTML;
}
generateExperienceHTML;
Теперь, когда я загружаю страницу, данные из массива автоматически выводятся на мой сайт в соответствующем блоке ″Опыт работы″.
Таким образом, я сформировал массив данных для блока ″Опыт работы″ и вывел эти данные в HTML-шаблоне с помощью JavaScript. Это очень удобно, поскольку я могу легко изменять и обновлять информацию об опыте работы, просто изменяя элементы массива.