Vanilla JS: основы и примеры кода

JavaScript — это язык программирования, созданный для добавления интерактивности и динамической функциональности на веб-страницы. Vanilla JS, также известный как Plain JavaScript, это термин, который обозначает использование чистого JavaScript без использования каких-либо сторонних библиотек или фреймворков. В этом ответе я расскажу о возможностях Vanilla JS и приведу несколько примеров кода.

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

let element = document.getElementById("myElement");
element.innerText = "Новый текст";

Другой распространенный сценарий использования Vanilla JS — обработка событий. Ниже приведен пример привязки обработчика события к кнопке:

let button = document.getElementById("myButton");
button.addEventListener("click", function() {
  console.log("Кнопка была нажата");
});

Vanilla JS также предоставляет возможность работы с данными. Например, чтобы отправить запрос на сервер и обработать полученные данные, можно использовать объект XMLHttpRequest:

let xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    let response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
xhr.send();

Для работы с коллекциями элементов DOM, такими как массивы или NodeList, Vanilla JS предлагает цикл forEach:

let elements = document.getElementsByClassName("myElements");
Array.prototype.forEach.call(elements, function(element) {
  console.log(element.textContent);
});

Это только несколько примеров использования Vanilla JS. Он также предоставляет множество других возможностей, включая создание и удаление элементов, анимацию, валидацию данных и многое другое. Основная идея Vanilla JS — использовать только чистый JavaScript без лишних слоев абстракции, чтобы иметь полный контроль над кодом и максимальную гибкость.

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