Сравнение JS и JQuery

JavaScript (JS) и jQuery – это две популярные технологии для создания интерактивных веб-сайтов. Но как они отличаются друг от друга и какой из них лучше использовать для определенных задач? Рассмотрим их отличия и сходства.

JavaScript
JavaScript – это язык программирования, используемый для создания интерактивного поведения на веб-страницах. Он обеспечивает динамический контент и манипуляции с DOM элементами.
Пример простой функции на JS:

function showMessage() {
 alert('Hello World!');
}

В этом примере мы создали функцию, которая вызывает всплывающее окно с сообщением “Hello World!”.
JS позволяет манипулировать DOM элементами, изменять стилевые свойства и взаимодействовать с событиями, такими как клики и прокрутки.
Пример изменения стилевого свойства на JS:
let element = document.getElementById('myElement');
element.style.color = 'red';
Здесь мы выбрали элемент с идентификатором “myElement” и изменили его цвет текста на красный.

jQuery
jQuery – это библиотека JavaScript, которая предоставляет простой способ манипулирования с DOM элементами, обработки событий и создания анимаций. Она упрощает написание кода и ускоряет разработку веб-сайтов.
Пример простой функции на jQuery:

$('#myButton').click(function() {
 alert('Hello World!');
});

В этом примере мы выбрали элемент с идентификатором “myButton” и привязали к нему функцию, которая вызывает всплывающее окно с сообщением “Hello World!” при клике на кнопке.
jQuery предоставляет дополнительные функции для работы с анимацией, AJAX и браузерным событиями. Она имеет множество плагинов и расширений для различных задач, таких как валидация форм и создание слайдеров.
Пример изменения стилевого свойства на jQuery:
$('#myElement').css('color', 'red');
Здесь мы выбрали элемент с идентификатором “myElement” и изменили его цвет текста на красный, используя метод .css() jQuery.

Сравнение
Одной из основных различий между JS и jQuery является уровень сложности и синтаксиса. JS может быть сло...

Для чего используют событие load? Есть ли у этого события недостатки? Знаете ли вы какие-либо альтернативы и в каких случаях бы стали их использовать?

Событие load происходит в конце процесса загрузки документа. На этом этапе все объекты в документе находятся в DOM, и все изображения, скрипты и ссылки загрузились.

Событие DOM DOMContentLoaded будет запущено после создание DOM для страницы, но не будет ждать окончания загрузки других ресурсов. Оно предпочтительно в тех случаях, когда вам не нужно загружать страницу целиком перед инициализацией.

#вопросы_по_javascript

Перечислите все виды списков, которые можно использовать для создания веб-страниц

В HTML есть 3 вида списков:
- Упорядоченный список: отображает элементы в пронумерованном формате. В тег обозначает упорядоченный список
- Неупорядоченный список: отображает элементы в маркированном формате. В тег обозначает неупорядоченный список
- Список определений: отображает элементы в форме определения, подобной словарю. В , а также теги обозначают список определений.

#вопросы_по_html

Объясните, почему это не является IIFE: function foo(){ }();

В этом примере будет выведено исключение SyntaxError, в данном случае это объявление функции и скобки в конце не будут отнесены к функции, так как они играют роль оператора группировки. Такие скобки не могут быть пустыми, поэтому будет выброшено исключение. Для того чтобы переделать этот пример под немедленно вызываемую функцию - нужно обернуть функциональное выражение в скобки и удалить именование функции.

#вопросы_по_javascript

Какие вы знаете методы запрета обтекания (clearing) и в каких случаях они применяются?

Clear устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.

Значения:
none - отменяет действие свойства clear, при этом обтекание элемента происходит, как задано с помощью свойства float или других настроек.
both - отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется снять обтекание элемента, но неизвестно точно, с какой стороны.
left - отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.
right - отменяет обтекание с правой стороны элемента.
inherit - устанавливает значение родителя.

#вопросы_по_css

Что такое элемент холста в HTML5?

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

#вопросы_по_html

Что такое замыкание и как/для чего его используют?

Если одна функция определена внутри другой, то внутренняя имеет доступ к ОВ внешней. Это называется замыканием (а также "лексической ОВ" или "статическая".
При выполнении функции используется та область видимости переменных, которая существовала на момент объявления этой функции. Это лексическая область видимости.

#вопросы_по_javascript

В чём разница между строчным и блочно-строчным элементом?

block
- Начинается с новой строки родительского элемента и занимает всю строку.
- Можно задавать ширину и высоту.
- Можно выровнять с помощью vertical-align.
- Margins и paddings работают со всех сторон.

inline-block
- Размер зависит от контента.
- Можно задавать ширину и высоту.
- Можно выровнять с помощью vertical-align.
- Margins и paddings работают со всех сторон.

inline
- Размер зависит от контента.
- Ширину и высоту задавать нельзя.
- Можно выровнять только по горизонтали. Место, которое занимает элемент по вертикали, зависит от line-height.
- Ведёт себя как блочный элемент, если задать вертикальные margins и paddings.

#вопросы_по_css

Перечислите все виды списков, которые можно использовать для создания веб-страниц

В HTML есть 3 вида списков:
- Упорядоченный список: отображает элементы в пронумерованном формате. В тег обозначает упорядоченный список
- Неупорядоченный список: отображает элементы в маркированном формате. В тег обозначает неупорядоченный список
- Список определений: отображает элементы в форме определения, подобной словарю. В , а также теги обозначают список определений.

#вопросы_по_html

В чем разница между .call и .apply?

Сходство заключается в том, что и .call, и .apply используются для вызова функций, а также первый параметр будет использоваться как значение this внутри функции. А разница в том, что .call в качестве слудующих аргументов принимает аргументы, разделенные запятыми, в то время как .apply в качестве следующих аргументов принимает массив аргументов.

function add(a, b) {
return a + b;
}
console.log(add.call(null, 1, 2)); // 3
console.log(add.apply(null, [1, 2])); // 3

#вопросы_по_javascript

На что нужно обратить внимание при написании эффективного CSS?

Для написания эффективного CSS должна быть система. БЭМ, RSCSS, OOCSS - кому что больше подходит. Самая популярная методология - БЭМ. У каждого элемента уникальный класс, все элементы имеют одинаковую специфичность. Код можно переиспользовать.

#вопросы_по_css

Специфичность CSS-селекторов

- тег и псевдоэлемент имеют специфичность 0001
- класс, псевдокласс, атрибут - 0010
- id имеет специфичность 0100
- инлайновый стиль имеет приоритет 1000

#вопросы_по_css

Какую функцию выполняет тег figure в HTML5?

Тег рисунка используется для вставки изображений или фотографий или групп диаграмм со встроенным содержимым.

#вопросы_по_html

Объясните, почему это не является IIFE: function foo(){ }();

В этом примере будет выведено исключение SyntaxError, в данном случае это объявление функции и скобки в конце не будут отнесены к функции, так как они играют роль оператора группировки. Такие скобки не могут быть пустыми, поэтому будет выброшено исключение. Для того чтобы переделать этот пример под немедленно вызываемую функцию - нужно обернуть функциональное выражение в скобки и удалить именование функции.

#вопросы_по_javascript

В чем разница между «сбросом» и «нормализацией» CSS? Что бы вы выбрали и почему?

Сброс (reset) сбрасывает все стили элементов.
Normalize приводит стили к единому виду во всех браузерах.
Лучше выбирать Normalize из-за кроссбраузерности.

#вопросы_по_css

Расскажите про тег DIV?

DIV - это контейнер или область, которая обычно используется для размещения элемента или группы элементов. DIV в основном используется для выделения области или блока текста на веб-странице TML, чтобы можно было применить к ним стили. Тег DIV также является альтернативой тегу Paragraph p, поскольку он создает логическое разделение документа HTML.

#вопросы_по_html

Дайте определение функции высшего порядка.

Функция высшего порядка — это любая функция, которая принимает одну или несколько функций в качестве аргументов, которые она использует для работы с данными, и/или возвращает функцию в качестве результата. Классическим примером является метод map, который принимает массив и функцию в качестве аргументов. Затем map использует эту функцию для преобразования каждого элемента в массиве, возвращая новый массив с преобразованными данными. Другими популярными примерами в JS являются forEach, filter и reduce.

#вопросы_по_javascript

Какие новые псевдоклассы добавлены в CSS3?

(1) elem: nth-child (n) выбирает n-й дочерний элемент под родительским элементом, и метка этого дочернего элемента - elem, n может принимать определенные значения или функции.
(2) elem: nth-last-child (n) выполняет ту же функцию, что и выше, но выполняет поиск сзади.
(3) elem: last-child выбирает последний дочерний элемент.
(4) elem: only-child Если elem является единственным дочерним элементом родительского элемента, выберите его.
(5) elem: nth-of-type (n) Выберите элемент n-го типа под родительским элементом. N может принимать определенные значения или функции.
(6) elem: first-of-type выбирает первый элемент типа elem под родительским элементом.
(7) elem: last-of-type выбирает последний элемент типа elem под родительским элементом.

#вопросы_по_css

Что такое кэш приложения в HTML5?

Одной из наиболее востребованных функций для конечного пользователя является работа в автономном режиме. Другими словами, если соединение с интернетом недоступно, страница должна возвращаться из кэша браузера, и кэш приложения поможет вам в этом.

Кэш приложения помогает вам определить, какие файлы должны быть кэшированы, а какие нет.

#вопросы_по_html

Что такое замыкание и как/для чего его используют?

Если одна функция определена внутри другой, то внутренняя имеет доступ к ОВ внешней. Это называется замыканием (а также "лексической ОВ" или "статическая".
При выполнении функции используется та область видимости переменных, которая существовала на момент объявления этой функции. Это лексическая область видимости.

#вопросы_по_javascript

Какими способами можно визуально скрыть элемент (оставив его доступным только для скринридера) ?

- visibility: hidden
- width: 0px; height: 0px;

#вопросы_по_css