script.js - master - Orpheus/laba4

script.js
263 строки11 KB
Orpheus
laba 4
09 июн 2025, 05:53
09 июн 2025, 05:53e50952d
// 1. Функция, возвращающая наибольшее из двух чисел
function getMaxNumber(a, b) {
    return a > b ? a : b;
}

// 2. Функция, возвращающая массив чисел от 0 до указанного числа
function createNumberArray(num) {
    return Array.from({length: num + 1}, (_, i) => i);
}

// 3. Функция, возвращающая массив четных чисел из переданного массива
function filterEvenNumbers(arr) {
    return arr.filter(num => num % 2 === 0);
}

// Тестирование функций
console.log('Наибольшее число:', getMaxNumber(5, 10)); // 10
console.log('Массив чисел:', createNumberArray(5)); // [0, 1, 2, 3, 4, 5]
console.log('Четные числа:', filterEvenNumbers([1, 2, 3, 4, 5, 6])); // [2, 4, 6]

// Работа с DOM и обработка событий
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('employeeForm');
    const saveBtn = document.getElementById('saveBtn');
    const resetBtn = document.getElementById('resetBtn');
    const loadBtn = document.getElementById('loadBtn');
    const messageDiv = document.getElementById('message');
    
    // Валидация полей формы
    const validateField = (field, errorElement, validationFn) => {
        const value = field.value.trim();
        const isValid = validationFn(value);
        
        if (!isValid) {
            field.classList.add('error');
            return false;
        } else {
            field.classList.remove('error');
            errorElement.textContent = '';
            return true;
        }
    };
    
    // Валидаторы для полей
    const validators = {
        lastName: value => {
            if (!value) {
                document.getElementById('lastNameError').textContent = 'Поле обязательно для заполнения';
                return false;
            }
            return true;
        },
        firstName: value => {
            if (!value) {
                document.getElementById('firstNameError').textContent = 'Поле обязательно для заполнения';
                return false;
            }
            return true;
        },
        gender: value => {
            const checked = document.querySelector('input[name="gender"]:checked');
            if (!checked) {
                document.getElementById('genderError').textContent = 'Выберите пол';
                return false;
            }
            return true;
        },
        phone: value => {
            const phoneRegex = /^[\+]\d{1}\s[\(]\d{3}[\)]\s\d{3}[\-]\d{2}[\-]\d{2}$/;
            if (!value) {
                document.getElementById('phoneError').textContent = 'Поле обязательно для заполнения';
                return false;
            } else if (!phoneRegex.test(value)) {
                document.getElementById('phoneError').textContent = 'Введите телефон в формате +7 (XXX) XXX-XX-XX';
                return false;
            }
            return true;
        },
        email: value => {
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!value) {
                document.getElementById('emailError').textContent = 'Поле обязательно для заполнения';
                return false;
            } else if (!emailRegex.test(value)) {
                document.getElementById('emailError').textContent = 'Введите корректный email';
                return false;
            }
            return true;
        },
        position: value => {
            if (!value) {
                document.getElementById('positionError').textContent = 'Выберите должность';
                return false;
            }
            return true;
        },
        responsibilities: value => {
            if (!value) {
                document.getElementById('responsibilitiesError').textContent = 'Поле обязательно для заполнения';
                return false;
            }
            return true;
        }
    };
    
    // Добавляем обработчики событий для валидации при вводе
    document.getElementById('lastName').addEventListener('blur', function() {
        validateField(this, document.getElementById('lastNameError'), validators.lastName);
    });
    
    document.getElementById('firstName').addEventListener('blur', function() {
        validateField(this, document.getElementById('firstNameError'), validators.firstName);
    });
    
    document.querySelectorAll('input[name="gender"]').forEach(radio => {
        radio.addEventListener('change', function() {
            validateField(this, document.getElementById('genderError'), validators.gender);
        });
    });
    
    document.getElementById('phone').addEventListener('blur', function() {
        validateField(this, document.getElementById('phoneError'), validators.phone);
    });
    
    document.getElementById('email').addEventListener('blur', function() {
        validateField(this, document.getElementById('emailError'), validators.email);
    });
    
    document.getElementById('position').addEventListener('change', function() {
        validateField(this, document.getElementById('positionError'), validators.position);
    });
    
    document.getElementById('responsibilities').addEventListener('blur', function() {
        validateField(this, document.getElementById('responsibilitiesError'), validators.responsibilities);
    });
    
    // Обработчик кнопки Сохранить
    saveBtn.addEventListener('click', function() {
        let isValid = true;
        
        // Проверяем все поля
        isValid &= validateField(
            document.getElementById('lastName'), 
            document.getElementById('lastNameError'), 
            validators.lastName
        );
        
        isValid &= validateField(
            document.getElementById('firstName'), 
            document.getElementById('firstNameError'), 
            validators.firstName
        );
        
        isValid &= validateField(
            document.querySelector('input[name="gender"]'), 
            document.getElementById('genderError'), 
            validators.gender
        );
        
        isValid &= validateField(
            document.getElementById('phone'), 
            document.getElementById('phoneError'), 
            validators.phone
        );
        
        isValid &= validateField(
            document.getElementById('email'), 
            document.getElementById('emailError'), 
            validators.email
        );
        
        isValid &= validateField(
            document.getElementById('position'), 
            document.getElementById('positionError'), 
            validators.position
        );
        
        isValid &= validateField(
            document.getElementById('responsibilities'), 
            document.getElementById('responsibilitiesError'), 
            validators.responsibilities
        );
        
        if (!isValid) {
            showMessage('Пожалуйста, исправьте ошибки в форме', 'error');
            return;
        }
        
        // Собираем данные формы в объект
        const formData = {
            lastName: document.getElementById('lastName').value.trim(),
            firstName: document.getElementById('firstName').value.trim(),
            gender: document.querySelector('input[name="gender"]:checked').value,
            phone: document.getElementById('phone').value.trim(),
            email: document.getElementById('email').value.trim(),
            position: document.getElementById('position').value,
            responsibilities: document.getElementById('responsibilities').value.trim()
        };
        
        // Сохраняем в localStorage
        localStorage.setItem('formData', JSON.stringify(formData));
        showMessage('Данные успешно сохранены', 'success');
    });
    
    // Обработчик кнопки Сбросить
    resetBtn.addEventListener('click', function() {
        // Очищаем сообщения об ошибках
        document.querySelectorAll('.error-message').forEach(el => {
            el.textContent = '';
        });
        
        // Убираем подсветку ошибок
        document.querySelectorAll('.error').forEach(el => {
            el.classList.remove('error');
        });
        
        showMessage('Форма очищена', 'success');
    });
    
    // Обработчик кнопки Выгрузить данные
    loadBtn.addEventListener('click', function() {
        const savedData = localStorage.getItem('formData');
        
        if (!savedData) {
            showMessage('Нет сохраненных данных', 'error');
            return;
        }
        
        try {
            const formData = JSON.parse(savedData);
            
            // Заполняем форму данными
            document.getElementById('lastName').value = formData.lastName || '';
            document.getElementById('firstName').value = formData.firstName || '';
            
            if (formData.gender) {
                document.querySelector(`input[name="gender"][value="${formData.gender}"]`).checked = true;
            }
            
            document.getElementById('phone').value = formData.phone || '';
            document.getElementById('email').value = formData.email || '';
            document.getElementById('position').value = formData.position || '';
            document.getElementById('responsibilities').value = formData.responsibilities || '';
            
            showMessage('Данные успешно загружены', 'success');
        } catch (e) {
            showMessage('Ошибка при загрузке данных', 'error');
            console.error(e);
        }
    });
    
    // Функция для показа сообщений
    function showMessage(message, type) {
        messageDiv.textContent = message;
        messageDiv.className = 'message ' + type;
        
        // Автоматическое скрытие сообщения через 5 секунд
        setTimeout(() => {
            messageDiv.textContent = '';
            messageDiv.className = 'message';
        }, 5000);
    }
});