header('Cache-Control: public, max-age=3600'); // Срок жизни кэша — 1 час
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 3600) . ' GMT');

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', false); // Параметр false делает запрос синхронным
xhr.send();
console.log(xhr.responseText);

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true); // true — делаем запрос асинхронным
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(xhr.responseText);
    } else {
        console.error('Ошибка запроса:', xhr.statusText);
    }
};
xhr.send();

fetch('/api/data')
    .then(response => response.text())
    .then(text => console.log(text))
    .catch(error => console.error('Ошибка запроса:', error));

<preserveAspectRatio-value> = [ <align> || <meetOrSlice> ]

<svg width="300px" height="200px">
  <rect x="0" y="0" width="100%" height="100%"/>
  <!-- Круг фиксированного размера -->
  <circle cx="50" cy="50" r="50" fill="blue"/>
</svg>

<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  <circle cx="50" cy="50" r="50" fill="blue"/>
</svg>

let myVar = undefined;
console.log(myVar.trim()); // Uncaught TypeError: Cannot read properties of undefined (reading 'trim')

const element = document.querySelector('.nonexistent-class');
console.log(element.textContent.trim()); // Uncaught TypeError: Cannot read properties of null (reading 'trim')

let str = someFunctionThatReturnsValue();
if (typeof str === 'string') {
    console.log(str.trim());
} else {
    console.error('Expected a string but got:', typeof str);
}

const result = data?.trim() || '';
console.log(result);

const element = document.querySelector('.my-element');
if (element) {
    console.log(element.textContent.trim());
} else {
    console.warn('Element not found!');
}

let obj = {};
obj.name = 'John Doe';
console.log(obj.name.trim()); // Всё хорошо

let anotherObj = null;
try {
    console.log(anotherObj.name.trim()); // Приведет к ошибке
} catch(e) {
    console.error('Ошибка:', e.message);
}

// Плохой пример (медленно)
for(let i = 0; i < 100; i++) {
    $("#myDiv").addClass("active");
}

// Хороший пример (быстро)
let myDiv = $("#myDiv");
for(let i = 0; i < 100; i++) {
    myDiv.addClass("active");
}

// Плохой пример (каждый item слушает событие)
$(".item").on("click", function() {});

// Хороший пример (делегация)
$("#items-container").on("click", ".item", function() {});

// Медленно
$("#element").addClass("loading");
$("#element").text("Loading...");

// Быстро
$("#element")
    .addClass("loading")
    .text("Loading...");

// Ленивая загрузка с контролем частотности
let timer;
$("button").on("click", function() {
    clearTimeout(timer);
    timer = setTimeout(() => $.get("/data"), 500);
});

// Замена тяжелой анимации css-анимацией
$("#element").animate({ opacity: 0 }, 500);

// Лучше
$("#element").fadeOut(500);

// Создать новый div и добавить его в конец body
$('<div>Новый элемент!</div>').appendTo('body');

// Добавить элемент в начало списка ul
$('<li>Новый пункт списка</li>').prependTo('ul');

// Вставить элемент после другого элемента
$('<button>Нажмите меня</button>').insertAfter('#targetButton');

// Копируем элемент и помещаем копию в конец страницы
$('#myDiv').clone().appendTo('body');

// Перемещаем элемент вверх по документу
$('#myDiv').detach().prependTo('body');

// Удаляет элемент и его детей
$('#oldElement').remove();

// Убирает элемент, но сохраняет его содержимое
$('#outerContainer').empty();

// Устанавливаем атрибут href у ссылки
$('a').attr('href', 'https://example.com');

// Получаем значение атрибута title
var titleValue = $('img').attr('title');

// Проверяем свойство checked у checkbox
if ($('#checkboxID').prop('checked')) {
    alert('Checkbox отмечен!');
}

// Устанавливаем disabled
$('#buttonID').prop('disabled', true);

// Добавляет класс active к кнопке
$('#btn').addClass('active');

// Удаляет класс active
$('#btn').removeClass('active');

// Переключает класс hidden
$('#panel').toggleClass('hidden');

// Меняем фон кнопки
$('#btn').css({
    backgroundColor: 'blue',
    color: 'white'
});

// Узнать ширину элемента
var width = $('#btn').css('width');

// Нажали на кнопку — выводим сообщение
$('#btn').on('click', function() {
    alert('Вы нажали кнопку!');
});

// Наведение мыши
$('#element').hover(function() {
    $(this).addClass('hover-effect');
}, function() {
    $(this).removeClass('hover-effect');
});

// Удаляем обработчик клика
$('#btn').off('click');

// Неэффективно
for(var i = 0; i < 100; i++) {
    $('#element').addClass('animation');
}

// Эффективно
var cachedElement = $('#element');
for(var i = 0; i < 100; i++) {
    cachedElement.addClass('animation');
}

// Несколько операций разом
$('#element').addClass('active').css({color:'green'});

$('.item:first').css('background-color', 'yellow');

$(this).find('li:first').addClass('active');

$(this).parents('.block:first').find('li').removeClass('active');

$('.item').first().css('background-color', 'yellow');

$('.item:first').css('background-color', 'yellow');

$('ul li:last').hide();

$('tr:odd').css('background-color', '#fafafa');

$('.list-item:eq(2)').addClass('special');

.element {
    float: none;
}

.element {
    clear: both;
}

.parent-element {
    overflow: hidden;
}

.element {
    display: block;
}

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Отмена float</title>
    <style>
        .float-left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 10px;
        }

        .no-float {
            float: none;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="float-left">Плавающий элемент</div>
    <div class="no-float">Отменённый плавающий элемент</div>
</body>
</html>

let svgCircle = document.getElementById('myCircle');

let circles = document.getElementsByClassName('circle');

let svgElements = document.querySelectorAll('svg *');

let circle = document.getElementById('myCircle');
circle.setAttribute('fill', 'blue');
circle.setAttribute('stroke', 'red');
circle.setAttribute('stroke-width', '2');

let rectangle = document.getElementById('myRectangle');
rectangle.setAttribute('width', '100');
rectangle.setAttribute('height', '50');
rectangle.setAttribute('x', '50');
rectangle.setAttribute('y', '50');

let path = document.getElementById('myPath');
path.setAttribute('d', 'M10,10 L90,90 Z');

<svg width="200" height="200">
    <circle id="animatedCircle" cx="50" cy="50" r="40" fill="blue" />
</svg>

let circle = document.getElementById('animatedCircle');

function animateCircle() {
    let angle = 0;
    setInterval(() => {
        angle += 10;
        circle.setAttribute('cx', Math.cos(angle * Math.PI / 180) * 50 + 100);
        circle.setAttribute('cy', Math.sin(angle * Math.PI / 180) * 50 + 100);
    }, 100);
}

animateCircle();

<svg width="200" height="200">
    <circle id="interactiveCircle" cx="100" cy="100" r="40" fill="blue" />
</svg>

let interactiveCircle = document.getElementById('interactiveCircle');

interactiveCircle.addEventListener('mouseenter', () => {
    interactiveCircle.setAttribute('fill', 'red');
});

interactiveCircle.addEventListener('mouseleave', () => {
    interactiveCircle.setAttribute('fill', 'blue');
});

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <path d="M10,10 Q50,90 90,10" id="motion-path" />
    <circle cx="10" cy="10" r="5" fill="red" id="ball" />
</svg>

gsap.to("#ball", {
    duration: 2,
    motionPath: "#motion-path",
    repeat: -1,
    yoyo: true
});

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <rect x="20" y="20" width="60" height="60" fill="blue" id="square" />
</svg>

gsap.fromTo("#square", {
    scale: 0,
    rotation: 0
}, {
    scale: 1,
    rotation: 360,
    duration: 2,
    ease: "power2.out"
});

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="purple" id="circle" />
</svg>

gsap.to("#circle", {
    duration: 2,
    fill: "orange",
    opacity: 0.5,
    repeat: -1,
    yoyo: true
});

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="80" height="80" fill="teal" id="rect" />
</svg>

let tl = gsap.timeline();
tl
    .to("#rect", { x: 50, duration: 1 })
    .to("#rect", { y: 50, duration: 1 })
    .to("#rect", { scale: 0.5, duration: 1 });

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="none" stroke="black" stroke-width="4" id="logo" />
</svg>

gsap.to("#logo", {
    duration: 2,
    strokeDashoffset: 0,
    strokeDasharray: "251.2",
    ease: "power2.inOut"
});

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="none" stroke="blue" stroke-width="4" id="infographic" />
</svg>

gsap.to("#infographic", {
    duration: 2,
    attr: { r: 60 },
    ease: "elastic.out"
});

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

.icon {
    background-image: url('icon.svg');
    width: 50px;
    height: 50px;
}

<object type="image/svg+xml" data="icon.svg" width="50" height="50"></object>

.circle {
    fill: red; /* Заливка */
    stroke: blue; /* Обводка */
    stroke-width: 2; /* Толщина обводки */
}

.rotate-icon {
    animation: rotate 2s infinite linear;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.resize-icon {
    width: 100px;
    height: 100px;
}

<svg class="loading-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="#cccccc" />
</svg>

.loading-icon circle {
    animation: pulse 1s infinite alternate;
}

@keyframes pulse {
    from { fill: #cccccc; }
    to { fill: #ff0000; }
}

<svg class="gradient-circle" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="red" />
            <stop offset="100%" stop-color="blue" />
        </linearGradient>
    </defs>
    <circle cx="50" cy="50" r="40" fill="url(#grad1)" />
</svg>