Привет! Сегодня я расскажу, как я сформировал массив с данными для блока ″Опыт работы″ и вывел его на HTML-шаблоне.
Сначала я создал пустой массив с именем ″опыт_работы″. Затем я добавил в него несколько объектов, каждый из которых представляет собой одну работу из моего опыта. Каждый объект содержит следующую информацию⁚ название компании, даты работы, должность и описание.
js
var опыт_работы [
{
компания⁚ ″ABC Company″,
даты⁚ ″март 2019 ⎯ октябрь 2020″,
должность⁚ ″разработчик программного обеспечения″,
описание⁚ ″Разработка и тестирование программного обеспечения, обучение новых сотрудников.″
},
{
компания⁚ ″XYZ Corporation″,
даты⁚ ″январь 2017 ⎯ февраль 2019″,
должность⁚ ″аналитик данных″,
описание⁚ ″Анализ больших объемов данных, составление отчетов и презентаций для руководства.″
},
{
компания⁚ ″123 Industries″,
даты⁚ ″май 2015 ⎯ декабрь 2016″٫
должность⁚ ″тестировщик программного обеспечения″,
описание⁚ ″Тестирование и отладка программного обеспечения, составление тест-кейсов.″
}
];
Далее я создал HTML-шаблон, в котором я хотел вывести информацию об опыте работы. Я использовал тег `
- ` для создания списка, а каждый элемент списка содержит информацию об одной работе.
-
Компания⁚ ABC Company
Даты работы⁚ март 2019 ⎻ октябрь 2020
Должность⁚ разработчик программного обеспечения
Описание⁚ Разработка и тестирование программного обеспечения, обучение новых сотрудников. -
Компания⁚ XYZ Corporation
Даты работы⁚ январь 2017 ⎯ февраль 2019
Должность⁚ аналитик данных
Описание⁚ Анализ больших объемов данных, составление отчетов и презентаций для руководства. -
Компания⁚ 123 Industries
Даты работы⁚ май 2015 ⎻ декабрь 2016
Должность⁚ тестировщик программного обеспечения
Описание⁚ Тестирование и отладка программного обеспечения, составление тест-кейсов.
Однако, вместо мануального ввода каждой работы в HTML-шаблон, я использовал JavaScript, чтобы автоматически создать список на основе данных из массива ″опыт_работы″. Для этого я использовал цикл `for`, который проходит через каждый объект в массиве и добавляет информацию в HTML-шаблон.
js
var опыт_работы_список document.querySelector(″#опыт-работы-список″);
for (var i 0; i < опыт_работы.length; i ) {
var работа опыт_работы[i];
var элемент_списка document.createElement(″li″);
элемент_списка.innerHTML ″Компания⁚ ″ работа.компания ″
″
″Даты работы⁚ ″ работа.даты ″
″
″Должность⁚ ″ работа.должность ″
″
″Описание⁚ ″ работа.описание;
опыт_работы_список.appendChild(элемент_списка);
}
Наконец, я добавил идентификатор `″опыт-работы-список″` к элементу `
- ` в HTML-шаблоне, чтобы JavaScript мог найти его и добавить элементы списка с помощью цикла `for`.
Теперь, когда я открываю страницу с этим кодом, я вижу блок ″Опыт работы″ с информацией о каждой моей работе, которую я добавил в массив ″опыт_работы″. Это удобно и позволяет мне легко добавлять или изменять информацию об опыте работы в массиве, а затем автоматически обновлять HTML-шаблон.
Я надеюсь, что мой опыт поможет и вам! Удачи в создании своего блока ″Опыт работы″ на HTML-странице!