rm -r

🚀 Полное руководство по PHP – Глава 40

📌 Тема: Аутентификация и авторизация в PHP

Привет, кодерам! 👋 В этой главе разберём, как правильно реализовать вход пользователей и управление их правами.

### 🔑 1. Базовая аутентификация
Хранение паролей:
Всегда используйте password_hash() и password_verify()!

// Регистрация  
$hashedPassword = password_hash($_POST['password'], PASSWORD_DEFAULT);  
// Сохраняем $hashedPassword в БД  

// Вход  
$user = getUserFromDB($_POST['login']);  
if ($user && password_verify($_POST['password'], $user['password'])) {  
    $_SESSION['user_id'] = $user['id'];  
    header('Location: /dashboard.php');  
} else {  
    die('Неверный логин или пароль!');  
}

### 🛡 2. Защита сессий

session_start([  
    'cookie_secure' => true,    // Только HTTPS  
    'cookie_httponly' => true,  // Запрет JS-доступа  
    'use_strict_mode' => true   // Защита от фиксации  
]);  

// Регенерация ID сессии после входа  
session_regenerate_id(true);

### 🔐 3. Ролевая модель (авторизация)

// Проверка прав  
function checkPermission($requiredRole) {  
    if ($_SESSION['user_role'] !== $requiredRole) {  
        header('HTTP/1.0 403 Forbidden');  
        die('Доступ запрещён!');  
    }  
}  

// Использование  
checkPermission('admin');

### ⚠️ 4. Защита от bruteforce

// Ограничение попыток входа  
if ($_SESSION['login_attempts'] > 5) {  
    die('Превышено число попыток. Попробуйте позже.');  
}

### 🔥 Бонус: JWT-авторизация (для API)

use Firebase\JWT\JWT;  

// Генерация токена  
$payload = [  
    'user_id' => 123,  
    'exp' => time() + 3600 // 1 час  
];  
$jwt = JWT::encode($payload, 'your_secret_key', 'HS256');  

// Проверка токена  
try {  
    $decoded = JWT::decode($jwt, 'your_secret_key', ['HS256']);  
} catch (Exception $e) {  
    http_response_code(401);  
    die('Недействительный токен!');  
}

📢 Больше о безопасности: [Safety_Y](https://t.me/Safety_Y)
#PHP #Безопасность #Аутентификация #JWT #WebDev #Программирование

P.S. В следующей главе разберём OAuth-интеграцию! 💡

3 views07:02

rm -r

🚀 Веб-разработка с нуля: Урок 2

Привет, будущие разработчики! 👋
В прошлом уроке мы создали свою первую HTML-страницу. Сегодня мы добавим ей стилей с помощью CSS и сделаем наш сайт красивым!

📌 Что такое CSS?
CSS (Cascading Style Sheets) — это язык стилей, который отвечает за внешний вид вашего сайта: цвета, шрифты, отступы, анимации и многое другое.

🛠 Как подключить CSS к HTML?
Есть три способа:
1. Inline-стили — прямо в HTML-теге.
2. Внутри HTML-файла — с помощью тега <style>.
3. Отдельный файл — самый удобный способ.

📝 Практика:
Давайте подключим CSS к нашей странице и добавим стили.

1. Создайте файл styles.css и подключите его к HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Мой первый сайт</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый шаг в веб-разработке.</p>
</body>
</html>

2. Добавьте стили в файл styles.css:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    text-align: center;
    padding: 50px;
}

h1 {
    color: #333;
    font-size: 2.5em;
}

p {
    color: #666;
    font-size: 1.2em;
}

Сохраните файлы и откройте HTML-страницу в браузере. Теперь ваш сайт выглядит стильно! 🎨

👉 В следующем уроке:
Мы добавим интерактивности с помощью JavaScript и сделаем сайт динамичным.

Подписывайтесь на канал, чтобы не пропустить новые уроки: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими результатами в комментариях! 💬

#вебразработка #css #html #программирование #rm_programmer

4 views06:03

rm -r

🚀 Веб-разработка с нуля: Урок 3

Привет, будущие разработчики! 👋
В прошлых уроках мы создали HTML-страницу и добавили ей стили с помощью CSS. Сегодня мы сделаем наш сайт интерактивным с помощью JavaScript!

📌 Что такое JavaScript?
JavaScript — это язык программирования, который позволяет добавлять динамику на ваш сайт: анимации, обработку кликов, взаимодействие с пользователем и многое другое.

🛠 Как подключить JavaScript к HTML?
Есть два основных способа:
1. Inline-скрипт — прямо в HTML-файле с помощью тега <script>.
2. Отдельный файл — самый удобный способ.

📝 Практика:
Давайте добавим простой скрипт, который будет показывать сообщение при клике на кнопку.

1. Создайте файл script.js и подключите его к HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Мой первый сайт</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый шаг в веб-разработке.</p>
    <button id="myButton">Нажми на меня</button>
    <script src="script.js"></script>
</body>
</html>

2. Добавьте скрипт в файл script.js:

document.getElementById("myButton").addEventListener("click", function() {
    alert("Вы нажали на кнопку! 🎉");
});

Сохраните файлы и откройте HTML-страницу в браузере. Теперь при нажатии на кнопку вы увидите сообщение! 🚀

👉 В следующем уроке:
Мы начнем изучать основы работы с DOM (Document Object Model) и узнаем, как динамически изменять содержимое страницы.

Подписывайтесь на канал, чтобы не пропустить новые уроки: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими результатами в комментариях! 💬

#вебразработка #javascript #html #css #программирование #rm_programmer

5 views06:02

rm -r

https://telegra.ph/HakeryRU-Glava-0h09-TerraCore-01-12

Telegraph

Хакеры.RU. Глава 0х09. TerraCore

Это десятая глава приключенческо‑фантастической истории «Хакеры.RU», которую мы публикуем по одной главе специально для подписчиков «Хакера». Если ты еще не читаешь, начинай с первой! Подготовка к чему‑то важному занимает порой больше…

4 views06:02

rm -r

🚀 Веб-разработка с нуля: Урок 4

Привет, будущие разработчики! 👋
В прошлом уроке мы добавили интерактивности на сайт с помощью JavaScript. Сегодня мы углубимся в работу с DOM (Document Object Model) и научимся динамически изменять содержимое страницы.

📌 Что такое DOM?
DOM — это программный интерфейс, который позволяет JavaScript взаимодействовать с HTML-документом. С его помощью можно изменять структуру, стили и содержимое страницы "на лету".

🛠 Основные методы работы с DOM:
1. Выбор элементов:
- document.getElementById("id") — выбор элемента по id.
- document.querySelector(".class") — выбор элемента по классу или тегу.
2. Изменение содержимого:
- element.textContent — изменение текста внутри элемента.
- element.innerHTML — изменение HTML-содержимого.
3. Добавление и удаление элементов:
- document.createElement("div") — создание нового элемента.
- element.appendChild(newElement) — добавление элемента в DOM.

📝 Практика:
Давайте создадим кнопку, которая будет добавлять новый элемент на страницу.

1. Обновите ваш HTML-файл:

<!DOCTYPE html>
<html>
<head>
    <title>Мой первый сайт</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый шаг в веб-разработке.</p>
    <button id="addButton">Добавить элемент</button>
    <div id="container"></div>
    <script src="script.js"></script>
</body>
</html>

2. Добавьте стили в styles.css (по желанию):

#container {
    margin-top: 20px;
}

.new-element {
    background-color: #e0e0e0;
    padding: 10px;
    margin: 5px 0;
    border-radius: 5px;
}

3. Напишите скрипт в script.js:

document.getElementById("addButton").addEventListener("click", function() {
    // Создаем новый элемент
    const newElement = document.createElement("div");
    newElement.textContent = "Новый элемент добавлен!";
    newElement.classList.add("new-element");

    // Добавляем его в контейнер
    document.getElementById("container").appendChild(newElement);
});

Сохраните файлы и откройте HTML-страницу в браузере. Теперь при нажатии на кнопку "Добавить элемент" на странице будут появляться новые блоки! 🎉

👉 В следующем уроке:
Мы начнем изучать основы адаптивной верстки и сделаем наш сайт удобным для мобильных устройств.

Подписывайтесь на канал, чтобы не пропустить новые уроки: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими результатами в комментариях! 💬

#вебразработка #javascript #DOM #html #css #программирование #rm_programmer

6 views06:02

rm -r

🚀 Веб-разработка с нуля: Урок 5

Привет, будущие разработчики! 👋
В прошлом уроке мы научились работать с DOM и динамически изменять содержимое страницы. Сегодня мы поговорим о адаптивной верстке — сделаем наш сайт удобным для просмотра на любых устройствах: от смартфонов до компьютеров.

📌 Что такое адаптивная верстка?
Адаптивная верстка — это подход, при котором сайт автоматически подстраивается под размер экрана устройства. Это достигается с помощью медиазапросов (Media Queries) в CSS.

🛠 Основы адаптивной верстки:
1. Метатег viewport:
Добавьте этот тег в <head> вашего HTML-файла, чтобы сайт корректно отображался на мобильных устройствах:

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Медиазапросы:
Медиазапросы позволяют применять стили в зависимости от ширины экрана. Например:

   @media (max-width: 768px) {
       body {
           background-color: lightblue;
       }
   }

📝 Практика:
Давайте сделаем наш сайт адаптивным.

1. Обновите ваш HTML-файл:

<!DOCTYPE html>
<html>
<head>
    <title>Мой первый сайт</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый шаг в веб-разработке.</p>
    <button id="addButton">Добавить элемент</button>
    <div id="container"></div>
    <script src="script.js"></script>
</body>
</html>

2. Добавьте адаптивные стили в styles.css:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    text-align: center;
    padding: 20px;
}

h1 {
    color: #333;
    font-size: 2.5em;
}

p {
    color: #666;
    font-size: 1.2em;
}

#container {
    margin-top: 20px;
}

.new-element {
    background-color: #e0e0e0;
    padding: 10px;
    margin: 5px 0;
    border-radius: 5px;
}

/* Медиазапрос для мобильных устройств */
@media (max-width: 768px) {
    h1 {
        font-size: 2em;
    }

    p {
        font-size: 1em;
    }

    .new-element {
        padding: 8px;
        font-size: 0.9em;
    }
}

3. Проверьте результат:
Откройте сайт на разных устройствах или измените размер окна браузера. Вы увидите, как стили адаптируются под размер экрана! 📱💻

👉 В следующем уроке:
Мы начнем изучать Flexbox — мощный инструмент для создания гибких макетов.

Подписывайтесь на канал, чтобы не пропустить новые уроки: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими результатами в комментариях! 💬

#вебразработка #адаптивнаяверстка #css #html #программирование #rm_programmer

6 views06:04

rm -r

🚀 Веб-разработка с нуля: Урок 6

Привет, будущие разработчики! 👋
В прошлом уроке мы познакомились с адаптивной версткой и научились делать сайты удобными для любых устройств. Сегодня мы изучим Flexbox — мощный инструмент для создания гибких и современных макетов.

📌 Что такое Flexbox?
Flexbox (Flexible Box Layout) — это модуль CSS, который позволяет легко управлять расположением элементов на странице: выравнивание, распределение пространства, порядок отображения и многое другое.

🛠 Основы Flexbox:
1. Flex-контейнер:
Чтобы сделать элемент flex-контейнером, добавьте свойство:

   display: flex;

2. Основные свойства Flexbox:
- justify-content — выравнивание по горизонтали.
- align-items — выравнивание по вертикали.
- flex-direction — направление элементов (ряд или колонка).
- flex-wrap — перенос элементов на новую строку.

📝 Практика:
Давайте создадим простой макет с использованием Flexbox.

1. Обновите ваш HTML-файл:

<!DOCTYPE html>
<html>
<head>
    <title>Мой первый сайт</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

2. Добавьте стили с Flexbox в styles.css:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    justify-content: space-between; /* Равномерное распределение */
    align-items: center; /* Выравнивание по центру */
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    margin: 20px;
}

.item {
    background-color: #007bff;
    color: #fff;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    font-size: 1.5em;
    flex: 1; /* Равномерное распределение пространства */
    margin: 0 10px; /* Отступы между элементами */
}

3. Проверьте результат:
Откройте страницу в браузере. Вы увидите, как элементы равномерно распределились по контейнеру и выровнялись по центру! 🎉

👉 В следующем уроке:
Мы углубимся в изучение Flexbox и создадим более сложные макеты.

Подписывайтесь на канал, чтобы не пропустить новые уроки: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими результатами в комментариях! 💬

#вебразработка #flexbox #css #html #программирование #rm_programmer

5 views06:03

rm -r

🚀 Веб-разработка с нуля: Урок 7

Привет, будущие разработчики! 👋
В прошлом уроке мы познакомились с основами Flexbox и создали простой макет. Сегодня мы углубимся в изучение Flexbox и создадим более сложный и функциональный макет.

📌 Что нового мы изучим?
1. Управление порядком элементов:
Свойство order позволяет менять порядок отображения элементов.
2. Гибкость элементов:
Свойства flex-grow, flex-shrink и flex-basis управляют тем, как элементы растягиваются или сжимаются.
3. Многострочные контейнеры:
Свойство flex-wrap позволяет элементам переноситься на новую строку.

📝 Практика:
Давайте создадим макет с несколькими элементами, которые будут менять порядок и адаптироваться под размер экрана.

1. Обновите ваш HTML-файл:

<!DOCTYPE html>
<html>
<head>
    <title>Мой первый сайт</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
    </div>
</body>
</html>

2. Добавьте стили с Flexbox в styles.css:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-wrap: wrap; /* Перенос элементов на новую строку */
    justify-content: space-between; /* Равномерное распределение */
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    margin: 20px;
}

.item {
    background-color: #007bff;
    color: #fff;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    font-size: 1.5em;
    margin: 10px;
    flex: 1 1 200px; /* Гибкость элементов */
}

.item-1 {
    order: 2; /* Меняем порядок */
}

.item-2 {
    order: 1;
}

.item-3 {
    order: 3;
}

.item-4 {
    order: 5;
}

.item-5 {
    order: 4;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .item {
        flex: 1 1 100%; /* Элементы занимают всю ширину */
    }
}

3. Проверьте результат:
Откройте страницу в браузере и измените размер окна. Вы увидите, как элементы меняют порядок и адаптируются под размер экрана! 📱💻

👉 В следующем уроке:
Мы начнем изучать CSS Grid — еще более мощный инструмент для создания сложных макетов.

Подписывайтесь на канал, чтобы не пропустить новые уроки: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими результатами в комментариях! 💬

#вебразработка #flexbox #css #html #программирование #rm_programmer

5 views06:02

rm -r

🚀 Веб-разработка с нуля: Урок 8

Привет, будущие разработчики! 👋
В прошлом уроке мы углубились в Flexbox и создали адаптивный макет. Сегодня мы познакомимся с CSS Grid — мощным инструментом для создания сложных и гибких макетов.

📌 Что такое CSS Grid?
CSS Grid — это система для создания двумерных макетов. В отличие от Flexbox, который работает в одном направлении (ряд или колонка), Grid позволяет управлять как строками, так и столбцами одновременно.

🛠 Основы CSS Grid:
1. Создание сетки:
Используйте свойство display: grid; для контейнера.
2. Определение столбцов и строк:
- grid-template-columns — задает количество и размер столбцов.
- grid-template-rows — задает количество и размер строк.
3. Размещение элементов:
- grid-column и grid-row — определяют, где будет расположен элемент.

📝 Практика:
Давайте создадим простой макет с использованием CSS Grid.

1. Обновите ваш HTML-файл:

<!DOCTYPE html>
<html>
<head>
    <title>Мой первый сайт</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
    </div>
</body>
</html>

2. Добавьте стили с CSS Grid в styles.css:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 столбца */
    grid-template-rows: repeat(2, 150px); /* 2 строки */
    gap: 10px; /* Расстояние между элементами */
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    margin: 20px;
}

.item {
    background-color: #007bff;
    color: #fff;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    font-size: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-1 {
    grid-column: 1 / 3; /* Занимает первые два столбца */
}

.item-2 {
    grid-column: 3 / 4; /* Занимает третий столбец */
    grid-row: 1 / 3; /* Занимает две строки */
}

.item-3 {
    grid-column: 1 / 2; /* Занимает первый столбец */
    grid-row: 2 / 3; /* Занимает вторую строку */
}

.item-4 {
    grid-column: 2 / 3; /* Занимает второй столбец */
    grid-row: 2 / 3; /* Занимает вторую строку */
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr; /* Один столбец */
        grid-template-rows: auto; /* Автоматическая высота строк */
    }

    .item {
        grid-column: 1 / 2; /* Все элементы занимают один столбец */
        grid-row: auto; /* Автоматическое размещение строк */
    }
}

3. Проверьте результат:
Откройте страницу в браузере и измените размер окна. Вы увидите, как элементы адаптируются под размер экрана, создавая красивый и функциональный макет! 📱💻

👉 В следующем уроке:
Мы углубимся в изучение CSS Grid и создадим более сложные макеты.

Подписывайтесь на канал, чтобы не пропустить новые уроки: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими результатами в комментариях! 💬

#вебразработка #CSSGrid #css #html #программирование #rm_programmer

6 views06:02

rm -r

🚀 Веб-разработка с нуля: Урок 9

Привет, будущие разработчики! 👋
В прошлом уроке мы познакомились с CSS Grid и создали простой макет. Сегодня мы углубимся в изучение Grid и создадим более сложный и функциональный макет, который можно использовать для реальных проектов.

📌 Что нового мы изучим?
1. Именованные области:
С помощью grid-template-areas можно задавать именованные области для элементов.
2. Автоматическое размещение:
Свойство grid-auto-flow управляет тем, как элементы заполняют сетку.
3. Минимальная и максимальная высота строк:
Используйте minmax() для гибкости строк и столбцов.

📝 Практика:
Давайте создадим макет страницы с шапкой, боковой панелью, основным содержимым и футером.

1. Обновите ваш HTML-файл:

<!DOCTYPE html>
<html>
<head>
    <title>Мой первый сайт</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header class="header">Шапка</header>
        <aside class="sidebar">Боковая панель</aside>
        <main class="content">Основное содержимое</main>
        <footer class="footer">Футер</footer>
    </div>
</body>
</html>

2. Добавьте стили с CSS Grid в styles.css:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

.container {
    display: grid;
    grid-template-columns: 200px 1fr; /* Боковая панель и основное содержимое */
    grid-template-rows: 80px 1fr 60px; /* Шапка, содержимое, футер */
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
    gap: 10px; /* Расстояние между элементами */
    height: 100vh; /* На всю высоту экрана */
    padding: 10px;
}

.header {
    grid-area: header;
    background-color: #007bff;
    color: #fff;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    font-size: 1.5em;
}

.sidebar {
    grid-area: sidebar;
    background-color: #333;
    color: #fff;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    font-size: 1.2em;
}

.content {
    grid-area: content;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    font-size: 1.2em;
}

.footer {
    grid-area: footer;
    background-color: #007bff;
    color: #fff;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    font-size: 1.2em;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr; /* Один столбец */
        grid-template-rows: 80px auto 1fr 60px; /* Автоматическая высота для боковой панели */
        grid-template-areas:
            "header"
            "sidebar"
            "content"
            "footer";
    }
}

3. Проверьте результат:
Откройте страницу в браузере и измените размер окна. Вы увидите, как макет адаптируется под разные устройства, сохраняя свою структуру! 📱💻

👉 В следующем уроке:
Мы начнем изучать JavaScript более глубоко и добавим интерактивности на наш сайт.

Подписывайтесь на канал, чтобы не пропустить новые уроки: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими результатами в комментариях! 💬

#вебразработка #CSSGrid #css #html #программирование #rm_programmer

7 views06:03

rm -r

🚀 Веб-разработка с нуля: Урок 10

Привет, будущие разработчики! 👋
В прошлых уроках мы изучили основы HTML, CSS, Flexbox и CSS Grid, создавая макеты и адаптивные страницы. Сегодня мы переходим к JavaScript и добавим интерактивности на наш сайт!

📌 Что такое JavaScript?
JavaScript — это язык программирования, который позволяет "оживить" ваш сайт: добавлять анимации, обрабатывать действия пользователя, взаимодействовать с сервером и многое другое.

🛠 Основы JavaScript:
1. Переменные:
Используйте let, const или var для хранения данных.
2. Функции:
Функции позволяют выполнять код по требованию.
3. События:
JavaScript может реагировать на действия пользователя, например, клики или наведение мыши.

📝 Практика:
Давайте создадим кнопку, которая будет менять цвет фона страницы при нажатии.

1. Обновите ваш HTML-файл:

<!DOCTYPE html>
<html>
<head>
    <title>Мой первый сайт</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Привет, мир!</h1>
        <button id="colorButton">Изменить цвет фона</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. Добавьте стили в styles.css:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    text-align: center;
}

h1 {
    color: #333;
    font-size: 2.5em;
}

button {
    padding: 10px 20px;
    font-size: 1.2em;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

3. Добавьте JavaScript в script.js:

const button = document.getElementById("colorButton");
const colors = ["#ffcccc", "#ccffcc", "#ccccff", "#ffccff", "#ccffff"];
let currentIndex = 0;

button.addEventListener("click", function() {
    document.body.style.backgroundColor = colors[currentIndex];
    currentIndex = (currentIndex + 1) % colors.length; // Переход к следующему цвету
});

4. Проверьте результат:
Откройте страницу в браузере и нажмите на кнопку. Фон страницы будет меняться при каждом клике! 🎨

👉 В следующем уроке:
Мы изучим, как работать с DOM (Document Object Model) и динамически изменять содержимое страницы.

Подписывайтесь на канал, чтобы не пропустить новые уроки: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими результатами в комментариях! 💬

#вебразработка #javascript #html #css #программирование #rm_programmer

5 views06:00

rm -r

https://telegra.ph/HakeryRU-Glava-0h0A-V-novuyu-zhizn-01-12-2

Telegraph

Хакеры.RU. Глава 0х0A. В новую жизнь

Это одиннадцатая глава приключенческо‑фантастической истории «Хакеры.RU». Каждую субботу мы публикуем по одной главе специально для подписчиков «Хакера». Если ты еще не читаешь, начинай с первой! Откружила метелями и растаяла зима…

5 views06:03

rm -r

🚀 Веб-разработка с нуля: Урок 11

Привет, кодерам! 👨💻👩💻
Сегодня мы сделаем настоящий прорыв — научимся динамически изменять содержимое страницы с помощью JavaScript и DOM!

🔥 Что будем изучать:
1. Глубокую работу с DOM-элементами
2. Создание и удаление элементов "на лету"
3. Обработку пользовательского ввода

💻 Практический пример:
Создадим интерактивный список дел (To-Do List)

1. Обновляем HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Мой To-Do List</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Мой список дел</h1>
        <div class="input-group">
            <input type="text" id="taskInput" placeholder="Новая задача...">
            <button id="addButton">Добавить</button>
        </div>
        <ul id="taskList"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. Добавляем стили (styles.css):

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    text-align: center;
}

.input-group {
    display: flex;
    margin-bottom: 20px;
}

#taskInput {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

button {
    padding: 10px 15px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px;
}

button:hover {
    background-color: #218838;
}

#taskList {
    list-style: none;
    padding: 0;
}

#taskList li {
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #eee;
    margin-bottom: 5px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.delete-btn {
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 5px 10px;
    cursor: pointer;
}

3. Пишем JavaScript (script.js):

document.addEventListener('DOMContentLoaded', function() {
    const taskInput = document.getElementById('taskInput');
    const addButton = document.getElementById('addButton');
    const taskList = document.getElementById('taskList');

    // Добавление новой задачи
    addButton.addEventListener('click', function() {
        if (taskInput.value.trim() !== '') {
            addTask(taskInput.value);
            taskInput.value = '';
        }
    });

    // Добавление по Enter
    taskInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter' && taskInput.value.trim() !== '') {
            addTask(taskInput.value);
            taskInput.value = '';
        }
    });

    function addTask(taskText) {
        const li = document.createElement('li');
        
        const taskSpan = document.createElement('span');
        taskSpan.textContent = taskText;
        
        const deleteBtn = document.createElement('button');
        deleteBtn.textContent = 'Удалить';
        deleteBtn.className = 'delete-btn';
        
        deleteBtn.addEventListener('click', function() {
            li.remove();
        });
        
        li.appendChild(taskSpan);
        li.appendChild(deleteBtn);
        taskList.appendChild(li);
    }
});

🎯 Что мы получили:
✅ Рабочий список задач с добавлением элементов
✅ Возможность удаления задач
✅ Красивый и удобный интерфейс
✅ Обработку нажатия Enter

📌 Советы по улучшению:
1. Добавьте localStorage для сохранения задач
2. Реализуйте отметку выполненных задач
3. Добавьте анимации при добавлении/удалении

👉 В следующем уроке:
Мы научимся сохранять данные между сеансами с помощью localStorage!

Подписывайтесь: [t.me/rm_programmer](https://t.me/rm_programmer)
Пишите в комментариях — какие функции добавить в список дел? 💬

6 views06:03

rm -r

#вебразработка #javascript #DOM #программирование #учебныйпроект

rm -r

Programmer - Курсы программирования. Канал для тех, кто не хочет остаться на задворках цивилизации.

6 views06:03

rm -r

🚀 Веб-разработка с нуля: Урок 12 - Сохраняем данные с localStorage

Привет, будущие профи! 👨💻👩💻
Сегодня сделаем наш To-Do List по-настоящему полезным — научимся сохранять задачи между перезагрузками страницы!

🔥 Что нового узнаем:
1. Работу с localStorage браузера
2. JSON-методы (stringify/parse)
3. Загрузку данных при старте приложения

💾 Основы localStorage:
- Хранит данные в формате ключ-значение
- Данные сохраняются после закрытия браузера
- Лимит около 5-10MB на домен

💻 Модернизируем наш To-Do List:

1. Обновляем JavaScript (script.js):

document.addEventListener('DOMContentLoaded', function() {
    const taskInput = document.getElementById('taskInput');
    const addButton = document.getElementById('addButton');
    const taskList = document.getElementById('taskList');

    // Загружаем задачи при старте
    loadTasks();

    // Добавление новой задачи
    addButton.addEventListener('click', addTaskFromInput);
    taskInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') addTaskFromInput();
    });

    function addTaskFromInput() {
        if (taskInput.value.trim() !== '') {
            addTask(taskInput.value);
            taskInput.value = '';
            saveTasks();
        }
    }

    function addTask(taskText, isCompleted = false) {
        const li = document.createElement('li');
        if (isCompleted) li.classList.add('completed');
        
        const taskSpan = document.createElement('span');
        taskSpan.textContent = taskText;
        
        const completeBtn = document.createElement('button');
        completeBtn.textContent = isCompleted ? '✓' : '◻️';
        completeBtn.className = 'complete-btn';
        
        const deleteBtn = document.createElement('button');
        deleteBtn.textContent = '×';
        deleteBtn.className = 'delete-btn';
        
        completeBtn.addEventListener('click', function() {
            li.classList.toggle('completed');
            completeBtn.textContent = li.classList.contains('completed') ? '✓' : '◻️';
            saveTasks();
        });
        
        deleteBtn.addEventListener('click', function() {
            li.remove();
            saveTasks();
        });
        
        li.appendChild(completeBtn);
        li.appendChild(taskSpan);
        li.appendChild(deleteBtn);
        taskList.appendChild(li);
    }

    function saveTasks() {
        const tasks = [];
        document.querySelectorAll('#taskList li').forEach(li => {
            tasks.push({
                text: li.querySelector('span').textContent,
                completed: li.classList.contains('completed')
            });
        });
        localStorage.setItem('tasks', JSON.stringify(tasks));
    }

    function loadTasks() {
        const savedTasks = localStorage.getItem('tasks');
        if (savedTasks) {
            JSON.parse(savedTasks).forEach(task => {
                addTask(task.text, task.completed);
            });
        }
    }
});

2. Добавляем новые стили:

.completed {
    text-decoration: line-through;
    opacity: 0.7;
}

.complete-btn {
    background: none;
    border: 1px solid #28a745;
    color: #28a745;
    border-radius: 3px;
    margin-right: 8px;
    cursor: pointer;
}

.delete-btn {
    background: none;
    border: 1px solid #dc3545;
    color: #dc3545;
    border-radius: 3px;
    margin-left: 8px;
}

li:hover .delete-btn {
    background-color: #dc3545;
    color: white;
}

li:hover .complete-btn {
    background-color: #28a745;
    color: white;
}

🎯 Что улучшили:
✅ Сохранение задач между сеансами
✅ Отметку выполненных задач
✅ Красивые интерактивные кнопки
✅ Загрузку состояния при открытии

💡 Полезные советы:
1. Всегда обрабатывайте ошибки при работе с localStorage
2. Используйте JSON для сложных структур данных
3. Учитывайте лимит хранилища (5MB обычно)

👉 В следующем уроке:
Создадим модальное окно для редактирования задач!

Подписывайтесь: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими To-Do листами в комментариях! 💬

6 views06:00

rm -r

#вебразработка #javascript #localStorage #программирование #учебныйпроект

rm -r

Programmer - Курсы программирования. Канал для тех, кто не хочет остаться на задворках цивилизации.

5 views06:00

rm -r

👉PHP и MySQL с Нуля до Гуру
Видеокурс "PHP и MySQL с Нуля до Гуру"

Здравствуйте, дорогие мои читатели!

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

Ответьте честно себе на следующие 2 вопроса: "Вы хорошо знаете PHP и MySQL?", "Вы сможете создать крупный портал, например, социальную сеть с использованием PHP и MySQL?". Если Вы дважды ответите "Да", то можете дальше не читать. Но уверен, большинство из Вас, либо вообще не знают PHP, либо не умеют его применять для создания серьёзных сайтов.

К счастью, не всё так плохо. Недавно я приобрёл Видеокурс "PHP и MySQL с Нуля до Гуру" (https://Hottab.programsite.ru/php) от Михаила Русакова. Автор известный (масса положительных отзывов на его стене: http://vk.com/myrusakov), поэтому я решил купить его курс. И я не пожалел! Курс отличный!

Что конкретно в нём разбирается? Во-первых, это все базовые вещи, которые обязан знать любой программист, и которые очень редко знают новички. Также разбираются все основы языка PHP (это для тех, кто ещё мало знаком с этим языком). Разбирается масса практических примеров (например, регистрация пользователей, поиск по сайту, реализация опроса на сайте и многое другое). Безусловно, подробно разбирается работа с базой данных через PHP с помощью ПО MySQL. Не обошлось и без "связки PHP и HTML" и подходов к этому: MVC, компонентный подход (он же блочный), шаблонизатор.

Но главная особенность курса, и это именно то, что меня моментально подвигло его купить - это реальное создание движка с нуля. Особенно меня удивил отличный способ Михаила создавать движки для сайтов, его необычный подход. Это действительно то, чего раньше я нигде не встречал. Безусловно, способ имеет недостатки (о чём и говорится в курсе), но всё равно - это лучшее, что мне доводилось видеть.

В общем, я очень рад, что приобрёл данный курс, и смело могу рекомендовать его тебе, мой дорогой читатель. Более подробная информация о курсе: https://Hottab.programsite.ru/php

Уверен, Вам Видеокурс "PHP и MySQL с Нуля до Гуру" понравится так же, как и мне.

8 views05:04

rm -r

🚀 Веб-разработка с нуля: Урок 13 - Создаем модальное окно

Привет, разработчики! 👨💻👩💻
Сегодня научимся создавать профессиональные модальные окна для нашего To-Do List.

🔥 Что нового изучим:
1. Создание модальных окон на чистом CSS/JS
2. Работу с CSS-анимациями
3. Лучшие практики UX для модальных окон

💻 Практика: добавляем редактирование задач

1. Обновляем HTML:

<!-- Добавляем перед закрывающим </body> -->
<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>Редактировать задачу</h2>
    <input type="text" id="editInput">
    <button id="saveEdit">Сохранить</button>
  </div>
</div>

2. Добавляем новые стили:

.modal {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  animation: fadeIn 0.3s;
}

.modal-content {
  background: white;
  margin: 15% auto;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 500px;
  animation: slideDown 0.3s;
}

.close {
  float: right;
  font-size: 24px;
  cursor: pointer;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideDown {
  from { 
    transform: translateY(-50px);
    opacity: 0;
  }
  to { 
    transform: translateY(0);
    opacity: 1;
  }
}

3. Модернизируем JavaScript:

// Добавляем в script.js
const modal = document.getElementById('modal');
const editInput = document.getElementById('editInput');
const saveEditBtn = document.getElementById('saveEdit');
let currentEditingTask = null;

// Показываем модальное окно при клике на задачу
document.querySelectorAll('#taskList li span').forEach(span => {
  span.addEventListener('click', function() {
    currentEditingTask = this;
    editInput.value = this.textContent;
    modal.style.display = 'block';
  });
});

// Закрытие модального окна
document.querySelector('.close').addEventListener('click', closeModal);
window.addEventListener('click', function(e) {
  if (e.target == modal) closeModal();
});

saveEditBtn.addEventListener('click', function() {
  if (editInput.value.trim() !== '') {
    currentEditingTask.textContent = editInput.value;
    closeModal();
    saveTasks();
  }
});

function closeModal() {
  modal.style.display = 'none';
  editInput.value = '';
}

🎯 Что мы получили:
✅ Плавные анимации открытия/закрытия
✅ Возможность редактирования задач
✅ Затенение фона при открытии модалки
✅ Закрытие по клику вне окна

💡 Профессиональные советы:
1. Всегда добавляйте анимации для плавности интерфейса
2. Реализуйте закрытие по ESC:

document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') closeModal();
});

3. Фокусируйте input при открытии:

editInput.focus();

👉 В следующем уроке:
Создадим drag&drop сортировку для нашего списка задач!

Подписывайтесь: [t.me/rm_programmer](https://t.me/rm_programmer)
Пишите, какие элементы интерфейса хотите научиться создавать! 💬

#вебразработка #javascript #модальноеокно #CSSанимации #UX

11 views06:02

rm -r

🚀 Веб-разработка с нуля: Урок 14 - Drag&Drop сортировка

Привет, будущие гуру интерфейсов! 👨💻👩💻
Сегодня добавим в наш To-Do List профессиональную сортировку задач перетаскиванием — как в лучших менеджерах задач!

🔥 Что нового освоим:
1. HTML5 Drag and Drop API
2. Работу с событиями перетаскивания
3. Сохранение порядка задач в localStorage

🖱 Основные события Drag&Drop:
- dragstart — начало перетаскивания
- dragover — элемент над областью сброса
- drop — сброс элемента
- dragend — завершение перетаскивания

💻 Реализуем сортировку:

1. Обновляем HTML (добавляем атрибуты draggable):

<ul id="taskList">
  <!-- Для каждого li добавляем -->
  <li draggable="true" data-id="1">...</li>
</ul>

2. Добавляем стили для перетаскивания:

/* В styles.css */
li[draggable="true"] {
  cursor: grab;
}

li.dragging {
  opacity: 0.5;
  background: #f8f9fa;
  border: 2px dashed #007bff;
}

li.drag-over {
  border-top: 2px solid #28a745;
}

3. Модернизируем JavaScript:

// В script.js
let draggedItem = null;

function setupDragAndDrop() {
  const items = document.querySelectorAll('#taskList li');
  
  items.forEach(item => {
    item.addEventListener('dragstart', function() {
      draggedItem = this;
      setTimeout(() => this.classList.add('dragging'), 0);
    });

    item.addEventListener('dragend', function() {
      this.classList.remove('dragging');
    });

    item.addEventListener('dragover', function(e) {
      e.preventDefault();
      this.classList.add('drag-over');
    });

    item.addEventListener('dragleave', function() {
      this.classList.remove('drag-over');
    });

    item.addEventListener('drop', function(e) {
      e.preventDefault();
      this.classList.remove('drag-over');
      
      if (draggedItem !== this) {
        const allItems = document.querySelectorAll('#taskList li');
        const thisIndex = [...allItems].indexOf(this);
        const draggedIndex = [...allItems].indexOf(draggedItem);
        
        if (draggedIndex < thisIndex) {
          this.after(draggedItem);
        } else {
          this.before(draggedItem);
        }
        
        saveTasks();
      }
    });
  });
}

// Вызываем после загрузки задач
loadTasks();
setupDragAndDrop();

4. Обновляем функции save/load:

function saveTasks() {
  const tasks = [];
  document.querySelectorAll('#taskList li').forEach(li => {
    tasks.push({
      text: li.querySelector('span').textContent,
      completed: li.classList.contains('completed'),
      id: Date.now() + Math.random() // Уникальный ID
    });
  });
  localStorage.setItem('tasks', JSON.stringify(tasks));
}

function loadTasks() {
  const savedTasks = localStorage.getItem('tasks');
  if (savedTasks) {
    taskList.innerHTML = '';
    JSON.parse(savedTasks).forEach(task => {
      addTask(task.text, task.completed, task.id);
    });
  }
}

🎯 Что мы получили:
✅ Плавную сортировку перетаскиванием
✅ Визуальные подсказки при перетаскивании
✅ Сохранение порядка между сеансами
✅ Полноценный менеджер задач уровня PRO

💡 Профессиональные лайфхаки:
1. Добавьте ограничение перетаскивания по вертикали:

item.addEventListener('dragover', function(e) {
  e.preventDefault();
  const dragY = e.clientY;
  const rect = this.getBoundingClientRect();
  const middleY = rect.top + rect.height / 2;
  
  if (dragY < middleY) {
    this.classList.add('drag-over-top');
  } else {
    this.classList.remove('drag-over-top');
  }
});

2. Используйте более плавную анимацию:

li {
  transition: transform 0.2s, opacity 0.2s;
}

👉 В следующем уроке:
Превратим наше приложение в PWA (Progressive Web App) с оффлайн-работой!

Подписывайтесь: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими реализациями в комментариях! 💬

#вебразработка #javascript #DragAndDrop #UI #UX

4 views06:01

rm -r

🚀 Веб-разработка с нуля: Урок 15 - Превращаем To-Do List в PWA

Привет, будущие PWA-разработчики! 👨💻👩💻
Сегодня сделаем наш To-Do List полноценным Progressive Web App, который будет работать даже оффлайн!

🔥 Что нового узнаем:
1. Что такое PWA и его основные компоненты
2. Создание manifest.json
3. Работу с Service Worker

📱 Основные характеристики PWA:
✓ Работает оффлайн
✓ Устанавливается на устройство
✓ Быстрая загрузка

💻 Практика: преобразуем приложение

1. Создаем manifest.json:

{
  "name": "Мой To-Do List",
  "short_name": "ToDo",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#007bff",
  "icons": [
    {
      "src": "icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

2. Добавляем в head HTML:

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#007bff">

3. Создаем sw.js (Service Worker):

const CACHE_NAME = 'todo-v1';
const ASSETS = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  '/icon-192.png',
  '/icon-512.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(ASSETS))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

4. Регистрируем Service Worker в script.js:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('ServiceWorker зарегистрирован');
      })
      .catch(err => {
        console.log('Ошибка регистрации:', err);
      });
  });
}

🔧 Что мы добавили:
✅ Манифест для установки приложения
✅ Иконки для разных устройств
✅ Service Worker для оффлайн-работы
✅ Кеширование основных ресурсов

💡 Профессиональные советы:
1. Для генерации иконок используйте https://www.pwabuilder.com/imageGenerator
2. Добавьте splash screen:

// В manifest.json
"splash_pages": null

3. Оптимизируйте кеширование:

// В sw.js
const ASSETS = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  '/icon-192.png',
  '/icon-512.png'
];

👉 В следующем уроке:
Добавим синхронизацию между устройствами через Firebase!

Подписывайтесь: [t.me/rm_programmer](https://t.me/rm_programmer)
Пробовали ли вы уже PWA? Делитесь в комментариях! 💬

#вебразработка #PWA #javascript #ServiceWorker #программирование

3 views06:02

About

Blog

Apps

Platform