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

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

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

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

❓ Все мечтаете начать осваивать программирование?
⏰ Приходите на вебинар 22 августа в 20:00 (мск).
Который пройдет в рамках старта курса «Fullstack developer» от OTUS.

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

👉Тема: Как освоить программирование с нуля и стать востребованным Фулстак-разработчиком на JS.

На занятии вы узнаете:
— из чего состоит курс: структура, начиная с основ JavaScript и заканчивая продвинутыми конструкциями Node.js, HTML5, CSS3 и ReactJS;
— как проходит обучение;- как успешно трудоустроиться после курса;
— о ресурсах, доступных для поддержки учебного процесса.

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

👉 Для участия и получения записи зарегистрируйтесь на сайте https://otus.pw/XvbX/

Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН

Что такое распространение события (Event Propagation)?

Когда какое-либо событие происходит в элементе DOM, оно на самом деле происходит не только в нем. Событие «распространяется» от объекта Window до вызвавшего его элемента (event.target). При этом событие последовательно пронизывает (затрагивает) всех предков целевого элемента. Распространение события имеет три стадии или фазы:

1. Фаза погружения (захвата, перехвата) — событие возникает в объекте Window и опускается до цели события через всех ее предков.
2. Целевая фаза — это когда событие достигает целевого элемента.
3. Фаза всплытия — событие поднимается от event.target, последовательно проходит через всех его предков и достигает объекта Window.

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

Что такое API?

Это один из самых часто задаваемых вопросов, ответ на который должен знать каждый HTML верстальщик. API — это “Application Programming Interface” или “Программный Интерфейс Приложения”. Эти интерфейсы используют для создания веб-приложений. API используют уже существующие инструменты и компоненты, поэтому позволяют разработчикам напрямую интегрировать их в свои сайты.

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

Как вы реализуете макет, который использует нестандартные шрифты?

Буду подключать шрифты с помощью @font-face для каждого font-weight.

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

Все айтишники круто зарабатывают... Это утверждение с каждым годом все дальше от правды.

Реальность 2023 такова, что айтишников стало много, конкуренция растет, работодатели диктуют свои условия и повышают требования.

Кто-то из разработчиков безуспешно пытается пробить потолок в 200-300 тысяч, совершая одни и те же ошибки, а многие в 2023 остались не у дел и вообще не могут найти достойную работу. И это касается не только России.

Алексей Доронин — тимлид и айтишник с десятилетним стажем — на своем канале помогает разработчикам находить работу и повышать доходы за счет простых и понятных инструментов.

🔝 Держите топ полезных материалов с канала:

✔️Как подготовиться к собеседованию в IT
✔️Как повысить зарплату на текущем месте работы
✔️Как стать тим-лидом
✔️Что делать с IT-ипотекой
✔️Как правильно получать и что потом делать с фитбеком после неудачного собеса
✔️Как выделиться в большой команде разработчиков
✔️Каверзные вопросы на собеседованиях с и как на них отвечать
✔️Кого и как нанимать на свои проекты

И бонус для подписчиков — бесплатный и очень подробный гайд «Как составить идеальное резюме разработчика» (забирай в закрепах канала) 🎁

+ Каждый месяц — разборы резюме айтишников и консультации по трудоустройству для подписчиков.

Подписывайся и пользуйся!

Что такое распространение события (Event Propagation)?

Когда какое-либо событие происходит в элементе DOM, оно на самом деле происходит не только в нем. Событие «распространяется» от объекта Window до вызвавшего его элемента (event.target). При этом событие последовательно пронизывает (затрагивает) всех предков целевого элемента. Распространение события имеет три стадии или фазы:

1. Фаза погружения (захвата, перехвата) — событие возникает в объекте Window и опускается до цели события через всех ее предков.
2. Целевая фаза — это когда событие достигает целевого элемента.
3. Фаза всплытия — событие поднимается от event.target, последовательно проходит через всех его предков и достигает объекта Window.

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

Почему принято размещать <link> со стилями внутри <head>, а <script> перед закрывающим тегом </body>? Когда можно нарушить это правило?


Когда мы размещаем стили внутри тега <head>, браузер понимает как и с какими стилями отрисовывать контент при первом рендере. То есть, чтобы отобразить страницу, браузеру нужно знать какой контент нарисовать (HTML) и как должны выглядеть элементы (CSS). Если браузер не получит CSS заранее, то HTML-элементы сначала отобразятся со стилями по умолчанию, а после загрузки CSS применяться новые стили. Это вызовет мигание контента. Добавление тега <link> co стилями в начало документа предотвращает повторную перерисовку.

Тег <script> обычно идёт перед закрывающимся тегом </body>. Это даёт уверенность, что элементы, к которым идёт обращение в скрипте, существуют на странице.

Мы можем размещать скрипт в <head>, если он должен выполнится первым и не полагается на то, существует ли элемент на странице. Или если добавляем атрибуты async или defer к тегу <script>. Про их отличия можно почитать подробнее в доке про <script>.

defer сообщает браузеру, что скрипт нужно загружать в фоновом режиме и запустить его, как только DOM-дерево будет полностью построено.

Ещё один способ — указать атрибут <script type="module">, который говорит браузеру, что скрипт нужно запустить как модульный. Модульные скрипты по дефолту являются отложенными, то есть <script type="module" defer> равносильно <script type="module">, и указание defer не будет иметь никакого эффекта.

Одним из первых плагинов, которые появлялись в новых фреймворках в ранние дни JavaScript-фреймворков, был плагин для плейсхолдеров. Именно поэтому мы были так рады, когда HTML5 принес нам атрибут placeholder. Затем любители CSS, такие как я, были в восторге, когда спецификация CSS позволила нам стилизовать плейсхолдеры.

Недавно я столкнулся с проблемой: мне нужно было применить определенный font-family к элементу <input>, но только когда этот элемент содержит текст. Сначала я думал о необходимости установки font-family для <input>, а затем повторной применении font-family тега body к ::placeholder, но это не казалось идеальным решением - это скорее затраты на поддержку.

Псевдокласс :placeholder-shown позволяет выбрать плейсхолдер элемента <input> только когда он отображается, и таким образом, я мог выбрать только плейсхолдер, но не текст ввода:

/* Применение стиля к input применяется и к тексту ввода, и к плейсхолдеру */
input { color: red; }

/* Применение стиля только к плейсхолдеру */
input::placeholder { color: blue; }

/* Применение стиля к input, когда отображается плейсхолдер */
input:placeholder-shown { color: yellow; }

/* Применение стиля к input, но не к плейсхолдеру */
input:not(:placeholder-shown) { color: green; }

:placeholder-shown - это потрясающий псевдо-селектор, который можно использовать для более эффективного стилизирования плейсхолдеров и их элементов в зависимости от состояния. Творчество - это не только термин в области дизайна, это еще и способ мышления для разработчиков, чтобы решать интересные проблемы!

Привет, друзья! Что такое JavaScript на самом деле?

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

Одно из главных преимуществ JavaScript заключается в том, что он выполняется непосредственно в браузере, без необходимости дополнительных установок или плагинов. Это позволяет создавать программы и скрипты, которые работают намного быстрее, чем, например, программы, написанные на Java или C++.

Но зачем же нужен JavaScript? Ответ очень прост: он позволяет сделать веб-сайты активными и живыми. Без него веб-страницы были бы просто набором статических текстов и изображений. С помощью JavaScript мы можем создавать кнопки, выпадающие меню, формы для отправки данных, слайдеры и многое другое.

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

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

Еще одна важная черта JavaScript - это его расширяемость. Существует огромное количество библиотек и фреймворков, которые позволяют разработчикам упростить и ускорить процесс создания веб-приложений. Некоторые из самых популярных библиотек включают в себя такие инструменты, как jQuery, React, Angular и Vue.js.

Не следует забывать и о том, что JavaScript обладает также своими особенностями и нюансами. Например, он является нестрогим языком, что означает, что он не требует строгого определения типов данных. Более того, его интепретируемость иногда может приводить к некоторым проблемам с безопасностью, поэтому важно быть внимательными и аккуратными при написании JavaScript-кода.

В завершении хочу сказать, что JavaScript - это не только язык программирования, но и настоящая искусство. Знание JavaScript открывает перед нами целый мир возможностей и позволяет воплотить наши самые смелые идеи в жизнь на страницах интернета. И помните, что при работе с JavaScript главное - не бояться экспериментировать и

Основные концепции и термины JavaScript

JavaScript – это один из самых популярных и широко используемых языков программирования в мире. Он применяется для создания интерактивных веб-сайтов, веб-приложений и множества других задач. Понимание основных концепций и терминов JavaScript является неотъемлемой частью обучения этому языку. В этой статье мы рассмотрим некоторые из ключевых концепций и терминов, которые помогут вам освоить JavaScript.

1. Переменные (Variables)
Переменные в JavaScript используются для хранения данных. Они могут содержать числа, строки, объекты и другие типы данных. Для объявления переменных используются ключевые слова var, let и const. Например:
var name = "John"; let age = 30; const PI = 3.1415;

2. Типы данных (Data Types)
JavaScript поддерживает различные типы данных, такие как строка (string), число (number), булево значение (boolean), массив (array), объект (object) и многие другие. Определение типа данных переменной можно с помощью оператора typeof. Например:
typeof "Hello" // "string" typeof 42 // "number" typeof true // "boolean"

3. Операторы (Operators)
Операторы в JavaScript позволяют выполнять различные операции над данными. Например, арифметические операторы для выполнения математических операций, операторы сравнения для сравнения значений, и логические операторы для работы с булевыми значениями.
let x = 10; let y = 5; let sum = x + y; // Сложение let isGreaterThan = x > y; // Сравнение let isTrue = true && false; // Логическое И
4. Условные операторы (Conditional Statements)
Условные операторы позволяют выполнять различные блоки кода в зависимости от условий. Самый распространенный из них – это оператор if, который выполняет код, если условие истинно.
if (age >= 18) { console.log("Вы совершеннолетний"); } else { console.log("Вы несовершеннолетний"); }
5. Циклы (Loops)
Циклы в JavaScript используются для выполнения одного и того же кода несколько раз. Наиболее часто используемый цикл – это for, который выполняет код определенное количество раз.
for (let i = 0; i < 5; i++) { console.log("Итерация номер " + i); }
6. Функции (Functions)
Функции представляют собой блоки кода, которые можно вызывать многократно. Они позволяют

Наш задачник для Frontend-разработчиков - подписывайся и решай задачи)

К каждой задаче выкладываем решение с объяснениями))

Я тут учебник начал делать в блоге - вдруг кому то что то понадобится - залетайте)

За косяки по верстке не ругайте - времени нет - позже сделаю топ)

Учебник - https://developerhouse.ru/uchebnik-po-js/

Один из наиболее популярных вопросов на собеседовании по JavaScript - "Что такое замыкание (closure) и как оно работает?"

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

Пример:

function outerFunction() {
  var outerVariable = "I'm outside!";

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

var innerFunctionRef = outerFunction();
innerFunctionRef();
// Outputs: "I'm outside!"

В приведенном выше примере, внутренняя функция innerFunction доступна к переменной outerVariable, которая была объявлена внутри родительской функции outerFunction. outerFunction возвращает innerFunction, и мы сохраняем его в переменной innerFunctionRef. Когда мы вызываем innerFunctionRef(), она выводит сообщение "I'm outside!", потому что она имеет доступ к outerVariable благодаря замыканию.

Знание замыканий важно для понимания некоторых шаблонов проектирования JavaScript, таких как модульность и создание переиспользуемых компонентов.

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

Это зависит от среды выполнения JavaScript. На клиенте (в среде браузера), пока переменные/функции объявлены в глобальной области видимости (window), все скрипты могут на них ссылаться. В качестве альтернативы, используйте Asynchronous Module Definition (AMD) через RequireJS для модульного подхода.

На сервере (Node.js) обычно используется CommonJS. Каждый файл считается модулем, и он может экспортировать переменные и функции, добавляя их к объекту module.exports.

ES2015 позволяет использовать модульный синтаксис, который призван заменить как AMD, так и CommonJS. В конечном итоге он будет поддерживаться как в браузере, так и в Node.

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

Что такое декораторы и к чему их можно применить?

Декоратор - это особый вид объявления, который позволяет вам изменять классы или члены классов сразу, помечая их аннотацией name. Каждый декоратор должен ссылаться на функцию, которая будет оцениваться во время выполнения.

Например, декоратор @sealed будет соответствовать запечатанной функции. Все, что помечено @sealed, будет использоваться для оценки запечатанной функции.

Их можно прикрепить к:
- Объявлениям классов
- Методам
- Свойствам-аксессорам
- Свойствам
- Параметрам

По умолчанию декораторы не включены. Чтобы включить их, вы должны отредактировать поле experimentalDecorators в параметрах компилятора в файле tsconfig.json или в командной строке.

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

Что такое декораторы и к чему их можно применить?

Декоратор - это особый вид объявления, который позволяет вам изменять классы или члены классов сразу, помечая их аннотацией name. Каждый декоратор должен ссылаться на функцию, которая будет оцениваться во время выполнения.

Например, декоратор @sealed будет соответствовать запечатанной функции. Все, что помечено @sealed, будет использоваться для оценки запечатанной функции.

Их можно прикрепить к:
- Объявлениям классов
- Методам
- Свойствам-аксессорам
- Свойствам
- Параметрам

По умолчанию декораторы не включены. Чтобы включить их, вы должны отредактировать поле experimentalDecorators в параметрах компилятора в файле tsconfig.json или в командной строке.

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

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

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

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

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

Что такое React Reconciliation (Cверка) и как он работает?

Reconciliation (Cверка) - это процесс, посредством которого React обновляет DOM. Когда состояние компонента изменяется, React должен рассчитать необходимость обновления DOM. Это делается путем создания виртуального DOM и сравнения его с текущим DOM. В этом контексте виртуальный DOM будет содержать новое состояние компонента.

При сравнении двух деревьев первым делом React сравнивает два корневых элемента. Поведение различается в зависимости от типов корневых элементов.

Всякий раз, когда корневые элементы имеют различные типы, React уничтожает старое дерево и строит новое с нуля.

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

Одним из первых плагинов, которые появлялись в новых фреймворках в ранние дни JavaScript-фреймворков, был плагин для плейсхолдеров. Именно поэтому мы были так рады, когда HTML5 принес нам атрибут placeholder. Затем любители CSS, такие как я, были в восторге, когда спецификация CSS позволила нам стилизовать плейсхолдеры.

Недавно я столкнулся с проблемой: мне нужно было применить определенный font-family к элементу <input>, но только когда этот элемент содержит текст. Сначала я думал о необходимости установки font-family для <input>, а затем повторной применении font-family тега body к ::placeholder, но это не казалось идеальным решением - это скорее затраты на поддержку.

Псевдокласс :placeholder-shown позволяет выбрать плейсхолдер элемента <input> только когда он отображается, и таким образом, я мог выбрать только плейсхолдер, но не текст ввода:

/* Применение стиля к input применяется и к тексту ввода, и к плейсхолдеру */
input { color: red; }

/* Применение стиля только к плейсхолдеру */
input::placeholder { color: blue; }

/* Применение стиля к input, когда отображается плейсхолдер */
input:placeholder-shown { color: yellow; }

/* Применение стиля к input, но не к плейсхолдеру */
input:not(:placeholder-shown) { color: green; }

:placeholder-shown - это потрясающий псевдо-селектор, который можно использовать для более эффективного стилизирования плейсхолдеров и их элементов в зависимости от состояния. Творчество - это не только термин в области дизайна, это еще и способ мышления для разработчиков, чтобы решать интересные проблемы!

Введение в React: что за фреймворк и с чем его едят

React – это JavaScript-библиотека для создания пользовательских интерфейсов. Он был создан Facebook в 2011 году, и быстро стал одним из наиболее популярных инструментов для разработки веб-приложений. На сегодняшний день React используется многими объектами социальной сети Facebook, а также такими компаниями, как Airbnb, Uber и Netflix.
React работает с помощью компонентов – это модули, которые объединяют логику, стиль и разметку. Каждый компонент может иметь некоторое состояние и методы жизненного цикла, что позволяет ему реагировать на изменения и обновления.
React использует виртуальный DOM – внутреннюю копию реального DOM (дерева элементов веб-страницы). Когда происходит обновление компонента, React создает новый виртуальный DOM и сравнивает его с предыдущей версией. Затем он эффективно обновляет только те элементы, которые были изменены, вместо обновления всей страницы целиком.
React также распространяется на состояние приложения с помощью управления потоком данных. Flux – это архитектурный шаблон, который часто используется вместе с React для управления потоком данных.
React добавляет JSX (расширение языка JavaScript), чтобы обеспечить более удобный способ создания пользовательского интерфейса. JSX – это синтаксис, который позволяет соединить HTML и JavaScript в одном файле. React преобразует этот код в обычный JavaScript при его выполнении, что позволяет разработчикам создавать компоненты более быстро и эффективно.
Одна из главных особенностей React – это его экосистема. Есть множество дополнительных библиотек, инструментов и плагинов, доступных для разработчиков Re...