07

JS: повтор

JavaScript: повтор основ

Цель: повторить основы языка программирования JavaScript: типы данных, переменные, операторы, функции, массивы, объекты, DOM, события; приобрести навыки написания кода, работы с инструментами разработчика и консолью браузера, отладки кода с помощью IDE и работы с инструментами разработчика и консолью браузера.

Содержание и порядок выполнения лабораторной работы:

  1. Подготовка к выполнению лабораторной работы:

    • изучение основ языка программирования JavaScript:
      • Основные типы данных
      • Операторы
      • Динамическая типизация и приведение типов данных.
      • Объявление переменных и присваивание значений.
      • Допустимые имена переменных.
    • конструкции:
      • условные:
        • if…else
        • switch
        • for
      • циклические:
        • while
        • do-while
    • синтаксис создания функций (объявление функции, функциональное выражение, стрелочные функции), параметры/аргументы, возврат значения;
      • массивы (методы pop/push, shift/unshift, перебор for .. of, метод forEach);
      • объекты (ключ: значение, перебор for .. in, методы delete, keys, values, entries);
      • взаимодействие с DOM (структура документа, дерево, узлы);
      • события и их обработка.

  2. Для выполнения работы необходимо к проекту с макетом подключить файл с решением задач по JS.

  3. Зафиксировать результаты работы с помощью системы контроля версий git и отправить репозиторий на github.

  4. Загрузить проект на сервер через sftp или используя ssh.

Требования к JS:

  • Все задачи имеют решение и требуемый в них вывод.
  • Отсутствуют ошибки в консоли браузера при работе с веб-страницей.

Результаты выполнения лабораторной работы:

Результаты работы проверены наставником.

Статическая веб-страница на хостинге проверенная, со структурой и оформлением, которая соответствует требованиям и сохранена в системе контроля версий.

Источники

Задачи

Задача №1 Сэндвичи с сыром

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

Пример вывода:

countSandwiches({bread: 5, cheese: 6}) -> 2

Задача №2 Таблица умножения

Напишите функцию, которая выводит в консоль таблицу умножения до указанного числа.

Пример вывода:

generateMultiplicationTable(5)

>
	1	2	3	4	5
1	1	2	3	4	5
2	2	4	6	8	10
3	3	6	9	12	15
4	4	8	12 16 20
5  5  10 15 20 25

Задача №3 Цитата в рамочке

Напишите функцию, которая выводит в консоль массив слов в рамочке из указанного символа.

Пример вывода:

showQuote(['Hello' 'World', 'In', 'JS'], '*')

>
*********
* Hello *
* World *
* In    *
* JS    *
*********

Задача №4 Объединение массивов

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

Пример вывода:

combineArrays([1, 2, 3], ['a', 'b', 'c', 'd']) -> [1, 'a', 2, 'b', 3, 'c', 'd']

Задача №5 Счетчик уникальных значений массива

Напишите функцию для подсчета уникальных значений в массиве. Функция должна возвращать объект, где ключами являются уникальные значения, а значениями их количество. Для вывода информации можете использовать console.table().

Пример возвращаемого объекта

countUniqueValues([1,2,1,2,3,4,2,5]) -> {1: 2, 2: 3, 3: 1, 4: 1, 5: 1}

Задача №6 Бургер-меню (Mobile Navigation Menu)

Используя графический элемент из 3-й лабораторной работы, создать на странице в шапке (header) меню, которое скрывается и раскрывается по нажатию на кнопку. Скрытие и раскрытие меню не должно вызывать сдвига всей остальной страницы, меню раскрывается на весь экран с отключением полосы прокрутки. Количество пунктов в меню не менее 5. Пока меню скрыто отображается три горизонтальных линии, когда меню раскрыто - крестик. Не забывайте про доступность и семантические теги.

Задача №7 Уведомления (Toasts)

Создать всплывающее уведомление (не alert), который через две секунды от загрузки страницы всплывает снизу справа и показывает информацию из объекта вида {name: String, message: String}. В нем есть кнопка закрытия. При нажатии на нее уведомление плавно скрывается.

Вопросы для защиты

  1. Какие типы значений есть в JS?
  2. Чем отличаются строки "", ” и “?
  3. Какие есть циклы в JS?
  4. Как создаются функции?
  5. Какие методы массивов вы знаете?
  6. Как можно перебирать элементы массива?
  7. Что такое объект?
  8. Как получить значение из свойства объекта?
  9. Что такое DOM?
  10. Какие есть способы получения элементов из DOM?
  11. Что такое событие?
  12. Как добавить обработчик события?
  13. Примеры свойств в объекте event.
  14. Примеры методов у элементов DOM.
  15. Назовите фазы жизненного цикла события.
Предыдущая Следующая