JS заканчивается там, где он перестает быть просто набором инструкций и начинает манипулировать DOM, т.е. когда скрипт обращается к элементам страницы (например, через document.getElementById), он начинает взаимодействовать с DOM для изменения структуры, стилей или содержимого веб-страницы.
Используется для создания динамических и интерактивных веб-страниц. Он работает в браузере и на сервере (с помощью Node.js). JavaScript сам по себе не имеет знаний о веб-странице или ее структуре. Он предоставляет синтаксис и базовые возможности для выполнения вычислений, обработки данных, работы с объектами и функциями.
Объявление переменных (
var, let, const). Работа с различными типами данных (строки, числа, объекты, массивы).Условные операторы (
if, else, switch). Циклы (for, while, do-while).Объявление и вызов функций. Работа с анонимными и стрелочными функциями.
Создание объектов и классов. Наследование и полиморфизм.
Это программный интерфейс для веб-документов. Он представляет структуру 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 взаимодействовать с этой структурой. Граница между ними можно представить так:
Работа с данными, логика выполнения, функции, объекты и т.д.
Представление HTML-документа как дерева объектов и возможность манипуляции этими объектами через JavaScript.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24❤3🔥1
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍31❤4😁1
HTTP-запросы (HTTP requests) отправляются для обмена данными между клиентом и сервером в сети Интернет. Они являются основным механизмом взаимодействия в веб-приложениях, обеспечивая передачу информации между веб-браузерами, веб-серверами и другими компонентами сети.
Когда пользователь вводит URL в адресную строку браузера или переходит по ссылке, браузер отправляет HTTP-запрос к серверу для получения содержимого веб-страницы.
GET / HTTP/1.1
Host: www.example.com
Веб-страницы обычно содержат ссылки на дополнительные ресурсы, такие как изображения, стили (CSS), скрипты (JavaScript), шрифты и другие файлы. Для каждого из этих ресурсов браузер отправляет отдельный HTTP-запрос.
GET /styles/main.css HTTP/1.1
Host: www.example.com
Веб-приложения часто требуют отправки данных от клиента к серверу. Это может быть регистрация пользователя, отправка формы, выполнение поиска и т.д. Такие запросы обычно используют метод POST.
POST /register HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 45
username=johndoe&password=securepassword
Веб-приложения также часто запрашивают данные с сервера для обновления содержимого страницы без её перезагрузки. Это особенно актуально для одностраничных приложений (SPA), использующих AJAX-запросы.
GET /api/user/123 HTTP/1.1
Host: www.example.com
CRUD (Create, Read, Update, Delete) операции являются основными операциями управления данными в веб-приложениях. HTTP-запросы различных методов (POST, GET, PUT, DELETE) используются для выполнения этих операций.
PUT /api/user/123 HTTP/1.1
Host: www.example.com
Content-Type: application/json
Content-Length: 60
{"username":"johndoe","email":"[email protected]"}
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍23❤3😁1
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍65❤5🔥5
CORS (Cross-Origin Resource Sharing) нужен для того, чтобы браузеры могли безопасно выполнять запросы к ресурсам на других доменах. Это важный механизм безопасности, который помогает предотвратить несанкционированный доступ к данным.
Интернет состоит из множества доменов, и иногда приложения на одном домене хотят получать данные с другого домена. Однако браузеры по умолчанию блокируют такие запросы из соображений безопасности, чтобы предотвратить атаки типа CSRF (Cross-Site Request Forgery) и XSS (Cross-Site Scripting).
Когда браузер пытается сделать запрос к ресурсу на другом домене, он сначала отправляет предварительный запрос (preflight request), чтобы узнать, разрешает ли сервер такой запрос. Этот предварительный запрос использует метод OPTIONS. Если сервер разрешает доступ, он отвечает с заголовками, которые сообщают браузеру, что запрос может быть выполнен. Основные заголовки, используемые в CORS, включают:
OPTIONS /data HTTP/1.1
Host: api.backend.com
Origin: https://frontend.com
Access-Control-Request-Method: GET
Access-Control-Request-Headers: Content-Type
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍59❤2🤯2
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍29❤5🔥1
Ключевой целью введения
async/await в JavaScript было упростить написание и чтение асинхронного кода, сделать его более линейным и похожим на синхронный. Асинхронный код, написанный с использованием коллбеков или промисов, может быть трудным для чтения и понимания, особенно когда имеется несколько вложенных асинхронных операций.
async/await делает асинхронный код более линейным, что упрощает его понимание.Пример с промисами:
function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve("some data");
}, 1000);
});
}
fetchData().then((data) => {
console.log(data);
}).catch((error) => {
console.error(error);
});Пример с async/await:
async function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve("some data");
}, 1000);
});
}
async function main() {
try {
const data = await fetchData();
console.log(data);
} catch (error) {
console.error(error);
}
}
main();Когда асинхронные операции вложены друг в друга, код становится трудным для чтения и сопровождения. Это называется "адом коллбеков" (callback hell).
async/await позволяет писать асинхронный код последовательно, без вложенности.Пример с промисами:
getData((data) => {
processData(data, (processedData) => {
saveData(processedData, (result) => {
console.log(result);
});
});
});Пример с async/await:
async function main() {
try {
const data = await getData();
const processedData = await processData(data);
const result = await saveData(processedData);
console.log(result);
} catch (error) {
console.error(error);
}
}
main();Когда используется
async/await, ошибки могут быть обработаны с использованием привычного try/catch блока, что снижает вероятность пропуска ошибок.Пример с промисами:
fetchData().then((data) => {
return processData(data);
}).then((processedData) => {
return saveData(processedData);
}).catch((error) => {
console.error(error);
});Пример с async/await:
async function main() {
try {
const data = await fetchData();
const processedData = await processData(data);
const result = await saveData(processedData);
console.log(result);
} catch (error) {
console.error(error);
}
}
main();Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍35❤6
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍65🔥8💊3❤1
Чтобы изменить направление оси flexbox-контейнера, нужно использовать свойство CSS
flex-direction. Это свойство определяет основную ось контейнера и направление размещения flex-элементов. Основная ось — горизонтальная, элементы располагаются слева направо. Это значение по умолчанию.
Основная ось — горизонтальная, элементы располагаются справа налево.
Основная ось — вертикальная, элементы располагаются сверху вниз.
Основная ось — вертикальная, элементы располагаются снизу вверх.
Горизонтальное направление (слева направо):
.container {
display: flex;
flex-direction: row; /* или просто не указывать, так как это значение по умолчанию */
}Горизонтальное направление (справа налево):
.container {
display: flex;
flex-direction: row-reverse;
}Вертикальное направление (сверху вниз):
.container {
display: flex;
flex-direction: column;
}Вертикальное направление (снизу вверх):
.container {
display: flex;
flex-direction: column-reverse;
}Пример HTML и CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Direction</title>
<style>
.container {
display: flex;
flex-direction: row; /* Измените значение на row-reverse, column, или column-reverse для проверки разных направлений */
border: 1px solid #000;
height: 200px;
}
.item {
flex: 1;
border: 1px solid #ccc;
padding: 10px;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15❤5🔥1
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍53❤3🔥3🤯1💊1
HTML предоставляет множество типов
<input> элементов, которые можно использовать для различных целей в веб-формах. Каждый тип <input> элемента определяет, какие данные могут быть введены пользователем и как эти данные будут отображаться в браузере.Однострочное текстовое поле для ввода обычного текста.
<input type="text" name="username">
Однострочное текстовое поле для ввода пароля, где введенные символы скрыты.
<input type="password" name="password">
Поле для ввода адреса электронной почты. Проверяет правильность формата введенного значения.
<input type="email" name="email">
Поле для ввода поискового запроса.
<input type="search" name="search">
Поле для ввода телефонного номера.
<input type="tel" name="phone">
Поле для ввода URL-адреса. Проверяет правильность формата введенного значения.
<input type="url" name="website">
Поле для ввода чисел. Может включать стрелки для увеличения или уменьшения значения.
<input type="number" name="quantity" min="1" max="10">
Ползунок для выбора значения из заданного диапазона.
<input type="range" name="volume" min="0" max="100">
Поле для выбора даты.
<input type="date" name="birthday">
Поле для выбора даты и времени (без часового пояса).
<input type="datetime-local" name="meeting-time">
Поле для выбора месяца и года.
<input type="month" name="expiry">
Поле для выбора недели и года.
<input type="week" name="week">
Поле для выбора времени.
<input type="time" name="alarm">
Поле для загрузки файлов с компьютера.
<input type="file" name="resume">
Поле для выбора цвета с помощью цветовой палитры.
<input type="color" name="favcolor">
Флажок для выбора/отмены выбора опции.
<input type="checkbox" name="subscribe" value="newsletter">
Радиокнопка для выбора одного значения из группы.
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
Кнопка для выполнения действия.
<input type="button" value="Click me">
Кнопка для отправки формы на сервер.
<input type="submit" value="Submit">
Кнопка для сброса формы до исходных значений.
<input type="reset" value="Reset">
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥32👍17❤6
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍70🔥5❤3
В CSS Flexbox, свойства
justify-content и align-items используются для управления выравниванием и распределением элементов внутри flex-контейнера.Свойство
justify-content определяет, как flex-элементы должны быть распределены вдоль основной оси (main axis) контейнера. Основная ось по умолчанию — это горизонтальная ось для flex-direction: row и вертикальная ось для flex-direction: column.Элементы прижаты к началу контейнера.
.container {
display: flex;
justify-content: flex-start;
} Элементы прижаты к концу контейнера.
.container {
display: flex;
justify-content: flex-end;
} Элементы выровнены по центру контейнера.
.container {
display: flex;
justify-content: center;
} Элементы равномерно распределены, первый элемент прижат к началу, последний элемент — к концу контейнера.
.container {
display: flex;
justify-content: space-between;
} Элементы равномерно распределены с равным отступом вокруг них.
.container {
display: flex;
justify-content: space-around;
} Элементы равномерно распределены с равными отступами между ними и краями контейнера.
.container {
display: flex;
justify-content: space-evenly;
} Свойство
align-items определяет, как flex-элементы должны быть выровнены вдоль поперечной оси (cross axis) контейнера. Поперечная ось перпендикулярна основной оси: вертикальная ось для flex-direction: row и горизонтальная ось для flex-direction: column.Элементы прижаты к началу поперечной оси контейнера.
.container {
display: flex;
align-items: flex-start;
} Элементы прижаты к концу поперечной оси контейнера.
.container {
display: flex;
align-items: flex-end;
} Элементы выровнены по центру поперечной оси контейнера.
.container {
display: flex;
align-items: center;
} Элементы выровнены по их базовой линии текста.
.container {
display: flex;
align-items: baseline;
} Элементы растянуты, чтобы заполнить контейнер вдоль поперечной оси (по умолчанию).
.container {
display: flex;
align-items: stretch;
} Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍22❤1
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥14🤯10❤1
Чтобы убрать маркер у списка, используйте свойство CSS
list-style-type со значением none. Это свойство применяется к элементам списка <ul> (ненумерованный список) или <ol> (нумерованный список) и убирает маркеры (буллеты) у элементов списка <li>.Пример использования HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Список без маркеров</title>
<style>
.no-marker {
list-style-type: none; /* Убирает маркеры */
padding: 0; /* Убирает отступы */
margin: 0; /* Убирает внешние отступы */
}
</style>
</head>
<body>
<ul class="no-marker">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
</body>
</html>
Пример использования CSS
.no-marker {
list-style-type: none; /* Убирает маркеры */
padding: 0; /* Убирает отступы */
margin: 0; /* Убирает внешние отступы */
}Убирает маркеры у элементов списка
<li>.Убирает внутренние отступы у списка. Это полезно, поскольку некоторые браузеры добавляют отступы по умолчанию.
Убирает внешние отступы у списка.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍20😁5❤1
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍35🔥10❤5
This media is not supported in your browser
VIEW IN TELEGRAM
Программист — лекарство от больных тимлидов, тупых багов и тех самых митов в 10 утра ☠️
Здесь собирают лучшие мемы про айтишников, чтобы спасти вашу психику от died'осов на работе.
Идеально зачиллить вечерком и скинуть друзьям: @progeri
Здесь собирают лучшие мемы про айтишников, чтобы спасти вашу психику от died'осов на работе.
Идеально зачиллить вечерком и скинуть друзьям: @progeri
💊5👍1😁1
Свойство CSS
background-size определяет размеры фонового изображения элемента. Это свойство позволяет контролировать, как фоновое изображение масштабируется и располагается внутри элемента. Исходный размер фонового изображения. Это значение по умолчанию.
background-size: auto;
Масштабирует фоновое изображение так, чтобы оно полностью покрывало контейнер. Изображение будет обрезано, чтобы сохранить свои пропорции.
background-size: cover;
Масштабирует фоновое изображение так, чтобы оно полностью помещалось внутри контейнера, сохраняя свои пропорции. Изображение будет уменьшено или увеличено, чтобы вписаться в контейнер без обрезки.
background-size: contain;
Определяет конкретные размеры изображения в пикселях.
background-size: 100px 50px;
Определяет размер изображения в процентах от размера контейнера.
background-size: 50% 25%;
Устанавливает ширину изображения, высота будет автоматически установлена для сохранения пропорций.
background-size: 100px;
Устанавливает ширину и высоту одновременно.
background-size: width height;
Масштабирование изображения с
cover.element {
background-image: url('example.jpg');
background-size: cover;
}Масштабирование изображения с
contain.element {
background-image: url('example.jpg');
background-size: contain;
}Конкретные размеры в пикселях
.element {
background-image: url('example.jpg');
background-size: 100px 50px;
}Процентные значения
.element {
background-image: url('example.jpg');
background-size: 50% 50%;
}Одно значение (ширина)
.element {
background-image: url('example.jpg');
background-size: 100px;
}Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥1
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍30🔥9❤2💊1
Для повышения приоритета конкретного правила, чтобы оно переопределяло все другие правила для данного элемента, даже если другие правила имеют более специфичные селекторы.
Чтобы применить
!important, добавьте его в конце свойства и перед точкой с запятой:selector {
property: value !important;
}В этом примере текст в параграфе с классом
important будет зеленым, несмотря на то, что есть другие правила, определяющие цвет текста для <p> и <p class="special">./* Без использования !important */
p {
color: red;
}
p.special {
color: blue;
}
/* С использованием !important */
p.important {
color: green !important;
}
Иногда вам нужно, чтобы определенное правило CSS применялось независимо от других стилей, которые могут быть установлены для этого элемента.
!important позволяет вам это сделать.В крупных проектах
!important может быть полезен для временного исправления или обхода конкретных стилей без необходимости изменять существующие файлы стилей.В этом примере текст в первом параграфе будет красным, так как применится правило
.normal. Во втором параграфе текст будет синим, так как правило .override с !important переопределяет правило .normal.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<style>
.normal {
color: red;
}
.override {
color: blue !important;
}
</style>
</head>
<body>
<p class="normal">This text is red.</p>
<p class="normal override">This text is blue.</p>
</body>
</html>
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14❤2🔥1