Этот челлендж поможет прокачать навыки в JavaScript разработчикам любого уровня. Задачи расположены по возрастанию сложности, так что каждый найдет для себя подходящее. Решайте задания и делитесь результатами для обратной связи.
1. Переменные и типы данных
Напишите функцию greet(name), которая принимает имя и возвращает строку:
"Привет, [Имя]!"
console.log(greet("Иван")); // Привет, Иван!
2. Массивы и циклы
Дан массив чисел. Напишите функцию sumArray(arr), которая возвращает сумму всех чисел массива.
console.log(sumArray([1, 2, 3, 4])); // 10
3. Объекты
Создайте объект user с полями name, age и методом introduce, который возвращает строку:
"Привет, меня зовут [Имя], мне [Возраст] лет!"
const user = { name: "Иван", age: 30, introduce() { /* код */ } };
console.log(user.introduce()); // Привет, меня зовут Иван, мне 30 лет!
4. Функции высшего порядка
Напишите функцию filterArray(arr, callback), которая принимает массив и функцию-условие, возвращает новый массив с элементами, которые прошли условие.
console.log(filterArray([1, 2, 3, 4], (num) => num % 2 === 0)); // [2, 4]
5. Замыкания
Напишите функцию createCounter(start), которая возвращает объект с методами:
- increment(): увеличивает значение на 1;
- decrement(): уменьшает значение на 1;
- value(): возвращает текущее значение.
const counter = createCounter(5);
counter.increment();
console.log(counter.value()); // 6
counter.decrement();
console.log(counter.value()); // 5
6. Работа с DOM
Создайте страницу с кнопкой "Нажми меня". Напишите скрипт, который увеличивает счетчик кликов и отображает его на кнопке.
<button id="counter">Нажми меня</button>
<script>
// код
</script>
7. Асинхронное программирование
Напишите функцию fetchData(url), которая делает запрос на указанный URL и возвращает данные. Используйте fetch.
fetchData("https://jsonplaceholder.typicode.com/todos/1").then(console.log);
8. Работа с API
Напишите функцию getPosts(), которая запрашивает список постов с того же API и выводит их на страницу в виде списка.
<ul id="posts"></ul>
<script>
// код
</script>
9. TypeScript
Напишите универсальную функцию fetchData<T>(url: string): Promise<T>, которая делает запрос на указанный URL и возвращает данные с типизацией через дженерик.
- Получение списка постов:
fetchData<Post[]>("https://jsonplaceholder.typicode.com/posts").then(console.log);
- Получение списка пользователей:
fetchData<User[]>("https://jsonplaceholder.typicode.com/users").then(console.log);