Все для создания и продвижения сайтов

Верстка, программирование, SEO

Задания по JS для прокачки

Каждое задание с функциями, выводить пример их реализации в консоль, console.log(myfunc(1,3));. Страничка будет обновляться новыми заданиями.

На основные знания

Базовые

  1. Написать функцию, которая принимает два числа и возращает результат их умножения
  2. Написать функцию, которой передаем, имя, фамилия и возраст, и получаем строку "Привет Иван Петров с возрастом 17 лет" (только здесь данные, которые были переданы в функцию)
  3. Написать функцию, которая принимает пол человека ('M','F') в виде строки, результат функции возвращает строку "Ваш пол мужской" (или женский) или же "Ваш пол не опеределен"
  4. Сделайте функцию, которая принимает параметром число от 1 до 7, а возвращает день недели на русском языке.
  5. Написать функцию, которая принимает строку (в этом тексте 3-5 предложений), верните каждое первое слово в каждом предложении, через запятую.
  6. Написать функцию, которой передаем имя, и она возраващает приветствие в зависимости от времени суток (Доброе утро\день\вечер\ночи Иван)
  7. Вывести числа от 1 до 100 в столбец. К каждой цифре подписать состояние возраста (1-17 ребенок, 18-30 - молодой, 30-55 - зрелый, от 55 - старый). Например. 33 - зрелый
  8. Создай новую функцию, в которую передаешь имя и возраст человека и получаешь сообщение (Иван имеет возраст 44 и он зрелый). А также вызови внутри своей функции, функцию из прошлого задания

Массивы

  1. Сделай функцию, которая принимает массив любых целых чисел, которая возращает истинну, если все элементы четные, если бы хотя бы один элемент не четный, то false.
  2. Сделай функцию, которая принимает массив любых целых чисел, которая возращает истинну, если хотя бы один элемент нечетный, если все четные, то false.
  3. Сделай функцию, которая принимает массив любых целых чисел, которая возращает новый массив, где все элементы кратны пяти. ([1,2,5,12,15,21] вернет [5,15])
  4. Написать функцию, которая принимает массив чисел, например [1,2,3,4,5] и функция возращает среднее арифметическое, (округлить результат до десятых)
  5. Написать функцию, которая принимает массив чисел, например [1,2,3,4,5], и переносит первый элемент массива в конец (например можно засунуть первый элемент в конец, затем удалить первый элемент), попробуй несколькими способами сделать, если догадаешься
  6. Написать функцию, которая принимает массив сотрудников, каждый сотрудник имеет имя и возраст ([{name: 'Иван', age: 23},...]) и возвращает массим, где каждый элемент представляет из себя строку "Имя: Иван, возвраст: 23".

Объекты

  1. У нас есть объект, в котором хранятся зарплаты нашей команды:

    let salaries = {
      John: 100,
      Ann: 160,
      Pete: 130
    }
    Напишите код для суммирования всех зарплат и сохраните результат в переменной sum. Должно получиться 390.
    Если объект salaries пуст, то результат должен быть 0.
  2. Создайте функцию multiplyNumeric(obj), которая умножает все числовые свойства объекта obj на 2.

    Например:

    // до вызова функции
    let menu = {
      width: 200,
      height: 300,
      title: "My menu"
    };
    
    multiplyNumeric(menu);
    
    // после вызова функции
    menu = {
      width: 400,
      height: 600,
      title: "My menu"
    };

    Обратите внимание, что multiplyNumeric не нужно ничего возвращать. Следует напрямую изменять объект.
    P.S. Используйте typeof для проверки, что значение свойства числовое.

  3. Написать объект ladder - объект, который позволяет подниматься вверх и спускаться. Пример работы должен быть таким:

    ladder.showStep(); // 0 (выводит ступеньку на который мы находимся)
    ladder.up(); 
    ladder.up();
    ladder.showStep(); // 2
    ladder.down();
    ladder.showStep(); // 1

Работа c DOM

  1. Вывести кнопку с текстом "Привет", при нажатии на неё выводим alert c текстом "Привет Мир!"
  2. Выводим кнопку с текстом "Заполнить" и незаполненный инпут, при клике на кнопку, заполняем инпут текстом "test@email.ru"
  3. Выводим кнопку и инпут, в инпуте можно ввести любой и текст и при нажатии на кнопку, выводится алерт с текстом "Вы ввели 'текст инпута'" или "Вы ничего не ввели в поле".
  4. Выводим кнопку с текстом "Поменять" и два инпута, при клике на кнопку инпуты меняются своим введеным текстом
  5. Выводим две кнопки "заблокировать" и "разблокировать" и инпут. Одна из них блокирует инпут с помощью атрибута disabled, а другая разблокирует
  6. Вывести любой квадрат и кнопку "скрыть квадрат". Когда мы нажимаем на скрыть, квадрат исчезает и текст кнопки меняется на "показать квадрат" и так можно кликать сколько угодно раз.
  7. Выводим красный квадрат, при наведении на него он становиться зеленым, а когда уводим курсор от него, обратно красным.
  8. Вывести 4 красных квадрата, при клике на любой, он становиться зеленым, при этом если есть уже зеленый квадрат, то он становиться обратно красным и так можно кликать на любой квадрат, он становиться зеленым, а старый зеленый квадрат обратно крассным и тд. (Сделать задачу так, чтобы можно было добавить ещё хоть 100 квадратов при этом скрипт не надо менять).
  9. Реализовать калькулятор. Выводим 10 кнопок цифр от 0 до 10. Кнопки: умножить, поделить, сложить, вычесть, вычислить. При нажатии на кнопки в любом порядке выводиться в отдельном блоке строка (5-4+3*2...) и при нажатии на кнопку посчитать, заменяем в блоке данную строку на результат её вычисления, при этом можно потом дальше вычислять с уже этим вычеслением.

Регулярные выражения

  1. Проверка URL на валидность. Передаем урл функции и проверяем валидное оно или нет (возращаем тру или фолс). Критерии: Урл должен начинаться с http:// иили https:// и заканчиваться на .php или .html. Например - http://site.ru/index.php - валидный, http://site.com - не валидный, site.ru/index.php - не валидный
  2. Проверка номера телефона на валидность. Передаем телефон функции и проверяем валидное оно или нет (возращаем тру или фолс). Такие номера должны быть валидными: 89991112233, 8 (999) 1112233, +7 (999) 111-22-33, +7 (999) 111 22 33. Т.е. телефон может начинаться как и с +7, так и с 8. код оператора, может быть в скобках и без, и с пробелами. Оставшиеся часть может быть с дефисами и пробелами

Ассинхронность

  1. Написать функцию с колбеком, которая принимает число с колбеком и через секунду выводить в консоль число. Ограничения - для решения задачи setTimeout - можно использовать только один раз! Реализовать вывод в консоль от 1 до 10 через секунду. Вызываем так (только более большая вложенность):

    func(1, (n) => {
      func(n, (n) => {
        func(n, (n) => {
            func(n);
        })
      })
    });
    
  2. Выводим от 1 до 10 через секунду каждый раз. Используя Promise. Ограничения - setTimeout и new Promise() мы можем вызывать только один раз для решения нашей задачи.
  3. Скопируем решения из прошлой задачи и переписываем на async-await функцию, конструкцию .then - не используем
  4. Сделайте функцию, которая будет генерировать случайные числа от 1 до 10. Сделайте так, чтобы сгенерированное число было задержкой функции setTimeout в секундах. Оберните все это в промис. Пусть промис выполнится успешно, если сгенерировано число от 1 до 5, и с ошибкой - если от 6 до 10.
  5. Сделайте цепочку из трех промисов. Пусть первый промис возвращает число. Сделайте так, чтобы каждый последующий промис через 3 секунды возводил в квадрат результат предыдущего промиса. После окончания манипуляций выведите число алертом на экран.
  6. Выполните запрос по получению списка пользователей, по этому url https://jsonplaceholder.typicode.com/users, в случае успеха выводим на экран пользователей со всеми данными в табличку. В случае не успеха выводим на экран ошибку "Ошибка, запрос не отработан". Используем для решения fetch.

ООП

  1. Реализуйте класс Worker (Работник), который будет иметь следующие свойства: name (имя), surname (фамилия), rate (ставка за день работы), days (количество отработанных дней). Также класс должен иметь метод getSalary(), который будет выводить зарплату работника. Зарплата - это произведение (умножение) ставки rate на количество отработанных дней days. И метод getFullName() - имя и фамиля работника.

    const worker = new Worker('Иван', 'Иванов', 10, 31);
    
    console.log(worker.name); //выведет 'Иван'
    console.log(worker.surname); //выведет 'Иванов'
    console.log(worker.getFullName); //выведет 'Иванов Иван'
    console.log(worker.rate); //выведет 10
    console.log(worker.days); //выведет 31
    console.log(worker.getSalary()); //выведет 310 - то есть 10*31
  2. Напишите новый класс Boss, этот класс наследуется от класса Worker и прошлого задания. Появляется новые свойство: workers - количество работников. И зарплата считается по другому: произведение (умножение) ставки rate на количество отработанных дней и на количество работников.

    const boss = new Boss('Иван', 'Иванов', 10, 31, 10);
    console.log(boss.name); //выведет 'Иван'
    console.log(boss.surname); //выведет 'Иванов'
    console.log(boss.getFullName); //выведет 'Иванов Иван'
    console.log(boss.rate); //выведет 10
    console.log(boss.days); //выведет 31
    console.log(boss.workers); //выведет 10
    console.log(boss.getSalary()); //выведет 3100 - то есть 10*31*10

Полноценные приложения

TODO - лист

Релизовать TODO-лист. Пример работы тут

Описание: Создаем пустое поле и кнопку для добавления в TODO лист. При нажатии на кнопку добавлем новый элемент задания в общий массив дел. Все задания выводится списком, каждое задание можно перечеркнуть как выполненое или полностью удалить (можно две кнопки вывести)

После того как сделаем функционал как в примере, добавьте возможность массовых действий (добавляем чекбокс рядом с каждым заданием) и если хоть один элемент выбран, то появляется две кнопки: "Сделать выполненным" и "удалить". Соответсвенно мы можем выбрать как один, так и много чекбоксов и все отмеченные удалить или сделать выполненными.

Далее добавить кнопку "Выбрать все", при клике на нее мы проставлем на все элементы, что они выбраны

Добавить кнопку "Очистить выбор" - она снимает все чекбосы (Данныя кнопка становится видна, если хотябы один чекбокс выбран).

Слайдер

пример слайдера

Реализовать полноценный слайдер. Использовать классы для разработки. Слайдер создается следующим кодом:

<div id="slider"></div>    
<script>
const slides = [
    {
        img: 'https://www.w3schools.com/howto/img_nature_wide.jpg',
        text: 'Caption Text 1'
    },
    {
        img: 'https://www.w3schools.com/howto/img_snow_wide.jpg',
        text: 'Caption Text 2'
    },
    {
        img: 'https://www.w3schools.com/howto/img_mountains_wide.jpg',
        text: 'Caption Text 3'
    },
];

new Slider(
    slides, // слайды
    'slider', // id для вставки в html
    {
        loop: true, 
        navs: true,
        pags: true,
        auto: true,
        delay: 3,
    }
);

</script>

Функционал:

  • кнопки далее и назад
  • подпись текста к каждому слайду
  • вывод номера и максимального количества (1/3,2/3,/3/3)
  • пагинация (при клике - переключается на нужный слайд)

Дополнительные параметры:

  • loop - возможность листать слайдер по кругу (например когда на 3 слайде нажимаем далее - переходим на 1). true или false
  • navs - Вывод стрелочек или их отключение. true или false
  • pags - вывод пагинации или отключение. true или false
  • auto - слайдер сам переключается, если delay не указан, раз в 5 сек. А
  • stopMouseHover - если навести мышкой на слайд, он не переключается, как только мышку убрали, снова пошло. Работает только когда auto равен true. true или false
  • delay - время в секундах на показ слайда, если auto true

Задание на джуна

Необходимо разработать приложение с использованием классов для отображения таблицы с данными.

Функционал

  • Сортировка по столбцам: при нажатии на название столбца строки таблицы сортируются по возрастанию, при повторном клике — по убыванию. Графическим элементом или текстовым сообщением указывается направление сортировки.
  • Клиентская пагинация: данные необходимо отображать постранично, максимум 50 элементов на страницу. Необходимо предоставить пользовательскую навигацию для перехода по страницам.
  • Фильтрация: компонент предоставляет текстовое поле, в которое пользователь может ввести текст и строки таблицы, данные которых не содержат подстроку, введённую пользователем, скрываются. Перефильтрация осуществляется по нажатию на кнопку "Найти".
  • По клике на строку таблицы значения полей выводятся в дополнительном блоке под таблицей.
  • Данные в таблицу загружаются с сервера. Способ загрузки с сервера на ваш выбор.
  • Над таблицей присутсвует кнопка добавить, по нажатии на которую выпадает форма добавления ряда +------+------------+-----------------+-----------------+---------------+ | id | firstName | lastName | email | phone | +------+------------+-----------------+-----------------+---------------+ |input | input | input | input | input | +------+------------+-----------------+-----------------+---------------+
  • После заполнения всех инпутов активируется кнопка Добавить в таблицу которая вставляет заполненный ряд в начало таблицы

Для демонстрации работы компонента необходимо сделать простую HTML страницу. Пользователю предлагается выбрать набор данных: маленький или большой. При выборе набора данных он загружается с сервера и по данным строится таблица.

Формат данных от сервера

Сервер возвращает JSON-массив данных. Пример данных:

[
 {
    id: 101,
    firstName: 'Sue',
    lastName: 'Corson',
    email: 'DWhalley@in.gov',
    phone: '(612)211-6296',
    address: {
    	streetAddress: '9792 Mattis Ct',
    	city: 'Waukesha',
    	state: 'WI',
    	zip: '22178'
    },
    description: 'et lacus magna dolor...',
 }
]

Маленький объем данных берется по ссылке http://www.filltext.com/?rows=32&id={number|1000}&firstName={firstName}&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&address={addressObject}&description={lorem|32}

Большой объем данных берется по ссылке http://www.filltext.com/?rows=1000&id={number|1000}&firstName={firstName}&delay=3&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&address={addressObject}&description={lorem|32}

Замечания

  • Особое внимание следует уделить скорости работы. Зависание интерфейса при выполнении операций загрузки данных, фильтрации, сортировки недопустимо.
  • Во время загрузки данных стоит показать какой-то индикатор
  • Использование сторонних библиотек будет плюсом только в случае если это оправданно и вы сможете объяснить причину выбора. Показав свои знания в грамотном применении сторонних готовых решений, вы имеете шанс повысить свою профессиональную привлекательность для нас.
  • Пишите код так, как бы вы его писали в работе — внутренности задания будут оцениваться даже тщательней, чем внешнее соответствие заданию. Код должен быть организован так, чтобы его можно было заново использовать.
  • Помните про обработку ошибок!
  • Верстка может быть самая простая. Визуализацию и украшение делайте на ваш вкус. Мы не против использования Bootstrap или похожего UI фреймворк, но только для UI представления (нельзя использовать JS код для решения задачи, но можно использовать для оформительских эффектов (анимации и тому подобное))!

Схема визуального представления данных

+------+------------+-----------------+-----------------+---------------+
| id ▲ | firstName ▼| lastName      ▼ | email          ▼| phone        ▼|
+------+------------+-----------------+-----------------+---------------+
| 101  | Sue        | Corson          | DWhalley@in.gov | (612)211-6296 |
+------+------------+-----------------+-----------------+---------------+
| 102  | Lor        | Ipsumd          | dwhalley@in.gov | (612)211-6296 |
+------+------------+-----------------+-----------------+---------------+
| 103  | Ips        | Umdolo          | dwhalley@in.gov | (612)211-6296 |
+------+------------+-----------------+-----------------+---------------+

Если выделен пользователем с id = 101, то под таблицей выводим следующую информацию:

Выбран пользователь <b>Sue Corson</b>
Описание:
<textarea>
et lacus magna dolor...
</textarea>
Адрес проживания: <b>9792 Mattis Ct</b>
Город: <b>Waukesha</b>
Провинция/штат: <b>WI</b>
Индекс: <b>22178</b>
Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.