Modern Full-Stack Development: Using TypeScript, React, Node.js, Webpack, Python, Django, and Docker, 2nd Edition
Изучите, что могут предложить React, Node, Python, Django, TypeScript, Webpack и Docker по отдельности, и как они все вместе подходят для разработки современных приложений.
Вы начнете с создания прочного фундамента знаний и быстро расширите его, создав три различных реальных приложения. Это не просто простые, надуманные примеры, а реальные приложения, которые вы можете установить на свои серверы и использовать в реальных условиях.
👉 @frontendInterview
Изучите, что могут предложить React, Node, Python, Django, TypeScript, Webpack и Docker по отдельности, и как они все вместе подходят для разработки современных приложений.
Вы начнете с создания прочного фундамента знаний и быстро расширите его, создав три различных реальных приложения. Это не просто простые, надуманные примеры, а реальные приложения, которые вы можете установить на свои серверы и использовать в реальных условиях.
👉 @frontendInterview
Clock
Часы показывают h часов, m минут и s секунд после полуночи.
Ваша задача - написать функцию, которая возвращает время с полуночи в миллисекундах.
Пример:
👉 @frontendInterview
Часы показывают h часов, m минут и s секунд после полуночи.
Ваша задача - написать функцию, которая возвращает время с полуночи в миллисекундах.
Пример:
h = 0
m = 1
s = 1
result = 61000
👉 @frontendInterview
Где заканчивается js, а где начинается DOM?
JS заканчивается там, где он перестает быть просто набором инструкций и начинает манипулировать DOM, т.е. когда скрипт обращается к элементам страницы (например, через document.getElementById), он начинает взаимодействовать с DOM для изменения структуры, стилей или содержимого веб-страницы.
JavaScript
Используется для создания динамических и интерактивных веб-страниц. Он работает в браузере и на сервере (с помощью Node.js). JavaScript сам по себе не имеет знаний о веб-странице или ее структуре. Он предоставляет синтаксис и базовые возможности для выполнения вычислений, обработки данных, работы с объектами и функциями.
Основные возможности:
Управление переменными и типами данных:
Объявление переменных (
Управление потоком:
Условные операторы (
Работа с функциями:
Объявление и вызов функций. Работа с анонимными и стрелочными функциями.
Объектно-ориентированное программирование:
Создание объектов и классов. Наследование и полиморфизм.
DOM (Document Object Model)
Это программный интерфейс для веб-документов. Он представляет структуру HTML-документа как дерево объектов, которые могут быть изменены скриптами (например, JavaScript). DOM позволяет JavaScript взаимодействовать с HTML-страницей: изменять элементы, стили, атрибуты и содержимое страницы.
Основные возможности:
Доступ к элементам:
Получение элементов по идентификатору(
Изменение структуры документа:
Создание новых элементов (
Изменение содержимого и атрибутов:
Изменение текста и HTML-содержимого (
События:
Добавление обработчиков событий (
Примеры
Изменение содержимого элемента:
Создание и добавление нового элемента:
Граница
JavaScript — это язык программирования, который предоставляет базовые возможности для работы с данными и логикой.
DOM — это интерфейс, который предоставляет структуру HTML-документа и позволяет JavaScript взаимодействовать с этой структурой.
👉 @frontendInterview
JS заканчивается там, где он перестает быть просто набором инструкций и начинает манипулировать DOM, т.е. когда скрипт обращается к элементам страницы (например, через document.getElementById), он начинает взаимодействовать с DOM для изменения структуры, стилей или содержимого веб-страницы.
JavaScript
Используется для создания динамических и интерактивных веб-страниц. Он работает в браузере и на сервере (с помощью Node.js). JavaScript сам по себе не имеет знаний о веб-странице или ее структуре. Он предоставляет синтаксис и базовые возможности для выполнения вычислений, обработки данных, работы с объектами и функциями.
Основные возможности:
Управление переменными и типами данных:
Объявление переменных (
var, let, const). Работа с различными типами данных (строки, числа, объекты, массивы).Управление потоком:
Условные операторы (
if, else, switch). Циклы (for, while, do-while).Работа с функциями:
Объявление и вызов функций. Работа с анонимными и стрелочными функциями.
Объектно-ориентированное программирование:
Создание объектов и классов. Наследование и полиморфизм.
DOM (Document Object Model)
Это программный интерфейс для веб-документов. Он представляет структуру HTML-документа как дерево объектов, которые могут быть изменены скриптами (например, JavaScript). DOM позволяет JavaScript взаимодействовать с HTML-страницей: изменять элементы, стили, атрибуты и содержимое страницы.
Основные возможности:
Доступ к элементам:
Получение элементов по идентификатору(
document.getElementById), классу(document.getElementsByClassName), тегу(document.getElementsByTagName), селектору(document.querySelector, document.querySelectorAll).Изменение структуры документа:
Создание новых элементов (
document.createElement). Добавление и удаление элементов (appendChild, removeChild).Изменение содержимого и атрибутов:
Изменение текста и HTML-содержимого (
element.textContent, element.innerHTML). Управление атрибутами (element.setAttribute, element.getAttribute).События:
Добавление обработчиков событий (
element.addEventListener). Создание и отправка пользовательских событий.Примеры
Изменение содержимого элемента:
<!DOCTYPE html>
<html>
<head>
<title>Пример DOM</title>
</head>
<body>
<div id="myDiv">Исходный текст</div>
<button onclick="changeText()">Изменить текст</button>
<script>
function changeText() {
// Получение элемента DOM
const myDiv = document.getElementById('myDiv');
// Изменение содержимого элемента
myDiv.textContent = 'Измененный текст';
}
</script>
</body>
</html>
Создание и добавление нового элемента:
<!DOCTYPE html>
<html>
<head>
<title>Пример добавления элемента</title>
</head>
<body>
<button onclick="addElement()">Добавить элемент</button>
<script>
function addElement() {
// Создание нового элемента
const newElement = document.createElement('p');
newElement.textContent = 'Новый параграф';
// Добавление нового элемента в DOM
document.body.appendChild(newElement);
}
</script>
</body>
</html>
Граница
JavaScript — это язык программирования, который предоставляет базовые возможности для работы с данными и логикой.
DOM — это интерфейс, который предоставляет структуру HTML-документа и позволяет JavaScript взаимодействовать с этой структурой.
👉 @frontendInterview
👍1
На Yandex Neuro Scale 2025 соберутся лучшие разрабы, тимлиды и архитекторы, чтобы обсудить главные тренды и вызовы IT-индустрии.
В этом году:
Регистрируемся и запоминаем дату и адрес: 24 сентября, Москва, бизнес-центр «Амальтея», Большой бульвар, 40.
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Intersection Observer
Это браузерный API, который позволяет асинхронно отслеживать пересечение элемента с его родителем или областью видимости документа (viewport). В момент пересечения можно запустить какое-либо действие, например, подгрузить дополнительные посты в ленте новостей («бесконечный скролл») или сделать «ленивую» загрузку контента.
С помощью этого инструмента можно создавать бесконечные ленты, как во многих популярных соцсетях, запускать красивые анимации, как на сайте Apple, и даже создавать необычные странички, как bertani.net.
Исторически обнаружение видимости отдельного элемента или видимости двух элементов по отношению друг к другу было непростой задачей. Варианты решения задачи были ненадёжными и замедляли браузер из-за работы в основном потоке. Intersection Observer API работает асинхронно, что повышает производительность приложения.
👉 @frontendInterview
Это браузерный API, который позволяет асинхронно отслеживать пересечение элемента с его родителем или областью видимости документа (viewport). В момент пересечения можно запустить какое-либо действие, например, подгрузить дополнительные посты в ленте новостей («бесконечный скролл») или сделать «ленивую» загрузку контента.
С помощью этого инструмента можно создавать бесконечные ленты, как во многих популярных соцсетях, запускать красивые анимации, как на сайте Apple, и даже создавать необычные странички, как bertani.net.
Исторически обнаружение видимости отдельного элемента или видимости двух элементов по отношению друг к другу было непростой задачей. Варианты решения задачи были ненадёжными и замедляли браузер из-за работы в основном потоке. Intersection Observer API работает асинхронно, что повышает производительность приложения.
👉 @frontendInterview
👍5
Циклы в JavaScript: полный обзор функции
Представьте, что нужно написать «Привет» ста друзьям подряд. Руки быстро устанут набирать одно и то же сообщение, а вот компьютер легко справится с таким заданием. Для этого существуют циклы — они позволяют выполнять повторяющиеся действия автоматически.
Если вы уже имеете опыт в программировании, то, скорее всего, статья для вас покажется избыточной. Однако она может пригодиться, чтобы освежить знания.
👉 @frontendInterview
Представьте, что нужно написать «Привет» ста друзьям подряд. Руки быстро устанут набирать одно и то же сообщение, а вот компьютер легко справится с таким заданием. Для этого существуют циклы — они позволяют выполнять повторяющиеся действия автоматически.
Если вы уже имеете опыт в программировании, то, скорее всего, статья для вас покажется избыточной. Однако она может пригодиться, чтобы освежить знания.
👉 @frontendInterview
Какой инструмент позволяет загружать компоненты только при необходимости?
Anonymous Quiz
10%
React.iss.onemo
7%
useEffect
74%
React.lazy и Suspense
9%
useMemo
👍1
Как вы производите отладку кода?
Отладка JS кода — это процесс поиска и исправления ошибок, которые возникают в программном обеспечении. Этот процесс важен для выявления логических ошибок, неправильных значений переменных и других проблем, которые могут возникнуть во время разработки. Рассмотрим основные инструменты и методы для отладки JavaScript кода.
Основные инструменты
Консоль разработчика в браузере
Все современные браузеры (Chrome, Firefox, Edge, Safari) имеют встроенные инструменты для разработчиков, которые включают консоль для вывода сообщений, просмотра значений переменных и выполнения JavaScript кода в реальном времени.
Пример использования консоли в Chrome:
1. Откройте инструменты разработчика (F12 или Ctrl+Shift+I).
2. Перейдите на вкладку "Console".
3. Используйте
Точки останова (breakpoints)
Точки останова позволяют приостановить выполнение кода на определенной строке, чтобы можно было исследовать текущее состояние программы (значения переменных, выполнение функций и т.д.).
Пример использования точек останова в Chrome:
1. Откройте инструменты разработчика и перейдите на вкладку "Sources".
2. Найдите и откройте файл JavaScript.
3. Щелкните на номер строки, где хотите установить точку останова.
4. Обновите страницу и выполнение остановится на установленной точке останова.
Интерактивное выполнение кода
Инструменты разработчика позволяют выполнять JavaScript код в реальном времени через консоль.
Пример:
1. Откройте инструменты разработчика и перейдите на вкладку "Console".
2. Введите и выполните произвольный JavaScript код, например:
Просмотр вызовов функций (Call Stack)
Инструменты разработчика позволяют отслеживать вызовы функций и видеть, как они были вызваны друг другом.
Пример:
Когда выполнение приостановлено на точке останова, откройте вкладку "Call Stack" в инструментах разработчика, чтобы увидеть последовательность вызовов функций.
👉 @frontendInterview
Отладка JS кода — это процесс поиска и исправления ошибок, которые возникают в программном обеспечении. Этот процесс важен для выявления логических ошибок, неправильных значений переменных и других проблем, которые могут возникнуть во время разработки. Рассмотрим основные инструменты и методы для отладки JavaScript кода.
Основные инструменты
Консоль разработчика в браузере
Все современные браузеры (Chrome, Firefox, Edge, Safari) имеют встроенные инструменты для разработчиков, которые включают консоль для вывода сообщений, просмотра значений переменных и выполнения JavaScript кода в реальном времени.
Пример использования консоли в Chrome:
1. Откройте инструменты разработчика (F12 или Ctrl+Shift+I).
2. Перейдите на вкладку "Console".
3. Используйте
console.log(), console.error(), console.warn() для вывода сообщений в консоль.console.log('Это сообщение для отладки');
console.error('Это сообщение об ошибке');
console.warn('Это предупреждающее сообщение'); Точки останова (breakpoints)
Точки останова позволяют приостановить выполнение кода на определенной строке, чтобы можно было исследовать текущее состояние программы (значения переменных, выполнение функций и т.д.).
Пример использования точек останова в Chrome:
1. Откройте инструменты разработчика и перейдите на вкладку "Sources".
2. Найдите и откройте файл JavaScript.
3. Щелкните на номер строки, где хотите установить точку останова.
4. Обновите страницу и выполнение остановится на установленной точке останова.
Интерактивное выполнение кода
Инструменты разработчика позволяют выполнять JavaScript код в реальном времени через консоль.
Пример:
1. Откройте инструменты разработчика и перейдите на вкладку "Console".
2. Введите и выполните произвольный JavaScript код, например:
let x = 10;
let y = 20;
console.log(x + y); // 30
Просмотр вызовов функций (Call Stack)
Инструменты разработчика позволяют отслеживать вызовы функций и видеть, как они были вызваны друг другом.
Пример:
Когда выполнение приостановлено на точке останова, откройте вкладку "Call Stack" в инструментах разработчика, чтобы увидеть последовательность вызовов функций.
👉 @frontendInterview
👍1🔥1
Грокаем функциональное программирование
Вам кажется, что функциональное программирование – это нечто сложное, доступное только гуру программирования? Эта книга развенчает миф об элитарности и позволит любому программисту с легкостью разобраться в хитросплетениях кода.
От знакомых и простых идей ООП вы перейдете к ФП, рассматривая его на простых примерах, захватывающих упражнениях и большом количестве иллюстраций.
Вы начнете с решения простых и маленьких задач, иллюстрирующих базовые понятия, такие как чистые функции и неизменяемые данные, научитесь писать код, лишенный типичных ошибок, обусловленных наличием сложного распределенного состояния, разберетесь с подходами к реализации ввода-вывода, параллельного выполнения и потоковой передачи данных. К концу книги вы будете создавать ясный функциональный код, который легко читается, тестируется и сопровождается.
👉 @frontendInterview
Вам кажется, что функциональное программирование – это нечто сложное, доступное только гуру программирования? Эта книга развенчает миф об элитарности и позволит любому программисту с легкостью разобраться в хитросплетениях кода.
От знакомых и простых идей ООП вы перейдете к ФП, рассматривая его на простых примерах, захватывающих упражнениях и большом количестве иллюстраций.
Вы начнете с решения простых и маленьких задач, иллюстрирующих базовые понятия, такие как чистые функции и неизменяемые данные, научитесь писать код, лишенный типичных ошибок, обусловленных наличием сложного распределенного состояния, разберетесь с подходами к реализации ввода-вывода, параллельного выполнения и потоковой передачи данных. К концу книги вы будете создавать ясный функциональный код, который легко читается, тестируется и сопровождается.
👉 @frontendInterview
👎2
Counting Change Combinations
Напишите функцию, которая подсчитывает, сколькими различными способами вы можете разменять определенную сумму денег, учитывая массив номиналов монет. Например, есть 3 способа сдачи на 4, если у вас есть монеты номиналом 1 и 2:
Порядок монет не имеет значения:
Также предположим, что у вас бесконечное количество монет.
Ваша функция должна принимать сумму для изменения и массив уникальных номиналов монет
Пример:
👉 @frontendInterview
Напишите функцию, которая подсчитывает, сколькими различными способами вы можете разменять определенную сумму денег, учитывая массив номиналов монет. Например, есть 3 способа сдачи на 4, если у вас есть монеты номиналом 1 и 2:
1+1+1+1, 1+1+2, 2+2.
Порядок монет не имеет значения:
1+1+2 == 2+1+1
Также предположим, что у вас бесконечное количество монет.
Ваша функция должна принимать сумму для изменения и массив уникальных номиналов монет
Пример:
countChange(4, [1,2]) // => 3
countChange(10, [5,2,3]) // => 4
countChange(11, [5,7]) // => 0
👉 @frontendInterview
🚀 AI Интервью — умная программа для помощи на собеседованиях в Телемост, Google Meet, Zoom, Teams и на других платформах!
💎 Слушает, что говорит интервьюер
💎 Подсказывает правильные ответы в реальном времени, прямо во время разговора
💎 Интервьюер не видит окно с подсказками
Программа очень хорошо работает для собеседований на вакансии разработчика, архитектора, CTO и других. На любых языках.
Подпишитесь на канал AI Интервью и используйте программу на ближайшем собеседовании.
💎 Слушает, что говорит интервьюер
💎 Подсказывает правильные ответы в реальном времени, прямо во время разговора
💎 Интервьюер не видит окно с подсказками
Программа очень хорошо работает для собеседований на вакансии разработчика, архитектора, CTO и других. На любых языках.
Подпишитесь на канал AI Интервью и используйте программу на ближайшем собеседовании.
Расскажи про области видимости
В JavaScript область видимости (scope) определяет доступность переменных, функций и объектов в разных частях кода. Это фундаментальная концепция, которая управляет тем, какие данные могут быть доступны или недоступны в различных частях программы.
Глобальная область видимости
Переменные и функции, объявленные вне любых функций или блоков, находятся в глобальной области видимости. Они доступны из любой части программы.
Функциональная область видимости
Переменные, объявленные с помощью
Блочная область видимости
Переменные, объявленные с помощью
Область видимости модуля (Module Scope)
При использовании модулей (например,
👉 @frontendInterview
В JavaScript область видимости (scope) определяет доступность переменных, функций и объектов в разных частях кода. Это фундаментальная концепция, которая управляет тем, какие данные могут быть доступны или недоступны в различных частях программы.
Глобальная область видимости
Переменные и функции, объявленные вне любых функций или блоков, находятся в глобальной области видимости. Они доступны из любой части программы.
var globalVar = 'Я глобальная переменная';
function testFunction() {
console.log(globalVar); // Доступно
}
testFunction();
console.log(globalVar); // Доступно
Функциональная область видимости
Переменные, объявленные с помощью
var внутри функции, имеют область видимости, ограниченную этой функцией. Они недоступны за её пределами.function testFunction() {
var functionVar = 'Я внутри функции';
console.log(functionVar); // Доступно
}
testFunction();
console.log(functionVar); // Ошибка: переменная functionVar недоступнаБлочная область видимости
Переменные, объявленные с помощью
let и const, имеют область видимости, ограниченную ближайшим блоком {}.if (true) {
let blockVar = 'Я внутри блока';
console.log(blockVar); // Доступно
}
console.log(blockVar); // Ошибка: переменная blockVar недоступнаОбласть видимости модуля (Module Scope)
При использовании модулей (например,
import и export в ES6), все переменные и функции в модуле имеют собственную область видимости. Они не попадают в глобальную область видимости.export const myVar = 'Я переменная из модуля';
import { myVar } from './module1.js';
console.log(myVar); // "Я переменная из модуля"👉 @frontendInterview
👍1