Знакомство с JavaScript

JavaScript оживляет страницы: реагирует на клики, меняет текст и цвета, считает и даже делает игры.

📋 Заданий: 5✅ С автопроверкой: 4✨ Новых: 4

⚡Задания

Здесь пишем только JavaScript. console.log() и alert() выводят результат в консоль под редактором, а prompt() откроет окошко для ввода. При проверке ответы на prompt() подставляются сами.

1

Первая программа

легконовоеавтопроверка

Выведи в консоль фразу Привет, мир! с помощью console.log().

Показать ответ (сначала попробуй сам!)
console.log('Привет, мир!')
2

Окно с сообщением

легконовоеавтопроверка

Покажи окно alert() с текстом Добро пожаловать!, а потом выведи в консоль, сколько будет 2 + 2 (пусть посчитает JavaScript).

Показать ответ (сначала попробуй сам!)
alert('Добро пожаловать!')
console.log(2 + 2)
3

Меняем текст на странице

легконовоеавтопроверка

На странице есть заголовок <h1 id="title">. С помощью JavaScript поменяй его текст на Привет, JavaScript! и сделай его красным.

Подсказка

Текст меняется через title.textContent = ..., а цвет — через title.style.color = ...

Показать ответ (сначала попробуй сам!)
let title = document.querySelector('#title')
title.textContent = 'Привет, JavaScript!'
title.style.color = 'red'
4

Кнопка-приветствие

средненовоеавтопроверка

Когда пользователь нажимает на кнопку #hello, должно появляться окно с текстом Привет!

Подсказка

Используй button.addEventListener('click', function () { ... })

Показать ответ (сначала попробуй сам!)
let button = document.querySelector('#hello')

button.addEventListener('click', function () {
    alert('Привет!')
})
5

Сайт с рыцарями

сложнов VS Code

Создай сайт по картинке, а потом добавь анимацию появления рыцарей. Картинки: левый рыцарь, правый рыцарь. Макет можно скачать для Adobe XD.

Сайт с рыцарямиАнимация рыцарей

🖥️ Это большое задание — делай его в VS Code на компьютере и открывай страницу в браузере. Не забудь выложить результат на свой сайт на GitHub!

Показать ответ (сначала попробуй сам!)