Міжнародний Європейський Університет

ЗВІТИ З ЛАБОРАТОРНИХ РОБІТ

Дисципліна: "Програмування інтернет-застосувань"

Студентка: Добрякова Діана Олександрівна
Група: ІПЗ-23-301

Фото студента

Тема, мета та місце розташування сайту, звіту

Тема: ФУНКЦІОНАЛЬНЕ ЗАСТОСУВАННЯ JAVASCRIPT У HTML-ДОКУМЕНТІ. ВИКОРИСТАННЯ МАСИВІВ У JS-СЦЕНАРІЯХ. РЕАЛІЗАЦІЯ ПРОГРАМ ЗАСОБАМИ МОВИ JAVASCRIPT

Мета: Придбати практичні навички роботи з конструкціями мови JS, масивами та функціями у JS-сценаріях. Реалізація програм засобами мови JavaScript.

Місце розташування:

  1. Репозиторій власного WEB-застосунку
  2. Жива сторінка WEB-застосунку
  3. Репозиторій звітного HTML-документа
  4. Жива сторінка звітного HTML-документа

Завдання №1

function makeTransaction(quantity, pricePerDroid) {
  const totalPrice = quantity * pricePerDroid;
  return `You ordered ${quantity} droids worth ${totalPrice} credits!`;
}

console.log(makeTransaction(5, 3000));
console.log(makeTransaction(10, 1000));

Результат виконання:

Result 1

Завдання №2

function checkForSpam(message) {
  const lowerMessage = message.toLowerCase();
  return lowerMessage.includes("spam") || lowerMessage.includes("sale");
}

console.log(checkForSpam("Latest technology news"));     
console.log(checkForSpam("Get best SALE offers now!"));  
console.log(checkForSpam("Beware of SPAM messages"));    
console.log(checkForSpam("Trustworthy deal, no spam here"));
console.log(checkForSpam("Just chatting with friends"));

Результат виконання:

Result 2

Завдання №3

1.

function filterArray(numbers, value) {
  const filteredNumbers = [];
  for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] > value) {
      filteredNumbers.push(numbers[i]);
    }
  }
  return filteredNumbers;
}
console.log(filterArray([1, 2, 3, 4, 5], 3));
console.log(filterArray([10, 15, 20, 25], 17));
console.log(filterArray([5, 4, 3, 2, 1], 5));

Результат виконання:

Result 3_1

2.

function makeArray(firstArray, secondArray, maxLength) {
  const newArray = firstArray.concat(secondArray);
  if (newArray.length > maxLength) {
    return newArray.slice(0, maxLength);
  }
  return newArray;
}
console.log(makeArray(["Mango", "Poly"], ["Ajax", "Chelsea"], 3));
console.log(makeArray(["Mango", "Poly", "Houston"], ["Ajax", "Chelsea"], 10));

Результат виконання:

Result 3_2

Завдання №4

// Код для створення масиву, пошуку макс/мін значень, обміну та сортування
// (тут вставляємо ваш повний JS код із завдання №4)

Результат виконання:

Result 4

Завдання №5

// Код валідаторів форми та перевірки полів
// (тут вставляємо ваш повний JS код із завдання №5)

Результат виконання:

  1. Якщо дані введено правильно

    Result 5_1

  2. Якщо дані введено неправильно

    Result 5_2

Висновки

У ході виконання роботи було створено HTML-форму реєстрації користувача з перевіркою правильності введення даних. Було реалізовано такі етапи:

  • Створено структуру форми з обов’язковими полями: ім’я користувача, вік, дата народження, пароль та підтвердження пароля.
  • Реалізовано клієнтську валідацію засобами JavaScript:
    • перевірка введення цілого числа (для віку);
    • перевірка дійсного числа (для зарплати);
    • перевірка дати у форматі DD.MM.YYYY;
    • перевірка співпадіння паролів;
    • контроль заповнення обов’язкових полів, позначених символом (*).
  • Додано виведення повідомлень про помилки біля відповідних полів.
  • У разі успішного заповнення форми виводиться коротке зведення введених даних.

Було розроблено функціональну форму з гнучкою перевіркою введення, що забезпечує коректність даних перед їх надсиланням на сервер. Отримані знання можна застосовувати для створення реальних веб-форм реєстрації, авторизації або зворотного зв’язку.