Frontend's Bible
Публикации цифрового контента. Все что нужно знать Front end разработчику можно здесь найти: 💡Статьи. 💡Решение от разработчиков CodePen. 💡Тестовые и их объяснение. Для связи со мной : @bilanychweb
إظهار المزيدلم يتم تحديد البلدلم يتم تحديد اللغةالفئة غير محددة
745
المشتركون
لا توجد بيانات24 ساعات
لا توجد بيانات7 أيام
لا توجد بيانات30 أيام
- المشتركون
- التغطية البريدية
- ER - نسبة المشاركة
جاري تحميل البيانات...
معدل نمو المشترك
جاري تحميل البيانات...
Все, что есть в HTML, даже комментарии, является частью DOM.
Даже директива
<!DOCTYPE...>, которую мы ставим в начале HTML, тоже является DOM-узлом.
Она находится в дереве DOM прямо перед <html>.
Объект document, представляющий весь документ, формально является DOM-узлом.
Существует 12 типов узлов. Но на практике мы в основном работаем с 4 из них:
document – «входная точка» в DOM.
узлы-элементы – HTML-теги, основные строительные блоки.
текстовые узлы – содержат текст.
комментарии – иногда в них можно включить информацию, которая не будет показана, но доступна в DOM для чтения JS.Автоисправление
Если браузер сталкивается с некорректно написанным HTML-кодом, он автоматически корректирует его при построении DOM.
Например, в начале документа всегда должен быть тег
<html>. Даже если его нет в документе – он будет в дереве DOM, браузер его создаст. То же самое касается и тега <body>.
Например, если HTML-файл состоит из единственного слова "Привет", браузер обернёт его в теги <html> и <body>, добавит необходимый тег .<head>
При генерации DOM браузер самостоятельно обрабатывает ошибки в документе, закрывает теги и так далее.
Есть такой документ с незакрытыми тегами:
<p>Привет
<li>Мама
<li>и
<li>Папа
…Но DOM будет нормальным, потому что браузер сам закроет теги и восстановит отсутствующие деталиDOM-дерево
Основой HTML-документа являются теги.
В соответствии с объектной моделью документа («Document Object Model», коротко DOM), каждый HTML-тег является объектом. Вложенные теги являются «детьми» родительского элемента. Текст, который находится внутри тега, также является объектом.
Все эти объекты доступны при помощи JavaScript, мы можем использовать их для изменения страницы.
Например,
document.body – объект для тега <body>.
Если запустить этот код, то <body> станет красным на 3 секунды:
document.body.style.background = 'red'; // сделать фон красным
setTimeout(() => document.body.style.background = '', 3000); // вернуть назадКороткие условные операторы
В React
Можно вывести через JSX один результат, если условие истинно, и другой, если оно ложно, при этом записав код намного короче, чем через if-else.
Если результат нужно выводить только при истинности условия, можно использовать оператор &&.
#javaScript
Короткие условные операторы
В JavaScript
В JavaScript есть сокращённая форма записи условных операторов if-else — тернарная операция (ternary). В отличие от if-else тернарные операции являются выражениями. Это даёт большую гибкость, позволяя использовать их так же, как и любые другие выражения (такие как ${} в случае с шаблонными строками).
Тернарные операции не всегда лучше оператора if-else. Например при обработке множественных условий первые окажутся неудобочитаемыми.
#javaScript
Синтаксис spread (три точки — …)
В React
Синтаксис spread отлично подходит для динамического создания новых объектов и массивов, зачастую его применяют в React-библиотеках (например Redux) для более предсказуемого изменения данных.
Кроме того, в React такой приём можно использовать, для того чтобы передать данные объекта в виде набора свойств, не обращаясь к ним по очереди: для этого мы можем расширить объект в компонент, поскольку при этом мы получим объект набора свойств.
#javaScript
Синтаксис spread (три точки — …)
В JavaScript
Синтаксис spread позволяет расширять объекты (их пары ключ-значение) и массивы, получая новые объекты. Этот синтаксис работает только при создании нового объекта или массива.
Синтаксис spread хорош для объединения свойств старого объекта в новом. Когда объект или массив расширяется, создавая новый объект или массив, появляется временная копия.
#javaScript
Параметры по умолчанию
В React
Параметры по умолчанию часто применяют при определении свойств. В примере ниже мы используем деструктурирующее присваивание для получения параметра ‘username’ из свойств объекта. И хотя свойство не передано, дефолтное значение установлено на ‘guest’ и компонент всё равно работает.
#javaScript
Параметры по умолчанию
В JavaScript
Параметру по умолчанию пригодятся, чтобы обрабатывать событие, переданное функцией без аргументов. Также они помогут избежать ошибок и сделать код более предсказуемым.
#javaScript
Деструктурирующее присваивание
В React
Чаще всего деструктурирующее присваивание используют, чтобы получить значение одиночного свойства объекта. Если мы передаём в заданный компонент только одно свойство объекта, все остальные нам не нужны. Вместо того чтобы давать ссылку на свойства, мы можем деструктурировать их и передать в компонент одну переменную.
#javaScript
اختر خطة مختلفة
تسمح خطتك الحالية بتحليلات لما لا يزيد عن 5 قنوات. للحصول على المزيد، يُرجى اختيار خطة مختلفة.