🔥Что будет на выходе?

Ответ: undefined

JavaScript test | ChatGPT

Манипуляция с элементами страницы: создание, удаление и изменение HTML-элементов

Манипуляция с элементами страницы - это важная часть разработки веб-приложений, которая позволяет создавать, удалять и изменять HTML-элементы динамически с помощью JavaScript. Это особенно полезно при обновлении содержимого страницы без перезагрузки.

В данном примере мы создаем новый элемент div с текстом "Новый элемент" и классом "my-class". Затем мы добавляем этот элемент в конец body документа с помощью метода appendChild(). Мы также изменяем содержимое элемента с помощью свойства textContent и стилизуем его, устанавливая значение свойства backgroundColor.

Через 3 секунды мы удаляем элемент с помощью метода remove(). Это демонстрирует возможность удаления элементов из документа.

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

JavaScript test | ChatGPT

Асинхронные запросы с использованием fetch()

fetch() используется для отправки асинхронных HTTP-запросов. В примере мы отправляем запрос к удаленному серверу, ожидаем ответ в формате JSON и выводим данные или обрабатываем ошибку.

JavaScript test | ChatGPT

Интерактивные графики и визуализации с использованием библиотеки D3.js

Библиотека D3.js широко используется для создания интерактивных графиков и визуализаций на веб-страницах.

JavaScript test | ChatGPT

Рекурсия и оптимизация рекурсивных функций

В первой части кода есть простая рекурсивная функция factorial, которая вычисляет факториал числа n. Она вызывает себя с аргументом n - 1, пока n не станет меньше или равно 1.

Во второй части кода представлена оптимизированная версия функции factorialMemoized, которая использует мемоизацию. Мемоизация - это техника, при которой результаты предыдущих вызовов функции сохраняются в памяти и возвращаются в случае повторного вызова с теми же аргументами. В данном случае, мы используем объект memo для хранения результатов предыдущих вызовов factorialMemoized. Если результат уже вычислен для конкретного n, мы возвращаем его из memo, иначе вычисляем и сохраняем в memo.

Таким образом, оптимизированная версия factorialMemoized более эффективна при вычислении факториала для больших чисел, так как избегает переполнения стека вызовов, и вычисляет результаты только один раз для каждого n.

JavaScript test | ChatGPT

Статические методы

Статические методы класса MathUtils могут быть вызваны без создания экземпляра класса.

JavaScript test | ChatGPT

Сортировка массивов объектов

В примере мы создаем массив объектов products, содержащий информацию о различных продуктах. Затем мы используем метод sort() для сортировки этого массива по полю price в порядке возрастания, используя функцию sortByPriceAscending в качестве функции сравнения. Вы можете создать аналогичные функции для сортировки в порядке убывания или для сортировки по другим полям объектов.

JavaScript test | ChatGPT

❓Что будет на выходе?

Ответ: false

JavaScript test | ChatGPT

Генерация случайных чисел

В примере мы используем Math.random() для получения случайной десятичной дроби между 0 и 1. Затем мы масштабируем и округляем эту дробь, чтобы получить случайное целое число в заданном диапазоне (включая минимальное и максимальное значение).

JavaScript test | ChatGPT

Использование конструктора родительского класса

Ключевое слово super используется для вызова конструктора родительского класса.

JavaScript test | ChatGPT

Работа с обещаниями (Promises)

В примере мы создаем функцию fetchData, которая возвращает обещание (Promise) с задержкой. Затем мы используем методы .then() для обработки успешного выполнения и .catch() для обработки ошибок. Это позволяет более чисто и структурированно работать с асинхронными операциями, такими как загрузка данных с сервера.

JavaScript test | ChatGPT

Преобразовать любое значение в Boolean

Это будет особенно полезно, если вы не хотите послать в бэкенд значение null или undefined.

let number1;
console.log(!!number1); // false
const number2 = 10;
console.log(!!number2); // true
const name1 = 'Tim';
console.log(!!name1); // true
const name2 = '';
console.log(!!name2); // false
const nullValue = null;
console.log(!!nullValue); // false

JavaScript test | ChatGPT

Вывести JSON в отформатированном виде

const book = {"date": "2019–03–22","book": "Harry potter","author": "J.K.Rowling"};
console.log(JSON.stringify(book, null, 2)) // разделение - 2 пробела

const book = {"date": "2019–03–22","book": "Harry potter","author": "J.K.Rowling"};
console.log(JSON.stringify(book, null, '\t')) // разделение - tab

JavaScript test | ChatGPT

Сгенерировать случайное число в определённом диапазоне

Случайное число от 0 до 100:

Math.floor(Math.random() * 100)

Случайное число от 1 до 100:

Math.floor(Math.random() * 100) + 1

Случайное число между минимальным (включительно) и максимальным значением (не включая):

function getRandom(min, max) { 
  return Math.floor(Math.random() * (max - min) ) + min;
}
console.log(getRandom(10, 35)); // случайное число в диапазоне >= 10 и < 35

Случайное число между и максимальным значением (включая оба значения):

function getRandom(min, max) { 
  return Math.floor(Math.random() * (max - min + 1) ) + min;
}
console.log(getRandom(10, 35)); // случайное число в диапазоне >= 10 и <= 35

JavaScript test | ChatGPT

Метод Object.getOwnPropertyDescriptor()

Метод Object.getOwnPropertyDescriptor() в JavaScript используется для получения дескриптора свойства объекта. Дескриптор свойства представляет собой объект, содержащий информацию о свойстве, такую как его значение, наличие флагов доступности, возможность изменения и другие характеристики.

В примере у нас есть объект user с двумя свойствами: name и age. Мы применяем метод Object.getOwnPropertyDescriptor(), передавая ему объект user и имя свойства "name". Результатом будет объект descriptor, содержащий информацию о свойстве "name".

JavaScript test | ChatGPT

dblclick

Событие двойного клика на HTML-элементе происходит, когда пользователь в течение короткого времени дважды кликает один элемент. Временной промежуток между кликами должен быть небольшим, иначе браузер интерпретирует его не как dblclick, а как несколько отдельных click событий.

JavaScript test | ChatGPT

offsetParent, offsetLeft/Top

Эти свойства редко используются, но так как они являются «самыми внешними» метриками, мы начнём с них.

В свойстве offsetParent находится предок элемента, который используется внутри браузера для вычисления координат при рендеринге.

То есть, ближайший предок, который удовлетворяет следующим условиям:
- Является CSS-позиционированным (CSS-свойство position равно absolute, relative, fixed или sticky),
- или <td>, <th>, <table>,
- или <body>.

Свойства offsetLeft/offsetTop содержат координаты x/y относительно верхнего левого угла offsetParent.

В примере выше внутренний <div> имеет элемент <main> в качестве offsetParent, а свойства offsetLeft/offsetTop являются сдвигами относительно верхнего левого угла (180).

JavaScript test | ChatGPT

🔥Что будет на выходе?

Ответ: 0

JavaScript test | ChatGPT

console.log('Start');

setTimeout(() => {
  console.log('Timeout 1');
  Promise.resolve().then(() => console.log('Promise 1'));
}, 0);

Promise.resolve().then(() => {
  console.log('Promise 2');
  setTimeout(() => console.log('Timeout 2'), 0);
});

console.log('End');

❓Что будет на выходе?

Ответ: "Start" "End" "Promise 2" "Timeout 1" "Promise 1" "Timeout 2"

JavaScript test | ChatGPT

🔥Что будет на выходе?

console.log('Start');

setTimeout(() => console.log('Timeout 1'), 0);

setTimeout(() => console.log('Timeout 2'), 0);

console.log('End');

Ответ: "Start" "End" "Timeout 1" "Timeout 2"

JavaScript test | ChatGPT