web лабки / 15лб
.docxСтудент 410-і групи Бойко Є.А.
Лабораторна робота № 15
Тема: Динамічний HTML. Події. Програмування обробки подій
Мета: вивчити події JavaScrіpt. Освоїти розробку обробників подій на мові JavaScrіpt і методи організації інтерактивної взаємодії з користувачем.
Завдання 1
Частина 1
Скріншот:
Код програми:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
виконав студент 410-і групи<br>Бойко Є.А.<br>
<h1>
<p data-toggle="podskazka" title="Что-то не сработало?"
onmouseover="this.style.color = 'white'"
onmouseout="this.style.color = ''"
>
Наведи мышь, и текст исчезнет</p>
</h1>
</div></h1>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$(document).ready (function (){
$('[data-toggle="podskazka"]').tooltip ();
});
</script>
</body>
</html>Частина 2
Код програми:
Код в архіві
Завдання 2:
Скріншот
Код програми:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>15</title>
</head>
<body>
<style type="text/css">
.title {
font-weight: 700;
font-style: italic;
}
img {
margin-top: 50px;
width: 500px;
height: 500px;
object-fit: contain;
}
</style>
<img src="img.jpg">
<script type="text/javascript">
const img = document.querySelector('img');
img.addEventListener('mouseenter', () => {
img.style.width = parseInt(getComputedStyle(img).width) + 30 + "px";
img.style.height = parseInt(getComputedStyle(img).height) + 30 + "px";
});
</script>
<script type="text/javascript">
img.addEventListener('click', () => {
document.write(Date());
});
/*замена на lдругую картинку
img.onclick = function() {
img.src = '2.jpg';
}*/
</script>
</body>
</html>
Висновок: на лабороторнiй роботi 15 я вивчив події JavaScrіpt. Освоїв розробку обробників подій на мові JavaScrіpt і методи організації інтерактивної взаємодії з користувачем.