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

🚀 Веб-разработка с нуля: Урок 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

🚀 Веб-разработка с нуля: Урок 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

About

Blog

Apps

Platform