Программирование с нуля

🎉 Исследуем мир JavaScript: Создаем интерактивный таймер! ⏲️

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

### Почему JavaScript?
JavaScript является неотъемлемой частью веб-разработки. С его помощью можно создавать анимации, обрабатывать пользовательские действия, отправлять запросы на сервер без перезагрузки страницы и многое другое.

🚀 Задача сегодня: Создать простой таймер обратного отсчета на JavaScript.

### Шаги для создания таймера:
1. HTML: Сначала создайте базовую разметку.
2. CSS: Добавьте стили для красивого оформления.
3. JavaScript: Напишем логику таймера.

📝 Код HTML (index.html):


<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Таймер обратного отсчета</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="timer">
        <h1 id="countdown">00:00:10</h1>
        <button onclick="startTimer()">Старт</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

🎨 Код CSS (styles.css):


#timer {
    text-align: center;
    margin-top: 20vh;
    font-family: Arial, sans-serif;
}

#countdown {
    font-size: 3em;
    color: #333;
}

button {
    font-size: 1em;
    padding: 5px 15px;
    color: white;
    background-color: #007BFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

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

🔧 Код JavaScript (script.js):


let count = 10;
let interval;

function startTimer() {
    interval = setInterval(updateCountdown, 1000);
}

function updateCountdown() {
    const countdownElement = document.getElementById("countdown");
    countdownElement.textContent = `00:00:${count}`;
    if (count === 0) {
        clearInterval(interval);
        countdownElement.textContent = "Время вышло!";
    }
    count--;
}

Теперь откройте файл index.html в браузере, и вы увидите ваш таймер обратного отсчета с кнопкой "Старт". Нажмите кнопку, и таймер начнет отсчет!

Это прекрасный пример того, как можно легко и интересно познакомиться с основами JavaScript. 🌟

Приглашаю вас экспериментировать с кодом: измените время отсчета, добавьте кнопки "Пауза" и "Сброс", или даже создайте визуальные эффекты для завершения отсчета.

Удачного кодинга, и помните, что каждая строка кода приближает вас к мастерству в программировании!

#JavaScript #ВебРазработка #ПрограммированиеСНуля #ИнтерактивныеWebСтраницы

❤1

63 views11:46

Программирование с нуля

🎉 Погружаемся в мир JavaScript: Пишем наш первый скрипт! 🖥️

Привет, участники канала "Программирование с нуля"! Сегодня мы начнем наше путешествие в одну из самых популярных областей веб-разработки - программирование на JavaScript. Этот язык не только является неотъемлемой частью веб-разработки, но и открывает дверь к созданию интерактивных веб-сайтов. Давайте сегодня напишем наш первый JavaScript скрипт - простой таймер!

### Что такое JavaScript?

JavaScript - это динамичный язык программирования, который при выполнении в браузере делает веб-страницы интерактивными. Он позволяет разработчикам добавлять анимированные обновления, интерактивные карты, анимированные 2D и 3D графики, прокручиваемые видео и многое другое.

### Задание: Создаем таймер

Мы напишем простой скрипт, который позволит пользователю задавать таймер и видеть, как время обратного отсчета уменьшается.

📝 HTML код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Простой Таймер</title>
</head>
<body>
    <input id="time" type="number" min="1" placeholder="Введите время в секундах">
    <button onclick="startTimer()">Запустить таймер</button>
    <h1 id="countdown"></h1>

    <script src="timer.js"></script>
</body>
</html>

📝 JavaScript код (timer.js):

function startTimer() {
    let timeInput = document.getElementById('time').value;
    let countdownElement = document.getElementById('countdown');

    countdownElement.innerHTML = `Осталось времени: ${timeInput} секунд`;

    let interval = setInterval(() => {
        timeInput -= 1;
        countdownElement.innerHTML = `Осталось времени: ${timeInput} секунд`;
        if (timeInput <= 0) {
            clearInterval(interval);
            countdownElement.innerHTML = "Время вышло!";
        }
    }, 1000);
}

### Как это работает?
- HTML создает пользовательский интерфейс, включая поле для ввода времени и кнопку для запуска таймера.
- JavaScript скрипт делает страницу интерактивной. Он считывает значение, введенное в поле, и использует функцию setInterval для уменьшения времени каждую секунду.

### Что дальше?
Поиграйте с кодом! Попробуйте добавить звуковое уведомление или визуальные эффекты при завершении таймера. Экспериментирование — лучший способ учиться.

Надеюсь, этот небольшой проект вдохновит вас продолжить изучение JavaScript и открывать новые возможности для создания интерактивных и захватывающих веб-страниц.

Не забывайте делиться своими успехами и задавать вопросы. Вместе мы сильнее!

#ПрограммированиеСНуля #JavaScript #ВебРазработка #Интерактивность #ОбучениеПрограммированию

76 viewsedited 10:03

Программирование с нуля

🌟 Знакомство с JavaScript: Пишем наш первый скрипт! 🖥️

Привет, участники канала "Программирование с нуля"! Сегодня наша тема - основы JavaScript, одного из самых популярных языков программирования в мире. JavaScript является неотъемлемой частью веб-разработки, позволяющей создавать динамичные и интерактивные веб-страницы. Давайте начнем с написания вашего первого JavaScript скрипта - простого "Hello, World!".

### Что нам понадобится?
Для начала вам понадобится только текстовый редактор (например, Notepad++, Sublime Text, или VS Code) и любой современный веб-браузер.

### Создаем HTML-файл
Прежде всего, создадим простую HTML-страницу, которая будет основой для нашего JavaScript кода.

📝 Создайте файл index.html и добавьте следующий код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Мой первый JavaScript</title>
</head>
<body>
    <h1>Мой первый JavaScript</h1>
    <button onclick="displayMessage()">Нажми на меня</button>

    <script>
        function displayMessage() {
            alert('Hello, World!');
        }
    </script>
</body>
</html>

### Как это работает?
- В теге <script> мы пишем наш JavaScript. Здесь определена функция displayMessage(), которая выводит сообщение "Hello, World!" при вызове.
- Атрибут onclick в элементе <button> устанавливает, что функция displayHeight() будет вызвана при клике на кнопку.

### Запускаем нашу страницу
Откройте файл index.html в вашем браузере. Вы увидите страницу с заголовком и кнопкой. При клике на кнопку появится всплывающее окно с текстом "Hello, World!", что означает, что ваш JavaScript работает!

### Почему начать с JavaScript?
JavaScript является ключевым языком для веб-разработки. Он позволяет добавлять интерактивность, управлять содержимым веб-страницы, изменять стили и многое другое. Навыки работы с JavaScript открывают большие возможности для разработки веб-сайтов и приложений.

### Что дальше?
Экспериментируйте с кодом! Измените сообщение в функции alert(), добавьте больше кнопок с разными сообщениями или попробуйте использовать другие JavaScript функции, например console.log() для вывода данных в консоль браузера.

JavaScript - мощный инструмент в вашем арсенале разработчика. Продолжайте изучать и применять новые знания, и вы сможете создавать все более сложные и интересные проекты!

Счастливого кодирования! 🚀

#JavaScript #ПрограммированиеСНуля #ВебРазработка #Интерактивность #ОбучениеПрограммированию

91 viewsedited 17:02

About

Blog

Apps

Platform