Всем привет, сегодня мы снова будем решать задачи по JavaScript. На этот раз поинтереснее, нужно будет взаимодействовать с HTML. (Если кто не смотрел, посмотрите первую часть)
Начнём!
Будем решать вот на таком сайте.
1. Задача перемешать список
Задачи здесь разделены по уровням, возьму 9 (всего 10).
Я буду решать задачи не по порядку, для вас я буду выбирать самые интересные. Возьму раздел 82, задачу №1.
Задача звучит довольно интересно, мне нравится. Давайте попробуем.
Я сверстал вот такое меню, приступаем к написанию кода.
Прикрепляем к нашей кнопке обработчик кликов.
В CSS, чтобы задать порядок объектов, есть свойство "order". При помощи него можно поменять порядок элементов на сайте, не меняя их порядок в HTML. Это свойство мы и будем использовать.
Для начала узнаем, сколько элементов находится в нашем списке, и запишем это число в переменную
У нас 4 элемента списка, для каждого из них нужно задать значение "order", которое должно выдаваться случайно. Создадим массив и сгенерируем для него элементы.
В нашем массиве должны быть цифры от 0 до 3 в случайном порядке, но они не должны повторяться. Я создал переменную x, которая каждую итерацию цикла принимает случайное значение от 0 до 3. После этого происходит проверка, существует ли такое значение в нашем массиве, если да, запускается ещё один цикл, который генерирует значение снова, пока оно не станет уникальным.
При нажатии на кнопку у нас генерируется и выводится в консоль массив случайных уникальных значений от 0 до 3. Этот массив мы сможем использовать в дальнейшем для задания свойства "order" элементам списка.
А далее проворачиваем простую манипуляцию. Создаём ещё один цикл, который перебирает значения от 0 до 3. После получаем массив из всех элементов "li" списка и каждому из них задаём значения из массива.
Думаю, можно даже не создавать отдельный цикл, это всё можно объединить в один. Пока элементы заполняются в список, сразу на ходу эти значения применяются к нашим элементам списка.
Вот такое меню у нас получилось:
Всё исправно работает, с поставленной задачей мы (я) справились 😉
2. Задача отрисовать точки на графике
Уровень 9.3, задача №3.
Здесь нужно отрисовать точки на графике. Я думаю, нужно также сделать поле, где всё это будет отрисовываться, добавить координатные оси X и Y.
Мне нравится идея этого задания, в школе и университете я обожал графики. Приступим...
В этой задаче для работы я использую элемент "canvas". Canvas это элемент, позволяющий рисовать на себе картинки через JavaScript на сайте. Задачу с графиками можно было бы сделать и проще, просто перетаскивая элементы, но так это будет более качественно и, возможно, удобно.
Приступаем к JS коду. Подключаемся к канвасу и его контексту, который будем использовать для работы.
Начнём рисовать наши координатные прямые X и Y.
Получился вот такой график, но он пока пустой. Добавим точки
Сделать точку можно, нарисовав маленький квадрат или круг. Вот так это будет выглядеть
Загружаем наш массив из задания и пишем код, который будет отрисовывать эти точки.
Загрузим координаты из массив и вычтем из каждой по 5 пикселей. Наш квадрат появляется в наших координатах, но он начинает рисоваться с верхнего угла. Ширина нашего квадрата 10, он от этого угла растянется на 10 пикселей вправо и вниз. А нам нужно, чтобы координаты квадрата были не в его углу, а в центре, поэтому вычитаем половину от его ширины.
Получается так. Дело в том, что наш canvas 400 пикселей по ширине и высоте, а наши координаты совсем маленькие ([1, 2], [2, 4]). Нам нужно преобразовать эти координаты.
Координаты канваса начинаются в левом верхнем углу, а не в центре, и координаты эти не от 0 до 20, к примеру, а от 0 до 400.
Нам нужно сделать так, чтобы наши координаты начинались из центра и отображались правильно.
Для удобства вынесем наши x и y в отдельные переменные. Центр нашего графика находится на координатах (200px, 200px), поэтому к x добавляем 200.
Сделаем наш диапазон значений от 0 до 20 и сделаем так, чтобы он умещался в такой график. Получается, значения от 0 до 20 будут умещаться на линии шириной 200px. Делим 200 на 20, получаем 10, на это число нам нужно умножить наш x.
С y то же самое, но наш y нужно вычесть из 200, Y координаты канваса идут вниз, а у нашего графика должны идти вверх.
Возможно, это может показаться кому-то сложно, вот так вот... Мы преобразовали координаты и получили вот такое:
Пятая точка не влезла на график, она слишком далеко, а если увеличивать масштаб, остальные точки будет видно хуже.
Сделаем вот такие точки
Получим результат
Получилось довольно красиво. Я считаю, что мы справились с поставленной задачей.
Подводим итоги
На этот раз наши задачи были намного интереснее, чем в прошлый раз. В предыдущей статье я показывал решение более простых задач, шла работа со значениями. Сейчас же, мы активно работали с HTML, что было довольно интересно.
Не забывайте ставить лайки и писать комментарии, а кто хочет, может подписаться на мой блог 😊