JavaScript: объекты, массивы, функции
Цель: изучить основы языка программирования JavaScript: функции, массивы, объекты. Приобрести навыки написания кода, работы с инструментами разработчика и консолью браузера, отладки кода с помощью IDE.
Порядок выполнения лабораторной работы:
- Изучить:
- синтаксис создания функций (объявление функции, функциональное выражение, стрелочные функции), параметры/аргументы, возврат значения;
- массивы (методы pop/push, shift/unshift, перебор for .. of, метод forEach);
- объекты (ключ: значение, перебор for .. in, методы delete, keys, values, entries);
- объект Math, его свойства и методы.
- Для выполнения работы необходимо:
- В репозитории с прошлого занятия, переключиться назад на ветку main и только после этого создать и переключиться на ветку lab2 и работать в ней.
- Создать документ html с H1 заголовком «ФИО - Лабораторная работа №2».
- Решить предложенные задачи используя JS. Перед решением задачи напишите “тесты” с помощью
console.assert(condition, сообщение)
минимум по 4 assert: 2 на положительный сценарий и 2 на отрицательный. - Подключить решения к созданной странице.
- Зафиксировать результаты работы с помощью системы контроля версий git и отправить ветку lab2 в репозиторий на github.
- Загрузить проект на Render через ручную загрузку (manual deploy).
Требования к JS:
- Все задачи имеют решение и требуемый в них вывод.
- Отсутствуют ошибки в консоли браузера при работе с веб-страницей.
Результаты выполнения лабораторной работы:
Результаты работы проверены наставником.
Статическая веб-страница на хостинге, со структурой и оформлением, которая соответствует требованиям и сохранена в системе контроля версий.
Источники
- «Современный учебник JavaScript»
- doka.guide
- Руководство по JavaScript на русском
- Марейн Хавербек «Выразительный Javascript»
Задачи
Работа с объектом
Напишите код, который создает объект, выводит список этих свойств и сообщение вида “Студент Имя Фамилия учится в номер группе”. Список свойств требуется получить, используя метод или цикл.
Пример объекта:
let student = {
group: 201,
lastName: "Иванов",
firstName: "Иван"
};
Пример вывода:
> Список свойств: group, lastName, firstName
> Студент Иван Иванов учится в 201 группе
Сэндвичи с сыром
Для сэндвича требуется два ломтика хлеба и один ломтик сыра. Напишите функцию, которая посчитает максимально возможное количество сэндвичей. Информация о количестве ингридиентов хранится в объекте. В функции можно использовать деструктуризацию объекта (деструктурирующее присваивание).
Пример работы:
countSandwiches({bread: 5, cheese: 6}) -> 2
Функция конвертации температуры
Код из первой задачи прошлой лабораторной работы переработать в функцию convertTemperature, которая принимает два параметра: значение температуры и направление преобразования. Функция возвращает в виде строки температуру в других единицах измерения.
Пример работы:
convertTemp(32, 'toC') -> '0 C'
convertTemp(10, 'toF') -> '50 F'
Абсолютное значение
Напишите функцию absValue без Math.abs(x), которая в качестве параметра принимает число и возвращает его абсолютное значение (по модулю).
Пример работы:
absValue(-2) -> 2
absValue(100) -> 100
absValue(0) -> 0
Случайные числа
Используя методы объекта Math создать функцию, которая возвращает целое случайно сгенерированное число в диапазоне от min до max.
Пример работы:
randomNumber(0, 10) -> 3
randomNumber(-10, 10) -> -4
Значения из массива
Используя функцию из прошлой задачи, реализовать функцию, которая возвращает случайные значения из массива в заданном количестве в виде нового массива.
Пример работы:
sampleArray([1,2,3,4], 2) -> [3, 4]
sampleArray([1,2,3,4], 3) -> [2, 2, 1]
Фильтрация массива
Напишите функцию, которая является аналогом метода filter у массива. Функция в качестве параметров принимает сам массив и функцию-фильтр, а возвращает новый массив с элементами прошедшими отбор. Элемент прошел отбор, если функция-фильтр вернула истину для него.
Передаваемая функция-фильтр должна работать с одним параметром и возвращать истину или ложь.
В качестве функции-фильтра можете проверять минимальную/минимальную длину строки или деление без остатка.
Пример работы:
function isFirstV(name) {
return name.startsWith('V')
}
myFilterArray(['Short', 'VeryLong'], isFirstV) -> ['VeryLong']
Вопросы для защиты
- Как создаются функции?
- Как выполняется блок кода внутри функции?
- Как хранятся данные в массиве?
- Какие методы массивов вы знаете?
- Как обратиться к элементу массива?
- Как можно перебирать элементы массива?
- Что такое объект?
- Как получить значение из свойства объекта?
- Для чего используется объект Math?
- Приведите примеры свойств и методов в Math.
- Как запустить режим отладки и какие в нем есть возможности перемещения по коду?