Для чего скрипт подключают в концe body?
Основная причина – ускорение загрузки страницы и избежание блокировки рендеринга.
Когда браузер загружает HTML, он читает код сверху вниз. Если в
Проблема: блокировка рендеринга
Если скрипт загружается в
Решение: подключение в конце `<body>`
Если разместить
Альтернативы: `defer` и `async`
👉 @frontendInterview
Основная причина – ускорение загрузки страницы и избежание блокировки рендеринга.
Когда браузер загружает HTML, он читает код сверху вниз. Если в
<head> встречается <script>, браузер останавливает разбор HTML, загружает и выполняет скрипт, а только потом продолжает загружать страницу. Проблема: блокировка рендеринга
Если скрипт загружается в
<head>, он останавливает отрисовку страницы до завершения загрузки. <head>
<script src="script.js"></script> <!-- ❌ Плохо: блокирует рендеринг -->
</head>
<body>
<h1>Сайт загружается...</h1>
</body>
Решение: подключение в конце `<body>`
Если разместить
<script> перед закрывающим </body>, сначала загружается контент страницы, а потом выполняется JavaScript. <body>
<h1>Контент загрузился!</h1>
<script src="script.js"></script> <!-- Хорошо: не блокирует рендеринг -->
</body>
Альтернативы: `defer` и `async`
defer – отложенное выполнение после загрузки HTML<head>
<script src="script.js" defer></script>
</head>
async – загрузка и выполнение параллельно <head>
<script src="script.js" async></script>
</head>
👉 @frontendInterview
👍3
Код, который умещается в голове: эвристики для разработчиков
Незаменимые практические советы по написанию кода в устойчивом темпе и по управлению сложностью, из-за которой проекты часто выходят из-под контроля. В книге описываются методы и процессы, позволяющие решать ключевые вопросы: от создания чек-листов до организации командной работы, от инкапсуляции до декомпозиции, от проектирования API до модульного тестирования. Автор иллюстрирует свои выводы фрагментами кода, взятыми из готового проекта. Написанные на языке C#, они будут понятны всем, кто использует любой объектно-ориентированный язык, включая Java, C++ и TypeScript. Для более глубокого изучения материала вы можете загрузить весь код и подробные комментарии к коммитам.
👉 @frontendInterview
Незаменимые практические советы по написанию кода в устойчивом темпе и по управлению сложностью, из-за которой проекты часто выходят из-под контроля. В книге описываются методы и процессы, позволяющие решать ключевые вопросы: от создания чек-листов до организации командной работы, от инкапсуляции до декомпозиции, от проектирования API до модульного тестирования. Автор иллюстрирует свои выводы фрагментами кода, взятыми из готового проекта. Написанные на языке C#, они будут понятны всем, кто использует любой объектно-ориентированный язык, включая Java, C++ и TypeScript. Для более глубокого изучения материала вы можете загрузить весь код и подробные комментарии к коммитам.
👉 @frontendInterview
❤1
String Breakers
Вам дана строка и число N. Разбейте строку на подстроки, состоящие из N символов. Пробелы не учитываются.
Пример:
Return value:
👉 @frontendInterview
Вам дана строка и число N. Разбейте строку на подстроки, состоящие из N символов. Пробелы не учитываются.
Пример:
N = 5;
String = "This is an example string";
Return value:
Thisi
sanex
ample
strin
g
👉 @frontendInterview
🤔3👍2
Что знаешь о приоритете селекторов в CSS?
Приоритет селекторов (также известный как специфичность селекторов) определяет, какие стили будут применяться к элементу, если на него действуют несколько правил с различными селекторами. Специфичность основана на типах селекторов и их количественном присутствии в одном CSS-правиле.
Как она вычисляется?
Специфичность выражается четырьмя уровнями: A, B, C, D. Чем выше значения, тем более специфичный селектор.
A: Инлайновые стили (например,
B: Количество ID-селекторов в селекторе (например,
C: Количество классов, атрибутов и псевдоклассов (например,
D: Количество тегов и псевдоэлементов (например,
Рассмотрим несколько примеров и определим их специфичность:
1.
2.
3.
4.
Чем выше значения специфичности, тем выше приоритет стиля. Если два селектора имеют одинаковую специфичность, то стиль, который объявлен позже, будет применён.
Пример
В этом примере на
1.
2.
3.
4.
Поскольку
Почему это важно?
- Управление конфликтами стилей: Знание специфичности помогает правильно управлять стилями и избегать конфликтов.
- Чтение и поддержка кода: Более специфичные селекторы позволяют писать CSS, который легко поддерживать и расширять.
- Эффективность разработки: Понимание специфичности позволяет создавать более предсказуемый и стабильный код.
👉 @frontendInterview
Приоритет селекторов (также известный как специфичность селекторов) определяет, какие стили будут применяться к элементу, если на него действуют несколько правил с различными селекторами. Специфичность основана на типах селекторов и их количественном присутствии в одном CSS-правиле.
Как она вычисляется?
Специфичность выражается четырьмя уровнями: A, B, C, D. Чем выше значения, тем более специфичный селектор.
A: Инлайновые стили (например,
style="color: red;") имеют самую высокую специфичность.B: Количество ID-селекторов в селекторе (например,
#header).C: Количество классов, атрибутов и псевдоклассов (например,
.class, [type="text"], :hover).D: Количество тегов и псевдоэлементов (например,
div, h1, ::before).Рассмотрим несколько примеров и определим их специфичность:
1.
#main-content — (0, 1, 0, 0)2.
.article p — (0, 0, 1, 1)3.
header h1 span — (0, 0, 0, 3)4.
div#main .content .text — (0, 1, 2, 1)Чем выше значения специфичности, тем выше приоритет стиля. Если два селектора имеют одинаковую специфичность, то стиль, который объявлен позже, будет применён.
Пример
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример специфичности</title>
<style>
p {
color: black; /* (0, 0, 0, 1) */
}
.text {
color: blue; /* (0, 0, 1, 0) */
}
#highlight {
color: red; /* (0, 1, 0, 0) */
}
p#highlight {
color: green; /* (0, 1, 0, 1) */
}
</style>
</head>
<body>
<p class="text" id="highlight">Этот текст будет зелёным.</p>
</body>
</html>
В этом примере на
<p> элемент действует несколько селекторов с разной специфичностью:1.
p имеет специфичность (0, 0, 0, 1)2.
.text имеет специфичность (0, 0, 1, 0)3.
#highlight имеет специфичность (0, 1, 0, 0)4.
p#highlight имеет специфичность (0, 1, 0, 1)Поскольку
p#highlight имеет наивысшую специфичность (0, 1, 0, 1), он применяет стиль цвета зелёный.Почему это важно?
- Управление конфликтами стилей: Знание специфичности помогает правильно управлять стилями и избегать конфликтов.
- Чтение и поддержка кода: Более специфичные селекторы позволяют писать CSS, который легко поддерживать и расширять.
- Эффективность разработки: Понимание специфичности позволяет создавать более предсказуемый и стабильный код.
👉 @frontendInterview
👍6
Что выведется в консоль?
Anonymous Quiz
12%
undefined
56%
false
22%
true
5%
!!undefined
5%
SyntaxError
👍1
Как обрабатывать ошибки в JS?
Программа может работать правильно, только если код написан корректно и не содержит ошибок. JavaScript умеет обрабатывать некорректный код и сообщать об ошибке в коде. Существует семь встроенных видов ошибок, также можно создать свои собственные. Встроенные ошибки генерируются самим движком JavaScript при выполнении программы, а пользовательские — создаются с помощью конструктора Error. Оба типа ошибок можно ловить в конструкции try...catch. Подробнее в статье.
👉 @frontendInterview
Программа может работать правильно, только если код написан корректно и не содержит ошибок. JavaScript умеет обрабатывать некорректный код и сообщать об ошибке в коде. Существует семь встроенных видов ошибок, также можно создать свои собственные. Встроенные ошибки генерируются самим движком JavaScript при выполнении программы, а пользовательские — создаются с помощью конструктора Error. Оба типа ошибок можно ловить в конструкции try...catch. Подробнее в статье.
👉 @frontendInterview
👍1
Что делать когда взяли на первую работу
Некоторое время назад у меня была статья о том как искать работу, какие шаги предпринимать и тд. Теперь решил поделиться некоторыми советами и опытом о том, что делать, когда вас уже взяли на вашу первую работу в IT. В связи с тем, что я фронтендер, то некоторые примеры будут основываться из этой области, в частности языки, фреймворки и т. д.
👉 @frontendInterview
Некоторое время назад у меня была статья о том как искать работу, какие шаги предпринимать и тд. Теперь решил поделиться некоторыми советами и опытом о том, что делать, когда вас уже взяли на вашу первую работу в IT. В связи с тем, что я фронтендер, то некоторые примеры будут основываться из этой области, в частности языки, фреймворки и т. д.
👉 @frontendInterview
👎2
Что демонстрирует этот код: setTimeout(() => console.log('Hi'), 1000);?
Anonymous Quiz
7%
Синхронное выполнение
88%
Асинхронное выполнение
2%
Ошибку
3%
Бесконечный цикл
Что такое интерполяция?
Это метод вставки значений или выражений в строки. Она позволяет динамически встраивать переменные и выражения в текстовые строки, делая их более гибкими и удобными для использования. Например, интерполяция достигается с помощью шаблонных строк.
Почему это нужно?
Упрощает работу с текстом, который должен включать значения переменных или результаты вычислений. Без интерполяции, программистам пришлось бы вручную конкатенировать строки и переменные, что делает код менее читаемым и более сложным в поддержке.
Как это используется?
Для примера возьмём JavaScript и его шаблонные строки. Шаблонные строки заключаются в обратные кавычки (``) и позволяют включать выражения внутри них с помощью конструкции
Пример кода:
В данном примере переменные
Как это работает и почему это удобно?
- Читаемость: Шаблонные строки делают код более читабельным и понятным, так как видна вся строка целиком, без необходимости объединения отдельных частей.
- Удобство: Позволяет легко включать значения переменных и результаты выражений в строку.
- Избежание ошибок: Снижает вероятность ошибок, которые могут возникнуть при ручной конкатенации строк.
Шаблонные строки также поддерживают выполнение выражений внутри интерполяции:
👉 @frontendInterview
Это метод вставки значений или выражений в строки. Она позволяет динамически встраивать переменные и выражения в текстовые строки, делая их более гибкими и удобными для использования. Например, интерполяция достигается с помощью шаблонных строк.
Почему это нужно?
Упрощает работу с текстом, который должен включать значения переменных или результаты вычислений. Без интерполяции, программистам пришлось бы вручную конкатенировать строки и переменные, что делает код менее читаемым и более сложным в поддержке.
Как это используется?
Для примера возьмём JavaScript и его шаблонные строки. Шаблонные строки заключаются в обратные кавычки (``) и позволяют включать выражения внутри них с помощью конструкции
${}.Пример кода:
const name = 'Иван';
const age = 30;
const greeting = `Привет, меня зовут ${name} и мне ${age} лет.`;
console.log(greeting); // Вывод: Привет, меня зовут Иван и мне 30 лет.
В данном примере переменные
name и age интерполируются в строку greeting.Как это работает и почему это удобно?
- Читаемость: Шаблонные строки делают код более читабельным и понятным, так как видна вся строка целиком, без необходимости объединения отдельных частей.
- Удобство: Позволяет легко включать значения переменных и результаты выражений в строку.
- Избежание ошибок: Снижает вероятность ошибок, которые могут возникнуть при ручной конкатенации строк.
Шаблонные строки также поддерживают выполнение выражений внутри интерполяции:
const a = 5;
const b = 10;
const result = Сумма ${a} и ${b} равна ${a + b}.;
console.log(result); // Вывод: Сумма 5 и 10 равна 15.
👉 @frontendInterview
👍3🤔1
Simplified JavaScript for Very Important Programmers: The Fast Track to Mastering Essential JavaScript Concepts
Это практическое руководство для всех, кто хочет освоить основные разделы JavaScript, не тратя время на запутанные объяснения и не пытаясь понять смысл неоднозначных слов. Книга наполнена реальными примерами и четким, лаконичным языком, который разбивает технические концепции на легкие для понимания фрагменты.
👉 @frontendInterview
Это практическое руководство для всех, кто хочет освоить основные разделы JavaScript, не тратя время на запутанные объяснения и не пытаясь понять смысл неоднозначных слов. Книга наполнена реальными примерами и четким, лаконичным языком, который разбивает технические концепции на легкие для понимания фрагменты.
👉 @frontendInterview
Partial Word Searching
Создайте метод, который будет искать в массиве строк все строки, содержащие данную подстроку, игнорируя заглавные буквы. Затем верните массив найденных строк.
Метод принимает два параметра: строку запроса и массив строк для поиска, и возвращает массив.
Если строка не содержится ни в одной из строк массива, метод возвращает массив, содержащий одну строку: «Empty».
Пример:
👉 @frontendInterview
Создайте метод, который будет искать в массиве строк все строки, содержащие данную подстроку, игнорируя заглавные буквы. Затем верните массив найденных строк.
Метод принимает два параметра: строку запроса и массив строк для поиска, и возвращает массив.
Если строка не содержится ни в одной из строк массива, метод возвращает массив, содержащий одну строку: «Empty».
Пример:
wordSearch("me",["home", "milk", "Mercury", "fish"]) => ["home", "Mercury"]👉 @frontendInterview
Является ли drag and drop частью спецификации?
Да! Drag and Drop (перетаскивание) — это часть спецификации HTML5. В браузерах есть встроенный API, который позволяет делать перетаскивание элементов без дополнительных библиотек.
Как работает Drag and Drop API?
В HTML5 можно сделать элемент перетаскиваемым, добавив ему атрибут
Какие события есть в Drag and Drop?
Основные события:
Где используется Drag and Drop?
- Перетаскивание файлов в
- Канбан-доски, как в Trello.
- Онлайн-редакторы, как Figma.
- Игры, где можно перемещать предметы.
Можно ли сделать Drag and Drop без HTML5 API?
Да, можно использовать другие методы:
Через события мыши (
Через CSS
Через JS-библиотеки (
Например, в мобильных браузерах стандартный Drag and Drop API плохо работает, и там лучше использовать события
👉 @frontendInterview
Да! Drag and Drop (перетаскивание) — это часть спецификации HTML5. В браузерах есть встроенный API, который позволяет делать перетаскивание элементов без дополнительных библиотек.
Как работает Drag and Drop API?
В HTML5 можно сделать элемент перетаскиваемым, добавив ему атрибут
draggable="true". Затем срабатывают специальные события, такие как dragstart, drop, dragover и другие. <div id="drag-item" draggable="true">Перетащи меня</div>
<div id="drop-zone">Сюда можно сбросить</div>
<script>
const dragItem = document.getElementById("drag-item");
const dropZone = document.getElementById("drop-zone");
dragItem.addEventListener("dragstart", (event) => {
event.dataTransfer.setData("text/plain", "Данные элемента");
});
dropZone.addEventListener("dragover", (event) => {
event.preventDefault(); // Нужно, чтобы разрешить сброс
});
dropZone.addEventListener("drop", (event) => {
event.preventDefault();
const data = event.dataTransfer.getData("text/plain");
alert("Элемент сброшен: " + data);
});
</script>
Какие события есть в Drag and Drop?
Основные события:
dragstart — когда начали тянуть элемент. drag — когда элемент двигается (срабатывает много раз). dragenter — когда курсор заходит в зону сброса. dragover — когда элемент находится над зоной (нужно preventDefault()). dragleave — когда курсор покидает зону сброса. drop — когда элемент отпущен в зоне сброса. dragend — когда перетаскивание завершено (даже если не сбросили). Где используется Drag and Drop?
- Перетаскивание файлов в
<input type="file"> (например, загрузка изображений). - Канбан-доски, как в Trello.
- Онлайн-редакторы, как Figma.
- Игры, где можно перемещать предметы.
Можно ли сделать Drag and Drop без HTML5 API?
Да, можно использовать другие методы:
Через события мыши (
mousedown, mousemove, mouseup). Через CSS
position: absolute и transform. Через JS-библиотеки (
Sortable.js, React DnD, Draggable.js). Например, в мобильных браузерах стандартный Drag and Drop API плохо работает, и там лучше использовать события
touchstart, touchmove, touchend.👉 @frontendInterview
👍5🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Правильно ли заполнено поле ввода с цифрами? Проверяем прямо в браузере.
Поля ввода с типами date, month, week, time, datetime-local, number и range могут иметь атрибуты min и max. Эти атрибуты задают диапазон допустимых значений, которые пользователь может вводить в поле. В зависимости от того, попадает ли введённое значение в диапазон, будут применяться стили для псевдоклассов :in-range и :out-of-range.
- :in-range для полей, в которых введённое значение попадает в диапазон от min до max;
- :out-of-range для полей, в которых введённое значение не попадает в диапазон от min до max.
Пример
👉 @frontendInterview
Поля ввода с типами date, month, week, time, datetime-local, number и range могут иметь атрибуты min и max. Эти атрибуты задают диапазон допустимых значений, которые пользователь может вводить в поле. В зависимости от того, попадает ли введённое значение в диапазон, будут применяться стили для псевдоклассов :in-range и :out-of-range.
- :in-range для полей, в которых введённое значение попадает в диапазон от min до max;
- :out-of-range для полей, в которых введённое значение не попадает в диапазон от min до max.
Пример
<input class="with-range" type="number" min="10" max="20" step="1">
.with-range {
border: 1px solid black;
}
.with-range:in-range {
border-color: green;
background-color: rgb(0 255 0 / 20%);
}
.with-range:out-of-range {
border-color: red;
background-color: rgb(255 0 0 / 20%);
}👉 @frontendInterview
👍10
🔒Устали от использования сложных библиотек для автосохранения данных в проектах? Пора использовать Vue.js и локальное хранилище!
На открытом вебинаре 14 апреля в 20:00 мск мы покажем, как работать с локальным хранилищем, включая LocalStorage, SessionStorage и базовые операции с IndexedDB. Вы увидите, как данные остаются, даже если вы перезагрузите страницу, и узнаете, как легко работать с ними через Composition API.
Научитесь добавлять автосохранение в реальный проект без лишнего кода и сторонних инструментов!
⚡️Зарегистрируйтесь и получите скидку на большое обучение «Vue.js-разработчик»: https://otus.pw/3tv4/?erid=2W5zFGKafuz
Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.
На открытом вебинаре 14 апреля в 20:00 мск мы покажем, как работать с локальным хранилищем, включая LocalStorage, SessionStorage и базовые операции с IndexedDB. Вы увидите, как данные остаются, даже если вы перезагрузите страницу, и узнаете, как легко работать с ними через Composition API.
Научитесь добавлять автосохранение в реальный проект без лишнего кода и сторонних инструментов!
⚡️Зарегистрируйтесь и получите скидку на большое обучение «Vue.js-разработчик»: https://otus.pw/3tv4/?erid=2W5zFGKafuz
Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.