Вопросы к разделу «Введение в JavaScript»

htmlcss-1__section-9.md

Вопросы к разделу «Введение в JavaScript»

Асинхронная загрузка скриптов в шапке (HEAD) или же подключение скриптов в самом конце документа. Что лучше?

Зависит от ситуации. Если в скриптах для работы вам нужен DOM, то нужно подключать в конце страницы, когда к моменту загрузки скриптов DOM гарантировано будет построен. Если нужно просто не блокировать загрузку страницы загрузкой скриптов, то можно в шапку с async атрибутом поместить.

Как верстается и оживляется сложный фильтр с двумя "range" слайдерами?

Через сторонние библиотеки. Реализовывать это самому не имеет никакого смысла. Если кратко о принципе: то получают положение ползунка и считают по пропорции значение.

В описании критерия Д14 указано, что не стоит использовать iframe для подключения интерактивной карты, но в критерии Д18 указано, что такой способ допускается. Кому верить?

Если вы подключаете Google Map с помощью iframe, то Д14 говорит о том, что код Google Map не нужно добавлять в ваш script.js файл. В общем, если вы подключаете с помощью iframe, то ни один критерий вы не нарушаете. Если же вы подключаете карту с помощью API, то код взаимодействия с API должен быть в вашем script.js файле.

Как запустить анимацию в popup.

Оживление popup. Анимация ошибки в глайси. По клику должна запускаться анимация. С помощью js анимации работает как надо, но не поддерживается в ИЕ. C помощью css анимации заработало как надо только после добавления строчки, которой я не понимаю, объясните пожалуйста. Без нее работает только первый клик. submitBtn.addEventListener('click', function() { for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; if (input.value == '') { popupFeedback.classList.remove('err'); popupFeedback.offsetWidth = popupFeedback.offsetWidth; <<< ЧТО ЭТО ЗА ЗВЕРЬ? popupFeedback.classList.add('err'); } } });

Нужно смотреть код, сейчас не понятно, зачем вы ширину перезаписываете.

Читал что "var" устарело на сегодняшний день и рекомендуют использовать "let". Что вы думаете по этому поводу?

Согласен с этим. Но уже написанный код никто переписывать не будет, поэтому нужно понимать, что происходит и как работает var

Пытаюсь реализовать повторную обработку анимации ошибки в форме, если форма заполнена неверно (так, как показано в демонстрации):

if (!modalLoginInput.value || !modalEmailInput.value || !modalTextInput.value) {
    evt.preventDefault();
    writeMessageModal.classList.remove("modal-error");
    writeMessageModal.offsetWidth = writeMessageModal.offsetWidth;
    writeMessageModal.classList.add("modal-error");
  }

При этом все хорошо, форма повторно "трясется". Но если я добавляю подсветку полей формы, то все перестает работать. Не могу понять, почему:

if (!modalLoginInput.value || !modalEmailInput.value || !modalTextInput.value) {
    evt.preventDefault();
    modalLoginInput.setAttribute("required", true);
    modalEmailInput.setAttribute("required", true);
    modalTextInput.setAttribute("required", true);
    writeMessageModal.classList.remove("modal-error");
    writeMessageModal.offsetWidth = writeMessageModal.offsetWidth;
    writeMessageModal.classList.add("modal-error");
  }

Здравствуйте!

https://up.htmlacademy.ru/htmlcss/26/demos/2883#30
"Добавим небольшой хак, чтобы анимация ошибки отрабатывала несколько раз, если форма не валидна."

Объясните плз, что именно сделали, и почему действительно стало срабатывать при каждом нажатии.

сделал, работает.

Но на лекции не говорили по какому принципу работает

form.offsetWidth = form.offsetWidth;

Это строка по сути задает form её же ширину. Визуально ничего не меняется. Но нас интересует "побочный" эффект. Такое задание ширины вызывает насильную перерисовку страницы между удалением и добавлением класса, иначе ленивый браузер увидит 2 строки рядом:

popup.classList.remove("modal-error");
popup.classList.add("modal-error");

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

@thelera @lazyrider

Здравствуйте. Помогите пожалуйста, не могу разобратья

var cart = document.querySelector(".buy-button");
    var popup = document.querySelector(".modal-cart-add");
    var closeForm = document.querySelector(".modal-close");
    cart.addEventListener("click", function (evt) {
      evt.preventDefault();
      popup.classList.add("modal-show");
    }); 

Модальное окно появляется

Тоже самое, но var cart = document.querySelectorAll(".buy-button");
ничего не происходит

querySelectorAll вернет коллекцию кнопок, на коллекцию нельзя повесить обработчик. Нужно вешать его на каждый элемент коллекции (на каждую кнопку). Для этого, например, можно пройтись циклом по коллекции и добавить всему обработчики.

@kashmir1