Звіти з лабораторних робіт
з дисципліни "WEB-орієнтовані технології."
Основи Frontend та Backend розробок
Студента групи ІО-15 Жердєва Данила
Звіти з лабораторних робіт
з дисципліни "WEB-орієнтовані технології."
Основи Frontend та Backend розробок
Студента групи ІО-15 Жердєва Данила
JavaScript — це мова програмування, яка широко використовується для додавання інтерактивності та динамічного поведінки до веб-сторінок. Він підтримує різні функціональні можливості, що дозволяють розробникам створювати складні та багатофункціональні веб-додатки.
JavaScript дозволяє взаємодіяти з елементами HTML на сторінці, змінюючи їх структуру, стиль і зміст.
// Зміна тексту елемента з id "example"
document.getElementById("example").innerText = "Новий текст";
JavaScript може реагувати на різні події, такі як кліки миші, натискання клавіш, завантаження сторінки тощо.
// Додавання обробника події кліку до кнопки
document.getElementById("myButton").addEventListener("click", function() {
alert("Кнопка натиснута!");
});
AJAX (Asynchronous JavaScript and XML) дозволяє здійснювати асинхронні HTTP-запити до сервера без перезавантаження сторінки.
// Виконання AJAX-запиту до сервера
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.send();
JavaScript може використовуватися для перевірки даних, введених користувачем у форми, перед відправкою їх на сервер.
// Валідація форми перед відправкою
function validateForm() {
var name = document.forms["myForm"]["name"].value;
if (name == "") {
alert("Ім'я не може бути порожнім");
return false;
}
}
JavaScript разом з CSS може використовуватися для створення анімацій та динамічних ефектів на веб-сторінці.
// Приклад анімації зміни кольору елемента
document.getElementById("animate").style.transition = "background-color 2s";
document.getElementById("animate").style.backgroundColor = "blue";
Існує багато бібліотек і фреймворків, таких як jQuery, React, Angular і Vue, які спрощують і розширюють функціональні можливості JavaScript.
// Приклад використання jQuery для зміни тексту елемента
$(document).ready(function() {
$("#example").text("Новий текст за допомогою jQuery");
});
JavaScript дозволяє виконувати функції через певні інтервали часу або з затримкою.
// Виконання функції з затримкою в 2 секунди
setTimeout(function() {
alert("Це повідомлення з'явилося через 2 секунди");
}, 2000);
// Виконання функції кожні 3 секунди
setInterval(function() {
console.log("Це повідомлення з'являється кожні 3 секунди");
}, 3000);