🚀 Веб-разработка с нуля: Урок 10
Привет, будущие разработчики! 👋
В прошлых уроках мы изучили основы HTML, CSS, Flexbox и CSS Grid, создавая макеты и адаптивные страницы. Сегодня мы переходим к JavaScript и добавим интерактивности на наш сайт!
📌 Что такое JavaScript?
JavaScript — это язык программирования, который позволяет "оживить" ваш сайт: добавлять анимации, обрабатывать действия пользователя, взаимодействовать с сервером и многое другое.
🛠 Основы JavaScript:
1. Переменные:
Используйте
2. Функции:
Функции позволяют выполнять код по требованию.
3. События:
JavaScript может реагировать на действия пользователя, например, клики или наведение мыши.
📝 Практика:
Давайте создадим кнопку, которая будет менять цвет фона страницы при нажатии.
1. Обновите ваш HTML-файл:
2. Добавьте стили в
3. Добавьте JavaScript в
4. Проверьте результат:
Откройте страницу в браузере и нажмите на кнопку. Фон страницы будет меняться при каждом клике! 🎨
👉 В следующем уроке:
Мы изучим, как работать с DOM (Document Object Model) и динамически изменять содержимое страницы.
Подписывайтесь на канал, чтобы не пропустить новые уроки: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими результатами в комментариях! 💬
#вебразработка #javascript #html #css #программирование #rm_programmer
Привет, будущие разработчики! 👋
В прошлых уроках мы изучили основы 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