Web урок #7

HTML, CSS и JavaScript. Три языка — одна программа.

В этом уроке мы создадим большую красную кнопку, которая будет располагаться в центре окна браузера. При нажатии на кнопку раздастся сигнал тревоги. Готов? Поехали!

Для создания кнопки давай воспользуемся услугами HTML. Как обычно, создадим папку, а внутри нее создадим файл «кнопка.html»

С помощью блокнота вставляем в наш файл следующий код:

<html>
<head>
<link rel="stylesheet" href="style.css">
</head>

<body>
<script src = "action.js"></script>

<form>
 <input type = 'button' class="button1" value = 'тревога' onClick = 'x()' />

</form>
</html>

Давайте разберемся, что мы тут накодили))

<link rel="stylesheet" href="style.css"> 

Эта строчка — ссылка на файл «style.css» со стилем кнопки, который мы создадим чуть позже.

<script src = "action.js"></script>

А это строка — ссылка на файл «script.js» c функционалом нашей кнопки, (script.js запустит звук 1.mp3 при нажатии на кнопку) его мы тоже создадим чуть позже.

 <input type = 'button' class="button1" value = 'тревога' onClick = 'x()' /> 

А вот и сама кнопка, которая при нажатии, вызывает функцию ‘x()’

Теперь давай создадим «style.css». Если у тебя с этим возникли проблемы, вернись к уроку #4. Если нет, то помести в созданный файл код с настройками внешнего вида кнопки:

.button1
{
text-align: center;
text-decoration: blink;
background-color: red;
width: 300px;
height: 150px;
margin-top: 15%;
margin-left:40%;
border-radius: 25px;
}

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

Теперь пришло время создать функционал для нашей кнопки, это мы сделаем в файле «script.js»

function x() {
var audio = new Audio();  // Создаём новый элемент Audio
audio.src = '1.mp3';      // Указываем путь к звуку
audio.autoplay = true;    // Автоматически запускаем
 } 

!!! Обратите внимание, что скрипт сможет запустить звук 1.mp3 только если этот самый звук лежит в той же папке, что и script.js

Если тебе вдруг что-то непонятно, не молчи!!! Обязательно попроси у преподавателя в студии объяснить все более подробно!

Удачи!!! Друг мой!!!