Anonymous Quiz
2%
font-style
6%
font-weight
91%
font-size
1%
font-family
👍17😁11✍1
Какие методы http запросов знаешь ?
Спросят с вероятностью 7%
HTTP (HyperText Transfer Protocol) поддерживает множество методов запросов, каждый из которых предназначен для выполнения определенных действий на сервере. Вот основные методы HTTP-запросов, которые широко используются:
1️⃣GET
Описание: Запрашивает данные с сервера.
Особенности:
✅Не изменяет состояние сервера (идемпотентный).
✅Параметры запроса передаются в URL.
✅Кэшируется.
✅Можно сохранить в закладках браузера.
2️⃣POST
Описание: Отправляет данные на сервер для создания ресурса или выполнения действия.
Особенности:
✅Изменяет состояние сервера.
✅Данные передаются в теле запроса.
✅Не кэшируется по умолчанию.
3️⃣PUT
Описание: Отправляет данные на сервер для создания или замены ресурса.
Особенности:
✅Идемпотентный.
✅Данные передаются в теле запроса.
4️⃣DELETE
Описание: Удаляет ресурс на сервере.
Особенности:
✅Идемпотентный.
5️⃣PATCH
Описание: Частично обновляет ресурс на сервере.
Особенности:
✅Не является идемпотентным, хотя в некоторых случаях может быть.
✅Данные передаются в теле запроса.
6️⃣HEAD
Описание: Запрашивает только заголовки ресурса, без тела.
Особенности:
✅Идемпотентный.
✅Используется для проверки наличия ресурса, размера, даты последнего изменения и т.д.
7️⃣OPTIONS
Описание: Запрашивает поддерживаемые сервером методы для указанного ресурса.
Особенности:
✅Идемпотентный.
✅Используется для CORS-запросов, чтобы определить разрешенные методы и заголовки.
8️⃣CONNECT
Описание: Устанавливает туннель к серверу, обычно используется для прокси-серверов.
Особенности:
✅Не используется в обычных RESTful API.
9️⃣TRACE
Описание: Выполняет запрос по пути до целевого ресурса, возвращая запрос в ответе.
Особенности:
✅Используется для диагностики или отладки.
Резюме
✅GET: Запрашивает данные, не изменяет состояние сервера.
✅POST: Отправляет данные для создания ресурса, изменяет состояние сервера.
✅PUT: Создает или заменяет ресурс, идемпотентный.
✅DELETE: Удаляет ресурс, идемпотентный.
✅PATCH: Частично обновляет ресурс.
✅HEAD: Запрашивает заголовки ресурса, без тела.
✅OPTIONS: Запрашивает поддерживаемые методы для ресурса.
✅CONNECT: Устанавливает туннель к серверу.
✅TRACE: Выполняет запрос по пути до целевого ресурса для диагностики.
Методы HTTP-запросов включают GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS, CONNECT и TRACE. Каждый метод используется для различных типов операций: получения данных, отправки данных, обновления, удаления и диагностики.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 7%
HTTP (HyperText Transfer Protocol) поддерживает множество методов запросов, каждый из которых предназначен для выполнения определенных действий на сервере. Вот основные методы HTTP-запросов, которые широко используются:
1️⃣GET
Описание: Запрашивает данные с сервера.
Особенности:
✅Не изменяет состояние сервера (идемпотентный).
✅Параметры запроса передаются в URL.
✅Кэшируется.
✅Можно сохранить в закладках браузера.
GET /api/users?id=123 HTTP/1.1
Host: www.example.com
2️⃣POST
Описание: Отправляет данные на сервер для создания ресурса или выполнения действия.
Особенности:
✅Изменяет состояние сервера.
✅Данные передаются в теле запроса.
✅Не кэшируется по умолчанию.
POST /api/users HTTP/1.1
Host: www.example.com
Content-Type: application/json
{
"name": "John Doe",
"email": "[email protected]"
}
3️⃣PUT
Описание: Отправляет данные на сервер для создания или замены ресурса.
Особенности:
✅Идемпотентный.
✅Данные передаются в теле запроса.
PUT /api/users/123 HTTP/1.1
Host: www.example.com
Content-Type: application/json
{
"name": "John Doe",
"email": "[email protected]"
}
4️⃣DELETE
Описание: Удаляет ресурс на сервере.
Особенности:
✅Идемпотентный.
DELETE /api/users/123 HTTP/1.1
Host: www.example.com
5️⃣PATCH
Описание: Частично обновляет ресурс на сервере.
Особенности:
✅Не является идемпотентным, хотя в некоторых случаях может быть.
✅Данные передаются в теле запроса.
PATCH /api/users/123 HTTP/1.1
Host: www.example.com
Content-Type: application/json
{
"email": "[email protected]"
}
6️⃣HEAD
Описание: Запрашивает только заголовки ресурса, без тела.
Особенности:
✅Идемпотентный.
✅Используется для проверки наличия ресурса, размера, даты последнего изменения и т.д.
HEAD /api/users/123 HTTP/1.1
Host: www.example.com
7️⃣OPTIONS
Описание: Запрашивает поддерживаемые сервером методы для указанного ресурса.
Особенности:
✅Идемпотентный.
✅Используется для CORS-запросов, чтобы определить разрешенные методы и заголовки.
OPTIONS /api/users HTTP/1.1
Host: www.example.com
8️⃣CONNECT
Описание: Устанавливает туннель к серверу, обычно используется для прокси-серверов.
Особенности:
✅Не используется в обычных RESTful API.
CONNECT www.example.com:443 HTTP/1.1
Host: www.example.com
9️⃣TRACE
Описание: Выполняет запрос по пути до целевого ресурса, возвращая запрос в ответе.
Особенности:
✅Используется для диагностики или отладки.
TRACE /api/users HTTP/1.1
Host: www.example.com
Резюме
✅GET: Запрашивает данные, не изменяет состояние сервера.
✅POST: Отправляет данные для создания ресурса, изменяет состояние сервера.
✅PUT: Создает или заменяет ресурс, идемпотентный.
✅DELETE: Удаляет ресурс, идемпотентный.
✅PATCH: Частично обновляет ресурс.
✅HEAD: Запрашивает заголовки ресурса, без тела.
✅OPTIONS: Запрашивает поддерживаемые методы для ресурса.
✅CONNECT: Устанавливает туннель к серверу.
✅TRACE: Выполняет запрос по пути до целевого ресурса для диагностики.
Методы HTTP-запросов включают GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS, CONNECT и TRACE. Каждый метод используется для различных типов операций: получения данных, отправки данных, обновления, удаления и диагностики.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
👍24❤6🔥4
Please open Telegram to view this post
VIEW IN TELEGRAM
👍23❤1
Ставь 👍 если знал ответ
Please open Telegram to view this post
VIEW IN TELEGRAM
👍56🤯13🎉2
Anonymous Quiz
2%
Язык программирования
94%
Библиотека JavaScript для упрощения манипуляций с DOM, событиями и анимацией
3%
Серверная технология
1%
Новый стандарт HTML
😁20👍5❤1
Что такое ооп ?
Спросят с вероятностью 7%
Объектно-ориентированное программирование (ООП) — это парадигма, основанная на концепции "объектов", которые могут содержать данные (в виде полей или атрибутов) и код (в виде методов). Предоставляет структуру для организации программного кода в форме объектов, которые могут взаимодействовать друг с другом.
Основные концепции
1️⃣Классы и объекты
✅Это шаблон или "чертеж" для создания объектов. Класс определяет свойства (данные) и методы (функции), которые будут у объектов.
Объект: это экземпляр класса, который содержит реальные значения для свойств и может вызывать методы, определенные в классе.
2️⃣Инкапсуляция
✅Это принцип скрытия внутреннего состояния объекта и предоставление доступа к нему только через методы. Это помогает защитить данные от некорректного использования и улучшает модульность кода.
3️⃣Наследование
✅Позволяет одному классу наследовать свойства и методы другого класса, что способствует повторному использованию кода и улучшает его организацию.
Преимущества
1️⃣Улучшенная модульность: Классы и объекты позволяют разбивать код на отдельные, независимые части.
2️⃣Повторное использование кода: Наследование и полиморфизм способствуют повторному использованию кода.
3️⃣Упрощенное управление сложностью: Инкапсуляция помогает скрыть сложность реализации и предоставляет простой интерфейс для взаимодействия с объектами.
4️⃣Повышенная гибкость и расширяемость: Легко добавлять новые функции и изменять существующие без значительного переписывания кода.
ООП — это метод, который организует код в виде объектов и классов. Основные принципы ООП включают инкапсуляцию, наследование, полиморфизм и абстракцию. Это помогает создавать модульный, повторно используемый и легко управляемый код.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 7%
Объектно-ориентированное программирование (ООП) — это парадигма, основанная на концепции "объектов", которые могут содержать данные (в виде полей или атрибутов) и код (в виде методов). Предоставляет структуру для организации программного кода в форме объектов, которые могут взаимодействовать друг с другом.
Основные концепции
1️⃣Классы и объекты
✅Это шаблон или "чертеж" для создания объектов. Класс определяет свойства (данные) и методы (функции), которые будут у объектов.
Объект: это экземпляр класса, который содержит реальные значения для свойств и может вызывать методы, определенные в классе.
class Animal {
constructor(name, species) {
this.name = name;
this.species = species;
}
speak() {
console.log(`${this.name} издает звук.`);
}
}
const dog = new Animal('Рекс', 'Собака');
dog.speak(); // Рекс издает звук.
2️⃣Инкапсуляция
✅Это принцип скрытия внутреннего состояния объекта и предоставление доступа к нему только через методы. Это помогает защитить данные от некорректного использования и улучшает модульность кода.
class Person {
constructor(name, age) {
this.name = name;
let _age = age; // Приватное свойство
this.getAge = function() {
return _age;
}
this.setAge = function(newAge) {
if (newAge > 0) {
_age = newAge;
} else {
console.log('Возраст должен быть положительным числом.');
}
}
}
}
const person = new Person('Иван', 30);
console.log(person.getAge()); // 30
person.setAge(35);
console.log(person.getAge()); // 35
3️⃣Наследование
✅Позволяет одному классу наследовать свойства и методы другого класса, что способствует повторному использованию кода и улучшает его организацию.
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(${this.name} издает звук.);
}
}
class Dog extends Animal {
speak() {
console.log(${this.name} лает.);
}
}
const dog = new Dog('Рекс');
dog.speak(); // Рекс лает.
4️⃣
Полиморфизм
✅
Позволяет методам выполнять разные действия в зависимости от объекта, который вызывает этот метод. Это достигается через переопределение методов в классах-наследниках.
```javascript
class Animal {
speak() {
console.log('Животное издает звук.');
}
}
class Dog extends Animal {
speak() {
console.log('Собака лает.');
}
}
class Cat extends Animal {
speak() {
console.log('Кошка мяукает.');
}
}
const animals = [new Dog(), new Cat()];
animals.forEach(animal => animal.speak());
// Собака лает.
// Кошка мяукает.
Преимущества
1️⃣Улучшенная модульность: Классы и объекты позволяют разбивать код на отдельные, независимые части.
2️⃣Повторное использование кода: Наследование и полиморфизм способствуют повторному использованию кода.
3️⃣Упрощенное управление сложностью: Инкапсуляция помогает скрыть сложность реализации и предоставляет простой интерфейс для взаимодействия с объектами.
4️⃣Повышенная гибкость и расширяемость: Легко добавлять новые функции и изменять существующие без значительного переписывания кода.
ООП — это метод, который организует код в виде объектов и классов. Основные принципы ООП включают инкапсуляцию, наследование, полиморфизм и абстракцию. Это помогает создавать модульный, повторно используемый и легко управляемый код.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
👍37❤4
👾 1429 вопросов собесов на Frontend Developer
🔒 База реальных собесов
🔒 База тестовых заданий
👾 Список менторов
🖥 Frontend
├ Вакансии
├ LeetCode ответы
└ Тесты
🖥 Тестировщик
├ Вопросы собесов
├ Вакансии
└ Тесты
🖥 Python
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
👩💻 Java
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
👩💻 С/С++
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
👩💻 Kotlin
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
👩💻 С#
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
👩💻 Swift
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
👩💻 PHP
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
🖥 Data Science
├ Вопросы собесов
├ Вакансии
└ Тесты
👩💻 DevOps
├ Вопросы собесов
├ Вакансии
└ Тесты
👣 Golang
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
⚙ Backend
└ Вопросы собесов
👾 Список менторов
├ Вакансии
├ LeetCode ответы
└ Тесты
├ Вопросы собесов
├ Вакансии
└ Тесты
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
├ Вопросы собесов
├ Вакансии
└ Тесты
├ Вопросы собесов
├ Вакансии
└ Тесты
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
└ Вопросы собесов
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11❤10🔥4
Frontend | Вопросы собесов pinned «👾 1429 вопросов собесов на Frontend Developer 🔒 База реальных собесов 🔒 База тестовых заданий 👾 Список менторов 🖥 Frontend ├ Вакансии ├ LeetCode ответы └ Тесты 🖥 Тестировщик ├ Вопросы собесов ├ Вакансии └ Тесты 🖥 Python ├ Вопросы собесов ├ Вакансии ├ LeetCode…»
Anonymous Quiz
89%
<style>
3%
<css>
1%
<script>
7%
<link>
👍11😁6🤯4👀1
Как взаимодействуют front-end и back-end ?
Спросят с вероятностью 3%
Веб-разработка состоит из двух основных частей: фронтенда (frontend) и бэкенда (backend). Эти две части взаимодействуют между собой для создания полнофункциональных веб-приложений, предоставляя пользователям интерфейсы и обеспечивая работу бизнес-логики и управления данными на сервере. Рассмотрим, как они взаимодействуют.
1️⃣Архитектура взаимодействия
Фронтенд: Это часть веб-приложения, с которой взаимодействует пользователь. Она включает HTML, CSS и JavaScript, а также фреймворки и библиотеки, такие как React, Vue.js и Angular. Фронтенд отвечает за отображение данных, обработку событий и обеспечение интерактивности.
Бэкенд: Это серверная часть веб-приложения, которая управляет бизнес-логикой, обработкой данных и взаимодействием с базой данных. Бэкенд может быть написан на разных языках программирования, таких как Node.js, Python, Ruby, Java, PHP и других. Он включает веб-серверы, базы данных и API.
2️⃣HTTP-запросы и ответы
Фронтенд и бэкенд взаимодействуют через HTTP-запросы и ответы. Фронтенд отправляет запросы на сервер (бэкенд), который обрабатывает их и отправляет ответы обратно на фронтенд.
1️⃣Запрос данных:
✅Фронтенд отправляет HTTP GET-запрос на сервер, чтобы получить данные.
✅Бэкенд получает запрос, извлекает данные из базы данных и отправляет их обратно в виде JSON-ответа.
2️⃣Отправка данных:
✅Фронтенд отправляет HTTP POST-запрос на сервер с данными для создания нового ресурса.
✅Бэкенд получает запрос, обрабатывает данные и сохраняет их в базе данных, затем отправляет ответ о статусе операции.
3️⃣WebSocket
Для взаимодействия в реальном времени между фронтендом и бэкендом используется WebSocket. Он позволяет устанавливать постоянное двустороннее соединение между клиентом и сервером, что полезно для приложений с обновлениями в реальном времени, таких как чаты или онлайн-игры.
4️⃣RESTful API и GraphQL
RESTful API: Это стиль архитектуры API, который использует стандартные HTTP методы (GET, POST, PUT, DELETE) для взаимодействия с ресурсами. Каждый ресурс идентифицируется уникальным URL, а данные передаются в формате JSON или XML.
GraphQL: Это язык запросов для API, который позволяет клиенту запрашивать именно те данные, которые ему нужны. В отличие от REST, где каждый ресурс имеет свой URL, в GraphQL есть единая точка доступа (endpoint), и запросы могут быть более гибкими и оптимизированными.
Фронтенд и бэкенд взаимодействуют через HTTP-запросы и ответы. Фронтенд отправляет запросы на сервер, который обрабатывает их и отправляет ответы обратно. Также можно использовать WebSocket для двустороннего взаимодействия в реальном времени. Для организации взаимодействия часто применяются RESTful API и GraphQL.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 3%
Веб-разработка состоит из двух основных частей: фронтенда (frontend) и бэкенда (backend). Эти две части взаимодействуют между собой для создания полнофункциональных веб-приложений, предоставляя пользователям интерфейсы и обеспечивая работу бизнес-логики и управления данными на сервере. Рассмотрим, как они взаимодействуют.
1️⃣Архитектура взаимодействия
Фронтенд: Это часть веб-приложения, с которой взаимодействует пользователь. Она включает HTML, CSS и JavaScript, а также фреймворки и библиотеки, такие как React, Vue.js и Angular. Фронтенд отвечает за отображение данных, обработку событий и обеспечение интерактивности.
Бэкенд: Это серверная часть веб-приложения, которая управляет бизнес-логикой, обработкой данных и взаимодействием с базой данных. Бэкенд может быть написан на разных языках программирования, таких как Node.js, Python, Ruby, Java, PHP и других. Он включает веб-серверы, базы данных и API.
2️⃣HTTP-запросы и ответы
Фронтенд и бэкенд взаимодействуют через HTTP-запросы и ответы. Фронтенд отправляет запросы на сервер (бэкенд), который обрабатывает их и отправляет ответы обратно на фронтенд.
1️⃣Запрос данных:
✅Фронтенд отправляет HTTP GET-запрос на сервер, чтобы получить данные.
✅Бэкенд получает запрос, извлекает данные из базы данных и отправляет их обратно в виде JSON-ответа.
// Фронтенд (JavaScript с использованием Fetch API)
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log(data); // Обработка данных на фронтенде
})
.catch(error => {
console.error('Error:', error);
});
2️⃣Отправка данных:
✅Фронтенд отправляет HTTP POST-запрос на сервер с данными для создания нового ресурса.
✅Бэкенд получает запрос, обрабатывает данные и сохраняет их в базе данных, затем отправляет ответ о статусе операции.
// Фронтенд (JavaScript с использованием Fetch API)
fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => {
console.log(data); // Обработка ответа на фронтенде
})
.catch(error => {
console.error('Error:', error);
});
3️⃣WebSocket
Для взаимодействия в реальном времени между фронтендом и бэкендом используется WebSocket. Он позволяет устанавливать постоянное двустороннее соединение между клиентом и сервером, что полезно для приложений с обновлениями в реальном времени, таких как чаты или онлайн-игры.
// Фронтенд (JavaScript с использованием WebSocket API)
const socket = new WebSocket('ws://example.com/socket');
socket.onopen = () => {
console.log('WebSocket is open now.');
socket.send(JSON.stringify({ message: 'Hello Server!' }));
};
socket.onmessage = (event) => {
console.log('Received:', event.data);
};
socket.onclose = () => {
console.log('WebSocket is closed now.');
};
4️⃣RESTful API и GraphQL
RESTful API: Это стиль архитектуры API, который использует стандартные HTTP методы (GET, POST, PUT, DELETE) для взаимодействия с ресурсами. Каждый ресурс идентифицируется уникальным URL, а данные передаются в формате JSON или XML.
GraphQL: Это язык запросов для API, который позволяет клиенту запрашивать именно те данные, которые ему нужны. В отличие от REST, где каждый ресурс имеет свой URL, в GraphQL есть единая точка доступа (endpoint), и запросы могут быть более гибкими и оптимизированными.
Фронтенд и бэкенд взаимодействуют через HTTP-запросы и ответы. Фронтенд отправляет запросы на сервер, который обрабатывает их и отправляет ответы обратно. Также можно использовать WebSocket для двустороннего взаимодействия в реальном времени. Для организации взаимодействия часто применяются RESTful API и GraphQL.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
👍27🔥6❤3
Anonymous Quiz
3%
WebSQL
51%
LocalStorage
30%
SessionStorage
16%
Cookies
🤔18👍8❤2💊2🤯1
Git — это система контроля версий, которая позволяет отслеживать изменения в коде, работать совместно над проектами и управлять различными версиями кода. Взаимодействие с Git происходит через командную строку с использованием различных команд. Рассмотрим основные этапы и команды, используемые для работы с Git.
Основные команды и этапы работы
Создание нового локального репозитория или клонирование существующего удаленного репозитория.
git init
git clone <url>
Добавление новых или измененных файлов в индекс (стейджинг).
git status
git add <file>
git add .
Сохранение изменений в истории репозитория с комментарием.
git commit -m "Сообщение коммита"
Создание, переключение и слияние веток.
git branch <branch-name>
git checkout <branch-name>
git checkout -b <branch-name>
git merge <branch-name>
Добавление удаленного репозитория, отправка и получение изменений.
git remote add origin <url>
git push origin <branch-name>
Пример:
git push origin main
Please open Telegram to view this post
VIEW IN TELEGRAM
👍42❤2😁1
var
const
Ставь 👍 если знал ответ и 🔥 если нет
Please open Telegram to view this post
VIEW IN TELEGRAM
👍93🔥8😁1
Процесс преобразования HTML-документа в веб-страницу, отображаемую в браузере, включает несколько ключевых этапов. Рассмотрим этот процесс шаг за шагом.
Когда пользователь вводит URL в адресную строку браузера или переходит по ссылке, происходит запрос HTTP (или HTTPS) к серверу, на котором находится веб-страница. Сервер отвечает на этот запрос, отправляя HTML-документ.
Браузер получает HTML-документ и начинает его парсинг. Это включает в себя разбор HTML-кода и создание структуры данных, известной как DOM (Document Object Model).
Браузер читает HTML-документ построчно, создавая узлы для каждого элемента и текста. Эти узлы образуют DOM-дерево, которое представляет структуру веб-страницы. Каждый элемент HTML превращается в объект, который браузер может использовать для дальнейших операций.
В процессе парсинга HTML браузер также обнаруживает ссылки на внешние ресурсы, такие как CSS-файлы, JavaScript-файлы, изображения, шрифты и другие ресурсы. Браузер отправляет дополнительные HTTP-запросы для загрузки этих ресурсов.
После загрузки CSS-файлов браузер парсит их и строит CSSOM (CSS Object Model) — объектную модель, представляющую стили, применяемые к элементам на странице. Затем браузер объединяет DOM и CSSOM для создания рендер-дерева (render tree), которое содержит видимые элементы страницы и их стили.
Браузер рассчитывает размеры и положение каждого элемента на странице, основываясь на рендер-дереве и правилах CSS. Этот процесс известен как layout или reflow.
На этапе отрисовки браузер берет рендер-дерево и начинает преобразовывать его в пиксели на экране. Этот процесс включает рисование каждого элемента, включая текст, цвета, изображения, границы и другие стили.
Если HTML-документ содержит теги
<script>
или ссылки на внешние JavaScript-файлы, браузер загружает и выполняет эти скрипты. JavaScript может изменять DOM, CSSOM и влиять на отрисовку страницы в реальном времени. После первоначальной загрузки и отрисовки страницы браузер начинает обрабатывать события, такие как клики, ввод данных, перемещение мыши и другие взаимодействия пользователя. JavaScript-код может быть привязан к этим событиям, чтобы обеспечить динамическое поведение страницы.
Итоговый процесс
HTML-документ преобразуется в веб-страницу в браузере через процесс, включающий парсинг HTML, создание DOM-дерева, загрузку и применение CSS, расчет макета, отрисовку элементов на экране и выполнение JavaScript.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍57❤9🔥4
Anonymous Quiz
70%
<video>
26%
<media>
3%
<movie>
1%
<stream>
👍8😁6❤3
Семантика в контексте веб-разработки и HTML означает использование элементов и тегов, которые четко и понятно описывают содержимое веб-страницы. Это помогает как разработчикам, так и машинам (браузерам, поисковым системам, вспомогательным технологиям) лучше понимать и интерпретировать структуру и значение содержимого.
Примеры семантических HTML-элементов
<header>
: Представляет верхний колонтитул документа или секции.<nav>
: Определяет набор навигационных ссылок.<main>
: Содержит основное содержимое страницы.<section>
: Определяет секцию в документе.<article>
: Представляет самостоятельный элемент контента, который можно независимо распространять.<aside>
: Определяет содержимое, связанное с основным содержимым, но не являющееся его частью.<footer>
: Представляет нижний колонтитул документа или секции.<strong>
: Указывает на важность текста (часто отображается жирным шрифтом).<em>
: Выделяет текст, который имеет акцент или интонацию (часто отображается курсивом).<blockquote>
: Оформляет цитату.<cite>
: Указывает на источник или заглавие работы.<code>
: Определяет блок кода.<abbr>
: Определяет аббревиатуру.<p>Это <strong>важное</strong> сообщение.</p>
<p>Он сказал: <blockquote>Это пример цитаты.</blockquote></p>
<p>Код: <code>console.log('Hello, World!');</code></p>
<p>Слово <abbr title="Hypertext Markup Language">HTML</abbr> означает язык гипертекстовой разметки.</p>
Семантика в HTML означает использование элементов и тегов, которые четко и понятно описывают содержимое веб-страницы. Это улучшает читаемость и поддержку кода, SEO и доступность. Семантический HTML включает такие элементы, как
<header>
, <nav>
, <main>
, <section>
, <article>
, <footer>
, <strong>
, <em>
, <blockquote>
, <cite>
, <code>
и <abbr>
, которые помогают структурировать и описывать содержимое страниц.Please open Telegram to view this post
VIEW IN TELEGRAM
👍32😁16❤1
Anonymous Quiz
69%
window.location
21%
document.url
5%
browser.address
6%
navigator.path
✍9👍7
Redux — это библиотека для управления состоянием приложений, часто используемая с библиотекой React, но она может быть использована и с другими библиотеками или фреймворками JavaScript. Redux предоставляет централизованное хранилище (store) для всех состояний приложения, что упрощает управление и отладку состояний.
Для начала установим необходимые пакеты:
npm install redux react-redux
Создание действий (actions)
// actions.js
export const increment = () => ({
type: 'INCREMENT',
});
export const decrement = () => ({
type: 'DECREMENT',
});
Создание редюсера (reducer)
// reducer.js
const initialState = {
count: 0,
};
const counterReducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return {
...state,
count: state.count + 1,
};
case 'DECREMENT':
return {
...state,
count: state.count - 1,
};
default:
return state;
}
};
export default counterReducer;
Создание хранилища (store)
// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';
const store = createStore(counterReducer);
export default store;
Подключение Redux к React
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
Использование состояния и действий
// App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';
const App = () => {
const count = useSelector(state => state.count);
const dispatch = useDispatch();
return (
<div>
<h1>Counter: {count}</h1>
<button onClick={() => dispatch(increment())}>Increment</button>
<button onClick={() => dispatch(decrement())}>Decrement</button>
</div>
);
};
export default App;
Redux — это библиотека для управления состоянием приложений, предоставляющая централизованное хранилище для всех состояний. Основные концепции Redux включают хранилище (store), действия (actions), редюсеры (reducers), диспетчеры (dispatch) и подписки (subscriptions). Redux часто используется с React, но может быть применен и с другими библиотеками.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍23🔥5❤4
Anonymous Quiz
8%
src
77%
href
13%
link
2%
ref
👍13😁6
Webpack — это мощный инструмент сборки модулей для современных JavaScript-приложений. Он используется для упаковки и оптимизации всех ресурсов вашего приложения, таких как JavaScript, CSS, изображения и другие файлы, в один или несколько файлов, которые можно эффективно загрузить в браузер.
:plu Webpack анализирует ваше приложение, начиная с одного или нескольких входных файлов (entry points), и строит граф зависимостей всех модулей, используемых в вашем приложении.
// webpack.config.js
module.exports = {
entry: './src/index.js',
};
// webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
};
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},
};
Webpack — это инструмент для сборки модулей, который объединяет и оптимизирует различные ресурсы приложения (JavaScript, CSS, изображения и т.д.) в один или несколько файлов для загрузки в браузер. Он использует входные точки (entry points), выходные точки (output), загрузчики (loaders) и плагины (plugins) для управления процессом сборки и обеспечения оптимальной производительности.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18❤6🔥2
Anonymous Quiz
9%
13%
.class
73%
[attribute=value]
4%
:first-child
👍10❤1